前端: 添加设置页面组件

frontend/src/renderer/pages/Settings.jsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { Card, Switch, Select, Button, Progress } from 'antd';
+
+function Settings() {
+  const [darkMode, setDarkMode] = use const [language,State(false);
+  setLanguage] = useState('zh-CN');
+  const [autoSync, setAutoSync] = useState(true);
+  const [syncFrequency, setSyncFrequency] = useState('5');
+  const [wifiOnly, setWifiOnly] = useState(true);
+
+  const storageUsed = 2.1 * 1024; // MB
+  const storageLimit = 10 * 1024; // MB
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h1>设置</h1>
+      
+      {/* 主题设置 */}
+      <Card title="主题设置" style={{ marginBottom: '16px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <span>深色模式</span>
+          <Switch checked={darkMode} onChange={setDarkMode} />
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: '16px' }}>
+          <span>语言</span>
+          <Select
+            value={language}
+            onChange={setLanguage}
+            style={{ width: 150 }}
+            options={[
+              { value: 'zh-CN', label: '简体中文' },
+              { value: 'en-US', label: 'English' }
+            ]}
+          />
+        </div>
+      </Card>
+
+      {/* 同步设置 */}
+      <Card title="同步设置" style={{ marginBottom: '16px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <span>自动同步</span>
+          <Switch checked={autoSync} onChange={setAutoSync} />
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: '16px' }}>
+          <span>同步频率</span>
+          <Select
+            value={syncFrequency}
+            onChange={setSyncFrequency}
+            style={{ width: 150 }}
+            disabled={!autoSync}
+            options={[
+              { value: '1', label: '每1分钟' },
+              { value: '5', label: '每5分钟' },
+              { value: '15', label: '每15分钟' },
+              { value: '30', label: '每30分钟' }
+            ]}
+          />
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: '16px' }}>
+          <span>仅 WiFi 同步</span>
+          <Switch checked={wifiOnly} onChange={setWifiOnly} />
+        </div>
+      </Card>
+
+      {/* 存储设置 */}
+      <Card title="存储设置">
+        <div style={{ marginBottom: '16px' }}>
+          <span>存储空间: {storageUsed.toFixed(1)} MB / {storageLimit} MB</span>
+          <Progress 
+            percent={Math.round((storageUsed / storageLimit) * 100)} 
+            status="active"
+          />
+        </div>
+        <div style={{ display: 'flex', gap: '8px' }}>
+          <Button>清理缓存</Button>
+          <Button>更改目录</Button>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+export default Settings;