perf(component): optimize tree and upload components

src/components/Tree/index.ts

@@ -2,4 +2,4 @@ import BasicTree from './src/Tree.vue';
 
 export { BasicTree };
 export type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
-export * from './src/types';
+export * from './src/typing';

src/components/Tree/src/Tree.vue

@@ -1,5 +1,5 @@
 <script lang="tsx">
-  import type { ReplaceFields, Keys, CheckKeys, TreeActionType, TreeItem } from './types';
+  import type { ReplaceFields, Keys, CheckKeys, TreeActionType, TreeItem } from './typing';
 
   import {
     defineComponent,
@@ -30,7 +30,7 @@
   import { basicProps } from './props';
   import { CreateContextOptions } from '/@/components/ContextMenu';
 
-  import { CheckEvent } from './types';
+  import { CheckEvent } from './typing';
 
   interface State {
     expandedKeys: Keys;

src/components/Tree/src/TreeHeader.vue

@@ -43,7 +43,14 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useDebounceFn } from '@vueuse/core';
 
-  import { ToolbarEnum } from './enum';
+  enum ToolbarEnum {
+    SELECT_ALL,
+    UN_SELECT_ALL,
+    EXPAND_ALL,
+    UN_EXPAND_ALL,
+    CHECK_STRICTLY,
+    CHECK_UN_STRICTLY,
+  }
 
   interface MenuInfo {
     key: ToolbarEnum;

src/components/Tree/src/props.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { ReplaceFields, ActionItem, Keys, CheckKeys, ContextMenuOptions } from './types';
+import type { ReplaceFields, ActionItem, Keys, CheckKeys, ContextMenuOptions } from './typing';
 import type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
 import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
 import { propTypes } from '/@/utils/propTypes';

src/components/Tree/src/useTree.ts

@@ -1,4 +1,4 @@
-import type { InsertNodeParams, Keys, ReplaceFields } from './types';
+import type { InsertNodeParams, Keys, ReplaceFields } from './typing';
 import type { Ref, ComputedRef } from 'vue';
 import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
 

src/components/Upload/index.ts

@@ -1 +1,4 @@
-export { default as BasicUpload } from './src/BasicUpload.vue';
+import { withInstall } from '/@/utils';
+import basicUpload from './src/BasicUpload.vue';
+
+export const BasicUpload = withInstall(basicUpload);

src/components/Upload/src/BasicUpload.vue

@@ -7,43 +7,41 @@
       <Tooltip placement="bottom" v-if="showPreview">
         <template #title>
           {{ t('component.upload.uploaded') }}
-          <template v-if="fileListRef.length">
-            {{ fileListRef.length }}
+          <template v-if="fileList.length">
+            {{ fileList.length }}
           </template>
         </template>
         <a-button @click="openPreviewModal">
           <Icon icon="bi:eye" />
-          <template v-if="fileListRef.length && showPreviewNumber">
-            {{ fileListRef.length }}
+          <template v-if="fileList.length && showPreviewNumber">
+            {{ fileList.length }}
           </template>
         </a-button>
       </Tooltip>
     </a-button-group>
 
     <UploadModal
       v-bind="bindValue"
-      :previewFileList="fileListRef"
+      :previewFileList="fileList"
       @register="registerUploadModal"
       @change="handleChange"
+      @delete="handleDelete"
     />
 
     <UploadPreviewModal
-      :value="fileListRef"
+      :value="fileList"
       @register="registerPreviewModal"
       @list-change="handlePreviewChange"
     />
   </div>
 </template>
 <script lang="ts">
   import { defineComponent, ref, watch, unref, computed } from 'vue';
-
   import UploadModal from './UploadModal.vue';
   import UploadPreviewModal from './UploadPreviewModal.vue';
-  import Icon from '/@/components/Icon';
+  import { Icon } from '/@/components/Icon';
   import { Tooltip } from 'ant-design-vue';
-
   import { useModal } from '/@/components/Modal';
-
   import { uploadContainerProps } from './props';
   import { omit } from 'lodash-es';
   import { useI18n } from '/@/hooks/web/useI18n';
@@ -52,7 +50,7 @@
     name: 'BasicUpload',
     components: { UploadModal, UploadPreviewModal, Icon, Tooltip },
     props: uploadContainerProps,
-    emits: ['change'],
+    emits: ['change', 'delete'],
 
     setup(props, { emit, attrs }) {
       const { t } = useI18n();
@@ -62,12 +60,12 @@
       //   预览modal
       const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
 
-      const fileListRef = ref<string[]>([]);
+      const fileList = ref<string[]>([]);
 
       const showPreview = computed(() => {
         const { emptyHidePreview } = props;
         if (!emptyHidePreview) return true;
-        return emptyHidePreview ? fileListRef.value.length > 0 : true;
+        return emptyHidePreview ? fileList.value.length > 0 : true;
       });
 
       const bindValue = computed(() => {
@@ -78,21 +76,25 @@
       watch(
         () => props.value,
         (value = []) => {
-          fileListRef.value = value;
+          fileList.value = value;
         },
         { immediate: true }
       );
 
       // 上传modal保存操作
       function handleChange(urls: string[]) {
-        fileListRef.value = [...unref(fileListRef), ...(urls || [])];
-        emit('change', fileListRef.value);
+        fileList.value = [...unref(fileList), ...(urls || [])];
+        emit('change', fileList.value);
       }
 
       // 预览modal保存操作
       function handlePreviewChange(urls: string[]) {
-        fileListRef.value = [...(urls || [])];
-        emit('change', fileListRef.value);
+        fileList.value = [...(urls || [])];
+        emit('change', fileList.value);
+      }
+
+      function handleDelete(record: Recordable) {
+        emit('delete', record);
       }
 
       return {
@@ -102,9 +104,10 @@
         handlePreviewChange,
         registerPreviewModal,
         openPreviewModal,
-        fileListRef,
+        fileList,
         showPreview,
         bindValue,
+        handleDelete,
         t,
       };
     },

src/components/Upload/src/FileList.vue

@@ -0,0 +1,104 @@
+<script lang="tsx">
+  import { defineComponent, CSSProperties, watch, nextTick } from 'vue';
+  import { fileListProps } from './props';
+  import { isFunction } from '/@/utils/is';
+  import { useModalContext } from '/@/components/Modal/src/hooks/useModalContext';
+
+  export default defineComponent({
+    name: 'FileList',
+    props: fileListProps,
+    setup(props) {
+      const modalFn = useModalContext();
+      watch(
+        () => props.dataSource,
+        () => {
+          nextTick(() => {
+            modalFn?.redoModalHeight?.();
+          });
+        }
+      );
+      return () => {
+        const { columns, actionColumn, dataSource } = props;
+        const columnList = [...columns, actionColumn];
+        return (
+          <table class="file-table">
+            <colgroup>
+              {columnList.map((item) => {
+                const { width = 0, dataIndex } = item;
+                const style: CSSProperties = {
+                  width: `${width}px`,
+                  minWidth: `${width}px`,
+                };
+                return <col style={width ? style : {}} key={dataIndex} />;
+              })}
+            </colgroup>
+            <thead>
+              <tr class="file-table-tr">
+                {columnList.map((item) => {
+                  const { title = '', align = 'center', dataIndex } = item;
+                  return (
+                    <th class={['file-table-th', align]} key={dataIndex}>
+                      {title}
+                    </th>
+                  );
+                })}
+              </tr>
+            </thead>
+            <tbody>
+              {dataSource.map((record = {}, index) => {
+                return (
+                  <tr class="file-table-tr" key={`${index + record.name || ''}`}>
+                    {columnList.map((item) => {
+                      const { dataIndex = '', customRender, align = 'center' } = item;
+                      const render = customRender && isFunction(customRender);
+                      return (
+                        <td class={['file-table-td', align]} key={dataIndex}>
+                          {render
+                            ? customRender?.({ text: record[dataIndex], record })
+                            : record[dataIndex]}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        );
+      };
+    },
+  });
+</script>
+<style lang="less">
+  .file-table {
+    width: 100%;
+    border-collapse: collapse;
+
+    .center {
+      text-align: center;
+    }
+
+    .left {
+      text-align: left;
+    }
+
+    .right {
+      text-align: right;
+    }
+
+    &-th,
+    &-td {
+      padding: 12px 8px;
+    }
+
+    thead {
+      background-color: @background-color-light;
+    }
+
+    table,
+    td,
+    th {
+      border: 1px solid @border-color-base;
+    }
+  }
+</style>