@4399ywkf/cli 2.0.11 → 2.0.12

package/dist/index.js

@@ -492,6 +492,10 @@ async function injectMasterAppPages(pagesDir, appName) {
     path.join(pagesDir, "micro/layout.tsx"),
     MASTER_MICRO_LAYOUT
   );
+  await writeFile(
+    path.join(pagesDir, "micro/$.tsx"),
+    MASTER_MICRO_CATCHALL
+  );
   await writeFile(
     path.join(pagesDir, "page.tsx"),
     MASTER_HOME_PAGE
@@ -626,35 +630,172 @@ export default function MicroLayout() {
   );
 }
 `;
-const MASTER_MICRO_PAGE = `import { Typography, Card, Empty, Space, Tag, Descriptions } from "antd";
+const MASTER_MICRO_PAGE = `import { useMemo, useState, useEffect, useCallback } from "react";
+import { useNavigate } from "react-router";
+import {
+  Typography,
+  Card,
+  Space,
+  Tag,
+  Table,
+  Button,
+  Empty,
+  Tooltip,
+  Descriptions,
+} from "antd";
+import type { ColumnsType } from "antd/es/table";
+import Garfish from "garfish";
+
+const { Title, Text } = Typography;
+
+interface SubAppInfo {
+  name: string;
+  entry: string;
+  activeWhen?: string | ((path: string) => boolean);
+  basename?: string;
+}
 
-const { Title, Paragraph } = Typography;
+type AppStatus = "online" | "offline" | "checking";
+
+function useSubApps() {
+  return useMemo<SubAppInfo[]>(() => {
+    const infos = Garfish.appInfos ?? {};
+    return Object.values(infos).map((info) => ({
+      name: info.name,
+      entry: info.entry,
+      activeWhen: info.activeWhen,
+      basename: info.basename,
+    }));
+  }, []);
+}
+
+function useAppStatusMap(apps: SubAppInfo[]) {
+  const [statusMap, setStatusMap] = useState<Record<string, AppStatus>>(() =>
+    Object.fromEntries(apps.map((a) => [a.name, "checking" as const]))
+  );
+
+  const checkStatus = useCallback(async (app: SubAppInfo) => {
+    try {
+      const res = await fetch(app.entry, { mode: "no-cors", cache: "no-store" });
+      return (res.status === 0 || res.ok) ? "online" : "offline";
+    } catch {
+      return "offline";
+    }
+  }, []);
+
+  useEffect(() => {
+    if (apps.length === 0) return;
+    let cancelled = false;
+
+    async function checkAll() {
+      const results = await Promise.all(
+        apps.map(async (app) => [app.name, await checkStatus(app)] as const)
+      );
+      if (!cancelled) setStatusMap(Object.fromEntries(results));
+    }
+
+    checkAll();
+    const timer = setInterval(checkAll, 15_000);
+    return () => { cancelled = true; clearInterval(timer); };
+  }, [apps, checkStatus]);
+
+  return statusMap;
+}
+
+const STATUS_TAG: Record<AppStatus, { color: string; text: string }> = {
+  online: { color: "success", text: "\u5728\u7EBF" },
+  offline: { color: "error", text: "\u79BB\u7EBF" },
+  checking: { color: "processing", text: "\u68C0\u6D4B\u4E2D" },
+};
 
 export default function MicroPage() {
+  const navigate = useNavigate();
+  const apps = useSubApps();
+  const statusMap = useAppStatusMap(apps);
+
+  const columns: ColumnsType<SubAppInfo> = [
+    {
+      title: "\u5E94\u7528\u540D\u79F0",
+      dataIndex: "name",
+      render: (name: string) => <Text strong>{name}</Text>,
+    },
+    {
+      title: "\u5165\u53E3\u5730\u5740",
+      dataIndex: "entry",
+      render: (entry: string) => (
+        <Tooltip title="\u70B9\u51FB\u5728\u65B0\u7A97\u53E3\u6253\u5F00">
+          <a href={entry} target="_blank" rel="noopener noreferrer">{entry}</a>
+        </Tooltip>
+      ),
+    },
+    {
+      title: "\u6FC0\u6D3B\u8DEF\u7531",
+      dataIndex: "activeWhen",
+      render: (val: SubAppInfo["activeWhen"]) =>
+        typeof val === "string" ? <code>{val}</code> : <Tag>\u81EA\u5B9A\u4E49\u51FD\u6570</Tag>,
+    },
+    {
+      title: "\u72B6\u6001",
+      key: "status",
+      width: 100,
+      render: (_, record) => {
+        const s = statusMap[record.name] ?? "checking";
+        const tag = STATUS_TAG[s];
+        return <Tag color={tag.color}>{tag.text}</Tag>;
+      },
+    },
+    {
+      title: "\u64CD\u4F5C",
+      key: "action",
+      width: 100,
+      render: (_, record) => {
+        const route = typeof record.activeWhen === "string" ? record.activeWhen : null;
+        if (!route) return null;
+        return (
+          <Button type="link" size="small" onClick={() => navigate(route)}>
+            \u8BBF\u95EE
+          </Button>
+        );
+      },
+    },
+  ];
+
   return (
-    <div style={{ maxWidth: 800, margin: "0 auto" }}>
+    <div style={{ maxWidth: 960, margin: "0 auto" }}>
       <Title level={2}>
         \u5FAE\u524D\u7AEF\u7BA1\u7406 <Tag color="green">Garfish</Tag>
       </Title>
 
       <Space direction="vertical" size="middle" style={{ width: "100%" }}>
-        <Card title="\u5B50\u5E94\u7528\u5BB9\u5668">
-          <Empty
-            description={
-              <Paragraph type="secondary">
-                \u6682\u672A\u6CE8\u518C\u5B50\u5E94\u7528\u3002\u8BF7\u5728 <code>ywkf.config.ts</code> \u4E2D\u914D\u7F6E <code>garfishPlugin</code> \u7684 apps \u5217\u8868\u3002
-              </Paragraph>
-            }
-          />
+        <Card title={\`\u5B50\u5E94\u7528\u5217\u8868\uFF08\${apps.length}\uFF09\`}>
+          {apps.length > 0 ? (
+            <Table<SubAppInfo>
+              rowKey="name"
+              columns={columns}
+              dataSource={apps}
+              pagination={false}
+              size="middle"
+            />
+          ) : (
+            <Empty
+              description={
+                <Text type="secondary">
+                  \u6682\u672A\u6CE8\u518C\u5B50\u5E94\u7528\u3002\u8BF7\u5728 <code>ywkf.config.ts</code> \u4E2D\u914D\u7F6E{" "}
+                  <code>garfishPlugin</code> \u7684 apps \u5217\u8868\u3002
+                </Text>
+              }
+            />
+          )}
         </Card>
 
         <Card title="\u63A5\u5165\u8BF4\u660E">
           <Descriptions bordered column={1} size="small">
             <Descriptions.Item label="\u5B50\u5E94\u7528\u6CE8\u518C">
-              <code>garfishPlugin({'{'}  master: true, apps: [...] {'}'})</code>
+              <code>garfishPlugin({"{"} master: true, apps: [...] {"}"})</code>
             </Descriptions.Item>
             <Descriptions.Item label="\u6302\u8F7D\u5BB9\u5668">
-              <code>&lt;div id="subapp-container" /&gt;</code>\uFF08\u5DF2\u5185\u7F6E\u5728\u5F53\u524D\u5E03\u5C40\u4E2D\uFF09
+              <code>&lt;div id=&quot;subapp-container&quot; /&gt;</code>
+              \uFF08\u5DF2\u5185\u7F6E\u5728\u5F53\u524D\u5E03\u5C40\u4E2D\uFF09
             </Descriptions.Item>
             <Descriptions.Item label="\u8DEF\u7531\u524D\u7F00">
               \u5B50\u5E94\u7528 <code>activeRule</code> \u5EFA\u8BAE\u4EE5 <code>/micro/xxx</code> \u5F00\u5934
@@ -669,6 +810,39 @@ export default function MicroPage() {
   );
 }
 `;
