first commit

src/layout/tab.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { useTabStore } from '@/pinia/tab'
+import { defineAsyncComponent, markRaw } from 'vue'
+import { Button } from '@/components/ui/button'
+import { ScrollArea ,ScrollBar} from '@/components/ui/scroll-area'
+import { X } from 'lucide-vue-next'
+// 组件映射表：所有的动态组件需要在这里注册
+const componentMap: Record<string, any> = {
+  XmView: markRaw(defineAsyncComponent(() => import('@/components/views/Xm.vue'))),
+}
+
+const tabStore = useTabStore()
+// useTabStore
+</script>
+
+
+
+<template>
+  <div class="flex flex-col w-full h-screen bg-background overflow-hidden">
+    <div class="flex items-center border-b bg-muted/30 px-2 pt-2 flex-none">
+      <ScrollArea class="flex-1 whitespace-nowrap">
+        <div class="flex gap-1">
+          <div
+            v-for="(tab, index) in tabStore.tabs"
+            :key="tab.id"
+            @click="tabStore.activeTabId = tab.id"
+            :class="[
+              'group relative flex items-center h-9 px-4 min-w-[120px] max-w-[200px] cursor-pointer rounded-t-md border-x border-t transition-all text-sm',
+              tabStore.activeTabId === tab.id 
+                ? 'bg-background border-border font-medium' 
+                : 'border-transparent hover:bg-muted text-muted-foreground'
+            ]"
+          >
+            <span class="truncate mr-2">{{ tab.title }}</span>
+            
+            <Button
+              v-if="index !== 0"
+              variant="ghost"
+              size="icon"
+              class="h-4 w-4 ml-auto opacity-0 group-hover:opacity-100 hover:bg-destructive hover:text-destructive-foreground transition-opacity"
+              @click="tabStore.removeTab(tab.id)"
+            >
+              <X class="h-3 w-3" />
+            </Button>
+          </div>
+        </div>
+        <ScrollBar orientation="horizontal" class="invisible" />
+      </ScrollArea>
+    </div>
+
+    <div class="flex-1 overflow-auto relative">
+      <div 
+        v-for="tab in tabStore.tabs" 
+        :key="tab.id"
+        v-show="tabStore.activeTabId === tab.id"
+        class="h-full w-full p-6 animate-in fade-in duration-300"
+      >
+       <component :is="componentMap[tab.componentName]"  />
+      </div>
+    </div>
+  </div>
+</template>