create-meadminjs 1.0.0

package/template/meadmin/view/index/src/router/routes/001-index.ts

@@ -0,0 +1,42 @@
+import { PageEnum } from '@/dict/pageEnum';
+import Layout from '@/layout/default/index.vue';
+import { RouteRecordRaw } from 'vue-router';
+export const routes: RouteRecordRaw[] = [
+  {
+    path: PageEnum.HOME,
+    redirect: PageEnum.HOME + 'index',
+    component: Layout,
+    children: [
+      {
+        path: PageEnum.LOGIN,
+        component: async () => await import('@/views/login/index.vue'),
+        props: { type: 'login' },
+        meta: {
+          hideMenu: true,
+          title: '登录',
+        },
+      },
+      {
+        path: PageEnum.REGISTER,
+        component: async () => await import('@/views/login/index.vue'),
+        props: { type: 'register' },
+        meta: {
+          hideMenu: true,
+          title: '注册',
+        },
+      },
+      {
+        path: 'index',
+        component: () => import('@/views/index/index.vue'),
+        meta: { title: '首页' },
+      },
+      {
+        path: 'promiseError/:msg',
+        component: () => import('@/views/promiseError.vue'),
+        meta: { title: '无权限访问！', hideMenu: true },
+        props: true,
+      },
+    ],
+    meta: { title: '首页' },
+  },
+];

package/template/meadmin/view/index/src/router/routes/002-demo.ts

@@ -0,0 +1,12 @@
+import Layout from '@/layout/default/index.vue';
+import { concatObjectValue } from '@/utils/helper';
+import { RouteRecordRaw } from 'vue-router';
+export const routes: RouteRecordRaw[] = [
+  {
+    path: '/demo',
+    redirect: '/demo/1',
+    component: Layout,
+    children: concatObjectValue<RouteRecordRaw>(import.meta.glob('./demo/*.ts', { eager: true, import: 'routes' })),
+    meta: { title: '演示菜单' },
+  },
+];

package/template/meadmin/view/index/src/router/routes/003-user.ts

@@ -0,0 +1,27 @@
+import { PageEnum } from '@/dict/pageEnum.js';
+import Layout from '@/layout/default/index.vue';
+import { RouteRecordRaw } from 'vue-router';
+
+export const routes: RouteRecordRaw[] = [
+  {
+    path: PageEnum.USER,
+    redirect: PageEnum.USER + '/userInfo',
+    component: Layout,
+    meta: {
+      hideMenu: true,
+      title: '用户中心',
+    },
+
+    children: [
+      {
+        path: ':active',
+        component: async () => await import('@/views/user/index.vue'),
+        props: true,
+        meta: {
+          hideMenu: true,
+          title: '用户中心',
+        },
+      },
+    ],
+  },
+];

package/template/meadmin/view/index/src/router/routes/demo/001-demo.ts

@@ -0,0 +1,36 @@
+import LayoutRoute from '@/layout/layoutRoute.vue';
+import { RouteRecordRaw } from 'vue-router';
+export const routes: RouteRecordRaw[] = [
+  {
+    path: '1',
+    component: () => import('@/views/index/index.vue'),
+    meta: { title: '演示菜单1' },
+  },
+  {
+    path: '2',
+    meta: { title: '演示菜单2' },
+    component: LayoutRoute,
+    children: [
+      {
+        path: '2-2',
+        component: () => import('@/views/index/index.vue'),
+        meta: { title: '演示菜2-1' },
+      },
+      {
+        path: '2-2',
+        component: () => import('@/views/index/index.vue'),
+        meta: { title: '演示菜2-2' },
+      },
+    ],
+  },
+  {
+    path: '3',
+    component: () => import('@/views/index/index.vue'),
+    meta: { title: '演示菜3' },
+  },
+  {
+    path: '4',
+    component: () => import('@/views/index/index.vue'),
+    meta: { title: '演示菜单4' },
+  },
+];

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

@@ -0,0 +1,7 @@
+import { provideGlobalConfig } from 'element-plus';
+export default defineComponent({
+  setup() {
+    provideGlobalConfig({}, undefined, true);
+  },
+  render: () => '',
+});

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

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

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

