From ec696d51870cbe036be8c99689899fa042105577 Mon Sep 17 00:00:00 2001
From: chenxing <chenxing@bestsch.com>
Date: Thu, 8 Oct 2026 17:45:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(header):=20=E6=90=9C=E7=B4=A2=E6=A1=86?=
 =?UTF-8?q?=E6=94=B9=E5=B1=85=E4=B8=AD=E5=91=BD=E4=BB=A4=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=EF=BC=8C=E5=BA=94=E7=94=A8=E5=88=97=E8=A1=A8=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E4=B8=8E=20loading=20=E4=B8=8E=20AppList=20=E5=85=B1=E4=BA=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- header.scss: 删旧 .search-box 与 fade1/search-animation/icon-animation 动画段，
  新增 app-cmdk-* 面板样式。样式段必须放顶层——面板 Teleport 到 body，嵌进
  .default-header 会生成后代选择器而匹配不到
- Header.vue: 搜索 li 收敛为单图标 + openSearch；模板末尾追加 <Teleport to="body">
  命令面板，支持实时过滤 / ↑↓ 键盘导航 / Enter 打开 / Esc 关闭 / 空结果态；
  删 watch(isSearching) 与空函数 showSeachBox；挂/卸 window keydown
- store/index.ts: 新增 appListLoading 字段与 setAppListLoading
- utils/bschLinkPage.ts: 抽出 openAppPage(app, ifameAppIdArr)，与点击应用图标同一路径
- AppList.vue: reloadAppData 写 store（数据 + loading，try/finally）；
  linkPage(item) 委托 openAppPage

硬约束保持不动：watch(searchAppText) -> mittBus.emit("searchChange")（背景应用网格靠它过滤）、
isSearchIconShow（route.name === "apps"）。
---
 src/assets/styles/header.scss | 219 +++++++++++++++++++++-------------
 src/components/Header.vue     | 150 +++++++++++++++++++----
 src/store/index.ts            |   6 +
 src/utils/bschLinkPage.ts     |  15 +++
 src/views/AppList.vue         |  33 +++--
 5 files changed, 298 insertions(+), 125 deletions(-)

diff --git a/src/assets/styles/header.scss b/src/assets/styles/header.scss
index d432742..98f3eac 100644
--- a/src/assets/styles/header.scss
+++ b/src/assets/styles/header.scss
@@ -58,97 +58,148 @@
             height: 20px;
         }
 
-        .search-box {
-            height: 36px;
-            margin-right: 2px;
-            background: #fff;
-            border-radius: 34px;
-            display: flex;
-            overflow: hidden;
-            align-items: center;
-            justify-content: space-between;
-            user-select: none;
-            input {
-                flex: 1;
-                outline: none;
-                border: none;
-                margin-left: 15px;
-                width: 210px;
-            }
-            .icon {
-                margin: 0 8px;
-                // animation: icon-turn 0.3s linear;
-            }
-        }
+    }
+}
 
