🎉 first commit
This commit is contained in:
92
app/components/editor/editors/TextEditor.tsx
Normal file
92
app/components/editor/editors/TextEditor.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import React, { useState } from 'react';
|
||||
import loadingSvg from '../icons/loading.svg?raw';
|
||||
import sendSvg from '../icons/send.svg?raw';
|
||||
import type { EditorProps } from './EditorProps';
|
||||
|
||||
/**
|
||||
* 文本编辑器组件,用于向 AI 发送修改请求
|
||||
*/
|
||||
export const TextEditor: React.FC<EditorProps> = ({ element, onClose, onSendPrompt }) => {
|
||||
const [prompt, setPrompt] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleSendPrompt = async () => {
|
||||
if (!prompt.trim()) {
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await onSendPrompt(prompt, element);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('AI 请求失败:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSendPrompt();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
border: '1px solid #e2e8f0',
|
||||
borderRadius: '8px',
|
||||
alignItems: 'end',
|
||||
}}
|
||||
>
|
||||
<textarea
|
||||
style={{
|
||||
width: '100%',
|
||||
border: 'none',
|
||||
outline: 'none',
|
||||
borderRadius: '8px',
|
||||
minHeight: '80px',
|
||||
resize: 'none',
|
||||
fontSize: '14px',
|
||||
lineHeight: '1.5',
|
||||
padding: '12px',
|
||||
paddingRight: '2px',
|
||||
}}
|
||||
value={prompt}
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="描述想修改的逻辑或样式..."
|
||||
disabled={isLoading}
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={handleSendPrompt}
|
||||
disabled={isLoading || !prompt.trim()}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: isLoading || !prompt.trim() ? 'default' : 'pointer',
|
||||
color: isLoading || !prompt.trim() ? '#cbd5e1' : '#3b82f6',
|
||||
padding: '4px',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
opacity: isLoading ? 0.7 : 1,
|
||||
paddingRight: '12px',
|
||||
paddingBottom: '12px',
|
||||
}}
|
||||
>
|
||||
{isLoading ? (
|
||||
<div dangerouslySetInnerHTML={{ __html: loadingSvg }} />
|
||||
) : (
|
||||
<div dangerouslySetInnerHTML={{ __html: sendSvg }} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user