feat: 相近字排序

src/views/system/SettingManage.vue

@@ -55,17 +55,15 @@
                   <el-icon v-else :class="{ 'is-expanded': row._expanded }"><ArrowRight /></el-icon>
                 </span>
                 <span v-else class="expand-placeholder"></span>
-                
+                <div class="tree-node">
-                <el-icon class="tree-icon" v-if="row.type === 'group'">
+                  <el-icon class="tree-icon" v-if="row.type === 'group'">
-                  <Folder />
+                    <Folder />
-                </el-icon>
+                  </el-icon>
-                <el-icon class="tree-icon" v-else-if="row.type === 'setting'">
+                  <el-icon class="tree-icon" v-else-if="row.type === 'setting'">
-                  <Document />
+                    <Document />
-                </el-icon>
+                  </el-icon>
-                <span class="tree-label">{{ row.label }}</span>
+                  <span class="tree-label">{{ row.label }}</span>
-                <el-tag v-if="row.type === 'setting'" :type="getTypeColor(row.data.type)" size="small" class="type-tag">
+                </div>
-                  {{ row.data.type }}
-                </el-tag>
               </div>
             </template>
           </el-table-column>
@@ -757,6 +755,73 @@ const formatDate = (dateString) => {
 
 // ==================== 树状图方法 ====================
 
+// 相近字排序函数
+const sortBySimilarity = (settings) => {
+  if (!settings || settings.length <= 1) return settings
+  
+  // 提取所有配置项的名称
+  const names = settings.map(item => item.name || '')
+  
+  // 按名称排序，相近的名称会排在一起
+  return settings.sort((a, b) => {
+    const nameA = (a.name || '').toLowerCase()
+    const nameB = (b.name || '').toLowerCase()
+    
+    // 先按前缀分组排序
+    const prefixA = nameA.substring(0, 2)
+    const prefixB = nameB.substring(0, 2)
+    
+    if (prefixA !== prefixB) {
+      return prefixA.localeCompare(prefixB, 'zh-CN')
+    }
+    
+    // 前缀相同则按完整名称排序
+    return nameA.localeCompare(nameB, 'zh-CN')
+  })
+}
+
+// 加载配置项子节点
+const loadChildren = async (row) => {
+  if (!row || row.type !== 'group') return
+  
+  row._loading = true
+  try {
+    const groupId = row.data.id
+    console.log('Loading children for group:', groupId)
+    const res = await getSettingList({ group_id: groupId, page: 1, count: 100 })
+    console.log('getSettingList response:', res.data)
+    if (res.data.code === 200) {
+      let settings = res.data.data.data || []
+      console.log('settings loaded:', settings)
+      
+      // 应用相近字排序
+      settings = sortBySimilarity(settings)
+      console.log('settings after sorting:', settings)
+      
+      const settingNodes = settings.map(setting => ({
+        id: `setting_${setting.id}`,
+        label: setting.name,
+        type: 'setting',
+        data: setting,
+        level: row.level + 1,
+        hasChildren: false, // 配置项没有子节点
+        _expanded: false,
+        _children: [],
+        _loading: false
+      }))
+      console.log('settingNodes created:', settingNodes)
+      
+      row._children = settingNodes
+      console.log('updated row with children:', row)
+    }
+  } catch (error) {
+    console.error('加载配置列表失败:', error)
+    ElMessage.error('加载配置列表失败')
+  } finally {
+    row._loading = false
+  }
+}
+
 // 切换展开状态
 const toggleExpand = async (row) => {
   if (row._loading) return
@@ -767,37 +832,7 @@ const toggleExpand = async (row) => {
   } else {
     // 展开 - 如果还没加载子级，先加载
     if (row.type === 'group' && (!row._children || row._children.length === 0)) {
-      row._loading = true
+      await loadChildren(row)
-      try {
-        const groupId = row.data.id
-        console.log('Loading children for group:', groupId)
-        const res = await getSettingList({ group_id: groupId, page: 1, count: 100 })
-        console.log('getSettingList response:', res.data)
-        if (res.data.code === 200) {
-          const settings = res.data.data.data || []
-          console.log('settings loaded:', settings)
-          const settingNodes = settings.map(setting => ({
-            id: `setting_${setting.id}`,
-            label: setting.name,
-            type: 'setting',
-            data: setting,
-            level: row.level + 1,
-            hasChildren: false, // 配置项没有子节点
-            _expanded: false,
-            _children: [],
-            _loading: false
-          }))
-          console.log('settingNodes created:', settingNodes)
-          
-          row._children = settingNodes
-          console.log('updated row with children:', row)
-        }
-      } catch (error) {
-        console.error('加载配置列表失败:', error)
-        ElMessage.error('加载配置列表失败')
-      } finally {
-        row._loading = false
-      }
     }
     row._expanded = true
   }
@@ -2085,10 +2120,6 @@ onMounted(() => {
   flex: 1;
 }
 
-.type-tag {
-  margin-left: 8px;
-}
-
 /* 文件预览样式 */
 .file-preview {
   margin-top: 8px;
@@ -2357,11 +2388,6 @@ onMounted(() => {
     font-size: 14px;
   }
 
-  .type-tag {
-    margin-left: 4px;
-    font-size: 11px;
-  }
-
   :deep(.setting-tree-table .el-table th) {
     font-size: 12px;
     padding: 8px 4px;

问题.MD

@@ -1,8 +1,9 @@
 ✅已完成、⚠️部分完成、❌未完成这样显示
 -----------------------------------------------------------------------------------------------需要解决
 
-1.将配置组管理和配置管理放到一起，弄成树状图这种，顶级是配置组管理，点击配置组管理的下级是配置管理列表数据，需要将两个合作一个，看如何能融合以下
+1.管理员后台在配置管理展示的类型，有两行都是相同的，只需要展示一行 ✅已完成
 
+2.，需要做相近字排序，比如前缀都是轮播图的展示在一起这样方便后续修改理解意思，还有是运用在同一处地方的可以展示在一起 ✅已完成
 
 
 -----------------------------------------------------------------------------------------------需要解决