@4399ywkf/cli 1.0.6 → 1.0.8

package/dist/templates/error-handler.ts

@@ -0,0 +1,67 @@
+import { message as antdMessage } from "antd";
+import type { AxiosError } from "axios";
+import type { RequestConfig, ApiResponse } from "./types";
+
+/**
+ * 错误处理器
+ */
+export class ErrorHandler {
+  /**
+   * 处理请求错误
+   */
+  handle(error: any, config?: RequestConfig): void {
+    const messageConfig = config?.message;
+
+    // 如果明确禁用错误提示
+    if (messageConfig?.showError === false) {
+      return;
+    }
+
+    const axiosError = error as AxiosError<ApiResponse>;
+    let errorMessage = messageConfig?.errorMessage;
+
+    // 如果没有自定义错误消息，使用默认逻辑
+    if (!errorMessage) {
+      if (axiosError.response) {
+        const { status, data } = axiosError.response;
+
+        // 优先使用后端返回的消息
+        errorMessage = data?.message;
+
+        // 如果后端没有返回消息，使用默认消息
+        if (!errorMessage) {
+          errorMessage = this.getDefaultErrorMessage(status);
+        }
+      } else if (axiosError.request) {
+        errorMessage = "网络错误，请检查您的网络连接";
+      } else {
+        errorMessage = axiosError.message || "请求失败";
+      }
+    }
+
+    // 显示错误提示
+    antdMessage.error(errorMessage);
+  }
+
+  /**
+   * 获取默认错误消息
+   */
+  private getDefaultErrorMessage(status: number): string {
+    const errorMessages: Record<number, string> = {
+      400: "请求参数错误",
+      401: "未授权，请重新登录",
+      403: "拒绝访问",
+      404: "请求的资源不存在",
+      405: "请求方法不允许",
+      408: "请求超时",
+      500: "服务器内部错误",
+      502: "网关错误",
+      503: "服务暂时不可用",
+      504: "网关超时",
+    };
+
+    return errorMessages[status] || `请求失败 (${status})`;
+  }
+}
+
+export const errorHandler = new ErrorHandler();

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

@@ -1,32 +1,196 @@
-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, Link } = Typography;
+
+const useStyles = createStyles(({ css, token }) => ({
+  app: css`
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  `,
+}));
+
+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="text-4xl text-blue-500" />,
+      title: "Rspack 构建",
+      description: "基于 Rspack 的极速构建体验，开发效率翻倍",
     },
-    '&:active': {
-      backgroundColor: token.colorPrimaryActive,
+    {
+      icon: <BulbOutlined className="text-4xl text-yellow-500" />,
+      title: "React 19",
+      description: "使用最新的 React 19 特性，享受并发渲染",
     },
-  },
-}));
+    {
+      icon: <SettingOutlined className="text-4xl text-green-500" />,
+      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.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">
+        <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" />
+            </div>
+            <Title level={1} className="!mb-4">
+              🎉 恭喜！项目创建成功
+            </Title>
+            <Paragraph className="text-lg text-gray-600 dark:text-gray-300">
+              你的项目已经准备就绪，现在可以开始开发了
+            </Paragraph>
+            <Space size="middle" className="mt-4">
+              <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>
+
+          {/* 特性卡片 */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+            {features.map((feature, index) => (
+              <Card
+                key={index}
+                hoverable
+                className="text-center transition-all duration-300 hover:shadow-xl dark:bg-gray-800"
+              >
+                <div className="mb-4">{feature.icon}</div>
+                <Title level={4}>{feature.title}</Title>
+                <Paragraph className="text-gray-600 dark:text-gray-400">
+                  {feature.description}
+                </Paragraph>
+              </Card>
+            ))}
+          </div>
+
+          {/* 快速开始 */}
+          <Card
+            title={
+              <span className="text-xl">
+                <BookOutlined className="mr-2" />
+                快速开始
+              </span>
+            }
+            className="mb-8 dark:bg-gray-800"
+          >
+            <Space direction="vertical" size="large" className="w-full">
+              <div>
+                <Text strong className="text-base">
+                  1. 安装依赖
+                </Text>
+                <div className="mt-2 p-4 bg-gray-100 dark:bg-gray-900 rounded-lg font-mono text-sm">
+                  <code>pnpm install</code>
+                </div>
+              </div>
+              <div>
+                <Text strong className="text-base">
+                  2. 启动开发服务器
+                </Text>
+                <div className="mt-2 p-4 bg-gray-100 dark:bg-gray-900 rounded-lg font-mono text-sm">
+                  <code>pnpm dev</code>
+                </div>
+              </div>
+              <div>
+                <Text strong className="text-base">
+                  3. 构建生产版本
+                </Text>
+                <div className="mt-2 p-4 bg-gray-100 dark:bg-gray-900 rounded-lg font-mono text-sm">
+                  <code>pnpm build</code>
+                </div>
+              </div>
+            </Space>
+          </Card>
+
+          {/* 快捷链接 */}
+          <Card
+            title={
+              <span className="text-xl">
+                <GithubOutlined className="mr-2" />
+                快捷链接
+              </span>
+            }
+            className="mb-8 dark:bg-gray-800"
+          >
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              {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">
+                    {link.description}
+                  </Text>
+                </div>
+              ))}
+            </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>
+        </Flex>
+      </div>
     </div>
   );
 }

package/dist/templates/initialState.ts

@@ -1,14 +1,32 @@
-import type { User } from '@/types/user';
+export type AnimationMode = "disabled" | "agile" | "elegant";
+export type ResponseAnimationStyle = "smooth" | "fadeIn" | "none";
+export type ThemeMode = "auto" | "dark" | "light";
+import type {
+  HighlighterProps,
+  MermaidProps,
+  NeutralColors,
+  PrimaryColors,
+} from "@/styles";
 
-export interface UserProfileState {
-  user?: User;
+export interface UserSettingsState {
+  animationMode?: AnimationMode;
+  neutralColor?: NeutralColors;
+  primaryColor?: PrimaryColors;
+  fontSize: number;
+  transitionMode?: ResponseAnimationStyle;
+  highlighterTheme?: HighlighterProps["theme"];
+  mermaidTheme?: MermaidProps["theme"];
+
+  themeMode?: ThemeMode;
 }
 
-export const initialState: UserProfileState = {
-  user: {
-    id: 0,
-    name: '',
-    cname: '',
-    staffId: '',
-  },
+export const initialState: UserSettingsState = {
+  animationMode: "agile",
+  neutralColor: undefined,
+  primaryColor: undefined,
+  fontSize: 14,
+  transitionMode: "fadeIn",
+  highlighterTheme: "lobe-theme",
+  mermaidTheme: "lobe-theme",
+  themeMode: "auto",
 };

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/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);