From 57868a8279e371e71c1600f6bc12c40e18d8bb04 Mon Sep 17 00:00:00 2001
From: Ariver <shanghai3168@gmail.com>
Date: Tue, 23 Jun 2026 14:37:01 +0800
Subject: [PATCH] Polish input settings layout
---
privatevoice.src/frontend/package.json | 2
privatevoice.src/app.go | 4
privatevoice.src/frontend/package-lock.json | 4
privatevoice.src/frontend/src/components/settings/LanguagePage.svelte | 210 ++++++++++++++++++++++++++++++---------------------
CHANGELOG.md | 15 +++
privatevoice.src/build/darwin/Info.plist | 4
6 files changed, 145 insertions(+), 94 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1c67470..8b2101b 100755
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,20 @@
# Changelog
+## v2.1.35 (2026-06-23)
+
+### 输入配置页排版优化
+
+- **语言选择改为紧凑网格**：输入页语言列表从拥挤的多行 segmented control 调整为响应式网格，避免单个语言孤立成行。
+- **模型列表改为 grouped list**：识别模型从多张独立卡片调整为统一分组列表，用内部分割线表达层级。
+- **当前模型状态减噪**：当前模型只保留一个主要状态表达，减少蓝框、badge、禁用按钮同时出现造成的视觉负担。
+
+### 构建
+
+- build: `20260623.1435`
+- 说明: 本版本为输入配置页排版优化后的本地验收候选包。
+
+---
+
## v2.1.34 (2026-06-23)
### 输入配置页签拆分
diff --git a/privatevoice.src/app.go b/privatevoice.src/app.go
index 783c115..c73f9c8 100755
--- a/privatevoice.src/app.go
+++ b/privatevoice.src/app.go
@@ -28,8 +28,8 @@
)
const (
- appVersion = "2.1.34"
- appBuild = "20260623.1312"
+ appVersion = "2.1.35"
+ appBuild = "20260623.1435"
appDisplayVersion = appVersion + " (build " + appBuild + ")"
appName = "PrivateVoice Dictation"
diff --git a/privatevoice.src/build/darwin/Info.plist b/privatevoice.src/build/darwin/Info.plist
index d212015..409ea47 100755
--- a/privatevoice.src/build/darwin/Info.plist
+++ b/privatevoice.src/build/darwin/Info.plist
@@ -17,9 +17,9 @@
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
- <string>2.1.34</string>
+ <string>2.1.35</string>
<key>CFBundleVersion</key>
- <string>20260623.1312</string>
+ <string>20260623.1435</string>
<key>ITSAppUsesNonExemptEncryption</key>
<false/>
<key>LSApplicationCategoryType</key>
diff --git a/privatevoice.src/frontend/package-lock.json b/privatevoice.src/frontend/package-lock.json
index 324cd90..591e137 100755
--- a/privatevoice.src/frontend/package-lock.json
+++ b/privatevoice.src/frontend/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "privatevoice-dictation-frontend",
- "version": "2.1.34",
+ "version": "2.1.35",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "privatevoice-dictation-frontend",
- "version": "2.1.34",
+ "version": "2.1.35",
"dependencies": {
"@wailsio/runtime": "latest"
},
diff --git a/privatevoice.src/frontend/package.json b/privatevoice.src/frontend/package.json
index 2c81b68..45711ef 100755
--- a/privatevoice.src/frontend/package.json
+++ b/privatevoice.src/frontend/package.json
@@ -1,7 +1,7 @@
{
"name": "privatevoice-dictation-frontend",
"private": true,
- "version": "2.1.34",
+ "version": "2.1.35",
"type": "module",
"scripts": {
"dev": "vite dev",
diff --git a/privatevoice.src/frontend/src/components/settings/LanguagePage.svelte b/privatevoice.src/frontend/src/components/settings/LanguagePage.svelte
index fb9065f..3ff0db7 100644
--- a/privatevoice.src/frontend/src/components/settings/LanguagePage.svelte
+++ b/privatevoice.src/frontend/src/components/settings/LanguagePage.svelte
@@ -189,44 +189,41 @@
{#if settingsLoaded}
<div class="section">
- <div class="setting-row">
- <div class="setting-info">
- <span class="setting-label">{t('settings.language')}</span>
- <span class="setting-desc">
- {languageModeVal === 'auto'
- ? t('settings.languageAutoDesc')
- : t('settings.languageManualDesc', { language: selectedLanguageName() })}
- </span>
- </div>
- <div class="segmented language" role="group" aria-label={t('settings.language')}>
+ <div class="section-head">
+ <span class="setting-label">{t('settings.language')}</span>
+ <span class="setting-desc">
+ {languageModeVal === 'auto'
+ ? t('settings.languageAutoDesc')
+ : t('settings.languageManualDesc', { language: selectedLanguageName() })}
+ </span>
+ </div>
+
+ <div class="language-grid" role="group" aria-label={t('settings.language')}>
+ <button
+ class:active={languageModeVal === 'auto'}
+ onclick={() => onLanguageChange('auto')}
+ >
+ {t('settings.languageAuto')}
+ </button>
+ {#each languageOptions as option}
<button
- class:active={languageModeVal === 'auto'}
- onclick={() => onLanguageChange('auto')}
+ class:active={languageModeVal === 'manual' && languageIDVal === option.id}
+ onclick={() => onLanguageChange(option.id)}
>
- {t('settings.languageAuto')}
+ {option.nativeName || option.displayName}
</button>
- {#each languageOptions as option}
- <button
- class:active={languageModeVal === 'manual' && languageIDVal === option.id}
- onclick={() => onLanguageChange(option.id)}
- >
- {option.nativeName || option.displayName}
- </button>
- {/each}
- </div>
+ {/each}
</div>
</div>
{/if}
{#if settingsLoaded && modelOptions.length > 0}
<div class="section">
- <div class="setting-row models-header">
- <div class="setting-info">
- <span class="setting-label">{t('settings.recognitionModel')}</span>
- <span class="setting-desc">
- {t('settings.recognitionModelDesc', { language: selectedLanguageName() })}
- </span>
- </div>
+ <div class="section-head">
+ <span class="setting-label">{t('settings.recognitionModel')}</span>
+ <span class="setting-desc">
+ {t('settings.recognitionModelDesc', { language: selectedLanguageName() })}
+ </span>
</div>
<div class="model-list">
@@ -247,14 +244,17 @@
{/if}
</span>
</div>
- <button
- class="model-action"
- class:primary={!option.isCurrent}
- disabled={option.isCurrent || !!modelBusyID}
- onclick={() => onModelAction(option)}
- >
- {modelActionLabel(option)}
- </button>
+ {#if option.isCurrent}
+ <span class="model-current-status">{t('settings.modelCurrent')}</span>
+ {:else}
+ <button
+ class="model-action primary"
+ disabled={!!modelBusyID}
+ onclick={() => onModelAction(option)}
+ >
+ {modelActionLabel(option)}
+ </button>
+ {/if}
</div>
{/each}
</div>
@@ -267,6 +267,11 @@
</div>
<style>
+ .page {
+ width: 100%;
+ max-width: 920px;
+ }
+
.header {
margin-bottom: var(--spacing-xl);
}
@@ -285,23 +290,15 @@
.section {
background: var(--color-bg-grouped-secondary);
border-radius: var(--radius-md);
- padding: var(--spacing-lg);
+ padding: 18px 20px;
margin-bottom: var(--spacing-md);
}
- .setting-row {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: var(--spacing-md);
- padding: var(--spacing-xs) 0;
- }
-
- .setting-info {
+ .section-head {
display: flex;
flex-direction: column;
- gap: 2px;
- min-width: 0;
+ gap: 4px;
+ margin-bottom: 14px;
}
.setting-label {
@@ -311,76 +308,82 @@
.setting-desc {
font-size: var(--font-size-xs);
- color: var(--color-tertiary-label);
+ line-height: 1.35;
+ color: var(--color-secondary-label);
+ max-width: 560px;
}
- .segmented {
- display: inline-grid;
- grid-template-columns: 1fr 1fr;
- min-width: 148px;
- padding: 2px;
- border-radius: var(--radius-sm);
+ .language-grid {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 6px;
+ padding: 6px;
+ border-radius: var(--radius-md);
background: var(--color-bg-secondary);
- flex-shrink: 0;
}
- .segmented.language {
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-end;
- max-width: 390px;
- min-width: 246px;
- }
-
- .segmented.language button {
- min-width: 76px;
+ .language-grid button {
+ height: 34px;
+ min-width: 0;
padding: 0 10px;
- }
-
- .segmented button {
- min-width: 66px;
- height: 30px;
- padding: 0 12px;
border: none;
- border-radius: calc(var(--radius-sm) - 2px);
+ border-radius: var(--radius-sm);
background: transparent;
color: var(--color-secondary-label);
font-size: var(--font-size-sm);
font-weight: 500;
cursor: pointer;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
transition: background var(--transition-fast), color var(--transition-fast);
}
- .segmented button.active {
+ .language-grid button.active {
background: var(--color-blue);
color: white;
- }
-
- .models-header {
- align-items: flex-start;
- margin-bottom: var(--spacing-sm);
}
.model-list {
display: flex;
flex-direction: column;
- gap: 8px;
+ gap: 0;
+ overflow: hidden;
+ border: 1px solid var(--color-separator);
+ border-radius: var(--radius-md);
+ background: var(--color-bg-tertiary);
}
.model-card {
+ position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
- min-height: 78px;
- padding: 10px 12px;
- border: 1px solid var(--color-separator);
- border-radius: var(--radius-sm);
- background: var(--color-bg-secondary);
+ min-height: 72px;
+ padding: 12px 14px;
+ border: 0;
+ border-radius: 0;
+ background: var(--color-bg-tertiary);
+ }
+
+ .model-card + .model-card {
+ border-top: 1px solid var(--color-separator);
}
.model-card.current {
- border-color: rgba(0, 122, 255, 0.38);
+ background: rgba(0, 122, 255, 0.055);
+ }
+
+ .model-card.current::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 12px;
+ bottom: 12px;
+ width: 3px;
+ border-radius: 2px;
+ background: var(--color-blue);
}
.model-main {
@@ -400,6 +403,9 @@
.model-title {
font-size: var(--font-size-base);
font-weight: 600;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.model-pill {
@@ -423,6 +429,11 @@
.model-desc,
.model-meta {
font-size: var(--font-size-xs);
+ line-height: 1.35;
+ color: var(--color-secondary-label);
+ }
+
+ .model-meta {
color: var(--color-tertiary-label);
}
@@ -450,9 +461,34 @@
opacity: 0.72;
}
+ .model-current-status {
+ min-width: 64px;
+ text-align: center;
+ color: var(--color-secondary-label);
+ font-size: var(--font-size-sm);
+ font-weight: 500;
+ white-space: nowrap;
+ }
+
.model-error {
margin-top: 8px;
font-size: var(--font-size-xs);
color: var(--color-red);
}
+
+ @media (max-width: 860px) {
+ .language-grid {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+ }
+
+ @media (max-width: 640px) {
+ .language-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .model-card {
+ align-items: flex-start;
+ }
+ }
</style>
--
Gitblit v1.9.3