create-meadminjs 1.0.0

package/template/meadmin/view/index/src/components/meNumber.vue

@@ -0,0 +1,74 @@
+<template>
+  <span>
+    <span class="prefix">{{ numberInfo.prefix }}</span>
+    <span class="output">{{ format(output, numberInfo.decimals) }}</span>
+    <span class="suffix">{{ numberInfo.suffix }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { EasingFunction, TransitionPresets, useTransition } from '@vueuse/core';
+import formatNumber from 'format-number';
+import { PropType } from 'vue';
+const props = defineProps({
+  start: {
+    type: Number,
+    default: 0,
+  },
+  end: [Number, Array] as PropType<number | [number, string?, string?]>,
+  delay: { type: Number, default: 0 }, //开始动画等待的毫秒数
+  disabled: { type: Boolean, default: false }, //禁用动画
+  duration: { type: Number, default: 1000 }, //动画持续毫秒
+  transition: {
+    //动画
+    type: [Function, String] as PropType<EasingFunction | keyof typeof TransitionPresets>,
+    default: 'easeOutExpo',
+  },
+  format: {
+    type: Function as PropType<(number: number, decimals: number) => string | number>,
+    default: (number: number, decimals: number) => formatNumber({ truncate: decimals, padRight: decimals })(number),
+  },
+});
+const emit = defineEmits<{
+  (e: 'finished'): void;
+  (e: 'started'): void;
+}>();
+const numberInfo = reactive({
+  number: props.start,
+  prefix: '',
+  suffix: '',
+  decimals: 0,
+});
+const output = useTransition(
+  computed(() => numberInfo.number),
+  {
+    delay: computed(() => props.delay),
+    disabled: computed(() => props.disabled),
+    duration: computed(() => props.duration),
+    onFinished: () => emit('finished'),
+    onStarted: () => emit('started'),
+    transition: computed(() => (typeof props.transition === 'string' ? TransitionPresets[props.transition] : props.transition)),
+  },
+);
+const getFormatInfo = (value: number | [number, string?, string?]) => {
+  if (typeof value === 'number') {
+    return {
+      prefix: '',
+      number: value,
+      suffix: '',
+      decimals: (value + '').split('.')[1]?.length ?? 0,
+    };
+  }
+  return {
+    prefix: value[1] ?? '',
+    number: value[0],
+    suffix: value[2] ?? '',
+    decimals: (value[0] + '').split('.')[1]?.length ?? 0,
+  };
+};
+watch(
+  () => props.end,
+  (end) => Object.assign(numberInfo, getFormatInfo(end ?? props.start)),
+  { immediate: true, deep: true },
+);
+</script>

package/template/meadmin/view/index/src/components/meSelectFile/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <me-dialog v-model="show" class="me-select-file-da0344ese" :title="t('选择文件')" :close-on-click-modal="false" @closed="emit('closed')">
+    <me-vxe-table
+      v-model:quick-search="params.filename"
+      :loading="loading"
+      :data="data?.list"
+      :pagination-options="{
+        currentPage: params.page,
+        pageSize: params.pageSize,
+        total: data?.total ?? 0,
+        layout: 'sizes, prev, pager, next, jumper, ->, total',
+        change: search,
+      }"
+      align="center"
+      border
+      @refresh="search(1)"
+      @quick-search="search(1)"
+      @add="() => {}"
+    >
+      <template #buttons>
+        <div style="display: inline-block; margin-left: 12px; vertical-align: middle">
+          <me-upload :show-file-list="false" @success="search(1)"></me-upload>
+        </div>
+      </template>
+      <vxe-column field="id" :title="t('ID')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="name" :title="t('文件名')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="url" :title="t('预览')">
+        <template #default="{ row }: { row: FileInfo }">
+          <el-image
+            v-if="isImage(row.url)"
+            class="view-img"
+            :src="row.url"
+            :zoom-rate="1.2"
+            :max-scale="7"
+            :min-scale="0.2"
+            :preview-src-list="[row.url]"
+            show-progress
+            preview-teleported
+            fit="scale-down"
+          />
+          <a v-else :href="row.url" target="_blank" :title="t('点击下载')">
+            <mel-icon-download size="20px"></mel-icon-download>
+          </a>
+        </template>
+      </vxe-column>
+      <vxe-column field="path" :title="t('路径')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="mimeType" :title="t('mime类型')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="size" :title="t('文件大小')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="storage" :title="t('存储引擎')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="createdAdmin" :title="t('创建者')" :formatter="formatterStr">
+        <template #default="{ row }: { row: FileInfo }"> {{ row.createdAdmin.nickname }}({{ row.createdAdmin.username }}) </template>
+      </vxe-column>
+      <vxe-column field="createdAt" :title="t('创建时间')" :formatter="formatterAt"></vxe-column>
+      <vxe-column :title="t('操作')" fixed="right">
+        <template #default="{ row }: { row: FileInfo }">
+          <el-button @click="select(row)"> <mel-icon-select />{{ t('选择') }} </el-button>
+        </template>
+      </vxe-column>
+    </me-vxe-table>
+  </me-dialog>
+</template>
+
+<script setup lang="ts" name="MeSelectFile">
+import { FileInfo, FileListParam, fileMyListApi } from '@/api/file';
+import { useLocalesI18n } from '@/locales/i18n';
+import { isImage } from '@/utils/helper';
+import { formatterAt, formatterStr } from '@/utils/helper.js';
+const show = defineModel<boolean>('show');
+const emit = defineEmits<{
+  closed: [];
+  selected: [FileInfo];
+}>();
+const { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`@/views/file/lang/${locale}.json`), 'file']);
+const params = reactive(new FileListParam());
+const { loading, data, runAsync } = fileMyListApi();
+const search = (page = params.pageSize, pageSize = params.pageSize) => runAsync(Object.assign(params, { page, pageSize }));
+const select = (file: FileInfo) => {
+  emit('selected', file);
+  emit('closed');
+};
+await Promise.all([loadRes, search(1)]);
+</script>
+<style lang="scss">
+.me-select-file-da0344ese {
+  height: 60vh;
+  width: 80vw;
+  .view-img {
+    width: 50px;
+    height: 50px;
+  }
+}
+</style>

