refactor(cors): 简化CORS配置并移除未使用的参数

feat(email): 提取邮箱验证逻辑到共享模块并增强验证 docs: 更新文档移除不再使用的ALLOW_ORIGIN配置 style(admin): 为设置页面添加加载状态和样式优化 fix(comments): 在邮件发送前增加邮箱格式验证
2026-01-19 17:02:19 +08:00
parent e6e21dff61
commit 73bbe44fbc
9 changed files with 217 additions and 118 deletions
--- a/.claude/CLAUDE.md
+++ b/.claude/CLAUDE.md
@@ -62,14 +62,13 @@ src/

 ## 环境变量

-| 变量名 | 说明 | 必填 |
-|--------|------|------|
-| `ADMIN_NAME` | 管理员用户名 | 是 |
-| `ADMIN_PASSWORD` | 管理员密码 | 是 |
-| `ALLOW_ORIGIN` | CORS 白名单（逗号分隔） | 是 |
-| `RESEND_API_KEY` | Resend API 密钥 | 否 |
-| `RESEND_FROM_EMAIL` | 发件邮箱 | 否 |
-| `EMAIL_ADDRESS` | 站长接收邮箱 | 否 |
+| 变量名              | 说明            | 必填 |
+| ------------------- | --------------- | ---- |
+| `ADMIN_NAME`        | 管理员用户名    | 是   |
+| `ADMIN_PASSWORD`    | 管理员密码      | 是   |
+| `RESEND_API_KEY`    | Resend API 密钥 | 否   |
+| `RESEND_FROM_EMAIL` | 发件邮箱        | 否   |
+| `EMAIL_ADDRESS`     | 站长接收邮箱    | 否   |

 ## 本地开发

--- a/README.md
+++ b/README.md
@@ -5,15 +5,13 @@

 Cloudflare Worker 版本基于 Cloudflare Workers + D1 + KV 实现，无需服务器即可部署运行的评论组件。

