From 91c0c7c8e862987b5491b64e2f7a229a36d8c595 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=AD=A3?= Date: Sun, 11 Jan 2026 08:31:03 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E8=AF=B4=E6=98=8E=E6=96=87?= =?UTF-8?q?=E6=A1=A3=EF=BC=8C=E6=8A=80=E6=9C=AF=E6=A0=88=E5=B7=B2=E7=BB=8F?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 93 ++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 64 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 678ff1c..6fcd114 100644 --- a/README.md +++ b/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 ` 或使用 `pkill -f vite` + ### 构建生产版本 ```bash @@ -127,8 +154,10 @@ npm run lint ## 📝 代码规范 - 使用 TypeScript 进行类型检查 -- 遵循 React Hooks 最佳实践 -- 组件采用函数式组件 + Hooks +- 遵循 Vue 3 Composition API 最佳实践 +- 组件采用 `