@4399ywkf/cli 2.0.5 → 2.0.7

package/dist/index.js

@@ -334,6 +334,9 @@ Git\u6A21\u677F: ${gitTemplate}
   };
   if (!useExternalTemplate) {
     await injectInternalTemplateFiles();
+    if (microRole !== "none" /* none */) {
+      await injectMicroFrontendPages(target, microRole);
+    }
   }
   const context = {
     target,
@@ -452,5 +455,392 @@ async function getPnpmVersion() {
     throw new Error("Please install pnpm first", { cause: e });
   }
 }
+async function injectMicroFrontendPages(target, role, appName) {
+  const pagesDir = path.join(target, "src/pages");
+  if (role === "master" /* master */) {
+    await injectMasterAppPages(pagesDir);
+  } else if (role === "sub" /* sub */) {
+    await injectSubAppPages(pagesDir);
+  }
+}
+async function writeFile(filePath, content) {
+  await utils.fsExtra.ensureDir(path.dirname(filePath));
+  await utils.fsExtra.writeFile(filePath, content, "utf-8");
+}
+async function injectMasterAppPages(pagesDir, appName) {
+  await writeFile(
+    path.join(pagesDir, "layout.tsx"),
+    MASTER_LAYOUT
+  );
+  await writeFile(
+    path.join(pagesDir, "micro/page.tsx"),
+    MASTER_MICRO_PAGE
+  );
+  await writeFile(
+    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
+  );
+}
+async function injectSubAppPages(pagesDir, appName) {
+  await writeFile(
+    path.join(pagesDir, "layout.tsx"),
+    SUB_LAYOUT
+  );
+  await writeFile(
+    path.join(pagesDir, "page.tsx"),
+    SUB_HOME_PAGE
+  );
+}
+const MASTER_LAYOUT = `import { Outlet, Link, useLocation } from "react-router";
+import { Layout, Menu } from "antd";
+
+const { Header, Content, Footer } = Layout;
+
+const NAV_ITEMS = [
+  { key: "/", label: <Link to="/">\u9996\u9875</Link> },
+  { key: "/dashboard", label: <Link to="/dashboard">\u5DE5\u4F5C\u53F0</Link> },
+  { key: "/micro", label: <Link to="/micro">\u5FAE\u524D\u7AEF\u7BA1\u7406</Link> },
+  { key: "/user", label: <Link to="/user">\u7528\u6237\u7BA1\u7406</Link> },
+];
+
+export default function RootLayout() {
+  const { pathname } = useLocation();
+  const activeKey =
+    NAV_ITEMS.find((item) => pathname.startsWith(item.key) && item.key !== "/")?.key
+    || (pathname === "/" ? "/" : "");
+
+  return (
+    <Layout style={{ minHeight: "100vh" }}>
+      <Header style={{ display: "flex", alignItems: "center" }}>
+        <div style={{ color: "#fff", fontWeight: 700, fontSize: 16, marginRight: 32 }}>
+          Micro Master
+        </div>
+        <Menu
+          theme="dark"
+          mode="horizontal"
+          selectedKeys={[activeKey]}
+          style={{ flex: 1 }}
+          items={NAV_ITEMS}
+        />
+      </Header>
+      <Content style={{ padding: "24px 48px" }}>
+        <Outlet />
+      </Content>
+      <Footer style={{ textAlign: "center" }}>
+        YWKF Framework \xB7 \u4E3B\u5E94\u7528\uFF08\u57FA\u5EA7\uFF09 \xA9{new Date().getFullYear()}
+      </Footer>
+    </Layout>
+  );
+}
+`;
+const MASTER_HOME_PAGE = `import { Typography, Space, Card, Alert, Tag } from "antd";
+import { Link } from "react-router";
+
+const { Title, Paragraph } = Typography;
+
+export default function HomePage() {
+  return (
+    <div style={{ maxWidth: 720, margin: "0 auto" }}>
+      <Title>
+        \u4E3B\u5E94\u7528\uFF08\u57FA\u5EA7\uFF09 <Tag color="blue">Garfish</Tag>
+      </Title>
+
+      <Alert
+        type="info"
+        showIcon
+        message="\u5FAE\u524D\u7AEF\u4E3B\u5E94\u7528\u6A21\u5F0F\u5DF2\u542F\u7528"
+        description="\u5F53\u524D\u9879\u76EE\u4F5C\u4E3A\u57FA\u5EA7\u5E94\u7528\uFF0C\u8D1F\u8D23\u5B50\u5E94\u7528\u7684\u6CE8\u518C\u3001\u52A0\u8F7D\u548C\u751F\u547D\u5468\u671F\u7BA1\u7406\u3002"
+        style={{ marginBottom: 24 }}
+      />
+
+      <Space direction="vertical" size="middle" style={{ width: "100%" }}>
+        <Card title="\u5982\u4F55\u63A5\u5165\u5B50\u5E94\u7528">
+          <Paragraph>
+            1. \u5728 <code>ywkf.config.ts</code> \u4E2D\u7684 <code>garfishPlugin</code> \u914D\u7F6E\u5B50\u5E94\u7528\u5217\u8868\uFF1A
+          </Paragraph>
+          <pre style={{ background: "#f5f5f5", padding: 12, borderRadius: 6, fontSize: 13 }}>
+{
+\`garfishPlugin({
+  master: true,
+  apps: [
+    {
+      name: "sub-app",
+      entry: "http://localhost:3001",
+      activeRule: "/micro/sub-app",
+    },
+  ],
+})\`
+}
+          </pre>
+          <Paragraph>
+            2. \u8BBF\u95EE <Link to="/micro">\u5FAE\u524D\u7AEF\u7BA1\u7406</Link> \u9875\u9762\u67E5\u770B\u5B50\u5E94\u7528\u5BB9\u5668\u3002
+          </Paragraph>
+          <Paragraph>
+            3. \u5B50\u5E94\u7528\u5339\u914D <code>activeRule</code> \u540E\u4F1A\u81EA\u52A8\u6302\u8F7D\u5230\u5BB9\u5668\u4E2D\u3002
+          </Paragraph>
+        </Card>
+
+        <Card title="\u672C\u6A21\u677F\u5305\u542B\u7684\u793A\u4F8B\u8DEF\u7531">
+          <ul>
+            <li><Link to="/">/</Link> \u2014 \u9996\u9875\uFF08\u5F53\u524D\u9875\u9762\uFF09</li>
+            <li><Link to="/dashboard">/dashboard</Link> \u2014 \u5DE5\u4F5C\u53F0</li>
+            <li><Link to="/micro">/micro</Link> \u2014 \u5FAE\u524D\u7AEF\u5B50\u5E94\u7528\u5BB9\u5668</li>
+            <li><Link to="/user">/user</Link> \u2014 \u7528\u6237\u5217\u8868</li>
+          </ul>
+        </Card>
+      </Space>
+    </div>
+  );
+}
+`;
+const MASTER_MICRO_LAYOUT = `import { Outlet } from "react-router";
+
+export default function MicroLayout() {
+  return (
+    <div>
+      <Outlet />
+      {/* Garfish \u5B50\u5E94\u7528\u6302\u8F7D\u5BB9\u5668 */}
+      <div id="subapp-container" style={{ minHeight: 400 }} />
+    </div>
+  );
+}
+`;
+const MASTER_MICRO_PAGE = `import { Typography, Card, Empty, Space, Tag, Descriptions } from "antd";
+
+const { Title, Paragraph } = Typography;
+
+export default function MicroPage() {
+  return (
+    <div style={{ maxWidth: 800, 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>
+
+        <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>
+            </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
+            </Descriptions.Item>
+            <Descriptions.Item label="\u8DEF\u7531\u524D\u7F00">
+              \u5B50\u5E94\u7528 <code>activeRule</code> \u5EFA\u8BAE\u4EE5 <code>/micro/xxx</code> \u5F00\u5934
+            </Descriptions.Item>
+            <Descriptions.Item label="\u72EC\u7ACB\u8C03\u8BD5">
+              \u5B50\u5E94\u7528\u53EF\u5355\u72EC\u542F\u52A8\u5F00\u53D1\u670D\u52A1\u5668\u8FDB\u884C\u8C03\u8BD5\uFF0C\u53EA\u9700\u5728\u5F53\u524D\u4E3B\u5E94\u7528\u4E2D\u6CE8\u518C\u5176\u5165\u53E3\u5730\u5740\u5373\u53EF
+            </Descriptions.Item>
+          </Descriptions>
+        </Card>
+      </Space>
+    </div>
+  );
+}
+`;
+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";
+
+const { Header, Content, Footer } = Layout;
+
+const NAV_ITEMS = [
+  { key: "/", label: <Link to="/">\u9996\u9875</Link> },
+  { key: "/dashboard", label: <Link to="/dashboard">\u5DE5\u4F5C\u53F0</Link> },
+  { key: "/user", label: <Link to="/user">\u7528\u6237\u7BA1\u7406</Link> },
+];
+
+function useIsMicroEnv(): boolean {
+  const [isMicro, setIsMicro] = useState(false);
+
+  useEffect(() => {
+    const inGarfish = !!(window as Record<string, unknown>).__GARFISH__;
+    const inQiankun = !!(window as Record<string, unknown>).__POWERED_BY_QIANKUN__;
+    setIsMicro(inGarfish || inQiankun);
+  }, []);
+
+  return isMicro;
+}
+
+export default function SubAppLayout() {
+  const { pathname } = useLocation();
+  const isMicro = useIsMicroEnv();
+
+  const activeKey =
+    NAV_ITEMS.find((item) => pathname.startsWith(item.key) && item.key !== "/")?.key
+    || (pathname === "/" ? "/" : "");
+
+  if (isMicro) {
+    return (
+      <div style={{ padding: 16 }}>
+        <Outlet />
+      </div>
+    );
+  }
+
+  return (
+    <Layout style={{ minHeight: "100vh" }}>
+      <Header style={{ display: "flex", alignItems: "center" }}>
+        <div style={{ color: "#fff", fontWeight: 700, fontSize: 16, marginRight: 16 }}>
+          Sub App
+        </div>
+        <Tag color="orange" style={{ marginRight: 16 }}>\u72EC\u7ACB\u8FD0\u884C</Tag>
+        <Menu
+          theme="dark"
+          mode="horizontal"
+          selectedKeys={[activeKey]}
+          style={{ flex: 1 }}
+          items={NAV_ITEMS}
+        />
+      </Header>
+      <Content style={{ padding: "24px 48px" }}>
+        <Outlet />
+      </Content>
+      <Footer style={{ textAlign: "center" }}>
+        YWKF Framework \xB7 \u5B50\u5E94\u7528\uFF08\u72EC\u7ACB\u8FD0\u884C\u6A21\u5F0F\uFF09\xA9{new Date().getFullYear()}
+      </Footer>
+    </Layout>
+  );
+}
+`;
+const SUB_HOME_PAGE = `import { Typography, Space, Card, Alert, Tag, Descriptions } from "antd";
+import { Link } from "react-router";
+import { useEffect, useState } from "react";
+
+const { Title, Paragraph } = Typography;
+
+function useRuntimeInfo() {
+  const [info, setInfo] = useState({
+    isMicro: false,
+    env: "\u72EC\u7ACB\u8FD0\u884C",
+  });
+
+  useEffect(() => {
+    const inGarfish = !!(window as Record<string, unknown>).__GARFISH__;
+    const inQiankun = !!(window as Record<string, unknown>).__POWERED_BY_QIANKUN__;
+    const isMicro = inGarfish || inQiankun;
+
+    setInfo({
+      isMicro,
+      env: inGarfish ? "Garfish" : inQiankun ? "Qiankun" : "\u72EC\u7ACB\u8FD0\u884C",
+    });
+  }, []);
+
+  return info;
+}
+
+export default function SubAppHomePage() {
+  const { isMicro, env } = useRuntimeInfo();
+
+  return (
+    <div style={{ maxWidth: 720, margin: "0 auto" }}>
+      <Title>
+        \u5B50\u5E94\u7528 <Tag color={isMicro ? "green" : "orange"}>{env}</Tag>
+      </Title>
+
+      <Alert
+        type={isMicro ? "success" : "info"}
+        showIcon
+        message={
+          isMicro
+            ? "\u5F53\u524D\u8FD0\u884C\u5728\u5FAE\u524D\u7AEF\u73AF\u5883\u4E2D\uFF08\u7531\u4E3B\u5E94\u7528\u52A0\u8F7D\uFF09"
+            : "\u5F53\u524D\u4E3A\u72EC\u7ACB\u8FD0\u884C\u6A21\u5F0F\uFF08\u53EF\u72EC\u7ACB\u5F00\u53D1\u8C03\u8BD5\uFF09"
+        }
+        style={{ marginBottom: 24 }}
+      />
+
+      <Space direction="vertical" size="middle" style={{ width: "100%" }}>
+        <Card title="\u8FD0\u884C\u73AF\u5883\u4FE1\u606F">
+          <Descriptions bordered column={1} size="small">
+            <Descriptions.Item label="\u8FD0\u884C\u6A21\u5F0F">
+              <Tag color={isMicro ? "green" : "orange"}>{env}</Tag>
+            </Descriptions.Item>
+            <Descriptions.Item label="window.__GARFISH__">
+              <code>{String(!!(window as Record<string, unknown>).__GARFISH__)}</code>
+            </Descriptions.Item>
+            <Descriptions.Item label="\u5F53\u524D URL">
+              <code>{typeof location !== "undefined" ? location.href : "-"}</code>
+            </Descriptions.Item>
+          </Descriptions>
+        </Card>
+
+        <Card title="\u5B50\u5E94\u7528\u5F00\u53D1\u6307\u5357">
+          <Paragraph>
+            \u6B64\u9879\u76EE\u5DF2\u914D\u7F6E\u4E3A Garfish \u5FAE\u524D\u7AEF\u5B50\u5E94\u7528\uFF0C\u652F\u6301<strong>\u72EC\u7ACB\u8FD0\u884C</strong>\u4E0E<strong>\u5D4C\u5165\u4E3B\u5E94\u7528</strong>\u4E24\u79CD\u6A21\u5F0F\u3002
+          </Paragraph>
+          <ul>
+            <li>\u72EC\u7ACB\u8FD0\u884C\uFF1A\u76F4\u63A5 <code>pnpm dev</code>\uFF0C\u5B8C\u6574\u529F\u80FD\u53EF\u7528\u3002</li>
+            <li>
+              \u5D4C\u5165\u4E3B\u5E94\u7528\uFF1A\u4E3B\u5E94\u7528\u5728 <code>garfishPlugin</code> \u4E2D\u6CE8\u518C\u672C\u5E94\u7528\u5165\u53E3\u5373\u53EF\u81EA\u52A8\u52A0\u8F7D\u3002
+            </li>
+            <li>
+              \u6784\u5EFA\u4EA7\u7269\u81EA\u52A8\u8F93\u51FA\u4E3A UMD \u683C\u5F0F\uFF08\u7531\u6846\u67B6 garfishPlugin \u5904\u7406\uFF09\uFF0C\u65E0\u9700\u624B\u52A8\u914D\u7F6E\u3002
+            </li>
+          </ul>
+        </Card>
+
+        <Card title="\u672C\u6A21\u677F\u5305\u542B\u7684\u793A\u4F8B\u8DEF\u7531">
+          <ul>
+            <li><Link to="/">/</Link> \u2014 \u9996\u9875\uFF08\u5F53\u524D\u9875\u9762\uFF09</li>
+            <li><Link to="/dashboard">/dashboard</Link> \u2014 \u5DE5\u4F5C\u53F0</li>
+            <li><Link to="/user">/user</Link> \u2014 \u7528\u6237\u5217\u8868</li>
+          </ul>
+        </Card>
+      </Space>
+    </div>
+  );
+}
+`;
 
 module.exports = index;

package/package.json

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