@peng_kai/kit 0.3.0-beta.2 → 0.3.0-beta.20

package/admin/components/provider/admin-router.ts

@@ -0,0 +1,361 @@
+import { computed, defineComponent, h, reactive, ref, shallowRef, toRef, watch } from 'vue';
+import type { MaybeRef, PropType, Ref, ShallowRef, UnwrapNestedRefs, VNode } from 'vue';
+import type { RouteLocationNormalizedGeneric, RouteLocationNormalizedLoaded, Router } from 'vue-router';
+
+interface TOptions {
+  excludeTabs?: Array<string>
+}
+
+export function createAdminRouter(options: TOptions) {
+  const router = shallowRef<Router | null>(null);
+  const { menus, breadcrumbs, menuPath, addMenu, generateMenus } = useMenu(router);
+  const { tabs, currentTab: tab, tabsCached, addTab, delTab, getTab } = useTab(router, options);
+
+  function setRouter(newRouter: Router) {
+    router.value = newRouter;
+  }
+
+  return reactive({
+    menus,
+    menuPath,
+    breadcrumbs,
+    tabs,
+    tabsCached,
+    tab,
+    setRouter,
+    addMenu,
+    addTab,
+    delTab,
+    getTab,
+    generateMenus,
+  });
+}
+
+const PageRefresh = defineComponent({
+  props: { 
+    router: { type: Object as PropType<Router>, required: true },
+    originalMainComp: { type: Object as PropType<any>, required: true },
+   },
+  mounted() {
+    const { router } = this.$props;
+    const fullPath = router.currentRoute.value.fullPath;
+    router.replace({ ...router.resolve(fullPath),  force: true });
+  },
+  setup() {
+    return () => null;
+  },
+});
+
+function useTab(router: ShallowRef<Router | null>, options: TOptions = {}) {
+  const tabs = ref<TTab[]>([]);
+  const currentTab = computed(() => [...tabs.value].sort((a, b) => b.lastTime - a.lastTime)[0]);
+  const tabsCached = ref<string[]>([]);
+
+  function addTab(tab: TTabConfig) {
+    tabs.value.push(reactive(tab));
+  }
+
+  function delTab(path: string) {
+    if (path === currentTab.value?.path) {
+      const index = tabs.value.findIndex(tab => tab.path === path);
+      const nextTab = tabs.value[index + 1] || tabs.value[index - 1];
+
+      if (nextTab) {
+        tabs.value.splice(index, 1);
+        router.value?.replace(nextTab.path);
+      }
+    }
+    else {
+      const index = tabs.value.findIndex(tab => tab.path === path);
+      if (index >= 0)
+        tabs.value.splice(index, 1);
+    }
+  }
+
+  function getTab(path: string) {
+    return tabs.value.find(tab => tab.path === path);
+  }
+
+  function switchTab(to: RouteLocationNormalizedGeneric, from: RouteLocationNormalizedGeneric) {
+    const toTab = getTab(to.fullPath);
+    const fromTab = getTab(from.fullPath);
+    const lastTime = Date.now();
+    const isReplaced = history.state?.replaced;
+    const tabType = Number(history.state?.tabType ?? 1); // 0:不新增 tab, 1:新增 tab, 2: 固定 tab（不可关闭）
+
+    // 0. 刷新页面
+    if (toTab && toTab?.path === fromTab?.path) {
+      const components = to.matched[1].components as Record<string, any>;
+
+      if (!components?.default || !router.value)
+        return;
+
+      if (components.default.originalMainComp) {
+        components.default = components.default.originalMainComp;
+      }
+      else {
+        const pageRefreshComp = h(PageRefresh, { router: router.value, originalMainComp:components.default  }) as any;
+        pageRefreshComp.originalMainComp = components.default;
+        components.default = pageRefreshComp;
+        toTab.lastTime = 0;
+        setTimeout(() => toTab.lastTime = lastTime, 10);
+      }
+    }
+    // 1. 在已有的 tab 中互相切换
+    else if (toTab && fromTab && !isReplaced) {
+      toTab.lastTime = lastTime;
+      fromTab.lastTime = lastTime - 1;
+    }
+    // 2. 仅改变当前 tab 的参数
+    else if (!toTab && fromTab && isReplaced) {
+      fromTab.lastTime = lastTime;
+      fromTab.path = to.fullPath;
+      fromTab.routeName = String(to.name);
+    }
+    // 3. 删除当前 tab
+    else if (toTab && !fromTab && isReplaced) {
+      toTab.lastTime = lastTime;
+    }
+    // 4. 新增 tab
+    else {
+      // 4.1 排除不需要新增 tab 的页面
+      const isExcluded = tabType === 0 || options.excludeTabs?.includes(String(to.name)) || getTab(to.fullPath);
+      if (isExcluded)
+        return;
+
+      const title = getTitle(to) || String(to.name || to.fullPath);
+      addTab({
+        lastTime,
+        title,
+        type: tabType,
+        path: to.fullPath,
+        routeName: String(to.name),
+        routeTitle: title,
+      });
+      fromTab?.lastTime && (fromTab.lastTime = lastTime - 1);
+    }
+  }
+
+  watch(tabs, (tabs) => {
+    let tabCached = tabs.filter(tab => tab.lastTime > 0);
+
+    if (tabCached.length > 10)
+      tabCached = tabCached.sort((a, b) => a.lastTime - b.lastTime).slice(0, 10);
+
+    tabsCached.value = tabCached.map(tab => tab.path);
+  }, { immediate: true, deep: 2 });
+
+  watch(router, (router) => {
+    router?.afterEach((to, from) => {
+      switchTab(to, from);
+
+      // 使用 to.fullPath 重命名 main 组件
+      if (to.matched.length > 1) {
+        const mainComp: any = to.matched[1].components?.default;
+        const compName = currentTab.value?.path;
+
+        if (mainComp && compName)
+          mainComp.__name = compName;
+      }
+    });
+  });
+
+  return { tabs, currentTab, tabsCached, addTab, delTab, getTab, switchTab };
+}
+
+function useMenu(router: ShallowRef<Router | null>) {
+  const currentRouteName = computed(() => String(router.value?.currentRoute.value.name || ''));
+  const menus = ref<TMenu[]>([]);
+  const menuPath = computed(() => getMenuPath(menus.value, currentRouteName.value));
+  const breadcrumbs = computed(() => getMenuPath(menus.value, currentRouteName.value).map(menuToBreadcrumb));
+
+  function addMenu(menuConfig: TMenuConfig, parentKey?: string) {
+    const labelGetter = typeof menuConfig.label === 'function' ? menuConfig.label : (() => menuConfig.label) as (() => string);
+    const iconGetter = typeof menuConfig.icon === 'function' ? menuConfig.icon : () => null;
+
+    const _menu = reactive<IMenuReactive>({
+      key: menuConfig.key,
+      label: toRef(labelGetter),
+      icon: toRef(iconGetter),
+      trigger: menuConfig.trigger,
+      order: menuConfig.order,
+    });
+
+    if (parentKey) {
+      const parentMenu = findMenu(menus.value, parentKey);
+
+      if (!parentMenu)
+        return;
+
+      const children = reactive(parentMenu.children ?? []);
+      children.push(_menu);
+      children.sort((a, b) => b.order - a.order);
+      parentMenu.children = children;
+    }
+    else {
+      menus.value.push(_menu);
+      menus.value.sort((a, b) => b.order - a.order);
+    }
+  }
+
+  function generateMenus(
+    filter?: (menu: ReturnType<typeof getMenusByRouter>[number]) => boolean,
+    otherRouter?: Router,
+  ) {
+    if (!router.value)
+      return;
+
+    menus.value.length = 0;
+
+    const finalFilter = filter ?? (() => true);
+    const finalRouter = otherRouter ?? router.value;
+
+    getMenusByRouter(finalRouter).filter(finalFilter).forEach(({ menu, parentKey }) => addMenu(menu, parentKey));
+  }
+
+  watch(router, (router) => {
+    generateMenus(undefined, router || undefined);
+  });
+
+  return { menus, menuPath, breadcrumbs, addMenu, generateMenus };
+}
+interface TMenuConfig {
+  key: string
+  label: string | (() => string)
+  icon?: () => VNode
+  order: number
+  trigger: () => void
+  children?: TMenuConfig[]
+}
+
+interface IMenuReactive {
+  key: string
+  label: Ref<string>
+  icon: Ref<VNode | null>
+  order: number
+  trigger: () => void
+  children?: IMenuReactive[]
+}
+
+export type TMenu = UnwrapNestedRefs<IMenuReactive>;
+
+export interface TBreadcrumb {
+  title: string
+  icon?: VNode | null
+  trigger?: () => void
+  children?: TBreadcrumb[]
+}
+
+interface TTabConfig {
+  title: MaybeRef<string>
+  routeTitle: MaybeRef<string>
+  path: string
+  routeName: string
+  lastTime: number
+  type: number
+}
+
+export type TTab = UnwrapNestedRefs<TTabConfig>;
+
+export function getTitle(route?: Pick<RouteLocationNormalizedLoaded, 'meta'>) {
+  const mTitle = route?.meta?.title;
+
+  return typeof mTitle === 'function' ? mTitle() : mTitle;
+}
+
+export function getMenusByRouter(router: Router) {
+  const menuOrderRE = /^(?<key>\w*)@(?<order>\d+)$/;
+  const routes = router.getRoutes();
+  const menus: Array<{ parentKey?: string, menu: TMenuConfig }> = routes
+    .filter(route => menuOrderRE.test((route.meta.menuOrder ?? '')))
+    .map((route) => {
+      const res = route.meta!.menuOrder!.match(menuOrderRE);
+      const parentKey = res?.groups?.key;
+      const order = Number(res?.groups?.order);
+      const name = route.name as string;
+      const menu = {
+        key: name,
+        label: route.meta.title ?? name,
+        icon: route.meta.icon,
+        trigger: () => {
+          if (router.currentRoute.value.name !== name)
+            router.push({ name })
+        },
+        order,
+      };
+
+      return { parentKey, menu };
+    });
+
+  // 将含有子菜单的菜单的 trigger 设置为空函数
+  const hasSubMenus = menus.filter(menu => menus.some(m => m.parentKey === menu.menu.key));
+  hasSubMenus.forEach((menu) => {
+    menu.menu.trigger = (() => {}) as any;
+  });
+
+  return menus;
+}
+
+export function printRounesNameInterface(routes: { name: PropertyKey }[]) {
+  console.groupCollapsed('路由命名');
+  const routesName = new Set();
+  routes.forEach((route) => {
+    if (typeof route.name === 'string')
+      routesName.add(route.name);
+  });
+  console.log([...routesName.values()].sort().filter(name => !!name).map(name => `${name}: true`).join('\n'));
+  console.groupEnd();
+}
+
+function findMenu(menus: TMenu[], key: string) {
+  const queue = [...menus];
+
+  while (queue.length > 0) {
+    const menu = queue.shift()!;
+
+    if (menu.key === key)
+      return menu;
+
+    if (menu.children)
+      queue.push(...menu.children);
+  }
+
+  return undefined;
+};
+
+function menuToBreadcrumb(menu: TMenu) {
+  const ret: TBreadcrumb = reactive({
+    title: menu.label,
+    icon: menu.icon,
+    trigger: menu.trigger,
+    children: menu.children?.map(menuToBreadcrumb),
+  });
+
+  return ret;
+}
+
+function getMenuPath(menus: TMenu[], key: string) {
+  const path: TMenu[] = [];
+
+  const _getMenuPath = (menus: TMenu[], key: string) => {
+    for (const menu of menus) {
+      if (menu.key === key) {
+        path.push(menu);
+        return true;
+      }
+
+      if (menu.children) {
+        path.push(menu);
+        if (_getMenuPath(menu.children, key))
+          return true;
+        path.pop();
+      }
+    }
+
+    return false;
+  };
+
+  _getMenuPath(menus, key);
+
+  return path as TMenu[];
+};

