refactor(settings): 重构设置页面UI组件使用统一Material Design 3设计风格 (#87)

* refactor(settings): 重构设置页面布局和组件结构

将设置页面的布局重构为更模块化的组件结构，包括：
- 添加分割线辅助方法
- 创建可复用的设置分组组件
- 实现主题模式选择组件
- 优化导航项和功能项的构建方式
- 改进UI一致性和Material 3设计规范

* refactor(settings): 抽取设置页面基础组件并更新文档

将 SettingsSection、SettingsNavigationTile 和 FilterChipSelector 抽取为独立组件
更新 Material Design 3 设置页面实现规范文档
重构 settings_screen.dart 使用新组件

* refactor(settings): 重构设置页面UI组件使用统一设计风格

移除页面描述文本，使用新的SettingsSection和SettingsNavigationTile组件
统一语言选择对话框的样式和交互
调整间距和布局以符合设计规范

* refactor(settings): 将语言选择弹窗改为底部抽屉并优化样式

优化语言选择交互，将原来的对话框改为可拖拽的底部抽屉，提升移动端操作体验
移除测试中不再需要的 chevron_right 图标检查
为 AI 标签设置页面添加滚动支持

* refactor(translation_settings): 简化翻译目标语种选择界面样式

移除关闭按钮和分隔线，优化列表项背景色实现方式

* feat(ui): 将语言选择对话框改为底部弹窗以提升用户体验

* test: 更新测试用例以使用BottomSheet替代AlertDialog

refactor: 添加Mockito测试桩并重构AppUpdateUseCase测试

* refactor(ui): 优化 FilterChipSelector 布局并使用主题文本样式

将 Row 布局改为 Wrap 以支持自动换行
使用主题的 labelSmall 文本样式并调整字重
移除未使用的 ChooseThemeDialog 组件

* style(settings): 使用主题文本样式替代硬编码样式

* fix(settings): 添加导出日志按钮执行状态检查

防止在导出日志操作执行中重复点击

Author: shadowfish07

.trae/rules/project_rules.md

@@ -619,3 +619,81 @@ This project follows a Test-Driven Development (TDD) approach. All new features
 ### 注意事项
 
 - 遇到 Mockito null safety 错误时，首先运行 flutter pub run build_runner build
+
+## Material Design 3 设置页面实现规范
+
+基于 `lib/ui/settings/widgets/settings_screen.dart` 的标准实现以及抽取的基础组件
+
+### 核心架构模式
+
+**分组设置架构**：使用分组标题 + 卡片容器 + 列表项的三层结构
+- 标题：`titleSmall` + `primary` 颜色 + `fontWeight.w600` + `letterSpacing: 0.1`
+- 容器：`surfaceContainerLow` 背景 + `elevation: 0` 扁平化设计
+- 列表项：标准 `ListTile` + 自定义内容边距
+
+### 样式实现要点
+
+1. **主题一致性**：所有样式基于 `Theme.of(context)` 获取，禁止硬编码颜色、字号
+2. **边距规范**：
+   - 分组标题：左侧 16px，底部 8px
+   - 列表项内容：水平 16px，垂直 4px
+   - 分组间距：24px
+3. **图标规范**：24px 大小，使用 `onSurfaceVariant` 颜色
+4. **分割线系统**：1px 厚度，`surface` 颜色，动态插入列表项间
+
+### Command 集成模式
+
+使用 `CommandBuilder` 处理异步操作的三种状态：
+- **执行中**：显示 `CircularProgressIndicator`
+- **成功**：显示 `check_circle` 图标
+- **错误**：显示 `error` 图标 + `error` 颜色
+
+### 特殊组件实现
+
+1. **主题选择器**：`FilterChip` 实现多选一
+   - 选中状态：`secondaryContainer` + `onSecondaryContainer` 配色
+   - 文本样式：基于 `Theme.of(context).textTheme.labelSmall` 并通过 `copyWith(fontWeight: FontWeight.w500)` 调整字重
+
+2. **导航设置项**：图标 + 标题 + 副标题的标准布局
+   - 支持可选的 `trailing` 组件（如更新提示标签）
+
+### 基础组件库
+
+项目中已抽取以下可复用组件，位于 `lib/ui/core/ui/`：
+
+1. **SettingsSection**：标准化设置分组组件
+   ```dart
+   SettingsSection(
+     title: '连接设置',
+     children: [/* 子组件列表 */],
+   )
+   ```
+
+2. **SettingsNavigationTile**：导航设置项组件
+   ```dart
+   SettingsNavigationTile(
+     icon: Icons.api,
+     title: 'API 配置',
+     subtitle: '配置 Readeck 服务器连接',
+     onTap: () => context.push(Routes.apiConfigSetting),
+   )
+   ```
+
+3. **FilterChipSelector**：多选一选择器组件
+   ```dart
+   FilterChipSelector<ThemeMode>(
+     options: ThemeMode.values,
+     selectedValue: viewModel.themeMode,
+     onSelectionChanged: (mode) => viewModel.setThemeMode.execute(mode),
+     labelBuilder: _getThemeModeText,
+   )
+   ```
+
+> **注意**：分割线逻辑已内置在 `SettingsSection` 组件中，无需额外处理。
+
+### 使用规范
+
+1. **优先使用基础组件**：新的设置页面应优先使用已抽取的基础组件
+2. **保持一致性**：所有设置页面都应遵循相同的视觉规范和交互模式
+3. **主题兼容**：确保所有组件在不同主题模式下正常显示
+4. **可访问性**：保持足够的触摸目标大小和对比度

lib/ui/core/ui/filter_chip_selector.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+
+class FilterChipSelector<T> extends StatelessWidget {
+  const FilterChipSelector({
+    super.key,
+    required this.options,
+    required this.selectedValue,
+    required this.onSelectionChanged,
+    required this.labelBuilder,
+  });
+
+  final List<T> options;
+  final T selectedValue;
+  final ValueChanged<T> onSelectionChanged;
+  final String Function(T) labelBuilder;
+
+  @override
+  Widget build(BuildContext context) {
+    return Wrap(
+      spacing: 8.0,
+      children: options.map((option) {
+        final isSelected = selectedValue == option;
+        return FilterChip(
+          selected: isSelected,
+          label: Text(labelBuilder(option)),
+          onSelected: (selected) {
+            if (selected) {
+              onSelectionChanged(option);
+            }
+          },
+          selectedColor: Theme.of(context).colorScheme.secondaryContainer,
+          checkmarkColor: Theme.of(context).colorScheme.onSecondaryContainer,
+          labelStyle: Theme.of(context).textTheme.labelSmall?.copyWith(
+                color: isSelected
+                    ? Theme.of(context).colorScheme.onSecondaryContainer
+                    : Theme.of(context).colorScheme.onSurface,
+                fontWeight: FontWeight.w500,
+              ),
+        );
+      }).toList(),
+    );
+  }
+}

lib/ui/core/ui/settings_navigation_tile.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+class SettingsNavigationTile extends StatelessWidget {
+  const SettingsNavigationTile({
+    super.key,
+    required this.icon,
+    required this.title,
+    required this.subtitle,
+    required this.onTap,
+    this.trailing,
+  });
+
+  final IconData icon;
+  final String title;
+  final String subtitle;
+  final VoidCallback onTap;
+  final Widget? trailing;
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+      leading: Icon(
+        icon,
+        color: Theme.of(context).colorScheme.onSurfaceVariant,
+        size: 24,
+      ),
+      title: Text(
+        title,
+        style: Theme.of(context).textTheme.bodyLarge?.copyWith(
+              fontWeight: FontWeight.w500,
+            ),
+      ),
+      subtitle: Text(
+        subtitle,
+        style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+              color: Theme.of(context).colorScheme.onSurfaceVariant,
+            ),
+      ),
+      trailing: trailing,
+      onTap: onTap,
+    );
+  }
+}

