From da14a1b45c252ade49bdc915c08fdebdc56d7243 Mon Sep 17 00:00:00 2001
From: weicw1996 <weicw1996@qq.com>
Date: Tue, 13 Oct 2026 20:00:37 +0800
Subject: [PATCH] =?UTF-8?q?fix(cms):=20=E5=88=86=E7=B1=BB=E6=A0=91?=
 =?UTF-8?q?=E9=98=B2=E7=8E=AF=E2=80=94=E2=80=94=E4=B8=8A=E7=BA=A7=E5=80=99?=
 =?UTF-8?q?=E9=80=89=E5=89=94=E9=99=A4=E8=87=AA=E8=BA=AB=E5=AD=90=E6=A0=91?=
 =?UTF-8?q?=EF=BC=8C=E5=88=97=E8=A1=A8=E8=B7=B3=E8=BF=87=E8=87=AA=E6=8C=87?=
 =?UTF-8?q?=E5=90=91=E8=84=8F=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

与后端 checkParentValid 配套的前端侧防御（分类是自关联结构，成环会让分类树整个渲染不出来）：

- category-edit：新增 parentOptions 计算属性，修改分类时把「自己及自己的整棵子树」
  从上级候选中剔除，避免在界面上就能选出环。
- index：parseData 先过滤掉 categoryId === parentId 的记录（toTreeData 遇到这类数据
  会直接 throw，拖垮整个列表），并把被跳过的分类 id 提示给用户，让其去库里修正。
---
 .../cms/category/components/category-edit.vue | 25 ++++++++++++++++---
 src/views/cms/category/index.vue              | 17 ++++++++++++-
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/views/cms/category/components/category-edit.vue b/src/views/cms/category/components/category-edit.vue
index 06b00a5..1a2444d 100644
--- a/src/views/cms/category/components/category-edit.vue
+++ b/src/views/cms/category/components/category-edit.vue
@@ -25,7 +25,7 @@
           <a-form-item label="上级分类" name="parentId">
             <a-tree-select
               allow-clear
-              :tree-data="categoryList"
+              :tree-data="parentOptions"
               tree-default-expand-all
               placeholder="请选择上级分类"
               :value="form.parentId || undefined"
@@ -84,13 +84,12 @@
           v-model:value="form.comments"
         />
       </a-form-item>
-
     </a-form>
   </ele-modal>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, watch } from 'vue';
+  import { ref, reactive, computed, watch } from 'vue';
   import { message } from 'ant-design-vue/es';
   import type { FormInstance, Rule } from 'ant-design-vue/es/form';
   import { storeToRefs } from 'pinia';
@@ -141,6 +140,26 @@
     sortNumber: 100
   });
 
+  /*
+   * 上级分类候选：修改时要把自己及自己的整棵子树剔除，
+   * 否则可以把上级选成自己或自己的下级，形成环导致分类树无法渲染。
+   */
+  const parentOptions = computed(() => {
+    const currentId = form.categoryId;
+    if (currentId == null) {
+      return props.categoryList ?? [];
+    }
+    const filterSelf = (list: ArticleCategory[]): ArticleCategory[] =>
+      (list ?? [])
+        .filter((d) => d.categoryId !== currentId)
+        .map((d) =>
+          d.children?.length
+            ? { ...d, children: filterSelf(d.children) }
+            : { ...d }
+        );
+    return filterSelf(props.categoryList);
+  });
+
   // 表单验证规则
   const rules = reactive<Record<string, Rule[]>>({
     title: [
diff --git a/src/views/cms/category/index.vue b/src/views/cms/category/index.vue
index 49094e0..6e0e877 100644
--- a/src/views/cms/category/index.vue
+++ b/src/views/cms/category/index.vue
@@ -195,8 +195,23 @@
 
   /* 数据转为树形结构 */
   const parseData = (data: ArticleCategory[]) => {
+    /*
+     * 防御性过滤：分类是自关联结构，如果库里存在「自己指向自己」的脏数据，
+     * toTreeData 会直接 throw，导致整个页面无法渲染（报 data error: {categoryId: x, parentId: x}）。
+     * 这里先剔除这类记录，只影响异常的那一行，不拖垮整个列表。
+     */
+    const validData = (data ?? []).filter((d) => d.categoryId !== d.parentId);
+    if (validData.length !== (data ?? []).length) {
+      const badIds = (data ?? [])
+        .filter((d) => d.categoryId === d.parentId)
+        .map((d) => d.categoryId)
+        .join('、');
+      message.error(
+        `分类 ${badIds} 的上级分类是它自己，已跳过显示，请在数据库中修正`
+      );
+    }
     return toTreeData({
-      data: data.map((d) => {
+      data: validData.map((d) => {
         return { ...d, key: d.categoryId, value: d.categoryId };
       }),
       idField: 'categoryId',