n20-common-lib 3.1.13 → 3.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.1.13",
+  "version": "3.1.15",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -15,7 +15,6 @@
     "build:gzip": "vue-cli-service build --gzip",
     "build:js": "vue-cli-service build --formats umd-min --target lib src/index.js --name index --dest lib  --analy",
     "build:report": "vue-cli-service build --analy",
-    "dev": "vue-cli-service serve --doc",
     "getI18n": "node ./node_modules/nstc-get-i18n --path ./server-config.jsonc --name lang",
     "info": "node versionInfo.js",
     "serve:theme": "vue-cli-service serve --testTheme",

package/src/assets/css/_coreLib.scss

@@ -53,6 +53,9 @@
 @import './dynamic-table.scss';
 @import './v3/table.scss';
 @import './v3/secondary-tab.scss';
+@import './v3/header.scss';
+@import './v3/footer.scss';
+@import './v3/radioCard.scss';
 
 //临时引入
 @import '../../components/ChildRange/style.scss';

package/src/assets/css/element-variables.scss

@@ -8,7 +8,9 @@
 $--all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
 $--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
 $--fade-linear-transition: opacity 200ms linear !default;
-$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+$--md-fade-transition:
+  transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
 $--border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
 $--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
 
@@ -84,6 +86,7 @@ $--border-color-extra-light: #f2f6fc !default;
 // Background
 /// color|1|Background Color|4
 $--background-color-base: #f2f3f5 !default;
+$--background-selected-color-base: #e8f7ff !default;
 
 /* Link
 -------------------------- */

package/src/assets/css/v3/footer.scss

@@ -0,0 +1,22 @@
+.n20-page-footer-v3 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: $--color-white;
+  justify-content: space-between;
+
+  .n20-page-footer-left {
+    flex: 1;
+  }
+
+  .n20-page-footer-center {
+  }
+
+  .n20-page-footer-right {
+    flex: 1;
+    width: 0;
+    display: flex;
+    justify-content: flex-end;
+  }
+}

package/src/assets/css/v3/header.scss

@@ -0,0 +1,46 @@
+.n20-page-header-v3 {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background: $--color-white;
+  justify-content: space-between;
+
+  .n20-page-header-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    .n20-page-header-v3__back {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      cursor: pointer;
+      color: $--color-text-regular;
+      font-size: 14px;
+      line-height: 22px;
+      flex-shrink: 0;
+      .n20-page-header-v3__back-text {
+        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+        font-weight: 400;
+      }
+
+      &:hover {
+        color: #165aaf;
+      }
+    }
+
+    .n20-page-header-v3__divider {
+      width: 1px;
+      height: 12px;
+      background: $--border-color-base;
+      flex-shrink: 0;
+    }
+    .n20-page-header-v3__title {
+      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      color: #1d2129;
+      flex-shrink: 0;
+    }
+  }
+}

package/src/assets/css/v3/radioCard.scss

@@ -0,0 +1,48 @@
+.n20-page-radio-card {
+  display: grid;
+  gap: 16px;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  gap: 16px;
+  align-self: stretch;
+  flex-wrap: wrap;
+
+  .n20-page-radio-card-item {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 8px 15px;
+    height: 38px;
+    border-radius: 4px;
+    border: 1px solid $--border-color-base;
+    cursor: pointer;
+    min-width: 170px;
+
+    &:hover {
+      background-color: $--descriptions-item-bordered-label-background;
+    }
+
+    &.n20-page-radio-card-item-checked {
+      border: 1px solid $--color-primary;
+      background-color: $--background-selected-color-base;
+    }
+
+    &.n20-page-radio-card-item-disabled {
+      cursor: not-allowed;
+    }
+
+    .n20-page-radio-card-item-radio {
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      gap: 2px;
+
+      .el-radio__input,
+      .el-radio__inner {
+        height: 14px;
+        width: 14px;
+      }
+    }
+  }
+}

