theme: 以 feature/theme-remote-p0 内容整体替换 main（主题通道化试点，非 merge）

- 本地 icons.css/layout.css 下线改走中央静态通道；新增 ThemeSwitcher.vue + useElementHeight.ts；
  layout/main.ts/vite/menu 及各页适配对齐 feature 试点。
- 已知回退：本轮按 feature 覆盖，冲掉了 main 上 31ca694(/approval 可达性+modId 对齐) 与
  1516eff(cc useTableHeight) 两处功能修复，待后续单独补回。
- 回滚锚点：archive/main-before-theme-20260924 = 替换前 main(1516eff)。

src/components/TablePageAlovaNew.vue

@@ -1,13 +1,15 @@
 <template>
-    <Table :columns="columns" :data="list" :height="tableH" :loading="loading" no-data-text="暂无数据"
-        class="link-table table-bottom-box" @on-selection-change="selectChange">
-        <template #loading>
-            <div class="table-spin-load">加载中</div>
-        </template>
-        <template v-for="slotName in tableSlotNames" :key="slotName" v-slot:[slotName]="slotProps">
-            <slot :name="slotName" v-bind="slotProps" />
-        </template>
-    </Table>
+    <div class="table-region" ref="regionRef">
+        <Table :columns="columns" :data="list" :height="tableH" :loading="loading" no-data-text="暂无数据"
+            class="link-table table-bottom-box" @on-selection-change="selectChange">
+            <template #loading>
+                <div class="table-spin-load">加载中</div>
+            </template>
+            <template v-for="slotName in tableSlotNames" :key="slotName" v-slot:[slotName]="slotProps">
+                <slot :name="slotName" v-bind="slotProps" />
+            </template>
+        </Table>
+    </div>
 
     <div class="page-panel">
         <div class="fl ml-15 align-middle">
@@ -22,7 +24,7 @@
 
 <script setup lang="ts">
 import { computed, ref, useSlots } from 'vue'
