feat: update document title for clarity, add logo image, enhance OAuthPage with iFlow cookie authentication feature, and improve localization for remote access messages

2026-02-02 02:40:50 +08:00 · 2025-12-11 01:18:32 +08:00
parent 95218676db
commit 673ab15ad4
6 changed files with 147 additions and 24 deletions
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>cli-proxy-webui-react</title>
+    <title>CLI Proxy API Management Center</title>
  </head>
  <body>
    <div id="root"></div>
--- a/logo.jpg
+++ b/logo.jpg
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -431,7 +431,8 @@
    "iflow_cookie_result_email": "Account",
    "iflow_cookie_result_expired": "Expires At",
    "iflow_cookie_result_path": "Saved Path",
-    "iflow_cookie_result_type": "Type"
+    "iflow_cookie_result_type": "Type",
+    "remote_access_disabled": "This login method is not available for remote access. Please access from localhost."
  },
  "usage_stats": {
    "title": "Usage Statistics",
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -431,7 +431,8 @@
    "iflow_cookie_result_email": "账号",
    "iflow_cookie_result_expired": "过期时间",
    "iflow_cookie_result_path": "保存路径",
-    "iflow_cookie_result_type": "类型"
+    "iflow_cookie_result_type": "类型",
+    "remote_access_disabled": "远程访问不支持此登录方式，请从本地 (localhost) 访问"
  },
  "usage_stats": {
    "title": "使用统计",
--- a/src/pages/OAuthPage.tsx
+++ b/src/pages/OAuthPage.tsx
@@ -1,9 +1,11 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
 import { useNotificationStore } from '@/stores';
-import { oauthApi, type OAuthProvider } from '@/services/api/oauth';
+import { oauthApi, type OAuthProvider, type IFlowCookieAuthResponse } from '@/services/api/oauth';
+import { isLocalhost } from '@/utils/connection';

 interface ProviderState {
  url?: string;
@@ -13,6 +15,13 @@ interface ProviderState {
  polling?: boolean;
 }

+interface IFlowCookieState {
+  cookie: string;
+  loading: boolean;
+  result?: IFlowCookieAuthResponse;
+  error?: string;
+}
+
 const PROVIDERS: { id: OAuthProvider; titleKey: string; hintKey: string; urlLabelKey: string }[] = [
  { id: 'codex', titleKey: 'auth_login.codex_oauth_title', hintKey: 'auth_login.codex_oauth_hint', urlLabelKey: 'auth_login.codex_oauth_url_label' },
  { id: 'anthropic', titleKey: 'auth_login.anthropic_oauth_title', hintKey: 'auth_login.anthropic_oauth_hint', urlLabelKey: 'auth_login.anthropic_oauth_url_label' },
@@ -26,8 +35,12 @@ export function OAuthPage() {
  const { t } = useTranslation();
  const { showNotification } = useNotificationStore();
  const [states, setStates] = useState<Record<OAuthProvider, ProviderState>>({} as Record<OAuthProvider, ProviderState>);
+  const [iflowCookie, setIflowCookie] = useState<IFlowCookieState>({ cookie: '', loading: false });
  const timers = useRef<Record<string, number>>({});

+  // 检测是否为本地访问
+  const isLocal = useMemo(() => isLocalhost(window.location.hostname), []);
+
  useEffect(() => {
    return () => {
      Object.values(timers.current).forEach((timer) => window.clearInterval(timer));
@@ -103,22 +116,58 @@ export function OAuthPage() {
    }
  };

+  const submitIflowCookie = async () => {
+    const cookie = iflowCookie.cookie.trim();
+    if (!cookie) {
+      showNotification(t('auth_login.iflow_cookie_required'), 'warning');
+      return;
+    }
+    setIflowCookie((prev) => ({ ...prev, loading: true, error: undefined, result: undefined }));
+    try {
+      const res = await oauthApi.iflowCookieAuth(cookie);
+      if (res.status === 'ok') {
+        setIflowCookie((prev) => ({ ...prev, loading: false, result: res }));
+        showNotification(t('auth_login.iflow_cookie_status_success'), 'success');
+      } else {
+        setIflowCookie((prev) => ({ ...prev, loading: false, error: res.error }));
+        showNotification(`${t('auth_login.iflow_cookie_status_error')} ${res.error || ''}`, 'error');
+      }
+    } catch (err: any) {
+      setIflowCookie((prev) => ({ ...prev, loading: false, error: err?.message }));
+      showNotification(`${t('auth_login.iflow_cookie_start_error')} ${err?.message || ''}`, 'error');
+    }
+  };
+
  return (
    <div className="stack">
      {PROVIDERS.map((provider) => {
        const state = states[provider.id] || {};
+        // 非本地访问时禁用所有 OAuth 登录方式
+        const isDisabled = !isLocal;
        return (
-          <Card
+          <div
            key={provider.id}
-            title={t(provider.titleKey)}
-            extra={
-              <Button onClick={() => startAuth(provider.id)} loading={state.polling}>
-                {t('common.login')}
-              </Button>
-            }
+            style={isDisabled ? { opacity: 0.6, pointerEvents: 'none' } : undefined}
          >
-            <div className="hint">{t(provider.hintKey)}</div>
-            {state.url && (
+            <Card
+              title={t(provider.titleKey)}
+              extra={
+                <Button
+                  onClick={() => startAuth(provider.id)}
+                  loading={state.polling}
+                  disabled={isDisabled}
+                >
+                  {t('common.login')}
+                </Button>
+              }
+            >
+              <div className="hint">{t(provider.hintKey)}</div>
+              {isDisabled && (
+                <div className="status-badge warning" style={{ marginTop: 8 }}>
+                  {t('auth_login.remote_access_disabled')}
+                </div>
+              )}
+              {!isDisabled && state.url && (
              <div className="connection-box">
                <div className="label">{t(provider.urlLabelKey)}</div>
                <div className="value">{state.url}</div>
@@ -136,18 +185,77 @@ export function OAuthPage() {
                </div>
              </div>
            )}
-            <div className="status-badge" style={{ marginTop: 8 }}>
-              {state.status === 'success'
-                ? t('auth_login.codex_oauth_status_success')
-                : state.status === 'error'
-                  ? `${t('auth_login.codex_oauth_status_error')} ${state.error || ''}`
-                  : state.status === 'waiting'
-                    ? t('auth_login.codex_oauth_status_waiting')
-                    : t('common.info')}
-            </div>
+            {!isDisabled && (
+              <div className="status-badge" style={{ marginTop: 8 }}>
+                {state.status === 'success'
+                  ? t('auth_login.codex_oauth_status_success')
+                  : state.status === 'error'
+                    ? `${t('auth_login.codex_oauth_status_error')} ${state.error || ''}`
+                    : state.status === 'waiting'
+                      ? t('auth_login.codex_oauth_status_waiting')
+                      : t('common.info')}
+              </div>
+            )}
          </Card>
+          </div>
        );
      })}
+
+      {/* iFlow Cookie 登录 */}
+      <Card
+        title={t('auth_login.iflow_cookie_title')}
+        extra={
+          <Button onClick={submitIflowCookie} loading={iflowCookie.loading}>
+            {t('auth_login.iflow_cookie_button')}
+          </Button>
+        }
+      >
+        <div className="hint">{t('auth_login.iflow_cookie_hint')}</div>
+        <div className="form-item" style={{ marginTop: 12 }}>
+          <label className="label">{t('auth_login.iflow_cookie_label')}</label>
+          <Input
+            value={iflowCookie.cookie}
+            onChange={(e) => setIflowCookie((prev) => ({ ...prev, cookie: e.target.value }))}
+            placeholder={t('auth_login.iflow_cookie_placeholder')}
+          />
+        </div>
+        {iflowCookie.error && (
+          <div className="status-badge error" style={{ marginTop: 8 }}>
+            {t('auth_login.iflow_cookie_status_error')} {iflowCookie.error}
+          </div>
+        )}
+        {iflowCookie.result && iflowCookie.result.status === 'ok' && (
+          <div className="connection-box" style={{ marginTop: 12 }}>
+            <div className="label">{t('auth_login.iflow_cookie_result_title')}</div>
+            <div className="key-value-list">
+              {iflowCookie.result.email && (
+                <div className="key-value-item">
+                  <span className="key">{t('auth_login.iflow_cookie_result_email')}</span>
+                  <span className="value">{iflowCookie.result.email}</span>
+                </div>
+              )}
+              {iflowCookie.result.expired && (
+                <div className="key-value-item">
+                  <span className="key">{t('auth_login.iflow_cookie_result_expired')}</span>
+                  <span className="value">{iflowCookie.result.expired}</span>
+                </div>
+              )}
+              {iflowCookie.result.saved_path && (
+                <div className="key-value-item">
+                  <span className="key">{t('auth_login.iflow_cookie_result_path')}</span>
+                  <span className="value">{iflowCookie.result.saved_path}</span>
+                </div>
+              )}
+              {iflowCookie.result.type && (
+                <div className="key-value-item">
+                  <span className="key">{t('auth_login.iflow_cookie_result_type')}</span>
+                  <span className="value">{iflowCookie.result.type}</span>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </Card>
    </div>
  );
 }
--- a/src/services/api/oauth.ts
+++ b/src/services/api/oauth.ts
@@ -17,6 +17,15 @@ export interface OAuthStartResponse {
  state?: string;
 }

+export interface IFlowCookieAuthResponse {
+  status: 'ok' | 'error';
+  error?: string;
+  saved_path?: string;
+  email?: string;
+  expired?: string;
+  type?: string;
+}
+
 const WEBUI_SUPPORTED: OAuthProvider[] = ['codex', 'anthropic', 'antigravity', 'gemini-cli', 'iflow'];

 export const oauthApi = {
@@ -28,5 +37,9 @@ export const oauthApi = {
  getAuthStatus: (state: string) =>
    apiClient.get<{ status: 'ok' | 'wait' | 'error'; error?: string }>(`/get-auth-status`, {
      params: { state }
-    })
+    }),
+
+  /** iFlow cookie 认证 */
+  iflowCookieAuth: (cookie: string) =>
+    apiClient.post<IFlowCookieAuthResponse>('/iflow-auth-url', { cookie })
 };