create-meadminjs 1.0.0

package/template/meadmin/view/index/src/hooks/actionModel.ts

@@ -0,0 +1,54 @@
+import { useGlobalStore } from '@/store';
+import { Component, onBeforeUnmount } from 'vue';
+/**
+ * 创建弹窗action调用
+ * @param component 组件
+ * @param closeRemove 关闭是是否移除组件（默认是）
+ * @param showKey 组件否展示绑定的v-model对应key
+ * @returns
+ */
+export const useActionModel = <T extends Component, const K extends Exclude<string, 'onClosed'> = 'modelValue'>(component: T, closeRemove = true, showKey = 'modelValue' as K) => {
+  const show = ref(false);
+  let key = '' as string | number | symbol;
+  const globalStore = useGlobalStore();
+  const close = () => {
+    show.value = false;
+    if (closeRemove && key) {
+      globalStore.removeGlobalComponents(key); //关闭时移除当前组件
+      key = '';
+    }
+  };
+  const open = (props?: Omit<ComponentProps<T>, K>) => {
+    closeRemove && close();
+    show.value = true;
+    if (!key) {
+      key = globalStore.addGlobalComponents(
+        component,
+        computed(() => ({
+          [showKey]: show.value,
+          ...props,
+          [`onUpdate:${showKey}`]: (value: boolean) => {
+            show.value = value;
+          },
+          onClosed: () => {
+            close();
+            if (typeof (props as ComponentProps<T>)?.onClosed === 'function') {
+              (props as ComponentProps<T>).onClosed();
+            }
+          },
+        })),
+      );
+    }
+  };
+  onBeforeUnmount(() => {
+    if (key) {
+      globalStore.removeGlobalComponents(key); //销毁前移除组件
+      key = '';
+    }
+  });
+  return {
+    open: open,
+    close: close,
+  };
+};
+export default useActionModel;

package/template/meadmin/view/index/src/hooks/core/computedProxy.ts

@@ -0,0 +1,10 @@
+//计算属性代理对象key 对其进行双向绑定
+export const computedProxy = <O extends Record<any, any>, K extends keyof O>(obj: O, key: K) => {
+  return computed<O[K]>({
+    get: () => obj[key],
+    set: (val) => {
+      obj[key] = val;
+    },
+  });
+};
+export default computedProxy;

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

@@ -0,0 +1,24 @@
+import { proxyValue } from '@/utils/helper';
+import { cloneDeep } from 'lodash-es';
+export * from './actionModel.js';
+/**
+ * 用于解耦v-model 对象/数组
+ * 深度代理 对象/数组 响应后触发update方法并传入深copy值
+ * @param v
+ * @param update
+ * @returns
+ */
+export const computedModel = <T extends Record<string | number, any> | any[]>(v: () => T, update: (value: T) => void) => {
+  const data = shallowRef({} as T);
+  watch(
+    v,
+    () => {
+      const value = cloneDeep(toRaw(v()));
+      data.value = proxyValue(value, () => {
+        update(cloneDeep(value));
+      });
+    },
+    { immediate: true, deep: true },
+  );
+  return data;
+};

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

@@ -0,0 +1,52 @@
+import * as elementPlusIconsVue from '@element-plus/icons-vue';
+import { upperFirst } from 'lodash-es';
+import path from 'path-browserify';
+import { App, Component, h } from 'vue';
+
+export function installIcon(app: App) {
+  function componentIcon(name: string, iconComponent: Component) {
+    app.component(
+      name,
+      defineComponent({
+        props: {
+          size: [Number, String],
+          color: String,
+        },
+        setup(props) {
+          let fontSize: string | undefined;
+          if (props.size) {
+            if (typeof props.size === 'string') {
+              fontSize = props.size;
+            } else if (typeof props.size === 'number') {
+              fontSize = `${props.size}px`;
+            }
+          }
+          return () =>
+            h(
+              'i',
+              {
+                class: 'el-icon',
+                style: {
+                  fontSize,
+                  color: props.color,
+                },
+              },
+              h(iconComponent),
+            );
+        },
+      }),
+    );
+  }
+  // 注册element icons
+  for (const [key, component] of Object.entries(elementPlusIconsVue)) {
+    componentIcon(`MelIcon${key}`, component);
+  }
+  // 注册自定义的svg icons
+  const svgModules = import.meta.glob('./svg/*.svg', {
+    import: 'default',
+    eager: true,
+  });
+  for (const [key, component] of Object.entries(<Record<string, Component>>svgModules)) {
+    componentIcon('MeIcon' + upperFirst(path.parse(key).name), component);
+  }
+}

