dros/src/pages/system/SettingsModal

系统设置模块 (SettingsModal)

📖 概述

系统设置模块提供了一个响应式的设置界面，支持 Electron、浏览器和移动端三端适配。

✨ 特性

• ✅ 响应式设计 - 自动适配桌面端（Modal）和移动端（Drawer）
• ✅ 多级导航 - 支持一级分类和二级分区的层级结构
• ✅ 状态持久化 - 自动保存最后访问的设置项到本地存储
• ✅ 组件化架构 - 高内聚低耦合，易于扩展
• ✅ 类型安全 - 完整的 TypeScript 类型定义

🏗️ 架构设计

布局结构（使用约定术语）

桌面端布局

┌─────────────────────────────────────────────┐
│              Modal (1200px)                  │
├──────────┬──────────────────────────────────┤
│          │                                   │
│ Sidebar  │      Content Area                │
│ (240px)  │      (Flexible)                  │
│          │                                   │
│  Menu    │   Section Component               │
│          │                                   │
└──────────┴──────────────────────────────────┘

移动端布局

┌─────────────────────────────────────────────┐
│             Drawer (100%)                    │
├─────────────────────────────────────────────┤
│        Tabs (48px height)                   │
├─────────────────────────────────────────────┤
│                                              │
│         Content Area                         │
│         (Flexible height)                    │
│                                              │
│   - List of Sections (Category view)        │
│   OR                                         │
│   - Section Component (Detail view)         │
│                                              │
└─────────────────────────────────────────────┘

📦 文件结构

SettingsModal/
├── index.tsx                    # 入口文件
├── SettingsModal.tsx           # 主容器组件
├── SettingsSidebar.tsx         # 桌面端侧边导航
├── SettingsTabs.tsx            # 移动端标签导航
├── SettingsContent.tsx         # 内容区域
├── types.ts                    # 类型定义
├── config.tsx                  # 配置文件
├── constants.ts                # 常量定义
├── hooks/
│   └── useResponsive.ts       # 响应式检测 Hook
└── sections/                   # 各设置分区组件
    ├── PlaceholderSection.tsx
    ├── SystemHome/
    ├── Preferences/
    ├── Hardware/
    ├── Network/
    ├── Protocol/
    └── Statistics/

🚀 使用方法

基础用法

import React, { useState } from 'react';
import { Button } from 'antd';
import SettingsModal from '@/pages/system/SettingsModal';

function App() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onClick={() => setVisible(true)}>
        打开系统设置
      </Button>
      
      <SettingsModal
        visible={visible}
        onClose={() => setVisible(false)}
      />
    </>
  );
}

指定默认分区

<SettingsModal
  visible={visible}
  onClose={() => setVisible(false)}
  defaultCategory="hardware"
  defaultSection="camera"
/>

🎨 组件属性

SettingsModalProps

属性	类型	默认值	描述
visible	boolean	false	是否显示设置模态框
onClose	() => void	-	关闭回调函数
defaultCategory	string	-	默认显示的一级分类 ID
defaultSection	string	-	默认显示的二级分区 ID

📝 如何添加新的设置项

1. 创建设置组件

在 sections/ 目录下的对应分类文件中添加：

// sections/SystemHome/index.tsx
export const NewSetting: React.FC = () => (
  <div style={{ padding: 24 }}>
    <h2>新设置项</h2>
    {/* 你的设置内容 */}
  </div>
);

2. 更新配置文件

在 config.tsx 中添加到对应分类的 sections 数组：

{
  id: 'system-home',
  title: '系统之家',
  icon: <HomeOutlined />,
  sections: [
    // ... 其他设置项
    {
      id: 'new-setting',
      title: '新设置项',
      component: SystemHome.NewSetting,
    },
  ],
}

🔧 配置说明

分类和分区 ID 命名规范

• 使用小写字母和连字符
• 一级分类：system-home, preferences, hardware 等
• 二级分区：site-info, user-account 等

响应式断点

在 constants.ts 中配置：

export const BREAKPOINTS = {
  MOBILE: 768,   // < 768px 为移动端
  TABLET: 1024,  // < 1024px 为平板端
}

🎯 后续实现计划

当您提供具体的二级布局内容图片后，我会为每个设置项创建详细的设计文档，包括：

1. 布局与组件结构描述 - 使用约定术语详细描述
2. Ant Design 组件选择理由 - 说明为什么选择特定组件
3. 功能清单 - 列出所有涉及的功能
4. 需求描述与思考 - 分析功能需求和实现思路
5. 实现建议 - 包括状态管理、API 设计、交互流程等

📚 相关文档

• 完整布局术语体系
• Ant Design 组件库
• 项目整体架构

⚠️ 注意事项

1. 所有设置项组件目前都是占位组件，显示"待实现"
2. 组件已完全响应式，会自动适配不同设备
3. 导航状态会自动保存到 localStorage
4. 组件使用 destroyOnClose，关闭时会销毁内部状态