create-meadminjs 1.0.0

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

@@ -0,0 +1,182 @@
+import { ssrVersionKey } from '@/app.js';
+import { storeKey, useUserStore } from '@/store';
+import { closeLoading, loading } from '@/utils/loading';
+import axios, { AxiosRequestConfig, AxiosRequestHeaders } from 'axios';
+import { ElMessage } from 'element-plus';
+import { Pinia } from 'pinia';
+import qs from 'qs';
+import { App, inject } from 'vue';
+import { Options, setGlobalOptions, useRequest } from 'vue-request';
+import { Router, useRouter } from 'vue-router';
+import { clearEmptyParam } from './helper.js';
+import log from './log';
+import { getServerCache, rmServerCache, setServerCache } from './server.js';
+
+export type RequestOptions<R, P extends unknown[]> = {
+  needAll?: boolean; // 需要所有的格式，而不仅仅是data
+  noLoading?: boolean; // 不需要加载特效
+  noError?: boolean; // 不需要错误提示
+  success?: boolean; //成功后提示
+  clearEmpty?: any[]; //去除请求参数的空值数组
+  serverCacheKey?: string; //服务端接口缓存key
+} & Options<R, P>;
+
+setGlobalOptions({
+  manual: true, // 请求需要手动调用
+  // ...
+});
+
+// 请求函数，当请求失败时直接抛出异常;
+export function request<R, P extends unknown[] = []>(
+  axiosConfig: (...args: P) => AxiosRequestConfig | Promise<AxiosRequestConfig>,
+  options?: RequestOptions<R, P>,
+): ReturnType<typeof useRequest<R, P>>;
+export function request<R, P extends unknown[] = [], T extends boolean = boolean>(
+  axiosConfig: (...args: P) => AxiosRequestConfig | Promise<AxiosRequestConfig>,
+  options: RequestOptions<R, P>,
+  returnAxios: T,
+  app?: App,
+): T extends true ? (...args: P) => Promise<R> : ReturnType<typeof useRequest<R, P>>;
+
+/**
+ * 请求函数
+ * @param axiosConfig  axios的配置项
+ * @param options vue request配置项+自定义配置项参考 RequestOptions
+ * @param returnAxios 直接返回axios
+ * @param app app示例，当非setup顶层调用时必填
+ * @returns
+ */
+export function request<R, P extends unknown[] = [], T = boolean>(
+  axiosConfig: (...args: P) => AxiosRequestConfig | Promise<AxiosRequestConfig>,
+  options?: RequestOptions<R, P>,
+  returnAxios?: T,
+  app?: App,
+) {
+  let ssrVersion = '';
+  let store: Pinia | undefined;
+  let router: Router | undefined;
+  if (import.meta.env.SSR) {
+    ssrVersion = app?.config.globalProperties.$ssrVersion;
+    store = app?.config.globalProperties.$pinia;
+    if (!ssrVersion) {
+      ssrVersion = inject(ssrVersionKey) ?? '';
+      if (!ssrVersion) {
+        throw new Error('服务端渲染期间，非setup顶层调用必须传入app');
+      }
+    }
+    if (!store) {
+      store = inject(storeKey);
+      if (!store) {
+        throw new Error('服务端渲染期间，非setup顶层调用必须传入app');
+      }
+    }
+  }
+  router = app?.config.globalProperties.$router;
+  if (!router) {
+    router = useRouter();
+    if (!router) {
+      throw new Error('非setup顶层调用必须传入store');
+    }
+  }
+  const service = axios.create({
+    baseURL: import.meta.env.SSR ? import.meta.env.VIEW_INDEX_API_SERVER_PREFIX : import.meta.env.VIEW_INDEX_API_CLIENT_PREFIX, // url = base url + request url
+    timeout: 10000, // request timeout
+    paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'repeat', skipNulls: true }), // 数组query参数转换为repeat a=1&a=2,null值会被删除
+  });
+  // 请求拦截器
+  service.interceptors.request.use(
+    (config) => {
+      // 在发送请求之前做一些事情
+      if (!config.headers) {
+        config.headers = {} as AxiosRequestHeaders;
+      }
+      const userStore = useUserStore(store);
+      if (userStore.token) {
+        config.headers['Authorization'] = 'Bearer ' + userStore.token;
+      }
+      return config;
+    },
+    (error) => {
+      // 对请求错误做些什么
+      log.error(error); // for debug
+      throw Error('请求异常，请联系管理员'); // 改写错误信息
+    },
+  );
+  service.interceptors.response.use(
+    (response) => {
+      // 2xx 范围内的状态码都会触发该函数。
+      // 对响应数据做点什么
+      return response;
+    },
+    (error) => {
+      // 超出 2xx 范围的状态码都会触发该函数。
+      // 对响应错误做点什么
+      log.error(error); // for debug
+      throw Error('操作失败，请稍后重试');
+    },
+  );
+
+  const axiosService = async (...args: P): Promise<R> => {
+    try {
+      //loading放到微任务中去执行以确保在自动调用请求时等待所有的宏任务中的生命周期函数执行完再创建loading实例 以规避currentInstance的相关警告
+      !options?.noLoading && Promise.resolve(undefined).then(loading);
+      const config = await axiosConfig(...args);
+      if (options?.clearEmpty) {
+        if (config.params) config.params = clearEmptyParam(config.params, options?.clearEmpty);
+        if (config.data) config.data = clearEmptyParam(config.data, options?.clearEmpty);
+      }
+      let serverCacheKey = options?.serverCacheKey;
+      if (!serverCacheKey) {
+        serverCacheKey = JSON.stringify(config) + '__';
+      }
+      serverCacheKey = '__req__' + serverCacheKey;
+      let res: any;
+      if (import.meta.env.SSR) {
+        res = (await service(config)).data;
+        setServerCache(serverCacheKey, res, ssrVersion);
+      } else {
+        res = getServerCache(serverCacheKey);
+        if (res === undefined) {
+          res = (await service(config)).data;
+        } else {
+          //服务端已请求完毕的接口，从缓存直接获取并且 模拟下一个微任务规避时机，异步组件时机问题导致的slot警告。
+          await new Promise<void>((reslove) => {
+            setTimeout(() => {
+              reslove();
+            }, 0);
+          });
+        }
+      }
+      if (!res || res.code === undefined) {
+        throw Error('返回值解析失败');
+      }
+      // 401：认证失败
+      if (res.code === '401') {
+        if (import.meta.env.SSR) {
+          rmServerCache(serverCacheKey);
+        }
+        router.push('/redirect//promiseError/' + res.msg);
+        throw Error(res.msg);
+      }
+      if (res.code !== '200') {
+        throw Error(res.msg);
+      }
+      if (options?.success) {
+        ElMessage.success({ message: res.msg });
+      }
+      !options?.noLoading && closeLoading();
+      return options?.needAll ? res : res.data;
+    } catch (e) {
+      !options?.noLoading && closeLoading();
+      !options?.noError &&
+        ElMessage.error({
+          message: e instanceof Error ? e.message : String(e),
+        });
+      throw e;
+    }
+  };
+
+  return returnAxios ? axiosService : useRequest<R, P>(axiosService, options);
+}
+
+export default request;

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

