Skip to content

Commit 46f8304

Browse files
makerjackieclaude
makerjackie
and
claude
committed
feat(events): optimize event communication email template and UI
- Redesign email template with clean, content-focused layout - Remove decorative buttons, use inline text links instead - Reorder email structure: title → content → event info → footer - Add "周周黑客松 HackathonWeekly" branding - Change contact section to simple inline organizer email link - Optimize mobile responsiveness for communications UI - Enable real email sending in dev environment - Update terminology from "提醒" to "通知" - Format email subject as "【活动名称】通知主题" Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 1c35537 commit 46f8304

7 files changed

Lines changed: 225 additions & 205 deletions

File tree

‎apps/web/src/modules/account/events/components/EventCommunicationsPage.tsx‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -370,16 +370,16 @@ export default function EventCommunicationsPage({
370370
);
371371

372372
return (
373-
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
373+
<div className="grid grid-cols-2 gap-3 lg:grid-cols-4 lg:gap-4">
374374
<Card>
375-
<CardContent className="p-4">
376-
<div className="flex items-center space-x-2">
377-
<Send className="h-5 w-5 text-blue-500" />
378-
<div>
379-
<div className="text-2xl font-bold text-blue-600">
375+
<CardContent className="p-3 lg:p-4">
376+
<div className="flex items-center gap-2 lg:gap-3">
377+
<Send className="h-4 w-4 flex-shrink-0 text-blue-500 lg:h-5 lg:w-5" />
378+
<div className="min-w-0">
379+
<div className="text-xl font-bold text-blue-600 lg:text-2xl">
380380
{limitInfo.totalUsed}
381381
</div>
382-
<div className="text-sm text-muted-foreground">
382+
<div className="text-xs text-muted-foreground lg:text-sm">
383383
已使用次数
384384
</div>
385385
</div>
@@ -388,14 +388,14 @@ export default function EventCommunicationsPage({
388388
</Card>
389389

390390
<Card>
391-
<CardContent className="p-4">
392-
<div className="flex items-center space-x-2">
393-
<Clock className="h-5 w-5 text-yellow-500" />
394-
<div>
395-
<div className="text-2xl font-bold text-yellow-600">
391+
<CardContent className="p-3 lg:p-4">
392+
<div className="flex items-center gap-2 lg:gap-3">
393+
<Clock className="h-4 w-4 flex-shrink-0 text-yellow-500 lg:h-5 lg:w-5" />
394+
<div className="min-w-0">
395+
<div className="text-xl font-bold text-yellow-600 lg:text-2xl">
396396
{limitInfo.remainingCount}
397397
</div>
398-
<div className="text-sm text-muted-foreground">
398+
<div className="text-xs text-muted-foreground lg:text-sm">
399399
剩余次数
400400
</div>
401401
</div>
@@ -404,14 +404,14 @@ export default function EventCommunicationsPage({
404404
</Card>
405405

406406
<Card>
407-
<CardContent className="p-4">
408-
<div className="flex items-center space-x-2">
409-
<CheckCircle className="h-5 w-5 text-green-500" />
410-
<div>
411-
<div className="text-2xl font-bold text-green-600">
407+
<CardContent className="p-3 lg:p-4">
408+
<div className="flex items-center gap-2 lg:gap-3">
409+
<CheckCircle className="h-4 w-4 flex-shrink-0 text-green-500 lg:h-5 lg:w-5" />
410+
<div className="min-w-0">
411+
<div className="text-xl font-bold text-green-600 lg:text-2xl">
412412
{totalDelivered}
413413
</div>
414-
<div className="text-sm text-muted-foreground">
414+
<div className="text-xs text-muted-foreground lg:text-sm">
415415
成功送达
416416
</div>
417417
</div>
@@ -420,14 +420,14 @@ export default function EventCommunicationsPage({
420420
</Card>
421421

422422
<Card>
423-
<CardContent className="p-4">
424-
<div className="flex items-center space-x-2">
425-
<XCircle className="h-5 w-5 text-red-500" />
426-
<div>
427-
<div className="text-2xl font-bold text-red-600">
423+
<CardContent className="p-3 lg:p-4">
424+
<div className="flex items-center gap-2 lg:gap-3">
425+
<XCircle className="h-4 w-4 flex-shrink-0 text-red-500 lg:h-5 lg:w-5" />
426+
<div className="min-w-0">
427+
<div className="text-xl font-bold text-red-600 lg:text-2xl">
428428
{totalFailed}
429429
</div>
430-
<div className="text-sm text-muted-foreground">
430+
<div className="text-xs text-muted-foreground lg:text-sm">
431431
发送失败
432432
</div>
433433
</div>
@@ -528,23 +528,23 @@ export default function EventCommunicationsPage({
528528
{renderStats()}
529529

530530
{/* 主要内容 */}
531-
<Tabs defaultValue="send" className="space-y-6">
532-
<TabsList className="grid w-full grid-cols-2">
531+
<Tabs defaultValue="send" className="space-y-4 lg:space-y-6">
532+
<TabsList className="grid w-full grid-cols-2 h-auto">
533533
<TabsTrigger
534534
value="send"
535-
className="flex items-center space-x-2"
535+
className="flex items-center gap-1.5 py-2.5 lg:gap-2 lg:py-3"
536536
>
537-
<Send className="h-4 w-4" />
538-
<span>发送通知</span>
537+
<Send className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
538+
<span className="text-sm lg:text-base">发送通知</span>
539539
</TabsTrigger>
540540
<TabsTrigger
541541
value="history"
542-
className="flex items-center space-x-2"
542+
className="flex items-center gap-1.5 py-2.5 lg:gap-2 lg:py-3"
543543
>
544-
<Clock className="h-4 w-4" />
545-
<span>通信历史</span>
544+
<Clock className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
545+
<span className="text-sm lg:text-base">通信历史</span>
546546
{communications.length > 0 && (
547-
<Badge variant="secondary" className="ml-1">
547+
<Badge variant="secondary" className="ml-1 text-xs">
548548
{communications.length}
549549
</Badge>
550550
)}

‎apps/web/src/modules/account/events/components/SendCommunicationForm.tsx‎

Lines changed: 57 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -286,41 +286,37 @@ export function SendCommunicationForm({
286286

287287
return (
288288
<Card className={className}>
289-
<CardHeader>
290-
<div className="flex items-center justify-between">
291-
<div>
292-
<CardTitle className="flex items-center space-x-2">
293-
<Send className="h-5 w-5" />
294-
<span>发送提醒邮件</span>
289+
<CardHeader className="space-y-3 lg:space-y-4">
290+
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
291+
<div className="space-y-1.5">
292+
<CardTitle className="flex items-center gap-2 text-lg lg:text-xl">
293+
<Send className="h-4 w-4 lg:h-5 lg:w-5" />
294+
<span>发送通知邮件</span>
295295
</CardTitle>
296-
<CardDescription>
297-
向 {eventTitle} 的参与者发送邮件提醒
298-
<br />
299-
<span className="text-amber-600 text-sm">
296+
<CardDescription className="space-y-1 text-xs lg:text-sm">
297+
<div>向 {eventTitle} 的参与者发送邮件通知</div>
298+
<div className="text-amber-600">
300299
⚠️
301300
系统会自动跳过虚拟邮箱（@wechat.app）或无效邮箱
302-
</span>
303-
<br />
304-
<span className="text-blue-600 text-sm">
305-
🖼️ 支持上传一张提醒图片，邮件中会展示
306-
</span>
301+
</div>
302+
<div className="text-blue-600">
303+
🖼️ 支持上传一张通知图片，邮件中会展示
304+
</div>
307305
</CardDescription>
308306
</div>
309-
<div className="text-right">
310-
<div className="flex items-center space-x-2 text-sm text-muted-foreground">
311-
<Users className="h-4 w-4" />
312-
<span>{participantCount} 名参与者</span>
313-
</div>
307+
<div className="flex items-center gap-1.5 text-xs text-muted-foreground lg:text-sm">
308+
<Users className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
309+
<span>{participantCount} 名参与者</span>
314310
</div>
315311
</div>
316312

317313
<div className="space-y-2">
318-
<div className="flex items-center justify-between text-sm">
314+
<div className="flex items-center justify-between text-xs lg:text-sm">
319315
<span className="text-muted-foreground">
320316
发送次数限制
321317
</span>
322-
<div className="flex items-center space-x-2">
323-
<span className="font-medium">
318+
<div className="flex items-center gap-2">
319+
<span className="font-medium text-xs lg:text-sm">
324320
{limitInfo.totalUsed} / {limitInfo.maxAllowed}
325321
</span>
326322
<Badge
@@ -329,7 +325,7 @@ export function SendCommunicationForm({
329325
? "default"
330326
: "destructive"
331327
}
332-
className="text-xs"
328+
className="text-[10px] lg:text-xs"
333329
>
334330
剩余 {limitInfo.remainingCount} 次
335331
</Badge>
@@ -339,14 +335,14 @@ export function SendCommunicationForm({
339335
value={
340336
(limitInfo.totalUsed / limitInfo.maxAllowed) * 100
341337
}
342-
className="h-2"
338+
className="h-1.5 lg:h-2"
343339
/>
344340
</div>
345341

346342
{!limitInfo.canSend && (
347343
<Alert variant="destructive">
348344
<AlertCircle className="h-4 w-4" />
349-
<AlertDescription>
345+
<AlertDescription className="text-xs lg:text-sm">
350346
该活动已达到最大通信次数限制（{limitInfo.maxAllowed}{" "}
351347
次），无法继续发送消息。
352348
</AlertDescription>
@@ -365,16 +361,18 @@ export function SendCommunicationForm({
365361
name="type"
366362
render={() => (
367363
<FormItem>
368-
<FormLabel>通信类型</FormLabel>
364+
<FormLabel className="text-sm lg:text-base">
365+
通信类型
366+
</FormLabel>
369367
<FormControl>
370-
<div className="border rounded-lg p-3 bg-muted">
371-
<div className="flex items-center space-x-2">
372-
<Mail className="h-4 w-4 text-primary" />
373-
<div>
374-
<div className="font-medium">
368+
<div className="rounded-lg border bg-muted p-2.5 lg:p-3">
369+
<div className="flex items-center gap-2">
370+
<Mail className="h-3.5 w-3.5 flex-shrink-0 text-primary lg:h-4 lg:w-4" />
371+
<div className="min-w-0">
372+
<div className="text-sm font-medium lg:text-base">
375373
邮件通知
376374
</div>
377-
<div className="text-xs text-muted-foreground">
375+
<div className="text-[10px] text-muted-foreground lg:text-xs">
378376
发送到用户邮箱
379377
</div>
380378
</div>
@@ -391,7 +389,9 @@ export function SendCommunicationForm({
391389
name="recipientScope"
392390
render={({ field }) => (
393391
<FormItem>
394-
<FormLabel>发送范围</FormLabel>
392+
<FormLabel className="text-sm lg:text-base">
393+
发送范围
394+
</FormLabel>
395395
<Select
396396
onValueChange={(value) =>
397397
field.onChange(
@@ -401,7 +401,7 @@ export function SendCommunicationForm({
401401
value={field.value}
402402
>
403403
<FormControl>
404-
<SelectTrigger>
404+
<SelectTrigger className="text-sm lg:text-base">
405405
<SelectValue placeholder="选择发送范围" />
406406
</SelectTrigger>
407407
</FormControl>
@@ -448,7 +448,7 @@ export function SendCommunicationForm({
448448
</SelectItem>
449449
</SelectContent>
450450
</Select>
451-
<FormDescription>
451+
<FormDescription className="text-xs lg:text-sm">
452452
无效邮箱会自动跳过，不会报错中断。
453453
</FormDescription>
454454
<FormMessage />
@@ -648,19 +648,22 @@ export function SendCommunicationForm({
648648
name="subject"
649649
render={({ field }) => (
650650
<FormItem>
651-
<FormLabel>消息主题</FormLabel>
651+
<FormLabel className="text-sm lg:text-base">
652+
消息主题
653+
</FormLabel>
652654
<FormControl>
653655
<Input
654656
placeholder="请输入消息主题"
655657
{...field}
656658
maxLength={200}
659+
className="text-sm lg:text-base"
657660
/>
658661
</FormControl>
659-
<FormDescription className="flex justify-between">
662+
<FormDescription className="flex justify-between text-xs lg:text-sm">
660663
<span>
661664
简洁明了的主题有助于提高消息打开率
662665
</span>
663-
<span className="text-xs text-muted-foreground">
666+
<span className="text-[10px] text-muted-foreground lg:text-xs">
664667
{subjectLength}/200
665668
</span>
666669
</FormDescription>
@@ -674,18 +677,20 @@ export function SendCommunicationForm({
674677
name="content"
675678
render={({ field }) => (
676679
<FormItem>
677-
<FormLabel>消息内容</FormLabel>
680+
<FormLabel className="text-sm lg:text-base">
681+
消息内容
682+
</FormLabel>
678683
<FormControl>
679684
<Textarea
680685
placeholder="请输入邮件内容..."
681-
className="min-h-[120px] resize-none"
686+
className="min-h-[100px] resize-none text-sm lg:min-h-[120px] lg:text-base"
682687
{...field}
683688
maxLength={2000}
684689
/>
685690
</FormControl>
686-
<FormDescription className="flex justify-between">
691+
<FormDescription className="flex justify-between text-xs lg:text-sm">
687692
<span>支持换行，会保持原有格式</span>
688-
<span className="text-xs text-muted-foreground">
693+
<span className="text-[10px] text-muted-foreground lg:text-xs">
689694
{contentLength}/2000
690695
</span>
691696
</FormDescription>
@@ -701,22 +706,22 @@ export function SendCommunicationForm({
701706
<FormItem>
702707
<FormControl>
703708
<ImageUpload
704-
label="提醒图片（可选）"
709+
label="通知图片（可选）"
705710
value={field.value}
706711
onChange={field.onChange}
707712
onRemove={() =>
708713
field.onChange(undefined)
709714
}
710715
description="支持 JPG、PNG、WebP，建议宽图，邮件内会自动展示"
711-
className="p-4"
716+
className="p-3 lg:p-4"
712717
/>
713718
</FormControl>
714-
<FormDescription className="flex justify-between">
719+
<FormDescription className="flex justify-between text-xs lg:text-sm">
715720
<span>
716721
不上传也可正常发送，仅发送文字消息
717722
</span>
718723
{watchedImageUrl ? (
719-
<span className="text-xs text-muted-foreground">
724+
<span className="text-[10px] text-muted-foreground lg:text-xs">
720725
已上传图片
721726
</span>
722727
) : null}
@@ -726,24 +731,25 @@ export function SendCommunicationForm({
726731
)}
727732
/>
728733

729-
<div className="flex justify-end">
734+
<div className="flex justify-end pt-2">
730735
<Button
731736
type="submit"
732737
disabled={
733738
disabled ||
734739
!limitInfo.canSend ||
735740
isSubmitting
736741
}
737-
className="min-w-[120px]"
742+
className="w-full min-w-[120px] lg:w-auto"
743+
size="lg"
738744
>
739745
{isSubmitting ? (
740746
<>
741-
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" />
747+
<div className="mr-2 h-4 w-4 animate-spin rounded-full border-b-2 border-white" />
742748
发送中...
743749
</>
744750
) : (
745751
<>
746-
<Send className="h-4 w-4 mr-2" />
752+
<Send className="mr-2 h-4 w-4" />
747753
发送{getTypeLabel()}
748754
</>
749755
)}

0 commit comments

Comments
 (0)