+const MASTER_MICRO_CATCHALL = `import { Typography, Spin, Alert } from "antd";
+import { useLocation } from "react-router";
+
+const { Paragraph } = Typography;
+
+export default function MicroCatchAll() {
+  const { pathname } = useLocation();
+
+  return (
+    <div style={{ maxWidth: 720, margin: "0 auto", padding: "40px 0" }}>
+      <Alert
+        type="warning"
+        showIcon
+        message="\u5B50\u5E94\u7528\u8DEF\u7531\u533A\u57DF"
+        description={
+          <>
+            <Paragraph>
+              \u5F53\u524D\u8DEF\u5F84 <code>{pathname}</code> \u9884\u671F\u7531 Garfish \u5B50\u5E94\u7528\u63A5\u7BA1\u3002
+            </Paragraph>
+            <Paragraph type="secondary">
+              \u5982\u679C\u4F60\u770B\u5230\u6B64\u9875\u9762\uFF0C\u8BF4\u660E\u5BF9\u5E94\u7684\u5B50\u5E94\u7528\u5C1A\u672A\u6CE8\u518C\u6216\u672A\u542F\u52A8\u3002
+              \u8BF7\u68C0\u67E5 <code>ywkf.config.ts</code> \u4E2D <code>garfishPlugin</code> \u7684 apps \u914D\u7F6E\u3002
+            </Paragraph>
+          </>
+        }
+      />
+      <div style={{ textAlign: "center", marginTop: 24 }}>
+        <Spin tip="\u7B49\u5F85\u5B50\u5E94\u7528\u52A0\u8F7D..." />
+      </div>
+    </div>
+  );
+}
+`;
 const SUB_LAYOUT = `import { Outlet, Link, useLocation } from "react-router";
 import { Layout, Menu, Tag } from "antd";
 import { useEffect, useState } from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4399ywkf/cli",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "description": "运维开发部脚手架",
   "main": "dist/index.js",
   "bin": {