feat: support Image builtin component and fix table style

yuntijs · Aug 22, 2024 · 1568c17 · 1568c17
1 parent 28ff7d3
commit 1568c17
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git 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
@@ -0,0 +1 @@
+export { Image as default } from '@lobehub/ui';
diff --git 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
@@ -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>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { Image as default } from '@lobehub/ui';