chore: 配置项目开发环境并重构接口路由前缀
Some checks failed
Release pipeline / publish (push) Has been cancelled
Release pipeline / Always run job (push) Has been cancelled

1.  添加 .node-version 和 .npmrc 配置文件,使用 Volta 锁定 Node.js 18.16.0 版本,强制使用 pnpm 作为包管理器
2.  更新 package.json,添加 packageManager 和 engines 字段限制依赖安装版本,替换 npm 脚本为 pnpm
3.  重构设备管理模块的接口 BASE 路径和路由路径,统一命名为 device_model/device_category
4.  完善 README.md,新增环境要求、安装启动流程、常用命令和目录结构说明
This commit is contained in:
sheng
2026-06-02 14:26:17 +08:00
parent f1e73f3319
commit 8b587163df
6 changed files with 265 additions and 200 deletions

1
.node-version Normal file
View File

@@ -0,0 +1 @@
18.16.0

8
.npmrc Normal file
View File

@@ -0,0 +1,8 @@
# pnpm 配置
# 强制通过 pnpm 安装,禁止使用 npm / yarn
engine-strict=true
# 使用 lockfile 锁定依赖版本
lockfile=true
# 依赖提升模式(兼容旧项目)
shamefully-hoist=true
# 允许在 package.json 中通过 packageManager 字段指定包管理器版本

443
README.md
View File

