@peng_kai/kit 0.1.17 → 0.2.0-beta.1

package/request/queryClient.ts

@@ -1,8 +1,11 @@
 import type { QueryClientConfig, QueryObserverOptions } from '@tanstack/vue-query';
 import { ApiCode } from './helpers';
 
+export { keepPreviousData } from '@tanstack/vue-query';
+export { ignoreRetryCodes, buildRetryFn, presetOptions, getNextPageParam, getPreviousPageParam };
+
 /** 不需要重试的 api code */
-export const ignoreRetryCodes = [
+const ignoreRetryCodes = [
   ApiCode.UNKNOWN,
   11000, // 操作失败
   11001, // 操作过于频繁
@@ -21,7 +24,7 @@ export const ignoreRetryCodes = [
  * @param additionPresetIgnore 一个布尔值，指示是否包括额外的预设忽略代码。默认为 true。
  * @returns 根据失败计数和错误代码确定是否重试的重试函数。
  */
-export function buildRetryFn(ignoreList: Array<number | string | RegExp>, additionPresetIgnore = true): NonNullable<QueryObserverOptions['retry']> {
+function buildRetryFn(ignoreList: Array<number | string | RegExp>, additionPresetIgnore = true): NonNullable<QueryObserverOptions['retry']> {
   const _ignoreList = [...ignoreList, ...(additionPresetIgnore ? ignoreRetryCodes : [])];
   return (failureCount, error: any) => {
     if (error?.code === undefined)
@@ -38,29 +41,39 @@ export function buildRetryFn(ignoreList: Array<number | string | RegExp>, additi
   };
 }
 
-export const presetOptions: QueryClientConfig = {
+const presetOptions: QueryClientConfig = {
   defaultOptions: {
     queries: {
       refetchOnWindowFocus: false,
       retry: buildRetryFn(ignoreRetryCodes),
-      getNextPageParam: (lastPage: any) => {
-        const { pagination } = lastPage ?? {};
-
-        if (pagination?.has_more) {
-          return {
-            page: (pagination.page ?? 0) + 1,
-            page_size: pagination?.page_size ?? 10,
-          };
-        }
-      },
-      getPreviousPageParam: (lastPage: any) => {
-        const { pagination } = lastPage ?? {};
-
-        return {
-          page: (pagination.page ?? 1) - 1,
-          page_size: pagination?.page_size ?? 10,
-        };
-      },
     },
   },
 };
+
+/**
+ * useInfiniteQuery 中的 getNextPageParam 预设
+ */
+function getNextPageParam(lastPage: any) {
+  const { pagination } = lastPage ?? {};
+
+  if (pagination?.has_more) {
+    return {
+      page: (pagination.page ?? 0) + 1,
+      page_size: pagination?.page_size ?? 10,
+    };
+  }
+}
+
+/**
+ * useInfiniteQuery 中的 getPreviousPageParam 预设
+ */
+function getPreviousPageParam(firstPage: any) {
+  const { pagination } = firstPage ?? {};
+
+  if (pagination?.has_more) {
+    return {
+      page: (pagination.page ?? 0) + 1,
+      page_size: pagination?.page_size ?? 10,
+    };
+  }
+}

package/request/type.d.ts

@@ -1,92 +1,92 @@
-declare namespace Api {
-  type Request = ((reqData: any, options?: Options) => Promise<any>) & {
-    id: string
-    setDefaultConfig: (config: Partial<import('axios').AxiosRequestConfig>) => Request
-  };
-  // type RequestPagination = (reqData: Partial<PageParam>, options?: Options) => Promise<PaginationData<any>>;
-  interface PageParam {
-    page: number
-    page_size: number
-  }
-  interface PageInfo {
-    has_more: boolean
-    page: number
-    page_size: number
-    total: number
-  }
-  interface PageData<T = any> {
-    list: T[] | null
-    pagination: PaginationInfo
-    [k in string]: any
-  }
-  interface Result<T = any | PageData<any>> {
-    code: number
-    msg: string
-    data: T
-  }
-  type GetParam<A extends Request> = A extends (reqData: infer R) => any ? R : any;
-  type GetData<A extends Request> = ReturnType<A> extends Promise<infer D> ? D : any;
-  type GetDataItem<A extends Request> = NonNullable<GetData<A>> extends { list: infer L }
-    ? NonNullable<L> extends Array<infer I>
-      ? I
-      : any
-    : any;
-  type GetDataField<R> = R extends { data: infer D } ? (D extends { list: any, pagination: any } ? D : D) : any;
-
-  /**
-   * 将api返回的分页数据转换成前端使用的分页数据格式，将分页数据格式统一
-   *
-   * ```
-   * {
-   *   code: number,
-   *   msg: string,
-   *   data: {
-   *     list: [],
-   *     pagination: {},
-   *     ...
-   *   }
-   * }
-   * ```
-   */
-  type TransformPageResult<R> = R extends { pagination: infer P, data: infer D }
-    ? D extends Record<string, any>
-      ? D extends { list: any }
-      ? {
-          [Rk in Exclude<keyof R, 'data' | 'pagination'>]: R[Rk];
-        } & {
-          data: D & { pagination: P }
-        }
-        : {
-          [Rk in Exclude<keyof R, 'data' | 'pagination'>]: R[Rk];
-        } & {
-          data: {
-            list: D
-            pagination: P
-          }
-        }
-      : R
-    : R;
-}
-
-// 测试用例 ----------------------------
-// type DDD1 = Api.TransformPageResult<{
-//   code: number
-//   msg: string
-//   data: {
-//     name: string
-//   }[]
-//   pagination: {
-//     page: number
-//   }
-// }>
-// type DDD2 = Api.TransformPageResult<{
-//   code: number
-//   msg: string
-//   data: {
-//     list: { name: string }[]
-//     total: {}
-//   }
-//   pagination: {
-//     page: number
-//   }
-// }>
+declare namespace Api {
+  type Request = ((reqData: any, options?: Options) => Promise<any>) & {
+    id: string
+    setDefaultConfig: (config: Partial<import('axios').AxiosRequestConfig>) => Request
+  };
+  // type RequestPagination = (reqData: Partial<PageParam>, options?: Options) => Promise<PaginationData<any>>;
+  interface PageParam {
+    page: number
+    page_size: number
+  }
+  interface PageInfo {
+    has_more: boolean
+    page: number
+    page_size: number
+    total: number
+  }
+  interface PageData<T = any> {
+    list: T[] | null
+    pagination: PaginationInfo
+    [k in string]: any
+  }
+  interface Result<T = any | PageData<any>> {
+    code: number
+    msg: string
+    data: T
+  }
+  type GetParam<A extends Request> = A extends (reqData: infer R) => any ? R : any;
+  type GetData<A extends Request> = ReturnType<A> extends Promise<infer D> ? D : any;
+  type GetDataItem<A extends Request> = NonNullable<GetData<A>> extends { list: infer L }
+    ? NonNullable<L> extends Array<infer I>
+      ? I
+      : any
+    : any;
+  type GetDataField<R> = R extends { data: infer D } ? (D extends { list: any, pagination: any } ? D : D) : any;
+
+  /**
+   * 将api返回的分页数据转换成前端使用的分页数据格式，将分页数据格式统一
+   *
+   * ```
+   * {
+   *   code: number,
+   *   msg: string,
+   *   data: {
+   *     list: [],
+   *     pagination: {},
+   *     ...
+   *   }
+   * }
+   * ```
+   */
+  type TransformPageResult<R> = R extends { pagination: infer P, data: infer D }
+    ? D extends Record<string, any>
+      ? D extends { list: any }
+      ? {
+          [Rk in Exclude<keyof R, 'data' | 'pagination'>]: R[Rk];
+        } & {
+          data: D & { pagination: P }
+        }
+        : {
+          [Rk in Exclude<keyof R, 'data' | 'pagination'>]: R[Rk];
+        } & {
+          data: {
+            list: D
+            pagination: P
+          }
+        }
+      : R
+    : R;
+}
+
+// 测试用例 ----------------------------
+// type DDD1 = Api.TransformPageResult<{
+//   code: number
+//   msg: string
+//   data: {
+//     name: string
+//   }[]
+//   pagination: {
+//     page: number
+//   }
+// }>
+// type DDD2 = Api.TransformPageResult<{
+//   code: number
+//   msg: string
+//   data: {
+//     list: { name: string }[]
+//     total: {}
+//   }
+//   pagination: {
+//     page: number
+//   }
+// }>

package/stylelint.config.cjs

@@ -1,7 +1,7 @@
-module.exports = {
-  // root: true,
-  extends: ['@peng_kai/lint/vue/stylelint_v2'],
-  rules: {
-    'custom-property-pattern': '(antd-([a-z][a-zA-Z0-9]+)*)|(([a-z][a-z0-9]*)(-[a-z0-9]+)*)',
-  },
-};
+module.exports = {
+  // root: true,
+  extends: ['@peng_kai/lint/vue/stylelint_v2'],
+  rules: {
+    'custom-property-pattern': '(antd-([a-z][a-zA-Z0-9]+)*)|(([a-z][a-z0-9]*)(-[a-z0-9]+)*)',
+  },
+};

package/tsconfig.json

@@ -1,50 +1,50 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "jsx": "preserve",
-    "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment",
-    "lib": [
-      "ESNext",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "allowImportingTsExtensions": true,
-
-    /* Linting */
-    "strict": true,
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": false,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noEmit": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "isolatedModules": true,
-    "skipLibCheck": true
-  },
-  "include": [
-    "admin/**/*.ts",
-    "admin/**/*.d.ts",
-    "admin/**/*.tsx",
-    "admin/**/*.vue",
-    "antd/**/*.ts",
-    "antd/**/*.d.ts",
-    "antd/**/*.tsx",
-    "antd/**/*.vue",
-    "request/**/*.ts",
-    "request/**/*.d.ts",
-    "utils/**/*.ts",
-    "utils/**/*.d.ts",
-    "vue/**/*.ts",
-    "vue/**/*.d.ts",
-    "vue/**/*.tsx",
-    "vue/**/*.vue"
-  ]
-}
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "lib": [
+      "ESNext",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+
+    /* Linting */
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noEmit": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "admin/**/*.ts",
+    "admin/**/*.d.ts",
+    "admin/**/*.tsx",
+    "admin/**/*.vue",
+    "antd/**/*.ts",
+    "antd/**/*.d.ts",
+    "antd/**/*.tsx",
+    "antd/**/*.vue",
+    "request/**/*.ts",
+    "request/**/*.d.ts",
+    "utils/**/*.ts",
+    "utils/**/*.d.ts",
+    "vue/**/*.ts",
+    "vue/**/*.d.ts",
+    "vue/**/*.tsx",
+    "vue/**/*.vue"
+  ]
+}

package/utils/upload/AwsS3.ts

@@ -0,0 +1,68 @@
+import { S3Client } from '@aws-sdk/client-s3';
+import { Upload } from '@aws-sdk/lib-storage';
+import type { FileHandler } from './fileHandlers';
+
+export type TGetParams = () => Promise<{
+  domain: string
+  bucket: string
+  region: string
+  accessKeyId: string
+  secretAccessKey: string
+  sessionToken: string
+}>;
+
+export class AwsS3 {
+  public domain = '';
+  public bucket = '';
+  public region = '';
+  private s3Client: S3Client | undefined = undefined;
+
+  public constructor(private getParams: TGetParams, private fileHandler?: FileHandler) {
+  }
+
+  public async upload(file: File, root?: string) {
+    const s3Client = await this.refreshClient();
+    const filePath = await this.genFilePath(root || 'unclassified');
+    const fileName = await (this.fileHandler?.genFileName(file) ?? this.genFileName(file));
+    const fullPath = `${filePath}/${fileName}`;
+
+    const uploader = new Upload({
+      client: s3Client!,
+      params: { Bucket: this.bucket, Key: fullPath, Body: file },
+      leavePartsOnError: false,
+    });
+
+    return { uploader, fileURL: `${this.domain}/${fullPath}` };
+  }
+
+  private genFilePath(root: string) {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = (now.getMonth() + 1).toString().padStart(2, '0');
+    const day = now.getDate().toString().padStart(2, '0');
+    const filePath = `${root}/${year}/${month}/${day}`;
+
+    return filePath;
+  }
+
+  private genFileName(file: File) {
+    return file.name;
+  }
+
+  private async refreshClient() {
+    const params = await this.getParams();
+    this.domain = params.domain;
+    this.bucket = params.bucket;
+    this.region = params.region;
+    this.s3Client = new S3Client({
+      region: this.region,
+      credentials: {
+        accessKeyId: params.accessKeyId,
+        secretAccessKey: params.secretAccessKey,
+        sessionToken: params.sessionToken,
+      },
+    });
+
+    return this.s3Client;
+  }
+}

package/utils/upload/fileHandlers.ts

@@ -0,0 +1,27 @@
+export abstract class FileHandler {
+  abstract genFileName(file: File): Promise<string>;
+}
+
+export class ImageHandler implements FileHandler {
+  public genFileName(file: File) {
+    const fileNameParts = file.name.split('.');
+    const ext = fileNameParts.pop() ?? '';
+    const fileName = fileNameParts.join('.');
+    const now = new Date();
+    const timestamp = now.getTime().toString(36);
+    const randomStr = [...Array(5)].map(() => Math.random().toString(36)[2]).join('');
+
+    return new Promise<string>((resolve, reject) => {
+      const img = new Image();
+      const imgUrl = URL.createObjectURL(file);
+
+      img.onload = () => {
+        URL.revokeObjectURL(imgUrl);
+        resolve(`${fileName}_${randomStr}@${timestamp}@${img.width}x${img.height}.${ext}`);
+      };
+
+      img.onerror = reject;
+      img.src = imgUrl;
+    });
+  }
+}

package/utils/upload/index.ts

@@ -0,0 +1,2 @@
+export { AwsS3, type TGetParams } from './AwsS3';
+export { ImageHandler, type FileHandler } from './fileHandlers';

package/vite/index.d.ts

@@ -0,0 +1 @@
+export function getProxy(env: Record<string, string>): Record<string, any>;

package/vite/index.mjs

@@ -0,0 +1,27 @@
+/**
+ * 获取 vite 的代理配置对象
+ * @param env 环境变量对象
+ * @returns 代理配置对象
+ */
+export function getProxy(env) {
+  const keyRE = /^VITE_(HTTP|WS)_PREFIX/;
+  const valueRE = /^.+? => .+?$/;
+  const proxys = {};
+
+  for (const [k, v] of Object.entries(env)) {
+    if (!(keyRE.test(k) && valueRE.test(v)))
+      continue;
+
+    const isWs = k.includes('_WS');
+    const [prefix, target] = v.split(' => ').map(i => i.trim());
+
+    proxys[prefix] = {
+      target,
+      changeOrigin: true,
+      ws: isWs,
+      rewrite: path => path.replace(new RegExp(`^${prefix}`), ''),
+    };
+  }
+
+  return proxys;
+}

package/vue/components/echarts/index.ts

@@ -0,0 +1 @@
+export { default as ECharts } from './src/ECharts.vue';

package/vue/components/echarts/src/ECharts.vue

@@ -0,0 +1,48 @@
+<script lang="ts">
+import { useResizeObserver } from '@vueuse/core';
+import * as echarts from 'echarts';
+import { ref, shallowRef, toRef, watchEffect } from 'vue';
+import { useIsDark } from '../../../hooks/useIsDark';
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+  echartOption: any
+}>();
+
+const $chartEle = ref<HTMLElement>();
+const echartInst = shallowRef<echarts.ECharts>();
+const isDark = useIsDark();
+
+watchEffect(() => {
+  if (!$chartEle.value) {
+    echartInst.value = undefined;
+    return;
+  }
+
+  echartInst.value?.dispose();
+  echartInst.value = echarts.init($chartEle.value, isDark.value ? 'dark' : 'light');
+  echartInst.value.setOption(props.echartOption ?? {});
+});
+
+/**
+ * 当图表的尺寸变化时，图表响应式变化。
+ * 考虑到性能问题，所以当尺寸变化时隐藏图表，避免浏览器反复绘制。
+ */
+let sizeResponsiveTimer = 0;
+useResizeObserver(toRef(() => $chartEle.value?.parentElement), () => {
+  $chartEle.value?.style.setProperty('width', '0px');
+  $chartEle.value?.style.setProperty('overflow', 'hidden');
+  clearTimeout(sizeResponsiveTimer);
+
+  sizeResponsiveTimer = window.setTimeout(() => {
+    $chartEle.value?.style.removeProperty('width');
+    $chartEle.value?.style.removeProperty('overflow');
+    echartInst.value?.resize({ width: 'auto' });
+  }, 200);
+});
+</script>
+
+<template>
+  <div ref="$chartEle" />
+</template>

package/vue/components/index.ts

@@ -1 +1,2 @@
 export { InfiniteQuery } from './infinite-query';
+export { ECharts } from './echarts';

package/vue/components/infinite-query/index.ts

@@ -1 +1 @@
-export { default as InfiniteQuery } from './src/InfiniteQuery.vue';
+export { default as InfiniteQuery } from './src/InfiniteQuery.vue';