From aa3dafa932f331088d49f35d5655bbc77f627cbf Mon Sep 17 00:00:00 2001
From: chenxing <chenxing@bestsch.com>
Date: Wed, 30 Sep 2026 09:28:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(msgcenter,settings):=20=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E4=B8=8E=E8=AE=BE=E7=BD=AE=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E5=8C=96=20+=20=E8=83=8C=E6=99=AF=E5=B1=82?=
 =?UTF-8?q?=E5=8F=8C=E5=8D=A1=E6=94=B9=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 /msg 消息中心路由页：左右双卡（左卡按分类/按应用双模式、右卡工具栏+列表），
  mock 数据，含时间格式/未读红点/已读三重置灰/审批直批按钮
- 新增 /settings 设置中心路由页：左导航卡+右内容卡，10 个 pane，?pane= 双向同步，
  管理员/普通用户角色差异（普通用户直达管理项渲染无权限黄条）
- 侧栏新增「设置」一级入口（前台硬编码补位，后台已配同 url 时自动去重）+ 分隔线 + 本地齿轮图标
- SysSetting.vue 卡片化：圆角 5→10px + 阴影，统一为 0 10px 20px rgba(0,0,0,.1)
- .base-mask 提升：rgba(255,255,255,.35)→.55，blur(2px)→10px
- Header 铃铛「查看全部」改跳 /msg；App.vue 菜单守卫放行 /msg、/settings（前台路由不在后端菜单表）
---
 src/App.vue                        |    3 +-
 src/assets/icons/menu-settings.svg |    1 +
 src/assets/styles/main.scss        |    6 +-
 src/components/Header.vue          |    2 +-
 src/components/LeftMenu.vue        |   36 +-
 src/router/routes.ts               |   12 +
 src/views/Settings.vue             | 1010 ++++++++++++++++++++++++++++
 src/views/SysSetting.vue           |    6 +-
 src/views/msg/index.vue            |  673 ++++++++++++++++++
 9 files changed, 1737 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/icons/menu-settings.svg
 create mode 100644 src/views/Settings.vue
 create mode 100644 src/views/msg/index.vue

diff --git a/src/App.vue b/src/App.vue
index a754c07..7282c4b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -113,7 +113,8 @@ async function loadUserMenuBarList() {
     } else {
         findIndex = menuList.findIndex(x => x.url === route.path);
     }