@@ -1,6 +1,153 @@
# MES-UI
基于 [D2 Admin](https://github.com/d2-projects/d2-admin)Vue 2 + Element UI的企业级中后台前端项目。
基于 [D2 Admin](https://github.com/d2-projects/d2-admin)Vue 2.7 + Element UI的企业级 MES 中后台前端项目。
---
## 环境要求
本项目通过 **[Volta](https://volta.sh/)** 和 **[pnpm](https://pnpm.io/)** 锁定开发环境版本,确保团队成员使用完全一致的 Node.js 和包管理器版本。
| 工具 | 锁定版本 | 作用 |
| --- | --- | --- |
| **Node.js** | `18.16.0` | JavaScript 运行时(`.node-version` 文件) |
| **pnpm** | `10.33.0` | 包管理器(`package.json``packageManager` 字段) |
> 配置文件说明:
> - `.node-version` → Volta 读取,自动切换 Node.js 版本
> - `package.json` → `engines` 字段限制版本范围,`packageManager` 字段锁定 pnpm 版本
> - `.npmrc` → `engine-strict=true` 强制使用锁定版本,不满足则安装失败
---
## 从零开始安装到启动
### 第一步:安装 Volta如果尚未安装
Volta 会根据 `.node-version` 自动安装并切换到项目所需的 Node.js 版本。
**WindowsPowerShell**
```powershell
winget install Volta.Volta
# 重启终端后生效
volta --version
```
**macOS / Linux**
```bash
curl https://get.volta.sh | bash
# 重新加载 shell 配置
source ~/.bashrc # 或 source ~/.zshrc
volta --version
```
> 更多安装方式请参考 [Volta 官方文档](https://docs.volta.sh/guide/getting-started)。
### 第二步:启用 pnpmVolta 内置支持,无需额外安装)
```bash
# Volta 会根据 package.json 中的 packageManager 字段
# 自动安装并使用 pnpm@10.33.0
volta install pnpm@10.33.0
# 验证版本
pnpm --version # 应输出 10.33.0
```
> 如果没有 Volta也可以手动安装 pnpm
> ```bash
> npm install -g pnpm@10.33.0
> ```
### 第三步:克隆项目并安装依赖
```bash
# 克隆仓库
git clone <仓库地址>
cd mes-ui
# Volta 会在进入目录时自动检测 .node-version
# 提示你安装 Node.js 18.16.0(如尚未安装)
node --version # 确认输出 v18.16.0
# 安装依赖pnpm 读取 packageManager 字段确保版本一致)
pnpm install
```
> `pnpm install` 会同时校验:
> - Node.js 版本是否在 `engines.node` 范围内(`>=18.16.0 <19`
> - pnpm 版本是否在 `engines.pnpm` 范围内(`>=10.33.0 <11`
> - 如果版本不匹配,`.npmrc` 中 `engine-strict=true` 会使安装直接失败,避免环境不一致问题。
### 第四步:配置环境变量
在项目根目录创建 `.env.development.local` 文件(此文件已在 `.gitignore` 中,不会提交):
```bash
# 后台 API 地址
VUE_APP_API=http://你的后台服务器地址/
```
### 第五步:启动开发服务器
```bash
pnpm serve
```
浏览器会自动打开 `http://localhost:8080`(或终端提示的实际端口)。
---
## 常用命令速查
| 命令 | 说明 |
| --- | --- |
| `pnpm serve` | 启动开发服务器(自动打开浏览器) |
| `pnpm build` | 生产环境构建 |
| `pnpm build:preview` | 预发布环境构建 |
| `pnpm lint` | ESLint 代码检查并自动修复 |
| `pnpm test:unit` | 运行单元测试 |
| `pnpm install` | 安装依赖 |
| `pnpm add <包名>` | 添加新依赖(**禁止使用 npm install** |
| `pnpm remove <包名>` | 移除依赖 |
---
## 版本锁定机制
### Node.js 版本锁定Volta
```
项目根目录
├── .node-version → 18.16.0Volta 自动读取切换)
```
- Volta 进入项目目录时自动将 Node.js 切换为 `18.16.0`
- 如果该版本未安装Volta 会自动下载并安装
- 传统方案nvm也兼容`nvm use` 读取 `.nvmrc`,本项目同时提供 `.node-version` 供 Volta 使用
### pnpm 版本锁定
```
package.json
├── packageManager → pnpm@10.33.0Corepack / Volta 识别)
├── engines.pnpm → >=10.33.0 <11npm/pnpm install 时校验)
```
```ini
# .npmrc
engine-strict=true # 版本不满足 → 安装直接报错
```
### 依赖版本锁定
```
pnpm-lock.yaml → 锁定所有依赖的精确版本(等价于 npm 的 package-lock.json
```
> `pnpm-lock.yaml` **必须提交到 Git**,保证所有环境安装的依赖版本完全一致。
---
@@ -12,234 +159,109 @@ mes-ui/
├── docs/ # 项目文档
├── public/ # 静态资源(不经过 webpack 处理)
├── src/ # PC 端业务源码
│ ├── api/ # 接口请求层
│ ├── assets/ # 静态资源(经 webpack 处理)
│ ├── api/ # 接口请求层(按业务模块拆分)
│ ├── _service.js # axios 请求服务实例
│ │ └── production-master-data/ # 生产主数据模块 API
│ ├── assets/ # 静态资源(经 webpack 处理,含 SCSS / SVG
│ ├── components/ # 公共组件
│ │ ├── page-table/ # CRUD 表格便捷组合体
│ │ └── page-dialog-form/ # 新增/编辑弹框组件
│ ├── composables/ # 可复用逻辑函数
│ ├── layout/ # 页面布局
│ ├── useTableColumns.js # 列定义工厂
│ │ ├── useTableButtons.js # 按钮定义工厂
│ │ └── useI18n.js # i18n Mixin 工厂
│ ├── layout/ # 页面布局header-aside
│ ├── libs/ # 工具函数
│ ├── locales/ # 国际化语言包
│ ├── menu/ # 菜单配置
│ ├── plugin/ # Vue 插件
│ ├── router/ # 路由配置
│ ├── locales/ # 国际化语言包zh-chs / en
│ ├── router/ # 路由配置modules/ 按业务模块拆分)
│ ├── store/ # Vuex 状态管理
── views/ # 业务页面
── utils/ # 通用工具文件下载、Excel 读取等)
│ └── views/ # 业务页面(按模块三级目录组织)
│ ├── production-master-data/ # 生产主数据
│ ├── system-administration/ # 系统管理
│ ├── equipment-management/ # 设备管理
│ ├── quality-management/ # 质量管控
│ ├── planning-production/ # 计划生产
│ └── data-platform/ # 数据平台
├── src.mobile/ # 移动端业务源码
├── .browserslistrc # 浏览器兼容配置
├── .editorconfig # 编辑器统一配置
├── .env / .env.development / .env.preview # 环境变量
├── .eslintignore / .eslintrc.js # ESLint 配置
├── .gitignore # Git 忽略配置
├── .node-version # Volta Node.js 版本锁定18.16.0
├── .npmrc # pnpm 配置(版本强校验)
├── .postcssrc.js # PostCSS 配置
├── babel.config.js # Babel 配置
├── jest.config.js # Jest 单元测试配置
├── jsconfig.json # VS Code 路径别名提示
├── package.json # 项目依赖与脚本
├── pnpm-lock.yaml # pnpm 依赖锁定文件
├── pnpm-lock.yaml # pnpm 依赖锁定文件(必须提交)
├── vue.config.js # Vue CLI 构建配置
└── README.md # 项目说明(本文件)
```
---
## 各目录详解
### `.github/`
GitHub 相关配置,包含 Issue 模板和 CI/CD 工作流(`workflows/`)。
### `docs/`
项目文档目录,存放变更日志、修复记录等 Markdown 文档。子目录 `image/` 存放文档引用的图片。
## 项目文档
| 文档 | 说明 |
|------|------|
| [表格组件使用说明](./docs/表格组件使用说明.md) | page-table / page-dialog-form 完整使用手册 |
| [SCT基础表格重构设计](./docs/SCT基础表格重构设计.md) | 旧 sct-base-table → 新架构的设计文档 |
| [Sass废弃修复](./docs/Sass废弃修复.md) | Sass 废弃警告修复记录 |
| --- | --- |
| [表格组件使用说明](./docs/表格组件使用说明.md) | `page-table` + `page-dialog-form` 完整使用手册 |
| [国际化规则](./docs/国际化规则.md) | i18n 使用规范与迁移指南 |
| [迁移提示词](./docs/迁移提示词.md) | 旧页面迁移到新方案的规则文档 |
| [SCT基础表格重构设计](./docs/SCT基础表格重构设计.md) | 旧 `sct-base-table` → 新架构设计文档 |
| [变更日志](./docs/变更日志.md) | 项目变更日志 |
### `public/`
---
**静态资源目录**,文件会原样复制到构建产物中,不经过 webpack 编译。
## 关键目录说明
| 子目录 | 作用 |
|--------|------|
| `lib/UEditor/` | 百度 UEditor 富文本编辑器(第三方库,通过 `<script>` 直接引入) |
| `image/theme/` | 各主题的 Logo 图片和预览图chester / d2 / element / line / star / tomorrow-night-blue / violet |
| `image/loading/` | 页面加载动画的 SVG |
| `html/` | 独立 HTML 页面(如 demo.html |
| `index.html` | SPA 入口 HTML 模板 |
| `icon.ico` | 网站 Favicon |
### `src/` — PC 端源码
#### `src/api/`
**接口请求层**。封装后端 API 调用,按业务模块拆分为独立文件。
- `_service.js` — 基于 axios 的请求服务实例
- `_tools.js` — 请求工具函数
- `demo.js` — 演示接口
- `sys.user.js` — 用户相关接口
#### `src/assets/`
**静态资源**,会被 webpack 处理。
| 子目录 | 作用 |
|--------|------|
| `style/unit/color.scss` | 全局颜色变量定义 |
| `style/public.scss` | 全局 SCSS 变量、mixin、placeholder通过 `additionalData` 自动注入每个组件) |
| `style/public-class.scss` | 全局通用 CSS class间距、浮动、文字对齐等工具类 |
| `style/fixed/` | 第三方库样式覆盖element / markdown / n-progress / vue-splitpane 等) |
| `style/animate/` | 过渡动画样式vue-transition |
| `style/theme/` | 主题切换样式,每个主题独立目录,含 `index.scss` + `setting.scss` |
| `svg-icons/icons/` | SVG 图标文件,通过 `svg-sprite-loader` 生成雪碧图 |
| `svg-icons/index.js` | SVG 图标自动注册脚本 |
#### `src/components/`
**公共组件库**,所有可复用组件集中管理。
### `src/components/` — 公共组件
| 组件 | 作用 |
|------|------|
| `d2-container` | 页面容器组件,提供卡片、全屏、透明等多种布局变体 |
| --- | --- |
| `page-table` | CRUD 表格组合体(按钮栏 + 表格 + 分页 + 高度自适应 + 帮助按钮) |
| `page-dialog-form` | 新增/编辑弹框(表单渲染 + 校验 + i18n 自动翻译) |
| `d2-container` | 页面容器(卡片、全屏、透明等多种布局变体) |
| `d2-container-frame` | iframe 嵌套外部页面容器 |
| `d2-count-up` | 数字滚动动画组件 |
| `d2-highlight` | 代码高亮展示组件 |
| `d2-icon` / `d2-icon-svg` | 图标组件Font Awesome / SVG |
| `d2-icon-select` / `d2-icon-svg-select` | 图标选择器组件 |
| `d2-link-btn` | 链接式按钮 |
| `d2-markdown` | Markdown 渲染组件 |
| `d2-module-index-banner` | 首页 Banner 展示组件 |
| `d2-module-index-menu` | 首页菜单组件 |
| `d2-quill` | Quill 富文本编辑器封装 |
| `d2-scrollbar` | 自定义滚动条组件 |
| `d2-ueditor` | 百度 UEditor 编辑器封装 |
| `page-table` | **新** CRUD 表格便捷组合体(按钮栏 + 表格 + 分页 + 高度自适应 + 帮助按钮) |
| `page-dialog-form` | **新** 增删改查弹框组件(表单渲染 + 校验 + i18n |
> `page-table` 和 `page-dialog-form` 详细用法见[表格组件使用说明](./docs/表格组件使用说明.md)
> `page-table` 和 `page-dialog-form` 是本项目核心组件,详细用法见 [表格组件使用说明](./docs/表格组件使用说明.md)
#### `src/composables/`
**可复用的逻辑函数Composition Utilities**。把散落在各页面中的重复 JS 逻辑抽成纯函数,组件只需调用即可。
### `src/composables/` — 逻辑复用层
| 文件 | 作用 |
|------|------|
| `useTableColumns.js` | 列定义工厂,消除手动分配 `idx` 序号;约定 `prop: '_actions'` 为操作列 |
| `useTableButtons.js` | 按钮定义工厂,一键生成顶部工具栏 + 行内操作按钮,自动注入权限过滤 |
| `useI18n.js` | i18n Mixin 工厂,通过 `i18nMixin(prefix)` 注入 `key()` / `ckey()` 方法,消除每个页面手写 `T` 常量 |
| --- | --- |
| `useTableColumns.js` | 列定义工厂,消除手动分配 `idx`约定 `prop: '_actions'` 为操作列 |
| `useTableButtons.js` | 按钮工厂,一键生成工具栏 + 行内按钮,自动注入权限过滤 |
| `useI18n.js` | i18n Mixin 工厂,通过 `i18nMixin(prefix)` 注入 `key()` / `ckey()` |
| `useConfirmHandle.js` | 确认操作 Mixin封装 `$confirm` + API 调用 |
> **为什么放在 `src/` 根目录?**
> composable 不是 UI 组件(不需要 `<template>`),也不属于 `libs/`(通用工具库)。它是介于**组件和逻辑之间**的中间层——被多个组件调用,但本身不渲染 DOM。放在 `src/` 根目录下与 `components/`、`views/` 同级,方便一眼看到项目的公共逻辑层。
### `src/router/modules/` — 路由模块
#### `src/layout/`
**页面布局**。当前使用 `header-aside` 布局(顶栏 + 侧边栏 + 主内容区)。
按业务一级模块拆分examples:
| 子目录 | 作用 |
|--------|------|
| `layout.vue` | 布局主文件 |
| `components/menu-side/` | 侧边菜单组件 |
| `components/menu-header/` | 顶部导航菜单组件 |
| `components/header-user/` | 顶栏用户信息下拉 |
| `components/header-theme/` | 主题切换面板 |
| `components/header-color/` | 主题色切换 |
| `components/header-locales/` | 多语言切换 |
| `components/header-fullscreen/` | 全屏切换 |
| `components/header-search/` | 全局搜索 |
| `components/header-log/` | 操作日志 |
| `components/header-size/` | 字号大小切换 |
| `components/tabs/` | 多标签页栏 |
| `components/contextmenu/` | 标签页右键菜单 |
| `components/panel-search/` | 全局搜索面板 |
| `mixins/search.js` | 搜索 mixin |
| `mixins/` | 菜单相关 mixin |
| 文件 | 路由前缀 | 对应模块 |
| --- | --- | --- |
| `production-master-data.js` | `/production_configuration` | 生产主数据 |
| `system-administration.js` | `/system_settings` | 系统管理 |
| `equipment-management.js` | `/equipment_management` | 设备管理 |
| `quality-management.js` | `/quality_management` | 质量管控 |
| `planning-production.js` | `/planning_production` | 计划生产 |
| `data-platform.js` | `/data_platform` | 数据平台 |
#### `src/libs/`
**工具函数库**。
- `util.js` — 通用工具方法
- `util.cookies.js` — Cookie 操作
- `util.db.js` — 本地存储(基于 lowdb
- `util.log.js` — 日志工具
- `util.import.development.js` / `util.import.production.js` — 开发/生产环境动态加载
### `src/api/` — 接口请求层
#### `src/locales/`
**国际化i18n**。JSON 格式的语言文件,支持:
- `zh-chs` — 简体中文
- `zh-cht` — 繁体中文
- `en` — 英文
- `ja` — 日文
- `mixin.js` — Vue 国际化 mixin
#### `src/menu/`
**菜单配置**。按业务模块拆分,定义侧边栏菜单结构。`modules/` 下按 demo-components、demo-playground、demo-plugins 组织。
#### `src/plugin/`
**Vue 插件**。
- `d2admin/` — D2Admin 核心插件(初始化全局功能)
- `error/` — 全局错误捕获
- `log/` — 通用日志输出
- `open/` — 新窗口打开工具
#### `src/router/`
**路由配置**。`modules/` 下按 components、playground、plugins 拆分路由表。`routes.js` 为汇总路由,`index.js` 创建 Vue Router 实例。
#### `src/store/`
**Vuex 状态管理**。`modules/d2admin/` 下按功能拆分为独立模块:
| 模块 | 作用 |
|------|------|
| `account` | 用户账户信息 |
| `color` | 主题色管理 |
| `db` | 本地数据库状态 |
| `fullscreen` | 全屏状态 |
| `gray` | 灰度模式 |
| `log` | 操作日志 |
| `menu` | 菜单状态(展开/收缩/激活项) |
| `page` | 页面缓存与标签页 |
| `releases` | 版本信息 |
| `search` | 全局搜索 |
| `size` | 字号大小 |
| `theme` | 主题切换 |
| `transition` | 页面过渡动画 |
| `ua` | 用户代理信息 |
| `user` | 用户登录态 |
#### `src/views/`
**页面视图**。
- `demo/` — 各功能展示页面(组件演示 / 插件演示 / 功能试验场)
- `system/` — 系统级页面(首页 / 登录 / 404 / 日志 / 重定向 / 刷新)
- `production-master-data/` — 生产配置模块(工厂区域 / 产线 / 工艺 / 产品 / 物料等)
> 页面按一级模块 → 二级模块 → 三级模块 三层目录组织,与 [后台Webman界面截图对照表](./后台Webman界面截图对照表.md) 中的英文命名一致。
#### `src/` 根文件
| 文件 | 作用 |
|------|------|
| `main.js` | PC 端应用入口 |
| `App.vue` | 根组件 |
| `setting.js` | 全局设置(站点标题等) |
| `i18n.js` | 国际化初始化 |
按业务模块父目录存放,命名规则:`{模块名}.js`。例如:
- `production-master-data/device-category.js` → 设备类型
- `production-master-data/factory-area.js` → 工厂区域
---
### `src.mobile/` — 移动端源码
基于 Vant UI 的移动端适配版本,与 PC 端共用部分业务逻辑。
| 文件/目录 | 作用 |
|-----------|------|
| `main.js` | 移动端应用入口 |
| `App.vue` | 移动端根组件 |
| `vant.js` | Vant UI 按需引入配置 |
| `router/` | 移动端路由 |
| `store/` | 移动端状态管理 |
| `views/` | 移动端页面 |
---
### 构建配置文件
## 构建配置文件
| 文件 | 作用 |
|------|------|
| --- | --- |
| `vue.config.js` | Vue CLI 构建配置多页入口、CDN、webpack 插件、主题色替换、SVG sprites、路径别名 |
| `babel.config.js` | Babel 转译配置 |
| `.postcssrc.js` | PostCSS 自动前缀等配置 |
@@ -249,22 +271,51 @@ GitHub 相关配置,包含 Issue 模板和 CI/CD 工作流(`workflows/`
| `.browserslistrc` | 目标浏览器范围 |
| `.editorconfig` | 编辑器缩进/换行风格统一 |
### 环境变量文件
---
| 文件 | 作用 |
|------|------|
## 环境变量
| 文件 | 说明 |
| --- | --- |
| `.env` | 所有环境通用变量 |
| `.env.development` | 开发环境变量 |
| `.env.development.local` | 本地开发环境变量(不提交 Git需自行创建 |
| `.env.preview` | 预发布环境变量 |
---
## 常用命令
## 常见问题
| 命令 | 说明 |
|------|------|
| `pnpm serve` | 启动开发服务器 |
| `pnpm build` | 生产环境构建 |
| `pnpm build:preview` | 预发布环境构建 |
| `pnpm lint` | ESLint 检查并自动修复 |
| `pnpm test:unit` | 运行单元测试 |
### Q1`pnpm install` 报错 "Unsupported engine"
Node.js 或 pnpm 版本不在 `engines` 范围内。解决:
```bash
# 检查版本
node --version # 必须为 18.16.x
pnpm --version # 必须为 10.33.x
# 使用 Volta 自动切换
volta install node@18.16.0
volta install pnpm@10.33.0
```
### Q2启动后页面报跨域错误
`.env.development.local` 中确认 `VUE_APP_API` 指向正确的后台地址,且后台已开启 CORS。
### Q3端口被占用
默认端口为 `8080`。如需修改,在 `.env.development.local` 中添加:
```bash
PORT=8081
```
### Q4依赖安装慢
pnpm 默认使用 npm registry。如需加速可配置镜像
```bash
pnpm config set registry https://registry.npmmirror.com
```

View File

@@ -1,10 +1,15 @@
{
"name": "d2-admin",
"version": "1.25.0",
"packageManager": "pnpm@10.33.0",
"engines": {
"node": ">=18.16.0 <19",
"pnpm": ">=10.33.0 <11"
},
"scripts": {
"serve": "vue-cli-service serve --open",
"start": "npm run serve",
"dev": "npm run serve",
"start": "pnpm run serve",
"dev": "pnpm run serve",
"build": "vue-cli-service build --report",
"build:preview": "NODE_OPTIONS=--max_old_space_size=4096 vue-cli-service build --mode preview",
"lint": "vue-cli-service lint --fix",

View File

@@ -1,6 +1,6 @@
import { request } from '@/api/_service'
const BASE = 'device_management/equipment_model/equipment_category/'
const BASE = 'production_configuration/device_model/device_category/'
function apiParams (method, data = {}) {
return {

View File

@@ -15,7 +15,7 @@ export default {
component: _import('system/function/module-index')
},
{
path: 'equipment_model/equipment_category',
path: 'device_model/device_category',
name: `${pre}equipment_model-equipment_category`,
meta: { ...meta, cache: true, title: '设备类别' },
component: _import('equipment-management/equipment-model/equipment-category')