chore: 路由代码内聚

packages/demo/src/components/Editor/.catalog.ts

@@ -0,0 +1 @@
+export const list = []

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;

packages/demo/src/components/Editor/index.mdx

@@ -0,0 +1,11 @@
+import Props from './props.mdx';
+
+# Editor
+
+## 基本用法
+
+<CodeBlock id="基本示例">
+  <Base />
+</CodeBlock>
+
+<Props />

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} />

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;

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>
     );
   };

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',
   },
 
   // {

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 />,
+        }),
       },
     ],
   },

packages/demo/src/utils/index.ts

@@ -1 +1,2 @@
 export * from './renderCatalog';
+export * from './path';

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 {};
+  });
+};

packages/design/components/MonacoEditor/index.tsx

@@ -0,0 +1,5 @@
+const MonacoEditor = () => {
+  return <div>123</div>;
+};
+
+export default MonacoEditor;

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();