create-bubbles 0.1.11 → 0.1.13

package/template-vp-react-shadcn/src/utils/request/alova-core/index.ts

@@ -0,0 +1,276 @@
+import type { Alova, AlovaDefaultCacheAdapter, AlovaOptions } from "alova";
+import { createAlova } from "alova";
+import adapterFetch, { type FetchRequestAdapter, type FetchRequestInit } from "alova/fetch";
+import type { ReactHookExportType } from "alova/react";
+
+import { deepMergeObject, isPlainObject } from "./utils";
+
+type StatusMatcher = number | number[];
+type HeaderValue = string | (() => string);
+type RequestAlovaGenerics = {
+  Responded: unknown;
+  Transformed: unknown;
+  RequestConfig: FetchRequestInit;
+  Response: Response;
+  ResponseHeader: Headers;
+  L1Cache: AlovaDefaultCacheAdapter;
+  L2Cache: AlovaDefaultCacheAdapter;
+  StatesExport: ReactHookExportType<unknown>;
+};
+
+interface StatusMap {
+  success?: StatusMatcher;
+  unAuthorized?: StatusMatcher;
+}
+
+interface CodeMap {
+  success?: number[];
+  unAuthorized?: number[];
+}
+
+export interface BaseRequestOption {
+  baseUrl?: string;
+  timeout?: number;
+  commonHeaders?: Record<string, HeaderValue>;
+  statusMap?: StatusMap;
+  codeMap?: CodeMap;
+  responseDataKey?: string;
+  responseMessageKey?: string;
+  isTransformResponse?: boolean;
+  isShowSuccessMessage?: boolean;
+  successDefaultMessage?: string;
+  isShowErrorMessage?: boolean;
+  errorDefaultMessage?: string;
+  statesHook?: AlovaOptions<RequestAlovaGenerics>["statesHook"];
+  successMessageFunc?: (message: string) => void;
+  errorMessageFunc?: (message: string) => void;
+  unAuthorizedResponseFunc?: () => void;
+  requestAdapter?: FetchRequestAdapter;
+}
+
+export interface CustomConfig {
+  isTransformResponse?: boolean;
+  isShowSuccessMessage?: boolean;
+  isShowErrorMessage?: boolean;
+}
+
+declare module "alova" {
+  interface AlovaCustomTypes {
+    meta: CustomConfig;
+  }
+}
+
+interface RequestErrorOptions {
+  status?: number;
+  code?: unknown;
+  data?: unknown;
+  response?: Response;
+}
+
+export class RequestError extends Error {
+  status?: number;
+  code?: unknown;
+  data?: unknown;
+  response?: Response;
+
+  constructor(message: string, options: RequestErrorOptions = {}) {
+    super(message);
+    this.name = "RequestError";
+    this.status = options.status;
+    this.code = options.code;
+    this.data = options.data;
+    this.response = options.response;
+  }
+}
+
+export type RequestInstance = Alova<RequestAlovaGenerics>;
+export type DualCallInstance = RequestInstance & ((option?: CustomConfig) => RequestInstance);
+
+type RequestOption = BaseRequestOption & CustomConfig;
+
+const DEFAULT_REQUEST_ADAPTER = adapterFetch();
+const DEFAULT_RESPONSE_DATA_KEY = "data";
+const DEFAULT_RESPONSE_MESSAGE_KEY = "message";
+const DEFAULT_SUCCESS_MESSAGE = "操作成功";
+const DEFAULT_ERROR_MESSAGE = "服务异常";
+const DEFAULT_REQUEST_OPTION: RequestOption = {
+  baseUrl: "/",
+  timeout: 0,
+  statusMap: {
+    success: [200, 201, 204],
+    unAuthorized: 401,
+  },
+  codeMap: {
+    success: [200],
+    unAuthorized: [401],
+  },
+  responseDataKey: DEFAULT_RESPONSE_DATA_KEY,
+  responseMessageKey: DEFAULT_RESPONSE_MESSAGE_KEY,
+  isTransformResponse: true,
+  isShowSuccessMessage: false,
+  successDefaultMessage: DEFAULT_SUCCESS_MESSAGE,
+  isShowErrorMessage: true,
+  errorDefaultMessage: DEFAULT_ERROR_MESSAGE,
+  requestAdapter: DEFAULT_REQUEST_ADAPTER,
+};
+
+function isMatchedStatus(status: number, matcher?: StatusMatcher) {
+  if (matcher === undefined) return status >= 200 && status < 300;
+  return Array.isArray(matcher) ? matcher.includes(status) : matcher === status;
+}
+
+function isMatchedCode(code: unknown, codes?: number[]) {
+  if (!codes?.length) return true;
+
+  const normalizedCode = Number(code);
+  return Number.isFinite(normalizedCode) && codes.includes(normalizedCode);
+}
+
+function getResponseMessage(data: unknown, messageKey: string, defaultMessage: string) {
+  if (!isPlainObject(data)) return defaultMessage;
+
+  const message = data[messageKey] ?? data.message ?? data.msg;
+  if (typeof message === "string") return message || defaultMessage;
+  if (typeof message === "number") return String(message);
+
+  return defaultMessage;
+}
+
+function getRuntimeConfig(option: RequestOption, customConfig?: CustomConfig) {
+  return {
+    isTransformResponse: customConfig?.isTransformResponse ?? option.isTransformResponse ?? true,
+    isShowSuccessMessage:
+      customConfig?.isShowSuccessMessage ?? option.isShowSuccessMessage ?? false,
+    isShowErrorMessage: customConfig?.isShowErrorMessage ?? option.isShowErrorMessage ?? true,
+  };
+}
+
+async function parseResponse(response: Response) {
+  if (!response.body || response.status === 204) return undefined;
+
+  const contentType = response.headers.get("content-type") ?? "";
+  if (contentType.includes("application/json")) return response.json();
+  if (contentType.startsWith("text/")) return response.text();
+
+  const clonedResponse = response.clone();
+  try {
+    return await response.json();
+  } catch {
+    try {
+      return await clonedResponse.text();
+    } catch {
+      return undefined;
+    }
+  }
+}
+
+export function createInstance(option: RequestOption): RequestInstance {
+  const mergeOption = deepMergeObject(DEFAULT_REQUEST_OPTION, option);
+
+  return createAlova({
+    baseURL: mergeOption.baseUrl,
+    timeout: mergeOption.timeout,
+    statesHook: mergeOption.statesHook,
+    requestAdapter: mergeOption.requestAdapter ?? DEFAULT_REQUEST_ADAPTER,
+    beforeRequest: (method) => {
+      for (const [key, value] of Object.entries(mergeOption.commonHeaders ?? {})) {
+        method.config.headers[key] = typeof value === "function" ? value() : value;
+      }
+    },
+    cacheFor: null,
+    responded: {
+      onSuccess: async (response, method) => {
+        const runtimeConfig = getRuntimeConfig(mergeOption, method.config.meta);
+        if (!runtimeConfig.isTransformResponse) return response;
+
+        const data = await parseResponse(response);
+        const responseMessageKey = mergeOption.responseMessageKey ?? DEFAULT_RESPONSE_MESSAGE_KEY;
+        const errorDefaultMessage = mergeOption.errorDefaultMessage ?? DEFAULT_ERROR_MESSAGE;
+
+        if (!isMatchedStatus(response.status, mergeOption.statusMap?.success)) {
+          if (isMatchedStatus(response.status, mergeOption.statusMap?.unAuthorized)) {
+            mergeOption.unAuthorizedResponseFunc?.();
+          }
+
+          const errorMessage = getResponseMessage(data, responseMessageKey, errorDefaultMessage);
+          if (runtimeConfig.isShowErrorMessage) {
+            mergeOption.errorMessageFunc?.(errorMessage);
+          }
+          throw new RequestError(errorMessage, {
+            status: response.status,
+            data,
+            response,
+          });
+        }
+
+        if (!isPlainObject(data)) return data;
+
+        const responseCode = data.code;
+        const responseMessage = getResponseMessage(
+          data,
+          responseMessageKey,
+          mergeOption.successDefaultMessage ?? DEFAULT_SUCCESS_MESSAGE,
+        );
+
+        if (
+          responseCode !== undefined &&
+          !isMatchedCode(responseCode, mergeOption.codeMap?.success)
+        ) {
+          if (isMatchedCode(responseCode, mergeOption.codeMap?.unAuthorized)) {
+            mergeOption.unAuthorizedResponseFunc?.();
+          }
+
+          const errorMessage = getResponseMessage(data, responseMessageKey, errorDefaultMessage);
+          if (runtimeConfig.isShowErrorMessage) {
+            mergeOption.errorMessageFunc?.(errorMessage);
+          }
+          throw new RequestError(errorMessage, {
+            status: response.status,
+            code: responseCode,
+            data,
+            response,
+          });
+        }
+
+        if (runtimeConfig.isShowSuccessMessage) {
+          mergeOption.successMessageFunc?.(responseMessage);
+        }
+
+        const responseDataKey = mergeOption.responseDataKey ?? DEFAULT_RESPONSE_DATA_KEY;
+        return responseDataKey in data ? data[responseDataKey] : data;
+      },
+      onError: (error) => {
+        const errorMessage =
+          error instanceof Error
+            ? error.message
+            : (mergeOption.errorDefaultMessage ?? DEFAULT_ERROR_MESSAGE);
+
+        if (mergeOption.isShowErrorMessage) {
+          mergeOption.errorMessageFunc?.(errorMessage);
+        }
+
+        throw error;
+      },
+    },
+  });
+}
+
+export function createDualCallInstance(baseConfig: BaseRequestOption): DualCallInstance {
+  const defaultInstance = createInstance(baseConfig);
+  const dualInstance = ((option?: CustomConfig) => {
+    if (!option) return defaultInstance;
+    return createInstance(deepMergeObject(baseConfig, option));
+  }) as DualCallInstance;
+
+  Object.assign(dualInstance, defaultInstance);
+  dualInstance.Get = defaultInstance.Get.bind(defaultInstance);
+  dualInstance.Post = defaultInstance.Post.bind(defaultInstance);
+  dualInstance.Put = defaultInstance.Put.bind(defaultInstance);
+  dualInstance.Delete = defaultInstance.Delete.bind(defaultInstance);
+  dualInstance.Patch = defaultInstance.Patch.bind(defaultInstance);
+  dualInstance.Head = defaultInstance.Head.bind(defaultInstance);
+  dualInstance.Options = defaultInstance.Options.bind(defaultInstance);
+  dualInstance.Request = defaultInstance.Request.bind(defaultInstance);
+
+  return dualInstance;
+}

