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

🚀 快速开始

安装依赖

pnpm install
# 或使用项目提供的安装命令
pnpm i

开发

# 启动开发服务器
pnpm dev

构建

# 构建生产版本（不含类型检查）
pnpm build

# 构建生产版本（含类型检查）
pnpm build:prd

预览

# 预览构建结果
pnpm preview

测试

# 运行单元测试
pnpm test:unit

代码检查

# ESLint 代码检查
pnpm lint

# 代码格式化
pnpm format

其他命令

# 清理 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 目录：

• 文档索引 - 文档导航和快速开始
• 架构说明 - 项目架构和核心模块说明
• API文档 - API接口使用指南
• 组件文档 - 组件使用说明
• Cursor规则 - 开发规范和代码规范

🎨 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 和 <script setup> 语法
• 组件命名使用 PascalCase
• 文件命名使用 kebab-case
• 详细规范请查看 Cursor规则文档

📄 许可证

本项目为私有项目。

👥 团队

Finyx 开发团队

---

版本: v1.0.0