diff --git a/cwd-comments-admin/src/views/SettingsView.vue b/cwd-comments-admin/src/views/SettingsView.vue index 433f7bb..9a2574b 100644 --- a/cwd-comments-admin/src/views/SettingsView.vue +++ b/cwd-comments-admin/src/views/SettingsView.vue @@ -1,31 +1,15 @@ @@ -77,6 +81,18 @@ const savingComment = ref(false); const loading = ref(false); const message = ref(""); const messageType = ref<"success" | "error">("success"); +const toastMessage = ref(""); +const toastType = ref<"success" | "error">("success"); +const toastVisible = ref(false); + +function showToast(msg: string, type: "success" | "error" = "success") { + toastMessage.value = msg; + toastType.value = type; + toastVisible.value = true; + window.setTimeout(() => { + toastVisible.value = false; + }, 2000); +} async function load() { loading.value = true; @@ -108,8 +124,7 @@ async function saveEmail() { message.value = ""; try { const res = await saveAdminEmail(email.value); - message.value = res.message || "保存成功"; - messageType.value = "success"; + showToast(res.message || "保存成功", "success"); } catch (e: any) { message.value = e.message || "保存失败"; messageType.value = "error"; @@ -128,8 +143,7 @@ async function saveComment() { avatarPrefix: avatarPrefix.value, adminEnabled: commentAdminEnabled.value, }); - message.value = res.message || "保存成功"; - messageType.value = "success"; + showToast(res.message || "保存成功", "success"); } catch (e: any) { message.value = e.message || "保存失败"; messageType.value = "error"; @@ -162,6 +176,7 @@ onMounted(() => { border-radius: 6px; border: 1px solid #d0d7de; padding: 16px 18px; + margin-bottom: 1em; } .card-title { @@ -194,6 +209,30 @@ onMounted(() => { box-shadow: 0 0 0 1px rgba(9, 105, 218, 0.2); } +.toast { + position: fixed; + top: 20px; + left: 50%; + transform: translateX(-50%); + min-width: 220px; + max-width: 320px; + padding: 10px 14px; + border-radius: 6px; + font-size: 13px; + box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2); + z-index: 1000; +} + +.toast-success { + background-color: #1a7f37; + color: #ffffff; +} + +.toast-error { + background-color: #d1242f; + color: #ffffff; +} + .switch { position: relative; display: inline-flex; diff --git a/cwd-comments-api/src/index.ts b/cwd-comments-api/src/index.ts index 5b5d55b..1461dcf 100644 --- a/cwd-comments-api/src/index.ts +++ b/cwd-comments-api/src/index.ts @@ -32,7 +32,7 @@ async function loadCommentSettings(env: Bindings) { COMMENT_ADMIN_ENABLED_KEY ]; const { results } = await env.CWD_DB.prepare( - 'SELECT key, value FROM Settings WHERE key IN (?, ?, ?)' + 'SELECT key, value FROM Settings WHERE key IN (?, ?, ?, ?)' ) .bind(...keys) .all<{ key: string; value: string }>();