里程碑3
1. 整体架构概述
这是一个基于Vue.js的项目，采用了模块化的架构设计，主要围绕项目管理、仪表板展示和数据可视化展开。各模块职责明确，通过数据模型和状态管理实现了松耦合的系统设计。
2. 各模块关系详解
2.1 docs/dashboard.model.js - 模型定义规范
dashboard.model.js 是一个 模型定义规范文件 ，它定义了整个系统中dashboard类型组件的数据结构规范：
- 定义了不同模块类型（sider/iframe/custom/schema）的配置格式
- 规定了菜单结构、表格配置、搜索配置等标准
- 为实际的业务模型提供了模板参考
2.2 model目录 - 具体业务模型实现
model 目录包含了基于docs中规范实现的具体业务模型：
- 按照业务领域划分为 business （电商系统）和 course （课程系统）
- 每个模型文件（如
model.js）都遵循docs中定义的dashboard模型规范 - 定义了具体业务场景下的菜单结构和功能配置
- 这些模型数据最终会被加载到前端进行展示
2.3 app/pages/project-list - 项目列表视图
project-list 模块是用户进入系统的第一个页面：
project-list.vue组件负责展示所有可用的项目列表- 通过API（ /api/project/model_list ）获取model目录中定义的各个项目模型
- 提供进入按钮，引导用户进入具体的项目仪表板
2.4 app/pages/dashboard - 项目仪表板视图
dashboard 是项目的核心视图模块：
dashboard.vue作为项目的主容器- 接收项目ID参数（proj_key），并根据此参数加载对应的项目配置
- 通过API获取项目列表（ /api/project/list ）和项目配置（ /api/project ）
- 将获取到的菜单数据存储到menuStore中，将项目列表存储到projectStore中
- 根据用户的菜单选择动态加载不同类型的模块视图
2.5 app/pages/widgets - 通用组件库
widgets 提供了系统中可复用的UI组件：
- 包含header-container、schema-search-bar、schema-table、sider-container等通用组件
header-container.vue组件被dashboard和project-list模块共同使用- 这些组件为不同页面提供统一的UI风格和交互体验
2.6 app/pages/store - 状态管理
store 使用Pinia管理应用状态：
menu.js负责管理菜单状态，提供菜单查找等功能project.js负责管理项目列表状态- 连接了API获取的数据和UI视图组件，实现了数据流的单向流动
3. 数据流转关系
-
配置定义阶段 ：
- 在docs中定义模型规范
- 在model目录中创建具体的业务模型实现
-
数据加载阶段 ：
- 前端组件（project-list、dashboard）通过API请求后端数据
- 后端从model目录加载对应的数据模型
- 前端接收数据并存储到状态管理器（store）中
-
视图渲染阶段 ：
- 组件从store中获取数据
- 使用widgets中的通用组件构建UI界面
- 根据模型配置动态渲染不同类型的模块
-
用户交互阶段 ：
- 用户在project-list中选择项目
- 系统跳转到dashboard页面
- 用户在dashboard中通过菜单切换不同功能模块
4. 技术架构特点
- 配置驱动开发 ：系统通过模型配置文件驱动UI渲染，实现了高度可配置性
- 组件化设计 ：采用了清晰的组件化结构，提高了代码复用性
- 状态管理 ：使用Pinia进行集中式状态管理，简化了数据流
- 灵活的模块类型 ：支持多种模块类型（schema、iframe、custom、sider），适应不同业务场景
- 业务模型分离 ：将业务模型与UI视图分离，便于维护和扩展
