create-meadminjs 1.0.0

package/template/meadmin/view/admin/src/locales/lang/en/rule.json

@@ -0,0 +1,12 @@
+{
+  "{label} 长度必须在 {min} 到 {max} 之间": "The {label} length should be {min} to {max}",
+  "{label} 长度必须为 {len}": "The {label} length should be {0}",
+  "{label} 长度必须小于等于 {max}": "The {label} length must be less than or equal to {max}",
+  "{label} 长度必须大于等于 {min}": "The {label} length must be greater than or equal to {min}",
+  "{label} 必须在 {min} 到 {max} 之间": "The {label} must be between {min} and {max}",
+  "{label} 必须小于等于 {max}": "The {label} must be less than or equal to {max}",
+  "{label} 必须大于等于 {min}": "The {label} must be greater than or equal to {min}",
+  "{label} 必须是正确的邮箱格式": "The {label} must be in the correct email format",
+  "{label} 必须是正确的手机号": "The {label} must be the correct mobile phone number",
+  "{label} 必须是正确的链接格式": "The {label} must be in the correct link format"
+}

package/template/meadmin/view/admin/src/locales/lang/zh-cn/default.json

@@ -0,0 +1,6 @@
+{
+  "large": "大",
+  "default": "默认",
+  "small": "小",
+  " ": ""
+}

package/template/meadmin/view/admin/src/locales/lang/zh-cn/index.ts

@@ -0,0 +1,7 @@
+import { forOwn } from 'lodash-es';
+const modules = import.meta.glob('./**/*.{json,ts}', { eager: true, import: 'default' });
+const langs = {} as Record<string, string>;
+forOwn(modules, (value) => {
+  Object.assign(langs, value);
+});
+export default langs;

package/template/meadmin/view/admin/src/locales/lang/zh-cn/meVxeTable.ts

@@ -0,0 +1,2 @@
+import zhCN from 'vxe-table/lib/locale/lang/zh-CN';
+export default zhCN;

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

@@ -0,0 +1,21 @@
+import { App as AppType, createApp as createClientApp, createSSRApp } from 'vue';
+import { bootscrapt } from './app';
+import App from './App.vue';
+import { router } from './router';
+import { store } from './store';
+// 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.
+export async function createApp() {
+  let app: AppType<Element>;
+  if (import.meta.env.SSR || window?.document.querySelector('html')!.dataset.ssr === 'true') {
+    app = createSSRApp(App);
+  } else {
+    app = createClientApp(App);
+  }
+  await bootscrapt(app);
+  if (!import.meta.env.SSR && window.__pinia) {
+    store.state.value = window.__pinia;
+  }
+  return { app, router, pinia: store };
+}

package/template/meadmin/view/admin/src/router/constant.ts

@@ -0,0 +1,2 @@
+export const Layout = () => import('@/layout/index.vue');
+export const LayoutPage = () => import('@/layout/components/page.vue');

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