-        @keyframes fade-animation {
-            0% {
-                display: none;
-            }
+/* ===== Header 搜索命令面板（2026-10-08 定稿 B 方案）=====
+   ⚠️ 必须放在顶层（不可嵌进 .default-header 内）：面板由 <Teleport to="body"> 渲染到 body 下，
+   若嵌在 .default-header 内会生成 `.default-header .app-cmdk-layer`，匹配不到 body 下的元素。
+   类名统一 app-cmdk- 前缀（本文件是全局样式，非 scoped）。 */
+.app-cmdk-layer {
+    position: fixed;
+    inset: 0;
+    z-index: 2000;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s linear;
 
-            75% {
-                display: none;
-            }
-            100% {
-                display: flex;
-            }
-        }
-        .fade1-enter-active,
-        .fade1-enter-to {
-            animation: fade-animation 0.5s;
-        }
+    &.is-open {
+        opacity: 1;
+        pointer-events: auto;
+    }
+}
+.app-cmdk-mask {
+    position: absolute;
+    inset: 0;
+    background: rgba(18, 26, 40, 0.34);
+    backdrop-filter: blur(10px) saturate(125%);
+    -webkit-backdrop-filter: blur(10px) saturate(125%);
+}
+.app-cmdk-panel {
+    position: absolute;
+    left: 50%;
+    top: 78px;
+    width: min(620px, calc(100% - 48px));
+    background: #fff;
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 26px 68px rgba(18, 30, 54, 0.3), 0 2px 8px rgba(18, 30, 54, 0.1);
+    opacity: 0;
+    transform: translate(-50%, -14px) scale(0.965);
+    transition: opacity 0.26s linear, transform 0.48s cubic-bezier(0.2, 0.9, 0.24, 1);
 
-        .fade1-leave-from,
-        .fade1-leave-active {
-            display: none !important;
-        }
+    .app-cmdk-layer.is-open & {
+        opacity: 1;
+        transform: translate(-50%, 0) scale(1);
+    }
+}
+.app-cmdk-hd {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0 18px;
+    height: 56px;
+    border-bottom: 1px solid #f0f3f8;
+    color: #98a2b0;
 
-        @keyframes search-animation {
-            0% {
-                display: none;
-                width: 0;
-            }
-            20% {
-                display: none;
-                width: 0;
-            }
-            21% {
-                width: 0;
-                display: block;
-            }
-            100% {
-                width: 210px;
-            }
-        }
-
-        @keyframes icon-animation {
-            0% {
-                transform: rotate(0deg);
-            }
-            100% {
-                transform: rotate(360deg);
-            }
-        }
-
-        .search-enter-active {
-            & input {
-                animation: search-animation 0.3s ease-in-out;
-            }
-            & .icon {
-                animation: icon-animation 0.4s;
-            }
-        }
-
-        .search-leave-active {
-            & input {
-                animation: search-animation 0.35s ease-out reverse;
-            }
-            & .icon {
-                animation: icon-animation 0.4s reverse;
-            }
+    input {
+        flex: 1;
+        min-width: 0;
+        outline: none;
+        border: 0;
+        color: #252b35;
+        font-size: 15px;
+        background: none;
+        &::placeholder {
+            color: #aab3c0;
         }
     }
 }
+.app-cmdk-kbd {
+    font-size: 11px;
+    color: #8b95a3;
+    background: #f2f5fa;
+    border: 1px solid #e4e9f2;
+    border-radius: 5px;
+    padding: 2px 6px;
+    font-family: ui-monospace, Menlo, monospace;
+}
+.app-cmdk-list {
+    padding: 8px;
+    max-height: min(58vh, 440px);
+    overflow: auto;
+}
+.app-cmdk-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 9px 12px;
+    border-radius: 10px;
+    cursor: pointer;
+    opacity: 0;
+    transform: translateY(9px);
+    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), background 0.16s;
+
+    .app-cmdk-layer.is-open & {
+        opacity: 1;
+        transform: none;
+        transition-delay: calc(0.14s + var(--i) * 0.035s), calc(0.14s + var(--i) * 0.035s), 0s;
+    }
+    &.is-hl,
+    &:hover {
+        background: #f3f6fc;
+    }
+}
+.app-cmdk-list.is-instant .app-cmdk-item {
+    transition-duration: 0.15s;
+    transition-delay: 0s;
+}
+.app-cmdk-img {
+    width: 34px;
+    height: 34px;
+    border-radius: 9px;
+    flex-shrink: 0;
+}
+.app-cmdk-name {
+    flex: 1;
+    min-width: 0;
+    font-size: 13.5px;
+    color: #252b35;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.app-cmdk-empty {
+    display: none;
+    padding: 28px 18px 32px;
+    text-align: center;
+    color: #a8b1be;
+    font-size: 13px;
+    &.is-show {
+        display: block;
+    }
+}
+.app-cmdk-ft {
+    display: flex;
+    gap: 16px;
+    padding: 10px 18px;
+    border-top: 1px solid #f0f3f8;
+    font-size: 11.5px;
+    color: #98a2b0;
+    background: #fbfcfe;
+}
 
 .role-info {
     height: 22px;
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 46156db..a95c48e 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -8,17 +8,9 @@
                 </div>
             </li>
             <li v-if="isSearchIconShow">
-                <Transition name="fade1" :duration="{ enter: 1000, leave: 0 }">
-                    <div v-show="!isSearching" @click="isSearching = true" class="icon-box" v-wave>
-                        <SvgIcon name="header-1" color="#333333" />
-                    </div>
-                </Transition>
-                <Transition name="search" :duration="{ enter: 300, leave: 300 }">
-                    <div v-show="isSearching" class="search-box">
-                        <input ref="refSearchInput" v-model="searchAppText" type="text" placeholder="请输入应用名称搜索" />
-                        <SvgIcon @click="isSearching = false" class="icon" name="header-1" size="20" color="#c4c4c4" />
-                    </div>
-                </Transition>
+                <div class="icon-box" v-wave @click="openSearch">
+                    <SvgIcon name="header-1" color="#333333" />
+                </div>
             </li>
             <!-- 人像图标 =唯一入口（2026-10-08整合）：铃铛与齿轮两枚图标下线，
                  消息中心仍走左侧菜单 /msg（LeftMenu 保留未读角标）；
@@ -180,13 +172,60 @@
 
     <StatsBarModal ref="refStatsBarModal" />
     <TeacherCopilotModal ref="refTeacherCopilotModal" />
+
+    <!-- 搜索命令面板（2026-10-08 定稿 B 方案）：必须 Teleport 到 body ——
+         .default-header 有 position:relative + z-index:10，会创建层叠上下文，
+         面板写在 Header 内部时无论 z-index 多高，对外只表现为 10，会被左侧菜单与内容区盖住 -->
+    <Teleport to="body">
+        <div class="app-cmdk-layer" :class="{ 'is-open': isSearching }">
+            <div class="app-cmdk-mask" @click="closeSearch"></div>
+            <div class="app-cmdk-panel">
+                <div class="app-cmdk-hd">
+                    <SvgIcon name="header-1" size="19" color="#98a2b0" />
+                    <input
+                        ref="refSearchInput"
+                        v-model="searchAppText"
+                        type="text"
+                        placeholder="输入应用名以搜索"
+                        autocomplete="off"
+                    />
+                    <span class="app-cmdk-kbd">Esc</span>
+                </div>
+                <div class="app-cmdk-list" :class="{ 'is-instant': !cmdkStagger }" ref="refCmdkList">
+                    <div
+                        v-for="(item, i) in cmdkResult"
+                        :key="item.id ?? i"
+                        class="app-cmdk-item"
+                        :class="{ 'is-hl': i === cmdkIndex }"
+                        :style="{ '--i': i }"
+                        @click="pickApp(item)"
+                    >
+                        <AppIcon
+                            v-if="vectorIconOf(item)"
+                            :name="vectorIconOf(item)"
+                            scene="tile"
+                            :tint="item.iconColor"
+                        />
+                        <img v-else :src="$utils.appIconPath(item.icon)" class="app-cmdk-img" alt="" />
+                        <span class="app-cmdk-name">{{ item.name }}</span>
+                    </div>
+                </div>
+                <div class="app-cmdk-empty" :class="{ 'is-show': !cmdkResult.length }">
+                    {{ store.appListLoading ? "正在加载应用…" : "未找到匹配的应用" }}
+                </div>
+                <div class="app-cmdk-ft">
+                    <span>↑↓ 选择</span><span>↵ 打开</span><span>Esc 关闭</span>
+                </div>
+            </div>
+        </div>
+    </Teleport>
 </template>
 
 <script lang="ts" setup>
 import useCurrentInstance from "@/utils/hook/useCurrentInstance";
 import SvgIcon from "@/components/SvgIcon.vue";
 import vuescroll from "vuescroll";
-import { ref, reactive, computed, onMounted, onUnmounted, inject, watch } from "vue";
+import { ref, reactive, computed, onMounted, onUnmounted, inject, watch, nextTick } from "vue";
 import { useDefaultStore } from "@/store";
 import { useRoute, useRouter } from "vue-router";
 import { requireImg } from "@/utils/hook/useImg";
@@ -202,6 +241,9 @@ import UserSettingApi from "@/api/UserSettingApi";
 import mittBus from "@/utils/mitt";
 import MenuBarApi from "@/api/MenuBarApi";
 import Utils from "@/utils";
+import AppIcon from "@/components/AppIcon.vue";
+import { appiconKeyOf } from "@/constants/appIconRules";
+import { openAppPage } from "@/utils/bschLinkPage";
 
 const route = useRoute();
 const router = useRouter();
@@ -360,22 +402,88 @@ onMounted(async () => {
         isSearching.value = false;
         searchAppText.value = null;
     });
+    window.addEventListener("keydown", onCmdkKeydown);
 });
 onUnmounted(() => {
     mittBus.off("searchReset");
+    window.removeEventListener("keydown", onCmdkKeydown);
     closeMsgWs();
 });
