finstep-template-cli 1.0.1

package/template/src/router/index.tsx

@@ -0,0 +1,9 @@
+import { useRoutes } from "react-router-dom";
+import routes from "./routes";
+
+const Router = () => {
+  const element = useRoutes(routes);
+  return element;
+};
+
+export default Router;

package/template/src/router/routes.tsx

@@ -0,0 +1,30 @@
+import { lazy } from "react";
+import type { RouteObject } from "react-router-dom";
+const Home = lazy(() => import("@/pages/home/index"));
+const Admin = lazy(() => import("@/pages/admin/index"));
+const Applications = lazy(() => import("@/pages/admin/pages/applications"));
+const routes: RouteObject[] = [
+  {
+    path: "/",
+    children: [
+      {
+        index: true,
+        element: <Home />,
+      },
+      {
+        path: "/home",
+        element: <Home />,
+      },
+      {
+        path: "/admin",
+        element: <Admin />,
+      },
+      {
+        path: "/admin/applications",
+        element: <Applications />,
+      },
+    ],
+  },
+];
+
+export default routes;

package/template/src/stores/loading.store.ts

@@ -0,0 +1,46 @@
+// AI生成的代码 - 全局Loading状态管理
+import { makeAutoObservable } from "mobx";
+import type { RootStore } from "./root.store";
+
+export default class LoadingStore {
+  private rootStore: RootStore;
+  // AI生成的代码 - loading状态管理
+  isLoading = false;
+  loadingText = "加载中...";
+  loadingCount = 0; // 用于管理多个并发loading请求
+
+  constructor(rootStore: RootStore) {
+    makeAutoObservable(this);
+    this.rootStore = rootStore;
+  }
+
+  // AI生成的代码 - 显示loading
+  showLoading = (text?: string) => {
+    this.loadingCount++;
+    this.isLoading = true;
+    if (text) {
+      this.loadingText = text;
+    }
+  };
+
+  // AI生成的代码 - 隐藏loading
+  hideLoading = () => {
+    this.loadingCount = Math.max(0, this.loadingCount - 1);
+    if (this.loadingCount === 0) {
+      this.isLoading = false;
+      this.loadingText = "加载中...";
+    }
+  };
+
+  // AI生成的代码 - 强制隐藏loading（清除所有loading状态）
+  forceHideLoading = () => {
+    this.loadingCount = 0;
+    this.isLoading = false;
+    this.loadingText = "加载中...";
+  };
+
+  // AI生成的代码 - 设置loading文本
+  setLoadingText = (text: string) => {
+    this.loadingText = text;
+  };
+}

package/template/src/stores/root.store.ts

@@ -0,0 +1,22 @@
+import { makeAutoObservable } from "mobx";
+import { makePersistable } from "mobx-persist-store";
+import UserStore from "./user.store";
+import LoadingStore from "./loading.store";
+export class RootStore {
+  userStore: UserStore;
+  loadingStore: LoadingStore;
+  constructor() {
+    makeAutoObservable(this);
+    this.userStore = new UserStore(this);
+    this.loadingStore = new LoadingStore(this);
+    makePersistable(this.userStore, {
+      name: "UserStore",
+      properties: ["userInfo"],
+      storage: window.localStorage,
+    });
+  }
+}
+
+// 创建RootStore实例
+export const rootStore = new RootStore();
+export const getRootStore = () => rootStore;

package/template/src/stores/store-context.tsx

@@ -0,0 +1,43 @@
+import React, { createContext, useContext, ReactNode } from "react";
+import type { RootStore } from "./root.store";
+import { rootStore } from "./root.store";
+
+const StoreContext = createContext<RootStore | null>(null);
+
+interface StoreProviderProps {
+  children: ReactNode;
+}
+
+export const StoreProvider: React.FC<StoreProviderProps> = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  return (
+    <StoreContext.Provider value={rootStore}>{children}</StoreContext.Provider>
+  );
+};
+
+let globalStore: RootStore | null = null;
+
+export const setGlobalStore = (store: RootStore) => {
+  globalStore = store;
+};
+
+export const getStore = () => {
+  if (!globalStore) {
+    throw new Error("Store not initialized");
+  }
+  return globalStore;
+};
+
+export const useStore = () => {
+  const store = useContext(StoreContext);
+  if (!store) {
+    throw new Error("useStore must be used within a StoreProvider");
+  }
+  if (!globalStore) {
+    setGlobalStore(store);
+  }
+  return store;
+};

