From d4f74c723d7fb619320dac5cdb4444480a3b7880 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Thu, 2 Nov 2023 14:28:19 +0800
Subject: [PATCH 1/2] =?UTF-8?q?chore(tabs):=20=E8=83=B6=E5=9B=8A=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=B8=8B=E6=A0=87=E7=AD=BE=E4=B9=8B=E5=89=8D=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E7=AB=96=E7=BA=BF=E5=B1=95=E7=A4=BA=20(#2646)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/little-cherries-dress.md           |   5 +
 .changeset/quick-donuts-mix.md                |   5 +
 packages/ui/tabs/src/styles/tabs.scss         | 198 ++++++++++--------
 packages/ui/tabs/stories/basic.stories.tsx    |   2 +-
 packages/ui/tabs/stories/button.stories.tsx   |  38 +++-
 packages/ui/tabs/stories/card.stories.tsx     |   4 +-
 packages/ui/tabs/stories/desc.stories.tsx     |  12 +-
 packages/ui/tabs/stories/disabled.stories.tsx |  57 +++++
 .../ui/tabs/stories/draggable.stories.tsx     |   2 +-
 packages/ui/tabs/stories/editable.stories.tsx |   2 +-
 packages/ui/tabs/stories/extra.stories.tsx    |   2 +-
 packages/ui/tabs/stories/index.stories.tsx    |   1 +
 packages/ui/tabs/stories/nested.stories.tsx   |   8 +-
 .../ui/tabs/stories/with-icon.stories.tsx     |   1 -
 14 files changed, 227 insertions(+), 110 deletions(-)
 create mode 100644 .changeset/little-cherries-dress.md
 create mode 100644 .changeset/quick-donuts-mix.md
 create mode 100644 packages/ui/tabs/stories/disabled.stories.tsx

diff --git a/.changeset/little-cherries-dress.md b/.changeset/little-cherries-dress.md
new file mode 100644
index 000000000..fbb72a118
--- /dev/null
+++ b/.changeset/little-cherries-dress.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/tabs": patch
+---
+
+chore: 胶囊样式下标签之前增加竖线展示
diff --git a/.changeset/quick-donuts-mix.md b/.changeset/quick-donuts-mix.md
new file mode 100644
index 000000000..bb77462d8
--- /dev/null
+++ b/.changeset/quick-donuts-mix.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Tabs chore: 胶囊样式下标签之前增加竖线展示
diff --git a/packages/ui/tabs/src/styles/tabs.scss b/packages/ui/tabs/src/styles/tabs.scss
index 9f74a737d..81f9b3753 100644
--- a/packages/ui/tabs/src/styles/tabs.scss
+++ b/packages/ui/tabs/src/styles/tabs.scss
@@ -47,9 +47,10 @@ $prefix: '#{$component-prefix}-tabs' !default;
       .#{$prefix}__item {
         background-color: use-color('gray', 200);
         margin: 0;
-        padding: use-spacing(4) use-spacing(10);
+        padding: use-spacing(5) use-spacing(8);
         border-radius: 0;
         transition: all 0.3s;
+        line-height: use-text-lineheight('sm');
 
         &--active {
           color: use-color-mode('primary');
@@ -61,28 +62,58 @@ $prefix: '#{$component-prefix}-tabs' !default;
 
     &--button {
       .#{$prefix}__item {
+        position: relative;
         margin: use-spacing(2) use-spacing(2) use-spacing(2) 0;
-        padding: use-spacing(2) use-spacing(10);
+        padding: use-spacing(2) use-spacing(6);
         border-radius: use-border-radius('normal');
         transition: all 0.3s;
 
-        &:not(:where(.#{$prefix}__item--active, .#{$prefix}__item--disabled)):hover {
-          background-color: use-color('gray', 200);
-          color: use-color('gray', 500);
+        &:not(:where(.#{$prefix}__item--active, .#{$prefix}__item--disabled)) {
+          &:hover {
+            background-color: use-color('gray', 200);
+            color: use-color('gray', 500);
+
+            &::after {
+              display: none;
+            }
+
+            + .#{$prefix}__item::after {
+              display: none;
+            }
+          }
+
+          &::after {
+            content: '';
+            position: absolute;
+            width: 1px;
+            height: use-height-size(4);
+            background-color: use-color('gray', 300);
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+
+          &:first-child::after {
+            display: none;
+          }
         }
 
         &--active {
           color: use-color-mode('primary');
           background-color: use-color-mode('primary', 50);
+
+          + .#{$prefix}__item::after {
+            display: none;
+          }
         }
       }
     }
 
     &--desc {
-      padding: 0 use-spacing(10);
       .#{$prefix}-item {
         &__title {
           color: use-color('gray', 700);
+          line-height: use-text-lineheight('sm');
         }
 
         &__desc {
@@ -91,13 +122,14 @@ $prefix: '#{$component-prefix}-tabs' !default;
           line-height: use-text-lineheight('sm');
         }
       }
+
       .#{$prefix}__item {
         background: use-color('gray', 50);
         display: flex;
         flex-direction: column;
         align-items: center;
-        margin: use-spacing(10)  use-spacing(6) use-spacing(10) 0;
-        padding: use-spacing(8) use-spacing(10);
+        margin: 0 use-spacing(6) 0 0;
+        padding: use-spacing(8);
         border-radius: use-border-radius('normal');
         transition: all 0.3s;
 
@@ -176,6 +208,48 @@ $prefix: '#{$component-prefix}-tabs' !default;
       // height: 100%;
 
       &.#{$prefix}__list--desc {
+        .#{$prefix}-item {
+          &__title {
+            color: use-color('gray', 700);
+            line-height: use-text-lineheight('sm');
+          }
+
+          &__desc {
+            color: use-color('gray', 500);
+            font-size: use-text-size('sm');
+            line-height: use-text-lineheight('sm');
+          }
+        }
+
+        .#{$prefix}__item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: use-spacing(8);
+          border-radius: use-border-radius('normal');
+          transition: all 0.3s;
+          background: use-color('gray', 50);
+
+          &:not(:where(.#{$prefix}__item--active, .#{$prefix}__item--disabled)):hover {
+            background-color: use-color('gray', 200);
+            color: use-color('gray', 500);
+          }
+
+          &--active {
+            color: use-color-mode('primary');
+            background-color: use-color-mode('primary', 50);
+            .#{$prefix}-item {
+              &__title {
+                color: use-color-mode('primary');
+              }
+
+              &__desc {
+                color: use-color-mode('primary');
+              }
+            }
+          }
+        }
+
         .#{$prefix}__list--scroll {
           row-gap: use-spacing(6);
         }
