mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-01-23 09:38:02 +00:00
feat: 支持Dark Mode
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="mb-4 sm:mb-6">
|
||||
<!-- 移动端下拉选择器 -->
|
||||
<div class="block rounded-xl bg-white/10 p-2 backdrop-blur-sm sm:hidden">
|
||||
<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"
|
||||
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)"
|
||||
>
|
||||
@@ -14,13 +14,17 @@
|
||||
</div>
|
||||
|
||||
<!-- 桌面端标签栏 -->
|
||||
<div class="hidden flex-wrap gap-2 rounded-2xl bg-white/10 p-2 backdrop-blur-sm sm:flex">
|
||||
<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'
|
||||
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)"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user