perf(component): optimize tree and upload components

Author: anncwb

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/enum.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/props.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/Tree/src/types.ts src/components/Tree/src/typing.tssrc/components/Tree/src/types.ts renamed to src/components/Tree/src/typing.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/Tree/src/useTree.ts

@@ -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,
       };
     },