Function QuickSettingButton

app/src/components/right-toolbar.tsx:171–238

* 单个快捷设置项按钮

({
  settingKey,
  isHovered,
}: {
  settingKey: keyof typeof settingsSchema.shape;
  isHovered: boolean;
})

 * 单个快捷设置项按钮
 */
function QuickSettingButton({
  settingKey,
  isHovered,
}: {
  settingKey: keyof typeof settingsSchema.shape;
  isHovered: boolean;
}) {
  const { t } = useTranslation("settings");
  const [showDialog, setShowDialog] = useState(false);
  const settingType = QuickSettingsManager.getSettingType(settingKey as string);

  // Boolean 类型用于图标 opacity 动态显示
  const [boolValue, setBoolValue] = useState<boolean>(
    settingType === "boolean" ? (Settings[settingKey] as boolean) : false,
  );

  useEffect(() => {
    if (settingType !== "boolean") return;
    const unwatch = Settings.watch(settingKey, (newValue) => {
      if (typeof newValue === "boolean") setBoolValue(newValue);
    });
    return unwatch;
  }, [settingKey, settingType]);

  const Icon = settingsIcons[settingKey as keyof typeof settingsIcons] ?? Fragment;
  const title = t(`${settingKey as string}.title` as string);
  const description = t(`${settingKey as string}.description` as string);

  if (Icon === Fragment) return null;

  // 图标 opacity：boolean 用 on/off 状态；enum/number 始终半透明
  const iconOpacityClass =
    settingType === "boolean"
      ? cn("opacity-50 transition-opacity hover:opacity-100", boolValue && "opacity-100")
      : "opacity-70 transition-opacity hover:opacity-100";

  return (
    <>
      <Tooltip>
        <TooltipTrigger asChild>
          <div className="flex items-center gap-1.5">
            <Button className={iconOpacityClass} variant="ghost" size="icon" onClick={() => setShowDialog(true)}>
              <Icon />
            </Button>

            {/* 根据类型展示不同控件 */}
            {settingType === "boolean" && <BooleanQuickSettingControl settingKey={settingKey} isHovered={isHovered} />}
            {settingType === "enum" && <EnumQuickSettingControl settingKey={settingKey} isHovered={isHovered} />}
            {settingType === "number" && <NumberQuickSettingControl settingKey={settingKey} isHovered={isHovered} />}
          </div>
        </TooltipTrigger>
        <TooltipContent side="left">{title}</TooltipContent>
      </Tooltip>

      <Dialog open={showDialog} onOpenChange={setShowDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">