From 7f19776adad40e75b1faee9c7209c4a81da900b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Wed, 20 Nov 2024 15:59:21 +0800
Subject: [PATCH] docs: Fill the cover & cat of overview (#192)

* docs: reorder site

* docs: all cover

* test: update snapshot
---
 .../builtins/ComponentOverview/index.tsx      |   22 +-
 .dumi/theme/themeConfig.ts                    |   32 +-
 .../attachments/FileList/FileListCard.tsx     |    2 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 2065 +++--------------
 .../__snapshots__/demo.test.tsx.snap          | 2065 +++--------------
 components/attachments/index.en-US.md         |    8 +-
 components/attachments/index.zh-CN.md         |   10 +-
 components/bubble/index.en-US.md              |    6 +-
 components/bubble/index.zh-CN.md              |    8 +-
 components/conversations/index.en-US.md       |    6 +-
 components/conversations/index.zh-CN.md       |    6 +-
 components/prompts/index.en-US.md             |    9 +-
 components/prompts/index.zh-CN.md             |    9 +-
 components/sender/index.en-US.md              |    8 +-
 components/sender/index.zh-CN.md              |    8 +-
 components/suggestion/index.en-US.md          |    8 +-
 components/suggestion/index.zh-CN.md          |   10 +-
 components/thought-chain/index.en-US.md       |    8 +-
 components/thought-chain/index.zh-CN.md       |    8 +-
 components/useXAgent/index.en-US.md           |    8 +-
 components/useXAgent/index.zh-CN.md           |    8 +-
 components/useXChat/index.en-US.md            |    8 +-
 components/useXChat/index.zh-CN.md            |    8 +-
 components/welcome/index.en-US.md             |    9 +-
 components/welcome/index.zh-CN.md             |    9 +-
 components/x-provider/index.en-US.md          |    5 +-
 components/x-provider/index.zh-CN.md          |    5 +-
 components/x-request/index.en-US.md           |    6 +-
 components/x-request/index.zh-CN.md           |    4 +-
 components/x-stream/index.en-US.md            |    4 +-
 components/x-stream/index.zh-CN.md            |    4 +-
 31 files changed, 774 insertions(+), 3602 deletions(-)

diff --git a/.dumi/theme/builtins/ComponentOverview/index.tsx b/.dumi/theme/builtins/ComponentOverview/index.tsx
index a3dbb04f..e62a43b5 100644
--- a/.dumi/theme/builtins/ComponentOverview/index.tsx
+++ b/.dumi/theme/builtins/ComponentOverview/index.tsx
@@ -10,7 +10,7 @@ import scrollIntoView from 'scroll-into-view-if-needed';
 import Link from '../../common/Link';
 import SiteContext from '../../slots/SiteContext';
 import type { Component } from './ProComponentsList';
-import proComponentsList from './ProComponentsList';
+// import proComponentsList from './ProComponentsList';
 
 const useStyle = createStyles(({ token, css }) => ({
   componentsOverviewGroupTitle: css`
@@ -131,16 +131,16 @@ const Overview: React.FC = () => {
             coverDark: child.frontmatter?.coverDark,
             link: child.link,
           })),
-        }))
-        .concat([
-          {
-            title: locale === 'zh-CN' ? '重型组件' : 'Others',
-            children:
-              locale === 'zh-CN'
-                ? proComponentsList
-                : proComponentsList.map((component) => ({ ...component, subtitle: '' })),
-          },
-        ]),
+        })),
+    // .concat([
+    //   {
+    //     title: locale === 'zh-CN' ? '重型组件' : 'Others',
+    //     children:
+    //       locale === 'zh-CN'
+    //         ? proComponentsList
+    //         : proComponentsList.map((component) => ({ ...component, subtitle: '' })),
+    //   },
+    // ])
     [data, locale],
   );
   return (
diff --git a/.dumi/theme/themeConfig.ts b/.dumi/theme/themeConfig.ts
index 82be1be0..3a9d2f2a 100644
--- a/.dumi/theme/themeConfig.ts
+++ b/.dumi/theme/themeConfig.ts
@@ -13,23 +13,35 @@ export default {
   typeOrder: {
     // Component
     Overview: -1,
-    UI: 0,
-    Runtime: 1,
-    Tool: 2,
-    Other: 3,
+    // UI: 0,
+    // Runtime: 1,
+    // Tool: 2,
+    // Other: 3,
+    Common: 0,
+    Wake: 1,
+    Express: 2,
+    Confirm: 3,
+    Feedback: 4,
+    Tools: 5,
 
     总览: -1,
-    用户界面: 0,
-    运行时: 1,
-    工具: 2,
-    其他: 3,
+    // 用户界面: 0,
+    // 运行时: 1,
+    // 工具: 2,
+    // 其他: 3,
+    通用: 0,
+    唤醒: 1,
+    表达: 2,
+    确认: 3,
+    反馈: 4,
+    工具: 5,
 
     // Design
     原则: 1,
     Principles: 1,
     全局规则: 2,
-    重型组件: 8,
-    ProComponents: 8,
+    // 重型组件: 8,
+    // ProComponents: 8,
     'Global Rules': 2,
     模板文档: 3,
     'Template Document': 3,
diff --git a/components/attachments/FileList/FileListCard.tsx b/components/attachments/FileList/FileListCard.tsx
index 6668c1e7..4c516365 100644
--- a/components/attachments/FileList/FileListCard.tsx
+++ b/components/attachments/FileList/FileListCard.tsx
@@ -178,7 +178,7 @@ function FileListCard(props: FileListCardProps, ref: React.Ref<HTMLDivElement>)
   // ============================= Render =============================
   let content: React.ReactNode = null;
   const previewUrl = item.thumbUrl || item.url || previewImg;
-  const isImgPreview = isImg && item.originFileObj;
+  const isImgPreview = isImg && (item.originFileObj || previewUrl);
 
   if (isImgPreview) {
     // Preview Image style
diff --git a/components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap
index 9a054983..aca79554 100644
--- a/components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -720,59 +720,12 @@ exports[`renders components/attachments/demo/files.tsx extend context correctly
       </div>
     </div>
     <div
-      class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+      class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
     >
-      <div
-        class="ant-attachment-list-card-icon"
-        style="color: #8c8c8c;"
-      >
-        <span
-          aria-label="file-image"
-          class="anticon anticon-file-image"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="file-image"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-            />
-          </svg>
-        </span>
-      </div>
-      <div
-        class="ant-attachment-list-card-content"
-      >
-        <div
-          class="ant-attachment-list-card-name"
-        >
-          <div
-            class="ant-attachment-list-card-ellipsis-prefix"
-          >
-            image-file
-          </div>
-          <div
-            class="ant-attachment-list-card-ellipsis-suffix"
-          >
-            .png
-          </div>
-        </div>
-        <div
-          class="ant-attachment-list-card-desc"
-        >
-          <div
-            class="ant-attachment-list-card-ellipsis-prefix"
-          >
-            121 KB
-          </div>
-        </div>
-      </div>
+      <img
+        alt="preview"
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+      />
     </div>
   </div>
 </div>
@@ -907,58 +860,45 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
       class="ant-attachment-list ant-attachment-list-overflow-wrap"
     >
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-0
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -986,58 +926,45 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-1
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1065,58 +992,45 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-2
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1144,58 +1058,45 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-3
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1223,58 +1124,45 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-4
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1302,58 +1190,45 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-5
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1381,58 +1256,45 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-6
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1460,58 +1322,45 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-7
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1539,58 +1388,45 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-8
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1618,58 +1454,45 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-9
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1697,58 +1520,45 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-10
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1776,58 +1586,45 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-11
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1855,58 +1652,45 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-12
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1934,1164 +1718,45 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-13
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-14
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-15
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-16
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-17
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-18
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-19
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-20
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-21
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-22
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-23
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-24
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-25
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-26
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-27
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -3119,58 +1784,12 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-28
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -3198,58 +1817,12 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color: #8c8c8c;"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-29
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
diff --git a/components/attachments/__tests__/__snapshots__/demo.test.tsx.snap b/components/attachments/__tests__/__snapshots__/demo.test.tsx.snap
index 9835cc8e..cd71d289 100644
--- a/components/attachments/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/attachments/__tests__/__snapshots__/demo.test.tsx.snap
@@ -643,59 +643,12 @@ exports[`renders components/attachments/demo/files.tsx correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+      class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
     >
-      <div
-        class="ant-attachment-list-card-icon"
-        style="color:#8c8c8c"
-      >
-        <span
-          aria-label="file-image"
-          class="anticon anticon-file-image"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="file-image"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-            />
-          </svg>
-        </span>
-      </div>
-      <div
-        class="ant-attachment-list-card-content"
-      >
-        <div
-          class="ant-attachment-list-card-name"
-        >
-          <div
-            class="ant-attachment-list-card-ellipsis-prefix"
-          >
-            image-file
-          </div>
-          <div
-            class="ant-attachment-list-card-ellipsis-suffix"
-          >
-            .png
-          </div>
-        </div>
-        <div
-          class="ant-attachment-list-card-desc"
-        >
-          <div
-            class="ant-attachment-list-card-ellipsis-prefix"
-          >
-            121 KB
-          </div>
-        </div>
-      </div>
+      <img
+        alt="preview"
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+      />
     </div>
   </div>
 </div>
@@ -825,58 +778,45 @@ exports[`renders components/attachments/demo/overflow.tsx correctly 1`] = `
       class="ant-attachment-list ant-attachment-list-overflow-wrap"
     >
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-0
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -904,58 +844,45 @@ exports[`renders components/attachments/demo/overflow.tsx correctly 1`] = `
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-1
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -983,58 +910,45 @@ exports[`renders components/attachments/demo/overflow.tsx correctly 1`] = `
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-2
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1062,58 +976,45 @@ exports[`renders components/attachments/demo/overflow.tsx correctly 1`] = `
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-3
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1141,58 +1042,45 @@ exports[`renders components/attachments/demo/overflow.tsx correctly 1`] = `
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-4
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1220,58 +1108,45 @@ exports[`renders components/attachments/demo/overflow.tsx correctly 1`] = `
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-5
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1299,58 +1174,45 @@ exports[`renders components/attachments/demo/overflow.tsx correctly 1`] = `
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-6
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1378,58 +1240,45 @@ exports[`renders components/attachments/demo/overflow.tsx correctly 1`] = `
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-7
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1457,58 +1306,45 @@ exports[`renders components/attachments/demo/overflow.tsx correctly 1`] = `
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-8
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1536,58 +1372,45 @@ exports[`renders components/attachments/demo/overflow.tsx correctly 1`] = `
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-9
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1615,58 +1438,45 @@ exports[`renders components/attachments/demo/overflow.tsx correctly 1`] = `
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-10
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1694,58 +1504,45 @@ exports[`renders components/attachments/demo/overflow.tsx correctly 1`] = `
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-11
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1773,58 +1570,45 @@ exports[`renders components/attachments/demo/overflow.tsx correctly 1`] = `
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-12
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        </button>
+      </div>
+      <div
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
+      >
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -1852,1164 +1636,45 @@ exports[`renders components/attachments/demo/overflow.tsx correctly 1`] = `
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <button
+          class="ant-attachment-list-card-remove"
+          type="button"
         >
           <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
             role="img"
           >
             <svg
               aria-hidden="true"
-              data-icon="file-image"
+              data-icon="close-circle"
               fill="currentColor"
+              fill-rule="evenodd"
               focusable="false"
               height="1em"
               viewBox="64 64 896 896"
               width="1em"
             >
               <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-13
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-14
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-15
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-16
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-17
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-18
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-19
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-20
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-21
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-22
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-23
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-24
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-25
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
-      >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-26
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-attachment-list-card-remove"
-          type="button"
-        >
-          <span
-            aria-label="close-circle"
-            class="anticon anticon-close-circle"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close-circle"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
               />
             </svg>
           </span>
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-27
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -3037,58 +1702,12 @@ exports[`renders components/attachments/demo/overflow.tsx correctly 1`] = `
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-28
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
@@ -3116,58 +1735,12 @@ exports[`renders components/attachments/demo/overflow.tsx correctly 1`] = `
         </button>
       </div>
       <div
-        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-overview"
+        class="ant-attachment-list-card ant-attachment-list-card-status-done ant-attachment-list-card-type-preview"
       >
-        <div
-          class="ant-attachment-list-card-icon"
-          style="color:#8c8c8c"
-        >
-          <span
-            aria-label="file-image"
-            class="anticon anticon-file-image"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="file-image"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.6-9.4-22.6zM400 402c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8 8 0 0112.6 0l136.5 174c4.3 5.2.5 12.9-6.1 12.9zm-94-370V137.8L790.2 326H602z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-attachment-list-card-content"
-        >
-          <div
-            class="ant-attachment-list-card-name"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-              file-29
-            </div>
-            <div
-              class="ant-attachment-list-card-ellipsis-suffix"
-            >
-              .jpg
-            </div>
-          </div>
-          <div
-            class="ant-attachment-list-card-desc"
-          >
-            <div
-              class="ant-attachment-list-card-ellipsis-prefix"
-            >
-            </div>
-          </div>
-        </div>
+        <img
+          alt="preview"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
         <button
           class="ant-attachment-list-card-remove"
           type="button"
diff --git a/components/attachments/index.en-US.md b/components/attachments/index.en-US.md
index c766d5a9..12e1cc45 100644
--- a/components/attachments/index.en-US.md
+++ b/components/attachments/index.en-US.md
@@ -1,12 +1,12 @@
 ---
 category: Components
 group:
-  title: UI
-  order: 0
+  title: Express
+  order: 2
 title: Attachment
 description: Display the collection of attachment information.
-cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1ysXSqEnAckAAAAAAAAAAAAADgCCAQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*EkYUTotf-eYAAAAAAAAAAAAADgCCAQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*5l2oSKBXatAAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*N8QHQJhgfbEAAAAAAAAAAAAADgCCAQ/original
 demo:
   cols: 1
 ---
diff --git a/components/attachments/index.zh-CN.md b/components/attachments/index.zh-CN.md
index 9afded01..39d0e983 100644
--- a/components/attachments/index.zh-CN.md
+++ b/components/attachments/index.zh-CN.md
@@ -1,13 +1,13 @@
 ---
 category: Components
 group:
-  title: 用户界面
-  order: 0
+  title: 表达
+  order: 2
 title: Attachment
-subtitle: 附件
+subtitle: 输入附件
 description: 用于展示一组附件信息集合。
-cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1ysXSqEnAckAAAAAAAAAAAAADgCCAQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*EkYUTotf-eYAAAAAAAAAAAAADgCCAQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*5l2oSKBXatAAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*N8QHQJhgfbEAAAAAAAAAAAAADgCCAQ/original
 demo:
   cols: 1
 ---
diff --git a/components/bubble/index.en-US.md b/components/bubble/index.en-US.md
index 34de1409..573499ef 100644
--- a/components/bubble/index.en-US.md
+++ b/components/bubble/index.en-US.md
@@ -1,12 +1,12 @@
 ---
 category: Components
 group:
-  title: UI
+  title: Common
   order: 0
 title: Bubble
 description: A bubble component for chat.
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HjY3QKszqFEAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*G8njQogkGwAAAAAAAAAAAAAADrJ8AQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*rHIYQIL1X-QAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*uaGhTY1-LL0AAAAAAAAAAAAADgCCAQ/original
 demo:
   cols: 1
 ---
diff --git a/components/bubble/index.zh-CN.md b/components/bubble/index.zh-CN.md
index 9571e716..12afbf12 100644
--- a/components/bubble/index.zh-CN.md
+++ b/components/bubble/index.zh-CN.md
@@ -1,13 +1,13 @@
 ---
 category: Components
 group:
-  title: 用户界面
+  title: 通用
   order: 0
 title: Bubble
-subtitle: 聊天气泡
+subtitle: 对话气泡
 description: 用于聊天的气泡组件。
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HjY3QKszqFEAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*G8njQogkGwAAAAAAAAAAAAAADrJ8AQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*rHIYQIL1X-QAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*uaGhTY1-LL0AAAAAAAAAAAAADgCCAQ/original
 demo:
   cols: 1
 ---
diff --git a/components/conversations/index.en-US.md b/components/conversations/index.en-US.md
index 6c1dfd11..b82b140c 100644
--- a/components/conversations/index.en-US.md
+++ b/components/conversations/index.en-US.md
@@ -1,12 +1,12 @@
 ---
 category: Components
 group:
-  title: UI
+  title: Common
   order: 0
 title: Conversations
 description: Used to manage and view the conversation list
-cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*PRjsQpR3rCwAAAAAAAAAAAAADgCCAQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*yMOdSIMsA8UAAAAAAAAAAAAADgCCAQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Oj-bTbVXtpQAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*qwdtSKWXeikAAAAAAAAAAAAADgCCAQ/original
 demo:
   cols: 1
 ---
diff --git a/components/conversations/index.zh-CN.md b/components/conversations/index.zh-CN.md
index 00137d59..9e66fe5b 100644
--- a/components/conversations/index.zh-CN.md
+++ b/components/conversations/index.zh-CN.md
@@ -1,13 +1,13 @@
 ---
 category: Components
 group:
-  title: 用户界面
+  title: 通用
   order: 0
 title: Conversations
 subtitle: 会话列表
 description: 用于管理、查看会话列表
-cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*PRjsQpR3rCwAAAAAAAAAAAAADgCCAQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*yMOdSIMsA8UAAAAAAAAAAAAADgCCAQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Oj-bTbVXtpQAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*qwdtSKWXeikAAAAAAAAAAAAADgCCAQ/original
 demo:
   cols: 1
 ---
diff --git a/components/prompts/index.en-US.md b/components/prompts/index.en-US.md
index 66366ba7..4fa1fc42 100644
--- a/components/prompts/index.en-US.md
+++ b/components/prompts/index.en-US.md
@@ -1,12 +1,13 @@
 ---
 category: Components
 group:
-  title: UI
-  order: 0
+  title: Wake
+  order: 1
 title: Prompts
+order: 1
 description: Display a predefined set of questions or suggestion.
-cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1ysXSqEnAckAAAAAAAAAAAAADgCCAQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*EkYUTotf-eYAAAAAAAAAAAAADgCCAQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*UfhXRamlAf0AAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*3CN5RLKP0X4AAAAAAAAAAAAADgCCAQ/original
 demo:
   cols: 1
 ---
diff --git a/components/prompts/index.zh-CN.md b/components/prompts/index.zh-CN.md
index 0bee40c4..82d764b5 100644
--- a/components/prompts/index.zh-CN.md
+++ b/components/prompts/index.zh-CN.md
@@ -1,13 +1,14 @@
 ---
 category: Components
 group:
-  title: 用户界面
-  order: 0
+  title: 唤醒
+  order: 1
 title: Prompts
+order: 1
 subtitle: 提示集
 description: 用于显示一组与当前上下文相关的预定义的问题或建议。
-cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1ysXSqEnAckAAAAAAAAAAAAADgCCAQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*EkYUTotf-eYAAAAAAAAAAAAADgCCAQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*UfhXRamlAf0AAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*3CN5RLKP0X4AAAAAAAAAAAAADgCCAQ/original
 demo:
   cols: 1
 ---
diff --git a/components/sender/index.en-US.md b/components/sender/index.en-US.md
index be90ac82..2492ff98 100644
--- a/components/sender/index.en-US.md
+++ b/components/sender/index.en-US.md
@@ -1,12 +1,12 @@
 ---
 category: Components
 group:
-  title: UI
-  order: 0
+  title: Express
+  order: 2
 title: Sender
 description: A input component for chat.
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*OwTOS6wqFIsAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cOfrS4fVkOMAAAAAAAAAAAAADgCCAQ/original
 ---
 
 ## When To Use
diff --git a/components/sender/index.zh-CN.md b/components/sender/index.zh-CN.md
index f712839a..1a3f69ad 100644
--- a/components/sender/index.zh-CN.md
+++ b/components/sender/index.zh-CN.md
@@ -1,13 +1,13 @@
 ---
 category: Components
 group:
-  title: 用户界面
-  order: 0
+  title: 表达
+  order: 2
 title: Sender
 subtitle: 输入框
 description: 用于聊天的输入框组件。
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*OwTOS6wqFIsAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cOfrS4fVkOMAAAAAAAAAAAAADgCCAQ/original
 ---
 
 ## 何时使用
diff --git a/components/suggestion/index.en-US.md b/components/suggestion/index.en-US.md
index d1e2090e..47be2830 100644
--- a/components/suggestion/index.en-US.md
+++ b/components/suggestion/index.en-US.md
@@ -1,12 +1,12 @@
 ---
 category: Components
 group:
-  title: UI
-  order: 0
+  title: Express
+  order: 2
 title: Suggestion
 description: A suggestion component for chat.
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*4vEeSJ2e9xgAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cahuSJ4VxvoAAAAAAAAAAAAADgCCAQ/original
 ---
 
 ## When To Use
diff --git a/components/suggestion/index.zh-CN.md b/components/suggestion/index.zh-CN.md
index 06d6c8da..a795a1cb 100644
--- a/components/suggestion/index.zh-CN.md
+++ b/components/suggestion/index.zh-CN.md
@@ -1,13 +1,13 @@
 ---
 category: Components
 group:
-  title: 用户界面
-  order: 0
+  title: 表达
+  order: 2
 title: Suggestion
-subtitle: 提示
+subtitle: 快捷指令
 description: 用于给予用户快捷提示的组件
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*4vEeSJ2e9xgAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cahuSJ4VxvoAAAAAAAAAAAAADgCCAQ/original
 ---
 
 ## 何时使用
diff --git a/components/thought-chain/index.en-US.md b/components/thought-chain/index.en-US.md
index f7f629c8..a2053088 100644
--- a/components/thought-chain/index.en-US.md
+++ b/components/thought-chain/index.en-US.md
@@ -1,12 +1,12 @@
 ---
 category: Components
 group:
-  title: UI
-  order: 0
+  title: Confirm
+  order: 3
 title: ThoughtChain
 description: The ThoughtChain component is used to visualize and track the call chain of Actions and Tools invoked by an Agent.
-cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*PRjsQpR3rCwAAAAAAAAAAAAADgCCAQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*yMOdSIMsA8UAAAAAAAAAAAAADgCCAQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*GaspS5T6proAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*siL-Qpl794sAAAAAAAAAAAAADgCCAQ/original
 demo:
   cols: 1
 ---
diff --git a/components/thought-chain/index.zh-CN.md b/components/thought-chain/index.zh-CN.md
index 8250d46c..3a50c9fb 100644
--- a/components/thought-chain/index.zh-CN.md
+++ b/components/thought-chain/index.zh-CN.md
@@ -1,13 +1,13 @@
 ---
 category: Components
 group:
-  title: 用户界面
-  order: 0
+  title: 确认
+  order: 3
 title: ThoughtChain
 subtitle: 思维链
 description: 思维链组件用于可视化和追踪 Agent 对 Actions 和 Tools 的调用链。
-cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*PRjsQpR3rCwAAAAAAAAAAAAADgCCAQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*yMOdSIMsA8UAAAAAAAAAAAAADgCCAQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*GaspS5T6proAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*siL-Qpl794sAAAAAAAAAAAAADgCCAQ/original
 demo:
   cols: 1
 ---
diff --git a/components/useXAgent/index.en-US.md b/components/useXAgent/index.en-US.md
index 9ead7a7e..c1584521 100644
--- a/components/useXAgent/index.en-US.md
+++ b/components/useXAgent/index.en-US.md
@@ -1,12 +1,12 @@
 ---
 category: Components
 group:
-  title: Runtime
-  order: 1
+  title: Tools
+  order: 5
 title: useXAgent
 description: Used for model scheduling with Agent hooks.
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HjY3QKszqFEAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*G8njQogkGwAAAAAAAAAAAAAADrJ8AQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*IjD1QqSI99MAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*riUFS51m3IUAAAAAAAAAAAAADgCCAQ/original
 demo:
   cols: 1
 ---
diff --git a/components/useXAgent/index.zh-CN.md b/components/useXAgent/index.zh-CN.md
index f23dbe12..c1bcdddd 100644
--- a/components/useXAgent/index.zh-CN.md
+++ b/components/useXAgent/index.zh-CN.md
@@ -1,13 +1,13 @@
 ---
 category: Components
 group:
-  title: 运行时
-  order: 1
+  title: 工具
+  order: 5
 title: useXAgent
 subtitle: 模型调度
 description: 用于模型调度的 Agent 钩子。
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HjY3QKszqFEAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*G8njQogkGwAAAAAAAAAAAAAADrJ8AQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*IjD1QqSI99MAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*riUFS51m3IUAAAAAAAAAAAAADgCCAQ/original
 demo:
   cols: 1
 ---
diff --git a/components/useXChat/index.en-US.md b/components/useXChat/index.en-US.md
index 161296c8..86fa82ba 100644
--- a/components/useXChat/index.en-US.md
+++ b/components/useXChat/index.en-US.md
@@ -1,12 +1,12 @@
 ---
 category: Components
 group:
-  title: Runtime
-  order: 1
+  title: Tools
+  order: 5
 title: useXChat
 description: Work with agent hook for data management.
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HjY3QKszqFEAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*G8njQogkGwAAAAAAAAAAAAAADrJ8AQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*pJrtTaf-bWAAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*6ySvTqb7XhkAAAAAAAAAAAAADgCCAQ/original
 demo:
   cols: 1
 ---
diff --git a/components/useXChat/index.zh-CN.md b/components/useXChat/index.zh-CN.md
index 3638e277..367de94b 100644
--- a/components/useXChat/index.zh-CN.md
+++ b/components/useXChat/index.zh-CN.md
@@ -1,13 +1,13 @@
 ---
 category: Components
 group:
-  title: 运行时
-  order: 1
+  title: 工具
+  order: 5
 title: useXChat
 subtitle: 数据管理
 description: 配合 Agent hook 进行对话数据管理。
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HjY3QKszqFEAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*G8njQogkGwAAAAAAAAAAAAAADrJ8AQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*pJrtTaf-bWAAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*6ySvTqb7XhkAAAAAAAAAAAAADgCCAQ/original
 demo:
   cols: 1
 ---
diff --git a/components/welcome/index.en-US.md b/components/welcome/index.en-US.md
index 770de88f..e926f141 100644
--- a/components/welcome/index.en-US.md
+++ b/components/welcome/index.en-US.md
@@ -1,12 +1,13 @@
 ---
 category: Components
 group:
-  title: UI
-  order: 0
+  title: Wake
+  order: 1
 title: Welcome
+order: 0
 description: Clearly convey the scope of intent and expected functionality to the user.
-cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1ysXSqEnAckAAAAAAAAAAAAADgCCAQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*EkYUTotf-eYAAAAAAAAAAAAADgCCAQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*sSjhQ6q2-Z0AAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*-gLqQpan1NAAAAAAAAAAAAAADgCCAQ/original
 demo:
   cols: 1
 ---
diff --git a/components/welcome/index.zh-CN.md b/components/welcome/index.zh-CN.md
index 88aac858..b9f11e16 100644
--- a/components/welcome/index.zh-CN.md
+++ b/components/welcome/index.zh-CN.md
@@ -1,13 +1,14 @@
 ---
 category: Components
 group:
-  title: 用户界面
-  order: 0
+  title: 唤醒
+  order: 1
 title: Welcome
 subtitle: 欢迎
+order: 0
 description: 清晰传达给用户可实现的意图范围和预期功能。
-cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1ysXSqEnAckAAAAAAAAAAAAADgCCAQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*EkYUTotf-eYAAAAAAAAAAAAADgCCAQ/original
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*sSjhQ6q2-Z0AAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*-gLqQpan1NAAAAAAAAAAAAAADgCCAQ/original
 demo:
   cols: 1
 ---
diff --git a/components/x-provider/index.en-US.md b/components/x-provider/index.en-US.md
index b0f37285..a8058c05 100644
--- a/components/x-provider/index.en-US.md
+++ b/components/x-provider/index.en-US.md
@@ -1,9 +1,10 @@
 ---
 category: Components
 group:
-  title: Other
-  order: 3
+  title: Tool
+  order: 5
 title: XProvider
+order: 999
 description: Provide a uniform configuration support for x components.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YC4ERpGAddoAAAAAAAAAAAAADrJ8AQ/originaloriginal
diff --git a/components/x-provider/index.zh-CN.md b/components/x-provider/index.zh-CN.md
index e5a2572f..baa69068 100644
--- a/components/x-provider/index.zh-CN.md
+++ b/components/x-provider/index.zh-CN.md
@@ -1,9 +1,10 @@
 ---
 category: Components
 group:
-  title: 其他
-  order: 3
+  title: 工具
+  order: 5
 title: XProvider
+order: 999
 subtitle: 全局化配置
 description: 为组件提供统一的全局化配置。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAAAAAAAADrJ8AQ/original
diff --git a/components/x-request/index.en-US.md b/components/x-request/index.en-US.md
index a7f80a8f..69fd9065 100644
--- a/components/x-request/index.en-US.md
+++ b/components/x-request/index.en-US.md
@@ -1,13 +1,15 @@
 ---
 category: Components
 group:
-  title: Tool
-  order: 2
+  title: Tools
+  order: 5
 title: XRequest
 order: 2
 description:
 demo:
   cols: 1
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*22A2Qqn7OrEAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*lQydTrtLz9YAAAAAAAAAAAAADgCCAQ/original
 ---
 
 ## When To Use
diff --git a/components/x-request/index.zh-CN.md b/components/x-request/index.zh-CN.md
index 8f1c4488..85c85809 100644
--- a/components/x-request/index.zh-CN.md
+++ b/components/x-request/index.zh-CN.md
@@ -2,13 +2,15 @@
 category: Components
 group:
   title: 工具
-  order: 2
+  order: 5
 title: XRequest
 order: 2
 subtitle: 请求
 description:
 demo:
   cols: 1
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*22A2Qqn7OrEAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*lQydTrtLz9YAAAAAAAAAAAAADgCCAQ/original
 ---
 
 ## When To Use
diff --git a/components/x-stream/index.en-US.md b/components/x-stream/index.en-US.md
index dc98aa6f..01b3ad6f 100644
--- a/components/x-stream/index.en-US.md
+++ b/components/x-stream/index.en-US.md
@@ -2,12 +2,14 @@
 category: Components
 group:
   title: Tool
-  order: 2
+  order: 5
 title: XStream
 order: 1
 description: Transform binary stream
 demo:
   cols: 1
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*OD9kTJOmGdsAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*PxJISo5t2YgAAAAAAAAAAAAADgCCAQ/original
 ---
 
 ## When To Use
diff --git a/components/x-stream/index.zh-CN.md b/components/x-stream/index.zh-CN.md
index 64b182f5..ea881ee4 100644
--- a/components/x-stream/index.zh-CN.md
+++ b/components/x-stream/index.zh-CN.md
@@ -2,13 +2,15 @@
 category: Components
 group:
   title: 工具
-  order: 2
+  order: 5
 title: XStream
 subtitle: 流
 order: 1
 description: 转换可读数据流
 demo:
   cols: 1
+cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*OD9kTJOmGdsAAAAAAAAAAAAADgCCAQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*PxJISo5t2YgAAAAAAAAAAAAADgCCAQ/original
 ---
 
 ## When To Use