@phelan/design 0.0.1

package/packages/components/src/empty/src/img-empty.vue

@@ -0,0 +1,39 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="80"
+    height="80"
+    viewBox="0 0 80 80"
+    fill="none"
+  >
+    <path
+      d="M0 66.9744C0 69.1029 4.21427 71.1443 11.7157 72.6493C19.2172 74.1544 29.3913 74.9999 40 74.9999C50.6087 74.9999 60.7828 74.1544 68.2843 72.6493C75.7857 71.1443 80 69.1029 80 66.9744C80 64.846 75.7857 62.8047 68.2843 61.2996C60.7828 59.7945 50.6087 58.949 40 58.949C29.3913 58.949 19.2172 59.7945 11.7157 61.2996C4.21427 62.8047 0 64.846 0 66.9744Z"
+      fill="#F5F5F6"
+    />
+    <path
+      d="M20.4195 30.592H59.6698L72.4491 45.8404H7.64014L20.4195 30.592Z"
+      fill="#B6BECA"
+    />
+    <path
+      d="M19.3705 5H60.7188C61.9173 5 62.5166 5.59448 62.5166 6.78344V51.3694C62.5166 52.5584 61.9173 53.1529 60.7188 53.1529H19.3705C18.172 53.1529 17.5728 52.5584 17.5728 51.3694V6.78344C17.5728 5.59448 18.172 5 19.3705 5Z"
+      fill="#F5F5F6"
+    />
+    <path
+      d="M25.6171 10.3503H54.3811C55.5796 10.3503 56.1789 10.9448 56.1789 12.1338V26.4013C56.1789 27.5903 55.5796 28.1847 54.3811 28.1847H25.6171C24.4186 28.1847 23.8193 27.5903 23.8193 26.4013V12.1338C23.8193 10.9448 24.4186 10.3503 25.6171 10.3503Z"
+      fill="#E4E8EC"
+    />
+    <path
+      d="M25.1677 33.48H54.8306C55.7295 33.48 56.1789 33.9258 56.1789 34.8176C56.1789 35.7093 55.7295 36.1551 54.8306 36.1551H25.1677C24.2688 36.1551 23.8193 35.7093 23.8193 34.8176C23.8193 33.9258 24.2688 33.48 25.1677 33.48Z"
+      fill="#E4E8EC"
+    />
+    <path
+      d="M25.1677 40.8594H54.8306C55.7295 40.8594 56.1789 41.3052 56.1789 42.197C56.1789 43.0887 55.7295 43.5345 54.8306 43.5345H25.1677C24.2688 43.5345 23.8193 43.0887 23.8193 42.197C23.8193 41.3052 24.2688 40.8594 25.1677 40.8594Z"
+      fill="#E4E8EC"
+    />
+    <path
+      d="M53.3804 47.6403V48.6943C53.3806 49.1625 53.2878 49.6263 53.1074 50.0589C52.927 50.4916 52.6624 50.8848 52.3287 51.216C51.9951 51.5473 51.599 51.81 51.1629 51.9894C50.7269 52.1687 50.2596 52.2611 49.7876 52.2612H30.112L29.9323 52.2567C29.0109 52.2112 28.1424 51.816 27.5066 51.1528C26.8708 50.4897 26.5163 49.6095 26.5165 48.6943V47.6394C26.5165 47.1664 26.3271 46.7128 25.99 46.3783C25.6528 46.0439 25.1956 45.856 24.7188 45.856L7.64014 45.8568V65.4747C7.64014 65.9431 7.73314 66.4069 7.91383 66.8397C8.09452 67.2724 8.35936 67.6656 8.69324 67.9968C9.02711 68.3281 9.42348 68.5908 9.8597 68.77C10.2959 68.9493 10.7635 69.0416 11.2356 69.0416H68.8536C69.3258 69.0416 69.7933 68.9493 70.2296 68.77C70.6658 68.5908 71.0622 68.3281 71.396 67.9968C71.7299 67.6656 71.9947 67.2724 72.1754 66.8397C72.3561 66.4069 72.4491 65.9431 72.4491 65.4747V45.8568H55.179C54.7022 45.8571 54.245 46.045 53.9078 46.3794C53.5705 46.7138 53.3808 47.1673 53.3804 47.6403Z"
+      fill="#E4E8EC"
+    />
+  </svg>
+</template>
+<script lang="ts" setup></script>

