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(emptyForm); const [activeParamPopover, setActiveParamPopover] = useState(null); const [viewMode, setViewMode] = useState<"table" | "cards">("table"); + const [categoryFilter, setCategoryFilter] = useState<"all" | LightAppType>("all"); + const [mountFilter, setMountFilter] = useState(""); 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 (
@@ -252,7 +269,7 @@ export default function LightAppManagementPage() {
-
+
+
+ {( + [ + { value: "all", label: "全部" }, + { value: "window_open", label: "新页跳转" }, + { value: "iframe", label: "iframe 嵌套" }, + ] as const + ).map((c) => ( + + ))} +
+ + {categoryFilter === "iframe" && ( +
+