fix(web): unify settings model sections and refine home hint

- Rename "自带配音 Key" → "配音模型", drop the section-level "可选" badge,
  and switch its icon to fa-volume-high to match the other model sections
- Drop redundant manual letter-spacing and "·" separators from settings
  field labels (let .smallcaps tracking handle spacing)
- Move the CORS endpoint note to the top of the Models tab
- Home hint: reword to "输入想法", mention text/image/vision models + voice
  key, and add an AUTH_ENABLED-gated "测试期间,登录即可免费畅玩" line

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
yuanzonghao
2026-06-14 11:24:22 +08:00
parent 0c83f5f2a8
commit 54a0083e23
2 changed files with 21 additions and 22 deletions
+3 -3
View File
@@ -1787,10 +1787,10 @@ export default function HomePage() {
{!hintClosed && ( {!hintClosed && (
<div className="relative mx-auto mt-10 md:mt-12 max-w-[640px] rounded-sm border border-clay-900/10 bg-cream-100/50 px-8 py-3.5"> <div className="relative mx-auto mt-10 md:mt-12 max-w-[640px] rounded-sm border border-clay-900/10 bg-cream-100/50 px-8 py-3.5">
<p className="font-serif text-[13px] md:text-sm leading-relaxed text-clay-500"> <p className="font-serif text-[13px] md:text-sm leading-relaxed text-clay-500">
{" "} {AUTH_ENABLED && "(测试期间,登录即可免费畅玩)"}{" "}
<em className="not-italic text-ember-500">InfiPlot</em> <em className="not-italic text-ember-500">InfiPlot</em>
<span className="inline-flex items-center gap-1 text-ember-500"><i className="fa-solid fa-gear text-[10px]" /></span> <span className="inline-flex items-center gap-1 text-ember-500"><i className="fa-solid fa-gear text-[10px]" /></span>
API Key Key
</p> </p>
<button <button
type="button" type="button"
+18 -19
View File
@@ -402,6 +402,15 @@ export function SettingsModal({
{activeTab === "models" && ( {activeTab === "models" && (
<> <>
<div className="px-6 md:px-8 py-4">
<p className="text-[11px] leading-relaxed text-clay-400">
<i className="fa-solid fa-circle-info mr-1.5" />
API CORSOpenAIAnthropicGeminiRunware
</p>
</div>
<div className="border-t border-clay-900/8 mx-6 md:mx-8" />
{groups.map((g, idx) => ( {groups.map((g, idx) => (
<div key={g.key}> <div key={g.key}>
{idx > 0 && ( {idx > 0 && (
@@ -419,7 +428,7 @@ export function SettingsModal({
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<span className="text-[10px] smallcaps text-clay-500"> <span className="text-[10px] smallcaps text-clay-500">
B A S E · U R L BASE URL
</span> </span>
<input <input
value={g.baseUrl} value={g.baseUrl}
@@ -434,7 +443,7 @@ export function SettingsModal({
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<span className="text-[10px] smallcaps text-clay-500"> <span className="text-[10px] smallcaps text-clay-500">
A P I · K e y API Key
</span> </span>
<div className="relative"> <div className="relative">
<input <input
@@ -466,7 +475,7 @@ export function SettingsModal({
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<span className="text-[10px] smallcaps text-clay-500"> <span className="text-[10px] smallcaps text-clay-500">
M o d e l Model
</span> </span>
<input <input
value={g.model} value={g.model}
@@ -481,7 +490,7 @@ export function SettingsModal({
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<span className="text-[10px] smallcaps text-clay-500"> <span className="text-[10px] smallcaps text-clay-500">
P r o v i d e r Provider
</span> </span>
<select <select
value={g.provider} value={g.provider}
@@ -508,12 +517,11 @@ export function SettingsModal({
<div className="flex flex-col gap-3 px-6 md:px-8 pt-5 pb-5"> <div className="flex flex-col gap-3 px-6 md:px-8 pt-5 pb-5">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<span className="flex h-7 w-7 items-center justify-center rounded-sm border border-clay-900/10 bg-cream-100 text-clay-400"> <span className="flex h-7 w-7 items-center justify-center rounded-sm border border-clay-900/10 bg-cream-100 text-clay-400">
<i className="fa-solid fa-key text-[11px]" /> <i className="fa-solid fa-volume-high text-[11px]" />
</span> </span>
<span className="font-serif text-base text-clay-900"> <span className="font-serif text-base text-clay-900">
Key
</span> </span>
<span className="text-[10px] text-clay-400"></span>
</div> </div>
<p className="text-[12px] leading-relaxed text-clay-500"> <p className="text-[12px] leading-relaxed text-clay-500">
@@ -526,7 +534,7 @@ export function SettingsModal({
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<span className="text-[10px] smallcaps text-clay-500"> <span className="text-[10px] smallcaps text-clay-500">
K e y · Key
</span> </span>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
{( {(
@@ -569,7 +577,7 @@ export function SettingsModal({
{keyType === "token-plan" && ( {keyType === "token-plan" && (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<span className="text-[10px] smallcaps text-clay-500"> <span className="text-[10px] smallcaps text-clay-500">
</span> </span>
<div className="grid grid-cols-1 gap-2 sm:grid-cols-3"> <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
{TTS_REGION_PRESETS.map((p) => { {TTS_REGION_PRESETS.map((p) => {
@@ -599,7 +607,7 @@ export function SettingsModal({
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<span className="text-[10px] smallcaps text-clay-500"> <span className="text-[10px] smallcaps text-clay-500">
A P I · K e y API Key
</span> </span>
<div className="relative"> <div className="relative">
<input <input
@@ -647,15 +655,6 @@ export function SettingsModal({
</a> </a>
</div> </div>
</div> </div>
<div className="border-t border-clay-900/8 mx-6 md:mx-8" />
<div className="px-6 md:px-8 py-4">
<p className="text-[11px] leading-relaxed text-clay-400">
<i className="fa-solid fa-circle-info mr-1.5" />
API CORSOpenAIAnthropicGeminiRunware
</p>
</div>
</> </>
)} )}
</div> </div>