package/template/src/stores/user.store.ts

@@ -0,0 +1,46 @@
+import { makeAutoObservable, runInAction } from "mobx";
+import type { RootStore } from "./root.store";
+interface userInfoType {
+  userId: number | string;
+  login: boolean;
+  phone?: string;
+  avatar?: string; // AI生成的代码 - 用户头像
+  username?: string; // AI生成的代码 - 用户名
+  accessToken?: string;
+  refreshToken?: string;
+}
+export default class User {
+  userInfo: userInfoType;
+  // @ts-expect-error RootStore circular dependency with User store
+  constructor(private rootStore: RootStore) {
+    this.rootStore = rootStore;
+    this.userInfo = {
+      userId: "",
+      login: false,
+      phone: "",
+      avatar: "", // AI生成的代码 - 默认头像
+      username: "", // AI生成的代码 - 默认用户名
+      accessToken: "",
+      refreshToken: "",
+    };
+    makeAutoObservable(this, {}, { autoBind: true });
+  }
+  setUserInfo(userInfo: userInfoType) {
+    runInAction(() => {
+      this.userInfo = userInfo;
+    });
+  }
+
+  // AI生成：退出登录方法
+  logout() {
+    runInAction(() => {
+      this.userInfo = {
+        userId: "",
+        login: false,
+        phone: "",
+        avatar: "",
+        username: "",
+      };
+    });
+  }
+}

package/template/src/utils/index.ts

@@ -0,0 +1,14 @@
+export const getQueryParams = () => {
+  const url = window.location.href;
+  let queryString = "";
+
+  if (url.includes("#")) {
+    // Hash 路由
+    queryString = url.split("#")[1].split("?")[1];
+  } else {
+    // History 路由
+    queryString = window.location.search.substring(1);
+  }
+  const urlParams = new URLSearchParams(queryString);
+  return Object.fromEntries(urlParams.entries());
+};

package/template/src/utils/request.ts

@@ -0,0 +1,116 @@
+import axios from "axios";
+import { showError } from "finstep-b-components";
+import type {
+  AxiosResponse,
+  AxiosError,
+  InternalAxiosRequestConfig,
+} from "axios";
+import { tokenManager } from "./tokenManager";
+// AI生成的代码 - 自定义请求配置接口，支持登录接口标识
+export interface CustomAxiosRequestConfig {
+  url?: string;
+  method?: string;
+  data?: unknown;
+  params?: unknown;
+  headers?: Record<string, string>;
+  timeout?: number;
+  isLoginApi?: boolean; // AI生成的代码 - 标识是否为登录接口
+  [key: string]: unknown;
+}
+
+export const baseURL = import.meta.env.VITE_API_URL;
+export const baseHeader = {
+  "Content-Type": "application/json",
+};
+const request = axios.create({
+  baseURL,
+  timeout: 10000,
+  headers: {
+    ...baseHeader,
+  },
+});
+
+// AI生成的代码 - 为 request 函数添加类型重载，支持自定义配置
+interface RequestFunction {
+  <T = unknown>(config: CustomAxiosRequestConfig): Promise<T>;
+  <T = unknown>(url: string, config?: CustomAxiosRequestConfig): Promise<T>;
+}
+
+// AI生成的代码 - 创建类型安全的 request 函数
+const typedRequest = request as RequestFunction;
+
+// AI生成的代码 - 请求拦截器，处理登录接口的特殊认证
+request.interceptors.request.use(
+  (config: InternalAxiosRequestConfig & { isLoginApi?: boolean }) => {
+    if (config.isLoginApi) {
+      if (!config.headers) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        config.headers = {} as any;
+      }
+      config.headers["authorization"] = "Basic Y2FpeXVlOmNhaXl1ZQ==";
+    }
+    return config;
+  },
+  (error: AxiosError) => {
+    return Promise.reject(error);
+  }
+);
+
+// AI生成的代码 - 响应拦截器，处理 401 错误和 token 刷新
+request.interceptors.response.use(
+  (response: AxiosResponse) => {
+    if (response.data.code !== 0) {
+      if (response.data.msg) {
+        showError(response.data.msg);
+        return Promise.reject(response.data);
+      }
+    }
+    return response.data.data;
+  },
+  async (error: AxiosError) => {
+    if (error.response) {
+      switch (error.response.status) {
+        case 400:
+          console.error(error.response?.data);
+          break;
+        case 401: {
+          console.error("未授权，请重新登录");
+          const { config: axiosConfig } = error;
+          if (!axiosConfig) return Promise.reject(error);
+          try {
+            // 使用 TokenManager 处理 401 错误
+            await tokenManager.handle401Error(axiosConfig);
+            return await request(axiosConfig);
+          } catch (refreshError) {
+            // 刷新失败，跳转到登录页
+            window.location.href = "/login";
+            return Promise.reject(
+              refreshError instanceof Error
+                ? refreshError
+                : new Error(String(refreshError))
+            );
+          }
+        }
+        case 403:
+          console.error("拒绝访问");
+          break;
+        case 404:
+          console.error("请求的资源不存在");
+          break;
+        case 500:
+          showError("服务异常，请稍后再试");
+          break;
+        default:
+          console.error("发生错误:", error.message);
+      }
+    } else if (error.request) {
+      console.error("网络错误，请检查您的网络连接");
+    } else {
+      console.error("请求配置错误:", (error as Error).message);
+    }
+    return Promise.reject(error);
+  }
+);
+
+// AI生成的代码 - 导出类型安全的 request 函数
+export default typedRequest;

