@4399ywkf/cli 1.0.7 → 1.0.8

package/dist/templates/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/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/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/app/config/env/.env.public.tpl

@@ -1,5 +1,5 @@
 API_PREFIX="/api"
-API_TIMEOUT=60 * 1000
+API_TIMEOUT=60000
 
 COOKIE_NAME='ywkf_jwt'
 
@@ -9,23 +9,6 @@ OUTPUT_PATH='dist'
 BASENAME='/'
 
 PUBLIC_PATH='/s{{{ name }}}/'
-VERSION_NOTIFY_TIME=30000
-
-
-# Sentry 配置 - (官网)
-# REACT_APP_SENTRY_DSN="https://95add4dc797c22aa2224494e4abd4d71@o4509466151878656.ingest.us.sentry.io/4509466153058304"
-# SENTRY_PROJECT="javascript-react"
-# SENTRY_ORG="test-x6m"
-# SENTRY_AUTH_TOKEN="d477b94cfe375f5b4e4e88ac4fc15a8be8557652cea424710b6f7f19be4f0b3d"
-# SENTRY_URL="https://test-x6m.sentry.io/"
 
 # 帮助中心
-HELP_CENTER_URL="https://im-support.gz4399.com/"
-
-# 是否开启Sentry
-SENTRY_ENABLED='{{SENTRY_ENABLED}}'  
-REACT_APP_SENTRY_DSN='{{SENTRY_DSN}}'
-SENTRY_PROJECT='{{{ name }}}'
-SENTRY_ORG="sentry"
-SENTRY_AUTH_TOKEN="f13c66cd7a3629c8324cceb62fdb65aae1f337abbec4ebbadbe0a22447708994"
-SENTRY_URL="https://sentry.gz4399.com/"
+HELP_CENTER_URL="https://im-support.gz4399.com/"

package/dist/templates/app/config/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/app/config/request/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/app/config/request/index.ts

@@ -1,174 +1,172 @@
-import jwt from "@config/jwt";
-import axios, {
-  type AxiosInstance,
-  type AxiosRequestConfig,
-  type AxiosResponse,
-} from "axios";
+import axios, { type AxiosInstance } from "axios";
 import qs from "qs";
