@4399ywkf/cli 1.0.7 → 1.0.9

package/dist/templates/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/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/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/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/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/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);

package/dist/templates/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/locales/default/common.ts

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

package/dist/templates/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/locales/zh-CN/common.json

@@ -0,0 +1,3 @@
+{
+  "appName": "Chat应用"
+}

package/dist/templates/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/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/package.json.tpl

@@ -8,11 +8,10 @@
     "dev:test": "cross-env NODE_ENV=testDevelopment rspack serve --config config/rspack/rspack.dev.mjs",
     "build:test": "cross-env NODE_ENV=test rspack build --config config/rspack/rspack.prod.mjs --mode production",
     "build": "cross-env NODE_ENV=production rspack build --config config/rspack/rspack.prod.mjs --mode production",
-    "test": "jest",
     "lint": "biome check",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
     "prepare": "husky install",
+    "i18n": "npm run workflow:i18n && lobe-i18n && prettier -c --write \"locales/**\"",
+    "workflow:i18n": "tsx ./scripts/i18nWorkflow/index.ts",
     "test:ci": "jest --coverage --watchAll=false"
   },
   "engines": {
@@ -29,7 +28,7 @@
     "@tanstack/react-query": "^5.80.6",
     "ahooks": "^3.8.5",
     "antd": "^6.1.1",
-    "antd-style": "^3.7.1",
+    "antd-style": "^4.0.0",
     "clsx": "^2.1.1",
     "copy-webpack-plugin": "^13.0.1",
     "dayjs": "^1.11.13",
@@ -53,26 +52,16 @@
     "resolve-accept-language": "^3.1.11",
     "rtl-detect": "^1.1.2",
     "rxjs": "^7.8.2",
-    "styled-components": "^5.3.11",
     "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.8",
     "universal-cookie": "^8.0.1",
     "url-join": "^5.0.0",
     "uuid": "^11.0.3",
+    "zod": "^4.2.1",
     "zustand": "^5.0.5",
     "zustand-utils": "^2.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.0",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-decorators": "^7.25.9",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.25.9",
-    "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
-    "@babel/runtime": "^7.26.0",
-    "@babel/runtime-corejs3": "^7.26.0",
     "@biomejs/biome": "2.3.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@rsdoctor/rspack-plugin": "^1.3.8",
@@ -80,16 +69,13 @@
     "@rspack/cli": "^1.1.8",
     "@rspack/core": "^1.1.8",
     "@svgr/webpack": "^7.0.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.14",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.9.0",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
     "@types/react-resizable": "^3.0.8",
-    "@types/styled-components": "^5.1.34",
+    "@prettier/sync": "^0.6.1",
+    "@lobehub/i18n-cli": "^1.26.0",
     "assert": "^2.1.0",
     "autoprefixer": "^10.4.20",
     "axios": "^1.6.8",
@@ -97,6 +83,7 @@
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",
     "chokidar": "^4.0.3",
+    "consola": "^3.4.2",
     "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^7.0.3",
     "crypto-browserify": "^3.12.1",
@@ -109,10 +96,6 @@
     "globals": "^16.3.0",
     "html-webpack-plugin": "^5.6.3",
     "husky": "^9.1.7",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "30.0.0-beta.3",
-    "jiti": "^2.5.1",
-    "js-cookie": "^2.2.1",
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
     "lint-staged": "^16.1.6",
@@ -130,11 +113,11 @@
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.4",
     "terser-webpack-plugin": "^5.3.11",
-    "ts-jest": "^29.3.4",
     "ts-loader": "^9.5.1",
     "typescript": "^5.6.3",
     "url": "^0.11.4",
     "util": "^0.12.5",
+    "tsx": "^4.21.0",
     "webpack-merge": "^6.0.1"
   },
   "lint-staged": {

package/dist/templates/page.tsx

@@ -1,25 +1,27 @@
-import { useThemeStore } from '@store/theme';
-import { Button } from 'antd';
+import UnFindPng from '@config/public/404.png';
+import { Button, Empty } from 'antd';
 import React from 'react';
+import { useNavigate } from 'react-router';
 
-export default function BasePage() {
-  const theme = useThemeStore(state => state.theme);
-  const setTheme = useThemeStore(state => state.setTheme);
+export const UnPageFind = () => {
+  const navigate = useNavigate();
 
   return (
-    <>
-      <Button type="primary">antd按钮</Button>
-      <button
-        type="button"
-        className={
-          ' dark:text-red-600 dark:bg-[var(--tailwindssantd-color-primary)] bg-[var(--tailwindssantd-color-primary)]'
+    <div className='p-4 w-full h-full relative flex justify-center items-center'>
+      <Empty
+        image={UnFindPng}
+        description={
+          <div className='flex flex-col gap-2 justify-center items-center'>
+            <h2>抱歉，页面无法访问…</h2>
+            <span>404，网址错误或已失效。请检查网址。</span>
+            <Button size={'large'} type={'primary'} className='w-24' onClick={() => navigate('/')}>
+              返回首页
+            </Button>
+          </div>
         }
-      >
-        tailwind按钮
-      </button>
-      <button type="button" onClick={() => setTheme('dark')}>
-        切换主题({theme})
-      </button>
-    </>
+      ></Empty>
+    </div>
   );
-}
+};
+
+export default UnPageFind;