From 66ba41e54dc7774c2207df785fa5d95d0775d280 Mon Sep 17 00:00:00 2001
From: liangguanhui <liangguanhui0117@qq.com>
Date: Sun, 10 Aug 2025 22:17:50 +0800
Subject: [PATCH 1/4] feat(tabs): add header-only

---
 examples/sites/demos/apis/tabs.js             | 12 +++++++
 .../sites/demos/pc/app/tabs/header-only.vue   | 36 +++++++++++++++++++
 .../sites/demos/pc/app/tabs/webdoc/tabs.js    | 14 ++++----
 packages/renderless/src/tabs/vue.ts           |  3 +-
 packages/renderless/types/tabs.type.ts        |  1 +
 packages/vue/src/tab-item/src/pc.vue          |  2 +-
 packages/vue/src/tabs/src/index.ts            |  4 ++-
 packages/vue/src/tabs/src/pc.vue              | 11 +++---
 8 files changed, 68 insertions(+), 15 deletions(-)
 create mode 100644 examples/sites/demos/pc/app/tabs/header-only.vue

diff --git a/examples/sites/demos/apis/tabs.js b/examples/sites/demos/apis/tabs.js
index 276c7ac249..21c5600155 100644
--- a/examples/sites/demos/apis/tabs.js
+++ b/examples/sites/demos/apis/tabs.js
@@ -294,6 +294,18 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'overflow-title',
           mfDemo: ''