-
-type Result<T> = {
-  code: number;
-  message: string;
-  data: T;
-  suppressErrorNotification?: boolean;
-};
-
-const baseURL = process.env.API_PREFIX;
-const timeout = process.env.API_TIMEOUT;
-const accessTokenKey = process.env.COOKIE_NAME;
-
-let flag = false; // 设置开关，保证一次只能请求一次刷新token,防止客户端多次操作，多次请求
-let subSequest: any[] = [];
-
-// 把过期请求添加在数组中
-function addRequest(request: () => any) {
-  subSequest.push(request);
-}
-
-// 重新调用过期请求列表
-function retryRequest() {
-  subSequest.forEach((request) => request());
-  subSequest = [];
-}
-
-function getRefreshToken(token: string) {
-  return fetch(`${baseURL}/dns/auth/login/token/refresh`, {
-    headers: {
-      authorization: token,
-    },
-  });
-}
-
-function redirectToLogin() {
-  // 记录当前的url，并且实现跳转
-  if (window.location.pathname === "/login") {
-    return;
-  }
-  jwt.clearAccessToken(accessTokenKey as string);
-  jwt.clearAccessToken("refresh_token");
-  const href = encodeURIComponent(window.location.href);
-  window.location.href = `${window.location.origin}/login?redirect=${href}`;
-}
-
-// 刷新token
-function refreshToken() {
-  if (!flag) {
-    flag = true;
-    // 获取刷新token
-    const r_tk = jwt.getAccessToken("refresh_token");
-    if (r_tk) {
-      // 判断刷新token是否过期
-      getRefreshToken(r_tk)
-        .then((v) => v.json())
-        .then((v) => {
-          flag = false;
-          if (!v?.data?.accessToken) {
-            redirectToLogin();
-            return;
-          }
-          jwt.setAccessToken({
-            token_type: v.data?.tokenType ?? "JWT",
-            access_token: v.data?.accessToken,
-            expires_at: v.data?.expires_at * 1000,
-          });
-          // 重新发送请求
-          retryRequest();
-        })
-        .catch(() => {
-          redirectToLogin();
-        });
-    } else {
-      redirectToLogin();
+import { env } from "@/config/env";
+import type { RequestConfig, ApiResponse, TokenManager } from "./types";
+import { tokenManager as defaultTokenManager } from "./token-manager";
+import {
+  errorHandler as defaultErrorHandler,
+  type ErrorHandler,
+} from "./error-handler";
+import {
+  setupRequestInterceptor,
+  setupResponseInterceptor,
+} from "./interceptors";
+
+/**
+ * 参数序列化器
+ */
+export function paramsSerializer(params: Record<string, any>): string {
+  const result: Record<string, any> = {};
+
+  Object.keys(params).forEach((key) => {
+    const value = params[key];
+    if (value === null || value === undefined) {
+      // 跳过 null 和 undefined
+      return;
     }
-  }
-}
-
-export function paramsSerializer(params) {
-  const result = {};
-  Object.keys(params).forEach((p) => {
-    const value = params[p];
     if (Array.isArray(value)) {
-      result[p] = value;
-    } else if (value === null || value === undefined) {
-      result[p] = value;
+      result[key] = value;
     } else if (typeof value === "object") {
-      result[p] = JSON.stringify(value);
+      result[key] = JSON.stringify(value);
     } else {
-      result[p] = value;
+      result[key] = value;
     }
   });
+
   return qs.stringify(result, { arrayFormat: "repeat", skipNulls: true });
 }
 
-// 导出Request类，可以用来自定义传递配置来创建实例
+/**
+ * Request 配置选项
+ */
+export interface RequestOptions {
+  baseURL?: string;
+  timeout?: number;
+  tokenManager?: TokenManager;
+  errorHandler?: ErrorHandler;
+  onUnauthorized?: () => void;
+}
+
+/**
+ * HTTP 请求类
+ */
 export class Request {
-  // axios 实例
   private instance: AxiosInstance;
-  // 基础配置，url和超时时间
-  private baseConfig: AxiosRequestConfig = {
-    baseURL: baseURL,
-    timeout: Number(timeout),
-    withCredentials: true,
-  };
-
-  constructor(config: AxiosRequestConfig) {
-    // 使用axios.create创建axios实例
-    this.instance = axios.create(Object.assign(this.baseConfig, config));
-
-    this.instance.interceptors.request.use(
-      (config: any) => {
-        // 一般会请求拦截里面加token，用于后端的验证
-        config.headers = config.headers || {};
-        config.headers.Authorization =
-          jwt.getAccessToken(accessTokenKey as string) || "";
-        return config;
-      },
-      (err: any) => {
-        return Promise.reject(err);
-      }
+  public tokenManager: TokenManager;
+  public errorHandler: ErrorHandler;
+
+  constructor(options: RequestOptions = {}) {
+    const {
+      baseURL = env.API_PREFIX,
+      timeout = env.API_TIMEOUT,
+      tokenManager = defaultTokenManager,
+      errorHandler = defaultErrorHandler,
+      onUnauthorized,
+    } = options;
+
+    this.tokenManager = tokenManager;
+    this.errorHandler = errorHandler;
+
+    // 创建 axios 实例
+    this.instance = axios.create({
+      baseURL,
+      timeout,
+      withCredentials: true,
+    });
+
+    // 设置拦截器
+    setupRequestInterceptor(this.instance, tokenManager);
+    setupResponseInterceptor(
+      this.instance,
+      tokenManager,
+      errorHandler,
+      onUnauthorized
     );
   }
 
-  // 定义请求方法
-  public request(config: AxiosRequestConfig): Promise<AxiosResponse> {
+  /**
+   * 通用请求方法
+   */
+  public request<T = any>(config: RequestConfig): Promise<ApiResponse<T>> {
     return this.instance.request(config);
   }
 
+  /**
+   * GET 请求
+   */
   public get<T = any>(
     url: string,
     params?: any,
-    config?: AxiosRequestConfig & { suppressErrorNotification?: boolean }
-  ): Promise<Result<T>> {
+    config?: RequestConfig
+  ): Promise<ApiResponse<T>> {
     return this.instance.get(url, {
       ...config,
-      params: params,
+      params,
       paramsSerializer,
     });
   }
 
+  /**
+   * POST 请求
+   */
   public post<T = any>(
     url: string,
     data?: any,
-    config?: AxiosRequestConfig & { suppressErrorNotification?: boolean }
-  ): Promise<Result<T>> {
+    config?: RequestConfig
+  ): Promise<ApiResponse<T>> {
     return this.instance.post(url, data, config);
   }
 
+  /**
+   * PUT 请求
+   */
   public put<T = any>(
     url: string,
     data?: any,
-    config?: AxiosRequestConfig & { suppressErrorNotification?: boolean }
-  ): Promise<Result<T>> {
+    config?: RequestConfig
+  ): Promise<ApiResponse<T>> {
     return this.instance.put(url, data, config);
   }
 
+  /**
+   * DELETE 请求
+   */
   public delete<T = any>(
     url: string,
-    config?: AxiosRequestConfig & { suppressErrorNotification?: boolean }
-  ): Promise<Result<T>> {
+    config?: RequestConfig
+  ): Promise<ApiResponse<T>> {
     return this.instance.delete(url, config);
   }
+
+  /**
+   * PATCH 请求
+   */
+  public patch<T = any>(
+    url: string,
+    data?: any,
+    config?: RequestConfig
+  ): Promise<ApiResponse<T>> {
+    return this.instance.patch(url, data, config);
+  }
+
+  /**
+   * 获取 axios 实例（用于高级用法）
+   */
+  public getAxiosInstance(): AxiosInstance {
+    return this.instance;
+  }
 }
 
-// 默认导出Request实例
-export default new Request({});
+// 导出默认实例
+export const request = new Request();
+
+// 导出类型
+export type {
+  RequestConfig,
+  ApiResponse,
+  MessageConfig,
+  TokenManager,
+} from "./types";
+
+// 默认导出
+export default request;