- {/* Logo */}
-
-
-
-
-
-
- {SITE_CONFIG.name}
-
-
- 开源
-
-
-
+const NAV_ITEMS = [
+ { text: '功能特性', url: '#features' },
+ { text: '价格方案', url: '#pricing' },
+ { text: '用户评价', url: '#testimonials' },
+];
+
+export default function Header() {
+ const [open, setOpen] = useState(false);
- {/* 桌面端导航 */}
-
);
}
diff --git a/apps/DocFlow/src/app/_components/homepage/hero.tsx b/apps/DocFlow/src/app/_components/homepage/hero.tsx
deleted file mode 100644
index 2e0361f..0000000
--- a/apps/DocFlow/src/app/_components/homepage/hero.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import Link from 'next/link';
-import { Sparkles, ChevronRight } from 'lucide-react';
-
-import { SITE_CONFIG } from './constants';
-
-export function Hero() {
- return (
-
-
-
-
- 基于 Tiptap + Yjs 构建的 AI 写作平台
-
-
-
-
- {SITE_CONFIG.name}
-
-
-
- {SITE_CONFIG.tagline}
-
-
-
-
- 基于 Tiptap + Yjs 构建的新一代智能协作编辑器,集成 AI 续写、RAG 知识库检索、AI
- 播客生成等核心功能。支持多人实时协作编辑,让团队像使用 Google Docs
- 一样流畅协作,同时拥有强大的 AI 能力加持。
-
-
-
-
-
开始创作
-
-
-
-
- );
-}
diff --git a/apps/DocFlow/src/app/_components/homepage/home.tsx b/apps/DocFlow/src/app/_components/homepage/home.tsx
new file mode 100644
index 0000000..bb3cbaf
--- /dev/null
+++ b/apps/DocFlow/src/app/_components/homepage/home.tsx
@@ -0,0 +1,886 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+ FileEdit,
+ Menu,
+ X,
+ BarChart2,
+ Target,
+ TrendingUp,
+ Users,
+ GitBranch,
+ MessageSquare,
+ Lock,
+ Shield,
+ RefreshCw,
+ CheckCircle,
+ Plus,
+ Minus,
+ Star,
+ Globe,
+ FileText,
+ Github,
+ Twitter,
+ Mail,
+} from 'lucide-react';
+
+// ─── Data ─────────────────────────────────────────────────────────────────────
+
+const SITE = {
+ name: 'DocFlow',
+ url: 'https://www.codecrack.cn',
+ description: '智能文档协作平台,让写作与团队协同更高效。',
+};
+
+const NAV_ITEMS = [
+ { text: '功能特性', url: '#features' },
+ { text: '价格方案', url: '#pricing' },
+ { text: '用户评价', url: '#testimonials' },
+];
+
+const BENEFITS = [
+ {
+ title: 'AI 智能写作',
+ description:
+ '内置强大的 AI 写作助手,支持智能续写、内容改写与创意激发。无论是日报、报告还是创意内容,都能高效产出。',
+ mockup: 'editor' as const,
+ bullets: [
+ {
+ Icon: BarChart2,
+ title: '智能内容补全',
+ desc: '基于上下文理解,自动给出高质量的写作建议与续写内容。',
+ },
+ {
+ Icon: Target,
+ title: '自定义写作目标',
+ desc: '设定风格、语气和字数目标,让 AI 按你的要求精准输出。',
+ },
+ {
+ Icon: TrendingUp,
+ title: '多轮对话润色',
+ desc: '通过对话式交互持续优化文章,直到满意为止。',
+ },
+ ],
+ },
+ {
+ title: '实时多人协作',
+ description:
+ '基于 Yjs CRDT 算法实现零冲突的实时协作编辑,支持多人同时在线修改,所有变更即时同步,团队效率倍增。',
+ mockup: 'collab' as const,
+ bullets: [
+ {
+ Icon: Users,
+ title: '多人同步编辑',
+ desc: '多位团队成员可同时编辑同一文档,操作实时可见。',
+ },
+ {
+ Icon: GitBranch,
+ title: '完整版本历史',
+ desc: '每次修改均自动记录,随时一键回溯到任意历史版本。',
+ },
+ {
+ Icon: MessageSquare,
+ title: '评论与反馈',
+ desc: '在文档任意位置添加评论,方便团队沟通与审阅。',
+ },
+ ],
+ },
+ {
+ title: '安全可靠存储',
+ description:
+ '采用企业级数据加密方案,完善的权限管理体系,配合自动云端备份,让你的文档资产始终安全无忧。',
+ mockup: 'security' as const,
+ bullets: [
+ { Icon: Lock, title: '端到端数据加密', desc: '传输与存储全程加密,你的数据只有你能看到。' },
+ {
+ Icon: Shield,
+ title: '细粒度权限控制',
+ desc: '对每个文档、每位成员精准设置查看、编辑或管理权限。',
+ },
+ {
+ Icon: RefreshCw,
+ title: '自动备份恢复',
+ desc: '增量备份实时运行,即使意外发生也能秒速恢复文档。',
+ },
+ ],
+ },
+];
+
+const TIERS = [
+ {
+ name: '免费版',
+ price: 0,
+ features: [
+ '最多 3 个文档',
+ '基础 AI 写作(每月 50 次)',
+ '单人使用',
+ '云端自动保存',
+ '邮件支持',
+ ],
+ },
+ {
+ name: '专业版',
+ price: 99,
+ features: [
+ '无限文档数量',
+ '高级 AI 写作(无限次)',
+ '最多 10 人协作',
+ '完整版本历史',
+ '优先客服支持',
+ '自定义域名',
+ ],
+ },
+ {
+ name: '企业版',
+ price: -1,
+ features: [
+ '无限文档 & 空间',
+ '专属 AI 模型微调',
+ '无限成员数量',
+ '私有化部署支持',
+ '专属客户成功经理',
+ '定制化培训服务',
+ ],
+ },
+];
+
+const FAQS = [
+ {
+ q: 'DocFlow 支持哪些文档格式?',
+ a: 'DocFlow 支持 Markdown、富文本(WYSIWYG)、导入导出 Word/PDF 格式。内置的 Tiptap 编辑器提供超过 50 种内容块,满足绝大多数文档场景需求。',
+ },
+ {
+ q: '实时协作最多支持多少人?',
+ a: '基于 Yjs CRDT 算法,理论上支持无限人数同时协作编辑。专业版支持 10 人,企业版支持无限成员,零冲突实时同步。',
+ },
+ {
+ q: 'AI 写作助手使用什么模型?',
+ a: 'DocFlow 集成了主流大语言模型(包括 GPT-4、Claude 等),并通过 RAG 知识库增强,让 AI 能结合你的文档上下文给出更精准的建议。',
+ },
+ {
+ q: '我的文档数据安全吗?',
+ a: '完全安全。所有数据在传输和存储过程中均采用 AES-256 加密。我们不会将你的数据用于模型训练,企业版还支持私有化本地部署。',
+ },
+ {
+ q: '可以免费试用吗?',
+ a: '当然!免费版永久有效,无需绑定信用卡。你可以立即注册体验基础功能,随时升级到专业版解锁全部能力。',
+ },
+];
+
+const TESTIMONIALS = [
+ {
+ name: '张伟',
+ role: '某互联网公司产品总监',
+ initials: '张',
+ message:
+ 'DocFlow 的 AI 写作功能让我们的产品文档效率提升了 3 倍,实时协作功能更是彻底取代了我们之前繁琐的邮件来回流程。',
+ },
+ {
+ name: '李晓梅',
+ role: '独立内容创作者',
+ initials: '李',
+ message:
+ '用了很多编辑器,DocFlow 是唯一让我感觉"在用未来工具"的产品。AI 续写和改写功能真的极大提升了我的创作效率。',
+ },
+ {
+ name: '王建国',
+ role: '技术团队负责人',
+ initials: '王',
+ message:
+ '基于 Yjs 的协作体验非常丝滑,零延迟、零冲突,我们整个研发团队的文档协作效率得到了质的提升。强烈推荐!',
+ },
+];
+
+const STATS = [
+ {
+ title: '10 万+',
+ Icon: FileText,
+ cls: 'text-violet-600',
+ desc: '每日新建文档数,用户覆盖个人创作者、企业团队与高校师生。',
+ },
+ {
+ title: '4.9 分',
+ Icon: Star,
+ cls: 'text-yellow-500',
+ desc: '用户综合评分,持续保持在各平台同类产品最高水平。',
+ },
+ {
+ title: '50+',
+ Icon: Globe,
+ cls: 'text-green-600',
+ desc: '国家与地区的用户正在使用 DocFlow 管理他们的文档资产。',
+ },
+];
+
+const BRANDS = ['Notion', 'Stripe', 'Dropbox', 'Shopify', 'Slack', 'Linear'];
+
+// ─── Mockups ──────────────────────────────────────────────────────────────────
+
+function EditorMockup() {
+ return (
+
+ );
+}
+
+function CollabMockup() {
+ const users = [
+ { color: '#7c3aed', name: 'A', label: '张三正在编辑第 3 段...' },
+ { color: '#059669', name: 'B', label: '李四正在评论...' },
+ { color: '#d97706', name: 'C', label: '王五已查看' },
+ ];
+
+ return (
+
+
+
+
+
+
实时协作 · 3 人在线
+
+ {users.map((u) => (
+
+ {u.name}
+
+ ))}
+
+
+
+
+
+
+ {users.map((u) => (
+
+
+ {u.name}
+
+
{u.label}
+
+ ))}
+
+
+
+
+ );
+}
+
+function SecurityMockup() {
+ const rows = [
+ { label: '查看权限', on: true },
+ { label: '编辑权限', on: true },
+ { label: '管理权限', on: false },
+ { label: '分享权限', on: false },
+ ];
+
+ return (
+
+
+
+ {rows.map(({ label, on }) => (
+
+ ))}
+
+ 🔒 AES-256 加密已启用
+
+
+
+ );
+}
+
+function HeroMockup() {
+ const avatarColors = ['#7c3aed', '#059669', '#d97706'];
+
+ return (
+
+
+
+
+
+ {avatarColors.map((color, i) => (
+
0 ? '-6px' : undefined }}
+ >
+ {['A', 'B', 'C'][i]}
+
+ ))}
+
3 人正在协作
+
+
+
+
+ );
+}
+
+// ─── Sections ─────────────────────────────────────────────────────────────────
+
+function SiteHeader() {
+ const [open, setOpen] = useState(false);
+ const [activeHash, setActiveHash] = useState('');
+
+ useEffect(() => {
+ const handleHashChange = () => {
+ setActiveHash(window.location.hash);
+ };
+
+ handleHashChange();
+
+ window.addEventListener('hashchange', handleHashChange);
+
+ return () => window.removeEventListener('hashchange', handleHashChange);
+ }, []);
+
+ return (
+
+ );
+}
+
+function Hero() {
+ return (
+
+
+
+
+
+
+ 智能、高效、简洁的文档协作平台
+
+
+ 基于 Tiptap + Yjs 构建,支持实时多人协作、AI
+ 智能写作与丰富内容格式,让每一份文档都焕发生命力。
+
+
+
+
+
+
+
+
+ );
+}
+
+function Logos() {
+ return (
+
+
+
+ 被全球 2000+ 团队与个人创作者信赖
+
+
+ {BRANDS.map((b) => (
+
+ {b}
+
+ ))}
+
+
+
+ );
+}
+
+function Benefits() {
+ const mockupMap = { editor: EditorMockup, collab: CollabMockup, security: SecurityMockup };
+
+ return (
+
+ {BENEFITS.map((benefit, i) => {
+ const MockupComp = mockupMap[benefit.mockup];
+
+ return (
+
+
+
{benefit.title}
+
{benefit.description}
+
+ {benefit.bullets.map((b) => (
+
+ ))}
+
+
+
+
+
+
+ );
+ })}
+
+ );
+}
+
+function Pricing() {
+ return (
+
+ 价格方案
+ 简单透明,无任何隐藏费用。按需选择,随时升级。
+
+ {TIERS.map((tier, i) => {
+ const hl = i === 1;
+ const label = tier.price === 0 ? '免费注册' : tier.price === -1 ? '联系销售' : '立即升级';
+ const priceDisplay =
+ tier.price === 0 ? '免费' : tier.price === -1 ? '联系我们' : `¥${tier.price}`;
+
+ return (
+
+ {hl && (
+
+ 最受欢迎
+
+ )}
+
+ {tier.name}
+
+
+
+ {priceDisplay}
+
+ {tier.price > 0 && (
+
+ /月
+
+ )}
+
+
+ {label}
+
+
+ {tier.features.map((f) => (
+ -
+
+
+ {f}
+
+
+ ))}
+
+
+ );
+ })}
+
+
+ );
+}
+
+function Testimonials() {
+ return (
+
+ 用户真实评价
+ 听听已经在使用 DocFlow 的用户怎么说。
+
+ {TESTIMONIALS.map((t) => (
+
+ ))}
+
+
+ );
+}
+
+function FAQ() {
+ const [openIdx, setOpenIdx] = useState
(null);
+
+ return (
+
+
+
+
+ {FAQS.map((faq, i) => (
+
+
+
+
+ ))}
+
+
+
+ );
+}
+
+function Stats() {
+ return (
+
+
+ {STATS.map((s) => (
+
+
+
{s.title}
+
{s.desc}
+
+ ))}
+
+
+ );
+}
+
+function CTA() {
+ return (
+
+
+
+
+
+ 加入超过 10 万用户,开启智能写作之旅
+
+
+ 你的高效文档创作之路从这里开始。立即免费注册 DocFlow,体验 AI 加持的协作编辑新方式!
+
+
+
+
+ );
+}
+
+function SiteFooter() {
+ return (
+
+ );
+}
+
+// ─── Root ─────────────────────────────────────────────────────────────────────
+
+export default function Homepage() {
+ return (
+
+ );
+}
diff --git a/apps/DocFlow/src/app/_components/homepage/homepage-loader.tsx b/apps/DocFlow/src/app/_components/homepage/homepage-loader.tsx
new file mode 100644
index 0000000..355af17
--- /dev/null
+++ b/apps/DocFlow/src/app/_components/homepage/homepage-loader.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const Homepage = dynamic(() => import('./home'), {
+ ssr: false,
+ loading: () => ,
+});
+
+export default function HomepageLoader() {
+ return ;
+}
diff --git a/apps/DocFlow/src/app/_components/homepage/index.ts b/apps/DocFlow/src/app/_components/homepage/index.ts
index bdb5768..94ec8df 100644
--- a/apps/DocFlow/src/app/_components/homepage/index.ts
+++ b/apps/DocFlow/src/app/_components/homepage/index.ts
@@ -1,6 +1,2 @@
-export { Header } from './header';
-export { Hero } from './hero';
-export { Features } from './features';
-export { Contact } from './contact';
-export { Footer } from './footer';
-export { SITE_CONFIG, STRUCTURED_DATA } from './constants';
+export { default as Header } from './header';
+export { default as Footer } from './footer';
diff --git a/apps/DocFlow/src/app/_components/homepage/types.ts b/apps/DocFlow/src/app/_components/homepage/types.ts
deleted file mode 100644
index 9a68a3a..0000000
--- a/apps/DocFlow/src/app/_components/homepage/types.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { LucideIcon } from 'lucide-react';
-
-export interface FeatureItem {
- icon: LucideIcon;
- title: string;
- description: string;
- gradient: string;
- bgColor: string;
- borderColor: string;
- hoverBorder: string;
- textColor: string;
-}
-
-export interface NavLink {
- href: string;
- label: string;
- icon: LucideIcon;
- variant: 'primary' | 'secondary' | 'default';
-}
-
-export interface ContactMethod {
- type: string;
- title: string;
- description: string;
- buttonText: string;
- gradient: string;
- hoverBorder: string;
- hoverShadow: string;
- href: string;
- delay: string;
-}
diff --git a/apps/DocFlow/src/app/page.tsx b/apps/DocFlow/src/app/page.tsx
index 7fafb1c..1458af9 100644
--- a/apps/DocFlow/src/app/page.tsx
+++ b/apps/DocFlow/src/app/page.tsx
@@ -1,84 +1,5 @@
-import type { Metadata } from 'next';
-
-import {
- Header,
- Hero,
- Features,
- Contact,
- Footer,
- SITE_CONFIG,
- STRUCTURED_DATA,
-} from './_components/homepage';
-
-export const metadata: Metadata = {
- title: 'DocFlow - AI 智能写作平台 | 基于 Tiptap+Yjs 的实时协作编辑器',
- description: SITE_CONFIG.description,
- keywords: [
- '富文本编辑器',
- '在线文本编辑器',
- '协作文档编辑器',
- 'AI 写作',
- 'AI 续写',
- 'Tiptap',
- 'Yjs',
- '实时协作',
- '多人协作编辑',
- 'Markdown 编辑器',
- 'RAG 知识库',
- 'AI 播客生成',
- ],
- openGraph: {
- type: 'website',
- locale: 'zh_CN',
- url: SITE_CONFIG.url,
- siteName: SITE_CONFIG.name,
- title: `${SITE_CONFIG.name} - ${SITE_CONFIG.tagline}`,
- description: SITE_CONFIG.description,
- images: [{ url: '/og-image.png', width: 1200, height: 630, alt: SITE_CONFIG.name }],
- },
- robots: {
- index: true,
- follow: true,
- googleBot: {
- index: true,
- follow: true,
- 'max-video-preview': -1,
- 'max-image-preview': 'large',
- 'max-snippet': -1,
- },
- },
- alternates: { canonical: SITE_CONFIG.url },
-};
+import HomepageLoader from './_components/homepage/homepage-loader';
export default function Page() {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
- >
- );
+ return ;
}
diff --git a/apps/DocFlow/src/extensions/Bilibili/BilibiliDialog.tsx b/apps/DocFlow/src/extensions/Bilibili/BilibiliDialog.tsx
index 153801f..11bc3fc 100644
--- a/apps/DocFlow/src/extensions/Bilibili/BilibiliDialog.tsx
+++ b/apps/DocFlow/src/extensions/Bilibili/BilibiliDialog.tsx
@@ -62,7 +62,6 @@ export const BilibiliDialog: React.FC = ({ editor, isOpen,
})
.run();
- // 重置表单
setUrl('');
setWidth(560);
setHeight(315);