package/template-vp-react-shadcn/src/utils/request/alova-core/utils.ts

@@ -0,0 +1,24 @@
+type AnyRecord = Record<string, unknown>;
+
+export function isPlainObject(value: unknown): value is AnyRecord {
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    !Array.isArray(value) &&
+    Object.getPrototypeOf(value) === Object.prototype
+  );
+}
+
+export function deepMergeObject<T extends object>(source: T, target: Partial<T>) {
+  const result = { ...source } as AnyRecord;
+
+  for (const [key, value] of Object.entries(target)) {
+    const sourceValue = result[key];
+    result[key] =
+      isPlainObject(sourceValue) && isPlainObject(value)
+        ? deepMergeObject(sourceValue, value)
+        : value;
+  }
+
+  return result as T;
+}

package/template-vp-react-shadcn/src/utils/request/index.ts

@@ -0,0 +1,48 @@
+import reactHook from "alova/react";
+import { toast } from "sonner";
+
+import { navigator } from "@/router";
+import { envVariables } from "@/utils/env";
+
+import { createDualCallInstance } from "./alova-core";
+
+function normalizeBaseUrl(apiAffix?: string) {
+  if (!apiAffix) return "/";
+  if (/^https?:\/\//.test(apiAffix) || apiAffix.startsWith("/")) {
+    return apiAffix;
+  }
+
+  return `/${apiAffix}`;
+}
+
+function getBaseConfig(): Parameters<typeof createDualCallInstance>[0] {
+  return {
+    baseUrl: normalizeBaseUrl(envVariables.API_AFFIX),
+    statusMap: {
+      success: [200, 201, 204],
+      unAuthorized: 401,
+    },
+    codeMap: {
+      success: [200],
+      unAuthorized: [401],
+    },
+    responseDataKey: "data",
+    responseMessageKey: "msg",
+    commonHeaders: {},
+    successMessageFunc: (msg) => {
+      toast.success(msg);
+    },
+    errorMessageFunc: (msg) => {
+      toast.error(msg);
+    },
+    unAuthorizedResponseFunc: () => {
+      navigator("/login");
+      toast.error("登录过期或未登录");
+    },
+    statesHook: reactHook,
+  };
+}
+
+const alovaRequest = createDualCallInstance(getBaseConfig());
+
+export default alovaRequest;