package/template/src/utils/tokenManager.ts

@@ -0,0 +1,168 @@
+// AI生成的代码 - Token 管理器，处理 token 刷新和请求队列
+import { refreshToken } from "@/api/home";
+import type { AxiosRequestConfig } from "axios";
+import { getRootStore } from "@/stores/root.store";
+// AI生成的代码 - 请求队列项接口
+interface QueueItem {
+  config: AxiosRequestConfig;
+  resolve: (value: AxiosRequestConfig) => void;
+  reject: (reason?: Error) => void;
+}
+
+// AI生成的代码 - Token 管理器类
+class TokenManager {
+  private isRefreshing = false; // 是否正在刷新 token
+  private requestQueue: QueueItem[] = []; // 请求队列
+  private refreshDebounceTimer: number | null = null; // 防抖定时器
+  private readonly DEBOUNCE_DELAY = 100; // 防抖延迟时间（毫秒）
+
+  /**
+   * AI生成的代码 - 判断是否为登录相关接口
+   * @param config 请求配置
+   * @returns 是否为登录接口
+   */
+  private isLoginApi(
+    config: AxiosRequestConfig & { isLoginApi?: boolean }
+  ): boolean {
+    // 检查自定义标识
+    if (config.isLoginApi) {
+      return true;
+    }
+
+    // 检查 URL 路径
+    const loginPaths = ["/auth/oauth2/token"];
+
+    const url = config.url || "";
+    return loginPaths.some((path) => url.includes(path));
+  }
+
+  /**
+   * AI生成的代码 - 获取存储的 refresh token
+   * @returns refresh token 或 null
+   */
+  private getRefreshToken(): string | null {
+    return getRootStore().userStore.userInfo.refreshToken || "";
+  }
+
+  /**
+   * AI生成的代码 - 保存新的 token 信息
+   * @param tokenData token 数据
+   */
+  private saveTokens(tokenData: {
+    access_token?: string;
+    refresh_token?: string;
+  }): void {
+    getRootStore().userStore.setUserInfo({
+      ...getRootStore().userStore.userInfo,
+      accessToken: tokenData.access_token || "",
+      refreshToken: tokenData.refresh_token || "",
+    });
+  }
+
+  /**
+   * AI生成的代码 - 清除所有 token
+   */
+  private clearTokens(): void {
+    getRootStore().userStore.setUserInfo({
+      userId: "",
+      login: false,
+      phone: "",
+      avatar: "", // AI生成的代码 - 默认头像
+      username: "", // AI生成的代码 - 默认用户名
+      accessToken: "",
+      refreshToken: "",
+    });
+  }
+
+  /**
+   * AI生成的代码 - 处理队列中的请求
+   * @param error 错误信息（如果刷新失败）
+   */
+  private processQueue(error?: Error): void {
+    this.requestQueue.forEach(({ resolve, reject, config }) => {
+      if (error) {
+        reject(error);
+      } else {
+        resolve(config);
+      }
+    });
+    this.requestQueue = [];
+  }
+
+  /**
+   * AI生成的代码 - 刷新 token
+   * @returns Promise<void>
+   */
+  async refreshToken(): Promise<void> {
+    const refreshTokenValue = this.getRefreshToken();
+
+    if (!refreshTokenValue) {
+      this.clearTokens();
+      throw new Error("No refresh token available");
+    }
+
+    try {
+      const response = await refreshToken({
+        refresh_token: refreshTokenValue,
+      });
+
+      this.saveTokens(response);
+      this.processQueue(); // 处理队列中的请求
+    } catch (error) {
+      this.clearTokens();
+      this.processQueue(
+        error instanceof Error ? error : new Error(String(error))
+      ); // 确保传递Error类型的错误给队列中的请求
+      throw error;
+    } finally {
+      this.isRefreshing = false;
+    }
+  }
+
+  /**
+   * AI生成的代码 - 处理 401 错误，支持请求队列和防抖
+   * @param config 原始请求配置
+   * @returns Promise<any>
+   */
+  async handle401Error(
+    config: AxiosRequestConfig & { isLoginApi?: boolean }
+  ): Promise<AxiosRequestConfig> {
+    // 如果是登录接口，直接拒绝
+    if (this.isLoginApi(config)) {
+      return Promise.reject(new Error("Login API returned 401"));
+    }
+
+    return new Promise((resolve, reject) => {
+      // 将请求添加到队列
+      this.requestQueue.push({ config, resolve, reject });
+
+      // 如果已经在刷新中，直接返回
+      if (this.isRefreshing) {
+        return;
+      }
+
+      // 清除之前的防抖定时器
+      if (this.refreshDebounceTimer) {
+        clearTimeout(this.refreshDebounceTimer);
+      }
+
+      // 设置防抖定时器
+      this.refreshDebounceTimer = setTimeout(async () => {
+        this.isRefreshing = true;
+
+        try {
+          await this.refreshToken();
+        } catch (error) {
+          // 刷新失败，清除队列
+          this.processQueue(
+            error instanceof Error ? error : new Error(String(error))
+          );
+        }
+      }, this.DEBOUNCE_DELAY);
+    });
+  }
+}
+
+// AI生成的代码 - 导出单例实例
+export const tokenManager = new TokenManager();
+export default TokenManager;