@@ -0,0 +1,5 @@
+//当前文件由vite-plugin-autogeneration-import-file自动生成
+export { default as useGlobalStore } from './modules/global'
+export { default as useRouteStore } from './modules/route'
+export { default as useUserStore } from './modules/user'
+//code

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

@@ -0,0 +1,52 @@
+import { event, mitter } from '@/event';
+import { Component, VNode } from 'vue';
+const WIDTH = 992; // refer to Bootstrap's responsive design
+const isMobile = ref(false);
+if (!import.meta.env.SSR) {
+  isMobile.value = window.document.body.offsetWidth < WIDTH;
+}
+mitter.on(event.RESIZE, () => {
+  isMobile.value = window.document.body.offsetWidth < WIDTH;
+});
+export default defineStore('global', {
+  state: () => {
+    return {
+      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/index/src/store/modules/route.ts

@@ -0,0 +1,20 @@
+import { asyncRoutes, constantRoutes, formatRoutes } from '@/router';
+import { Router, RouteRecordRaw } from 'vue-router';
+export default defineStore('route', {
+  state: () => ({
+    addRoutes: [] as RouteRecordRaw[],
+  }),
+  getters: {
+    routes: (state) => constantRoutes.concat(state.addRoutes),
+  },
+  actions: {
+    //生成动态路由
+    generateRoutes() {
+      return (this.addRoutes = asyncRoutes);
+    },
+    //初始化路由
+    initRoutes(router: Router) {
+      formatRoutes(this.generateRoutes()).forEach((route) => router.addRoute(route));
+    },
+  },
+});

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

@@ -0,0 +1,98 @@
+import { loginApi, LoginParams, userInfoApi } from '@/api/login';
+import { UserInfo } from '@/api/user.js';
+import { loginConfig as config } from '@/config';
+import { PageEnum } from '@/dict/pageEnum';
+import { event, mitter } from '@/event';
+import cookies from '@/utils/cookies.js';
+import { loading } from '@/utils/loading';
+import { App, Ref } from 'vue';
+import { Router } from 'vue-router';
+import useRouteStore from './route';
+interface UserState {
+  user: UserInfo; // 用户信息
+  token: Ref<string>; // 用户token
+  ssrVersion: Ref<string>; //ssr版本号
+}
+export default defineStore('user', {
+  state: (): UserState => {
+    let _token = '';
+    let _ssrVersion = '';
+    return {
+      user: {} as UserInfo,
+      ssrVersion: customRef<string>((track, trigger) => {
+        return {
+          get() {
+            // track 方法放在 get 中，用于提示这个数据是需要追踪变化的
+            track();
+            return _ssrVersion;
+          },
+          set(ssrVersion: string) {
+            _ssrVersion = ssrVersion;
+            trigger(); // 记得触发事件 trigger,告诉vue触发页面更新
+          },
+        };
+      }),
+      token: customRef<string>((track, trigger) => {
+        return {
+          get() {
+            // track 方法放在 get 中，用于提示这个数据是需要追踪变化的
+            track();
+            return _token;
+          },
+          set(token: string) {
+            _token = token;
+            if (token) {
+              cookies.set(_ssrVersion, config.tokenName, token, {
+                expires: config.tokenExpires,
+                domain: config.tokenDomain,
+              });
+            } else {
+              cookies.remove(_ssrVersion, config.tokenName, {
+                domain: config.tokenDomain,
+              });
+            }
+            trigger(); // 记得触发事件 trigger,告诉vue触发页面更新
+          },
+        };
+      }),
+    };
+  },
+  actions: {
+    // 初始化
+    init: async function (app: App, tokenValue?: string) {
+      if (app) {
+        this.ssrVersion = app.config.globalProperties.$ssrVersion;
+      }
+      const token = tokenValue ?? cookies.get(this.ssrVersion, config.tokenName);
+      if (token) {
+        this.token = token;
+        this.user = await userInfoApi(true, !tokenValue, app)();
+      } else {
+        this.token = '';
+      }
+      if (!app.config.globalProperties.$pinia || !app.config.globalProperties.$router) {
+        throw new Error('请在pinia及router初始化完成后再调用');
+      }
+      useRouteStore(app.config.globalProperties.$pinia).initRoutes(app.config.globalProperties.$router); //初始化路由
+    },
+    // 登录
+    login: async function (app: App, params: LoginParams) {
+      mitter.emit(event.BEFORE_LOGIN);
+      const res = await loginApi(true, app)(params);
+      await this.init(app, res.token);
+      mitter.emit(event.AFTER_LOGIN);
+    },
+    // 退出
+    logOut: async function (router: Router) {
+      loading();
+      await Promise.allSettled(mitter.emit(event.BEFORE_LOGOUT));
+      this.token = '';
+      await router.replace({
+        path: PageEnum.LOGIN,
+      });
+      if (!import.meta.env.SSR) {
+        window.location.reload();
+      }
+    },
+  },
+});

package/template/meadmin/view/index/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;
+      }
+
+    }
+  }
+
+}

