@peng_kai/kit 0.2.0-beta.2 → 0.2.0-beta.21

package/admin/adminPlugin.ts

@@ -1,3 +1,4 @@
+import { inject } from 'vue';
 import type { App } from 'vue';
 import type { Router } from 'vue-router';
 import type { TUseMenuStore } from './stores/createUseMenuStore';
@@ -5,7 +6,7 @@ import type { TUsePageStore } from './stores/createUsePageStore';
 import type { TUsePageTabStore } from './stores/createUsePageTabStore';
 import type { TRole, TUsePermissionStore } from './stores/createUsePermissionStore';
 
-interface IOtions {
+export interface IOtions {
   meta: {
     appId: string
     appName: string
@@ -20,6 +21,7 @@ interface IOtions {
   }
 }
 
+const PROVIDE_KEY = 'TT_ADMIN';
 let _meta: IOtions['meta'];
 let _deps: IOtions['deps'];
 
@@ -27,6 +29,10 @@ export const adminPlugin = {
   install(_app: App, options: IOtions) {
     _meta = options.meta;
     _deps = options.deps;
+    _app.provide(PROVIDE_KEY, {
+      meta: this.meta,
+      deps: this.deps,
+    });
   },
   meta: new Proxy({} as IOtions['meta'], {
     get(_, p) {
@@ -45,3 +51,7 @@ export const adminPlugin = {
     },
   }),
 };
+
+export function injectTTAdmin() {
+  return inject<IOtions>(PROVIDE_KEY);
+}

package/admin/components/filter/src/FilterParam.vue

@@ -2,7 +2,7 @@
 import isNil from 'lodash-es/isNil';
 import isFinite from 'lodash-es/isFinite';
 import bignumber from 'bignumber.js';
-import { dayjs } from '../../../../utils/date';
+import dayjs from '../../../../libs/dayjs';
 
 export const paramTypes = { numberRange, datetimeRange, options };
 

package/admin/components/text/src/Datetime.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Tooltip as ATooltip } from 'ant-design-vue';
 import { computed } from 'vue';
-import { dayjs } from '../../../../utils/date';
+import dayjs from '../../../../libs/dayjs';
 
 defineOptions({
   inheritAttrs: false,

package/admin/defines/route/index.ts

@@ -29,7 +29,7 @@ declare module 'vue-router' {
     /**
      * 是否需要登录
      *
-     * 默认：`false`
+     * 默认：`true`
      */
     requireAuth?: boolean
     /**

package/admin/layout/large/Breadcrumb.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import type { VNode } from 'vue';
 import { Breadcrumb as ABreadcrumb } from 'ant-design-vue';
 import type { Route as AntdBreadcrumbRoute } from 'ant-design-vue/es/breadcrumb/Breadcrumb';
-import { adminPlugin } from '../../adminPlugin';
+import { injectTTAdmin } from '../../adminPlugin';
 import type { IBreadcrumb } from '../../stores/createUsePageStore';
 
 interface IBreadcrumbRoute extends AntdBreadcrumbRoute {
@@ -23,7 +23,7 @@ function _buildRoute(breadcrumb: IBreadcrumb): IBreadcrumbRoute {
 </script>
 
 <script setup lang="ts">
-const pageStore = adminPlugin.deps.usePageStore();
+const pageStore = injectTTAdmin()!.deps.usePageStore();
 const routes = computed(() => {
   let breadcrumbs: IBreadcrumbRoute[] = [];
 

package/admin/layout/large/Content.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { adminPlugin } from '../../adminPlugin';
+import { injectTTAdmin } from '../../adminPlugin';
 
-const pageStore = adminPlugin.deps.usePageStore();
+const pageStore = injectTTAdmin()!.deps.usePageStore();
 </script>
 
 <template>

package/admin/layout/large/Menu.vue

@@ -2,7 +2,7 @@
 import { computed, ref, watch } from 'vue';
 import { Menu as AMenu } from 'ant-design-vue';
 import type { ItemType } from 'ant-design-vue';
-import { adminPlugin } from '../../adminPlugin';
+import { injectTTAdmin } from '../../adminPlugin';
 import type { TMenu } from '../../stores/createUseMenuStore';
 
 function formatMenu(menu: TMenu): ItemType {
@@ -21,7 +21,7 @@ function formatMenu(menu: TMenu): ItemType {
 </script>
 
 <script setup lang="ts">
-const { router, useMenuStore } = adminPlugin.deps;
+const { router, useMenuStore } = injectTTAdmin()!.deps;
 const menuStore = useMenuStore();
 const items = computed(() => menuStore.menus.map(formatMenu));
 const openKeys = ref<string[]>([]);

package/admin/layout/large/PageTab.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { TabPane as ATabPane, Tabs as ATabs } from 'ant-design-vue';
-import { adminPlugin } from '../../adminPlugin';
+import { injectTTAdmin } from '../../adminPlugin';
 
-const pageTabStore = adminPlugin.deps.usePageTabStore();
+const pageTabStore = injectTTAdmin()!.deps.usePageTabStore();
 </script>
 
 <template>

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;
+    }
   }
 }
 

package/antd/hooks/useAntdModal.ts

@@ -30,10 +30,13 @@ export function useAntdModal<Comp extends Component>(
   const compProps = reactive(_comp.props);
   const compRef = useComponentRef(_comp.is);
   const _modalProps: ModalProps = reactive({
-    ...defaultModalProps,
+    ...toRefs(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);
+      defaultModalProps.onOk?.(e);
+    },
   });
   const modalSlotName = _comp.type === 'body' ? 'default' : 'modalRender';
 

package/libs/dayjs.ts

@@ -1,5 +1,12 @@
 import dayjs from 'dayjs';
 
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/zh';
+import 'dayjs/locale/en';
+
 export { isDayjs, unix, locale, extend } from 'dayjs';
 export type { Dayjs, PluginFunc, UnitType, UnitTypeLong, UnitTypeLongPlural, UnitTypeShort, QUnitType, ConfigType, ConfigTypeMap, OpUnitType, OptionType, ManipulateType } from 'dayjs';
 export default dayjs;
+
+dayjs.locale('zh');
+dayjs.extend(relativeTime);

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,91 +1,92 @@
-{
-  "name": "@peng_kai/kit",
-  "type": "module",
-  "version": "0.2.0-beta.2",
-  "description": "",
-  "author": "",
-  "license": "ISC",
-  "keywords": [],
-  "main": "index.js",
-  "scripts": {
-    "dev:js": "tsx ./admin/scripts/deploy.ts",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
-  },
-  "peerDependencies": {
-    "ant-design-vue": "4.1.2",
-    "vue": "3.4.19",
-    "vue-router": "4.2.5"
-  },
-  "dependencies": {
-    "@aws-sdk/client-s3": "^3.515.0",
-    "@aws-sdk/lib-storage": "^3.515.0",
-    "@babel/generator": "^7.23.6",
-    "@babel/parser": "^7.23.9",
-    "@babel/traverse": "^7.23.9",
-    "@babel/types": "^7.23.9",
-    "@ckeditor/ckeditor5-adapter-ckfinder": "^41.1.0",
-    "@ckeditor/ckeditor5-alignment": "^41.1.0",
-    "@ckeditor/ckeditor5-autoformat": "^41.1.0",
-    "@ckeditor/ckeditor5-basic-styles": "^41.1.0",
-    "@ckeditor/ckeditor5-block-quote": "^41.1.0",
-    "@ckeditor/ckeditor5-build-classic": "^41.1.0",
-    "@ckeditor/ckeditor5-code-block": "^41.1.0",
-    "@ckeditor/ckeditor5-document-outline": "^41.1.0",
-    "@ckeditor/ckeditor5-editor-classic": "^41.1.0",
-    "@ckeditor/ckeditor5-essentials": "^41.1.0",
-    "@ckeditor/ckeditor5-font": "^41.1.0",
-    "@ckeditor/ckeditor5-heading": "^41.1.0",
-    "@ckeditor/ckeditor5-highlight": "^41.1.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^41.1.0",
-    "@ckeditor/ckeditor5-html-embed": "^41.1.0",
-    "@ckeditor/ckeditor5-html-support": "^41.1.0",
-    "@ckeditor/ckeditor5-image": "^41.1.0",
-    "@ckeditor/ckeditor5-import-word": "^41.1.0",
-    "@ckeditor/ckeditor5-indent": "^41.1.0",
-    "@ckeditor/ckeditor5-link": "^41.1.0",
-    "@ckeditor/ckeditor5-list": "^41.1.0",
-    "@ckeditor/ckeditor5-media-embed": "^41.1.0",
-    "@ckeditor/ckeditor5-paragraph": "^41.1.0",
-    "@ckeditor/ckeditor5-remove-format": "^41.1.0",
-    "@ckeditor/ckeditor5-show-blocks": "^41.1.0",
-    "@ckeditor/ckeditor5-source-editing": "^41.1.0",
-    "@ckeditor/ckeditor5-table": "^41.1.0",
-    "@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"
-  }
-}
+{
+  "name": "@peng_kai/kit",
+  "type": "module",
+  "version": "0.2.0-beta.21",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "keywords": [],
+  "main": "index.js",
+  "scripts": {
+    "dev:js": "tsx ./admin/scripts/deploy.ts",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "peerDependencies": {
+    "ant-design-vue": "4.1.2",
+    "vue": "3.4.19",
+    "vue-router": "4.2.5"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.515.0",
+    "@aws-sdk/lib-storage": "^3.515.0",
+    "@babel/generator": "^7.23.6",
+    "@babel/parser": "^7.23.9",
+    "@babel/traverse": "^7.23.9",
+    "@babel/types": "^7.23.9",
+    "@ckeditor/ckeditor5-adapter-ckfinder": "^41.1.0",
+    "@ckeditor/ckeditor5-alignment": "^41.1.0",
+    "@ckeditor/ckeditor5-autoformat": "^41.1.0",
+    "@ckeditor/ckeditor5-basic-styles": "^41.1.0",
+    "@ckeditor/ckeditor5-block-quote": "^41.1.0",
+    "@ckeditor/ckeditor5-build-classic": "^41.1.0",
+    "@ckeditor/ckeditor5-code-block": "^41.1.0",
+    "@ckeditor/ckeditor5-document-outline": "^41.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "^41.1.0",
+    "@ckeditor/ckeditor5-essentials": "^41.1.0",
+    "@ckeditor/ckeditor5-font": "^41.1.0",
+    "@ckeditor/ckeditor5-heading": "^41.1.0",
+    "@ckeditor/ckeditor5-highlight": "^41.1.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^41.1.0",
+    "@ckeditor/ckeditor5-html-embed": "^41.1.0",
+    "@ckeditor/ckeditor5-html-support": "^41.1.0",
+    "@ckeditor/ckeditor5-image": "^41.1.0",
+    "@ckeditor/ckeditor5-import-word": "^41.1.0",
+    "@ckeditor/ckeditor5-indent": "^41.1.0",
+    "@ckeditor/ckeditor5-link": "^41.1.0",
+    "@ckeditor/ckeditor5-list": "^41.1.0",
+    "@ckeditor/ckeditor5-media-embed": "^41.1.0",
+    "@ckeditor/ckeditor5-paragraph": "^41.1.0",
+    "@ckeditor/ckeditor5-remove-format": "^41.1.0",
+    "@ckeditor/ckeditor5-show-blocks": "^41.1.0",
+    "@ckeditor/ckeditor5-source-editing": "^41.1.0",
+    "@ckeditor/ckeditor5-table": "^41.1.0",
+    "@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-i18n": "^9.9.1",
+    "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"
+  }
+}

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/utils/date.ts

@@ -1,12 +1,4 @@
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime.js';
-import 'dayjs/locale/zh';
-import 'dayjs/locale/en';
-
-export { default as dayjs } from 'dayjs';
-
-dayjs.locale('zh');
-dayjs.extend(relativeTime);
+import dayjs from '../libs/dayjs';
 
 /**
  * 返回给定日期的一天的开始时间。