From c84a383e5ca8dd4b8cb0e28d7de89542f48a4864 Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Mon, 28 Sep 2026 23:52:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E5=8F=B0=E7=BB=9F=E4=B8=80=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E6=8F=90=E7=A4=BA=EF=BC=9A=E5=85=B1=E4=BA=AB=20toast?=
 =?UTF-8?q?=20=E6=A8=A1=E5=9D=97=EF=BC=88ToastStack=20=E6=8C=82=E5=90=8E?=
 =?UTF-8?q?=E5=8F=B0=E5=B8=83=E5=B1=80=E4=B8=8E=E7=99=BB=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=EF=BC=89=EF=BC=8C=E7=99=BB=E5=BD=95=E6=88=90=E5=8A=9F/?=
 =?UTF-8?q?=E5=A4=B1=E8=B4=A5=E3=80=81=E6=96=87=E7=AB=A0/=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE/=E4=BD=9C=E5=93=81/=E6=96=87=E4=BB=B6/=E8=AF=84?=
 =?UTF-8?q?=E8=AE=BA/=E8=AE=BE=E7=BD=AE=E6=93=8D=E4=BD=9C=E5=85=A8?=
 =?UTF-8?q?=E9=83=A8=E6=9C=89=E5=8F=8D=E9=A6=88=EF=BC=8C=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E6=8E=89=E5=8E=9F=E7=94=9F=20alert=EF=BC=9B=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E5=B1=80=E9=83=A8=20toast=20=E5=B9=B6=E5=85=A5?=
 =?UTF-8?q?=E5=85=B1=E4=BA=AB=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/admin/AdminLayout.vue  |  2 ++
 frontend/src/admin/CommentsView.vue |  4 +++
 frontend/src/admin/EditorView.vue   | 34 ++-------------------
 frontend/src/admin/FilesView.vue    |  6 ++++
 frontend/src/admin/LoginView.vue    |  5 +++
 frontend/src/admin/PostsView.vue    |  5 +--
 frontend/src/admin/ProjectsView.vue | 13 ++++----
 frontend/src/admin/SettingsView.vue |  3 ++
 frontend/src/admin/TagsView.vue     | 11 ++++---
 frontend/src/admin/ToastStack.vue   | 11 +++++++
 frontend/src/admin/toast.js         | 47 +++++++++++++++++++++++++++++
 11 files changed, 96 insertions(+), 45 deletions(-)
 create mode 100644 frontend/src/admin/ToastStack.vue
 create mode 100644 frontend/src/admin/toast.js

diff --git a/frontend/src/admin/AdminLayout.vue b/frontend/src/admin/AdminLayout.vue
index 30fb851..c26f8b5 100644
--- a/frontend/src/admin/AdminLayout.vue
+++ b/frontend/src/admin/AdminLayout.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue'
+import ToastStack from './ToastStack.vue'
 import { useRoute, useRouter, RouterLink, RouterView } from 'vue-router'
 import { checkAuth } from './auth'
 import { adminApi, session } from '../api'
@@ -96,6 +97,7 @@ watch(() => route.path, () => loadCounts())
 
 <template>
   <div v-if="ready" class="admin-shell">
+    <ToastStack />
     <aside class="admin-side">
       <div class="brand">
         <RouterLink to="/admin" class="name">{{ site.site_title || 'ONE' }}</RouterLink>
diff --git a/frontend/src/admin/CommentsView.vue b/frontend/src/admin/CommentsView.vue
index ccb7de9..8746e3b 100644
--- a/frontend/src/admin/CommentsView.vue
+++ b/frontend/src/admin/CommentsView.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, onMounted, ref, watch } from 'vue'
+import { toastOk, toastErr } from './toast'
 import { useRoute, useRouter } from 'vue-router'
 import { adminApi } from '../api'
 import { relativeDate, stripTags } from '../utils'