@@ -183,13 +257,39 @@ $prefix: '#{$component-prefix}-tabs' !default;
 
       &.#{$prefix}__list--card {
         .#{$prefix}__item {
+          margin: 0;
+          padding: use-spacing(5) use-spacing(8);
+          background-color: use-color('gray', 200);
+          border-radius: 0;
+          transition: all 0.3s;
+          line-height: use-text-lineheight('sm');
+
           &--active {
+            color: use-color-mode('primary');
+            background-color: use-color-static('white');
             border-radius: use-border-radius('normal') 0 0  use-border-radius('normal');
           }
         }
       }
 
       &.#{$prefix}__list--button {
+        .#{$prefix}__item {
+          margin: 0 0 use-spacing(2) 0;
+          padding: use-spacing(2) use-spacing(6);
+          border-radius: use-border-radius('normal');
+          transition: all 0.3s;
+
+          &:not(:where(.#{$prefix}__item--active, .#{$prefix}__item--disabled)):hover {
+            background-color: use-color('gray', 200);
+            color: use-color('gray', 500);
+          }
+
+          &--active {
+            color: use-color-mode('primary');
+            background-color: use-color-mode('primary', 50);
+          }
+        }
+
         .#{$prefix}__list--scroll {
           row-gap: use-spacing(2);
         }
@@ -212,6 +312,10 @@ $prefix: '#{$component-prefix}-tabs' !default;
         margin: 0;
         transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 
+        &::after {
+          display: none;
+        }
+
         &--prev {
           border-top: 1px dashed use-color-mode('primary');
           border-left: none;
@@ -231,84 +335,6 @@ $prefix: '#{$component-prefix}-tabs' !default;
         background-color: use-color-mode('primary');
         transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
       }
