@peng_kai/kit 0.2.0-beta.8 → 0.2.0

package/admin/styles/classCover.scss

@@ -173,17 +173,137 @@
   }
 }
 
+// ACard 组件的 actions 右对齐
+.ant-card.antd-cover__actions-right-align {
+  .ant-card-actions {
+    justify-content: flex-end !important;
+    padding: 0 24px;
+  
+    > li {
+      width: auto !important;
+      border-inline-end: none !important;
+  
+      &:not(:last-child) {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
 // 查询器表单基本样式
 .ant-form.ant-form__filter {
   display: flex;
   flex-wrap: wrap;
   --uno: 'gap-4 mb-4';
 
+  .ant-form-item-label {
+    line-height: 1.2em;
+    width: 4.8em;
+    text-align: start;
+    overflow: unset;
+    white-space: unset;
+
+    > label::after {
+      // display: none;
+      content: "";
+    }
+  }
+
   .ant-form-item {
     margin-bottom: 0;
-    min-width: 220px;
-    width: 250px;
-    max-width: 280px;
+    min-width: 250px;
+    width: 300px;
+    max-width: 380px;
     flex: 1 1 auto;
   }
 }
+
+// Modal 组件中的 Card 组件样式（为了和原 Modal 组件一样）
+.ant-card.antd-cover__card-in-modal {
+  --padding-size: 22px;
+
+  pointer-events: all;
+
+  @media bp-lt-mobilel {
+    --padding-size: 16px;
+  }
+
+  .ant-card-head {
+    min-height: 56px;
+    padding: 0 var(--padding-size);
+
+    @media bp-lt-mobilel {
+      min-height: 51px;
+    }
+  }
+
+  .ant-card-body {
+    height: var(--body-height, auto);
+    min-height: var(--min-body-height, auto);
+    max-height: var(--max-body-height, auto);
+    padding: var(--padding-size);
+    overflow-y: auto;
+  }
+
+  .ant-card-extra .close-btn {
+    --icon-color: var(--antd-colorTextTertiary);
+    --bg-color: transparent;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    font-size: 18px;
+    cursor: pointer;
+    background-color: var(--bg-color);
+    border: 0;
+    border-radius: 4px;
+    transition: all 100ms;
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      display: block;
+      width: 70%;
+      height: 1.5px;
+      content: '';
+      background-color: var(--icon-color);
+    }
+
+    &::before {
+      transform: translate(-50%, -50%) rotateZ(45deg);
+    }
+
+    &::after {
+      transform: translate(-50%, -50%) rotateZ(-45deg);
+    }
+
+    &:hover {
+      --icon-color: var(--antd-colorText);
+      --bg-color: var(--antd-colorFillSecondary);
+    }
+  }
+
+  .ant-card-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end !important;
+    min-height: 56px;
+    padding: 0 var(--padding-size);
+
+    > li {
+      width: auto !important;
+      margin: 0;
+      border-inline-end: none !important;
+
+      &:not(:last-child) {
+        margin-right: 8px;
+      }
+    }
+  }
+}

package/admin/styles/index.scss

@@ -2,26 +2,28 @@
 @import './globalCover.scss';
 
 @media (pointer: fine) {
-  * {
-    scrollbar-color: rgb(0 0 0 / 50%) transparent;
-    scrollbar-width: thin;
 
-    /* overflow-y: overlay; */
+  *::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: rgb(133 133 133 / 20%);
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(133 133 133 / 60%);
   }
 
-  ::-webkit-scrollbar {
+  *::-webkit-scrollbar {
     width: 6px;
     height: 6px;
     background-color: transparent;
   }
 
-  ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background-color: rgb(133 133 133 / 20%);
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: rgb(133 133 133 / 60%);
+  /* 不支持`::-webkit-scrollbar-*`的浏览器 */
+  @supports not selector(::-webkit-scrollbar) {
+    * {
+      scrollbar-color: rgb(0 0 0 / 50%) transparent;
+      scrollbar-width: thin;
+    }
   }
 }
 
@@ -31,4 +33,8 @@
 
 :root.dark {
   color-scheme: dark;
+}
+
+.operation {
+  
 }

package/antd/hooks/useAntdForm.ts

@@ -25,7 +25,7 @@ interface Options<S, TS> {
   transform?: (state: S) => TS
 }
 
-function useAntdForm<S extends Record<string, any>, TS = S>(schemas: MaybeRefOrGetter<SchemaConfig<S>>, options?: Options<S, TS>) {
+function useAntdForm<S extends Record<string, unknown>, TS = S>(schemas: MaybeRefOrGetter<SchemaConfig<S>>, options?: Options<S, TS>) {
   const schemasR = toRef(schemas);
 
   const state = ref({} as S);

package/antd/hooks/useAntdModal.ts

@@ -33,7 +33,10 @@ export function useAntdModal<Comp extends Component>(
     ...defaultModalProps,
     ...isProxy(modalProps) ? toRefs(modalProps) : modalProps,
     confirmLoading: toRef(() => (compRef as any)?.loading),
-    onOk: () => (compRef as any)?.confirm?.(),
+    onOk: (e: MouseEvent) => {
+      (compRef as any)?.confirm?.(e);
+      modalProps.onOk?.(e);
+    },
   });
   const modalSlotName = _comp.type === 'body' ? 'default' : 'modalRender';
 

package/antd/hooks/useAntdTable.ts

@@ -55,9 +55,10 @@ export function useAntdTable<
     }
   };
   const defineColumns = (columnsGetter: () => LocalColumnsType) => computed(columnsGetter);
-  const defineRowSelection = (rowSelectionGetter: () => LocalTableRowSelection) => {
+  const defineRowSelection = (rowSelectionGetter: () => LocalTableRowSelection = () => ({})) => {
     const rowSelection = reactive(rowSelectionGetter());
 
+    rowSelection.preserveSelectedRowKeys ??= true;
     rowSelection.selectedRowKeys ??= [];
     rowSelection.onChange ??= keys => rowSelection.selectedRowKeys = keys;
 

package/libs/echarts.ts

@@ -1,4 +1,4 @@
-import echarts from 'echarts';
+import * as echarts from 'echarts';
 
 export type * from 'echarts/types/dist/echarts';
 

package/libs/vue-i18n.ts

@@ -0,0 +1,21 @@
+import type { I18nOptions } from 'vue-i18n';
+
+export * from 'vue-i18n';
+
+export type TDatetimeStyles = Record<
+  'date' | 'time' | 'full' | 'mdhms' | 'mdhm',
+  NonNullable<I18nOptions['datetimeFormats']>[string][string]
+>;
+
+export const presetDatetimeStyles: TDatetimeStyles = {
+  /** 年/月/日 */
+  date: { year: 'numeric', month: '2-digit', day: '2-digit' },
+  /** 时:分:秒 */
+  time: { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false },
+  /** 年/月/日 时:分:秒 */
+  full: { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false },
+  /** 月/日 时:分:秒 */
+  mdhms: { month: '2-digit', day: '2-digit', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false },
+  /** 月/日 时:分 */
+  mdhm: { month: '2-digit', day: '2-digit', hour: 'numeric', minute: 'numeric', hour12: false },
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.2.0-beta.8",
+  "version": "0.2.0",
   "description": "",
   "author": "",
   "license": "ISC",
@@ -14,16 +14,41 @@
   },
   "peerDependencies": {
     "ant-design-vue": "4.1.2",
-    "vue": "3.4.19",
-    "vue-router": "4.2.5"
+    "vue": "3.4.21",
+    "vue-router": "4.3.0"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.515.0",
-    "@aws-sdk/lib-storage": "^3.515.0",
+    "@aws-sdk/client-s3": "^3.525.0",
+    "@aws-sdk/lib-storage": "^3.525.1",
     "@babel/generator": "^7.23.6",
-    "@babel/parser": "^7.23.9",
-    "@babel/traverse": "^7.23.9",
-    "@babel/types": "^7.23.9",
+    "@babel/parser": "^7.24.0",
+    "@babel/traverse": "^7.24.0",
+    "@babel/types": "^7.24.0",
+    "@ckeditor/ckeditor5-vue": "^5.1.0",
+    "@tanstack/vue-query": "^5.25.0",
+    "@vueuse/components": "^10.9.0",
+    "@vueuse/core": "^10.9.0",
+    "@vueuse/router": "^10.9.0",
+    "a-calc": "^1.3.11",
+    "ant-design-vue": "^4.1.2",
+    "archiver": "^6.0.2",
+    "axios": "^1.6.7",
+    "bignumber.js": "^9.1.2",
+    "chokidar": "^3.6.0",
+    "dayjs": "^1.11.10",
+    "echarts": "^5.4.3",
+    "execa": "^8.0.1",
+    "fast-glob": "^3.3.2",
+    "localstorage-slim": "^2.7.0",
+    "lodash-es": "^4.17.21",
+    "nprogress": "^0.2.0",
+    "pinia": "^2.1.7",
+    "tsx": "^4.7.1",
+    "vue": "^3.4.21",
+    "vue-i18n": "^9.10.1",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
     "@ckeditor/ckeditor5-adapter-ckfinder": "^41.1.0",
     "@ckeditor/ckeditor5-alignment": "^41.1.0",
     "@ckeditor/ckeditor5-autoformat": "^41.1.0",
@@ -54,38 +79,14 @@
     "@ckeditor/ckeditor5-theme-lark": "^41.1.0",
     "@ckeditor/ckeditor5-typing": "^41.1.0",
     "@ckeditor/ckeditor5-upload": "^41.1.0",
-    "@ckeditor/ckeditor5-vue": "^5.1.0",
     "@ckeditor/ckeditor5-word-count": "^41.1.0",
-    "@tanstack/vue-query": "^5.21.4",
-    "@vueuse/components": "^10.7.2",
-    "@vueuse/core": "^10.7.2",
-    "@vueuse/router": "^10.7.2",
-    "a-calc": "^1.3.8",
-    "ant-design-vue": "^4.1.2",
-    "archiver": "^6.0.1",
-    "axios": "^1.6.7",
-    "bignumber.js": "^9.1.2",
-    "chokidar": "^3.6.0",
-    "dayjs": "^1.11.10",
-    "echarts": "^5.4.3",
-    "execa": "^8.0.1",
-    "fast-glob": "^3.3.2",
-    "localstorage-slim": "^2.7.0",
-    "lodash-es": "^4.17.21",
-    "nprogress": "^0.2.0",
-    "pinia": "^2.1.7",
-    "tsx": "^4.7.1",
-    "vue": "^3.4.19",
-    "vue-router": "^4.2.5"
-  },
-  "devDependencies": {
     "@peng_kai/lint": "^0.1.0",
     "@types/archiver": "^6.0.2",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "18.19.15",
     "@types/nprogress": "^0.2.3",
-    "type-fest": "^4.10.2",
-    "typescript": "^5.3.3",
-    "vue-component-type-helpers": "^1.8.27"
+    "type-fest": "^4.11.1",
+    "typescript": "^5.4.2",
+    "vue-component-type-helpers": "^2.0.6"
   }
 }

package/request/interceptors/returnResultType.ts

@@ -7,15 +7,15 @@ import { ApiCode, ApiError, isTimeout } from '../helpers';
 export function returnResultType(): Parameters<AxiosInterceptorManager<any>['use']> {
   return [
     (resp) => {
-      const { resultType } = resp?.config;
+      const resultType = resp?.config?.resultType;
 
       if (resultType === 'api')
-        return resp.data;
+        return resp?.data;
 
       else if (resultType === 'axios')
         return resp;
 
-      return resp.data?.data;
+      return resp?.data?.data;
     },
     (error) => {
       let code = error?.response?.data?.code || error?.response?.status || ApiCode.UNKNOWN;

package/request/interceptors/toLogin.ts

@@ -2,25 +2,42 @@ import type { AxiosInterceptorManager } from 'axios';
 
 const REDIRECT_KEY = 'redirect';
 
-export function toLogin(authPath = `${window.location.origin}/auth/login`, code = 15001): Parameters<AxiosInterceptorManager<any>['use']> {
+interface IParams {
+  loginPath?: string
+  code?: number
+  toLogin?: (targetUrl: URL) => void
+}
+
+const defaultParams: Required<IParams> = {
+  loginPath: `${window.location.origin}/auth/login`,
+  code: 15001,
+  toLogin(targetUrl: URL) {
+    window.history.replaceState(null, '', targetUrl.toString());
+  },
+};
+
+export function toLogin(params: IParams = defaultParams): Parameters<AxiosInterceptorManager<any>['use']> {
+  const _params = { ...defaultParams, ...params };
+
   return [
     undefined,
     (err) => {
-      if (err.code !== code)
+      if (err.code !== _params.code)
         throw err;
 
-      const currentURL = new URL(window.location.href);
-      const targetURL = new URL(authPath);
+      const currentUrl = new URL(window.location.href);
+      const targetUrl = new URL(_params.loginPath);
 
-      if (currentURL.searchParams.has(REDIRECT_KEY))
-        targetURL.searchParams.set(REDIRECT_KEY, currentURL.searchParams.get(REDIRECT_KEY)!);
+      if (currentUrl.searchParams.has(REDIRECT_KEY))
+        targetUrl.searchParams.set(REDIRECT_KEY, currentUrl.searchParams.get(REDIRECT_KEY)!);
       else
-        targetURL.searchParams.set(REDIRECT_KEY, window.location.href);
+        targetUrl.searchParams.set(REDIRECT_KEY, window.location.href);
 
-      if (currentURL.toString() === targetURL.toString())
-        return;
+      if (currentUrl.toString() === targetUrl.toString())
+        throw err;
 
-      window.location.href = targetURL.toString();
+      _params.toLogin(targetUrl);
+      throw err;
     },
   ];
 }

package/request/request.ts

@@ -17,9 +17,6 @@ function createRequest<Req, OResp, Resp = Api.TransformPageResult<OResp>>(
   // 返回 API 数据中的 data 字段值，默认
   async function request(reqData: Req, config?: ReqConfig): Promise<Api.GetDataField<Resp>>;
   async function request(reqData: Req, config?: ReqConfig): Promise<any> {
-    // if (isSSR())
-    //   return null;
-
     const params = paramBuilder(reqData);
     const serviceName = params.headers?.['Service-Name'] ?? '';
     const service = createRequest.services[serviceName]?.server;

package/request/type.d.ts

@@ -51,19 +51,19 @@ declare namespace Api {
   type TransformPageResult<R> = R extends { pagination: infer P, data: infer D }
     ? D extends Record<string, any>
       ? D extends { list: any }
-      ? {
+        ? import('type-fest').Simplify<{
           [Rk in Exclude<keyof R, 'data' | 'pagination'>]: R[Rk];
         } & {
           data: D & { pagination: P }
-        }
-        : {
+        }>
+        : import('type-fest').Simplify<{
           [Rk in Exclude<keyof R, 'data' | 'pagination'>]: R[Rk];
         } & {
           data: {
             list: D
             pagination: P
           }
-        }
+        }>
       : R
     : R;
 }

package/utils/LocaleManager.ts

@@ -0,0 +1,125 @@
+import { mapKeys } from 'lodash-es';
+
+interface ILocaleMeta {
+  label: string
+  codes: string[]
+  icon?: string
+}
+
+interface ILoaders {
+  meta: Record<string, ILocaleMeta>
+  message: Record<string, () => Promise<Record<string, string>>>
+}
+
+const metaPathRE = /\/([-\w]*)\/(meta)\.ts$/;
+const messagePathRE = /\/([-\w]*)\/(index)\.ts$/;
+
+export class LocaleManager {
+  public localesLoaded: string[] = [];
+
+  private metaLoaders: ILoaders['meta'];
+  private messageLoaders: ILoaders['message'];
+  private localeStorageKey = 'LOCALE';
+  private _locale = '';
+
+  public constructor(loaders: ILoaders) {
+    this.metaLoaders = mapKeys(loaders.meta, (_, path) => path.match(metaPathRE)?.[1] ?? path);
+    this.messageLoaders = mapKeys(loaders.message, (_, path) => path.match(messagePathRE)?.[1] ?? path);
+    this._locale = this.defaultLocale;
+  }
+
+  /** 当前区域 */
+  public get locale() {
+    return this._locale;
+  }
+
+  /** 当前区域 */
+  public set locale(value: string) {
+    if (this.localesAvailable.includes(value)) {
+      document.documentElement.lang = value;
+      this.setStorageLocale(value);
+    }
+  }
+
+  /** 可用的区域列表 */
+  public get localesAvailable() {
+    return Object.keys(this.metaLoaders);
+  }
+
+  /** 所有区域元数据 */
+  public get localeMetas() {
+    return this.metaLoaders;
+  }
+
+  /** 获取默认区域 */
+  public get defaultLocale() {
+    const searchParams = new URLSearchParams(location.search);
+    // 获取区域的优先级
+    const localeTargets = [searchParams.get('locale'), searchParams.get('lang'), this.getStorageLocale(), navigator.language]
+      .filter(locale => !!locale)
+      .map(locale => locale!.replace('_', '-'));
+    const codeMatrix = this.localesAvailable.map(locale => [locale, ...this.localeMetas[locale].codes]);
+    let localeFinal = '';
+
+    for (const target of localeTargets) {
+      for (const codes of codeMatrix) {
+        const matched = codes.some(code => code.toUpperCase().startsWith(target.toUpperCase()));
+
+        if (matched) {
+          localeFinal = codes[0];
+          break;
+        }
+      }
+
+      if (localeFinal)
+        break;
+    }
+
+    localeFinal = localeFinal || 'en-US';
+    this.clearUrlLocale();
+
+    return localeFinal;
+  }
+
+  /**
+   * 加载区域消息
+   * @param locale 区域
+   * @returns 返回加载的消息，如果加载失败则返回 undefined
+   */
+  public async loadLocaleMessage(locale: string) {
+    if (!this.localesAvailable.includes(locale))
+      return;
+
+    const message = await this.messageLoaders[locale]?.().catch(() => undefined);
+
+    if (message)
+      this.localesLoaded.push(locale);
+
+    return message;
+  }
+
+  /**
+   * 定义区域元数据
+   * @param meta 区域元数据对象
+   * @returns 区域元数据对象
+   */
+  public static defineMeta(meta: ILocaleMeta) {
+    return meta;
+  }
+
+  private clearUrlLocale() {
+    const url = new URL(location.href);
+    url.searchParams.delete('locale');
+    url.searchParams.delete('lang');
+
+    history.replaceState(null, '', url.toString());
+  }
+
+  private getStorageLocale() {
+    return localStorage.getItem(this.localeStorageKey);
+  }
+
+  private setStorageLocale(locale: string) {
+    return localStorage.setItem(this.localeStorageKey, locale);
+  }
+}

package/vite/index.mjs

@@ -3,22 +3,48 @@
  * @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;
+// }
+
 export function getProxy(env) {
-  const keyRE = /^VITE_(HTTP|WS)_PREFIX/;
-  const valueRE = /^.+? => .+?$/;
+  const prefixKeyRE = /^VITE_URL_PREFIX_(.*)$/;
+  const socketUrlRE = /^wss?:\/\//;
+  const keys = Object.keys(env).filter(k => prefixKeyRE.test(k));
   const proxys = {};
 
-  for (const [k, v] of Object.entries(env)) {
-    if (!(keyRE.test(k) && valueRE.test(v)))
-      continue;
+  for (const k of keys) {
+    const name = k.match(prefixKeyRE)?.[1] ?? '';
+    const prefix = env[`VITE_URL_PREFIX_${name}`];
+    const target = env[`VITE_URL_PROXY_${name}`];
+    const proxyable = prefix && target;
 
-    const isWs = k.includes('_WS');
-    const [prefix, target] = v.split(' => ').map(i => i.trim());
+    if (!proxyable)
+      continue;
 
     proxys[prefix] = {
       target,
       changeOrigin: true,
-      ws: isWs,
+      ws: socketUrlRE.test(target),
       rewrite: path => path.replace(new RegExp(`^${prefix}`), ''),
     };
   }