feat: 使用DiffEditor替换代码编辑器,添加AI生成代码功能

This commit is contained in:
ngc2207 2024-11-12 20:27:44 +08:00
parent 13d40854ca
commit cfe3ca89d2

View File

@ -3,7 +3,7 @@
import { useState } from "react"; import { useState } from "react";
import * as actions from "@/actions"; import * as actions from "@/actions";
import { Snippet } from "@prisma/client"; import { Snippet } from "@prisma/client";
import { Editor } from "@monaco-editor/react"; import { DiffEditor, Editor } from "@monaco-editor/react";
interface SnippetEditFormProps { interface SnippetEditFormProps {
snippet: Snippet; snippet: Snippet;
@ -11,6 +11,8 @@ interface SnippetEditFormProps {
export default function SnippetEditForm({ snippet }: SnippetEditFormProps) { export default function SnippetEditForm({ snippet }: SnippetEditFormProps) {
const [code, setCode] = useState(snippet.code); const [code, setCode] = useState(snippet.code);
const [originalCode, setOriginalCode] = useState(snippet.code);
const [modifiedCode, setModifiedCode] = useState(snippet.code);
const handleEditorChange = (value: string = "") => { const handleEditorChange = (value: string = "") => {
setCode(value); setCode(value);
@ -18,21 +20,44 @@ export default function SnippetEditForm({ snippet }: SnippetEditFormProps) {
const editSnippetAction = actions.editSnippet.bind(null, snippet.id, code); const editSnippetAction = actions.editSnippet.bind(null, snippet.id, code);
const handleAskAI = () => {
setModifiedCode("AI generated code");
};
return ( return (
<div> <div className="flex flex-col">
<Editor {/* <Editor
height="40vh" height="40vh"
theme="vs-light" theme="vs-light"
language="c" language="c"
defaultValue={snippet.code} defaultValue={snippet.code}
options={{ minimap: { enabled: false } }} options={{ minimap: { enabled: false } }}
onChange={handleEditorChange} onChange={handleEditorChange}
/> */}
<DiffEditor
height="40vh"
theme="vs-light"
language="c"
original={originalCode}
modified={modifiedCode}
options={{ minimap: { enabled: false } }}
/> />
<form action={editSnippetAction} className="flex justify-end pr-4"> <div className="flex items-center justify-end gap-4">
<button type="submit" className="p-2 border rounded"> <button
type="submit"
className="p-2 border rounded"
onClick={handleAskAI}
>
Ask AI
</button>
<button
type="submit"
className="p-2 border rounded"
onClick={editSnippetAction}
>
Save Save
</button> </button>
</form> </div>
</div> </div>
); );
} }