@4399ywkf/cli 1.0.7 → 1.0.9

package/dist/templates/app/src/layout/ThemeContext.tsx

@@ -1,14 +1,16 @@
-import ThemeProvider from '@/components/ThemeProvider';
-import { CLOUD_THEME_APPEARANCE } from '@/const/theme';
-import { setCookie } from '@/utils/cookie';
+import ThemeProvider from "@/components/ThemeProvider";
+import { CLOUD_THEME_APPEARANCE } from "@/const/theme";
+import { setCookie } from "@/utils/cookie";
 
 // import { useGlobalStore } from "@store/global";
-import React, { memo, useEffect, type ReactNode } from 'react';
+import React, { memo, useEffect, type ReactNode } from "react";
+
+import { SYSTEM_PREFIX } from "@/const/system";
+import { GlobalStyle } from "@/styles";
+import { useUserStore } from "@store/user";
+import { createStyles } from "antd-style";
+import HarmonyOS_Sans_Regular from "@public/fonts/HarmonyOS_Sans_Regular.woff2";
 
-import { SYSTEM_PREFIX } from '@/const/system';
-import { GlobalStyle } from '@/styles';
-import { useUserStore } from '@store/user';
-import { createStyles } from 'antd-style';
 const useStyles = createStyles(({ css, token }) => ({
   app: css`
     position: relative;
@@ -70,55 +72,56 @@ interface AppThemeProps {
 }
 
 const AppTheme = memo(({ children }: AppThemeProps) => {
-  const themeMode = useUserStore(s => s.themeMode);
-  const animationMode = useUserStore(s => s.animationMode);
-  const neutralColor = useUserStore(s => s.neutralColor);
-  const primaryColor = useUserStore(s => s.primaryColor);
+  const themeMode = useUserStore((s) => s.themeMode);
+  const animationMode = useUserStore((s) => s.animationMode);
+  const neutralColor = useUserStore((s) => s.neutralColor);
+  const primaryColor = useUserStore((s) => s.primaryColor);
   const { styles, cx } = useStyles();
 
   useEffect(() => {
     // Update data-theme accordingly if user selects light or dark
-    if (themeMode !== 'auto') {
+    if (themeMode !== "auto") {
       document.documentElement.dataset.theme = themeMode;
       return;
     }
 
     // For auto mode, we need to watch system preferences
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
 
     // Set initial theme based on system preference
     document.documentElement.dataset.theme = mediaQuery.matches
-      ? 'dark'
-      : 'light';
+      ? "dark"
+      : "light";
 
     // Update theme when system preference changes
     function handleChange(e) {
-      document.documentElement.dataset.theme = e.matches ? 'dark' : 'light';
+      document.documentElement.dataset.theme = e.matches ? "dark" : "light";
     }
 
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
   }, [themeMode]);
 
   return (
     <ThemeProvider
       prefixCls={SYSTEM_PREFIX}
-      appearance={themeMode !== 'auto' ? themeMode : undefined}
+      appearance={themeMode !== "auto" ? themeMode : undefined}
       className={cx(styles.app, styles.scrollbar, styles.scrollbarPolyfill)}
       customTheme={{
         neutralColor: neutralColor,
         primaryColor: primaryColor,
       }}
+      customFonts={[HarmonyOS_Sans_Regular]}
       theme={{
         cssVar: true,
         token: {
-          motion: animationMode !== 'disabled',
-          motionUnit: animationMode === 'agile' ? 0.05 : 0.1,
+          motion: animationMode !== "disabled",
+          motionUnit: animationMode === "agile" ? 0.05 : 0.1,
         },
       }}
       themeMode={themeMode}
-      onAppearanceChange={appearance => {
-        if (themeMode !== 'auto') return;
+      onAppearanceChange={(appearance) => {
+        if (themeMode !== "auto") return;
 
         setCookie(CLOUD_THEME_APPEARANCE, appearance);
       }}

package/dist/templates/app/src/locales/default/common.ts

@@ -1 +1,3 @@
-export default {};
+export default {
+  appName: "Chat应用",
+};

package/dist/templates/app/src/locales/utils.ts

@@ -0,0 +1,23 @@
+const SAFE_KEY = /^[^.[\]]+$/;
+
+export const toLodashPath = (segments: Array<number | string>) => {
+  let path = '';
+
+  for (const segment of segments) {
+    if (typeof segment === 'number') {
+      path += `[${segment}]`;
+      continue;
+    }
+
+    const key = segment;
+    const safe = SAFE_KEY.test(key);
+    if (safe) {
+      path += path ? `.${key}` : key;
+      continue;
+    }
+
+    path += `[${JSON.stringify(key)}]`;
+  }
+
+  return path;
+};

package/dist/templates/app/src/micro/garfish.ts

@@ -0,0 +1,53 @@
+import type { Root } from "react-dom";
+import { renderClient } from "@config/router";
+import { createRouter } from "@/routes";
+
+interface GarfishProvider {
+  render: (props: { basename: string }) => void;
+  destroy: () => void;
+}
+
+interface RenderContext {
+  basename?: string;
+  rootElement: HTMLElement | null;
+}
+
+/**
+ * Garfish 微前端生命周期适配器
+ */
+export function createGarfishProvider(appName: string): GarfishProvider {
+  let root: Root | null = null;
+
+  return {
+    render({ basename }: { basename: string }) {
+      const context: RenderContext = {
+        basename,
+        rootElement: document.getElementById(appName) ?? document.body,
+      };
+
+      root = renderClient(context);
+
+      // 向主应用通知路由信息
+      if (window.Garfish?.channel) {
+        window.Garfish.channel.emit("router", {
+          name: appName,
+          routes: createRouter(basename),
+        });
+      }
+    },
+
+    destroy() {
+      if (root) {
+        root.unmount();
+        root = null;
+      }
+    },
+  };
+}
+
+/**
+ * 判断是否在微前端环境中运行
+ */
+export function isMicroApp(): boolean {
+  return typeof window !== "undefined" && Boolean(window.__GARFISH__);
+}

package/dist/templates/app/src/pages/base/index.tsx

@@ -1,32 +1,287 @@
-import React from 'react';
-import { createStyles } from "antd-style"
-
-
-const useStyles = createStyles(({ token, isDarkMode }) => ({
-  button: {
-    backgroundColor: token.colorPrimary,
-    width: '100px',
-    color: isDarkMode ? token.colorText : "#fff",
-    padding: `${token.paddingXS}px ${token.paddingSM}px`,
-    borderRadius: token.borderRadius,
-    cursor: 'pointer',
-    transition: 'all 0.3s ease',
-
-    '&:hover': {
-      backgroundColor: token.colorPrimaryHover,
+import { useUserStore } from "@store/user";
+import { Button, Card, Space, Typography, Tag, Flex } from "antd";
+import {
+  RocketOutlined,
+  ThunderboltOutlined,
+  BulbOutlined,
+  GithubOutlined,
+  BookOutlined,
+  SettingOutlined,
+} from "@ant-design/icons";
+import React from "react";
+import { createStyles } from "antd-style";
+
+const { Title, Paragraph, Text } = Typography;
+
+const px = (value: number | string) =>
+  typeof value === "number" ? `${value}px` : value;
+
+const useStyles = createStyles(({ token, css }) => ({
+  root: css`
+    width: 100%;
+    min-height: 100vh;
+    padding: ${px(token.paddingLG)};
+    background: linear-gradient(180deg, ${token.colorFillTertiary}, ${token.colorPrimaryHover});
+    overflow: auto;
+  `,
+  container: css`
+    margin: 0 auto;
+    max-width: 960px;
+  `,
+  hero: css`
+    text-align: center;
+    margin-bottom: ${px(token.marginLG)};
+  `,
+  heroIcon: css`
+    font-size: 3.5rem;
+    color: ${token.colorPrimary};
+    animation: bounce 1.2s infinite alternate;
+
+    @keyframes bounce {
+      from {
+        transform: translateY(0);
+      }
+      to {
+        transform: translateY(-6px);
+      }
+    }
+  `,
+  tagSpace: css`
+    margin-top: ${px(token.marginMD)};
+  `,
+  featuresGrid: css`
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: ${px(token.marginSM)};
+    margin-bottom: ${px(token.marginLG)};
+  `,
+  featureCard: css`
+    text-align: center;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+    &:hover {
+      transform: translateY(-6px);
+      box-shadow: ${token.boxShadowSecondary};
+    }
+  `,
+  quickLinkGrid: css`
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: ${px(token.marginSM)};
+  `,
+  quickLink: css`
+    padding: ${px(token.paddingMD)};
+    border-radius: ${px(token.borderRadiusLG)};
+    background: ${token.colorBgContainer};
+    cursor: pointer;
+    transition: background 0.2s ease;
+
+    &:hover {
+      background: ${token.colorBgElevated};
+    }
+  `,
+  footerActions: css`
+    margin-top: ${px(token.marginMD)};
+    text-align: center;
+  `,
+  cardTitle: css`
+    display: inline-flex;
+    align-items: center;
+    gap: ${px(token.marginXS)};
+    font-size: ${px(token.fontSizeHeading4)};
+  `,
+  codeBlock: css`
+    margin-top: ${px(token.marginXS)};
+    padding: ${px(token.paddingSM)};
+    background: ${token.colorFillAlter};
+    border-radius: ${px(token.borderRadiusLG)};
+    font-family: ${token.fontFamilyCode};
+    font-size: ${px(token.fontSizeSM)};
+  `,
+  stepLabel: css`
+    font-size: ${px(token.fontSizeBase)};
+  `,
+  quickLinkLabel: css`
+    font-size: ${px(token.fontSizeHeading2)};
+    margin-bottom: ${px(token.marginXS)};
+  `,
+  quickLinkDescription: css`
+    color: ${token.colorTextTertiary};
+  `,
+  panelCard: css`
+    margin-bottom: ${px(token.marginLG)};
+    background: ${token.colorBgElevated};
+  `,
+  featureIcon: css`
+    margin-bottom: ${px(token.marginMD)};
+  `,
+  footerParagraph: css`
+    margin-top: ${px(token.marginMD)};
+    color: ${token.colorTextTertiary};
+  `,
+  textCenterCard: css`
+    text-align: center;
+  `,
+}));
+
+export default function BasePage() {
+  const theme = useUserStore((state) => state.themeMode);
+  const setTheme = useUserStore((state) => state.setThemeMode);
+  const { styles, cx } = useStyles();
+
+  const features = [
+    {
+      icon: <ThunderboltOutlined className={styles.heroIcon} />,
+      title: "Rspack 构建",
+      description: "基于 Rspack 的极速构建体验，开发效率翻倍",
     },
-    '&:active': {
-      backgroundColor: token.colorPrimaryActive,
+    {
+      icon: <BulbOutlined className={styles.heroIcon} />,
+      title: "React 19",
+      description: "使用最新的 React 19 特性，享受并发渲染",
     },
-  },
-}));
+    {
+      icon: <SettingOutlined className={styles.heroIcon} />,
+      title: "TypeScript",
+      description: "完整的 TypeScript 支持，类型安全有保障",
+    },
+  ];
+
+  const quickLinks = [
+    { label: "📖 文档", description: "查看完整文档" },
+    { label: "🎨 组件库", description: "Ant Design 组件" },
+    { label: "🔧 配置", description: "项目配置说明" },
+    { label: "🚀 部署", description: "部署指南" },
+  ];
 
-export default function Base() {
-  const { styles } = useStyles();
   return (
-    <div className={styles.button}>
-      Base
-      {/* <Button type="primary">antd按钮</Button> */}
+    <div className={cx(styles.root)}>
+      <div className={styles.container}>
+        <Flex vertical gap={12}>
+          <section className={styles.hero}>
+            <div>
+              <RocketOutlined className={styles.heroIcon} />
+            </div>
+            <Title level={1} style={{ marginBottom: 16 }}>
+              🎉 恭喜！项目创建成功
+            </Title>
+            <Paragraph>
+              你的项目已经准备就绪，现在可以开始开发了
+            </Paragraph>
+            <Space size="middle" className={styles.tagSpace}>
+              <Tag color="blue">React 19</Tag>
+              <Tag color="green">TypeScript</Tag>
+              <Tag color="orange">Rspack</Tag>
+              <Tag color="purple">Ant Design</Tag>
+              <Tag color="cyan">Tailwind CSS</Tag>
+            </Space>
+          </section>
+
+          <div className={styles.featuresGrid}>
+            {features.map((feature, index) => (
+              <Card
+                key={index}
+                hoverable
+                className={cx(styles.featureCard)}
+                bodyStyle={{ padding: 24 }}
+              >
+                <div className={styles.featureIcon}>{feature.icon}</div>
+                <Title level={4}>{feature.title}</Title>
+                <Paragraph type="secondary">{feature.description}</Paragraph>
+              </Card>
+            ))}
+          </div>
+
+          <Card
+            title={
+              <span className={styles.cardTitle}>
+                <BookOutlined />
+                快速开始
+              </span>
+            }
+            className={styles.panelCard}
+          >
+            <Space direction="vertical" size="large">
+              <div>
+                <Text strong className={styles.stepLabel}>
+                  1. 安装依赖
+                </Text>
+                <div className={styles.codeBlock}>
+                  <code>pnpm install</code>
+                </div>
+              </div>
+              <div>
+                <Text strong className={styles.stepLabel}>
+                  2. 启动开发服务器
+                </Text>
+                <div className={styles.codeBlock}>
+                  <code>pnpm dev</code>
+                </div>
+              </div>
+              <div>
+                <Text strong className={styles.stepLabel}>
+                  3. 构建生产版本
+                </Text>
+                <div className={styles.codeBlock}>
+                  <code>pnpm build</code>
+                </div>
+              </div>
+            </Space>
+          </Card>
+
+          <Card
+            title={
+              <span className={styles.cardTitle}>
+                <GithubOutlined />
+                快捷链接
+              </span>
+            }
+            className={styles.panelCard}
+          >
+            <div className={styles.quickLinkGrid}>
+              {quickLinks.map((link, index) => (
+                <div key={index} className={styles.quickLink}>
+                  <div className={styles.quickLinkLabel}>{link.label}</div>
+                  <Text className={styles.quickLinkDescription}>
+                    {link.description}
+                  </Text>
+                </div>
+              ))}
+            </div>
+          </Card>
+
+          <Card className={cx(styles.panelCard, styles.textCenterCard)}>
+            <div className={styles.footerActions}>
+              <Space size="large" wrap>
+                <Button
+                  type="primary"
+                  size="large"
+                  icon={<RocketOutlined />}
+                  onClick={() => window.open("https://ant.design", "_blank")}
+                >
+                  查看 Ant Design 文档
+                </Button>
+                <Button
+                  size="large"
+                  icon={<BookOutlined />}
+                  onClick={() => window.open("https://react.dev", "_blank")}
+                >
+                  React 文档
+                </Button>
+                <Button
+                  size="large"
+                  onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+                >
+                  切换主题 ({theme === "dark" ? "🌙 暗色" : "☀️ 亮色"})
+                </Button>
+              </Space>
+              <Paragraph className={styles.footerParagraph}>
+                祝你开发愉快！如有问题，请查阅文档或联系技术支持 💪
+              </Paragraph>
+            </div>
+          </Card>
+        </Flex>
+      </div>
     </div>
   );
 }

package/dist/templates/app/src/routes.tsx

@@ -1,18 +1,27 @@
 import React, { lazy } from "react";
 import { createBrowserRouter, Navigate } from "react-router";
+import GlobalProvider from "@/layout/GlobalProvider";
 
 export const createRouter = (basename?: string) => {
-  return createBrowserRouter([
+  return createBrowserRouter(
+    [
+      {
+        path: "",
+        element: <GlobalProvider />,
+        children: [
+          {
+            path: "/",
+            element: <Navigate to="/base" replace />,
+          },
+          {
+            path: "/base",
+            Component: lazy(() => import("@/pages/base")),
+          },
+        ],
+      },
+    ],
     {
-      path: "/",
-      element: <Navigate to="/base" replace />,
-    },
-    {
-      path: "/base",
-      Component: lazy(() => import("@/pages/base")),
-    },
-  ], {
-    basename: basename || "/",
-  });
+      basename: basename || "/",
+    }
+  );
 };
-

package/dist/templates/app/src/types/global.d.ts

@@ -0,0 +1,19 @@
+import type { Env } from "@/config/env";
+
+declare global {
+  interface Window {
+    __GARFISH__?: boolean;
+    Garfish?: {
+      channel: {
+        emit: (event: string, data: any) => void;
+        on: (event: string, handler: (data: any) => void) => void;
+      };
+    };
+  }
+
+  namespace NodeJS {
+    interface ProcessEnv extends Env {}
+  }
+}
+
+export {};

package/dist/templates/app/src/utils/index.ts

@@ -1 +1,3 @@
-export * from "./getMicroApp";
+export * from "./convert";
+export * from "./locale";
+export * from "./copyToClipboard";

package/dist/templates/app/store/middleware/createDevtools.ts

@@ -1,23 +1,23 @@
-import { optionalDevtools } from 'zustand-utils';
-import type { devtools as _devtools } from 'zustand/middleware';
+import { optionalDevtools } from "zustand-utils";
+import type { devtools as _devtools } from "zustand/middleware";
 
-import { isDev } from '@/utils/env';
+import { isDev } from "@/config/env";
 
 export const createDevtools =
   (name: string): typeof _devtools =>
-  initializer => {
+  (initializer) => {
     let showDevtools = false;
 
     // check url to show devtools
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       const url = new URL(window.location.href);
-      const debug = url.searchParams.get('debug');
+      const debug = url.searchParams.get("debug");
       if (debug?.includes(name)) {
         showDevtools = true;
       }
     }
 
     return optionalDevtools(showDevtools)(initializer, {
-      name: `LobeChat_${name}${isDev ? '_DEV' : ''}`,
+      name: `LobeChat_${name}${isDev ? "_DEV" : ""}`,
     });
   };

package/dist/templates/app/tsconfig.json

@@ -11,7 +11,7 @@
     "strict": true, // 开启所有严格的类型检查
     "skipLibCheck": true, // 用来控制是否在编译时进行库文件检查的
     "target": "es5", // 目标语言的版本
-    "jsx": "react", // 控制如何在 JavaScript 文件中发出 JSX 构造。这只影响以.tsx files 开头的 JS 文件的输出
+    "jsx": "react-jsx", // 控制如何在 JavaScript 文件中发出 JSX 构造。这只影响以.tsx files 开头的 JS 文件的输出
     "lib": ["es5", "dom", "dom.iterable", "esnext"], // TypeScript 包含内置 JS API 的一组默认类型定义（如Math），以及浏览器环境中找到的内容的类型定义（如document)
     "paths": {
       "@/*": ["./src/*"],
@@ -22,6 +22,22 @@
     }, // 将导入重新映射到相对于baseUrlif 集或 tsconfig 文件本身的查找位置
     "types": ["jest", "node", "@testing-library/jest-dom"]
   },
-  "exclude": ["**/node_modules", "**/examples", "**/dist", "**/fixtures", "**/*.test.ts", "**/*.e2e.ts", "**/templates", "ui"], // 指定解析时应跳过的文件名或模式数组include。
-  "include": ["./src/**/*", "./store/**/*", "./react-app-env.d.ts", "config/router", "**/*.test.ts", "**/*.test.tsx"] // 指定要包含在程序中的文件名或模式的数组。这些文件名是相对于包含该tsconfig.json文件的目录进行解析的。
+  "exclude": [
+    "**/node_modules",
+    "**/examples",
+    "**/dist",
+    "**/fixtures",
+    "**/*.test.ts",
+    "**/*.e2e.ts",
+    "**/templates",
+    "ui"
+  ], // 指定解析时应跳过的文件名或模式数组include。
+  "include": [
+    "./src/**/*",
+    "./store/**/*",
+    "./react-app-env.d.ts",
+    "config/router",
+    "**/*.test.ts",
+    "**/*.test.tsx"
+  ] // 指定要包含在程序中的文件名或模式的数组。这些文件名是相对于包含该tsconfig.json文件的目录进行解析的。
 }