diff --git a/packages/ui-vue/components/tabs/src/components/tab-page.props.ts b/packages/ui-vue/components/tabs/src/components/tab-page.props.ts
index 9950369829ba9c5ea40718663ca5e7b4d6939305..4bcacc211738ab895e8da4838705a9ee87bab438 100644
--- a/packages/ui-vue/components/tabs/src/components/tab-page.props.ts
+++ b/packages/ui-vue/components/tabs/src/components/tab-page.props.ts
@@ -1,4 +1,5 @@
-import { ExtractPropTypes } from 'vue';
+import { ExtractPropTypes, PropType } from 'vue';
+import { ToolbarPosition, ToolbarContentsConf } from '../composition/types'
 
 export const tabPageProps = {
     tabWidth: { type: Number, default: -1 },
@@ -9,6 +10,8 @@ export const tabPageProps = {
     selected: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     removeable: { type: Boolean, default: false },
-    show: { type: Boolean, default: true }
+    show: { type: Boolean, default: true },
+    toolbar: { type: Object as PropType<ToolbarContentsConf> },
+    toolbarPosition: { type: String as PropType<ToolbarPosition>, default: 'inContent' }
 };
 export type TabPageProps = ExtractPropTypes<typeof tabPageProps>;
diff --git a/packages/ui-vue/components/tabs/src/composition/types.ts b/packages/ui-vue/components/tabs/src/composition/types.ts
index df06a3f6386a26e3c4254d3ed56bd76c9c5bdfae..e97b09081e56f59f81230824e5091b0cac5a931b 100644
--- a/packages/ui-vue/components/tabs/src/composition/types.ts
+++ b/packages/ui-vue/components/tabs/src/composition/types.ts
@@ -10,4 +10,13 @@ export interface TabsContext {
     addTab(props: TabContext): void,
     updateTab(props: TabContext): void,
     tabs: Ref<TabContext[]>
-}
\ No newline at end of file
+}
+
+export type ToolbarPosition = 'inHead' | 'inContent';
+export interface ToolbarContentsConf {
+    id: string;
+    disable: boolean;
+    title: string;
+    click: Function;
+    appearance: object;
+}
diff --git a/packages/ui-vue/components/tabs/src/composition/use-tabs.ts b/packages/ui-vue/components/tabs/src/composition/use-tabs.ts
index db498bb95498f79fda0beadf2ec4aa3f75eadcc6..238122a7576ff5de116dcafbbd89d31de04b3b5e 100644
--- a/packages/ui-vue/components/tabs/src/composition/use-tabs.ts
+++ b/packages/ui-vue/components/tabs/src/composition/use-tabs.ts
@@ -59,7 +59,7 @@ export function useTabs(
             }
         }
     }
