towsty/aigen
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Restyle Studio task rail and bind Classic task to the same mode ref.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Towsty
2026-09-18 13:10:44 -05:00
co-authored by Cursor
parent d9743dd8c9
commit bdc1ab6c2d
1 changed files with 36 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/studio2/Bench.vue
+36 -30
View File
@@ -28,42 +28,48 @@
</div>
</header>
<nav class="flex flex-wrap gap-2" aria-label="Tasks">
<button
v-for="task in tasks"
:key="task"
type="button"
class="rounded-full border px-4 py-2 capitalize outline-none ring-amber-300/50 focus-visible:ring-2"
:class="form.mode===task ? 'border-amber-300 bg-amber-300 text-black' : 'border-white/15 text-zinc-200 hover:border-white/30'"
:aria-pressed="form.mode===task"
@click="chooseTask(task)"
>{{ task }}</button>
</nav>
<div v-if="form.mode!=='music'" class="min-w-0">
<label v-if="isClassic" class="block text-sm text-zinc-300">Model
<select v-model="form.engine" class="mt-1 w-full max-w-md rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 outline-none ring-amber-300/40 focus:ring-2">
<option v-for="opt in engineOptions" :key="opt.value" :value="opt.value" :disabled="opt.disabled">{{ opt.label }}{{ opt.hint ? ' — '+opt.hint : '' }}</option>
<div class="min-w-0 space-y-3" style="gap: var(--chrome-gap)">
<label v-if="isClassic" class="block text-sm text-zinc-300">Task
<select :value="form.mode" class="mt-1 w-full max-w-xs rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 capitalize outline-none ring-amber-300/40 focus:ring-2" @change="chooseTask(($event.target as HTMLSelectElement).value)">
<option v-for="task in tasks" :key="task" :value="task" class="capitalize">{{ task }}</option>
</select>
</label>
<div v-else class="display-rail" role="group" aria-label="Model">
<nav v-else class="display-rail" aria-label="Tasks">
<button
v-for="opt in engineOptions"
:key="opt.value"
v-for="task in tasks"
:key="task"
type="button"
class="display-rail__seg"
:aria-pressed="form.engine===opt.value"
:aria-disabled="opt.disabled || undefined"
:disabled="opt.disabled"
:title="opt.hint || undefined"
@click="!opt.disabled && (form.engine=opt.value)"
>
<span class="block">{{ opt.label }}</span>
<span v-if="opt.hint" class="mt-0.5 block text-[11px] font-normal opacity-80">{{ opt.hint }}</span>
</button>
class="display-rail__seg capitalize"
:aria-pressed="form.mode===task"
@click="chooseTask(task)"
>{{ task }}</button>
</nav>
<div v-if="form.mode!=='music'" class="min-w-0">
<label v-if="isClassic" class="block text-sm text-zinc-300">Model
<select v-model="form.engine" class="mt-1 w-full max-w-md rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 outline-none ring-amber-300/40 focus:ring-2">
<option v-for="opt in engineOptions" :key="opt.value" :value="opt.value" :disabled="opt.disabled">{{ opt.label }}{{ opt.hint ? ' — '+opt.hint : '' }}</option>
</select>
</label>
<div v-else class="display-rail" role="group" aria-label="Model">
<button
v-for="opt in engineOptions"
:key="opt.value"
type="button"
class="display-rail__seg"
:aria-pressed="form.engine===opt.value"
:aria-disabled="opt.disabled || undefined"
:disabled="opt.disabled"
:title="opt.hint || undefined"
@click="!opt.disabled && (form.engine=opt.value)"
>
<span class="block">{{ opt.label }}</span>
<span v-if="opt.hint" class="mt-0.5 block text-[11px] font-normal opacity-80">{{ opt.hint }}</span>
</button>
</div>
</div>
<p v-else class="text-sm text-zinc-400">Model · YuE2</p>
</div>
<p v-else class="text-sm text-zinc-400">Model · YuE2</p>
<div class="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(24rem,2fr)] 2xl:gap-8">
<section class="min-w-0 space-y-4">