Basic Components

<template>
  <div class="bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg">
    <Tabs v-model="activeTab" :tabs="basicTabs" />

    <div class="p-6">
      <div v-if="activeTab === 'info'" class="animate-fade-in">
        <h3 class="text-lg font-medium mb-2 dark:text-white">
          信息标签
        </h3>
        <p class="text-gray-600 dark:text-gray-400">
          这里是信息标签的内容，您可以在此显示有关项目、用户或任何其他实体的基本信息。
        </p>
      </div>

      <div v-else-if="activeTab === 'settings'" class="animate-fade-in">
        <h3 class="text-lg font-medium mb-2 dark:text-white">
          设置标签
        </h3>
        <div class="space-y-3">
          <div class="flex items-center justify-between">
            <span class="text-gray-600 dark:text-gray-400">
              启用通知
            </span>
            <div class="relative inline-block w-10 mr-2 align-middle select-none">
              <input type="checkbox" class="sr-only" />
              <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
              <div class="absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transform translate-x-5"></div>
            </div>
          </div>
        </div>
      </div>

      <div v-else-if="activeTab === 'activity'" class="animate-fade-in">
        <h3 class="text-lg font-medium mb-2 dark:text-white">
          活动记录
        </h3>
        <ul class="space-y-2">
          <li class="flex items-center space-x-2">
            <div class="w-2 h-2 bg-green-500 rounded-full"></div>
            <span class="text-gray-600 dark:text-gray-400">
              用户登录于 2025-06-09 10:30
            </span>
          </li>
          <li class="flex items-center space-x-2">
            <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
            <span class="text-gray-600 dark:text-gray-400">
              更新了个人资料于 2025-06-08 15:45
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Tabs from '~/components/theme/Tabs.vue'

const activeTab = ref('info')
const basicTabs = [
  { key: 'info', label: '信息' },
  { key: 'settings', label: '设置' },
  { key: 'activity', label: '活动' }
]
</script>

<style scoped>
.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>

<template>
  <div class="bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg">
    <Tabs v-model="activeMultiTab" :tabs="multiTabs" />

    <div class="p-6">
      <div class="text-gray-600 dark:text-gray-400">
        当前选择的标签:
        {{ getTabLabel(activeMultiTab, multiTabs) }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Tabs from '~/components/theme/Tabs.vue'

const activeMultiTab = ref('tab1')
const multiTabs = [
  { key: 'tab1', label: '标签 1' },
  { key: 'tab2', label: '标签 2' },
  { key: 'tab3', label: '标签 3' },
  { key: 'tab4', label: '标签 4' },
  { key: 'tab5', label: '标签 5' }
]

function getTabLabel(key, tabs) {
  const tab = tabs.find(t => t.key === key)
  return tab ? tab.label : key
}
</script>