<script lang="ts">
|
import { Call } from '@wailsio/runtime'
|
import { t } from '../../lib/i18n'
|
|
interface DictEntry {
|
id: number
|
from: string
|
to: string
|
enabled: boolean
|
createdAt: number
|
updatedAt: number
|
}
|
|
let entries = $state<DictEntry[]>([])
|
let fromText = $state('')
|
let toText = $state('')
|
let statusText = $state('')
|
let importInput: HTMLInputElement
|
let editingId = $state<number | null>(null)
|
let editFrom = $state('')
|
let editTo = $state('')
|
|
function newestFirst(list: DictEntry[]) {
|
return [...list].sort((a, b) => {
|
const aCreated = a.createdAt || a.id || 0
|
const bCreated = b.createdAt || b.id || 0
|
return bCreated - aCreated
|
})
|
}
|
|
async function loadEntries() {
|
try {
|
const list: any = await Call.ByName('voicesnap/services.UserDictService.GetAll')
|
entries = newestFirst(list || [])
|
} catch {
|
entries = []
|
}
|
}
|
|
function flash(message: string) {
|
statusText = message
|
setTimeout(() => {
|
if (statusText === message) statusText = ''
|
}, 1800)
|
}
|
|
async function addEntry() {
|
if (!fromText.trim()) return
|
try {
|
const entry: any = await Call.ByName('voicesnap/services.UserDictService.Add', fromText, toText)
|
entries = [entry, ...entries]
|
fromText = ''
|
toText = ''
|
flash(t('userdict.saved'))
|
} catch {
|
flash(t('userdict.saveFailed'))
|
}
|
}
|
|
function startEdit(entry: DictEntry) {
|
editingId = entry.id
|
editFrom = entry.from
|
editTo = entry.to
|
}
|
|
function cancelEdit() {
|
editingId = null
|
editFrom = ''
|
editTo = ''
|
}
|
|
async function saveEdit(entry: DictEntry) {
|
if (!editFrom.trim()) return
|
try {
|
const updated: any = await Call.ByName(
|
'voicesnap/services.UserDictService.Update',
|
entry.id,
|
editFrom,
|
editTo,
|
entry.enabled
|
)
|
entries = entries.map(e => e.id === entry.id ? updated : e)
|
cancelEdit()
|
flash(t('userdict.saved'))
|
} catch {
|
flash(t('userdict.saveFailed'))
|
}
|
}
|
|
async function toggleEntry(entry: DictEntry) {
|
try {
|
const updated: any = await Call.ByName(
|
'voicesnap/services.UserDictService.Update',
|
entry.id,
|
entry.from,
|
entry.to,
|
!entry.enabled
|
)
|
entries = entries.map(e => e.id === entry.id ? updated : e)
|
} catch {}
|
}
|
|
async function deleteEntry(id: number) {
|
try {
|
await Call.ByName('voicesnap/services.UserDictService.Delete', id)
|
entries = entries.filter(e => e.id !== id)
|
} catch {}
|
}
|
|
async function exportDict() {
|
try {
|
const path: any = await Call.ByName('voicesnap/services.UserDictService.ExportToFile')
|
if (path) {
|
flash(t('userdict.exportedTo', { path }))
|
}
|
} catch {
|
flash(t('userdict.exportFailed'))
|
}
|
}
|
|
function chooseImportFile() {
|
importInput?.click()
|
}
|
|
async function importDict(e: Event) {
|
const input = e.target as HTMLInputElement
|
const file = input.files?.[0]
|
if (!file) return
|
|
try {
|
const content = await file.text()
|
await Call.ByName('voicesnap/services.UserDictService.ImportJSON', content)
|
await loadEntries()
|
flash(t('userdict.imported'))
|
} catch {
|
flash(t('userdict.importFailed'))
|
} finally {
|
input.value = ''
|
}
|
}
|
|
loadEntries()
|
</script>
|
|
<div class="page">
|
<div class="header">
|
<h1 class="title">{t('userdict.title')}</h1>
|
<p class="subtitle">{t('userdict.subtitle')}</p>
|
</div>
|
|
<div class="toolbar">
|
<div class="toolbar-actions">
|
<button class="secondary-btn" onclick={chooseImportFile}>{t('userdict.import')}</button>
|
<button class="secondary-btn" onclick={exportDict}>{t('userdict.export')}</button>
|
<input
|
bind:this={importInput}
|
class="hidden-input"
|
type="file"
|
accept="application/json,.json"
|
onchange={importDict}
|
/>
|
</div>
|
{#if statusText}
|
<span class="status-text">{statusText}</span>
|
{/if}
|
</div>
|
|
<div class="section add-section">
|
<div class="field">
|
<label for="from">{t('userdict.from')}</label>
|
<input id="from" bind:value={fromText} placeholder={t('userdict.fromPlaceholder')} />
|
</div>
|
<div class="field">
|
<label for="to">{t('userdict.to')}</label>
|
<input id="to" bind:value={toText} placeholder={t('userdict.toPlaceholder')} />
|
</div>
|
<button class="primary-btn" onclick={addEntry} disabled={!fromText.trim()}>
|
{t('userdict.add')}
|
</button>
|
</div>
|
|
<div class="section list-section">
|
{#if entries.length === 0}
|
<div class="empty">
|
<p class="empty-title">{t('userdict.empty')}</p>
|
<p class="empty-desc">{t('userdict.emptyDesc')}</p>
|
</div>
|
{:else}
|
{#each entries as entry, i}
|
{#if i > 0}
|
<div class="divider"></div>
|
{/if}
|
<div class="dict-row" class:disabled={!entry.enabled}>
|
<button
|
class="enable-btn"
|
class:enabled={entry.enabled}
|
title={entry.enabled ? t('userdict.disable') : t('userdict.enable')}
|
onclick={() => toggleEntry(entry)}
|
>
|
{entry.enabled ? '✓' : ''}
|
</button>
|
|
{#if editingId === entry.id}
|
<div class="edit-grid">
|
<input bind:value={editFrom} aria-label={t('userdict.from')} />
|
<input bind:value={editTo} aria-label={t('userdict.to')} />
|
</div>
|
<div class="row-actions">
|
<button class="text-btn" onclick={() => saveEdit(entry)} disabled={!editFrom.trim()}>
|
{t('userdict.save')}
|
</button>
|
<button class="icon-btn" title={t('userdict.cancel')} onclick={cancelEdit}>×</button>
|
</div>
|
{:else}
|
<div class="dict-content">
|
<span class="from-text">{entry.from}</span>
|
<span class="arrow">→</span>
|
<span class="to-text">{entry.to}</span>
|
</div>
|
<div class="row-actions">
|
<button class="text-btn" onclick={() => startEdit(entry)}>{t('userdict.edit')}</button>
|
<button class="icon-btn" title={t('userdict.delete')} onclick={() => deleteEntry(entry.id)}>×</button>
|
</div>
|
{/if}
|
</div>
|
{/each}
|
{/if}
|
</div>
|
</div>
|
|
<style>
|
.page {
|
display: flex;
|
flex-direction: column;
|
min-height: calc(100vh - 40px);
|
}
|
|
.header {
|
margin-bottom: var(--spacing-md);
|
}
|
|
.title {
|
font-size: 22px;
|
font-weight: 700;
|
}
|
|
.subtitle {
|
font-size: var(--font-size-sm);
|
color: var(--color-secondary-label);
|
margin-top: 6px;
|
}
|
|
.toolbar {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
min-height: 30px;
|
margin-bottom: var(--spacing-md);
|
}
|
|
.toolbar-actions,
|
.row-actions {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
}
|
|
.status-text {
|
font-size: var(--font-size-sm);
|
color: var(--color-green);
|
}
|
|
.hidden-input {
|
display: none;
|
}
|
|
.section {
|
background: var(--color-bg-grouped-secondary);
|
border-radius: var(--radius-md);
|
padding: var(--spacing-lg);
|
margin-bottom: var(--spacing-md);
|
}
|
|
.add-section {
|
display: grid;
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
|
gap: var(--spacing-md);
|
align-items: end;
|
}
|
|
.field {
|
display: flex;
|
flex-direction: column;
|
gap: 6px;
|
}
|
|
label {
|
font-size: var(--font-size-sm);
|
color: var(--color-secondary-label);
|
}
|
|
input {
|
width: 100%;
|
height: 34px;
|
border: 1px solid var(--color-separator);
|
border-radius: var(--radius-sm);
|
padding: 0 10px;
|
font: inherit;
|
color: var(--color-label);
|
background: var(--color-bg-secondary);
|
outline: none;
|
}
|
|
input:focus {
|
border-color: var(--color-blue);
|
background: var(--color-bg-primary);
|
}
|
|
button {
|
font: inherit;
|
cursor: pointer;
|
transition: opacity var(--transition-fast), background var(--transition-fast);
|
}
|
|
button:disabled {
|
cursor: default;
|
opacity: 0.45;
|
}
|
|
.primary-btn,
|
.secondary-btn,
|
.text-btn {
|
border: none;
|
border-radius: var(--radius-sm);
|
font-size: var(--font-size-sm);
|
font-weight: 600;
|
}
|
|
.primary-btn {
|
height: 34px;
|
padding: 0 16px;
|
color: white;
|
background: var(--color-blue);
|
}
|
|
.secondary-btn {
|
height: 28px;
|
padding: 0 12px;
|
color: var(--color-blue);
|
background: rgba(0, 122, 255, 0.08);
|
}
|
|
.text-btn {
|
color: var(--color-blue);
|
background: transparent;
|
}
|
|
.icon-btn,
|
.enable-btn {
|
border: none;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-shrink: 0;
|
}
|
|
.icon-btn {
|
width: 26px;
|
height: 26px;
|
border-radius: 50%;
|
color: var(--color-secondary-label);
|
background: transparent;
|
font-size: 20px;
|
line-height: 1;
|
}
|
|
.icon-btn:hover {
|
background: rgba(0, 0, 0, 0.05);
|
color: var(--color-red);
|
}
|
|
.enable-btn {
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
border: 1px solid var(--color-separator);
|
color: white;
|
background: var(--color-bg-secondary);
|
font-size: 13px;
|
font-weight: 700;
|
}
|
|
.enable-btn.enabled {
|
border-color: var(--color-green);
|
background: var(--color-green);
|
}
|
|
.list-section {
|
flex: 1;
|
overflow: auto;
|
}
|
|
.dict-row {
|
display: grid;
|
grid-template-columns: 20px minmax(0, 1fr) auto;
|
gap: var(--spacing-md);
|
align-items: center;
|
min-height: 48px;
|
}
|
|
.dict-row.disabled .dict-content {
|
opacity: 0.45;
|
}
|
|
.dict-content {
|
display: grid;
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
gap: 10px;
|
align-items: center;
|
min-width: 0;
|
}
|
|
.from-text,
|
.to-text {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
font-size: var(--font-size-base);
|
}
|
|
.from-text {
|
color: var(--color-label);
|
}
|
|
.to-text {
|
color: var(--color-blue);
|
font-weight: 500;
|
}
|
|
.arrow {
|
color: var(--color-tertiary-label);
|
}
|
|
.edit-grid {
|
display: grid;
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
gap: var(--spacing-md);
|
}
|
|
.divider {
|
height: 1px;
|
background: var(--color-separator);
|
margin: 6px 0 6px 32px;
|
}
|
|
.empty {
|
text-align: center;
|
padding: var(--spacing-xxl) 0;
|
}
|
|
.empty-title {
|
font-weight: 600;
|
color: var(--color-secondary-label);
|
}
|
|
.empty-desc {
|
font-size: var(--font-size-sm);
|
color: var(--color-tertiary-label);
|
margin-top: 6px;
|
}
|
</style>
|
