@peng_kai/kit 0.3.0-beta.3 → 0.3.0-beta.31

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 = to.fullPath;
+      }
+    });
+  });
+
+  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,11 +1,11 @@
 <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';
-import 'https://cdn.ckeditor.com/ckeditor5/41.1.0/super-build/ckeditor.js';
-import 'https://cdn.ckeditor.com/ckeditor5/41.1.0/super-build/translations/zh-cn.js';
+import 'https://cdn.ckeditor.com/ckeditor5/41.2.0/super-build/ckeditor.js';
+import 'https://cdn.ckeditor.com/ckeditor5/41.2.0/super-build/translations/zh-cn.js';
 
 function useClassicEditor() {
   const ClassicEditor = shallowRef();
@@ -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

@@ -3,6 +3,72 @@ export const defaultConfig: Record<string, any> = {
     ui: 'zh-cn',
   },
   removePlugins: ['ImportWord', 'ExportWord', 'RevisionHistory', 'RealTimeCollaborativeEditing', 'RealTimeCollaborativeComments', 'RealTimeCollaborativeRevisionHistory', 'RealTimeCollaborativeTrackChanges', 'PresenceList', 'WProofreader', 'DocumentOutline', 'Comments', 'TrackChanges', 'TrackChangesData', 'TableOfContents', 'SlashCommand', 'PasteFromOfficeEnhanced', 'ContentTemplates', 'FormatPainter', 'Mentions', 'PageBreak', 'Pagination', 'AIAssistant', 'CaseChange', 'Template'],
+  // plugins: [
+  //   'Alignment',
+  //   'Autoformat',
+  //   'AutoImage',
+  //   'AutoLink',
+  //   'Autosave',
+  //   'BalloonToolbar',
+  //   'BlockQuote',
+  //   'Bold',
+  //   'Code',
+  //   'CodeBlock',
+  //   'Essentials',
+  //   'FindAndReplace',
+  //   'FontBackgroundColor',
+  //   'FontColor',
+  //   'FontFamily',
+  //   'FontSize',
+  //   'FullPage',
+  //   'Fullscreen',
+  //   'GeneralHtmlSupport',
+  //   'Heading',
+  //   'Highlight',
+  //   'HorizontalLine',
+  //   'HtmlComment',
+  //   'HtmlEmbed',
+  //   'ImageBlock',
+  //   'ImageCaption',
+  //   'ImageInline',
+  //   'ImageInsert',
+  //   'ImageInsertViaUrl',
+  //   'ImageResize',
+  //   'ImageStyle',
+  //   'ImageTextAlternative',
+  //   'ImageToolbar',
+  //   'ImageUpload',
+  //   'Indent',
+  //   'IndentBlock',
+  //   'Italic',
+  //   'Link',
+  //   'LinkImage',
+  //   'List',
+  //   'ListProperties',
+  //   'Markdown',
+  //   'MediaEmbed',
+  //   'Paragraph',
+  //   'PasteFromMarkdownExperimental',
+  //   'PasteFromOffice',
+  //   'PlainTableOutput',
+  //   'RemoveFormat',
+  //   'ShowBlocks',
+  //   'SimpleUploadAdapter',
+  //   'SourceEditing',
+  //   'Strikethrough',
+  //   'Subscript',
+  //   'Superscript',
+  //   'Table',
+  //   'TableCaption',
+  //   'TableCellProperties',
+  //   'TableColumnResize',
+  //   'TableLayout',
+  //   'TableProperties',
+  //   'TableToolbar',
+  //   'TextTransformation',
+  //   'Underline',
+  //   'WordCount'
+  // ],
   toolbar: {
     items: [
       'undo',
@@ -95,7 +161,7 @@ export const defaultConfig: Record<string, any> = {
     },
   },
   link: {
-    addTargetToExternalLinks: true,
+    addTargetToExternalLinks: false,
     defaultProtocol: 'https://',
     decorators: {
       toggleDownloadable: {
@@ -105,6 +171,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/settings/src/SchemaForm.vue

@@ -150,14 +150,14 @@ const antdValueResolvers: Record<number, (value: any) => any> = {
 
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
-  formCofnig: IConfigDetail[]
+  formConfig: IConfigDetail[]
   disabled?: boolean
 }>(), {
   disabled: false,
 });
 
 const configList = computed(() => {
-  const list = cloneDeep(props.formCofnig);
+  const list = cloneDeep(props.formConfig);
 
   if (!list?.length)
     return;
@@ -169,7 +169,7 @@ const configList = computed(() => {
 
   return list;
 });
-const configMap = computed(() => mapKeys(cloneDeep(props.formCofnig ?? []), 'key'));
+const configMap = computed(() => mapKeys(cloneDeep(props.formConfig ?? []), 'key'));
 function formSchema() {
   const _configList = configList.value ?? [];
   const entries = _configList.map(config => [
@@ -221,9 +221,10 @@ defineExpose({ reset, validate });
         <slot
           v-if="$slots[item.key]"
           :name="item.key"
-          :state="toRef(settingForm.state, item.key)"
+          :state="settingForm.state[item.key]"
           :config="item"
           :orginConfig="configMap[item.key]"
+          :setState="(v: any) => settingForm.state[item.key] = v"
         />
         <template v-else>
           <slot v-if="item.form_type === FormTypes.NUMBER_INPUT" :name="FormTypes.NUMBER_INPUT">

package/admin/components/settings/src/Settings.vue

@@ -66,7 +66,7 @@ async function submitSetting() {
   >
     <component
       :is="$slots.default?.({
-        formCofnig: configQuerier.data.value ?? [],
+        formConfig: configQuerier.data.value ?? [],
         disabled: settingMutator.isPending.value || props.readonly,
       })[0]"
       :ref="setRefs.form"

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,