feat: add JSON editor for config

- Add a JSON editor using Monaco Editor to allow raw editing of the configuration. - The editor is presented as a full-screen dialog that slides up from the bottom. - Includes 'Save' and 'Save and Restart' functionality with internationalized labels and toast notifications for success/failure. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-30 14:20:20 +08:00
parent ad17b27c3d
commit 7faf20e0c8
7 changed files with 283 additions and 2 deletions
--- a/ui/package.json
+++ b/ui/package.json
@@ -10,6 +10,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
    "@radix-ui/react-dialog": "^1.1.14",
    "@radix-ui/react-label": "^2.1.7",
    "@radix-ui/react-popover": "^1.1.14",
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:

  .:
    dependencies:
+      '@monaco-editor/react':
+        specifier: ^4.7.0
+        version: 4.7.0(monaco-editor@0.52.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
      '@radix-ui/react-dialog':
        specifier: ^1.1.14
        version: 1.1.14(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -461,6 +464,16 @@ packages:
  '@jridgewell/trace-mapping@0.3.29':
    resolution: {integrity: sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==}

+  '@monaco-editor/loader@1.5.0':
+    resolution: {integrity: sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==}
+
+  '@monaco-editor/react@4.7.0':
+    resolution: {integrity: sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==}
+    peerDependencies:
+      monaco-editor: '>= 0.25.0 < 1'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
  '@nodelib/fs.scandir@2.1.5':
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
    engines: {node: '>= 8'}
@@ -1499,6 +1512,9 @@ packages:
    engines: {node: '>=10'}
    hasBin: true

+  monaco-editor@0.52.2:
+    resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
+
  ms@2.1.3:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}

@@ -1689,6 +1705,9 @@ packages:
    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
    engines: {node: '>=0.10.0'}

+  state-local@1.0.7:
+    resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
+
  strip-json-comments@3.1.1:
    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
    engines: {node: '>=8'}
@@ -2153,6 +2172,17 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.4

+  '@monaco-editor/loader@1.5.0':
+    dependencies:
+      state-local: 1.0.7
+
+  '@monaco-editor/react@4.7.0(monaco-editor@0.52.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@monaco-editor/loader': 1.5.0
+      monaco-editor: 0.52.2
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
  '@nodelib/fs.scandir@2.1.5':
    dependencies:
      '@nodelib/fs.stat': 2.0.5
@@ -3135,6 +3165,8 @@ snapshots:

  mkdirp@3.0.1: {}

+  monaco-editor@0.52.2: {}
+
  ms@2.1.3: {}

  nanoid@3.3.11: {}
@@ -3300,6 +3332,8 @@ snapshots:

  source-map-js@1.2.1: {}

+  state-local@1.0.7: {}
+
  strip-json-comments@3.1.1: {}

  supports-color@7.2.0:
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -5,10 +5,11 @@ import { SettingsDialog } from "@/components/SettingsDialog";
 import { Transformers } from "@/components/Transformers";
 import { Providers } from "@/components/Providers";
 import { Router } from "@/components/Router";
+import { JsonEditor } from "@/components/JsonEditor";
 import { Button } from "@/components/ui/button";
 import { useConfig } from "@/components/ConfigProvider";
 import { api } from "@/lib/api";
-import { Settings, Languages, Save, RefreshCw } from "lucide-react";
+import { Settings, Languages, Save, RefreshCw, FileJson } from "lucide-react";
 import {
  Popover,
  PopoverContent,
@@ -22,6 +23,7 @@ function App() {
  const navigate = useNavigate();
  const { config, error } = useConfig();
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [isJsonEditorOpen, setIsJsonEditorOpen] = useState(false);
  const [isCheckingAuth, setIsCheckingAuth] = useState(true);
  const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' | 'warning' } | null>(null);

@@ -164,6 +166,9 @@ function App() {
          <Button variant="ghost" size="icon" onClick={() => setIsSettingsOpen(true)} className="transition-all-ease hover:scale-110">
            <Settings className="h-5 w-5" />
          </Button>
+          <Button variant="ghost" size="icon" onClick={() => setIsJsonEditorOpen(true)} className="transition-all-ease hover:scale-110">
+            <FileJson className="h-5 w-5" />
+          </Button>
          <Popover>
            <PopoverTrigger asChild>
              <Button variant="ghost" size="icon" className="transition-all-ease hover:scale-110">
@@ -213,6 +218,11 @@ function App() {
        </div>
      </main>
      <SettingsDialog isOpen={isSettingsOpen} onOpenChange={setIsSettingsOpen} />
+      <JsonEditor 
+        open={isJsonEditorOpen} 
+        onOpenChange={setIsJsonEditorOpen} 
+        showToast={(message, type) => setToast({ message, type })} 
+      />
      {toast && (
        <Toast 
          message={toast.message} 
--- a/ui/src/components/JsonEditor.tsx
+++ b/ui/src/components/JsonEditor.tsx
@@ -0,0 +1,220 @@
+import { useState, useEffect, useRef } from 'react';
+import Editor from '@monaco-editor/react';
+import { Button } from '@/components/ui/button';
+import { useConfig } from '@/components/ConfigProvider';
+import { api } from '@/lib/api';
+import { useTranslation } from 'react-i18next';
+import { Save, X, RefreshCw } from 'lucide-react';
+
+interface JsonEditorProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  showToast?: (message: string, type: 'success' | 'error' | 'warning') => void;
+}
+
+export function JsonEditor({ open, onOpenChange, showToast }: JsonEditorProps) {
+  const { t } = useTranslation();
+  const { config } = useConfig();
+  const [jsonValue, setJsonValue] = useState<string>('');
+  const [isSaving, setIsSaving] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (config && open) {
+      setJsonValue(JSON.stringify(config, null, 2));
+    }
+  }, [config, open]);
+
+  // Handle open/close animations
+  useEffect(() => {
+    if (open) {
+      setIsVisible(true);
+      // Trigger the animation after a small delay to ensure the element is rendered
+      requestAnimationFrame(() => {
+        setIsAnimating(true);
+      });
+    } else {
+      setIsAnimating(false);
+      // Wait for the animation to complete before hiding
+      const timer = setTimeout(() => {
+        setIsVisible(false);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+
+  const handleSaveResponse = (response: unknown, successMessage: string, errorMessage: string) => {
+    // 根据响应信息进行提示
+    if (response && typeof response === 'object' && 'success' in response) {
+      const apiResponse = response as { success: boolean; message?: string };
+      if (apiResponse.success) {
+        if (showToast) {
+          showToast(apiResponse.message || successMessage, 'success');
+        }
+        return true;
+      } else {
+        if (showToast) {
+          showToast(apiResponse.message || errorMessage, 'error');
+        }
+        return false;
+      }
+    } else {
+      // 默认成功提示
+      if (showToast) {
+        showToast(successMessage, 'success');
+      }
+      return true;
+    }
+  };
+
+  const handleSave = async () => {
+    if (!jsonValue) return;
+    
+    try {
+      setIsSaving(true);
+      const parsedConfig = JSON.parse(jsonValue);
+      const response = await api.updateConfig(parsedConfig);
+      
+      const success = handleSaveResponse(
+        response,
+        t('app.config_saved_success'),
+        t('app.config_saved_failed')
+      );
+      
+      if (success) {
+        onOpenChange(false);
+      }
+    } catch (error) {
+      console.error('Failed to save config:', error);
+      if (showToast) {
+        showToast(t('app.config_saved_failed') + ': ' + (error as Error).message, 'error');
+      }
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleSaveAndRestart = async () => {
+    if (!jsonValue) return;
+    
+    try {
+      setIsSaving(true);
+      const parsedConfig = JSON.parse(jsonValue);
+      
+      // Save config first
+      const saveResponse = await api.updateConfig(parsedConfig);
+      const saveSuccessful = handleSaveResponse(
+        saveResponse,
+        t('app.config_saved_success'),
+        t('app.config_saved_failed')
+      );
+      
+      // Only restart if save was successful
+      if (saveSuccessful) {
+        // Restart service
+        const restartResponse = await api.restartService();
+        
+        handleSaveResponse(
+          restartResponse,
+          t('app.config_saved_restart_success'),
+          t('app.config_saved_restart_failed')
+        );
+        
+        onOpenChange(false);
+      }
+    } catch (error) {
+      console.error('Failed to save config and restart:', error);
+      if (showToast) {
+        showToast(t('app.config_saved_restart_failed') + ': ' + (error as Error).message, 'error');
+      }
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (!isVisible && !open) {
+    return null;
+  }
+
+  return (
+    <>
+      {(isVisible || open) && (
+        <div 
+          className={`fixed inset-0 z-50 transition-all duration-300 ease-out ${
+            isAnimating && open ? 'bg-black/50 opacity-100' : 'bg-black/0 opacity-0 pointer-events-none'
+          }`}
+          onClick={() => onOpenChange(false)}
+        />
+      )}
+      
+      <div 
+        ref={containerRef}
+        className={`fixed bottom-0 left-0 right-0 z-50 flex flex-col bg-white shadow-2xl transition-all duration-300 ease-out transform ${
+          isAnimating && open ? 'translate-y-0' : 'translate-y-full'
+        }`}
+        style={{ 
+          height: '100vh',
+          maxHeight: '100vh'
+        }}
+      >
+        <div className="flex items-center justify-between border-b p-4">
+          <h2 className="text-lg font-semibold">{t('json_editor.title')}</h2>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onOpenChange(false)}
+              disabled={isSaving}
+            >
+              <X className="h-4 w-4 mr-2" />
+              {t('json_editor.cancel')}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleSave}
+              disabled={isSaving}
+            >
+              <Save className="h-4 w-4 mr-2" />
+              {isSaving ? t('json_editor.saving') : t('json_editor.save')}
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              onClick={handleSaveAndRestart}
+              disabled={isSaving}
+            >
+              <RefreshCw className="h-4 w-4 mr-2" />
+              {isSaving ? t('json_editor.saving') : t('json_editor.save_and_restart')}
+            </Button>
+          </div>
+        </div>
+        
+        <div className="flex-1 min-h-0 bg-gray-50">
+          <Editor
+            height="100%"
+            defaultLanguage="json"
+            value={jsonValue}
+            onChange={(value) => setJsonValue(value || '')}
+            theme="vs"
+            options={{
+              minimap: { enabled: true },
+              fontSize: 14,
+              scrollBeyondLastLine: false,
+              automaticLayout: true,
+              wordWrap: 'on',
+              formatOnPaste: true,
+              formatOnType: true,
+              suggest: {
+                showKeywords: true,
+                showSnippets: true,
+              },
+            }}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -87,5 +87,13 @@
    "selectModel": "Select a model...",
    "searchModel": "Search model...",
    "noModelFound": "No model found."
+  },
+  "json_editor": {
+    "title": "JSON Editor",
+    "save": "Save",
+    "saving": "Saving...",
+    "cancel": "Cancel",
+    "save_failed": "Failed to save config",
+    "save_and_restart": "Save & Restart"
  }
 }
--- a/ui/src/locales/zh.json
+++ b/ui/src/locales/zh.json
@@ -87,5 +87,13 @@
    "selectModel": "选择一个模型...",
    "searchModel": "搜索模型...",
    "noModelFound": "未找到模型."
+  },
+  "json_editor": {
+    "title": "JSON 编辑器",
+    "save": "保存",
+    "saving": "保存中...",
+    "cancel": "取消",
+    "save_failed": "配置保存失败",
+    "save_and_restart": "保存并重启"
  }
 }
--- a/ui/tsconfig.tsbuildinfo
+++ b/ui/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/i18n.ts","./src/main.tsx","./src/routes.tsx","./src/vite-env.d.ts","./src/components/configprovider.tsx","./src/components/login.tsx","./src/components/providerlist.tsx","./src/components/providers.tsx","./src/components/router.tsx","./src/components/settingsdialog.tsx","./src/components/transformerlist.tsx","./src/components/transformers.tsx","./src/components/ui/badge.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/combo-input.tsx","./src/components/ui/combobox.tsx","./src/components/ui/command.tsx","./src/components/ui/dialog.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/multi-combobox.tsx","./src/components/ui/popover.tsx","./src/components/ui/switch.tsx","./src/components/ui/toast.tsx","./src/lib/api.ts","./src/lib/utils.ts"],"version":"5.8.3"}
+{"root":["./src/app.tsx","./src/i18n.ts","./src/main.tsx","./src/routes.tsx","./src/vite-env.d.ts","./src/components/configprovider.tsx","./src/components/jsoneditor.tsx","./src/components/login.tsx","./src/components/providerlist.tsx","./src/components/providers.tsx","./src/components/router.tsx","./src/components/settingsdialog.tsx","./src/components/transformerlist.tsx","./src/components/transformers.tsx","./src/components/ui/badge.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/combo-input.tsx","./src/components/ui/combobox.tsx","./src/components/ui/command.tsx","./src/components/ui/dialog.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/multi-combobox.tsx","./src/components/ui/popover.tsx","./src/components/ui/switch.tsx","./src/components/ui/toast.tsx","./src/lib/api.ts","./src/lib/utils.ts"],"version":"5.8.3"}