package/template/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/tailwind.config.js

@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+// AI生成的代码 - Tailwind CSS配置文件
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        'pacifico': ['Pacifico', 'cursive'],
+        'inter': ['Inter', 'sans-serif'],
+        'jetbrains': ['JetBrains Mono', 'monospace'],
+      },
+    },
+  },
+  plugins: [],
+}
+

package/template/tsconfig.app.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src", "./auto-imports.d.ts"]
+}

package/template/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/template/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "types": ["node"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import AutoImport from "unplugin-auto-import/vite";
+import { resolve } from "path";
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    AutoImport({
+      // 这里可以配置自动导入的库，例如 vue、react 等
+      imports: ["react", "react-router-dom", "react-router"], // 根据需要选择要自动导入的库
+      // 其他配置项
+      dts: "auto-imports.d.ts", // 可以生成 TypeScript 声明文件
+    }),
+  ],
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "./src"),
+    },
+  },
+  server: {
+    port: 80,
+    host: "0.0.0.0",
+    // AI生成的代码 - 添加允许的主机列表以解决被阻止的请求问题
+    // allowedHosts: ["sso-login.finstep.cn"],
+    proxy: {
+      "/api": {
+        // 免费的在线REST API
+        // target: "http://10.159.0.130:9527",
+        target: "http://product-test.finstep.cn",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+    },
+  },
+});