create-meadminjs 1.0.0

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

@@ -0,0 +1,152 @@
+import { useGlobalStore, useSettingStore, useUserStore } from '@/store';
+import { closeLoading, loading } from '@/utils/loading';
+import axios, { AxiosRequestConfig, AxiosRequestHeaders } from 'axios';
+import { ElMessage } from 'element-plus';
+import qs from 'qs';
+import { Options, setGlobalOptions, useRequest } from 'vue-request';
+import { clearEmptyParam } from './helper.js';
+import log from './log';
+const t = (...args: [string | number]) => useGlobalStore().i18n.t(...args);
+const service = axios.create({
+  baseURL: '/api/admin/', // 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();
+    if (userStore.token) {
+      config.headers['Authorization'] = 'Bearer ' + userStore.token;
+    }
+    return config;
+  },
+  (error) => {
+    // 对请求错误做些什么
+    log.error(error); // for debug
+    throw Error(t('请求异常，请联系管理员')); // 改写错误信息
+  },
+);
+service.interceptors.response.use(
+  (response) => {
+    // 2xx 范围内的状态码都会触发该函数。
+    // 对响应数据做点什么
+    return response;
+  },
+  (error) => {
+    // 超出 2xx 范围的状态码都会触发该函数。
+    // 对响应错误做点什么
+    log.error(error); // for debug
+    throw Error(t('操作失败，请稍后重试'));
+  },
+);
+
+export type RequestOptions<R, P extends unknown[]> = {
+  needAll?: boolean; // 需要所有的格式，而不仅仅是data
+  noLoading?: boolean; // 不需要加载特效
+  noError?: boolean; // 不需要错误提示
+  success?: boolean; //成功后提示
+  clearEmpty?: any[]; //去除请求参数的空值数组
+} & 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,
+): T extends true ? (...args: P) => Promise<R> : ReturnType<typeof useRequest<R, P>>;
+
+/**
+ * 请求函数
+ * @param axiosConfig  axios的配置项
+ * @param options vue request配置项+自定义配置项参考 RequestOptions
+ * @param returnAxios
+ * @returns
+ */
+export function request<R, P extends unknown[] = [], T = boolean>(axiosConfig: (...args: P) => AxiosRequestConfig | Promise<AxiosRequestConfig>, options?: RequestOptions<R, P>, returnAxios?: T) {
+  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);
+      }
+      const locale = useSettingStore().locale;
+      if (locale) {
+        config.params = Object.assign({ locale }, config.params);
+      }
+      const { data: res } = await service(config);
+      if (!res || res.code === undefined) {
+        throw Error(t('返回值解析失败'));
+      }
+      // 401：认证失败
+      if (res.code === '401') {
+        ElMessageBox.confirm(res.msg, '请登录', {
+          confirmButtonText: '去 登 陆',
+          cancelButtonText: '取消',
+          type: 'warning',
+          showClose: false,
+          closeOnClickModal: false,
+          closeOnPressEscape: false,
+          closeOnHashChange: false,
+        })
+          .then(async () => {
+            await useUserStore().logOut();
+          })
+          .catch(() => {});
+        throw Error(res.msg);
+      }
+      // 没有权限
+      if (res.code === '403') {
+        ElMessageBox.confirm(res.msg, '无权限访问', {
+          confirmButtonText: '切换账户',
+          cancelButtonText: '取消',
+          type: 'warning',
+          showClose: false,
+          closeOnClickModal: false,
+          closeOnPressEscape: false,
+          closeOnHashChange: false,
+        })
+          .then(async () => {
+            await useUserStore().logOut();
+          })
+          .catch(() => {});
+        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/admin/src/utils/userFileUpload.ts

@@ -0,0 +1,154 @@
+import { UserFileInfo, uploadFileApi } from '@/api/userFile.js';
+import { UploadProgressEvent, UploadRawFile, UploadRequestOptions } from 'element-plus';
+import SparkMD5 from 'spark-md5';
+import md5WorkerURL from './fileMd5Work.js?url';
+const md5Worker = new Worker(md5WorkerURL, { type: 'module' });
+
+//上传前台文件
+export class UploadAjaxError extends Error {
+  name = 'UploadAjaxError';
+  status: number;
+  method: string;
+  url: string;
+
+  constructor(message: string, status: number, method: string, url: string) {
+    super(message);
+    this.status = status;
+    this.method = method;
+    this.url = url;
+  }
+}
+
+/**
+ * 获取文件md5
+ * @param file
+ * @param chunkSize
+ * @param progress
+ * @returns
+ */
+const getMd5 = (file: UploadRawFile, chunkSize = 1024 * 1024, progress?: (progress: string) => void) =>
+  new Promise<string>((resolve, reject) => {
+    const workHandler = (e: MessageEvent) => {
+      const data = e.data;
+      if (data.uid !== file.uid) {
+        return;
+      }
+      if (data.status === 'success') {
+        md5Worker.removeEventListener('message', workHandler);
+        resolve(data.md5);
+      } else if (data.status === 'progress') {
+        // 计算中，更新进度
+        progress?.(data.percent);
+      } else if (data.status === 'failed') {
+        md5Worker.removeEventListener('message', workHandler);
+        // 计算中，更新进度
+        reject(data.error);
+      }
+    };
+    // worker 的监听
+    md5Worker.addEventListener('message', workHandler);
+    // 通知 worker 计算 MD5
+    md5Worker.postMessage({ file, chunkSize, uid: file.uid });
+  });
+
+//执行分片上传
+const uploadChunksExecute = (file: UploadRawFile, currentChunk: number, chunkSize: number, data: UploadRequestOptions['data'] = {}) =>
+  new Promise<Partial<UserFileInfo>>((resolve, reject) => {
+    try {
+      const start = currentChunk * chunkSize;
+      const end = start + chunkSize >= file.size ? file.size : start + chunkSize;
+      const fileReader = new FileReader();
+      fileReader.onload = async (e) => {
+        try {
+          const formData = new FormData();
+          const upFile = new File([e.target!.result || ''], file.name, { type: file.type });
+          data.start = start + '';
+          data.chunkMd5 = SparkMD5.ArrayBuffer.hash(e.target!.result as ArrayBuffer);
+          Object.keys(data).forEach((key) => {
+            formData.append(key, Array.isArray(data[key]) ? String(data[key]) : data[key]);
+          });
+          formData.append('file', upFile);
+          //执行文件上传
+          return resolve(await uploadFileApi()(formData));
+        } catch (e) {
+          reject(e);
+        }
+      };
+      fileReader.onerror = (error) => {
+        reject(error);
+      };
+      fileReader.readAsArrayBuffer(File.prototype.slice.call(file, start, end));
+    } catch (e) {
+      reject(e);
+    }
+  });
+/**
+ * 文件分片上传
+ * @param file
+ * @param chunkSize
+ * @param data
+ * @param progress
+ * @returns
+ */
+const uploadChunks = (file: UploadRawFile, chunkSize: number, data: UploadRequestOptions['data'] = {}, progress?: (progress: string) => void) =>
+  new Promise(async (resolve, reject) => {
+    try {
+      let currentChunk = 0;
+      const chunks = Math.ceil(file.size / chunkSize); // 总分片数
+      if (chunks > 1) {
+        //先上传一个分片确保校验和秒传
+        const res = await uploadChunksExecute(file, currentChunk, chunkSize, Object.assign(data, { chunkIndex: currentChunk + '', over: '0' }));
+        if (res.id) {
+          progress?.('100');
+          return resolve(res);
+        }
+        currentChunk++;
+        progress?.(((currentChunk / chunks) * 100).toFixed(2));
+        //一次并发上传3个分片
+        const parallelNum = 3;
+        for (; currentChunk < chunks - 1; ) {
+          const promiseArr = [];
+          for (let i = 0; i < parallelNum; i++) {
+            if (currentChunk < chunks - 1) {
+              promiseArr.push(uploadChunksExecute(file, currentChunk, chunkSize, Object.assign(data, { chunkIndex: currentChunk + '', over: '0' })));
+              currentChunk++;
+            }
+          }
+          await Promise.all(promiseArr);
+          progress?.(((currentChunk / chunks) * 100).toFixed(2));
+        }
+      }
+      //确保上传完其余分片再上传最后一个分片
+      const res = await uploadChunksExecute(file, currentChunk, chunkSize, Object.assign(data, { chunkIndex: currentChunk + '', over: '1' }));
+      progress?.('100');
+      return resolve(res);
+    } catch (e) {
+      reject(e);
+    }
+  });
+
+//上传请求兼容 element-plus上传事件
+export const fileUpload = async (options: UploadRequestOptions) => {
+  const chunkSize = 1024 * 1024;
+  const progressEvt = new ProgressEvent('uploadProgress', {
+    lengthComputable: true,
+    loaded: 0,
+    total: 100,
+  }) as UploadProgressEvent;
+  progressEvt.percent = 0;
+  // 将 MD5 值放到请求参数里
+  options.data.md5 = await getMd5(options.file, chunkSize, (process) => {
+    //md5进度占总进度5%
+    progressEvt.percent = (+process * 5) / 100;
+    options.onProgress(progressEvt);
+  });
+  options.data.chunk = '1';
+  options.data.name = options.file.name;
+  // 上传分片,第一个分片会查询文件是否存在
+  const res = await uploadChunks(options.file, chunkSize, options.data, (process) => {
+    //上传进度占总进度95%
+    progressEvt.percent = (+process * 95) / 100 + 5;
+    options.onProgress(progressEvt);
+  });
+  return res; //调用onSuccess和return后都会触发Success事件，这里只返回不调用，否则会触发两遍Success事件；
+};

package/template/meadmin/view/admin/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/admin/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">
+        {{ $t('页面不见了') }}!
+        <router-link to="/">{{ $t('去') }}{{ $t(' ') }}{{ $t('首页') }}</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/admin/src/views/example/demo/components/addOrUp.vue

@@ -0,0 +1,118 @@
+<template>
+  <me-dialog v-model="show" :title="t(id ? '编辑' : '新增')" :close-on-click-modal="false" @closed="emit('closed')">
+    <el-form ref="formEl" v-loading="loading" :model="info" :rules="rules" class="add" label-width="auto">
+      <el-form-item :label="t('手机号')" prop="mobile">
+        <el-input v-model="info.mobile"></el-input>
+      </el-form-item>
+      <el-form-item :label="t('类型')" prop="type">
+        <el-select v-model="info.type">
+          <el-option v-for="val in dict.type" :key="val.value" :value="val.value" :label="val.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('名称')" prop="name">
+        <el-input v-model="info.name"></el-input>
+      </el-form-item>
+      <el-form-item :label="t('书籍')" prop="books">
+        <me-select-list v-model="info.books" :props="{ label: 'name', value: 'id' }" value-key="id" :multiple="true" @search="serachExampleBook"></me-select-list>
+      </el-form-item>
+      <el-form-item :label="t('用户')" prop="user">
+        <me-select-list v-model="info.user" :props="{ label: 'username', value: 'id' }" value-key="id" clearable @search="serachUser"></me-select-list>
+      </el-form-item>
+      <el-form-item :label="t('头像')" prop="avatar">
+        <me-upload :limit="1" :model-value="info.avatar ? [info.avatar] : []" @update:model-value="(files) => (info.avatar = files.length ? files[0] : null)"></me-upload>
+      </el-form-item>
+      <el-form-item :label="t('附件')" prop="files">
+        <me-upload v-model="info.files"></me-upload>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <me-button @click="() => (show = false)">{{ t('取消') }}</me-button>
+      <me-button type="primary" @click="submit">{{ t('提交') }}</me-button>
+    </template>
+  </me-dialog>
+</template>
+
+<script setup lang="ts" name="AddOrUpExampleDemo">
+import { ExampleDemo, addExampleDemoApi, exampleDemoInfoApi, updateExampleDemoApi } from '@/api/example/demo';
+import { useLocalesI18n } from '@/locales/i18n';
+import { resetObj } from '@/utils/helper';
+import { isMobile } from '@/utils/validate.js';
+import { FormInstance, FormRules } from 'element-plus';
+//接口需要现在setup顶层初始化（如果是异步setup需要在异步调用之前初始化），否则会有unMounted，非法调用警告，因为vueRequest使用了unMounted
+const { runAsync: updateRunAsync } = updateExampleDemoApi();
+const { runAsync: addRunAsync } = addExampleDemoApi();
+const { runAsync: infoRunAsync } = exampleDemoInfoApi();
+
+import { getUserApi } from '@/api/example/demo';
+const { runAsync: getUserRunAsync } = getUserApi();
+const serachUser = async (query: string, page: number, pageSize: number) => {
+  return await getUserRunAsync({
+    username: query,
+    page: page,
+    pageSize: pageSize,
+  });
+};
+
+import { getExampleBookApi } from '@/api/example/demo';
+import { getDict } from '../dict.js';
+const { runAsync: getExampleBookRunAsync } = getExampleBookApi();
+const serachExampleBook = async (query: string, page: number, pageSize: number) => {
+  return await getExampleBookRunAsync({
+    name: query,
+    page: page,
+    pageSize: pageSize,
+  });
+};
+
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`../lang/${locale}.json`), 'exampleDemo']);
+await loadRes;
+const dict = getDict(t);
+const show = defineModel<boolean>();
+const props = defineProps<{
+  id?: string;
+}>();
+const emit = defineEmits<{
+  (e: 'success'): void;
+  (e: 'closed'): void;
+}>();
+
+const info = reactive(new ExampleDemo());
+const loading = ref(false);
+watch(
+  () => props.id,
+  async (id?: string) => {
+    if (id) {
+      loading.value = true;
+      resetObj(info, await infoRunAsync(id));
+      loading.value = false;
+    }
+  },
+  { immediate: true },
+);
+const rules: FormRules = {
+  mobile: [
+    { required: true, message: t('{label} 必须填写', { label: t('手机号') }), trigger: 'blur' },
+    { validator: (rule, value: string | number) => isMobile(value), message: t('{label} 必须是正确的手机号', { label: t('手机号') }), trigger: 'blur' },
+  ],
+  type: [{ required: true, message: t('{label} 必须填写', { label: t('类型') }), trigger: 'blur' }],
+  name: [
+    { required: true, message: t('{label} 必须填写', { label: t('名称') }), trigger: 'blur' },
+    { type: 'string', min: 1, max: 20, message: t('{label} 长度必须在 {min} 及 {max} 之间', { label: t('名称'), min: 1, max: 20 }), trigger: 'blur' },
+  ],
+};
+const formEl = ref<FormInstance>();
+const submit = async () => {
+  try {
+    await formEl.value!.validate();
+  } catch (invalidFields) {
+    return formEl.value!.scrollToField(Object.keys(invalidFields!)[0]);
+  }
+  if (props.id) {
+    await updateRunAsync(props.id, info);
+  } else {
+    await addRunAsync(info);
+  }
+  show.value = false;
+  emit('success');
+};
+</script>

