From 01d91ddd4b946c89ddf888e945ed0c643615a48f Mon Sep 17 00:00:00 2001
From: chenxing <chenxing@bestsch.com>
Date: Tue, 29 Sep 2026 10:54:39 +0800
Subject: [PATCH] =?UTF-8?q?[CMS-REWORK]=20#3=20=E5=8C=BA=E5=9D=97=E5=BA=8F?=
 =?UTF-8?q?=E5=88=97=E5=8F=B3=E4=B8=8A=E8=A7=92=E5=BA=8F=E5=8F=B7=E5=BE=BD?=
 =?UTF-8?q?=E6=A0=87(=E5=90=AB=E9=9A=90=E8=97=8F=E4=B8=8D=E9=87=8D?=
 =?UTF-8?q?=E6=8E=92,=E4=B8=8E=E6=A0=A1=E9=AA=8C=E6=8A=A5=E9=94=99?=
 =?UTF-8?q?=E7=AC=ACN=E4=B8=AA=E5=AF=B9=E9=BD=90)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/__tests__/homeLayoutEditor.spec.ts        | 22 +++++++++++++++
 src/views/cms/homeLayout/HomeLayoutEditor.vue | 27 +++++++++++++++++++
 2 files changed, 49 insertions(+)

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"
                 >
+                    <!-- 返工 #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;