From d6e611b9fdaac344a86736b00e01cef694f9b498 Mon Sep 17 00:00:00 2001 From: fly6516 Date: Sat, 14 Jun 2025 13:33:26 +0800 Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E9=87=8D=E6=9E=84=20AI?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BC=96=E8=BE=91=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将 AIProblemEditor 组件改为 AIEditorWrapper 组件 - 移除与语言服务器相关的逻辑和状态管理- 简化了代码结构，提高了组件的可复用性和可维护性 - 优化了 AI 代码优化功能，增加了应用优化结果的按钮 -调整了样式，使界面更加直观 --- src/components/ai-optimized-editor.tsx | 346 ++++++++----------------- 1 file changed, 110 insertions(+), 236 deletions(-) diff --git a/src/components/ai-optimized-editor.tsx b/src/components/ai-optimized-editor.tsx index 87d1c2c..68b082d 100644 --- a/src/components/ai-optimized-editor.tsx +++ b/src/components/ai-optimized-editor.tsx @@ -1,250 +1,124 @@ "use client"; -import { useState } from "react"; +import { useCallback, useState } from "react"; import { DiffEditor } from "@monaco-editor/react"; import { optimizeCode } from "@/app/actions/ai-improve"; -import { OptimizeCodeInput } from "@/types/ai-improve"; -import dynamic from "next/dynamic"; -import { highlighter } from "@/lib/shiki"; -import type { editor } from "monaco-editor"; -import { Loading } from "@/components/loading"; -import { shikiToMonaco } from "@shikijs/monaco"; -import { useProblem } from "@/hooks/use-problem"; -import type { Monaco } from "@monaco-editor/react"; -import { useCallback, useEffect, useRef } from "react"; -import { connectToLanguageServer } from "@/lib/language-server"; -import type { MonacoLanguageClient } from "monaco-languageclient"; -import { DefaultEditorOptionConfig } from "@/config/editor-option"; +import type { OptimizeCodeInput } from "@/types/ai-improve"; +import { CoreEditor } from "./core-editor"; // 引入你刚刚的组件 +// import { Loading } from "@/components/loading"; +import type { LanguageServerConfig } from "@/generated/client"; -// 动态导入Monaco Editor -const Editor = dynamic( - async () => { - await import("vscode"); - const monaco = await import("monaco-editor"); +interface AIEditorWrapperProps { + language?: string; + value?: string; + path?: string; + problemId?: string; + languageServerConfigs?: LanguageServerConfig[]; + onChange?: (value: string) => void; + className?: string; +} - self.MonacoEnvironment = { - getWorker(_, label) { - if (label === "json") { - return new Worker( - new URL("monaco-editor/esm/vs/language/json/json.worker.js", import.meta.url) - ); - } - if (label === "css" || label === "scss" || label === "less") { - return new Worker( - new URL("monaco-editor/esm/vs/language/css/css.worker.js", import.meta.url) - ); - } - if (label === "html" || label === "handlebars" || label === "razor") { - return new Worker( - new URL("monaco-editor/esm/vs/language/html/html.worker.js", import.meta.url) - ); - } - if (label === "typescript" || label === "javascript") { - return new Worker( - new URL("monaco-editor/esm/vs/language/typescript/ts.worker.js", import.meta.url) - ); - } - return new Worker( - new URL("monaco-editor/esm/vs/editor/editor.worker.js", import.meta.url) - ); - }, - }; - const { loader } = await import("@monaco-editor/react"); - loader.config({ monaco }); - return (await import("@monaco-editor/react")).Editor; - }, - { - ssr: false, - loading: () => , +export const AIEditorWrapper = ({ + language, + value, + path, + problemId, + languageServerConfigs, + onChange, + // className, + }: AIEditorWrapperProps) => { + const [currentCode, setCurrentCode] = useState(value ?? ""); + const [optimizedCode, setOptimizedCode] = useState(""); + const [isOptimizing, setIsOptimizing] = useState(false); + const [error, setError] = useState(null); + const [showDiff, setShowDiff] = useState(false); + + const handleCodeChange = useCallback((val: string) => { + setCurrentCode(val); + onChange?.(val); + }, [onChange]); + + const handleOptimize = useCallback(async () => { + if (!problemId || !currentCode) return; + setIsOptimizing(true); + setError(null); + + try { + const input: OptimizeCodeInput = { + code: currentCode, + problemId, + }; + const result = await optimizeCode(input); + setOptimizedCode(result.optimizedCode); + setShowDiff(true); + } catch (err) { + setError("AI 优化失败，请稍后重试"); + console.error(err); + } finally { + setIsOptimizing(false); } -); + }, [currentCode, problemId]); -export function AIProblemEditor({ - initialCode = "", - problemId = "", - onCodeChange - }: { - initialCode?: string; - problemId?: string; - onCodeChange?: (code: string) => void; -}) { - const { - editor, - setEditor, - setMarkers, - setWebSocket, - currentLang, - currentPath, - currentTheme, - currentValue, - changeValue, - currentEditorLanguageConfig, - currentLanguageServerConfig, - } = useProblem(); + const handleApplyOptimized = useCallback(() => { + setCurrentCode(optimizedCode); + onChange?.(optimizedCode); + setShowDiff(false); + }, [optimizedCode, onChange]); - const monacoLanguageClientRef = useRef(null); + return ( +
+
+ - // 保持原有AI优化的状态 - const [showDiff, setShowDiff] = useState(false); - const [optimizedCode, setOptimizedCode] = useState(""); - const [isOptimizing, setIsOptimizing] = useState(false); - const [error, setError] = useState(null); - - // 重用useProblem的状态管理 - const currentCode = currentValue || initialCode; - - const handleCodeChange = useCallback((value: string | undefined) => { - if (value !== undefined) { - changeValue(value); - if (onCodeChange) { - onCodeChange(value); - } - } - }, [onCodeChange, changeValue]); - - // 保持原有LSP连接逻辑 - const connectLSP = useCallback(async () => { - if (!(currentLang && editor)) return; - - if (monacoLanguageClientRef.current) { - monacoLanguageClientRef.current.stop(); - monacoLanguageClientRef.current = null; - setWebSocket(null); - } - - if (!currentEditorLanguageConfig || !currentLanguageServerConfig) return; - - try { - const { client: monacoLanguageClient, webSocket } = await connectToLanguageServer( - currentEditorLanguageConfig, - currentLanguageServerConfig - ); - monacoLanguageClientRef.current = monacoLanguageClient; - setWebSocket(webSocket); - } catch (error) { - console.error("Failed to connect to LSP:", error); - } - }, [ - currentEditorLanguageConfig, - currentLang, - currentLanguageServerConfig, - editor, - setWebSocket, - ]); - - useEffect(() => { - connectLSP(); - }, [connectLSP]); - - useEffect(() => { - return () => { - if (monacoLanguageClientRef.current) { - monacoLanguageClientRef.current.stop(); - monacoLanguageClientRef.current = null; - setWebSocket(null); - } - }; - }, [setWebSocket]); - - const handleEditorWillMount = useCallback((monaco: Monaco) => { - shikiToMonaco(highlighter, monaco); - }, []); - - const handleOnMount = useCallback( - async (editor: editor.IStandaloneCodeEditor) => { - setEditor(editor); - await connectLSP(); - }, - [setEditor, connectLSP] - ); - - const handleEditorValidation = useCallback( - (markers: editor.IMarker[]) => { - setMarkers(markers); - }, - [setMarkers] - ); - - const handleOptimizeCode = useCallback(async () => { - if (!currentCode || !problemId) return; - - setIsOptimizing(true); - setError(null); - - try { - const input: OptimizeCodeInput = { - code: currentCode, - problemId - }; - - const result = await optimizeCode(input); - setOptimizedCode(result.optimizedCode); - setShowDiff(true); - } catch (err) { - setError("代码优化失败，请重试"); - console.error(err); - } finally { - setIsOptimizing(false); - } - }, [currentCode, problemId]); - - return ( -
- {/* 保持原有AI优化按钮 */} -
+ {showDiff && ( +
- - {showDiff && ( - - )} -
- - {error && ( -
- {error} -
- )} - -
- {showDiff ? ( - - ) : ( - } - className="h-full w-full" - /> - )} -
+ +
+ )}
- ); -} \ No newline at end of file + + {error && ( +
{error}
+ )} + +
+ {showDiff ? ( + + ) : ( + + )} +
+
+ ); +};