@4399ywkf/cli 1.0.8 → 1.0.9

package/dist/templates/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/index.tsx

@@ -11,14 +11,117 @@ import {
 import React from "react";
 import { createStyles } from "antd-style";
 
-const { Title, Paragraph, Text, Link } = Typography;
+const { Title, Paragraph, Text } = Typography;
 
-const useStyles = createStyles(({ css, token }) => ({
-  app: css`
+const px = (value: number | string) =>
+  typeof value === "number" ? `${value}px` : value;
+
+const useStyles = createStyles(({ token, css }) => ({
+  root: css`
     width: 100%;
-    height: 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() {
@@ -28,17 +131,17 @@ export default function BasePage() {
 
   const features = [
     {
-      icon: <ThunderboltOutlined className="text-4xl text-blue-500" />,
+      icon: <ThunderboltOutlined className={styles.heroIcon} />,
       title: "Rspack 构建",
       description: "基于 Rspack 的极速构建体验，开发效率翻倍",
     },
     {
-      icon: <BulbOutlined className="text-4xl text-yellow-500" />,
+      icon: <BulbOutlined className={styles.heroIcon} />,
       title: "React 19",
       description: "使用最新的 React 19 特性，享受并发渲染",
     },
     {
-      icon: <SettingOutlined className="text-4xl text-green-500" />,
+      icon: <SettingOutlined className={styles.heroIcon} />,
       title: "TypeScript",
       description: "完整的 TypeScript 支持，类型安全有保障",
     },
@@ -52,107 +155,94 @@ export default function BasePage() {
   ];
 
   return (
-    <div
-      className={cx(
-        styles.app,
-        "min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800 p-8"
-      )}
-    >
-      <div className="max-w-6xl mx-auto">
+    <div className={cx(styles.root)}>
+      <div className={styles.container}>
         <Flex vertical gap={12}>
-          {/* 头部欢迎区域 */}
-          <div className="text-center mb-12 animate-fade-in">
-            <div className="inline-block mb-4">
-              <RocketOutlined className="text-6xl text-blue-500 animate-bounce" />
+          <section className={styles.hero}>
+            <div>
+              <RocketOutlined className={styles.heroIcon} />
             </div>
-            <Title level={1} className="!mb-4">
+            <Title level={1} style={{ marginBottom: 16 }}>
               🎉 恭喜！项目创建成功
             </Title>
-            <Paragraph className="text-lg text-gray-600 dark:text-gray-300">
+            <Paragraph>
               你的项目已经准备就绪，现在可以开始开发了
             </Paragraph>
-            <Space size="middle" className="mt-4">
+            <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>
-          </div>
+          </section>
 
-          {/* 特性卡片 */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+          <div className={styles.featuresGrid}>
             {features.map((feature, index) => (
               <Card
                 key={index}
                 hoverable
-                className="text-center transition-all duration-300 hover:shadow-xl dark:bg-gray-800"
+                className={cx(styles.featureCard)}
+                bodyStyle={{ padding: 24 }}
               >
-                <div className="mb-4">{feature.icon}</div>
+                <div className={styles.featureIcon}>{feature.icon}</div>
                 <Title level={4}>{feature.title}</Title>
-                <Paragraph className="text-gray-600 dark:text-gray-400">
-                  {feature.description}
-                </Paragraph>
+                <Paragraph type="secondary">{feature.description}</Paragraph>
               </Card>
             ))}
           </div>
 
-          {/* 快速开始 */}
           <Card
             title={
-              <span className="text-xl">
-                <BookOutlined className="mr-2" />
+              <span className={styles.cardTitle}>
+                <BookOutlined />
                 快速开始
               </span>
             }
-            className="mb-8 dark:bg-gray-800"
+            className={styles.panelCard}
           >
-            <Space direction="vertical" size="large" className="w-full">
+            <Space direction="vertical" size="large">
               <div>
-                <Text strong className="text-base">
+                <Text strong className={styles.stepLabel}>
                   1. 安装依赖
                 </Text>
-                <div className="mt-2 p-4 bg-gray-100 dark:bg-gray-900 rounded-lg font-mono text-sm">
+                <div className={styles.codeBlock}>
                   <code>pnpm install</code>
                 </div>
               </div>
               <div>
-                <Text strong className="text-base">
+                <Text strong className={styles.stepLabel}>
                   2. 启动开发服务器
                 </Text>
-                <div className="mt-2 p-4 bg-gray-100 dark:bg-gray-900 rounded-lg font-mono text-sm">
+                <div className={styles.codeBlock}>
                   <code>pnpm dev</code>
                 </div>
               </div>
               <div>
-                <Text strong className="text-base">
+                <Text strong className={styles.stepLabel}>
                   3. 构建生产版本
                 </Text>
-                <div className="mt-2 p-4 bg-gray-100 dark:bg-gray-900 rounded-lg font-mono text-sm">
+                <div className={styles.codeBlock}>
                   <code>pnpm build</code>
                 </div>
               </div>
             </Space>
           </Card>
 
-          {/* 快捷链接 */}
           <Card
             title={
-              <span className="text-xl">
-                <GithubOutlined className="mr-2" />
+              <span className={styles.cardTitle}>
+                <GithubOutlined />
                 快捷链接
               </span>
             }
-            className="mb-8 dark:bg-gray-800"
+            className={styles.panelCard}
           >
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className={styles.quickLinkGrid}>
               {quickLinks.map((link, index) => (
-                <div
-                  key={index}
-                  className="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
-                >
-                  <div className="text-2xl mb-2">{link.label}</div>
-                  <Text className="text-sm text-gray-600 dark:text-gray-400">
+                <div key={index} className={styles.quickLink}>
+                  <div className={styles.quickLinkLabel}>{link.label}</div>
+                  <Text className={styles.quickLinkDescription}>
                     {link.description}
                   </Text>
                 </div>
@@ -160,34 +250,35 @@ export default function BasePage() {
             </div>
           </Card>
 
-          {/* 底部操作区 */}
-          <Card className="text-center dark:bg-gray-800">
-            <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="mt-6 text-gray-500 dark:text-gray-400">
-              祝你开发愉快！如有问题，请查阅文档或联系技术支持 💪
-            </Paragraph>
+          <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>

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