mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-01-23 21:17:30 +00:00
7116a6e043
- 调整Element Plus日期选择器宽度为400px，确保时间完整显示 - 重新设计自动刷新控制的样式和布局 - 统一控制栏所有元素的高度，保持视觉一致性 - 使用更精致的开关组件和优化的交互效果 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
38 lines
1.0 KiB
Vue
38 lines
1.0 KiB
Vue
<template>
|
|
<div class="flex flex-wrap gap-2 mb-6 bg-white/10 rounded-2xl p-2 backdrop-blur-sm">
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab.key"
|
|
:class="[
|
|
'tab-btn flex-1 py-3 px-6 text-sm font-semibold transition-all duration-300',
|
|
activeTab === tab.key ? 'active' : 'text-gray-700 hover:bg-white/10 hover:text-gray-900'
|
|
]"
|
|
@click="$emit('tab-change', tab.key)"
|
|
>
|
|
<i :class="tab.icon + ' mr-2'" />{{ tab.name }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
activeTab: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
defineEmits(['tab-change'])
|
|
|
|
const tabs = [
|
|
{ key: 'dashboard', name: '仪表板', icon: 'fas fa-tachometer-alt' },
|
|
{ key: 'apiKeys', name: 'API Keys', icon: 'fas fa-key' },
|
|
{ key: 'accounts', name: '账户管理', icon: 'fas fa-user-circle' },
|
|
{ key: 'tutorial', name: '使用教程', icon: 'fas fa-graduation-cap' },
|
|
{ key: 'settings', name: '其他设置', icon: 'fas fa-cogs' }
|
|
]
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 使用全局样式中定义的 .tab-btn 类 */
|
|
</style> |