UserhomeFront/src/views/ThemePreview.vue

<template>
    <!-- 主题预览页（#/theme-preview，YschTheme《主题设置与通道改动-执行方案》§3.4）：
         只在本路由的 document 内加载通道（组件挂载时动态 append init 脚本），
         档位类与通道 CSS 只落在本 document 的 <html> 上——UserHome 本体（父页）永远不吃通道 CSS。
         纯展示：根容器 pointer-events:none，不渲染搜索区/分页操作/ThemeSwitcher。
         DOM 结构对齐 Notice layout（header-container / left-menu / path-nav / main-container），
         观感（配色/侧栏形态）由通道 base.layout.css 按 URL 覆盖参数（?yh-theme= 等）驱动的档位类提供。 -->
    <div class="theme-preview-root">
        <header class="header-container fix">
            <span class="logo-badge fl"><span class="logo-mark">云海</span></span>
            <div class="delimiter fl align-middle"></div>
            <h4 class="fl align-middle">管理端预览</h4>
            <div class="school-bg"></div>
            <div class="header-aside fr">
                <span class="name fl align-middle text-ellipsis">演示用户</span>
                <div class="delimiter fl align-middle"></div>
                <a href="javascript:;" class="logout fl align-middle" title="退出登陆"><i>⎋</i></a>
            </div>
        </header>
        <div class="left-menu">
            <div class="menu-top-box"></div>
            <ul>
                <li v-for="(m, i) in menus" :key="m" :class="{ active: i === 1 }">
                    <a href="javascript:void(0);"><span class="menu-dot"></span>{{ m }}</a>
                </li>
            </ul>
            <div class="clear-box"></div>
        </div>
        <div class="path-nav">
            <span>首页</span><span class="crumb-sep">/</span><span>通知管理</span><span class="crumb-sep">/</span><span>通知列表</span>
        </div>
        <div class="preview-main">
            <div class="main-container">
                <h3 class="panel-title">通知列表</h3>
                <Table :columns="columns" :data="rows" size="small" :border="true" />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import useCurrentInstance from "@/utils/hook/useCurrentInstance";

/**
 * 主题预览路由页：档位来源 = URL 覆盖参数（?yh-theme= / ?yh-side= / ?yh-grad=，由设置页 iframe src 拼入，
 * 切候选档即换 src 重载），init 启动段按合成优先级挂档——本组件不读写 localStorage、不提供任何交互。
 * 直开（不经设置页、未登录）也可渲染：本页由 App.vue 顶层条件分支挂载，不依赖桌面框架与登录态。
 */
const { $conf } = useCurrentInstance();

const menus = ["工作台", "通知管理", "统计分析", "应用中心", "系统设置"];

const columns = [
    { type: "index", title: "序号", width: 70, align: "center" },
    { title: "标题", key: "title" },
    { title: "发布人", key: "author", width: 120, align: "center" },
    { title: "日期", key: "date", width: 160, align: "center" },
];
const rows = [
    { title: "关于国庆节放假安排的通知", author: "校务办", date: "2026-09-28" },
    { title: "期中教学质量检查实施方案", author: "教务处", date: "2026-09-25" },
    { title: "校园安全专项检查通报", author: "保卫处", date: "2026-09-21" },
    { title: "教师信息化能力培训报名", author: "信息中心", date: "2026-09-18" },
];

onMounted(() => {
    // 动态引通道 init（仅本 document；UserHome 本体 index.html 不加 loader 是定案）。
    // baseHost 即通道域（与 UserBase/Notice 的 loader 同源策略）；判重防重复挂载。
    if (document.querySelector("script[data-yh-theme-init]")) return;
    const s = document.createElement("script");
    s.src = `${String($conf.baseHost || "").replace(/\/+$/, "")}/static/js/yh-theme-init.js`;
    s.setAttribute("data-yh-theme-init", "1");
    document.head.appendChild(s);
});
</script>

<style scoped lang="scss">
/* 本页只补最小布局；配色/圆角/阴影等观感全部由通道 base.layout.css 的档位类驱动 */
.theme-preview-root {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none; /* 纯展示：整页不可交互 */
    background: #f5f6f8;
    font-size: 14px;
}

.header-container {
    .logo-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.22);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
    }
    h4 {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        margin: 0 12px;
    }
}

.menu-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
    margin-right: 9px;
    vertical-align: middle;
}

.path-nav .crumb-sep {
    margin: 0 8px;
    color: #c5c8cd;
}

.preview-main {
    position: fixed;
    top: calc(var(--topbar-h, 52px) + var(--crumb-h, 44px));
    left: var(--side-w, 200px);
    right: 0;
    bottom: 0;
    padding: 14px 24px 24px;
    overflow: auto;

    .panel-title {
        font-size: 15px;
        font-weight: 600;
        color: #2c3138;
        margin: 4px 0 12px;
    }
}
</style>