package/template/meadmin/view/index/src/icons/svg/dashboard.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 128 100">
+    <path
+        d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z">
+    </path>
+</svg>

package/template/meadmin/view/index/src/icons/svg/moon.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24">
+    <path
+        d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56z"
+        fill="currentColor"></path>
+</svg>

package/template/meadmin/view/index/src/icons/svg/size.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 128 128">
+    <path
+        d="M0 54.857h54.796v18.286H36.531V128H18.265V73.143H0V54.857zm127.857-36.571H91.935V128H72.456V18.286H36.534V0h91.326l-.003 18.286z">
+    </path>
+</svg>

package/template/meadmin/view/index/src/icons/svg/sunny.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24">
+    <path
+        d="M6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z"
+        fill="currentColor"></path>
+</svg>

package/template/meadmin/view/index/src/icons/svg/translation.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
+    <path fill="currentColor"
+        d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z">
+    </path>
+</svg>

package/template/meadmin/view/index/src/layout/default/components/footer.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="footer">© 2025 - {{ year }}. All Rights Reserved. Power by &nbsp;<a href="http://www.meadmin.cn"> MeAdmin </a></div>
+</template>
+
+<script setup lang="ts" name="Footer">
+import dayjs from 'dayjs';
+const year = dayjs().year();
+</script>
+<style lang="scss" scoped>
+.footer {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  a:hover,
+  a:focus {
+    text-decoration: underline;
+  }
+  a:hover {
+    color: #fff;
+  }
+}
+</style>

package/template/meadmin/view/index/src/layout/default/components/header/components/menuItem.vue

@@ -0,0 +1,69 @@
+<template>
+  <template v-if="menu">
+    <el-sub-menu v-if="menu.children?.length && !noChild" :index="menu.path">
+      <template v-if="menu.meta" #title>
+        <component :is="menu.meta.icon" v-if="menu.meta.icon" />
+        <div v-show="collapse" v-else class="icon-text">{{ menu.meta.title.slice(0, 1) }}</div>
+        <span class="menu">{{ menu.meta!.title }}</span>
+      </template>
+      <menu-item v-for="child in menu.children" :key="child.path" :item="child"></menu-item>
+    </el-sub-menu>
+    <template v-else>
+      <component :is="truePathMenu!.meta?.isLink ? 'a' : 'routerLink'" v-if="menu.meta && menu.meta.title" :href="truePathMenu!.path" :to="truePathMenu!.path">
+        <el-menu-item :index="noChild ? item.meta?.menuIndex?.toString() : menu.path" :title="menu.meta.title">
+          <component :is="menu.meta.icon" v-if="menu.meta.icon" />
+          <div v-show="collapse" v-else class="icon-text">{{ menu.meta.title.slice(0, 1) }}</div>
+          <template #title>
+            <span class="menu">{{ menu.meta.title }}</span>
+          </template>
+        </el-menu-item>
+      </component>
+    </template>
+  </template>
+</template>
+
+<script setup lang="ts" name="MenuItem">
+import { RouteRecordRaw } from 'vue-router';
+const props = defineProps<{ item: RouteRecordRaw; noChild?: boolean; collapse?: boolean }>();
+const menu = ref<RouteRecordRaw>();
+const getMenu = (item: RouteRecordRaw): RouteRecordRaw => {
+  if (!item.children?.length) {
+    return item;
+  }
+  const children = item.children.filter((v) => v.meta && !v.meta.hideMenu);
+  const res = { ...item, children: children };
+  if (!item.meta?.alwaysShow && children.length === 1) {
+    return getMenu(children[0]);
+  }
+  return res;
+};
+const truePathMenu = ref<RouteRecordRaw>();
+if (!props.item.meta?.hideMenu) {
+  truePathMenu.value = menu.value = getMenu(props.item);
+}
+if (props.noChild) {
+  const firstChildrenMenu: (children: RouteRecordRaw[]) => RouteRecordRaw | undefined = (children: RouteRecordRaw[]) => {
+    for (let i = 0; i < children.length; i++) {
+      if (!children[i].meta?.hideMenu) {
+        return children[i];
+      }
+      if (children[i].children) {
+        const item = firstChildrenMenu(children[i].children!);
+        if (item) {
+          return item;
+        }
+      }
+      return undefined;
+    }
+  };
+  if (menu.value?.children?.length) {
+    truePathMenu.value = firstChildrenMenu(menu.value.children) ?? menu.value;
+  }
+}
+</script>
+<style lang="scss" scoped>
+.icon-text {
+  width: 1em;
+  text-align: center;
+}
+</style>

