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