feat(ui): update preset template description for clarity
This commit is contained in:
Jason
@@ -184,21 +184,28 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
|
|||||||
// 支持按下 ESC 关闭弹窗
|
// 支持按下 ESC 关闭弹窗
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const onKeyDown = (e: KeyboardEvent) => {
|
const onKeyDown = (e: KeyboardEvent) => {
|
||||||
if (e.key === 'Escape') {
|
if (e.key === "Escape") {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
onClose();
|
onClose();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
window.addEventListener('keydown', onKeyDown);
|
window.addEventListener("keydown", onKeyDown);
|
||||||
return () => window.removeEventListener('keydown', onKeyDown);
|
return () => window.removeEventListener("keydown", onKeyDown);
|
||||||
}, [onClose]);
|
}, [onClose]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="modal-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
|
<div
|
||||||
|
className="modal-overlay"
|
||||||
|
onMouseDown={(e) => {
|
||||||
|
if (e.target === e.currentTarget) onClose();
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div className="modal-content">
|
<div className="modal-content">
|
||||||
<div className="modal-titlebar">
|
<div className="modal-titlebar">
|
||||||
<div className="modal-spacer" />
|
<div className="modal-spacer" />
|
||||||
<div className="modal-title" title={title}>{title}</div>
|
<div className="modal-title" title={title}>
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="modal-close-btn"
|
className="modal-close-btn"
|
||||||
@@ -212,112 +219,112 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
|
|||||||
|
|
||||||
<form onSubmit={handleSubmit} className="modal-form">
|
<form onSubmit={handleSubmit} className="modal-form">
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
{error && <div className="error-message">{error}</div>}
|
{error && <div className="error-message">{error}</div>}
|
||||||
|
|
||||||
{showPresets && (
|
{showPresets && (
|
||||||
<div className="presets">
|
<div className="presets">
|
||||||
<label>快速选择模板：</label>
|
<label>一键导入（只需要填写 key）</label>
|
||||||
<div className="preset-buttons">
|
<div className="preset-buttons">
|
||||||
{providerPresets.map((preset, index) => (
|
{providerPresets.map((preset, index) => (
|
||||||
<button
|
<button
|
||||||
key={index}
|
key={index}
|
||||||
type="button"
|
type="button"
|
||||||
className={`preset-btn ${
|
className={`preset-btn ${
|
||||||
selectedPreset === index ? "selected" : ""
|
selectedPreset === index ? "selected" : ""
|
||||||
}`}
|
}`}
|
||||||
onClick={() => applyPreset(preset, index)}
|
onClick={() => applyPreset(preset, index)}
|
||||||
>
|
>
|
||||||
{preset.name}
|
{preset.name}
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="form-group">
|
|
||||||
<label htmlFor="name">供应商名称 *</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
value={formData.name}
|
|
||||||
onChange={handleChange}
|
|
||||||
placeholder="例如：Anthropic 官方"
|
|
||||||
required
|
|
||||||
autoComplete="off"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{showApiKey && (
|
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label htmlFor="apiKey">API Key *</label>
|
<label htmlFor="name">供应商名称 *</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="apiKey"
|
id="name"
|
||||||
value={apiKey}
|
name="name"
|
||||||
onChange={(e) => handleApiKeyChange(e.target.value)}
|
value={formData.name}
|
||||||
placeholder="只需要填这里，下方配置会自动填充"
|
onChange={handleChange}
|
||||||
|
placeholder="例如：Anthropic 官方"
|
||||||
|
required
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="form-group">
|
{showApiKey && (
|
||||||
<label htmlFor="websiteUrl">官网地址</label>
|
<div className="form-group">
|
||||||
<input
|
<label htmlFor="apiKey">API Key *</label>
|
||||||
type="url"
|
|
||||||
id="websiteUrl"
|
|
||||||
name="websiteUrl"
|
|
||||||
value={formData.websiteUrl}
|
|
||||||
onChange={handleChange}
|
|
||||||
placeholder="https://example.com（可选）"
|
|
||||||
autoComplete="off"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="form-group">
|
|
||||||
<div className="label-with-checkbox">
|
|
||||||
<label htmlFor="settingsConfig">Claude Code 配置 (JSON) *</label>
|
|
||||||
<label className="checkbox-label">
|
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="text"
|
||||||
checked={disableCoAuthored}
|
id="apiKey"
|
||||||
onChange={(e) => handleCoAuthoredToggle(e.target.checked)}
|
value={apiKey}
|
||||||
|
onChange={(e) => handleApiKeyChange(e.target.value)}
|
||||||
|
placeholder="只需要填这里，下方配置会自动填充"
|
||||||
|
autoComplete="off"
|
||||||
/>
|
/>
|
||||||
禁止 Claude Code 签名
|
</div>
|
||||||
</label>
|
)}
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="websiteUrl">官网地址</label>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
id="websiteUrl"
|
||||||
|
name="websiteUrl"
|
||||||
|
value={formData.websiteUrl}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="https://example.com（可选）"
|
||||||
|
autoComplete="off"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<textarea
|
|
||||||
id="settingsConfig"
|
<div className="form-group">
|
||||||
name="settingsConfig"
|
<div className="label-with-checkbox">
|
||||||
value={formData.settingsConfig}
|
<label htmlFor="settingsConfig">
|
||||||
onChange={handleChange}
|
Claude Code 配置 (JSON) *
|
||||||
placeholder={`{
|
</label>
|
||||||
|
<label className="checkbox-label">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={disableCoAuthored}
|
||||||
|
onChange={(e) => handleCoAuthoredToggle(e.target.checked)}
|
||||||
|
/>
|
||||||
|
禁止 Claude Code 签名
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
id="settingsConfig"
|
||||||
|
name="settingsConfig"
|
||||||
|
value={formData.settingsConfig}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder={`{
|
||||||
"env": {
|
"env": {
|
||||||
"ANTHROPIC_BASE_URL": "https://api.anthropic.com",
|
"ANTHROPIC_BASE_URL": "https://api.anthropic.com",
|
||||||
"ANTHROPIC_AUTH_TOKEN": "sk-your-api-key-here"
|
"ANTHROPIC_AUTH_TOKEN": "sk-your-api-key-here"
|
||||||
}
|
}
|
||||||
}`}
|
}`}
|
||||||
rows={12}
|
rows={12}
|
||||||
style={{ fontFamily: "monospace", fontSize: "14px" }}
|
style={{ fontFamily: "monospace", fontSize: "14px" }}
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<small className="field-hint">
|
<small className="field-hint">
|
||||||
完整的 Claude Code settings.json 配置内容
|
完整的 Claude Code settings.json 配置内容
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="modal-footer">
|
<div className="modal-footer">
|
||||||
<button type="button" className="cancel-btn" onClick={onClose}>
|
<button type="button" className="cancel-btn" onClick={onClose}>
|
||||||
取消
|
取消
|
||||||
</button>
|
</button>
|
||||||
<button type="submit" className="submit-btn">
|
<button type="submit" className="submit-btn">
|
||||||
{submitText}
|
{submitText}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user