package/template/meadmin/view/index/src/layout/default/components/header/components/user.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="user">
+    <el-dropdown>
+      <span class="el-dropdown-link">
+        <el-avatar v-if="userStore.user.id" size="default" class="avatar" :src="userStore.user?.avatar?.url ?? avatar" />
+        <template v-else> 会员中心<mel-icon-arrow-down class="icon"></mel-icon-arrow-down> </template>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <template v-if="userStore.user.id">
+            <el-dropdown-item>
+              <router-link :to="PageEnum.USER">个人中心</router-link>
+            </el-dropdown-item>
+            <el-dropdown-item>
+              <span @click="logOut()">退出登录</span>
+            </el-dropdown-item>
+          </template>
+          <template v-else>
+            <el-dropdown-item>
+              <router-link :to="PageEnum.LOGIN">登录</router-link>
+            </el-dropdown-item>
+            <el-dropdown-item>
+              <router-link :to="PageEnum.REGISTER">注册</router-link>
+            </el-dropdown-item>
+          </template>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script setup lang="ts" name="User">
+import avatar from '@/assets/images/avatar.jpg';
+import { PageEnum } from '@/dict/pageEnum';
+import { useUserStore } from '@/store';
+const userStore = useUserStore();
+const router = useRouter();
+const logOut = () => {
+  userStore.logOut(router);
+};
+</script>
+<style lang="scss" scoped>
+.user {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  .el-dropdown-link:hover {
+    cursor: pointer;
+  }
+  .icon {
+    height: 1.2em;
+    margin-left: 5px;
+  }
+}
+</style>

package/template/meadmin/view/index/src/layout/default/components/header/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="header">
+    <div class="left">
+      <router-link :to="PageEnum.HOME">Me - Admin</router-link>
+    </div>
+    <el-menu :default-active="activeMenu" class="menu" mode="horizontal">
+      <menu-item v-for="item in menus" :key="item.path" :item="item" />
+    </el-menu>
+    <div class="right">
+      <User></User>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Header">
+import { PageEnum } from '@/dict/pageEnum';
+import { useRouteStore } from '@/store';
+import { ref } from 'vue';
+import MenuItem from './components/menuItem.vue';
+import User from './components/user.vue';
+const route = useRoute();
+const routeStore = useRouteStore();
+const activeMenu = ref('');
+watch(
+  route,
+  (route) => {
+    if (route.meta) {
+      activeMenu.value = route.path;
+    }
+  },
+  { immediate: true },
+);
+const menus = computed(() => {
+  return routeStore.routes;
+});
+</script>
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  .left {
+    padding-right: 5px;
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+  }
+  .right {
+  }
+  .menu {
+    border-bottom: unset;
+    flex: 1;
+  }
+}
+</style>

