From 0c09d0f33b768d1f1578d9b923896ec6d55e3781 Mon Sep 17 00:00:00 2001
From: 1360151219 <zhanjingxi@ps.ink>
Date: Fri, 29 Sep 2023 22:07:06 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E8=B7=AF=E7=94=B1=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E5=86=85=E8=81=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo/src/components/Editor/.catalog.ts    |  1 +
 .../demo/src/components/Editor/demo/Base.tsx  | 11 ++++
 packages/demo/src/components/Editor/index.mdx | 11 ++++
 packages/demo/src/components/Editor/props.mdx |  7 +++
 packages/demo/src/pages/components/editor.tsx | 14 +++++
 packages/demo/src/pages/components/index.tsx  | 36 ++---------
 packages/demo/src/pages/home/index.tsx        |  2 +-
 packages/demo/src/routers/index.tsx           | 57 +++++------------
 packages/demo/src/utils/index.ts              |  1 +
 packages/demo/src/utils/path.ts               | 63 +++++++++++++++++++
 .../design/components/MonacoEditor/index.tsx  |  5 ++
 packages/design/index.ts                      |  5 +-
 12 files changed, 138 insertions(+), 75 deletions(-)
 create mode 100644 packages/demo/src/components/Editor/.catalog.ts
 create mode 100644 packages/demo/src/components/Editor/demo/Base.tsx
 create mode 100644 packages/demo/src/components/Editor/index.mdx
 create mode 100644 packages/demo/src/components/Editor/props.mdx
 create mode 100644 packages/demo/src/pages/components/editor.tsx
 create mode 100644 packages/demo/src/utils/path.ts
 create mode 100644 packages/design/components/MonacoEditor/index.tsx

diff --git a/packages/demo/src/components/Editor/.catalog.ts b/packages/demo/src/components/Editor/.catalog.ts
new file mode 100644
index 0000000..a63628d
--- /dev/null
+++ b/packages/demo/src/components/Editor/.catalog.ts
@@ -0,0 +1 @@
+export const list = []
\ No newline at end of file
diff --git a/packages/demo/src/components/Editor/demo/Base.tsx b/packages/demo/src/components/Editor/demo/Base.tsx
new file mode 100644
index 0000000..c1c81e0
--- /dev/null
+++ b/packages/demo/src/components/Editor/demo/Base.tsx
@@ -0,0 +1,11 @@
+import { Editor } from 'pivot-design';
+import React, { useState } from 'react';
+
+const App: React.FC = () => {
+  return (
+    <>
+      <Editor />
+    </>
+  );
+};
+export default App;
diff --git a/packages/demo/src/components/Editor/index.mdx b/packages/demo/src/components/Editor/index.mdx
new file mode 100644
index 0000000..237561f
--- /dev/null
+++ b/packages/demo/src/components/Editor/index.mdx
@@ -0,0 +1,11 @@
+import Props from './props.mdx';
+
+# Editor
+
+## 基本用法
+
+<CodeBlock id="基本示例">
+  <Base />
+</CodeBlock>
+
+<Props />
diff --git a/packages/demo/src/components/Editor/props.mdx b/packages/demo/src/components/Editor/props.mdx
new file mode 100644
index 0000000..ca0a4dc
--- /dev/null
+++ b/packages/demo/src/components/Editor/props.mdx
@@ -0,0 +1,7 @@
+import Table from '../table.tsx';
+
+export const params = [];
+
+## API 列表
+
+<Table name="input" params={params} />
diff --git a/packages/demo/src/pages/components/editor.tsx b/packages/demo/src/pages/components/editor.tsx
new file mode 100644
index 0000000..58174e1
--- /dev/null
+++ b/packages/demo/src/pages/components/editor.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import EditorMdx from '@/components/Editor/index.mdx';
+import CodeBlock from '@/components/_CodeBlock/codeBlock';
+import { list } from '@/components/Editor/.catalog';
+import { renderCatalog } from '@/utils';
+const EditorPage: React.FC = () => {
+  return (
+    <>
+      <EditorMdx components={{ CodeBlock }} />
+      <div className="demo-component-catalogue">{renderCatalog(list)}</div>
+    </>
+  );
+};
+export default EditorPage;
diff --git a/packages/demo/src/pages/components/index.tsx b/packages/demo/src/pages/components/index.tsx
index a0fc3d6..a4f909d 100644
--- a/packages/demo/src/pages/components/index.tsx
+++ b/packages/demo/src/pages/components/index.tsx
@@ -1,40 +1,16 @@
 import { Outlet, NavLink } from 'react-router-dom';
 import './index.scss';