package/src/assets/css/v3/table.scss

@@ -66,11 +66,10 @@
   /* 骨架屏样式 - 仅覆盖内容区域，表头正常显示 */
   .table-pro-skeleton {
     position: absolute;
-    top: 40px;
+    // top 和 height 由 JS 动态计算后通过内联样式设置
     left: 0;
     right: 0;
     bottom: 0;
-    height: calc(100% - 40px);
     background: #fff;
     z-index: 100;
     overflow: hidden;
@@ -112,17 +111,6 @@
     }
   }
 
-  /* 不同尺寸的表头高度适配 */
-  &:has(.vxe-table--render-default.size--mini) .table-pro-skeleton {
-    top: 36px;
-    height: calc(100% - 36px);
-  }
-
-  &:has(.vxe-table--render-default.size--medium) .table-pro-skeleton {
-    top: 44px;
-    height: calc(100% - 44px);
-  }
-
   /* Element UI 表格排序图标 */
   .el-table {
     .caret-wrapper {
@@ -445,6 +433,13 @@
     max-height: 100%;
   }
 
+  /* 表格列 resizable 线样式 */
+  .vxe-table--render-default.border--default .vxe-cell--col-resizable:before {
+    width: 1px;
+    height: 100%;
+    background-color: var(--vxe-ui-table-resizable-line-color);
+  }
+
   /* 表格设置尺寸按钮 */
   .el-table div.hidden-columns {
     visibility: initial;

package/src/components/v3/Footer/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="n20-page-footer-v3" :style="showTopDivider ? 'border-top: 1px solid #E5E6EB;' : undefined">
+    <div :class="`n20-page-footer-left ${leftExtraClass}`">
+      <slot name="leftExtra"></slot>
+    </div>
+    <div :class="`n20-page-footer-center ${centerClass}`">
+      <slot></slot>
+    </div>
+    <div :class="`n20-page-footer-right ${rightExtraClass}`">
+      <slot name="rightExtra"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Footer',
+  props: {
+    leftExtraClass: {
+      type: String,
+      default: ''
+    },
+    centerClass: {
+      type: String,
+      default: ''
+    },
+    rightExtraClass: {
+      type: String,
+      default: ''
+    },
+    showTopDivider: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>

package/src/components/v3/Header/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="n20-page-header-v3" :style="showBottomDivider ? 'border-bottom: 1px solid #E5E6EB;' : undefined">
+    <div class="n20-page-header-left">
+      <div v-if="showBack" class="n20-page-header-v3__back" @click="handleBack">
+        <i :class="icon"></i>
+        <span class="n20-page-header-v3__back-text">{{ backText }}</span>
+      </div>
+      <div v-if="showBack" class="n20-page-header-v3__divider"></div>
+      <div class="n20-page-header-v3__title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+    </div>
+    <div :class="`n20-page-header-right ${extraClass}`">
+      <slot name="extra"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Header',
+  props: {
+    extraClass: {
+      type: String,
+      default: ''
+    },
+    showBack: {
+      type: Boolean,
+      default: true
+    },
+    backText: {
+      type: String,
+      default: '返回'
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: 'n20-icon-yuefenqiehuan-zuoce'
+    },
+    showBottomDivider: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    handleBack() {
+      this.$emit('onBack')
+    }
+  }
+}
+</script>

package/src/components/v3/RadioCard/components/Card.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    :class="`n20-page-radio-card-item${checked ? ' n20-page-radio-card-item-checked' : ''}${disabled ? ' n20-page-radio-card-item-disabled' : ''}`"
+    @click="handleClick"
+  >
+    <el-radio
+      :key="value"
+      :value="checkValue"
+      :disabled="disabled"
+      class="n20-page-radio-card-item-radio"
+      :label="value"
+      >{{ label }}</el-radio
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RadioCardItem',
+  props: {
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    checkValue: {
+      type: [String, Number, Boolean, null, undefined],
+      default: null
+    },
+    value: {
+      type: [String, Number, Boolean],
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('check', this.value)
+    }
+  }
+}
+</script>

package/src/components/v3/RadioCard/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="n20-page-radio-card">
+    <Card
+      v-for="option in options"
+      :key="option.value"
+      :checked="value === option.value"
+      :check-value="value"
+      :value="option.value"
+      :label="option.label"
+      :disabled="option.disabled"
+      @check="handleCheck"
+    />
+  </div>
+</template>
+
+<script>
+import Card from './components/Card.vue'
+
+export default {
+  name: 'RadioCard',
+  components: { Card },
+  model: {
+    prop: 'value',
+    event: 'onChange'
+  },
+  props: {
+    value: {
+      type: [String, Number, Boolean, null, undefined],
+      default: null
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    handleCheck(value) {
+      this.$emit('onChange', value)
+    }
+  }
+}
+</script>

package/src/components/v3/TablePro/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="v3-table-pro-wrapper" style="height: 100%; position: relative; overflow: hidden">
     <!-- 骨架屏 - 仅覆盖内容区域，不覆盖表头 -->
-    <div v-if="loading" class="table-pro-skeleton">
+    <div v-if="loading" class="table-pro-skeleton" :style="skeletonStyle">
       <div v-for="n in skeletonRows" :key="'skeleton-' + n" class="skeleton-row">
         <div class="skeleton-cell skeleton-checkbox"></div>
         <div v-for="col in skeletonCols" :key="'col-' + col" class="skeleton-cell"></div>
@@ -642,7 +642,8 @@ export default {
       isExpand: false,
       isExport: false, // 是否导出
       dialogVisible: false, // 显示列设置对话框
-      checkColumns: this.filterDefaultHidden(this.columns) // 显示列设置对话框中已选择的列（默认过滤 defaultHidden 列）
+      checkColumns: this.filterDefaultHidden(this.columns), // 显示列设置对话框中已选择的列（默认过滤 defaultHidden 列）
+      headerHeight: 40 // 表头实际高度，骨架屏定位用
     }
   },
   computed: {
@@ -698,6 +699,13 @@ export default {
       const hasExpand = this.$attrs.treeConfig || this.$attrs['tree-config']
       const activeCount = [this.showColumn, this.showSetsize, hasExpand].filter(Boolean).length
       return activeCount === 3 ? 112 : 76
+    },
+    // 骨架屏定位样式，根据表头实际高度动态计算
+    skeletonStyle() {
+      return {
+        top: `${this.headerHeight}px`,
+        height: `calc(100% - ${this.headerHeight}px)`
+      }
     }
   },
   watch: {
@@ -717,6 +725,11 @@ export default {
         this.$refs.vxeTable.clearCheckboxRow()
         this.$emit('selection-change-method', [])
       }
+    },
+    loading(val) {
+      if (val) {
+        this.$nextTick(() => this.updateHeaderHeight())
+      }
     }
   },
   activated() {
@@ -739,6 +752,15 @@ export default {
       this.isExport = false
       this.dialogVisible = !this.dialogVisible
     },
+    // 更新表头高度，用于骨架屏定位
+    updateHeaderHeight() {
+      const tableEl = this.$refs.vxeTable?.$el
+      if (!tableEl) return
+      const headerEl = tableEl.querySelector('.vxe-table--header-wrapper')
+      if (headerEl) {
+        this.headerHeight = headerEl.offsetHeight
+      }
+    },
     openExportColumn() {
       this.dialogVisible = true
       this.isExport = true

package/src/components/v3/UploadList/assets/37.svg

@@ -0,0 +1,29 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4402_1952)">
+<path d="M6.29995 1.80078H25.6811L33.3 9.48401V30.6008C33.3 32.589 31.6882 34.2008 29.7 34.2008H6.29995C4.31173 34.2008 2.69995 32.589 2.69995 30.6008V5.40078C2.69995 3.41256 4.31173 1.80078 6.29995 1.80078Z" fill="#FF662C"/>
+<mask id="mask0_4402_1952" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="2" y="1" width="32" height="34">
+<path d="M6.29995 1.80078H25.6811L33.3 9.48401V30.6008C33.3 32.589 31.6882 34.2008 29.7 34.2008H6.29995C4.31173 34.2008 2.69995 32.589 2.69995 30.6008V5.40078C2.69995 3.41256 4.31173 1.80078 6.29995 1.80078Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_4402_1952)">
+<g filter="url(#filter0_d_4402_1952)">
+<path d="M25.6537 5.88124L25.6537 1.80012L33.3 9.48124L29.2537 9.48124C27.2654 9.48124 25.6537 7.86946 25.6537 5.88124Z" fill="black"/>
+</g>
+<path d="M25.6537 5.88124L25.6537 1.80012L33.3 9.48124L29.2537 9.48124C27.2654 9.48124 25.6537 7.86946 25.6537 5.88124Z" fill="#FF7F4E"/>
+</g>
+<path d="M16.8046 11.418V13.7374L16.801 17.2748L16.8046 17.2748V19.5943L16.801 23.6581H13.8562V11.4181L16.8046 11.418ZM18.1501 11.4181C20.8481 11.4181 23.0691 12.3723 23.0691 15.3994C23.0691 18.3113 20.8152 19.5945 18.2323 19.5945L17.6787 19.5943V17.2748L18.0843 17.2748C19.4815 17.2748 20.1732 16.6321 20.2053 15.4842L20.2065 15.3994C20.2065 14.1655 19.4168 13.7377 18.002 13.7377L17.6787 13.7374V11.418L18.1501 11.4181Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_4402_1952" x="19.1736" y="-5.75922" width="20.6065" height="20.6397" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.08"/>
+<feGaussianBlur stdDeviation="3.24"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4402_1952"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4402_1952" result="shape"/>
+</filter>
+<clipPath id="clip0_4402_1952">
+<rect width="36" height="36" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/v3/UploadList/assets/46.svg

@@ -0,0 +1,29 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4402_52012)">
+<path d="M6.30001 1.80078H25.6811L33.3 9.48401V30.6008C33.3 32.589 31.6882 34.2008 29.7 34.2008H6.30001C4.31179 34.2008 2.70001 32.589 2.70001 30.6008V5.40078C2.70001 3.41256 4.31179 1.80078 6.30001 1.80078Z" fill="var(--primary-6, #007AFF)"/>
+<mask id="mask0_4402_52012" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="2" y="1" width="32" height="34">
+<path d="M6.30001 1.80078H25.6811L33.3 9.48401V30.6008C33.3 32.589 31.6882 34.2008 29.7 34.2008H6.30001C4.31179 34.2008 2.70001 32.589 2.70001 30.6008V5.40078C2.70001 3.41256 4.31179 1.80078 6.30001 1.80078Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_4402_52012)">
+<g filter="url(#filter0_d_4402_52012)">
+<path d="M25.6537 5.88124L25.6537 1.80012L33.3 9.48124L29.2537 9.48124C27.2654 9.48124 25.6537 7.86946 25.6537 5.88124Z" fill="black"/>
+</g>
+<path d="M25.6537 5.88124L25.6537 1.80012L33.3 9.48124L29.2537 9.48124C27.2654 9.48124 25.6537 7.86946 25.6537 5.88124Z" fill="var(--primary-5, #2E9AFF)"/>
+</g>
+<path d="M13.5914 22.2728H16.6649L17.5689 17.7668C17.7219 16.9741 17.847 16.1397 17.9722 15.3609H18.0417C18.1391 16.1397 18.2782 16.9741 18.445 17.7668L19.3768 22.2728H22.506L24.3 11.9258H21.9358L21.2682 16.6404C21.1431 17.7112 21.004 18.8099 20.8788 19.9225H20.8093C20.6007 18.8099 20.4199 17.6973 20.2113 16.6404L19.1265 11.9258H17.0404L15.9835 16.6404C15.7748 17.7112 15.5662 18.8238 15.3715 19.9225H15.3159L14.8987 16.6404L14.245 11.9258H11.7L13.5914 22.2728Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_4402_52012" x="19.1736" y="-5.75922" width="20.6064" height="20.6397" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.08"/>
+<feGaussianBlur stdDeviation="3.24"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4402_52012"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4402_52012" result="shape"/>
+</filter>
+<clipPath id="clip0_4402_52012">
+<rect width="36" height="36" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/v3/UploadList/assets/60.svg

