# Finyx Frontend Finyx Frontend 是一个基于 Vue 3 + TypeScript + Vite 构建的企业级前端应用，提供智能问答、智能写作、智能审核和知识库管理等核心功能。 ## ✨ 功能特性 - 🤖 **智能中心** - 智能问答：创建和管理智能体，进行AI对话 - 智能写作：文档生成、大纲编辑、内容润色 - 智能审核：审核方案管理、规则配置、文档审核 - 📚 **知识中心** - 知识库管理：创建知识库，导入和管理文档 - 文档管理：文档上传、预览、分类管理 - 标签管理：维度管理、标签创建、文档关联 - 💬 **智能对话** - 实时对话：支持流式响应（SSE） - 对话历史：保存和管理对话记录 - 多智能体：支持多个智能体切换 ## 🛠️ 技术栈 - **框架**: Vue 3.3.4 (Composition API) - **构建工具**: Vite 6.3.5 - **语言**: TypeScript 5.1.6 - **UI框架**: Element Plus 2.9.1 - **状态管理**: Pinia 2.1.6 - **路由**: Vue Router 4.2.4 - **HTTP客户端**: Axios 0.28.0 - **样式**: SCSS - **代码编辑器**: CodeMirror 6.0.1 - **Markdown编辑器**: md-editor-v3 5.8.4 ## 📋 环境要求 - Node.js >= 18 - pnpm >= 8 ## 🚀 快速开始 ### 安装依赖 ```sh pnpm install # 或使用项目提供的安装命令 pnpm i ``` ### 开发 ```sh # 启动开发服务器 pnpm dev ``` ### 构建 ```sh # 构建生产版本（不含类型检查） pnpm build # 构建生产版本（含类型检查） pnpm build:prd ``` ### 预览 ```sh # 预览构建结果 pnpm preview ``` ### 测试 ```sh # 运行单元测试 pnpm test:unit ``` ### 代码检查 ```sh # ESLint 代码检查 pnpm lint # 代码格式化 pnpm format ``` ### 其他命令 ```sh # 清理 node_modules 和 dist pnpm clear # 生成 OpenAPI 文档 pnpm openapi # 更新 LzUI 组件库 pnpm lzui ``` ## 📁 项目结构 ``` finyx_frontend/ ├── docs/ # 文档目录 │ ├── README.md # 文档索引 │ ├── .cursorrules # Cursor开发规则 │ ├── ARCHITECTURE.md # 架构说明 │ ├── API.md # API接口文档 │ └── COMPONENTS.md # 组件使用文档 ├── env/ # 环境变量配置 ├── mock/ # Mock数据 ├── public/ # 静态资源 ├── src/ │ ├── api/ # API接口定义 │ ├── assets/ # 资源文件 │ ├── bus/ # 事件总线 │ ├── components/ # 全局组件 │ ├── directives/ # 自定义指令 │ ├── enums/ # 枚举定义 │ ├── layout/ # 布局组件 │ ├── request/ # HTTP请求封装 │ ├── router/ # 路由配置 │ ├── servers/ # 服务层API │ ├── stores/ # Pinia状态管理 │ ├── styles/ # 全局样式 │ ├── utils/ # 工具函数 │ └── views/ # 页面组件 ├── vite.config.ts # Vite配置 ├── tsconfig.json # TypeScript配置 └── package.json # 项目配置 ``` ## 📖 文档 详细的文档请查看 [docs](./docs/) 目录： - [文档索引](./docs/README.md) - 文档导航和快速开始 - [架构说明](./docs/ARCHITECTURE.md) - 项目架构和核心模块说明 - [API文档](./docs/API.md) - API接口使用指南 - [组件文档](./docs/COMPONENTS.md) - 组件使用说明 - [Cursor规则](./docs/.cursorrules) - 开发规范和代码规范 ## 🎨 CSS全局变量说明 ```css :root { --app-base-px: 8px; --app-layout-bg-color: #f5f6f7; --app-text-color: #1f2329; 全局文本颜色 --app-text-color-light-1: rgba(31, 35, 41, 0.1); --app-text-color-secondary: #646a73; --app-text-color-disable: #bbbfc4; --app-input-color-placeholder: #8f959e; --app-view-padding: 24px; --app-view-bg-color: #ffffff; --app-border-color-dark: #bbbfc4; --md-bk-hover-color:var(--el-border-color-hover); /** header 组件 */ --app-header-height: 56px; --app-header-padding: 0 20px; --app-header-bg-color: linear-gradient(90deg, #ebf1ff 24.34%, #e5fbf8 56.18%, #f2ebfe 90.18%); --app-logo-color: linear-gradient(180deg, #3370FF 0%, #7f3bf5 100%); --app-avatar-gradient-color: linear-gradient(270deg, #9258f7 0%, #3370FF 100%); /* 计算高度 */ --app-main-height: calc(100vh - var(--app-header-height) - var(--app-view-padding) * 2 - 40px); /** sidebar 组件 */ --sidebar-bg-color: #ffffff; --sidebar-width: 240px; /** tag */ --tag-default-bg: rgba(51, 112, 255, 0.2); --tag-default-color: #2b5fd9; --tag-success-bg: rgba(52, 199, 36, 0.2); --tag-success-color: #2ca91f; --tag-warning-bg: rgba(255, 136, 0, 0.2); --tag-warning-color: #d97400; --tag-danger-bg: rgba(245, 74, 69, 0.2); /** card */ --card-width: 330px; --card-min-height: 166px; --card-min-width: 220px; /** setting */ --setting-left-width: 280px; /** dataset */ --create-dataset-height: calc(var(--app-main-height) - 70px); /** ai-chat */ --dialog-bg-gradient-color: linear-gradient( 188deg, rgba(235, 241, 255, 0.2) 39.6%, rgba(231, 249, 255, 0.2) 94.3% ), #eff0f1; } /* Element Plus CSS全局变量 */ :root { --el-color-primary: #3370ff; --el-menu-item-height: 45px; --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12); --el-border-color: #dee0e3; --el-text-color-regular: #1f2329; --el-color-info: #8f959e !important; --el-disabled-bg-color: #eff0f1 !important; --el-text-color-primary: #1f2329; } ``` ## 🔧 开发配置 ### 环境变量 环境变量文件存放在 `env/` 目录，通过 `VITE_` 前缀暴露给前端。 常用环境变量： - `VITE_APP_PORT`: 开发服务器端口 - `VITE_BASE_PATH`: 基础路径 - `VITE_MOCK_DEV_SERVER`: 是否启用Mock服务 - `VITE_BUILD`: 构建模式 ### 代理配置 开发环境的API代理配置在 `vite.config.ts` 中： - `/ai-review/api` - 审核服务 - `/ai-doc/api` - 写作服务 - `/finyx-bot/api` - Bot服务 - `/dada` - 认证服务 ## 🔐 安全机制 1. **Token管理**: Token存储在localStorage，自动检测失效并跳转登录 2. **权限控制**: 路由级和API级权限验证 3. **请求安全**: 自动添加认证头，统一错误处理 ## ⚡ 性能优化 1. **代码分割**: 路由懒加载，按模块分割chunk 2. **资源优化**: SVG图标雪碧图，Gzip压缩 3. **构建优化**: Terser压缩，Tree-shaking ## 🤝 贡献指南 1. Fork 本仓库 2. 创建特性分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 开启 Pull Request ## 📝 开发规范 - 使用 TypeScript 进行类型检查 - 遵循 ESLint 和 Prettier 代码规范 - 使用 Composition API 和 `