feat(frontend): engine dropdown + emotion dual mode

- Replace engine buttons with <select> dropdown
- Add ENGINE_CONFIG for centralized engine management
- Add global/per-sentence emotion UI mode switching
- Add #engine-select dark theme styles
- Remove old .switch-btn and .engine-icon styles
- Reset emotion state on engine switch
This commit is contained in:
lanhao
2026-07-01 00:48:05 +08:00
parent 81460f06d7
commit a0346d05ba
3 changed files with 88 additions and 42 deletions
+25 -17
View File
@@ -121,30 +121,38 @@ body {
.toolbar-label { font-size: 0.85rem; color: var(--text-secondary); }
.toolbar-hint { font-size: 0.7rem; color: var(--text-muted); margin-left: 8px; }
.switch-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
background: transparent;
border: 1px solid var(--border-color);
#engine-select {
padding: 6px 12px;
background: #1a1a25;
border: 1px solid #2a2a3a;
border-radius: var(--radius-sm);
color: var(--text-secondary);
color: #ffffff;
font-size: 0.85rem;
cursor: pointer;
transition: var(--transition-fast);
outline: none;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
padding-right: 28px;
}
.switch-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.switch-btn.active { background: var(--bg-card); border-color: var(--accent-primary); color: var(--text-primary); }
#engine-select:hover { border-color: var(--border-hover); }
#engine-select:focus { border-color: var(--accent-primary); }
#engine-select option { background: #1a1a25; color: #ffffff; }
.engine-icon {
width: 18px; height: 18px;
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 0.65rem; font-weight: 700;
#emotion-global {
display: flex;
align-items: center;
gap: 4px;
}
#emotion-per-sentence {
color: #71717a;
padding: 8px;
font-size: 0.85rem;
}
.minimax-icon { background: var(--minimax-color); color: #0a0a0f; }
.cosyvoice-icon { background: var(--cosyvoice-color); color: white; }
.emotion-btn {
width: 32px; height: 32px;