package/template/meadmin/view/index/src/components/meSelectFile/meSelectFile.ts

@@ -0,0 +1,3 @@
+import { useActionModel } from '@/hooks/index.js';
+import MeSelectFile from './index.vue';
+export const useMeSelectFile = () => useActionModel(MeSelectFile, true, 'show');

package/template/meadmin/view/index/src/components/meUpAvatar.vue

@@ -0,0 +1,166 @@
+<template>
+  <el-upload
+    v-model:file-list="fileList"
+    list-type="picture-card"
+    accept="image/*"
+    class="me-up-avater"
+    :class="{ upload: process > 0 }"
+    :limit="1"
+    :http-request="handleHttpRequest"
+    :before-upload="beforeAvatarUpload"
+    @success="handleSuccess"
+    @remove="handleRemove"
+    @exceed="handleExceed"
+    @preview="handlePictureCardPreview"
+    @progress="setProcess"
+  >
+    <template v-if="!file">
+      <mel-icon-upload-filled class="default-up-icon"></mel-icon-upload-filled>
+      <div class="text">
+        <mel-icon-upload-filled></mel-icon-upload-filled>
+        <div class="text-desc">上传头像</div>
+      </div>
+    </template>
+  </el-upload>
+</template>
+
+<script setup lang="ts" name="MeUpAvatar">
+import { FileInfo } from '@/api/file';
+import { fileUpload } from '@/utils/fileUpload';
+import { UploadFile, UploadProgressEvent, UploadProps, UploadRequestOptions } from 'element-plus';
+import { createImageViewer } from './service/meImageViewer';
+const file = defineModel<(FileInfo & { uid?: number }) | null>(undefined);
+const fileList = reactive([] as Array<FileInfo & { uid?: number }>);
+watch(
+  () => file.value,
+  (file) => {
+    fileList.splice(0);
+    file && fileList.push(file);
+  },
+);
+//预览图片
+const handlePictureCardPreview = () => {
+  file.value &&
+    createImageViewer({
+      urlList: [file.value.url],
+      initialIndex: 0,
+      showProgress: true,
+    });
+};
+//上传请求
+const handleHttpRequest = (options: UploadRequestOptions) => {
+  return fileUpload(options);
+};
+const handleSuccess = (response: FileInfo & { uid?: number }, uploadFile: UploadFile) => {
+  response.uid = uploadFile.uid;
+  file.value = response;
+};
+const handleRemove = () => {
+  file.value = undefined;
+  process.value = 0;
+};
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  if (!/image*/.test(rawFile.type)) {
+    ElMessage.error('必须是正确的图片文件');
+    return false;
+  } else if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error('图片大小不能超过 2MB!');
+    return false;
+  }
+  return true;
+};
+//超出时
+const handleExceed = () => {
+  ElMessage({ type: 'error', message: `最多上传1个文件` });
+};
+const process = ref(0);
+const processDeg = computed(() => {
+  return (process.value / 100) * 360 + 'deg';
+});
+const setProcess = (env: UploadProgressEvent) => {
+  process.value = env.percent;
+};
+</script>
+<style lang="scss" scoped>
+@use 'sass:math';
+
+.me-up-avater {
+  margin: 0 auto;
+
+  :deep(.el-upload-list) {
+    background-image: conic-gradient(#3498db 0deg, #8e44ad v-bind(processDeg), var(--el-border-color-darker) v-bind(processDeg));
+    width: 82px;
+    height: 82px;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .el-upload,
+    .el-upload-list__item {
+      width: 80px;
+      height: 80px;
+      border-radius: 80px;
+      border-style: solid;
+      color: #a8abb2;
+      position: absolute;
+      border-color: unset;
+      left: 1px;
+      top: 1px;
+    }
+
+    .el-upload-list__item {
+      z-index: 2;
+    }
+
+    .text {
+      position: absolute;
+      background-color: rgba(0, 0, 0, 0.15);
+      color: #fcfcfc;
+      width: 100%;
+      height: 100%;
+      border-radius: 100%;
+      justify-content: center;
+      align-items: center;
+      display: none;
+      flex-direction: column;
+      line-height: 100%;
+
+      .text-desc {
+        font-size: 0.8em;
+      }
+    }
+
+    .el-icon--close-tip {
+      display: none !important;
+    }
+
+    i {
+      font-size: 20px;
+    }
+  }
+
+  @keyframes conicProcess {
+    @for $i from 0 through 100 {
+      #{$i * 1%} {
+        background-image: conic-gradient(#3498db 0deg, #8e44ad #{math.div($i, 100) * 360 * 1deg}, var(--el-border-color-darker) #{math.div($i, 100) * 360 * 1deg});
+      }
+    }
+  }
+
+  &:not(.upload) {
+    :deep(.el-upload-list:hover) {
+      animation: conicProcess 500ms ease-in;
+      animation-fill-mode: forwards;
+
+      .default-up-icon {
+        display: none;
+      }
+
+      .text {
+        display: flex;
+      }
+    }
+  }
+}
+</style>

package/template/meadmin/view/index/src/components/meUpload.vue

@@ -0,0 +1,111 @@
+<template>
+  <el-upload
+    v-bind="omit(attrs, 'fileList', 'httpRequest', 'onPreview', 'onSuccess', 'onRemove')"
+    :ref="changeRef"
+    class="me-upload"
+    :file-list="fileList"
+    :http-request="handleHttpRequest"
+    @preview="handlePictureCardPreview"
+    @success="handleSuccess"
+    @remove="handleRemove"
+    @exceed="handleExceed"
+  >
+    <template v-for="(_, name) in $slots" #[name]="data">
+      <slot :name="name" v-bind="data || {}"></slot>
+    </template>
+    <template v-if="!$slots.default && !$slots.trigger">
+      <el-icon v-if="(attrs['list-type'] || attrs.listType) === 'picture-card'"><mel-icon-plus /></el-icon>
+      <el-button v-else type="primary">上传</el-button>
+    </template>
+    <el-button v-if="showSelect" @click.stop="openSelectFile()">选择</el-button>
+  </el-upload>
+</template>
+<script lang="ts" name="MeUpload" setup>
+import { FileInfo } from '@/api/file';
+import { useMeSelectFile } from '@/components/meSelectFile/meSelectFile.js';
+import { fileUpload } from '@/utils/fileUpload';
+import { isImage } from '@/utils/helper';
+import { UploadFile, UploadFiles, UploadInstance, UploadRequestHandler, UploadRequestOptions, UploadUserFile } from 'element-plus';
+import { omit } from 'lodash-es';
+import { createImageViewer } from './service/meImageViewer';
+const attrs = useAttrs();
+defineOptions({ inheritAttrs: false });
+const { showSelect = true } = defineProps<{
+  showSelect?: boolean;
+}>();
+const fileList = defineModel<(FileInfo & { uid?: number })[]>({ default: () => [] });
+//预览图片
+const handlePictureCardPreview = (uploadFile: UploadFile) => {
+  const url = (uploadFile.url ?? fileList.value.find((item) => item.uid && item.uid === uploadFile.uid)?.url) || '';
+  if (!isImage(url)) {
+    return window.open(url, '_blank');
+  }
+  const urlList = fileList.value.map((item) => item.url).filter((v) => isImage(v));
+  let index = urlList.findIndex((item) => item === url);
+  if (index === -1) {
+    urlList.unshift(url);
+    index = 0;
+  }
+  createImageViewer({
+    urlList: urlList,
+    initialIndex: index,
+    showProgress: true,
+  });
+};
+//上传请求
+const handleHttpRequest = (options: UploadRequestOptions) => {
+  return attrs.httpRequest ? (attrs.httpRequest as UploadRequestHandler)(options) : fileUpload(options);
+};
+const handleSuccess = (response: FileInfo & { uid?: number }, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+  response.uid = uploadFile.uid;
+  fileList.value.push(response);
+  fileList.value = [...fileList.value];
+  if (attrs.onSuccess) {
+    (attrs as any).onSuccess(response, uploadFile, uploadFiles);
+  }
+};
+const handleRemove = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+  fileList.value = [...(uploadFiles as unknown as (FileInfo & { uid?: number })[])];
+  if (attrs.onRemove) {
+    (attrs as any).onRemove(uploadFile, uploadFiles);
+  }
+};
+const vm = getCurrentInstance();
+const upload = ref<UploadInstance | null>();
+function changeRef(ref: Element | ComponentPublicInstance | null) {
+  if (vm) {
+    //暴露elUpload属性
+    vm.exposed = ref;
+    upload.value = ref as UploadInstance;
+  }
+}
+//超出时
+const handleExceed = (files: Array<File | FileInfo>, uploadFiles?: UploadUserFile[]) => {
+  if (attrs.onExceed) {
+    (attrs as any).onExceed(files, uploadFiles);
+  }
+  ElMessage({ type: 'error', message: `最多上传${attrs.limit}个文件` });
+};
+const { open } = useMeSelectFile();
+const openSelectFile = () => {
+  open({
+    onSelected(file) {
+      if (attrs.limit && fileList.value.length >= (attrs.limit as number)) {
+        return handleExceed([file]);
+      }
+      fileList.value.push(file);
+      fileList.value = [...fileList.value];
+      if (attrs.onSuccess) {
+        (attrs as any).onSuccess(file);
+      }
+    },
+  });
+};
+//声明类型
+defineExpose({} as UploadInstance);
+</script>
+<style lang="scss" scoped>
+.me-upload {
+  width: 100%;
+}
+</style>

