create-meadminjs 1.0.0

package/template/meadmin/view/admin/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/admin/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/admin/src/styles/variables.scss

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

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

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

@@ -0,0 +1,154 @@
+import { FileInfo, uploadFileApi } from '@/api/file.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<FileInfo>>((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/formatting.ts

@@ -0,0 +1,62 @@
+import { CamelCase, SnakeToCamelCase } from '#/global.js';
+
+/**
+ * 将camelCase字符串更改为kebab-case，用破折号替换空格并保留下划线。
+ *
+ * @param   {string}  str  [str description]
+ * @param   {string}  replaceStr  替换的字符串
+ * @return  {[type]}       [return description]
+ */
+export function normalizeToKebabOrSnakeCase(str: string, replaceStr = '-') {
+  const STRING_DASHERIZE_REGEXP = /\s/g;
+  const STRING_DECAMELIZE_REGEXP = /([a-z\d])([A-Z])/g;
+  return str.replace(STRING_DECAMELIZE_REGEXP, `$1${replaceStr}$2`).toLowerCase().replace(STRING_DASHERIZE_REGEXP, replaceStr);
+}
+
+/**
+ * kebab-case/kebab_case 更改为 camelCase
+ *
+ * @param   {string}  str  [str description]
+ *
+ * @return  {[string]}       [return description]
+ */
+export function snakeToCamelCase<T extends string>(str: T) {
+  return str.replace(/[-_]([A-Za-z])/g, function (all, letter) {
+    return letter.toUpperCase();
+  }) as CamelCase<T>;
+}
+
+/**
+ * 对象 key kebab-case/kebab_case 更改为 camelCase
+ * @param obj
+ * @returns
+ */
+export function snakeToCamelCaseObj<T extends Record<string, any>>(obj: T) {
+  const newObj = {} as Record<string, any>;
+  Object.keys(obj).forEach((key) => {
+    newObj[snakeToCamelCase(key)] = obj[key];
+  });
+  return newObj as SnakeToCamelCase<T>;
+}
+
+/**
+ * 首字母小写
+ *
+ * @param   {string}  str  [str description]
+ *
+ * @return  {[type]}       [return description]
+ */
+export function lowerFirstCase(str: string) {
+  return str[0].toLowerCase() + str.slice(1);
+}
+
+/**
+ * 首字母大写
+ *
+ * @param   {string}  str  [str description]
+ *
+ * @return  {[type]}       [return description]
+ */
+export function upFirstCase(str: string) {
+  return str[0].toUpperCase() + str.slice(1);
+}