127 lines
4.1 KiB
TypeScript
127 lines
4.1 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* AI 帮我写 — 首页轻量模态框
|
|
*
|
|
* 用户输入创意/关键词/大纲，直接生成结果并回填首页主输入框
|
|
*/
|
|
|
|
import { useState, useCallback } from 'react'
|
|
import { AppIcon } from '@/components/ui/icons'
|
|
|
|
interface AiWriteModalProps {
|
|
open: boolean
|
|
loading: boolean
|
|
onClose: () => void
|
|
onStart: (prompt: string) => void
|
|
t: (key: string) => string
|
|
}
|
|
|
|
export default function AiWriteModal({
|
|
open,
|
|
loading,
|
|
onClose,
|
|
onStart,
|
|
t,
|
|
}: AiWriteModalProps) {
|
|
const [promptText, setPromptText] = useState('')
|
|
|
|
const handleClose = useCallback(() => {
|
|
if (loading) return
|
|
setPromptText('')
|
|
onClose()
|
|
}, [loading, onClose])
|
|
|
|
const handleStart = useCallback(() => {
|
|
if (!promptText.trim() || loading) return
|
|
onStart(promptText.trim())
|
|
}, [promptText, loading, onStart])
|
|
|
|
if (!open) return null
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 glass-overlay flex items-center justify-center z-50 backdrop-blur-sm"
|
|
onClick={handleClose}
|
|
>
|
|
<div
|
|
className="w-full max-w-lg mx-4 relative"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* 模态框容器 */}
|
|
<div className="glass-surface-modal rounded-2xl p-6 space-y-5">
|
|
{/* 头部 */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0"
|
|
style={{ background: 'linear-gradient(135deg, rgba(59,130,246,0.15), rgba(139,92,246,0.15))' }}
|
|
>
|
|
<AppIcon name="sparkles" className="w-5 h-5 text-[#7c3aed]" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-bold text-[var(--glass-text-primary)]">
|
|
{t('modalTitle')}
|
|
</h3>
|
|
<p className="text-xs text-[var(--glass-text-tertiary)]">
|
|
{t('modalSubtitle')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={handleClose}
|
|
className="glass-icon-btn-sm"
|
|
disabled={loading}
|
|
>
|
|
<AppIcon name="close" className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* 输入区域 */}
|
|
<div>
|
|
<label className="text-sm font-medium text-[var(--glass-text-secondary)] mb-2 block">
|
|
{t('inputLabel')}
|
|
</label>
|
|
<textarea
|
|
value={promptText}
|
|
onChange={(e) => setPromptText(e.target.value)}
|
|
placeholder={t('placeholder')}
|
|
className="glass-textarea-base app-scrollbar h-36 px-4 py-3 text-sm resize-none placeholder:text-[var(--glass-text-tertiary)]"
|
|
disabled={loading}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
{/* 提示文案 */}
|
|
<div
|
|
className="px-3 py-2 rounded-lg text-xs text-[var(--glass-text-tertiary)] leading-relaxed"
|
|
style={{ background: 'linear-gradient(135deg, rgba(59,130,246,0.06), rgba(139,92,246,0.06))' }}
|
|
>
|
|
{t('hint')}
|
|
</div>
|
|
|
|
{/* 按钮区域 */}
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={handleClose}
|
|
disabled={loading}
|
|
className="flex-1 py-2.5 text-sm text-[var(--glass-text-tertiary)] hover:text-[var(--glass-text-secondary)] transition-colors rounded-xl"
|
|
>
|
|
{t('cancel')}
|
|
</button>
|
|
<button
|
|
onClick={handleStart}
|
|
disabled={!promptText.trim() || loading}
|
|
className="flex-1 py-3 rounded-xl text-white font-semibold text-sm flex items-center justify-center gap-2 transition-all hover:opacity-90 active:scale-[0.98] disabled:opacity-50"
|
|
style={{ background: 'linear-gradient(135deg, #3b82f6, #7c3aed)' }}
|
|
>
|
|
<AppIcon name="sparkles" className="w-4 h-4" />
|
|
<span>{loading ? '...' : t('startAiWrite')}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|