From f299d4e0375e04c4613a78a0ed5eab8bf66d8b50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=A8=E6=9D=AA?= <mumiao@dtstack.com>
Date: Fri, 18 Dec 2020 12:50:07 +0800
Subject: [PATCH] feat: optmize type interface

---
 src/components/tabs/index.tsx           |  8 +++++---
 src/services/workbench/editorService.ts |  4 ++--
 src/style/theme.scss                    | 10 +++++++++-
 src/workbench/editor/editor.tsx         |  2 +-
 stories/components/3-Tabs.stories.tsx   |  2 +-
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/tabs/index.tsx b/src/components/tabs/index.tsx
index 392705aab..649a3a978 100644
--- a/src/components/tabs/index.tsx
+++ b/src/components/tabs/index.tsx
@@ -25,11 +25,13 @@ export interface ITab {
     label?: React.ReactNode;
     renderPanel?: React.ReactNode;
 }
+
+export type TabsType = 'line' | 'card';
 export interface ITabsProps {
     closable?: boolean;
     data: ITab[];
     activeTab?: string;
-    type?: 'line' | 'editable-card';
+    type?: TabsType;
     onCloseTab?: (key?: string) => void;
     onMoveTab?: (tabs: ITab[]) => void;
     onSelectTab?: (key?: string) => void;
@@ -45,7 +47,7 @@ const Tabs = (props: ITabsProps) => {
     const {
         activeTab,
         data,
-        type = 'line', //TODO type logic
+        type = 'line',
         onMoveTab,
         ...resetProps
     } = props;
@@ -70,7 +72,7 @@ const Tabs = (props: ITabsProps) => {
             <div
                 className={classNames(
                     tabsClassName,
-                    getBEMModifier(tabsClassName, `${type}`)
+                    getBEMModifier(tabsClassName, type as string)
                 )}
             >
                 <div className={tabsHeader}>
diff --git a/src/services/workbench/editorService.ts b/src/services/workbench/editorService.ts
index 9de2b9ee4..fe88b230d 100644
--- a/src/services/workbench/editorService.ts
+++ b/src/services/workbench/editorService.ts
@@ -1,5 +1,4 @@
 import { singleton, container } from 'tsyringe';
-import { isEmpty } from 'loadsh';
 
 import { Component } from 'mo/react';
 import { emit } from 'mo/common/event';
@@ -73,9 +72,10 @@ export class EditorService
         this.subscribe(
             EditorEvent.OnMoveTab,
             (tabs: ITab[], groupId?: number) => {
+                debugger
                 let { groups } = this.state;
                 let group;
-                if (isEmpty(groupId)) return;
+                if (groupId === undefined) return;
                 group = groups?.find(
                     (group: IEditorGroup) => group.id === groupId
                 );
diff --git a/src/style/theme.scss b/src/style/theme.scss
index ec5a958f1..41cce9641 100644
--- a/src/style/theme.scss
+++ b/src/style/theme.scss
@@ -169,7 +169,7 @@
         color: #fff;
     }
 
-    &--editable-card {
+    &--card {
         #{$tabs}__header {
             border-bottom: 1px solid transparent;
         }
@@ -186,6 +186,14 @@
         background: #232323;
         color: #888;
 
+        &__op {
+            &__dot {
+                &::after {
+                    background: #fff;
+                }
+            }
+        }
+
         &--active {
             background: #1e1e1e;
             border-bottom: 1px solid #e7e7e7;
diff --git a/src/workbench/editor/editor.tsx b/src/workbench/editor/editor.tsx
index a6212c6ba..6e1422f7a 100644
--- a/src/workbench/editor/editor.tsx
+++ b/src/workbench/editor/editor.tsx
@@ -49,7 +49,7 @@ function renderEditorGroup(
         <div className={groupClassName} key={`group-${group.id}`}>
             <Tabs
                 closable={true}
-                type="editable-card"
+                type="card"
                 data={tabs}
                 onMoveTab={onMoveTab}
                 onSelectTab={onSelectTab}
diff --git a/stories/components/3-Tabs.stories.tsx b/stories/components/3-Tabs.stories.tsx
index d4bccd3ce..1eb750cf2 100644
--- a/stories/components/3-Tabs.stories.tsx
+++ b/stories/components/3-Tabs.stories.tsx
@@ -96,10 +96,10 @@ stories.add('Basic Usage', () => {
                 <h3>使用示例2 - 带关闭状态的tab</h3>
                 <div style={{ height: 300 }}>
                     <Tabs
+                        type="card"
                         data={tabs1}
                         activeTab={activeTab1}
                         onMoveTab={onMoveTab1}
-                        closable={true}
                         onSelectTab={onSelectTab1}
                         onCloseTab={onCloseTab1}
                     />