package/admin/components/provider/index.ts

@@ -1 +1,4 @@
+export { createAdminRouter } from './admin-router';
+export { createAdminPermission } from './admin-permission';
+
 export { default as AdminProvider, useInjectedAdminConfig, useProvidingAdminConfig } from './src/AdminProvider.vue';

package/admin/components/rich-text/src/RichText.new.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { useIntervalFn } from '@vueuse/core';
-import CKEditor from '@ckeditor/ckeditor5-vue';
+import { Ckeditor } from '@ckeditor/ckeditor5-vue';
 import { shallowRef } from 'vue';
 import { useInjectDisabled } from 'ant-design-vue/es/config-provider/DisabledContext';
 import { defaultConfig } from './editorConfig';
@@ -20,7 +20,19 @@ function useClassicEditor() {
 </script>
 
 <script setup lang="ts">
-const props = defineProps(['modelValue', 'disabled', 'plugins']);
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    disabled?: boolean;
+    plugins?: string[];
+    height: string;
+  }>(),
+  {
+    disabled: false,
+    plugins: () => [],
+    height: '500px',
+  }
+);
 const emits = defineEmits<{
   (e: 'update:modelValue', value: string): void
 }>();
@@ -33,7 +45,7 @@ editorConfig.extraPlugins = props.plugins;
 
 <template>
   <div class="editor-wrapper">