package/template/meadmin/view/admin/src/views/example/demo/components/info.vue

@@ -0,0 +1,56 @@
+<template>
+  <me-dialog v-model="show" :title="t('详情')" :close-on-click-modal="false" @closed="emit('closed')">
+    <el-descriptions v-loading="loading" class="info" :border="true">
+      <el-descriptions-item :label="t('ID')"> {{ formatterStrExec(data?.id) }} </el-descriptions-item>
+      <el-descriptions-item :label="t('手机号')"> {{ formatterStrExec(data?.mobile) }} </el-descriptions-item>
+      <el-descriptions-item :label="t('类型')"> {{ formatterDictExec(dict, 'type', data?.type) }} </el-descriptions-item>
+      <el-descriptions-item :label="t('名称')"> {{ formatterStrExec(data?.name) }} </el-descriptions-item>
+      <el-descriptions-item :label="t('书籍')"> {{ formatterArrExecFn('name')(data?.books) }} </el-descriptions-item>
+      <el-descriptions-item :label="t('用户')"> {{ formatterObjectExecFn('username')(data?.user) }} </el-descriptions-item>
+      <el-descriptions-item :label="t('头像')">
+        <me-files-view :files="data?.avatar ? [data.avatar] : []"></me-files-view>
+      </el-descriptions-item>
+      <el-descriptions-item :label="t('附件')">
+        <me-files-view :files="data?.files ?? []"></me-files-view>
+      </el-descriptions-item>
+      <el-descriptions-item :label="t('创建时间')"> {{ formatterAtExec(data?.createdAt) }} </el-descriptions-item>
+      <el-descriptions-item :label="t('最后更新时间')"> {{ formatterAtExec(data?.updatedAt) }} </el-descriptions-item>
+      <el-descriptions-item :label="t('创建者')"> {{ formatterObjectExecFn((obj) => `${obj.nickname}(${obj.username})`)(data?.createdAdmin) }} </el-descriptions-item>
+      <el-descriptions-item :label="t('最后更新者')"> {{ formatterObjectExecFn((obj) => `${obj.nickname}(${obj.username})`)(data?.updatedAdmin) }} </el-descriptions-item>
+    </el-descriptions>
+    <template #footer>
+      <me-button @click="() => (show = false)">{{ t('关闭') }}</me-button>
+    </template>
+  </me-dialog>
+</template>
+
+<script setup lang="ts" name="Info">
+import { exampleDemoInfoApi } from '@/api/example/demo';
+import { useLocalesI18n } from '@/locales/hooks.js';
+import { formatterArrExecFn, formatterAtExec, formatterDictExec, formatterObjectExecFn, formatterStrExec } from '@/utils/helper.js';
+import { getDict } from '../dict.js';
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`../lang/${locale}.json`), 'exampleDemo']);
+await loadRes;
+const dict = getDict(t);
+const show = defineModel<boolean>();
+const props = defineProps<{
+  id?: string;
+}>();
+const emit = defineEmits<{
+  (e: 'closed'): void;
+}>();
+const { data, loading, runAsync } = exampleDemoInfoApi();
+watch(
+  () => props.id,
+  async (id?: string) => {
+    if (id) {
+      runAsync(id);
+    }
+  },
+  { immediate: true },
+);
+</script>
+<style lang="scss" scoped>
+.info {
+}
+</style>

package/template/meadmin/view/admin/src/views/example/demo/dict.ts

@@ -0,0 +1,8 @@
+export const getDict = (t = (str: string) => str) =>
+  reactive({
+    type: [
+      { value: 0, label: t('书籍') },
+      { value: 1, label: t('电子产品') },
+      { value: 2, label: t('卡片') },
+    ],
+  });