package/template/meadmin/view/index/src/layout/default/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="layout">
+    <div class="layout-header">
+      <Header></Header>
+    </div>
+    <div class="layout-page">
+      <Page></Page>
+    </div>
+    <div class="layout-footer">
+      <Footer></Footer>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Index">
+import Footer from './components/footer.vue';
+import Header from './components/header/index.vue';
+import Page from './page.vue';
+</script>
+<style lang="scss" scoped>
+@use './layout.scss' as *;
+.layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #f8f8f8;
+  .layout-header {
+    background-color: #fff;
+    width: 100%;
+    border-bottom: 1px solid #dcdfe6;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    > div {
+      width: $content-width;
+      margin: 0 auto;
+      max-width: 100%;
+    }
+  }
+  .layout-page {
+    flex: 1;
+    overflow: auto;
+    > div {
+      width: $content-width;
+      margin: 0 auto;
+    }
+  }
+  .layout-footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 2;
+    background-color: #1a2027;
+    color: #ede5e5;
+    > div {
+      width: $content-width;
+      max-width: 100%;
+      margin: 0 auto;
+    }
+  }
+}
+</style>

package/template/meadmin/view/index/src/layout/default/layout.scss

@@ -0,0 +1 @@
+$content-width: 1140px;

package/template/meadmin/view/index/src/layout/default/page.vue

@@ -0,0 +1,11 @@
+<template>
+  <router-view v-slot="{ Component }">
+    <Suspense @resolve="done()" @pending="set(1)">
+      <component :is="Component"></component>
+    </Suspense>
+  </router-view>
+</template>
+
+<script setup lang="ts" name="LayoutDefaultPage">
+import { done, set } from '@/utils/nProgress';
+</script>

package/template/meadmin/view/index/src/layout/layoutRoute.vue

@@ -0,0 +1,13 @@
+<template>
+  <router-view v-slot="{ Component }">
+    <template v-if="Component">
+      <Suspense @resolve="done()">
+        <component :is="Component"></component>
+      </Suspense>
+    </template>
+  </router-view>
+</template>
+
+<script setup lang="ts" name="LayoutDefaultPage">
+import { done } from '@/utils/nProgress';
+</script>

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

@@ -0,0 +1,28 @@
+// organize-imports-ignore
+import { App as AppType, createApp as createClientApp, createSSRApp } from 'vue';
+import { ID_INJECTION_KEY, ZINDEX_INJECTION_KEY } from 'element-plus';
+import { bootscrapt } from './app';
+import App from './App.vue';
+
+// SSR requires a fresh app instance per request, therefore we export a function
+// that creates a fresh app instance. If using Vuex, we'd also be creating a
+// fresh store here.
+/**
+ *
+ * @param ssrVersion 服务端渲染Version用以区分缓存防止‘跨请求状态污染’，客户端固定为''
+ * @returns
+ */
+export async function createApp(ssrVersion = '') {
+  let app: AppType<Element>;
+  if (import.meta.env.SSR || window?.document.querySelector('html')!.dataset.ssr === 'true') {
+    app = createSSRApp(App);
+  } else {
+    app = createClientApp(App);
+  }
+  app.provide(ID_INJECTION_KEY, {
+    prefix: 1024,
+    current: 0,
+  });
+  app.provide(ZINDEX_INJECTION_KEY, { current: 0 });
+  return await bootscrapt(app, ssrVersion);
+}

package/template/meadmin/view/index/src/router/guard/index.ts

