Skip to content

前端项目总览

前端架构设计

前端基于 Vue 3 (Composition API) 构建，采用 Vite 作为构建工具。为了确保实验室代码的可维护性和计算结果展示的准确性，我们引入了 TypeScript 进行全量类型约束。

核心技术选型

Vue 3 + TS

利用强类型检查减少复杂数据结构（如实验参数、计算矩阵）在传递中的错误。

Tailwind CSS

原子化 CSS 框架，确保 UI 组件（如 CoalSimCharts）在不同分辨率下的一致性。

Vite

极速的热更新体验，大幅提升实验室内部功能的开发调试效率。

目录结构解析

我们将前端逻辑划分为基础架构、业务组件和全局配置三部分：

Directorysrc/
- Directorycomponents/ # 业务组件目录
  - Directoryadmin/ # 后台管理：包含用户列表、操作记录等
    …
  - Directorytools/ # 专项工具：如 XRD 衍射分析组件
    …
  - CoalSimPanel.vue # 核心模拟计算面板
  - …
- Directorylayouts/ # 页面布局模板
  - …
- Directoryrouter/ # 路由控制（Vue Router）
  - …
- types.ts # 全局类型声明文件
nginx.conf # 生产环境反向代理配置（转发 /api 至 Flask）
tailwind.config.js # Tailwind 样式定义与主题配置
vite.config.ts # 构建与开发服务器配置

关键模块说明

1. 业务组件 (`/src/components`)

管理模块 (admin/): 负责实验室人员权限及操作记录的管理。
计算工具 (tools/): 特化组件（如 XRD.vue），用于特定物理/化学指标的分析展示。
核心面板 (CoalSimPanel.vue): 项目最复杂的组件，集成了参数输入、实时计算状态监听及图表反馈。

2. 样式与主题 (`/src/assets` & `tailwind.config.js`)

采用实验室统一色调，通过 Tailwind 的配置文件进行颜色与间距的全局管理，确保新开发的组件样式风格统一。

3. 类型系统 (`/src/types.ts`)

定义了所有来自后端 Flask 的 JSON 响应结构。修改接口字段后，应首先在此处更新类型定义，以触发全局编译检查。