feat: 增加深色/浅色主题切换功能

- types 新增 Theme 类型(dark/light)
- storage 新增 loadTheme/saveTheme 持久化主题偏好
- ConfigPanel 新增外观分组,主题下拉选择
- App.tsx 通过 data-theme 属性挂载到 html 元素
- App.css 新增 [data-theme=light] 亮色变量覆盖

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2026-06-13 17:08:56 +08:00
parent f17c3c24a7
commit 0227822120
5 changed files with 75 additions and 7 deletions

View File

@@ -1,17 +1,19 @@
// ============================================================
// ConfigPanel — 右侧抽屉式配置面板
// 职责TTS 开关、detail level 切换、语言选择
// 职责:主题切换、TTS 开关、detail level 切换、语言选择
// ============================================================
import type { SessionConfig } from "../../types";
import type { SessionConfig, Theme } from "../../types";
interface ConfigPanelProps {
config: SessionConfig;
theme: Theme;
onUpdate: (partial: Partial<SessionConfig>) => void;
onThemeChange: (theme: Theme) => void;
onClose: () => void;
}
export function ConfigPanel({ config, onUpdate, onClose }: ConfigPanelProps) {
export function ConfigPanel({ config, theme, onUpdate, onThemeChange, onClose }: ConfigPanelProps) {
return (
<div className="drawer-overlay" onClick={onClose}>
<div className="drawer" onClick={(e) => e.stopPropagation()}>
@@ -21,6 +23,24 @@ export function ConfigPanel({ config, onUpdate, onClose }: ConfigPanelProps) {
</div>
<div className="drawer__body">
<div className="config-group">
<div className="config-group__title"></div>
<label className="config-row">
<div className="config-row__info">
<span className="config-row__label"></span>
<span className="config-row__desc"></span>
</div>
<select
value={theme}
onChange={(e) => onThemeChange(e.target.value as Theme)}
>
<option value="dark"></option>
<option value="light"></option>
</select>
</label>
</div>
<div className="config-group">
<div className="config-group__title"></div>