y-admin-pro 0.0.1

package/packages/ele-file-list/components/file-table-item.vue

@@ -0,0 +1,183 @@
+<!-- 表格布局条目 -->
+<template>
+  <div
+    :class="[
+      'ele-file-list-item',
+      { 'is-checked': selected },
+      { 'is-active': ctxMenuDropdownVisible }
+    ]"
+    @click.stop="handleClick"
+  >
+    <div class="ele-file-list-item-body" @contextmenu="handleContextmenu">
+      <!-- 复选框列 -->
+      <div v-if="selectable" class="ele-file-list-item-checkbox">
+        <i
+          :class="[
+            'ele-file-list-checkbox',
+            { 'is-radio': selectionType === 'radio' },
+            { 'is-checked': selected }
+          ]"
+          @click.stop="handleCheckChange"
+        ></i>
+      </div>
+      <!-- 标题列 -->
+      <div class="ele-file-list-item-name">
+        <div class="ele-file-list-item-icon">
+          <slot name="icon" :icon="icon" :item="item">
+            <img
+              :src="icon"
+              :class="{ 'ele-file-list-item-image': !!item.thumbnail }"
+            />
+          </slot>
+          <slot name="title" :item="item">
+            <div :title="item.name" class="ele-file-list-item-title">
+              {{ item.name }}
+            </div>
+          </slot>
+        </div>
+        <div v-if="$slots.tool" class="ele-file-list-item-tools">
+          <slot name="tool" :item="item"></slot>
+        </div>
+      </div>
+      <!-- 自定义列 -->
+      <div
+        v-for="col in columns"
+        :key="col.prop"
+        :style="col.style"
+        class="ele-file-list-item-cell"
+      >
+        <template
+          v-if="
+            col.slot &&
+            !['icon', 'title', 'tool', 'contextMenu'].includes(col.slot) &&
+            $slots[col.slot]
+          "
+        >
+          <slot :name="col.slot" :item="item" :col="col"></slot>
+        </template>
+        <template v-else-if="item && col && col.prop">
+          {{ item[col.prop] }}
+        </template>
+      </div>
+    </div>
+    <!-- 右键菜单 -->
+    <div
+      ref="dropdownTriggerRef"
+      class="ele-file-list-item-dropdown"
+      @click.stop=""
+    ></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import { ref, computed } from 'vue';
+  import type {
+    IconItem,
+    FileItem,
+    ColumnItem,
+    SelectionType,
+    ContextOpenOption
+  } from '../types';
+
+  defineOptions({ name: 'FileTableItem' });
+
+  const props = defineProps({
+    /** 数据 */
+    item: {
+      type: Object as PropType<FileItem>,
+      required: true
+    },
+    /** 选择框类型 */
+    selectionType: String as PropType<SelectionType>,
+    /** 多选选中数据 */
+    selections: Array as PropType<FileItem[]>,
+    /** 单选选中数据 */
+    current: Object as PropType<FileItem>,
+    /** 后缀对应的图标 */
+    icons: Array as PropType<IconItem[]>,
+    /** 自定义列配置 */
+    columns: Array as PropType<ColumnItem[]>,
+    /** 右键下拉菜单是否显示 */
+    ctxMenuDropdownVisible: Boolean
+  });
+
+  const emit = defineEmits({
+    click: (_item: FileItem) => true,
+    checkChange: (_item: FileItem) => true,
+    contextOpen: (_option: ContextOpenOption) => true
+  });
+
+  /** 右键菜单触发节点 */
+  const dropdownTriggerRef = ref<HTMLElement | null>(null);
+
+  /** 是否可以选中 */
+  const selectable = computed<boolean>(() => {
+    return (
+      props.selectionType === 'checkbox' || props.selectionType === 'radio'
+    );
+  });
+
+  /** 是否选中 */
+  const selected = computed<boolean>(() => {
+    if (!selectable.value || !props.item) {
+      return false;
+    }
+    if (props.selectionType === 'checkbox') {
+      return !!(
+        props.selections &&
+        props.selections.some((t) => t.key === props.item.key)
+      );
+    }
+    return !!(props.current && props.current.key === props.item.key);
+  });
+
+  /** 对应图标 */
+  const icon = computed<string | undefined>(() => {
+    // 有缩略图返回文件缩略图
+    if (props.item.thumbnail) {
+      return props.item.thumbnail;
+    }
+    if (!props.icons) {
+      return;
+    }
+    // 文件夹
+    if (props.item.isDirectory) {
+      return props.icons.find((d) => d.type === 'dir')?.icon;
+    }
+    // 匹配后缀对应的图标
+    if (props.item.name) {
+      const icon = props.icons.find((d) => {
+        if (!d.suffixes) {
+          return false;
+        }
+        return !!d.suffixes.find((t) => !!props.item.name.endsWith(t));
+      })?.icon;
+      if (icon) {
+        return icon;
+      }
+    }
+    return props.icons.find((d) => d.type === 'file')?.icon;
+  });
+
+  /** 点击事件 */
+  const handleClick = () => {
+    emit('click', props.item);
+  };
+
+  /** 复选框点击事件 */
+  const handleCheckChange = () => {
+    emit('checkChange', props.item);
+  };
+
+  /** 触发右键菜单 */
+  const handleContextmenu = (e: MouseEvent) => {
+    if (dropdownTriggerRef.value != null) {
+      emit('contextOpen', {
+        item: props.item,
+        triggerEl: dropdownTriggerRef.value,
+        e
+      });
+    }
+  };
+</script>

