121 lines
3.7 KiB
TypeScript
121 lines
3.7 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { MessageTemplate } from '../types';
|
||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Label } from '@/components/ui/label';
|
||
import { Send } from 'lucide-react';
|
||
|
||
interface MessageTemplateTestDialogProps {
|
||
open: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
testTemplate: MessageTemplate | null;
|
||
onSendTest: (testData: TestData) => void;
|
||
}
|
||
|
||
interface TestData {
|
||
recipient: string;
|
||
variables: Record<string, string>;
|
||
}
|
||
|
||
export function MessageTemplateTestDialog({
|
||
open,
|
||
onOpenChange,
|
||
testTemplate,
|
||
onSendTest
|
||
}: MessageTemplateTestDialogProps) {
|
||
const [testData, setTestData] = useState<TestData>({
|
||
recipient: '',
|
||
variables: {},
|
||
});
|
||
|
||
// 使用useEffect来管理测试数据的状态
|
||
useEffect(() => {
|
||
if (testTemplate && open) {
|
||
const varsObj: Record<string, string> = {};
|
||
testTemplate.variables.forEach(v => {
|
||
varsObj[v] = '';
|
||
});
|
||
setTestData({
|
||
recipient: '',
|
||
variables: varsObj,
|
||
});
|
||
}
|
||
}, [testTemplate, open]);
|
||
|
||
const handleSendTest = () => {
|
||
onSendTest(testData);
|
||
};
|
||
|
||
const handleVariableChange = (variable: string, value: string) => {
|
||
setTestData({
|
||
...testData,
|
||
variables: { ...testData.variables, [variable]: value }
|
||
});
|
||
};
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>
|
||
<div className="flex items-center gap-2">
|
||
<Send className="w-5 h-5 text-green-600" />
|
||
发送测试消息
|
||
</div>
|
||
</DialogTitle>
|
||
<DialogDescription className="sr-only">
|
||
测试发送消息模版
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
{testTemplate && (
|
||
<div className="space-y-4">
|
||
<div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
|
||
<p className="text-sm text-blue-900">
|
||
模板：{testTemplate.name}
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<Label>接收人 *</Label>
|
||
<Input
|
||
value={testData.recipient}
|
||
onChange={(e) => setTestData({ ...testData, recipient: e.target.value })}
|
||
placeholder={
|
||
testTemplate.type === 'sms' ? '手机号' :
|
||
testTemplate.type === 'email' ? '邮箱地址' :
|
||
'用户ID'
|
||
}
|
||
/>
|
||
</div>
|
||
{testTemplate.variables.length > 0 && (
|
||
<div className="space-y-3">
|
||
<Label>填写变量值</Label>
|
||
{testTemplate.variables.map(variable => (
|
||
<div key={variable}>
|
||
<Label className="text-sm text-muted-foreground">{variable}</Label>
|
||
<Input
|
||
value={testData.variables[variable] || ''}
|
||
onChange={(e) => handleVariableChange(variable, e.target.value)}
|
||
placeholder={`输入 ${variable} 的值`}
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||
取消
|
||
</Button>
|
||
<Button onClick={handleSendTest}>
|
||
<Send className="w-4 h-4 mr-2" />
|
||
发送测试
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
} |