feat: add draft tabs stories

Author: mumiao

src/style/theme.scss

@@ -21,6 +21,7 @@
 @import 'mo/components/menu/style';
 @import 'mo/components/toolbar/style';
 @import 'mo/components/tree/style';
+@import 'mo/components/tabs/style';
 
 // =============== Workbench =============== //
 #{prefix($workbench)} {
@@ -118,6 +119,7 @@
 @mixin border-color($color) {
     border: 1px solid $color;
 }
+
 #{prefix($collapse)} {
     background-color: #252526;
 
@@ -149,21 +151,26 @@
         }
     }
 
-    .rc-tree-treenode.drag-over > .draggable {
+    .rc-tree-treenode.drag-over>.draggable {
         @include border-color(#316ac5);
         background-color: #316ac5;
         color: #bbb;
     }
 
-    .rc-tree-treenode.drag-over-gap-top > .draggable {
+    .rc-tree-treenode.drag-over-gap-top>.draggable {
         border-top: 2px rgb(0, 122, 204) solid;
     }
 
-    .rc-tree-treenode.drag-over-gap-bottom > .draggable {
+    .rc-tree-treenode.drag-over-gap-bottom>.draggable {
         border-bottom: 2px rgb(0, 122, 204) solid;
     }
 
     .rc-tree-treenode-active {
         background: rgba(0, 0, 0, 0.1);
     }
 }
+
+// =============== Tab =============== //
+#{prefix($tabSwitcher)} {
+    background-color: rgb(37, 37, 38);
+}

stories/components/3-Tabs.stories.tsx

@@ -1,15 +1,49 @@
 import * as React from 'react';
+import { useState } from 'react';
+import Tabs from 'mo/components/tabs';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+const stories = storiesOf('Tab', module);
+stories.addDecorator(withKnobs);
 
-import Tabs, { ITab } from 'mo/components/tabs';
-
-export default {
-    title: 'Tabs',
-};
-
-const data: ITab[] = [
-    {
-        id: 1,
-        name: 'test',
-    },
-];
-export const Basic = () => <Tabs data={data} />;
+stories.add('Basic Usage', () => {
+    const onMoveTab = (tabs) => setTabs(tabs);
+    const data = [
+        {
+            modified: true,
+            id: 1,
+            name: 'editor.js',
+            value: 'hello javascript',
+        },
+        {
+            activeTab: 1,
+            modified: false,
+            id: 2,
+            name: 'editor.css',
+            value: 'hello css',
+        },
+        {
+            modified: false,
+            id: 3,
+            name: 'editor.tsx',
+            value: 'hello tsx',
+        },
+    ];
+    const [tabs, setTabs] = useState(data);
+    return (
+        <div>
+            <h2>简述</h2>
+            <p>Tab 提供组件多tab切换；拖拽</p>
+            <div>
+                <h3>使用示例 1 - 基本使用</h3>
+                <div style={{ height: 200 }}>
+                    <Tabs
+                        data={tabs}
+                        onMoveTab={onMoveTab}
+                        onTabChange={(data) => console.log(data)}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+});