package/packages/ele-file-list/components/file-table.vue

@@ -0,0 +1,209 @@
+<!-- 表格布局 -->
+<template>
+  <ReceiverView class="ele-file-list-table">
+    <!-- 表头 -->
+    <div class="ele-file-list-header">
+      <div class="ele-file-list-item">
+        <div class="ele-file-list-item-body">
+          <!-- 复选框 -->
+          <div
+            v-if="selectionType === 'checkbox' || selectionType === 'radio'"
+            class="ele-file-list-item-checkbox"
+          >
+            <i
+              v-if="selectionType === 'checkbox'"
+              :class="[
+                'ele-file-list-checkbox',
+                { 'is-checked': isCheckAll },
+                { 'is-indeterminate': isIndeterminate }
+              ]"
+              @click.stop="handleCheckAllChange"
+            ></i>
+          </div>
+          <!-- 文件名 -->
+          <div
+            :class="['ele-file-list-item-name', { 'is-sortable': sortable }]"
+            @click="handleSortChange('name')"
+          >
+            <span>{{ nameText }}</span>
+            <FileSort v-if="sortable" :sort="sort" :order="order" name="name" />
+          </div>
+          <!-- 自定义列 -->
+          <div
+            v-for="col in tableCols"
+            :key="col.prop"
+            :style="col.headerStyle || col.style"
+            :class="[
+              'ele-file-list-item-cell',
+              { 'is-sortable': col.sortable }
+            ]"
+            @click="handleSortChange(col.prop, col)"
+          >
+            <span>
+              <template
+                v-if="
+                  col.headerSlot &&
+                  !['icon', 'title', 'tool', 'contextMenu'].includes(
+                    col.headerSlot
+                  ) &&
+                  $slots[col.headerSlot]
+                "
+              >
+                <slot :name="col.headerSlot" :col="col"></slot>
+              </template>
+              <template v-else>{{ col.title }}</template>
+            </span>
+            <FileSort
+              v-if="col.sortable"
+              :sort="sort"
+              :order="order"
+              :name="col.prop"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 主体 -->
+    <div class="ele-file-list-body">
+      <FileTableItem
+        v-for="item in data"
+        :key="item.key"
+        :item="item"
+        :selectionType="selectionType"
+        :selections="selections"
+        :current="current"
+        :icons="icons"
+        :columns="tableCols"
+        :ctxMenuDropdownVisible="
+          ctxMenuDropdownVisible && contextMenuFileItem === item
+        "
+        @click="handleItemClick"
+        @checkChange="handleItemCheckChange"
+        @contextOpen="handleItemContextOpen"
+      >
+        <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+          <slot :name="name" v-bind="slotProps || {}"></slot>
+        </template>
+      </FileTableItem>
+    </div>
+  </ReceiverView>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import { computed } from 'vue';
+  import ReceiverView from '../../ele-config-provider/components/receiver-view';
+  import FileTableItem from './file-table-item.vue';
+  import FileSort from './file-sort.vue';
+  import type {
+    IconItem,
+    FileItem,
+    ColumnItem,
+    SelectionType,
+    ContextOpenOption
+  } from '../types';
+
+  defineOptions({ name: 'FileTable' });
+
+  const props = defineProps({
+    /** 文件数据 */
+    data: Array as PropType<FileItem[]>,
+    /** 后缀对应的图标 */
+    icons: Array as PropType<IconItem[]>,
+    /** 选择框类型 */
+    selectionType: String as PropType<SelectionType>,
+    /** 选中数据 */
+    selections: Array as PropType<FileItem[]>,
+    /** 单选选中数据 */
+    current: Object as PropType<FileItem>,
+    /** 是否是全选 */
+    isCheckAll: Boolean,
+    /** 是否是半选 */
+    isIndeterminate: Boolean,
+    /** 文件名文字 */
+    nameText: String,
+    /** 文件大小文字 */
+    sizeText: String,
+    /** 修改时间文字 */
+    timeText: String,
+    /** 默认的列是否可以排序 */
+    sortable: Boolean,
+    /** 排序字段 */
+    sort: String,
+    /** 排序方式 */
+    order: String,
+    /** 自定义列配置 */
+    columns: Array as PropType<ColumnItem[]>,
+    /** 文件右键菜单是否打开 */
+    ctxMenuDropdownVisible: Boolean,
+    /** 当前打开的右键菜单对应的文件数据 */
+    contextMenuFileItem: Object as PropType<FileItem | null>
+  });
+
+  const emit = defineEmits({
+    checkAllChange: () => true,
+    itemClick: (_item: FileItem) => true,
+    itemCheckChange: (_item: FileItem) => true,
+    itemContextOpen: (_option: ContextOpenOption) => true,
+    sortChange: (_sort: string) => true
+  });
+
+  /** 列配置 */
+  const tableCols = computed<ColumnItem[]>(() => {
+    if (props.columns) {
+      return props.columns;
+    }
+    const cols: ColumnItem[] = [
+      {
+        title: props.sizeText,
+        prop: 'length',
+        style: {
+          width: '120px',
+          flexShrink: 0
+        },
+        sortable: props.sortable
+      },
+      {
+        title: props.timeText,
+        prop: 'updateTime',
+        style: {
+          width: '180px',
+          flexShrink: 0
+        },
+        sortable: props.sortable
+      }
+    ];
+    return cols;
+  });
+
+  /** 全选框点击事件 */
+  const handleCheckAllChange = () => {
+    emit('checkAllChange');
+  };
+
+  /** 文件点击事件 */
+  const handleItemClick = (item: FileItem) => {
+    emit('itemClick', item);
+  };
+
+  /** 文件复选框点击事件 */
+  const handleItemCheckChange = (item: FileItem) => {
+    emit('itemCheckChange', item);
+  };
+
+  /** 排序改变事件 */
+  const handleSortChange = (sort: string, col?: ColumnItem) => {
+    if (!col) {
+      if (props.sortable) {
+        emit('sortChange', sort);
+      }
+    } else if (col.sortable) {
+      emit('sortChange', sort);
+    }
+  };
+
+  /** 文件右键菜单展开事件 */
+  const handleItemContextOpen = (option: ContextOpenOption) => {
+    emit('itemContextOpen', option);
+  };
+</script>

