From 1568c17bf520a1f134f2e9467bb8a3908d579d06 Mon Sep 17 00:00:00 2001
From: Carrotzpc <zhang.pc3@gmail.com>
Date: Thu, 22 Aug 2024 14:29:56 +0800
Subject: [PATCH] feat: support Image builtin component and fix table style

---
 example/docs/config/markdown.zh-CN.md | 16 ++++++++++++++++
 src/builtins/Image/index.tsx          |  1 +
 src/layouts/DocLayout/GlobalStyle.ts  | 10 ++++++++++
 src/pages/Docs/index.tsx              |  4 ++--
 4 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 src/builtins/Image/index.tsx

diff --git a/example/docs/config/markdown.zh-CN.md b/example/docs/config/markdown.zh-CN.md
index 6d86485..bad03c1 100644
--- a/example/docs/config/markdown.zh-CN.md
+++ b/example/docs/config/markdown.zh-CN.md
@@ -138,3 +138,19 @@ tag:
 tag: New
 ---
 ```
+
+## 图片组件 Image
+
+```md
+<Image
+  src="https://gw.alipayobjects.com/zos/kitchen/sLO%24gbrQtp/lobe-chat.webp"
+/>
+```
+
+图片则渲染为 (支持图片集)：
+
+<Image
+src="https://gw.alipayobjects.com/zos/kitchen/sLO%24gbrQtp/lobe-chat.webp"
+/>
+
+<Image src="https://gw.alipayobjects.com/zos/kitchen/8Ab%24hLJ5ur/cover.webp" />
diff --git a/src/builtins/Image/index.tsx b/src/builtins/Image/index.tsx
new file mode 100644
index 0000000..eae365a
--- /dev/null
+++ b/src/builtins/Image/index.tsx
@@ -0,0 +1 @@
+export { Image as default } from '@lobehub/ui';
diff --git a/src/layouts/DocLayout/GlobalStyle.ts b/src/layouts/DocLayout/GlobalStyle.ts
index 78c2876..daf9cb1 100644
--- a/src/layouts/DocLayout/GlobalStyle.ts
+++ b/src/layouts/DocLayout/GlobalStyle.ts
@@ -14,6 +14,16 @@ const GlobalStyle = createGlobalStyle`
       display: none;
     }
   }
+
+  .dumi-default-table {
+    &-content {
+      table {
+        display: table;
+        table-layout: auto;
+        width: 100%;
+      }
+    }
+  }
 `;
 
 export default GlobalStyle;
diff --git a/src/pages/Docs/index.tsx b/src/pages/Docs/index.tsx
index cf5f7b3..2131f9f 100644
--- a/src/pages/Docs/index.tsx
+++ b/src/pages/Docs/index.tsx
@@ -1,5 +1,5 @@
 import { StyleProvider } from '@ant-design/cssinjs';
-import { Giscus } from '@lobehub/ui';
+import { Giscus, ImageGallery } from '@lobehub/ui';
 import { useLocation, useOutlet } from 'dumi';
 import { memo, useCallback, useEffect } from 'react';
 import { Center } from 'react-layout-kit';
@@ -54,7 +54,7 @@ const Documents = memo(() => {
           </div>
         ) : undefined}
         <Content>
-          {outlet}
+          <ImageGallery>{outlet}</ImageGallery>
           {giscus && <Comment />}
         </Content>
       </Center>