@4399ywkf/cli 1.0.7 → 1.0.9

package/dist/templates/scripts/i18nWorkflow/utils.ts

@@ -0,0 +1,76 @@
+import { consola } from "consola";
+import { colors } from "consola/utils";
+import { readFileSync, writeFileSync, mkdirSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import prettier from "@prettier/sync";
+import i18nConfig from "./i18nConfig";
+
+let prettierOptions = prettier.resolveConfig(
+  resolve(__dirname, "../../.prettierrc.js"),
+);
+
+export const readJSON = (filePath: string) => {
+  const data = readFileSync(filePath, "utf8");
+  return JSON.parse(data);
+};
+
+export const writeJSON = (filePath: string, data: any) => {
+  const jsonStr = JSON.stringify(data, null, 2);
+  writeFileSync(filePath, jsonStr, "utf8");
+};
+
+export const writeJSONWithPrettier = (filePath: string, data: any) => {
+  mkdirSync(dirname(filePath), { recursive: true });
+  const jsonStr = JSON.stringify(data, null, 2);
+  const formatted = prettier.format(jsonStr, {
+    ...prettierOptions,
+    parser: "json",
+  });
+  writeFileSync(filePath, formatted, "utf8");
+};
+
+export const genResourcesContent = (locales: string[]) => {
+  let index = "";
+  let indexObj = "";
+
+  for (const locale of locales) {
+    index += `import ${locale} from "./${locale}";\n`;
+    indexObj += `   "${locale.replace("_", "-")}": ${locale},\n`;
+  }
+
+  return `${index}
+const resources = {
+${indexObj}} as const;
+export default resources;
+export const defaultResources = ${i18nConfig.entryLocale};
+export type Resources = typeof resources;
+export type DefaultResources = typeof defaultResources;
+export type Namespaces = keyof DefaultResources;
+export type Locales = keyof Resources;
+`;
+};
+
+export const genNamespaceList = (files: string[], locale: string) => {
+  return files.map((file) => ({
+    name: file.replace(".json", ""),
+    path: resolve(i18nConfig.output, locale, file),
+  }));
+};
+
+export const tagBlue = (text: string) =>
+  colors.bgBlueBright(colors.black(` ${text} `));
+export const tagYellow = (text: string) =>
+  colors.bgYellowBright(colors.black(` ${text} `));
+export const tagGreen = (text: string) =>
+  colors.bgGreenBright(colors.black(` ${text} `));
+export const tagWhite = (text: string) =>
+  colors.bgWhiteBright(colors.black(` ${text} `));
+
+export const split = (name: string) => {
+  consola.log("");
+  consola.log(
+    colors.gray(
+      `========================== ${name} ==============================`,
+    ),
+  );
+};

package/dist/templates/src/bootstrap/index.ts

@@ -0,0 +1,34 @@
+import "dayjs/locale/zh-cn";
+import dayjs from "dayjs";
+import { ConfigProvider } from "antd";
+import { env } from "@/config/env";
+
+interface BootstrapConfig {
+  appName: string;
+}
+
+/**
+ * 应用启动前的初始化配置
+ */
+export function bootstrap(config: BootstrapConfig) {
+  const { appName } = config;
+
+  // 配置 dayjs 国际化
+  dayjs.locale("zh-cn");
+
+  // 配置 antd 静态方法的前缀
+  ConfigProvider.config({
+    prefixCls: appName,
+  });
+
+  console.log(`✅ Application [${appName}] bootstrapped successfully`);
+}
+
+/**
+ * 使用环境变量初始化应用
+ */
+export function bootstrapWithEnv() {
+  bootstrap({
+    appName: env.APP_NAME,
+  });
+}

package/dist/templates/src/components/AntdStaticMethods/index.tsx

@@ -0,0 +1,20 @@
+// Entry component
+import { App } from 'antd';
+import type { MessageInstance } from 'antd/es/message/interface';
+import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import { memo } from 'react';
+
+let message: MessageInstance;
+let notification: NotificationInstance;
+let modal: Omit<ModalStaticFunctions, 'warn'>;
+
+export default memo(() => {
+  const staticFunction = App.useApp();
+  message = staticFunction.message;
+  modal = staticFunction.modal;
+  notification = staticFunction.notification;
+  return null;
+});
+
+export { message, modal, notification };

package/dist/templates/src/config/env.ts

@@ -0,0 +1,84 @@
+import { z } from "zod";
+
+/**
+ * 环境变量 Schema 定义
+ */
+const envSchema = z.object({
+  // Node 环境
+  NODE_ENV: z
+    .enum(["development", "test", "testDevelopment", "production"])
+    .default("development"),
+
+  // 应用配置
+  APP_NAME: z.string().min(1, "应用名称不能为空").default("app"),
+  APP_CNAME: z.string().default("应用"),
+  BASENAME: z.string().optional(),
+
+  // API 配置
+  API_PREFIX: z.string().default("/api"),
+  API_TIMEOUT: z
+    .string()
+    .transform(Number)
+    .pipe(z.number().positive())
+    .default(30000),
+
+  // Cookie 配置
+  COOKIE_NAME: z.string().default("access_token"),
+
+  // 其他配置
+  HELP_CENTER_URL: z.string().url().optional(),
+  OUTPUT_PATH: z.string().default("dist"),
+  PUBLIC_PATH: z.string().default("/"),
+});
+
+/**
+ * 安全解析环境变量（开发模式下使用默认值）
+ */
+function safeParseEnv() {
+  const result = envSchema.safeParse(process.env);
+
+  if (!result.success) {
+    if (process.env.NODE_ENV === "production") {
+      // 生产环境严格校验
+      console.error("❌ 环境变量验证失败:");
+      result.error.issues.forEach((err) => {
+        console.error(`  - ${err.path.join(".")}: ${err.message}`);
+      });
+      throw new Error("环境变量配置错误");
+    } else {
+      // 开发环境警告但不中断
+      console.warn("⚠️ 环境变量验证警告:");
+      result.error.issues.forEach((err) => {
+        console.warn(`  - ${err.path.join(".")}: ${err.message}`);
+      });
+    }
+  }
+
+  return result.success ? result.data : envSchema.parse({});
+}
+
+/**
+ * 导出类型安全的环境变量
+ */
+export const env = safeParseEnv();
+
+/**
+ * 环境变量类型
+ */
+export type Env = z.infer<typeof envSchema>;
+
+/**
+ * 工具函数：判断是否为开发环境
+ */
+export const isDev = env.NODE_ENV === "development";
+
+/**
+ * 工具函数：判断是否为生产环境
+ */
+export const isProd = env.NODE_ENV === "production";
+
+/**
+ * 工具函数：判断是否为测试环境
+ */
+export const isTest =
+  env.NODE_ENV === "test" || env.NODE_ENV === "testDevelopment";

package/dist/templates/src/index.tsx

@@ -1,53 +1,15 @@
-import "dayjs/locale/zh-cn";
-
-import { renderClient } from "@config/router";
-import { ConfigProvider } from "antd";
-import dayjs from "dayjs";
-import React from "react";
-
-import { createRouter } from "@/routes";
-import { openUpdateVersionNotify } from "@/utils/updateVersion";
-
-dayjs.locale("zh-cn");
-
 import "./index.css";
-
-const AppName = process.env.APP_NAME ?? "";
-const BASENAME = process.env.BASENAME;
-const VERSION_NOTIFY_TIME = process.env.VERSION_NOTIFY_TIME;
-
-// 配置antd 静态方法使用的
-ConfigProvider.config({
-  prefixCls: AppName,
-});
-
-const context = {
-  basename: BASENAME,
-  rootElement: document.getElementById(AppName) ?? document.body,
-};
-
-openUpdateVersionNotify(Number(VERSION_NOTIFY_TIME));
-
-// 子应用接入
-export const provider = () => {
-  let root: any = null;
-  return {
-    destroy() {
-      root?.unmount();
-    },
-    render({ basename }) {
-      // 更改basename的值
-      context.basename = basename;
-      root = renderClient(context);
-      window.Garfish.channel.emit("router", {
-        name: AppName,
-        routes: createRouter(basename),
-      });
-    },
-  };
-};
-
-// 添加单独启动逻辑
-if (!window.__GARFISH__) {
-  renderClient(context);
+import { renderClient } from "@config/router";
+import { createGarfishProvider, isMicroApp } from "@/micro/garfish";
+import { env } from "@/config/env";
+
+// 微前端模式：导出 Garfish 生命周期
+export const provider = createGarfishProvider(env.APP_NAME);
+
+// 独立运行模式：直接渲染
+if (!isMicroApp()) {
+  renderClient({
+    basename: env.BASENAME,
+    rootElement: document.getElementById(env.APP_NAME) ?? document.body,
+  });
 }

package/dist/templates/src/layout/GlobalProvider/AppTheme.tsx

@@ -0,0 +1,136 @@
+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 { SYSTEM_PREFIX } from "@/const/system";
+import { GlobalStyle } from "@/styles";
+import { useUserStore } from "@store/user";
+import { createStaticStyles, cx } from "antd-style";
+import HarmonyOS_Sans_Regular from "@public/fonts/HarmonyOS_Sans_Regular.woff2";
+import AntdStaticMethods from "@/components/AntdStaticMethods";
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  app: css`
+    position: relative;
+
+    overscroll-behavior: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    height: 100%;
+    min-height: 100dvh;
+    max-height: 100dvh;
+
+    @media (min-device-width: 576px) {
+      overflow: hidden;
+    }
+  `,
+  // scrollbar-width and scrollbar-color are supported from Chrome 121
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
+  scrollbar: css`
+    scrollbar-color: ${cssVar.colorFill} transparent;
+    scrollbar-width: thin;
+
+    #lobe-mobile-scroll-container {
+      scrollbar-width: none;
+
+      ::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
+    }
+  `,
+
+  // so this is a polyfill for older browsers
+  scrollbarPolyfill: css`
+    ::-webkit-scrollbar {
+      width: 0.75em;
+      height: 0.75em;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+    }
+
+    :hover::-webkit-scrollbar-thumb {
+      border: 3px solid transparent;
+      background-color: ${cssVar.colorText};
+      background-clip: content-box;
+    }
+
+    ::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+  `,
+}));
+
+interface AppThemeProps {
+  children: ReactNode;
+}
+
+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);
+
+  useEffect(() => {
+    // Update data-theme accordingly if user selects light or dark
+    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)");
+
+    // Set initial theme based on system preference
+    document.documentElement.dataset.theme = mediaQuery.matches
+      ? "dark"
+      : "light";
+
+    // Update theme when system preference changes
+    function handleChange(e) {
+      document.documentElement.dataset.theme = e.matches ? "dark" : "light";
+    }
+
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [themeMode]);
+
+  return (
+    <ThemeProvider
+      prefixCls={SYSTEM_PREFIX}
+      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,
+        },
+      }}
+      themeMode={themeMode}
+      onAppearanceChange={(appearance) => {
+        if (themeMode !== "auto") return;
+
+        setCookie(CLOUD_THEME_APPEARANCE, appearance);
+      }}
+    >
+      {children}
+      <AntdStaticMethods />
+      <GlobalStyle />
+    </ThemeProvider>
+  );
+});
+
+export default AppTheme;