package/packages/ele-file-list/icons.ts

@@ -0,0 +1,141 @@
+import type { IconItem } from './types';
+
+/**
+ * 本地小尺寸图标
+ */
+export const localSmallIcons: IconItem[] = [
+  {
+    icon: '/ele-file-list/ic_file_misc_sm.png',
+    type: 'file'
+  },
+  {
+    icon: '/ele-file-list/ic_file_folder_sm.png',
+    type: 'dir'
+  },
+  {
+    icon: '/ele-file-list/ic_file_code_sm.png',
+    suffixes: [
+      '.java',
+      '.js',
+      '.css',
+      '.vue',
+      '.ts',
+      '.tsx',
+      '.scss',
+      '.less',
+      '.c',
+      '.cpp',
+      '.cs',
+      '.jsp',
+      '.php',
+      '.asp',
+      '.py',
+      '.go',
+      '.kt',
+      '.lua'
+    ]
+  },
+  {
+    icon: '/ele-file-list/ic_file_htm_sm.png',
+    suffixes: ['.html', '.htm']
+  },
+  {
+    icon: '/ele-file-list/ic_file_text_sm.png',
+    suffixes: ['.txt']
+  },
+  {
+    icon: '/ele-file-list/ic_file_pdf_sm.png',
+    suffixes: ['.pdf']
+  },
+  {
+    icon: '/ele-file-list/ic_file_word_sm.png',
+    suffixes: ['.doc', '.docx']
+  },
+  {
+    icon: '/ele-file-list/ic_file_excel_sm.png',
+    suffixes: ['.xls', '.xlsx']
+  },
+  {
+    icon: '/ele-file-list/ic_file_ppt_sm.png',
+    suffixes: ['.ppt', '.pptx']
+  },
+  {
+    icon: '/ele-file-list/ic_file_visio_sm.png',
+    suffixes: ['.vsd']
+  },
+  {
+    icon: '/ele-file-list/ic_file_ps_sm.png',
+    suffixes: ['.psd']
+  },
+  {
+    icon: '/ele-file-list/ic_file_cad_sm.png',
+    suffixes: ['.dwg']
+  },
+  {
+    icon: '/ele-file-list/ic_file_flash_sm.png',
+    suffixes: ['.swf']
+  },
+  {
+    icon: '/ele-file-list/ic_file_music_sm.png',
+    suffixes: ['.mp3', '.wav']
+  },
+  {
+    icon: '/ele-file-list/ic_file_video_sm.png',
+    suffixes: ['.mp4', '.rmvb', '.flv', '.avi', '.3gp']
+  },
+  {
+    icon: '/ele-file-list/ic_file_picture_sm.png',
+    suffixes: ['.png', '.jpg', '.jpeg', '.gif', '.bmp']
+  },
+  {
+    icon: '/ele-file-list/ic_file_fonts_sm.png',
+    suffixes: ['.ttf', '.woff']
+  },
+  {
+    icon: '/ele-file-list/ic_file_bt_sm.png',
+    suffixes: ['.torrent']
+  },
+  {
+    icon: '/ele-file-list/ic_file_android_sm.png',
+    suffixes: ['.apk']
+  },
+  {
+    icon: '/ele-file-list/ic_file_exe_sm.png',
+    suffixes: ['.exe']
+  },
+  {
+    icon: '/ele-file-list/ic_file_ipa_sm.png',
+    suffixes: ['.ipa', '.dmg']
+  },
+  {
+    icon: '/ele-file-list/ic_file_zip_sm.png',
+    suffixes: ['.zip', '.rar', '.7z']
+  }
+];
+
+/**
+ * 本地图标
+ */
+export const localIcons: IconItem[] = localSmallIcons.map((d) => {
+  return { ...d, icon: d.icon.replace('_sm.png', '.png') };
+});
+
+/**
+ * 默认小尺寸图标
+ */
+export const smallIcons: IconItem[] = localSmallIcons.map((d) => {
+  return {
+    ...d,
+    icon: d.icon.replace(
+      '/ele-file-list/',
+      'https://cdn.eleadmin.com/20200609/'
+    )
+  };
+});
+
+/**
+ * 默认图标
+ */
+export const icons: IconItem[] = smallIcons.map((d) => {
+  return { ...d, icon: d.icon.replace('_sm.png', '.png') };
+});