<script lang="ts">
|
import { currentPage } from '../../lib/stores/app'
|
import { t } from '../../lib/i18n'
|
import GeneralPage from './GeneralPage.svelte'
|
import LanguagePage from './LanguagePage.svelte'
|
import PermissionsPage from './PermissionsPage.svelte'
|
import HistoryPage from './HistoryPage.svelte'
|
import UserDictPage from './UserDictPage.svelte'
|
import AboutPage from './AboutPage.svelte'
|
import AppIcon from '../shared/AppIcon.svelte'
|
|
const navItems = [
|
{ id: 'general', label: () => t('nav.home') },
|
{ id: 'language', label: () => t('nav.language') },
|
{ id: 'userdict', label: () => t('nav.userdict') },
|
{ id: 'permissions', label: () => t('nav.permissions') },
|
{ id: 'history', label: () => t('nav.history') },
|
{ id: 'about', label: () => t('nav.about') },
|
]
|
|
let page = $state('general')
|
const unsubPage = currentPage.subscribe(p => { page = p })
|
|
function navigate(id: string) {
|
currentPage.set(id)
|
}
|
</script>
|
|
<div class="settings-layout">
|
<!-- Sidebar -->
|
<nav class="sidebar">
|
<div class="sidebar-header">
|
<AppIcon size={24} />
|
<div class="brand-copy">
|
<span class="brand-name">{t('app.brandName')}</span>
|
<span class="brand-tagline">{t('app.brandTagline')}</span>
|
</div>
|
</div>
|
|
<div class="nav-items">
|
{#each navItems as item}
|
<button
|
class="nav-item"
|
class:active={page === item.id}
|
onclick={() => navigate(item.id)}
|
>
|
<span class="nav-icon">
|
{#if item.id === 'general'}
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
|
<path d="M2.5 7.5L8 3l5.5 4.5"/>
|
<path d="M4 6.5V13h3v-3.5h2V13h3V6.5"/>
|
</svg>
|
{:else if item.id === 'language'}
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
|
<circle cx="8" cy="8" r="6"/>
|
<path d="M2.5 8h11"/>
|
<path d="M8 2.5c1.5 1.6 2.2 3.4 2.2 5.5S9.5 11.9 8 13.5"/>
|
<path d="M8 2.5C6.5 4.1 5.8 5.9 5.8 8s.7 3.9 2.2 5.5"/>
|
</svg>
|
{:else if item.id === 'history'}
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
|
<circle cx="8" cy="8" r="6"/>
|
<polyline points="8,4.5 8,8 10.5,9.5"/>
|
</svg>
|
{:else if item.id === 'userdict'}
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
|
<path d="M3 3.5h10"/>
|
<path d="M3 8h7"/>
|
<path d="M3 12.5h5"/>
|
<path d="M11 11l1.2 1.2L14.5 10"/>
|
</svg>
|
{:else if item.id === 'permissions'}
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
|
<path d="M8 2L3.5 4v3.2c0 2.9 1.8 5.1 4.5 6.3 2.7-1.2 4.5-3.4 4.5-6.3V4L8 2Z"/>
|
<path d="M5.8 7.9l1.4 1.4 3-3.2"/>
|
</svg>
|
{:else if item.id === 'about'}
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round">
|
<circle cx="8" cy="8" r="6"/>
|
<path d="M8 7.5V11"/>
|
<circle cx="8" cy="5.5" r="0.6" fill="currentColor" stroke="none"/>
|
</svg>
|
{/if}
|
</span>
|
<span class="nav-label">{item.label()}</span>
|
</button>
|
{/each}
|
</div>
|
</nav>
|
|
<!-- Content -->
|
<main class="content">
|
{#if page === 'general'}
|
<GeneralPage />
|
{:else if page === 'language'}
|
<LanguagePage />
|
{:else if page === 'userdict'}
|
<UserDictPage />
|
{:else if page === 'permissions'}
|
<PermissionsPage />
|
{:else if page === 'history'}
|
<HistoryPage />
|
{:else if page === 'about'}
|
<AboutPage />
|
{/if}
|
</main>
|
</div>
|
|
<style>
|
.settings-layout {
|
display: flex;
|
height: 100vh;
|
overflow: hidden;
|
}
|
|
.sidebar {
|
width: var(--sidebar-width);
|
display: flex;
|
flex-direction: column;
|
padding: var(--spacing-lg);
|
padding-top: 40px;
|
border-right: 1px solid var(--color-separator);
|
-webkit-app-region: drag;
|
}
|
|
.sidebar-header {
|
display: flex;
|
align-items: center;
|
gap: var(--spacing-sm);
|
margin-bottom: var(--spacing-xl);
|
-webkit-app-region: no-drag;
|
}
|
|
.brand-copy {
|
display: flex;
|
min-width: 0;
|
flex-direction: column;
|
gap: 2px;
|
}
|
|
.brand-name {
|
font-weight: 600;
|
font-size: var(--font-size-lg);
|
line-height: 1.15;
|
color: var(--color-label);
|
}
|
|
.brand-tagline {
|
font-size: var(--font-size-xs);
|
line-height: 1.2;
|
color: var(--color-secondary-label);
|
}
|
|
.nav-items {
|
display: flex;
|
flex-direction: column;
|
gap: 2px;
|
-webkit-app-region: no-drag;
|
}
|
|
.nav-item {
|
display: flex;
|
align-items: center;
|
gap: var(--spacing-sm);
|
padding: var(--spacing-sm) var(--spacing-md);
|
border-radius: var(--radius-sm);
|
border: none;
|
background: transparent;
|
cursor: pointer;
|
font-size: var(--font-size-base);
|
color: var(--color-secondary-label);
|
transition: all var(--transition-fast);
|
text-align: left;
|
width: 100%;
|
position: relative;
|
}
|
|
.nav-item:hover {
|
background: rgba(0, 0, 0, 0.04);
|
color: var(--color-label);
|
}
|
|
.nav-item.active {
|
background: rgba(0, 122, 255, 0.08);
|
color: var(--color-blue);
|
}
|
|
.nav-item.active::before {
|
content: '';
|
position: absolute;
|
left: 0;
|
top: 6px;
|
bottom: 6px;
|
width: 3px;
|
border-radius: 2px;
|
background: var(--color-blue);
|
}
|
|
.nav-icon {
|
width: 20px;
|
height: 16px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.nav-label {
|
font-weight: 500;
|
}
|
|
.content {
|
flex: 1;
|
overflow-y: auto;
|
padding: 20px;
|
}
|
</style>
|
