指挥中心 (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

安装依赖

npm install

开发模式

前台启动:

npm run dev

后台启动:

# 使用 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

构建生产版本

npm run build

构建产物将输出到 dist/ 目录

预览生产构建

npm run preview

代码检查

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
实现文件上传功能
添加路由管理（Vue Router）✅
实现状态管理（Pinia）✅
添加单元测试和集成测试
优化移动端适配
添加国际化支持

📄 许可证

本项目为内部项目，版权归 Finyx 所有。

👥 贡献者

开发团队：Finyx AI Team

📞 联系方式

如有问题或建议，请联系开发团队。

README.md Unescape Escape

Finyx AI Prototype

📋 项目简介