From 5a19a4ed7945f2d706315cb18f7c36c6d095697b Mon Sep 17 00:00:00 2001
From: chenxing <chenxing@bestsch.com>
Date: Sun, 11 Oct 2026 21:40:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=B0=8F=E7=BB=84=E4=BB=B6=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=94=B9=E7=89=88):=20=E5=8D=A1=E7=89=87=E7=BD=91?=
 =?UTF-8?q?=E6=A0=BC=E7=AE=A1=E7=90=86=E5=8F=B0=20+=20=E6=A0=A1=E7=BA=A7?=
 =?UTF-8?q?=E8=A6=86=E7=9B=96=E5=B1=82=20+=20=E9=80=80=E5=BD=B9=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=BE=E7=BD=AE/=E5=BA=94=E7=94=A8=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

后端
- widget_catalog 加 3 列：scope_type（三态可见范围）/ role_types（可见角色）/ role_alias（角色专属命名 JSON）
- 新增两表：widget_catalog_school（点名表，uk_widget_school）、widget_school_setting（校级覆盖层，uk_widget_sch）
- WidgetController 新增 GetWidgetCatalogList / SaveWidgetCatalog / DeleteWidgetCatalog /
  GetWidgetSchoolSetting / SaveWidgetSchoolSetting；权限拆 checkSuperAdmin（仅超管）与
  checkSchAdmin（超管或 roleId∈{2,5,7}）
- SaveWidgetSchoolSetting 强制 schId 取当前登录校，前端传参不采信（防越权）
- 显示名三级链：校级别名 > 角色专属命名 > 组件名；role_alias 坏 JSON 降级不抛
- 启动期幂等 seeding（空库才写 3 条内置目录行）
- 手工 DDL 脚本 resources/sql/widget_catalog_v2.sql（含回滚）

前端
- WidgetManage 重写为卡片网格：超管/校管双视角、类型页签 + 搜索、拖拽排序、启停、
  删除、登记内置组件、空态引导
- 新增 WidgetCard / WidgetEditModal / WidgetRegisterModal
- UserSettingApi 加 6 个方法；types 加 WidgetCatalog 接口
- 管理端列表整行回传（SaveWidgetCatalog 为整行 merge）

退役
- 删除 SysSetting.vue / SysTempManage.vue / AppSettingApi.ts 与后端 AppSettingController /
  AppCategory(SQL) 全链路，清理路由、Settings 导航与样式分支
- 保留 SysSettingApi.ts（壁纸/logo 池管理仍在使用）
---
 src/api/AppSettingApi.ts                 |   63 --
 src/api/UserSettingApi.ts                |   31 +-
 src/components/Header.vue                |    5 -
 src/router/routes.ts                     |   14 -
 src/types/index.ts                       |   30 +
 src/views/Settings.vue                   |   42 +-
 src/views/SysSetting.vue                 |  331 -------
 src/views/SysTempManage.vue              |  235 -----
 src/views/msg/index.vue                  |    2 +-
 src/views/widget/WidgetCard.vue          |  403 ++++++++
 src/views/widget/WidgetEditModal.vue     | 1143 ++++++++++++++++++++++
 src/views/widget/WidgetManage.vue        |  942 +++++++++++-------
 src/views/widget/WidgetRegisterModal.vue |  342 +++++++
 13 files changed, 2559 insertions(+), 1024 deletions(-)
 delete mode 100644 src/api/AppSettingApi.ts
 delete mode 100644 src/views/SysSetting.vue
 delete mode 100644 src/views/SysTempManage.vue
 create mode 100644 src/views/widget/WidgetCard.vue
 create mode 100644 src/views/widget/WidgetEditModal.vue
 create mode 100644 src/views/widget/WidgetRegisterModal.vue

diff --git a/src/api/AppSettingApi.ts b/src/api/AppSettingApi.ts
deleted file mode 100644
index 562ba08..0000000
--- a/src/api/AppSettingApi.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import Abstract from "@/utils/axios/abstract";
-import { PageData, PageParams } from "@/types/Basics";
-
-const path = "/api";
-
-export interface AppCategoryItem {
-    id?: number;
-    name: string;
-    apiUrl: string;
-    dataKey: string;
-    paramsKey: string;
-    roleType: number;
-    cId?: number;
-    cDate?: string;
-    resDate?: string;
-}
-
-/** 系统设置-应用管理（应用类别 CRUD + 模板管理） */
-class AppSettingApi extends Abstract {
-    /** 应用分页列表 */
-    getAppCategoryList(params: PageParams & { roleType: number; name?: string }) {
-        const url = path + "/GetAppCategoryList";
-        return this.getRequest<PageData>({ url, params });
-    }
-
-    /** 保存应用（新增/编辑） */
-    saveAppCategory(data: AppCategoryItem) {
-        const url = path + "/SaveAppCategory";
-        return this.postRequest({ url, data });
-    }
-
-    /** 删除应用 */
-    deleteAppCategory(id: number) {
-        const url = path + "/DelAppCategory";
-        return this.postRequest({ url, params: { id } });
-    }
-
-    /** 查询应用详情 */
-    findAppCategory(id: number) {
-        const url = path + "/FindAppCategory";
-        return this.getRequest<AppCategoryItem>({ url, params: { id } });
-    }
-
-    /** 刷新资源时间戳（上传模板后调用） */
-    updateResDate(id: number) {
-        const url = path + "/UpdateResDate";
-        return this.postRequest({ url, params: { id } });
-    }
-
-    /** 模板文件列表 */
-    getTempList(appModId: number) {
-        const url = path + "/GetTempList";
-        return this.getRequest<any[]>({ url, params: { appModId } });
-    }
-
-    /** 保存模板文件内容（JSON body，避免大文件内容超出 URL/请求头长度限制） */
-    saveTempFile(appModId: number, fileName: string, content: string) {
-        const url = path + "/SaveTempFile";
-        return this.postRequest({ url, data: { appModId, fileName, content } });
-    }
-}
-
-export default new AppSettingApi();
diff --git a/src/api/UserSettingApi.ts b/src/api/UserSettingApi.ts
index 89f0109..70a12b8 100644
--- a/src/api/UserSettingApi.ts
+++ b/src/api/UserSettingApi.ts
@@ -1,4 +1,4 @@
-import { DesktopAppTypeEnum, LightApp, UserSettingInfo, WidgetPositionResp } from "@/types";
+import { DesktopAppTypeEnum, LightApp, UserSettingInfo, WidgetCatalog, WidgetPositionResp } from "@/types";
 import { BaseDict, PageData, PageParams } from "@/types/Basics";
 import Abstract from "@/utils/axios/abstract";
 
