Merge pull request #72 from zonghaoyuan/fix/settings-ui-polish

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

app/page.tsx

@@ -1787,10 +1787,10 @@ export default function HomePage() {
           {!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">
               <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>。
-                点击「<span className="inline-flex items-center gap-1 text-ember-500"><i className="fa-solid fa-gear text-[10px]" />设置</span>」可以配置你的名字和配音
-                API Key，让角色以你的名字称呼你，配音体验也更稳定。
+                点击「<span className="inline-flex items-center gap-1 text-ember-500"><i className="fa-solid fa-gear text-[10px]" />设置</span>」还能填入你的名字，以及你自己的文本、绘图、识图模型和配音
+                Key——全部只存在本地浏览器，体验更稳定。
               </p>
               <button
                 type="button"

components/SettingsModal.tsx

@@ -402,6 +402,15 @@ export function SettingsModal({
 
           {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 端点支持浏览器跨域请求（CORS）。大多数主流提供商（OpenAI、Anthropic、Gemini、Runware 等）已默认支持。
+                </p>
+              </div>
+
+              <div className="border-t border-clay-900/8 mx-6 md:mx-8" />
+
               {groups.map((g, idx) => (
                 <div key={g.key}>
                   {idx > 0 && (
@@ -419,7 +428,7 @@ export function SettingsModal({
 
                     <div className="flex flex-col gap-2">
                       <span className="text-[10px] smallcaps text-clay-500">
-                        B A S E · U R L
+                        BASE URL
                       </span>
                       <input
                         value={g.baseUrl}
@@ -434,7 +443,7 @@ export function SettingsModal({
 
                     <div className="flex flex-col gap-2">
                       <span className="text-[10px] smallcaps text-clay-500">
-                        A P I · K e y
+                        API Key
                       </span>
                       <div className="relative">
                         <input
@@ -466,7 +475,7 @@ export function SettingsModal({
 
                     <div className="flex flex-col gap-2">
                       <span className="text-[10px] smallcaps text-clay-500">
-                        M o d e l
+                        Model
                       </span>
                       <input
                         value={g.model}
@@ -481,7 +490,7 @@ export function SettingsModal({
 
                     <div className="flex flex-col gap-2">
                       <span className="text-[10px] smallcaps text-clay-500">
-                        P r o v i d e r（可选）
+                        Provider（可选）
                       </span>
                       <select
                         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 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">
-                    <i className="fa-solid fa-key text-[11px]" />
+                    <i className="fa-solid fa-volume-high text-[11px]" />
                   </span>
                   <span className="font-serif text-base text-clay-900">
-                    自带配音 Key
+                    配音模型
                   </span>
-                  <span className="text-[10px] text-clay-400">可选</span>
                 </div>
                 <p className="text-[12px] leading-relaxed text-clay-500">
                   填入你自己的
@@ -526,7 +534,7 @@ export function SettingsModal({
 
                 <div className="flex flex-col gap-2">
                   <span className="text-[10px] smallcaps text-clay-500">
-                    K e y · 类 型
+                    Key 类型
                   </span>
                   <div className="grid grid-cols-2 gap-2">
                     {(
@@ -569,7 +577,7 @@ export function SettingsModal({
                 {keyType === "token-plan" && (
                   <div className="flex flex-col gap-2">
                     <span className="text-[10px] smallcaps text-clay-500">
-                      区 域 节 点
+                      区域节点
                     </span>
                     <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
                       {TTS_REGION_PRESETS.map((p) => {
@@ -599,7 +607,7 @@ export function SettingsModal({
 
                 <div className="flex flex-col gap-2">
                   <span className="text-[10px] smallcaps text-clay-500">
-                    A P I · K e y
+                    API Key
                   </span>
                   <div className="relative">
                     <input
@@ -647,15 +655,6 @@ export function SettingsModal({
                   </a>
                 </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 端点支持浏览器跨域请求（CORS）。大多数主流提供商（OpenAI、Anthropic、Gemini、Runware 等）已默认支持。
-                </p>
-              </div>
             </>
           )}
         </div>