From 80ee41aee7d47096a0560424e8d4be1d8caf1684 Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Mon, 11 Aug 2025 11:43:24 +0800
Subject: [PATCH] =?UTF-8?q?JiMeng,=20Suno=20=E6=94=AF=E6=8C=81=20dark=20?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  10 +-
 web/src/components/mobile/CustomSelect.vue    |  63 +++-
 .../components/mobile/CustomSelectOption.vue  |  28 +-
 web/src/components/ui/CustomTabs.vue          |  52 +++-
 web/src/main.js                               |   7 +
 web/src/store/sharedata.js                    |   8 +
 web/src/store/suno.js                         |  17 +-
 web/src/store/theme.js                        |  26 +-
 web/src/views/Jimeng.vue                      |   1 -
 web/src/views/mobile/JimengCreate.vue         | 281 +++++++++++++++++
 web/src/views/mobile/SunoCreate.vue           | 285 ++++++++++++++++++
 web/src/views/mobile/pages/ImageDall.vue      |   4 +-
 web/src/views/mobile/pages/ImageMj.vue        |   2 +-
 web/src/views/mobile/pages/ImageSd.vue        |   2 +-
 web/tailwind.config.js                        |   1 +
 15 files changed, 760 insertions(+), 27 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 366fee25..8196cefa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,11 +2,11 @@
 
 ## v4.2.6
 
-- 功能优化：优化移动端首页 UI，增加返回首页按钮
-- 功能优化：优化移动端聊天页面 UI，增加返回首页按钮
-- 功能优化：优化移动端登录页面 UI，增加返回首页按钮
-- 功能优化：优化移动端注册页面 UI，增加返回首页按钮
-- 功能优化：优化移动端找回密码页面 UI，增加返回首页按钮
+- 功能重构：重构移动端 UI，使用 tailwindcss 组件库，把 PC 端所有页面都在迁移到了移动端
+- 功能优化：优化 PC 端的 Suno 音乐，视频生成，以及即梦 AI 页面 UI
+- 功能优化：重构登录和注册页面，兼容移动端和 PC 端，并且所有的登录组件共用了同一套组件代码，大大降低维护成本
+- 功能优化：管理后台增加模型批量删除功能
+- 功能优化：优化 Table 组件 UI，并支持 dark 主题
 
 ## v4.2.5
 
diff --git a/web/src/components/mobile/CustomSelect.vue b/web/src/components/mobile/CustomSelect.vue
index 67d7dd2f..6b77be0c 100644
--- a/web/src/components/mobile/CustomSelect.vue
+++ b/web/src/components/mobile/CustomSelect.vue
@@ -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>
diff --git a/web/src/components/mobile/CustomSelectOption.vue b/web/src/components/mobile/CustomSelectOption.vue
index 8a16ec8e..198b811e 100644
--- a/web/src/components/mobile/CustomSelectOption.vue
+++ b/web/src/components/mobile/CustomSelectOption.vue
@@ -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>
diff --git a/web/src/components/ui/CustomTabs.vue b/web/src/components/ui/CustomTabs.vue
index 11d7c813..18e5fd58 100644
--- a/web/src/components/ui/CustomTabs.vue
+++ b/web/src/components/ui/CustomTabs.vue
@@ -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>
diff --git a/web/src/main.js b/web/src/main.js
index 2cd6fe53..78839f63 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -81,6 +81,13 @@ const themeStore = useThemeStore(pinia) // 使用 theme store
 // 设置初始主题
 document.documentElement.setAttribute('data-theme', themeStore.theme)
 
+// 同时设置初始 dark 类
+if (themeStore.theme === 'dark') {
+  document.documentElement.classList.add('dark')
+} else {
+  document.documentElement.classList.remove('dark')
+}
+
 const app = createApp(App)
 app.use(createPinia())
 app.use(ConfigProvider)
