Cool Admin Vue 字典排序优化实践

在开发后台管理系统时，字典数据的管理和展示是一个常见需求。Cool Admin Vue 作为一个优秀的中后台前端解决方案，其字典管理功能在实际使用中可能会遇到一些需要优化的场景。

字典排序问题分析

在原始版本的 Cool Admin Vue 中，字典数据的排序功能存在一个潜在问题：当开发者期望对字典数据进行排序时，排序方向可能与预期效果相反。这主要是因为字典数据的获取和排序逻辑需要更精细的控制。

解决方案实现

通过对 dict.ts 文件中 get 方法的改造，我们实现了更灵活的字典排序控制。核心修改如下：

function get(name: string, sort?: 'desc' | 'asc') {
    return computed(() => (sort ? deepTree(data[name],sort) : data[name]) || []);
}

这个修改带来了几个重要改进：

1. 明确的排序方向参数：通过 'desc' 和 'asc' 两个明确的枚举值来控制排序方向
2. 可选排序功能：sort 参数为可选，保持了对未排序情况的兼容
3. 空值保护：使用 || [] 确保即使数据不存在也返回空数组而非 undefined

移动端视图优化

在移动端视图下，我们还发现了一个相关但独立的问题：页面名称显示会带上 ID 号，这影响了用户体验。通过对 route-nav.vue 组件的调整，我们优化了这一表现：

<!-- 原始代码 -->
{{ lastName }}

<!-- 修改后 -->
{{ lastItem.meta?.label || lastItem.name }}

同时更新了计算属性：

// 原始代码
const lastName = computed(() => last(list.value)?.name);

// 修改后
const lastItem = computed(() => last(list.value));

这一优化使得：

1. 优先显示路由元信息中的 label
2. 保持 name 作为后备显示值
3. 移除了不必要的 ID 显示

技术要点总结

1. 响应式设计：使用 computed 确保字典数据的响应式特性
2. 类型安全：通过 TypeScript 的类型系统明确排序方向参数
3. 防御性编程：对可能为空的数据进行保护性处理
4. 移动端适配：针对不同设备优化显示逻辑

这些改进使得 Cool Admin Vue 的字典管理功能更加健壮和易用，特别是在需要精确控制数据展示顺序的场景下，开发者能够获得更符合预期的结果。