feat(admin): 站点设置页三处体验修复 + 主题参数横排色卡 + 新皮肤 mock
build / build (push) Successful in 2m19s

用户验收反馈三处:
1. 左侧锚点导航不固定——根因 .base-wrap-main .main-container 的 legacy
   overflow:hidden 使 sticky 相对不滚动的隐藏滚动盒定位失效(实测滚动 600px
   导航 top=-387);本页运行时改写为 visible、离开还原,修复后滚动 800px
   导航稳定停在 top:72px。窄屏(≤1080)导航转横排胶囊。
2. 皮肤颜色参数竖排长蛇(真实主题 12 个色参数 = 12 行)——ThemeParamForm
   重排:color 参数转 150px 起步 auto-fill 色卡网格(宽屏一行 4~5 张,
   色卡含取色器+名称+HEX),select/image/text 转两列行式;非法值红框提示。
3. 「换肤/改参数保存后门户立即生效」提示框样式突兀且与按钮拥挤——移除
   皮肤区内联 form-hint,并入卡片 footer 的 card-hint(与基本信息卡一致)。
整页配套:分区卡 10px 圆角+柔和阴影+品牌竖条标题、锚点导航品牌指示条、
footer hint 自适应换行。
mock THEMES 补 poly-blue/agri-forest/jade-normal 三套新皮肤条目。
vitest 147/147 绿;vite build 通过。
This commit is contained in:
chenxing
2026-09-20 02:42:07 +08:00
parent e5a9506228
commit abccca4397
3 changed files with 307 additions and 73 deletions
+42
View File
@@ -131,6 +131,48 @@ const THEMES: MockTheme[] = [
{ key: "accent", cssVar: "--cz-accent", label: "点缀青绿", type: "color", defaultValue: "#2b9c8f" },
],
},
{
name: "poly-blue",
title: "理工蓝(poly-blue)",
description: "深宝蓝+活力橙的理工院校风:受众品牌行 + 白底吸顶导航 + 双栏要闻 + 日期方块 + 快捷通道宫格(参考浙江理工大学官网)。",
version: "1.0.0",
author: "yunhai",
bannerSize: "1920x560",
screenshotUrl: "/api/theme/poly-blue/asset/screenshot.png",
params: [
{ key: "primary", cssVar: "--pb-primary", label: "主色", type: "color", defaultValue: "#0558A5" },
{ key: "primaryDark", cssVar: "--pb-primary-dark", label: "主色加深", type: "color", defaultValue: "#124489" },
{ key: "accent", cssVar: "--pb-accent", label: "活力橙", type: "color", defaultValue: "#FF7B00" },
],
},
{
name: "agri-forest",
title: "农林绿(agri-forest)",
description: "墨绿+麦穗金的农林院校风:白页头 + 墨绿通栏导航 + SVG 图标栏目标题 + 日期方块 + 专题缩略卡(参考信阳农林学院官网)。",
version: "1.0.0",
author: "yunhai",
bannerSize: "1920x560",
screenshotUrl: "/api/theme/agri-forest/asset/screenshot.png",
params: [
{ key: "primary", cssVar: "--af-primary", label: "主色", type: "color", defaultValue: "#1C6E19" },
{ key: "primaryDark", cssVar: "--af-primary-dark", label: "主色加深", type: "color", defaultValue: "#14510F" },
{ key: "accent", cssVar: "--af-accent", label: "麦穗金", type: "color", defaultValue: "#C8A45C" },
],
},
{
name: "jade-normal",
title: "师大青(jade-normal)",
description: "翡翠青+暖橙点缀的师范院校风:橙色日期徽标 + 快捷通道图标宫格 + 融媒行(参考信阳师范大学官网)。",
version: "1.0.0",
author: "yunhai",
bannerSize: "1920x560",
screenshotUrl: "/api/theme/jade-normal/asset/screenshot.png",
params: [
{ key: "primary", cssVar: "--jn-primary", label: "主色", type: "color", defaultValue: "#008D3F" },
{ key: "primaryDark", cssVar: "--jn-primary-dark", label: "主色加深", type: "color", defaultValue: "#04682E" },
{ key: "accent", cssVar: "--jn-accent", label: "暖橙", type: "color", defaultValue: "#F18D00" },
],
},
];
function themeByName(name: string): MockTheme | undefined {