diff --git a/src/i18n/ja.ts b/src/i18n/ja.ts index 31c2a52..47b001e 100644 --- a/src/i18n/ja.ts +++ b/src/i18n/ja.ts @@ -36,6 +36,9 @@ export const jaOverrides = { 'app.close.exit': 'アプリを終了', 'app.close.remember': 'この選択を記憶', 'easyMode.steps.label': '接続ウィザードの手順', + 'easyMode.steps.current': '{total} ステップ中 {current} ステップ目', + 'easyMode.steps.step1Description': 'アカウントにログインするか API を接続', + 'easyMode.steps.step2Description': 'クライアントとモデルを選んで起動', 'easyMode.overview.coreTitle': '使い方', 'easyMode.overview.providerTitle': 'モデルを接続', 'easyMode.overview.agentTitle': 'エージェントを接続', diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts index 72c0e3d..879470a 100644 --- a/src/i18n/locales/en.ts +++ b/src/i18n/locales/en.ts @@ -36,6 +36,9 @@ export const en: Record = { 'app.close.exit': 'Exit App', 'app.close.remember': 'Remember this choice', 'easyMode.steps.label': 'Connection wizard steps', + 'easyMode.steps.current': 'Step {current} of {total}', + 'easyMode.steps.step1Description': 'Sign in or connect an API', + 'easyMode.steps.step2Description': 'Select a client and model, then start', 'easyMode.overview.coreTitle': 'How to use', 'easyMode.overview.providerTitle': 'Connect a model', 'easyMode.overview.agentTitle': 'Connect an agent', diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts index 0eb4e09..8bed820 100644 --- a/src/i18n/locales/zh-CN.ts +++ b/src/i18n/locales/zh-CN.ts @@ -34,6 +34,9 @@ export const zhCN = { 'app.close.exit': '退出程序', 'app.close.remember': '记住选项', 'easyMode.steps.label': '接入向导步骤', + 'easyMode.steps.current': '第 {current} 步 / 共 {total} 步', + 'easyMode.steps.step1Description': '先登录账号或接入 API', + 'easyMode.steps.step2Description': '选择客户端和模型后启动', 'easyMode.overview.coreTitle': '使用指导', 'easyMode.overview.providerTitle': '接入模型', 'easyMode.overview.agentTitle': '接入智能体', diff --git a/src/pages/EasyModePage.tsx b/src/pages/EasyModePage.tsx index 0c2cd4b..2b0f908 100644 --- a/src/pages/EasyModePage.tsx +++ b/src/pages/EasyModePage.tsx @@ -390,8 +390,45 @@ export function EasyModePage({ ]; }, [apiSelectedModels, apiTestedModels]); + const setupStepStatus = t("easyMode.steps.current", { + current: activeStep, + total: 2, + }); + return (
+ + {/* 第一步:接入模型 */} {activeStep === 1 ? (
diff --git a/src/styles.css b/src/styles.css index 6fec376..d80a9c8 100644 --- a/src/styles.css +++ b/src/styles.css @@ -9982,6 +9982,21 @@ body.table-col-resizing * { } @media (max-width: 680px) { + .simple-mode-step-status-track { + grid-template-columns: 1fr; + gap: 4px; + } + + .simple-mode-step-status-connector { + width: 1px; + height: 10px; + margin-left: 12px; + } + + .simple-mode-step-status-copy small { + white-space: normal; + } + .easy-mode-hero { flex-direction: column; gap: 14px; @@ -10042,6 +10057,114 @@ body.table-col-resizing * { margin-inline: auto; } +.simple-mode-step-status { + display: grid; + gap: 10px; + padding: 12px 14px; + border: 1px solid var(--theme-e3e1db); + border-radius: 10px; + background: var(--theme-fffdf8); +} + +.simple-mode-step-status-heading { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + color: var(--theme-7a746c); + font-size: var(--font-size-meta); +} + +.simple-mode-step-status-heading strong { + color: var(--theme-2d2a26); + font-size: var(--font-size-label); +} + +.simple-mode-step-status-track { + display: grid; + grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); + align-items: center; + gap: 8px; +} + +.simple-mode-step-status-item { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + align-items: center; + gap: 9px; + min-width: 0; + padding: 9px 10px; + border: 1px solid transparent; + border-radius: 8px; + color: var(--theme-7a746c); +} + +.simple-mode-step-status-item.active { + border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--theme-e3e1db)); + background: var(--ui-accent-soft); +} + +.simple-mode-step-status-item.complete { + color: var(--theme-5f5a53); +} + +.simple-mode-step-status-number { + display: grid; + width: 25px; + height: 25px; + place-items: center; + border: 1px solid var(--theme-d5d2cb); + border-radius: 999px; + background: var(--theme-faf9f5); + color: var(--theme-7a746c); + font-size: var(--font-size-meta); + font-weight: 800; +} + +.simple-mode-step-status-item.active .simple-mode-step-status-number { + border-color: var(--ui-accent); + background: var(--ui-accent); + color: #ffffff; +} + +.simple-mode-step-status-item.complete .simple-mode-step-status-number { + border-color: var(--theme-b6d3bd); + background: var(--theme-f1f8f1); + color: var(--theme-2f6b3a); +} + +.simple-mode-step-status-copy { + display: grid; + min-width: 0; + gap: 2px; +} + +.simple-mode-step-status-copy strong, +.simple-mode-step-status-copy small { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.simple-mode-step-status-copy strong { + color: var(--theme-2d2a26); + font-size: var(--font-size-label); +} + +.simple-mode-step-status-copy small { + color: var(--theme-7a746c); + font-size: var(--font-size-caption); +} + +.simple-mode-step-status-connector { + height: 1px; + background: var(--theme-d5d2cb); +} + +.simple-mode-step-status-connector.complete { + background: var(--theme-b6d3bd); +} + .simple-mode-core-alert { display: flex; align-items: center; @@ -11565,6 +11688,8 @@ body.table-col-resizing * { } .agents-page-embedded .agent-embedded-header-copy h1 { + font-size: var(--font-size-panel-title); + line-height: var(--line-height-tight); white-space: normal; }