refactor(header): 命令面板去背景联动,结果右侧标注应用类型
build / build (push) Successful in 1m21s

用户三点修订:
1. 面板已是模态框,去掉背景应用列表的同步过滤(解开 mittBus.searchChange 整条链)
2. 结果右侧灰色小字显示应用类型(来源 BoaAppType.name,与 /apps 分组标题同源)
3. 类型呈现暂按方案 A(右侧灰字);方案 B(类型分组)对照稿见 design/07

- Header.vue: watch(searchAppText) 不再 emit("searchChange");cmdkResult 由
  getFlattenAppList(纯 flatten,会丢类型名)改为遍历 curUserAppList 分组展开并挂
  appTypeName;模板加 .app-cmdk-type
- AppList.vue: 删 searchAppText / searchAppList / isSearch 与模板搜索态分支、
  .no-search-box 样式、孤儿导入 flatten(lodash) 与 requireImg;删 mittBus 监听
- utils/mitt.ts: 删 searchChange 事件类型
- assets/styles/header.scss: 加 .app-cmdk-type 样式
- harness-main.ts: mock curUserAppList 补齐 BoaAppType 分组结构(id + name),
  原 mock 丢了 name 导致类型名取不到

注:本仓工作区另有并行会话 WIP(StatsBarModal 迁入 Settings / 主题预览),
本提交只含本案 5 个文件与 hunks,未触碰对方改动。
This commit is contained in:
chenxing
2026-10-08 19:10:14 +08:00
parent 4f36ff9ceb
commit 2bd7ef3b80
5 changed files with 34 additions and 66 deletions
+17 -6
View File
@@ -208,6 +208,7 @@
/>
<img v-else :src="$utils.appIconPath(item.icon)" class="app-cmdk-img" alt="" />
<span class="app-cmdk-name">{{ item.name }}</span>
<span class="app-cmdk-type" v-if="item.appTypeName">{{ item.appTypeName }}</span>
</div>
</div>
<div class="app-cmdk-empty" :class="{ 'is-show': !cmdkResult.length }">
@@ -409,9 +410,10 @@ onUnmounted(() => {
window.removeEventListener("keydown", onCmdkKeydown);
closeMsgWs();
});
watch(searchAppText, val => {
// 面板已是模态框,输入只驱动面板自身过滤;
// 不再 emit("searchChange") —— 背景应用网格保持原样(2026-10-08 用户修订 1)
watch(searchAppText, () => {
cmdkStagger.value = false; // 输入过滤时不重播逐条入场
mittBus.emit("searchChange", val);
});
// ===== 搜索命令面板(2026-10-08 定稿 B 方案)=====
const refCmdkList = ref<any>();
@@ -425,12 +427,21 @@ function vectorIconOf(item: any): string {
return appiconKeyOf(item?.name || "");
}
/** 结果取自 store(由 AppList.reloadAppData 写入),与背景应用网格同源同口径 */
/** 结果取自 store.curUserAppList(写入方 = AppList.reloadAppData)。
* 它是 BoaAppType 分组结构 [{ id, name, apps }],name 就是应用类型名;
* 展开时把类型名挂到每条上供右侧灰字展示。
* 注意别用 store.getFlattenAppList —— 它是纯 flatten,会把类型名丢掉 */
const cmdkResult = computed(() => {
const all = store.getFlattenAppList;
const q = (searchAppText.value || "").trim();
if (!q) return all;
return all.filter((x: any) => x.name.indexOf(q) !== -1);
const out: any[] = [];
(store.curUserAppList || []).forEach((group: any) => {
(group.apps || []).forEach((app: any) => {
if (!q || (app.name || "").indexOf(q) !== -1) {
out.push({ ...app, appTypeName: group.name });
}
});
});
return out;
});
function openSearch() {