@@ -0,0 +1,73 @@
+const cacheObj = {} as Record<string, Record<string, Array<any>>>;
+/**
+ * 设置缓存(服务端)
+ * @param key
+ * @param res
+ * @returns
+ */
+export function setServerCache(key: string, res: any, ssrVersion: string) {
+  if (import.meta.env.SSR) {
+    if (!cacheObj[ssrVersion]) {
+      cacheObj[ssrVersion] = {};
+    }
+    if (cacheObj[ssrVersion][key]) {
+      cacheObj[ssrVersion][key].push(res);
+    } else {
+      cacheObj[ssrVersion][key] = [res];
+    }
+    return;
+  }
+  throw new Error('只支持在服务端调用!');
+}
+
+/**
+ * 移除cache（单次）
+ * @param key
+ */
+export function rmServerCache(key: string, ssrVersion?: string) {
+  if (import.meta.env.SSR) {
+    if (!ssrVersion) {
+      throw new Error('服务端调用时必须传入ssrVersion!');
+    }
+    (cacheObj[ssrVersion]?.[key] ?? []).shift();
+  } else {
+    (window.__serverCache?.[key] ?? []).shift();
+  }
+}
+
+/**
+ * 获取单个缓存,客户端获取成功后会清除缓存
+ * @param key
+ * @returns
+ */
+export function getServerCache(key: string) {
+  if (import.meta.env.SSR) {
+    throw new Error('只支持在客户端调用!');
+  } else {
+    return (window.__serverCache?.[key] ?? []).shift();
+  }
+}
+
+/**
+ * 获取所有缓存内容（服务端）
+ * @returns
+ */
+export function getAllServerCache(ssrVersion: string) {
+  if (!import.meta.env.SSR) {
+    throw new Error('只支持在服务端调用!');
+  }
+  return cacheObj[ssrVersion];
+}
+
+/**
+ * 清空所有缓存内容（服务端）
+ * @returns
+ */
+export function cleanServerCache(ssrVersion: string) {
+  if (!import.meta.env.SSR) {
+    throw new Error('只支持在服务端调用!');
+  }
+  if (cacheObj[ssrVersion]) {
+    delete cacheObj[ssrVersion];
+  }
+}

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