package/packages/components/src/file-task-dialog/index.ts

@@ -0,0 +1,5 @@
+import FileTaskDialog from './src/file-task-dialog.vue';
+
+export const MFileTaskDialog = FileTaskDialog;
+
+export * from './src/file-task-dialog';

package/packages/components/src/file-task-dialog/src/file-task-dialog.ts

@@ -0,0 +1,32 @@
+export interface FileTaskTableColumnItem {
+  label?: string;
+  prop: string;
+  type?: string;
+  width?: string | number;
+  minWidth?: string | number;
+  showOverflowTooltip?: boolean;
+}
+
+export interface FileTaskTableDataItem {
+  [key: string]: string | number;
+}
+
+export interface FileTaskQueryParams {
+  pageNum: number;
+  pageSize: number;
+  times?: string[] | Date[];
+  id?: string;
+  updateBy?: string;
+  beginCreateTime?: string | Date | undefined;
+  endCreateTime?: string | Date | undefined;
+}
+export interface FileTaskDialogProps {
+  modelValue: boolean;
+  loading: boolean;
+  tableColumn?: FileTaskTableColumnItem[];
+  tableList?: FileTaskTableDataItem[];
+  total?: number | undefined;
+  type: string;
+  operationType: string;
+  title?: string;
+}

package/packages/components/src/file-task-dialog/src/file-task-dialog.vue

@@ -0,0 +1,228 @@
+<template>
+  <m-dialog
+    class="m-file-task-dialog"
+    :title="title"
+    width="80%"
+    v-model="visible"
+    :show-default-footer="false"
+    append-to-body
+    @close="handleClose"
+  >
+    <m-search-panel
+      @reset="handleReset"
+      @search="getList"
+      :expandable="false"
+    >
+      <el-form :model="queryParams">
+        <el-form-item
+          :label="t('任务编码')"
+          prop="id"
+        >
+          <el-input
+            v-model="queryParams.id"
+            :placeholder="t('请输入')"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+          :label="t('操作人')"
+          prop="updateBy"
+        >
+          <el-input
+            v-model="queryParams.updateBy"
+            :placeholder="t('请输入')"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+          :label="t('操作时间')"
+          prop="times"
+        >
+          <el-date-picker
+            clearable
+            v-model="queryParams.times"
+            value-format="YYYY-MM-DD"
+            type="daterange"
+            range-separator="-"
+            :start-placeholder="t('开始日期')"
+            :end-placeholder="t('结束日期')"
+          ></el-date-picker>
+        </el-form-item>
+      </el-form>
+    </m-search-panel>
+
+    <template #scroll>
+      <slot name="table">
+        <m-table
+          v-loading="loading"
+          :data="tableList"
+        >
+          <m-table-column
+            v-for="item in tableColumn"
+            :label="t(item.label)"
+            :min-width="item.minWidth"
+            :prop="item.prop"
+            :show-overflow-tooltip="item.showOverflowTooltip"
+          >
+            <template #default="{ row }">
+              <template v-if="item.type === 'tag'"
+                ><m-tag>{{ row[item.prop] }}</m-tag>
+              </template>
+              <template v-else-if="item.type === 'total'"
+                >{{ row.totalNum }}/{{ row.successNum }}/{{ row.failNum }}</template
+              >
+              <template v-else>{{ row[item.prop] }}</template>
+            </template>
+          </m-table-column>
+          <m-table-column
+            :label="t('操作')"
+            width="100"
+            fixed="right"
+            class-name="small-padding fixed-width row-controls"
+          >
+            <template #default="scope">
+              <m-icon
+                size="20"
+                color="#0D3A93"
+                @click="handleDownload(scope.row)"
+                ><Download
+              /></m-icon>
+            </template>
+          </m-table-column>
+        </m-table>
+      </slot>
+    </template>
+    <template #bottom>
+      <m-pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:current-page="queryParams.pageNum"
+        v-model:page-size="queryParams.pageSize"
+        @change="getList"
+      />
+    </template>
+  </m-dialog>
+</template>
+
+<script setup lang="ts" name="fileTaskDialog">
+import { ref, computed } from 'vue';
+import { FileTaskDialogProps, FileTaskQueryParams } from './file-task-dialog';
+import { FormInstance } from 'element-plus';
+
+// TODO 国际化预留
+const t = (value: any) => {
+  return value;
+};
+const props = withDefaults(defineProps<FileTaskDialogProps>(), {
+  modelValue: false,
+  loading: false,
+  tableColumn: () => [
+    {
+      label: '任务编码',
+      prop: 'id',
+      minWidth: 80,
+    },
+    {
+      label: '任务类型',
+      prop: 'type',
+      minWidth: 110,
+    },
+    {
+      label: '操作类型',
+      prop: 'operationType',
+      minWidth: 100,
+    },
+    {
+      label: '操作人',
+      prop: 'updateBy',
+      minWidth: 100,
+    },
+    {
+      label: '任务状态',
+      prop: 'status',
+      type: 'tag',
+      minWidth: 120,
+    },
+    {
+      label: '任务创建时间',
+      prop: 'createTime',
+      minWidth: 200,
+      showOverflowTooltip: true,
+    },
+    {
+      label: '任务结束时间',
+      prop: 'endTime',
+      minWidth: 200,
+      showOverflowTooltip: true,
+    },
+    {
+      label: '记录数(总数/成功/失败)',
+      prop: 'total',
+      type: 'total',
+      minWidth: 180,
+    },
+  ],
+  tableList: () => [],
+  total: 0,
+  title: '任务列表',
+});
+
+const emit = defineEmits(['update:modelValue', 'getList', 'download']);
+
+const queryParams = ref<FileTaskQueryParams>({
+  pageNum: 1,
+  pageSize: 10,
+  times: [],
+});
+
+const visible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+
+/** 关闭页面 */
+function handleClose() {
+  queryParams.value = { pageNum: 1, pageSize: 10 };
+  emit('update:modelValue', false);
+}
+
+/** 下载模版 */
+function handleDownload(row: any) {
+  emit('download', row);
+}
+
+const handleReset = (formRef?: FormInstance) => {
+  if (!formRef) {
+    return;
+  }
+  formRef.resetFields();
+  queryParams.value = { pageNum: 1, pageSize: 10 };
+  getList();
+};
+const getList = () => {
+  // 转换时间
+  if (queryParams.value.times?.length === 0) {
+    queryParams.value.beginCreateTime = '';
+    queryParams.value.endCreateTime = '';
+  } else {
+    queryParams.value.beginCreateTime = queryParams.value.times?.[0];
+    queryParams.value.endCreateTime = queryParams.value.times?.[1];
+  }
+  const { beginCreateTime, endCreateTime, pageNum, pageSize, id, updateBy } = queryParams.value;
+  const queryData = {
+    beginCreateTime,
+    endCreateTime,
+    pageNum,
+    pageSize,
+    id,
+    updateBy,
+    operationType: props.operationType,
+    type: props.type,
+  };
+  emit('getList', queryData);
+};
+</script>