package/dist/templates/src/layout/GlobalProvider/Locale.tsx

@@ -0,0 +1,84 @@
+import { ConfigProvider } from 'antd';
+import dayjs from 'dayjs';
+import { type PropsWithChildren, memo, useEffect, useState } from 'react';
+import { isRtlLang } from 'rtl-detect';
+
+import { createI18nNext } from '@/locales/create';
+import { getAntdLocale } from '@/utils/locale';
+
+
+const updateDayjs = async (lang: string) => {
+  let dayJSLocale;
+  try {
+    // dayjs locale is using `en` instead of `en-US`
+    // refs: https://github.com/lobehub/lobe-chat/issues/3396
+    const locale = lang!.toLowerCase() === 'en-us' ? 'en' : lang!.toLowerCase();
+
+    dayJSLocale = await import(`dayjs/locale/${locale}.js`);
+  } catch {
+    console.warn(`dayjs locale for ${lang} not found, fallback to en`);
+    dayJSLocale = await import(`dayjs/locale/en.js`);
+  }
+
+  dayjs.locale(dayJSLocale.default);
+};
+
+interface LocaleLayoutProps extends PropsWithChildren {
+  antdLocale?: any;
+  defaultLang?: string;
+}
+
+const Locale = memo<LocaleLayoutProps>(({ children, defaultLang, antdLocale }) => {
+  const [i18n] = useState(() => createI18nNext(defaultLang));
+  const [lang, setLang] = useState(defaultLang);
+  const [locale, setLocale] = useState(antdLocale);
+
+  if (!i18n.instance.isInitialized)
+      i18n.init().then(async () => {
+        if (!lang) return;
+
+        await updateDayjs(lang);
+      });
+
+  // handle i18n instance language change
+  useEffect(() => {
+    const handleLang = async (lng: string) => {
+      setLang(lng);
+
+      if (lang === lng) return;
+
+      const newLocale = await getAntdLocale(lng);
+      setLocale(newLocale);
+
+      await updateDayjs(lng);
+    };
+
+    i18n.instance.on('languageChanged', handleLang);
+    return () => {
+      i18n.instance.off('languageChanged', handleLang);
+    };
+  }, [i18n, lang]);
+
+  // detect document direction
+  const documentDir = isRtlLang(lang!) ? 'rtl' : 'ltr';
+
+  return (
+    <ConfigProvider
+      direction={documentDir}
+      locale={locale}
+      theme={{
+        components: {
+          Button: {
+            contentFontSizeSM: 12,
+          },
+        },
+      }}
+    >
+      {children}
+    </ConfigProvider>
+  );
+});
+
+Locale.displayName = 'Locale';
+
+export default Locale;

