create-meadminjs 1.0.0

package/template/meadmin/view/index/src/components/meVxeTable/index.vue

@@ -0,0 +1,286 @@
+<template>
+  <div v-resize="getTableHeight" class="me-vxe-table" :class="meClass">
+    <div v-if="toolbar" ref="meVxeToolbarRef" class="me-vxe-toolbar">
+      <div v-if="$slots.search" v-show="showSearch" class="me-vxe-toolbar-search">
+        <slot name="search"></slot>
+      </div>
+      <div class="me-vxe-toolbar-menu">
+        <div class="me-vxe-toolbar-buttons">
+          <el-button v-if="vnodeProps?.onRefresh" @click="$emit('refresh')">
+            <mel-icon-refresh />
+          </el-button>
+          <el-button v-if="vnodeProps?.onAdd" type="primary" @click="$emit('add')">
+            <mel-icon-plus />
+          </el-button>
+          <slot name="buttons"></slot>
+        </div>
+        <div class="me-vxe-toolbar-tools">
+          <el-input
+            v-if="quickSearch !== undefined"
+            :model-value="quickSearch"
+            :placeholder="typeof quickSearchPlaceholder === 'function' ? quickSearchPlaceholder($t) : quickSearchPlaceholder"
+            prefix-icon="mel-icon-search"
+            @update:model-value="$emit('update:quickSearch', $event)"
+            @change="$emit('quickSearch', $event)"
+          />
+          <el-button-group v-if="customColumn || exportMenu?.length || print">
+            <el-popover v-if="customColumn" :teleported="false" placement="bottom" trigger="click" width="auto">
+              <template #reference>
+                <el-button icon="mel-icon-grid" :title="$t('自定义列')" />
+              </template>
+              <template #default>
+                <el-scrollbar max-height="300px" class="popover-scrollbar-y">
+                  <el-tree node-key="id" :default-checked-keys="defaultChecked" :data="collectColumn" default-expand-all :props="elTreeProps" show-checkbox @check-change="checkChange" />
+                </el-scrollbar>
+              </template>
+            </el-popover>
+            <el-popover v-if="exportMenu?.length" pure placement="bottom" trigger="click" popper-class="me-vxe-exportmenu-popover el-dropdown__popper">
+              <template #reference>
+                <el-button icon="mel-icon-download" :title="$t('导出')" />
+              </template>
+              <template #default>
+                <ul class="el-dropdown-menu">
+                  <li v-for="item in exportMenu" :key="item.label" class="el-dropdown-menu__item" @click="handleExport(item.handle, item.filename ?? name!)">
+                    {{ item.label }}
+                  </li>
+                </ul>
+              </template>
+            </el-popover>
+            <el-button v-if="print" icon="mel-icon-printer" :title="$t('打印')" @click="printTable()" />
+            <slot name="tools"></slot>
+          </el-button-group>
+          <el-button v-if="$slots.search" :title="$t('更多筛选')" @click="showSearch = !showSearch">
+            <mel-icon-search></mel-icon-search>
+          </el-button>
+          <slot name="toolsButton"></slot>
+        </div>
+      </div>
+    </div>
+    <div class="me-vxe-body">
+      <vxe-table ref="vxeTableRef" :max-height="tableHeight" v-bind="$attrs">
+        <slot></slot>
+        <template v-if="$slots.loading" #loading>
+          <slot name="loading"></slot>
+        </template>
+        <template v-if="$slots.empty" #empty>
+          <slot name="empty"></slot>
+        </template>
+      </vxe-table>
+    </div>
+    <pagination v-if="paginationOptions" ref="mePaginationRef" :options="paginationOptions" class="pagination me-vxe-footer"></pagination>
+  </div>
+</template>
+<script lang="ts">
+import { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type';
+import { debounce } from 'lodash-es';
+import { ComponentCustomProperties, PropType, useTemplateRef } from 'vue';
+import { VxeTableDefines, VxeTableInstance, VxeTableListeners, VxeTableProps, VxeTablePropTypes } from 'vxe-table';
+import pagination from './components/pagination.vue';
+import resize from './directives/resize';
+import { getFullHight } from './util';
+const props = {
+  meClass: [String, Array] as PropType<string[] | string>,
+  name: {
+    type: String,
+    default: 'meVxeTable',
+  },
+  exportMenu: {
+    type: Array as PropType<
+      {
+        label: string;
+        filename?: string;
+        handle: (vxeTable: VxeTableInstance, filename: string) => void | 'csv' | 'html' | 'xml' | 'txt';
+      }[]
+    >,
+    default: () => [
+      { label: 'csv', handle: 'csv' },
+      { label: 'html', handle: 'html' },
+      { label: 'xml', handle: 'xml' },
+      { label: 'txt', handle: 'txt' },
+    ],
+  },
+  print: {
+    type: [Object, Boolean] as PropType<VxeTablePropTypes.PrintConfig | boolean>,
+    default: () => ({}),
+  },
+  customColumn: {
+    type: Boolean,
+    default: true,
+  },
+  defaultShowSearch: {
+    type: Boolean,
+    default: false,
+  },
+  toolbar: {
+    type: Boolean,
+    default: true,
+  },
+  quickSearch: String,
+  quickSearchPlaceholder: {
+    type: [String, Function] as PropType<string | ((t: ComponentCustomProperties['$t']) => string)>,
+    default: () => (t: ComponentCustomProperties['$t']) => t('快捷搜索'),
+  },
+  paginationOptions: Object as PropType<InstanceType<typeof pagination>['options']>,
+  autoHeight: {
+    type: Boolean,
+    default: true,
+  },
+};
+const emits = ['quickSearch', 'refresh', 'add', 'update:quickSearch'] as unknown as {
+  quickSearch: (searchText: string) => void;
+  refresh: () => void;
+  add: () => void;
+  ['update:quickSearch']: (searchText: string) => void;
+} & Required<VxeTableListeners>;
+export default defineComponent({
+  name: 'MeVxeTable',
+  components: { pagination },
+  directives: { resize },
+  inheritAttrs: false,
+  props: props as unknown as ComponentObjectPropsOptionsFromData<VxeTableProps> & typeof props,
+  emits,
+  setup(props, { expose }) {
+    const vxeTableRef = useTemplateRef<VxeTableInstance>('vxeTableRef');
+    const meVxeToolbarRef = useTemplateRef<HTMLDivElement>('meVxeToolbarRef');
+    const mePaginationRef = useTemplateRef<InstanceType<typeof pagination>>('mePaginationRef');
+    const showSearch = ref(props.defaultShowSearch);
+    const collectColumn = ref([] as VxeTableDefines.ColumnInfo[]);
+    const defaultChecked = ref([] as string[]);
+    const refreshColumn = debounce(() => {
+      vxeTableRef.value?.refreshColumn();
+    }, 500);
+    const checkChange = (data: VxeTableDefines.ColumnInfo, is: boolean) => {
+      data.visible = is;
+      refreshColumn();
+    };
+    onMounted(async () => {
+      await nextTick();
+      await nextTick(); //等两次渲染完成才能获取到列
+      const { collectColumn: origionCollectColumn, fullColumn } = vxeTableRef.value!.getTableColumn();
+      collectColumn.value = origionCollectColumn;
+      defaultChecked.value = fullColumn.reduce((previousValue, currentValue) => {
+        if (currentValue.visible) {
+          previousValue.push(currentValue.id);
+        }
+        return previousValue;
+      }, [] as string[]);
+    });
+    expose({ vxeTableRef });
+    const tableHeight = ref<number>();
+    const getTableHeight = (data: { width: number; height: number }) => {
+      if (props.autoHeight) {
+        const toolbarHeight = meVxeToolbarRef.value ? getFullHight(meVxeToolbarRef.value) : 0;
+        const paginationHeight = mePaginationRef.value?.$el ? getFullHight(mePaginationRef.value?.$el) : 0;
+        tableHeight.value = data.height - toolbarHeight - paginationHeight;
+      }
+    };
+    return {
+      elTreeProps: {
+        label: (item: TreeNodeData) => (item.type === 'seq' ? '#' : item.title),
+        children: 'children',
+      },
+      vxeTableRef,
+      collectColumn,
+      defaultChecked,
+      checkChange,
+      handleExport: (handle: (vxeTable: VxeTableInstance, filename: string) => void | 'csv' | 'html' | 'xml' | 'txt', filename: string) => {
+        if (typeof handle === 'string') {
+          vxeTableRef.value!.exportData({
+            type: handle,
+            filename,
+            data: vxeTableRef.value!.getCheckboxRecords().length ? vxeTableRef.value!.getCheckboxRecords() : undefined,
+          });
+        } else {
+          handle(vxeTableRef.value!, filename);
+        }
+      },
+      printTable: () => {
+        vxeTableRef.value!.print(
+          Object.assign(
+            {
+              sheetName: props.name,
+              data: vxeTableRef.value!.getCheckboxRecords().length ? vxeTableRef.value!.getCheckboxRecords() : undefined,
+            },
+            props.print === true ? {} : props.print,
+          ),
+        );
+      },
+      showSearch,
+      getTableHeight,
+      tableHeight,
+      meVxeToolbarRef,
+      mePaginationRef,
+      vnodeProps: getCurrentInstance()?.vnode.props,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.me-vxe-table {
+  $margin-top: 15px;
+  $margin-left: 12px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .me-vxe-toolbar {
+    margin-top: -$margin-top;
+    margin-bottom: $margin-top;
+    flex-shrink: 0;
+    flex-grow: 0;
+
+    .me-vxe-toolbar-search {
+      margin-top: $margin-top;
+    }
+
+    .me-vxe-toolbar-menu {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+
+      .me-vxe-toolbar-buttons {
+        > {
+          :deep(*) {
+            margin-top: $margin-top;
+          }
+        }
+      }
+
+      .me-vxe-toolbar-tools {
+        margin-top: $margin-top;
+        display: flex;
+        align-items: center;
+
+        > {
+          :deep(*:not(:first-child)) {
+            margin-left: $margin-left;
+          }
+        }
+
+        > .el-button-group {
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+  .me-vxe-body {
+    flex-shrink: 1;
+  }
+  .pagination {
+    flex-shrink: 0;
+    flex-grow: 0;
+    margin-top: $margin-top;
+    justify-content: center;
+  }
+}
+
+:global(.me-vxe-exportmenu-popover) {
+  width: max-content !important;
+  min-width: unset !important;
+}
+
+:global(.me-vxe-exportmenu-popover .el-dropdown-menu__item:not(.is-disabled):hover) {
+  background-color: var(--el-dropdown-menuItem-hover-fill);
+  color: var(--el-dropdown-menuItem-hover-color);
+}
+</style>

package/template/meadmin/view/index/src/components/meVxeTable/install.ts

@@ -0,0 +1,18 @@
+import { App } from 'vue';
+import { VxeModal, VxeUI } from 'vxe-pc-ui';
+import 'vxe-pc-ui/es/style.css';
+import { VxeColgroup, VxeColumn, VxeGrid, VxeTable, VxeToolbar } from 'vxe-table';
+import VXETablePluginElement from 'vxe-table-plugin-element';
+import 'vxe-table-plugin-element/dist/style.css';
+import 'vxe-table/es/style.css';
+export const initVxeTable = (app: App) => {
+  VxeUI.use(VXETablePluginElement);
+  if (app?.config?.globalProperties?.$start) {
+    app.use(VxeModal);
+    app.use(VxeTable);
+    app.use(VxeColumn);
+    app.use(VxeColgroup);
+    app.use(VxeGrid);
+    app.use(VxeToolbar);
+  }
+};

package/template/meadmin/view/index/src/components/meVxeTable/util.ts

@@ -0,0 +1,11 @@
+/**
+ * 获取元素的高度包括marign
+ * @param el
+ * @returns
+ */
+export const getFullHight = (el: HTMLDivElement) => {
+  const offsetHeight = el.offsetHeight;
+  const marginTop = window.getComputedStyle(el).marginTop.replace('px', '');
+  const marginBottom = window.getComputedStyle(el).marginBottom.replace('px', '');
+  return offsetHeight + +marginTop + +marginBottom;
+};

package/template/meadmin/view/index/src/components/meWangEditor/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="me-wang-editor">
+    <Toolbar v-if="showEditor" class="wang-toolbar" :editor="editorRef" :default-config="config.toolbar" :mode="mode" />
+    <Editor
+      v-if="showEditor"
+      :model-value="modelValue"
+      :default-content="defaultContent"
+      :default-html="defaultHtml"
+      :default-config="config.editor"
+      :mode="mode"
+      style="overflow-y: hidden"
+      @update:model-value="emit('update:modelValue', $event)"
+      @on-created="handleCreated"
+      @on-change="emit('onChange', $event)"
+      @on-destroyed="emit('onDestroyed', $event)"
+      @on-max-length="emit('onMaxLength', $event)"
+      @on-focus="emit('onFocus', $event)"
+      @on-blur="emit('onBlur', $event)"
+      @custom-alert="(...args:[string,string]) => emit('customAlert', ...args)"
+      @custom-paste="(...args:[IDomEditor,ClipboardEvent]) => emit('customPaste', ...args)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" name="MeWangEditor">
+import { useGlobalStore } from '@/store';
+import { i18nChangeLanguage, IDomEditor, IEditorConfig, IToolbarConfig, SlateDescendant } from '@wangeditor/editor';
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+import '@wangeditor/editor/dist/css/style.css'; // 引入 css
+import { onBeforeUnmount, PropType, shallowRef } from 'vue';
+import './meWangEditor.scss';
+defineProps({
+  mode: {
+    type: String as PropType<'simple' | 'default'>,
+    default: 'default',
+  },
+  config: {
+    type: Object as PropType<{ toolbar?: Partial<IToolbarConfig>; editor?: Partial<IEditorConfig> }>,
+    default: () => ({}),
+  },
+  modelValue: {
+    type: String,
+    required: true,
+  },
+
+  /** 编辑器默认内容 */
+  defaultContent: {
+    type: Array as PropType<SlateDescendant[]>,
+    default: () => [],
+  },
+  defaultHtml: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits<{
+  (e: 'update:modelValue', valueHtml: string): void;
+  (e: 'onCreated', editor: IDomEditor): void;
+  (e: 'onChange', editor: IDomEditor): void;
+  (e: 'onDestroyed', editor: IDomEditor): void;
+  (e: 'onMaxLength', editor: IDomEditor): void;
+  (e: 'onFocus', editor: IDomEditor): void;
+  (e: 'onBlur', editor: IDomEditor): void;
+  (e: 'customAlert', s: string, t: string): void;
+  (e: 'customPaste', editor: IDomEditor, event: ClipboardEvent): void;
+}>();
+const { i18n } = storeToRefs(useGlobalStore());
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef<IDomEditor | undefined>();
+defineExpose({ editorRef });
+//切换语言
+const showEditor = ref(true);
+i18nChangeLanguage(i18n.value.locale.value);
+watch(
+  () => i18n.value.locale.value,
+  async (locale) => {
+    // 切换语言 - 'en' 或者 'zh-CN'
+    showEditor.value = false;
+    await nextTick();
+    i18nChangeLanguage(locale);
+    showEditor.value = true;
+  },
+);
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  editorRef.value && editorRef.value.destroy();
+});
+const handleCreated = (editor: IDomEditor) => {
+  editorRef.value && editorRef.value.destroy();
+  editorRef.value = editor; // 记录 editor 实例，重要！
+  emit('onCreated', editor);
+};
+</script>
+<style lang="scss" scoped>
+.me-wang-editor {
+  border: 1px solid var(--el-border-color);
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+  .wang-toolbar {
+    border-bottom: 1px solid var(--el-border-color);
+  }
+  :deep(.w-e-scroll) {
+    &::-webkit-scrollbar {
+      z-index: 1;
+      border-radius: 4px;
+      width: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: rgba(144, 147, 153, 0.3);
+      width: 100%;
+      opacity: 0.3;
+      border-radius: 4px;
+    }
+    overflow-y: overlay !important;
+  }
+}
+:global(.dark .me-wang-editor .w-e-scroll::-webkit-scrollbar-thumb) {
+  background-color: rgba(163, 166, 173, 0.3);
+}
+</style>

package/template/meadmin/view/index/src/components/meWangEditor/meWangEditor.scss

@@ -0,0 +1,24 @@
+:root,
+:host {
+  // textarea - css vars
+  --w-e-textarea-bg-color: var(--el-bg-color);
+  --w-e-textarea-color: var(--el-text-color-primary);
+  --w-e-textarea-border-color: var(--el-border-color);
+  --w-e-textarea-slight-border-color: var(--el-border-color);
+  --w-e-textarea-slight-color: var(--el-text-color-placeholder);
+  --w-e-textarea-slight-bg-color: var(--el-bg-color-page);
+  --w-e-textarea-selected-border-color: var(--el-color-primary-light-5); // 选中的元素，如选中了分割线
+  --w-e-textarea-handler-bg-color: var(--el-color-primary); // 工具，如图片拖拽按钮
+
+  // toolbar - css vars
+  --w-e-toolbar-color: var(--el-text-color-regular);
+  --w-e-toolbar-bg-color: var(--el-bg-color);
+  --w-e-toolbar-active-color: var(--el-text-color-primary);
+  --w-e-toolbar-active-bg-color: var(--el-fill-color);
+  --w-e-toolbar-disabled-color: var(--el-text-color-disabled);
+  --w-e-toolbar-border-color: var(--el-border-color);
+
+  // modal - css vars
+  --w-e-modal-button-bg-color: var(--el-color-info-light-9);
+  --w-e-modal-button-border-color: var(--el-color-info-light-5);
+}

package/template/meadmin/view/index/src/components/service/meImageViewer.ts

@@ -0,0 +1,23 @@
+import { ElImageViewer } from 'element-plus';
+import { createVNode, render } from 'vue';
+//函数组件只能以服务的方式调用
+export function createImageViewer(props: ComponentProps<typeof ElImageViewer>) {
+  const vnode = createVNode(
+    ElImageViewer,
+    Object.assign(
+      {
+        // 解决 element plus 2.8.0 及以上版本，不能关闭 image-viewer 的问题
+        teleported: true,
+        onClose: function () {
+          render(null, document.body);
+          if (typeof props.onClose === 'function') {
+            props.onClose.call(this);
+          }
+        },
+      },
+      props,
+    ),
+  );
+  render(vnode, document.body);
+  return vnode;
+}

package/template/meadmin/view/index/src/config/index.ts

@@ -0,0 +1,2 @@
+import loginConfig from './login';
+export { loginConfig };

package/template/meadmin/view/index/src/config/login.ts

@@ -0,0 +1,5 @@
+export default {
+  tokenName: 'index-auth-token', // cookie中存储的token key
+  tokenExpires: 7, // token 过期时间
+  tokenDomain: typeof window === 'undefined' ? undefined : window.location.hostname, // token 存储cookie域名
+};

package/template/meadmin/view/index/src/dict/eventEnmu.ts

@@ -0,0 +1,13 @@
+const enum EventEnum {
+  START = 'start', // vue准备启动
+  READY = 'ready', // vue启动完成渲染之前触发
+  BEFORE_ROUTE_CHANGE = 'beforeRouteChange', // 路由变更前
+  AFTER_ROUTE_CHANGE = 'afterRouteChange', // 路由变更后
+  BEFORE_LOGIN = 'beforeLogin', // 登录前
+  AFTER_LOGIN = 'afterLogin', // 登录成功后
+  BEFORE_LOGOUT = 'beforeLogout', // 退出前
+  AFTER_LOGOUT = 'aftreLogout', // 退出成功后
+  BEFORE_LOCAL_CHANGE = 'beforeLocalChange', // 全局语言变更前
+  RESIZE = 'resize', // window变化时触发
+}
+export default EventEnum;

package/template/meadmin/view/index/src/dict/pageEnum.ts

@@ -0,0 +1,8 @@
+export const enum PageEnum { //除了home以/结尾 其余都不以/结尾
+  // basic login path
+  LOGIN = '/login',
+  REGISTER = '/register',
+  // basic home path
+  HOME = '/',
+  USER = '/user',
+}

package/template/meadmin/view/index/src/directives/clickOutside.ts

@@ -0,0 +1,2 @@
+import { ClickOutside } from 'element-plus';
+export default ClickOutside;

package/template/meadmin/view/index/src/entry-client.ts

@@ -0,0 +1,8 @@
+import { createApp } from './main';
+(async () => {
+  const { app, router } = await createApp();
+  // wait until router is ready before mounting to ensure hydration match
+  router.isReady().then(() => {
+    app.mount('#app');
+  });
+})();

package/template/meadmin/view/index/src/entry-server.ts

@@ -0,0 +1,83 @@
+import { basename } from 'node:path';
+import serialize from 'serialize-javascript';
+import { renderToString } from 'vue/server-renderer';
+import { createApp } from './main';
+import { setServerCookies } from './utils/cookies.js';
+import { cleanServerCache, getAllServerCache } from './utils/server.js';
+export async function render(url: string, manifest: Record<string, string[]>, context: Record<string, any>) {
+  setServerCookies(context.ssrVersion, context.cookies);
+  const { app, router, store } = await createApp(context.ssrVersion);
+  // set the router to the desired URL before rendering
+  await router.push(url === router.options.history.base ? '/' : url);
+  await router.isReady();
+  // passing SSR context object which will be available via useSSRContext()
+  // @vitejs/plugin-vue injects code into a component's setup() that registers
+  // itself on ctx.modules. After the render, ctx.modules would contain all the
+  // components that have been instantiated during this render call.
+  const ctx = {} as Record<string, any>;
+  const html = await renderToString(app, ctx);
+  // which we can then use to determine what files need to be preloaded for this
+  // request.
+  const __pinia = serialize(store.state.value);
+  const __serverCache = serialize(getAllServerCache(context.ssrVersion));
+  const preloadLinks = `<script>window.__pinia=${__pinia};</script>\n` + `<script>window.__serverCache=${__serverCache};</script>\n` + renderPreloadLinks(ctx.modules, manifest);
+  const teleports = renderTeleports(ctx.teleports);
+  setServerCookies(context.ssrVersion, null);
+  cleanServerCache(context.ssrVersion);
+  return [html, preloadLinks, teleports];
+}
+
+function renderPreloadLinks(modules: string[], manifest: Record<string, string[]>) {
+  let links = '';
+  const seen = new Set();
+  modules.forEach((id) => {
+    const files = manifest[id];
+    if (files) {
+      files.forEach((file) => {
+        if (!seen.has(file)) {
+          seen.add(file);
+          const filename = basename(file);
+          if (manifest[filename]) {
+            for (const depFile of manifest[filename]) {
+              links += renderPreloadLink(depFile);
+              seen.add(depFile);
+            }
+          }
+          links += renderPreloadLink(file);
+        }
+      });
+    }
+  });
+  return links;
+}
+
+function renderPreloadLink(file: string) {
+  if (file.endsWith('.js')) {
+    return `<link rel="modulepreload" crossorigin href="${file}">`;
+  } else if (file.endsWith('.css')) {
+    return `<link rel="stylesheet" href="${file}">`;
+  } else if (file.endsWith('.woff')) {
+    return ` <link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`;
+  } else if (file.endsWith('.woff2')) {
+    return ` <link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`;
+  } else if (file.endsWith('.gif')) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/gif">`;
+  } else if (file.endsWith('.jpg') || file.endsWith('.jpeg')) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/jpeg">`;
+  } else if (file.endsWith('.png')) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/png">`;
+  } else {
+    // TODO
+    return '';
+  }
+}
+
+function renderTeleports(teleports?: Record<string, any>) {
+  if (!teleports) return '';
+  return Object.entries(teleports).reduce((all, [key, value]) => {
+    if (key.startsWith('#el-popper-container-')) {
+      return `${all}<div id="${key.slice(1)}">${value}</div>`;
+    }
+    return all;
+  }, teleports.body || '');
+}

package/template/meadmin/view/index/src/env.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/template/meadmin/view/index/src/event/index.ts

@@ -0,0 +1,23 @@
+/**
+ * 事件总线
+ */
+import EventEnum from '@/dict/eventEnmu';
+import Mitt from '@/utils/mitt';
+import { App } from 'vue';
+import { NavigationFailure, RouteLocationNormalized } from 'vue-router';
+interface Events {
+  // 事件总线
+  [EventEnum.START]: App;
+  [EventEnum.READY]: App;
+  [EventEnum.BEFORE_ROUTE_CHANGE]: {
+    to: RouteLocationNormalized;
+    from: RouteLocationNormalized;
+  }; // 路由变更前
+  [EventEnum.AFTER_ROUTE_CHANGE]: {
+    to: RouteLocationNormalized;
+    from: RouteLocationNormalized;
+    failure: NavigationFailure | undefined;
+  }; // 路由变更后
+}
+const mitter = Mitt<Events & Omit<{ [key in EventEnum]: undefined }, keyof Events>>(); // inferred as Emitter<Events>
+export { EventEnum as event, mitter };