-watch(isSearching, val => {
-    if (val) {
-        setTimeout(() => refSearchInput.value?.focus(), 300);
-    } else {
-        // searchAppText.value = null;
-    }
-});
-
 watch(searchAppText, val => {
+    cmdkStagger.value = false; // 输入过滤时不重播逐条入场
     mittBus.emit("searchChange", val);
 });
+// ===== 搜索命令面板（2026-10-08 定稿 B 方案）=====
+const refCmdkList = ref<any>();
+const cmdkIndex = ref(0);
+const cmdkStagger = ref(true); // 仅首次打开做逐条入场，输入过滤时不重播
+
+/** 与 AppList.vue / index.vue / SearchPanel.vue 同口径的矢量渲染回退链 */
+function vectorIconOf(item: any): string {
+    if (item?.iconKey) return item.iconKey;
+    if (item?.icon) return "";
+    return appiconKeyOf(item?.name || "");
+}
+
+/** 结果取自 store（由 AppList.reloadAppData 写入），与背景应用网格同源同口径 */
+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);
+});
+
+function openSearch() {
+    cmdkStagger.value = true;
+    cmdkIndex.value = 0;
+    searchAppText.value = null;
+    isSearching.value = true;
+    nextTick(() => refSearchInput.value?.focus());
+}
+
+function closeSearch() {
+    isSearching.value = false;
+    searchAppText.value = null;
+}
+
+function moveHighlight(step: number) {
+    const len = cmdkResult.value.length;
+    if (!len) return;
+    cmdkIndex.value = (cmdkIndex.value + step + len) % len;
+    nextTick(() => {
+        const el = refCmdkList.value?.children?.[cmdkIndex.value];
+        el?.scrollIntoView({ block: "nearest" });
+    });
+}
+
+function pickApp(item: any) {
+    closeSearch();
+    openAppPage(item, $conf.ifameAppIdArr); // 与点击应用图标同一条路径
+}
+
+function onCmdkKeydown(ev: KeyboardEvent) {
+    if (!isSearching.value) return; // 面板未开：绝不拦截全局按键
+    if (ev.key === "Escape") {
+        closeSearch();
+        return;
+    }
+    if (ev.key === "ArrowDown") {
+        ev.preventDefault();
+        moveHighlight(1);
+        return;
+    }
+    if (ev.key === "ArrowUp") {
+        ev.preventDefault();
+        moveHighlight(-1);
+        return;
+    }
+    if (ev.key === "Enter") {
+        ev.preventDefault();
+        const it = cmdkResult.value[cmdkIndex.value];
+        if (it) pickApp(it);
+    }
+}
+
 function getIsCheckRoles(item: RoleInfo) {
     return isEqual(item, store.curRoleInfo);
 }
