aicodeswitch 1.4.1 → 1.5.0

package/src/ui/api/client.ts

@@ -0,0 +1,179 @@
+import type { Vendor, APIService, Route, Rule, RequestLog, AccessLog, ErrorLog, AppConfig, AuthStatus, LoginResponse, Statistics } from '../../types';
+
+interface BackendAPI {
+  // 鉴权相关
+  getAuthStatus: () => Promise<AuthStatus>;
+  login: (authCode: string) => Promise<LoginResponse>;
+
+  // 版本检查
+  checkVersion: () => Promise<{ hasUpdate: boolean; currentVersion: string | null; latestVersion: string | null }>;
+
+  getVendors: () => Promise<Vendor[]>;
+  createVendor: (vendor: Omit<Vendor, 'id' | 'createdAt' | 'updatedAt'>) => Promise<Vendor>;
+  updateVendor: (id: string, vendor: Partial<Vendor>) => Promise<boolean>;
+  deleteVendor: (id: string) => Promise<boolean>;
+
+  getAPIServices: (vendorId?: string) => Promise<APIService[]>;
+  createAPIService: (service: Omit<APIService, 'id' | 'createdAt' | 'updatedAt'>) => Promise<APIService>;
+  updateAPIService: (id: string, service: Partial<APIService>) => Promise<boolean>;
+  deleteAPIService: (id: string) => Promise<boolean>;
+
+  getRoutes: () => Promise<Route[]>;
+  createRoute: (group: Omit<Route, 'id' | 'createdAt' | 'updatedAt'>) => Promise<Route>;
+  updateRoute: (id: string, group: Partial<Route>) => Promise<boolean>;
+  deleteRoute: (id: string) => Promise<boolean>;
+  activateRoute: (id: string) => Promise<boolean>;
+  deactivateRoute: (id: string) => Promise<boolean>;
+
+  getRules: (routeId?: string) => Promise<Rule[]>;
+  createRule: (route: Omit<Rule, 'id' | 'createdAt' | 'updatedAt'>) => Promise<Rule>;
+  updateRule: (id: string, route: Partial<Rule>) => Promise<boolean>;
+  deleteRule: (id: string) => Promise<boolean>;
+
+  getLogs: (limit: number, offset: number) => Promise<RequestLog[]>;
+  clearLogs: () => Promise<boolean>;
+
+  getAccessLogs: (limit: number, offset: number) => Promise<AccessLog[]>;
+  clearAccessLogs: () => Promise<boolean>;
+
+  getErrorLogs: (limit: number, offset: number) => Promise<ErrorLog[]>;
+  clearErrorLogs: () => Promise<boolean>;
+
+  getConfig: () => Promise<AppConfig>;
+  updateConfig: (config: AppConfig) => Promise<boolean>;
+
+  exportData: (password: string) => Promise<string>;
+  importData: (encryptedData: string, password: string) => Promise<boolean>;
+
+  writeClaudeConfig: () => Promise<boolean>;
+  writeCodexConfig: () => Promise<boolean>;
+  restoreClaudeConfig: () => Promise<boolean>;
+  restoreCodexConfig: () => Promise<boolean>;
+  checkClaudeBackup: () => Promise<{ exists: boolean }>;
+  checkCodexBackup: () => Promise<{ exists: boolean }>;
+
+  getStatistics: (days?: number) => Promise<Statistics>;
+}
+
+const buildUrl = (
+  path: string,
+  query?: Record<string, string | number | undefined>
+): string => {
+  if (!query) {
+    return path;
+  }
+  const params = new URLSearchParams();
+  Object.entries(query).forEach(([key, value]) => {
+    if (value !== undefined && value !== null && value !== '') {
+      params.set(key, String(value));
+    }
+  });
+  const queryString = params.toString();
+  return queryString ? `${path}?${queryString}` : path;
+};
+
+const requestJson = async <T>(path: string, options: RequestInit = {}): Promise<T> => {
+  // 从 localStorage 读取 token
+  const token = localStorage.getItem('auth_token');
+
+  const response = await fetch(path, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...(options.headers || {}),
+    },
+  });
+
+  if (!response.ok) {
+    // 如果是 401,清除本地 token 并抛出特殊错误
+    if (response.status === 401) {
+      localStorage.removeItem('auth_token');
+      const message = await response.text();
+      const error = new Error(message || response.statusText) as Error & { status: number };
+      error.status = 401;
+      throw error;
+    }
+
+    const message = await response.text();
+    throw new Error(message || response.statusText);
+  }
+
+  if (response.status === 204) {
+    return undefined as T;
+  }
+
+  const contentType = response.headers.get('content-type') || '';
+  if (contentType.includes('application/json')) {
+    return response.json() as Promise<T>;
+  }
+  return response.text() as Promise<T>;
+};
+
+export const api: BackendAPI = {
+  // 鉴权相关
+  getAuthStatus: () => requestJson(buildUrl('/api/auth/status')),
+  login: (authCode) => requestJson(buildUrl('/api/auth/login'), {
+    method: 'POST',
+    body: JSON.stringify({ authCode })
+  }),
+
+  // 版本检查
+  checkVersion: () => requestJson(buildUrl('/api/version/check')),
+
+  getVendors: () => requestJson(buildUrl('/api/vendors')),
+  createVendor: (vendor) => requestJson(buildUrl('/api/vendors'), { method: 'POST', body: JSON.stringify(vendor) }),
+  updateVendor: (id, vendor) => requestJson(buildUrl(`/api/vendors/${id}`), { method: 'PUT', body: JSON.stringify(vendor) }),
+  deleteVendor: (id) => requestJson(buildUrl(`/api/vendors/${id}`), { method: 'DELETE' }),
+
+  getAPIServices: (vendorId) => requestJson(buildUrl('/api/services', vendorId ? { vendorId } : undefined)),
+  createAPIService: (service) => requestJson(buildUrl('/api/services'), { method: 'POST', body: JSON.stringify(service) }),
+  updateAPIService: (id, service) => requestJson(buildUrl(`/api/services/${id}`), { method: 'PUT', body: JSON.stringify(service) }),
+  deleteAPIService: (id) => requestJson(buildUrl(`/api/services/${id}`), { method: 'DELETE' }),
+
+  getRoutes: () => requestJson(buildUrl('/api/routes')),
+  createRoute: (group) => requestJson(buildUrl('/api/routes'), { method: 'POST', body: JSON.stringify(group) }),
+  updateRoute: (id, group) => requestJson(buildUrl(`/api/routes/${id}`), { method: 'PUT', body: JSON.stringify(group) }),
+  deleteRoute: (id) => requestJson(buildUrl(`/api/routes/${id}`), { method: 'DELETE' }),
+  activateRoute: (id) => requestJson(buildUrl(`/api/routes/${id}/activate`), { method: 'POST' }),
+  deactivateRoute: (id) => requestJson(buildUrl(`/api/routes/${id}/deactivate`), { method: 'POST' }),
+
+  getRules: (routeId) => requestJson(buildUrl('/api/rules', routeId ? { routeId } : undefined)),
+  createRule: (route) => requestJson(buildUrl('/api/rules'), { method: 'POST', body: JSON.stringify(route) }),
+  updateRule: (id, route) => requestJson(buildUrl(`/api/rules/${id}`), { method: 'PUT', body: JSON.stringify(route) }),
+  deleteRule: (id) => requestJson(buildUrl(`/api/rules/${id}`), { method: 'DELETE' }),
+
+  getLogs: (limit, offset) => requestJson(buildUrl('/api/logs', { limit, offset })),
+  clearLogs: () => requestJson(buildUrl('/api/logs'), { method: 'DELETE' }),
+
+  getAccessLogs: (limit, offset) => requestJson(buildUrl('/api/access-logs', { limit, offset })),
+  clearAccessLogs: () => requestJson(buildUrl('/api/access-logs'), { method: 'DELETE' }),
+
+  getErrorLogs: (limit, offset) => requestJson(buildUrl('/api/error-logs', { limit, offset })),
+  clearErrorLogs: () => requestJson(buildUrl('/api/error-logs'), { method: 'DELETE' }),
+
+  getConfig: () => requestJson(buildUrl('/api/config')),
+  updateConfig: (config) => requestJson(buildUrl('/api/config'), { method: 'PUT', body: JSON.stringify(config) }),
+
+  exportData: async (password) => {
+    const result = await requestJson<{ data: string }>(
+      buildUrl('/api/export'),
+      { method: 'POST', body: JSON.stringify({ password }) }
+    );
+    return result.data;
+  },
+
+  importData: (encryptedData, password) => requestJson(buildUrl('/api/import'), {
+    method: 'POST',
+    body: JSON.stringify({ encryptedData, password }),
+  }),
+
+  writeClaudeConfig: () => requestJson(buildUrl('/api/write-config/claude'), { method: 'POST' }),
+  writeCodexConfig: () => requestJson(buildUrl('/api/write-config/codex'), { method: 'POST' }),
+  restoreClaudeConfig: () => requestJson(buildUrl('/api/restore-config/claude'), { method: 'POST' }),
+  restoreCodexConfig: () => requestJson(buildUrl('/api/restore-config/codex'), { method: 'POST' }),
+  checkClaudeBackup: () => requestJson(buildUrl('/api/check-backup/claude')),
+  checkCodexBackup: () => requestJson(buildUrl('/api/check-backup/codex')),
+
+  getStatistics: (days) => requestJson(buildUrl('/api/statistics', days ? { days } : undefined)),
+};