-import Utils from '@/utils'
+import { useElementHeight } from '@/utils/hook/useElementHeight'
 import { OperatorEnum } from '@/types'
 
 interface Props {
@@ -44,7 +46,10 @@ const emit = defineEmits<{
 }>()
 const slots = useSlots()
 
-const tableH = ref(props.tableHeight ?? Utils.useTableHeight())
+const regionRef = ref<HTMLElement | null>(null)
+const measuredH = useElementHeight(regionRef)
+// 显式传 tableHeight 则尊重之；否则实测 .table-region（flex:1）高度喂固定表头，首帧未测出前用 undefined（auto）
+const tableH = computed(() => props.tableHeight ?? (measuredH.value || undefined))
 const tableSlotNames = computed(() => Object.keys(slots).filter(name => !['default', 'loading'].includes(name)))
 
 const selectList = ref<number[]>([])

src/components/ThemeSwitcher.vue

@@ -0,0 +1,274 @@
+<script setup lang="ts">
+/* 管理端配色切换器（yh-theme 定稿 07-seam-pure 顶栏「配色」胶囊，方案 §6.5）。
+ * 状态唯一来源：utils/theme（localStorage 持久化 + <html> 档位类名），与门户皮肤包正交。 */
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import {
+    loadThemeState,
+    saveThemeState,
+    applyThemeState,
+    type ThemeName,
+    type ThemeState,
+} from "@/utils/theme";
+
+const THEME_META: { name: ThemeName; label: string; color: string }[] = [
+    { name: "blue", label: "原版靛蓝", color: "#577afb" },
+    { name: "ocean", label: "云海蓝", color: "#2f7ce0" },
+    { name: "ink", label: "石墨墨", color: "#3d4d63" },
+    { name: "violet", label: "靛紫", color: "#6d5ae0" },
+    { name: "teal", label: "松石绿", color: "#0d9488" },
+];
+
+const wrapEl = ref<HTMLElement | null>(null);
+const open = ref(false);
+const state = ref<ThemeState>(loadThemeState());
+/* 挂载即把存储态落到 <html>（与 main.ts initTheme 同源幂等；组件晚于引导挂载时也自洽） */
+applyThemeState(state.value);
+
+function commit(patch: Partial<ThemeState>) {
+    state.value = { ...state.value, ...patch };
+    applyThemeState(state.value);
+    saveThemeState(state.value);
+}
+
+function toggle(ev: MouseEvent) {
+    ev.stopPropagation();
+    open.value = !open.value;
+}
+
+/** 切换器外任意点击即收起（弹层内部点击由 wrap 判定放过） */
+function onDocClick(ev: MouseEvent) {
+    if (open.value && wrapEl.value && !wrapEl.value.contains(ev.target as Node)) {
+        open.value = false;
+    }
+}
+
+onMounted(() => document.addEventListener("click", onDocClick, true));
+onBeforeUnmount(() => document.removeEventListener("click", onDocClick, true));
+</script>
+
+<template>
+    <div ref="wrapEl" class="theme-wrap">
+        <button type="button" class="theme-btn" :class="{ on: open }" @click="toggle">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 3a9 9 0 1 0 0 18c1.2 0 1.9-.9 1.9-1.8 0-.6-.3-1-.5-1.4-.2-.4-.4-.8-.4-1.3 0-.9.8-1.7 1.8-1.7H17a4 4 0 0 0 4-4c0-4.3-4-7.8-9-7.8z"/>
+                <circle cx="7.6" cy="11.2" r="1.1"/><circle cx="11" cy="7.6" r="1.1"/><circle cx="15.4" cy="8.6" r="1.1"/>
+            </svg>
+            <span>配色</span>
+            <svg class="caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M5.5 9.5l6.5 6.5 6.5-6.5"/>
+            </svg>
+        </button>
+
+        <div class="theme-pop" :class="{ open }">
+            <p class="tp-head">主题色</p>
+            <div class="tp-grid">
+                <button
+                    v-for="t in THEME_META"
+                    :key="t.name"
+                    type="button"
+                    class="theme-opt"
+                    :class="{ active: state.theme === t.name }"
+                    @click="commit({ theme: t.name })"
+                >
+                    <i :style="{ background: t.color }"></i>{{ t.label }}
+                </button>
+            </div>
+            <div class="tp-sep"></div>
+            <p class="tp-head">侧栏样式</p>
+            <label class="tp-row">
+                <span>侧栏跟随顶栏色</span>
+                <span class="sw">
+                    <input type="checkbox" :checked="state.sideFollow" @change="commit({ sideFollow: ($event.target as HTMLInputElement).checked })" />
+                    <i></i>
+                </span>
+            </label>
+            <label class="tp-row" style="margin-top: 9px">
+                <span>侧栏深色（关＝浅色）</span>
+                <span class="sw">
+                    <input type="checkbox" :checked="state.sideDeep" @change="commit({ sideDeep: ($event.target as HTMLInputElement).checked })" />
+                    <i></i>
+                </span>
+            </label>
+            <div class="tp-sep"></div>
+            <label class="tp-row">
+                <span>顶部过渡色（渐变）</span>
+                <span class="sw">
+                    <input type="checkbox" :checked="state.gradOn" @change="commit({ gradOn: ($event.target as HTMLInputElement).checked })" />
+                    <i></i>
+                </span>
+            </label>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* 皮肤规格照搬定稿 07-seam-pure.html .theme-wrap/.theme-btn/.theme-pop 段 */
+.theme-wrap {
+    position: relative;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+.theme-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 30px;
+    padding: 0 11px;
+    cursor: pointer;
+    border: 1px solid rgba(255, 255, 255, 0.34);
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.14);
+    color: #fff;
+    font-size: 12.5px;
+    transition: background 0.16s, border-color 0.16s;
+}
+.theme-btn:hover,
+.theme-btn.on {
+    background: rgba(255, 255, 255, 0.26);
+    border-color: rgba(255, 255, 255, 0.6);
+}
+.theme-btn svg {
+    width: 14px;
+    height: 14px;
+    display: block;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.7;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+.theme-btn svg circle {
+    fill: currentColor;
+    stroke: none;
+}
+.theme-btn .caret {
+    width: 11px;
+    height: 11px;
+    opacity: 0.85;
+    transition: transform 0.18s;
+}
+.theme-btn.on .caret {
+    transform: rotate(180deg);
+}
+.theme-pop {
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 0;
+    width: 224px;
+    background: #fff;
+    color: var(--text, #1e2635);
+    border-radius: 12px;
+    border: 1px solid var(--line, #e9edf5);
+    padding: 12px;
+    box-shadow: 0 12px 34px -10px rgba(16, 24, 40, 0.28), 0 2px 6px rgba(16, 24, 40, 0.08);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-6px);
+    transition: 0.18s;
+    z-index: 40;
+}
+.theme-pop.open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+.tp-head {
+    font-size: 11.5px;
+    color: var(--text-3, #98a1b2);
+    letter-spacing: 0.5px;
+    margin: 0 2px 8px;
+}
+.tp-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 6px;
+}
+.theme-opt {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    height: 32px;
+    padding: 0 8px;
+    cursor: pointer;
+    text-align: left;
+    border: 1px solid var(--line, #e9edf5);
+    border-radius: 8px;
+    background: #fff;
+    color: var(--text-2, #5a6478);
+    font-size: 12px;
+    transition: 0.15s;
+    font-family: inherit;
+}
+.theme-opt:hover {
+    border-color: #cfd7e6;
+    background: #fafbfe;
+}
+.theme-opt i {
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    flex: 0 0 auto;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+}
+.theme-opt.active {
+    border-color: var(--brand, #577afb);
+    color: var(--brand, #577afb);
+    background: var(--brand-soft, #eef2ff);
+    font-weight: 600;
+}
+.tp-sep {
+    height: 1px;
+    background: var(--line, #e9edf5);
+    margin: 12px 0 10px;
+}
+.tp-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 12.5px;
+    color: var(--text-2, #5a6478);
+    cursor: pointer;
+    padding: 0 2px;
+}
+.sw {
+    position: relative;
+    width: 38px;
+    height: 21px;
+    flex: 0 0 auto;
+}
+.sw input {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    margin: 0;
+    cursor: pointer;
+    z-index: 1;
+}
+.sw i {
+    position: absolute;
+    inset: 0;
+    border-radius: 999px;
+    background: #d7dce6;
+    transition: background 0.2s;
+    pointer-events: none;
+}
+.sw i::after {
+    content: "";
+    position: absolute;
+    top: 2.5px;
+    left: 2.5px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.28);
+    transition: transform 0.2s;
+}
+.sw input:checked + i {
+    background: var(--brand, #577afb);
+}
+.sw input:checked + i::after {
+    transform: translateX(17px);
+}
+</style>

src/components/layout.vue

@@ -3,6 +3,7 @@ import { ref, onBeforeMount, watch, computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { Message } from "view-ui-plus";
 import { resolveMenuPage } from "@/utils/menuRoute";
+import ThemeSwitcher from "@/components/ThemeSwitcher.vue";
 
 const props = defineProps<{ layoutData: Record<string, any> }>();
 const route = useRoute();
@@ -129,7 +130,7 @@ const childChange = (index: number) => {
 };
 
 /** 菜单图标：读取用户中心模块管理配置的 YschIcons 图标名（GetUserMod 的 icon 字段，如 list → icon-list）。
- *  本地 icons.css 即 ysch-icons 掩码版（基类 iconfont，类名 icon-<名称>）；
+ *  icons.css（ysch-icons 掩码版，基类 iconfont，类名 icon-<名称>）现由中央静态通道下发；
  *  平台约定留空不下发图标，此时返回空串由模板 v-if 不渲染 */
 const getMenuIcon = (item?: any): string => {
     const icon = String(item?.icon || "").trim();
@@ -149,16 +150,13 @@ function linkHomePage() {
 <template>
     <div class="layout-wrap">
         <header class="header-container fix">
-            <div class="fl align-middle icon-box">
-                <div title="首页" class="icon-btn" @click="linkHomePage">
-                    <i class="iconfont icon-shouye"></i>
-                </div>
-            </div>
+            <!-- 云海 logo 徽标（结构与 Cms SchoolLayout 对齐，皮肤见通道 base.layout.css .logo-badge） -->
+            <span class="logo-badge fl"><img src="@/assets/image/yunhai-logo.svg" alt="云海" /></span>
             <div class="delimiter fl align-middle"></div>
             <h4 class="fl align-middle">{{ appName }}</h4>
             <div class="school-bg"></div>
             <div class="header-aside fr">
-                <img :src="userInfo.avatar" class="fl align-middle" @click="linkUserInfo" />
+                <img :src="userInfo.avatar" v-if="userInfo.avatar" class="fl align-middle" @click="linkUserInfo" />
                 <a class="name fl align-middle text-ellipsis" href="javascript:void(0);" @click="linkUserInfo">
                     {{ userInfo.name }}
                 </a>
@@ -167,6 +165,8 @@ function linkHomePage() {
                     <i class="iconfont icon-logout"></i>
                 </a>
             </div>
+            <!-- 配色切换器（fr 顺序：DOM 后置即位于用户胶囊左侧） -->
+            <div class="theme-cap fr"><ThemeSwitcher /></div>
         </header>
         <div class="left-menu" v-if="!isAlone">
             <div class="menu-top-box"></div>
@@ -210,7 +210,7 @@ function linkHomePage() {
                 <a href="javascript:;" @click="linkHomePage">
                     <BreadcrumbItem>
                         <span class="crumb-home">
-                            <i class="iconfont icon-category"></i>
+                            <i class="iconfont icon-shouye"></i>
                             首页
                         </span>
                     </BreadcrumbItem>
@@ -250,14 +250,23 @@ function linkHomePage() {
 </template>
 
 <style scoped>
-/* 仅覆盖/补充必要的动态样式，其余样式由全局 layout.css 提供 */
-/* 菜单图标（本地 bsch-icons 掩码类）与文字间距 */
+/* 仅覆盖/补充必要的动态样式，其余样式由中央静态通道的 base.layout.css（骨架 + 皮肤）提供 */
+/* 菜单图标（通道下发的 ysch-icons 掩码类）与文字间距 */
 .left-menu a .iconfont {
     margin-right: 8px;
 }
-/* 面包屑「首页」垂直居中：layout.css 遗留的 .path-nav .icon-category{position:relative;top:1px}
+/* 顶栏已由通道皮肤改为 flex 垂直居中（skin.src.css .header-container），
+   这里不再用 float 时代的 13px 顶偏移补偿，仅留右侧间距；徽标大小/圆底/阴影属皮肤 */
+.header-container .logo-badge {
+    margin: 0 10px 0 0;
+}
+.theme-cap {
+    height: var(--topbar-h);
+    margin-right: 6px;
+}
+/* 面包屑「首页」垂直居中：骨架遗留的 .path-nav .icon-category{position:relative;top:1px}
    是给老 iconfont 字体字形做的基线补偿，换成 ysch mask 的 1em 方块后反而把图标顶偏；
-   这里用 inline-flex 真居中并关掉该补偿（不动压缩产物 layout.css，覆盖收在本组件内） */
+   这里用 inline-flex 真居中并关掉该补偿（不动通道产物，覆盖收在本组件内） */
 .crumb-home {
     display: inline-flex;
     align-items: center;