Browse Source

fix(comment): add frontend email-notify readiness hints

Expose login-state comment notify warnings in comment composer and show incomplete SMTP config status in admin settings to prevent misleading mail-send expectations.

Made-with: Cursor
main
npmrun 3 weeks ago
parent
commit
6e2cbfda22
  1. 42
      app/components/PostComments.vue
  2. 25
      app/pages/me/admin/config/index.vue

42
app/components/PostComments.vue

@ -21,6 +21,16 @@ type CommentsPayload = {
comments: CommentNode[] comments: CommentNode[]
} }
type MeConfigPayload = {
config?: Record<string, unknown>
}
type MeProfilePayload = {
profile?: {
email?: string | null
}
}
const props = defineProps<{ const props = defineProps<{
mode: 'public-post' | 'unlisted' mode: 'public-post' | 'unlisted'
publicSlug: string publicSlug: string
@ -65,6 +75,32 @@ const { data, pending, error, refresh: refreshComments } = await useAsyncData(
{ watch: [commentsBase] }, { watch: [commentsBase] },
) )
const { data: viewerNotifyState } = await useAsyncData(
() => 'viewer-comment-notify-state',
async () => {
if (!loggedIn.value) {
return null
}
const fetcher = import.meta.server ? useRequestFetch() : $fetch
const [meConfigRes, meProfileRes] = await Promise.all([
fetcher<ApiResponse<MeConfigPayload>>('/api/config/me'),
fetcher<ApiResponse<MeProfilePayload>>('/api/me/profile'),
])
const cfg = unwrapApiBody(meConfigRes).config ?? {}
const profile = unwrapApiBody(meProfileRes).profile ?? {}
const commentNotifyEnabled = typeof cfg.commentNotifyEnabled === 'boolean' ? cfg.commentNotifyEnabled : true
const email = typeof profile.email === 'string' ? profile.email.trim() : ''
return {
commentNotifyEnabled,
hasEmail: email.length > 0,
}
},
{ watch: [loggedIn] },
)
const showNoEmailHint = computed(() => loggedIn.value && viewerNotifyState.value?.hasEmail === false)
const showNotifyDisabledHint = computed(() => loggedIn.value && viewerNotifyState.value?.commentNotifyEnabled === false)
const flatComments = computed(() => flattenTree(data.value?.comments ?? [])) const flatComments = computed(() => flattenTree(data.value?.comments ?? []))
function flattenTree(nodes: CommentNode[], depth = 0): Array<{ node: CommentNode; depth: number }> { function flattenTree(nodes: CommentNode[], depth = 0): Array<{ node: CommentNode; depth: number }> {
@ -232,6 +268,12 @@ async function submitComment() {
<UButton size="xs" variant="link" color="neutral" label="取消" @click="replyToId = null" /> <UButton size="xs" variant="link" color="neutral" label="取消" @click="replyToId = null" />
</p> </p>
<template v-if="loggedIn"> <template v-if="loggedIn">
<p v-if="showNoEmailHint" class="text-sm text-warning">
未填写邮箱将无法接收评论通知
</p>
<p v-if="showNotifyDisabledHint" class="text-sm text-warning">
你已关闭评论邮件通知
</p>
<UTextarea v-model="draftBody" placeholder="写下你的评论…" :rows="4" class="w-full" /> <UTextarea v-model="draftBody" placeholder="写下你的评论…" :rows="4" class="w-full" />
<UButton :loading="submitting" label="发表" @click="submitComment" /> <UButton :loading="submitting" label="发表" @click="submitComment" />
</template> </template>

25
app/pages/me/admin/config/index.vue

@ -39,6 +39,23 @@ const commentSmtpSecure = ref(true)
const commentSmtpUser = ref('') const commentSmtpUser = ref('')
const commentSmtpPass = ref('') const commentSmtpPass = ref('')
const commentEmailConfigReady = computed(() => {
const from = commentMailFromEmail.value.trim()
const host = commentSmtpHost.value.trim()
const user = commentSmtpUser.value.trim()
const pass = commentSmtpPass.value.trim()
const port = Number(commentSmtpPort.value)
return (
from.length > 0
&& host.length > 0
&& user.length > 0
&& pass.length > 0
&& Number.isFinite(port)
&& port >= 1
&& port <= 65535
)
})
async function ensureAdmin() { async function ensureAdmin() {
await refresh(true) await refresh(true)
if (user.value?.role !== 'admin') { if (user.value?.role !== 'admin') {
@ -183,6 +200,14 @@ async function sendTestEmail() {
> >
<UCheckbox v-model="commentEmailNotifyEnabled" label="开启通知发送" /> <UCheckbox v-model="commentEmailNotifyEnabled" label="开启通知发送" />
</UFormField> </UFormField>
<UAlert
v-if="!commentEmailConfigReady"
color="warning"
variant="subtle"
title="未配置完成,无法发件"
description="请补全发件人邮箱、SMTP 主机、端口、用户名和密码后再发送测试邮件。"
class="rounded-lg"
/>
<UFormField <UFormField
label="发件人邮箱" label="发件人邮箱"
description="用于邮件 From 字段,留空表示未配置。" description="用于邮件 From 字段,留空表示未配置。"

Loading…
Cancel
Save