package/packages/components/src/form/index.ts

@@ -0,0 +1,3 @@
+import { ElForm as Form, ElFormItem as FormItem } from 'element-plus';
+export const MForm = Form;
+export const MFormItem = FormItem;

package/packages/components/src/icon/index.ts

@@ -0,0 +1,5 @@
+import Icon from './src/icon.vue';
+
+export const MIcon = Icon;
+
+export * from './src/icon';

package/packages/components/src/icon/src/icon.ts

@@ -0,0 +1,10 @@
+import { iconPropType } from 'element-plus/es/utils/vue/icon';
+
+export const iconProps = {
+  /**
+   * @description 图标名称或组件
+   */
+  icon: iconPropType,
+};
+
+export type IconProps = typeof iconProps;

package/packages/components/src/icon/src/icon.vue

@@ -0,0 +1,29 @@
+<template>
+  <el-icon
+    class="m-icon"
+    v-bind="filteredAttrs"
+  >
+    <!-- 如果传了 icon prop，优先使用 prop -->
+    <component
+      v-if="props.icon"
+      :is="props.icon"
+    />
+    <!-- 如果没有 icon prop，使用 slot -->
+    <slot v-else />
+  </el-icon>
+</template>
+
+<script lang="ts" setup>
+import { computed, useAttrs } from 'vue';
+import { iconProps } from './icon';
+import { ElIcon } from 'element-plus';
+
+const props = defineProps(iconProps);
+
+const attrs = useAttrs();
+
+const filteredAttrs = computed(() => {
+  const { ...rest } = attrs;
+  return rest;
+});
+</script>