+import { ComponentPath } from '@/utils';
 
 function Index() {
   const demoSelect = () => {
     return (
       <div className="demo-container">
-        <NavLink className={({ isActive }) => `demo-item ${isActive ? 'active' : ''}`} to={'button'}>
-          Button 按钮
-        </NavLink>
-        <NavLink className={({ isActive }) => `demo-item ${isActive ? 'active' : ''}`} to={'switch'}>
-          Switch 开关
-        </NavLink>
-        <NavLink className={({ isActive }) => `demo-item ${isActive ? 'active' : ''}`} to={'card'}>
-          Card 卡片
-        </NavLink>
-        <NavLink className={({ isActive }) => `demo-item ${isActive ? 'active' : ''}`} to={'draggable'}>
-          Draggable 拖拽列表
-        </NavLink>
-        <NavLink className={({ isActive }) => `demo-item ${isActive ? 'active' : ''}`} to={'skeleton'}>
-          Skeleton 骨架屏
-        </NavLink>
-        <NavLink className={({ isActive }) => `demo-item ${isActive ? 'active' : ''}`} to={'icon'}>
-          Icon 图标
-        </NavLink>
-        <NavLink className={({ isActive }) => `demo-item ${isActive ? 'active' : ''}`} to={'input'}>
-          Input 输入框
-        </NavLink>
-        <NavLink className={({ isActive }) => `demo-item ${isActive ? 'active' : ''}`} to={'popover'}>
-          Popover 气泡
-        </NavLink>
-        <NavLink className={({ isActive }) => `demo-item ${isActive ? 'active' : ''}`} to={'modal'}>
-          弹窗
-        </NavLink>
-        <NavLink className={({ isActive }) => `demo-item ${isActive ? 'active' : ''}`} to={'transition'}>
-          Transition 元素动画
-        </NavLink>
+        {ComponentPath.map((component) => (
+          <NavLink className={({ isActive }) => `demo-item ${isActive ? 'active' : ''}`} to={component.path}>
+            {component.title}
+          </NavLink>
+        ))}
       </div>
     );
   };
diff --git a/packages/demo/src/pages/home/index.tsx b/packages/demo/src/pages/home/index.tsx
index 01eb325..c74863b 100644
--- a/packages/demo/src/pages/home/index.tsx
+++ b/packages/demo/src/pages/home/index.tsx
@@ -8,7 +8,7 @@ import { IconGithub } from 'pivot-design-icon';
 const navigatorList = [
   {
     text: '组件',
-    path: '/components',
+    path: '/components/button',
   },
 
   // {
diff --git a/packages/demo/src/routers/index.tsx b/packages/demo/src/routers/index.tsx
index 84c3ad5..85ba0f2 100644
--- a/packages/demo/src/routers/index.tsx
+++ b/packages/demo/src/routers/index.tsx
@@ -12,6 +12,8 @@ import Draggable from '@/pages/components/draggable';
 import Transition from '@/pages/components/transition';
 import Skeleton from '@/pages/components/skeleton';
 import Modal from '@/pages/components/modal';
+import Editor from '@/pages/components/editor';
+import { generateComponentRouter } from '@/utils';
 
 const router: RouteObject[] = [
   {
@@ -25,48 +27,19 @@ const router: RouteObject[] = [
       {
         path: 'components',
         element: <Components />,
-        children: [
-          {
-            path: 'button',
-            element: <Button />,
-          },
-          {
-            path: 'switch',
-            element: <Switch />,
-          },
-          {
-            path: 'icon',
-            element: <Icon />,
-          },
-          {
-            path: 'input',
-            element: <Input />,
-          },
-          {
-            path: 'card',
-            element: <Card />,
-          },
-          {
-            path: 'popover',
-            element: <Popover />,
-          },
-          {
-            path: 'draggable',
-            element: <Draggable />,
-          },
-          {
-            path: 'transition',
-            element: <Transition />,
-          },
-          {
-            path: 'skeleton',
-            element: <Skeleton />,
-          },
-          {
-            path: 'modal',
-            element: <Modal />,
-          },
-        ],
+        children: generateComponentRouter({
+          button: <Button />,
+          switch: <Switch />,
+          icon: <Icon />,
+          input: <Input />,
+          card: <Card />,
+          popover: <Popover />,
+          draggable: <Draggable />,
+          transition: <Transition />,
+          skeleton: <Skeleton />,
+          modal: <Modal />,
+          editor: <Editor />,
+        }),
       },
     ],
   },
diff --git a/packages/demo/src/utils/index.ts b/packages/demo/src/utils/index.ts
index 7cedff8..7ae443a 100644
--- a/packages/demo/src/utils/index.ts
+++ b/packages/demo/src/utils/index.ts
@@ -1 +1,2 @@
 export * from './renderCatalog';
+export * from './path';
diff --git a/packages/demo/src/utils/path.ts b/packages/demo/src/utils/path.ts
new file mode 100644
index 0000000..41ee887
--- /dev/null
+++ b/packages/demo/src/utils/path.ts
@@ -0,0 +1,63 @@
+export const ComponentPath = [
+  {
+    path: 'button',
+    title: 'Button 按钮',
+  },
+  {
+    path: 'switch',
+    title: 'Switch 开关',
+  },
+  {
+    path: 'card',
+    title: 'Card 卡片',
+  },
+  {
+    path: 'button',
+    title: 'Card 卡片',
+  },
+  {
+    path: 'draggable',
+    title: 'Draggable 拖拽列表',
+  },
+  {
+    path: 'skeleton',
+    title: 'Skeleton 骨架屏',
+  },
+  {
+    path: 'icon',
+    title: 'Icon 图标',
+  },
+  {
+    path: 'input',
+    title: 'Input 输入框',
+  },
+  {
+    path: 'popover',
+    title: 'Popover 气泡',
+  },
+  {
+    path: 'modal',
+    title: 'Modal 弹窗',
+  },
+  {
+    path: 'transition',
+    title: 'Transition 元素动画',
+  },
+  {
+    path: 'editor',
+    title: 'Editor 代码编辑器',
+  },
+] as const;
+
+export const generateComponentRouter = (mapping: Record<(typeof ComponentPath)[number]['path'], any>) => {
+  return ComponentPath.map((component) => {
+    // eslint-disable-next-line no-prototype-builtins
+    if (mapping.hasOwnProperty(component.path)) {
+      return {
+        ...component,
+        element: mapping[component.path],
+      };
+    }
+    return {};
+  });
+};
diff --git a/packages/design/components/MonacoEditor/index.tsx b/packages/design/components/MonacoEditor/index.tsx
new file mode 100644
index 0000000..be031f8
--- /dev/null
+++ b/packages/design/components/MonacoEditor/index.tsx
@@ -0,0 +1,5 @@
+const MonacoEditor = () => {
+  return <div>123</div>;
+};
+
+export default MonacoEditor;
diff --git a/packages/design/index.ts b/packages/design/index.ts
index e655843..2ce2a7a 100644
--- a/packages/design/index.ts
+++ b/packages/design/index.ts
@@ -10,7 +10,8 @@ export {
   Droppable,
   SortableContext,
 } from './components/Draggable';
-import Icon from './components/Icon';
+export { default as Icon } from './components/Icon';
+export { default as Editor } from './components/MonacoEditor';
 import Input from './components/Input';
 import Card from './components/Card';
 import Modal from './components/Modal';
@@ -20,7 +21,7 @@ import Transition from './components/Transition';
 import CSSTransiton from './components/Transition/CSSTransiton';
 import Switch from './components/Switch';
 
-export { Button, Icon, Input, Card, Skeleton, Popover, Modal, Transition, CSSTransiton, Switch };
+export { Button, Input, Card, Skeleton, Popover, Modal, Transition, CSSTransiton, Switch };
 
 export const arrayMove = (array: any[], from: number, to: number) => {
   const resArray = array.slice();