+        },
+        {
+          name: 'header-only',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '当 header-only 为 true 时，页签内容不再渲染',
+            'en-US': 'When header-only is true, the tab content is no longer rendered'
+          },
+          mode: ['pc'],
+          pcDemo: 'header-only',
+          mfDemo: ''
         }
       ],
       events: [
diff --git a/examples/sites/demos/pc/app/tabs/header-only.vue b/examples/sites/demos/pc/app/tabs/header-only.vue
new file mode 100644
index 0000000000..ac67f7610c
--- /dev/null
+++ b/examples/sites/demos/pc/app/tabs/header-only.vue
@@ -0,0 +1,36 @@
+<template>
+  <tiny-tabs tab-style="card" style="width: 500px" :position="position" header-only>
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
+      {{ item.content }}
+    </tiny-tab-item>
+  </tiny-tabs>
+</template>
+
+<script lang="jsx">
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTabs,
+    TinyTabItem
+  },
+  data() {
+    return {
+      position: 'left',
+      tabs: [
+        {
+          title: 'Tab 1',
+          name: '1',
+          content: 'Tab 1 content '
+        },
+        {
+          title: 'Tab 2',
+          name: '2',
+          content: 'Tab 2 content'
+        }
+      ],
+      tabIndex: 2
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/tabs/webdoc/tabs.js b/examples/sites/demos/pc/app/tabs/webdoc/tabs.js
index a9bbd23432..107e48e5ce 100644
--- a/examples/sites/demos/pc/app/tabs/webdoc/tabs.js
+++ b/examples/sites/demos/pc/app/tabs/webdoc/tabs.js
@@ -270,18 +270,16 @@ export default {
       codeFiles: ['tabs-events-edit.vue']
     },
     {
-      demoId: 'overflow-title',
+      demoId: 'header-only',
       name: {
-        'zh-CN': '超出显示 tooltip',
-        'en-US': 'Out of Display tooltip'
+        'zh-CN': '仅展示头部',
+        'en-US': 'Header only'
       },
       desc: {
-        'zh-CN':
-          '通过 <code>overflow-title</code> 设置标题超出一定长度（默认 256px）时隐藏并显示...，鼠标移到标题上可显示 tooltip，<code>title-width</code>设置标题超出的长度。',
-        'en-US':
-          'Use <code>overflow-title</code> to set the title to hide and show when it exceeds a certain length (default 256px)... , move the cursor to the title to display the tooltip, and set <code>title-width</code> to the excess length of the title.'
+        'zh-CN': '通过 <code>header-only</code> 仅展示头部。',
+        'en-US': 'Use <code>>header-only</code> header only.'
       },
-      codeFiles: ['overflow-title.vue']
+      codeFiles: ['header-only.vue']
     }
   ],
   features: [
diff --git a/packages/renderless/src/tabs/vue.ts b/packages/renderless/src/tabs/vue.ts
index 8b8e3c066b..dace6254a3 100644
--- a/packages/renderless/src/tabs/vue.ts
+++ b/packages/renderless/src/tabs/vue.ts
@@ -62,7 +62,8 @@ const initState = ({ reactive, props }: Pick<ITabsRenderlessParams, 'reactive' |
     direction: '',
     expandPanesWidth: '',
     activeIndex: 1,
-    separator: props.separator
+    separator: props.separator,
+    headerOnly: props.headerOnly
   }) as ITabsState
 
 const initWatcher = ({
diff --git a/packages/renderless/types/tabs.type.ts b/packages/renderless/types/tabs.type.ts
index 44ddea0293..295bc2f267 100644
--- a/packages/renderless/types/tabs.type.ts
+++ b/packages/renderless/types/tabs.type.ts
@@ -33,6 +33,7 @@ export interface ITabsState {
   activeIndex: number
   morePanes?: ITabsPaneVm[]
   separator?: boolean
+  headerOnly?: boolean
 }
 
 /**
diff --git a/packages/vue/src/tab-item/src/pc.vue b/packages/vue/src/tab-item/src/pc.vue
index 6107ea696b..36c27f9609 100644
--- a/packages/vue/src/tab-item/src/pc.vue
+++ b/packages/vue/src/tab-item/src/pc.vue
@@ -11,7 +11,7 @@
  -->
 <template>
   <div
-    v-if="!lazy || state.loaded || state.active"
+    v-if="!state.rootTabs.headerOnly && (!lazy || state.loaded || state.active)"
     v-show="state.active"
     :aria-hidden="!state.active"
     :id="`pane-${state.paneName}`"
diff --git a/packages/vue/src/tabs/src/index.ts b/packages/vue/src/tabs/src/index.ts
index 6380a5d3c3..8da58a5f4c 100644
--- a/packages/vue/src/tabs/src/index.ts
+++ b/packages/vue/src/tabs/src/index.ts
@@ -69,7 +69,9 @@ export const tabsProps = {
   // tiny 新增
   moreShowAll: Boolean,
   panelMaxHeight: String,
-  panelWidth: String
+  panelWidth: String,
+  // 只渲染头部
+  headerOnly: Boolean
 }
 
 export default defineComponent({
diff --git a/packages/vue/src/tabs/src/pc.vue b/packages/vue/src/tabs/src/pc.vue
index ba12352b31..c961a3d84a 100644
--- a/packages/vue/src/tabs/src/pc.vue
+++ b/packages/vue/src/tabs/src/pc.vue
@@ -52,7 +52,8 @@ export default defineComponent({
     'titleWidth',
     'moreShowAll',
     'panelMaxHeight',
-    'panelWidth'
+    'panelWidth',
+    'headerOnly'
   ],
   components: {
     TabNav,
@@ -78,7 +79,6 @@ export default defineComponent({
       handleTabDragEnd,
       editable,
       withAdd,
-      position,
       size,
       stretch,
       showMoreTabs,
@@ -89,9 +89,12 @@ export default defineComponent({
       overflowTitle,
       titleWidth,
       panelMaxHeight,
-      panelWidth
+      panelWidth,
+      headerOnly
     } = this
 
+    const position = headerOnly ? 'top' : this.position
+
     const newButton =
       editable || withAdd ? (
         <span
@@ -150,7 +153,7 @@ export default defineComponent({
       </div>
     )
 
-    const panels = <div class="tiny-tabs__content">{this.slots.default && this.slots.default()}</div>
+    const panels = headerOnly ? this.slots.default?.() : <div class="tiny-tabs__content">{this.slots.default?.()}</div>
 
     return (
       <div

From b2045551d2158ddc64248b188b467cf5efeddfaa Mon Sep 17 00:00:00 2001
From: LiangGuanhui <liangguanhui0117@qq.com>
Date: Fri, 15 Aug 2025 09:58:14 +0800
Subject: [PATCH 2/4] docs(tabs): revert overflow-title

---
 examples/sites/demos/pc/app/tabs/webdoc/tabs.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/examples/sites/demos/pc/app/tabs/webdoc/tabs.js b/examples/sites/demos/pc/app/tabs/webdoc/tabs.js
index 107e48e5ce..c2e1728ae0 100644
--- a/examples/sites/demos/pc/app/tabs/webdoc/tabs.js
+++ b/examples/sites/demos/pc/app/tabs/webdoc/tabs.js
@@ -269,6 +269,20 @@ export default {
       },
       codeFiles: ['tabs-events-edit.vue']
     },
+    {
+      demoId: 'overflow-title',
+      name: {
+        'zh-CN': '超出显示 tooltip',
+        'en-US': 'Out of Display tooltip'
+      },
+      desc: {
+        'zh-CN':
+          '通过 <code>overflow-title</code> 设置标题超出一定长度（默认 256px）时隐藏并显示...，鼠标移到标题上可显示 tooltip，<code>title-width</code>设置标题超出的长度。',
+        'en-US':
+          'Use <code>overflow-title</code> to set the title to hide and show when it exceeds a certain length (default 256px)... , move the cursor to the title to display the tooltip, and set <code>title-width</code> to the excess length of the title.'
+      },
+      codeFiles: ['overflow-title.vue']
+    },
     {
       demoId: 'header-only',
       name: {

From cd3ed637b0fa5069b54ba4e45f9e5f0f49ee108d Mon Sep 17 00:00:00 2001
From: LiangGuanhui <liangguanhui0117@qq.com>
Date: Fri, 15 Aug 2025 10:13:04 +0800
Subject: [PATCH 3/4] docs(tabs): improve header-only description

---
 examples/sites/demos/apis/tabs.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/sites/demos/apis/tabs.js b/examples/sites/demos/apis/tabs.js
index 21c5600155..0429a1df77 100644
--- a/examples/sites/demos/apis/tabs.js
+++ b/examples/sites/demos/apis/tabs.js
@@ -300,8 +300,8 @@ export default {
           type: 'boolean',
           defaultValue: 'false',
           desc: {
-            'zh-CN': '当 header-only 为 true 时，页签内容不再渲染',
-            'en-US': 'When header-only is true, the tab content is no longer rendered'
+            'zh-CN': '当 header-only 为 true 时，页签内容不再渲染，并且 position 将被设置为固定值 top',
+            'en-US': 'When header-only is true, the tab content will no longer be rendered, and the position will be set to a fixed value of top'
           },
           mode: ['pc'],
           pcDemo: 'header-only',

From 9619b4534b2d258b75b81e5a10ea4f8fc87d79c3 Mon Sep 17 00:00:00 2001
From: liangguanhui <liangguanhui0117@qq.com>
Date: Sat, 23 Aug 2025 00:32:33 +0800
Subject: [PATCH 4/4] feat(tabs): header-only support all positions

---
 examples/sites/demos/apis/tabs.js             |  4 +-
 .../sites/demos/pc/app/tabs/header-only.vue   | 78 ++++++++++++-------
 packages/theme/src/tabs/index.less            | 29 +++++++
 packages/vue/src/tabs/src/pc.vue              |  6 +-
 4 files changed, 83 insertions(+), 34 deletions(-)

diff --git a/examples/sites/demos/apis/tabs.js b/examples/sites/demos/apis/tabs.js
index 0429a1df77..21c5600155 100644
--- a/examples/sites/demos/apis/tabs.js
+++ b/examples/sites/demos/apis/tabs.js
@@ -300,8 +300,8 @@ export default {
           type: 'boolean',
           defaultValue: 'false',
           desc: {
-            'zh-CN': '当 header-only 为 true 时，页签内容不再渲染，并且 position 将被设置为固定值 top',
-            'en-US': 'When header-only is true, the tab content will no longer be rendered, and the position will be set to a fixed value of top'
+            'zh-CN': '当 header-only 为 true 时，页签内容不再渲染',
+            'en-US': 'When header-only is true, the tab content is no longer rendered'
           },
           mode: ['pc'],
           pcDemo: 'header-only',
diff --git a/examples/sites/demos/pc/app/tabs/header-only.vue b/examples/sites/demos/pc/app/tabs/header-only.vue
index ac67f7610c..e27485ef03 100644
--- a/examples/sites/demos/pc/app/tabs/header-only.vue
+++ b/examples/sites/demos/pc/app/tabs/header-only.vue
@@ -1,36 +1,56 @@
 <template>
-  <tiny-tabs tab-style="card" style="width: 500px" :position="position" header-only>
-    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
-      {{ item.content }}
-    </tiny-tab-item>
-  </tiny-tabs>
+  <div class="tab-demo-position">
+    <tiny-radio-group v-model="position" class="mb10">
+      <tiny-radio-button label="top">top 显示</tiny-radio-button>
+      <tiny-radio-button label="bottom">bottom 显示</tiny-radio-button>
+      <tiny-radio-button label="left">left 显示</tiny-radio-button>
+      <tiny-radio-button label="right">right 显示</tiny-radio-button>
+    </tiny-radio-group>
+    <tiny-tabs v-model="activeName4" tab-style="card" :position="position" header-only>
+      <tiny-tab-item v-for="item in tabs3" :key="item.name" :title="item.title" :name="item.name">
+        {{ item.content }}
+      </tiny-tab-item>
+    </tiny-tabs>
+  </div>
 </template>
 
-<script lang="jsx">
-import { TinyTabs, TinyTabItem } from '@opentiny/vue'
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { TinyTabs, TinyTabItem, TinyRadioGroup, TinyRadioButton } from '@opentiny/vue'
 
-export default {
-  components: {
-    TinyTabs,
-    TinyTabItem
+const activeName4 = ref('navigation1')
+const position = ref('left')
+const tabs3 = ref([
+  {
+    name: 'navigation1',
+    title: 'Navigation 1',
+    content: 'Navigation 1'
   },
-  data() {
-    return {
-      position: 'left',
-      tabs: [
-        {
-          title: 'Tab 1',
-          name: '1',
-          content: 'Tab 1 content '
-        },
-        {
-          title: 'Tab 2',
-          name: '2',
-          content: 'Tab 2 content'
-        }
-      ],
-      tabIndex: 2
-    }
+  {
+    name: 'navigation2',
+    title: 'Navigation 2',
+    content: 'Navigation 2'
+  },
+  {
+    name: 'navigation3',
+    title: 'Navigation 3',
+    content: 'Navigation 3'
+  },
+  {
+    name: 'navigation4',
+    title: 'Navigation 4',
+    content: 'Navigation 4'
+  },
+  {
+    name: 'navigation5',
+    title: 'Navigation 5',
+    content: 'Navigation 5'
   }
-}
+])
 </script>
+
+<style scoped>
+.tab-demo-position {
+  min-height: 250px;
+}
+</style>
diff --git a/packages/theme/src/tabs/index.less b/packages/theme/src/tabs/index.less
index 28e432186a..3a98eefc5c 100644
--- a/packages/theme/src/tabs/index.less
+++ b/packages/theme/src/tabs/index.less
@@ -1317,6 +1317,35 @@
     }
   }
 
+  // 仅渲染头部
+  &&--header-only {
+
+    &:is(.@{tabs-prefix-cls}--left) {
+      width: 120px;
+    }
+
+    &.@{tabs-prefix-cls}--left .@{tabs-prefix-cls}__header {
+      float: none;
+      margin-right: 0;
+      display: block;
+    }
+
+    &:is(.@{tabs-prefix-cls}--right) {
+      width: 120px;
+    }
+
+    &.@{tabs-prefix-cls}--right .@{tabs-prefix-cls}__header {
+      float: none;
+      margin-left: 0;
+      display: block;
+    }
+
+    &.@{tabs-prefix-cls}--bottom .@{tabs-prefix-cls}__header {
+      margin-top: 0;
+    }
+
+  }
+
   // 动效
   .slideInLeft-transition,
   .slideInRight-transition {
diff --git a/packages/vue/src/tabs/src/pc.vue b/packages/vue/src/tabs/src/pc.vue
index c961a3d84a..0b1ba515ef 100644
--- a/packages/vue/src/tabs/src/pc.vue
+++ b/packages/vue/src/tabs/src/pc.vue
@@ -79,6 +79,7 @@ export default defineComponent({
       handleTabDragEnd,
       editable,
       withAdd,
+      position,
       size,
       stretch,
       showMoreTabs,
@@ -93,8 +94,6 @@ export default defineComponent({
       headerOnly
     } = this
 
-    const position = headerOnly ? 'top' : this.position
-
     const newButton =
       editable || withAdd ? (
         <span
@@ -164,7 +163,8 @@ export default defineComponent({
           'tiny-tabs--border-card': tabStyle === 'border-card',
           'tiny-tabs--button-card': tabStyle === 'button-card',
           'tiny-tabs--small': size === 'small',
-          'tiny-tabs--large': size === 'large'
+          'tiny-tabs--large': size === 'large',
+          'tiny-tabs--header-only': headerOnly
         }}>
         {position !== 'bottom' ? [header, panels] : [panels, header]}
       </div>