@@ -0,0 +1,53 @@
+import { PageEnum } from '@/dict/pageEnum';
+import { event, mitter } from '@/event';
+import { useUserStore } from '@/store';
+import { done, remove, start } from '@/utils/nProgress';
+import { Pinia } from 'pinia';
+import type { NavigationFailure, Router } from 'vue-router';
+// Don't change the order of creation
+export function setupRouterGuard(router: Router, store: Pinia) {
+  createPermissionGuard(router, store);
+  createProgressGuard(router);
+  triggerRouteChange(router);
+}
+
+/**
+ * 处理页面权限验证
+ * @param router
+ */
+function createPermissionGuard(router: Router, store: Pinia) {
+  const userStore = useUserStore(store);
+  router.beforeEach(async (to) => {
+    if (to.meta.needLogin === true && to.path !== PageEnum.LOGIN && !userStore.token) {
+      await router.replace({ path: PageEnum.LOGIN, query: { redirect: to.fullPath } });
+      return false;
+    } else if (to.path === PageEnum.LOGIN && userStore.token) {
+      await router.replace(PageEnum.HOME);
+      return false;
+    }
+  });
+}
+
+// 处理页面加载进度条和loading
+function createProgressGuard(router: Router) {
+  router.beforeEach(() => {
+    remove();
+    start();
+    return true;
+  });
+  router.afterEach(() => {
+    done();
+  });
+}
+
+// 通知路由变化需要放在最后调用
+function triggerRouteChange(router: Router) {
+  router.beforeEach(async (to, from) => {
+    // 通知路由变化开始
+    mitter.emit(event.BEFORE_ROUTE_CHANGE, { to, from });
+    return true;
+  });
+  router.afterEach((to, from, failure) => {
+    mitter.emit(event.AFTER_ROUTE_CHANGE, { to, from, failure: failure as NavigationFailure | undefined });
+  }); // 通知路由变化完成
+}

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

@@ -0,0 +1,73 @@
+import { concatObjectValue } from '@/utils/helper';
+import { isExternal } from '@/utils/validate';
+import path from 'path-browserify';
+import { createMemoryHistory, createRouter, createWebHistory, Router, RouteRecordRaw } from 'vue-router';
+export const asyncRoutes = concatObjectValue<RouteRecordRaw>(import.meta.glob('./routes/*.ts', { eager: true, import: 'routes' }));
+
+export const constantRoutes: RouteRecordRaw[] = [
+  {
+    path: '/page404',
+    component: () => import('@/views/404.vue'),
+    meta: { hideMenu: true, title: '404页面' },
+  },
+  {
+    path: '/redirect/:path(.*)',
+    component: async () => await import('@/views/redirect.vue'),
+    meta: { hideMenu: true, title: '' },
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    component: async () => await import('@/views/404.vue'),
+    meta: { hideMenu: true, title: '404' },
+  },
+];
+
+//路由地址转为绝对地址
+export const resolvePath = (routePath: string, basePath = '') => {
+  if (isExternal(routePath) || isExternal(basePath)) {
+    return routePath;
+  }
+  return path.resolve(basePath, routePath);
+};
+
+//格式化路由
+export const formatRoutes = (routes: RouteRecordRaw[], basePath = '', startIndex = 0) => {
+  const newRoutes = [] as RouteRecordRaw[];
+  routes.forEach((route, index) => {
+    if (!route.meta) {
+      route.meta = { title: '' };
+    }
+    route.meta.menuIndex = [index + startIndex];
+    route.path = resolvePath(route.path, basePath);
+    newRoutes.push(
+      Object.assign(
+        { ...route },
+        {
+          children: route.children ? formatRoutes(route.children, route.path, index + startIndex) : [],
+        },
+      ),
+    );
+  });
+  return newRoutes;
+};
+
+export const jump = (route: Pick<RouteRecordRaw, 'path' | 'meta'>, router: Router) => {
+  if (route.meta?.isLink) {
+    window.open(route.path, '_blank');
+  } else {
+    router.push(route.path);
+  }
+};
+
+/**
+ *
+ * @param app
+ * @param addRoutes
+ */
+export function installRoute() {
+  const router = createRouter({
+    history: import.meta.env.SSR ? createMemoryHistory(import.meta.env.VIEW_ADMIN_PATH_PRE) : createWebHistory(import.meta.env.VIEW_ADMIN_PATH_PRE),
+    routes: formatRoutes(constantRoutes),
+  });
+  return router;
+}