diff --git a/frontend-web/src/pages/LightAppListPage.tsx b/frontend-web/src/pages/LightAppListPage.tsx index b5145b83..43328404 100644 --- a/frontend-web/src/pages/LightAppListPage.tsx +++ b/frontend-web/src/pages/LightAppListPage.tsx @@ -37,6 +37,8 @@ import { cn } from "@/lib/utils"; import { useLightApps, type LightApp } from "@/strategy-components/api/light-apps"; import { buildLightAppUrl } from "@/strategy-components/lib/light-app"; +import "./light-app-pages.css"; + const PAGE_SIZE = 12; /** 卡片图标池（按 appId 哈希取一个，仅作视觉区分）。 */ @@ -107,7 +109,7 @@ export default function LightAppListPage() { }; return ( -
+
{/* 标题 */}
diff --git a/frontend-web/src/pages/LightAppManagementPage.tsx b/frontend-web/src/pages/LightAppManagementPage.tsx index 99c6ed77..0180389d 100644 --- a/frontend-web/src/pages/LightAppManagementPage.tsx +++ b/frontend-web/src/pages/LightAppManagementPage.tsx @@ -1,3 +1,8 @@ +/** + * 应用管理页 —— 注册 / 编辑轻应用（iframe 与 window.open）。 + * + * 深蓝主题适配见 `./light-app-management.css`（《深蓝色 UI 规范》tokens.css）。 + */ import { useMemo, useState } from "react"; import { AlertCircle, @@ -43,6 +48,8 @@ import { stringifyThemeMap, } from "@/strategy-components/lib/light-app"; +import "./light-app-management.css"; + interface FormState { name: string; description: string; @@ -63,7 +70,10 @@ const PARAM_TYPE_OPTIONS: { label: string; value: "login" | "theme" }[] = [ { label: "主题参数", value: "theme" }, ]; -const DIALOG_SELECT_POPUP = { attach: () => document.body }; +const DIALOG_SELECT_POPUP = { + attach: () => document.body, + overlayClassName: "lam-select-popup", +}; const emptyForm = (): FormState => ({ name: "", @@ -213,14 +223,14 @@ export default function LightAppManagementPage() { const tableApps = useMemo(() => apps, [apps]); return ( -
+
-

+

应用管理

-

+

注册轻应用。 window.open @@ -235,14 +245,14 @@ export default function LightAppManagementPage() {

-
+
setSearch(e.target.value)} placeholder="搜索应用名称 / 描述..." - className="w-full rounded-[5px] border border-neutral-100 bg-neutral-50/60 py-2 pl-10 pr-10 text-xs text-neutral-800 placeholder-neutral-400 transition-all hover:bg-white focus:border-[#F5222D]/40 focus:outline-none focus:ring-4 focus:ring-[#F5222D]/10" + className="lam-search-input w-full rounded-[5px] border border-neutral-100 bg-neutral-50/60 py-2 pl-10 pr-10 text-xs text-neutral-800 placeholder-neutral-400 transition-all hover:bg-white focus:border-[#F5222D]/40 focus:outline-none focus:ring-4 focus:ring-[#F5222D]/10" /> {search && (
-
- 搜寻到 {tableApps.length}{" "} +
+ 搜寻到 {tableApps.length}{" "} 个注册完成的子模块轻应用
{viewMode === "table" ? ( -
- +
+
@@ -310,19 +320,19 @@ export default function LightAppManagementPage() { {tableApps.map((app) => (
名称
- + {app.name} {app.appType === "window_open" ? ( - + 新页跳转 ) : ( - + iframe 嵌套 @@ -330,7 +340,7 @@ export default function LightAppManagementPage() { - {app.appType === "iframe" && app.mountLocation ? ( - - + + {mountLabel(app.mountLocation)} ) : ( @@ -370,7 +380,7 @@ export default function LightAppManagementPage() { activeParamPopover === app.appId ? null : app.appId ) } - className="inline-flex cursor-pointer items-center space-x-1.5 rounded-[5px] border border-neutral-200/60 bg-neutral-50/60 px-2.5 py-1 text-xs font-medium text-neutral-500 transition-colors hover:bg-neutral-100" + className="lam-param-btn inline-flex cursor-pointer items-center space-x-1.5 rounded-[5px] border border-neutral-200/60 bg-neutral-50/60 px-2.5 py-1 text-xs font-medium text-neutral-500 transition-colors hover:bg-neutral-100" > {app.routeParams.length}个 {activeParamPopover === app.appId ? ( @@ -389,14 +399,14 @@ export default function LightAppManagementPage() { className="fixed inset-0 z-40" onClick={() => setActiveParamPopover(null)} /> -
-
+
+
注入的路由参数 @@ -405,11 +415,11 @@ export default function LightAppManagementPage() { {app.routeParams.map((p, idx) => (
- {p.key} - + {p.key} + {getParamSourceLabel(p)}
@@ -427,15 +437,15 @@ export default function LightAppManagementPage() { {app.enabled ? ( <> - - + + - 已启用 + 已启用 ) : ( <> - - 已停用 + + 已停用 )}
@@ -445,14 +455,14 @@ export default function LightAppManagementPage() {
-
+
-

+

{isLoading ? "加载中..." : "暂无匹配的组件应用"}

{!isLoading && ( -

+

{search ? "请确认搜索关键词输入是否正确" : "点击右上角“注册应用”添加第一款轻应用"}

)} @@ -487,15 +497,15 @@ export default function LightAppManagementPage() {
) : tableApps.length === 0 ? ( -
-
+
+
-

+

{isLoading ? "加载中..." : "暂无匹配的组件应用"}

{!isLoading && ( -

+

{search ? "请确认搜索关键词输入是否正确" : "点击右上角“注册应用”添加第一款轻应用"}

)} @@ -505,7 +515,7 @@ export default function LightAppManagementPage() { {tableApps.map((app) => (
{app.appType === "window_open" ? ( - + 新页跳转 ) : ( - + iframe 嵌套 )} -

+

{app.name}

{app.enabled ? ( - - + + 已启用 ) : ( - - + + 已停用 )}
-

+

{app.description || "暂无应用详细描述说明。"}

-
+
{app.url} @@ -568,7 +578,7 @@ export default function LightAppManagementPage() { {app.routeParams.map((p, idx) => ( {p.key} @@ -577,24 +587,24 @@ export default function LightAppManagementPage() { )} {app.appType === "iframe" && app.mountLocation && ( -
+
挂载分类： {mountLabel(app.mountLocation)}
)}
-
+
{viewMode === "table" && ( -
-
+
+

智能多维挂载规则：

-
    +
    • - • + • 当您注册 iframe 嵌套{" "} 应用时，您需要在菜单一栏指定分类（如“资源管理”），组件将直接作为新导航菜单项加入该分类。
    • - • + • 当路由挂载成功，点击左侧注入的子栏名称可在主区域调起{" "} 真实 Iframe 预览器 @@ -636,23 +646,23 @@ export default function LightAppManagementPage() { {dialogOpen && (
      setDialogOpen(false)} /> -
      -
      +
      +
      - + -

      +

      {editing ? "修改轻应用" : "注册应用"}

      @@ -660,8 +670,8 @@ export default function LightAppManagementPage() {
      -
      -
      -
      {form.appType === "iframe" && (
      -