@@ -0,0 +1,29 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4402_28916)">
+<path d="M6.29995 1.80078H25.6811L33.3 9.48401V30.6008C33.3 32.589 31.6882 34.2008 29.7 34.2008H6.29995C4.31173 34.2008 2.69995 32.589 2.69995 30.6008V5.40078C2.69995 3.41256 4.31173 1.80078 6.29995 1.80078Z" fill="#00A98B"/>
+<mask id="mask0_4402_28916" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="2" y="1" width="32" height="34">
+<path d="M6.29995 1.80078H25.6811L33.3 9.48401V30.6008C33.3 32.589 31.6882 34.2008 29.7 34.2008H6.29995C4.31173 34.2008 2.69995 32.589 2.69995 30.6008V5.40078C2.69995 3.41256 4.31173 1.80078 6.29995 1.80078Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_4402_28916)">
+<g filter="url(#filter0_d_4402_28916)">
+<path d="M26.3288 6.10864L26.3288 1.8016L34.2001 9.70864L29.9288 9.70863C27.9406 9.70863 26.3288 8.09686 26.3288 6.10864Z" fill="black"/>
+</g>
+<path d="M26.3288 6.10864L26.3288 1.8016L34.2001 9.70864L29.9288 9.70863C27.9406 9.70863 26.3288 8.09686 26.3288 6.10864Z" fill="#10CEAC"/>
+</g>
+<path d="M24.3 22.6759L22.6767 24.2992L11.7 13.3235L13.3232 11.6992L24.3 22.6759ZM15.8622 18.5084L17.4897 20.1359L13.3275 24.2992L11.7 22.6717L15.8622 18.5084ZM24.3 13.3267L20.1262 17.5004L18.4987 15.8729L22.6725 11.6992L24.3 13.3267Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_4402_28916" x="19.8489" y="-5.75922" width="20.8311" height="20.8663" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.08"/>
+<feGaussianBlur stdDeviation="3.24"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4402_28916"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4402_28916" result="shape"/>
+</filter>
+<clipPath id="clip0_4402_28916">
+<rect width="36" height="36" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/v3/UploadList/assets/Png.svg

