指挥中心 (Dashboard): 全局项目概览、风险监控、KPI 指标展示
项目列表 (Projects): 项目全生命周期管理，支持搜索、筛选、状态跟踪
项目作业台 (Engagement Workspace): 多步骤工作流，包括：
- 项目配置：行业模板选择、历史资产继承
- 数据盘点：支持多种数据源接入方案（文档导入、SQL 脚本、业务表导入）
- 背景调研：企业数字化现状调研、存量应用场景分析
- 价值挖掘：潜在场景挖掘、存量应用优化建议
- 成果交付：交付物打包下载、审计锁定

🚀 技术栈

前端框架: React 18.2.0
开发语言: TypeScript 5.2.2
构建工具: Vite 5.0.8
样式方案: Tailwind CSS 3.3.6
图标库: Lucide React 0.344.0
图表库: Recharts 2.10.3

📁 项目结构

src/
├── App.tsx                    # 主应用入口，状态管理
├── components/               # 通用可复用组件
│   ├── ProgressBar.tsx       # 进度条组件
│   ├── SidebarItem.tsx      # 侧边栏菜单项
│   └── TableCheckItem.tsx   # 表格复选框项
├── data/                     # 模拟数据
│   └── mockData.ts          # 项目、风险、盘点等模拟数据
├── layouts/                  # 布局组件
│   ├── MainLayout.tsx       # 主布局容器
│   └── Sidebar.tsx         # 侧边栏布局
├── pages/                    # 页面组件
│   ├── DashboardView.tsx    # 指挥中心视图
│   ├── ProjectListView.tsx  # 项目列表视图
│   ├── EngagementView.tsx   # 项目作业台主视图
│   └── engagement/         # 项目作业步骤组件
│       ├── SetupStep.tsx    # 项目配置步骤
│       ├── InventoryStep.tsx # 数据盘点步骤
│       ├── ContextStep.tsx  # 背景调研步骤
│       ├── ValueStep.tsx    # 价值挖掘步骤
│       └── DeliveryStep.tsx # 成果交付步骤
└── types/                    # TypeScript 类型定义
    └── index.ts             # 全局类型定义

🛠️ 开发指南

环境要求

Node.js >= 16.0.0
npm >= 7.0.0 或 yarn >= 1.22.0

安装依赖

npm install

开发模式

npm run dev

启动后可以通过以下方式访问：

本地访问: http://localhost:5173
局域网访问: http://<你的IP地址>:5173（例如：http://192.168.1.100:5173）

注意: 开发服务器已配置为允许外部访问（0.0.0.0），可以通过局域网 IP 地址访问，方便移动设备或远程调试。

构建生产版本

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 进行类型检查
遵循 React Hooks 最佳实践
组件采用函数式组件 + Hooks
使用 Tailwind CSS 进行样式管理
组件职责单一，便于维护和测试

🔧 配置说明

Vite 配置

项目使用 Vite 作为构建工具，配置文件位于 vite.config.ts

Tailwind CSS 配置

Tailwind 配置文件位于 tailwind.config.js，可根据需要自定义主题和样式

TypeScript 配置

TypeScript 配置位于 tsconfig.json，已优化用于 React 开发

📦 依赖说明

核心依赖

react / react-dom: React 核心库
lucide-react: 图标库
recharts: 图表库（当前未使用，但已安装）

开发依赖

@vitejs/plugin-react: Vite React 插件
typescript: TypeScript 编译器
tailwindcss: Tailwind CSS 框架
eslint: 代码检查工具

🐛 已知问题

当前使用模拟数据，需要对接后端 API
文件上传功能为 UI 展示，需要实现实际的上传逻辑
部分交互功能（如场景选择、文件删除）需要完善状态管理

🔮 后续计划

集成后端 API
实现文件上传功能
添加路由管理（React Router）
实现状态管理（Redux/Zustand）
添加单元测试和集成测试
优化移动端适配
添加国际化支持

📄 许可证

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

👥 贡献者

开发团队：Finyx AI Team

📞 联系方式

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

README.md Unescape Escape

Finyx AI Prototype

📋 项目简介