lib/ui/core/ui/settings_section.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+
+class SettingsSection extends StatelessWidget {
+  const SettingsSection({
+    super.key,
+    required this.title,
+    required this.children,
+  });
+
+  final String title;
+  final List<Widget> children;
+
+  List<Widget> _addDividersBetweenChildren(
+      List<Widget> children, BuildContext context) {
+    if (children.length <= 1) return children;
+
+    final List<Widget> result = [];
+    for (int i = 0; i < children.length; i++) {
+      result.add(children[i]);
+      if (i < children.length - 1) {
+        result.add(Divider(
+          height: 1,
+          thickness: 1,
+          color: Theme.of(context).colorScheme.surface,
+        ));
+      }
+    }
+    return result;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: const EdgeInsets.only(left: 16, bottom: 8),
+          child: Text(
+            title,
+            style: Theme.of(context).textTheme.titleSmall?.copyWith(
+                  color: Theme.of(context).colorScheme.primary,
+                  fontWeight: FontWeight.w600,
+                  letterSpacing: 0.1,
+                ),
+          ),
+        ),
+        Card(
+          margin: EdgeInsets.zero,
+          elevation: 0,
+          color: Theme.of(context).colorScheme.surfaceContainerLow,
+          clipBehavior: Clip.antiAlias,
+          child: Column(
+            children: _addDividersBetweenChildren(children, context),
+          ),
+        ),
+      ],
+    );
+  }
+}