@@ -487,8 +595,6 @@ async function linkLogoSetting() {
     isLogoShow.value = true;
 }
 
-function showSeachBox() { }
-
 /** 卡片菜单：个人信息 → 设置中心 profile pane（与通知端/用户中心同一地址）。
  *  注意：mittBus 的 showUserInfoModal 事件仍由 AppHeader/BschIframe 使用，此处不再触发 */
 function showUserInfo() {
diff --git a/src/store/index.ts b/src/store/index.ts
index 1c1f9e9..1906272 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -12,6 +12,8 @@ export interface IdefaultStore {
     curUserSettingInfo: UserSettingInfo;
     curUserMenuList: Array<any>; //当前角色菜单
     curUserAppList: Array<any>; //当前角色所有应用
+    /** 应用列表加载态（AppList 拉取时写入，Header 命令面板共享同一状态；2026-10-08） */
+    appListLoading: boolean;
     curRoleUid: string | null; //当前角色uid
     /** 未读消息数（msgCenter/summary 拉取 + WS newMessage 实时累加；Header 角标与 /msg 页左栏同源） */
     unreadCount: number;
@@ -53,6 +55,7 @@ export const useDefaultStore = defineStore("defaultStore", {
             curUserMenuList: [],
             curRoleUid: null,
             unreadCount: 0,
+            appListLoading: false,
         };
     },
     actions: {
@@ -74,6 +77,9 @@ export const useDefaultStore = defineStore("defaultStore", {
         setCurUserAppList(apps: any[]) {
             this.curUserAppList = apps;
         },
+        setAppListLoading(v: boolean) {
+            this.appListLoading = v;
+        },
         setCurUserMenuList(menus: any[]) {
             this.curUserMenuList = menus;
         },
diff --git a/src/utils/bschLinkPage.ts b/src/utils/bschLinkPage.ts
index 57cf77a..00a6e53 100644
--- a/src/utils/bschLinkPage.ts
+++ b/src/utils/bschLinkPage.ts
@@ -36,6 +36,21 @@ export function bschLinkPage(options: LinkPageOptions) {
     }
 }
 
+/** 打开应用页面（与 AppList.vue 点击应用图标同一条路径）：
+ *  默认新窗口打开；命中 iframe 白名单（$conf.ifameAppIdArr）则走站内 iframe（带 Header）。 */
+export function openAppPage(app: any, ifameAppIdArr: number[] = []) {
+    const options: LinkPageOptions = {
+        url: app.webAddr,
+        type: LinkOpenTypeEnum.Open,
+        title: app.name,
+    };
+    if (ifameAppIdArr.includes(app.id)) {
+        options.type = LinkOpenTypeEnum.IFrame;
+        options.isHeader = true;
+    }
+    bschLinkPage(options);
+}
+
 export function isTickeRoterByName(name: string) {
     return ["BschAppDetails", "AppDetails"].includes(name);
 }
diff --git a/src/views/AppList.vue b/src/views/AppList.vue
index 331d0de..5f30b01 100644
--- a/src/views/AppList.vue
+++ b/src/views/AppList.vue
@@ -29,7 +29,7 @@
                                 },
                             ]"
                         >
-                            <a @click="linkPage(citem.webAddr, citem)">
+                            <a @click="linkPage(citem)">
                                 <AppIcon v-if="vectorIconOf(citem)" :name="vectorIconOf(citem)" scene="tile"
                                     :tint="citem.iconColor" />
                                 <img v-else :src="$utils.appIconPath(citem.icon)" />
@@ -61,7 +61,7 @@
                                 },
                             ]"
                         >
