refactor: rewrite SettingsPage as lightweight container with hooks and components

Extracted cron utilities to utils/schedule.js, all state management (15+ useState) to useSettingsForm hook, and 5 config sections + 2 dialogs + 1 status badge into focused components. SettingsPage reduced from ~700 lines to ~130 line container. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-08 12:06:26 +08:00
parent 998658da7b
commit 7d003ff822
11 changed files with 990 additions and 1448 deletions
@@ -0,0 +1,53 @@
+// frontend/src/components/settings/AdvancedStrategySection.jsx
+import { SlidersHorizontal } from 'lucide-react';
+
+const STRATEGY_OPTIONS = [
+  {
+    key: 'metadataFallback',
+    defaultVal: true,
+    label: '开启多源元数据轮询回退',
+    desc: '仅控制 Netease / QQ / Spotify 的身份兜底查询；AcoustID 与 MusicBrainz 主链路始终参与匹配。'
+  },
+  {
+    key: 'downloadAssets',
+    defaultVal: true,
+    label: '自动下载并补全资产 (封面/歌词)',
+    desc: '仅控制 Discogs / Last.fm / Genius 的增强信息查询与来源决策，本轮不会真实下载文件。'
+  },
+  {
+    key: 'replaceLowQualityDuplicates',
+    defaultVal: false,
+    label: '重复项自动替换低音质 (慎用)',
+    desc: '若发现重复曲目且新文件比特率更高，自动覆盖库中旧文件，而非移入回收站产生冲突。'
+  }
+];
+
+export default function AdvancedStrategySection({ advancedStrategy = {}, onUpdate }) {
+  const getVal = (key, defaultVal) =>
+    advancedStrategy[key] !== undefined ? advancedStrategy[key] : defaultVal;
+
+  return (
+    <div className="rounded-xl border border-slate-800 bg-slate-900 p-6 shadow-lg">
+      <h3 className="mb-5 flex items-center border-b border-slate-800 pb-3 text-base font-semibold text-white">
+        <SlidersHorizontal className="mr-2 h-5 w-5 text-purple-400" />
+        高级运行策略 (Advanced Strategy)
+      </h3>
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+        {STRATEGY_OPTIONS.map(({ key, defaultVal, label, desc }) => (
+          <label key={key} className="group flex h-full cursor-pointer items-start space-x-3 rounded-lg border border-slate-800/50 bg-slate-950/50 p-4 transition-colors hover:border-blue-500/30 hover:bg-slate-900">
+            <input
+              type="checkbox"
+              checked={getVal(key, defaultVal)}
+              onChange={(e) => onUpdate('advancedStrategy', { ...advancedStrategy, [key]: e.target.checked })}
+              className="mt-1 shrink-0 cursor-pointer rounded border-slate-700 bg-slate-950 text-blue-500 focus:ring-blue-500"
+            />
+            <div>
+              <span className="block text-sm font-medium text-white transition-colors group-hover:text-blue-400">{label}</span>
+              <span className="mt-1.5 block text-xs leading-relaxed text-slate-500">{desc}</span>
+            </div>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+}