-
-      .#{$prefix}__list--card {
-        .#{$prefix}__item {
-          margin: 0;
-          padding: use-spacing(4) use-spacing(10);
-          background-color: use-color('gray', 200);
-          border-radius: 0;
-          transition: all 0.3s;
-
-          &--active {
-            color: use-color-mode('primary');
-            background-color: use-color-static('white');
-            border-radius: use-border-radius('normal') 0 0  use-border-radius('normal');
-          }
-        }
-      }
-
-      .#{$prefix}__list--button {
-        .#{$prefix}__item {
-          margin: 0 0 use-spacing(2) 0;
-          padding: use-spacing(2) use-spacing(10);
-          border-radius: use-border-radius('normal');
-          transition: all 0.3s;
-
-          &:not(:where(.#{$prefix}__item--active, .#{$prefix}__item--disabled)):hover {
-            background-color: use-color('gray', 200);
-            color: use-color('gray', 500);
-          }
-
-          &--active {
-            color: use-color-mode('primary');
-            background-color: use-color-mode('primary', 50);
-          }
-        }
-      }
-
-      .#{$prefix}__list--desc {
-        .#{$prefix}-item {
-          &__title {
-            color: use-color('gray', 700);
-          }
-
-          &__desc {
-            color: use-color('gray', 500);
-            font-size: use-text-size('sm');
-            line-height: use-text-lineheight('sm');
-          }
-        }
-        .#{$prefix}__item {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          margin: 0 0 use-spacing(6) 0;
-          padding: use-spacing(8) use-spacing(10);
-          border-radius: use-border-radius('normal');
-          transition: all 0.3s;
-          background: use-color('gray', 50);
-
-          &:not(:where(.#{$prefix}__item--active, .#{$prefix}__item--disabled)):hover {
-            background-color: use-color('gray', 200);
-            color: use-color('gray', 500);
-          }
-
-          &--active {
-            color: use-color-mode('primary');
-            background-color: use-color-mode('primary', 50);
-            .#{$prefix}-item {
-              &__title {
-                color: use-color-mode('primary');
-              }
-
-              &__desc {
-                color: use-color-mode('primary');
-              }
-            }
-          }
-        }
-      }
     }
   }
 