-    function selectTabByIndex($event: MouseEvent, targetTabId: string) {
+    function selectTabByTabId($event: MouseEvent, targetTabId: string) {
         const prevId = activeId.value;
         activeId.value = targetTabId
         context.emit('tabChange', {
@@ -77,6 +77,6 @@ export function useTabs(
         getTabNavLinkClass,
         getTabTextClass,
         changeTitleStyle,
-        selectTabByIndex
+        selectTabByTabId
     };
 }
diff --git a/packages/ui-vue/components/tabs/src/tabs.component.tsx b/packages/ui-vue/components/tabs/src/tabs.component.tsx
index fb82cabf8a1d70db08d9995637ac94a63020d341..f7d2bc3b57f0ea5dc02e67a5d6dbd93273eb6732 100644
--- a/packages/ui-vue/components/tabs/src/tabs.component.tsx
+++ b/packages/ui-vue/components/tabs/src/tabs.component.tsx
@@ -1,4 +1,4 @@
-import { computed, defineComponent, provide, reactive, ref, SetupContext, toRef, onMounted, shallowRef, nextTick } from 'vue';
+import { computed, defineComponent, provide, reactive, ref, SetupContext, onMounted, shallowRef, nextTick, Slots } from 'vue';
 import { TabsProps, tabsProps } from './tabs.props';
 import './tabs.css'
 import { useTabs } from './composition/use-tabs';
@@ -19,9 +19,20 @@ export default defineComponent({
         // 显示下拉面板
         const hideDropDown = ref(true);
 
+        const activeTabSlot = computed(() => {
+            const activeTab = tabs.value.find(tab => tab.props.id === activeId.value);
+            return activeTab?.slots
+        })
+
         const hasInHeadClass = computed(() => {
+            const activeTab = tabs.value.find(tab => tab.props.id === activeId.value);
+            const toolbarPosition = activeTab?.props.toolbarPosition
+            if (toolbarPosition === 'inHead') {
+                return true
+            }
             return false;
         });
+
         const menuItemsWidth = ref<string>('atuo')
         // 下拉框后的搜索文本
         const searchTabText = ref<string>('');
@@ -31,7 +42,7 @@ export default defineComponent({
         // 激活状态的tabId
         const activeId = ref(props.activeId);
 
-        const { setActiveId, getTabStyle, getTabClass, getTabNavLinkClass, getTabTextClass, changeTitleStyle, selectTabByIndex } = useTabs(props, context, activeId);
+        const { setActiveId, getTabStyle, getTabClass, getTabNavLinkClass, getTabTextClass, changeTitleStyle, selectTabByTabId } = useTabs(props, context, activeId);
         // 增加一个tab标题
         const addTab = (tabContext: TabContext) => {
             const index = tabs.value.findIndex(tab => tab.props.id === tabContext.props.id)
@@ -153,14 +164,15 @@ export default defineComponent({
         };
 
         // 选中某个tab
-        const _cpSelectTabByIndex = ($event: MouseEvent, tab: TabPageProps) => {
+        const _cpSelectTab = ($event: MouseEvent, tab: TabPageProps) => {
             if (tab.disabled) {
                 return
             }
-            selectTabByIndex($event, tab.id);
+            selectTabByTabId($event, tab.id);
             const index = tabs.value.findIndex(tb => tb.props.id === tab.id);
             hideDropDown.value = true;
             nextTick(() => {
+                setHideButtonsStatus()
                 scrollToActiveTab(index)
             })
         }
@@ -200,7 +212,7 @@ export default defineComponent({
             'flex-row-reverse': props.position === 'right'
         }));
 
-        // 设置隐藏按钮的状态
+        // 设置页签下拉按钮的显隐状态
         const setHideButtonsStatus = () => {
             const titleUlparentElement = titleUlElement.value?.parentElement
             if (!titleUlparentElement || !titleUlElement.value) {
@@ -263,9 +275,16 @@ export default defineComponent({
             }
         }
 
+        const selectTab = ($event: MouseEvent, targetTabId: string) => {
+            selectTabByTabId($event, targetTabId)
+            nextTick(() => {
+                setHideButtonsStatus()
+            })
+        }
+
         onMounted(() => {
             nextTick(() => {
-                changeTitleStyle(titleUlElement)
+                changeTitleStyle(titleUlElement);
                 // 下拉面板之外空白处点击关闭下拉面板
                 window.addEventListener('click', (ev: any) => {
                     if (hideDropDown.value) {
@@ -295,7 +314,7 @@ export default defineComponent({
                                             const titleSlot = tabPage.slots.title
                                             return (
                                                 <li class={getTabClass(tab)} style={getTabStyle(tab)}>
-                                                    <a class={getTabNavLinkClass(tab)} onClick={($event) => selectTabByIndex($event, tab.id)}>
+                                                    <a class={getTabNavLinkClass(tab)} onClick={($event) => selectTab($event, tab.id)}>
                                                         {titleSlot ? titleSlot() : <span class={getTabTextClass(tab)} title={tab.title}>{tab.title}</span>}
                                                         {tab.removeable && (
                                                             <span class="st-drop-close" onClick={($event) => removeTab($event, tab.id)}>
@@ -319,7 +338,7 @@ export default defineComponent({
                                         {cpTabs.value.length ? <ul class="tab-dropdown-menu--items" style={getMenuItemsWidth()}>
                                             {cpTabs.value.map(tab => {
                                                 return (
-                                                    <li class={getDropdownItemCls(tab)} onClick={($event) => _cpSelectTabByIndex($event, tab.props)}>
+                                                    <li class={getDropdownItemCls(tab)} onClick={($event) => _cpSelectTab($event, tab.props)}>
                                                         {tab.props.removeable && <span class="float-right st-drop-close" onClick={($event) => removeTab($event, tab.props.id, true)}>
                                                             <i class="f-icon f-icon-close"></i>
                                                         </span>}
@@ -331,6 +350,9 @@ export default defineComponent({
                                     </div>
                                 </div>
                             </div>
+                            {activeTabSlot.value && <div class="farris-tabs-toolbar">
+                                {activeTabSlot.value?.toolbarExtra?.()}
+                            </div>}
                         </div>
                         <div class="farris-tabs-content">
                             {context.slots.default?.()}
diff --git a/packages/ui-vue/src/components/tabs.vue b/packages/ui-vue/src/components/tabs.vue
index 0fcfe9af17e760c3a1522e76f6fca46fb783975a..9924b01e205a0874c213829e4c88665c7da0058c 100644
--- a/packages/ui-vue/src/components/tabs.vue
+++ b/packages/ui-vue/src/components/tabs.vue
@@ -1,62 +1,66 @@
 <script setup lang="ts">
-import FTab from "../../components/tabs/src/tabs.component";
-import FTabPage from "../../components/tabs/src/components/tab-page.component";
-import { ref, reactive } from 'vue'
-const tabType = ref('')
-const tab1Title = ref('标签一验证在不设定自由宽度的情况下如何显示超长标签')
-const position = ref<string>('top')
-const tabs = reactive([
-    {
-        id: 'tab0',
-        title: 'Tab0',
-        show: false,
-        content: 'Content of Tab Page 0'
-    },
-    {
-        id: 'tab1',
-        title: '标签一验证在不设定自由宽度的情况下如何显示超长标签',
-        removeable: true,
-        content: 'Content of Tab Page 1',
-        titleOverflow: true
-    },
-    {
-        id: 'tab2',
-        title: 'Tab2',
-        removeable: true,
-        content: 'Content of Tab Page 2',
-        disabled: true
-    },
-    {
-        id: 'tab3',
-        title: 'Tab3',
-        removeable: false,
-        content: 'Content of Tab Page 3',
-        tabWidth: 200
-    },
-])
+    import FTab from "../../components/tabs/src/tabs.component";
+    import FTabPage from "../../components/tabs/src/components/tab-page.component";
+    import FButton from '../../components/button/src/button.component';
+    import { ref, reactive } from 'vue'
+    const tabType = ref('')
+    const tab1Title = ref('标签一验证在不设定自由宽度的情况下如何显示超长标签')
+    const position = ref<string>('top')
+    const tabs = reactive([
+        {
+            id: 'tab0',
+            title: 'Tab0',
+            show: false,
+            content: 'Content of Tab Page 0'
+        },
+        {
+            id: 'tab1',
+            title: '标签一验证在不设定自由宽度的情况下如何显示超长标签',
+            removeable: true,
+            content: 'Content of Tab Page 1',
+            titleOverflow: true
+        },
+        {
+            id: 'tab2',
+            title: 'Tab2',
+            removeable: true,
+            content: 'Content of Tab Page 2',
+            disabled: true
+        },
+        {
+            id: 'tab3',
+            title: 'Tab3',
+            removeable: false,
+            content: 'Content of Tab Page 3',
+            tabWidth: 200
+        },
+    ])
 
-function setTitle(title) {
-    tabs[1].title = 'Tab1'
-}
-function setMode(type) {
-    tabType.value = type
-}
-function addTab() {
-    const id = Math.random().toString(16).substring(2)
-    this.tabs.push({
-        id: id,
-        title: 'Tab' + id,
-        removeable: true,
-        content: 'Content of Tab Page ' + id
-    })
-}
-function setPosition(pos: string) {
-    position.value = pos
-}
+    function setTitle(title) {
+        tabs[1].title = 'Tab1'
+    }
+    function setMode(type) {
+        tabType.value = type
+    }
+    function addTab() {
+        const id = Math.random().toString(16).substring(2)
+        this.tabs.push({
+            id: id,
+            title: 'Tab' + id,
+            removeable: true,
+            content: 'Content of Tab Page ' + id
+        })
+    }
+    function setPosition(pos: string) {
+        position.value = pos
+    }
 
-function consoleLog(e) {
-    console.log(e)
-}
+    function consoleLog(e) {
+        console.log(e)
+    }
+    function alert(e) {
+        window.alert(e)
+    }
 </script>
 
 <template>
@@ -92,9 +96,22 @@ function consoleLog(e) {
                 >
                     {{tab.content}}
                 </FTabPage>
-                <FTabPage id="test" title="hero" :removeable="true">
+                <FTabPage id="test1" title="hero1" :removeable="true" :toolbarPosition="'inHead'">
                     <template v-slot:title>
-                    <span class="k-icon k-i-calendar"></span> -自定义标题-
+                        <span class="k-icon k-i-calendar"></span> -自定义标题1-
+                    </template>
+                    <template v-slot:toolbarExtra>
+                        自定义扩展区域header扩展区域inHead
+                        <FButton style="margin: 5px;" :type="'secondary'" @click="alert(11)"> 信息按钮 </FButton>
+                    </template>
+                    test-hero-page
+                </FTabPage>
+                <FTabPage id="test2" title="hero2" :removeable="true">
+                    <template v-slot:title>
+                        <span class="k-icon k-i-calendar"></span> -自定义标题2-
+                    </template>
+                    <template v-slot:toolbarExtra>
+                        自定义扩展区域header扩展区域inContent
                     </template>
                     test-hero-page
                 </FTabPage>