package/packages/components/src/image/index.ts

@@ -0,0 +1,5 @@
+import Image from './src/image.vue';
+
+export const MImage = Image;
+
+export * from './src/image';

package/packages/components/src/image/src/image.ts

@@ -0,0 +1,8 @@
+import type { ImageProps as ElImageProps } from 'element-plus';
+import { ExtractPropTypes } from 'vue';
+
+export const imageProps = {
+  // 可以在这里添加自定义的 props，或者直接使用 Element Plus 的 props
+};
+
+export type ImageProps = ExtractPropTypes<typeof imageProps> & ElImageProps;

package/packages/components/src/image/src/image.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-image
+    ref="elImageRef"
+    :class="imageClass"
+    v-bind="imageAttrs"
+  >
+    <template
+      v-for="(_, slot) in $slots"
+      #[slot]="scope"
+    >
+      <slot
+        :name="slot"
+        v-bind="scope"
+      />
+    </template>
+  </el-image>
+</template>
+
+<script lang="ts" setup>
+import { ElImage } from 'element-plus';
+import { computed, useAttrs, ref } from 'vue';
+import { imageProps } from './image';
+
+defineProps(imageProps);
+const attrs = useAttrs();
+const elImageRef = ref();
+
+// 合并内部 class 和用户传入的 class
+const imageClass = computed(() => {
+  const internalClass = ['m-image'];
+  const userClass = attrs.class;
+
+  if (userClass) {
+    if (typeof userClass === 'string') {
+      return [...internalClass, userClass];
+    }
+    if (Array.isArray(userClass)) {
+      return [...internalClass, ...userClass];
+    }
+    if (typeof userClass === 'object') {
+      return [...internalClass, userClass];
+    }
+  }
+
+  return internalClass;
+});
+
+// 提取公共的 attrs（排除 class，因为已经单独处理）
+const imageAttrs = computed(() => {
+  const { class: _, ...rest } = attrs;
+  return rest;
+});
+
+defineExpose({
+  showPreview: () => elImageRef.value?.showPreview(),
+});
+</script>

package/packages/components/src/import-dialog/index.ts

@@ -0,0 +1,5 @@
+import ImportDialog from './src/import-dialog.vue';
+
+export const MImportDialog = ImportDialog;
+
+export * from './src/import-dialog';

package/packages/components/src/import-dialog/src/import-dialog.ts

@@ -0,0 +1,11 @@
+export interface ImportDialogProps {
+  modelValue: boolean;
+  importTemplate: number | string;
+  // 接受类型
+  accept: string;
+  multiple: boolean;
+  limit?: number | undefined;
+  title?: string;
+  importUrl?: string;
+  header?: string;
+}

package/packages/components/src/import-dialog/src/import-dialog.vue