package/template-vp-react-shadcn/src/utils/request/readme.md

@@ -0,0 +1,176 @@
+# request 使用说明
+
+`src/utils/request/index.ts` 导出的是项目统一的 alova 请求实例，业务接口建议统一放在 `src/api` 里封装，页面和组件不要直接散写请求配置。
+
+## 基础用法
+
+请求方法会创建 alova `Method` 实例，不会在创建时立刻发送请求。可以在组件中交给 `useRequest`，也可以在普通函数里直接 `await`。
+
+```ts
+import alovaRequest from "@/utils/request";
+
+interface DramaItem {
+  id: number;
+  title: string;
+}
+
+interface DramaListParams {
+  page: number;
+  pageSize: number;
+}
+
+export const getDramaList = (params: DramaListParams) => {
+  return alovaRequest.Get<DramaItem[]>("/drama/list", { params });
+};
+```
+
+组件中使用：
+
+```tsx
+import { useRequest } from "alova/client";
+
+import { getDramaList } from "@/api";
+
+export function DramaList() {
+  const { data, loading, error } = useRequest(getDramaList({ page: 1, pageSize: 20 }), {
+    initialData: [],
+  });
+
+  // ...
+}
+```
+
+普通异步函数中使用：
+
+```ts
+const list = await getDramaList({ page: 1, pageSize: 20 });
+```
+
+## 请求参数
+
+GET 查询参数放在第二个参数的 `params` 里：
+
+```ts
+alovaRequest.Get<UserInfo>("/user/detail", {
+  params: {
+    id: 1,
+  },
+});
+```
+
+POST、PUT、PATCH、DELETE 的 body 放在第二个参数，配置放在第三个参数：
+
+```ts
+alovaRequest.Post<CreateUserResult>("/user/create", {
+  name: "Tom",
+});
+
+alovaRequest.Post<CreateUserResult>(
+  "/user/create",
+  { name: "Tom" },
+  {
+    meta: {
+      isShowSuccessMessage: true,
+    },
+  },
+);
+```
+
+## 返回结构
+
+默认按下面这种后端格式处理：
+
+```ts
+interface ApiResponse<T> {
+  code: number;
+  data: T;
+  msg: string;
+}
+```
+
+默认规则：
+
+- HTTP 状态码 `200`、`201`、`204` 视为成功。
+- 业务 `code` 在 `codeMap.success` 中视为成功，当前默认是 `[200]`。
+- 成功后返回 `data` 字段，所以 `alovaRequest.Get<User[]>` 的最终数据类型就是 `User[]`。
+- 如果响应不是普通对象，会直接返回解析后的原始数据，比如字符串。
+
+## 提示开关
+
+单次请求可以通过 `meta` 控制是否转换响应、是否显示成功提示、是否显示错误提示。
+
+```ts
+alovaRequest.Post(
+  "/user/update",
+  { id: 1, name: "Tom" },
+  {
+    meta: {
+      isShowSuccessMessage: true,
+      isShowErrorMessage: false,
+    },
+  },
+);
+```
+
+也可以创建一个带临时配置的请求实例：
+
+```ts
+const silentRequest = alovaRequest({
+  isShowErrorMessage: false,
+});
+
+silentRequest.Get<UserInfo>("/user/detail", {
+  params: { id: 1 },
+});
+```
+
+## 原始响应
+
+下载文件、读取响应头、或不想走业务 `code/data/msg` 转换时，关闭 `isTransformResponse`。
+
+```ts
+const downloadFile = () => {
+  return alovaRequest.Get<Response>("/file/download", {
+    meta: {
+      isTransformResponse: false,
+    },
+  });
+};
+
+const response = await downloadFile();
+const blob = await response.blob();
+```
+
+## 错误处理
+
+HTTP 状态码错误、业务 `code` 错误都会抛出 `RequestError`，alova hook 会进入 `error` 分支。
+
+```ts
+import { RequestError } from "@/utils/request/alova-core";
+
+try {
+  await getDramaList({ page: 1, pageSize: 20 });
+} catch (error) {
+  if (error instanceof RequestError) {
+    console.log(error.status, error.code, error.message);
+  }
+}
+```
+
+`401` 会自动执行 `unAuthorizedResponseFunc`，当前行为是跳转到 `/login` 并提示登录过期。
+
+## 环境变量
+
+请求基础路径来自 `VITE_API_AFFIX`：
+
+```env
+VITE_API_AFFIX=/api
+```
+
+没有配置时会使用 `/`，避免出现 `/undefined`。
+
+## 注意事项
+
+- 业务接口优先写成函数并标注返回泛型，例如 `alovaRequest.Get<UserInfo>()`，组件里的 `useRequest` 会自动推断数据类型。
+- 不要把 GET 查询参数直接作为第二个裸对象传入，第二个参数是配置对象，查询参数必须放到 `{ params }`。
+- 需要局部关闭错误提示时优先用 `meta.isShowErrorMessage`，不要在组件里重复 toast。

