用户三点修订:
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:
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user