package/template/meadmin/view/index/src/styles/index.scss

@@ -0,0 +1,122 @@
+@use './element-plus.scss';
+@use './transition.scss';
+
+html {
+  body {
+    color: var(--el-text-color-primary);
+
+    #app {
+      width: 100%;
+      height: 100vh;
+    }
+  }
+
+  div,
+  span {
+    box-sizing: border-box;
+  }
+}
+
+.me-large {
+  font-size: var(--el-font-size-base);
+}
+
+.me-default {
+  font-size: var(--el-font-size-base);
+}
+
+.me-small {
+  font-size: var(--el-font-size-small);
+}
+
+//鼠标变小手
+.pointer {
+  cursor: pointer;
+}
+
+//用felx 子元素居中
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+//去a标签默认样式
+a {
+  color: unset;
+  text-decoration: none;
+}
+
+//超出一行...
+.ellipsis-1 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+//超出两行...
+.ellipsis-2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+//超出三行...
+.ellipsis-3 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.popover-scrollbar-y {
+  margin: 0 -12px;
+  padding: 0 12px;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar:horizontal {
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgb(213, 215, 218);
+  border-radius: 10px;
+  transition: all 0.2s ease-in-out;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  cursor: pointer;
+  background-color: rgb(193, 195, 199);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background-color: rgb(56, 56, 59);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(86, 88, 91);
+}
+
+.page-100{
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+}
+.page-padding{
+  padding: calc($page-padding - 10px);
+}

package/template/meadmin/view/index/src/styles/transition.scss

@@ -0,0 +1,33 @@
+//动画样式文件
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* fade-transform-top */
+.fade-transform-top-leave-active,
+.fade-transform-top-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-transform-top-enter-from {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.fade-transform-top-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}

package/template/meadmin/view/index/src/styles/variables.scss

@@ -0,0 +1,6 @@
+$page-padding: 20px;
+$header-top-height: 48px;
+$header-tag-height: 35px;
+$z-index-top: 1999; //当前系统内最高但低于element-plus对应弹窗的z-index  element-plus zIndex 的默认值为 2000
+$z-index-higher: 3000; //高于element-plus对应弹窗的z-index
+

package/template/meadmin/view/index/src/utils/cookies.ts

@@ -0,0 +1,59 @@
+import type { Context } from '@midwayjs/koa';
+import cookies, { CookieAttributes } from 'js-cookie';
+
+const serverCookies = {} as Record<string, Context['Cookies']>;
+export const setServerCookies = (ssrVersion: string, cookies: Context['Cookies']) => {
+  if (!cookies) {
+    if (serverCookies[ssrVersion]) {
+      delete serverCookies[ssrVersion];
+    }
+  } else {
+    serverCookies[ssrVersion] = cookies;
+  }
+};
+//cookie设置兼容服务端和客户端
+export default {
+  /**
+   * Create a cookie
+   */
+  set(ssrVersion: string, name: string, value: string, options?: CookieAttributes) {
+    if (import.meta.env.SSR) {
+      return serverCookies[ssrVersion].set(
+        name,
+        value,
+        Object.assign(
+          {
+            signed: false,
+            httpOnly: false, // 默认是 true
+            maxAge: typeof options?.expires === 'number' ? options.expires * 86400 * 1000 : undefined,
+          },
+          options,
+        ),
+      );
+    } else {
+      return cookies.set(name, value, options);
+    }
+  },
+
+  /**
+   * Read cookie
+   */
+  get(ssrVersion: string, name: string) {
+    if (import.meta.env.SSR) {
+      return serverCookies[ssrVersion].get(name, { signed: false });
+    } else {
+      return cookies.get(name);
+    }
+  },
+
+  /**
+   * Delete cookie
+   */
+  remove(ssrVersion: string, name: string, options?: CookieAttributes) {
+    if (import.meta.env.SSR) {
+      serverCookies[ssrVersion].set(name, options);
+    } else {
+      return cookies.remove(name, options);
+    }
+  },
+};

package/template/meadmin/view/index/src/utils/fileMd5Work.ts

@@ -0,0 +1,109 @@
+// file-md5-worker.ts
+import SparkMD5 from 'spark-md5';
+
+type MD5MessageType = {
+  file: File;
+  chunkSize: number;
+  cancel?: boolean;
+  uid: number;
+};
+// 正在处理的文件记录，当值为 false 时，表示被终止了。
+const progressingFilesMap = new Map<number, boolean>();
+// 用 web worker 来处理文件 MD5 的计算
+self.addEventListener('message', (e: MessageEvent) => {
+  const { file, cancel, chunkSize, uid } = e.data as MD5MessageType;
+  if (cancel && progressingFilesMap.has(uid)) {
+    // 将正在处理的文件标识设置成 false，以备在 getFileMd5 方法中进行终止
+    progressingFilesMap.set(uid, false);
+  } else if (file) {
+    // 开始计算 DM5
+    getFileMd5(file, chunkSize)
+      .then((md5) => {
+        // 计算完成，发送通知
+        self.postMessage({
+          status: 'success',
+          uid: uid,
+          md5,
+        });
+      })
+      .catch((error) => {
+        self.postMessage({
+          status: 'failed',
+          uid: uid,
+          error,
+        });
+      });
+  }
+});
+/**
+ * 生成进度
+ * @param totalChunk 总片数
+ * @param uid 文件的 uid
+ * @returns 更新进度，参数 processedChunk 为已处理的分片数
+ */
+const getProgress = (totalChunk: number, uid: number) => {
+  let preTime = 0,
+    percent = 0;
+  return (processedChunk: number) => {
+    const now = Date.now();
+    // 控制触发间隔大于 500 毫秒
+    // 当已经结束，就马上触发
+    if (now - preTime > 500 || processedChunk >= totalChunk) {
+      percent = Math.min(1, processedChunk / totalChunk) * 100;
+      // 发送进度通知
+      self.postMessage({
+        status: 'progress',
+        uid,
+        percent: percent.toFixed(2),
+      });
+      preTime = now;
+    }
+  };
+};
+
+/**
+ * 获取文件MD5，采用分片的模式读取文件，最后合并生成 MD5
+ * @param file
+ * @param uid
+ * @param chunkSize // 分片大小 单位字节
+ * @returns {Promise<unknown>}
+ */
+const getFileMd5 = (file: File, uid: number, chunkSize = 1024 * 1024) => {
+  const fileReader = new FileReader();
+  const blobSlice = File.prototype.slice;
+  const chunks = Math.ceil(file.size / chunkSize); // 总分片数
+  const updateProgress = getProgress(chunks, uid);
+  let currentChunk = 0;
+  const spark = new SparkMD5.ArrayBuffer();
+  progressingFilesMap.set(uid, true);
+  return new Promise<string>((resolve, reject) => {
+    fileReader.onload = (e) => {
+      if (!e.target?.result) {
+        return loadNext(); //处理下一个分片
+      }
+      spark.append(e.target.result as ArrayBuffer);
+      updateProgress(++currentChunk);
+      if (progressingFilesMap.get(uid) !== true) {
+        // 被终止，则移除
+        progressingFilesMap.delete(uid);
+        reject('Be cancelled');
+      } else if (currentChunk < chunks) {
+        // 未结束，则处理下一个分片
+        loadNext();
+      } else {
+        // 处理完成
+        progressingFilesMap.delete(uid);
+        return resolve(spark.end());
+      }
+    };
+    fileReader.onerror = (e) => {
+      reject(e);
+    };
+    const loadNext = () => {
+      const start = currentChunk * chunkSize;
+      const end = start + chunkSize >= file.size ? file.size : start + chunkSize;
+      fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
+    };
+    loadNext();
+  });
+};