fix: 修复关于uiw底部foote不显示

Author: ff

website/src/component/Markdown/index.tsx

@@ -82,6 +82,7 @@ export default class Markdown extends Component<MarkdownProps, MarkdownState> {
         </div>
       );
     }
+
     return (
       <Fragment>
         <div className={styles.warpper} style={style}>

website/src/component/Preview/Footer.js

@@ -0,0 +1,19 @@
+import { Divider } from 'uiw';
+
+export default function (props) {
+  const { path } = props;
+  const url = /^http/.test(path || '') ? path : `https://github.com/uiwjs/react-native-uiw/edit/master/${path}`;
+  return (
+    <div style={{ paddingBlock: 20 }}>
+      {url && (
+        <a href={url} target="_blank" rel="noopener noreferrer">
+          在Github上编辑本页！
+        </a>
+      )}
+      <Divider type="vertical" />
+      <a target="_blank" rel="noopener noreferrer" href="https://github.com/uiwjs/react-native-uiw/issues">
+        提交bug
+      </a>
+    </div>
+  );
+}

website/src/component/Preview/index.js

@@ -4,6 +4,7 @@ import { BackTop, Circle, Icon } from 'uiw';
 import { getMetaId, isMeta, getURLParameters } from 'markdown-react-code-preview-loader';
 import CodeLayout from 'react-code-preview-layout';
 import { useRef } from 'react';
+import Footer from './Footer';
 
 const Wrapper = styled.div`
   width: 100%;
@@ -14,6 +15,8 @@ const Wrapper = styled.div`
   }
   display: flex;
   justify-content: center;
+  align-items: center;
+  flex-direction: column;
 `;
 
 const Markdown = styled(MarkdownPreview)`
@@ -34,9 +37,8 @@ const getBooleanValue = (param, field, defaultValue) => {
   return defaultValue;
 };
 
-const Preview = (mdData) => {
+const Preview = ({ path, ...mdData }) => {
   const $dom = useRef(null);
-
   return (
     <Wrapper ref={$dom}>
       <Markdown
@@ -85,6 +87,7 @@ const Preview = (mdData) => {
           },
         }}
       />
+      <Footer path={path} />
       <BackTop speed={500}>
         {({ percent, scrollToTop }) => (
           <Circle

website/src/pages/components/about/index.tsx

@@ -1,6 +1,6 @@
 import Preview from 'src/component/Preview';
 import md from '@uiw/react-native/README.md';
 
-const Demo = () => <Preview {...md} />;
+const Demo = () => <Preview {...md} path="/packages/core/README.md" />;
 
 export default Demo;

website/src/pages/docs/development/document/README.md

@@ -162,21 +162,27 @@ export const getRouterData = {
 添加 `website/src/pages/docs/getting-started/README.md` 和 `website/src/pages/docs/getting-started/index.tsx`
 
 ```tsx
-import Markdown, { importAll } from '../../../component/Markdown';
-
-export default class Page extends Markdown {
-  // 配置 markdown 在 GitHub 中的目录位置，用于定位编辑 Markdown
-  path = "/website/src/pages/docs/getting-started/README.md";
-  getMarkdown = async () => {
-    // 这里加载指定的 Markdown 文件
-    const md = await import('./README.md');
-    // 也可加载组件包中的文档
-    const mdCom = await import('@uiw/react-native/lib/Badge/README.md');
-    // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
-    importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
-    return md.default || md;
-  }
+import Preview from 'src/component/Preview';
+import md from './README.md';
+
+const DEMO = () => <Preview {...md} />;
+export default DEMO;
+
+```
+> 注意: 如果markdown有本地图片需要增加transformImageUri配置,否则不现实图片
+```tsx
+import Preview from 'src/component/Preview';
+import md from './README.md';
+
+const transformImageUri = (url: string) => {
+  const reqImage = (require as any).context('./', true, /\.(png|gif|jpg|svg)$/)
+  const urlAddr = reqImage(url)
+  return urlAddr
 }
+
+const DEMO = () => <Preview {...md} transformImageUri={transformImageUri} />;
+export default DEMO;
+
 ```
 
 ### `修改一个 Markdown 文件内容`