diff --git a/web/src/store/sharedata.js b/web/src/store/sharedata.js
index f2662c3b..c795cca1 100644
--- a/web/src/store/sharedata.js
+++ b/web/src/store/sharedata.js
@@ -109,6 +109,14 @@ export const useSharedStore = defineStore('shared', {
     setTheme(theme) {
       this.theme = theme
       document.documentElement.setAttribute('data-theme', theme) // 设置 HTML 的 data-theme 属性
+
+      // 同时设置 dark 类，以便 Tailwind 的 dark: 前缀能够工作
+      if (theme === 'dark') {
+        document.documentElement.classList.add('dark')
+      } else {
+        document.documentElement.classList.remove('dark')
+      }
+
       Storage.set('theme', theme)
     },
     setIsLogin(value) {
diff --git a/web/src/store/suno.js b/web/src/store/suno.js
index 94382369..dbb413f1 100644
--- a/web/src/store/suno.js
+++ b/web/src/store/suno.js
@@ -6,7 +6,8 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { compact } from 'lodash'
 import { defineStore } from 'pinia'
 import { computed, onMounted, ref } from 'vue'
-import { getSystemInfo } from './cache'
+import { checkSession, getSystemInfo } from './cache'
+import { useSharedStore } from './sharedata'
 
 export const useSunoStore = defineStore('suno', () => {
   // 响应式数据
@@ -62,6 +63,8 @@ export const useSunoStore = defineStore('suno', () => {
   const promptPlaceholder = ref('请在这里输入你自己写的歌词...')
   const isGenerating = ref(false)
   const sunoPower = ref(0)
+  const isLogin = ref(false)
+  const shareStore = useSharedStore()
 
   // 分页相关
   const page = ref(1)
@@ -78,6 +81,9 @@ export const useSunoStore = defineStore('suno', () => {
     getSystemInfo().then((res) => {
       sunoPower.value = res.data.suno_power
     })
+    checkSession().then((res) => {
+      isLogin.value = true
+    })
   })
 
   // 方法
@@ -123,6 +129,10 @@ export const useSunoStore = defineStore('suno', () => {
   }
 
   const create = async () => {
+    if (!isLogin.value) {
+      return shareStore.setShowLoginDialog(true)
+    }
+
     data.value.type = custom.value ? 2 : 1
     data.value.ref_task_id = refSong.value ? refSong.value.task_id : ''
     data.value.ref_song_id = refSong.value ? refSong.value.song_id : ''
@@ -193,6 +203,11 @@ export const useSunoStore = defineStore('suno', () => {
   }
 
   const uploadAudio = async (file) => {
+    // 判断是否登录
+    if (!isLogin.value) {
+      return shareStore.setShowLoginDialog(true)
+    }
+
     const formData = new FormData()
     formData.append('file', file.file, file.name)
     showLoading('正在上传文件...')
diff --git a/web/src/store/theme.js b/web/src/store/theme.js
index 1c4964f9..fd40a2b9 100644
--- a/web/src/store/theme.js
+++ b/web/src/store/theme.js
@@ -1,15 +1,23 @@
 // src/store/index.js
-import { defineStore } from "pinia";
+import { defineStore } from 'pinia'
 
-export const useThemeStore = defineStore("theme", {
+export const useThemeStore = defineStore('theme', {
   state: () => ({
-    theme: localStorage.getItem("theme") || "light" // 默认从 localStorage 获取主题
+    theme: localStorage.getItem('theme') || 'light', // 默认从 localStorage 获取主题
   }),
   actions: {
     setTheme(theme) {
-      this.theme = theme;
-      document.documentElement.setAttribute("data-theme", theme);
-      localStorage.setItem("theme", theme); // 保存到 localStorage
-    }
-  }
-});
+      this.theme = theme
+      document.documentElement.setAttribute('data-theme', theme)
+
+      // 同时设置 dark 类，以便 Tailwind 的 dark: 前缀能够工作
+      if (theme === 'dark') {
+        document.documentElement.classList.add('dark')
+      } else {
+        document.documentElement.classList.remove('dark')
+      }
+
+      localStorage.setItem('theme', theme) // 保存到 localStorage
+    },
+  },
+})
diff --git a/web/src/views/Jimeng.vue b/web/src/views/Jimeng.vue
index 59bb3543..c366e4fc 100644
--- a/web/src/views/Jimeng.vue
+++ b/web/src/views/Jimeng.vue
@@ -668,7 +668,6 @@ function copyErrorMsg(msg) {
     border-color: #a259ff;
     transform: scale(1.025) translateY(-2px);
     z-index: 10;
-    background: #f7fbff;
   }
 }
 @media (max-width: 1200px) {
diff --git a/web/src/views/mobile/JimengCreate.vue b/web/src/views/mobile/JimengCreate.vue
index 6b3fdf85..d202db86 100644
--- a/web/src/views/mobile/JimengCreate.vue
+++ b/web/src/views/mobile/JimengCreate.vue
@@ -537,4 +537,285 @@ const goBack = () => {
 
 <style lang="scss" scoped>
 @use '@/assets/css/mobile/jimeng.scss';
+
+/* Dark 主题样式 - 按照 theme-dark.scss 的模式 */
+:root[data-theme='dark'] .jimeng-create {
+  background-color: rgb(13, 20, 53);
+
+  /* 页面头部样式 */
+  .sticky {
+    background-color: rgb(31, 41, 55) !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+
+    h1 {
+      color: rgb(255, 255, 255) !important;
+    }
+
+    .iconfont {
+      color: rgb(156, 163, 175) !important;
+    }
+
+    button:hover {
+      background-color: rgb(75, 85, 99) !important;
+    }
+  }
+
+  /* 功能分类选择 */
+  .jimeng-create__content {
+    .bg-white {
+      background-color: rgb(55, 65, 81) !important;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    }
+
+    .text-gray-700 {
+      color: rgb(209, 213, 219) !important;
+    }
+
+    .text-gray-900 {
+      color: rgb(255, 255, 255) !important;
+    }
+
+    .text-gray-600 {
+      color: rgb(156, 163, 175) !important;
+    }
+
+    .text-gray-500 {
+      color: rgb(156, 163, 175) !important;
+    }
+
+    .bg-gray-100:hover {
+      background-color: rgb(75, 85, 99) !important;
+    }
+
+    /* Element Plus 组件样式覆盖 */
+    :deep(.el-input__wrapper) {
+      background-color: rgb(31, 41, 55) !important;
+      border-color: rgb(75, 85, 99) !important;
+      box-shadow: none !important;
+    }
+
+    :deep(.el-input__inner) {
+      color: rgb(209, 213, 219) !important;
+      background-color: transparent !important;
+    }
+
+    :deep(.el-input__inner::placeholder) {
+      color: rgb(156, 163, 175) !important;
+    }
+
+    :deep(.el-textarea__inner) {
+      color: rgb(209, 213, 219) !important;
+      background-color: transparent !important;
+    }
+
+    :deep(.el-textarea__inner::placeholder) {
+      color: rgb(156, 163, 175) !important;
+    }
+
+    :deep(.el-switch__core) {
+      background-color: rgb(75, 85, 99) !important;
+      border-color: rgb(75, 85, 99) !important;
+    }
+
+    :deep(.el-switch.is-checked .el-switch__core) {
+      background-color: rgb(139, 92, 246) !important;
+      border-color: rgb(139, 92, 246) !important;
+    }
+
+    :deep(.el-slider__runway) {
+      background-color: rgb(75, 85, 99) !important;
+    }
+
+    :deep(.el-slider__bar) {
+      background-color: rgb(139, 92, 246) !important;
+    }
+
+    :deep(.el-slider__button) {
+      border-color: rgb(139, 92, 246) !important;
+    }
+
+    :deep(.el-tooltip__trigger) {
+      color: rgb(156, 163, 175) !important;
+    }
+  }
+
+  /* 提交按钮 */
+  .bg-gradient-to-r {
+    background: linear-gradient(88deg, #af61f0 1.44%, #5b62ce) !important;
+
+    &:hover {
+      background: linear-gradient(88deg, #9f51e0 1.44%, #4b52be) !important;
+    }
+
+    &:disabled {
+      background: linear-gradient(88deg, #6b7280 1.44%, #4b5563) !important;
+    }
+  }
+
+  /* 作品列表 */
+  .jimeng-create__works {
+    &-title {
+      color: rgb(255, 255, 255) !important;
+    }
+
+    &-item {
+      background-color: rgb(55, 65, 81) !important;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+
+      &-content {
+        .jimeng-create__works-item-info {
+          &-title {
+            color: rgb(255, 255, 255) !important;
+          }
+
+          &-prompt {
+            color: rgb(209, 213, 219) !important;
+          }
+
+          &-tags {
+            &-item {
+              background-color: rgb(75, 85, 99) !important;
+              color: rgb(209, 213, 219) !important;
+
+              &--warning {
+                background-color: rgb(239, 68, 68) !important;
+                color: rgb(255, 255, 255) !important;
+              }
+
+              &--primary {
+                background-color: rgb(59, 130, 246) !important;
+                color: rgb(255, 255, 255) !important;
+              }
+
+              &--power {
+                background-color: rgb(139, 92, 246) !important;
+                color: rgb(255, 255, 255) !important;
+              }
+            }
+          }
+        }
+      }
+
+      &-quick-actions {
+        button {
+          color: rgb(156, 163, 175) !important;
+
+          &:hover {
+            color: rgb(209, 213, 219) !important;
+          }
+        }
+      }
+
+      &-error {
+        &-content {
+          background-color: rgb(31, 41, 55) !important;
+          border-color: rgb(239, 68, 68) !important;
+
+          .jimeng-create__works-item-error-text {
+            color: rgb(239, 68, 68) !important;
+          }
+
+          .jimeng-create__works-item-error-copy-btn {
+            color: rgb(156, 163, 175) !important;
+
+            &:hover {
+              color: rgb(209, 213, 219) !important;
+            }
+          }
+        }
+      }
+    }
+
+    &-loading {
+      color: rgb(156, 163, 175) !important;
+    }
+
+    &-finished {
+      color: rgb(156, 163, 175) !important;
+    }
+  }
+
+  /* 媒体预览弹窗 */
+  .jimeng-create__media-dialog {
+    background-color: rgba(0, 0, 0, 0.8) !important;
+
+    &-content {
+      background-color: rgb(55, 65, 81) !important;
+      box-shadow: 0 0 15px rgba(107, 80, 225, 0.8) !important;
+    }
+
+    &-header {
+      background-color: rgb(31, 41, 55) !important;
+      border-bottom-color: rgb(75, 85, 99) !important;
+
+      h3 {
+        color: rgb(255, 255, 255) !important;
+      }
+
+      button {
+        color: rgb(156, 163, 175) !important;
+
+        &:hover {
+          color: rgb(209, 213, 219) !important;
+        }
+      }
+    }
+  }
+
+  /* 图片上传组件 */
+  :deep(.image-upload) {
+    .upload-area {
+      background-color: rgb(31, 41, 55) !important;
+      border-color: rgb(75, 85, 99) !important;
+
+      &:hover {
+        border-color: rgb(139, 92, 246) !important;
+        background-color: rgb(55, 65, 81) !important;
+      }
+    }
+
+    .upload-text {
+      color: rgb(209, 213, 219) !important;
+    }
+
+    .upload-icon {
+      color: rgb(139, 92, 246) !important;
+    }
+  }
+
+  /* 自定义选择组件 */
+  :deep(.custom-select) {
+    .select-trigger {
+      background-color: rgb(31, 41, 55) !important;
+      border-color: rgb(75, 85, 99) !important;
+      color: rgb(209, 213, 219) !important;
+    }
+
+    .select-dropdown {
+      background-color: rgb(55, 65, 81) !important;
+      border-color: rgb(75, 85, 99) !important;
+      box-shadow: 0 0 15px rgba(107, 80, 225, 0.8) !important;
+    }
+
+    .select-option {
+      color: rgb(209, 213, 219) !important;
+
+      &:hover {
+        background-color: rgb(75, 85, 99) !important;
+      }
+
+      &.selected {
+        background-color: rgb(139, 92, 246) !important;
+        color: rgb(255, 255, 255) !important;
+      }
+    }
+  }
+
+  /* 空状态组件 */
+  :deep(.van-empty) {
+    .van-empty__description {
+      color: rgb(156, 163, 175) !important;
+    }
+  }
+}
 </style>
diff --git a/web/src/views/mobile/SunoCreate.vue b/web/src/views/mobile/SunoCreate.vue
index d94dbe62..c582b526 100644
--- a/web/src/views/mobile/SunoCreate.vue
+++ b/web/src/views/mobile/SunoCreate.vue
@@ -550,4 +550,289 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 @use '@/assets/css/mobile/suno.scss';
+
+/* Dark 主题样式 - 按照 theme-dark.scss 的模式 */
+:root[data-theme='dark'] .min-h-screen {
+  background-color: rgb(13, 20, 53) !important;
+
+  /* 页面头部 */
+  .sticky.top-0 {
+    background-color: rgb(31, 41, 55) !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
+
+    .icon-back {
+      color: rgb(156, 163, 175) !important;
+    }
+
+    h1 {
+      color: rgb(255, 255, 255) !important;
+    }
+
+    button:hover {
+      background-color: rgb(75, 85, 99) !important;
+    }
+  }
+
+  /* 创作表单 */
+  .space-y-6 {
+    .bg-white {
+      background-color: rgb(31, 41, 55) !important;
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
+    }
+
+    .text-gray-900 {
+      color: rgb(209, 213, 219) !important;
+    }
+
+    .text-gray-700 {
+      color: rgb(209, 213, 219) !important;
+    }
+
+    .text-gray-500 {
+      color: rgb(156, 163, 175) !important;
+    }
+
+    .text-gray-600 {
+      color: rgb(156, 163, 175) !important;
+    }
+
+    /* 输入框样式 */
+    input,
+    textarea {
+      background-color: rgb(55, 65, 81) !important;
+      border-color: rgb(75, 85, 99) !important;
+      color: rgb(209, 213, 219) !important;
+
+      &::placeholder {
+        color: rgb(107, 114, 128) !important;
+      }
+
+      &:focus {
+        border-color: rgb(139, 92, 246) !important;
+        box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2) !important;
+      }
+    }
+
+    /* 按钮样式 */
+    .bg-blue-600 {
+      background-color: rgb(37, 99, 235) !important;
+
+      &:hover:not(:disabled) {
+        background-color: rgb(29, 78, 216) !important;
+      }
+
+      &:disabled {
+        background-color: rgb(156, 163, 175) !important;
+      }
+    }
+
+    .bg-gradient-to-r.from-blue-500.to-purple-600 {
+      background: linear-gradient(to right, rgb(59, 130, 246), rgb(147, 51, 234)) !important;
+
+      &:hover:not(:disabled) {
+        background: linear-gradient(to right, rgb(37, 99, 235), rgb(126, 34, 206)) !important;
+      }
+
+      &:disabled {
+        background: linear-gradient(to right, rgb(156, 163, 175), rgb(156, 163, 175)) !important;
+      }
+    }
+
+    .bg-gradient-to-r.from-purple-500.to-red-300 {
+      background: linear-gradient(to right, rgb(147, 51, 234), rgb(252, 165, 165)) !important;
+
+      &:hover:not(:disabled) {
+        background: linear-gradient(to right, rgb(126, 34, 206), rgb(239, 68, 68)) !important;
+      }
+    }
+
+    /* 风格标签 */
+    .border-blue-200 {
+      border-color: rgb(59, 130, 246) !important;
+      color: rgb(59, 130, 246) !important;
+
+      &:hover {
+        background-color: rgba(59, 130, 246, 0.1) !important;
+      }
+    }
+
+    /* 续写歌曲区域 */
+    .border-orange-400 {
+      border-left-color: rgb(251, 146, 60) !important;
+    }
+
+    .bg-red-100 {
+      background-color: rgba(239, 68, 68, 0.1) !important;
+      color: rgb(239, 68, 68) !important;
+
+      &:hover {
+        background-color: rgba(239, 68, 68, 0.2) !important;
+      }
+    }
+
+    /* 上传提示区域 */
+    .bg-gray-50 {
+      background-color: rgb(55, 65, 81) !important;
+    }
+
+    /* 底部生成按钮 */
+    .sticky.bottom-4 {
+      background-color: rgb(31, 41, 55) !important;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
+    }
+  }
+
+  /* 作品列表 */
+  .p-4 {
+    h2 {
+      color: rgb(255, 255, 255) !important;
+    }
+
+    .bg-white {
+      background-color: rgb(31, 41, 55) !important;
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
+    }
+
+    .bg-gray-100 {
+      background-color: rgb(55, 65, 81) !important;
+    }
+
+    .text-gray-900 {
+      color: rgb(209, 213, 219) !important;
+    }
+
+    .text-gray-500 {
+      color: rgb(156, 163, 175) !important;
+    }
+
+    .text-gray-600 {
+      color: rgb(156, 163, 175) !important;
+    }
+
+    .text-gray-400 {
+      color: rgb(107, 114, 128) !important;
+    }
+
+    /* 标签样式 */
+    .bg-blue-100 {
+      background-color: rgba(59, 130, 246, 0.1) !important;
+      color: rgb(59, 130, 246) !important;
+    }
+
+    .bg-green-100 {
+      background-color: rgba(34, 197, 94, 0.1) !important;
+      color: rgb(34, 197, 94) !important;
+    }
+
+    .bg-yellow-100 {
+      background-color: rgba(251, 191, 36, 0.1) !important;
+      color: rgb(251, 191, 36) !important;
+    }
+
+    .bg-purple-100 {
+      background-color: rgba(147, 51, 234, 0.1) !important;
+      color: rgb(147, 51, 234) !important;
+    }
+
+    /* 按钮样式 */
+    .bg-blue-600 {
+      background-color: rgb(37, 99, 235) !important;
+
+      &:hover {
+        background-color: rgb(29, 78, 216) !important;
+      }
+    }
+
+    .bg-green-600 {
+      background-color: rgb(34, 197, 94) !important;
+
+      &:hover {
+        background-color: rgb(22, 163, 74) !important;
+      }
+    }
+
+    .bg-purple-600 {
+      background-color: rgb(147, 51, 234) !important;
+
+      &:hover {
+        background-color: rgb(126, 34, 206) !important;
+      }
+    }
+
+    .bg-red-100 {
+      background-color: rgba(239, 68, 68, 0.1) !important;
+      color: rgb(239, 68, 68) !important;
+
+      &:hover {
+        background-color: rgba(239, 68, 68, 0.2) !important;
+      }
+    }
+
+    /* 进度条 */
+    .bg-gray-200 {
+      background-color: rgb(75, 85, 99) !important;
+    }
+
+    .bg-blue-600 {
+      background-color: rgb(37, 99, 235) !important;
+    }
+
+    /* 错误信息 */
+    .bg-red-50 {
+      background-color: rgba(239, 68, 68, 0.1) !important;
+      border-color: rgba(239, 68, 68, 0.2) !important;
+    }
+
+    .text-red-600 {
+      color: rgb(239, 68, 68) !important;
+    }
+
+    /* 加载状态 */
+    .text-blue-600 {
+      color: rgb(37, 99, 235) !important;
+    }
+
+    .text-green-500 {
+      color: rgb(34, 197, 94) !important;
+    }
+
+    .text-orange-500 {
+      color: rgb(251, 146, 60) !important;
+    }
+
+    /* 加载更多 */
+    .text-gray-400 {
+      color: rgb(107, 114, 128) !important;
+    }
+
+    .text-gray-500 {
+      color: rgb(156, 163, 175) !important;
+    }
+  }
+
+  /* 音乐播放器弹窗 */
+  .fixed.inset-0 {
+    .bg-white {
+      background-color: rgb(31, 41, 55) !important;
+    }
+
+    .border-b {
+      border-bottom-color: rgb(75, 85, 99) !important;
+    }
+
+    h3 {
+      color: rgb(255, 255, 255) !important;
+    }
+
+    button {
+      &:hover {
+        background-color: rgb(75, 85, 99) !important;
+      }
+
+      svg {
+        color: rgb(156, 163, 175) !important;
+      }
+    }
+  }
+}
 </style>
diff --git a/web/src/views/mobile/pages/ImageDall.vue b/web/src/views/mobile/pages/ImageDall.vue
index a46621ca..14dbf080 100644
--- a/web/src/views/mobile/pages/ImageDall.vue
+++ b/web/src/views/mobile/pages/ImageDall.vue
@@ -74,7 +74,7 @@
           placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"
         />
 
-        <div class="sticky bottom-4 bg-white rounded-xl p-4 shadow-sm">
+        <div class="sticky bottom-4 bg-[var(--van-cell-group-background)] rounded-xl p-4 shadow-sm">
           <button
             @click="generate"
             :disabled="loading"
@@ -522,5 +522,5 @@ const modelConfirm = (item) => {
 </script>
 
 <style lang="scss">
-@use '../../../assets/css/mobile/image-sd.scss' as *;
+@use '@/assets/css/mobile/image-sd.scss' as *;
 </style>
diff --git a/web/src/views/mobile/pages/ImageMj.vue b/web/src/views/mobile/pages/ImageMj.vue
index bebca38a..e90abd70 100644
--- a/web/src/views/mobile/pages/ImageMj.vue
+++ b/web/src/views/mobile/pages/ImageMj.vue
@@ -191,7 +191,7 @@
         </van-collapse>
       </div>
 
-      <div class="sticky bottom-4 bg-white rounded-xl p-4 shadow-sm">
+      <div class="sticky bottom-4 bg-[var(--van-cell-group-background)] rounded-xl p-4 shadow-sm">
         <button
           @click="generate"
           :disabled="loading"
diff --git a/web/src/views/mobile/pages/ImageSd.vue b/web/src/views/mobile/pages/ImageSd.vue
index 5dc5083c..a47371e2 100644
--- a/web/src/views/mobile/pages/ImageSd.vue
+++ b/web/src/views/mobile/pages/ImageSd.vue
@@ -130,7 +130,7 @@
           </van-collapse-item>
         </van-collapse>
 
-        <div class="sticky bottom-4 bg-white rounded-xl p-4 shadow-sm">
+        <div class="sticky bottom-4 bg-[var(--van-cell-group-background)] rounded-xl p-4 shadow-sm">
           <button
             @click="generate"
             :disabled="loading"
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 050a44ec..43433f39 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,5 +1,6 @@
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  darkMode: 'class',
   theme: {
     extend: {},
   },