@@ -0,0 +1,34 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4435_92034)">
+<path d="M17.5 5H71.3365L92.5 26.3423V85C92.5 90.5229 88.0229 95 82.5 95H17.5C11.9772 95 7.5 90.5229 7.5 85V15C7.5 9.47715 11.9772 5 17.5 5Z" fill="#F1C44B"/>
+<mask id="mask0_4435_92034" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="7" y="5" width="86" height="90">
+<path d="M17.5 5H71.3365L92.5 26.3423V85C92.5 90.5229 88.0229 95 82.5 95H17.5C11.9772 95 7.5 90.5229 7.5 85V15C7.5 9.47715 11.9772 5 17.5 5Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_4435_92034)">
+<g filter="url(#filter0_d_4435_92034)">
+<path d="M71.2602 16.3363L71.2602 4.9999L92.5001 26.3363L81.2602 26.3363C75.7374 26.3363 71.2602 21.8592 71.2602 16.3363Z" fill="black"/>
+</g>
+<path d="M71.2602 16.3363L71.2602 4.9999L92.5001 26.3363L81.2602 26.3363C75.7374 26.3363 71.2602 21.8592 71.2602 16.3363Z" fill="#FFD973"/>
+</g>
+<mask id="mask1_4435_92034" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="7" y="5" width="86" height="90">
+<path d="M17.5 5H71.3365L92.5 26.3423V85C92.5 90.5229 88.0229 95 82.5 95H17.5C11.9772 95 7.5 90.5229 7.5 85V15C7.5 9.47715 11.9772 5 17.5 5Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_4435_92034)">
+<path opacity="0.804618" d="M62.8922 62.9138H32.0524C31.905 62.9138 31.7856 62.7848 31.7856 62.6255V56.204C31.7856 56.1521 31.799 56.1002 31.8237 56.0555L41.0062 39.5153C41.1009 39.3445 41.3236 39.3265 41.441 39.4807L53.9431 55.9193C54.0313 56.0351 54.1869 56.0586 54.3012 55.9734L62.7515 49.6484C62.9282 49.5158 63.1703 49.6528 63.1703 49.8855L63.1603 62.6255C63.1589 62.7855 63.0396 62.9138 62.8922 62.9138ZM65.7856 39.3752C65.7856 43.4777 61.0626 46.4771 56.7574 43.2332C56.7345 43.2154 56.713 43.1947 56.6959 43.1717C53.4537 38.8663 56.453 34.1445 60.5545 34.1445C61.9426 34.1445 63.273 34.6957 64.2545 35.6772C65.2355 36.659 65.7863 37.9903 65.7856 39.3782V39.3752Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_4435_92034" x="53.2603" y="-16" width="57.2397" height="57.3359" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="9"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4435_92034"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4435_92034" result="shape"/>
+</filter>
+<clipPath id="clip0_4435_92034">
+<rect width="100" height="100" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/v3/UploadList/assets/Txt.svg

