Function EnumQuickSettingControl

app/src/components/right-toolbar.tsx:58–100

* Enum 类型的快捷设置项（下拉菜单）

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

 * Enum 类型的快捷设置项（下拉菜单）
 */
function EnumQuickSettingControl({
  settingKey,
  isHovered,
}: {
  settingKey: keyof typeof settingsSchema.shape;
  isHovered: boolean;
}) {
  const { t } = useTranslation("settings");
  const [value, setValue] = useState<string>(Settings[settingKey] as string);
  const options = QuickSettingsManager.getEnumOptions(settingKey as string);

  useEffect(() => {
    const unwatch = Settings.watch(settingKey, (newValue) => {
      if (typeof newValue === "string") setValue(newValue);
    });
    return unwatch;
  }, [settingKey]);

  const handleChange = (newValue: string) => {
    setValue(newValue);
    // @ts-expect-error 设置值
    Settings[settingKey] = newValue;
  };

  return (
    <div
      className={cn("overflow-hidden transition-all duration-200", isHovered ? "w-28 opacity-100" : "w-0 opacity-0")}
    >
      <Select value={value} onValueChange={handleChange}>
        <SelectTrigger size="sm" className="h-7 w-28 text-xs">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {options.map((opt) => (
            <SelectItem key={opt} value={opt} className="text-xs">
              {t(`${settingKey as string}.options.${opt}`, { defaultValue: opt })}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}

/**
 * Number 类型的快捷设置项（滑块 或 数字输入框）