签入版本
This commit is contained in:
@@ -52,7 +52,7 @@ ui/src/
|
||||
│ │ ├── designSetting.ts projectSetting.ts lockscreen.ts ossConfig.ts
|
||||
│ ├── mutation-types.ts # ACCESS_TOKEN 等存储键常量
|
||||
│ ├── index.ts types.ts plugins/
|
||||
├── styles/ # 全局样式与主题变量(Element Plus 变量覆盖)
|
||||
├── styles/ # 全局样式与主题变量(ElementPlus 变量覆盖)
|
||||
├── utils/
|
||||
│ ├── http/axios/ # HTTP 封装(VAxios/transform/checkStatus…)
|
||||
│ ├── auth.ts Storage.ts # 路径工具 / 本地存储封装
|
||||
|
||||
@@ -72,7 +72,7 @@ columns ← views/{域}/{模块}/columns.ts
|
||||
## 开发规约
|
||||
|
||||
+ 列表列用 columns.ts 声明式配置(勿在模板里手写 el-table-column)
|
||||
+ 复杂列用 render 函数(h + Element Plus 组件)
|
||||
+ 复杂列用 render 函数(h + ElementPlus 组件)
|
||||
+ 图片列 src 用后端 GetFileUrl 已补域名的字段(勿手拼)
|
||||
+ 枚举列展示 {field}Text(勿硬编码映射)
|
||||
+ 操作列按钮逐个加 v-permission(对齐 gmeta permission)
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# 9.1 前端工程概述
|
||||
|
||||
:::tip 概述
|
||||
前端为 Vue3 + TypeScript + Vite + Element Plus + Pinia 的标准工程化项目(ui/ 目录),采用 Composition API,核心机制为:动态菜单路由、指令级权限、三件套页面规范(api/columns/querySchemas)、统一封装的 axios。
|
||||
前端为 Vue3 + TypeScript + Vite + ElementPlus + Pinia 的标准工程化项目(ui/ 目录),采用 Composition API,核心机制为:动态菜单路由、指令级权限、三件套页面规范(api/columns/querySchemas)、统一封装的 axios。
|
||||
:::
|
||||
|
||||
## 技术栈
|
||||
@@ -11,7 +11,7 @@
|
||||
| Vue | ^3.4.27 | 核心框架(Composition API) |
|
||||
| TypeScript | ^5.x | 类型系统 |
|
||||
| Vite | ^5.x | 构建(多环境模式 dev/test/uat/prod) |
|
||||
| Element Plus | ^2.7.4 | UI 组件库 |
|
||||
| ElementPlus | ^2.7.4 | UI 组件库 |
|
||||
| Pinia | ^2.1.7 | 状态管理 |
|
||||
| Vue Router | ^4.3.2 | 路由(常量路由 + 动态菜单路由) |
|
||||
| axios | ^0.27.2 | HTTP(封装于 utils/http/axios,VAxios 类) |
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# 9.14 样式与主题定制
|
||||
|
||||
:::tip 概述
|
||||
样式体系基于 Element Plus CSS 变量 + styles/ 全局覆盖:主题色、暗黑模式、水印、动画等经 designSetting/projectSetting 在线配置。定制优先走变量覆盖而非逐组件覆盖。
|
||||
样式体系基于 ElementPlus CSS 变量 + styles/ 全局覆盖:主题色、暗黑模式、水印、动画等经 designSetting/projectSetting 在线配置。定制优先走变量覆盖而非逐组件覆盖。
|
||||
:::
|
||||
|
||||
## 样式目录(src/styles/)
|
||||
@@ -10,22 +10,22 @@
|
||||
styles/
|
||||
├── index.less / index.scss 入口样式
|
||||
├── variables.* SCSS/Less 变量
|
||||
├── element/ Element Plus 变量覆盖
|
||||
├── element/ ElementPlus 变量覆盖
|
||||
├── public/ 公共样式
|
||||
└── ...
|
||||
```
|
||||
|
||||
main.ts 引入顺序:Element Plus 样式 → 变量覆盖 → 全局样式(覆盖生效)。
|
||||
main.ts 引入顺序:ElementPlus 样式 → 变量覆盖 → 全局样式(覆盖生效)。
|
||||
|
||||
## 主题定制机制
|
||||
|
||||
```text
|
||||
Element Plus 暴露 CSS 变量(--el-color-primary 等):
|
||||
ElementPlus 暴露 CSS 变量(--el-color-primary 等):
|
||||
styles/ 覆盖变量根值 → 全组件生效
|
||||
|
||||
运行时主题切换(designSetting store):
|
||||
主题色在线更换 → 动态更新 CSS 变量 / 主题类名
|
||||
暗黑模式:html 挂 dark 类 → Element Plus dark 变量集
|
||||
暗黑模式:html 挂 dark 类 → ElementPlus dark 变量集
|
||||
灰度/色弱:filter 类名
|
||||
```
|
||||
|
||||
@@ -50,7 +50,7 @@ designSetting 开关 + 文案 → 布局层渲染水印(canvas/css)
|
||||
## 页面样式规约
|
||||
|
||||
```text
|
||||
1. 优先用 Element Plus 组件与 CSS 变量(勿直接写死颜色值)
|
||||
1. 优先用 ElementPlus 组件与 CSS 变量(勿直接写死颜色值)
|
||||
2. 页面 scoped 样式(<style scoped>);跨页公共样式进 styles/public
|
||||
3. 主题相关颜色用 var(--el-color-*)(随主题切换自动适配)
|
||||
4. 少用 deep 选择器覆盖(Element 升级易碎);确需覆盖集中在 element/ 目录
|
||||
|
||||
Reference in New Issue
Block a user