@@ -0,0 +1,52 @@
+import { PageEnum } from '@/dict/pageEnum';
+import { event, mitter } from '@/event';
+import { useUserStore } from '@/store';
+import { closeLoading, loading } from '@/utils/loading';
+import { remove, start } from '@/utils/nProgress';
+import type { NavigationFailure, Router } from 'vue-router';
+// Don't change the order of creation
+export function setupRouterGuard(router: Router) {
+  createPermissionGuard(router);
+  createProgressGuard(router);
+  triggerRouteChange(router);
+}
+
+/**
+ * 处理页面权限验证
+ * @param router
+ */
+function createPermissionGuard(router: Router) {
+  const userStore = useUserStore();
+  router.beforeEach(async (to) => {
+    if (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(async (to, from) => {
+    remove();
+    start(to.matched.length);
+    closeLoading(true, from.matched.length, 'layout');
+    loading({}, to.matched.length, 'layout');
+    return true;
+  });
+}
+
+// 通知路由变化需要放在最后调用
+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/admin/src/router/index.ts

@@ -0,0 +1,115 @@
+import { PageEnum } from '@/dict/pageEnum';
+import { Layout } from '@/router/constant';
+import { useRouteStore } from '@/store/index.js';
+import { concatObjectValue } from '@/utils/helper';
+import { isExternal } from '@/utils/validate';
+import { resolve } from 'path-browserify';
+import { App } from 'vue';
+import { createMemoryHistory, createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import { setupRouterGuard } from './guard';
+export const asyncRoutes = concatObjectValue<RouteRecordRaw>(import.meta.glob('./routes/*.ts', { eager: true, import: 'routes' }));
+
+export const constantRoutes: RouteRecordRaw[] = [
+  {
+    path: PageEnum.LOGIN,
+    component: async () => await import('@/views/login/index.vue'),
+    meta: {
+      hideMenu: true,
+      title: '登录',
+    },
+  },
+  {
+    path: PageEnum.HOME,
+    meta: {
+      hideMenu: true,
+      title: '首页',
+    },
+    redirect: () => useRouteStore().firstMenu(),
+  },
+  {
+    path: '/redirect',
+    component: Layout,
+    children: [
+      {
+        name: 'redirect',
+        path: '/redirect/:path(.*)',
+        component: async () => await import('@/views/redirect.vue'),
+      },
+    ],
+    meta: {
+      hideMenu: true,
+      title: '',
+      noCache: true,
+    },
+  },
+  {
+    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 resolve(basePath, routePath);
+};
+
+//扁平化路由
+export const flatteningRoutes = (routes: RouteRecordRaw[], basePath = '', menuIndex: number[] = [], newRoutes: RouteRecordRaw[] = [], baseIndex = 0) => {
+  routes.forEach((route, index) => {
+    route.path = resolvePath(route.path, basePath);
+    if (!route.meta) {
+      route.meta = { title: '' };
+    }
+    route.meta.menuIndex = [...menuIndex, index + baseIndex];
+    newRoutes.push(Object.assign({ ...route }, { children: [] }));
+    if (route.children) {
+      flatteningRoutes(route.children, route.path, route.meta.menuIndex, newRoutes);
+    }
+  });
+  return newRoutes;
+};
+//扁平化为2级路由
+export const flatteningRoutes2 = (routes: RouteRecordRaw[], startIndex = 0, ignoreFirst = false) => {
+  const newRoutes = [] as RouteRecordRaw[];
+  routes.forEach((route, index) => {
+    if (!route.meta) {
+      route.meta = { title: '' };
+    }
+    route.meta.menuIndex = [index + startIndex];
+    newRoutes.push(
+      Object.assign(
+        { ...route },
+        {
+          children: route.children ? flatteningRoutes(route.children, route.path, ignoreFirst ? [] : [index + startIndex], [], ignoreFirst ? index + startIndex : 0) : [],
+        },
+      ),
+    );
+  });
+  return newRoutes;
+};
+
+export 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: flatteningRoutes2(constantRoutes),
+});
+export const jump = (route: Pick<RouteRecordRaw, 'path' | 'meta'>) => {
+  if (route.meta?.isLink) {
+    window.open(route.path, '_blank');
+  } else {
+    router.push(route.path);
+  }
+};
+
+/**
+ *
+ * @param app
+ * @param addRoutes
+ */
+export function installRoute(app: App) {
+  setupRouterGuard(router);
+  app.use(router);
+}

package/template/meadmin/view/admin/src/setElGlobel.ts

@@ -0,0 +1,16 @@
+import { provideGlobalConfig } from 'element-plus';
+import { useSettingStore } from './store';
+export default defineComponent({
+  setup() {
+    const settingStore = useSettingStore();
+    provideGlobalConfig(
+      {
+        locale: settingStore.elLocale,
+        size: settingStore.themeConfig.size,
+      },
+      undefined,
+      true,
+    );
+  },
+  render: () => '',
+});

package/template/meadmin/view/admin/src/store/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue';
+import { useUserStore } from './module';
+export * from './module';
+export const store = createPinia();
+export async function installStore(app: App) {
+  app.use(store);
+  await useUserStore().init();
+}

package/template/meadmin/view/admin/src/store/modules/global.ts

@@ -0,0 +1,66 @@
+import { event, mitter } from '@/event';
+import { Component, VNode } from 'vue';
+import { Composer } from 'vue-i18n';
+const WIDTH = 992; // refer to Bootstrap's responsive design
+const isMobile = ref(window.document.body.offsetWidth < WIDTH);
+mitter.on(event.RESIZE, () => {
+  isMobile.value = window.document.body.offsetWidth < WIDTH;
+});
+export default defineStore('global', {
+  state: () => {
+    let _i18n: Composer;
+    return {
+      i18n: customRef((track, trigger) => {
+        return {
+          get() {
+            track(); // track 方法放在 get 中，用于提示这个数据是需要追踪变化的
+            return _i18n;
+          },
+          set(i18n: Composer) {
+            if (!_i18n) {
+              // 只初始化一次值
+              _i18n = i18n;
+              trigger(); // 记得触发事件 trigger,告诉vue触发页面更新
+            }
+          },
+        };
+      }),
+      isMobile,
+      layoutLoaded: false,
+      globalComponents: [] as Array<{
+        component: Component | VNode;
+        key: number | string | symbol;
+        props?: Record<string, any>;
+        vnode?: Component;
+      }>, //全局组件会渲染到app下
+    };
+  },
+  actions: {
+    addGlobalComponents(component: Component | VNode, props?: Record<string, any>, key?: number | string | symbol) {
+      if (!key) {
+        key = Symbol('componentKey');
+      }
+      this.globalComponents.push({
+        component: markRaw(component),
+        props,
+        key,
+      });
+      return key;
+    },
+    removeGlobalComponents(key: number | string | symbol) {
+      const index = this.globalComponents.findIndex((item) => item.key === key);
+      if (index > -1) {
+        this.globalComponents.splice(index, 1);
+        return true;
+      }
+      return false;
+    },
+    getVnode<T extends Component>(key: number | string | symbol) {
+      const index = this.globalComponents.findIndex((item) => item.key === key);
+      if (index > -1) {
+        return this.globalComponents[index].vnode as T;
+      }
+      return undefined;
+    },
+  },
+});

package/template/meadmin/view/admin/src/store/modules/route.ts

@@ -0,0 +1,69 @@
+import { settingConfig } from '@/config';
+import MenuModeEnum from '@/dict/menuModeEnum';
+import { PageEnum } from '@/dict/pageEnum';
+import { asyncRoutes, constantRoutes, flatteningRoutes2, router } from '@/router';
+import { Layout } from '@/router/constant';
+import { filterAsyncRoutes } from '@/utils/permission';
+import { RouteRecordRaw } from 'vue-router';
+import useUserStore from './user';
+export default defineStore('route', {
+  state: () => ({
+    addRoutes: [] as RouteRecordRaw[],
+    cacheFullPath: new Set() as Set<string | RegExp>,
+    childsRoutes: [] as RouteRecordRaw[][],
+  }),
+  getters: {
+    routes: (state) => constantRoutes.concat(state.addRoutes),
+  },
+  actions: {
+    //生成权限过滤后的动态路由
+    async generateRoutes() {
+      switch (settingConfig.menuMode) {
+        case MenuModeEnum.STATIC:
+          this.addRoutes = markRaw(filterAsyncRoutes(asyncRoutes));
+          break;
+        case MenuModeEnum.API:
+          this.addRoutes = markRaw(filterAsyncRoutes(useUserStore().menus, undefined, true));
+          break;
+      }
+      return this.addRoutes;
+    },
+    //初始化路由
+    async initRoutes() {
+      flatteningRoutes2(
+        [
+          {
+            path: '/',
+            redirect: PageEnum.HOME,
+            meta: {
+              title: '',
+            },
+            component: Layout,
+            children: await this.generateRoutes(),
+          },
+        ],
+        constantRoutes.length,
+        true,
+      ).forEach((route) => router.addRoute(route));
+    },
+    firstMenu: function (menus?: RouteRecordRaw[]) {
+      let path = PageEnum.LOGIN as string;
+      if (!menus) {
+        menus = this.addRoutes;
+      }
+      for (let i = 0; i < menus.length; i++) {
+        if (menus[i].children?.length) {
+          path = this.firstMenu(menus[i].children!);
+        } else {
+          if (!menus[i].meta?.isLink) {
+            path = menus[i].path;
+          }
+        }
+        if (path) {
+          return path;
+        }
+      }
+      return path;
+    },
+  },
+});

package/template/meadmin/view/admin/src/store/modules/setting.ts

@@ -0,0 +1,46 @@
+import { localeConfig, settingKey, themeConfig } from '@/config';
+import { event, mitter } from '@/event';
+import { mixColor } from '@/utils/helper';
+import { Language } from 'element-plus/es/locale';
+import { useGlobalStore } from '../module';
+const { css } = useStyleTag('');
+const useSettingStore = defineStore('setting', {
+  state: () => ({
+    themeConfig: useStorage(`${settingKey}-theme`, themeConfig, localStorage, { mergeDefaults: true }),
+    locale: useStorage(`${settingKey}-locale`, localeConfig.localeSetting.locale ?? 'zh-cn'),
+    elLocale: undefined as Language | undefined,
+    isDark: useDark({ storageKey: 'me-color-dark-scheme' }),
+    showSettingMenu: false,
+  }),
+  getters: {
+    menuType: (state) => {
+      const globalStore = useGlobalStore();
+      return globalStore.isMobile ? 'sidebar' : state.themeConfig.menuType;
+    },
+  },
+  actions: {
+    setPrimaryStyle() {
+      const style = [];
+      const darkStyle = [];
+      style.push(`--el-color-primary:${this.themeConfig.primaryColor} !important`);
+      darkStyle.push(`--el-color-primary:${this.themeConfig.primaryColor} !important`);
+      style.push('--el-color-primary-rgb:' + mixColor(this.themeConfig.primaryColor, '#000000', 0) + ' !important');
+      darkStyle.push('--el-color-primary-rgb:' + mixColor(this.themeConfig.primaryColor, '#000000', 0) + ' !important');
+      style.push('--el-color-primary-dark-2:' + mixColor(this.themeConfig.primaryColor, '#000000', 0.2) + ' !important');
+      darkStyle.push('--el-color-primary-dark-2:' + mixColor(this.themeConfig.primaryColor, '#ffffff', 0.2) + ' !important');
+      [3, 5, 7, 8, 9].forEach((number) => {
+        style.push(`--el-color-primary-light-${number}:` + mixColor(this.themeConfig.primaryColor, '#ffffff', number / 10) + ' !important');
+        darkStyle.push(`--el-color-primary-light-${number}:` + mixColor(this.themeConfig.primaryColor, '#141414', number / 10) + ' !important');
+      });
+      css.value = ':root{' + style.join(';') + '}' + '.dark{' + darkStyle.join(';') + '}';
+    },
+    clearCache() {
+      localStorage.clear();
+    },
+  },
+});
+mitter.once(event.READY, () => {
+  const settingStore = useSettingStore();
+  watch(() => settingStore.themeConfig.primaryColor, settingStore.setPrimaryStyle, { immediate: true });
+});
+export default useSettingStore;

package/template/meadmin/view/admin/src/store/modules/user.ts

@@ -0,0 +1,115 @@
+import { loginApi, LoginParams, userInfoApi, UserInfoResult } from '@/api/login';
+import { loginConfig as config } from '@/config';
+import { PageEnum } from '@/dict/pageEnum';
+import { event, mitter } from '@/event';
+import { router } from '@/router';
+import { loading } from '@/utils/loading';
+import { initDynamicViewsModules, transitionComponent } from '@/utils/permission.js';
+import cookies from 'js-cookie';
+import { Ref } from 'vue';
+import { RouteRecordRaw } from 'vue-router';
+import { listToTree, statusToBoolean } from '../../utils/helper';
+import useRouteStore from './route';
+interface UserState {
+  user: UserInfoResult['info']; // 用户信息
+  rules: string[] | undefined; // 用户权限信息
+  menus: RouteRecordRaw[]; //用户菜单数组
+  token: Ref<string>; // 用户token
+}
+export default defineStore('user', {
+  state: (): UserState => {
+    let _token = '';
+    return {
+      user: {} as UserInfoResult['info'],
+      rules: undefined,
+      menus: [],
+      token: customRef<string>((track, trigger) => {
+        return {
+          get() {
+            // track 方法放在 get 中，用于提示这个数据是需要追踪变化的
+            track();
+            return _token;
+          },
+          set(token: string) {
+            _token = token;
+            if (token) {
+              cookies.set(config.tokenName, token, {
+                expires: config.tokenExpires,
+                domain: config.tokenDomain,
+              });
+            } else {
+              cookies.remove(config.tokenName, {
+                domain: config.tokenDomain,
+              });
+            }
+            trigger(); // 记得触发事件 trigger,告诉vue触发页面更新
+          },
+        };
+      }),
+    };
+  },
+  actions: {
+    // 初始化
+    init: async function (tokenValue?: string) {
+      const token = tokenValue ?? cookies.get(config.tokenName);
+      if (token) {
+        this.token = token;
+        const res = await userInfoApi(true, !tokenValue)();
+        this.user = res.info;
+        initDynamicViewsModules();
+        this.rules = res.btnRules;
+        this.menus = listToTree(
+          res.menus.map((item) => ({
+            id: item.id,
+            path: item.path,
+            parentId: item.parentId,
+            component: transitionComponent(item.component),
+            meta: {
+              // 标题设置该路由在侧边栏和面包屑中展示的名字
+              title: item.title,
+              // 对应权限 多个之间为或的关系
+              rule: [item.rule],
+              // 是否是固定的tag
+              affix: statusToBoolean(item.affix),
+              // 图标
+              icon: item.icon,
+              // 外链
+              isLink: statusToBoolean(item.isLink),
+              // 如果设置为true，则不会被 <keep-alive> 缓存
+              noCache: !statusToBoolean(item.cache),
+              // 在菜单中隐藏
+              hideMenu: statusToBoolean(item.hideMenu),
+              // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式
+              // 只有一个时，会将那个子路由当做根路由显示在侧边栏
+              // 若你想不管路由下面的 children 声明的个数都显示你的根路由
+              // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
+              alwaysShow: statusToBoolean(item.alwaysShow),
+              // 是否需要面包屑 false不展示在面包屑,ture一直展示在面包屑,undefined当只有一个子元素面包屑时跳过展示
+              breadcrumb: statusToBoolean(item.breadcrumb),
+            },
+          })),
+        );
+        await useRouteStore().initRoutes(); //初始化路由
+      } else {
+        this.token = '';
+      }
+    },
+    // 登录
+    login: async function (params: LoginParams) {
+      mitter.emit(event.BEFORE_LOGIN);
+      const res = await loginApi()(params);
+      await this.init(res.token);
+      mitter.emit(event.AFTER_LOGIN);
+    },
+    // 退出
+    logOut: async function () {
+      loading();
+      await Promise.allSettled(mitter.emit(event.BEFORE_LOGOUT));
+      this.token = '';
+      await router.replace({
+        path: PageEnum.LOGIN,
+      });
+      window.location.reload();
+    },
+  },
+});

package/template/meadmin/view/admin/src/styles/element-plus.scss

@@ -0,0 +1,40 @@
+@use 'element-plus/dist/index.css';
+@use 'element-plus/theme-chalk/dark/css-vars.css';
+//自定义 element-ui 样式
+.me-large:root {
+  //这里强制将font-size-base设置为large
+  --el-font-size-base: var(--el-font-size-large);
+}
+.me-small:root {
+  //这里强制将font-size-base设置为small
+  --el-font-size-base: var(--el-font-size-small);
+}
+//颜色选择器预定义样式加上border
+.el-color-predefine__color-selector > div {
+  border: 1px solid var(--el-border-color);
+}
+.me-sidebar-drawer {
+  .el-drawer__body {
+    padding: 0;
+  }
+}
+.el-breadcrumb {
+  font-size: var(--el-font-size-base);
+}
+//设置form-item__label换行时样式
+.el-form-item--default .el-form-item__label {
+    line-height: 1.2em;
+    align-items: center;
+}
+//el-form-item 嵌套 el-form-item 时 el-input 宽度自适应
+.el-form-item__content{
+  >.el-form-item{
+    .el-form-item__content{
+      >.el-input{
+        width: auto;
+      }
+
+    }
+  }
+
+}