feat: add category-specific hints to provider form

- Add dynamic hint text based on provider category (official, opensource, aggregator, third-party, custom)
- Display hints in ProviderPresetSelector below preset buttons
- Rename "Chinese official" to "Opensource official" for better clarity
- Add i18n keys for all category hints in both zh and en locales
- Remove redundant hint boxes from ClaudeFormFields and CodexFormFields

This improves user guidance by showing contextual hints that explain
what fields are required for each provider category.
This commit is contained in:
Jason
2025-10-19 12:24:47 +08:00
parent 57661817d3
commit a0cb29d3b2
5 changed files with 48 additions and 6 deletions

View File

@@ -456,6 +456,7 @@ export function ProviderForm({
categoryKeys={categoryKeys}
presetCategoryLabels={presetCategoryLabels}
onPresetChange={handlePresetChange}
category={category}
/>
)}

View File

@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
import { FormLabel } from "@/components/ui/form";
import type { ProviderPreset } from "@/config/providerPresets";
import type { CodexProviderPreset } from "@/config/codexProviderPresets";
import type { ProviderCategory } from "@/types";
type PresetEntry = {
id: string;
@@ -14,6 +15,7 @@ interface ProviderPresetSelectorProps {
categoryKeys: string[];
presetCategoryLabels: Record<string, string>;
onPresetChange: (value: string) => void;
category?: ProviderCategory; // 新增:当前选中的分类
}
export function ProviderPresetSelector({
@@ -22,9 +24,40 @@ export function ProviderPresetSelector({
categoryKeys,
presetCategoryLabels,
onPresetChange,
category,
}: ProviderPresetSelectorProps) {
const { t } = useTranslation();
// 根据分类获取提示文字
const getCategoryHint = () => {
switch (category) {
case "official":
return t("providerForm.officialHint", {
defaultValue: "💡 官方供应商使用浏览器登录,无需配置 API Key",
});
case "cn_official":
return t("providerForm.cnOfficialApiKeyHint", {
defaultValue: "💡 国产官方供应商只需填写 API Key请求地址已预设",
});
case "aggregator":
return t("providerForm.aggregatorApiKeyHint", {
defaultValue: "💡 聚合服务供应商只需填写 API Key 即可使用",
});
case "third_party":
return t("providerForm.thirdPartyApiKeyHint", {
defaultValue: "💡 第三方供应商需要填写 API Key 和请求地址",
});
case "custom":
return t("providerForm.customApiKeyHint", {
defaultValue: "💡 自定义配置需手动填写所有必要字段",
});
default:
return t("providerPreset.hint", {
defaultValue: "选择预设后可继续调整下方字段。",
});
}
};
return (
<div className="space-y-3">
<FormLabel>
@@ -71,9 +104,7 @@ export function ProviderPresetSelector({
})}
</div>
<p className="text-xs text-muted-foreground">
{t("providerPreset.helper", {
defaultValue: "选择预设后可继续调整下方字段。",
})}
{getCategoryHint()}
</p>
</div>
);