xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2026-04-22 11:04:26 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

JiMeng, Suno 支持 dark 主题

Browse Source
This commit is contained in:
RockYang
2025-08-11 11:43:24 +08:00
parent 000969d902
commit 80ee41aee7
15 changed files with 760 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
web/src/components/mobile/CustomSelect.vue
View File

@@ -4,7 +4,7 @@
@click="showPicker = true"
class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 rounded-lg border border-gray-200 hover:border-blue-300 transition-colors"
>
<span class="text-gray-900">{{ selectedLabel || placeholder || '请选择' }}</span>
<span>{{ selectedLabel || placeholder || '请选择' }}</span>
<i class="iconfont icon-arrow-down text-gray-400"></i>
</button>
@@ -108,4 +108,65 @@ const onSelect = (option) => {
.animate-slide-up {
animation: slide-up 0.3s ease-out;
}
/* Dark 主题样式 - 按照 theme-dark.scss 的模式 */
:root[data-theme='dark'] .custom-select {
/* 选择器触发器 */
button {
background-color: rgb(31, 41, 55) !important;
border-color: rgb(75, 85, 99) !important;
color: rgb(209, 213, 219) !important;
&:hover {
border-color: rgb(139, 92, 246) !important;
}
.iconfont {
color: rgb(156, 163, 175) !important;
}
}
/* 选择器弹窗 */
.fixed {
.bg-white {
background-color: rgb(55, 65, 81) !important;
}
.border-b {
border-bottom-color: rgb(75, 85, 99) !important;
}
h3 {
color: rgb(255, 255, 255) !important;
}
button {
background-color: transparent !important;
color: rgb(156, 163, 175) !important;
&:hover {
background-color: rgb(75, 85, 99) !important;
color: rgb(209, 213, 219) !important;
}
.iconfont {
color: inherit !important;
}
}
.max-h-80 {
.text-gray-900 {
color: rgb(209, 213, 219) !important;
}
.text-gray-500 {
color: rgb(156, 163, 175) !important;
}
.text-blue-600 {
color: rgb(139, 92, 246) !important;
}
}
}
}
</style>

28
web/src/components/mobile/CustomSelectOption.vue
View File

@@ -47,4 +47,30 @@ const props = defineProps({
const emit = defineEmits(['select'])
</script>
<style scoped></style>
<style scoped>
/* Dark 主题样式 - 按照 theme-dark.scss 的模式 */
:root[data-theme='dark'] .flex {
background-color: transparent !important;
border-bottom-color: rgb(75, 85, 99) !important;
&:hover {
background-color: rgb(75, 85, 99) !important;
}
&:last-child {
border-bottom-color: transparent !important;
}
.text-gray-900 {
color: rgb(209, 213, 219) !important;
}
.text-gray-500 {
color: rgb(156, 163, 175) !important;
}
.text-blue-600 {
color: rgb(139, 92, 246) !important;
}
}
</style>

52
web/src/components/ui/CustomTabs.vue
View File

@@ -1,10 +1,13 @@
<template>
<div class="w-full">
<div class="relative bg-gray-100 rounded-lg py-1.5 mb-3 px-2 overflow-hidden" ref="tabsHeader">
<div
class="relative bg-gray-100 rounded-lg py-1.5 mb-3 px-2 overflow-hidden custom-tabs-header"
ref="tabsHeader"
>
<!-- 左滑动指示器 -->
<div
v-show="canScrollLeft"
class="absolute left-1 top-1/2 -translate-y-1/2 z-30 w-6 h-6 bg-white/95 backdrop-blur-sm rounded-full shadow-sm border border-gray-200/50 flex items-center justify-center cursor-pointer hover:bg-white hover:shadow-md hover:scale-105 transition-all duration-200 group"
class="absolute left-1 top-1/2 -translate-y-1/2 z-30 w-6 h-6 bg-white/95 backdrop-blur-sm rounded-full shadow-sm border border-gray-200/50 flex items-center justify-center cursor-pointer hover:bg-white hover:shadow-md hover:scale-105 transition-all duration-200 group scroll-indicator scroll-indicator-left"
@click="scrollLeft"
>
<svg
@@ -25,7 +28,7 @@
<!-- 右滑动指示器 -->
<div
v-show="canScrollRight"
class="absolute right-1 top-1/2 -translate-y-1/2 z-30 w-6 h-6 bg-white/95 backdrop-blur-sm rounded-full shadow-sm border border-gray-200/50 flex items-center justify-center cursor-pointer hover:bg-white hover:shadow-md hover:scale-105 transition-all duration-200 group"
class="absolute right-1 top-1/2 -translate-y-1/2 z-30 w-6 h-6 bg-white/95 backdrop-blur-sm rounded-full shadow-sm border border-gray-200/50 flex items-center justify-center cursor-pointer hover:bg-white hover:shadow-md hover:shadow-md hover:scale-105 transition-all duration-200 group scroll-indicator scroll-indicator-right"
@click="scrollRight"
>
<svg
@@ -49,11 +52,11 @@
@scroll="checkScrollPosition"
>
<div
class="flex-shrink-0 text-center py-1 px-2 font-medium text-gray-700 cursor-pointer transition-all duration-300 rounded-md relative z-20 hover:text-purple-600"
class="flex-shrink-0 text-center py-1 px-2 font-medium text-gray-700 cursor-pointer transition-all duration-300 rounded-md relative z-20 hover:text-purple-600 custom-tab-item"
v-for="(tab, index) in panes"
:key="tab.name"
:class="{
'!text-purple-600 bg-white shadow-sm': modelValue === tab.name,
'!text-purple-600 bg-white shadow-sm custom-tab-active': modelValue === tab.name,
'hover:bg-gray-50': modelValue !== tab.name,
}"
@click="handleTabClick(tab.name, index)"
@@ -293,4 +296,43 @@ onMounted(() => {
.absolute {
transition: opacity 0.2s ease-in-out;
}
/* Dark 主题样式 - 按照 theme-dark.scss 的模式 */
:root[data-theme='dark'] .custom-tabs-header {
background-color: rgb(31, 41, 55);
}
:root[data-theme='dark'] .custom-tab-item {
color: rgb(209, 213, 219);
}
:root[data-theme='dark'] .custom-tab-item:hover {
color: rgb(196, 181, 253);
}
:root[data-theme='dark'] .custom-tab-active {
background-color: rgb(55, 65, 81);
color: rgb(196, 181, 253);
}
:root[data-theme='dark'] .custom-tab-item:hover:not(.custom-tab-active) {
background-color: rgb(75, 85, 99);
}
:root[data-theme='dark'] .scroll-indicator {
background-color: rgba(55, 65, 81, 0.95);
border-color: rgb(75, 85, 99);
}
:root[data-theme='dark'] .scroll-indicator:hover {
background-color: rgb(75, 85, 99);
}
:root[data-theme='dark'] .scroll-indicator svg {
color: rgb(156, 163, 175);
}
:root[data-theme='dark'] .scroll-indicator:hover svg {
color: rgb(196, 181, 253);
}
</style>