From 9ed5420381eb9e0f83149ef048d9f650116c5d87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=91=A3=E5=AE=8F=E5=87=AF?= <hkdong@kland.com.cn>
Date: Mon, 15 Jun 2026 22:33:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(light-app):=20=E5=BA=94=E7=94=A8=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E5=8A=A0=E7=B1=BB=E5=9E=8B=E5=88=86=E7=B1=BB?=
 =?UTF-8?q?=E7=AD=9B=E9=80=89=20+=20=E4=BF=AE=E5=A4=8D=E6=B7=B1=E8=89=B2?=
 =?UTF-8?q?=E9=A1=B6=E6=A0=8F=E6=A0=87=E9=A2=98=E9=AB=98=E5=88=86=E5=B1=8F?=
 =?UTF-8?q?=E5=86=85=E8=BE=B9=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 应用管理工具栏新增「全部/新页跳转/iframe嵌套」分类切换，选中 iframe
  嵌套时出现挂载菜单下拉，可按 mountLocation 进一步筛选（深色/浅蓝主题适配）
- 深色顶栏 .header-center-title 内边距由固定 155px 改为 8.07vw，随视口
  等比缩放以匹配 background cover，修复 4K 等高分屏两侧菜单贴近中间的问题

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/pages/LightAppManagementPage.tsx      | 56 ++++++++++++++++++-
 .../src/pages/light-app-management.css        | 15 +++--
 frontend-web/src/styles/globals.css           |  5 +-
 3 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/frontend-web/src/pages/LightAppManagementPage.tsx b/frontend-web/src/pages/LightAppManagementPage.tsx