@@ -0,0 +1,29 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4435_92086)">
+<path d="M17.5 5H71.3365L92.5 26.3423V85C92.5 90.5229 88.0229 95 82.5 95H17.5C11.9772 95 7.5 90.5229 7.5 85V15C7.5 9.47715 11.9772 5 17.5 5Z" fill="#BAE4FF"/>
+<mask id="mask0_4435_92086" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="7" y="5" width="86" height="90">
+<path d="M17.5 5H71.3365L92.5 26.3423V85C92.5 90.5229 88.0229 95 82.5 95H17.5C11.9772 95 7.5 90.5229 7.5 85V15C7.5 9.47715 11.9772 5 17.5 5Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_4435_92086)">
+<g filter="url(#filter0_d_4435_92086)">
+<path d="M71.2602 16.3363L71.2602 4.9999L92.5001 26.3363L81.2602 26.3363C75.7374 26.3363 71.2602 21.8592 71.2602 16.3363Z" fill="black"/>
+</g>
+<path d="M71.2602 16.3363L71.2602 4.9999L92.5001 26.3363L81.2602 26.3363C75.7374 26.3363 71.2602 21.8592 71.2602 16.3363Z" fill="#8BCFFF"/>
+</g>
+<path opacity="0.9" d="M63.6857 32.9023L63.9155 41.239H62.0142C61.7077 39.6371 61.3038 38.4253 60.8023 37.6034C60.3148 36.7677 59.5974 36.1896 58.6503 35.8693C57.7031 35.5489 56.3937 35.3469 54.7222 35.2633L53.6984 35.2216V58.1003C53.6984 58.7828 53.782 59.3191 53.9492 59.7091C54.1163 60.0852 54.4576 60.3777 54.973 60.5866C55.4883 60.7816 56.2753 60.9418 57.334 61.0672V63.073H42.6665V61.0672C43.7251 60.9418 44.5121 60.7816 45.0275 60.5866C45.5429 60.3777 45.8772 60.0852 46.0304 59.7091C46.1976 59.3191 46.2811 58.7828 46.2811 58.1003V35.2216L45.2782 35.2633C43.6067 35.3469 42.2974 35.5489 41.3502 35.8693C40.403 36.1896 39.6787 36.7607 39.1772 37.5826C38.6897 38.4044 38.2927 39.6232 37.9863 41.239H36.085L36.3148 32.9023H63.6857Z" fill="#1D2129"/>
+</g>
+<defs>
+<filter id="filter0_d_4435_92086" x="53.2603" y="-16" width="57.2397" height="57.3359" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="9"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4435_92086"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4435_92086" result="shape"/>
+</filter>
+<clipPath id="clip0_4435_92086">
+<rect width="100" height="100" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/v3/UploadList/assets/Zip.svg

