# Finyx AI Prototype

一个现代化的数据资产盘点与价值挖掘平台前端应用，基于 React + TypeScript + Tailwind CSS 构建。

## 📋 项目简介

Finyx AI Prototype 是一个企业级数据资产管理平台，提供以下核心功能：

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

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

启动后可以通过以下方式访问：
- **本地访问**: `http://localhost:5173`
- **局域网访问**: `http://<你的IP地址>:5173`（例如：`http://192.168.1.100:5173`）

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

### 构建生产版本

```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 进行类型检查
- 遵循 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

## 📞 联系方式

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