diff --git a/src/__tests__/homeLayoutEditor.spec.ts b/src/__tests__/homeLayoutEditor.spec.ts
index 4e89389..5256cfc 100644
--- a/src/__tests__/homeLayoutEditor.spec.ts
+++ b/src/__tests__/homeLayoutEditor.spec.ts
@@ -288,6 +288,28 @@ describe("HomeLayoutEditor - 栏目树加载与首用编排解耦(docs/20 返
});
});
+describe("HomeLayoutEditor - 区块序列序号徽标(docs/20 返工 #3)", () => {
+ it("每行右上角显示连续序号(1 起始、含隐藏区块不重排),与校验报错「第 N 个区块」对齐", async () => {
+ const config = JSON.stringify({
+ home_layout: {
+ version: 1,
+ blocks: [
+ { id: "a1", type: "article_list", categoryIds: [11], style: "card", size: 8 },
+ { id: "n1", type: "notice_bar", text: "公告", visible: false },
+ { id: "g1", type: "gallery" },
+ ],
+ },
+ });
+ const { el } = await mountEditor(config);
+ const nos = Array.from(el.querySelectorAll(".hle-row-no")).map(n => n.textContent!.trim());
+ expect(nos).toEqual(["1", "2", "3"]);
+ // 隐藏区块(第 2 行)保留序号、行整体置灰,编号不重排
+ const rows = Array.from(el.querySelectorAll(".hle-row"));
+ expect(rows[1].className).toContain("hidden");
+ expect(rows[1].querySelector(".hle-row-no")!.textContent!.trim()).toBe("2");
+ });
+});
+
describe("HomeLayoutEditor - D 组件属性面板(docs/20 D-1/D-8)", () => {
it("stats_band:统计项三列编辑器(名称/数值/单位)渲染并可增行", async () => {
const config = JSON.stringify({
diff --git a/src/views/cms/homeLayout/HomeLayoutEditor.vue b/src/views/cms/homeLayout/HomeLayoutEditor.vue
index eed1ed2..1fe1206 100644
--- a/src/views/cms/homeLayout/HomeLayoutEditor.vue
+++ b/src/views/cms/homeLayout/HomeLayoutEditor.vue
@@ -385,6 +385,9 @@ defineExpose({ validate, refreshAfterSave });
:class="{ active: b.id === selectedId, hidden: !b.visible }"
@click="selectedId = b.id"
>
+
+ {{ i + 1 }}
@@ -656,6 +659,8 @@ defineExpose({ validate, refreshAfterSave });
gap: 8px;
max-height: 640px;
overflow: auto;
+ // 首行序号徽标悬浮在行框上沿(-7px),留出顶部空间防裁剪
+ padding-top: 8px;
}
.hle-row {
position: relative;
@@ -671,6 +676,28 @@ defineExpose({ validate, refreshAfterSave });
&.hidden {
opacity: 0.55;
}
+ // 返工 #3:右上角序号徽标(悬浮于行框上沿,不与 ops 按钮带重叠)
+ .hle-row-no {
+ position: absolute;
+ top: -7px;
+ right: 6px;
+ min-width: 16px;
+ height: 15px;
+ line-height: 13px;
+ padding: 0 4px;
+ border-radius: 8px;
+ background: #e8f3ff;
+ border: 1px solid #9cc7f5;
+ color: #2d8cf0;
+ font-size: 11px;
+ font-weight: 600;
+ text-align: center;
+ }
+ &.hidden .hle-row-no {
+ background: #f5f5f5;
+ border-color: #dcdfe6;
+ color: #a8abb2;
+ }
.hle-row-vis {
position: absolute;
left: 5px;