From e533a8cd34995af9aaeeb321b41969a260fef882 Mon Sep 17 00:00:00 2001
From: Ariver <shanghai3168@gmail.com>
Date: Wed, 24 Jun 2026 02:37:59 +0800
Subject: [PATCH] Fix about page support link wrapping
---
privatevoice.src/frontend/src/components/settings/LanguagePage.svelte | 302 +++++++++++++++++++++++++++++++++-----------------
1 files changed, 199 insertions(+), 103 deletions(-)
diff --git a/privatevoice.src/frontend/src/components/settings/LanguagePage.svelte b/privatevoice.src/frontend/src/components/settings/LanguagePage.svelte
index fb9065f..24c435c 100644
--- a/privatevoice.src/frontend/src/components/settings/LanguagePage.svelte
+++ b/privatevoice.src/frontend/src/components/settings/LanguagePage.svelte
@@ -30,6 +30,8 @@
let languageOptions = $state<LanguageOption[]>([])
let modelOptions = $state<ModelOption[]>([])
let modelBusyID = $state('')
+ let modelBusyKind = $state<'download' | 'select' | ''>('')
+ let modelCancellingID = $state('')
let modelProgress = $state(0)
let modelError = $state('')
@@ -78,7 +80,6 @@
engineStatus.set('loading')
} else {
engineHardwareInfo.set('')
- engineStatus.set('need_model')
}
await Call.ByName('voicesnap/services.EngineService.ReloadCurrentModel')
} catch {}
@@ -120,19 +121,72 @@
function modelActionLabel(option: ModelOption): string {
if (modelBusyID === option.modelID) {
- if (!option.installed && modelProgress > 0) {
- return `${Math.min(100, Math.max(0, modelProgress)).toFixed(0)}%`
+ if (modelBusyKind === 'download') {
+ return modelCancellingID === option.modelID ? t('settings.modelCancelling') : t('settings.modelCancel')
}
return t('settings.modelWorking')
}
- if (option.isCurrent) return t('settings.modelCurrent')
+ if (option.isCurrent && option.installed) return t('settings.modelCurrent')
if (option.installed) return t('settings.modelUse')
return t('settings.modelDownload')
}
+ function modelMeta(option: ModelOption): string {
+ let meta = option.installed ? t('settings.modelInstalled') : t('settings.modelNotInstalled')
+ if (option.downloadSize) {
+ meta += ` · ${option.downloadSize}`
+ }
+ if (modelBusyID === option.modelID && modelBusyKind === 'download' && modelProgress > 0) {
+ const pct = Math.min(100, Math.max(0, modelProgress)).toFixed(0)
+ meta += ` · ${pct}%`
+ }
+ return meta
+ }
+
+ function isCancelError(err: any): boolean {
+ const text = String(err?.message || err || '').toLowerCase()
+ return text.includes('context canceled') || text.includes('cancelled') || text.includes('canceled')
+ }
+
+ function canCancelModel(option: ModelOption): boolean {
+ return modelBusyID === option.modelID && modelBusyKind === 'download'
+ }
+
+ async function onModelButton(option: ModelOption) {
+ if (canCancelModel(option)) {
+ await cancelModelDownload(option)
+ return
+ }
+ await onModelAction(option)
+ }
+
+ async function cancelModelDownload(option: ModelOption) {
+ if (!canCancelModel(option) || modelCancellingID) return
+ modelCancellingID = option.modelID
+ modelError = ''
+ try {
+ const cancelled: any = await Call.ByName('voicesnap/services.EngineService.CancelModelDownload', option.modelID)
+ if (!cancelled) {
+ modelBusyID = ''
+ modelBusyKind = ''
+ modelCancellingID = ''
+ modelProgress = 0
+ await loadModelOptions()
+ }
+ } catch (err: any) {
+ modelError = err?.message || String(err || t('settings.modelActionFailed'))
+ modelBusyID = ''
+ modelBusyKind = ''
+ modelCancellingID = ''
+ modelProgress = 0
+ await loadModelOptions()
+ }
+ }
+
async function onModelAction(option: ModelOption) {
- if (option.isCurrent || modelBusyID) return
+ if ((option.isCurrent && option.installed) || modelBusyID) return
modelBusyID = option.modelID
+ modelBusyKind = option.installed ? 'select' : 'download'
modelProgress = 0
modelError = ''
try {
@@ -145,11 +199,17 @@
}
await loadModelOptions()
} catch (err: any) {
- modelError = err?.message || String(err || t('settings.modelActionFailed'))
+ if (!isCancelError(err)) {
+ modelError = err?.message || String(err || t('settings.modelActionFailed'))
+ }
await loadModelOptions()
} finally {
- modelBusyID = ''
- modelProgress = 0
+ if (modelBusyID === option.modelID) {
+ modelBusyID = ''
+ modelBusyKind = ''
+ modelCancellingID = ''
+ modelProgress = 0
+ }
}
}
@@ -189,44 +249,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">
@@ -235,26 +292,25 @@
<div class="model-main">
<div class="model-title-row">
<span class="model-title">{option.displayName}</span>
- <span class="model-pill" class:current={option.isCurrent}>
- {option.isCurrent ? t('settings.modelCurrent') : modelTierLabel(option)}
+ <span class="model-pill" class:current={option.isCurrent && option.installed}>
+ {option.isCurrent && option.installed ? t('settings.modelCurrent') : modelTierLabel(option)}
</span>
</div>
<span class="model-desc">{modelDescription(option)}</span>
- <span class="model-meta">
- {option.installed ? t('settings.modelInstalled') : t('settings.modelNotInstalled')}
- {#if option.downloadSize}
- · {option.downloadSize}
- {/if}
- </span>
+ <span class="model-meta">{modelMeta(option)}</span>
</div>
- <button
- class="model-action"
- class:primary={!option.isCurrent}
- disabled={option.isCurrent || !!modelBusyID}
- onclick={() => onModelAction(option)}
- >
- {modelActionLabel(option)}
- </button>
+ {#if option.isCurrent && option.installed}
+ <span class="model-current-status">{t('settings.modelCurrent')}</span>
+ {:else}
+ <button
+ class="model-action primary"
+ class:cancel={canCancelModel(option)}
+ disabled={!!modelBusyID && modelBusyID !== option.modelID}
+ onclick={() => onModelButton(option)}
+ >
+ {modelActionLabel(option)}
+ </button>
+ {/if}
</div>
{/each}
</div>
@@ -267,6 +323,11 @@
</div>
<style>
+ .page {
+ width: 100%;
+ max-width: 920px;
+ }
+
.header {
margin-bottom: var(--spacing-xl);
}
@@ -285,23 +346,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 +364,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 +459,9 @@
.model-title {
font-size: var(--font-size-base);
font-weight: 600;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.model-pill {
@@ -423,6 +485,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);
}
@@ -445,9 +512,22 @@
color: white;
}
+ .model-action.primary.cancel {
+ background: var(--color-red);
+ }
+
.model-action:disabled {
cursor: not-allowed;
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 {
@@ -455,4 +535,20 @@
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