Refactor settings to centralized configuration with reusable components

AGENTS.md

@@ -60,6 +60,7 @@ ffmpeg-easy/
 │   │   ├── ExecutionPanel.tsx  # 执行面板（命令信息+表单+进度+输出）
 │   │   ├── FFmpegToolbar.tsx   # 顶部工具栏组件
 │   │   ├── FFmpegDialogs.tsx   # 对话框组件集合
+│   │   ├── SettingsDialog.tsx  # 设置对话框（使用 SettingsRenderer）
 │   │   ├── InitializationDialog.tsx # 初始化对话框（居中模式选择）
 │   │   ├── ProgressLogViewer.tsx # 优化的进度和日志组件（shadcn/ui）
 │   │   ├── DynamicForm.tsx     # 动态表单组件（基于 JSON Schema）
@@ -70,7 +71,19 @@ ffmpeg-easy/
 │   │   ├── BatchFileUpload.tsx # 批量文件上传组件
 │   │   ├── CDNSelector.tsx     # CDN 配置选择器
 │   │   ├── AGENTS.md           # Components 架构文档
+│   │   ├── settings/       # 设置系统组件（可复用）
+│   │   │   ├── SettingItem.tsx      # 基础包装组件
+│   │   │   ├── SettingSelect.tsx    # 下拉选择（带 store 绑定）
+│   │   │   ├── SettingSwitch.tsx    # 开关切换（带 store 绑定）
+│   │   │   ├── SettingButton.tsx    # 操作按钮
+│   │   │   ├── SettingCard.tsx      # 信息/状态卡片
+│   │   │   ├── SettingStats.tsx     # 存储统计网格
+│   │   │   ├── SettingCustom.tsx    # 自定义内容（About 部分）
+│   │   │   ├── SettingsRenderer.tsx # 主渲染器（策略模式）
+│   │   │   └── index.ts             # 统一导出
 │   │   └── ui/            # shadcn/ui 组件库
+│   ├── config/             # 应用配置
+│   │   └── settings-config.ts # 设置配置（单一数据源）
 │   ├── lib/               # 工具库
 │   │   └── utils.ts       # cn() 等工具函数
 │   ├── hooks/             # 自定义 Hooks
@@ -369,6 +382,29 @@ All documentation has been organized into the `docs/` directory:
 
 ## 更新日志
 
+### 2025-11-11 - Settings System Refactor 🎨
+- **Single Configuration Source** ✨
+  - Created `app/config/settings-config.ts` as single source of truth
+  - All settings now defined centrally with type safety
+  - Eliminated code duplication between desktop and mobile
+
+- **Reusable Settings Components** 🔧
+  - Built 7 specialized components: SettingItem, SettingSelect, SettingSwitch, SettingButton, SettingCard, SettingStats, SettingCustom
+  - SettingsRenderer with strategy pattern (dialog/page modes)
+  - Store bindings integrated (ffmpegWeb, task, cdn, command)
+
+- **Code Reduction** 📉
+  - SettingsDialog.tsx: 611 → 104 lines (83% reduction)
+  - settings.tsx: 548 → 120 lines (78% reduction)
+  - Total: 1159 → 224 lines (80.7% reduction)
+  - Added ~1250 lines of reusable, type-safe infrastructure
+
+- **Developer Experience** 🚀
+  - Add new settings in one place (config file)
+  - Type-safe configuration with TypeScript
+  - Consistent behavior across desktop/mobile
+  - Easier to maintain and extend
+
 ### 2025-11-09 (v5.0) - Three Major Updates 🎉
 - **Store Refactoring Complete** ✨
   - Restructured all stores into subdirectories (types/index/default-values)

app/components/AGENTS.md

@@ -46,9 +46,65 @@ shadcn/ui components based on Radix UI primitives. Do not modify these directly
 
 - **SettingsDialog.tsx**: 
   - 应用设置对话框（Notion 风格布局）
-  - 左侧导航栏 + 右侧内容区
+  - 使用 SettingsRenderer 组件 (dialog mode)
+  - 2列布局：左侧分类导航 + 右侧内容区
   - 5大分类：通用、性能、存储、CDN、关于
   - 集成 CDNSelector 组件
+  - **重构后**: 从 611 行减少到 104 行 (83%)
+
+#### Settings System (`components/settings/`)
+
+**Settings Configuration** (`config/settings-config.ts`):
+- 单一数据源：所有设置的配置定义
+- 类型定义：`SettingType`, `SettingConfig`, `SettingCategory`, `StoreBinding`
+- 与 Zustand stores 集成：ffmpegWeb, task, cdn, command
+
+**Reusable Components**:
+- **SettingItem**: 基础包装组件（标签、描述、布局）
+- **SettingSelect**: 下拉选择（带 store 绑定）
+- **SettingSwitch**: 开关切换（带 store 绑定）
+- **SettingButton**: 操作按钮
+- **SettingCard**: 信息/状态卡片
+- **SettingStats**: 存储统计网格
+- **SettingCustom**: 自定义内容（About 部分）
+- **SettingsRenderer**: 主渲染器（策略模式）
+  - `mode="dialog"`: 桌面双列布局
+  - `mode="page"`: 移动端平铺布局
+
+**Usage Pattern**:
+```typescript
+<SettingsRenderer
+  mode="dialog" // or "page"
+  categories={settingsCategories}
+  activeCategory={activeCategory}
+  onCategoryChange={setActiveCategory}
+  context={{
+    presetsCount,
+    categoriesCount,
+    storageSize,
+    onResetCommands,
+    onClearHistory,
+    onOpenCDNSelector,
+    isClearing,
+  }}
+/>
+```
+
+**Adding New Settings**:
+只需在 `settings-config.ts` 中添加配置：
+```typescript
+{
+  id: 'my-setting',
+  type: 'switch', // select | switch | button | card | stats | custom
+  title: '设置标题',
+  description: '设置描述',
+  storeBinding: {
+    store: 'ffmpegWeb',
+    key: 'myProperty',
+    setter: 'setMyProperty',
+  },
+}
+```
 
 - **ResetConfirmDialog.tsx**: 
   - 重置命令预设确认对话框