File size: 4,672 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 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | import { useTranslation } from "react-i18next";
import { GlobalSystemPromptConfig } from "../../types/config";
interface GlobalSystemPromptProps {
config: GlobalSystemPromptConfig;
onChange: (config: GlobalSystemPromptConfig) => void;
}
const DEFAULT_CONFIG: GlobalSystemPromptConfig = {
enabled: false,
content: '',
};
export default function GlobalSystemPrompt({
config = DEFAULT_CONFIG,
onChange,
}: GlobalSystemPromptProps) {
const { t } = useTranslation();
return (
<div className="space-y-3">
{/* 标题区域 (Compact) */}
<div className="flex items-center justify-between gap-3 bg-purple-50/30 dark:bg-purple-900/5 border border-purple-100/50 dark:border-purple-800/20 rounded-lg px-4 py-3">
<div className="space-y-0.5">
<h4 className="font-bold text-sm text-gray-900 dark:text-gray-100">
{t("settings.global_system_prompt.title", { defaultValue: "全局系统提示词 (Global System Prompt)" })}
</h4>
<p className="text-[10px] text-gray-500 dark:text-gray-400">
{t("settings.global_system_prompt.hint", { defaultValue: "自动注入所有请求的 systemInstruction" })}
</p>
</div>
<div className="flex items-center gap-3">
<span className={`text-[10px] font-medium ${config.enabled ? 'text-purple-600 dark:text-purple-400' : 'text-gray-400'}`}>
{config.enabled ? t("common.enabled", { defaultValue: "已启用" }) : t("common.disabled", { defaultValue: "已禁用" })}
</span>
<label className="relative inline-flex items-center cursor-pointer shrink-0">
<input
type="checkbox"
checked={config.enabled}
onChange={(e) => onChange({ ...config, enabled: e.target.checked })}
className="sr-only peer"
/>
<div className="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:after:border-gray-600 peer-checked:bg-purple-600"></div>
</label>
</div>
</div>
{/* 编辑区域 (仅在启用时显示) */}
{config.enabled && (
<div className="space-y-3">
<textarea
value={config.content}
onChange={(e) => onChange({ ...config, content: e.target.value })}
placeholder={t("settings.global_system_prompt.placeholder", {
defaultValue: "输入全局系统提示词...\n例如：你是一位资深的全栈开发工程师，擅长 React 和 Rust。请使用简体中文回复。",
})}
rows={6}
className="w-full bg-white dark:bg-base-100 border border-gray-200 dark:border-gray-700 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-purple-500/20 outline-none transition-all resize-y min-h-[120px]"
/>
<div className="flex items-center justify-between">
<p className="text-xs text-gray-400 dark:text-gray-500">
{t("settings.global_system_prompt.char_count", {
defaultValue: "{{count}} 字符",
count: config.content.length,
})}
</p>
</div>
{config.content.length > 2000 && (
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700/30 rounded-lg p-3">
<p className="text-xs text-amber-700 dark:text-amber-400">
{t("settings.global_system_prompt.long_prompt_warning", {
defaultValue: "提示词较长（超过 2000 字符），可能会占用较多的上下文窗口空间，影响模型可用的对话长度。",
})}
</p>
</div>
)}
</div>
)}
</div>
);
}
|