diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 0d9381a..8c1f8f6 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -1,126 +1,24 @@
 <template>
   <Modal v-model:show="isVisible" title="设置" size="4xl" :close-on-backdrop="false" :close-on-esc="false" @close="closeSettings">
-    <!-- 日志设置 -->
-    <div class="mb-6">
-      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
-        <FileText class="w-5 h-5 mr-2"/>
-        日志设置
-      </h3>
-
-      <div class="space-y-4">
-        <!-- 当前日志目录 -->
-        <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-            当前日志目录
-          </label>
-          <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 text-sm text-gray-600 dark:text-gray-400 font-mono">
-            {{ currentLogDir || '加载中...' }}
-          </div>
-        </div>
-
-        <!-- 修改日志目录 -->
-        <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-            选择新的日志目录
-          </label>
-          <div class="flex gap-2">
-            <input v-model="newLogDir"
-                   type="text"
-                   placeholder="选择或输入日志目录路径"
-                   class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
-                   readonly/>
-
-            <Button type="primary"
-                    :icon-only="true"
-                    :icon="Folder"
-                    @click="selectLogDirectory">
-            </Button>
-          </div>
-        </div>
-
-        <!-- 操作按钮 -->
-        <div class="flex gap-3 pt-0.5">
-          <Button @click="applyLogDirChange"
-                  :disabled="!newLogDir || newLogDir === currentLogDir"
-                  type="secondary">
-            应用更改
-          </Button>
-          <Button @click="openLogDirectory" type="secondary">
-            打开日志目录
-          </Button>
-          <Button @click="resetLogDirectory"
-                  class="cursor-pointer px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white text-sm font-medium rounded-md transition-colors">
-            重置为默认
-          </Button>
-        </div>
-
-        <!-- 日志文件列表 -->
-        <div v-if="logFiles.length > 0">
-          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-            最近的日志文件
-          </label>
-          <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 max-h-32 overflow-y-auto">
-            <div v-for="file in logFiles.slice(0, 5)" :key="file"
-                 class="text-sm text-gray-600 dark:text-gray-400 font-mono py-1 hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer"
-                 @click="openLogFile(file)">
-              {{ file }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 日志管理 -->
-    <div class="mb-6">
-      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
-        <Settings2 class="w-5 h-5 mr-2"/>
-        日志管理
-      </h3>
-
-      <div class="space-y-4">
-        <!-- 清理旧日志 -->
-        <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-            自动清理日志
-          </label>
-          <div class="flex items-center gap-3">
-            <Select v-model="keepDays"
-                    class="w-36"
-                    :options="keepDaysOptions"
-                    placeholder="选择保留天数">
-            </Select>
-            <Button type="danger" @click="clearLogs">
-              立即清理
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
+    <Tabs v-model="activeTab" type="card" size="md" :tabs="tabsData">
+      <template #general>
+        <General/>
+      </template>
+    </Tabs>
   </Modal>
 </template>
 
 <script setup lang="ts">
 import { nextTick, onMounted, ref } from 'vue'
-import { invoke } from '@tauri-apps/api/core'
-import { open as openDialog } from '@tauri-apps/plugin-dialog'
-import { openPath } from '@tauri-apps/plugin-opener'
-import { FileText, Folder, Settings2 } from 'lucide-vue-next'
-import Select from '../ui/Select.vue'
-import { useToast } from '../plugins/toast'
-import Button from '../ui/Button.vue'
+import { ShieldIcon } from 'lucide-vue-next'
 import Modal from '../ui/Modal.vue'
+import Tabs from '../ui/Tabs.vue'
+import General from './setting/General.vue'
 
-const toast = useToast()
 const isVisible = ref(false)
-const currentLogDir = ref('')
-const newLogDir = ref('')
-const logFiles = ref<string[]>([])
-const keepDays = ref(30)
-const keepDaysOptions = [
-  { label: '保留 7 天', value: 7 },
-  { label: '保留 14 天', value: 14 },
-  { label: '保留 30 天', value: 30 },
-  { label: '保留 90 天', value: 90 }
+const activeTab = ref('general')
+const tabsData = [
+  { key: 'general', label: '通用', icon: ShieldIcon }
 ]
 
 const emit = defineEmits<{
@@ -134,105 +32,7 @@ const closeSettings = () => {
   }, 300)
 }
 
-const loadLogDirectory = async () => {
-  try {
-    const logDir = await invoke<string>('get_log_directory')
-    currentLogDir.value = logDir
-    newLogDir.value = logDir
-  }
-  catch (error) {
-    console.error('Failed to get current log directory:', error)
-  }
-}
-
-const loadLogFiles = async () => {
-  try {
-    const files = await invoke<string[]>('get_log_files')
-    logFiles.value = files
-  }
-  catch (error) {
-    console.error('Failed to get log files:', error)
-  }
-}
-
-const selectLogDirectory = async () => {
-  try {
-    const selected = await openDialog({
-      directory: true,
-      multiple: false,
-      title: '选择日志目录'
-    })
-
-    if (selected) {
-      newLogDir.value = selected as string
-    }
-  }
-  catch (error) {
-    console.error('Failed to select directory:', error)
-  }
-}
-
-const applyLogDirChange = async () => {
-  try {
-    await invoke('set_log_directory', { path: newLogDir.value })
-    currentLogDir.value = newLogDir.value
-    await loadLogFiles()
-    toast.success('日志目录已更新')
-  }
-  catch (error) {
-    console.error('Failed to set log directory:', error)
-    toast.error('日志目录更新失败, 错误信息: ' + error)
-  }
-}
-
-const openLogDirectory = async () => {
-  try {
-    await openPath(currentLogDir.value)
-  }
-  catch (error) {
-    console.error('Failed to open log directory:', error)
-  }
-}
-
-const resetLogDirectory = async () => {
-  try {
-    await invoke('reset_log_directory')
-    await loadLogDirectory()
-    await loadLogFiles()
-    toast.success('日志目录已重置为默认')
-  }
-  catch (error) {
-    console.error('Failed to reset log directory:', error)
-    toast.error('日志目录重置失败, 错误信息: ' + error)
-  }
-}
-
-const openLogFile = async (filename: string) => {
-  try {
-    const logPath = `${ currentLogDir.value }/${ filename }`
-    await openPath(logPath)
-  }
-  catch (error) {
-    console.error('Failed to open log file:', error)
-  }
-}
-
-const clearLogs = async () => {
-  try {
-    await invoke('clear_logs', { keepDays: parseInt(keepDays.value.toString()) })
-    await loadLogFiles()
-    toast.success(`已清理 ${ keepDays.value } 天前的日志`)
-  }
-  catch (error) {
-    console.error('Failed to clear old logs:', error)
-    toast.error('清理日志失败, 错误信息: ' + error)
-  }
-}
-
 onMounted(async () => {
-  await loadLogDirectory()
-  await loadLogFiles()
-
   // 延迟显示动画
   await nextTick()
   setTimeout(() => {
diff --git a/src/components/setting/General.vue b/src/components/setting/General.vue
new file mode 100644
index 0000000..b064011
--- /dev/null
+++ b/src/components/setting/General.vue
@@ -0,0 +1,253 @@
+<template>
+  <div>
+    <!-- 日志设置 -->
+    <div class="mb-6">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
+        <FileText class="w-5 h-5 mr-2"/>
+        日志设置
+      </h3>
+
+      <div class="space-y-4">
+        <!-- 当前日志目录 -->
+        <div>
+          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            当前日志目录
+          </label>
+          <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 text-sm text-gray-600 dark:text-gray-400 font-mono">
+            {{ currentLogDir || '加载中...' }}
+          </div>
+        </div>
+
+        <!-- 修改日志目录 -->
+        <div>
+          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            选择新的日志目录
+          </label>
+          <div class="flex gap-2">
+            <input v-model="newLogDir"
+                   type="text"
+                   placeholder="选择或输入日志目录路径"
+                   class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
+                   readonly/>
+
+            <Button type="primary"
+                    :icon-only="true"
+                    :icon="Folder"
+                    @click="selectLogDirectory">
+            </Button>
+          </div>
+        </div>
+
+        <!-- 操作按钮 -->
+        <div class="flex gap-3 pt-0.5">
+          <Button @click="applyLogDirChange"
+                  :disabled="!newLogDir || newLogDir === currentLogDir"
+                  type="secondary">
+            应用更改
+          </Button>
+          <Button @click="openLogDirectory" type="secondary">
+            打开日志目录
+          </Button>
+          <Button @click="resetLogDirectory"
+                  class="cursor-pointer px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white text-sm font-medium rounded-md transition-colors">
+            重置为默认
+          </Button>
+        </div>
+
+        <!-- 日志文件列表 -->
+        <div v-if="logFiles.length > 0">
+          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            最近的日志文件
+          </label>
+          <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 max-h-32 overflow-y-auto">
+            <div v-for="file in logFiles.slice(0, 5)" :key="file"
+                 class="text-sm text-gray-600 dark:text-gray-400 font-mono py-1 hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer"
+                 @click="openLogFile(file)">
+              {{ file }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 日志管理 -->
+    <div class="mb-6">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
+        <Settings2 class="w-5 h-5 mr-2"/>
+        日志管理
+      </h3>
+
+      <div class="space-y-4">
+        <!-- 清理旧日志 -->
+        <div>
+          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            自动清理日志
+          </label>
+          <div class="flex items-center gap-3">
+            <Select v-model="keepDays"
+                    class="w-36"
+                    :options="keepDaysOptions"
+                    placeholder="选择保留天数">
+            </Select>
+            <Button type="danger" @click="clearLogs">
+              立即清理
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { invoke } from '@tauri-apps/api/core'
+import { open as openDialog } from '@tauri-apps/plugin-dialog'
+import { openPath } from '@tauri-apps/plugin-opener'
+import { FileText, Folder, Settings2 } from 'lucide-vue-next'
+import Select from '../../ui/Select.vue'
+import Button from '../../ui/Button.vue'
+import { useToast } from '../../plugins/toast'
+
+const emit = defineEmits<{
+  'settings-changed': [type: string, value: any]
+  'error': [message: string]
+}>()
+
+const toast = useToast()
+
+const currentLogDir = ref('')
+const newLogDir = ref('')
+const logFiles = ref<string[]>([])
+const keepDays = ref(30)
+
+const keepDaysOptions = [
+  { label: '保留 7 天', value: 7 },
+  { label: '保留 14 天', value: 14 },
+  { label: '保留 30 天', value: 30 },
+  { label: '保留 90 天', value: 90 }
+]
+
+const loadLogDirectory = async () => {
+  try {
+    const logDir = await invoke<string>('get_log_directory')
+    currentLogDir.value = logDir
+    newLogDir.value = logDir
+  }
+  catch (error) {
+    console.error('Failed to get current log directory:', error)
+    toast.error('获取日志目录失败 - 错误信息: ' + error)
+    emit('error', '获取日志目录失败')
+  }
+}
+
+const loadLogFiles = async () => {
+  try {
+    logFiles.value = await invoke<string[]>('get_log_files')
+  }
+  catch (error) {
+    console.error('Failed to get log files:', error)
+    emit('error', '获取日志文件列表失败')
+  }
+}
+
+const selectLogDirectory = async () => {
+  try {
+    const selected = await openDialog({
+      directory: true,
+      multiple: false,
+      title: '选择日志目录'
+    })
+
+    if (selected) {
+      newLogDir.value = selected as string
+    }
+  }
+  catch (error) {
+    console.error('Failed to select directory:', error)
+    emit('error', '选择目录失败')
+  }
+}
+
+const applyLogDirChange = async () => {
+  try {
+    await invoke('set_log_directory', { path: newLogDir.value })
+    currentLogDir.value = newLogDir.value
+    await loadLogFiles()
+    toast.success('日志目录已更新')
+    emit('settings-changed', 'logDirectory', newLogDir.value)
+  }
+  catch (error) {
+    console.error('Failed to set log directory:', error)
+    const errorMessage = '日志目录更新失败, 错误信息: ' + error
+    toast.error(errorMessage)
+    emit('error', errorMessage)
+  }
+}
+
+const openLogDirectory = async () => {
+  try {
+    await openPath(currentLogDir.value)
+  }
+  catch (error) {
+    console.error('Failed to open log directory:', error)
+    emit('error', '打开日志目录失败')
+  }
+}
+
+const resetLogDirectory = async () => {
+  try {
+    await invoke('reset_log_directory')
+    await loadLogDirectory()
+    await loadLogFiles()
+    toast.success('日志目录已重置为默认')
+    emit('settings-changed', 'logDirectory', 'reset')
+  }
+  catch (error) {
+    console.error('Failed to reset log directory:', error)
+    const errorMessage = '日志目录重置失败, 错误信息: ' + error
+    toast.error(errorMessage)
+    emit('error', errorMessage)
+  }
+}
+
+const openLogFile = async (filename: string) => {
+  try {
+    const logPath = `${ currentLogDir.value }/${ filename }`
+    await openPath(logPath)
+  }
+  catch (error) {
+    console.error('Failed to open log file:', error)
+    toast.error('打开日志文件失败 - 错误信息: ' + error)
+    emit('error', '打开日志文件失败')
+  }
+}
+
+const clearLogs = async () => {
+  try {
+    await invoke('clear_logs', { keepDays: parseInt(keepDays.value.toString()) })
+    await loadLogFiles()
+    toast.success(`已清理 ${ keepDays.value } 天前的日志`)
+    emit('settings-changed', 'logCleanup', keepDays.value)
+  }
+  catch (error) {
+    console.error('Failed to clear old logs:', error)
+    const errorMessage = '清理日志失败, 错误信息: ' + error
+    toast.error(errorMessage)
+    emit('error', errorMessage)
+  }
+}
+
+// 暴露方法给父组件
+defineExpose({
+  loadLogDirectory,
+  loadLogFiles,
+  clearLogs
+})
+
+// 生命周期
+onMounted(async () => {
+  await loadLogDirectory()
+  await loadLogFiles()
+})
+</script>
diff --git a/src/ui/Tabs.vue b/src/ui/Tabs.vue
new file mode 100644
index 0000000..86243ba
--- /dev/null
+++ b/src/ui/Tabs.vue
@@ -0,0 +1,561 @@
+<template>
+  <div :class="containerClasses">
+    <!-- Tab 头部导航 -->
+    <div :class="headerClasses">
+      <div :class="navClasses" ref="tabsNav">
+        <!-- 滑动指示器 -->
+        <div v-if="showIndicator && type === 'line'" :class="indicatorClasses" :style="indicatorStyle"/>
+
+        <!-- Tab 按钮 -->
+        <button v-for="(tab, index) in tabs"
+                :key="tab.key || tab.name || index"
+                ref="tabButtons"
+                @click="selectTab(tab, index)"
+                @keydown.enter="selectTab(tab, index)"
+                @keydown.space.prevent="selectTab(tab, index)"
+                @keydown.arrow-left.prevent="selectPrevTab"
+                @keydown.arrow-right.prevent="selectNextTab"
+                :class="getTabButtonClasses(tab, index)"
+                :disabled="tab.disabled"
+                :aria-selected="isActiveTab(tab)"
+                :aria-controls="`tabpanel-${tab.key || tab.name || index}`"
+                role="tab"
+                :tabindex="isActiveTab(tab) ? 0 : -1">
+          <!-- 图标 -->
+          <component v-if="tab.icon" :is="tab.icon" :class="iconClasses"/>
+
+          <!-- 文本 -->
+          <span v-if="tab.label || tab.name" class="tab-text">
+            {{ tab.label || tab.name }}
+          </span>
+
+          <!-- 徽章 -->
+          <span v-if="tab.badge !== undefined && tab.badge !== null" :class="badgeClasses">
+            {{ tab.badge }}
+          </span>
+
+          <!-- 关闭按钮 -->
+          <button v-if="tab.closable && closable" @click.stop="closeTab(tab, index)" :class="closeButtonClasses" :aria-label="`关闭 ${tab.label || tab.name}`">
+            <X class="w-3 h-3"/>
+          </button>
+        </button>
+
+        <!-- 添加按钮 -->
+        <button v-if="addable" @click="$emit('add')" :class="addButtonClasses" aria-label="添加标签页">
+          <Plus class="w-4 h-4"/>
+        </button>
+      </div>
+
+      <!-- 额外操作区域 -->
+      <div v-if="$slots.extra" class="tabs-extra">
+        <slot name="extra"/>
+      </div>
+    </div>
+
+    <!-- Tab 内容区域 -->
+    <div :class="contentClasses">
+      <div v-for="(tab, index) in tabs"
+           :key="`content-${tab.key || tab.name || index}`"
+           v-show="isActiveTab(tab)"
+           :class="paneClasses"
+           :id="`tabpanel-${tab.key || tab.name || index}`"
+           role="tabpanel"
+           :aria-labelledby="`tab-${tab.key || tab.name || index}`">
+        <!-- 使用插槽内容 -->
+        <slot :name="tab.key || tab.name" :tab="tab" :index="index">
+          <!-- 回退到 tab.content -->
+          <component v-if="tab.content" :is="tab.content"/>
+          <div v-else-if="tab.html" v-html="tab.html"></div>
+          <div v-else>{{ tab.text || '暂无内容' }}</div>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { Plus, X } from 'lucide-vue-next'
+
+// Tab 接口定义
+export interface Tab
+{
+  key?: string
+  name?: string
+  label?: string
+  icon?: Component
+  disabled?: boolean
+  closable?: boolean
+  badge?: string | number
+  content?: Component
+  html?: string
+  text?: string
+
+  [key: string]: any
+}
+
+// Props 定义
+interface Props
+{
+  // 数据
+  tabs: Tab[]
+  modelValue?: string | number
+
+  // 外观
+  type?: 'line' | 'card' | 'button' | 'segment'
+  size?: 'sm' | 'md' | 'lg'
+  position?: 'top' | 'bottom' | 'left' | 'right'
+
+  // 功能
+  closable?: boolean
+  addable?: boolean
+  scrollable?: boolean
+  centered?: boolean
+
+  // 样式
+  showIndicator?: boolean
+  animated?: boolean
+
+  // 自定义类名
+  containerClass?: string | string[]
+  headerClass?: string | string[]
+  navClass?: string | string[]
+  tabButtonClass?: string | string[]
+  contentClass?: string | string[]
+  paneClass?: string | string[]
+  indicatorClass?: string | string[]
+  iconClass?: string | string[]
+  badgeClass?: string | string[]
+  closeButtonClass?: string | string[]
+  addButtonClass?: string | string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'line',
+  size: 'md',
+  position: 'top',
+  closable: false,
+  addable: false,
+  scrollable: false,
+  centered: false,
+  showIndicator: true,
+  animated: true
+})
+
+// Emits 定义
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+  'change': [activeKey: string | number, tab: Tab]
+  'close': [tab: Tab, index: number]
+  'add': []
+}>()
+
+// 响应式数据
+const tabsNav = ref<HTMLElement>()
+const tabButtons = ref<HTMLElement[]>([])
+const activeTabIndex = ref(0)
+const indicatorStyle = ref({})
+
+// 计算属性
+const containerClasses = computed(() => {
+  const baseClasses = ['w-full']
+
+  // 位置相关
+  if (props.position === 'bottom') {
+    baseClasses.push('flex', 'flex-col-reverse')
+  }
+  else if (props.position === 'left' || props.position === 'right') {
+    baseClasses.push('flex')
+  }
+
+  // 自定义类名
+  if (props.containerClass) {
+    const customClasses = Array.isArray(props.containerClass) ? props.containerClass : [props.containerClass]
+    baseClasses.push(...customClasses.filter(Boolean))
+  }
+
+  return baseClasses
+})
+
+const headerClasses = computed(() => {
+  const baseClasses = ['flex', 'items-center', 'justify-between']
+
+  // 位置相关边框
+  if (props.position === 'top') {
+    baseClasses.push('border-gray-200', 'dark:border-gray-700')
+  }
+  else if (props.position === 'bottom') {
+    baseClasses.push('border-t', 'border-gray-200', 'dark:border-gray-700')
+  }
+  else if (props.position === 'left') {
+    baseClasses.push('flex-col', 'border-r', 'border-gray-200', 'dark:border-gray-700', 'mr-4', 'border-b-0')
+  }
+  else if (props.position === 'right') {
+    baseClasses.push('flex-col', 'border-l', 'border-gray-200', 'dark:border-gray-700', 'ml-4', 'order-2', 'border-b-0')
+  }
+
+  // 自定义类名
+  if (props.headerClass) {
+    const customClasses = Array.isArray(props.headerClass) ? props.headerClass : [props.headerClass]
+    baseClasses.push(...customClasses.filter(Boolean))
+  }
+
+  return baseClasses
+})
+
+const navClasses = computed(() => {
+  const baseClasses = ['relative', 'flex', 'items-center']
+
+  // 位置相关
+  if (props.position === 'left' || props.position === 'right') {
+    baseClasses.push('flex-col')
+  }
+
+  // 滚动
+  if (props.scrollable) {
+    baseClasses.push('overflow-x-auto')
+    // 隐藏滚动条
+    baseClasses.push('[&::-webkit-scrollbar]:hidden', '[-ms-overflow-style:none]', '[scrollbar-width:none]')
+  }
+
+  // 居中
+  if (props.centered) {
+    baseClasses.push('justify-center')
+  }
+
+  // 类型相关背景
+  if (props.type === 'card' || props.type === 'segment') {
+    baseClasses.push('bg-gray-50', 'dark:bg-gray-800', 'rounded-lg', 'p-1')
+  }
+
+  // 自定义类名
+  if (props.navClass) {
+    const customClasses = Array.isArray(props.navClass) ? props.navClass : [props.navClass]
+    baseClasses.push(...customClasses.filter(Boolean))
+  }
+
+  return baseClasses
+})
+
+const getTabButtonClasses = (tab: Tab, _index: number) => {
+  const baseClasses = [
+    'relative', 'flex', 'items-center', 'gap-2', 'font-medium',
+    'transition-all', 'duration-200', 'cursor-pointer', 'whitespace-nowrap'
+  ]
+
+  // 尺寸
+  if (props.size === 'sm') {
+    baseClasses.push('px-3', 'py-1.5', 'text-xs')
+  }
+  else if (props.size === 'lg') {
+    baseClasses.push('px-6', 'py-3', 'text-base')
+  }
+  else {
+    baseClasses.push('px-4', 'py-2', 'text-sm')
+  }
+
+  // 禁用状态
+  if (tab.disabled) {
+    baseClasses.push('opacity-50', 'cursor-not-allowed', 'pointer-events-none')
+  }
+
+  const isActive = isActiveTab(tab)
+
+  // 类型特定样式
+  switch (props.type) {
+    case 'line':
+      baseClasses.push('border-b-2', 'border-transparent')
+      if (isActive) {
+        baseClasses.push('text-blue-600', 'dark:text-blue-400', 'border-blue-600', 'dark:border-blue-400')
+      }
+      else {
+        baseClasses.push('text-gray-600', 'hover:text-gray-900', 'dark:text-gray-400', 'dark:hover:text-gray-100', 'hover:border-gray-300', 'dark:hover:border-gray-600')
+      }
+      break
+
+    case 'card':
+    case 'segment':
+      baseClasses.push('rounded-md')
+      if (isActive) {
+        baseClasses.push('bg-white', 'dark:bg-gray-700', 'shadow-sm', 'text-blue-600', 'dark:text-blue-400')
+      }
+      else {
+        baseClasses.push('text-gray-600', 'hover:text-gray-900', 'dark:text-gray-400', 'dark:hover:text-gray-100')
+      }
+      break
+
+    case 'button':
+      baseClasses.push('border', 'border-gray-300', 'dark:border-gray-600', '-ml-px', 'first:ml-0', 'first:rounded-l-lg', 'last:rounded-r-lg')
+      if (isActive) {
+        baseClasses.push('bg-blue-600', 'text-white', 'border-blue-600', 'z-10')
+      }
+      else {
+        baseClasses.push('bg-white', 'dark:bg-gray-800', 'text-gray-600', 'hover:text-gray-900', 'dark:text-gray-400', 'dark:hover:text-gray-100')
+      }
+      break
+
+    default:
+      if (isActive) {
+        baseClasses.push('text-blue-600', 'dark:text-blue-400')
+      }
+      else {
+        baseClasses.push('text-gray-600', 'hover:text-gray-900', 'dark:text-gray-400', 'dark:hover:text-gray-100')
+      }
+  }
+
+  // 自定义类名
+  if (props.tabButtonClass) {
+    const customClasses = Array.isArray(props.tabButtonClass) ? props.tabButtonClass : [props.tabButtonClass]
+    baseClasses.push(...customClasses.filter(Boolean))
+  }
+
+  return baseClasses
+}
+
+const contentClasses = computed(() => {
+  const baseClasses = ['w-full']
+
+  // 位置相关边距
+  if (props.position === 'top') {
+    baseClasses.push('mt-4')
+  }
+  else if (props.position === 'bottom') {
+    baseClasses.push('mb-4')
+  }
+  else if (props.position === 'left' || props.position === 'right') {
+    baseClasses.push('flex-1', 'mt-0')
+  }
+
+  // 自定义类名
+  if (props.contentClass) {
+    const customClasses = Array.isArray(props.contentClass) ? props.contentClass : [props.contentClass]
+    baseClasses.push(...customClasses.filter(Boolean))
+  }
+
+  return baseClasses
+})
+
+const paneClasses = computed(() => {
+  const baseClasses = ['w-full']
+
+  // 动画
+  if (props.animated) {
+    baseClasses.push('transition-opacity', 'duration-200')
+  }
+
+  // 自定义类名
+  if (props.paneClass) {
+    const customClasses = Array.isArray(props.paneClass) ? props.paneClass : [props.paneClass]
+    baseClasses.push(...customClasses.filter(Boolean))
+  }
+
+  return baseClasses
+})
+
+const indicatorClasses = computed(() => {
+  const baseClasses = [
+    'absolute', 'transition-all', 'duration-300', 'ease-out', 'rounded-full'
+  ]
+
+  // 位置相关
+  if (props.position === 'top' || props.position === 'bottom') {
+    baseClasses.push('bottom-0', 'h-0.5', 'bg-blue-600', 'dark:bg-blue-400')
+  }
+  else {
+    baseClasses.push('left-0', 'w-0.5', 'bg-blue-600', 'dark:bg-blue-400')
+  }
+
+  // 自定义类名
+  if (props.indicatorClass) {
+    const customClasses = Array.isArray(props.indicatorClass) ? props.indicatorClass : [props.indicatorClass]
+    baseClasses.push(...customClasses.filter(Boolean))
+  }
+
+  return baseClasses
+})
+
+const iconClasses = computed(() => {
+  const baseClasses = ['w-4', 'h-4', 'flex-shrink-0']
+
+  // 自定义类名
+  if (props.iconClass) {
+    const customClasses = Array.isArray(props.iconClass) ? props.iconClass : [props.iconClass]
+    baseClasses.push(...customClasses.filter(Boolean))
+  }
+
+  return baseClasses
+})
+
+const badgeClasses = computed(() => {
+  const baseClasses = [
+    'inline-flex', 'items-center', 'justify-center', 'min-w-[1.25rem]', 'h-5',
+    'px-1.5', 'text-xs', 'font-medium', 'rounded-full', 'bg-red-500', 'text-white', 'ml-1'
+  ]
+
+  // 自定义类名
+  if (props.badgeClass) {
+    const customClasses = Array.isArray(props.badgeClass) ? props.badgeClass : [props.badgeClass]
+    baseClasses.push(...customClasses.filter(Boolean))
+  }
+
+  return baseClasses
+})
+
+const closeButtonClasses = computed(() => {
+  const baseClasses = [
+    'flex', 'items-center', 'justify-center', 'w-5', 'h-5', 'rounded-full',
+    'transition-colors', 'hover:bg-gray-200', 'dark:hover:bg-gray-600', 'ml-1', 'flex-shrink-0'
+  ]
+
+  // 自定义类名
+  if (props.closeButtonClass) {
+    const customClasses = Array.isArray(props.closeButtonClass) ? props.closeButtonClass : [props.closeButtonClass]
+    baseClasses.push(...customClasses.filter(Boolean))
+  }
+
+  return baseClasses
+})
+
+const addButtonClasses = computed(() => {
+  const baseClasses = [
+    'flex', 'items-center', 'justify-center', 'w-8', 'h-8', 'rounded-md',
+    'transition-colors', 'text-gray-400', 'hover:text-gray-600',
+    'hover:bg-gray-100', 'dark:hover:bg-gray-700', 'ml-2', 'flex-shrink-0'
+  ]
+
+  // 自定义类名
+  if (props.addButtonClass) {
+    const customClasses = Array.isArray(props.addButtonClass) ? props.addButtonClass : [props.addButtonClass]
+    baseClasses.push(...customClasses.filter(Boolean))
+  }
+
+  return baseClasses
+})
+
+// 当前活跃的 tab
+const activeKey = computed(() => {
+  if (props.modelValue !== undefined) {
+    return props.modelValue
+  }
+  const activeTab = props.tabs[activeTabIndex.value]
+  return activeTab?.key || activeTab?.name || activeTabIndex.value
+})
+
+// 方法
+const getTabKey = (tab: Tab, index: number) => {
+  return tab.key || tab.name || index
+}
+
+const isActiveTab = (tab: Tab) => {
+  const tabKey = tab.key || tab.name
+  return tabKey ? tabKey === activeKey.value : props.tabs.indexOf(tab) === activeTabIndex.value
+}
+
+const selectTab = (tab: Tab, index: number) => {
+  if (tab.disabled) {
+    return
+  }
+
+  const tabKey = getTabKey(tab, index)
+  activeTabIndex.value = index
+
+  emit('update:modelValue', tabKey)
+  emit('change', tabKey, tab)
+
+  updateIndicator()
+}
+
+const closeTab = (tab: Tab, index: number) => {
+  emit('close', tab, index)
+}
+
+const selectPrevTab = () => {
+  const enabledTabs = props.tabs.filter(tab => !tab.disabled)
+  if (enabledTabs.length === 0) {
+    return
+  }
+
+  const currentIndex = enabledTabs.findIndex(tab => isActiveTab(tab))
+  const prevIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1
+  const prevTab = enabledTabs[prevIndex]
+  const realIndex = props.tabs.indexOf(prevTab)
+
+  selectTab(prevTab, realIndex)
+}
+
+const selectNextTab = () => {
+  const enabledTabs = props.tabs.filter(tab => !tab.disabled)
+  if (enabledTabs.length === 0) {
+    return
+  }
+
+  const currentIndex = enabledTabs.findIndex(tab => isActiveTab(tab))
+  const nextIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0
+  const nextTab = enabledTabs[nextIndex]
+  const realIndex = props.tabs.indexOf(nextTab)
+
+  selectTab(nextTab, realIndex)
+}
+
+// 更新指示器位置
+const updateIndicator = async () => {
+  if (!props.showIndicator || !tabButtons.value?.length) {
+    return
+  }
+
+  await nextTick()
+
+  const activeButton = tabButtons.value[activeTabIndex.value]
+  if (!activeButton) {
+    return
+  }
+
+  const { offsetLeft, offsetWidth, offsetTop, offsetHeight } = activeButton
+
+  if (props.position === 'top' || props.position === 'bottom') {
+    indicatorStyle.value = {
+      transform: `translateX(${ offsetLeft }px)`,
+      width: `${ offsetWidth }px`
+    }
+  }
+  else {
+    indicatorStyle.value = {
+      transform: `translateY(${ offsetTop }px)`,
+      height: `${ offsetHeight }px`
+    }
+  }
+}
+
+// 监听变化
+watch(() => props.modelValue, (newVal) => {
+  if (newVal !== undefined) {
+    const index = props.tabs.findIndex(tab =>
+        (tab.key || tab.name) === newVal
+    )
+    if (index !== -1) {
+      activeTabIndex.value = index
+      updateIndicator()
+    }
+  }
+})
+
+watch(() => props.tabs, () => {
+  nextTick(updateIndicator)
+}, { deep: true })
+
+// 生命周期
+onMounted(() => {
+  // 初始化活跃标签
+  if (props.modelValue !== undefined) {
+    const index = props.tabs.findIndex(tab =>
+        (tab.key || tab.name) === props.modelValue
+    )
+    if (index !== -1) {
+      activeTabIndex.value = index
+    }
+  }
+
+  updateIndicator()
+})
+</script>