-    if (findIndex === -1) router.push({ name: "index" });
+    // /msg、/settings 是前台硬编码路由（不在后台菜单表里），直达/刷新不应被弹回桌面
+    if (findIndex === -1 && !["/msg", "/settings"].includes(route.path)) router.push({ name: "index" });
 }
 
 const getRouterKey: (route: any) => string = route => {
diff --git a/src/assets/icons/menu-settings.svg b/src/assets/icons/menu-settings.svg
new file mode 100644
index 0000000..2d63f0b
--- /dev/null
+++ b/src/assets/icons/menu-settings.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3.2"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index e2f8fa0..b9d845a 100644
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -104,9 +104,9 @@
     background-attachment: fixed;
 }
 .base-mask {
-    background: rgba(255, 255, 255, 0.35);
-    backdrop-filter: blur(2px);
-    -webkit-backdrop-filter: blur(2px);
+    background: rgba(255, 255, 255, 0.55);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
 }
 
 .app-loading {
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 07e3f1f..d7458a7 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -694,7 +694,7 @@ function resetMsgPage() {
 }
 function showMsgList() {
     isMsgShow.value = false;
-    isMsgListShow.value = true;
+    router.push("/msg");
     refTablePage.value.reloadData();
 }
 
diff --git a/src/components/LeftMenu.vue b/src/components/LeftMenu.vue
index 0915fd1..4cb695b 100644
--- a/src/components/LeftMenu.vue
+++ b/src/components/LeftMenu.vue
@@ -5,17 +5,18 @@
                 <SvgIcon name="menu-operate" color="#ececec" />
             </li>
             <template v-for="(item, index) in menuList" :key="index">
+                <!-- 硬编码补位的「设置」一级入口上方的分隔线（业务入口 vs 系统入口分层） -->
+                <li v-if="item.sep" class="menu-sep" aria-hidden="true"></li>
                 <li
                     v-wave="myWave"
                     @click="linkPage(item, index)"
                     :class="{ active: index == activeIndex, 'first-bottom': index == menuFirstBottomIndex }"
                 >
                     <a :title="item.name">
-                        <FetchSvg
-                            size="24"
-                            :src="$conf.serviceHost + item.icon"
-                            :color="index == activeIndex ? '#fff' : '#ececec'"
-                        />
+                        <SvgIcon v-if="item.localIcon" :name="item.localIcon" size="24"
+                            :color="index == activeIndex ? '#fff' : '#ececec'" />
+                        <FetchSvg v-else size="24" :src="$conf.serviceHost + item.icon"
+                            :color="index == activeIndex ? '#fff' : '#ececec'" />
                         <span>{{ item.name }}</span>
                     </a>
                 </li>
@@ -65,9 +66,26 @@ const route = useRoute(),
 
 const store = useDefaultStore();
 const { menuVisible } = storeToRefs(store);
+/** 硬编码的「设置」一级入口：isNative 直走 router.push，图标用本地 svg sprite */
+const SETTINGS_MENU_ITEM = {
+    id: -1,
+    name: "设置",
+    url: "/settings",
+    isNative: true,
+    isBottom: true,
+    orderNum: 9999,
+    localIcon: "menu-settings",
+    sep: true,
+};
+
 const menuList = computed<any[]>(() => {
     let topArr = store.curUserMenuList.filter(x => x.isBottom !== true).sort((a, b) => a.orderNum - b.orderNum);
     let bottomArr = store.curUserMenuList.filter(x => x.isBottom === true).sort((a, b) => a.orderNum - b.orderNum);
+    // 「设置」一级入口走前台硬编码补位（路径 A，不动后端菜单表）；
+    // 若后台菜单表已配置同 url 的项则不重复追加，避免双入口
+    if (!store.curUserMenuList.some(x => x.url === "/settings")) {
+        bottomArr = [...bottomArr, SETTINGS_MENU_ITEM];
+    }
     return [...topArr, ...bottomArr];
 });
 
@@ -198,6 +216,14 @@ async function linkPage(item: any, index: number) {
         bottom: 8px;
         left: 5px;
     }
+    li.menu-sep {
+        width: 36px;
+        height: 1px;
+        margin: 6px auto;
+        padding: 0;
+        background: rgba(255, 255, 255, 0.22);
+        pointer-events: none;
+    }
     li:hover {
         background-color: rgba(255, 255, 255, 0.15);
     }
diff --git a/src/router/routes.ts b/src/router/routes.ts
index f6c0d38..b247a5b 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -71,5 +71,17 @@ const routes: RouteRecordRaw[] = [
         component: SysTempManage,
         meta: { title: "模板管理" },
     },
+    {
+        path: "/msg",
+        name: "Msg",
+        component: () => import("@/views/msg/index.vue"),
+        meta: { title: "消息" },
+    },
+    {
+        path: "/settings",
+        name: "Settings",
+        component: () => import("@/views/Settings.vue"),
+        meta: { title: "设置" },
+    },
 ];
 export default routes;
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
new file mode 100644
index 0000000..fbe3a2d
--- /dev/null
+++ b/src/views/Settings.vue
@@ -0,0 +1,1010 @@
+<template>
+    <!-- 左右双卡（B 方案）：壳透明，白底分别铺在 .set-nav / .set-body 两张卡上，壁纸透出。
+         gap 加在两卡的直接父容器 .set-shell 上。 -->
+    <div class="set-shell">
+        <!-- 左卡：分组导航 -->
+        <aside class="set-nav">
+            <div class="nav-title">
+                <span>设置</span>
+                <span :class="['role-chip', { user: !isAdmin }]">{{ isAdmin ? "管理员" : "普通用户" }}</span>
+            </div>
+            <template v-for="g in navGroups" :key="g.title">
+                <div class="grp">{{ g.title }}</div>
+                <div
+                    v-for="it in g.items"
+                    :key="it.key"
+                    :class="['item', { active: curPane === it.key }]"
+                    @click="setPane(it.key)"
+                >
+                    <span class="ic" v-html="it.icon"></span>
+                    <span>{{ it.name }}</span>
+                    <span v-if="it.key === 'backend'" class="ext">外部 ↗</span>
+                </div>
+            </template>
+        </aside>
+
+        <!-- 右区：sys pane 直接内嵌旧路由页 SysSetting（自带左右双卡视觉，故右区不再套白卡） -->
+        <div v-if="showSys" class="set-body set-body--sys">
+            <SysSetting />
+        </div>
+
+        <!-- 右卡：其余 pane -->
+        <div v-else class="set-body">
+            <!-- 无权限：普通用户直达管理项 / 显式 ?pane=noperm -->
+            <div v-if="isDenied || curPane === 'noperm'" class="pane">
+                <div class="no-perm">
+                    <span>⚠️</span>
+                    <span>该功能仅学校管理员可用。如需调整，请联系学校系统管理员。</span>
+                </div>
+            </div>
+
+            <!-- 个人信息 -->
+            <div v-else-if="curPane === 'profile'" class="pane">
+                <div class="pane-head">
+                    <h3>个人信息</h3>
+                    <p>查看与维护你的基础账号资料，姓名与工号由学校统一维护，如需变更请联系管理员。</p>
+                </div>
+                <div class="sec-card">
+                    <h4>基础资料</h4>
+                    <div class="form-row">
+                        <span class="lb">头像</span>
+                        <div class="ctl">
+                            <div class="avatar-now avatar-sm">张</div>
+                            <button class="btn ghost sm" @click="setPane('avatar')">更换头像</button>
+                        </div>
+                    </div>
+                    <div class="form-row">
+                        <span class="lb">姓名</span>
+                        <div class="ctl">
+                            <input class="inp" value="张明" disabled />
+                            <span class="hint">由学校统一维护</span>
+                        </div>
+                    </div>
+                    <div class="form-row">
+                        <span class="lb">工号</span>
+                        <div class="ctl">
+                            <input class="inp" value="T20240315" disabled />
+                            <span class="hint">由学校统一维护</span>
+                        </div>
+                    </div>
+                    <div class="form-row">
+                        <span class="lb">所属部门</span>
+                        <div class="ctl">
+                            <input class="inp" value="教务处 / 教研组" disabled />
+                        </div>
+                    </div>
+                    <div class="form-row">
+                        <span class="lb req">手机号</span>
+                        <div class="ctl">
+                            <input class="inp" v-model="profileForm.mobile" placeholder="请输入手机号" />
+                        </div>
+                    </div>
+                    <div class="form-row form-row--last">
+                        <span class="lb">邮箱</span>
+                        <div class="ctl">
+                            <input class="inp" v-model="profileForm.email" placeholder="请输入邮箱" />
+                        </div>
+                    </div>
+                </div>
+                <div class="pane-foot">
+                    <button class="btn primary">保存修改</button>
+                    <button class="btn plain" @click="resetProfileForm">重置</button>
+                </div>
+            </div>
+
+            <!-- 修改密码 -->
+            <div v-else-if="curPane === 'password'" class="pane">
+                <div class="pane-head">
+                    <h3>修改密码</h3>
+                    <p>修改后需重新登录。建议使用 8 位以上、包含字母与数字的组合。</p>
+                </div>
+                <div class="sec-card">
+                    <h4>密码</h4>
+                    <div class="form-row">
+                        <span class="lb req">原密码</span>
+                        <div class="ctl">
+                            <input class="inp" type="password" v-model="passwordForm.old" placeholder="请输入当前密码" />
+                        </div>
+                    </div>
+                    <div class="form-row">
+                        <span class="lb req">新密码</span>
+                        <div class="ctl">
+                            <input class="inp" type="password" v-model="passwordForm.next" placeholder="8-20 位，字母 + 数字" />
+                        </div>
+                    </div>
+                    <div class="form-row form-row--last">
+                        <span class="lb req">确认新密码</span>
+                        <div class="ctl">
+                            <input class="inp" type="password" v-model="passwordForm.confirm" placeholder="请再次输入新密码" />
+                        </div>
+                    </div>
+                </div>
+                <div class="pane-foot">
+                    <button class="btn primary">确认修改</button>
+                </div>
+            </div>
+
+            <!-- 头像设置 -->
+            <div v-else-if="curPane === 'avatar'" class="pane">
+                <div class="pane-head">
+                    <h3>头像设置</h3>
+                    <p>支持 JPG / PNG，建议 1:1 正方形，大小不超过 2MB。</p>
+                </div>
+                <div class="sec-card">
+                    <h4>当前头像</h4>
+                    <div class="avatar-pad">
+                        <div class="avatar-box">
+                            <div class="avatar-now">张</div>
+                            <div class="avatar-ops">
+                                <div class="avatar-btns">
+                                    <button class="btn primary sm">上传新头像</button>
+                                    <button class="btn plain sm">使用默认头像</button>
+                                </div>
+                                <span class="tip">上传后立即生效，全站同步展示。</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="sec-card">
+                    <h4>可选头像 <span class="tag">系统预设</span></h4>
+                    <div class="avatar-grid">
+                        <div
+                            v-for="(a, i) in avatarPresets"
+                            :key="i"
+                            :class="['avatar-item', { sel: avatarSel === i }]"
+                            :style="{ background: a }"
+                            @click="avatarSel = i"
+                        >
+                            {{ avatarLetters[i] }}<i class="tick">✓</i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- LOGO 设置（管理员） -->
+            <div v-else-if="curPane === 'logo'" class="pane">
+                <div class="pane-head">
+                    <h3>LOGO 设置</h3>
+                    <p>设置顶部导航栏与登录页展示的站点 LOGO，全站生效。</p>
+                </div>
+                <div class="sec-card">
+                    <h4>当前 LOGO</h4>
+                    <div class="logo-grid">
+                        <div
+                            v-for="(l, i) in logoList"
+                            :key="i"
+                            :class="['logo-item', { sel: logoSel === i }]"
+                            @click="logoSel = i"
+                        >
+                            <span class="mk">{{ l.marks }}</span>{{ l.name }}
+                        </div>
+                    </div>
+                    <div class="form-row form-row--last form-row--top">
+                        <span class="lb">上传 LOGO</span>
+                        <div class="ctl">
+                            <button class="btn ghost sm">选择文件</button>
+                            <span class="hint">建议 PNG 透明底，高度 ≥ 64px，≤ 1MB</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="pane-foot">
+                    <button class="btn primary">保存设置</button>
+                </div>
+            </div>
+
+            <!-- 壁纸设置（管理员） -->
+            <div v-else-if="curPane === 'wallpaper'" class="pane">
+                <div class="pane-head">
+                    <h3>壁纸设置</h3>
+                    <p>选择桌面背景壁纸，可上传自定义图片并删除历史壁纸。</p>
+                </div>
+                <div class="sec-card">
+                    <h4>系统壁纸</h4>
+                    <div class="wall-grid">
+                        <div
+                            v-for="(w, i) in wallpaperList"
+                            :key="i"
+                            :class="['wall-item', { sel: wallSel === i }]"
+                            :style="{ background: w }"
+                            @click="wallSel = i"
+                        >
+                            <i class="tick">✓</i>
+                        </div>
+                    </div>
+                    <div class="form-row form-row--last form-row--top">
+                        <span class="lb">上传壁纸</span>
+                        <div class="ctl">
+                            <button class="btn ghost sm">选择文件</button>
+                            <span class="hint">建议 1920×1080 以上，≤ 5MB</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 边栏设置（管理员） -->
+            <div v-else-if="curPane === 'sidebar'" class="pane">
+                <div class="pane-head">
+                    <h3>边栏设置</h3>
+                    <p>配置左侧应用边栏的显示项与排序，拖动左侧手柄调整顺序。</p>
+                </div>
+                <div class="sec-card">
+                    <h4>边栏应用</h4>
+                    <div class="drag-list">
+                        <div v-for="(d, i) in sidebarItems" :key="i" :class="['drag-item', { off: !d.on }]">
+                            <span class="hd">⠿</span>
+                            <span class="nm">{{ d.name }}</span>
+                            <span :class="['drag-switch', { on: d.on }]" @click="d.on = !d.on"></span>
+                        </div>
+                    </div>
+                </div>
+                <div class="pane-foot">
+                    <button class="btn primary">保存排序</button>
+                    <button class="btn plain">恢复默认</button>
+                </div>
+            </div>
+
+            <!-- 统计设置（管理员） -->
+            <div v-else-if="curPane === 'statset'" class="pane">
+                <div class="pane-head">
+                    <h3>统计设置</h3>
+                    <p>选择「统计」页面需要展示的图表与指标。</p>
+                </div>
+                <div class="sec-card">
+                    <h4>展示指标</h4>
+                    <div class="check-list">
+                        <div
+                            v-for="(c, i) in statChecks"
+                            :key="i"
+                            :class="['check-item', { on: c.on }]"
+                            @click="c.on = !c.on"
+                        >
+                            <span class="bx">✓</span>{{ c.name }}
+                        </div>
+                    </div>
+                </div>
+                <div class="pane-foot">
+                    <button class="btn primary">保存</button>
+                </div>
+            </div>
+
+            <!-- 后台管理（外跳说明页，管理员） -->
+            <div v-else-if="curPane === 'backend'" class="pane">
+                <div class="pane-head">
+                    <h3>后台管理</h3>
+                    <p>本项不属于设置中心内的页面，点击下方按钮在新标签页打开后台管理系统。</p>
+                </div>
+                <div class="info-bar">
+                    <span>↗</span>
+                    <span>跳转地址：<code>{{ $conf.baseHost }}/userbase/front/index.html</code>（<code>window.open</code> 新标签页）</span>
+                </div>
+                <div class="ph-box">后台管理系统由 userbase 独立承载，此处仅保留跳转入口</div>
+                <div class="pane-foot">
+                    <button class="btn primary" @click="openBackend">打开后台管理</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useDefaultStore } from "@/store";
+import useCurrentInstance from "@/utils/hook/useCurrentInstance";
+import SysSetting from "@/views/SysSetting.vue";
+
+/**
+ * 设置中心（/settings）：左 216px 分组导航卡 + 右内容卡（B 方案左右双卡）。
+ * 本轮只做导航壳 + pane 切换 + 背景层，各 pane 内表单均为占位（接口对接属下一轮）。
+ */
+
+const route = useRoute();
+const router = useRouter();
+const store = useDefaultStore();
+const { $conf } = useCurrentInstance();
+
+const isAdmin = computed(() => !!store.getIsAdmin);
+
+/** 普通用户不可用的管理 pane（导航隐藏；URL 直达渲染 noperm 黄条，不白屏不报错） */
+const ADMIN_PANES = ["logo", "wallpaper", "sidebar", "sys", "statset", "backend"];
+const ALL_PANES = ["profile", "password", "avatar", "logo", "wallpaper", "sidebar", "sys", "statset", "backend", "noperm"];
+
+const curPane = ref<string>("profile");
+
+// URL ?pane= 与当前 pane 双向同步：直达 / 刷新 / 前进后退均保持位置
+watch(
+    () => route.query.pane,
+    pane => {
+        if (typeof pane === "string" && pane !== curPane.value) {
+            curPane.value = ALL_PANES.includes(pane) ? pane : "profile";
+        }
+    },
+    { immediate: true },
+);
+watch(curPane, pane => {
+    if (route.query.pane !== pane) router.replace({ query: { ...route.query, pane } });
+});
+
+const isDenied = computed(() => !isAdmin.value && ADMIN_PANES.includes(curPane.value));
+/** sys pane 内嵌旧路由页 SysSetting（管理员态自带机构树+内容双卡） */
+const showSys = computed(() => isAdmin.value && curPane.value === "sys");
+
+function setPane(key: string) {
+    curPane.value = key;
+}
+
+interface NavItem {
+    key: string;
+    name: string;
+    icon: string;
+}
+const svgWrap = (inner: string) =>
+    `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">${inner}</svg>`;
+const NAV_ACCOUNT: NavItem[] = [
+    { key: "profile", name: "个人信息", icon: svgWrap('<circle cx="12" cy="8" r="4"/><path d="M4 20a8 8 0 0 1 16 0"/>') },
+    { key: "password", name: "修改密码", icon: svgWrap('<rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/>') },
+    { key: "avatar", name: "头像设置", icon: svgWrap('<circle cx="12" cy="12" r="9"/><circle cx="12" cy="10" r="3"/><path d="M6.2 19a6.5 6.5 0 0 1 11.6 0"/>') },
+];
+const NAV_APPEARANCE: NavItem[] = [
+    { key: "logo", name: "LOGO 设置", icon: svgWrap('<rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="M21 15l-5-5L5 20"/>') },
+    { key: "wallpaper", name: "壁纸设置", icon: svgWrap('<path d="M5 3.5A9 9 0 1 0 20.5 12H5z"/><path d="M5 3.5V12h15.5"/>') },
+    { key: "sidebar", name: "边栏设置", icon: svgWrap('<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/>') },
+];
+const NAV_SYSTEM: NavItem[] = [
+    { key: "sys", name: "系统设置", icon: svgWrap('<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/>') },
+    { key: "statset", name: "统计设置", icon: svgWrap('<path d="M18 20V10M12 20V4M6 20v-6"/>') },
+    { key: "backend", name: "后台管理", icon: svgWrap('<circle cx="12" cy="8" r="3.5"/><path d="M5 20a7 7 0 0 1 14 0"/><circle cx="18" cy="17" r="2.5"/>') },
+];
+
+/** 分组导航：管理员全可见；普通用户只见「账号」组 */
+const navGroups = computed(() => {
+    const groups = [
+        { title: "账号", adminOnly: false, items: NAV_ACCOUNT },
+        { title: "外观", adminOnly: true, items: NAV_APPEARANCE },
+        { title: "系统", adminOnly: true, items: NAV_SYSTEM },
+    ];
+    return isAdmin.value ? groups : groups.filter(g => !g.adminOnly);
+});
+
+/* ===== 以下均为 pane 占位数据（真实表单/接口对接属下一轮） ===== */
+const profileForm = reactive({ mobile: "138****8899", email: "zhangming@school.edu.cn" });
+function resetProfileForm() {
+    profileForm.mobile = "138****8899";
+    profileForm.email = "zhangming@school.edu.cn";
+}
+const passwordForm = reactive({ old: "", next: "", confirm: "" });
+
+const avatarPresets = [
+    "linear-gradient(135deg,#5979ea,#7d9bf5)",
+    "linear-gradient(135deg,#45b972,#7bd39b)",
+    "linear-gradient(135deg,#e9b954,#f3d083)",
+    "linear-gradient(135deg,#e8684a,#f1957e)",
+    "linear-gradient(135deg,#8a7ce0,#b3a8f0)",
+];
+const avatarLetters = ["张", "A", "B", "C", "D"];
+const avatarSel = ref(0);
+
+const logoList = [
+    { name: "智慧校园平台", marks: "🎓" },
+    { name: "云海教育", marks: "📘" },
+    { name: "第一中学", marks: "🏫" },
+];
+const logoSel = ref(0);
+
+const wallpaperList = [
+    "linear-gradient(135deg,#cfe0ea,#d9e0d2)",
+    "linear-gradient(135deg,#e6e2d6,#c9d4c0)",
+    "linear-gradient(135deg,#bfd4e8,#a8bdd6)",
+    "linear-gradient(135deg,#f0e2d0,#e0cdb8)",
+    "linear-gradient(135deg,#d6e0f0,#c0cde6)",
+];
+const wallSel = ref(0);
+
+const sidebarItems = ref([
+    { name: "通知公告", on: true },
+    { name: "流程中心", on: true },
+    { name: "教务管理", on: true },
+    { name: "公文申请", on: true },
+    { name: "场地预约", on: false },
+]);
+
+const statChecks = ref([
+    { name: "应用访问量", on: true },
+    { name: "消息总量", on: true },
+    { name: "审批及时率", on: true },
+    { name: "用户活跃度", on: false },
+    { name: "设备在线率", on: false },
+    { name: "存储使用量", on: false },
+]);
+
+/** 后台管理：保持外跳（与 Header.vue linkBackendManage 同一地址） */
+function openBackend() {
+    window.open(`${$conf.baseHost}/userbase/front/index.html`, "_blank");
+}
+</script>
+
+<style scoped lang="scss">
+/* 壳：透明，不平铺白（B 方案），gap 加在两卡的直接父容器上 */
+.set-shell {
+    display: flex;
+    gap: 16px;
+    height: calc(100% - var(--headerH));
+    padding: 0 20px 20px;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+}
+
+/* 左卡：分组导航 */
+.set-nav {
+    width: 216px;
+    flex-shrink: 0;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    padding: 18px 12px;
+    overflow-y: auto;
+
+    .nav-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 10px 12px;
+        font-size: 13px;
+        font-weight: 600;
+        color: #2c3138;
+    }
+    .role-chip {
+        font-size: 10.5px;
+        font-weight: 500;
+        padding: 2px 8px;
+        border-radius: 9px;
+        background: #eef2ff;
+        color: #5979ea;
+        &.user {
+            background: #f0f1f3;
+            color: #7a8088;
+        }
+    }
+    .grp {
+        font-size: 11.5px;
+        color: #999;
+        padding: 12px 10px 6px;
+        letter-spacing: 0.4px;
+    }
+    .item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        height: 40px;
+        padding: 0 12px;
+        border-radius: 6px;
+        font-size: 13.5px;
+        color: #4a4f55;
+        cursor: pointer;
+        margin-bottom: 2px;
+        transition: all 0.18s;
+        &:hover {
+            background: rgba(89, 121, 234, 0.08);
+            color: #5979ea;
+        }
+        &.active {
+            background: #5979ea;
+            color: #fff;
+            font-weight: 500;
+        }
+        .ic {
+            width: 18px;
+            height: 18px;
+            flex-shrink: 0;
+            color: #8a9098;
+            svg {
+                width: 18px;
+                height: 18px;
+                display: block;
+            }
+        }
+        &.active .ic {
+            color: #fff;
+        }
+        .ext {
+            margin-left: auto;
+            font-size: 10.5px;
+            color: #999;
+        }
+        &:hover .ext {
+            color: #5979ea;
+        }
+        &.active .ext {
+            color: rgba(255, 255, 255, 0.85);
+        }
+    }
+}
+
+/* 右卡：内容区 */
+.set-body {
+    flex: 1;
+    min-width: 0;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    overflow-y: auto;
+    padding: 22px 26px 30px;
+
+    /* sys pane：右区不套白卡，由内嵌的 SysSetting 自带左右双卡 */
+    &.set-body--sys {
+        padding: 0;
+        background: transparent;
+        box-shadow: none;
+        border-radius: 0;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.pane {
+    animation: fadeIn 0.22s ease;
+}
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(5px);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+.pane-head {
+    margin-bottom: 20px;
+    h3 {
+        font-size: 17px;
+        font-weight: 600;
+        color: #2c3138;
+        margin-bottom: 5px;
+    }
+    p {
+        font-size: 12.5px;
+        color: #999;
+        line-height: 1.6;
+    }
+}
+
+.sec-card {
+    background: #fff;
+    border: 1px solid #eef0f3;
+    border-radius: 10px;
+    padding: 6px 18px 14px;
+    margin-bottom: 16px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+    > h4 {
+        font-size: 13.5px;
+        font-weight: 600;
+        color: #2c3138;
+        padding: 14px 0 4px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        .tag {
+            font-size: 10.5px;
+            font-weight: 500;
+            padding: 2px 7px;
+            border-radius: 8px;
+            background: #eef2ff;
+            color: #5979ea;
+        }
+    }
+}
+
+.form-row {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 13px 0;
+    border-bottom: 1px solid #eef0f3;
+    &--last {
+        border-bottom: none;
+    }
+    &--top {
+        margin-top: 8px;
+    }
+    .lb {
+        width: 110px;
+        flex-shrink: 0;
+        font-size: 13.5px;
+        color: #4a4f55;
+        &.req::before {
+            content: "*";
+            color: #e8684a;
+            margin-right: 3px;
+        }
+    }
+    .ctl {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+}
+.inp {
+    height: 34px;
+    border: 1px solid #dcdfe6;
+    border-radius: 6px;
+    padding: 0 12px;
+    font-size: 13px;
+    width: 100%;
+    max-width: 340px;
+    outline: none;
+    transition: all 0.18s;
+    background: #fff;
+    &:focus {
+        border-color: #5979ea;
+        box-shadow: 0 0 0 3px rgba(89, 121, 234, 0.12);
+    }
+    &:disabled {
+        background: #f6f7f9;
+        color: #9aa0a8;
+        cursor: not-allowed;
+    }
+}
+.hint {
+    font-size: 12px;
+    color: #999;
+}
+
+/* 头像 */
+.avatar-pad {
+    padding: 14px 0 6px;
+}
+.avatar-box {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+.avatar-now {
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #5979ea, #7d9bf5);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 26px;
+    font-weight: 600;
+    flex-shrink: 0;
+    box-shadow: 0 4px 14px rgba(89, 121, 234, 0.3);
+    &.avatar-sm {
+        width: 44px;
+        height: 44px;
+        font-size: 16px;
+    }
+}
+.avatar-ops {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    .avatar-btns {
+        display: flex;
+        gap: 8px;
+    }
+    .tip {
+        font-size: 12px;
+        color: #999;
+        line-height: 1.6;
+    }
+}
+.avatar-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
+    gap: 12px;
+    padding: 14px 0 4px;
+}
+.avatar-item {
+    height: 76px;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    border: 2px solid transparent;
+    transition: all 0.18s;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 22px;
+    font-weight: 600;
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    }
+    &.sel {
+        border-color: #5979ea;
+        box-shadow: 0 0 0 3px rgba(89, 121, 234, 0.18);
+    }
+}
+
+/* 壁纸 / LOGO 网格 */
+.wall-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 12px;
+    padding: 14px 0 4px;
+}
+.wall-item {
+    height: 88px;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    border: 2px solid transparent;
+    transition: all 0.18s;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    }
+    &.sel {
+        border-color: #5979ea;
+        box-shadow: 0 0 0 3px rgba(89, 121, 234, 0.18);
+    }
+}
+.tick {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #5979ea;
+    color: #fff;
+    font-size: 12px;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    font-style: normal;
+}
+.avatar-item.sel .tick,
+.wall-item.sel .tick {
+    display: flex;
+}
+.logo-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 12px;
+    padding: 14px 0 4px;
+}
+.logo-item {
+    height: 72px;
+    border-radius: 6px;
+    border: 2px solid #eef0f3;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.18s;
+    font-size: 15px;
+    font-weight: 600;
+    color: #3f5fd4;
+    gap: 8px;
+    &:hover {
+        border-color: #5979ea;
+        background: #eef2ff;
+    }
+    &.sel {
+        border-color: #5979ea;
+        box-shadow: 0 0 0 3px rgba(89, 121, 234, 0.18);
+    }
+    .mk {
+        width: 26px;
+        height: 26px;
+        border-radius: 7px;
+        background: linear-gradient(135deg, #5979ea, #7d9bf5);
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+    }
+}
+
+/* 边栏设置：拖拽示意列表 */
+.drag-list {
+    padding: 14px 0 4px;
+}
+.drag-item {
+    display: flex;
+    align-items: center;
+    gap: 11px;
+    height: 44px;
+    padding: 0 14px;
+    border: 1px solid #eef0f3;
+    border-radius: 6px;
+    margin-bottom: 8px;
+    background: #fff;
+    font-size: 13.5px;
+    color: #4a4f55;
+    &.off {
+        opacity: 0.55;
+    }
+    .hd {
+        color: #c0c4cc;
+        cursor: grab;
+        font-size: 15px;
+        line-height: 1;
+    }
+    .nm {
+        flex: 1;
+    }
+    .drag-switch {
+        width: 38px;
+        height: 21px;
+        border-radius: 11px;
+        background: #dcdfe6;
+        position: relative;
+        cursor: pointer;
+        transition: background 0.2s;
+        &.on {
+            background: #5979ea;
+        }
+        &::after {
+            content: "";
+            position: absolute;
+            left: 2px;
+            top: 2px;
+            width: 17px;
+            height: 17px;
+            border-radius: 50%;
+            background: #fff;
+            transition: left 0.2s;
+        }
+        &.on::after {
+            left: 19px;
+        }
+    }
+}
+
+/* 统计设置：勾选项 */
+.check-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    padding: 14px 0 4px;
+}
+.check-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 34px;
+    padding: 0 13px;
+    border: 1px solid #dcdfe6;
+    border-radius: 6px;
+    font-size: 13px;
+    color: #4a4f55;
+    cursor: pointer;
+    transition: all 0.18s;
+    background: #fff;
+    &.on {
+        border-color: #5979ea;
+        background: #eef2ff;
+        color: #5979ea;
+        font-weight: 500;
+    }
+    .bx {
+        width: 15px;
+        height: 15px;
+        border-radius: 4px;
+        border: 1.5px solid #c8ccd4;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        color: #fff;
+        flex-shrink: 0;
+    }
+    &.on .bx {
+        background: #5979ea;
+        border-color: #5979ea;
+    }
+}
+
+/* 底部操作条 */
+.pane-foot {
+    display: flex;
+    gap: 10px;
+    padding-top: 18px;
+    margin-top: 6px;
+    border-top: 1px solid #eef0f3;
+}
+
+/* 按钮 */
+.btn {
+    height: 34px;
+    padding: 0 18px;
+    border-radius: 6px;
+    font-size: 13px;
+    transition: all 0.2s;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+    &.primary {
+        background: #5979ea;
+        color: #fff;
+        &:hover {
+            background: #6b8cf4;
+            box-shadow: 0 4px 12px rgba(89, 121, 234, 0.3);
+        }
+    }
+    &.ghost {
+        background: #fff;
+        color: #5979ea;
+        border: 1px solid #5979ea;
+        &:hover {
+            background: #eef2ff;
+        }
+    }
+    &.plain {
+        background: #fff;
+        color: #4a4f55;
+        border: 1px solid #dcdfe6;
+        &:hover {
+            border-color: #5979ea;
+            color: #5979ea;
+        }
+    }
+    &.sm {
+        height: 28px;
+        padding: 0 12px;
+        font-size: 12px;
+    }
+}
+
+/* 空占位 */
+.ph-box {
+    height: auto;
+    padding: 22px;
+    border: 1px dashed #dcdfe6;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #b3b3b3;
+    font-size: 13px;
+    gap: 8px;
+    margin-top: 12px;
+}
+
+/* 无权限黄条 / 后台管理信息条 */
+.no-perm,
+.info-bar {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 12px 15px;
+    border-radius: 6px;
+    font-size: 12.5px;
+    line-height: 1.65;
+    margin-bottom: 16px;
+}
+.no-perm {
+    background: #fff8ec;
+    border-left: 3px solid #e9b954;
+    color: #8a6d2f;
+}
+.info-bar {
+    background: #eef2ff;
+    border-left: 3px solid #5979ea;
+    color: #3f5fd4;
+    code {
+        font-family: Consolas, Monaco, monospace;
+        font-size: 12px;
+    }
+}
+</style>
diff --git a/src/views/SysSetting.vue b/src/views/SysSetting.vue
index 4201b4b..1174f1a 100644
--- a/src/views/SysSetting.vue
+++ b/src/views/SysSetting.vue
@@ -482,7 +482,8 @@ onUnmounted(() => {
         height: 100%;
         background: #fff;
         padding: 15px;
-        border-radius: 5px;
+        border-radius: 10px;
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
         overflow-y: auto;
 
         .tree-title {
@@ -494,7 +495,8 @@ onUnmounted(() => {
     .right-box {
         height: 100%;
         background: #fff;
-        border-radius: 5px;
+        border-radius: 10px;
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
         padding: 15px;
         overflow: hidden;
         display: flex;
diff --git a/src/views/msg/index.vue b/src/views/msg/index.vue
new file mode 100644
index 0000000..5245f79
--- /dev/null
+++ b/src/views/msg/index.vue
@@ -0,0 +1,673 @@
+<template>
+    <!-- 左右双卡（B 方案）：壳透明不平铺白，白底在两张卡上，壁纸透出。
+         gap 必须加在两卡的直接父容器 .msg-shell 上（不要中间再套一层）。 -->
+    <div class="msg-shell">
+        <!-- 左卡：按分类 / 按应用 -->
+        <aside class="msg-side">
+            <div class="mode-switch">
+                <button :class="{ on: mode === 'cat' }" @click="switchMode('cat')">按分类</button>
+                <button :class="{ on: mode === 'app' }" @click="switchMode('app')">按应用</button>
+            </div>
+
+            <!-- 模式一：按分类 -->
+            <div v-show="mode === 'cat'">
+                <div class="side-title">消息分类</div>
+                <div
+                    v-for="c in catList"
+                    :key="c.key"
+                    :class="['cat', { active: curCat === c.key }]"
+                    @click="onClickCat(c.key)"
+                >
+                    <span class="dot" :style="{ background: c.color }"></span>{{ c.name }}
+                    <span class="cnt">{{ c.cnt }}</span>
+                </div>
+            </div>
+
+            <!-- 模式二：按应用（平铺全部应用，首项「全部」+ 分隔线） -->
+            <div v-show="mode === 'app'">
+                <div class="side-title">全部应用</div>
+                <div :class="['cat', { active: curApp === 'all' }]" @click="onClickApp('all')">
+                    <span class="dot dot-primary"></span>全部<span class="cnt">{{ msgs.length }}</span>
+                </div>
+                <div class="side-sep"></div>
+                <div
+                    v-for="a in appList"
+                    :key="a.name"
+                    :class="['cat', { active: curApp === a.name }]"
+                    @click="onClickApp(a.name)"
+                >
+                    <span class="dot dot-primary"></span>{{ a.name }}<span class="cnt">{{ a.cnt }}</span>
+                </div>
+            </div>
+        </aside>
+
+        <!-- 右卡：工具栏 + 消息列表 -->
+        <div class="msg-main">
+            <div class="msg-toolbar">
+                <div class="tb-left">
+                    <h3>{{ curTitle }}</h3>
+                    <span class="sub"><i class="live"></i>未读 {{ unreadTotal }} 条</span>
+                </div>
+                <div class="tb-right">
+                    <input v-model="searchText" class="msg-search" placeholder="搜索消息内容…" />
+                    <button class="btn plain sm" @click="readAll">全部已读</button>
+                    <button class="btn ghost sm" @click="refresh">刷新</button>
+                    <div class="skin-switch">
+                        <span class="lb">消息样式</span>
+                        <div class="seg">
+                            <button :class="{ on: skin === 'stripe' }" @click="skin = 'stripe'">彩色条带</button>
+                            <button :class="{ on: skin === 'badge' }" @click="skin = 'badge'">徽标</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="msg-body">
+                <div class="msg-list" :data-skin="skin">
+                    <div v-if="renderList.length === 0" class="empty">
+                        <div class="ic">✅</div>
+                        <div>暂无消息</div>
+                    </div>
+                    <div
+                        v-for="(m, i) in renderList"
+                        :key="i"
+                        :class="['msg-card', m.unread ? ['unread', m.t === 2 ? 'm2' : m.t === 3 ? 'm3' : ''] : '']"
+                    >
+                        <div class="row1">
+                            <div :class="['type-ic', m.t === 2 ? 'biz' : m.t === 3 ? 'appr' : 'sys']" :data-label="typeLabel(m.t)">
+                                {{ typeIcon(m.t) }}
+                            </div>
+                            <span class="app">{{ m.app }}</span>
+                            <span class="type-tag">{{ typeName(m.t) }}</span>
+                            <span class="unread-scope"><span class="unread-dot"></span></span>
+                        </div>
+                        <div class="row2"><span class="tt">{{ m.tt }}</span>{{ m.body }}</div>
+                        <div class="row3">
+                            <span class="time">{{ fmtTime(m.min) }}</span>
+                            <div class="act">
+                                <template v-if="m.unread && m.approve">
+                                    <button class="btn sm btn-ok" @click="onClickMsg(m)">同意</button>
+                                    <button class="btn plain sm btn-no" @click="onClickMsg(m)">拒绝</button>
+                                </template>
+                                <button class="btn ghost sm" @click="onClickMsg(m)">{{ m.t === 2 ? "去处理" : "查看详情" }}</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+
+/**
+ * 消息中心路由页（/msg）。
+ * 本轮数据全部为 mock（照 design/03 原型 APP_MSGS），接口对接（readMsgCenter / msgList /
+ * handleMsg / WS）属独立一轮，见方案文档 §6。
+ */
+
+interface MockMsg {
+    app: string;
+    t: number; // 1 系统通知 / 2 业务提醒 / 3 审批待办
+    tt: string;
+    body: string;
+    min: number; // 距现在的分钟数（mock 时间）
+    unread: boolean;
+    approve?: boolean;
+}
+
+/** mock 消息池（与原型 APP_MSGS 一致），刷新时从它重新克隆 */
+const MOCK_MSGS: MockMsg[] = [
+    { app: "请假", t: 3, tt: "张老师的调课申请待你审批：", body: "因公出差，申请将周三 3-4 节《数据结构》调整至周五 5-6 节。", min: 3, unread: true, approve: true },
+    { app: "通知公告", t: 1, tt: "系统维护通知：", body: "平台将于今晚 23:00-24:00 进行版本升级，期间可能出现短暂无法访问。", min: 25, unread: true },
+    { app: "请假", t: 3, tt: "李老师的病假申请待审批：", body: "申请 9 月 30 日病假一天，请予审批。", min: 40, unread: true, approve: true },
+    { app: "公文申请", t: 2, tt: "公文待办：", body: "《关于秋季运动会的通知》待你签发。", min: 60, unread: true },
+    { app: "通知公告", t: 1, tt: "放假安排：", body: "国庆假期 10 月 1 日至 7 日，请各部门提前做好工作交接。", min: 120, unread: true },
+    { app: "教务管理", t: 2, tt: "成绩录入提醒：", body: "高二(3)班期中考试成绩尚未录入完毕，请于本周五前完成。", min: 180, unread: true },
+    { app: "公文申请", t: 2, tt: "公文待阅：", body: "《关于加强校园安全管理的通知》请查阅。", min: 240, unread: true },
+    { app: "用户首页", t: 1, tt: "门户栏目更新：", body: "「校园动态」栏目已上线，可在首页订阅。", min: 300, unread: true },
+    { app: "报修", t: 2, tt: "报修派单：", body: "教学楼 301 多媒体设备故障，已派单至你处。", min: 360, unread: true },
+    { app: "流程中心", t: 1, tt: "流程模板变更：", body: "「采购申请」流程新增一级审批，请留意。", min: 420, unread: true },
+    { app: "学校管理", t: 1, tt: "组织架构调整：", body: "教务处新增「教研组」二级部门。", min: 480, unread: true },
+    { app: "教师专业发展", t: 2, tt: "培训报名提醒：", body: "市级骨干教师培训报名明日截止。", min: 600, unread: true },
+    { app: "场地预约", t: 2, tt: "场地冲突提醒：", body: "你预约的报告厅与校务会时间冲突，请调整。", min: 720, unread: true },
+    { app: "请假", t: 3, tt: "已办结：", body: "王老师的年假申请已通过。", min: 1440, unread: false },
+    { app: "通知公告", t: 1, tt: "新功能上线：", body: "应用中心已支持按角色分组管理，可在「设置 → 应用管理」中配置。", min: 1500, unread: false },
+];
+
+const msgs = ref<MockMsg[]>(MOCK_MSGS.map(m => ({ ...m })));
+
+/** 左卡模式：cat 按分类 / app 按应用 */
+const mode = ref<"cat" | "app">("cat");
+const curCat = ref<string>("all");
+const curApp = ref<string>("all");
+const searchText = ref("");
+/** 消息样式：stripe 彩色条带 / badge 徽标 */
+const skin = ref<"stripe" | "badge">("stripe");
+
+const unreadTotal = computed(() => msgs.value.filter(m => m.unread).length);
+
+/** 分类导航（计数实时随已读状态变化） */
+const catList = computed(() => [
+    { key: "all", name: "全部消息", color: "#5979ea", cnt: msgs.value.length },
+    { key: "sys", name: "系统通知", color: "#5979ea", cnt: msgs.value.filter(m => m.t === 1).length },
+    { key: "biz", name: "业务提醒", color: "#e9b954", cnt: msgs.value.filter(m => m.t === 2).length },
+    { key: "appr", name: "审批待办", color: "#e8684a", cnt: msgs.value.filter(m => m.t === 3).length },
+    { key: "read", name: "已读", color: "#c0c6ce", cnt: msgs.value.filter(m => !m.unread).length },
+]);
+
+/** 应用导航：按时间倒序首次出现的顺序平铺 */
+const appList = computed(() => {
+    const sorted = [...msgs.value].sort((a, b) => a.min - b.min);
+    const names: string[] = [];
+    sorted.forEach(m => {
+        if (!names.includes(m.app)) names.push(m.app);
+    });
+    return names.map(name => ({ name, cnt: msgs.value.filter(m => m.app === name).length }));
+});
+
+/** 右卡列表：模式内过滤 + 搜索，统一按时间倒序（已读消息保留，供回查） */
+const renderList = computed(() => {
+    let rows = [...msgs.value];
+    if (mode.value === "cat") {
+        if (curCat.value === "read") rows = rows.filter(m => !m.unread);
+        else if (curCat.value !== "all") rows = rows.filter(m => m.t === Number(curCat.value === "sys" ? 1 : curCat.value === "biz" ? 2 : 3));
+    } else {
+        if (curApp.value !== "all") rows = rows.filter(m => m.app === curApp.value);
+    }
+    const kw = searchText.value.trim();
+    if (kw) rows = rows.filter(m => (m.app + m.tt + m.body).includes(kw));
+    return rows.sort((a, b) => a.min - b.min);
+});
+
+const curTitle = computed(() => {
+    if (mode.value === "cat") {
+        const hit = catList.value.find(c => c.key === curCat.value);
+        return hit ? hit.name : "全部消息";
+    }
+    return curApp.value === "all" ? "全部应用消息" : curApp.value;
+});
+
+function switchMode(m: "cat" | "app") {
+    mode.value = m;
+}
+
+function onClickCat(key: string) {
+    curCat.value = key;
+}
+function onClickApp(key: string) {
+    curApp.value = key;
+}
+
+/** mock：点击「同意/拒绝/查看详情」视为已读（真实 readMsgCenter 对接属下一轮） */
+function onClickMsg(m: MockMsg) {
+    m.unread = false;
+}
+/** mock：全部已读 */
+function readAll() {
+    msgs.value.forEach(m => (m.unread = false));
+}
+/** mock：刷新 = 恢复初始数据 */
+function refresh() {
+    msgs.value = MOCK_MSGS.map(m => ({ ...m }));
+}
+
+function typeName(t: number) {
+    return t === 3 ? "审批待办" : t === 2 ? "业务提醒" : "系统通知";
+}
+function typeLabel(t: number) {
+    return t === 3 ? "审批" : t === 2 ? "提醒" : "系统";
+}
+function typeIcon(t: number) {
+    return t === 3 ? "⏳" : t === 2 ? "📋" : "🔔";
+}
+/** 时间格式：刚刚 / N 分钟前 / N 小时前 / 昨天 HH:mm / MM-DD */
+function fmtTime(min: number) {
+    if (min < 1) return "刚刚";
+    if (min < 60) return `${min} 分钟前`;
+    if (min < 1440) return `${Math.floor(min / 60)} 小时前`;
+    if (min < 2880) {
+        const hm = new Date(Date.now() - min * 60000);
+        const pad = (n: number) => String(n).padStart(2, "0");
+        return `昨天 ${pad(hm.getHours())}:${pad(hm.getMinutes())}`;
+    }
+    const d = new Date(Date.now() - min * 60000);
+    const pad = (n: number) => String(n).padStart(2, "0");
+    return `${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+</script>
+
+<style scoped lang="scss">
+/* 壳：透明，不平铺白，壁纸透出（B 方案） */
+.msg-shell {
+    display: flex;
+    gap: 16px; /* ★ 两卡间隔 —— 必须加在两卡的直接父容器（本容器）上 */
+    height: calc(100% - var(--headerH));
+    padding: 0 20px 20px;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+}
+
+/* 左卡：分类 / 应用导航 */
+.msg-side {
+    width: 224px;
+    flex-shrink: 0;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    padding: 16px 12px;
+    overflow-y: auto;
+}
+
+/* 右卡：工具栏 + 列表 */
+.msg-main {
+    flex: 1;
+    min-width: 0;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.mode-switch {
+    display: flex;
+    background: #f3f3f3;
+    padding: 3px;
+    border-radius: 8px;
+    gap: 2px;
+    margin-bottom: 14px;
+    button {
+        flex: 1;
+        padding: 6px 0;
+        border-radius: 6px;
+        font-size: 12.5px;
+        color: #5a6068;
+        transition: all 0.18s;
+        white-space: nowrap;
+        border: none;
+        background: none;
+        cursor: pointer;
+        &.on {
+            background: #fff;
+            color: #5979ea;
+            font-weight: 500;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+        }
+    }
+}
+
+.side-title {
+    font-size: 12px;
+    color: #999;
+    font-weight: 600;
+    padding: 4px 12px 10px;
+}
+.cat {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    height: 40px;
+    padding: 0 12px;
+    border-radius: 6px;
+    font-size: 13.5px;
+    color: #4a4f55;
+    cursor: pointer;
+    margin-bottom: 2px;
+    transition: all 0.18s;
+    &:hover {
+        background: rgba(89, 121, 234, 0.08);
+        color: #5979ea;
+    }
+    &.active {
+        background: #5979ea;
+        color: #fff;
+        font-weight: 500;
+    }
+    .cnt {
+        margin-left: auto;
+        font-size: 12px;
+        color: #999;
+    }
+    &.active .cnt {
+        color: rgba(255, 255, 255, 0.85);
+    }
+    .dot {
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+    .dot-primary {
+        background: #5979ea;
+    }
+}
+.side-sep {
+    height: 1px;
+    background: #eef0f3;
+    margin: 12px;
+}
+
+.msg-toolbar {
+    min-height: 58px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 22px;
+    border-bottom: 1px solid #eef0f3;
+    gap: 14px;
+    flex-wrap: wrap;
+    .tb-left {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        h3 {
+            font-size: 16px;
+            font-weight: 600;
+            color: #2c3138;
+        }
+        .sub {
+            font-size: 12px;
+            color: #999;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .live {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: #45b972;
+            box-shadow: 0 0 0 3px rgba(69, 185, 114, 0.2);
+        }
+    }
+    .tb-right {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+}
+.msg-search {
+    height: 32px;
+    border: 1px solid #dcdfe6;
+    border-radius: 16px;
+    padding: 0 14px;
+    font-size: 13px;
+    width: 190px;
+    outline: none;
+    &:focus {
+        border-color: #5979ea;
+        box-shadow: 0 0 0 3px rgba(89, 121, 234, 0.12);
+    }
+}
+.msg-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 16px 22px 26px;
+}
+
+.msg-card {
+    position: relative;
+    background: #fff;
+    border: 1px solid #eef0f3;
+    border-radius: 10px;
+    padding: 15px 18px 15px 20px;
+    margin-bottom: 11px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+    transition: all 0.2s;
+    overflow: hidden;
+    &:hover {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        border-color: #dfe3ea;
+        transform: translateY(-1px);
+    }
+    /* 卡片左侧色带（stripe 模式） */
+    &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 3px;
+        background: #dfe3ea;
+    }
+    &.unread::before {
+        background: #5979ea;
+    }
+    &.unread.m2::before {
+        background: #e9b954;
+    }
+    &.unread.m3::before {
+        background: #e8684a;
+    }
+    .row1 {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 8px;
+    }
+    .type-ic {
+        width: 30px;
+        height: 30px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 15px;
+        flex-shrink: 0;
+        &.sys {
+            background: #eef2ff;
+            color: #5979ea;
+        }
+        &.biz {
+            background: #fdf4e3;
+            color: #c8922a;
+        }
+        &.appr {
+            background: #fdecea;
+            color: #e8684a;
+        }
+    }
+    .app {
+        font-size: 14px;
+        font-weight: 600;
+        color: #2c3138;
+    }
+    .type-tag {
+        font-size: 11px;
+        padding: 1px 8px;
+        border-radius: 9px;
+        background: #f3f3f3;
+        color: #7a8088;
+    }
+    .row2 {
+        font-size: 13.5px;
+        color: #5a6068;
+        line-height: 1.65;
+        padding-left: 40px;
+        .tt {
+            color: #2c3138;
+            font-weight: 500;
+        }
+    }
+    .row3 {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-top: 11px;
+        padding-left: 40px;
+        min-height: 32px;
+    }
+    .time {
+        font-size: 12px;
+        color: #b3b3b3;
+        flex-shrink: 0;
+    }
+    .act {
+        margin-left: auto;
+        display: flex;
+        gap: 8px;
+    }
+}
+
+/* 未读小红点（唯一未读标记，8px #f24822 独立状态色，与类型色脱钩） */
+.unread-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #f24822;
+    flex-shrink: 0;
+    box-shadow: 0 0 0 3px rgba(242, 72, 34, 0.14);
+}
+.unread-scope {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: auto;
+}
+
+/* 已读卡片：整卡置灰 + 色带转灰 + 红点消失，hover 回补到 .82 保可读 */
+.msg-card:not(.unread)::before {
+    background: #e4e8ee;
+}
+.msg-card:not(.unread) {
+    opacity: 0.5;
+    background: #fafbfc;
+    &:hover {
+        opacity: 0.82;
+    }
+}
+.msg-card:not(.unread) .unread-dot {
+    display: none;
+}
+
+/* 徽标模式：类型化为「图标+文字」圆角块，去掉左侧竖条 */
+.msg-list[data-skin="badge"] .msg-card::before {
+    display: none;
+}
+.msg-list[data-skin="badge"] .type-ic {
+    width: auto;
+    height: 26px;
+    padding: 0 11px;
+    border-radius: 7px;
+    font-size: 12.5px;
+    font-weight: 500;
+    gap: 5px;
+}
+.msg-list[data-skin="badge"] .type-ic::after {
+    content: attr(data-label);
+    font-size: 12.5px;
+    font-weight: 500;
+}
+.msg-list[data-skin="badge"] .row2,
+.msg-list[data-skin="badge"] .row3 {
+    padding-left: 0;
+}
+
+/* 工具栏内样式切换器 */
+.skin-switch {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-left: 12px;
+    border-left: 1px solid #eef0f3;
+    .lb {
+        font-size: 12px;
+        color: #999;
+        white-space: nowrap;
+    }
+}
+.seg {
+    display: flex;
+    background: #f3f3f3;
+    padding: 3px;
+    border-radius: 8px;
+    gap: 2px;
+    button {
+        padding: 4px 11px;
+        border-radius: 6px;
+        font-size: 12px;
+        color: #5a6068;
+        transition: all 0.18s;
+        white-space: nowrap;
+        border: none;
+        background: none;
+        cursor: pointer;
+        &.on {
+            background: #fff;
+            color: #5979ea;
+            font-weight: 500;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+        }
+    }
+}
+
+/* 按钮（卡内动作） */
+.btn {
+    height: 34px;
+    padding: 0 18px;
+    border-radius: 6px;
+    font-size: 13px;
+    transition: all 0.2s;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+    &.primary {
+        background: #5979ea;
+        color: #fff;
+    }
+    &.ghost {
+        background: #fff;
+        color: #5979ea;
+        border: 1px solid #5979ea;
+        &:hover {
+            background: #eef2ff;
+        }
+    }
+    &.plain {
+        background: #fff;
+        color: #4a4f55;
+        border: 1px solid #dcdfe6;
+        &:hover {
+            border-color: #5979ea;
+            color: #5979ea;
+        }
+    }
+    &.sm {
+        height: 28px;
+        padding: 0 12px;
+        font-size: 12px;
+    }
+    &.btn-ok {
+        background: #45b972;
+        color: #fff;
+    }
+    &.btn-no {
+        color: #e8684a;
+        border-color: #e8684a;
+    }
+}
+
+.empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 0;
+    color: #b3b3b3;
+    gap: 12px;
+    .ic {
+        font-size: 44px;
+        opacity: 0.5;
+    }
+}
+</style>