-    <CKEditor.component
+    <Ckeditor
       v-if="ClassicEditor"
       :modelValue="props.modelValue"
       :editor="ClassicEditor"
@@ -50,9 +62,10 @@ editorConfig.extraPlugins = props.plugins;
 <style scoped lang="scss">
 .editor-wrapper {
   --loading-color: var(--antd-colorPrimary);
+  min-height: 40px;
 
   :deep(.ck-editor__main > .ck-content) {
-    height: 500px;
+    height: v-bind('props.height');
     overflow: auto;
   }
 }

package/admin/components/rich-text/src/editorConfig.ts

@@ -95,7 +95,7 @@ export const defaultConfig: Record<string, any> = {
     },
   },
   link: {
-    addTargetToExternalLinks: true,
+    addTargetToExternalLinks: false,
     defaultProtocol: 'https://',
     decorators: {
       toggleDownloadable: {
@@ -105,6 +105,15 @@ export const defaultConfig: Record<string, any> = {
           download: 'file',
         },
       },
+      openInNewTab: {
+        mode: 'manual',
+        label: '打开新标签页',
+        defaultValue: true,			// This option will be selected by default.
+        attributes: {
+          target: '_blank',
+          rel: 'noopener noreferrer'
+        }
+      }
     },
   },
   table: {

package/admin/components/text/index.ts

@@ -1,5 +1,6 @@
 import Hash from './src/Hash.vue';
 import Amount from './src/Amount.vue';
+import Amount2 from './src/Amount.v2.vue';
 import Datetime from './src/Datetime.vue';
 import Duration from './src/Duration.vue';
 import IP from './src/IP.vue';
@@ -10,6 +11,7 @@ export { createDateTypeSwitcher } from './src/createDateTypeSwitcher';
 export const Text = {
   Hash,
   Amount,
+  Amount2,
   Datetime,
   Duration,
   IP,

package/admin/components/text/src/Amount.v2.vue

@@ -0,0 +1,132 @@
+<!-- eslint-disable jsdoc/no-multi-asterisks -->
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { BigNumber } from 'bignumber.js';
+import bignumber from 'bignumber.js';
+import CurrencyIcon, {textIcons} from '../../currency/src/CurrencyIcon.vue';
+import Num from './Num.vue';
+
+// 由于 Vue 目前不支持 Props `interface AmountProps extends CurrencyIconProps, NumProps{}` 多继承写法，所以暂时这样写
+interface AmountProps {
+  /** ****************** 与 Num 组件 Props 同步 ********************/
+  /**
+   * 数值
+   */
+  value: BigNumber.Value | undefined | null
+  /**
+   * 小数位数
+   */
+  decimals?: number | [number, number]
+  /**
+   * 舍入方式
+   *
+   * - up: 向上取整
+   * - down: 向下取整
+   * - half-up: 四舍五入
+   * - half-even: 银行家算法
+   */
+  round?: 'up' | 'down' | 'half-up' | 'half-even'
+  /**
+   * 格式化方式
+   *
+   * - original: 原始
+   * - pad-dec: 自适应补零，即整数位多1位，小数位就少1位
+   * - fixed-dec: 固定小数位数
+   * - max-dec: 最大小数位数
+   * - min-dec: 最小小数位数
+   * - clamp-dec: 限制小数位数
+   */
+  format?: 'original' | 'pad-dec' | 'fixed-dec' | 'max-dec' | 'min-dec' | 'clamp-dec'
+  /**
+   * 着色
+   *
+   * - inherit: 继承
+   * - neg: 负数
+   * - pos: 正数
+   * - full: 全部
+   */
+  colored?: 'inherit' | 'neg' | 'pos' | 'full'
+  /**
+   * 是否显示正数符号
+   */
+  showPos?: boolean
+  /**
+   * 是否使用分组分隔符（千分符）
+   */
+  grouping?: boolean
+  /**
+   * 是否弱化无价值的零值
+   */
+  weakPad?: boolean
+
+  /** ****************** 与 CurrencyIcon 组件 Props 同步 ********************/
+  symbol?: string
+  size?: string
+  cdn?: string
+  iconType?: 'img' | 'text'
+
+  /** ****************** 本组件的 Props ********************/
+  /** 图标显示位置 */
+  iconPos?: 'left' | 'right' | 'hidden'
+  /** 字符图标是否使用数字的颜色 */
+  useNumColor?: boolean
+  /** 值的精度（整数 value 除以 precision） */
+  precision?: number
+}
+
+const props = withDefaults(defineProps<AmountProps>(), {
+  // Num 组件 Props
+  value: () => bignumber(0),
+  decimals: 8,
+  round: 'down',
+  weakPad: true,
+  showPos: false,
+  colored: 'inherit',
+  format: 'original',
+  grouping: true,
+
+  // CurrencyIcon 组件 Props
+  size: '1.1em',
+  // symbol: '',
+  iconType: 'img',
+
+  // 本组件 Props
+  iconPos: 'left',
+  useNumColor: false,
+  precision: 0,
+});
+
+const isTextIcon = computed(() => {
+  return props.iconType === 'text' || textIcons.value.includes(String(props.symbol));
+});
+</script>
+
+<template>
+  <span class="amount flex-inline" :class="[isTextIcon ? 'items-baseline' : 'items-center']">
+    <CurrencyIcon v-if="props.iconPos === 'left' && props.symbol && !props.useNumColor" v-bind="props" class="currency-icon" />
+    <Num v-bind="props" :value="bignumber(props.value ?? 0).dividedBy(10 ** props.precision)">
+      <template #signLeft>
+        <CurrencyIcon v-if="props.iconPos === 'left' && props.symbol && props.useNumColor" v-bind="props" class="currency-icon" />
+      </template>
+    </Num>
+    <CurrencyIcon v-if="props.iconPos === 'right'" v-bind="props" class="currency-icon" />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.amount {
+  line-height: 1em;
+}
+.symbol-icon {
+  line-height: inherit;
+  font-size: inherit;
+}
+.amount .currency-icon:first-child {
+  margin-right: 0.15em;
+}
+
+.amount .currency-icon:last-child {
+  margin-left: 0.15em;
+}
+</style>

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { Tooltip as ATooltip } from 'ant-design-vue';
+import { Tooltip } from 'ant-design-vue';
 import { computed } from 'vue';
 import dayjs from '../../../../libs/dayjs';
+import { getTtaTimeZone } from '../../date'
 
 defineOptions({
   inheritAttrs: false,
@@ -10,16 +11,18 @@ defineOptions({
 const props = withDefaults(
   defineProps<{
     timestamp?: number | string
+    ts?: number | string
     template?: string
-    utc?: boolean
   }>(),
   {
-    template: 'MM-DD HH:mm:ss',
-    utc: false,
+    template: 'YY-MM-DD HH:mm:ss',
   },
 );
+
+const tz = getTtaTimeZone();
+const localTz = dayjs.tz.guess();
 const timestamp = computed(() => {
-  let tsStr = String(props.timestamp);
+  let tsStr = String(props.ts || props.timestamp);
 
   if (tsStr.length === 10)
     tsStr += '000';
@@ -33,19 +36,21 @@ const timestamp = computed(() => {
 const text = computed(() => {
   if (!timestamp.value)
     return '-';
-
   const ts = dayjs(timestamp.value);
-
-  return props.utc ? ts.utc().format(props.template) : ts.format(props.template);
+  return ts.tz(tz.value).format(props.template);
 });
 </script>
 
 <template>
-  <ATooltip destroyTooltipOnHide>
+  <Tooltip destroyTooltipOnHide :align="{ offset: [0, 8] }">
     <template v-if="timestamp" #title>
-      <div>{{ dayjs(timestamp).fromNow?.() }}</div>
-      <div>
+      <div>{{ dayjs(timestamp).tz(tz).fromNow?.() }}</div>
+      <div v-if="dayjs.tz.guess() !== tz && tz !== 'UTC' ">
         {{ dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss') }}
+        <span class="op-50">指定</span>
+      </div>
+      <div>
+        {{ dayjs(timestamp).tz(localTz).format('YYYY-MM-DD HH:mm:ss') }}
         <span class="op-50">本地</span>
       </div>
       <div v-if="dayjs().utc">
@@ -54,7 +59,7 @@ const text = computed(() => {
       </div>
     </template>
     <span v-bind="$attrs" class="text">{{ text }}</span>
-  </ATooltip>
+  </Tooltip>
 </template>
 
 <style scoped lang="scss">