feat(theme): 皮肤包管理收敛平台级+命名表单-新顶层路由/theme-manage(meta.superOnly守卫+页面watch双兜底),ThemeManage升级全屏页复用新抽WorkbenchHeader(工作台同款深色顶栏backTo=/workbench),工作台超管工具行加皮肤包管理按钮,删SiteManage兜底按钮,旧/theme重定向新页;上传/添加皮肤包改表单弹窗(zip+显示名/描述;添加=源包+标识名+命名一步),内置包可改显示名/描述(无参数区+恢复默认名称);openEdit未注册主题保留原值并告警(themeEdit util,不再静默归一default);mock删modId=7菜单节点;SiteWizard预览内容源v-model对齐path语义(W4遗留);vitest 62/62+build通过

src/views/cms/ThemeManage.vue

@@ -1,16 +1,23 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
+import { useRouter } from "vue-router";
 import { Message } from "view-ui-plus";
 import MyConfirm from "@/components/MyConfirm";
+import WorkbenchHeader from "@/components/WorkbenchHeader.vue";
 import ThemePreviewFrame from "@/components/theme/ThemePreviewFrame.vue";
 import { ThemeParamVo, ThemeVo, SiteVo } from "@/types/cms";
 import { themeApi, siteApi, assetUrl } from "@/api/module/cms";
+import { useCmsStore } from "@/store";
 
 /**
- * 皮肤包管理（W1，方案 §5.2/§5.4）：内置只读（仅预览）、外部可管（上传/派生/编辑/删除）。
- * 入口：站点管理按钮（平台模块表注册前的兜底，R3）+ 平台菜单（modId=7）。
+ * 皮肤包管理（W1 + 任务二/四，2026-09-08）：平台级全屏页（/theme-manage，超管专属，
+ * 工作台按钮进入、不再挂左侧菜单）。内置包内容只读但显示名/描述可改（.meta 覆盖层）、
+ * 外部包可管（上传/派生/编辑/删除）。标识名（name，即主题路径/URL 段）仅创建时可定，创建后不可改。
  */
 
+const router = useRouter();
+const store = useCmsStore();
+
 const themes = ref<ThemeVo[]>([]);
 const loading = ref(false);
 const previewVisible = ref(false);
@@ -18,14 +25,34 @@ const previewTheme = ref<ThemeVo | null>(null);
 const previewSitePath = ref("");
 const contentSources = ref<SiteVo[]>([]);
 
-const deriveVisible = ref(false);
-const deriveForm = ref({ source: "default", name: "" });
+// 上传表单（任务四：zip + 显示名称/描述）
+const uploadVisible = ref(false);
+const uploading = ref(false);
+const uploadFile = ref<File | null>(null);
+const uploadForm = ref({ title: "", description: "" });
+
+// 添加皮肤包表单（任务四：派生升级——源包 + 标识名（主题路径） + 显示名称/描述一步建成）
+const addVisible = ref(false);
+const adding = ref(false);
+const addForm = ref({ source: "default", name: "", title: "", description: "" });
 
 const metaVisible = ref(false);
 const metaTheme = ref<ThemeVo | null>(null);
 const metaTitle = ref("");
+const metaDescription = ref("");
 const metaParams = ref<ThemeParamVo[]>([]);
 