index b613735a..2e28b2c0 100644
--- a/frontend-web/src/pages/LightAppManagementPage.tsx
+++ b/frontend-web/src/pages/LightAppManagementPage.tsx
@@ -133,6 +133,8 @@ export default function LightAppManagementPage() {
   const [form, setForm] = useState<FormState>(emptyForm);
   const [activeParamPopover, setActiveParamPopover] = useState<string | null>(null);
   const [viewMode, setViewMode] = useState<"table" | "cards">("table");
+  const [categoryFilter, setCategoryFilter] = useState<"all" | LightAppType>("all");
+  const [mountFilter, setMountFilter] = useState<string>("");
 
   const saving = actions.create.isPending || actions.update.isPending;
 
@@ -220,7 +222,22 @@ export default function LightAppManagementPage() {
     toast.success("已复制地址");
   };
 
-  const tableApps = useMemo(() => apps, [apps]);
+  const selectCategory = (cat: "all" | LightAppType) => {
+    setCategoryFilter(cat);
+    if (cat !== "iframe") setMountFilter("");
+  };
+
+  const tableApps = useMemo(
+    () =>
+      apps.filter((app) => {
+        if (categoryFilter !== "all" && app.appType !== categoryFilter) return false;
+        if (categoryFilter === "iframe" && mountFilter && app.mountLocation !== mountFilter) {
+          return false;
+        }
+        return true;
+      }),
+    [apps, categoryFilter, mountFilter],
+  );
 
   return (
     <div className="light-app-management-page h-full overflow-y-auto bg-neutral-50 dark:bg-[#0C1836] dark:text-[#C5CFE0]">
@@ -252,7 +269,7 @@ export default function LightAppManagementPage() {
           </button>
         </div>
 
-        <div className="lam-toolbar flex flex-col items-center gap-3.5 rounded-[5px] bg-white p-3 shadow-[0_1px_3px_rgba(0,0,0,0.01)] md:flex-row">
+        <div className="lam-toolbar flex flex-col items-center gap-3.5 rounded-[5px] bg-white p-3 shadow-[0_1px_3px_rgba(0,0,0,0.01)] md:flex-row md:flex-wrap">
           <div className="relative w-full flex-1">
             <Search className="absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-neutral-400" />
             <input
@@ -272,6 +289,41 @@ export default function LightAppManagementPage() {
             )}
           </div>
 
+          <div className="lam-cat-toggle flex shrink-0 items-center space-x-0.5 self-end rounded-[5px] border border-neutral-200/50 bg-neutral-100/60 p-0.5 md:self-auto">
+            {(
+              [
+                { value: "all", label: "全部" },
+                { value: "window_open", label: "新页跳转" },
+                { value: "iframe", label: "iframe 嵌套" },
+              ] as const
+            ).map((c) => (
+              <button
+                key={c.value}
+                onClick={() => selectCategory(c.value)}
+                className={`lam-cat-toggle-btn cursor-pointer rounded-[5px] px-4 py-1.5 text-xs font-bold transition-all ${
+                  categoryFilter === c.value
+                    ? "is-active bg-white text-[#F5222D] shadow-sm"
+                    : "text-neutral-500 hover:text-neutral-700"
+                }`}
+              >
+                {c.label}
+              </button>
+            ))}
+          </div>
+
+          {categoryFilter === "iframe" && (
+            <div className="lam-mount-filter w-full shrink-0 animate-in fade-in self-end md:w-[180px] md:self-auto">
+              <Select
+                className="w-full"
+                value={mountFilter || undefined}
+                placeholder="按挂载菜单筛选"
+                clearable
+                options={MOUNT_OPTIONS}
+                onChange={(v) => setMountFilter((v as string) ?? "")}
+              />
+            </div>
+          )}
+
           <div className="lam-view-toggle flex shrink-0 items-center space-x-0.5 self-end rounded-[5px] border border-neutral-200/50 bg-neutral-100/60 p-0.5 md:self-auto">
             <button
               onClick={() => setViewMode("table")}
diff --git a/frontend-web/src/pages/light-app-management.css b/frontend-web/src/pages/light-app-management.css
index 18a97f05..8f0fa408 100644
--- a/frontend-web/src/pages/light-app-management.css
+++ b/frontend-web/src/pages/light-app-management.css
@@ -65,22 +65,26 @@
   outline: none;
 }
 
-.dark .light-app-management-page .lam-view-toggle {
+.dark .light-app-management-page .lam-view-toggle,
+.dark .light-app-management-page .lam-cat-toggle {
   background: var(--color-bg-page);
   border-color: var(--color-border);
 }
 
-.dark .light-app-management-page .lam-view-toggle-btn.is-active {
+.dark .light-app-management-page .lam-view-toggle-btn.is-active,
+.dark .light-app-management-page .lam-cat-toggle-btn.is-active {
   background: var(--color-bg-card);
   color: var(--color-link);
   box-shadow: var(--shadow-1);
 }
 
-.dark .light-app-management-page .lam-view-toggle-btn:not(.is-active) {
+.dark .light-app-management-page .lam-view-toggle-btn:not(.is-active),
+.dark .light-app-management-page .lam-cat-toggle-btn:not(.is-active) {
   color: var(--color-text-secondary);
 }
 
-.dark .light-app-management-page .lam-view-toggle-btn:not(.is-active):hover {
+.dark .light-app-management-page .lam-view-toggle-btn:not(.is-active):hover,
+.dark .light-app-management-page .lam-cat-toggle-btn:not(.is-active):hover {
   color: var(--color-text);
 }
 
@@ -592,7 +596,8 @@
 }
 
 /* ── 视图切换激活态 ──────────────────────────────────────────────────── */
-[data-theme="lightblue"] .light-app-management-page .lam-view-toggle-btn.is-active {
+[data-theme="lightblue"] .light-app-management-page .lam-view-toggle-btn.is-active,
+[data-theme="lightblue"] .light-app-management-page .lam-cat-toggle-btn.is-active {
   color: #0062D9;
 }
 
diff --git a/frontend-web/src/styles/globals.css b/frontend-web/src/styles/globals.css
index 3494b65c..a032c9c7 100644
--- a/frontend-web/src/styles/globals.css
+++ b/frontend-web/src/styles/globals.css
@@ -950,7 +950,10 @@ html.dark .strategy-app-header {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 155px;
+  /* 左右内边距随视口宽度等比缩放，与背景图基座的 background-size:cover 同步，
+     使两侧菜单在 1080p / 2K / 4K 下都贴齐发光基座边缘。
+     基准：1920 宽时 155px → 155/1920×100 ≈ 8.07vw。 */
+  padding: 0 8.07vw;
   /* 文字略微上移，贴合基座视觉中心 */
   transform: translateY(-6px);
   font-family: "Source Han Sans SC", "Noto Sans SC", "Noto Sans S Chinese",