@4399ywkf/cli 1.0.7 → 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

@@ -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/interceptors.ts

@@ -0,0 +1,118 @@
+import type {
+  AxiosInstance,
+  InternalAxiosRequestConfig,
+  AxiosResponse,
+} from "axios";
+import { message as antdMessage } from "antd";
+import type { TokenManager, RequestConfig, ApiResponse } from "./types";
+import type { ErrorHandler } from "./error-handler";
+
+/**
+ * 设置请求拦截器
+ */
+export function setupRequestInterceptor(
+  instance: AxiosInstance,
+  tokenManager: TokenManager
+): void {
+  instance.interceptors.request.use(
+    (config: InternalAxiosRequestConfig) => {
+      const requestConfig = config as RequestConfig;
+
+      // 添加 Token（如果需要认证，默认为 true）
+      if (requestConfig.requireAuth !== false) {
+        const token = tokenManager.getToken();
+        if (token && config.headers) {
+          config.headers.Authorization = token;
+        }
+      }
+
+      // 添加自定义 Headers
+      if (requestConfig.customHeaders && config.headers) {
+        Object.entries(requestConfig.customHeaders).forEach(([key, value]) => {
+          config.headers[key] = value;
+        });
+      }
+
+      return config;
+    },
+    (error) => {
+      return Promise.reject(error);
+    }
+  );
+}
+
+/**
+ * 设置响应拦截器
+ */
+export function setupResponseInterceptor(
+  instance: AxiosInstance,
+  tokenManager: TokenManager,
+  errorHandler: ErrorHandler,
+  onUnauthorized?: () => void
+): void {
+  instance.interceptors.response.use(
+    (response: AxiosResponse<ApiResponse>) => {
+      const config = response.config as RequestConfig;
+      const messageConfig = config.message;
+
+      const { code, message: msg, data } = response.data;
+
+      // 业务成功（根据实际后端约定调整）
+      if (code === 0 || code === 200) {
+        // 显示成功消息
+        if (messageConfig?.showSuccess) {
+          const successMsg = messageConfig.successMessage || msg || "操作成功";
+          antdMessage.success(successMsg);
+        }
+
+        // 直接返回 data，简化调用
+        return response.data;
+      }
+
+      // 业务失败
+      const errorMsg = messageConfig?.errorMessage || msg || "操作失败";
+
+      if (messageConfig?.showError !== false) {
+        antdMessage.error(errorMsg);
+      }
+
+      return Promise.reject(new Error(errorMsg));
+    },
+    async (error) => {
+      const config = error.config as RequestConfig;
+
+      // 401 未授权
+      if (error.response?.status === 401) {
+        tokenManager.clearToken();
+
+        // 执行自定义的未授权回调
+        if (onUnauthorized) {
+          onUnauthorized();
+        } else {
+          // 默认跳转到登录页
+          redirectToLogin();
+        }
+
+        return Promise.reject(error);
+      }
+
+      // 其他错误统一处理
+      errorHandler.handle(error, config);
+
+      return Promise.reject(error);
+    }
+  );
+}
+
+/**
+ * 重定向到登录页
+ */
+function redirectToLogin(): void {
+  if (typeof window === "undefined") return;
+
+  const currentPath = window.location.pathname;
+  if (currentPath === "/login") return;
+
+  const redirectUrl = encodeURIComponent(window.location.href);
+  window.location.href = `${window.location.origin}/login?redirect=${redirectUrl}`;
+}

package/dist/templates/jwt/index.ts

@@ -20,12 +20,12 @@ export default class jwt {
   }
 
   // 获取访问令牌
-  static getAccessToken(accessTokenKey: string) {
-    return Cookies.get(accessTokenKey);
+  static getAccessToken(accessTokenKey?: string) {
+    return Cookies.get(accessTokenKey ?? this.key);
   }
 
   // 清空访问令牌
-  static clearAccessToken(accessTokenKey: string) {
-    Cookies.remove(accessTokenKey);
+  static clearAccessToken(accessTokenKey?: string) {
+    Cookies.remove(accessTokenKey ?? this.key);
   }
 }

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;