Fufan Chat (React)

基于 fufan-chat-web（Vue 3）全量对齐的 React 版本。

技术栈

• React 18 + TypeScript + Vite 5
• Zustand / React Router 7
• Ant Design 6（管理壳交互，对齐 Element Plus 能力）
• Quill 富文本输入（与 Vue RichTextEditor 一致）
• md-editor-rt（与 Vue md-editor-v3 同系列）
• UnoCSS 0.60 + 完整 SCSS 主题（dark / dark-blue）
• VxeTable：通过 Vue 子应用挂载原版 vxe-table/index.vue（官方无 React 版，避免表格能力缩水）
• SSE：@microsoft/fetch-event-source

与 Vue 版对齐说明

模块	实现方式
聊天输入	Quill + Enter 发送
Markdown	md-editor-rt 预览
布局	Chat / Left / Top / LeftTop 四套 + TagsView + Settings + 水印
主题切换	View Transition 圆扩散动画
UnoCSS 页	同款 atomic 类名
Element 表格	Ant Design 完整 CRUD（对齐 element-plus/index.vue）
Vxe 表格	原版 Vue 页面 + Element Plus + VxeTable 插件
登录	Owl 猫头鹰 + 密码框焦点动画
Hook 演示	useWatermark / useFetchSelect / useFullscreenLoading

开发

pnpm install
pnpm dev

默认 http://localhost:8000 ，API 代理 127.0.0.1:8001。

构建

pnpm build

目录

src/
├── api/              # 与 Vue 相同接口路径
├── stores/           # Zustand（对应 Pinia）
├── layouts/          # 四套布局 + 导航/侧栏/标签页
├── pages/            # 业务页面
├── components/       # RichTextEditor、ChatHistory、ThemeSwitch 等
├── hooks/            # useTheme、useWatermark 等
├── vue-pages/        # VxeTable 原版 Vue SFC（仅该模块）
└── styles/           # 从 Vue 复制的完整主题 SCSS