-                            <a @click="linkPage(item.webAddr, item)">
+                            <a @click="linkPage(item)">
                                 <AppIcon v-if="vectorIconOf(item)" :name="vectorIconOf(item)" scene="tile"
                                     :tint="item.iconColor" />
                                 <img v-else :src="requireImg('defappicon.png')"
@@ -93,7 +93,7 @@ import { BschLoadTypeEnum, DesktopAppTypeEnum, LinkOpenTypeEnum } from "@/types"
 import { flatten } from "lodash";
 import UserSettingApi from "@/api/UserSettingApi";
 import { Message } from "view-ui-plus";
-import { bschLinkPage } from "@/utils/bschLinkPage";
+import { bschLinkPage, openAppPage } from "@/utils/bschLinkPage";
 import useCurrentInstance from "@/utils/hook/useCurrentInstance";
 import { appiconKeyOf } from "@/constants/appIconRules";
 
@@ -149,8 +149,15 @@ onUnmounted(() => {
 watch(() => store.curRoleUid, reloadAppData);
 
 async function reloadAppData() {
-    const list = await BaseApi.getUserApp(store.getCurUserId, store.getCurSchId);
-    appList.value = list.filter(x => x.apps.length > 0);
+    store.setAppListLoading(true);
+    try {
+        const list = await BaseApi.getUserApp(store.getCurUserId, store.getCurSchId);
+        appList.value = list.filter(x => x.apps.length > 0);
+        // 写 store：Header 搜索命令面板与后台 WS 通知的应用名反查共用这一份（2026-10-08）
+        store.setCurUserAppList(appList.value);
+    } finally {
+        store.setAppListLoading(false);
+    }
 }
 
 function onMenuChange(curDom: any, state: boolean) {
@@ -185,20 +192,8 @@ async function onLightAppSaveDesktop(id: number) {
     }
 }
 
-function linkPage(url: string, item: any) {
-    let options: Parameters<typeof bschLinkPage>[0];
-    options = {
-        url,
-        type: LinkOpenTypeEnum.Open,
-        title: item.name,
-    };
-
-    if ($conf.ifameAppIdArr.includes(item.id)) {
-        options.type = LinkOpenTypeEnum.IFrame;
-        options.isHeader = true;
-    }
-
-    bschLinkPage(options);
+function linkPage(item: any) {
+    openAppPage(item, $conf.ifameAppIdArr);
 }
 </script>