diff --git a/packages/fighting-design/tabs/src/tabs.vue b/packages/fighting-design/tabs/src/tabs.vue
index 852589acf5..7ba242442b 100644
--- a/packages/fighting-design/tabs/src/tabs.vue
+++ b/packages/fighting-design/tabs/src/tabs.vue
@@ -141,7 +141,9 @@
     <!-- 头部内容 -->
     <div class="f-tabs__head">
       <!-- 前缀插槽 -->
-      <slot v-if="$slots.prefix" name="prefix" />
+      <div v-if="$slots.prefix" class="f-tabs__prefix">
+        <slot name="prefix" />
+      </div>
 
       <!-- 标签列表 -->
       <div class="f-tabs__navs">
@@ -159,7 +161,9 @@
       </div>
 
       <!-- 后缀插槽 -->
-      <slot v-if="$slots.suffix" name="suffix" />
+      <div v-if="$slots.suffix" class="f-tabs__suffix">
+        <slot name="suffix" />
+      </div>
     </div>
 
     <!-- 主要展示的内容 -->
diff --git a/packages/fighting-theme/src/radio-group.scss b/packages/fighting-theme/src/radio-group.scss
index 9523b90598..879b378d4d 100644
--- a/packages/fighting-theme/src/radio-group.scss
+++ b/packages/fighting-theme/src/radio-group.scss
@@ -24,7 +24,7 @@
 
     .f-radio {
       .f-radio__text {
-        color: rgb(142, 142, 160);
+        color: #8e8ea0;
       }
 
       // 选中的
diff --git a/packages/fighting-theme/src/tabs.scss b/packages/fighting-theme/src/tabs.scss
index c33fe13dda..fb5f71dd6f 100644
--- a/packages/fighting-theme/src/tabs.scss
+++ b/packages/fighting-theme/src/tabs.scss
@@ -2,140 +2,219 @@
   display: flex;
   flex-direction: column;
 
+  // 头部
   &__head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     column-gap: 13px;
 
+    // 前缀后缀
+    .f-tabs__prefix,
+    .f-tabs__suffix {
+      display: flex;
+      padding: 6px 12px;
+      box-sizing: border-box;
+    }
+
+    // 菜单栏
     .f-tabs__navs {
       width: 100%;
     }
-  } 
+  }
 
   // 菜单栏
   // 线性类型
   &__line {
-    .f-tabs__navs {
-      display: flex;
-      justify-content: var(--tabs-justify-content);
+    .f-tabs__head {
+      .f-tabs__navs {
+        display: flex;
+        justify-content: var(--tabs-justify-content);
+
+        // 每一项
+        .f-tabs__nav-item {
+          cursor: pointer;
+          padding: 10px 7px;
+          box-sizing: border-box;
+          font-size: 15px;
+          user-select: none;
+
+          // 选中状态
+          &.f-tabs__nav-active {
+            color: #2d5af1;
+            border-color: #2d5af1;
+          }
+        }
+      }
+    }
+
+    &.f-tabs__bottom .f-tabs__navs {
+      column-gap: 12px;
 
-      // 每一项
       .f-tabs__nav-item {
-        cursor: pointer;
-        padding: 10px 7px;
-        box-sizing: border-box;
-        font-size: 15px;
-        user-select: none;
+        border-top: 2px solid transparent;
+      }
+    }
 
-        // 选中状态
-        &.f-tabs__nav-active {
-          color: #2d5af1;
-          border-color: #2d5af1;
-        }
+    &.f-tabs__top .f-tabs__navs {
+      column-gap: 12px;
+
+      .f-tabs__nav-item {
+        border-bottom: 2px solid transparent;
       }
     }
+
+    &.f-tabs__right .f-tabs__nav-item {
+      border-left: 2px solid transparent;
+    }
+
+    &.f-tabs__left .f-tabs__nav-item {
+      border-right: 2px solid transparent;
+    }
   }
 
   // 卡片类型
   &__card {
-    .f-tabs__navs {
-      display: flex;
-      justify-content: var(--tabs-justify-content);
-
-      .f-tabs__nav-item {
-        padding: 4px 12px;
-        border: 1px solid #ddd;
-        cursor: pointer;
+    .f-tabs__head {
+      .f-tabs__navs {
         display: flex;
-        align-items: center;
-        user-select: none;
-        background-color: #f5f7fa;
+        justify-content: var(--tabs-justify-content);
+
+        .f-tabs__nav-item {
+          padding: 4px 12px;
+          border: 1px solid #ddd;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          user-select: none;
+          background-color: #f5f7fa;
+          color: #8e8ea0;
+
+          // 选中状态
+          &.f-tabs__nav-active {
+            color: #2d5af1;
+            background-color: #fff;
+          }
+        }
       }
     }
+
+    // 右侧的圆角
+    &.f-tabs__right .f-tabs__head .f-tabs__navs .f-tabs__nav-item {
+      border-bottom-right-radius: 8px;
+      border-top-right-radius: 8px;
+    }
+
+    // 左侧的圆角
+    &.f-tabs__left .f-tabs__head .f-tabs__navs .f-tabs__nav-item {
+      border-bottom-left-radius: 8px;
+      border-top-left-radius: 8px;
+    }
+
+    // 上侧的圆角
+    &.f-tabs__top .f-tabs__head .f-tabs__navs .f-tabs__nav-item {
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+    }
+
+    // 下侧的圆角
+    &.f-tabs__bottom .f-tabs__head .f-tabs__navs .f-tabs__nav-item {
+      border-bottom-left-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
   }
 
   // 分段类型
   &__segment {
-    .f-tabs__navs {
-      display: flex;
-      justify-content: var(--tabs-justify-content);
-      background: #f7f7f7;
-      padding: 4px;
-      box-sizing: border-box;
-
-      .f-tabs__nav-item {
-        flex: 1;
-        padding: 4px 12px;
-        cursor: pointer;
+    .f-tabs__head {
+      .f-tabs__navs {
         display: flex;
-        justify-content: center;
-        align-items: center;
-        user-select: none;
-        background-color: transparent;
-        text-align: center;
-        word-break: keep-all;
-        padding: 4px 8px;
-
-        // 选中状态
-        &.f-tabs__nav-active {
-          color: #2d5af1;
-          background-color: #fff;
+        justify-content: var(--tabs-justify-content);
+        background: #f7f7f7;
+        padding: 4px;
+        box-sizing: border-box;
+
+        .f-tabs__nav-item {
+          flex: 1;
+          padding: 4px 12px;
+          cursor: pointer;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          user-select: none;
+          background-color: transparent;
+          text-align: center;
+          word-break: keep-all;
+          padding: 4px 8px;
+          color: #8e8ea0;
+
+          // 选中状态
+          &.f-tabs__nav-active {
+            color: #2d5af1;
+            background-color: #fff;
+          }
         }
       }
     }
   }
 
   // 不同的 nav 列表方向
-  // 上
+  // 上部
   &__top {
     flex-direction: column;
 
-    .f-tabs__navs {
-      column-gap: 12px;
+    .f-tabs__head {
       border-bottom: 1px solid #ddd;
-
-      .f-tabs__nav-item {
-        border-bottom: 2px solid transparent;
-      }
+      align-items: end;
     }
   }
 
+  // 底部
   &__bottom {
     flex-direction: column-reverse;
 
-    .f-tabs__navs {
-      column-gap: 12px;
+    .f-tabs__head {
       border-top: 1px solid #ddd;
-
-      .f-tabs__nav-item {
-        border-top: 2px solid transparent;
-      }
+      align-items: start;
     }
   }
 
+  // 左侧
   &__left {
     flex-direction: row;
 
-    .f-tabs__navs {
+    .f-tabs__head {
       flex-direction: column;
       border-right: 1px solid #ddd;
 
-      .f-tabs__nav-item {
-        border-right: 2px solid transparent;
+      // 前缀后缀
+      .f-tabs__prefix,
+      .f-tabs__suffix {
+        width: 100%;
+      }
+
+      .f-tabs__navs {
+        flex-direction: column;
       }
     }
   }
 
+  // 右侧
   &__right {
     flex-direction: row-reverse;
 
-    .f-tabs__navs {
+    .f-tabs__head {
       flex-direction: column;
       border-left: 1px solid #ddd;
 
-      .f-tabs__nav-item {
-        border-left: 2px solid transparent;
+      // 前缀后缀
+      .f-tabs__prefix,
+      .f-tabs__suffix {
+        width: 100%;
+      }
+
+      .f-tabs__navs {
+        flex-direction: column;
       }
     }
   }
diff --git a/start/src/App.vue b/start/src/App.vue
index 762eb2d885..1e559f0c08 100644
--- a/start/src/App.vue
+++ b/start/src/App.vue
@@ -8,8 +8,9 @@
   {{ act }}
   <f-tabs
     v-model="act"
-    position="top"
+    position="left"
     trigger="click"
+    type="line"
   >
     <template #prefix>
       <f-button type="primary">前缀</f-button>
@@ -19,7 +20,8 @@
     </template>
 
     <f-tabs-item label="如烟">
-      <p>七岁的那一年，抓住那只蝉，以为能抓住夏天；</p>
+      等哈时间的哈市绝对会撒娇
+      <!-- <p>七岁的那一年，抓住那只蝉，以为能抓住夏天；</p> -->
       <!-- <p>十七岁的那年，吻过他的脸，就以为和他能永远。</p> -->
     </f-tabs-item>
     <f-tabs-item label="盛夏光年" name="222">