yschcms/YschcmsFront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[CMS-VISUAL] F2: 布局编辑器三栏化——中间 iframe 实时预览（500ms debounce 注入+手动刷新兜底+三档视口）、类型卡 SVG 缩略图（R-40）、展示形态 RadioCard、首用自动编排、序列高度示意（171 测试绿）

Browse Source
This commit is contained in:
chenxing
2026-09-28 12:52:57 +08:00
parent af451703e7
commit 1a913490ef
5 changed files with 617 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BlockTypeThumb.vue
+252
View File
@@ -0,0 +1,252 @@
<script setup lang="ts">
/**
* 区块类型缩略示意图（docs/20 F2 / R-40）：添加抽屉类型卡 + 属性面板形态 RadioCard 共用。
* 纯内联 SVG 线框示意（本地资产，无外部 CDN——皮肤包契约红线仅约束门户，管理端同样不引）；
* 每种 type/variant 一幅极简骨架图，新组件类型 = 在 THUMBS 补一支绘制函数（注册表驱动配套）。
*/
const props = withDefaults(
defineProps<{
/** 区块类型（BLOCK_TYPES.type） */
type: string;
/** article_list 展示形态（style），其余类型忽略 */
variant?: string;
}>(),
{ variant: "" },
);
/** 图底色板（示意线框用，与皮肤无关） */
const C = {
band: "#dce6f5",
block: "#e8eef8",
strong: "#9db8e0",
text: "#c3cfe2",
accent: "#5b8dd9",
};
</script>
<template>
<svg class="block-type-thumb" viewBox="0 0 120 64" preserveAspectRatio="xMidYMid meet" role="img" aria-hidden="true">
<!-- article_list 五形态 -->
<template v-if="type === 'article_list'">
<!-- card：头条图 + 摘要 + 行列表 -->
<template v-if="variant === 'card' || !variant">
<rect x="6" y="6" width="34" height="22" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="45" y="9" width="44" height="5" rx="1.5" :fill="C.strong" />
<rect x="45" y="18" width="66" height="3" rx="1.5" :fill="C.text" />
<rect x="45" y="24" width="56" height="3" rx="1.5" :fill="C.text" />
<rect x="6" y="34" width="108" height="3" rx="1.5" :fill="C.text" />
<rect x="6" y="42" width="100" height="3" rx="1.5" :fill="C.text" />
<rect x="6" y="50" width="104" height="3" rx="1.5" :fill="C.text" />
<rect x="6" y="58" width="92" height="3" rx="1.5" :fill="C.text" />
</template>
<!-- news_grid：色带底 + 双栏行 -->
<template v-else-if="variant === 'news_grid'">
<rect x="0" y="0" width="120" height="64" :fill="C.band" />
<rect x="8" y="8" width="104" height="48" rx="2" fill="#ffffff" />
<rect x="14" y="14" width="40" height="4" rx="2" :fill="C.accent" />
<rect x="14" y="26" width="42" height="3" rx="1.5" :fill="C.text" />
<rect x="14" y="34" width="38" height="3" rx="1.5" :fill="C.text" />
<rect x="14" y="42" width="40" height="3" rx="1.5" :fill="C.text" />
<rect x="64" y="26" width="42" height="3" rx="1.5" :fill="C.text" />
<rect x="64" y="34" width="38" height="3" rx="1.5" :fill="C.text" />
<rect x="64" y="42" width="40" height="3" rx="1.5" :fill="C.text" />
</template>
<!-- media_focus：来源徽标 + 行 -->
<template v-else-if="variant === 'media_focus'">
<rect x="6" y="8" width="24" height="8" rx="2" :fill="C.accent" />
<rect x="36" y="11" width="60" height="3" rx="1.5" :fill="C.strong" />
<rect x="6" y="24" width="20" height="8" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="32" y="27" width="70" height="3" rx="1.5" :fill="C.text" />
<rect x="6" y="40" width="18" height="8" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="30" y="43" width="64" height="3" rx="1.5" :fill="C.text" />
<rect x="6" y="54" width="34" height="4" rx="1.5" :fill="C.band" />
</template>
<!-- compact：纯文字行 -->
<template v-else-if="variant === 'compact'">
<rect x="8" y="10" width="8" height="3" rx="1.5" :fill="C.accent" />
<rect x="20" y="10" width="84" height="3" rx="1.5" :fill="C.text" />
<rect x="8" y="21" width="8" height="3" rx="1.5" :fill="C.accent" />
<rect x="20" y="21" width="76" height="3" rx="1.5" :fill="C.text" />
<rect x="8" y="32" width="8" height="3" rx="1.5" :fill="C.accent" />
<rect x="20" y="32" width="88" height="3" rx="1.5" :fill="C.text" />
<rect x="8" y="43" width="8" height="3" rx="1.5" :fill="C.accent" />
<rect x="20" y="43" width="72" height="3" rx="1.5" :fill="C.text" />
<rect x="8" y="54" width="8" height="3" rx="1.5" :fill="C.accent" />
<rect x="20" y="54" width="80" height="3" rx="1.5" :fill="C.text" />
</template>
<!-- image_wall：图片格阵 -->
<template v-else-if="variant === 'image_wall'">
<rect x="6" y="8" width="24" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="35" y="8" width="24" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="64" y="8" width="24" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="93" y="8" width="21" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="6" y="34" width="24" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="35" y="34" width="24" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="64" y="34" width="24" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="93" y="34" width="21" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
</template>
</template>
<!-- ticker：横条 + 滚动标题 -->
<template v-else-if="type === 'ticker'">
<rect x="0" y="20" width="120" height="24" :fill="C.accent" />
<rect x="6" y="28" width="26" height="8" rx="2" fill="#ffffff" opacity="0.9" />
<rect x="38" y="30" width="34" height="4" rx="2" fill="#ffffff" opacity="0.75" />
<rect x="78" y="30" width="30" height="4" rx="2" fill="#ffffff" opacity="0.6" />
</template>
<!-- gallery：居中标题 + 图墙 -->
<template v-else-if="type === 'gallery'">
<rect x="46" y="4" width="28" height="5" rx="2" :fill="C.strong" />
<rect x="38" y="11" width="44" height="2.5" rx="1.25" :fill="C.text" />
<rect x="8" y="20" width="24" height="18" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="37" y="20" width="24" height="18" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="66" y="20" width="24" height="18" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="95" y="20" width="19" height="18" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="8" y="44" width="24" height="16" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="37" y="44" width="24" height="16" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="66" y="44" width="24" height="16" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="95" y="44" width="19" height="16" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
</template>
<!-- links：胶囊按钮行 -->
<template v-else-if="type === 'links'">
<rect x="46" y="6" width="28" height="5" rx="2" :fill="C.strong" />
<rect x="10" y="22" width="22" height="12" rx="6" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="38" y="22" width="22" height="12" rx="6" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="66" y="22" width="22" height="12" rx="6" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="94" y="22" width="18" height="12" rx="6" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="24" y="42" width="22" height="12" rx="6" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="52" y="42" width="22" height="12" rx="6" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="80" y="42" width="22" height="12" rx="6" :fill="C.block" :stroke="C.strong" stroke-width="1" />
</template>
<!-- quick_links：图标宫格 -->
<template v-else-if="type === 'quick_links'">
<circle cx="26" cy="16" r="9" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
<rect x="18" y="29" width="16" height="3" rx="1.5" :fill="C.text" />
<circle cx="60" cy="16" r="9" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
<rect x="52" y="29" width="16" height="3" rx="1.5" :fill="C.text" />
<circle cx="94" cy="16" r="9" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
<rect x="86" y="29" width="16" height="3" rx="1.5" :fill="C.text" />
<circle cx="26" cy="46" r="9" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
<rect x="18" y="59" width="16" height="3" rx="1.5" :fill="C.text" />
<circle cx="60" cy="46" r="9" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
<rect x="52" y="59" width="16" height="3" rx="1.5" :fill="C.text" />
<circle cx="94" cy="46" r="9" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
<rect x="86" y="59" width="16" height="3" rx="1.5" :fill="C.text" />
</template>
<!-- notice_bar：通栏提示条 -->
<template v-else-if="type === 'notice_bar'">
<rect x="0" y="22" width="120" height="20" :fill="C.band" />
<rect x="0" y="22" width="120" height="1" :fill="C.strong" />
<rect x="0" y="41" width="120" height="1" :fill="C.strong" />
<rect x="8" y="29" width="20" height="6" rx="2" :fill="C.accent" />
<rect x="34" y="31" width="70" height="3" rx="1.5" :fill="C.strong" />
</template>
<!-- D 系新组件（docs/20 D-1~D-9）：D 步上线时同步补绘 -->
<!-- D-1 stats_band：大数字横排 -->
<template v-else-if="type === 'stats_band'">
<rect x="0" y="10" width="120" height="44" :fill="C.band" />
<text x="24" y="34" font-size="13" font-weight="700" :fill="C.accent">3.2万</text>
<rect x="20" y="40" width="24" height="3" rx="1.5" :fill="C.text" />
<text x="60" y="34" font-size="13" font-weight="700" :fill="C.accent">2800</text>
<rect x="56" y="40" width="24" height="3" rx="1.5" :fill="C.text" />
<text x="94" y="34" font-size="13" font-weight="700" :fill="C.accent">12</text>
<rect x="90" y="40" width="24" height="3" rx="1.5" :fill="C.text" />
</template>
<!-- D-2 icon_nav：六边形图标阵 -->
<template v-else-if="type === 'icon_nav'">
<polygon points="26,6 38,13 38,27 26,34 14,27 14,13" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
<rect x="16" y="39" width="20" height="3" rx="1.5" :fill="C.text" />
<polygon points="60,6 72,13 72,27 60,34 48,27 48,13" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
<rect x="50" y="39" width="20" height="3" rx="1.5" :fill="C.text" />
<polygon points="94,6 106,13 106,27 94,34 82,27 82,13" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
<rect x="84" y="39" width="20" height="3" rx="1.5" :fill="C.text" />
<polygon points="26,46 38,53 38,67 26,74 14,67 14,53" transform="translate(0,-12)" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
<rect x="16" y="61" width="20" height="3" rx="1.5" :fill="C.text" />
<polygon points="60,46 72,53 72,67 60,74 48,67 48,53" transform="translate(0,-12)" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
<rect x="50" y="61" width="20" height="3" rx="1.5" :fill="C.text" />
<polygon points="94,46 106,53 106,67 94,74 82,67 82,53" transform="translate(0,-12)" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
<rect x="84" y="61" width="20" height="3" rx="1.5" :fill="C.text" />
</template>
<!-- D-3 featured_topics：专题大卡 -->
<template v-else-if="type === 'featured_topics'">
<rect x="6" y="8" width="52" height="48" rx="3" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="12" y="40" width="30" height="4" rx="2" fill="#ffffff" />
<rect x="12" y="48" width="18" height="4" rx="2" :fill="C.accent" />
<rect x="62" y="8" width="52" height="48" rx="3" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="68" y="40" width="30" height="4" rx="2" fill="#ffffff" />
<rect x="68" y="48" width="18" height="4" rx="2" :fill="C.accent" />
</template>
<!-- D-5 video_tour：视频封面 + 播放键 -->
<template v-else-if="type === 'video_tour'">
<rect x="6" y="8" width="108" height="48" rx="3" :fill="C.band" />
<circle cx="60" cy="32" r="12" fill="#ffffff" opacity="0.9" />
<polygon points="56,25 70,32 56,39" :fill="C.accent" />
</template>
<!-- D-6 events：大日期块 + 活动列表 -->
<template v-else-if="type === 'events'">
<rect x="6" y="8" width="26" height="26" rx="2" :fill="C.accent" />
<rect x="10" y="13" width="18" height="5" rx="1.5" fill="#ffffff" opacity="0.9" />
<rect x="38" y="12" width="50" height="4" rx="2" :fill="C.strong" />
<rect x="38" y="21" width="66" height="3" rx="1.5" :fill="C.text" />
<rect x="6" y="40" width="26" height="20" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="38" y="44" width="50" height="4" rx="2" :fill="C.strong" />
<rect x="38" y="53" width="66" height="3" rx="1.5" :fill="C.text" />
</template>
<!-- D-7 people：圆头像卡 -->
<template v-else-if="type === 'people'">
<circle cx="24" cy="24" r="14" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
<rect x="12" y="43" width="24" height="4" rx="2" :fill="C.strong" />
<rect x="14" y="51" width="20" height="3" rx="1.5" :fill="C.text" />
<circle cx="60" cy="24" r="14" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
<rect x="48" y="43" width="24" height="4" rx="2" :fill="C.strong" />
<rect x="50" y="51" width="20" height="3" rx="1.5" :fill="C.text" />
<circle cx="96" cy="24" r="14" :fill="C.block" :stroke="C.accent" stroke-width="1.2" />
<rect x="84" y="43" width="24" height="4" rx="2" :fill="C.strong" />
<rect x="86" y="51" width="20" height="3" rx="1.5" :fill="C.text" />
</template>
<!-- D-8 campus_wall：瀑布流（错落图） -->
<template v-else-if="type === 'campus_wall'">
<rect x="8" y="6" width="24" height="28" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="37" y="6" width="24" height="18" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="66" y="6" width="24" height="32" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="95" y="6" width="19" height="22" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="8" y="40" width="24" height="18" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="37" y="30" width="24" height="28" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="66" y="44" width="24" height="14" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
<rect x="95" y="34" width="19" height="24" rx="2" :fill="C.block" :stroke="C.strong" stroke-width="1" />
</template>
<!-- D-9 badges：徽章横排 -->
<template v-else-if="type === 'badges'">
<circle cx="26" cy="26" r="15" :fill="C.band" :stroke="C.accent" stroke-width="1.2" />
<rect x="18" y="46" width="16" height="3" rx="1.5" :fill="C.text" />
<circle cx="60" cy="26" r="15" :fill="C.band" :stroke="C.accent" stroke-width="1.2" />
<rect x="52" y="46" width="16" height="3" rx="1.5" :fill="C.text" />
<circle cx="94" cy="26" r="15" :fill="C.band" :stroke="C.accent" stroke-width="1.2" />
<rect x="86" y="46" width="16" height="3" rx="1.5" :fill="C.text" />
</template>
<!-- 兜底：区块头 + 行 -->
<template v-else>
<rect x="8" y="8" width="32" height="5" rx="2" :fill="C.strong" />
<rect x="8" y="22" width="104" height="3" rx="1.5" :fill="C.text" />
<rect x="8" y="32" width="96" height="3" rx="1.5" :fill="C.text" />
<rect x="8" y="42" width="100" height="3" rx="1.5" :fill="C.text" />
<rect x="8" y="52" width="88" height="3" rx="1.5" :fill="C.text" />
</template>
</svg>
</template>
<style scoped lang="scss">
.block-type-thumb {
display: block;
width: 100%;
height: 100%;
background: #fbfcfe;
border-radius: 4px;
}
</style>