File size: 3,226 Bytes
a21c316 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | import { useTranslation } from "react-i18next";
import { Image } from "lucide-react";
interface ImageThinkingModeProps {
value?: 'enabled' | 'disabled';
onChange: (value: 'enabled' | 'disabled') => void;
}
export default function ImageThinkingMode({
value = 'enabled',
onChange,
}: ImageThinkingModeProps) {
const { t } = useTranslation();
const options = [
{ value: 'enabled', label: 'enabled', desc: 'enabled_desc' },
{ value: 'disabled', label: 'disabled', desc: 'disabled_desc' },
] as const;
return (
<div className="space-y-3">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-pink-50/30 dark:bg-pink-900/5 border border-pink-100/50 dark:border-pink-800/20 rounded-lg px-4 py-3">
<div className="flex items-center gap-3">
<div className="p-1.5 bg-pink-100 dark:bg-pink-900/30 rounded text-pink-600 dark:text-pink-400">
<Image size={18} />
</div>
<div className="space-y-0.5">
<h4 className="font-bold text-sm text-gray-900 dark:text-gray-100">
{t("settings.image_thinking_mode.title", { defaultValue: "图像思维模式 (Image Thinking Mode)" })}
</h4>
<p className="text-[10px] text-gray-500 dark:text-gray-400">
{t("settings.image_thinking_mode.hint", { defaultValue: "影响画质与生成流程" })}
</p>
</div>
</div>
<div className="flex bg-gray-100 dark:bg-gray-800 p-1 rounded-lg">
{options.map((option) => (
<button
key={option.value}
onClick={() => onChange(option.value)}
className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${value === option.value
? 'bg-white dark:bg-gray-700 text-pink-600 dark:text-pink-400 shadow-sm'
: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
}`}
>
{t(`settings.image_thinking_mode.options.${option.label}`, {
defaultValue: option.value === 'enabled' ? "开启" : "关闭"
})}
</button>
))}
</div>
</div>
<div className="px-1">
<p className="text-[10px] text-gray-400 dark:text-gray-500 italic leading-relaxed">
{value === 'enabled'
? t("settings.image_thinking_mode.options.enabled_desc", { defaultValue: "开启：保留思维链，返回草图 + 成品双图。" })
: t("settings.image_thinking_mode.options.disabled_desc", { defaultValue: "关闭：禁用思维链，直接生成单张超清图片（画质优先）。" })
}
</p>
</div>
</div>
);
}
|