@@ -0,0 +1,21 @@
+<svg width="111" height="116" viewBox="0 0 111 116" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 20.9961H71.3002L92.4517 42.3384V100.996C92.4517 106.519 87.9746 110.996 82.4517 110.996H17.5C11.9772 110.996 7.5 106.519 7.5 100.996V30.9961C7.5 25.4732 11.9772 20.9961 17.5 20.9961Z" fill="#1252C2"/>
+<g filter="url(#filter0_d_4435_92021)">
+<path d="M71.2238 32.3346L71.2238 20.9981L92.4516 42.3346H81.2238C75.7009 42.3346 71.2238 37.8574 71.2238 32.3346Z" fill="black"/>
+</g>
+<path d="M71.2238 32.3346L71.2238 20.9981L92.4516 42.3346H81.2238C75.7009 42.3346 71.2238 37.8574 71.2238 32.3346Z" fill="#629BFE"/>
+<g opacity="0.798549">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.9175 20.9961H36.6263V30.7104H26.9175V20.9961ZM36.6263 30.7104H46.335V40.4247H36.6263V30.7104ZM26.9175 40.4247H36.6263V50.139H26.9175V40.4247ZM36.6263 50.139H46.335V69.5675H36.6263V50.139ZM26.9175 59.8532H36.6263V69.5675H26.9175V59.8532ZM26.9175 69.5675H36.6263V79.2818H26.9175V69.5675ZM36.6263 69.5675H46.335V79.2818H36.6263V69.5675Z" fill="white" fill-opacity="0.801956"/>
+</g>
+<defs>
+<filter id="filter0_d_4435_92021" x="53.2236" y="0" width="57.228" height="57.3359" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="9"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4435_92021"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4435_92021" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/components/v3/UploadList/assets/jytg.svg

@@ -0,0 +1,6 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="design-iconfont">
+  <path d="M8.24182 3.58716L11.2487 8.99438V6.31665H13.3151V12.9797L11.3785 13.4827L7.3219 6.18677L4.3512 11.3323H8.37366V13.3997H2.56018L1.66565 11.8499L6.44397 3.57349L8.24182 3.58716Z" fill="#007AFF"/>
+  <path d="M12.2593 1.66284L12.7877 3.21041L14.3353 3.73888L12.7877 4.26736L12.2593 5.81492L11.7308 4.26736L10.1832 3.73888L11.7308 3.21041L12.2593 1.66284Z" fill="#007AFF"/>
+  <path d="M2.32765 3.57349L2.68419 4.61759L3.72829 4.97413L2.68419 5.33068L2.32765 6.37478L1.9711 5.33068L0.927002 4.97413L1.9711 4.61759L2.32765 3.57349Z" fill="#007AFF"/>
+  <path d="M9.83558 13.011L10.0044 13.5053L10.4987 13.6741L10.0044 13.8429L9.83558 14.3372L9.66679 13.8429L9.17249 13.6741L9.66679 13.5053L9.83558 13.011Z" fill="#007AFF"/>
+</svg>