93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
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>
|
|
);
|
|
};
|