-> 基于 https://github.com/Motues/Momo-Backend 进行二次开发的 Cloudflare Worker 版本，做了大量扩展更新。
-
 [文档地址](https://cwd-comments.zishu.me)

 ## 特性

 - ⚡️ **极速响应**：基于 Cloudflare 全球边缘网络
 - 🔒 **安全可靠**：内置管理员认证、CORS 保护
- 📧 **邮件通知**：支持 Resend 邮件服务
+- 📧 **邮件通知**：基于 Cloudflare Workers 发送邮件
 - 🎨 **易于集成**：提供完整的 REST API

 ## 前置要求
@@ -27,13 +25,18 @@ Cloudflare Worker 版本基于 Cloudflare Workers + D1 + KV 实现，无需服
 ```bash
 # 克隆项目
 git clone https://github.com/anghunk/cwd-comments
-cd cwd-comments

-# 安装依赖
+# API 项目
+cd cwd-comments-api
+# 部署请查看文档
+
+# 前端项目
+cd cwd-comments-web
 npm install
+
 ```

 ## 配置

- [后端配置](./backend-config.md)
- [前端配置](./frontend-config.md)
+- [后端配置](https://cwd-comments-docs.zishu.me/guide/backend-config.html)
+- [前端配置](https://cwd-comments-docs.zishu.me/guide/frontend-config.html)
--- a/cwd-comments-admin/src/views/CommentsView.vue
+++ b/cwd-comments-admin/src/views/CommentsView.vue
@@ -399,6 +399,38 @@ onMounted(() => {
  text-align: center;
 }

+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+  gap: 12px;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #f0f0f0;
+  border-top-color: #0969da;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-text {
+  font-size: 14px;
+  color: #57606a;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .pagination {
  margin-top: 8px;
  display: flex;
--- a/cwd-comments-admin/src/views/SettingsView.vue
+++ b/cwd-comments-admin/src/views/SettingsView.vue
@@ -1,151 +1,199 @@
 <template>
-	<div class="page">
-		<h2 class="page-title">系统设置</h2>
-		<div class="card">
-			<h3 class="card-title">通知邮箱设置</h3>
-			<div class="form-item">
-				<label class="form-label">管理员通知邮箱</label>
-				<input v-model="email" class="form-input" type="email" />
-			</div>
-			<div v-if="message" :class="['form-message', messageType === 'error' ? 'form-message-error' : 'form-message-success']">
-				{{ message }}
-			</div>
-			<div class="card-actions">
-				<button class="card-button" :disabled="saving" @click="save">
-					<span v-if="saving">保存中...</span>
-					<span v-else>保存</span>
-				</button>
-			</div>
-		</div>
-	</div>
+  <div class="page">
+    <h2 class="page-title">系统设置</h2>
+    <div v-if="loading" class="page-hint">加载中...</div>
+    <div v-else>
+      <div class="card">
+        <h3 class="card-title">通知邮箱设置</h3>
+        <div class="form-item">
+          <label class="form-label">管理员通知邮箱</label>
+          <input v-model="email" class="form-input" type="email" />
+        </div>
+        <div
+          v-if="message"
+          :class="[
+            'form-message',
+            messageType === 'error' ? 'form-message-error' : 'form-message-success',
+          ]"
+        >
+          {{ message }}
+        </div>
+        <div class="card-actions">
+          <button class="card-button" :disabled="saving" @click="save">
+            <span v-if="saving">保存中...</span>
+            <span v-else>保存</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>

 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import { fetchAdminEmail, saveAdminEmail } from '../api/admin';
+import { onMounted, ref } from "vue";
+import { fetchAdminEmail, saveAdminEmail } from "../api/admin";

-const email = ref('');
+const email = ref("");
 const saving = ref(false);
-const message = ref('');
-const messageType = ref<'success' | 'error'>('success');
+const loading = ref(false);
+const message = ref("");
+const messageType = ref<"success" | "error">("success");

 async function load() {
-	try {
-		const res = await fetchAdminEmail();
-		email.value = res.email || '';
-	} catch (e: any) {
-		message.value = e.message || '加载失败';
-		messageType.value = 'error';
-	}
+  loading.value = true;
+  try {
+    const res = await fetchAdminEmail();
+    email.value = res.email || "";
+  } catch (e: any) {
+    message.value = e.message || "加载失败";
+    messageType.value = "error";
+  } finally {
+    loading.value = false;
+  }
 }

 async function save() {
-	if (!email.value) {
-		message.value = '请输入邮箱';
-		messageType.value = 'error';
-		return;
-	}
-	saving.value = true;
-	message.value = '';
-	try {
-		const res = await saveAdminEmail(email.value);
-		message.value = res.message || '保存成功';
-		messageType.value = 'success';
-	} catch (e: any) {
-		message.value = e.message || '保存失败';
-		messageType.value = 'error';
-	} finally {
-		saving.value = false;
-	}
+  if (!email.value) {
+    message.value = "请输入邮箱";
+    messageType.value = "error";
+    return;
+  }
+  saving.value = true;
+  message.value = "";
+  try {
+    const res = await saveAdminEmail(email.value);
+    message.value = res.message || "保存成功";
+    messageType.value = "success";
+  } catch (e: any) {
+    message.value = e.message || "保存失败";
+    messageType.value = "error";
+  } finally {
+    saving.value = false;
+  }
 }

 onMounted(() => {
-	load();
+  load();
 });
 </script>

 <style scoped>
 .page {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-	max-width: 520px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 520px;
 }

 .page-title {
-	margin: 0;
-	font-size: 18px;
-	color: #24292f;
+  margin: 0;
+  font-size: 18px;
+  color: #24292f;
 }

 .card {
-	background-color: #ffffff;
-	border-radius: 6px;
-	border: 1px solid #d0d7de;
-	padding: 16px 18px;
+  background-color: #ffffff;
+  border-radius: 6px;
+  border: 1px solid #d0d7de;
+  padding: 16px 18px;
 }

 .card-title {
-	margin: 0 0 12px;
-	font-size: 15px;
+  margin: 0 0 12px;
+  font-size: 15px;
 }

 .form-item {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-	margin-bottom: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
 }

 .form-label {
-	font-size: 14px;
-	color: #555555;
+  font-size: 14px;
+  color: #555555;
 }

 .form-input {
-	padding: 8px 10px;
-	border-radius: 4px;
-	border: 1px solid #d0d7de;
-	font-size: 14px;
-	outline: none;
+  padding: 8px 10px;
+  border-radius: 4px;
+  border: 1px solid #d0d7de;
+  font-size: 14px;
+  outline: none;
 }

 .form-input:focus {
-	border-color: #0969da;
-	box-shadow: 0 0 0 1px rgba(9, 105, 218, 0.2);
+  border-color: #0969da;
+  box-shadow: 0 0 0 1px rgba(9, 105, 218, 0.2);
 }

 .card-actions {
-	display: flex;
-	justify-content: flex-end;
+  display: flex;
+  justify-content: flex-end;
 }

 .card-button {
-	padding: 8px 14px;
-	border-radius: 4px;
-	border: none;
-	background-color: #0969da;
-	color: #ffffff;
-	font-size: 14px;
-	cursor: pointer;
+  padding: 8px 14px;
+  border-radius: 4px;
+  border: none;
+  background-color: #0969da;
+  color: #ffffff;
+  font-size: 14px;
+  cursor: pointer;
 }

 .card-button:disabled {
-	opacity: 0.7;
-	cursor: default;
+  opacity: 0.7;
+  cursor: default;
 }

 .form-message {
-	font-size: 13px;
-	margin-bottom: 8px;
+  font-size: 13px;
+  margin-bottom: 8px;
 }

 .form-message-success {
-	color: #1a7f37;
+  color: #1a7f37;
 }

 .form-message-error {
-	color: #d1242f;
+  color: #d1242f;
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+  gap: 12px;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #f0f0f0;
+  border-top-color: #0969da;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-text {
+  font-size: 14px;
+  color: #57606a;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.page-hint {
+  font-size: 14px;
+  color: #57606a;
 }
 </style>
-
--- a/cwd-comments-api/src/api/admin/setAdminEmail.ts
+++ b/cwd-comments-api/src/api/admin/setAdminEmail.ts
@@ -1,9 +1,6 @@
 import { Context } from 'hono';
 import { Bindings } from '../../bindings';
-
-function isValidEmail(email: string) {
-  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-}
+import { isValidEmail } from '../../utils/email';

 export const setAdminEmail = async (c: Context<{ Bindings: Bindings }>) => {
  try {
--- a/cwd-comments-api/src/api/public/postComment.ts
+++ b/cwd-comments-api/src/api/public/postComment.ts
@@ -1,7 +1,7 @@
 import { Context } from 'hono';
 import { UAParser } from 'ua-parser-js';
 import { Bindings } from '../../bindings';
-import { sendCommentNotification, sendCommentReplyNotification } from '../../utils/email';
+import { sendCommentNotification, sendCommentReplyNotification, isValidEmail } from '../../utils/email';

 // 检查内容，将<script>标签之间的内容删除
 export function checkContent(content: string): string {
@@ -26,6 +26,9 @@ export const postComment = async (c: Context<{ Bindings: Bindings }>) => {
  if (!email || typeof email !== 'string') {
    return c.json({ message: '邮箱不能为空' }, 400);
  }
+  if (!isValidEmail(email)) {
+    return c.json({ message: '邮箱格式不正确' }, 400);
+  }
  const userAgent = c.req.header('user-agent') || "";
  
  // 1. 获取 IP (Worker 获取 IP 的标准方式)
@@ -122,7 +125,8 @@ export const postComment = async (c: Context<{ Bindings: Bindings }>) => {
                "SELECT created_at FROM EmailLog WHERE recipient = ? AND type = 'user-reply' ORDER BY created_at DESC LIMIT 1"
              ).bind(parentComment.email).first<{ created_at: string }>();
              const canSendUserMail = !recentUserMail || (Date.now() - new Date(recentUserMail.created_at).getTime() > 60 * 1000);
-              if (canSendUserMail) {
+              
+              if (canSendUserMail && isValidEmail(parentComment.email)) {
                console.log('PostComment:mailDispatch:userReply:send', {
                  toEmail: parentComment.email,
                  toName: parentComment.author
--- a/cwd-comments-api/src/utils/cors.ts
+++ b/cwd-comments-api/src/utils/cors.ts
@@ -1,6 +1,6 @@
 import { cors } from 'hono/cors'

-export const customCors = (_allowOriginStr: string | undefined) => {
+export const customCors = () => {
  return cors({
    origin: '*',
    allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
--- a/cwd-comments-api/src/utils/email.ts
+++ b/cwd-comments-api/src/utils/email.ts
@@ -1,5 +1,9 @@
 import { Bindings } from '../bindings';

+export function isValidEmail(email: string) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
 /**
 * 回复通知邮件
 */
@@ -54,6 +58,11 @@ export async function sendCommentReplyNotification(
    throw new Error('未配置邮件发送绑定或发件人地址');
  }

+  if (!isValidEmail(toEmail)) {
+    console.warn('EmailReplyNotification:invalidRecipient', { toEmail });
+    return;
+  }
+
  await env.SEND_EMAIL.send({
    to: [{ email: toEmail }],
    from: { email: env.CF_FROM_EMAIL },
@@ -106,6 +115,11 @@ export async function sendCommentNotification(
    throw new Error('未配置邮件发送绑定或发件人地址');
  }

+  if (!isValidEmail(toEmail)) {
+    console.warn('EmailAdminNotification:invalidRecipient', { toEmail });
+    return;
+  }
+
  await env.SEND_EMAIL.send({
    to: [{ email: toEmail }],
    from: { email: env.CF_FROM_EMAIL },
@@ -125,18 +139,21 @@ async function getAdminNotifyEmail(env: Bindings): Promise<string> {
  const row = await env.CWD_DB.prepare('SELECT value FROM Settings WHERE key = ?')
    .bind('admin_notify_email')
    .first<{ value: string }>();
-  if (row?.value) {
+  if (row?.value && isValidEmail(row.value)) {
    console.log('EmailAdminNotification:useDbEmail', {
      email: row.value
    });
    return row.value;
  }
-  if (env.EMAIL_ADDRESS) {
+  if (env.EMAIL_ADDRESS && isValidEmail(env.EMAIL_ADDRESS)) {
    console.log('EmailAdminNotification:useEnvEmail', {
      email: env.EMAIL_ADDRESS
    });
    return env.EMAIL_ADDRESS;
  }
-  console.error('EmailAdminNotification:noAdminEmail');
-  throw new Error('未配置管理员通知邮箱');
+  console.error('EmailAdminNotification:noAdminEmail', {
+    dbValue: row?.value,
+    envValue: env.EMAIL_ADDRESS
+  });
+  throw new Error('未配置管理员通知邮箱或格式不正确');
 }
--- a/docs/guide/backend-config.md
+++ b/docs/guide/backend-config.md
@@ -89,7 +89,6 @@ npm install

 | 变量名               | 描述                                                                                 |
 | -------------------- | ------------------------------------------------------------------------------------ |
-| `ALLOW_ORIGIN`       | 允许跨域请求的域名，用逗号分隔                                                       |
 | `CF_FROM_EMAIL`      | 作为发件人显示的邮箱地址（需在 Cloudflare Email 路由中预先配置）                    |
 | `EMAIL_ADDRESS`      | 管理员接收通知邮件的默认邮箱（可在后台设置中覆盖）                                  |
 | `ADMIN_NAME`         | 管理员登录名称，默认为 admin                                                         |