@@ -107,13 +107,38 @@ class UserSettings extends Abstract {
 
     getWidgetCatalogList() {
         const url = path + "/GetWidgetCatalogList";
-        return this.getRequest<any[]>({ url });
+        return this.getRequest<WidgetCatalog[]>({ url });
     }
 
-    saveWidgetCatalog(catalog: Record<string, any>) {
+    /** 新增/编辑全局目录（仅超管）：scopeType/roleTypes/roleAlias/scopeSchIds 一并提交 */
+    saveWidgetCatalog(catalog: Partial<WidgetCatalog> & Record<string, any>) {
         const url = path + "/SaveWidgetCatalog";
         return this.postRequest<any>({ url, data: catalog });
     }
+
+    /** 删除全局目录（仅超管），后端连带删点名表与校级覆盖行 */
+    deleteWidgetCatalog(id: number) {
+        const url = path + "/DeleteWidgetCatalog";
+        return this.postRequest<any>({ url, params: { id } });
+    }
+
+    /** 读本校覆盖行（编辑回显）：schId 由后端取当前登录校 */
+    getWidgetSchoolSetting(widgetId: number) {
+        const url = path + "/GetWidgetSchoolSetting";
+        return this.getRequest<any>({ url, params: { widgetId } });
+    }
+
+    /** 保存本校覆盖（校管/超管）：schId 由后端强制取当前登录校，前端不传 */
+    saveWidgetSchoolSetting(setting: Record<string, any>) {
+        const url = path + "/SaveWidgetSchoolSetting";
+        return this.postRequest<any>({ url, data: setting });
+    }
+
+    /** 机构树（仅超管）：递归裁剪到学校层，children 即学校列表，用于可见范围多选 */
+    getSchTree() {
+        const url = path + "/getSchTree";
+        return this.getRequest<any>({ url });
+    }
 }
 
 export default new UserSettings();
diff --git a/src/components/Header.vue b/src/components/Header.vue
index f698f74..f4d65d5 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -613,11 +613,6 @@ async function toggleWidgetShow() {
     await UserSettingApi.toggleWidgetShow(id);
 }
 
-function linkSysSetting() {
-    isUserCardShow.value = false;
-    router.push("/syssetting");
-}
-
 function linkBackendManage() {
     isUserCardShow.value = false;
     const url = `${$conf.baseHost}/userbase/front/index.html`;
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 5f07ed3..4b5b794 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -7,8 +7,6 @@ import LightApp from "@/views/LightApp.vue";
 import Stats from "@/views/Stats.vue";
 import StatsRelay from "@/views/StatsRelay/index.vue";
 import TeacherCopilot from "@/views/TeacherCopilot.vue";
-import SysSetting from "@/views/SysSetting.vue";
-import SysTempManage from "@/views/SysTempManage.vue";
 
 const routes: RouteRecordRaw[] = [
     {
@@ -59,18 +57,6 @@ const routes: RouteRecordRaw[] = [
         component: TeacherCopilot,
         meta: { title: "教师助手" },
     },
-    {
-        path: "/syssetting",
-        name: "SysSetting",
-        component: SysSetting,
-        meta: { title: "系统设置" },
-    },
-    {
-        path: "/syssetting/tempmanage/:id",
-        name: "SysTempManage",
-        component: SysTempManage,
-        meta: { title: "模板管理" },
-    },
     {
         path: "/msg",
         name: "Msg",
diff --git a/src/types/index.ts b/src/types/index.ts
index bda2e9c..2235940 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -51,6 +51,36 @@ export interface WidgetPositionResp extends WidgetPosition {
     schId?: number;
 }
 
+/** 小组件候选池目录行（widget_catalog + 管理端视角附加字段） */
+export interface WidgetCatalog {
+    id?: number;
+    /** 组件键：内置 = 前端 widgetRegistry 的键；自定义 = 自定义标识 */
+    code: string;
+    /** 显示名（校管视角已按「校级别名 > 角色命名 > 名称」合成） */
+    name: string;
+    /** 1 = 前端内置组件 2 = 自定义 HTML 片段 */
+    compType: number;
+    content?: string | null;
+    dataCode?: string | null;
+    /** 下发范围：0 = 全部学校 1 = 白名单 2 = 黑名单 */
+    scopeType?: number;
+    /** 点名的学校 id 列表（scopeType=1/2 时有效） */
+    scopeSchIds?: number[];
+    /** 可见角色：逗号分隔 RoleTypeEnum；NULL/空 = 全角色 */
+    roleTypes?: string | null;
+    /** 角色专属命名 JSON 文本：{"2":"全校课表"} */
+    roleAlias?: string | null;
+    /** 校管视角：本校别名 */
+    alias?: string | null;
+    /** 校管视角：超管下发的全局名称 */
+    originalName?: string | null;
+    /** 校管视角：本校是否已有覆盖行 */
+    covered?: boolean;
+    sort?: number;
+    enabled?: number;
+    updateTime?: string | null;
+}
+
 export interface BschTransferRoleInfo {
     roleInfo: RoleInfo;
     ticket: string;
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index a96a6b5..55087ba 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -22,13 +22,8 @@
             </template>
         </aside>
 
-        <!-- 右区：sys pane 直接内嵌旧路由页 SysSetting（自带左右双卡视觉，故右区不再套白卡） -->
-        <div v-if="showSys" class="set-body set-body--sys">
-            <SysSetting />
-        </div>
-
-        <!-- 右卡：其余 pane -->
-        <div v-else class="set-body">
+        <!-- 右卡：内容区 -->
+        <div class="set-body">
             <!-- 无权限：普通用户直达管理项 / 显式 ?pane=noperm -->
             <div v-if="isDenied || curPane === 'noperm'" class="pane">
                 <div class="no-perm">
@@ -722,7 +717,6 @@ 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";
 import WidgetManage from "@/views/widget/WidgetManage.vue";
 import BaseApi from "@/api/BaseApi";
 import SysSettingApi from "@/api/SysSettingApi";
@@ -747,7 +741,7 @@ import { Message } from "view-ui-plus";
  * profile 读 store.userInfo（手机/邮箱本人可改：UpdateContact 直写 UserBase，2026-10-02 任务B）；
  * password 走 updatePassword + 确认登出流程（照抄 UserInfoModal）；
  * avatar 移植 UserInfoModal 直传上传（「使用默认头像」保持占位，存储方案本轮不做）；
- * logo/wallpaper 池管理（列表 + 直传 + 删除）照抄 SysSetting.vue，LOGO 保存走 saveSchLogo（schId 后端按登录人推断）；
+ * logo/wallpaper 池管理（列表 + 直传 + 删除）照抄旧系统设置页管理语义，LOGO 保存走 saveSchLogo（schId 后端按登录人推断）；
  * 壁纸「点选即生效」的 checkWallpaper 个人语义只保留在 my 层，默认层只维护可选池（不再代用户指定）。
  */
 
@@ -757,13 +751,13 @@ const store = useDefaultStore();
 const { $conf } = useCurrentInstance();
 
 const isAdmin = computed(() => !!store.getIsAdmin);
-/** 超管判据与 SysSetting.vue 的 isSuperAdmin 同源（userInfo.type==1）；徽标三态用 */
+/** 超管判据 = userInfo.type==1；徽标三态用 */
 const isSuper = computed(() => store.userInfo?.type == 1);
 
 /** 普通用户不可用的管理 pane（导航隐藏；URL 直达渲染 noperm 黄条，不白屏不报错）。
  *  三层化（S4）后「头像/主题/壁纸」所有身份都可用——每角色只编辑自己那一层，不再是管理项 */
-const ADMIN_PANES = ["logo", "sidebar", "sys", "statset", "widget"];
-const ALL_PANES = ["profile", "password", "avatar", "theme", "wallpaper", "desktop", "logo", "sidebar", "sys", "statset", "widget", "noperm"];
+const ADMIN_PANES = ["logo", "sidebar", "statset", "widget"];
+const ALL_PANES = ["profile", "password", "avatar", "theme", "wallpaper", "desktop", "logo", "sidebar", "statset", "widget", "noperm"];
 
 /** 历史 ?pane= 键兼容（S4 重命名：mytheme/schooltheme→theme、mywallpaper→wallpaper），保证旧链接不 404/不白屏 */
 const LEGACY_PANE_KEYS: Record<string, string> = {
@@ -793,8 +787,6 @@ watch(curPane, 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;
@@ -823,7 +815,6 @@ const NAV_PORTAL: NavItem[] = [
     { 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: "widget", name: "小组件管理", icon: svgWrap('<rect x="3" y="3" width="8" height="8" rx="1.5"/><rect x="13" y="3" width="8" height="5" rx="1.5"/><rect x="13" y="10" width="8" height="11" rx="1.5"/><rect x="3" y="13" width="8" height="8" rx="1.5"/>') },
 ];
@@ -984,7 +975,7 @@ function onAvatarFormatError() {
     Message.error("仅支持 jpg/jpeg/png/gif/webp 格式图片！");
 }
 
-/* ===== logo / wallpaper：管理列表 + 直传 + 删除（照抄 SysSetting.vue 管理语义） ===== */
+/* ===== logo / wallpaper：管理列表 + 直传 + 删除（沿用旧系统设置页管理语义） ===== */
 const logoManageList = ref<any[]>([]);
 const wallpaperManageList = ref<any[]>([]);
 const logoSelUrl = ref<string>("");
@@ -2029,7 +2020,7 @@ watch(
 
 <style scoped lang="scss">
 /* 壳：透明，不平铺白（B 方案），gap 加在两卡的直接父容器上。
-   padding 与 .syssetting-wrap 对齐（15px 四周），overflow:hidden 与 .app-list-wrapper/.stats-wrap 对齐，
+   padding 与 .app-list-wrapper/.stats-wrap 对齐（15px 四周），overflow:hidden 同 .set-shell，
    避免内容撑出页面级滚动条把右侧留白撑大。 */
 .set-shell {
     display: flex;
@@ -2130,23 +2121,6 @@ watch(
     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;
-
-        /* 内嵌的 SysSetting 自带 padding:15px，与 .set-shell 的 15px 叠加成 30px，此处抹平。
-           仅作用于本内嵌场景，独立页 /syssetting 不受影响（该页退役后可删本段） */
-        :deep(.syssetting-wrap) {
-            padding: 0;
-        }
-    }
 }
 
 .pane {
diff --git a/src/views/SysSetting.vue b/src/views/SysSetting.vue
deleted file mode 100644
index ba390c2..0000000
--- a/src/views/SysSetting.vue
+++ /dev/null
@@ -1,331 +0,0 @@
-<template>
-    <div class="syssetting-wrap fix" v-if="isAdmin">
-        <!-- 应用管理（S4.7：原「基础设置」Tab 的 Logo/壁纸已迁到设置中心「门户外观」，此处只剩应用管理，
-             故去掉外层 Tabs 与只为基础设置服务的机构树/面包屑——应用管理接口不带 schId，跨校无需树） -->
-        <div class="right-box">
-            <div class="app-manage">
-                <!-- 角色分段用全局 .seg-tabs（与设置中心「桌面应用」同一套分段样式，方案 §10「应用管理自定义 Tab」） -->
-                <div class="role-tabs-row fix">
-                    <div class="seg-tabs fl">
-                        <div
-                            v-for="item in roleTypeList"
-                            :key="item.k"
-                            :class="['sg', { active: roleTypeTab === item.k }]"
-                            @click="onRoleTypeChange(item.k)"
-                        >{{ item.v }}</div>
-                    </div>
-                    <Button class="fr" size="small" type="primary" @click="showCategory()">新增应用</Button>
-                </div>
-                <div class="search-wrap fix">
-                    <Input
-                        placeholder="输入关键字搜索"
-                        class="fr"
-                        search
-                        suffix="ios-search"
-                        style="width: 200px"
-                        @on-search="onSearch"
-                        v-model="dataParmas.name"
-                    />
-                </div>
-                <TablePage
-                    :table-height="tableHeight"
-                    :data-api="tableDataApi"
-                    :columns="columns"
-                    :page-params="pageParams"
-                    :auto-load="true"
-                    ref="refTablePage"
-                />
-                <!-- 新增/编辑应用 -->
-                <Modal
-                    v-model="isModal"
-                    :mask-closable="false"
-                    width="600"
-                    :title="currentId == null ? '新增应用' : '编辑应用'"
-                >
-                    <Form ref="refFormData" class="mt-8 mr-24" :model="formData" :rules="ruleValidate" :label-width="120">
-                        <FormItem label="应用名称：" prop="name">
-                            <Input placeholder="请输入应用名称" v-model="formData.name" />
-                        </FormItem>
-                        <FormItem label="接口地址：" prop="apiUrl">
-                            <Input placeholder="请输入接口地址" v-model="formData.apiUrl" />
-                        </FormItem>
-                        <FormItem label="接口参数：" prop="paramsKey">
-                            <ul class="parmas-ul">
-                                <li class="fix mb-12" v-for="(item, index) in parmasList" :key="index">
-                                    <span class="ivu-form-item-label">参数名称</span>
-                                    <Input class="fl mr-12" v-model="item.k" style="width: 80px" />
-                                    <template v-if="item.type == 1">
-                                        <span class="ivu-form-item-label">参数类型</span>
-                                        <span>userId</span>
-                                    </template>
-                                    <template v-else-if="item.type == 2">
-                                        <span class="ivu-form-item-label">参数类型</span>
-                                        <span>学校Id</span>
-                                    </template>
-                                    <template v-else>
-                                        <span class="ivu-form-item-label">参数定值</span>
-                                        <Input class="fl mr-12" style="width: 80px" v-model="item.v" />
-                                    </template>
-                                    <Button
-                                        v-if="item.type != 1"
-                                        type="error"
-                                        ghost
-                                        icon="md-remove"
-                                        class="ml-12"
-                                        @click="parmasList.splice(index, 1)"
-                                    ></Button>
-                                </li>
-                            </ul>
-                            <div class="fix">
-                                <Button class="fl" @click="parmasList.push({ k: '', v: '', type: 3 })">添加固定参数</Button>
-                                <Button
-                                    v-if="!!currentId"
-                                    class="ml-8"
-                                    @click="parmasList.push({ k: 'schId', v: '', type: 2 })"
-                                >
-                                    添加SchId参数
-                                </Button>
-                            </div>
-                        </FormItem>
-                        <FormItem label="数据解析：" prop="dataKey">
-                            <Input placeholder="请输入数据字段" v-model="formData.dataKey" />
-                        </FormItem>
-                    </Form>
-                    <template #footer>
-                        <Button type="primary" :loading="isSubmitLoading" @click="onEditSave">提交</Button>
-                        <Button @click="onReset">取消</Button>
-                    </template>
-                </Modal>
-            </div>
-        </div>
-    </div>
-    <div class="no-permission" v-else>无权限访问</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive, computed, watch, onMounted, onUnmounted } from "vue";
-import { useRouter } from "vue-router";
-import { useDefaultStore } from "@/store";
-import TablePage from "@/components/TablePage.vue";
-import Utils from "@/utils";
-import { Message } from "view-ui-plus";
-import { OperatorEnum } from "@/types";
-import { PageParams } from "@/types/Basics";
-import AppSettingApi, { AppCategoryItem } from "@/api/AppSettingApi";
-import mittBus from "@/utils/mitt";
-
-const router = useRouter();
-const store = useDefaultStore();
-
-const isAdmin = computed(() => store.getIsAdmin);
-
-// ==================== 应用管理（AppCategory） ====================
-
-const roleTypeList = [
-    { k: 1, v: "校管理员" },
-    { k: 2, v: "教师" },
-    { k: 3, v: "学生" },
-];
-
-const roleTypeTab = ref<number>(1);
-const dataParmas = reactive({ name: "" });
-const pageParams: PageParams = reactive({ page: 1, count: 10 });
-const refTablePage = ref<any>(null);
-const tableHeight = Utils.useTableHeight({ isSearch: true, isTabs: true, isPage: true });
-
-const tableDataApi = (params: PageParams) =>
-    AppSettingApi.getAppCategoryList({
-        ...params,
-        roleType: roleTypeTab.value,
-        name: dataParmas.name || undefined,
-    });
-
-const columns = ref<any[]>([
-    { type: "index", title: "序号", width: 70, align: "center" },
-    { title: "应用名称", width: 200, align: "left", key: "name" },
-    {
-        title: "数据类别",
-        width: 100,
-        align: "left",
-        render: (h: any, params: any) => {
-            let find = roleTypeList.find(x => x.k == params.row.roleType);
-            return h("span", !find ? "未知" : find.v);
-        },
-    },
-    { title: "接口地址", align: "left", key: "apiUrl", tooltip: true },
-    { title: "数据解析", align: "center", key: "dataKey" },
-    {
-        title: "操作",
-        width: 180,
-        align: "center",
-        render: (h: any, params: any) => {
-            return [
-                Utils.operatingTextHandle(h, "编辑", "mr-2", () => showCategory(params.row.id)),
-                Utils.operatingTextHandle(h, "模板管理", "mr-2", () => {
-                    let { id, name } = params.row;
-                    router.push({ name: "SysTempManage", params: { id }, query: { name } });
-                }),
-                Utils.operatingTextHandle(h, "删除", "text-error", () => onDeleteCategory(params.row.id)),
-            ];
-        },
-    },
-]);
-
-const isSubmitLoading = ref(false);
-const currentId = ref<number | null>(null);
-const parmasList = ref<any[]>([]);
-const isModal = ref(false);
-const formData = reactive<AppCategoryItem>({ id: null as any, name: "", apiUrl: "", dataKey: "", paramsKey: "" });
-
-const ruleValidate = {
-    name: [{ required: true, message: "请输入应用名称", trigger: "blur" }],
-};
-
-watch(
-    parmasList,
-    val => {
-        formData.paramsKey = JSON.stringify(val);
-    },
-    { deep: true }
-);
-
-/** 分段 Tab 点击（原 iView @on-click 改为自绘分段，值即 roleType） */
-function onRoleTypeChange(k: number) {
-    if (roleTypeTab.value === k) return;
-    roleTypeTab.value = k;
-    refTablePage.value?.reloadData();
-}
-
-function onSearch() {
-    refTablePage.value?.reloadData();
-}
-
-function showCategory(id?: number) {
-    if (typeof id === "undefined") {
-        currentId.value = null;
-        Object.assign(formData, { id: null, name: "", apiUrl: "", dataKey: "", paramsKey: "" });
-        parmasList.value = [
-            { k: "userId", v: "", type: 1 },
-            { k: "schId", v: "", type: 2 },
-        ];
-    } else {
-        const row = refTablePage.value.list.find((x: any) => x.id == id);
-        if (!row) return;
-        currentId.value = id;
-        Object.assign(formData, { id: row.id, name: row.name, apiUrl: row.apiUrl, dataKey: row.dataKey });
-        try {
-            parmasList.value = JSON.parse(row.paramsKey || "[]");
-        } catch (e) {
-            parmasList.value = [];
-        }
-    }
-    isModal.value = true;
-}
-
-async function onEditSave() {
-    if (!formData.name) {
-        Message.info("请填写应用名称");
-        return;
-    }
-    isSubmitLoading.value = true;
-    try {
-        const item: AppCategoryItem = { ...formData, roleType: roleTypeTab.value };
-        await AppSettingApi.saveAppCategory(item);
-        Message.success(`${currentId.value == null ? "添加" : "操作"}成功！`);
-        refTablePage.value.reloadData(currentId.value == null ? OperatorEnum.add : OperatorEnum.edit);
-        isModal.value = false;
-        isSubmitLoading.value = false;
-        currentId.value = null;
-    } catch (error) {
-        console.error(error);
-        isSubmitLoading.value = false;
-    }
-}
-
-function onReset() {
-    currentId.value = null;
-    Object.assign(formData, { id: null, name: "", apiUrl: "", dataKey: "", paramsKey: "" });
-    parmasList.value = [];
-    isModal.value = false;
-}
-
-async function onDeleteCategory(id: number) {
-    try {
-        await AppSettingApi.deleteAppCategory(id);
-        Message.success("操作成功！");
-        refTablePage.value.reloadData(OperatorEnum.del);
-    } catch (error) {
-        console.error(error);
-    }
-}
-
-// ==================== 生命周期 ====================
-
-/** 切换身份/角色后重取应用列表（首屏由 TablePage 的 auto-load 负责） */
-function onSwitchRole() {
-    if (!isAdmin.value) return;
-    refTablePage.value?.reloadData();
-}
-
-onMounted(() => {
-    if (!isAdmin.value) return;
-    mittBus.on("switchRole", onSwitchRole);
-});
-
-onUnmounted(() => {
-    mittBus.off("switchRole", onSwitchRole);
-});
-</script>
-
-<style lang="scss" scoped>
-.syssetting-wrap {
-    height: 100%;
-    padding: 15px;
-
-    .right-box {
-        height: 100%;
-        background: #fff;
-        border-radius: 10px;
-        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-        padding: 15px;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-    }
-}
-
-.no-permission {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #999;
-}
-
-/* 应用管理：.right-box 是纵向 flex，此处占满剩余高度（原外层 Tabs 的 44px 头部已随「基础设置」Tab 一起移除） */
-.app-manage {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-
-    .role-tabs-row {
-        margin-bottom: 12px;
-
-        .fr {
-            margin-top: 3px;
-        }
-    }
-
-    .search-wrap {
-        margin-bottom: 10px;
-    }
-
-    .parmas-ul {
-        .ivu-form-item-label {
-            float: left;
-            margin-right: 8px;
-            line-height: 32px;
-        }
-    }
-}
-</style>
diff --git a/src/views/SysTempManage.vue b/src/views/SysTempManage.vue
deleted file mode 100644
index 0c88563..0000000
--- a/src/views/SysTempManage.vue
+++ /dev/null
@@ -1,235 +0,0 @@
-<template>
-    <div class="tempmanage-wrap fix">
-        <div class="file-box fl">
-            <h4 class="file-title">{{ tempName }}</h4>
-            <ul class="file-list">
-                <li
-                    v-for="item in fileList"
-                    :key="item.name"
-                    :class="{ active: currentFileName == item.name }"
-                    @click="onSelectFile(item)"
-                >
-                    <SvgIcon name="menu-2" size="14" color="#5979ea" style="margin-right: 6px" />
-                    {{ item.name }}
-                </li>
-                <li v-if="fileList.length == 0" class="empty">暂无文件，请上传 zip/rar</li>
-            </ul>
-        </div>
-        <div class="main-box">
-            <div class="fix mb-12">
-                <Upload
-                    :on-success="onUploadSuccess"
-                    :show-upload-list="false"
-                    :action="tempUploadAction"
-                    :accept="fileAccept"
-                    :data="uploadParams"
-                    :with-credentials="true"
-                    :headers="uploadHeaders"
-                    class="fl"
-                >
-                    <Button class="fl mr-12" type="primary" size="large">上传应用</Button>
-                </Upload>
-                <Button class="fl mr-12" type="primary" size="large" @click="downTemp">下载应用</Button>
-                <h4 class="title fl tc">{{ tempName }}模板空间</h4>
-            </div>
-            <div class="editor-box">
-                <Codemirror
-                    v-model="currentContent"
-                    :extensions="extensions"
-                    :style="{ height: '100%' }"
-                    :indent-with-tab="true"
-                    placeholder="请选择左侧文件进行编辑"
-                />
-                <div class="editor-footer fix">
-                    <Button type="primary" :disabled="!currentFileName" :loading="isSaving" @click="saveTemp">
-                        保存更改
-                    </Button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, onMounted } from "vue";
-import { useRoute } from "vue-router";
-import { Codemirror } from "vue-codemirror";
-import { javascript } from "@codemirror/lang-javascript";
-import { css } from "@codemirror/lang-css";
-import { html } from "@codemirror/lang-html";
-import { xml } from "@codemirror/lang-xml";
-import { json } from "@codemirror/lang-json";
-import { EditorView } from "@codemirror/view";
-import useCurrentInstance from "@/utils/hook/useCurrentInstance";
-import SvgIcon from "@/components/SvgIcon.vue";
-import Utils from "@/utils";
-import { Message } from "view-ui-plus";
-import AppSettingApi from "@/api/AppSettingApi";
-
-const route = useRoute();
-const { $conf } = useCurrentInstance();
-
-const uploadHeaders = { yschapirequest: 1, yschreferer: Utils.strToHexCharCode(window.location.href) };
-
-const appId = computed(() => (route.params.id as string) || "");
-const tempName = computed(() => (route.query.name as string) || "");
-
-const fileList = ref<any[]>([]);
-const currentFileName = ref<string | null>(null);
-const currentContent = ref<string>("");
-const isSaving = ref(false);
-const fileAccept = ".rar,.zip";
-
-const tempUploadAction = computed(() => $conf.serviceHost + "/api/tempUpload");
-const uploadParams = computed(() => ({ appModId: appId.value }));
-
-const extensions = computed(() => {
-    if (!currentFileName.value) return [EditorView.lineWrapping];
-    const suffix = currentFileName.value.substring(currentFileName.value.lastIndexOf(".") + 1).toLowerCase();
-    let lang: any[] = [];
-    if (["js", "ts", "jsx", "tsx"].includes(suffix)) lang = [javascript()];
-    else if (suffix == "json") lang = [json()];
-    else if (["css", "less", "scss"].includes(suffix)) lang = [css()];
-    else if (suffix == "html" || suffix == "htm") lang = [html()];
-    else if (suffix == "xml") lang = [xml()];
-    return [...lang, EditorView.lineWrapping];
-});
-
-async function getFileList() {
-    const list = await AppSettingApi.getTempList(Number(appId.value));
-    fileList.value = list || [];
-}
-
-async function onSelectFile(item: any) {
-    currentFileName.value = item.name;
-    await loadContent(item.path);
-}
-
-/** 读取文件内容：静态资源跨域读取，携带 yschapirequest 头触发后端 CORS 过滤器 */
-async function loadContent(path: string) {
-    try {
-        const resp = await fetch(path, {
-            headers: { yschapirequest: "1" },
-            credentials: "include",
-        });
-        if (!resp.ok) {
-            Message.error("读取文件失败");
-            return;
-        }
-        currentContent.value = await resp.text();
-    } catch (e) {
-        console.error(e);
-        Message.error("读取文件失败");
-    }
-}
-
-function onUploadSuccess() {
-    Message.success("上传成功！");
-    AppSettingApi.updateResDate(Number(appId.value));
-    getFileList();
-}
-
-function downTemp() {
-    window.location.href =
-        $conf.serviceHost + `/api/downloadTemp?appModId=${appId.value}&name=${encodeURIComponent(tempName.value)}`;
-}
-
-async function saveTemp() {
-    if (!currentFileName.value) return;
-    isSaving.value = true;
-    try {
-        await AppSettingApi.saveTempFile(Number(appId.value), currentFileName.value, currentContent.value);
-        Message.success("保存成功！");
-    } catch (e) {
-        console.error(e);
-    } finally {
-        isSaving.value = false;
-    }
-}
-
-onMounted(() => {
-    getFileList();
-});
-</script>
-
-<style lang="scss" scoped>
-.tempmanage-wrap {
-    height: 100%;
-    padding: 15px;
-
-    .file-box {
-        width: 260px;
-        height: 100%;
-        background: #fff;
-        border-radius: 5px;
-        padding: 15px;
-        overflow-y: auto;
-        box-sizing: border-box;
-
-        .file-title {
-            margin-bottom: 10px;
-            color: #333;
-            font-size: 14px;
-        }
-
-        .file-list {
-            li {
-                display: flex;
-                align-items: center;
-                padding: 8px 10px;
-                border-radius: 4px;
-                cursor: pointer;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-
-                &:hover {
-                    background: #f5f7fa;
-                }
-
-                &.active {
-                    background: #eaf1ff;
-                    color: #5979ea;
-                }
-
-                &.empty {
-                    color: #999;
-                    cursor: default;
-                }
-            }
-        }
-    }
-
-    .main-box {
-        margin-left: 275px;
-        height: 100%;
-        background: #fff;
-        border-radius: 5px;
-        padding: 15px;
-        box-sizing: border-box;
-
-        .title {
-            margin-left: 20px;
-            line-height: 40px;
-        }
-
-        .editor-box {
-            height: calc(100% - 52px);
-            border: 1px solid #e8eaec;
-            border-radius: 5px;
-            overflow: hidden;
-
-            :deep(.cm-editor) {
-                height: calc(100% - 48px);
-            }
-
-            .editor-footer {
-                height: 48px;
-                padding: 8px 12px;
-                border-top: 1px solid #e8eaec;
-                background: #fafafa;
-            }
-        }
-    }
-}
-</style>
diff --git a/src/views/msg/index.vue b/src/views/msg/index.vue
index 6ba3005..59f99cf 100644
--- a/src/views/msg/index.vue
+++ b/src/views/msg/index.vue
@@ -429,7 +429,7 @@ function fmtTime(sendTime?: string) {
 
 <style scoped lang="scss">
 /* 壳：透明，不平铺白，壁纸透出（B 方案）。
-   padding 与 .set-shell / .syssetting-wrap 对齐（15px 四周），overflow:hidden 同 .set-shell。 */
+   padding 与 .set-shell 对齐（15px 四周），overflow:hidden 同 .set-shell。 */
 .msg-shell {
     display: flex;
     gap: 16px; /* ★ 两卡间隔 —— 必须加在两卡的直接父容器（本容器）上 */
diff --git a/src/views/widget/WidgetCard.vue b/src/views/widget/WidgetCard.vue
new file mode 100644
index 0000000..7e3c98f
--- /dev/null
+++ b/src/views/widget/WidgetCard.vue
@@ -0,0 +1,403 @@
+<template>
+    <div
+        class="wcard"
+        :class="{ off: !item.enabled, dragging, 'drag-over': dragOver }"
+        :draggable="draggable"
+        @mouseup="draggable = false"
+        @dragstart="onDragStart"
+        @dragover.prevent="onDragOver"
+        @drop.prevent="onDrop"
+        @dragend="onDragEnd"
+    >
+        <div class="wc-top">
+            <span class="badge" :class="item.compType === 1 ? 'builtin' : 'custom'">{{ typeLabel }}</span>
+            <template v-if="item.compType === 1">
+                <span v-if="registryHit" class="badge ok" title="前端 widgetRegistry 已收录该键">注册表 ✓</span>
+                <span v-else class="badge warn" title="前端注册表未收录，用户侧会落「暂不可用」空态">⚠ 未收录</span>
+            </template>
+            <span v-else class="badge mute" title="片段正文存在 widget_catalog.content">内容存库</span>
+            <span class="drag" title="按住拖拽排序" @mousedown.stop="draggable = true">
+                <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor">
+                    <circle cx="9" cy="5.5" r="1.6" />
+                    <circle cx="15" cy="5.5" r="1.6" />
+                    <circle cx="9" cy="12" r="1.6" />
+                    <circle cx="15" cy="12" r="1.6" />
+                    <circle cx="9" cy="18.5" r="1.6" />
+                    <circle cx="15" cy="18.5" r="1.6" />
+                </svg>
+            </span>
+        </div>
+
+        <div class="wc-name">
+            <span>{{ item.name }}</span>
+            <span v-if="item.alias" class="badge alias" :title="`校级别名；超管下发名称：${item.originalName || item.name}`">别名</span>
+            <span v-if="adaptive" class="tag-adaptive">按角色适配</span>
+        </div>
+        <div class="wc-code">{{ item.code }}</div>
+
+        <div class="wc-meta">
+            <div class="row">
+                <span class="k">取数键</span>
+                <span class="v">
+                    <code v-if="item.dataCode">{{ item.dataCode }}</code>
+                    <span v-else class="dim">—</span>
+                </span>
+            </div>
+            <div class="row">
+                <span class="k">可见</span>
+                <span class="v">
+                    <span class="rchip" :class="scopeCls">{{ scopeText }}</span>
+                    <span v-if="roleAll" class="rchip all">全角色</span>
+                    <template v-else>
+                        <span v-for="r in roleList" :key="r" class="rchip">{{ roleNameOf(r) }}</span>
+                    </template>
+                </span>
+            </div>
+            <div class="row">
+                <span class="k">更新</span>
+                <span class="v dim">{{ item.updateTime || "—" }}</span>
+            </div>
+        </div>
+
+        <div class="wc-ft">
+            <span class="wc-ops">
+                <a class="op" @click="$emit('edit', item)">{{ isSuperView ? "编辑" : "设置" }}</a>
+                <a class="op" @click="$emit('preview', item)">预览</a>
+                <a v-if="isSuperView" class="op danger" @click="$emit('del', item)">删除</a>
+            </span>
+            <span class="wc-sw">
+                <span class="sw" :class="{ 'is-on': !!item.enabled }" @click="$emit('toggle', item)"></span>
+                <span class="wc-sw-t" :class="{ on: !!item.enabled }">{{ item.enabled ? "已启用" : "已下线" }}</span>
+            </span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import type { WidgetCatalog } from "@/types";
+import { RoleTypeEnum } from "@/types";
+
+const props = defineProps<{
+    item: WidgetCatalog;
+    isSuperView: boolean;
+    registryHit: boolean;
+    schools: { id: number; name: string }[];
+    dragging: boolean;
+    dragOver: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: "edit" | "preview" | "toggle" | "del", item: WidgetCatalog): void;
+    (e: "dragstart" | "dragover" | "drop", id: number | undefined): void;
+    (e: "dragend"): void;
+}>();
+
+const draggable = ref(false);
+
+const typeLabel = computed(() => (props.item.compType === 1 ? "内置组件" : "自定义片段"));
+const adaptive = computed(() => props.item.compType === 1 && props.item.code === "syllabus");
+
+const roleKeys = computed(() => {
+    const raw = props.item.roleTypes;
+    if (!raw) return [] as number[];
+    return raw
+        .split(",")
+        .map(x => Number(x.trim()))
+        .filter(x => !isNaN(x))
+        .sort();
+});
+const roleAll = computed(() => roleKeys.value.length === 0 || roleKeys.value.length === 3);
+const roleList = computed(() => (roleAll.value ? [] : roleKeys.value));
+const roleNameOf = (k: number) => ({ [RoleTypeEnum.Teacher]: "教师", [RoleTypeEnum.SchAdmin]: "校领导", [RoleTypeEnum.Student]: "学生" })[k] || `角色 ${k}`;
+
+const schoolNameOf = (id: number) => props.schools.find(x => x.id === id)?.name || `学校 ${id}`;
+const scopeCls = computed(() => (props.item.scopeType === 1 ? "sch" : props.item.scopeType === 2 ? "no" : "all"));
+const scopeText = computed(() => {
+    const names = (props.item.scopeSchIds || []).map(schoolNameOf).join("、");
+    if (props.item.scopeType === 1) return `指定可见 ${names}`;
+    if (props.item.scopeType === 2) return `指定不可见 ${names}`;
+    return "全部学校";
+});
+
+function onDragStart(e: DragEvent) {
+    if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", String(props.item.id));
+    }
+    emit("dragstart", props.item.id);
+}
+function onDragOver() {
+    if (draggable.value) emit("dragover", props.item.id);
+}
+function onDrop() {
+    emit("drop", props.item.id);
+    draggable.value = false;
+}
+function onDragEnd() {
+    draggable.value = false;
+    emit("dragend");
+}
+</script>
+
+<style lang="scss" scoped>
+@use "sass:color";
+@use "../../assets/styles/utils/varible" as *;
+
+$wm-brand: $color-primary; // 品牌主色唯一来源 = 项目 SCSS 变量
+$wm-brand-weak: color.mix(#ffffff, $wm-brand, 90%);
+$wm-brand-line: color.mix(#ffffff, $wm-brand, 78%);
+
+.wcard {
+    --wm-t1: #2c3138;
+    --wm-t2: #4a4f55;
+    --wm-t3: #7a8088;
+    --wm-t4: #9aa0a8;
+    --wm-line: #eef0f3;
+    --wm-line2: #e5e8ee;
+    --wm-ok: #12a150;
+    --wm-ok-bg: #e8f7ee;
+    --wm-warn: #b54708;
+    --wm-warn-bg: #fff4e5;
+    --wm-danger: #d92d20;
+    --wm-danger-bg: #fdecea;
+
+    border: 1px solid var(--wm-line2);
+    border-radius: 10px;
+    padding: 13px 14px 0;
+    background: #fff;
+    transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
+    position: relative;
+    // 同一行卡片等高、底部操作行对齐（网格 stretch + 底部自适应）
+    display: flex;
+    flex-direction: column;
+
+    &:hover {
+        border-color: $wm-brand-line;
+        box-shadow: 0 6px 18px rgba($wm-brand, 0.12);
+        transform: translateY(-1px);
+    }
+    &.off {
+        background: #fcfcfd;
+        .wc-name {
+            color: var(--wm-t3);
+        }
+    }
+    &.dragging {
+        opacity: 0.4;
+    }
+    &.drag-over {
+        border-color: $wm-brand;
+        box-shadow: 0 0 0 2px rgba($wm-brand, 0.22);
+    }
+}
+
+.badge {
+    display: inline-flex;
+    align-items: center;
+    height: 20px;
+    padding: 0 8px;
+    border-radius: 6px;
+    font-size: 11.5px;
+    font-weight: 500;
+    white-space: nowrap;
+    &.builtin {
+        background: $wm-brand-weak;
+        color: $wm-brand;
+    }
+    &.custom {
+        background: var(--wm-warn-bg);
+        color: var(--wm-warn);
+    }
+    &.ok {
+        background: var(--wm-ok-bg);
+        color: var(--wm-ok);
+    }
+    &.warn {
+        background: var(--wm-danger-bg);
+        color: var(--wm-danger);
+    }
+    &.mute {
+        background: #f0f1f3;
+        color: var(--wm-t3);
+    }
+    &.alias {
+        background: #eaf6ff;
+        color: #1677b3;
+    }
+}
+
+.wc-top {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    min-height: 22px;
+}
+.drag {
+    margin-left: auto;
+    width: 22px;
+    height: 22px;
+    border-radius: 5px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: grab;
+    color: #c4c9d2;
+    transition: all 0.15s;
+    flex-shrink: 0;
+    &:hover {
+        color: $wm-brand;
+        background: $wm-brand-weak;
+    }
+    &:active {
+        cursor: grabbing;
+    }
+}
+.wc-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--wm-t1);
+    margin-top: 9px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+.tag-adaptive {
+    display: inline-flex;
+    align-items: center;
+    height: 18px;
+    padding: 0 6px;
+    border-radius: 5px;
+    font-size: 11px;
+    background: #eaf6ff;
+    color: #1677b3;
+    white-space: nowrap;
+}
+.wc-code {
+    font-size: 11.5px;
+    color: var(--wm-t4);
+    font-family: Consolas, Menlo, monospace;
+    margin-top: 2px;
+}
+.wc-meta {
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px dashed var(--wm-line2);
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+    .row {
+        display: flex;
+        gap: 8px;
+        font-size: 12px;
+        line-height: 1.7;
+        .k {
+            width: 46px;
+            flex-shrink: 0;
+            color: var(--wm-t4);
+        }
+        .v {
+            color: var(--wm-t2);
+            min-width: 0;
+        }
+        .dim {
+            color: var(--wm-t4);
+        }
+    }
+}
+.rchip {
+    display: inline-flex;
+    align-items: center;
+    height: 19px;
+    padding: 0 7px;
+    border-radius: 5px;
+    font-size: 11px;
+    background: #eef1f6;
+    color: #5b6472;
+    margin-right: 4px;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    &.all {
+        background: #f0f1f3;
+        color: var(--wm-t3);
+    }
+    &.sch {
+        background: #eaf6ff;
+        color: #1677b3;
+    }
+    &.no {
+        background: var(--wm-danger-bg);
+        color: var(--wm-danger);
+    }
+}
+.wc-ft {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: auto;
+    padding: 9px 0 11px;
+    border-top: 1px solid var(--wm-line);
+}
+.wc-ops {
+    display: flex;
+    gap: 11px;
+    min-width: 0;
+}
+.op {
+    font-size: 12.5px;
+    color: $wm-brand;
+    cursor: pointer;
+    white-space: nowrap;
+    &:hover {
+        text-decoration: underline;
+    }
+    &.danger {
+        color: var(--wm-danger);
+    }
+}
+.wc-sw {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    flex-shrink: 0;
+}
+.sw {
+    position: relative;
+    display: inline-block;
+    width: 38px;
+    height: 21px;
+    border-radius: 11px;
+    background: #d5d8de;
+    cursor: pointer;
+    transition: background 0.18s;
+    vertical-align: middle;
+    flex-shrink: 0;
+    &::after {
+        content: "";
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 17px;
+        height: 17px;
+        border-radius: 50%;
+        background: #fff;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+        transition: left 0.18s;
+    }
+    &.is-on {
+        background: $wm-brand;
+        &::after {
+            left: 19px;
+        }
+    }
+}
+.wc-sw-t {
+    font-size: 12px;
+    color: var(--wm-t4);
+    &.on {
+        color: var(--wm-ok);
+    }
+}
+</style>
diff --git a/src/views/widget/WidgetEditModal.vue b/src/views/widget/WidgetEditModal.vue
new file mode 100644
index 0000000..06d20dc
--- /dev/null
+++ b/src/views/widget/WidgetEditModal.vue
@@ -0,0 +1,1143 @@
+<template>
+    <Teleport to="body">
+        <div v-if="visible" class="wm-modal-root">
+            <div class="modal-mask show" @click="close"></div>
+            <div class="modal show">
+                <div class="m-head">
+                    <div>
+                        <h4>
+                            {{ title }}
+                            <span class="badge" :class="form.compType === 1 ? 'builtin' : 'custom'">{{ typeLabel }}</span>
+                        </h4>
+                        <div class="m-sub">{{ subTitle }}</div>
+                    </div>
+                    <button class="x" @click="close">×</button>
+                </div>
+
+                <div class="m-seg">
+                    <div class="seg-tabs">
+                        <div class="sg" :class="{ active: tab === 'cfg' }" @click="tab = 'cfg'">配置</div>
+                        <div class="sg" :class="{ active: tab === 'cont' }" @click="tab = 'cont'">内容</div>
+                        <div class="sg" :class="{ active: tab === 'prev' }" @click="tab = 'prev'">预览</div>
+                    </div>
+                    <span class="perm-tip">{{ permTip }}</span>
+                </div>
+
+                <div class="m-body">
+                    <!-- 配置 -->
+                    <template v-if="tab === 'cfg'">
+                        <div class="form-row">
+                            <span class="lb req">{{ isSuperView ? "组件名称" : "别名（本校）" }}</span>
+                            <div class="ctl">
+                                <input
+                                    class="inp"
+                                    maxlength="30"
+                                    :value="isSuperView ? form.name : form.alias"
+                                    :placeholder="isSuperView ? '桌面面板标题显示名' : `留空则沿用超管名称：${item?.originalName || item?.name || ''}`"
+                                    @input="onNameInput"
+                                />
+                                <span v-if="!isSuperView" class="hint full">
+                                    超管下发名称：<b>{{ item?.originalName || item?.name }}</b>；这里填的别名只在本校生效
+                                </span>
+                            </div>
+                        </div>
+
+                        <div class="form-row">
+                            <span class="lb req">组件键</span>
+                            <div class="ctl">
+                                <input v-model="form.code" class="inp code-inp" maxlength="32" :disabled="codeLocked" placeholder="如 notice_bar" />
+                                <div class="field-msg">{{ codeMsg }}</div>
+                            </div>
+                        </div>
+
+                        <div class="form-row">
+                            <span class="lb">类型</span>
+                            <div class="ctl">
+                                <span class="badge" :class="form.compType === 1 ? 'builtin' : 'custom'">{{ typeLabel }}</span>
+                                <span class="hint">{{ isNew ? "新建固定为自定义片段（内置走「登记内置组件」）" : "已入库不可改类型" }}</span>
+                            </div>
+                        </div>
+
+                        <div class="form-row">
+                            <span class="lb">取数键</span>
+                            <div class="ctl">
+                                <select v-model="form.dataCode" class="inp data-sel" :disabled="dataLocked">
+                                    <option v-for="opt in DATA_OPTIONS" :key="opt.k" :value="opt.k">{{ opt.t }}</option>
+                                </select>
+                                <div class="field-msg hint">{{ dataMsg }}</div>
+                            </div>
+                        </div>
+
+                        <div v-if="isSuperView" class="form-row">
+                            <span class="lb">可见范围</span>
+                            <div class="ctl">
+                                <div class="seg-tabs seg-sm">
+                                    <div
+                                        v-for="s in SCOPE_OPTIONS"
+                                        :key="s.v"
+                                        class="sg"
+                                        :class="{ active: form.scopeType === s.v }"
+                                        @click="form.scopeType = s.v"
+                                    >
+                                        {{ s.t }}
+                                    </div>
+                                </div>
+                                <div v-if="form.scopeType !== 0" class="role-picker">
+                                    <span
+                                        v-for="s in schools"
+                                        :key="s.id"
+                                        class="rchip pick"
+                                        :class="{ on: form.scopeSchIds.includes(s.id), no: form.scopeType === 2 }"
+                                        @click="toggleSchool(s.id)"
+                                    >
+                                        {{ s.name }}
+                                    </span>
+                                    <span v-if="schools.length === 0" class="hint">未取到学校列表（机构树仅超管可读）</span>
+                                </div>
+                                <span class="hint full">{{ scopeHint }}</span>
+                            </div>
+                        </div>
+
+                        <div class="form-row">
+                            <span class="lb">可见角色</span>
+                            <div class="ctl">
+                                <div class="role-picker">
+                                    <span
+                                        v-for="r in ROLE_OPTIONS"
+                                        :key="r.k"
+                                        class="rchip pick"
+                                        :class="{ on: form.roleList.includes(r.k) }"
+                                        @click="toggleRole(r.k)"
+                                    >
+                                        {{ r.v }}
+                                    </span>
+                                </div>
+                                <span class="hint full">{{ roleHint }}</span>
+                            </div>
+                        </div>
+
+                        <div v-if="isSuperView" class="form-row">
+                            <span class="lb">角色专属命名</span>
+                            <div class="ctl">
+                                <div class="role-alias">
+                                    <div v-for="r in ROLE_OPTIONS" :key="r.k" class="ra-item">
+                                        <span class="ra-lb">{{ r.v }}</span>
+                                        <input v-model="form.roleAliasMap[r.k]" class="inp" maxlength="30" placeholder="留空＝沿用组件名称" />
+                                    </div>
+                                </div>
+                                <span class="hint full">
+                                    同一组件对不同角色显示不同标题。显示名优先级：<b>校级别名 &gt; 角色专属命名 &gt; 组件名称</b>。
+                                </span>
+                            </div>
+                        </div>
+
+                        <div v-if="form.compType === 1" class="form-row">
+                            <span class="lb">角色适配</span>
+                            <div class="ctl">
+                                <span class="ra-tag">按角色适配</span>
+                                <span class="hint">
+                                    该内置组件由<b>前端组件自身</b>按登录人角色自适应（课表为三分支），属<b>取数层</b>能力，不在目录里配置；预览页可切角色查看。
+                                </span>
+                            </div>
+                        </div>
+
+                        <div class="form-row">
+                            <span class="lb">排序</span>
+                            <div class="ctl">
+                                <input v-model.number="form.sort" class="inp sm" type="number" min="0" />
+                                <span class="hint">{{ isSuperView ? "越小越靠前；卡片右上角拖拽会直接改写此值（全局）" : "越小越靠前；此处只改本校顺序" }}</span>
+                            </div>
+                        </div>
+
+                        <div class="form-row">
+                            <span class="lb">启用</span>
+                            <div class="ctl">
+                                <span class="sw" :class="{ 'is-on': form.enabled === 1 }" @click="form.enabled = form.enabled === 1 ? 0 : 1"></span>
+                                <span class="hint">启停与「可见角色」一起决定能不能在桌面「+」里被勾选</span>
+                            </div>
+                        </div>
+                    </template>
+
+                    <!-- 内容 -->
+                    <template v-else-if="tab === 'cont'">
+                        <div class="locked-note">
+                            <span>🔒</span>
+                            <span>{{ lockedText }}</span>
+                        </div>
+                        <div class="editor-tools">
+                            <label v-if="!contentLocked" class="btn sm ghost file-btn">
+                                上传 .html
+                                <input type="file" accept=".html,.htm" @change="onFileChange" />
+                            </label>
+                            <button v-if="!contentLocked" class="btn sm ghost" @click="insertSample">插入示例片段</button>
+                            <span v-if="!contentLocked" class="hint">读取为文本填入编辑器，不落地文件、不产生 URL</span>
+                            <span class="grow"></span>
+                            <span class="hint">{{ (form.content || "").length }} 字</span>
+                        </div>
+                        <div class="editor-box" :class="{ 'is-locked': contentLocked }">
+                            <Codemirror
+                                v-model="form.content"
+                                :extensions="extensions"
+                                :disabled="contentLocked"
+                                :style="{ height: '250px' }"
+                                :indent-with-tab="true"
+                                placeholder="在此粘贴 HTML 片段…"
+                            />
+                        </div>
+                        <p class="hint inline">
+                            片段在桌面面板内以 <code>iframe[srcdoc]</code> 渲染，可调用同源桥
+                            <code>yhWidget.getData(code, params)</code> 取数；不得写外链 <code>&lt;script src&gt;</code>。
+                            保存后用户下次进桌面即生效（不发版）。
+                        </p>
+                    </template>
+
+                    <!-- 预览 -->
+                    <template v-else>
+                        <div class="prev-role">
+                            <span class="lb">预览角色</span>
+                            <div class="seg-tabs seg-sm">
+                                <div
+                                    v-for="r in ROLE_OPTIONS"
+                                    :key="r.k"
+                                    class="sg"
+                                    :class="{ active: previewRole === r.k }"
+                                    @click="previewRole = r.k"
+                                >
+                                    {{ r.v }}
+                                </div>
+                            </div>
+                            <span class="lb">预览学校</span>
+                            <select v-model.number="previewSch" class="inp sm sch-sel">
+                                <option v-for="s in previewSchools" :key="s.id" :value="s.id">{{ s.name }}</option>
+                            </select>
+                            <span class="hint">{{ previewHint }}</span>
+                        </div>
+                        <div class="branch" v-html="previewBranch"></div>
+                        <div class="prev-stage">
+                            <div class="prev-panel">
+                                <div class="ph">{{ previewTitle }}</div>
+                                <!-- 内置命中注册表 → 真组件；自定义有内容 → srcdoc；其余 → 空态 -->
+                                <component
+                                    v-if="previewVisible && builtinHit"
+                                    :is="builtinHit"
+                                    :widget-id="Number(item?.id) || 0"
+                                    class="prev-builtin"
+                                />
+                                <iframe
+                                    v-else-if="previewVisible && previewSrcdoc"
+                                    :srcdoc="previewSrcdoc"
+                                    sandbox="allow-scripts allow-same-origin allow-forms"
+                                ></iframe>
+                                <div v-else-if="previewVisible" class="invis">
+                                    <span class="ic">🧩</span>
+                                    <b>{{ form.compType === 1 ? "暂不可用" : "该片段暂无内容" }}</b>
+                                    <span>{{ form.compType === 1 ? "键不在前端注册表，桌面「+」里点开会落空态" : "桌面面板不会展示" }}</span>
+                                </div>
+                                <div v-else class="invis">
+                                    <span class="ic">🚫</span>
+                                    <b>该组合不可见</b>
+                                    <span>
+                                        <template v-if="!previewScopeHit">「可见范围」未包含 <b>{{ previewSchName }}</b><br /></template>
+                                        <template v-if="!previewRoleHit">「可见角色」未包含 <b>{{ previewRoleName }}</b><br /></template>
+                                        → 桌面「+」里不会出现这张卡
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="hint inline">模拟桌面右上角的小工具面板（玻璃层）。「可见范围」与「可见角色」在此<b>一起</b>生效：任一不命中即显示「不可见」。</p>
+                    </template>
+                </div>
+
+                <div class="m-foot">
+                    <span class="save-tip">{{ tip }}</span>
+                    <button v-if="!isSuperView && !isNew && item?.covered" class="btn plain" @click="clearOverride">清除本校覆盖</button>
+                    <button class="btn plain" @click="close">取消</button>
+                    <button class="btn primary" :disabled="saving" @click="save">保存</button>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive, ref, watch } from "vue";
+import { Codemirror } from "vue-codemirror";
+import { html } from "@codemirror/lang-html";
+import { EditorView } from "@codemirror/view";
+import { Message } from "view-ui-plus";
+import UserSettingApi from "@/api/UserSettingApi";
+import { widgetRegistry } from "@/components/widgets";
+import { wrapFragment } from "@/utils/widgetFragment";
+import type { WidgetCatalog } from "@/types";
+
+const props = withDefaults(
+    defineProps<{
+        visible: boolean;
+        item: WidgetCatalog | null;
+        isNew: boolean;
+        isSuperView: boolean;
+        schools: { id: number; name: string }[];
+        mySchId: number | null;
+        /** 打开时落在哪个 Tab（卡片「预览」快捷入口直接落 prev） */
+        initialTab?: "cfg" | "cont" | "prev";
+    }>(),
+    { initialTab: "cfg" }
+);
+
+const emit = defineEmits<{ (e: "close"): void; (e: "saved"): void }>();
+
+/** 取数键白名单镜像 = 后端 WidgetDataService 的分支键 */
+const DATA_OPTIONS = [
+    { k: "", t: "（不使用 · 静态片段）" },
+    { k: "evaluate", t: "evaluate · 听评课数据" },
+    { k: "syllabus", t: "syllabus · 课表数据" },
+    { k: "weekplan", t: "weekplan · 一周安排数据" },
+];
+const ROLE_OPTIONS = [
+    { k: 1, v: "教师" },
+    { k: 2, v: "校领导" },
+    { k: 3, v: "学生" },
+];
+const SCOPE_OPTIONS = [
+    { v: 0, t: "全部学校" },
+    { v: 1, t: "指定学校可见" },
+    { v: 2, t: "指定学校不可见" },
+];
+const SAMPLE =
+    '<div style="padding:12px 14px;font:13px/1.7 \'Microsoft YaHei\',sans-serif;color:#1f2a37;background:#fff;border-radius:8px">\n' +
+    '  <b style="color:#5979ea">待办提醒</b>\n' +
+    '  <p style="margin:6px 0 0" id="tip">加载中…</p>\n' +
+    "</div>\n" +
+    "<scr" + 'ipt>\n' +
+    '  yhWidget.getData("evaluate", "page=0&count=3").then(function (res) {\n' +
+    '    document.getElementById("tip").textContent = "共 " + (res.count || 0) + " 条待评";\n' +
+    "  });\n" +
+    "</scr" + "ipt>";
+
+const tab = ref<"cfg" | "cont" | "prev">("cfg");
+const saving = ref(false);
+const previewRole = ref(1);
+const previewSch = ref<number | undefined>(undefined);
+
+const form = reactive({
+    id: null as number | null,
+    code: "",
+    name: "",
+    alias: "",
+    compType: 2,
+    content: "",
+    dataCode: "",
+    scopeType: 0,
+    scopeSchIds: [] as number[],
+    roleList: [] as number[],
+    roleAliasMap: {} as Record<string, string>,
+    sort: 0,
+    enabled: 1,
+});
+
+const extensions = [html(), EditorView.lineWrapping];
+
+const typeLabel = computed(() => (form.compType === 1 ? "内置组件" : "自定义片段"));
+const title = computed(() => (props.isNew ? "新建自定义片段" : props.isSuperView ? "编辑组件" : "本校设置"));
+const subTitle = computed(() => (props.isNew ? "新片段 · 保存后进入候选池" : `${form.code} · ${props.item?.name || ""}`));
+const permTip = computed(() =>
+    props.isSuperView
+        ? "超管视角 · 全部字段可改"
+        : `校管理员视角 · 只能改 启用 / 可见角色 / 排序 / 别名（限本校）`
+);
+const codeLocked = computed(() => !props.isSuperView || form.compType === 1);
+const codeMsg = computed(() => {
+    if (!props.isSuperView) return "组件键由超管维护，不可改";
+    if (form.compType === 1) {
+        return registryHit.value
+            ? "✓ 前端注册表已收录该键"
+            : "⚠ 该键不在前端注册表，用户侧会落「暂不可用」空态";
+    }
+    return "片段身份索引，建议小写下划线；同池内不可重复";
+});
+const registryHit = computed(() => !!widgetRegistry[form.code]);
+const dataLocked = computed(() => !props.isSuperView || form.compType === 1);
+const dataMsg = computed(() => {
+    if (!props.isSuperView) return "取数键由超管在后端白名单里维护，不可改";
+    return form.compType === 1 ? "内置组件的数据由前端组件自身取，不在此配置" : "只能从后端白名单里选；留空＝静态片段";
+});
+const scopeHint = computed(() => {
+    if (form.scopeType === 0) return "所有学校都下发。";
+    return form.scopeType === 1
+        ? "白名单：只有选中的学校下发（未选中的学校看不到）。"
+        : "黑名单：除选中的学校外都下发（选中的学校看不到）。";
+});
+const roleHint = computed(() => {
+    const ks = form.roleList;
+    if (ks.length === 0) return "都不选＝全角色可见；与「可见范围」是两条独立轴";
+    if (ks.length === 3) return "已选三个角色，等同全角色";
+    return `仅 ${ks.map(k => ROLE_OPTIONS.find(r => r.k === k)?.v).join("·")} 可见（${ks.length} 个角色）`;
+});
+const contentLocked = computed(() => !props.isSuperView || form.compType === 1);
+const lockedText = computed(() =>
+    !props.isSuperView
+        ? "当前为校管理员视角，无内容编辑权限（片段内容由超管维护）。"
+        : "该组件是内置组件，正文在前端工程 front/src/components/widgets/ 里，此处只登记键与展示名，不可编辑内容。"
+);
+const tip = computed(() => (props.isNew ? "填组件键与名称后保存" : ""));
+
+const previewSchools = computed(() => {
+    if (props.schools.length > 0) return props.schools;
+    return props.mySchId ? [{ id: props.mySchId, name: "当前学校" }] : [];
+});
+const previewSchName = computed(() => previewSchools.value.find(s => s.id === previewSch.value)?.name || "—");
+const previewRoleName = computed(() => ROLE_OPTIONS.find(r => r.k === previewRole.value)?.v || "—");
+const previewScopeHit = computed(() => {
+    if (form.scopeType === 0) return true;
+    const hit = form.scopeSchIds.includes(Number(previewSch.value));
+    return form.scopeType === 1 ? hit : !hit;
+});
+const previewRoleHit = computed(() => form.roleList.length === 0 || form.roleList.includes(previewRole.value));
+const previewVisible = computed(() => previewScopeHit.value && previewRoleHit.value);
+const builtinHit = computed(() => (form.compType === 1 && registryHit.value ? widgetRegistry[form.code] : null));
+const previewSrcdoc = computed(() => {
+    if (form.compType !== 2) return "";
+    const body = (form.content || "").trim();
+    if (!body) return "";
+    return wrapFragment(body, Number(form.id) || 0, form.dataCode || form.code);
+});
+const previewHint = computed(() => {
+    if (!previewVisible.value) return "不命中 → 桌面「+」里勾不到";
+    if (form.compType === 1 && registryHit.value) return "该组合命中；此处渲染真实内置组件";
+    return "该组合命中，内容相同；此处验证「能否被勾选」";
+});
+const previewBranch = computed(() => {
+    const branch =
+        form.compType === 1
+            ? registryHit.value
+                ? "内置 Vue 组件（命中前端注册表）"
+                : "空态不展示（键不在注册表）"
+            : (form.content || "").trim()
+            ? "自定义片段 → srcdoc iframe"
+            : "空态不展示（无内容）";
+    return (
+        `运行态判定 · 渲染分支：<b>${branch}</b> · 可见性：<b>${previewScopeHit.value ? "范围命中" : "范围不命中"}</b>` +
+        ` × <b>${previewRoleHit.value ? "角色命中" : "角色不命中"}</b>`
+    );
+});
+const previewTitle = computed(() => `${props.item?.name || form.name || "预览"} · ${previewRoleName.value} · ${previewSchName.value}`);
+
+watch(
+    () => props.visible,
+    show => {
+        if (show) fillForm();
+    },
+    { immediate: true }
+);
+
+function fillForm() {
+    const src = props.item;
+    tab.value = props.initialTab;
+    previewRole.value = 1;
+    previewSch.value = props.mySchId ?? previewSchools.value[0]?.id;
+    form.id = src?.id ?? null;
+    form.code = src?.code ?? "";
+    form.name = src?.name ?? "";
+    form.alias = src?.alias ?? "";
+    form.compType = src?.compType ?? 2;
+    form.content = src?.content ?? "";
+    form.dataCode = src?.dataCode ?? "";
+    form.scopeType = src?.scopeType ?? 0;
+    form.scopeSchIds = [...(src?.scopeSchIds || [])];
+    form.roleList = parseRoles(src?.roleTypes);
+    form.roleAliasMap = parseRoleAlias(src?.roleAlias);
+    form.sort = src?.sort ?? 0;
+    form.enabled = src?.enabled === 0 ? 0 : 1;
+    if (!props.isSuperView && src?.id) loadSchoolOverride(src.id);
+}
+
+/** 校管回显本校覆盖行（含 NULL 字段），用于区分「本校已覆盖」与「沿用全局」 */
+async function loadSchoolOverride(widgetId: number) {
+    try {
+        const setting = await UserSettingApi.getWidgetSchoolSetting(widgetId);
+        if (!setting) return;
+        if (setting.enabled !== null && setting.enabled !== undefined) form.enabled = setting.enabled === 0 ? 0 : 1;
+        form.roleList = parseRoles(setting.roleTypes as string);
+        form.sort = setting.sortNo ?? props.item?.sort ?? 0;
+        form.alias = setting.alias ?? "";
+    } catch (e) {
+        console.warn("[widget] 本校覆盖读取失败", e);
+    }
+}
+
+function parseRoles(raw?: string | null) {
+    if (!raw) return [] as number[];
+    const ks = raw
+        .split(",")
+        .map(x => Number(x.trim()))
+        .filter(x => !isNaN(x))
+        .sort();
+    return ks.length === 3 ? [] : ks;
+}
+
+function parseRoleAlias(raw?: string | null) {
+    const map: Record<string, string> = {};
+    if (!raw) return map;
+    try {
+        const parsed = JSON.parse(raw);
+        Object.keys(parsed || {}).forEach(k => (map[k] = String(parsed[k])));
+    } catch (e) {
+        console.warn("[widget] role_alias 解析失败，按无角色命名处理");
+    }
+    return map;
+}
+
+function onNameInput(e: Event) {
+    const value = (e.target as HTMLInputElement).value;
+    if (props.isSuperView) form.name = value;
+    else form.alias = value;
+}
+
+function toggleSchool(id: number) {
+    const idx = form.scopeSchIds.indexOf(id);
+    if (idx >= 0) form.scopeSchIds.splice(idx, 1);
+    else form.scopeSchIds.push(id);
+}
+
+function toggleRole(k: number) {
+    const idx = form.roleList.indexOf(k);
+    if (idx >= 0) form.roleList.splice(idx, 1);
+    else form.roleList.push(k);
+    form.roleList.sort();
+}
+
+function onFileChange(ev: Event) {
+    const input = ev.target as HTMLInputElement;
+    const file = input.files && input.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+        form.content = String(reader.result || "");
+        Message.success(`已读入 ${file.name}（${file.size} B），保存后生效`);
+    };
+    reader.readAsText(file, "utf-8");
+    input.value = "";
+}
+
+function insertSample() {
+    form.content = SAMPLE;
+    Message.success("已插入示例片段");
+}
+
+function close() {
+    emit("close");
+}
+
+async function save() {
+    if (!props.isSuperView) return saveSchoolSetting();
+    if (!form.name.trim() || !form.code.trim()) {
+        Message.warning("组件名称与组件键必填");
+        return;
+    }
+    if (form.scopeType !== 0 && form.scopeSchIds.length === 0) {
+        Message.warning("请选择学校后再保存可见范围");
+        return;
+    }
+    saving.value = true;
+    try {
+        const aliasMap: Record<string, string> = {};
+        Object.keys(form.roleAliasMap).forEach(k => {
+            const v = (form.roleAliasMap[k] || "").trim();
+            if (v) aliasMap[k] = v;
+        });
+        await UserSettingApi.saveWidgetCatalog({
+            id: form.id,
+            code: form.code.trim(),
+            name: form.name.trim(),
+            compType: form.compType,
+            content: form.compType === 1 ? null : form.content,
+            dataCode: form.dataCode || null,
+            scopeType: form.scopeType,
+            scopeSchIds: form.scopeType === 0 ? [] : form.scopeSchIds,
+            roleTypes: form.roleList.length ? form.roleList.join(",") : null,
+            roleAlias: Object.keys(aliasMap).length ? JSON.stringify(aliasMap) : null,
+            sort: Number(form.sort) || 0,
+            enabled: form.enabled,
+        });
+        Message.success("保存成功");
+        emit("saved");
+    } catch (e) {
+        console.warn("[widget] 保存失败", e);
+        Message.error(typeof e === "string" ? e : "保存失败");
+    }
+    saving.value = false;
+}
+
+async function saveSchoolSetting() {
+    if (!form.id) {
+        Message.warning("本校覆盖只作用于已下发的组件");
+        return;
+    }
+    saving.value = true;
+    try {
+        await UserSettingApi.saveWidgetSchoolSetting(buildSchoolSetting());
+        Message.success("已保存到本校覆盖");
+        emit("saved");
+    } catch (e) {
+        console.warn("[widget] 本校覆盖保存失败", e);
+        Message.error(typeof e === "string" ? e : "保存失败");
+    }
+    saving.value = false;
+}
+
+async function clearOverride() {
+    saving.value = true;
+    try {
+        await UserSettingApi.saveWidgetSchoolSetting({
+            widgetId: form.id,
+            enabled: null,
+            roleTypes: null,
+            sortNo: null,
+            alias: null,
+        });
+        Message.success("已清除本校覆盖，恢复沿用超管配置");
+        emit("saved");
+    } catch (e) {
+        console.warn("[widget] 清除本校覆盖失败", e);
+        Message.error(typeof e === "string" ? e : "清除失败");
+    }
+    saving.value = false;
+}
+
+function buildSchoolSetting() {
+    return {
+        widgetId: form.id,
+        enabled: form.enabled,
+        roleTypes: form.roleList.length ? form.roleList.join(",") : null,
+        sortNo: Number(form.sort) || 0,
+        alias: form.alias.trim() || null,
+    };
+}
+</script>
+
+<style lang="scss" scoped>
+@use "sass:color";
+@use "../../assets/styles/utils/varible" as *;
+
+$wm-brand: $color-primary;
+$wm-brand-weak: color.mix(#ffffff, $wm-brand, 90%);
+$wm-brand-line: color.mix(#ffffff, $wm-brand, 78%);
+
+.wm-modal-root {
+    --wm-t1: #2c3138;
+    --wm-t2: #4a4f55;
+    --wm-t3: #7a8088;
+    --wm-t4: #9aa0a8;
+    --wm-line: #eef0f3;
+    --wm-line2: #e5e8ee;
+    --wm-ok: #12a150;
+    --wm-ok-bg: #e8f7ee;
+    --wm-warn: #b54708;
+    --wm-warn-bg: #fff4e5;
+    --wm-danger: #d92d20;
+    --wm-danger-bg: #fdecea;
+}
+
+.modal-mask {
+    position: fixed;
+    inset: 0;
+    background: rgba(16, 24, 40, 0.3);
+    z-index: 110;
+}
+.modal {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 780px;
+    max-width: 94vw;
+    max-height: 88vh;
+    background: #fff;
+    border-radius: 12px;
+    z-index: 111;
+    box-shadow: 0 20px 60px rgba(16, 24, 40, 0.24);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.m-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 18px 22px 12px;
+    border-bottom: 1px solid var(--wm-line);
+    h4 {
+        font-size: 15px;
+        font-weight: 600;
+        color: var(--wm-t1);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+    .m-sub {
+        font-size: 12px;
+        color: var(--wm-t4);
+        margin-top: 4px;
+        font-family: Consolas, Menlo, monospace;
+    }
+    .x {
+        border: none;
+        background: transparent;
+        font-size: 20px;
+        line-height: 1;
+        color: var(--wm-t4);
+        cursor: pointer;
+        padding: 2px 6px;
+        border-radius: 6px;
+        &:hover {
+            background: #f2f4f8;
+            color: var(--wm-t2);
+        }
+    }
+}
+.m-seg {
+    padding: 12px 22px 0;
+    display: flex;
+    align-items: center;
+    .perm-tip {
+        margin-left: auto;
+        font-size: 11.5px;
+        color: var(--wm-t4);
+    }
+}
+.m-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 14px 22px 18px;
+}
+.m-foot {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 22px 16px;
+    border-top: 1px solid var(--wm-line);
+    .save-tip {
+        flex: 1;
+        font-size: 12px;
+        color: var(--wm-ok);
+    }
+}
+.seg-tabs {
+    display: inline-flex;
+    background: #f0f2f6;
+    border-radius: 9px;
+    padding: 3px;
+    gap: 2px;
+    .sg {
+        padding: 6px 14px;
+        font-size: 13px;
+        border-radius: 7px;
+        color: var(--wm-t3);
+        cursor: pointer;
+        transition: all 0.15s;
+        user-select: none;
+        white-space: nowrap;
+        &:hover {
+            color: $wm-brand;
+        }
+        &.active {
+            background: #fff;
+            color: $wm-brand;
+            font-weight: 600;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+        }
+    }
+    &.seg-sm .sg {
+        padding: 4px 12px;
+        font-size: 12.5px;
+    }
+}
+.badge {
+    display: inline-flex;
+    align-items: center;
+    height: 20px;
+    padding: 0 8px;
+    border-radius: 6px;
+    font-size: 11.5px;
+    font-weight: 500;
+    white-space: nowrap;
+    &.builtin {
+        background: $wm-brand-weak;
+        color: $wm-brand;
+    }
+    &.custom {
+        background: var(--wm-warn-bg);
+        color: var(--wm-warn);
+    }
+}
+.form-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    padding: 10px 0;
+    border-bottom: 1px solid var(--wm-line);
+    &:last-child {
+        border-bottom: none;
+    }
+    .lb {
+        width: 96px;
+        flex-shrink: 0;
+        font-size: 13px;
+        color: var(--wm-t2);
+        padding-top: 8px;
+        &.req::before {
+            content: "*";
+            color: #e8684a;
+            margin-right: 3px;
+        }
+    }
+    .ctl {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-wrap: wrap;
+    }
+}
+.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: $wm-brand;
+        box-shadow: 0 0 0 3px rgba($wm-brand, 0.12);
+    }
+    &:disabled {
+        background: #f6f7f9;
+        color: var(--wm-t4);
+        cursor: not-allowed;
+    }
+    &.sm {
+        height: 30px;
+        max-width: 110px;
+    }
+    &.code-inp {
+        max-width: 280px;
+    }
+    &.data-sel {
+        max-width: 300px;
+    }
+    &.sch-sel {
+        max-width: 150px;
+    }
+}
+.hint {
+    font-size: 12px;
+    color: var(--wm-t4);
+    &.inline {
+        display: block;
+        line-height: 1.6;
+        margin-top: 8px;
+    }
+    &.full {
+        width: 100%;
+        line-height: 1.6;
+    }
+}
+.field-msg {
+    font-size: 11.5px;
+    margin-top: 4px;
+    width: 100%;
+    color: var(--wm-t4);
+}
+/* 「按角色适配」只读说明徽标（取数层能力，非目录配置） */
+.ra-tag {
+    display: inline-flex;
+    align-items: center;
+    height: 20px;
+    padding: 0 8px;
+    border-radius: 6px;
+    font-size: 11.5px;
+    font-weight: 500;
+    white-space: nowrap;
+    background: #eaf6ff;
+    color: #1677b3;
+    flex-shrink: 0;
+}
+.role-picker {
+    display: inline-flex;
+    flex-wrap: wrap;
+}
+.rchip {
+    display: inline-flex;
+    align-items: center;
+    height: 19px;
+    padding: 0 7px;
+    border-radius: 5px;
+    font-size: 11px;
+    background: #eef1f6;
+    color: #5b6472;
+    margin-right: 4px;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    &.pick {
+        cursor: pointer;
+        height: 27px;
+        padding: 0 12px;
+        font-size: 12px;
+        border: 1px solid #dcdfe6;
+        background: #fff;
+        color: var(--wm-t2);
+        margin-right: 6px;
+        transition: all 0.15s;
+        &:hover {
+            border-color: $wm-brand;
+            color: $wm-brand;
+        }
+        &.on {
+            background: $wm-brand-weak;
+            border-color: $wm-brand-line;
+            color: $wm-brand;
+            font-weight: 600;
+        }
+        &.on.no {
+            background: var(--wm-danger-bg);
+            border-color: #f3c6c2;
+            color: var(--wm-danger);
+        }
+    }
+}
+.role-alias {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+    width: 100%;
+    .ra-item {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+        .ra-lb {
+            width: 56px;
+            flex-shrink: 0;
+            font-size: 12px;
+            color: var(--wm-t3);
+        }
+        .inp {
+            height: 30px;
+            max-width: 230px;
+        }
+    }
+}
+.sw {
+    position: relative;
+    display: inline-block;
+    width: 38px;
+    height: 21px;
+    border-radius: 11px;
+    background: #d5d8de;
+    cursor: pointer;
+    transition: background 0.18s;
+    flex-shrink: 0;
+    &::after {
+        content: "";
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 17px;
+        height: 17px;
+        border-radius: 50%;
+        background: #fff;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+        transition: left 0.18s;
+    }
+    &.is-on {
+        background: $wm-brand;
+        &::after {
+            left: 19px;
+        }
+    }
+}
+.locked-note {
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+    background: $wm-brand-weak;
+    border-left: 3px solid $wm-brand;
+    color: #3f5fd4;
+    padding: 9px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    line-height: 1.6;
+    margin-bottom: 10px;
+}
+.editor-tools {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+    flex-wrap: wrap;
+    .grow {
+        flex: 1;
+    }
+}
+.file-btn {
+    position: relative;
+    overflow: hidden;
+    input {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        cursor: pointer;
+    }
+}
+.btn {
+    border: 1px solid #d0d5dd;
+    background: #fff;
+    color: #344054;
+    height: 30px;
+    padding: 0 12px;
+    border-radius: 6px;
+    font-size: 12.5px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    white-space: nowrap;
+    &:hover {
+        border-color: var(--wm-t4);
+    }
+    &.primary {
+        background: $wm-brand;
+        border-color: $wm-brand;
+        color: #fff;
+        &:hover {
+            background: color.adjust($wm-brand, $lightness: -6%);
+        }
+    }
+    &.sm {
+        height: 26px;
+        padding: 0 10px;
+        font-size: 12px;
+    }
+    &.ghost {
+        background: #f7f8fb;
+        border-color: var(--wm-line2);
+    }
+    &[disabled] {
+        opacity: 0.5;
+        cursor: default;
+    }
+}
+.editor-box {
+    border: 1px solid #e8eaec;
+    border-radius: 8px;
+    overflow: hidden;
+    background: #fbfcfe;
+    &.is-locked {
+        background: #f8f9fb;
+    }
+}
+.branch {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--wm-t2);
+    background: #f4f6fa;
+    border-radius: 6px;
+    padding: 4px 10px;
+    margin-bottom: 10px;
+    line-height: 1.6;
+    b {
+        color: $wm-brand;
+        font-weight: 600;
+    }
+}
+.prev-role {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+    .lb {
+        font-size: 12.5px;
+        color: var(--wm-t2);
+    }
+    .hint {
+        flex: 1;
+        min-width: 140px;
+    }
+}
+.prev-stage {
+    position: relative;
+    height: 330px;
+    border-radius: 10px;
+    overflow: hidden;
+    border: 1px solid var(--wm-line2);
+    background: linear-gradient(140deg, #0b1220 0%, #1e293b 52%, #0f172a 100%);
+}
+.prev-panel {
+    position: absolute;
+    top: 24px;
+    right: 20px;
+    width: 320px;
+    height: 282px;
+    border-radius: 10px;
+    background: rgba(15, 23, 42, 0.42);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    backdrop-filter: blur(18px) saturate(140%);
+    -webkit-backdrop-filter: blur(18px) saturate(140%);
+    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.3);
+    overflow: auto;
+    .ph {
+        height: 34px;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        color: rgba(255, 255, 255, 0.92);
+        font-size: 12.5px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+    }
+    iframe {
+        width: 100%;
+        height: calc(100% - 34px);
+        border: none;
+        background: transparent;
+    }
+    .prev-builtin {
+        display: block;
+        height: calc(100% - 34px);
+        overflow: auto;
+        background: transparent;
+    }
+}
+.invis {
+    background: #fff;
+    border-radius: 8px;
+    height: calc(100% - 34px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 20px;
+    text-align: center;
+    .ic {
+        font-size: 22px;
+    }
+    b {
+        font-size: 13px;
+        color: #344449;
+    }
+    span {
+        font-size: 11.5px;
+        color: #98a2b0;
+        line-height: 1.75;
+    }
+}
+</style>
diff --git a/src/views/widget/WidgetManage.vue b/src/views/widget/WidgetManage.vue
index 879f035..ac48b59 100644
--- a/src/views/widget/WidgetManage.vue
+++ b/src/views/widget/WidgetManage.vue
@@ -1,365 +1,651 @@
 <template>
     <div class="widget-manage">
-        <aside class="wm-side">
-            <div class="wm-side-hd">
-                <h4>小组件</h4>
-                <button class="btn primary sm" @click="onNew">新增自定义片段</button>
+        <!-- 视角切换：超管可切到校管理员视角预览可写范围；纯校管锁定在校管视角 -->
+        <div class="wm-viewbar">
+            <div v-if="isSuperUser" class="seg-tabs">
+                <div class="sg" :class="{ active: view === 'super' }" @click="setView('super')">超管视角</div>
+                <div class="sg" :class="{ active: view === 'school' }" @click="setView('school')">校管理员视角</div>
+            </div>
+            <span v-else class="role-chip">学校管理员</span>
+            <span class="grow"></span>
+            <span class="vb-tip">{{ isSuperView ? "超管视角 · 全部字段可改" : "校管视角 · 只能改本校的 启用 / 可见角色 / 排序 / 别名" }}</span>
+        </div>
+
+        <div class="note-bar key">
+            <span>🎯</span>
+            <span><b>这张卡能不能在桌面「+」里被勾选 = 三个条件同时成立：</b>① 启用 = 开 <b>AND</b> ② 可见范围命中当前学校
+                <b>AND</b> ③ 可见角色命中当前登录人角色。缺一即不进候选池。<b>名称、内容、取数只影响「勾选之后长什么样」，不影响「能不能勾」。</b></span>
+        </div>
+        <div class="note-bar warn">
+            <span>🔑</span>
+            <span v-if="isSuperView"><b>当前视角：超管（type==1）</b> —— 可新增 / 编辑内容 / 删除、可登记内置组件、可配「可见范围（全部 / 指定可见 / 指定不可见）」。切到「校管理员视角」看校级权限差异。</span>
+            <span v-else><b>当前视角：校管理员</b> —— 只能改本校（{{ mySchName || "当前学校" }}）已下发组件的
+                <b>启用 / 可见角色 / 排序 / 别名</b>；<b>没有</b>新增、改内容、删除、「指定学校范围」的入口。⚠️ 后端强制按登录校落库，不接受前端传入的 schId。</span>
+        </div>
+
+        <div class="grid-toolbar">
+            <div class="seg-tabs">
+                <div class="sg" :class="{ active: typeFilter === 'all' }" @click="typeFilter = 'all'">全部 <b>{{ items.length }}</b></div>
+                <div class="sg" :class="{ active: typeFilter === '1' }" @click="typeFilter = '1'">内置组件 <b>{{ countBuiltin }}</b></div>
+                <div class="sg" :class="{ active: typeFilter === '2' }" @click="typeFilter = '2'">自定义片段 <b>{{ countCustom }}</b></div>
+            </div>
+            <div class="tb-right">
+                <label class="search">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                        <circle cx="11" cy="11" r="7" />
+                        <path d="M21 21l-3.6-3.6" />
+                    </svg>
+                    <input v-model="keyword" placeholder="搜索名称 / 组件键 / 取数键" />
+                </label>
+                <button v-if="isSuperView" class="btn sm" @click="regVisible = true">+ 登记内置组件</button>
+                <button v-if="isSuperView" class="btn primary sm" @click="openNew">+ 新建自定义片段</button>
+            </div>
+        </div>
+
+        <div v-if="loading" class="wm-loading">加载中…</div>
+        <div v-else class="wgrid">
+            <div v-if="items.length === 0" class="empty-state">
+                <div class="es-ic">🧩</div>
+                <h5>候选池是空的</h5>
+                <p>新环境不会自动种数据（手工种子只在 <code>resources/sql/widget_catalog.sql</code>，启动期 seeding 仅在库里一行都没有时才补 3 个内置键）。<br />可先把前端注册表里已有的内置组件登记进来。</p>
+                <div class="es-actions">
+                    <button v-if="isSuperView" class="btn primary" :disabled="registering" @click="quickRegisterBuiltins">
+                        一键登记 {{ registryCodes.length }} 个内置组件
+                    </button>
+                    <span v-else class="es-dim">请联系平台超管登记内置组件</span>
+                </div>
             </div>
-            <div v-if="loading" class="wm-empty">加载中…</div>
             <template v-else>
-                <div class="wm-group">内置组件（内容在 front 工程）</div>
-                <ul class="wm-list">
-                    <li
-                        v-for="item in builtinList"
-                        :key="item.id"
-                        :class="{ on: selectedId === item.id }"
-                        @click="onSelect(item)"
-                    >
-                        <span>{{ item.name }}</span>
-                        <em>{{ item.enabled === 1 ? "启用" : "已下线" }}</em>
-                    </li>
-                </ul>
-                <div class="wm-group">自定义片段（内容在 widget_catalog.content）</div>
-                <ul class="wm-list">
-                    <li
-                        v-for="item in fragmentList"
-                        :key="item.id"
-                        :class="{ on: selectedId === item.id }"
-                        @click="onSelect(item)"
-                    >
-                        <span>{{ item.name }}</span>
-                        <em class="custom">{{ item.enabled === 1 ? "启用" : "已下线" }}</em>
-                    </li>
-                    <li v-if="fragmentList.length === 0" class="empty">暂无自定义片段</li>
-                </ul>
-            </template>
-            <p class="wm-tip">
-                两条路都<b>不存在 html 地址</b>：内置=前端注册表键 <code>{{ sampleCode }}</code>，
-                自定义=库里 <code>content</code> 正文。按校下发（<code>sch_id</code>）本期只预留字段，留空即全校可见。
-            </p>
-        </aside>
-
-        <section class="wm-main">
-            <div class="wm-form">
-                <label class="fld">
-                    <span>名称</span>
-                    <Input v-model="form.name" maxlength="30" placeholder="面板标题显示名" />
-                </label>
-                <label class="fld">
-                    <span>组件键 code</span>
-                    <Input v-model="form.code" :disabled="isLockedCode" placeholder="如 evaluate / notice_bar" />
-                </label>
-                <label class="fld">
-                    <span>类型</span>
-                    <Select v-model="form.compType" :disabled="!!form.id" class="wm-select">
-                        <Option :value="1">内置组件（comp_type=1）</Option>
-                        <Option :value="2">自定义 HTML 片段（comp_type=2）</Option>
-                    </Select>
-                </label>
-                <label class="fld">
-                    <span>取数键 data_code</span>
-                    <Input v-model="form.dataCode" placeholder="片段内 yhWidget.getData 走它" />
-                </label>
-                <label class="fld fld-sm">
-                    <span>排序</span>
-                    <InputNumber v-model="form.sort" :min="0" />
-                </label>
-                <label class="fld fld-sm">
-                    <span>启用</span>
-                    <i-switch v-model="form.enabled" :true-value="1" :false-value="0" />
-                </label>
-                <label class="fld fld-sm">
-                    <span>可见范围 sch_id</span>
-                    <InputNumber v-model="form.schId" :min="1" placeholder="留空=全校" />
-                </label>
-            </div>
-
-            <div class="wm-tools">
-                <label class="btn file-btn">
-                    上传 .html
-                    <input type="file" accept=".html,.htm" @change="onFileChange" />
-                </label>
-                <span class="grow"></span>
-                <span class="save-tip">{{ saveTip }}</span>
-                <button class="btn primary" :disabled="!canSave || saving" @click="onSave">保存</button>
-            </div>
-
-            <div class="wm-editor" :class="{ 'is-locked': isBuiltin }">
-                <Codemirror
-                    v-model="form.content"
-                    :extensions="extensions"
-                    :disabled="isBuiltin"
-                    :style="{ height: '100%' }"
-                    :indent-with-tab="true"
-                    placeholder="请选择左侧片段，或粘贴 HTML 正文"
+                <WidgetCard
+                    v-for="item in visibleList"
+                    :key="item.id"
+                    :item="item"
+                    :is-super-view="isSuperView"
+                    :registry-hit="!!widgetRegistry[item.code]"
+                    :schools="cardSchools"
+                    :dragging="dragFrom === item.id"
+                    :drag-over="dragTo === item.id"
+                    @edit="openEdit"
+                    @preview="openPreview"
+                    @toggle="onToggle"
+                    @del="onDelete"
+                    @dragstart="onDragStart"
+                    @dragover="onDragOver"
+                    @drop="onDrop"
+                    @dragend="onDragEnd"
                 />
-            </div>
+                <div v-if="visibleList.length === 0" class="empty-state slim">
+                    <p>没有匹配的组件，换个关键字或切回「全部」。</p>
+                </div>
+                <div v-if="isSuperView" class="wcard add" @click="openNew">
+                    <span class="plus">+</span>
+                    <span>新建自定义片段</span>
+                </div>
+            </template>
+        </div>
 
-            <p class="wm-foot">
-                内置组件的内容在 <code>front/src/components/widgets/</code> 里，此处只登记键与展示名，编辑器置灰；
-                上传走 <code>FileReader</code> 读成文本填入编辑器，<b>不落地成文件、不产生任何 URL</b>。
-            </p>
-        </section>
+        <div class="note-bar">
+            <span>ℹ️</span>
+            <span><b>可见范围三态</b>（超管专属）：<code>全部学校</code> / <code>指定学校可见</code>（白名单，只有选中的学校下发）/
+                <code>指定学校不可见</code>（黑名单，除选中学校外都下发）。<br />校级可覆盖项（校管理员）：<b>启用 / 可见角色 / 排序 / 别名</b>。</span>
+        </div>
+
+        <WidgetEditModal
+            :visible="editVisible"
+            :item="editItem"
+            :is-new="editIsNew"
+            :is-super-view="isSuperView"
+            :initial-tab="editTab"
+            :schools="schools"
+            :my-sch-id="mySchId"
+            @close="editVisible = false"
+            @saved="onSaved"
+        />
+        <WidgetRegisterModal
+            :visible="regVisible"
+            :registry-codes="registryCodes"
+            :registered-codes="registeredCodes"
+            :next-sort="nextSort"
+            @close="regVisible = false"
+            @saved="onSaved"
+        />
     </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, reactive, ref } from "vue";
-import { Codemirror } from "vue-codemirror";
-import { html } from "@codemirror/lang-html";
-import { EditorView } from "@codemirror/view";
+import { computed, onMounted, ref } from "vue";
 import { Message } from "view-ui-plus";
 import UserSettingApi from "@/api/UserSettingApi";
+import { widgetRegistry } from "@/components/widgets";
+import MyConfirm from "@/components/MyConfirm";
+import { useDefaultStore } from "@/store";
+import type { WidgetCatalog } from "@/types";
+import WidgetCard from "./WidgetCard.vue";
+import WidgetEditModal from "./WidgetEditModal.vue";
+import WidgetRegisterModal from "./WidgetRegisterModal.vue";
+
+const store = useDefaultStore();
 
-const list = ref<any[]>([]);
 const loading = ref(true);
-const saving = ref(false);
-const selectedId = ref<number | null>(null);
-const saveTip = ref("");
-const sampleCode = "evaluate";
+const registering = ref(false);
+const items = ref<WidgetCatalog[]>([]);
+const schools = ref<{ id: number; name: string }[]>([]);
+const typeFilter = ref<"all" | "1" | "2">("all");
+const keyword = ref("");
 
-const form = reactive<any>({
-    id: null,
-    code: "",
-    name: "",
-    compType: 2,
-    content: "",
-    dataCode: "",
-    schId: null,
-    sort: 0,
-    enabled: 1,
+/** 超管（userInfo.type==1）与校管（roleId∈{2,5,7}）都可进本页，但可写范围不同 */
+const isSuperUser = computed(() => store.userInfo?.type == 1);
+const view = ref<"super" | "school">(isSuperUser.value ? "super" : "school");
+const isSuperView = computed(() => isSuperUser.value && view.value === "super");
+const mySchId = computed<number | null>(() => {
+    const id = store.getCurSchId;
+    return id && id > 0 ? id : null;
+});
+const mySchName = computed(() => store.curRoleInfo?.schName || "");
+
+const editVisible = ref(false);
+const editIsNew = ref(false);
+const editItem = ref<WidgetCatalog | null>(null);
+const editTab = ref<"cfg" | "cont" | "prev">("cfg");
+const regVisible = ref(false);
+
+const registryCodes = Object.keys(widgetRegistry);
+const registeredCodes = computed(() => items.value.filter(x => x.compType === 1).map(x => x.code));
+const nextSort = computed(() => items.value.reduce((max, x) => Math.max(max, Number(x.sort) || 0), 0) + 10);
+const countBuiltin = computed(() => items.value.filter(x => x.compType === 1).length);
+const countCustom = computed(() => items.value.filter(x => x.compType === 2).length);
+/** 卡片里可见范围 chip 的学校名：超管取机构树，校管只有本校 */
+const cardSchools = computed(() => {
+    if (schools.value.length > 0) return schools.value;
+    return mySchId.value ? [{ id: mySchId.value, name: mySchName.value || "本校" }] : [];
 });
 
-const builtinList = computed(() => list.value.filter(x => x.compType === 1));
-const fragmentList = computed(() => list.value.filter(x => x.compType === 2));
-const isBuiltin = computed(() => form.compType === 1);
-/** 已入库的内置项不许改键：键是前端注册表的索引 */
-const isLockedCode = computed(() => !!form.id && isBuiltin.value);
-const canSave = computed(() => !!form.code.trim() && !!form.name.trim());
+const visibleList = computed(() => {
+    const kw = keyword.value.trim().toLowerCase();
+    return items.value.filter(x => {
+        if (typeFilter.value !== "all" && String(x.compType) !== typeFilter.value) return false;
+        if (!kw) return true;
+        return [x.name, x.alias, x.code, x.dataCode].some(v => String(v || "").toLowerCase().includes(kw));
+    });
+});
 
-const extensions = computed(() => [html(), EditorView.lineWrapping]);
+const dragFrom = ref<number | null>(null);
+const dragTo = ref<number | null>(null);
 
-onMounted(loadList);
+onMounted(async () => {
+    await Promise.all([loadList(), loadSchools()]);
+});
 
 async function loadList() {
     loading.value = true;
     try {
-        list.value = (await UserSettingApi.getWidgetCatalogList()) || [];
+        items.value = (await UserSettingApi.getWidgetCatalogList()) || [];
     } catch (e) {
         console.warn("[widget] 候选池列表拉取失败", e);
-        list.value = [];
+        items.value = [];
     }
     loading.value = false;
 }
 
-function onSelect(item: any) {
-    selectedId.value = item.id;
-    form.id = item.id;
-    form.code = item.code;
-    form.name = item.name;
-    form.compType = item.compType;
-    form.content = item.content || "";
-    form.dataCode = item.dataCode || "";
-    form.schId = item.schId;
-    form.sort = item.sort || 0;
-    form.enabled = item.enabled === 0 ? 0 : 1;
-    saveTip.value = isBuiltin.value
-        ? `内置组件（${item.code}）：内容在 front 工程里，此处只登记键与展示名`
-        : "自定义片段：可编辑 / 上传 / 保存";
-}
-
-function onNew() {
-    selectedId.value = null;
-    form.id = null;
-    form.code = "";
-    form.name = "";
-    form.compType = 2;
-    form.content = "";
-    form.dataCode = "";
-    form.schId = null;
-    form.sort = (list.value.length + 1) * 10;
-    form.enabled = 1;
-    saveTip.value = "新建自定义片段：填组件键与名称后保存";
-}
-
-async function onSave() {
-    if (!canSave.value) return;
-    saving.value = true;
+/** 机构树仅超管可取（后端 getSchTree 校验 type==1）；校管视角由本校兜底 */
+async function loadSchools() {
+    if (!isSuperUser.value) return;
     try {
-        await UserSettingApi.saveWidgetCatalog({
-            id: form.id,
-            code: form.code.trim(),
-            name: form.name.trim(),
-            compType: form.compType,
-            content: isBuiltin.value ? null : form.content,
-            dataCode: form.dataCode ? form.dataCode.trim() : null,
-            schId: form.schId,
-            sort: form.sort,
-            enabled: form.enabled,
-        });
-        Message.success("保存成功");
-        saveTip.value = "已保存到 widget_catalog";
-        await loadList();
-        const find = list.value.find(x => x.code === form.code.trim());
-        if (find) onSelect(find);
+        const tree: any = await UserSettingApi.getSchTree();
+        schools.value = flattenSchools(tree);
     } catch (e) {
-        console.warn("[widget] 保存失败", e);
+        console.warn("[widget] 机构树拉取失败", e);
+        schools.value = [];
+    }
+}
+
+function flattenSchools(node: any): { id: number; name: string }[] {
+    const typed: { id: number; name: string }[] = [];
+    const leaves: { id: number; name: string }[] = [];
+    const walk = (n: any) => {
+        if (!n || typeof n !== "object") return;
+        const kids = Array.isArray(n.children) ? n.children : [];
+        if (kids.length > 0) {
+            kids.forEach(walk);
+            return;
+        }
+        const item = { id: Number(n.id), name: n.name || `学校 ${n.id}` };
+        if (Number(n.type) === 2) typed.push(item);
+        leaves.push(item);
+    };
+    if (Array.isArray(node)) node.forEach(walk);
+    else walk(node);
+    return typed.length > 0 ? typed : leaves;
+}
+
+function setView(v: "super" | "school") {
+    if (v === "school" && !isSuperUser.value) return;
+    if (v === view.value) return;
+    view.value = v;
+    Message.info(v === "super" ? "已切换：超管视角" : "已切换：校管理员视角");
+}
+
+function openNew() {
+    if (!isSuperView.value) return;
+    editItem.value = null;
+    editIsNew.value = true;
+    editTab.value = "cfg";
+    editVisible.value = true;
+}
+
+function openEdit(item: WidgetCatalog) {
+    editItem.value = item;
+    editIsNew.value = false;
+    editTab.value = "cfg";
+    editVisible.value = true;
+}
+
+function openPreview(item: WidgetCatalog) {
+    editItem.value = item;
+    editIsNew.value = false;
+    editTab.value = "prev";
+    editVisible.value = true;
+}
+
+async function onSaved() {
+    editVisible.value = false;
+    regVisible.value = false;
+    await loadList();
+}
+
+async function onToggle(item: WidgetCatalog) {
+    const next = item.enabled ? 0 : 1;
+    try {
+        await saveOne(item, { enabled: next });
+        item.enabled = next;
+        Message.success(next ? "已启用" : "已下线");
+    } catch (e) {
+        console.warn("[widget] 启停保存失败", e);
         Message.error(typeof e === "string" ? e : "保存失败");
     }
-    saving.value = false;
 }
 
-/** 上传只在浏览器里读成文本填编辑器，不请求任何上传接口 */
-function onFileChange(ev: Event) {
-    const input = ev.target as HTMLInputElement;
-    const file = input.files && input.files[0];
-    if (!file) return;
-    const reader = new FileReader();
-    reader.onload = () => {
-        form.content = String(reader.result || "");
-        saveTip.value = `已读入 ${file.name}（${file.size} B），保存后生效`;
-    };
-    reader.readAsText(file, "utf-8");
-    input.value = "";
+async function onDelete(item: WidgetCatalog) {
+    await MyConfirm({
+        title: "删除组件",
+        msg: `确定删除「${item.name}」（${item.code}）吗？`,
+        info: "会一并删除它的可见范围点名与各校覆盖设置，删除后无法恢复。",
+        async onOk() {
+            await UserSettingApi.deleteWidgetCatalog(item.id as number);
+        },
+    });
+    await loadList();
+}
+
+function onDragStart(id?: number) {
+    dragFrom.value = id ?? null;
+}
+
+function onDragOver(id?: number) {
+    if (id !== dragFrom.value) dragTo.value = id ?? null;
+}
+
+function onDragEnd() {
+    dragFrom.value = null;
+    dragTo.value = null;
+}
+
+/** 拖拽落位：在全量 sorted 顺序里移位，再按 (i+1)*10 重写全部 sort（过滤态也不串序） */
+async function onDrop(targetId?: number) {
+    const from = dragFrom.value;
+    dragFrom.value = null;
+    dragTo.value = null;
+    if (from == null || targetId == null || from === targetId) return;
+
+    const sorted = [...items.value].sort(
+        (a, b) => (Number(a.sort) || 0) - (Number(b.sort) || 0) || (Number(a.id) || 0) - (Number(b.id) || 0)
+    );
+    const fromIdx = sorted.findIndex(x => x.id === from);
+    const toIdx = sorted.findIndex(x => x.id === targetId);
+    if (fromIdx < 0 || toIdx < 0) return;
+
+    const [moved] = sorted.splice(fromIdx, 1);
+    sorted.splice(toIdx, 0, moved);
+
+    const changed: WidgetCatalog[] = [];
+    sorted.forEach((row, i) => {
+        const next = (i + 1) * 10;
+        if ((Number(row.sort) || 0) !== next) {
+            row.sort = next;
+            changed.push(row);
+        }
+    });
+    items.value = sorted;
+    if (changed.length === 0) return;
+
+    try {
+        for (const row of changed) await saveOne(row, {});
+        Message.success("排序已保存");
+    } catch (e) {
+        console.warn("[widget] 排序保存失败", e);
+        Message.error(typeof e === "string" ? e : "排序保存失败");
+    }
+    await loadList();
+}
+
+/**
+ * 单行保存：超管写全局目录（整行回传，避免 JPA 合并把未传字段置空）；
+ * 校管写本校覆盖（schId 由后端取登录校，前端不传）。
+ * 注：校管侧四个覆盖字段恒回传当前生效值，等价于「本校显式固化」，值不产生可见漂移。
+ */
+async function saveOne(item: WidgetCatalog, patch: { enabled?: number; sort?: number }) {
+    if (isSuperView.value) {
+        await UserSettingApi.saveWidgetCatalog({ ...item, ...patch });
+        return;
+    }
+    await UserSettingApi.saveWidgetSchoolSetting({
+        widgetId: item.id,
+        enabled: patch.enabled !== undefined ? patch.enabled : item.enabled,
+        roleTypes: item.roleTypes ?? null,
+        sortNo: patch.sort !== undefined ? patch.sort : item.sort ?? 0,
+        alias: item.alias ?? null,
+    });
+}
+
+/** 空态引导：把前端注册表里有、候选池里没有的内置键一次登记进目录 */
+async function quickRegisterBuiltins() {
+    const pending = registryCodes.filter(code => !registeredCodes.value.includes(code));
+    if (pending.length === 0) {
+        Message.info("内置组件已全部登记");
+        return;
+    }
+    registering.value = true;
+    let base = nextSort.value;
+    let done = 0;
+    for (const code of pending) {
+        try {
+            await UserSettingApi.saveWidgetCatalog({
+                id: null,
+                code,
+                name: code,
+                compType: 1,
+                content: null,
+                dataCode: code,
+                scopeType: 0,
+                scopeSchIds: [],
+                roleTypes: null,
+                roleAlias: null,
+                sort: base,
+                enabled: 1,
+            });
+            done++;
+            base += 10;
+        } catch (e) {
+            console.warn("[widget] 登记失败", code, e);
+            Message.error(typeof e === "string" ? e : `登记失败：${code}`);
+        }
+    }
+    registering.value = false;
+    if (done > 0) {
+        Message.success(`已登记 ${done} 个内置组件`);
+        await loadList();
+    }
 }
 </script>
 
 <style lang="scss" scoped>
+@use "sass:color";
+@use "../../assets/styles/utils/varible" as *;
+
+$wm-brand: $color-primary; // 品牌主色唯一来源 = 项目 SCSS 变量
+$wm-brand-weak: color.mix(#ffffff, $wm-brand, 90%);
+
 .widget-manage {
-    display: flex;
-    gap: 16px;
-    align-items: flex-start;
+    --wm-t1: #2c3138;
+    --wm-t2: #4a4f55;
+    --wm-t3: #7a8088;
+    --wm-t4: #9aa0a8;
+    --wm-line: #eef0f3;
+    --wm-line2: #e5e8ee;
+
+    min-width: 0;
 }
-.wm-side {
-    width: 250px;
-    flex: 0 0 auto;
-    background: #fff;
-    border: 1px solid #e5e8ee;
-    border-radius: 10px;
-    padding: 14px;
-    .wm-side-hd {
+
+.wm-viewbar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+    .grow {
+        flex: 1;
+    }
+    .vb-tip {
+        font-size: 11.5px;
+        color: var(--wm-t4);
+        white-space: nowrap;
+    }
+}
+.role-chip {
+    display: inline-flex;
+    align-items: center;
+    height: 24px;
+    padding: 0 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    color: $wm-brand;
+    background: $wm-brand-weak;
+}
+
+.seg-tabs {
+    display: inline-flex;
+    background: #f0f2f6;
+    border-radius: 9px;
+    padding: 3px;
+    gap: 2px;
+    .sg {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        margin-bottom: 8px;
-        h4 {
-            font-size: 13px;
-            color: #667085;
-            font-weight: 600;
-        }
-    }
-    .wm-group {
-        font-size: 12px;
-        color: #98a2b0;
-        margin: 10px 0 4px;
-    }
-    ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        li {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 8px 10px;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 13px;
-            color: #344054;
-            &:hover {
-                background: #f5f7fa;
-            }
-            &.on {
-                background: #eaf1ff;
-                color: #5979ea;
-            }
-            &.empty {
-                color: #999;
-                cursor: default;
-            }
-            em {
-                font-style: normal;
-                font-size: 11px;
-                color: #98a2b0;
-                &.custom {
-                    color: #b54708;
-                }
-            }
-        }
-    }
-    .wm-empty {
+        gap: 6px;
+        padding: 6px 14px;
         font-size: 13px;
-        color: #999;
-        padding: 8px 0;
+        border-radius: 7px;
+        color: var(--wm-t3);
+        cursor: pointer;
+        user-select: none;
+        white-space: nowrap;
+        transition: all 0.15s;
+        &:hover {
+            color: $wm-brand;
+        }
+        &.active {
+            background: #fff;
+            color: $wm-brand;
+            font-weight: 600;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+        }
+        b {
+            font-size: 11px;
+            font-weight: 600;
+            color: #8a92a0;
+            background: #e8ebf1;
+            border-radius: 8px;
+            padding: 0 6px;
+        }
+        &.active b {
+            color: $wm-brand;
+            background: $wm-brand-weak;
+        }
     }
-    .wm-tip {
-        margin-top: 12px;
-        font-size: 12px;
-        color: #98a2b0;
-        line-height: 1.7;
+}
+
+.note-bar {
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+    background: #f7f9fc;
+    border: 1px dashed var(--wm-line2);
+    color: var(--wm-t3);
+    padding: 9px 12px;
+    border-radius: 8px;
+    font-size: 12px;
+    line-height: 1.65;
+    margin: 0 0 12px;
+    b {
+        color: var(--wm-t2);
+        font-weight: 600;
+    }
+    code {
+        background: #eef1f6;
+        border-radius: 4px;
+        padding: 1px 5px;
+        font-size: 11.5px;
+    }
+    &.warn {
+        background: #fffaf3;
+        border-color: #f5dfc0;
+        color: #8a5a17;
+        b {
+            color: #7a4d10;
+        }
+    }
+    &.key {
+        background: #f3fbf6;
+        border-color: #cfe9d9;
+        color: #2c6b47;
+        b {
+            color: #1d5537;
+        }
+        code {
+            background: #e4f4ea;
+            color: #1d5537;
+        }
+    }
+}
+
+.grid-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 16px;
+    flex-wrap: wrap;
+}
+.tb-right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.search {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    svg {
+        position: absolute;
+        left: 9px;
+        width: 14px;
+        height: 14px;
+        color: var(--wm-t4);
+        pointer-events: none;
+    }
+    input {
+        height: 30px;
+        width: 210px;
+        border: 1px solid #dcdfe6;
+        border-radius: 6px;
+        padding: 0 10px 0 28px;
+        font-size: 12.5px;
+        outline: none;
+        transition: all 0.18s;
+        &:focus {
+            border-color: $wm-brand;
+            box-shadow: 0 0 0 3px rgba($wm-brand, 0.12);
+        }
+    }
+}
+
+.wgrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
+    gap: 14px;
+    margin-bottom: 12px;
+}
+.wm-loading {
+    padding: 40px 0;
+    text-align: center;
+    font-size: 13px;
+    color: var(--wm-t4);
+}
+
+.wcard.add {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-height: 168px;
+    border-style: dashed;
+    color: var(--wm-t3);
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.16s;
+    .plus {
+        font-size: 26px;
+        line-height: 1;
+        color: #c4c9d2;
+    }
+    &:hover {
+        border-color: $wm-brand;
+        color: $wm-brand;
+        background: $wm-brand-weak;
+        .plus {
+            color: $wm-brand;
+        }
+    }
+}
+
+.empty-state {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 44px 20px 48px;
+    border: 1px dashed var(--wm-line2);
+    border-radius: 10px;
+    .es-ic {
+        font-size: 30px;
+    }
+    h5 {
+        font-size: 14.5px;
+        color: var(--wm-t1);
+        margin: 10px 0 6px;
+    }
+    p {
+        font-size: 12.5px;
+        color: var(--wm-t3);
+        line-height: 1.8;
+        max-width: 560px;
+        margin: 0 auto 16px;
         code {
             background: #f2f4f8;
             border-radius: 4px;
             padding: 1px 5px;
             color: #b42318;
+            font-size: 11.5px;
         }
     }
-}
-.wm-main {
-    flex: 1;
-    min-width: 0;
-    background: #fff;
-    border: 1px solid #e5e8ee;
-    border-radius: 10px;
-    padding: 14px;
-}
-.wm-form {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 14px;
-    margin-bottom: 12px;
-    .fld {
+    .es-actions {
         display: flex;
-        flex-direction: column;
-        gap: 4px;
-        min-width: 190px;
-        > span {
-            font-size: 12px;
-            color: #667085;
-        }
-        &.fld-sm {
-            min-width: 130px;
+        gap: 10px;
+        justify-content: center;
+        align-items: center;
+    }
+    .es-dim {
+        font-size: 12.5px;
+        color: var(--wm-t4);
+    }
+    &.slim {
+        padding: 34px 20px;
+        border: none;
+        p {
+            margin: 0;
         }
     }
-    .wm-select {
-        width: 100%;
-    }
-}
-.wm-tools {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 10px;
-    .grow {
-        flex: 1;
-    }
-    .save-tip {
-        font-size: 12px;
-        color: #027a48;
-    }
-}
-.file-btn {
-    position: relative;
-    overflow: hidden;
-    display: inline-flex;
-    align-items: center;
-    input {
-        position: absolute;
-        inset: 0;
-        opacity: 0;
-        cursor: pointer;
-    }
 }
+
 .btn {
     border: 1px solid #d0d5dd;
     background: #fff;
@@ -369,49 +655,29 @@ function onFileChange(ev: Event) {
     border-radius: 6px;
     font-size: 12.5px;
     cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.15s;
     &:hover {
-        border-color: #98a2b0;
+        border-color: $wm-brand;
+        color: $wm-brand;
     }
     &.primary {
-        background: #101828;
-        border-color: #101828;
+        background: $wm-brand;
+        border-color: $wm-brand;
         color: #fff;
+        &:hover {
+            background: color.adjust($wm-brand, $lightness: -6%);
+            color: #fff;
+        }
     }
     &.sm {
-        height: 26px;
+        height: 30px;
         padding: 0 10px;
-        font-size: 12px;
+        font-size: 12.5px;
     }
     &[disabled] {
         opacity: 0.5;
         cursor: default;
     }
 }
-.wm-editor {
-    height: 330px;
-    border: 1px solid #e8eaec;
-    border-radius: 6px;
-    overflow: hidden;
-    :deep(.cm-editor) {
-        height: 100%;
-    }
-    // 锁定态灰底走我们自己的类：vue-codemirror 的 disabled 不产生任何 class，只把 .cm-content 的
-    // contenteditable 置 false，所以按 .cm-disabled / .cm-not-editable 写选择器都会空挂
-    &.is-locked {
-        background: #f9fafb;
-    }
-}
-.wm-foot {
-    margin-top: 10px;
-    font-size: 12px;
-    color: #98a2b0;
-    line-height: 1.8;
-    code {
-        background: #f2f4f8;
-        border-radius: 4px;
-        padding: 1px 5px;
-        color: #b42318;
-        font-size: 11.5px;
-    }
-}
 </style>
diff --git a/src/views/widget/WidgetRegisterModal.vue b/src/views/widget/WidgetRegisterModal.vue
new file mode 100644
index 0000000..3e5753e
--- /dev/null
+++ b/src/views/widget/WidgetRegisterModal.vue
@@ -0,0 +1,342 @@
+<template>
+    <Teleport to="body">
+        <div v-if="visible" class="wm-reg-root">
+            <div class="modal-mask show" @click="close"></div>
+            <div class="modal show sm">
+                <div class="m-head">
+                    <div>
+                        <h4>登记内置组件 <span class="badge builtin">超管专属</span></h4>
+                        <div class="m-sub">键须与 front/src/components/widgets/index.ts 一致</div>
+                    </div>
+                    <button class="x" @click="close">×</button>
+                </div>
+                <div class="m-body">
+                    <p>
+                        <b>原理：</b>内置组件的<b>代码</b>打在前端工程里，并在注册表 <code>index.ts</code> 注册成一个<b>键</b>；
+                        <code>widget_catalog</code> 只存「目录行」（键 + 展示名 + 排序 + 启用 + 范围 + 角色 + 别名覆盖），<b>不存内容</b>。
+                        用户端拿到候选池后按 <code>code</code> 去注册表查，命中就渲染对应 Vue 组件。<br />
+                        所以「登记」= 往目录表插一条 <code>comp_type=1, code=注册表里的键</code> 的记录，<b>不会让代码里凭空多出一个组件</b>。
+                    </p>
+                    <ol>
+                        <li>前端新建 <code>components/widgets/XxxWidget.vue</code></li>
+                        <li>在 <code>components/widgets/index.ts</code> 注册 <code>{ code, name }</code>（键一旦发布就别改，改键 = 换身份）</li>
+                        <li>需要动态数据时，后端 <code>WidgetDataService</code> 加白名单分支</li>
+                        <li><b>发版部署</b>（内置组件必须发版才生效）</li>
+                        <li>回到本弹窗点「登记」，或跑 <code>resources/sql/widget_catalog.sql</code> 种子</li>
+                    </ol>
+                    <ul class="reg-list">
+                        <li v-for="row in rows" :key="row.code">
+                            <input v-model="row.name" class="inp name-inp" maxlength="30" placeholder="展示名" />
+                            <span class="rc">{{ row.code }}</span>
+                            <span class="grow"></span>
+                            <span v-if="row.registered" class="badge ok">已登记</span>
+                            <button v-else class="btn sm primary" :disabled="saving" @click="registerOne(row)">登记</button>
+                        </li>
+                        <li v-if="rows.length === 0" class="empty">前端注册表里没有可登记的键</li>
+                    </ul>
+                </div>
+                <div class="m-foot">
+                    <span class="save-tip">{{ tip }}</span>
+                    <button class="btn plain" @click="close">关闭</button>
+                    <button v-if="pendingCount > 1" class="btn primary" :disabled="saving" @click="registerAll">
+                        一键登记 {{ pendingCount }} 个未登记键
+                    </button>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive, ref, watch } from "vue";
+import { Message } from "view-ui-plus";
+import UserSettingApi from "@/api/UserSettingApi";
+
+const props = defineProps<{
+    visible: boolean;
+    /** 前端注册表的键（来自 components/widgets/index.ts） */
+    registryCodes: string[];
+    /** 已登记进候选池的内置键 */
+    registeredCodes: string[];
+    /** 登记时的起始排序基数 */
+    nextSort: number;
+}>();
+
+const emit = defineEmits<{ (e: "close"): void; (e: "saved"): void }>();
+
+const saving = ref(false);
+const tip = ref("");
+const rows = reactive<{ code: string; name: string; registered: boolean }[]>([]);
+
+const pendingCount = computed(() => rows.filter(x => !x.registered).length);
+
+watch(
+    () => props.visible,
+    show => {
+        if (!show) return;
+        rows.splice(0, rows.length);
+        props.registryCodes.forEach(code => {
+            rows.push({ code, name: code, registered: props.registeredCodes.includes(code) });
+        });
+        tip.value = "";
+    },
+    { immediate: true }
+);
+
+function close() {
+    emit("close");
+}
+
+async function registerOne(row: { code: string; name: string }) {
+    await registerBatch([{ code: row.code, name: row.name }]);
+}
+
+async function registerAll() {
+    const payload = rows.filter(x => !x.registered).map(x => ({ code: x.code, name: x.name }));
+    await registerBatch(payload);
+}
+
+async function registerBatch(payload: { code: string; name: string }[]) {
+    if (payload.length === 0) return;
+    saving.value = true;
+    let done = 0;
+    let baseSort = props.nextSort;
+    for (const one of payload) {
+        try {
+            await UserSettingApi.saveWidgetCatalog({
+                id: null,
+                code: one.code,
+                name: (one.name || one.code).trim(),
+                compType: 1,
+                content: null,
+                dataCode: one.code,
+                scopeType: 0,
+                scopeSchIds: [],
+                roleTypes: null,
+                roleAlias: null,
+                sort: baseSort,
+                enabled: 1,
+            });
+            done++;
+            baseSort += 10;
+        } catch (e) {
+            console.warn("[widget] 登记失败", one.code, e);
+            Message.error(typeof e === "string" ? e : `登记失败：${one.code}`);
+        }
+    }
+    saving.value = false;
+    if (done > 0) {
+        Message.success(`已登记 ${done} 个内置组件`);
+        tip.value = "登记后进入候选池，可回主界面继续配范围 / 角色";
+        emit("saved");
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@use "sass:color";
+@use "../../assets/styles/utils/varible" as *;
+
+$wm-brand: $color-primary;
+$wm-brand-weak: color.mix(#ffffff, $wm-brand, 90%);
+
+.wm-reg-root {
+    --wm-t1: #2c3138;
+    --wm-t2: #4a4f55;
+    --wm-t3: #7a8088;
+    --wm-t4: #9aa0a8;
+    --wm-line: #eef0f3;
+    --wm-ok-bg: #e8f7ee;
+    --wm-ok: #12a150;
+}
+.modal-mask {
+    position: fixed;
+    inset: 0;
+    background: rgba(16, 24, 40, 0.3);
+    z-index: 110;
+}
+.modal {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 780px;
+    max-width: 94vw;
+    max-height: 88vh;
+    background: #fff;
+    border-radius: 12px;
+    z-index: 111;
+    box-shadow: 0 20px 60px rgba(16, 24, 40, 0.24);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    &.sm {
+        width: 560px;
+    }
+}
+.m-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 18px 22px 12px;
+    border-bottom: 1px solid var(--wm-line);
+    h4 {
+        font-size: 15px;
+        font-weight: 600;
+        color: var(--wm-t1);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+    .m-sub {
+        font-size: 12px;
+        color: var(--wm-t4);
+        margin-top: 4px;
+        font-family: Consolas, Menlo, monospace;
+    }
+    .x {
+        border: none;
+        background: transparent;
+        font-size: 20px;
+        line-height: 1;
+        color: var(--wm-t4);
+        cursor: pointer;
+        padding: 2px 6px;
+        border-radius: 6px;
+        &:hover {
+            background: #f2f4f8;
+            color: var(--wm-t2);
+        }
+    }
+}
+.m-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 14px 22px 18px;
+    > p {
+        font-size: 12.5px;
+        color: var(--wm-t3);
+        line-height: 1.75;
+        margin-bottom: 12px;
+    }
+    ol {
+        font-size: 12.5px;
+        color: var(--wm-t3);
+        line-height: 1.9;
+        padding-left: 20px;
+        margin-bottom: 12px;
+        b {
+            color: var(--wm-t2);
+        }
+    }
+}
+.m-foot {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 22px 16px;
+    border-top: 1px solid var(--wm-line);
+    .save-tip {
+        flex: 1;
+        font-size: 12px;
+        color: var(--wm-ok);
+    }
+}
+.badge {
+    display: inline-flex;
+    align-items: center;
+    height: 20px;
+    padding: 0 8px;
+    border-radius: 6px;
+    font-size: 11.5px;
+    font-weight: 500;
+    white-space: nowrap;
+    &.builtin {
+        background: $wm-brand-weak;
+        color: $wm-brand;
+    }
+    &.ok {
+        background: var(--wm-ok-bg);
+        color: var(--wm-ok);
+    }
+}
+.reg-list {
+    list-style: none;
+    border: 1px solid var(--wm-line);
+    border-radius: 8px;
+    overflow: hidden;
+    li {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 11px 14px;
+        border-bottom: 1px solid var(--wm-line);
+        font-size: 13px;
+        &:last-child {
+            border-bottom: none;
+        }
+        &.empty {
+            color: var(--wm-t4);
+            font-size: 12.5px;
+        }
+        .grow {
+            flex: 1;
+        }
+        .rc {
+            font-size: 11.5px;
+            color: var(--wm-t4);
+            font-family: Consolas, Menlo, monospace;
+        }
+    }
+}
+.inp {
+    height: 30px;
+    border: 1px solid #dcdfe6;
+    border-radius: 6px;
+    padding: 0 10px;
+    font-size: 12.5px;
+    outline: none;
+    background: #fff;
+    &:focus {
+        border-color: $wm-brand;
+        box-shadow: 0 0 0 3px rgba($wm-brand, 0.12);
+    }
+    &.name-inp {
+        width: 150px;
+        flex-shrink: 0;
+    }
+}
+.btn {
+    border: 1px solid #d0d5dd;
+    background: #fff;
+    color: #344054;
+    height: 30px;
+    padding: 0 12px;
+    border-radius: 6px;
+    font-size: 12.5px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    white-space: nowrap;
+    &:hover {
+        border-color: var(--wm-t4);
+    }
+    &.primary {
+        background: $wm-brand;
+        border-color: $wm-brand;
+        color: #fff;
+    }
+    &.sm {
+        height: 26px;
+        padding: 0 10px;
+        font-size: 12px;
+    }
+    &[disabled] {
+        opacity: 0.5;
+        cursor: default;
+    }
+}
+</style>