子仓库提交

2025-11-10 09:19:56 +08:00
parent 62f92213f7
commit 5feb24e4e2
733 changed files with 141413 additions and 0 deletions
--- a/src/app/(app)/central-config/message/template/components/MessageTemplateTestDialog.tsx
+++ b/src/app/(app)/central-config/message/template/components/MessageTemplateTestDialog.tsx
@@ -0,0 +1,121 @@
+'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>
+  );
+}