feat: add common config support for Codex with TOML format
- Added separate common config state and storage for Codex - Implemented TOML-based common config merging with markers - Created UI components for Codex common config editor - Added toggle and edit functionality similar to Claude config - Store Codex common config in localStorage separately - Support appending/removing common TOML snippets to config.toml
This commit is contained in:
Jason
@@ -7,6 +7,8 @@ import {
|
||||
getApiKeyFromConfig,
|
||||
hasApiKeyField,
|
||||
setApiKeyInConfig,
|
||||
updateTomlCommonConfigSnippet,
|
||||
hasTomlCommonConfigSnippet,
|
||||
} from "../utils/providerConfigUtils";
|
||||
import { providerPresets } from "../config/providerPresets";
|
||||
import { codexProviderPresets } from "../config/codexProviderPresets";
|
||||
@@ -19,9 +21,12 @@ import { X, AlertCircle, Save } from "lucide-react";
|
||||
// 分类仅用于控制少量交互（如官方禁用 API Key），不显示介绍组件
|
||||
|
||||
const COMMON_CONFIG_STORAGE_KEY = "cc-switch:common-config-snippet";
|
||||
const CODEX_COMMON_CONFIG_STORAGE_KEY = "cc-switch:codex-common-config-snippet";
|
||||
const DEFAULT_COMMON_CONFIG_SNIPPET = `{
|
||||
"includeCoAuthoredBy": false
|
||||
}`;
|
||||
const DEFAULT_CODEX_COMMON_CONFIG_SNIPPET = `# Common Codex config
|
||||
# Add your common TOML configuration here`;
|
||||
|
||||
interface ProviderFormProps {
|
||||
appType?: AppType;
|
||||
@@ -108,6 +113,25 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
|
||||
const [commonConfigError, setCommonConfigError] = useState("");
|
||||
// 用于跟踪是否正在通过通用配置更新
|
||||
const isUpdatingFromCommonConfig = useRef(false);
|
||||
|
||||
// Codex 通用配置状态
|
||||
const [useCodexCommonConfig, setUseCodexCommonConfig] = useState(false);
|
||||
const [codexCommonConfigSnippet, setCodexCommonConfigSnippet] = useState<string>(() => {
|
||||
if (typeof window === "undefined") {
|
||||
return DEFAULT_CODEX_COMMON_CONFIG_SNIPPET;
|
||||
}
|
||||
try {
|
||||
const stored = window.localStorage.getItem(CODEX_COMMON_CONFIG_STORAGE_KEY);
|
||||
if (stored && stored.trim()) {
|
||||
return stored;
|
||||
}
|
||||
} catch {
|
||||
// ignore localStorage 读取失败
|
||||
}
|
||||
return DEFAULT_CODEX_COMMON_CONFIG_SNIPPET;
|
||||
});
|
||||
const [codexCommonConfigError, setCodexCommonConfigError] = useState("");
|
||||
const isUpdatingFromCodexCommonConfig = useRef(false);
|
||||
// -1 表示自定义，null 表示未选择，>= 0 表示预设索引
|
||||
const [selectedPreset, setSelectedPreset] = useState<number | null>(
|
||||
showPresets ? -1 : null,
|
||||
@@ -149,35 +173,44 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
|
||||
// 初始化时检查通用配置片段
|
||||
useEffect(() => {
|
||||
if (initialData) {
|
||||
const configString = JSON.stringify(initialData.settingsConfig, null, 2);
|
||||
const hasCommon = hasCommonConfigSnippet(
|
||||
configString,
|
||||
commonConfigSnippet,
|
||||
);
|
||||
setUseCommonConfig(hasCommon);
|
||||
if (!isCodex) {
|
||||
const configString = JSON.stringify(initialData.settingsConfig, null, 2);
|
||||
const hasCommon = hasCommonConfigSnippet(
|
||||
configString,
|
||||
commonConfigSnippet,
|
||||
);
|
||||
setUseCommonConfig(hasCommon);
|
||||
|
||||
// 初始化模型配置（编辑模式）
|
||||
if (
|
||||
initialData.settingsConfig &&
|
||||
typeof initialData.settingsConfig === "object"
|
||||
) {
|
||||
const config = initialData.settingsConfig as {
|
||||
env?: Record<string, any>;
|
||||
};
|
||||
if (config.env) {
|
||||
setClaudeModel(config.env.ANTHROPIC_MODEL || "");
|
||||
setClaudeSmallFastModel(config.env.ANTHROPIC_SMALL_FAST_MODEL || "");
|
||||
setBaseUrl(config.env.ANTHROPIC_BASE_URL || ""); // 初始化基础 URL
|
||||
// 初始化模型配置（编辑模式）
|
||||
if (
|
||||
initialData.settingsConfig &&
|
||||
typeof initialData.settingsConfig === "object"
|
||||
) {
|
||||
const config = initialData.settingsConfig as {
|
||||
env?: Record<string, any>;
|
||||
};
|
||||
if (config.env) {
|
||||
setClaudeModel(config.env.ANTHROPIC_MODEL || "");
|
||||
setClaudeSmallFastModel(config.env.ANTHROPIC_SMALL_FAST_MODEL || "");
|
||||
setBaseUrl(config.env.ANTHROPIC_BASE_URL || ""); // 初始化基础 URL
|
||||
|
||||
// 初始化 Kimi 模型选择
|
||||
setKimiAnthropicModel(config.env.ANTHROPIC_MODEL || "");
|
||||
setKimiAnthropicSmallFastModel(
|
||||
config.env.ANTHROPIC_SMALL_FAST_MODEL || "",
|
||||
);
|
||||
// 初始化 Kimi 模型选择
|
||||
setKimiAnthropicModel(config.env.ANTHROPIC_MODEL || "");
|
||||
setKimiAnthropicSmallFastModel(
|
||||
config.env.ANTHROPIC_SMALL_FAST_MODEL || "",
|
||||
);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Codex 初始化时检查 TOML 通用配置
|
||||
const hasCommon = hasTomlCommonConfigSnippet(
|
||||
codexConfig,
|
||||
codexCommonConfigSnippet,
|
||||
);
|
||||
setUseCodexCommonConfig(hasCommon);
|
||||
}
|
||||
}
|
||||
}, [initialData, commonConfigSnippet]);
|
||||
}, [initialData, commonConfigSnippet, codexCommonConfigSnippet, isCodex, codexConfig]);
|
||||
|
||||
// 当选择预设变化时，同步类别
|
||||
useEffect(() => {
|
||||
@@ -591,6 +624,99 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
// Codex: 处理通用配置开关
|
||||
const handleCodexCommonConfigToggle = (checked: boolean) => {
|
||||
const { updatedConfig, error: snippetError } = updateTomlCommonConfigSnippet(
|
||||
codexConfig,
|
||||
codexCommonConfigSnippet,
|
||||
checked,
|
||||
);
|
||||
|
||||
if (snippetError) {
|
||||
setCodexCommonConfigError(snippetError);
|
||||
setUseCodexCommonConfig(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setCodexCommonConfigError("");
|
||||
setUseCodexCommonConfig(checked);
|
||||
// 标记正在通过通用配置更新
|
||||
isUpdatingFromCodexCommonConfig.current = true;
|
||||
setCodexConfig(updatedConfig);
|
||||
// 在下一个事件循环中重置标记
|
||||
setTimeout(() => {
|
||||
isUpdatingFromCodexCommonConfig.current = false;
|
||||
}, 0);
|
||||
};
|
||||
|
||||
// Codex: 处理通用配置片段变化
|
||||
const handleCodexCommonConfigSnippetChange = (value: string) => {
|
||||
const previousSnippet = codexCommonConfigSnippet;
|
||||
setCodexCommonConfigSnippet(value);
|
||||
|
||||
if (!value.trim()) {
|
||||
setCodexCommonConfigError("");
|
||||
if (useCodexCommonConfig) {
|
||||
const { updatedConfig } = updateTomlCommonConfigSnippet(
|
||||
codexConfig,
|
||||
previousSnippet,
|
||||
false,
|
||||
);
|
||||
setCodexConfig(updatedConfig);
|
||||
setUseCodexCommonConfig(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// TOML 不需要验证 JSON 格式，直接更新
|
||||
if (useCodexCommonConfig) {
|
||||
const removeResult = updateTomlCommonConfigSnippet(
|
||||
codexConfig,
|
||||
previousSnippet,
|
||||
false,
|
||||
);
|
||||
const addResult = updateTomlCommonConfigSnippet(
|
||||
removeResult.updatedConfig,
|
||||
value,
|
||||
true,
|
||||
);
|
||||
|
||||
if (addResult.error) {
|
||||
setCodexCommonConfigError(addResult.error);
|
||||
return;
|
||||
}
|
||||
|
||||
// 标记正在通过通用配置更新
|
||||
isUpdatingFromCodexCommonConfig.current = true;
|
||||
setCodexConfig(addResult.updatedConfig);
|
||||
// 在下一个事件循环中重置标记
|
||||
setTimeout(() => {
|
||||
isUpdatingFromCodexCommonConfig.current = false;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// 保存 Codex 通用配置到 localStorage
|
||||
if (typeof window !== "undefined") {
|
||||
try {
|
||||
window.localStorage.setItem(CODEX_COMMON_CONFIG_STORAGE_KEY, value);
|
||||
} catch {
|
||||
// ignore localStorage 写入失败
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Codex: 处理 config 变化
|
||||
const handleCodexConfigChange = (value: string) => {
|
||||
if (!isUpdatingFromCodexCommonConfig.current) {
|
||||
const hasCommon = hasTomlCommonConfigSnippet(
|
||||
value,
|
||||
codexCommonConfigSnippet,
|
||||
);
|
||||
setUseCodexCommonConfig(hasCommon);
|
||||
}
|
||||
setCodexConfig(value);
|
||||
};
|
||||
|
||||
// 根据当前配置决定是否展示 API Key 输入框
|
||||
// 自定义模式(-1)也需要显示 API Key 输入框
|
||||
const showApiKey =
|
||||
@@ -983,7 +1109,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
|
||||
authValue={codexAuth}
|
||||
configValue={codexConfig}
|
||||
onAuthChange={setCodexAuth}
|
||||
onConfigChange={setCodexConfig}
|
||||
onConfigChange={handleCodexConfigChange}
|
||||
onAuthBlur={() => {
|
||||
try {
|
||||
const auth = JSON.parse(codexAuth || "{}");
|
||||
@@ -996,6 +1122,11 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
|
||||
// ignore
|
||||
}
|
||||
}}
|
||||
useCommonConfig={useCodexCommonConfig}
|
||||
onCommonConfigToggle={handleCodexCommonConfigToggle}
|
||||
commonConfigSnippet={codexCommonConfigSnippet}
|
||||
onCommonConfigSnippetChange={handleCodexCommonConfigSnippetChange}
|
||||
commonConfigError={codexCommonConfigError}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { X, Save } from "lucide-react";
|
||||
|
||||
interface CodexConfigEditorProps {
|
||||
authValue: string;
|
||||
@@ -6,6 +7,11 @@ interface CodexConfigEditorProps {
|
||||
onAuthChange: (value: string) => void;
|
||||
onConfigChange: (value: string) => void;
|
||||
onAuthBlur?: () => void;
|
||||
useCommonConfig: boolean;
|
||||
onCommonConfigToggle: (checked: boolean) => void;
|
||||
commonConfigSnippet: string;
|
||||
onCommonConfigSnippetChange: (value: string) => void;
|
||||
commonConfigError: string;
|
||||
}
|
||||
|
||||
const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
|
||||
@@ -14,7 +20,38 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
|
||||
onAuthChange,
|
||||
onConfigChange,
|
||||
onAuthBlur,
|
||||
useCommonConfig,
|
||||
onCommonConfigToggle,
|
||||
commonConfigSnippet,
|
||||
onCommonConfigSnippetChange,
|
||||
commonConfigError,
|
||||
}) => {
|
||||
const [isCommonConfigModalOpen, setIsCommonConfigModalOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (commonConfigError && !isCommonConfigModalOpen) {
|
||||
setIsCommonConfigModalOpen(true);
|
||||
}
|
||||
}, [commonConfigError, isCommonConfigModalOpen]);
|
||||
|
||||
// 支持按下 ESC 关闭弹窗
|
||||
useEffect(() => {
|
||||
if (!isCommonConfigModalOpen) return;
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
closeModal();
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
return () => window.removeEventListener("keydown", onKeyDown);
|
||||
}, [isCommonConfigModalOpen]);
|
||||
|
||||
const closeModal = () => {
|
||||
setIsCommonConfigModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
@@ -42,12 +79,37 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="codexConfig"
|
||||
className="block text-sm font-medium text-gray-900 dark:text-gray-100"
|
||||
>
|
||||
config.toml (TOML)
|
||||
</label>
|
||||
<div className="flex items-center justify-between">
|
||||
<label
|
||||
htmlFor="codexConfig"
|
||||
className="block text-sm font-medium text-gray-900 dark:text-gray-100"
|
||||
>
|
||||
config.toml (TOML)
|
||||
</label>
|
||||
<label className="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={useCommonConfig}
|
||||
onChange={(e) => onCommonConfigToggle(e.target.checked)}
|
||||
className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
|
||||
/>
|
||||
写入通用配置
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsCommonConfigModalOpen(true)}
|
||||
className="text-xs text-blue-500 dark:text-blue-400 hover:underline"
|
||||
>
|
||||
编辑通用配置
|
||||
</button>
|
||||
</div>
|
||||
{commonConfigError && !isCommonConfigModalOpen && (
|
||||
<p className="text-xs text-red-500 dark:text-red-400 text-right">
|
||||
{commonConfigError}
|
||||
</p>
|
||||
)}
|
||||
<textarea
|
||||
id="codexConfig"
|
||||
value={configValue}
|
||||
@@ -60,8 +122,77 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
|
||||
Codex config.toml 配置内容
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{isCommonConfigModalOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center"
|
||||
onMouseDown={(e) => {
|
||||
if (e.target === e.currentTarget) closeModal();
|
||||
}}
|
||||
>
|
||||
{/* Backdrop - 统一背景样式 */}
|
||||
<div className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm" />
|
||||
|
||||
{/* Modal - 统一窗口样式 */}
|
||||
<div className="relative bg-white dark:bg-gray-900 rounded-xl shadow-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-hidden flex flex-col">
|
||||
{/* Header - 统一标题栏样式 */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-800">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
|
||||
编辑 Codex 通用配置片段
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeModal}
|
||||
className="p-1 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
|
||||
aria-label="关闭"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content - 统一内容区域样式 */}
|
||||
<div className="flex-1 overflow-auto p-6 space-y-4">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
该片段会在勾选"写入通用配置"时追加到 config.toml 末尾
|
||||
</p>
|
||||
<textarea
|
||||
value={commonConfigSnippet}
|
||||
onChange={(e) => onCommonConfigSnippetChange(e.target.value)}
|
||||
placeholder={`# Common Codex config
|
||||
# Add your common TOML configuration here`}
|
||||
rows={12}
|
||||
className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-blue-500 dark:focus:border-blue-400 transition-colors resize-y"
|
||||
/>
|
||||
{commonConfigError && (
|
||||
<p className="text-sm text-red-500 dark:text-red-400">
|
||||
{commonConfigError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer - 统一底部按钮样式 */}
|
||||
<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800">
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeModal}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-white dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeModal}
|
||||
className="px-4 py-2 bg-blue-500 dark:bg-blue-600 text-white rounded-lg hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors text-sm font-medium flex items-center gap-2"
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodexConfigEditor;
|
||||
export default CodexConfigEditor;
|
||||
@@ -192,3 +192,89 @@ export const setApiKeyInConfig = (
|
||||
return jsonString;
|
||||
}
|
||||
};
|
||||
|
||||
// ========== TOML Config Utilities ==========
|
||||
|
||||
const COMMON_CONFIG_MARKER_START = "# === COMMON CONFIG START ===";
|
||||
const COMMON_CONFIG_MARKER_END = "# === COMMON CONFIG END ===";
|
||||
|
||||
export interface UpdateTomlCommonConfigResult {
|
||||
updatedConfig: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
// 将通用配置片段写入/移除 TOML 配置
|
||||
export const updateTomlCommonConfigSnippet = (
|
||||
tomlString: string,
|
||||
snippetString: string,
|
||||
enabled: boolean,
|
||||
): UpdateTomlCommonConfigResult => {
|
||||
if (!snippetString.trim()) {
|
||||
// 如果片段为空，移除已存在的通用配置部分
|
||||
const cleaned = removeTomlCommonConfig(tomlString);
|
||||
return {
|
||||
updatedConfig: cleaned,
|
||||
};
|
||||
}
|
||||
|
||||
if (enabled) {
|
||||
// 添加通用配置
|
||||
const withoutOld = removeTomlCommonConfig(tomlString);
|
||||
const commonSection = `\n${COMMON_CONFIG_MARKER_START}\n${snippetString}\n${COMMON_CONFIG_MARKER_END}\n`;
|
||||
return {
|
||||
updatedConfig: withoutOld + commonSection,
|
||||
};
|
||||
} else {
|
||||
// 移除通用配置
|
||||
const cleaned = removeTomlCommonConfig(tomlString);
|
||||
return {
|
||||
updatedConfig: cleaned,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// 从 TOML 中移除通用配置部分
|
||||
const removeTomlCommonConfig = (tomlString: string): string => {
|
||||
const startIdx = tomlString.indexOf(COMMON_CONFIG_MARKER_START);
|
||||
const endIdx = tomlString.indexOf(COMMON_CONFIG_MARKER_END);
|
||||
|
||||
if (startIdx === -1 || endIdx === -1) {
|
||||
return tomlString;
|
||||
}
|
||||
|
||||
// 找到标记前的换行符（如果有）
|
||||
let realStartIdx = startIdx;
|
||||
if (startIdx > 0 && tomlString[startIdx - 1] === '\n') {
|
||||
realStartIdx = startIdx - 1;
|
||||
}
|
||||
|
||||
// 找到标记后的换行符（如果有）
|
||||
let realEndIdx = endIdx + COMMON_CONFIG_MARKER_END.length;
|
||||
if (realEndIdx < tomlString.length && tomlString[realEndIdx] === '\n') {
|
||||
realEndIdx = realEndIdx + 1;
|
||||
}
|
||||
|
||||
return tomlString.slice(0, realStartIdx) + tomlString.slice(realEndIdx);
|
||||
};
|
||||
|
||||
// 检查 TOML 配置是否已包含通用配置片段
|
||||
export const hasTomlCommonConfigSnippet = (
|
||||
tomlString: string,
|
||||
snippetString: string,
|
||||
): boolean => {
|
||||
if (!snippetString.trim()) return false;
|
||||
|
||||
const startIdx = tomlString.indexOf(COMMON_CONFIG_MARKER_START);
|
||||
const endIdx = tomlString.indexOf(COMMON_CONFIG_MARKER_END);
|
||||
|
||||
if (startIdx === -1 || endIdx === -1 || startIdx >= endIdx) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 提取标记之间的内容
|
||||
const existingSnippet = tomlString
|
||||
.slice(startIdx + COMMON_CONFIG_MARKER_START.length, endIdx)
|
||||
.trim();
|
||||
|
||||
return existingSnippet === snippetString.trim();
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user