@@ -0,0 +1,17 @@
+/**
+ * 是否是外链
+ * @param path
+ * @returns
+ */
+export function isExternal(path: string) {
+  return /^(https?:|mailto:|tel:)/.test(path);
+}
+
+/**
+ * 是否是手机号
+ * @param value
+ * @returns
+ */
+export function isMobile(value: string | number) {
+  return /^1\d{10}$/.test(value + '');
+}

package/template/meadmin/view/index/src/views/404.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="no-page">
+    <img src="@/assets/images/404.svg?url" />
+    <div class="info">
+      <div class="title">404</div>
+      <div class="content">
+        页面不见了!
+        <router-link to="/">去首页</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.no-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 1.2rem;
+  img {
+    width: 100%;
+    max-width: 500px;
+  }
+
+  .info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .title {
+      font-size: 1.5em;
+    }
+
+    .content {
+      margin: 1.5em 0;
+      color: var(--el-text-color-placeholder);
+      display: flex;
+      align-items: center;
+
+      a {
+        margin-left: 1em;
+        color: var(--el-color-primary);
+      }
+    }
+  }
+}
+</style>

package/template/meadmin/view/index/src/views/index/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="index">
+    <div class="header-banner">
+      <el-carousel :interval="4000" height="auto">
+        <el-carousel-item v-for="item in info.banner" :key="item.title" style="height: max-content">
+          <div class="banner">
+            <div class="content">
+              <div class="title">{{ item.title }}</div>
+              <div class="text">{{ item.content }}</div>
+            </div>
+            <img :src="item.bgImg" />
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <div class="body">
+      <div v-for="item in info.info" :key="item.title" class="item">
+        <div class="title">{{ item.title }}</div>
+        <div class="desc">{{ item.desc }}</div>
+        <div class="content">
+          <div v-for="value in item.list" :key="value.title" class="card">
+            <div class="card-title">{{ value.title }}</div>
+            <div class="card-content">{{ value.content }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Index">
+import { indexApi } from '@/api';
+//接口必须在顶级异步调用，才会在服务端调用。
+const info = await indexApi().runAsync();
+</script>
+<style lang="scss" scoped>
+.index {
+  .banner {
+    position: relative;
+    width: 100%;
+    min-height: 320px;
+
+    img {
+      display: block;
+      width: 100%;
+    }
+
+    .content {
+      position: absolute;
+      top: 15%;
+      left: 10%;
+      color: #f5f3f3;
+      background-color: rgba(0, 0, 0, 0.3);
+      padding: 50px 15px;
+      max-width: 50%;
+      width: 500px;
+      border-radius: 5px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+      height: 70%;
+
+      .title {
+        margin-bottom: 20px;
+        font-size: 30px;
+        font-weight: bolder;
+      }
+
+      .content {
+        font-size: 14px;
+        line-height: 1.2em;
+      }
+    }
+  }
+
+  .body {
+    .item {
+      display: flex;
+      flex-direction: column;
+      padding-top: 30px;
+      align-items: center;
+
+      .title {
+        font-size: 32px;
+        font-weight: bolder;
+      }
+
+      .desc {
+        padding-top: 5px;
+        font-size: 16px;
+        color: #4e6e8e;
+      }
+
+      .content {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, 30%);
+        width: 100%;
+        justify-content: space-between;
+        padding: 25px;
+
+        .card {
+          background-color: #fff;
+          border-radius: 2px;
+          box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
+          height: 200px;
+          transition: all 0.3s;
+          padding: 0 10px;
+
+          .card-title {
+            font-size: 22px;
+            font-weight: bolde;
+            line-height: 80px;
+            border-bottom: 1px solid #f6eeee;
+            text-align: center;
+          }
+
+          .card-content {
+            padding-top: 20px;
+            padding-left: 15px;
+            padding-right: 15px;
+            color: #4e6e8e;
+            font-size: 16px;
+            text-align: center;
+          }
+        }
+
+        .card:hover {
+          margin-top: -5px;
+          box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.3);
+        }
+      }
+    }
+
+    .item:nth-child(n + 2) {
+      margin-top: 20px;
+    }
+  }
+}
+</style>