package/dist/templates/src/layout/GlobalProvider/Query.tsx

@@ -0,0 +1,12 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React, { type PropsWithChildren, useEffect, useState } from 'react';
+
+const QueryProvider = ({ children }: PropsWithChildren) => {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+export default QueryProvider;

package/dist/templates/src/layout/GlobalProvider/StyleRegistry.tsx

@@ -0,0 +1,9 @@
+import { StyleProvider } from 'antd-style';
+import { type PropsWithChildren } from 'react';
+
+
+const StyleRegistry = ({ children }: PropsWithChildren) => {
+  return <StyleProvider>{children}</StyleProvider>;
+};
+
+export default StyleRegistry;

package/dist/templates/src/layout/GlobalProvider/index.tsx

@@ -0,0 +1,23 @@
+import StyleRegistry from "./StyleRegistry";
+import AppTheme from "./AppTheme";
+import QueryProvider from "./Query";
+import Locale from "./Locale";
+import { Outlet } from "react-router";
+
+interface GlobalProviderProps {
+
+}
+
+export default function GlobalProvider({  }: GlobalProviderProps) {
+  return (
+    <StyleRegistry>
+      <Locale>
+        <AppTheme>
+          <QueryProvider>
+            <Outlet />
+          </QueryProvider>
+        </AppTheme>
+      </Locale>
+    </StyleRegistry>
+  );
+}

package/dist/templates/src/layout/Locale.tsx

@@ -1,17 +1,17 @@
-import { ConfigProvider } from 'antd';
-import type { Locale as AntdLocale } from 'antd/es/locale';
-import dayjs from 'dayjs';
+import { ConfigProvider } from "antd";
+import type { Locale as AntdLocale } from "antd/es/locale";
+import dayjs from "dayjs";
 import React, {
   type PropsWithChildren,
   memo,
   useEffect,
   useState,
-} from 'react';
+} from "react";
 
