更新说明文档，技术栈已经更新。
This commit is contained in:
李季
parent
0891e67715
commit
91c0c7c8e8
93
README.md
93
README.md
@ -1,6 +1,6 @@
|
||||
# Finyx AI Prototype
|
||||
|
||||
一个现代化的数据资产盘点与价值挖掘平台前端应用，基于 React + TypeScript + Tailwind CSS 构建。
|
||||
一个现代化的数据资产盘点与价值挖掘平台前端应用，基于 Vue 3 + TypeScript + Tailwind CSS 构建。
|
||||
|
||||
## 📋 项目简介
|
||||
|
||||
@ -17,39 +17,54 @@ Finyx AI Prototype 是一个企业级数据资产管理平台，提供以下核
|
||||
|
||||
## 🚀 技术栈
|
||||
|
||||
- **前端框架**: React 18.2.0
|
||||
- **前端框架**: 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 React 0.344.0
|
||||
- **图标库**: Lucide Vue Next 0.344.0
|
||||
- **图表库**: Recharts 2.10.3
|
||||
|
||||
## 📁 项目结构
|
||||
|
||||
```
|
||||
src/
|
||||
├── App.tsx # 主应用入口，状态管理
|
||||
├── main.ts # 应用入口文件
|
||||
├── App.vue # 根组件
|
||||
├── components/ # 通用可复用组件
|
||||
│ ├── ProgressBar.tsx # 进度条组件
|
||||
│ ├── SidebarItem.tsx # 侧边栏菜单项
|
||||
│ └── TableCheckItem.tsx # 表格复选框项
|
||||
│ ├── 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 # 项目、风险、盘点等模拟数据
|
||||
├── 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 # 全局类型定义
|
||||
├── index.ts # 全局类型定义
|
||||
└── toast.ts # Toast 相关类型
|
||||
```
|
||||
|
||||
## 🛠️ 开发指南
|
||||
@ -67,16 +82,28 @@ 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
|
||||
@ -127,8 +154,10 @@ npm run lint
|
||||
## 📝 代码规范
|
||||
|
||||
- 使用 TypeScript 进行类型检查
|
||||
- 遵循 React Hooks 最佳实践
|
||||
- 组件采用函数式组件 + Hooks
|
||||
- 遵循 Vue 3 Composition API 最佳实践
|
||||
- 组件采用 `<script setup>` 语法
|
||||
- 使用 Pinia 进行状态管理
|
||||
- 使用 Vue Router 进行路由管理
|
||||
- 使用 Tailwind CSS 进行样式管理
|
||||
- 组件职责单一，便于维护和测试
|
||||
|
||||
@ -141,20 +170,26 @@ npm run lint
|
||||
Tailwind 配置文件位于 `tailwind.config.js`，可根据需要自定义主题和样式
|
||||
|
||||
### TypeScript 配置
|
||||
TypeScript 配置位于 `tsconfig.json`，已优化用于 React 开发
|
||||
TypeScript 配置位于 `tsconfig.json`，已优化用于 Vue 3 开发
|
||||
|
||||
## 📦 依赖说明
|
||||
|
||||
### 核心依赖
|
||||
- `react` / `react-dom`: React 核心库
|
||||
- `lucide-react`: 图标库
|
||||
- `vue`: Vue 3 核心库
|
||||
- `pinia`: 状态管理库
|
||||
- `vue-router`: 路由管理库
|
||||
- `element-plus`: UI 组件库
|
||||
- `lucide-vue-next`: 图标库
|
||||
- `recharts`: 图表库（当前未使用，但已安装）
|
||||
- `@vueuse/core`: Vue 组合式工具库
|
||||
|
||||
### 开发依赖
|
||||
- `@vitejs/plugin-react`: Vite React 插件
|
||||
- `@vitejs/plugin-vue`: Vite Vue 插件
|
||||
- `vue-tsc`: Vue TypeScript 类型检查
|
||||
- `typescript`: TypeScript 编译器
|
||||
- `tailwindcss`: Tailwind CSS 框架
|
||||
- `eslint`: 代码检查工具
|
||||
- `@vue/eslint-config-typescript`: Vue TypeScript ESLint 配置
|
||||
|
||||
## 🐛 已知问题
|
||||
|
||||
@ -166,8 +201,8 @@ TypeScript 配置位于 `tsconfig.json`，已优化用于 React 开发
|
||||
|
||||
- [ ] 集成后端 API
|
||||
- [ ] 实现文件上传功能
|
||||
- [ ] 添加路由管理（React Router）
|
||||
- [ ] 实现状态管理（Redux/Zustand）
|
||||
- [x] 添加路由管理（Vue Router）✅
|
||||
- [x] 实现状态管理（Pinia）✅
|
||||
- [ ] 添加单元测试和集成测试
|
||||
- [ ] 优化移动端适配
|
||||
- [ ] 添加国际化支持
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user