+// 非超管深链兜底（引导期守卫放行，user 装载后弹回工作台）
+watch(
+    () => store.user,
+    u => {
+        if (u && !store.isSuperAdmin) {
+            router.replace("/workbench");
+        }
+    },
+    { immediate: true }
+);
+
 async function run() {
     loading.value = true;
     try {
@@ -56,48 +83,85 @@ function onContentSourceChange(path: string) {
     previewSitePath.value = path;
 }
 
-function beforeUpload(file: File) {
-    themeApi
-        .upload(file)
-        .send()
-        .then(() => {
-            Message.success("上传成功，皮肤包已注册（免重启）");
-            run();
-        })
-        .catch(() => {
-            // 错误详情由 alova 拦截器统一弹出（校验报告逐条展示）
-        });
-    return false; // 阻断 Upload 组件自动上传，改走手动
+/* ===== 上传表单（任务四）：选 zip + 命名，提交走手动上传通道 ===== */
+function openUpload() {
+    uploadFile.value = null;
+    uploadForm.value = { title: "", description: "" };
+    uploadVisible.value = true;
 }
 
-function openDerive() {
-    deriveForm.value = { source: themes.value[0]?.name || "default", name: "" };
-    deriveVisible.value = true;
+function onPickUploadFile(file: File) {
+    uploadFile.value = file;
+    return false; // 阻断 Upload 自动上传，统一由「上传」按钮提交
 }
 
-async function doDerive() {
-    if (!/^[a-z][a-z0-9-]{1,30}[a-z0-9]$/.test(deriveForm.value.name)) {
-        Message.warning("新包名仅限小写字母/数字/短横线，且以字母开头、数字或字母结尾");
+async function doUpload() {
+    if (!uploadFile.value) {
+        Message.warning("请先选择皮肤包 zip 文件");
         return;
     }
-    await themeApi.derive(deriveForm.value.source, deriveForm.value.name).send();
-    Message.success("派生成功，新皮肤包可编辑可删除");
-    deriveVisible.value = false;
-    run();
+    uploading.value = true;
+    try {
+        await themeApi
+            .upload(uploadFile.value, {
+                title: uploadForm.value.title || undefined,
+                description: uploadForm.value.description,
+            })
+            .send();
+        Message.success("上传成功，皮肤包已注册（免重启）");
+        uploadVisible.value = false;
+        run();
+    } catch {
+        // 错误详情由 alova 拦截器统一弹出（校验报告逐条展示）
+    } finally {
+        uploading.value = false;
+    }
 }
 
+/* ===== 添加皮肤包（任务四）：从现有包复制 + 命名，一步建成 ===== */
+function openAdd() {
+    addForm.value = { source: themes.value[0]?.name || "default", name: "", title: "", description: "" };
+    addVisible.value = true;
+}
+
+async function doAdd() {
+    if (!/^[a-z][a-z0-9-]{1,30}[a-z0-9]$/.test(addForm.value.name)) {
+        Message.warning("标识名仅限小写字母/数字/短横线，且以字母开头、数字或字母结尾");
+        return;
+    }
+    adding.value = true;
+    try {
+        await themeApi
+            .derive(addForm.value.source, addForm.value.name, {
+                title: addForm.value.title || undefined,
+                description: addForm.value.description,
+            })
+            .send();
+        Message.success("添加成功，新皮肤包可编辑可删除");
+        addVisible.value = false;
+        run();
+    } finally {
+        adding.value = false;
+    }
+}
+
+/* ===== 编辑元数据（任务四：内置包亦可改显示名/描述，走覆盖层） ===== */
 function openMeta(theme: ThemeVo) {
     metaTheme.value = theme;
     metaTitle.value = theme.title;
+    metaDescription.value = theme.description || "";
     metaParams.value = (theme.params || []).map(p => ({ ...p }));
     metaVisible.value = true;
 }
 
 async function doSaveMeta() {
+    const builtin = metaTheme.value?.source === "builtin";
     await themeApi
         .updateMeta(metaTheme.value!.name, {
             title: metaTitle.value,
-            params: metaParams.value,
+            description: metaDescription.value,
+            // 内置包参数 schema 不可改（后端强校验），不传即不改动
+            params: builtin ? undefined : metaParams.value,
         })
         .send();
     Message.success("已保存，引用该皮肤的站点门户与预览立即生效");
@@ -105,6 +169,21 @@ async function doSaveMeta() {
     run();
 }
 
+/** 内置包恢复默认显示名/描述（清空 .meta 覆盖层） */
+async function doResetBuiltinMeta() {
+    MyConfirm({
+        title: "恢复默认名称",
+        msg: `确定恢复「${metaTheme.value?.name}」的默认显示名称与描述吗？`,
+        info: "将清除改名覆盖层，恢复包内声明的原始名称",
+        async onOk() {
+            await themeApi.updateMeta(metaTheme.value!.name, { title: "", description: "" }).send();
+            Message.success("已恢复默认名称");
+            metaVisible.value = false;
+            run();
+        },
+    });
+}
+
 function askRemove(theme: ThemeVo) {
     if (theme.source === "builtin") {
         Message.warning("内置包不可删除");
@@ -130,64 +209,120 @@ const builtinCount = computed(() => themes.value.filter(t => t.source === "built
 </script>
 
 <template>
-    <div class="theme-manage">
-        <div class="toolbar">
-            <Upload :before-upload="beforeUpload" accept=".zip" :show-upload-list="false">
-                <Button type="primary" icon="ios-cloud-upload-outline">上传皮肤包（zip）</Button>
-            </Upload>
-            <Button icon="ios-copy" @click="openDerive">从现有包派生</Button>
-            <Button icon="ios-refresh" @click="run">刷新</Button>
-            <span class="summary">内置 {{ builtinCount }} 个 · 外部 {{ themes.length - builtinCount }} 个（内置只读，外部可管）</span>
-        </div>
+    <div class="theme-page">
+        <WorkbenchHeader title="云海CMS · 皮肤包管理" back-to="/workbench" />
 
-        <Spin v-if="loading" size="large" style="display: block; margin: 60px auto" />
-        <div v-else class="cards">
-            <div v-for="t in themes" :key="t.name" class="card">
-                <div class="shot">
-                    <img :src="assetUrl(t.screenshotUrl)" :alt="t.title" />
-                    <Tag class="badge" :color="t.source === 'builtin' ? 'default' : 'success'">
-                        {{ t.source === "builtin" ? "内置" : "外部" }}
-                    </Tag>
-                </div>
-                <div class="meta">
-                    <p class="title">{{ t.title }}<span class="name">（{{ t.name }}）</span></p>
-                    <p class="desc">{{ t.description || "—" }}</p>
-                    <p class="stats">参数 {{ (t.params || []).length }} 个 · 被用 {{ t.inUseCount || 0 }} 站点</p>
-                </div>
-                <div class="actions">
-                    <Button size="small" @click="openPreview(t)">预览</Button>
-                    <template v-if="t.source === 'external'">
+        <div class="theme-body">
+            <div class="toolbar">
+                <Button type="primary" icon="ios-cloud-upload-outline" @click="openUpload">上传皮肤包</Button>
+                <Button icon="ios-copy" @click="openAdd">添加皮肤包</Button>
+                <Button icon="ios-refresh" @click="run">刷新</Button>
+                <span class="summary">
+                    内置 {{ builtinCount }} 个 · 外部 {{ themes.length - builtinCount }} 个（内置可改名，外部可管；标识名即主题路径，创建后不可改）
+                </span>
+            </div>
+
+            <Spin v-if="loading" size="large" style="display: block; margin: 60px auto" />
+            <div v-else class="cards">
+                <div v-for="t in themes" :key="t.name" class="card">
+                    <div class="shot">
+                        <img :src="assetUrl(t.screenshotUrl)" :alt="t.title" />
+                        <Tag class="badge" :color="t.source === 'builtin' ? 'default' : 'success'">
+                            {{ t.source === "builtin" ? "内置" : "外部" }}
+                        </Tag>
+                    </div>
+                    <div class="meta">
+                        <p class="title">{{ t.title }}<span class="name">（{{ t.name }}）</span></p>
+                        <p class="desc">{{ t.description || "—" }}</p>
+                        <p class="stats">参数 {{ (t.params || []).length }} 个 · 被用 {{ t.inUseCount || 0 }} 站点</p>
+                    </div>
+                    <div class="actions">
+                        <Button size="small" @click="openPreview(t)">预览</Button>
                         <Tooltip
-                            :content="(t.inUseCount || 0) > 0
-                                ? `被站点引用：${(t.usedBySiteNames || []).join('、')}`
-                                : '外部包可编辑参数 schema'"
+                            :content="t.source === 'builtin'
+                                ? '内置包内容只读，可改显示名称与描述'
+                                : (t.inUseCount || 0) > 0
+                                    ? `被站点引用：${(t.usedBySiteNames || []).join('、')}`
+                                    : '外部包可编辑参数 schema'"
                             placement="top"
                             transfer
                         >
                             <Button size="small" @click="openMeta(t)">编辑</Button>
                         </Tooltip>
-                        <Tooltip
-                            :content="(t.inUseCount || 0) > 0
-                                ? `被站点引用：${(t.usedBySiteNames || []).join('、')}`
-                                : '外部包可删除'"
-                            placement="top"
-                            transfer
-                        >
-                            <Button
-                                size="small"
-                                type="error"
-                                ghost
-                                :disabled="(t.inUseCount || 0) > 0"
-                                @click="askRemove(t)"
+                        <template v-if="t.source === 'external'">
+                            <Tooltip
+                                :content="(t.inUseCount || 0) > 0
+                                    ? `被站点引用：${(t.usedBySiteNames || []).join('、')}`
+                                    : '外部包可删除'"
+                                placement="top"
+                                transfer
                             >
-                                删除
-                            </Button>
-                        </Tooltip>
-                    </template>
+                                <Button
+                                    size="small"
+                                    type="error"
+                                    ghost
+                                    :disabled="(t.inUseCount || 0) > 0"
+                                    @click="askRemove(t)"
+                                >
+                                    删除
+                                </Button>
+                            </Tooltip>
+                        </template>
+                    </div>
                 </div>
             </div>
         </div>
 
+        <!-- 上传表单弹窗（任务四）：zip + 显示名称/描述 -->
+        <Modal v-model="uploadVisible" title="上传皮肤包" :mask-closable="false" width="520px">
+            <Form :label-width="100">
+                <FormItem label="皮肤包 zip" required>
+                    <Upload :before-upload="onPickUploadFile" accept=".zip" :show-upload-list="false">
+                        <Button icon="ios-folder-open">选择文件</Button>
+                    </Upload>
+                    <p class="form-tip">
+                        {{ uploadFile ? `已选择：${uploadFile.name}` : "尚未选择文件（结构：zip 顶层唯一文件夹，名字与 theme.json 的 name 一致）" }}
+                    </p>
+                </FormItem>
+                <FormItem label="显示名称">
+                    <Input v-model="uploadForm.title" :maxlength="64" placeholder="选填，留空沿用包内 theme.json 的标题" />
+                </FormItem>
+                <FormItem label="描述">
+                    <Input v-model="uploadForm.description" :maxlength="128" placeholder="选填" />
+                </FormItem>
+            </Form>
+            <template #footer>
+                <Button @click="uploadVisible = false">取消</Button>
+                <Button type="primary" :loading="uploading" :disabled="!uploadFile" @click="doUpload">上传</Button>
+            </template>
+        </Modal>
+
+        <!-- 添加皮肤包（任务四）：源包 + 标识名（主题路径） + 命名，一步建成 -->
+        <Modal v-model="addVisible" title="添加皮肤包" :mask-closable="false" width="520px">
+            <Form :label-width="100">
+                <FormItem label="复制自">
+                    <Select v-model="addForm.source" style="width: 100%">
+                        <Option v-for="t in themes" :key="t.name" :value="t.name">{{ t.title }}（{{ t.name }}）</Option>
+                    </Select>
+                    <p class="form-tip">新包完整复制源包的模板与参数，可独立编辑、删除。</p>
+                </FormItem>
+                <FormItem label="标识名" required>
+                    <Input v-model="addForm.name" placeholder="如 mint-green（小写字母/数字/短横线）" />
+                    <p class="form-tip">即主题路径（URL 中的主题段），创建后不可修改。</p>
+                </FormItem>
+                <FormItem label="显示名称">
+                    <Input v-model="addForm.title" :maxlength="64" placeholder="选填，如 薄荷绿；留空沿用源包名称" />
+                </FormItem>
+                <FormItem label="描述">
+                    <Input v-model="addForm.description" :maxlength="128" placeholder="选填" />
+                </FormItem>
+            </Form>
+            <template #footer>
+                <Button @click="addVisible = false">取消</Button>
+                <Button type="primary" :loading="adding" @click="doAdd">添加</Button>
+            </template>
+        </Modal>
+
         <!-- 预览弹窗（复用 ThemePreviewFrame，内容源下拉同向导） -->
         <Modal v-model="previewVisible" :title="`预览皮肤：${previewTheme?.title || ''}`" width="860px">
             <div class="preview-source">
@@ -201,36 +336,29 @@ const builtinCount = computed(() => themes.value.filter(t => t.source === "built
             <ThemePreviewFrame :site-path="previewSitePath" :theme="previewTheme?.name" :theme-params="{}" />
         </Modal>
 
-        <!-- 派生弹窗 -->
-        <Modal v-model="deriveVisible" title="从现有包派生新皮肤" :mask-closable="false" width="480px">
-            <Form :label-width="100">
-                <FormItem label="派生源">
-                    <Select v-model="deriveForm.source" style="width: 280px">
-                        <Option v-for="t in themes" :key="t.name" :value="t.name">{{ t.title }}（{{ t.name }}）</Option>
-                    </Select>
-                </FormItem>
-                <FormItem label="新包名" required>
-                    <Input v-model="deriveForm.name" placeholder="如 my-skin（小写字母/数字/短横线）" style="width: 280px" />
-                </FormItem>
-            </Form>
-            <template #footer>
-                <Button @click="deriveVisible = false">取消</Button>
-                <Button type="primary" @click="doDerive">派生</Button>
-            </template>
-        </Modal>
-
-        <!-- 编辑弹窗（外部包：title + 参数 schema 默认值） -->
+        <!-- 编辑弹窗（任务四：内置包仅显示名/描述；外部包另含参数 schema） -->
         <Modal v-model="metaVisible" :title="`编辑皮肤：${metaTheme?.name || ''}`" :mask-closable="false" width="560px">
+            <Alert v-if="metaTheme?.source === 'builtin'" type="info" show-icon style="margin-bottom: 12px">
+                内置包内容（模板/资产）不可修改，仅显示名称与描述生效；标识名（{{ metaTheme?.name }}）不可改。
+            </Alert>
             <Form :label-width="110">
-                <FormItem label="标题">
+                <FormItem label="显示名称">
                     <Input v-model="metaTitle" :maxlength="64" />
                 </FormItem>
-                <FormItem v-for="p in metaParams" :key="p.key" :label="p.label">
-                    <ColorPicker v-if="p.type === 'color'" v-model="p.defaultValue" />
-                    <Input v-else v-model="p.defaultValue" :disabled="p.type === 'select'" />
+                <FormItem label="描述">
+                    <Input v-model="metaDescription" :maxlength="128" />
                 </FormItem>
+                <template v-if="metaTheme?.source !== 'builtin'">
+                    <FormItem v-for="p in metaParams" :key="p.key" :label="p.label">
+                        <ColorPicker v-if="p.type === 'color'" v-model="p.defaultValue" />
+                        <Input v-else v-model="p.defaultValue" :disabled="p.type === 'select'" />
+                    </FormItem>
+                </template>
             </Form>
             <template #footer>
+                <Button v-if="metaTheme?.source === 'builtin'" style="float: left" @click="doResetBuiltinMeta">
+                    恢复默认名称
+                </Button>
                 <Button @click="metaVisible = false">取消</Button>
                 <Button type="primary" @click="doSaveMeta">保存</Button>
             </template>
@@ -239,7 +367,15 @@ const builtinCount = computed(() => themes.value.filter(t => t.source === "built
 </template>
 
 <style scoped lang="scss">
-.theme-manage {
+.theme-page {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #f5f7fa;
+}
+.theme-body {
+    flex: 1;
+    overflow-y: auto;
     padding: 0 24px 24px;
 }
 .preview-source {
@@ -318,4 +454,10 @@ const builtinCount = computed(() => themes.value.filter(t => t.source === "built
         gap: 8px;
     }
 }
+.form-tip {
+    color: #999;
+    font-size: 12px;
+    line-height: 1.6;
+    margin-top: 4px;
+}
 </style>