Files
MusicWorkshop/frontend/src/components/settings/AdvancedStrategySection.jsx
T
liumangmang 7d003ff822 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

54 lines
2.4 KiB
React

// 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>
);
}