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

用户验收反馈三处： 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 通过。
2026-09-20 02:42:07 +08:00
parent e5a9506228
commit abccca4397
3 changed files with 307 additions and 73 deletions
@@ -126,10 +126,32 @@ onMounted(async () => {
        basic.parentSiteId = lockParentId.value;
    }
    loading.value = false;
+    patchAncestorOverflow();
    nextTick(setupAnchorObserver);
 });

-onBeforeUnmount(() => observer?.disconnect());
+/**
+ * 左侧锚点导航 sticky 的生效前提：布局遗留的 .main-container 带 overflow:hidden
+ * （清浮动时代产物），sticky 会改为相对这个"自身不滚动的隐藏滚动盒"定位 → 表现为
+ * 跟随内容滚走（2026-09-20 实测滚动 600px 导航 top=-387）。本页内容为 flex/常规流，
+ * 不依赖该 overflow 裁剪浮动，故进入本页时运行时改写、离开时还原，零全局影响。
+ */
+let patchedContainer: HTMLElement | null = null;
+function patchAncestorOverflow() {
+    const el = document.querySelector<HTMLElement>(".base-wrap-main .main-container");
+    if (el && getComputedStyle(el).overflow === "hidden") {
+        patchedContainer = el;
+        el.style.overflow = "visible";
+    }
+}
+
+onBeforeUnmount(() => {
+    observer?.disconnect();
+    if (patchedContainer) {
+        patchedContainer.style.overflow = "";
+        patchedContainer = null;
+    }
+});

 async function loadSites() {
    sites.value = (await siteApi.list().send()) || [];
@@ -458,7 +480,6 @@ watch(() => store.currentSchool?.schId, () => loadSites());
                                <ThemePicker :themes="themes" :model-value="theme" @update:model-value="pickTheme" />
                                <Button size="small" class="preview-btn" :disabled="!editTheme" @click="openPreview">预览本皮肤</Button>
                                <ThemeParamForm :theme="editTheme" v-model="themeParams" />
-                                <p class="form-hint">换肤/改参数保存后门户立即生效（缓存已自动失效）。</p>
                            </div>
                            <!-- B3 自定义样式（config_json.custom_css，服务端黑名单强校验） -->
                            <Collapse class="css-collapse">
@@ -480,7 +501,7 @@ watch(() => store.currentSchool?.schId, () => loadSites());
                        </div>
                        <div class="card-footer">
                            <Button type="primary" :loading="saving.theme" @click="saveTheme">仅保存皮肤与外观</Button>
-                            <span class="card-hint">仅保存本分区；其他分区未保存的修改仍在页面上，下次任一分区保存会一并带上</span>
+                            <span class="card-hint">换肤/改参数保存后门户立即生效（缓存已自动失效）；其他分区未保存的修改仍在页面上，下次任一分区保存会一并带上</span>
                        </div>
                    </div>

@@ -603,32 +624,48 @@ watch(() => store.currentSchool?.schId, () => loadSites());
        align-items: flex-start;
    }
    .ss-nav {
-        width: 180px;
+        width: 184px;
        flex: none;
        position: sticky;
-        top: 84px;
+        top: 72px;
        display: flex;
        flex-direction: column;
-        gap: 4px;
+        gap: 2px;
+        padding: 6px;
+        border: 1px solid #e9edf5;
+        border-radius: 10px;
+        background: #fff;
+        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 30px -22px rgba(16, 24, 40, 0.4);
        .ss-nav-item {
-            padding: 8px 12px;
-            border-radius: 6px;
+            position: relative;
+            padding: 8px 10px 8px 14px;
+            border-radius: 7px;
            cursor: pointer;
            transition: background 0.2s;
            &:hover {
-                background: #f0faff;
+                background: #f0f4ff;
            }
            &.active {
-                background: #e8f4ff;
+                background: #eef2ff;
+                &::before {
+                    content: "";
+                    position: absolute;
+                    left: 4px;
+                    top: 10px;
+                    bottom: 10px;
+                    width: 3px;
+                    border-radius: 2px;
+                    background: #577afb;
+                }
                .ss-nav-title {
-                    color: #2d8cf0;
+                    color: #4264e4;
                }
            }
            .ss-nav-title {
                display: block;
                font-size: 13px;
                font-weight: 600;
-                color: #515a6e;
+                color: #1e2635;
            }
            .ss-nav-lock {
                color: #c5c8ce;
@@ -636,12 +673,33 @@ watch(() => store.currentSchool?.schId, () => loadSites());
            }
            .ss-nav-desc {
                display: block;
-                color: #999;
+                color: #8a93a6;
                font-size: 12px;
                margin-top: 2px;
            }
        }
    }
+    @media (max-width: 1080px) {
+        .ss-layout {
+            flex-direction: column;
+        }
+        .ss-nav {
+            position: static;
+            width: 100%;
+            flex-direction: row;
+            flex-wrap: wrap;
+            gap: 4px;
+            .ss-nav-item {
+                flex: none;
+                .ss-nav-desc {
+                    display: none;
+                }
+                &.active::before {
+                    display: none;
+                }
+            }
+        }
+    }
    .ss-cards {
        flex: 1;
        min-width: 0;
@@ -650,11 +708,12 @@ watch(() => store.currentSchool?.schId, () => loadSites());
        gap: 14px;
    }
    .setting-card {
-        border: 1px solid #e8eaec;
-        border-radius: 8px;
+        border: 1px solid #e9edf5;
+        border-radius: 10px;
        background: #fff;
-        padding: 16px 18px;
-        scroll-margin-top: 76px;
+        padding: 18px 20px;
+        scroll-margin-top: 84px;
+        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
        &.locked {
            .card-body {
                opacity: 0.55;
@@ -669,13 +728,25 @@ watch(() => store.currentSchool?.schId, () => loadSites());
            padding-bottom: 10px;
            border-bottom: 1px solid #f0f2f5;
            .card-title {
+                position: relative;
                font-size: 15px;
                font-weight: 600;
-                color: #17233d;
+                color: #1e2635;
+                padding-left: 10px;
+                &::before {
+                    content: "";
+                    position: absolute;
+                    left: 0;
+                    top: 3px;
+                    bottom: 3px;
+                    width: 3px;
+                    border-radius: 2px;
+                    background: #577afb;
+                }
            }
            .card-subtitle {
                font-size: 12px;
-                color: #999;
+                color: #8a93a6;
            }
        }
        .card-footer {
@@ -686,9 +757,11 @@ watch(() => store.currentSchool?.schId, () => loadSites());
            padding-top: 12px;
            border-top: 1px solid #f0f2f5;
            .card-hint {
-                color: #999;
+                flex: 1;
+                min-width: 0;
+                color: #8a93a6;
                font-size: 12px;
-                line-height: 1.5;
+                line-height: 1.6;
            }
        }
        .ss-lock-tip {