JiMeng, Suno 支持 dark 主题

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) {

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>

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>

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>

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"

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"