package/template/meadmin/view/index/src/components/meVxeTable/components/pagination.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-pagination
+    v-bind="options"
+    :current-page="currentPage"
+    :page-size="pageSize"
+    :layout="pageLayout"
+    :pager-count="pagerCount"
+    @update:current-page="setPage"
+    @update:page-size="setSize"
+  ></el-pagination>
+</template>
+<script lang="ts">
+import { useGlobalStore } from '@/store';
+import { ElPagination } from 'element-plus';
+import { PropType } from 'vue';
+export default defineComponent({
+  name: 'Pagination',
+  props: {
+    options: {
+      type: Object as PropType<
+        {
+          noAutoLayout?: boolean; //关闭手机模式自动更改
+          change: (page: number, size: number) => void; //page或size改变时触发
+        } & ComponentProps<typeof ElPagination>
+      >,
+      required: true,
+    },
+  },
+  setup(props) {
+    const globalStore = useGlobalStore();
+    const pageLayout = computed(() => (!props.options?.noAutoLayout && globalStore.isMobile ? 'prev, pager, next' : props.options?.layout));
+    const pagerCount = computed(() => (!props.options?.noAutoLayout && globalStore.isMobile ? 5 : props.options?.pagerCount));
+    const currentPage = ref(1);
+    watch(
+      () => props.options?.currentPage,
+      (page) => {
+        currentPage.value = page!;
+      },
+      { immediate: true },
+    );
+    const setPage = (page: number) => {
+      currentPage.value = page;
+      props.options?.change(currentPage.value, pageSize.value);
+    };
+    const pageSize = ref(10);
+    watch(
+      () => props.options?.pageSize,
+      (size) => {
+        pageSize.value = size!;
+      },
+      { immediate: true },
+    );
+    const setSize = (size: number) => {
+      pageSize.value = size;
+      props.options?.change(currentPage.value, pageSize.value);
+    };
+    return {
+      pageLayout,
+      pagerCount,
+      currentPage,
+      pageSize,
+      setPage,
+      setSize,
+    };
+  },
+});
+</script>

package/template/meadmin/view/index/src/components/meVxeTable/directives/resize.ts

@@ -0,0 +1,31 @@
+// 监听元素大小变化的指令
+const map = new WeakMap();
+const ob = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    // 获取dom元素的回调
+    const handler = map.get(entry.target);
+    //存在回调函数
+    if (handler) {
+      // 将监听的值给回调函数
+      handler({
+        width: entry.borderBoxSize[0].inlineSize,
+        height: entry.borderBoxSize[0].blockSize,
+      });
+    }
+  }
+});
+
+export const Resize = {
+  mounted(el: any, binding: any) {
+    //将dom与回调的关系塞入map
+    map.set(el, binding.value);
+    //监听el元素的变化
+    ob.observe(el);
+  },
+  unmounted(el: any) {
+    //取消监听
+    ob.unobserve(el);
+  },
+};
+
+export default Resize;