[CMS-VISUAL] D1-D10: 组件库全量——布局模型扩 6 新类型（stats_band/featured_topics/video_tour/events/people/badges）+ 编辑器新属性面板（统计项/专题卡/徽章数组编辑器、图标选择器）+ gallery 瀑布流 + banner 4 Tab（topic/event 位）+ 人物管理 CRUD 页 + 全类型英文副题（176 测试绿）

2026-09-28 13:48:51 +08:00
parent 1a913490ef
commit 49678a6568
12 changed files with 1196 additions and 15 deletions
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+/**
+ * D-2（docs/20）内置图标选择器：图标网格预览 + 点选即绑定图标标识符（§3.3 定案 2 综合方案 A+C）。
+ * 数据源 icons.ts（与门户骨架 fragment 同 key）；再次点击已选图标 = 清除（回 null = 首字徽章兜底）。
+ */
+import { ICON_DEFS } from "@/views/cms/homeLayout/icons";
+
+const model = defineModel<string | null>("modelValue", { default: null });
+
+function pick(key: string) {
+    model.value = model.value === key ? null : key;
+}
+</script>
+
+<template>
+    <div class="icon-grid">
+        <button
+            v-for="icon in ICON_DEFS"
+            :key="icon.key"
+            type="button"
+            class="icon-cell"
+            :class="{ active: model === icon.key }"
+            :title="`${icon.label}（${icon.key}）`"
+            @click="pick(icon.key)"
+        >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+                 stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path v-for="(d, i) in icon.paths" :key="i" :d="d" />
+            </svg>
+            <span class="icon-name">{{ icon.label }}</span>
+        </button>
+        <p class="icon-tip">未选图标时入口渲染「名称首字徽章」；再次点击已选图标可清除</p>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.icon-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 6px;
+    .icon-cell {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 3px;
+        border: 1px solid #e2e8f2;
+        border-radius: 6px;
+        background: #fff;
+        padding: 7px 2px 5px;
+        cursor: pointer;
+        color: #515a6e;
+        transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
+        &:hover {
+            border-color: #5cadff;
+            color: #2d8cf0;
+        }
+        &.active {
+            border-color: #2d8cf0;
+            color: #2d8cf0;
+            box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.12);
+        }
+        svg {
+            width: 22px;
+            height: 22px;
+        }
+        .icon-name {
+            font-size: 11px;
+            line-height: 1.2;
+        }
+    }
+    .icon-tip {
+        grid-column: 1 / -1;
+        color: #999;
+        font-size: 12px;
+        margin: 4px 0 0;
+    }
+}
+</style>