Function SettingsManager

src/components/SettingsManager.tsx:35–213

()

// ── Component ─────────────────────────────────────────────────────────────

export default function SettingsManager() {
  const { t } = useTranslation();
  const { settings, get, set } = useSettings();
  const { register, unregister } = useShortcut();
  const { notify } = useSnackbar();

  // Sync auto-start state from system on mount
  useEffect(() => { isEnabled().then(v => set("autoStart", v)).catch(() => { }); }, []);

  async function changeShortcut(key: keyof SettingsState, oldVal: string, newVal: string, cb: () => void) {
    if (oldVal) await unregister(oldVal).catch(() => { });
    if (newVal) {
      try {
        await register(newVal, cb);
        notify(t("settings.registerSuccess", { shortcut: newVal }), "success");
      } catch {
        notify(t("settings.registerFail", { shortcut: newVal }), "error");
      }
    }
    await set(key as keyof SettingsState, newVal);
  }

  if (!settings) {
    return <Box sx={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
      <Typography color="text.disabled">{t("settings.loading")}</Typography>
    </Box>;
  }

  return (
    <Box sx={{ height: "calc(100vh - 48px)", overflow: "auto", px: 2, pb: 2 }}>
      <Paper elevation={0} sx={{ mt: 2, p: 2, bgcolor: "background.paper", border: 1, borderColor: "divider" }}>

        {/* ── 速度快捷键 ── */}
        <Table size="small">
          <colgroup>
            <col />
            <col width={240} />
            <col width={80} />
          </colgroup>
          <TableHead>
            <TableRow>
              <TableCell>
                <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                  <SpeedIcon sx={{ color: "secondary.main", fontSize: 18 }} />
                  <Typography variant="subtitle2" sx={{ fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.5, color: "text.secondary" }}>
                    {t("settings.speedShortcuts")}
                  </Typography>
                </Box>
              </TableCell>
              <TableCell>{t("settings.shortcut")}</TableCell>
              <TableCell>{t("settings.step")}</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell sx={{ borderBottom: "none" }}>{t("settings.increase")}</TableCell>
              <TableCell sx={{ borderBottom: "none" }}>
                <ShortcutField value={settings.increaseSpeedShortcut} onChange={v => changeShortcut("increaseSpeedShortcut", settings.increaseSpeedShortcut, v, () => {