From 3ebca59535626dc19ab06d6c98176dd802158360 Mon Sep 17 00:00:00 2001 From: lzt404 <2596933790@qq.com> Date: Tue, 1 Sep 2026 21:05:52 +0800 Subject: [PATCH] feat(easy-mode): refine onboarding flow and navigation controls - Enforce accurate step validation for OAuth and API setup - Select all fetched API models by default - Prevent guide cards from overlapping highlighted areas - Improve onboarding copy and remove unnecessary dashboard actions - Reposition and highlight guide and exit controls --- src/i18n/locales/en.ts | 1 - src/i18n/locales/zh-CN.ts | 1 - src/pages/EasyModePage.tsx | 68 +++++++++++--------------------------- src/styles.css | 37 +++++++++++++++++++++ 4 files changed, 56 insertions(+), 51 deletions(-) diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts index 7102d42..aadd0f7 100644 --- a/src/i18n/locales/en.ts +++ b/src/i18n/locales/en.ts @@ -99,7 +99,6 @@ export const en: Record = { 'easyMode.agent.launchClient': '🚀 Launch Client / Open Terminal', 'easyMode.agent.launching': 'Launching...', 'easyMode.complete.title': 'Setup Complete!', - 'easyMode.complete.enterApp': 'Enter Dashboard', 'easyMode.apiCopy.desc': 'You can also use the local proxy URL in any OpenAI / Claude / Gemini compatible tool.', 'easyMode.apiCopy.copied': 'Copied to clipboard', 'error.render.title': 'Something went wrong while rendering this page', diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts index 1f09fc7..f223099 100644 --- a/src/i18n/locales/zh-CN.ts +++ b/src/i18n/locales/zh-CN.ts @@ -97,7 +97,6 @@ export const zhCN = { 'easyMode.agent.launchClient': '🚀 启动客户端 / 打开终端', 'easyMode.agent.launching': '正在启动...', 'easyMode.complete.title': '配置就绪！', - 'easyMode.complete.enterApp': '进入完整控制台', 'easyMode.apiCopy.desc': '你也可以直接将本地代理地址填入任何支持 OpenAI / Claude / Gemini 协议的工具中。', 'easyMode.apiCopy.copied': '已复制到剪贴板', 'error.render.title': '页面渲染出现异常', diff --git a/src/pages/EasyModePage.tsx b/src/pages/EasyModePage.tsx index 34a1e92..d3f9262 100644 --- a/src/pages/EasyModePage.tsx +++ b/src/pages/EasyModePage.tsx @@ -141,11 +141,7 @@ export function EasyModePage({ const [guideOAuthProvider, setGuideOAuthProvider] = useState(null); const [guideOAuthCompleted, setGuideOAuthCompleted] = useState(false); const [guideApiSaved, setGuideApiSaved] = useState(false); - const [guideApiFormatSelected, setGuideApiFormatSelected] = useState(false); - const [guideApiBaseEdited, setGuideApiBaseEdited] = useState(false); - const [guideApiKeyEdited, setGuideApiKeyEdited] = useState(false); const [guideApiModelsFetched, setGuideApiModelsFetched] = useState(false); - const [guideApiModelSelected, setGuideApiModelSelected] = useState(false); const [guideAgentConfigured, setGuideAgentConfigured] = useState(false); // 新手聚焦指导状态（默认关闭，点击开启） @@ -314,11 +310,6 @@ export function EasyModePage({ const handleApiSectionChange = (sec: ApiSection) => { setSelectedApiSection(sec); - if (guideActive && guideStep === 2) { - setGuideApiFormatSelected(true); - setGuideApiBaseEdited(false); - setGuideApiKeyEdited(false); - } const opt = apiSectionOptions.find((o) => o.id === sec); if (opt) setApiBaseUrl(opt.defaultBaseUrl); setApiTestedModels([]); @@ -327,7 +318,6 @@ export function EasyModePage({ setApiSaveNotice(null); setGuideApiSaved(false); setGuideApiModelsFetched(false); - setGuideApiModelSelected(false); }; const handleTestApi = async () => { @@ -345,7 +335,6 @@ export function EasyModePage({ setApiSelectedModels([]); setGuideApiSaved(false); setGuideApiModelsFetched(false); - setGuideApiModelSelected(false); const opt = apiSectionOptions.find((o) => o.id === selectedApiSection); const providerType = opt ? opt.provider : "openai"; @@ -361,7 +350,7 @@ export function EasyModePage({ ); if (models.length > 0) { setApiTestedModels(models); - setApiSelectedModels([]); + setApiSelectedModels(models); setGuideApiModelsFetched(true); } else { setApiTestError("未获取到任何模型，请检查 API Base URL 与密钥"); @@ -375,7 +364,6 @@ export function EasyModePage({ const handleToggleApiModel = (model: ModelOption) => { setGuideApiSaved(false); - setGuideApiModelSelected(true); const key = model.name.trim().toLowerCase(); if (!key) return; setApiSelectedModels((current) => { @@ -399,11 +387,9 @@ export function EasyModePage({ setApiTestError(t("easyMode.api.modelRequired")); return; } - if (guideActive && guideStep === 2 && authMethod === "api") { - if (!guideApiFormatSelected || !guideApiBaseEdited || !guideApiKeyEdited || !guideApiModelsFetched || !guideApiModelSelected) { - setApiTestError("请按引导完成接口格式、地址、密钥和模型选择后再保存"); - return; - } + if (guideActive && guideStep === 2 && authMethod === "api" && !guideApiModelsFetched) { + setApiTestError("请先获取模型列表"); + return; } setApiSaving(true); setApiSaveNotice(null); @@ -546,7 +532,7 @@ export function EasyModePage({ : guideStep === 2 ? authMethod === "oauth" ? guideOAuthProvider !== null && guideOAuthCompleted - : guideApiFormatSelected && guideApiBaseEdited && guideApiKeyEdited && guideApiModelsFetched && guideApiModelSelected && guideApiSaved + : guideApiSaved : guideStep === 3 ? hasConnectedSource || guideOAuthCompleted || guideApiSaved : guideAgentConfigured; @@ -586,11 +572,7 @@ export function EasyModePage({ setGuideOAuthProvider(null); setGuideOAuthCompleted(false); setGuideApiSaved(false); - setGuideApiFormatSelected(false); - setGuideApiBaseEdited(false); - setGuideApiKeyEdited(false); setGuideApiModelsFetched(false); - setGuideApiModelSelected(false); setGuideAgentConfigured(false); setGuideActive(true); }; @@ -615,13 +597,10 @@ export function EasyModePage({ 极简智能体与模型接入向导 - - -
{/* 新手聚焦指导开关 */} +
+
{/* 主题切换 */} {setTheme ? (
@@ -688,7 +669,7 @@ export function EasyModePage({ {/* 退出新手模式返回常规控制台 */}
@@ -936,7 +917,7 @@ export function EasyModePage({ type="password" className="text-input" value={apiKey} - onChange={(e) => { setApiKey(e.target.value); setGuideApiKeyEdited(true); setGuideApiSaved(false); }} + onChange={(e) => { setApiKey(e.target.value); setGuideApiSaved(false); }} placeholder="sk-..." />
@@ -1066,15 +1047,6 @@ export function EasyModePage({ {t("easyMode.navigation.back")} - ) : null} @@ -1145,23 +1117,21 @@ export function EasyModePage({ <>

步骤 2：填写并保存 API 接入

- 1. 选择接口格式。
+ 1. 确认接口格式，可保持默认选项或选择其他格式。
2. 填写 API Base URL 和 API Key。
- 3. 点击 『获取模型列表』，至少勾选一个模型，再点击 『保存并接入』。 + 3. 点击 『获取模型列表』，返回结果后会默认全选模型；确认或调整选择后，点击 『保存并接入』。

{guideApiSaved ? ( API 接入已保存成功，请点击『下一步』。 - ) : !guideApiFormatSelected ? ( - "请先点击一个接口格式，再填写接入信息。" - ) : !guideApiBaseEdited || !guideApiKeyEdited ? ( - "请重新填写 Base URL 和 API Key；填写完成后才能获取模型。" + ) : !apiBaseUrl.trim() || !apiKey.trim() ? ( + "请填写 Base URL 和 API Key；填写完整后才能获取模型。" ) : !guideApiModelsFetched || apiTestedModels.length === 0 ? ( "请点击『获取模型列表』并等待结果返回。" - ) : !guideApiModelSelected || apiSelectedModels.length === 0 ? ( - "已获取模型，请至少勾选一个模型后保存。" + ) : apiSelectedModels.length === 0 ? ( + "当前没有选中模型，请至少勾选一个模型后保存。" ) : ( - 已完成填写并选中 {apiSelectedModels.length} 个模型，请点击『保存并接入』。 + 已默认选择 {apiSelectedModels.length} 个模型；可调整选择，然后点击『保存并接入』。 )}
@@ -1188,7 +1158,7 @@ export function EasyModePage({ 非 Pi 客户端点击实际显示的 『应用配置』 或 『更新配置』；Pi 客户端点击 『安装提供方』 或 『修复提供方』。成功后才能完成指引。

- {guideAgentConfigured ? "配置已成功应用。你还可以点击『完成并进入控制台』返回控制台；启动客户端需要另行点击启动按钮。" : "请先选择已检测到的客户端和模型，再点击对应的配置按钮并等待成功结果。"} + {guideAgentConfigured ? "配置已成功应用，可以关闭操作指引；启动客户端需要另行点击启动按钮。" : "请先选择已检测到的客户端和模型，再点击对应的配置按钮并等待成功结果。"}
) : null} diff --git a/src/styles.css b/src/styles.css index 5c0fb30..4121ca2 100644 --- a/src/styles.css +++ b/src/styles.css @@ -12001,6 +12001,7 @@ body.table-col-resizing * { display: flex; align-items: center; gap: 14px; + flex-wrap: wrap; } .simple-mode-brand { @@ -12202,6 +12203,26 @@ body.table-col-resizing * { border-radius: 8px; } +.simple-mode-highlight-button { + border: 1px solid var(--ui-accent) !important; + background: var(--ui-accent) !important; + color: #ffffff !important; + box-shadow: 0 4px 12px var(--ui-accent-shadow); +} + +.simple-mode-highlight-button:hover { + border-color: var(--ui-accent-strong) !important; + background: var(--ui-accent-strong) !important; + color: #ffffff !important; +} + +.simple-mode-guide-toggle.simple-mode-highlight-button.active { + border-color: var(--ui-accent) !important; + background: var(--ui-accent) !important; + color: #ffffff !important; + box-shadow: 0 4px 12px var(--ui-accent-shadow); +} + /* 全灰色聚焦蒙层与高亮指示器 */ @@ -12458,3 +12479,19 @@ body.table-col-resizing * { cursor: not-allowed !important; pointer-events: none; } + +@media (max-width: 760px) { + .simple-mode-topbar { + flex-wrap: wrap; + } + + .simple-mode-topbar-left, + .simple-mode-topbar-right { + width: 100%; + } + + .simple-mode-topbar-right { + justify-content: flex-end; + flex-wrap: wrap; + } +} \ No newline at end of file