chiyi/image2api
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(playground): 画图页选项选中态不可见 — 补 chip-on 样式，加深模式切换容器

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

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

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
chiyi
2026-10-27 17:03:02 +08:00
co-authored by Devin
parent c49125b38f
commit 971d47c661
2 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/style.css
+16
View File
@@ -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); }
frontend/src/views/PlaygroundView.vue
+3 -3
View File
@@ -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>