修改河南项目的管理后台ui
This commit is contained in:
@@ -153,3 +153,59 @@
|
||||
**刻意未做**:麻将胡了的 **11 张 `game_mahjong_*` 游戏表尚未落库**(DDL + 种子在 `mahjong-py/schema.sql`)。
|
||||
这 7 个新菜单页面依赖它们,未建表前打开会报「表不存在」。属「游戏本体」前置依赖、且 generator 还没写完
|
||||
(见 `mahjong-py/README.md`),**待用户确认后再执行**。
|
||||
|
||||
- **后台管理端(`ruoyi-ui`)整站换肤:Cottagecore 田园核风 + 逐页 UI 细节收敛**
|
||||
|
||||
**起因**:管理后台长期沿用它默认的企业蓝(Element 默认色板 + vue-element-admin / AdminLTE 遗留色),与河南项目的
|
||||
田园调性不符;用户要求按 Cottagecore 规范整站重做,并**逐页检查小问题、把 UI 细节调到位**。
|
||||
|
||||
**做法:不引 Tailwind,走「Element 变量 + 皮肤覆盖层」**
|
||||
(`ruoyi-ui` 是 Vue2 + Element UI 2.15 + vue-cli4/webpack4/postcss7,Tailwind 的 preflight 会打乱 Element 基础样式)。
|
||||
新建 **`src/assets/styles/cottagecore.scss` 作为全站唯一色源**,其余文件一律引用变量、不写死十六进制;
|
||||
再通过重编译 `element-ui` 的 theme-chalk 源码(`element-variables.scss`)换掉 Element 自己的底色。
|
||||
|
||||
| 文件 | 角色 |
|
||||
|---|---|
|
||||
| `assets/styles/cottagecore.scss` | **唯一色源**:品牌色 + 组件槽位色 + 图标色相 + 对比度实测注释 |
|
||||
| `assets/styles/element-variables.scss` | 覆盖 `$--color-*` / 圆角 / 阴影 / `$--color-white` → 暖白 `#fffdfa`,再 `@import` theme-chalk 源码整包编译 |
|
||||
| `assets/styles/skin.scss` | 皮肤覆盖层(按钮 / 表单 / 表格 / 分页 / 弹层 / Element 写死的冷色) |
|
||||
| `assets/styles/index.scss` | 总入口,**最后一行 `@import './skin.scss'`**(整体回滚 = 注释这一行) |
|
||||
| `assets/styles/sidebar.scss` / `variables.scss` | 侧栏(4 色图标轮换)/ 菜单深浅两套色 + `:export` 给 js |
|
||||
|
||||
**六轮递进,要点**:
|
||||
|
||||
1. **建色源 + 换 Element 底色**:primary 定陶土 `#9a5c35`(**不用草绿**,否则「新增 / 修改」同色系分不清;
|
||||
想切回只改色源一处),success 草绿 `#457450`,warning 深雏菊金 `#8f6418`,danger 莓红 `#a4485a`,info 暖褐 `#6b6152`。
|
||||
正文 `#5f4f3d`(**`#8b7355` 只有 4.17:1,禁止做正文**);草绿 `#5a8f5a` 白字仅 3.81:1 ⇒ **只做装饰与大色块**,
|
||||
绿色文字一律 `#3f6b45`。
|
||||
2. **摘掉隐藏的 ThemePicker**:`App.vue` 曾无条件挂 `<theme-picker>`(只用 CSS `display:none` 藏,组件照样 mount),
|
||||
它在 `created()` 里会去 `unpkg.com` 拉整包 Element 默认主题并注入 `<style>` **把配色改回企业蓝**。已移除,别再挂回去。
|
||||
3. **全局色板机械清扫**(45 个文件):把散在业务页里的旧 Element 色(`#409eff` / `#67c23a` / `#e6a23c` / `#f56c6c` / `#909399` …)
|
||||
按语义映射到色源;同时改掉 `Logo.vue` / `Navbar.vue` 的白色毛玻璃 + 蓝阴影、全局滚动条的冷蓝。
|
||||
4. **顶栏与标签页合并成一条**,去掉重复显示的面包屑。
|
||||
5. **Element 内部写死的冷色**(hex 搜索抓不到、只能用更高权重规则盖):白遮罩、蓝色 info toast、
|
||||
冷绿上传成功勾 `#13ce66`(**它的选择器是带父级的三段式 0,2,0,单类选择器会被压住**)、冷灰滚动条 / 标签 / 日期面板。
|
||||
根因是 `$--color-white` → 把**暖白 `#fffdfa`** 提为「白」,一次性统一所有白色面。
|
||||
6. **操作列按钮折行**(用户截图里那类问题)——根因不是列宽不够,而是 `element-ui.scss` 里一条全局规则
|
||||
`.fixed-width .el-button--mini { width: 60px }` 把按钮钉死 60px,`图标 + 2~4 个中文` 直接被截断换行。
|
||||
删掉该规则 + 给 19 个操作列补显式宽度(≥3 个按钮的收进「更多」下拉)+ 补下拉与前钮间距。
|
||||
|
||||
**验证(三层,脚本留在 `.workbuddy/`,可重跑)**:
|
||||
|
||||
- `node .workbuddy/audit-palette.cjs` —— 源码级色板审计(`.vue` + `.scss` + `.css`,**先剥注释再扫**):
|
||||
当前 **0 / 184 文件离版**。色板白名单里另有一类**刻意保留的域内语义色**:
|
||||
CS2 稀有度、麻将/饰品品质色谱(金/红/紫)、仪表盘折线色 —— **不是主题色,不许改**。
|
||||
- `node .workbuddy/verify-dist.cjs` —— 构建产物断言,**34 项 ALL_OK**:① 本项目源码的冷色必须为 0;
|
||||
② 新增规则必须存在;③ 中性色(`rgba(0,0,0,*)`)设「冻结基线」上限防复发。
|
||||
**扫描范围是 app.css + 全部 `chunk-*.css`**(views/* 是懒加载,只看 app.css 会整片漏掉)。
|
||||
- `node .workbuddy/verify-computed.cjs` —— **真机 Chrome 计算样式断言,20 项 ALL_OK**。
|
||||
专治 element-ui 内部字面量色:这些色值**在样式表文本里去不掉**,`grep = 0` 不成立,必须看计算值。
|
||||
- 构建:`DONE Build complete`,零 Sass 错误;仅剩既有的 `delLevel` 缺失导出 + 体积警告,与本改动无关。
|
||||
|
||||
**踩坑**:并行对**同一文件**发多个 Edit 会撞 `EBUSY`;更阴的是**偶发不报错、但两次写入只剩一次**(本次 `sidebar.scss` 丢过两个替换)
|
||||
⇒ **机械替换一律串行,改完用 grep 逐条复验**,别信 Edit 的 success 回执。
|
||||
|
||||
**刻意未做**:① `variables.scss` 里 `sideTheme: theme-dark` 的深色侧栏回退色(冷蓝灰)保留 ——
|
||||
设置抽屉里的「深色」按钮现在点下去视觉上是空操作(皮肤层已把侧栏壳设成透明 + 文字 `!important`),
|
||||
**没有删按钮也没改回退色**,要不要彻底下掉这个开关待定;② `btn.scss` 的 `.blue-btn` 等 7 个类全项目 0 引用,
|
||||
但其颜色已随 `variables.scss` 指向新色板,**不构成视觉问题,未清理**。
|
||||
|
||||
Reference in New Issue
Block a user