# 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 ` 或使用 `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 最佳实践 - 组件采用 `