[CMS-REWORK] #3 区块序列右上角序号徽标(含隐藏不重排,与校验报错第N个对齐)

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({

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"
                 >
+                    <!-- 返工 #3：序号徽标按数组位置编号（含隐藏区块，不重排），与 validateHomeLayout
+                         的「第 ${i+1} 个区块」报错口径一一对应 -->
+                    <span class="hle-row-no">{{ i + 1 }}</span>
                     <span class="hle-row-vis" :class="`vis-${b.type}${b.type === 'article_list' ? '-' + (b.style || 'card') : ''}`"></span>
                     <span class="hle-row-main">
                         <Icon :type="blockDefOf(b.type)?.icon || 'md-square'" class="hle-row-icon" />
@@ -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;