package/template/meadmin/view/index/src/views/login/components/login.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="login">
+    <div class="left">
+      <div class="form">
+        <div class="title">登 录</div>
+        <el-form ref="formRef" size="large" :rules="rules" :model="loginParams" @keyup.enter="submit">
+          <el-form-item prop="username">
+            <el-input v-model="loginParams.username" autofocus placeholder="用户名" clearable />
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input v-model="loginParams.password" type="password" placeholder="密码" clearable show-password />
+          </el-form-item>
+          <el-form-item prop="captcha">
+            <el-input v-model="loginParams.captcha" class="captcha-input" placeholder="验证码" clearable>
+              <template #append>
+                <img class="captcha-img" :src="captchaObj?.imageBase64" @click="getCaptch()" />
+              </template>
+            </el-input>
+          </el-form-item>
+          <me-button class="button submit" @click="submit()">登录</me-button>
+        </el-form>
+      </div>
+    </div>
+    <div class="right">
+      <div class="explanation">
+        <div class="title">没有账户？</div>
+        <div class="desc">立即加入我们吧，点击下方按钮进行注册</div>
+        <me-button class="button go" @click="setGo()">注册</me-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Login">
+import { LoginParams, loginCaptchaApi } from '@/api/login';
+import { useUserStore } from '@/store';
+import { FormInstance } from 'element-plus';
+const loginParams = reactive(new LoginParams());
+//验证码
+const { data: captchaObj, runAsync: getCaptchRun } = loginCaptchaApi();
+const getCaptch = async () => {
+  await getCaptchRun();
+  loginParams.captchaId = captchaObj.value!.id;
+};
+await getCaptch();
+const rules = {
+  username: [
+    {
+      required: true,
+      message: '请填写用户名',
+      trigger: 'blur',
+    },
+    {
+      min: 3,
+      max: 8,
+      message: '长度必须在 3 到 8个字符之间',
+      trigger: 'blur',
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: '请填写密码',
+      trigger: 'blur',
+    },
+    {
+      min: 6,
+      max: 20,
+      message: '长度必须在 6 到 20个字符之间',
+      trigger: 'blur',
+    },
+  ],
+  captcha: [
+    {
+      required: true,
+      message: '请填写验证码',
+      trigger: 'blur',
+    },
+  ],
+};
+const userStore = useUserStore();
+const formRef = ref<FormInstance>();
+const route = useRoute();
+const router = useRouter();
+const _this = getCurrentInstance();
+const submit = async () => {
+  formRef.value?.validate(async (valid, fields) => {
+    if (valid) {
+      try {
+        await userStore.login(_this!.appContext.app, loginParams);
+        await router.replace((route.query.redirect as string) || '/');
+      } catch {
+        getCaptch();
+      }
+    } else {
+      console.log('提交错误', fields);
+      getCaptch();
+    }
+  });
+};
+const emit = defineEmits<{
+  go: [id: 'login' | 'register'];
+}>();
+const setGo = () => {
+  emit('go', 'register');
+};
+</script>
+<style lang="scss" scoped>
+.login {
+  .left {
+    background-color: #fff;
+  }
+  :deep(.el-form-item__error) {
+    padding-left: 20px;
+  }
+}
+</style>