feat: 相近字排序
Build and Deploy Vue3 / build (push) Successful in 1m21s
Build and Deploy Vue3 / deploy (push) Successful in 56s

This commit is contained in:
2026-03-11 16:55:17 +08:00
parent 09a83f4985
commit 193db5735f
2 changed files with 79 additions and 52 deletions
+77 -51
View File
@@ -55,17 +55,15 @@
<el-icon v-else :class="{ 'is-expanded': row._expanded }"><ArrowRight /></el-icon>
</span>
<span v-else class="expand-placeholder"></span>
<el-icon class="tree-icon" v-if="row.type === 'group'">
<Folder />
</el-icon>
<el-icon class="tree-icon" v-else-if="row.type === 'setting'">
<Document />
</el-icon>
<span class="tree-label">{{ row.label }}</span>
<el-tag v-if="row.type === 'setting'" :type="getTypeColor(row.data.type)" size="small" class="type-tag">
{{ row.data.type }}
</el-tag>
<div class="tree-node">
<el-icon class="tree-icon" v-if="row.type === 'group'">
<Folder />
</el-icon>
<el-icon class="tree-icon" v-else-if="row.type === 'setting'">
<Document />
</el-icon>
<span class="tree-label">{{ row.label }}</span>
</div>
</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
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
}
await loadChildren(row)
}
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;