diff --git a/packages/ui/tabs/stories/basic.stories.tsx b/packages/ui/tabs/stories/basic.stories.tsx
index 34a382d41..e7cf5ea0f 100644
--- a/packages/ui/tabs/stories/basic.stories.tsx
+++ b/packages/ui/tabs/stories/basic.stories.tsx
@@ -27,7 +27,7 @@ export const Basic = () => {
               Content of Tab Panel 1
             </div>
           </TabPane>
-          <TabPane tabId="2" tabTitle="Tab 2" disabled>
+          <TabPane tabId="2" tabTitle="Tab 2">
             <div
               style={{
                 backgroundColor: '#f5f7fa',
diff --git a/packages/ui/tabs/stories/button.stories.tsx b/packages/ui/tabs/stories/button.stories.tsx
index 083a396e8..3a55df9f8 100644
--- a/packages/ui/tabs/stories/button.stories.tsx
+++ b/packages/ui/tabs/stories/button.stories.tsx
@@ -10,8 +10,8 @@ export const Button = () => {
     <>
       <h1>胶囊式</h1>
       <div className="tabs-basic__wrap">
-        <Tabs type="button" placement="vertical" style={{ marginBottom: 40 }}>
-          <TabPane tabId="1" tabTitle="Tab 1">
+        <Tabs type="button" placement="vertical" style={{ marginBottom: 40 }} draggable>
+          <TabPane tabId="1" tabTitle={<div style={{ padding: '0 10px' }}>Tab1</div>}>
             <div
               style={{
                 backgroundColor: '#f5f7fa',
@@ -23,7 +23,7 @@ export const Button = () => {
               Content of Tab Panel 1
             </div>
           </TabPane>
-          <TabPane tabId="2" tabTitle="Tab 2" disabled>
+          <TabPane tabId="2" tabTitle={<div style={{ padding: '0 10px' }}>Tab2</div>}>
             <div
               style={{
                 backgroundColor: '#f5f7fa',
@@ -35,7 +35,7 @@ export const Button = () => {
               Content of Tab Panel 2
             </div>
           </TabPane>
-          <TabPane tabId="3" tabTitle="Tab 3">
+          <TabPane tabId="3" tabTitle={<div style={{ padding: '0 10px' }}>Tab3</div>}>
             <div
               style={{
                 backgroundColor: '#f5f7fa',
@@ -49,7 +49,7 @@ export const Button = () => {
           </TabPane>
         </Tabs>
         <Tabs type="button" placement="horizontal" draggable>
-          <TabPane tabId="1" tabTitle="Tab 1">
+          <TabPane tabId="1" tabTitle={<div style={{ padding: '0 10px' }}>Tab1</div>}>
             <div
               style={{
                 backgroundColor: '#f5f7fa',
@@ -61,7 +61,7 @@ export const Button = () => {
               Content of Tab Panel 1
             </div>
           </TabPane>
-          <TabPane tabId="2" tabTitle="Tab 2" disabled>
+          <TabPane tabId="2" tabTitle={<div style={{ padding: '0 10px' }}>Tab2</div>}>
             <div
               style={{
                 backgroundColor: '#f5f7fa',
@@ -73,7 +73,7 @@ export const Button = () => {
               Content of Tab Panel 2
             </div>
           </TabPane>
-          <TabPane tabId="3" tabTitle="Tab 3">
+          <TabPane tabId="3" tabTitle={<div style={{ padding: '0 10px' }}>Tab3</div>}>
             <div
               style={{
                 backgroundColor: '#f5f7fa',
@@ -85,6 +85,30 @@ export const Button = () => {
               Content of Tab Panel 3
             </div>
           </TabPane>
+          <TabPane tabId="4" tabTitle={<div style={{ padding: '0 10px' }}>Tab4</div>}>
+            <div
+              style={{
+                backgroundColor: '#f5f7fa',
+                textAlign: 'center',
+                padding: 32,
+                color: '#1f2733',
+              }}
+            >
+              Content of Tab Panel 4
+            </div>
+          </TabPane>
+          <TabPane tabId="5" tabTitle={<div style={{ padding: '0 10px' }}>Tab5</div>}>
+            <div
+              style={{
+                backgroundColor: '#f5f7fa',
+                textAlign: 'center',
+                padding: 32,
+                color: '#1f2733',
+              }}
+            >
+              Content of Tab Panel 5
+            </div>
+          </TabPane>
         </Tabs>
       </div>
     </>
diff --git a/packages/ui/tabs/stories/card.stories.tsx b/packages/ui/tabs/stories/card.stories.tsx
index 6676c2b08..1dbc91e9c 100644
--- a/packages/ui/tabs/stories/card.stories.tsx
+++ b/packages/ui/tabs/stories/card.stories.tsx
@@ -23,7 +23,7 @@ export const Card = () => {
               Content of Tab Panel 1
             </div>
           </TabPane>
-          <TabPane tabId="2" tabTitle="Tab 2" disabled>
+          <TabPane tabId="2" tabTitle="Tab 2">
             <div
               style={{
                 backgroundColor: '#fff',
@@ -60,7 +60,7 @@ export const Card = () => {
               Content of Tab Panel 1
             </div>
           </TabPane>
-          <TabPane tabId="2" tabTitle="Tab 2" disabled>
+          <TabPane tabId="2" tabTitle="Tab 2">
             <div
               style={{
                 textAlign: 'center',
diff --git a/packages/ui/tabs/stories/desc.stories.tsx b/packages/ui/tabs/stories/desc.stories.tsx
index 7969498c7..1b41ae6f4 100644
--- a/packages/ui/tabs/stories/desc.stories.tsx
+++ b/packages/ui/tabs/stories/desc.stories.tsx
@@ -10,7 +10,7 @@ export const Desc = () => {
       <h1>带描述</h1>
       <div className="tabs-basic__wrap">
         <Tabs type="desc" placement="vertical" style={{ marginBottom: 40 }}>
-          <TabPane tabId="1" tabTitle="Tab 1" tabDesc="关于标签的描">
+          <TabPane tabId="1" tabTitle="Tab 1" tabDesc="关于标签的描述信息">
             <div
               style={{
                 backgroundColor: '#f5f7fa',
@@ -22,7 +22,7 @@ export const Desc = () => {
               Content of Tab Panel 1
             </div>
           </TabPane>
-          <TabPane tabId="2" tabTitle="Tab 2" disabled tabDesc="关于标签的描">
+          <TabPane tabId="2" tabTitle="Tab 2" tabDesc="关于标签的描述信息">
             <div
               style={{
                 backgroundColor: '#f5f7fa',
@@ -34,7 +34,7 @@ export const Desc = () => {
               Content of Tab Panel 2
             </div>
           </TabPane>
-          <TabPane tabId="3" tabTitle="Tab 3" tabDesc="关于标签的描">
+          <TabPane tabId="3" tabTitle="Tab 3" tabDesc="关于标签的描述信息">
             <div
               style={{
                 backgroundColor: '#f5f7fa',
@@ -48,7 +48,7 @@ export const Desc = () => {
           </TabPane>
         </Tabs>
         <Tabs type="desc" placement="horizontal">
-          <TabPane tabId="1" tabTitle="Tab 1" tabDesc="关于标签的描">
+          <TabPane tabId="1" tabTitle="Tab 1" tabDesc="关于标签的描述信息">
             <div
               style={{
                 backgroundColor: '#f5f7fa',
@@ -60,7 +60,7 @@ export const Desc = () => {
               Content of Tab Panel 1
             </div>
           </TabPane>
-          <TabPane tabId="2" tabTitle="Tab 2" disabled tabDesc="关于标签的描">
+          <TabPane tabId="2" tabTitle="Tab 2" tabDesc="关于标签的描述信息">
             <div
               style={{
                 backgroundColor: '#f5f7fa',
@@ -72,7 +72,7 @@ export const Desc = () => {
               Content of Tab Panel 2
             </div>
           </TabPane>
-          <TabPane tabId="3" tabTitle="Tab 3" tabDesc="关于标签的描">
+          <TabPane tabId="3" tabTitle="Tab 3" tabDesc="关于标签的描述信息">
             <div
               style={{
                 backgroundColor: '#f5f7fa',
diff --git a/packages/ui/tabs/stories/disabled.stories.tsx b/packages/ui/tabs/stories/disabled.stories.tsx
new file mode 100644
index 000000000..ee95c7a03
--- /dev/null
+++ b/packages/ui/tabs/stories/disabled.stories.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import { Tabs, TabPane } from '../src'
+import Button from '@hi-ui/button'
+
+/**
+ * @title 禁用状态
+ */
+export const Disabled = () => {
+  const [activeTab, setActiveTab] = React.useState<React.ReactText>('1')
+
+  return (
+    <>
+      <h1>Disabled</h1>
+      <div className="tabs-disabled__wrap">
+        <Button onClick={() => setActiveTab('2')}>更新面板</Button>
+        <Tabs style={{ marginTop: 16 }} activeId={activeTab} onChange={setActiveTab}>
+          <TabPane tabId="1" tabTitle="Tab 1">
+            <div
+              style={{
+                backgroundColor: '#f5f7fa',
+                textAlign: 'center',
+                padding: 32,
+                color: '#1f2733',
+              }}
+            >
+              Content of Tab Panel 1
+            </div>
+          </TabPane>
+          <TabPane tabId="2" tabTitle="Tab 2" disabled>
+            <div
+              style={{
+                backgroundColor: '#f5f7fa',
+                textAlign: 'center',
+                padding: 32,
+                color: '#1f2733',
+              }}
+            >
+              Content of Tab Panel 2
+            </div>
+          </TabPane>
+          <TabPane tabId="3" tabTitle="Tab 3">
+            <div
+              style={{
+                backgroundColor: '#f5f7fa',
+                textAlign: 'center',
+                padding: 32,
+                color: '#1f2733',
+              }}
+            >
+              Content of Tab Panel 3
+            </div>
+          </TabPane>
+        </Tabs>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/tabs/stories/draggable.stories.tsx b/packages/ui/tabs/stories/draggable.stories.tsx
index e451ec469..b1525c1ef 100644
--- a/packages/ui/tabs/stories/draggable.stories.tsx
+++ b/packages/ui/tabs/stories/draggable.stories.tsx
@@ -31,7 +31,7 @@ export const Draggable = () => {
               Content of Tab Panel 1
             </div>
           </TabPane>
-          <TabPane tabId="2" tabTitle="Tab 2" disabled>
+          <TabPane tabId="2" tabTitle="Tab 2">
             <div
               style={{
                 backgroundColor: '#f5f7fa',
diff --git a/packages/ui/tabs/stories/editable.stories.tsx b/packages/ui/tabs/stories/editable.stories.tsx
index 183faddf5..2dcbc116d 100644
--- a/packages/ui/tabs/stories/editable.stories.tsx
+++ b/packages/ui/tabs/stories/editable.stories.tsx
@@ -31,7 +31,7 @@ export const Editable = () => {
               Content of Tab Panel 1
             </div>
           </TabPane>
-          <TabPane tabId="2" tabTitle="Tab 2" disabled>
+          <TabPane tabId="2" tabTitle="Tab 2">
             <div
               style={{
                 backgroundColor: '#f5f7fa',
diff --git a/packages/ui/tabs/stories/extra.stories.tsx b/packages/ui/tabs/stories/extra.stories.tsx
index 8c842aaad..c6955069c 100644
--- a/packages/ui/tabs/stories/extra.stories.tsx
+++ b/packages/ui/tabs/stories/extra.stories.tsx
@@ -23,7 +23,7 @@ export const Extra = () => {
               Content of Tab Panel 1
             </div>
           </TabPane>
-          <TabPane tabId="2" tabTitle="Tab 2" disabled>
+          <TabPane tabId="2" tabTitle="Tab 2">
             <div
               style={{
                 backgroundColor: '#f5f7fa',
diff --git a/packages/ui/tabs/stories/index.stories.tsx b/packages/ui/tabs/stories/index.stories.tsx
index 81b6812ff..397a9f268 100644
--- a/packages/ui/tabs/stories/index.stories.tsx
+++ b/packages/ui/tabs/stories/index.stories.tsx
@@ -3,6 +3,7 @@ import Tabs from '../src'
 
 export * from './basic.stories'
 export * from './vertical.stories'
+export * from './disabled.stories'
 export * from './editable.stories'
 export * from './scroll.stories'
 // export * from './draggable.stories'
diff --git a/packages/ui/tabs/stories/nested.stories.tsx b/packages/ui/tabs/stories/nested.stories.tsx
index 7a253d787..35835484f 100644
--- a/packages/ui/tabs/stories/nested.stories.tsx
+++ b/packages/ui/tabs/stories/nested.stories.tsx
@@ -22,7 +22,7 @@ export const Nested = () => {
               Content of Tab Panel 1
             </div>
           </TabPane>
-          <TabPane tabId="2" tabTitle="Tab 2" disabled>
+          <TabPane tabId="2" tabTitle="Tab 2">
             <div
               style={{
                 backgroundColor: '#f5f7fa',
@@ -48,7 +48,7 @@ export const Nested = () => {
                   Content of Tab Panel 1
                 </div>
               </TabPane>
-              <TabPane tabId="2" tabTitle="Sub Tab 2" disabled>
+              <TabPane tabId="2" tabTitle="Sub Tab 2">
                 <div
                   style={{
                     backgroundColor: '#f5f7fa',
@@ -90,7 +90,7 @@ export const Nested = () => {
               Content of Tab Panel 1
             </div>
           </TabPane>
-          <TabPane tabId="2" tabTitle="Tab 2" disabled>
+          <TabPane tabId="2" tabTitle="Tab 2">
             <div
               style={{
                 backgroundColor: '#f5f7fa',
@@ -116,7 +116,7 @@ export const Nested = () => {
                   Content of Tab Panel 1
                 </div>
               </TabPane>
-              <TabPane tabId="2" tabTitle="Sub Tab 2" disabled>
+              <TabPane tabId="2" tabTitle="Sub Tab 2">
                 <div
                   style={{
                     backgroundColor: '#f5f7fa',
diff --git a/packages/ui/tabs/stories/with-icon.stories.tsx b/packages/ui/tabs/stories/with-icon.stories.tsx
index 7b4800a3a..2cbc72e7a 100644
--- a/packages/ui/tabs/stories/with-icon.stories.tsx
+++ b/packages/ui/tabs/stories/with-icon.stories.tsx
@@ -39,7 +39,6 @@ export const WithIcon = () => {
                 结果
               </span>
             }
-            disabled
           >
             <div
               style={{

From 31a7c8ddde8b41459b7c948806b6ea36b375eff4 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Thu, 2 Nov 2023 14:32:15 +0800
Subject: [PATCH 2/2] =?UTF-8?q?chore(tabs):=20=E4=BF=AE=E6=94=B9=E5=8F=98?=
 =?UTF-8?q?=E6=9B=B4=E8=AE=B0=E5=BD=95=E6=96=87=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/little-cherries-dress.md | 2 +-
 .changeset/quick-donuts-mix.md      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/little-cherries-dress.md b/.changeset/little-cherries-dress.md
index fbb72a118..8db3b4738 100644
--- a/.changeset/little-cherries-dress.md
+++ b/.changeset/little-cherries-dress.md
@@ -2,4 +2,4 @@
 "@hi-ui/tabs": patch
 ---
 
-chore: 胶囊样式下标签之前增加竖线展示
+chore: 胶囊样式下标签之间增加竖线展示
diff --git a/.changeset/quick-donuts-mix.md b/.changeset/quick-donuts-mix.md
index bb77462d8..71b70a2f7 100644
--- a/.changeset/quick-donuts-mix.md
+++ b/.changeset/quick-donuts-mix.md
@@ -2,4 +2,4 @@
 "@hi-ui/hiui": patch
 ---
 
-Tabs chore: 胶囊样式下标签之前增加竖线展示
+Tabs chore: 胶囊样式下标签之间增加竖线展示