@@ -46,12 +47,14 @@ function setStatus(v) {
 
 async function approve(id) {
   await adminApi.approveComment(id)
+  toastOk('已通过，前台可见')
   load()
 }
 
 async function remove(id) {
   if (!window.confirm('删除这条评论？正文清空，楼层保留为「已删除」。')) return
   await adminApi.deleteComment(id)
+  toastOk('已删除')
   load()
 }
 
@@ -59,6 +62,7 @@ async function banToggle(c) {
   const banned = !c.user?.banned
   if (!window.confirm(banned ? `禁言「${c.user?.name || '该用户'}」？禁言后其无法再发表评论。` : '解除禁言？')) return
   await adminApi.setReaderBanned(c.user?.id, banned)
+  toastOk(banned ? '已禁言' : '已解除禁言')
   c.user = { ...(c.user || {}), banned }
 }
 
diff --git a/frontend/src/admin/EditorView.vue b/frontend/src/admin/EditorView.vue
index a0d7840..ffc5f35 100644
--- a/frontend/src/admin/EditorView.vue
+++ b/frontend/src/admin/EditorView.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { toast, toastOk, toastErr, toastUpdate, toastDone } from './toast'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
 import { adminApi } from '../api'
 import { site } from '../site'
@@ -625,39 +626,8 @@ function commitImage() {
   showImageInput.value = false
 }
 
-// ---------- toast ----------
-// 编辑器内的轻提示：上传进度、转存结果、校验失败。自动消失，错误多留一会儿。
-const toasts = reactive([])
-let toastSeq = 0
-function toast(text, type = 'info', ttl = 2600) {
-  const id = ++toastSeq
-  toasts.push({ id, text, type })
-  setTimeout(() => {
-    const i = toasts.findIndex((t) => t.id === id)
-    if (i >= 0) toasts.splice(i, 1)
-  }, ttl)
-  return id
-}
-function toastUpdate(id, text, type = 'info') {
-  const t = toasts.find((x) => x.id === id)
-  if (t) {
-    t.text = text
-    t.type = type
-  }
-}
-function toastDone(id, text) {
-  toastUpdate(id, text, 'ok')
-  const idx = toasts.findIndex((t) => t.id === id)
-  if (idx >= 0) {
-    const t = toasts[idx]
-    setTimeout(() => {
-      const i = toasts.indexOf(t)
-      if (i >= 0) toasts.splice(i, 1)
-    }, 1800)
-  }
-}
-
 // ---------- 上传（封面 / 编辑器插图共用） ----------
+// toast 用共享的 ./toast（ToastStack 渲染在 AdminLayout）。
 // 后台「高级 → 自定义 JS」无关；走 /api/admin/files（FormData）。
 const uploadingImage = ref(false)
 
diff --git a/frontend/src/admin/FilesView.vue b/frontend/src/admin/FilesView.vue
index d5e4be4..57b1069 100644
--- a/frontend/src/admin/FilesView.vue
+++ b/frontend/src/admin/FilesView.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { toastOk, toastErr } from './toast'
 import { useRoute, useRouter } from 'vue-router'
 import { adminApi } from '../api'
 import { relativeDate } from '../utils'
@@ -55,8 +56,10 @@ async function upload(files) {
     const fd = new FormData()
     for (const f of files) fd.append('file', f)
     await adminApi.uploadFiles(fd)
+    toastOk(`已上传 ${files.length} 个文件`)
     await load()
   } catch (e) {
+    toastErr(e.message || '上传失败')
     uploadError.value = e.message || '上传失败'
   } finally {
     uploading.value = false
@@ -75,6 +78,7 @@ function onDrop(e) {
 async function copyUrl(f) {
   try {
     await navigator.clipboard.writeText(f.url)
+    toastOk('链接已复制')
     copiedId.value = f.id
     setTimeout(() => {
       if (copiedId.value === f.id) copiedId.value = 0
@@ -89,10 +93,12 @@ async function remove(f) {
   if (!window.confirm(`删除「${f.name}」？存储里的文件会一并删除，引用它的文章将失效。`)) return
   try {
     await adminApi.deleteFile(f.id)
+    toastOk(`已删除「${f.name}」`)
     // 当前页删空时退一页，其余直接重载
     if (items.value.length === 1 && page.value > 1) router.replace({ query: { ...route.query, page: page.value - 1 } })
     else load()
   } catch (e) {
+    toastErr(e.message || '删除失败')
     error.value = e.message || '删除失败'
   }
 }
diff --git a/frontend/src/admin/LoginView.vue b/frontend/src/admin/LoginView.vue
index 1911810..ff4d7ab 100644
--- a/frontend/src/admin/LoginView.vue
+++ b/frontend/src/admin/LoginView.vue
@@ -1,5 +1,7 @@
 <script setup>
 import { ref } from 'vue'
+import { toastOk, toastErr } from './toast'
+import ToastStack from './ToastStack.vue'
 import { useRouter } from 'vue-router'
 import { adminApi, session } from '../api'
 import { site } from '../site'
@@ -17,8 +19,10 @@ async function submit() {
     const data = await adminApi.login(username.value, password.value)
     session.user = username.value
     void data
+    toastOk('登录成功')
     router.push('/admin')
   } catch (e) {
+    toastErr('用户名或密码不对')
     error.value = '用户名或密码不对'
   } finally {
     busy.value = false
@@ -27,6 +31,7 @@ async function submit() {
 </script>
 
 <template>
+  <ToastStack />
   <div class="page">
     <form class="card" @submit.prevent="submit">
       <p class="eyebrow">后台</p>
diff --git a/frontend/src/admin/PostsView.vue b/frontend/src/admin/PostsView.vue
index b333d43..37b9b9c 100644
--- a/frontend/src/admin/PostsView.vue
+++ b/frontend/src/admin/PostsView.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, onMounted, ref, watch } from 'vue'
+import { toastOk, toastErr } from './toast'
 import { useRoute, useRouter } from 'vue-router'
 import { adminApi } from '../api'
 import { formatDateShort, relativeDate } from '../utils'
@@ -125,7 +126,7 @@ async function bulk(action) {
     await adminApi.bulkPosts([...selected.value], action)
     await load()
   } catch (e) {
-    alert(e.message || '操作失败')
+    toastErr(e.message || '操作失败')
   }
 }
 
@@ -135,7 +136,7 @@ async function remove(id, title) {
     await adminApi.deletePost(id)
     await load()
   } catch (e) {
-    alert(e.message || '删除失败')
+    toastErr(e.message || '删除失败')
   }
 }
 
diff --git a/frontend/src/admin/ProjectsView.vue b/frontend/src/admin/ProjectsView.vue
index 63ea0d3..be5def7 100644
--- a/frontend/src/admin/ProjectsView.vue
+++ b/frontend/src/admin/ProjectsView.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { onMounted, ref } from 'vue'
+import { toastOk, toastErr } from './toast'
 import { adminApi } from '../api'
 
 const projects = ref([])
@@ -40,7 +41,7 @@ onMounted(load)
 
 async function create() {
   if (!form.value.title.trim()) {
-    alert('请填写作品名称')
+    toastErr('请填写作品名称')
     return
   }
   try {
@@ -56,7 +57,7 @@ async function create() {
     form.value = blank()
     await load()
   } catch (e) {
-    alert(e.message || '创建失败')
+    toastErr(e.message || '创建失败')
   }
 }
 
@@ -81,7 +82,7 @@ function cancelEdit() {
 
 async function saveEdit() {
   if (!draft.value.title.trim()) {
-    alert('请填写作品名称')
+    toastErr('请填写作品名称')
     return
   }
   try {
@@ -97,7 +98,7 @@ async function saveEdit() {
     editing.value = null
     await load()
   } catch (e) {
-    alert(e.message || '保存失败')
+    toastErr(e.message || '保存失败')
   }
 }
 
@@ -107,7 +108,7 @@ async function toggleStatus(p) {
     await adminApi.updateProject(p.id, { status: next })
     await load()
   } catch (e) {
-    alert(e.message || '更新失败')
+    toastErr(e.message || '更新失败')
   }
 }
 
@@ -117,7 +118,7 @@ async function remove(p) {
     await adminApi.deleteProject(p.id)
     await load()
   } catch (e) {
-    alert(e.message || '删除失败')
+    toastErr(e.message || '删除失败')
   }
 }
 </script>
diff --git a/frontend/src/admin/SettingsView.vue b/frontend/src/admin/SettingsView.vue
index 91a6cb9..f7f3608 100644
--- a/frontend/src/admin/SettingsView.vue
+++ b/frontend/src/admin/SettingsView.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue'
+import { toastOk, toastErr } from './toast'
 import { adminApi } from '../api'
 import { SKIN_CONSTANTS, UI_CONSTANTS } from '../site'
 import { SECTIONS } from '../ui/sections'
@@ -186,7 +187,9 @@ async function save() {
       }
     }
     savedAt.value = new Date().toLocaleTimeString('zh-CN', { hour12: false })
+    toastOk('设置已保存')
   } catch (e) {
+    toastErr('保存失败：' + (e.message || ''))
     error.value = e.message || '保存失败'
   } finally {
     saving.value = false
diff --git a/frontend/src/admin/TagsView.vue b/frontend/src/admin/TagsView.vue
index 5aaf725..8ae7112 100644
--- a/frontend/src/admin/TagsView.vue
+++ b/frontend/src/admin/TagsView.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { onMounted, ref } from 'vue'
+import { toastOk, toastErr } from './toast'
 import { adminApi } from '../api'
 
 const tags = ref([])
@@ -30,7 +31,7 @@ async function create() {
     newColor.value = ''
     await load()
   } catch (e) {
-    alert(e.message || '创建失败')
+    toastErr(e.message || '创建失败')
   }
 }
 
@@ -39,7 +40,7 @@ async function update(t) {
     await adminApi.updateTag(t.id, { name: t.name, color: t.color })
     await load()
   } catch (e) {
-    alert(e.message || '更新失败')
+    toastErr(e.message || '更新失败')
   }
 }
 
@@ -49,7 +50,7 @@ async function remove(t) {
     await adminApi.deleteTag(t.id)
     await load()
   } catch (e) {
-    alert(e.message || '删除失败')
+    toastErr(e.message || '删除失败')
   }
 }
 
@@ -69,7 +70,7 @@ function cancelMerge() {
 async function doMerge(fromTag) {
   const toId = Number(mergeInto.value)
   if (!toId || toId === fromTag.id) {
-    alert('选一个不同的目标标签')
+    toastErr('选一个不同的目标标签')
     return
   }
   if (!window.confirm(`把「${fromTag.name}」合并到选中的标签？此操作不可撤销。`)) return
@@ -78,7 +79,7 @@ async function doMerge(fromTag) {
     cancelMerge()
     await load()
   } catch (e) {
-    alert(e.message || '合并失败')
+    toastErr(e.message || '合并失败')
   }
 }
 </script>
diff --git a/frontend/src/admin/ToastStack.vue b/frontend/src/admin/ToastStack.vue
new file mode 100644
index 0000000..4545206
--- /dev/null
+++ b/frontend/src/admin/ToastStack.vue
@@ -0,0 +1,11 @@
+<script setup>
+// 后台共享 toast 的渲染层：挂在 AdminLayout（所有管理页）与 LoginView。
+// 样式在全局 styles.css（.toast-stack / .toast），与编辑器共用一份。
+import { toasts } from './toast'
+</script>
+
+<template>
+  <div class="toast-stack" aria-live="polite">
+    <div v-for="t in toasts" :key="t.id" class="toast" :class="t.type">{{ t.text }}</div>
+  </div>
+</template>
diff --git a/frontend/src/admin/toast.js b/frontend/src/admin/toast.js
new file mode 100644
index 0000000..7879da4
--- /dev/null
+++ b/frontend/src/admin/toast.js
@@ -0,0 +1,47 @@
+import { reactive } from 'vue'
+
+// 后台共享的轻提示：所有视图的操作反馈（成功/失败/进度）从这里发，
+// ToastStack.vue 负责渲染（挂在 AdminLayout 与 LoginView）。
+// EditorView 的上传/转存也走它——原先那套局部实现已并入。
+export const toasts = reactive([])
+let seq = 0
+
+export function toast(text, type = 'info', ttl = 2600) {
+  const id = ++seq
+  toasts.push({ id, text, type })
+  setTimeout(() => {
+    const i = toasts.findIndex((t) => t.id === id)
+    if (i >= 0) toasts.splice(i, 1)
+  }, ttl)
+  return id
+}
+
+export function toastOk(text) {
+  return toast(text, 'ok', 2200)
+}
+
+export function toastErr(text) {
+  return toast(text, 'err', 4200)
+}
+
+// 更新一条已存在的 toast（上传进度用）
+export function toastUpdate(id, text, type = 'info') {
+  const t = toasts.find((x) => x.id === id)
+  if (t) {
+    t.text = text
+    t.type = type
+  }
+}
+
+// 标记成功并很快消失（进度条收尾）
+export function toastDone(id, text) {
+  toastUpdate(id, text, 'ok')
+  const idx = toasts.findIndex((t) => t.id === id)
+  if (idx >= 0) {
+    const t = toasts[idx]
+    setTimeout(() => {
+      const i = toasts.indexOf(t)
+      if (i >= 0) toasts.splice(i, 1)
+    }, 1600)
+  }
+}