Merge pull request #1097 from iOfficeAI/task/newapi-prefill-apikey

feat: add aionui:// deep link protocol for new-api provider pre-fill

Author: IceyLiu

electron-builder.yml

@@ -3,6 +3,11 @@ productName: AionUi
 executableName: AionUi
 copyright: Copyright © 2024 AionUi
 
+protocols:
+  - name: AionUi Protocol
+    schemes:
+      - aionui
+
 asar:
   smartUnpack: true
 
@@ -167,6 +172,7 @@ linux:
       Comment: ${description}
       Icon: aionui
       Categories: Office;Utility;
+      MimeType: x-scheme-handler/aionui;
 
 npmRebuild: false
 buildDependenciesFromSource: false

src/common/ipcBridge.ts

@@ -310,6 +310,15 @@ export const document = {
   convert: bridge.buildProvider<import('./types/conversion').DocumentConversionResponse, import('./types/conversion').DocumentConversionRequest>('document.convert'),
 };
 
+// Deep link protocol handling / 深度链接协议处理
+export const deepLink = {
+  /** Emitted when app is opened via aionui:// protocol URL */
+  received: bridge.buildEmitter<{
+    action: string; // e.g. 'add-provider'
+    params: Record<string, string>; // parsed query params
+  }>('deep-link.received'),
+};
+
 // 窗口控制相关接口 / Window controls API
 export const windowControls = {
   minimize: bridge.buildProvider<void, void>('window-controls:minimize'),

src/index.ts

@@ -23,6 +23,95 @@ import { applyZoomToWindow } from './process/utils/zoom';
 // @ts-expect-error - electron-squirrel-startup doesn't have types
 import electronSquirrelStartup from 'electron-squirrel-startup';
 
+// ============ Deep Link Protocol ============
+// Register aionui:// protocol scheme for external app integration (e.g., New API token quick-add)
+const PROTOCOL_SCHEME = 'aionui';
+
+/**
+ * Parse an aionui:// URL into action and params.
+ * Supports two formats:
+ *   1. aionui://add-provider?baseUrl=xxx&apiKey=xxx
+ *   2. aionui://provider/add?v=1&data=<base64 JSON>  (one-api / new-api style)
+ */
+const parseDeepLinkUrl = (url: string): { action: string; params: Record<string, string> } | null => {
+  try {
+    const parsed = new URL(url);
+    if (parsed.protocol !== `${PROTOCOL_SCHEME}:`) return null;
+
+    // Build action from hostname + pathname, e.g. "provider/add" or "add-provider"
+    const hostname = parsed.hostname || '';
+    const pathname = parsed.pathname.replace(/^\/+/, '');
+    const action = pathname ? `${hostname}/${pathname}` : hostname;
+
+    const params: Record<string, string> = {};
+    parsed.searchParams.forEach((value, key) => {
+      params[key] = value;
+    });
+
+    // If data param exists, decode base64 JSON and merge into params
+    if (params.data) {
+      try {
+        const json = JSON.parse(Buffer.from(params.data, 'base64').toString('utf-8'));
+        if (json && typeof json === 'object') {
+          Object.assign(params, json);
+        }
+      } catch {
+        // Ignore decode errors
+      }
+      // Remove raw base64 blob so it isn't forwarded to the renderer
+      delete params.data;
+    }
+
+    return { action, params };
+  } catch {
+    return null;
+  }
+};
+
+/** Pending deep-link URL received before the window was ready */
+let pendingDeepLinkUrl: string | null = process.argv.find((arg) => arg.startsWith(`${PROTOCOL_SCHEME}://`)) || null;
+
+/**
+ * Send the deep-link payload to the renderer via IPC bridge.
+ * If the window isn't ready yet, queue it.
+ */
+const handleDeepLinkUrl = (url: string) => {
+  const parsed = parseDeepLinkUrl(url);
+  if (!parsed) return;
+
+  if (!mainWindow || mainWindow.isDestroyed()) {
+    // Window not ready yet – last-write-wins: only the most recent deep link is kept,
+    // which is intentional since the user can only act on one at a time.
+    pendingDeepLinkUrl = url;
+    return;
+  }
+
+  ipcBridge.deepLink.received.emit(parsed);
+};
+
+// ============ Single Instance Lock ============
+// Acquire lock early so the second instance quits before doing unnecessary work.
+// When a second instance starts (e.g. from protocol URL), it sends its data
+// to the first instance via second-instance event, then quits.
+const deepLinkFromArgv = process.argv.find((arg) => arg.startsWith(`${PROTOCOL_SCHEME}://`));
+const gotTheLock = app.requestSingleInstanceLock({ deepLinkUrl: deepLinkFromArgv });
+if (!gotTheLock) {
+  app.quit();
+} else {
+  app.on('second-instance', (_event, argv, _workingDirectory, additionalData) => {
+    // Prefer additionalData (reliable on all platforms), fallback to argv scan
+    const deepLinkUrl = (additionalData as { deepLinkUrl?: string })?.deepLinkUrl || argv.find((arg) => arg.startsWith(`${PROTOCOL_SCHEME}://`));
+    if (deepLinkUrl) {
+      handleDeepLinkUrl(deepLinkUrl);
+    }
+    // Focus existing window
+    if (mainWindow) {
+      if (mainWindow.isMinimized()) mainWindow.restore();
+      mainWindow.focus();
+    }
+  });
+}
+
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 // 修复 macOS 和 Linux 下 GUI 应用的 PATH 环境变量,使其与命令行一致
 if (process.platform === 'darwin' || process.platform === 'linux') {
@@ -197,6 +286,8 @@ const createWindow = (): void => {
   mainWindow = new BrowserWindow({
     width: windowWidth,
     height: windowHeight,
+    show: false, // Hide until CSS is loaded to prevent FOUC
+    backgroundColor: '#ffffff',
     autoHideMenuBar: true,
     // Set icon for Windows/Linux in development mode
     ...(devIcon && process.platform !== 'darwin' ? { icon: devIcon } : {}),
@@ -213,6 +304,18 @@ const createWindow = (): void => {
     },
   });
 
+  // Show window after page and CSS are fully loaded to prevent FOUC
+  const showWindow = () => {
+    if (!mainWindow.isDestroyed() && !mainWindow.isVisible()) {
+      mainWindow.show();
+    }
+  };
+  mainWindow.webContents.once('did-finish-load', () => {
+    setTimeout(showWindow, 200);
+  });
+  // Fallback: show window after 3s even if did-finish-load doesn't fire
+  setTimeout(showWindow, 3000);
+
   initMainAdapterWithWindow(mainWindow);
   setupApplicationMenu();
   void applyZoomToWindow(mainWindow);
@@ -317,6 +420,16 @@ const handleAppReady = async (): Promise<void> => {
     await startWebServer(resolvedPort, allowRemote);
   } else {
     createWindow();
+
+    // Flush pending deep-link URL (received before window was ready)
+    if (pendingDeepLinkUrl) {
+      const url = pendingDeepLinkUrl;
+      pendingDeepLinkUrl = null;
+      // Wait for renderer to be ready before sending
+      mainWindow.webContents.once('did-finish-load', () => {
+        handleDeepLinkUrl(url);
+      });
+    }
   }
 
   // 启动时初始化ACP检测器 (skip in --resetpass mode)
@@ -339,6 +452,27 @@ const handleAppReady = async (): Promise<void> => {
   });
 };
 
+// ============ Protocol Registration ============
+// Register aionui:// as the default protocol client
+if (process.defaultApp) {
+  // Dev mode: need to pass execPath explicitly
+  app.setAsDefaultProtocolClient(PROTOCOL_SCHEME, process.execPath, [path.resolve(process.argv[1])]);
+} else {
+  app.setAsDefaultProtocolClient(PROTOCOL_SCHEME);
+}
+
+// macOS: handle aionui:// URLs via the open-url event
+app.on('open-url', (event, url) => {
+  event.preventDefault();
+  handleDeepLinkUrl(url);
+  // Focus existing window so user sees the result
+  if (mainWindow && !mainWindow.isDestroyed()) {
+    if (mainWindow.isMinimized()) mainWindow.restore();
+    mainWindow.show();
+    mainWindow.focus();
+  }
+});
+
 // Ensure we don't miss the ready event when running in CLI/WebUI mode
 void app
   .whenReady()

src/renderer/components/SettingsModal/contents/ModelModalContent.tsx

@@ -8,7 +8,7 @@ import { ipcBridge } from '@/common';
 import type { IProvider } from '@/common/storage';
 import { Button, Divider, Message, Popconfirm, Collapse, Tag } from '@arco-design/web-react';
 import { DeleteFour, Info, Minus, Plus, Write } from '@icon-park/react';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
 import AddModelModal from '@/renderer/pages/settings/components/AddModelModal';
@@ -17,6 +17,7 @@ import { isNewApiPlatform, NEW_API_PROTOCOL_OPTIONS } from '@/renderer/config/mo
 import EditModeModal from '@/renderer/pages/settings/components/EditModeModal';
 import AionScrollArea from '@/renderer/components/base/AionScrollArea';
 import { useSettingsViewMode } from '../settingsViewContext';
+import { consumePendingDeepLink } from '@/renderer/hooks/useDeepLink';
 
 /**
  * 获取协议显示标签颜色
@@ -111,6 +112,14 @@ const ModelModalContent: React.FC = () => {
     },
   });
 
+  // Consume pending deep-link data on mount (set by useDeepLink hook before navigation)
+  useEffect(() => {
+    const pending = consumePendingDeepLink();
+    if (pending) {
+      addPlatformModalCtrl.open({ deepLinkData: pending });
+    }
+  }, [addPlatformModalCtrl]);
+
   const [addModelModalCtrl, addModelModalContext] = AddModelModal.useModal({
     onSubmit(platform) {
       updatePlatform(platform, () => {

src/renderer/config/modelPlatforms.ts

@@ -118,6 +118,18 @@ export const NEW_API_PROTOCOL_OPTIONS = [
   { label: 'Anthropic', value: 'anthropic' },
 ];
 
+/**
+ * 根据模型名称自动推断 New API 协议类型
+ * Auto-detect New API protocol type based on model name
+ */
+export const detectNewApiProtocol = (modelName: string): string => {
+  const name = modelName.toLowerCase();
+  if (name.startsWith('claude') || name.startsWith('anthropic')) return 'anthropic';
+  if (name.startsWith('gemini') || name.startsWith('models/gemini')) return 'gemini';
+  // Default to openai (covers gpt, deepseek, qwen, o1, o3, etc.)
+  return 'openai';
+};
+
 // ============ 工具函数 / Utility Functions ============
 
 /**

src/renderer/hooks/useColorScheme.ts

@@ -12,6 +12,7 @@ import { useCallback, useEffect, useState } from 'react';
 export type ColorScheme = 'default';
 
 const DEFAULT_COLOR_SCHEME: ColorScheme = 'default';
+const COLOR_SCHEME_CACHE_KEY = '__aionui_colorScheme';
 
 /**
  * Initialize color scheme immediately when module loads
@@ -22,6 +23,11 @@ const initColorScheme = async () => {
     const scheme = (await ConfigStorage.get('colorScheme')) as ColorScheme;
     const initialScheme = scheme || DEFAULT_COLOR_SCHEME;
     document.documentElement.setAttribute('data-color-scheme', initialScheme);
+    try {
+      localStorage.setItem(COLOR_SCHEME_CACHE_KEY, initialScheme);
+    } catch (_e) {
+      /* noop */
+    }
     return initialScheme;
   } catch (error) {
     console.error('Failed to load initial color scheme:', error);
@@ -49,6 +55,11 @@ const useColorScheme = (): [ColorScheme, (scheme: ColorScheme) => Promise<void>]
    */
   const applyColorScheme = useCallback((newScheme: ColorScheme) => {
     document.documentElement.setAttribute('data-color-scheme', newScheme);
+    try {
+      localStorage.setItem(COLOR_SCHEME_CACHE_KEY, newScheme);
+    } catch (_e) {
+      /* noop */
+    }
   }, []);
 
   /**

src/renderer/hooks/useDeepLink.ts

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2025 AionUi (aionui.com)
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useCallback, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ipcBridge } from '@/common';
+
+/**
+ * Deep link event payload from main process
+ */
+export type DeepLinkPayload = {
+  action: string;
+  params: Record<string, string>;
+};
+
+export type DeepLinkAddProviderDetail = {
+  baseUrl?: string;
+  apiKey?: string;
+  name?: string;
+  platform?: string;
+};
+
+/** Pending deep link data for the add-provider action. Read-once: consumed by ModelModalContent on mount. */
+let pendingDeepLinkData: DeepLinkAddProviderDetail | null = null;
+
+/**
+ * Consume (read and clear) pending deep link data.
+ * Returns the data if present, or null. Subsequent calls return null until new data arrives.
+ */
+export const consumePendingDeepLink = (): DeepLinkAddProviderDetail | null => {
+  const data = pendingDeepLinkData;
+  pendingDeepLinkData = null;
+  return data;
+};
+
+/**
+ * Hook to listen for aionui:// deep link events from main process.
+ * Routes 'add-provider' action to the model settings page.
+ * The pre-fill data is stored in a module-level variable and consumed
+ * by ModelModalContent on mount via consumePendingDeepLink().
+ */
+export const useDeepLink = () => {
+  const navigate = useNavigate();
+
+  const handler = useCallback(
+    (payload: DeepLinkPayload) => {
+      // Support both formats: "add-provider" and "provider/add" (one-api style)
+      if (payload.action === 'add-provider' || payload.action === 'provider/add') {
+        pendingDeepLinkData = {
+          baseUrl: payload.params.baseUrl || payload.params.base_url,
+          apiKey: payload.params.apiKey || payload.params.api_key || payload.params.key,
+          name: payload.params.name,
+          platform: payload.params.platform,
+        };
+
+        // Navigate to model settings page; ModelModalContent will pick up the pending data
+        void navigate('/settings/model');
+      }
+    },
+    [navigate]
+  );
+
+  useEffect(() => {
+    return ipcBridge.deepLink.received.on(handler);
+  }, [handler]);
+};

src/renderer/hooks/useTheme.ts

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useState } from 'react';
 export type Theme = 'light' | 'dark';
 
 const DEFAULT_THEME: Theme = 'light';
+const THEME_CACHE_KEY = '__aionui_theme';
 
 // Initialize theme immediately when module loads
 const initTheme = async () => {
@@ -13,6 +14,11 @@ const initTheme = async () => {
     const initialTheme = theme || DEFAULT_THEME;
     document.documentElement.setAttribute('data-theme', initialTheme);
     document.body.setAttribute('arco-theme', initialTheme);
+    try {
+      localStorage.setItem(THEME_CACHE_KEY, initialTheme);
+    } catch (_e) {
+      /* noop */
+    }
     return initialTheme;
   } catch (error) {
     console.error('Failed to load initial theme:', error);
@@ -35,6 +41,11 @@ const useTheme = (): [Theme, (theme: Theme) => Promise<void>] => {
   const applyTheme = useCallback((newTheme: Theme) => {
     document.documentElement.setAttribute('data-theme', newTheme);
     document.body.setAttribute('arco-theme', newTheme);
+    try {
+      localStorage.setItem(THEME_CACHE_KEY, newTheme);
+    } catch (_e) {
+      /* noop */
+    }
   }, []);
 
   // Set theme with persistence