diff --git a/src/composables/useTabList.js b/src/composables/useTabList.js
new file mode 100644
index 0000000000000000000000000000000000000000..2eb634caf9fad08fc7c13ffbbb1b817ed4af358d
--- /dev/null
+++ b/src/composables/useTabList.js
@@ -0,0 +1,104 @@
+import { ref } from 'vue'
+import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
+import { useCookies } from '@vueuse/integrations/useCookies'
+import { router } from '@/router'
+
+
+export function useTabList() {
+ const route = useRoute()
+ const cookie = useCookies()
+
+
+
+ const activeTab = ref(route.path)
+ const tabList = ref([
+ {
+ title: '后台首页',
+ path: "/",
+ }
+ ])
+
+ // 添加标签导航
+ function addTab(tab) {
+ let noTab = tabList.value.findIndex(t => t.path == tab.path) == -1
+
+ if (noTab) {
+ tabList.value.push(tab)
+ }
+ cookie.set("tabList", tabList.value)
+ }
+
+
+ // 初始化标签导航列表
+ function initTabList() {
+ let tbs = cookie.get("tabList")
+ if (tbs) {
+ tabList.value = tbs
+ }
+ }
+
+ initTabList()
+
+
+ onBeforeRouteUpdate((to, from) => {
+ activeTab.value = to.path
+ addTab({
+ title: to.meta.title,
+ path: to.path
+
+ })
+
+ })
+
+ // 路由跳转
+ const changeTab = (t) => {
+ activeTab.value = t
+ router.push(t)
+
+ }
+
+
+ const removeTab = (t) => {
+ let tabs = tabList.value
+ let a = activeTab.value
+ if (a == t) {
+ tabs.forEach((tab, index) => {
+ if (tab.path == t) {
+ const nextTab = tabs[index + 1] || tabs[index - 1]
+ if (nextTab) {
+ a = nextTab.path
+ }
+ }
+ })
+ }
+ activeTab.value = a
+ tabList.value = tabList.value.filter(tab => tab.path != t)
+ cookie.set("tabList", tabList.value)
+ }
+
+
+
+ const handeClose = (c) => {
+ if (c == "clearAll") {
+ // 切换首页
+ activeTab.value = "/"
+ // 过滤只剩下首页
+ tabList.value = [{
+ title: '后台首页',
+ path: "/"
+ }]
+ } else if (c == "clearOther") {
+ // 过滤只剩下首页和当前激活
+ tabList.value = tabList.value.filter(tab => tab.path == "/" || tab.path == activeTab.value)
+ }
+ cookie.set("tabList", tabList.value)
+ }
+
+ return {
+ activeTab,
+ tabList,
+ changeTab,
+ removeTab,
+ handeClose
+ }
+}
\ No newline at end of file
diff --git a/src/layouts/components/FTagList.vue b/src/layouts/components/FTagList.vue
index 68da8a4d2be81d5ed82ce7d686b212afa7cecd92..7541a088f27f1e6d643ae4d780def4033fcecdf0 100644
--- a/src/layouts/components/FTagList.vue
+++ b/src/layouts/components/FTagList.vue
@@ -28,99 +28,18 @@