package/template-vp-react-shadcn/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/template-vp-react-shadcn/vite.config.ts

@@ -0,0 +1,35 @@
+import path from "path";
+
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import AutoImport from "unplugin-auto-import/vite";
+import { defineConfig, loadEnv } from "vite-plus";
+
+export default defineConfig(({ mode }) => {
+  const root = process.cwd();
+  const env = loadEnv(mode, root);
+  const { VITE_PORT } = env;
+
+  return {
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "src"),
+      },
+    },
+    server: {
+      port: Number(VITE_PORT),
+      host: "0.0.0.0",
+    },
+    plugins: [
+      react(),
+      AutoImport({
+        imports: ["react", "react-router", "react-dom"],
+        dts: "./src/types/auto-imports.d.ts",
+      }),
+      tailwindcss(),
+    ],
+    staged: {
+      "*": "vp check --fix",
+    },
+  };
+});

package/template-vue-vite-eslint/package.json

@@ -11,50 +11,46 @@
     "lint:fix": "eslint --fix"
   },
   "dependencies": {
-    "@alova/adapter-axios": "^2.0.17",
-    "@element-plus/icons-vue": "^2.3.2",
-    "@unocss/preset-wind3": "^66.5.10",
-    "@vue-flow/core": "^1.48.0",
-    "alova": "^3.4.1",
-    "axios": "^1.13.2",
-    "dayjs": "^1.11.19",
+    "@alova/adapter-axios": "^2.0.18",
+    "@antdv-next/icons": "^1.0.6",
+    "@unocss/preset-wind3": "^66.6.8",
+    "alova": "^3.5.1",
+    "antdv-next": "^1.2.2",
+    "axios": "^1.16.0",
+    "dayjs": "^1.11.20",
     "echarts": "^6.0.0",
-    "element-plus": "^2.12.0",
-    "nanoid": "^5.1.6",
     "nprogress": "^0.2.0",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
     "plus-pro-components": "^0.1.30",
-    "radashi": "^12.7.1",
-    "vue": "^3.5.25",
-    "vue-draggable-plus": "^0.6.0",
-    "vue-router": "^4.6.4",
-    "vue3-blocks-tree": "^0.6.2"
+    "radashi": "^12.9.0",
+    "vue": "^3.5.34",
+    "vue-router": "^5.0.6"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^6.7.1",
-    "@biomejs/biome": "^2.3.9",
-    "@commitlint/cli": "^20.2.0",
-    "@commitlint/config-conventional": "^20.2.0",
+    "@antdv-next/auto-import-resolver": "^1.0.7",
+    "@antfu/eslint-config": "^8.2.0",
+    "@commitlint/cli": "^20.5.3",
+    "@commitlint/config-conventional": "^20.5.3",
     "@plus-pro-components/resolver": "^0.0.3",
-    "@types/node": "^24.10.4",
+    "@types/node": "^24.12.3",
     "@types/nprogress": "^0.2.3",
-    "@unocss/eslint-plugin": "^66.5.10",
-    "@unocss/preset-attributify": "^66.5.10",
-    "@vitejs/plugin-vue": "^6.0.3",
-    "@vue/tsconfig": "^0.8.1",
-    "eslint": "9.39.2",
-    "eslint-plugin-format": "^1.1.0",
+    "@unocss/eslint-plugin": "^66.6.8",
+    "@unocss/preset-attributify": "^66.6.8",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/tsconfig": "^0.9.1",
+    "eslint": "10.3.0",
+    "eslint-plugin-format": "^2.0.1",
     "fast-glob": "^3.3.3",
-    "lefthook": "^2.0.12",
-    "sass": "^1.97.0",
-    "typescript": "~5.9.3",
-    "unocss": "66.5.10",
-    "unplugin-auto-import": "^20.3.0",
-    "unplugin-vue-components": "^30.0.0",
-    "vite": "8.0.0-beta.2",
+    "lefthook": "^2.1.6",
+    "sass": "^1.99.0",
+    "typescript": "~6.0.3",
+    "unocss": "66.6.8",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-vue-components": "^32.0.0",
+    "vite": "8.0.11",
     "vite-plugin-inspect": "^11.3.3",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vue-tsc": "^3.1.1"
+    "vue-tsc": "^3.2.8"
   }
 }

package/template-vue-vite-eslint/src/main.ts

@@ -6,7 +6,6 @@ import { setupStore } from './store'
 
 import 'virtual:svg-icons-register'
 
-import '@/styles/element-plus-variables.css'
 import '@/styles/index.scss'
 import 'virtual:uno.css'
 

package/template-vue-vite-eslint/src/styles/index.scss

@@ -1,8 +1,5 @@
 @use './font.scss';
 @use './variables.scss';
-@use './element-plus-variables.css';
-@use './plus-pro-components-variables.css';
-@use 'element-plus/theme-chalk/dark/css-vars.css';
 
 html,
 body,