@@ -0,0 +1,207 @@
+<template>
+  <m-dialog
+    class="m-import-dialog"
+    :title="title"
+    v-model="visible"
+    width="568px"
+    append-to-body
+    @submit="submitFileForm"
+    @cancel="handleClose"
+    @close="handleClose"
+  >
+    <div class="file-template">
+      <slot name="template">
+        <span class="text">{{ t('导入说明：仅允许导入xls、xlsx格式文件。') }}</span>
+        <m-button
+          v-if="importTemplate"
+          icon="Download"
+          @click="handleDownload"
+          >{{ t('下载模版') }}</m-button
+        >
+      </slot>
+    </div>
+    <div
+      style="width: 100%"
+      :class="!fileList?.length ? 'content' : 'haveUplodLimit content'"
+    >
+      <el-upload
+        v-bind="filteredAttrs"
+        :file-list="fileList"
+        ref="uploadRef"
+        :accept="accept"
+        :action="importUrl"
+        :headers="upload.headers"
+        :disabled="haveUplodLimit"
+        :on-change="fileChanged"
+        :on-error="handleError"
+        :on-success="handleSuccess"
+        :auto-upload="false"
+        :multiple="multiple"
+        drag
+      >
+        <m-icon
+          icon="UploadFilled"
+          size="80"
+          color="#D6D8DA"
+        ></m-icon>
+        <div class="el-upload__text">
+          <span v-if="haveUplodLimit">
+            <em>{{ t('文件已上传') }}</em>
+          </span>
+          <span v-else>
+            {{ t('将文件拖到此处，或') }}<em>{{ t('点击上传') }}</em>
+          </span>
+        </div>
+        <template #file="{ file }">
+          <div class="left">
+            <m-icon
+              icon="File"
+              size="16"
+            ></m-icon>
+            <div class="file-name">{{ file.name }}</div>
+          </div>
+          <div class="right">
+            <m-icon
+              class="close-icon"
+              icon="Close"
+              size="16"
+              @click="() => handleRemove(file)"
+            ></m-icon>
+            <m-icon
+              class="check-icon"
+              icon="CircleCheck"
+              size="16"
+            ></m-icon>
+          </div>
+        </template>
+      </el-upload>
+    </div>
+  </m-dialog>
+</template>
+
+<script setup lang="ts" name="importDialog">
+import { getCurrentInstance, ref, computed, useAttrs } from 'vue';
+import { ImportDialogProps } from './import-dialog';
+import { useLocale } from 'element-plus';
+const attrs = useAttrs();
+const { proxy } = getCurrentInstance() as any;
+const { t: oriT } = useLocale();
+const t = (key: string) => oriT(`m.importDialog.${key}`);
+const filteredAttrs = computed(() => {
+  const { ...rest } = attrs;
+  return rest;
+});
+const props = withDefaults(defineProps<ImportDialogProps>(), {
+  modelValue: false,
+  importTemplate: '',
+  accept: '.xls,.xlsx',
+  multiple: false,
+  limit: 10,
+  title: '导入',
+});
+
+const upload = ref({
+  // 设置上传的请求头部
+  headers: { Authorization: `Bearer ${getCookie('Admin-Token')}` },
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'update:file-list',
+  'confirm',
+  'download',
+  'cancel',
+  'error',
+  'success',
+]);
+
+const fileList = ref<any>([]);
+
+const visible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+const haveUplodLimit = computed(() => {
+  if (props.multiple && fileList.value?.length > props.limit) {
+    return true;
+  } else if (!props.multiple && fileList.value?.length > 0) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
+// 文件变化
+const fileChanged = (file: any, files: any) => {
+  let newFiles = [];
+  if (!props.multiple) {
+    fileList.value = [file];
+    newFiles = [file];
+  } else {
+    newFiles = files;
+  }
+  // 不管状态，都可以重复提交接口，改为ready状态可以提交
+  fileList.value = newFiles?.map((item: any) => {
+    return {
+      ...item,
+      status: 'ready',
+    };
+  });
+  emit('update:file-list', fileList.value);
+};
+
+/** 提交上传文件 */
+function submitFileForm() {
+  if (props.importUrl) {
+    proxy.$refs.uploadRef.submit();
+  }
+  emit('confirm', fileList.value);
+}
+
+/** 关闭页面 */
+function handleClose() {
+  fileList.value = [];
+  emit('update:modelValue', false);
+  emit('cancel');
+  emit('update:file-list', fileList.value);
+}
+
+function handleRemove(file: any) {
+  // TODO 在删除前的事件
+  if (props.multiple) {
+    const index = fileList.value.findIndex((item: any) => item.uid === file.uid);
+    fileList.value.splice(index, 1);
+  } else {
+    proxy.$refs?.uploadRef.clearFiles();
+    fileList.value = [];
+  }
+}
+
+/** 下载模版 */
+function handleDownload() {
+  emit('download', props.importTemplate);
+}
+
+function handleError(err: any, file: any) {
+  handleRemove(file);
+  emit('error', err);
+}
+
+function handleSuccess(res: any) {
+  emit('success', res);
+}
+
+// 获取cookie
+function getCookie(name: string) {
+  const cookies = document.cookie.split('; ');
+  for (const cookie of cookies) {
+    const [key, value] = cookie.split('=');
+    if (key === name) return decodeURIComponent(value);
+  }
+  return null;
+}
+</script>

package/packages/components/src/independent-nav/index.ts

@@ -0,0 +1,5 @@
+import IndependentNav from './src/independent-nav.vue';
+
+export const MIndependentNav = IndependentNav;
+
+export * from './src/independent-nav';

package/packages/components/src/independent-nav/src/independent-nav.ts

@@ -0,0 +1,7 @@
+export const independentNavProps = {
+  /**
+   * @description
+   */
+};
+
+export type IndependentNavProps = typeof independentNavProps;