package/src/ui/components/JSONViewer.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+
+interface JSONViewerProps {
+  data: string | Record<string, any> | any[];
+  title?: string;
+  collapsed?: boolean;
+}
+
+const JSONViewer: React.FC<JSONViewerProps> = ({ data, title, collapsed = false }) => {
+  const [isExpanded, setIsExpanded] = useState(!collapsed);
+  const [copySuccess, setCopySuccess] = useState(false);
+
+  // 格式化 JSON 数据
+  const formatJSON = (input: string | Record<string, any> | any[]): string => {
+    try {
+      let jsonData: any;
+      if (typeof input === 'string') {
+        jsonData = JSON.parse(input);
+      } else {
+        jsonData = input;
+      }
+      return JSON.stringify(jsonData, null, 2);
+    } catch (error) {
+      return typeof input === 'string' ? input : String(input);
+    }
+  };
+
+  // 复制到剪贴板
+  const handleCopy = () => {
+    const formatted = formatJSON(data);
+    navigator.clipboard.writeText(formatted)
+      .then(() => {
+        setCopySuccess(true);
+        setTimeout(() => setCopySuccess(false), 2000);
+      })
+      .catch((error) => {
+        console.error('Failed to copy JSON:', error);
+      });
+  };
+
+  const formattedJSON = formatJSON(data);
+
+  return (
+    <div className="json-viewer">
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
+        {title && (
+          <h4 style={{ margin: 0, fontSize: '14px', color: 'var(--text-primary)' }}>
+            {title}
+          </h4>
+        )}
+        <div style={{ display: 'flex', gap: '8px' }}>
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="btn btn-sm btn-secondary"
+            style={{ fontSize: '12px', padding: '2px 8px' }}
+          >
+            {isExpanded ? '折叠' : '展开'}
+          </button>
+          <button
+            onClick={handleCopy}
+            className="btn btn-sm btn-primary"
+            style={{ fontSize: '12px', padding: '2px 8px' }}
+          >
+            {copySuccess ? '已复制' : '复制'}
+          </button>
+        </div>
+      </div>
+      {isExpanded && (
+        <pre style={{
+          background: 'var(--bg-code)',
+          border: '1px solid var(--border-primary)',
+          borderRadius: '8px',
+          padding: '12px',
+          overflowX: 'auto',
+          fontSize: '12px',
+          lineHeight: '1.4',
+          color: 'var(--text-primary)',
+          maxHeight: '400px',
+          overflowY: 'auto',
+          margin: 0
+        }}>
+          <code>{formattedJSON}</code>
+        </pre>
+      )}
+    </div>
+  );
+};
+
+export default JSONViewer;

package/src/ui/constants/index.ts

@@ -0,0 +1,4 @@
+export const TARGET_TYPE = {
+  'claude-code': 'Claude Code',
+  'codex': 'Codex',
+};

package/src/ui/docs/vendors-recommand.md

@@ -0,0 +1,13 @@
+#### 🚀 智谱 GLM Coding Plan
+
+> 价格便宜，国内速度快，支持多工具（Claude Code等 20+ 大编程工具），而且其中的GLM-4.7是目前国内最强编程模型。适合对模型有一定要求，同时又无法获取国外模型的朋友入手。
+>
+> 链接：[https://www.bigmodel.cn/glm-coding](https://www.bigmodel.cn/glm-coding?ic=5AH7ATEZSC)
+
+
+#### 🗿 AI Code With
+
+> 支持Claude、GPT、Gemni三大系列模型，可接入Claude Code、Codex，经实测，非常稳定，速度快，但是没有包月套餐，只能使用tokens流量，适合追求稳定的朋友。
+>
+> 链接：[https://aicodewith.com/](https://aicodewith.com/login?tab=register&invitation=QCA74W)
+

package/src/ui/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles/index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);