From 971d47c661ca2794af3e151880d905330ad250ed Mon Sep 17 00:00:00 2001
From: chiyi <cyi.cc@outlook.com>
Date: Tue, 27 Oct 2026 17:03:02 +0800
Subject: [PATCH] =?UTF-8?q?fix(playground):=20=E7=94=BB=E5=9B=BE=E9=A1=B5?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9=E9=80=89=E4=B8=AD=E6=80=81=E4=B8=8D=E5=8F=AF?=
 =?UTF-8?q?=E8=A7=81=20=E2=80=94=20=E8=A1=A5=20chip-on=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E5=8A=A0=E6=B7=B1=E6=A8=A1=E5=BC=8F=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=AE=B9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

chip-on 一直没有样式，导致比例/画质/时长/张数选中项反而是白底；
补墨黑底白字选中态。生图/生视频切换器容器加深，选中项加描边与阴影。

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 frontend/src/style.css                | 16 ++++++++++++++++
 frontend/src/views/PlaygroundView.vue |  6 +++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/style.css b/frontend/src/style.css
index 6690c74..942b074 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -371,6 +371,22 @@ button:not(:disabled), [role="button"]:not([aria-disabled="true"]) { cursor: poi
   paint-order: stroke fill;
 }
 
+/* ===== 画图页选项胶囊的选中态（比例/画质/时长/张数）：墨黑底白字，一眼能看出选中 ===== */
+.chip-on {
+  background: #18181b !important;
+  color: #fff !important;
+  box-shadow: 0 4px 12px -4px rgb(24 24 27 / 0.45);
+}
+
+/* 生图 / 生视频 切换：容器稍深，选中项白底加描边与阴影 */
+.mode-switch { background: #ececef !important; }
+.mode-switch > .mode-on {
+  background: #fff !important;
+  color: #18181b !important;
+  font-weight: 700;
+  box-shadow: 0 1px 3px rgb(24 24 27 / 0.18), 0 0 0 1px rgb(24 24 27 / 0.08);
+}
+
 /* ===== 后台页头 + 统一工具栏 ===== */
 .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
 .page-title { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--fg); }
diff --git a/frontend/src/views/PlaygroundView.vue b/frontend/src/views/PlaygroundView.vue
index 6e3d137..a16678f 100644
--- a/frontend/src/views/PlaygroundView.vue
+++ b/frontend/src/views/PlaygroundView.vue
@@ -830,15 +830,15 @@ onUnmounted(() => {
          so several generations can run at once (concurrent). -->
     <div class="card p-5 space-y-5 lg:sticky lg:top-24 self-start">
       <!-- mode switch -->
-      <div class="grid grid-cols-2 gap-2 p-1 bg-slate-100 rounded-xl">
+      <div class="mode-switch grid grid-cols-2 gap-2 p-1 bg-slate-100 rounded-xl">
         <button @click="setMode('image')" type="button"
                 class="rounded-lg py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed"
-                :class="mode === 'image' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'">
+                :class="mode === 'image' ? 'mode-on bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'">
           <Icon name="files" class="w-4 h-4 inline -mt-0.5" /> 生图
         </button>
         <button @click="setMode('video')" type="button"
                 class="rounded-lg py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed"
-                :class="mode === 'video' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'">
+                :class="mode === 'video' ? 'mode-on bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'">
           <Icon name="video" class="w-4 h-4 inline -mt-0.5" /> 生视频
         </button>
       </div>