mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-01-23 00:53:33 +00:00
62 lines
2.2 KiB
Vue
62 lines
2.2 KiB
Vue
<template>
|
|
<div class="mb-4 sm:mb-6">
|
|
<!-- 移动端下拉选择器 -->
|
|
<div class="block rounded-xl bg-white/10 p-2 backdrop-blur-sm dark:bg-gray-800/20 sm:hidden">
|
|
<select
|
|
class="focus:ring-primary-color w-full rounded-lg bg-white/90 px-4 py-3 font-semibold text-gray-700 focus:outline-none focus:ring-2 dark:bg-gray-800/90 dark:text-gray-200 dark:focus:ring-indigo-400"
|
|
:value="activeTab"
|
|
@change="$emit('tab-change', $event.target.value)"
|
|
>
|
|
<option v-for="tab in tabs" :key="tab.key" :value="tab.key">
|
|
{{ tab.name }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 桌面端标签栏 -->
|
|
<div
|
|
class="hidden flex-wrap gap-2 rounded-2xl bg-white/10 p-2 backdrop-blur-sm dark:bg-gray-800/20 sm:flex"
|
|
>
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab.key"
|
|
:class="[
|
|
'tab-btn flex-1 px-3 py-2 text-xs font-semibold transition-all duration-300 sm:px-4 sm:py-3 sm:text-sm md:px-6',
|
|
activeTab === tab.key
|
|
? 'active'
|
|
: 'text-gray-700 hover:bg-white/10 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700/30 dark:hover:text-gray-100'
|
|
]"
|
|
@click="$emit('tab-change', tab.key)"
|
|
>
|
|
<i :class="tab.icon + ' mr-1 sm:mr-2'" />
|
|
<span class="hidden md:inline">{{ tab.name }}</span>
|
|
<span class="md:hidden">{{ tab.shortName || tab.name }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
activeTab: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
defineEmits(['tab-change'])
|
|
|
|
const tabs = [
|
|
{ key: 'dashboard', name: '仪表板', shortName: '仪表板', icon: 'fas fa-tachometer-alt' },
|
|
{ key: 'apiKeys', name: 'API Keys', shortName: 'API', icon: 'fas fa-key' },
|
|
{ key: 'accounts', name: '账户管理', shortName: '账户', icon: 'fas fa-user-circle' },
|
|
{ key: 'userManagement', name: '用户管理', shortName: '用户', icon: 'fas fa-users' },
|
|
{ key: 'tutorial', name: '使用教程', shortName: '教程', icon: 'fas fa-graduation-cap' },
|
|
{ key: 'settings', name: '系统设置', shortName: '设置', icon: 'fas fa-cogs' }
|
|
]
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 使用全局样式中定义的 .tab-btn 类 */
|
|
</style>
|