项目初始化

web-vue/packages/core/components/Upload/src/FileList.vue

@@ -21,76 +21,82 @@
         const { columns, actionColumn, dataSource } = props;
         const columnList = [...columns, actionColumn];
         return (
-          <table class="file-table" ref={tableRef}>
+          <div class="file-table-wrap" ref={tableRef}>
-            <colgroup>
+            <table class="file-table">
-              {columnList.map((item) => {
+              <colgroup>
-                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;
+                  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 (
+                      dataIndex && (
+                        <th class={['file-table-th', align]} key={dataIndex}>
+                          {title}
+                        </th>
+                      )
+                    );
+                  })}
+                </tr>
+              </thead>
+              <tbody>
+                {dataSource.map((record = {}, index) => {
                   return (
-                    dataIndex && (
+                    <tr class="file-table-tr" key={`${index + record.name || ''}`}>
-                      <th class={['file-table-th', align]} key={dataIndex}>
+                      {columnList.map((item) => {
-                        {title}
+                        const { dataIndex = '', customRender, align = 'center' } = item;
-                      </th>
+                        const render = customRender && isFunction(customRender);
-                    )
+                        return (
+                          dataIndex && (
+                            <td class={['file-table-td', align]} key={dataIndex}>
+                              {render
+                                ? customRender?.({ text: get(record, dataIndex), record, index })
+                                : get(record, dataIndex)}
+                            </td>
+                          )
+                        );
+                      })}
+                    </tr>
                   );
                 })}
-              </tr>
+                {dataSource.length == 0 && (
-            </thead>
+                  <tr class="file-table-tr">
-            <tbody>
+                    <td class="file-table-td center" colspan={columnList.length}>
-              {dataSource.map((record = {}, index) => {
+                      {props.emptyText}
-                return (
+                    </td>
-                  <tr class="file-table-tr" key={`${index + record.name || ''}`}>
-                    {columnList.map((item) => {
-                      const { dataIndex = '', customRender, align = 'center' } = item;
-                      const render = customRender && isFunction(customRender);
-                      return (
-                        dataIndex && (
-                          <td class={['file-table-td', align]} key={dataIndex}>
-                            {render
-                              ? customRender?.({ text: get(record, dataIndex), record, index })
-                              : get(record, dataIndex)}
-                          </td>
-                        )
-                      );
-                    })}
                   </tr>
-                );
+                )}
-              })}
+              </tbody>
-              {dataSource.length == 0 && (
+            </table>
-                <tr class="file-table-tr">
+          </div>
-                  <td class="file-table-td center" colspan={columnList.length}>
-                    {props.emptyText}
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
         );
       };
     },
   });
 </script>
 <style lang="less">
+  .file-table-wrap {
+    max-height: 360px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border: 1px solid @border-color-base;
+    border-radius: 8px;
+  }
+
   .file-table {
     width: 100%;
-    border-top: 1px solid @border-color-base;
+    border-collapse: collapse;
-    border-right: 1px solid @border-color-base;
-    border-collapse: separate;
-    border-spacing: 0;
 
     &-th,
     &-td {
-      border-left: 1px solid @border-color-base;
       border-bottom: 1px solid @border-color-base;
       padding: 12px 8px;
       overflow-wrap: break-word;
@@ -101,6 +107,21 @@
 
     thead {
       background-color: @background-color-light;
+
+      .file-table-th {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        background-color: @background-color-light;
+      }
+    }
+
+    tbody {
+      .file-table-tr:last-child {
+        .file-table-td {
+          border-bottom: 0;
+        }
+      }
     }
 
     .center {

web-vue/packages/core/components/Upload/src/UploadModal.vue

@@ -1,6 +1,6 @@
 <template>
   <BasicModal
-    width="80%"
+    width="60%"
     :title="t('component.upload.upload')"
     :okText="t('component.upload.save')"
     v-bind="$attrs"

web-vue/packages/core/components/Upload/src/UploadPreviewModal.vue

@@ -1,7 +1,7 @@
 <template>
   <BasicModal
     v-if="!props.showPreviewList"
-    width="80%"
+    width="60%"
     :title="t('component.upload.view')"
     :cancelText="t('component.modal.okText')"
     wrapClassName="upload-preview-modal"