-import { isRtlLang } from 'rtl-detect';
+import { isRtlLang } from "rtl-detect";
 
-import { createI18nNext } from '@/locales/create';
-import { getAntdLocale } from '@/utils/locale';
+import { createI18nNext } from "@/locales/create";
+import { getAntdLocale } from "@/utils/locale";
 
 const updateDayjs = async (lang: string) => {
   // load default lang
@@ -19,12 +19,12 @@ const updateDayjs = async (lang: string) => {
   try {
     // dayjs locale is using `en` instead of `en-US`
     // refs: https://github.com/lobehub/lobe-chat/issues/3396
-    const locale = lang.toLowerCase() === 'en-us' ? 'en' : lang.toLowerCase();
+    const locale = lang.toLowerCase() === "en-us" ? "en" : lang.toLowerCase();
 
     dayJSLocale = await import(`dayjs/locale/${locale}.js`);
   } catch {
     console.warn(`dayjs locale for ${lang} not found, fallback to en`);
-    dayJSLocale = await import('dayjs/locale/en.js');
+    dayJSLocale = await import("dayjs/locale/en.js");
   }
 
   dayjs.locale(dayJSLocale.default);
@@ -41,8 +41,6 @@ const Locale = memo<LocaleLayoutProps>(
     const [lang, setLang] = useState(defaultLang);
     const [locale, setLocale] = useState(antdLocale);
 
-    console.log(antdLocale, defaultLang);
-
     // if on browser side, init i18n instance only once
     if (!i18n.instance.isInitialized)
       // console.debug('locale', lang);
@@ -65,25 +63,23 @@ const Locale = memo<LocaleLayoutProps>(
         await updateDayjs(lng);
       };
 
-      i18n.instance.on('languageChanged', handleLang);
+      i18n.instance.on("languageChanged", handleLang);
       return () => {
-        i18n.instance.off('languageChanged', handleLang);
+        i18n.instance.off("languageChanged", handleLang);
       };
     }, [i18n, lang]);
 
     // detect document direction
-    const documentDir = isRtlLang(lang) ? 'rtl' : 'ltr';
-
-    console.log(documentDir, locale);
+    const documentDir = isRtlLang(lang) ? "rtl" : "ltr";
 
     return (
       <ConfigProvider direction={documentDir} locale={locale as AntdLocale}>
         {children}
       </ConfigProvider>
     );
-  },
+  }
 );
 
