221 lines
6.7 KiB
Markdown
221 lines
6.7 KiB
Markdown
# Finyx AI Prototype
|
||
|
||
一个现代化的数据资产盘点与价值挖掘平台前端应用，基于 Vue 3 + TypeScript + Tailwind CSS 构建。
|
||
|
||
## 📋 项目简介
|
||
|
||
Finyx AI Prototype 是一个企业级数据资产管理平台，提供以下核心功能：
|
||
|
||
- **指挥中心 (Dashboard)**: 全局项目概览、风险监控、KPI 指标展示
|
||
- **项目列表 (Projects)**: 项目全生命周期管理，支持搜索、筛选、状态跟踪
|
||
- **项目作业台 (Engagement Workspace)**: 多步骤工作流，包括：
|
||
- 项目配置：行业模板选择、历史资产继承
|
||
- 数据盘点：支持多种数据源接入方案（文档导入、SQL 脚本、业务表导入）
|
||
- 背景调研：企业数字化现状调研、存量应用场景分析
|
||
- 价值挖掘：潜在场景挖掘、存量应用优化建议
|
||
- 成果交付：交付物打包下载、审计锁定
|
||
|
||
## 🚀 技术栈
|
||
|
||
- **前端框架**: Vue 3.4.0
|
||
- **开发语言**: TypeScript 5.2.2
|
||
- **构建工具**: Vite 5.0.8
|
||
- **状态管理**: Pinia 2.1.0
|
||
- **路由管理**: Vue Router 4.2.0
|
||
- **UI 库**: Element Plus 2.13.0
|
||
- **样式方案**: Tailwind CSS 3.3.6
|
||
- **图标库**: Lucide Vue Next 0.344.0
|
||
- **图表库**: Recharts 2.10.3
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
src/
|
||
├── main.ts # 应用入口文件
|
||
├── App.vue # 根组件
|
||
├── components/ # 通用可复用组件
|
||
│ ├── ProgressBar.vue # 进度条组件
|
||
│ ├── SidebarItem.vue # 侧边栏菜单项
|
||
│ ├── TableCheckItem.vue # 表格复选框项
|
||
│ ├── ToastContainer.vue # Toast 通知容器
|
||
│ ├── ToastItem.vue # Toast 通知项
|
||
│ └── ... # 其他组件
|
||
├── layouts/ # 布局组件
|
||
│ ├── MainLayout.vue # 主布局容器
|
||
│ ├── AppLayout.vue # 应用布局
|
||
│ └── Sidebar.vue # 侧边栏布局
|
||
├── pages/ # 页面组件
|
||
│ ├── DashboardView.vue # 指挥中心视图
|
||
│ ├── ProjectListView.vue # 项目列表视图
|
||
│ ├── EngagementView.vue # 项目作业台主视图
|
||
│ └── engagement/ # 项目作业步骤组件
|
||
│ ├── SetupStep.vue # 项目配置步骤
|
||
│ ├── InventoryStep.vue # 数据盘点步骤
|
||
│ ├── ContextStep.vue # 背景调研步骤
|
||
│ ├── ValueStep.vue # 价值挖掘步骤
|
||
│ └── DeliveryStep.vue # 成果交付步骤
|
||
├── router/ # 路由配置
|
||
│ ├── index.ts # 路由实例
|
||
│ └── routes.ts # 路由定义
|
||
├── stores/ # Pinia 状态管理
|
||
│ ├── toast.ts # Toast 状态
|
||
│ └── user.ts # 用户状态
|
||
├── data/ # 模拟数据
|
||
│ └── mockData.ts # 项目、风险、盘点等模拟数据
|
||
└── types/ # TypeScript 类型定义
|
||
├── index.ts # 全局类型定义
|
||
└── toast.ts # Toast 相关类型
|
||
```
|
||
|
||
## 🛠️ 开发指南
|
||
|
||
### 环境要求
|
||
|
||
- Node.js >= 16.0.0
|
||
- npm >= 7.0.0 或 yarn >= 1.22.0
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 开发模式
|
||
|
||
**前台启动**:
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
**后台启动**:
|
||
```bash
|
||
# 使用 nohup 在后台启动，输出重定向到 dev.log
|
||
nohup npm run dev > dev.log 2>&1 &
|
||
```
|
||
|
||
启动后可以通过以下方式访问：
|
||
- **本地访问**: `http://localhost:5173`
|
||
- **局域网访问**: `http://<你的IP地址>:5173`（例如：`http://192.168.1.100:5173`）
|
||
|
||
**注意**: 开发服务器已配置为允许外部访问（`0.0.0.0`），可以通过局域网 IP 地址访问，方便移动设备或远程调试。
|
||
|
||
**后台服务管理**:
|
||
- 查看日志: `tail -f dev.log`
|
||
- 查看进程: `ps aux | grep vite | grep -v grep`
|
||
- 停止服务: `kill <PID>` 或使用 `pkill -f vite`
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
构建产物将输出到 `dist/` 目录
|
||
|
||
### 预览生产构建
|
||
|
||
```bash
|
||
npm run preview
|
||
```
|
||
|
||
### 代码检查
|
||
|
||
```bash
|
||
npm run lint
|
||
```
|
||
|
||
## 🎨 功能特性
|
||
|
||
### 1. 指挥中心
|
||
- 实时 KPI 指标展示
|
||
- 项目作业全景视图
|
||
- 风险雷达预警系统
|
||
|
||
### 2. 项目列表
|
||
- 项目搜索与筛选
|
||
- 进度可视化
|
||
- 快速创建新项目
|
||
|
||
### 3. 项目作业台
|
||
- **多步骤工作流**: 5 个主要步骤，支持步骤间导航
|
||
- **数据盘点方案**:
|
||
- 方案一：已有文档导入（Excel/Word）
|
||
- 方案二：IT 脚本提取（SQL）
|
||
- 方案三：业务关键表导入（SaaS 系统）
|
||
- **AI 智能分析**: 自动识别 PII、重要数据、生成业务含义
|
||
- **场景挖掘**: AI 推荐潜在数据应用场景
|
||
- **优化建议**: 基于存量应用的 AI 诊断与优化建议
|
||
|
||
### 4. 演示模式
|
||
- 全屏演示视图
|
||
- 隐藏侧边栏和导航
|
||
- 适合客户演示和汇报
|
||
|
||
## 📝 代码规范
|
||
|
||
- 使用 TypeScript 进行类型检查
|
||
- 遵循 Vue 3 Composition API 最佳实践
|
||
- 组件采用 `<script setup>` 语法
|
||
- 使用 Pinia 进行状态管理
|
||
- 使用 Vue Router 进行路由管理
|
||
- 使用 Tailwind CSS 进行样式管理
|
||
- 组件职责单一，便于维护和测试
|
||
|
||
## 🔧 配置说明
|
||
|
||
### Vite 配置
|
||
项目使用 Vite 作为构建工具，配置文件位于 `vite.config.ts`
|
||
|
||
### Tailwind CSS 配置
|
||
Tailwind 配置文件位于 `tailwind.config.js`，可根据需要自定义主题和样式
|
||
|
||
### TypeScript 配置
|
||
TypeScript 配置位于 `tsconfig.json`，已优化用于 Vue 3 开发
|
||
|
||
## 📦 依赖说明
|
||
|
||
### 核心依赖
|
||
- `vue`: Vue 3 核心库
|
||
- `pinia`: 状态管理库
|
||
- `vue-router`: 路由管理库
|
||
- `element-plus`: UI 组件库
|
||
- `lucide-vue-next`: 图标库
|
||
- `recharts`: 图表库（当前未使用，但已安装）
|
||
- `@vueuse/core`: Vue 组合式工具库
|
||
|
||
### 开发依赖
|
||
- `@vitejs/plugin-vue`: Vite Vue 插件
|
||
- `vue-tsc`: Vue TypeScript 类型检查
|
||
- `typescript`: TypeScript 编译器
|
||
- `tailwindcss`: Tailwind CSS 框架
|
||
- `eslint`: 代码检查工具
|
||
- `@vue/eslint-config-typescript`: Vue TypeScript ESLint 配置
|
||
|
||
## 🐛 已知问题
|
||
|
||
- 当前使用模拟数据，需要对接后端 API
|
||
- 文件上传功能为 UI 展示，需要实现实际的上传逻辑
|
||
- 部分交互功能（如场景选择、文件删除）需要完善状态管理
|
||
|
||
## 🔮 后续计划
|
||
|
||
- [ ] 集成后端 API
|
||
- [ ] 实现文件上传功能
|
||
- [x] 添加路由管理（Vue Router）✅
|
||
- [x] 实现状态管理（Pinia）✅
|
||
- [ ] 添加单元测试和集成测试
|
||
- [ ] 优化移动端适配
|
||
- [ ] 添加国际化支持
|
||
|
||
## 📄 许可证
|
||
|
||
本项目为内部项目，版权归 Finyx 所有。
|
||
|
||
## 👥 贡献者
|
||
|
||
- 开发团队：Finyx AI Team
|
||
|
||
## 📞 联系方式
|
||
|
||
如有问题或建议，请联系开发团队。
|