| null>(null)
- // Sync external changes
useEffect(() => { setLocalValue(value) }, [value])
const handleChange = (newVal: string) => {
@@ -389,25 +250,18 @@ function CustomCSSEditor({ value, onChange }: { value: string; onChange: (css: s
/* Backgrounds */
--bg-000: 220 20% 98%;
--bg-100: 220 15% 95%;
- --bg-200: 220 12% 92%;
- --bg-300: 220 10% 88%;
- --bg-400: 220 8% 84%;
/* Text */
--text-100: 220 15% 15%;
- --text-200: 220 10% 35%;
/* Accent */
- --accent-brand: 260 70% 55%;
--accent-main-100: 260 70% 55%;
}`
return (
-
-
- Custom CSS applied globally. Use :root:root to override theme variables.
-
+
+ Custom CSS applied globally. Use :root:root to override theme variables.
{localValue.trim() && (
-
@@ -434,10 +284,10 @@ function CustomCSSEditor({ value, onChange }: { value: string; onChange: (css: s
}
// ============================================
-// General Settings
+// Tab: Appearance
// ============================================
-function GeneralSettings({ themeMode, onThemeChange, isWideMode, onToggleWideMode, presetId, onPresetChange, availablePresets, customCSS, onCustomCSSChange }: {
+function AppearanceSettings({ themeMode, onThemeChange, isWideMode, onToggleWideMode, presetId, onPresetChange, availablePresets, customCSS, onCustomCSSChange }: {
themeMode: ThemeMode
onThemeChange: (mode: ThemeMode, event?: React.MouseEvent) => void
isWideMode?: boolean
@@ -448,20 +298,7 @@ function GeneralSettings({ themeMode, onThemeChange, isWideMode, onToggleWideMod
customCSS?: string
onCustomCSSChange?: (css: string) => void
}) {
- const { pathMode, setPathMode, effectiveStyle, detectedStyle, isAutoMode } = usePathMode()
- const [autoApprove, setAutoApprove] = useState(autoApproveStore.enabled)
- const [addingServer, setAddingServer] = useState(false)
- const { servers, activeServer, addServer, removeServer, setActiveServer, checkHealth, checkAllHealth, getHealth } = useServerStore()
- const { enabled: notificationsEnabled, setEnabled: setNotificationsEnabled, supported: notificationsSupported, permission: notificationPermission } = useNotification()
-
- useEffect(() => { checkAllHealth() }, [checkAllHealth])
-
- const handleAutoApprove = () => {
- const v = !autoApprove
- setAutoApprove(v)
- autoApproveStore.setEnabled(v)
- if (!v) autoApproveStore.clearAllRules()
- }
+ const [fontSize, setFontSize] = useState(themeStore.fontSize)
return (
@@ -482,15 +319,14 @@ function GeneralSettings({ themeMode, onThemeChange, isWideMode, onToggleWideMod
))}
- {/* Custom CSS Editor - only show when custom preset is selected */}
{presetId === 'custom' && onCustomCSSChange && (
)}
)}
- {/* Color Mode (Light/Dark/Auto) */}
-
Appearance
+ {/* Color Mode */}
+
Color Mode
+ {/* Font Size */}
+
Font Size
+
{ setFontSize(v); themeStore.setFontSize(v) }}
+ />
+
+
+
+ {/* Layout */}
+ Layout
+ {onToggleWideMode && (
+ : }
+ onClick={onToggleWideMode}
+ >
+
+
+ )}
+
+ )
+}
+
+// ============================================
+// Tab: General
+// ============================================
+
+function GeneralSettings() {
+ const { pathMode, setPathMode, effectiveStyle, detectedStyle, isAutoMode } = usePathMode()
+ const [autoApprove, setAutoApprove] = useState(autoApproveStore.enabled)
+ const { enabled: notificationsEnabled, setEnabled: setNotificationsEnabled, supported: notificationsSupported, permission: notificationPermission } = useNotification()
+
+ const handleAutoApprove = () => {
+ const v = !autoApprove
+ setAutoApprove(v)
+ autoApproveStore.setEnabled(v)
+ if (!v) autoApproveStore.clearAllRules()
+ }
+
+ return (
+
{/* Path Style */}
Path Style
- {/* Layout & Features */}
-
Preferences
- {onToggleWideMode && (
-
:
}
- onClick={onToggleWideMode}
- >
-
-
- )}
+ {/* Behavior */}
+
Behavior
)}
+
+ )
+}
-
+// ============================================
+// Tab: Servers
+// ============================================
+
+function ServerItem({ server, health, isActive, onSelect, onDelete, onCheckHealth }: {
+ server: ServerConfig
+ health: ServerHealth | null
+ isActive: boolean
+ onSelect: () => void
+ onDelete: () => void
+ onCheckHealth: () => void
+}) {
+ const statusIcon = () => {
+ if (!health || health.status === 'checking') return
+ if (health.status === 'online') return
+ if (health.status === 'unauthorized') return
+ return
+ }
+
+ const statusTitle = () => {
+ if (!health) return 'Check health'
+ switch (health.status) {
+ case 'checking': return 'Checking...'
+ case 'online': return `Online (${health.latency}ms)${health.version ? ` v${health.version}` : ''}`
+ case 'unauthorized': return 'Invalid credentials'
+ case 'offline': return health.error || 'Offline'
+ case 'error': return health.error || 'Error'
+ default: return 'Unknown'
+ }
+ }
+
+ return (
+
{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect() }}}
+ >
+
+
+
+ {server.name}
+ {isActive && }
+
+
+ {server.url}
+ {server.auth?.password && }
+
+
+
+ {!server.isDefault && (
+
+ )}
+
+ )
+}
- {/* Servers */}
-
-
Servers
+function AddServerForm({ onAdd, onCancel }: {
+ onAdd: (name: string, url: string, username?: string, password?: string) => void
+ onCancel: () => void
+}) {
+ const [name, setName] = useState('')
+ const [url, setUrl] = useState('')
+ const [username, setUsername] = useState('')
+ const [password, setPassword] = useState('')
+ const [showAuth, setShowAuth] = useState(false)
+ const [error, setError] = useState('')
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault()
+ if (!name.trim()) { setError('Name required'); return }
+ if (!url.trim()) { setError('URL required'); return }
+ try { new URL(url) } catch { setError('Invalid URL'); return }
+
+ onAdd(
+ name.trim(),
+ url.trim(),
+ password.trim() ? (username.trim() || 'opencode') : undefined,
+ password.trim() || undefined
+ )
+ }
+
+ const isCrossOrigin = (() => {
+ if (!url.trim()) return false
+ try {
+ const serverUrl = new URL(url)
+ return serverUrl.origin !== window.location.origin
+ } catch { return false }
+ })()
+
+ const inputCls = "w-full h-8 px-3 text-[13px] bg-bg-000 border border-border-200 rounded-md focus:outline-none focus:border-accent-main-100/50 text-text-100 placeholder:text-text-400"
+
+ return (
+
+ )
+}
+
+function ServersSettings() {
+ const [addingServer, setAddingServer] = useState(false)
+ const { servers, activeServer, addServer, removeServer, setActiveServer, checkHealth, checkAllHealth, getHealth } = useServerStore()
+
+ useEffect(() => { checkAllHealth() }, [checkAllHealth])
+
+ return (
+
+
+ Connections
{!addingServer && (
+ {servers.length === 0 && !addingServer && (
+
+ No servers configured
+
+ )}
)
}
@@ -595,16 +641,60 @@ function GeneralSettings({ themeMode, onThemeChange, isWideMode, onToggleWideMod
// ============================================
const TABS: { id: SettingsTab; label: string; icon: React.ReactNode }[] = [
+ { id: 'appearance', label: 'Appearance', icon:
},
{ id: 'general', label: 'General', icon:
},
+ { id: 'servers', label: 'Servers', icon:
},
{ id: 'keybindings', label: 'Shortcuts', icon:
},
]
+// ============================================
+// Tab Content Router
+// ============================================
+
+function TabContent({ tab, themeMode, onThemeChange, isWideMode, onToggleWideMode, presetId, onPresetChange, availablePresets, customCSS, onCustomCSSChange }: {
+ tab: SettingsTab
+ themeMode: ThemeMode
+ onThemeChange: (mode: ThemeMode, event?: React.MouseEvent) => void
+ isWideMode?: boolean
+ onToggleWideMode?: () => void
+ presetId?: string
+ onPresetChange?: (presetId: string, event?: React.MouseEvent) => void
+ availablePresets?: { id: string; name: string; description: string }[]
+ customCSS?: string
+ onCustomCSSChange?: (css: string) => void
+}) {
+ switch (tab) {
+ case 'appearance':
+ return (
+
+ )
+ case 'general':
+ return
+ case 'servers':
+ return
+ case 'keybindings':
+ return
+ default:
+ return null
+ }
+}
+
// ============================================
// Main Settings Dialog
// ============================================
export function SettingsDialog({
- isOpen, onClose, themeMode, onThemeChange, isWideMode, onToggleWideMode, initialTab = 'general',
+ isOpen, onClose, themeMode, onThemeChange, isWideMode, onToggleWideMode, initialTab = 'appearance',
presetId, onPresetChange, availablePresets, customCSS, onCustomCSSChange,
}: SettingsDialogProps) {
const [tab, setTab] = useState
(initialTab)
@@ -612,7 +702,6 @@ export function SettingsDialog({
useEffect(() => { if (isOpen) setTab(initialTab) }, [isOpen, initialTab])
- // Tab keyboard navigation
const handleTabKeyDown = useCallback((e: React.KeyboardEvent) => {
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
e.preventDefault()
@@ -623,6 +712,11 @@ export function SettingsDialog({
}
}, [tab])
+ const contentProps = {
+ themeMode, onThemeChange, isWideMode, onToggleWideMode,
+ presetId, onPresetChange, availablePresets, customCSS, onCustomCSSChange,
+ }
+
// 移动端：顶部 tab 切换 + 全屏内容
if (isMobile) {
return (
@@ -639,13 +733,13 @@ export function SettingsDialog({
- {/* Tab Bar - 横向排列 */}
-
+ {/* Tab Bar - 横向滚动 */}
+
{TABS.map(t => (
@@ -707,20 +788,7 @@ export function SettingsDialog({
{/* Right Content */}
- {tab === 'general' && (
-
- )}
- {tab === 'keybindings' && }
+
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index 16e3fbc6..b7d088f6 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -151,6 +151,12 @@ export function useTheme() {
themeStore.setCustomCSS(css)
}, [])
+ // ---- Font Size ----
+
+ const setFontSize = useCallback((size: number) => {
+ themeStore.setFontSize(size)
+ }, [])
+
return {
// 日夜模式（向后兼容）
mode: state.colorMode,
@@ -170,5 +176,9 @@ export function useTheme() {
// 自定义 CSS
customCSS: state.customCSS,
setCustomCSS,
+
+ // 字体大小
+ fontSize: state.fontSize,
+ setFontSize,
}
}
diff --git a/src/store/index.ts b/src/store/index.ts
index 765f5c91..9a096093 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -26,7 +26,7 @@ export type { KeybindingAction, KeybindingConfig, ParsedKeybinding } from './key
export { messageCacheStore } from './messageCacheStore'
export { themeStore } from './themeStore'
-export type { ColorMode, ThemeState } from './themeStore'
+export type { ColorMode, FontSize, ThemeState } from './themeStore'
export { todoStore, useTodos, useTodoStats, useCurrentTask } from './todoStore'
export type { SessionTodos } from './todoStore'
diff --git a/src/store/themeStore.ts b/src/store/themeStore.ts
index acfb7138..602fea88 100644
--- a/src/store/themeStore.ts
+++ b/src/store/themeStore.ts
@@ -17,6 +17,17 @@ import type { ThemePreset, ThemeColors } from '../themes'
export type ColorMode = 'system' | 'light' | 'dark'
+/** 字体大小，单位 px，范围 12-24 */
+export type FontSize = number
+
+const DEFAULT_FONT_SIZE = 16
+const MIN_FONT_SIZE = 12
+const MAX_FONT_SIZE = 24
+
+function clampFontSize(v: number): number {
+ return Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, Math.round(v)))
+}
+
export interface ThemeState {
/** 当前选中的主题风格 ID */
presetId: string
@@ -24,6 +35,8 @@ export interface ThemeState {
colorMode: ColorMode
/** 用户自定义 CSS（覆盖 CSS 变量） */
customCSS: string
+ /** 全局字体大小 (px) */
+ fontSize: FontSize
}
// ============================================
@@ -33,6 +46,7 @@ export interface ThemeState {
const STORAGE_KEY_PRESET = 'theme-preset'
const STORAGE_KEY_COLOR_MODE = 'theme-mode'
const STORAGE_KEY_CUSTOM_CSS = 'theme-custom-css'
+const STORAGE_KEY_FONT_SIZE = 'theme-font-size'
// ============================================
// DOM Style Element IDs
@@ -53,11 +67,13 @@ class ThemeStore {
const savedPreset = localStorage.getItem(STORAGE_KEY_PRESET) || DEFAULT_THEME_ID
const savedMode = localStorage.getItem(STORAGE_KEY_COLOR_MODE) as ColorMode || 'system'
const savedCSS = localStorage.getItem(STORAGE_KEY_CUSTOM_CSS) || ''
+ const savedFontSize = clampFontSize(Number(localStorage.getItem(STORAGE_KEY_FONT_SIZE)) || DEFAULT_FONT_SIZE)
this.state = {
presetId: savedPreset,
colorMode: savedMode,
customCSS: savedCSS,
+ fontSize: savedFontSize,
}
}
@@ -70,6 +86,7 @@ class ThemeStore {
get presetId() { return this.state.presetId }
get colorMode() { return this.state.colorMode }
get customCSS() { return this.state.customCSS }
+ get fontSize() { return this.state.fontSize }
/** 获取当前主题预设（内置主题返回对象，自定义返回 undefined） */
getPreset(): ThemePreset | undefined {
@@ -128,6 +145,15 @@ class ThemeStore {
this.emit()
}
+ setFontSize(size: FontSize) {
+ const clamped = clampFontSize(size)
+ if (this.state.fontSize === clamped) return
+ this.state = { ...this.state, fontSize: clamped }
+ localStorage.setItem(STORAGE_KEY_FONT_SIZE, String(clamped))
+ this.applyFontSize()
+ this.emit()
+ }
+
// ---- Theme Application ----
/** 初始化：应用当前主题到 DOM */
@@ -173,7 +199,10 @@ class ThemeStore {
// 3. 应用自定义 CSS
this.applyCustomCSS()
- // 4. 更新 meta theme-color
+ // 4. 应用字体大小
+ this.applyFontSize()
+
+ // 5. 更新 meta theme-color
requestAnimationFrame(() => {
const bg = getComputedStyle(root).getPropertyValue('--color-bg-100').trim()
if (bg) {
@@ -213,6 +242,10 @@ class ThemeStore {
el.textContent = css
}
+ private applyFontSize() {
+ document.documentElement.style.fontSize = `${this.state.fontSize}px`
+ }
+
// ---- Subscription (useSyncExternalStore compatible) ----
subscribe = (listener: () => void): (() => void) => {
From 428957efbf093aff56660abf9bc83c5a158f25af Mon Sep 17 00:00:00 2001
From: lehhair
Date: Thu, 12 Feb 2026 00:40:33 +0800
Subject: [PATCH 012/890] =?UTF-8?q?fix:=20improve=20outline=20index=20visi?=
=?UTF-8?q?bility=20=E2=80=94=20use=20solid=20colors=20with=20accent=20tin?=
=?UTF-8?q?t=20and=20subtle=20glow,=20add=20focused=20title=20overlay=20on?=
=?UTF-8?q?=20mobile=20touch=20slide?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/OutlineIndex.tsx | 85 +++++++++++++++++++++------------
1 file changed, 55 insertions(+), 30 deletions(-)
diff --git a/src/components/OutlineIndex.tsx b/src/components/OutlineIndex.tsx
index 8fb98506..9393f639 100644
--- a/src/components/OutlineIndex.tsx
+++ b/src/components/OutlineIndex.tsx
@@ -39,7 +39,7 @@ const LABEL_THRESHOLD = 0.65
const TICK_W_MIN = 8
const TICK_W_MAX = 22
-const TICK_H = 2
+const TICK_H = 2.5
const MARGIN_MIN = 1
const MARGIN_MAX = 8
@@ -138,7 +138,6 @@ const DesktopAperture = memo(function DesktopAperture({
const containerRef = useRef(null)
const cursorYRef = useRef(null)
const strengthsRef = useRef([])
- const hlStateRef = useRef([])
const rafIdRef = useRef(0)
const isHoveringRef = useRef(false)
@@ -149,7 +148,6 @@ const DesktopAperture = memo(function DesktopAperture({
useEffect(() => {
strengthsRef.current = entries.map(() => 0)
- hlStateRef.current = entries.map(() => false)
}, [entries.length]) // eslint-disable-line react-hooks/exhaustive-deps
// ---- Animation loop ----
@@ -192,23 +190,18 @@ const DesktopAperture = memo(function DesktopAperture({
tick.style.width = `${baseW + s * (TICK_W_MAX - TICK_W_MIN)}px`
item.style.marginTop = `${MARGIN_MIN + s * (MARGIN_MAX - MARGIN_MIN)}px`
item.style.marginBottom = `${MARGIN_MIN + s * (MARGIN_MAX - MARGIN_MIN)}px`
- tick.style.opacity = `${(isActive ? 0.6 : 0.3) + s * 0.7}`
- // tick 颜色
+ // tick 颜色 —— 不用 opacity，直接实色
const shouldHL = s > 0.5
- if (shouldHL !== hlStateRef.current[i]) {
- hlStateRef.current[i] = shouldHL
- if (shouldHL) {
- tick.classList.remove('bg-text-400/40', 'bg-text-300')
- tick.classList.add('bg-accent-main-100')
- } else {
- tick.classList.remove('bg-accent-main-100')
- tick.classList.add(isActive ? 'bg-text-300' : 'bg-text-400/40')
- }
- }
- if (!shouldHL && isActive && !tick.classList.contains('bg-text-300')) {
- tick.classList.remove('bg-text-400/40')
- tick.classList.add('bg-text-300')
+ if (shouldHL) {
+ tick.style.backgroundColor = 'hsl(var(--accent-main-200))'
+ tick.style.boxShadow = '0 0 3px hsl(var(--accent-main-100) / 0.4)'
+ } else if (isActive) {
+ tick.style.backgroundColor = 'hsl(var(--accent-main-100) / 0.55)'
+ tick.style.boxShadow = 'none'
+ } else {
+ tick.style.backgroundColor = 'hsl(var(--border-300))'
+ tick.style.boxShadow = 'none'
}
// label
@@ -293,11 +286,13 @@ const DesktopAperture = memo(function DesktopAperture({
{/* Tick mark */}
@@ -326,6 +321,7 @@ const MobileAperture = memo(function MobileAperture({
}: ApertureProps) {
const [overlayVisible, setOverlayVisible] = useState(false)
const containerRef = useRef