-Locale.displayName = 'Locale';
+Locale.displayName = "Locale";
 
 export default Locale;

package/dist/templates/src/layout/MainContentWrap.tsx

@@ -1,19 +1,15 @@
-import { ConfigProvider, theme } from 'antd';
-import type { Locale as AntdLocale } from 'antd/es/locale';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Outlet } from 'react-router';
-import '../index.css';
-import { DEFAULT_LANG } from '@/const/locale';
-import { useRouteTitle } from '@/hooks/useRouteTitle';
-import { getAntdLocale } from '@/utils/locale';
-import queryString from 'query-string';
-import Locale from './Locale';
-import AppTheme from './ThemeContext';
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Outlet } from "react-router";
+import "../index.css";
+import { DEFAULT_LANG } from "@/const/locale";
+import { getAntdLocale } from "@/utils";
+import queryString from "query-string";
+import Locale from "./Locale";
+import AppTheme from "./ThemeContext";
 
 export const MainContentWrap = () => {
-  useRouteTitle();
   const [antdLocale, setAntdLocale] = useState<unknown>(null);
   const [isLocaleLoaded, setIsLocaleLoaded] = useState(false);
 
@@ -32,11 +28,11 @@ export const MainContentWrap = () => {
     const loadLocale = async () => {
       try {
         const loadedLocale = await getAntdLocale(
-          (lang as string) ?? DEFAULT_LANG,
+          (lang as string) ?? DEFAULT_LANG
         );
         setAntdLocale(loadedLocale);
       } catch (error) {
-        console.error('Failed to load locale:', error);
+        console.error("Failed to load locale:", error);
         // 保持默认的中文 locale
       } finally {
         setIsLocaleLoaded(true);