XuJiacheng/Xu_BrowserBookmark
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加确认模态框组件并在多个页面中实现删除和退出确认功能

Browse Source
This commit is contained in:
徐
2026-01-19 10:00:21 +08:00
parent dbeb181e5d
commit 944836c748
10 changed files with 503 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
apps/web/src/App.vue
View File

@@ -2,6 +2,7 @@
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
import { RouterLink, RouterView, useRouter } from "vue-router";
import { ensureMe, setToken, tokenRef, userRef } from "./lib/api";
import BbModal from "./components/BbModal.vue";
const router = useRouter();
const loggedIn = computed(() => Boolean(tokenRef.value));
@@ -18,9 +19,37 @@ function closeMenu() {
}
async function logout() {
// kept for backward compatibility with template bindings; now opens custom modal
startLogout();
}
const logoutModalOpen = ref(false);
const logoutStep = ref(1);
function startLogout() {
logoutStep.value = 1;
logoutModalOpen.value = true;
closeMenu();
}
function cancelLogout() {
logoutModalOpen.value = false;
logoutStep.value = 1;
}
function onLogoutModalUpdate(v) {
if (!v) cancelLogout();
else logoutModalOpen.value = true;
}
async function confirmLogout() {
if (logoutStep.value === 1) {
logoutStep.value = 2;
return;
}
setToken("");
userRef.value = null;
closeMenu();
logoutModalOpen.value = false;
await router.push("/");
}
@@ -78,7 +107,7 @@ router.afterEach(() => {
</button>
<div v-if="menuOpen" class="menu" role="menu">
<RouterLink class="menuItem" to="/import" role="menuitem">导入 / 导出</RouterLink>
<RouterLink class="menuItem menuItem--import" to="/import" role="menuitem">导入 / 导出</RouterLink>
<RouterLink v-if="isAdmin" class="menuItem" to="/admin" role="menuitem">管理用户</RouterLink>
<button class="menuItem danger" type="button" role="menuitem" @click="logout">退出登录</button>
</div>
@@ -87,6 +116,18 @@ router.afterEach(() => {
</div>
</header>
<BbModal :model-value="logoutModalOpen" title="退出登录" max-width="520px" @update:model-value="onLogoutModalUpdate">
<div class="bb-muted" style="line-height: 1.6;">
{{ logoutStep === 1 ? '退出以后无法同步书签。' : '你确定要退出吗？' }}
</div>
<div class="bb-row" style="justify-content: flex-end; gap: 10px; margin-top: 14px;">
<button class="bb-btn bb-btn--secondary" type="button" @click="cancelLogout">取消</button>
<button class="bb-btn" :class="logoutStep === 2 ? 'bb-btn--danger' : ''" type="button" @click="confirmLogout">
{{ logoutStep === 1 ? '继续' : '确定退出' }}
</button>
</div>
</BbModal>
<main>
<RouterView />
</main>
@@ -137,4 +178,8 @@ router.afterEach(() => {
.menuItem + .menuItem { margin-top: 8px; }
.menuItem:hover { background: rgba(255,255,255,0.6); }
.menuItem.danger { color: #991b1b; background: rgba(254, 202, 202, 0.35); border-color: rgba(254, 202, 202, 0.6); }
@media (max-width: 640px) {
.menuItem--import { display: none; }
}
</style>

66
apps/web/src/pages/AdminPage.vue
View File

@@ -1,6 +1,7 @@
<script setup>
import { computed, onMounted, ref } from "vue";
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
import { apiFetch, ensureMe, userRef } from "../lib/api";
import BbModal from "../components/BbModal.vue";
const loadingUsers = ref(false);
const usersError = ref("");
@@ -22,6 +23,36 @@ const openFolderIds = ref(new Set());
const isAdmin = computed(() => userRef.value?.role === "admin");
const confirmOpen = ref(false);
const confirmTitle = ref("请确认");
const confirmMessage = ref("");
const confirmOkText = ref("确定");
const confirmDanger = ref(false);
let confirmResolve = null;
function askConfirm(message, { title = "请确认", okText = "确定", danger = false } = {}) {
confirmTitle.value = title;
confirmMessage.value = message;
confirmOkText.value = okText;
confirmDanger.value = danger;
confirmOpen.value = true;
return new Promise((resolve) => {
confirmResolve = resolve;
});
}
function resolveConfirm(result) {
const resolve = confirmResolve;
confirmResolve = null;
confirmOpen.value = false;
if (resolve) resolve(Boolean(result));
}
function onConfirmModalUpdate(v) {
if (!v) resolveConfirm(false);
else confirmOpen.value = true;
}
async function loadUsers() {
loadingUsers.value = true;
usersError.value = "";
@@ -62,6 +93,21 @@ async function loadBookmarks() {
}
}
let searchTimer = 0;
watch(
() => q.value,
() => {
window.clearTimeout(searchTimer);
searchTimer = window.setTimeout(() => {
loadBookmarks();
}, 200);
}
);
onBeforeUnmount(() => {
window.clearTimeout(searchTimer);
});
function selectUser(id) {
selectedUserId.value = id;
q.value = "";
@@ -152,7 +198,7 @@ function isFolderOpen(folderId) {
async function deleteBookmark(bookmarkId) {
if (!selectedUserId.value) return;
if (!confirm("确定删除该书签？")) return;
if (!(await askConfirm("确定删除该书签？", { title: "删除书签", okText: "删除", danger: true }))) return;
try {
await apiFetch(`/admin/users/${selectedUserId.value}/bookmarks/${bookmarkId}`, { method: "DELETE" });
await loadBookmarks();
@@ -163,7 +209,7 @@ async function deleteBookmark(bookmarkId) {
async function deleteFolder(folderId) {
if (!selectedUserId.value) return;
if (!confirm("确定删除该文件夹？子文件夹会一起删除，文件夹内书签会变成未分组。")) return;
if (!(await askConfirm("确定删除该文件夹？子文件夹会一起删除，文件夹内书签会变成未分组。", { title: "删除文件夹", okText: "删除", danger: true }))) return;
try {
await apiFetch(`/admin/users/${selectedUserId.value}/folders/${folderId}`, { method: "DELETE" });
await loadFolders();
@@ -240,8 +286,10 @@ onMounted(async () => {
</div>
<div class="bb-row" style="gap: 8px;">
<input v-model="q" class="bb-input bb-input--sm" placeholder="搜索标题/链接" @keyup.enter="loadBookmarks" />
<button class="bb-btn bb-btn--secondary" :disabled="loadingBookmarks" @click="loadBookmarks">搜索</button>
<div class="bb-searchWrap" style="min-width: 260px;">
<input v-model="q" class="bb-input bb-input--sm bb-input--withClear" placeholder="搜索标题/链接" />
<button v-if="q.trim()" class="bb-searchClear" type="button" aria-label="清空搜索" @click="q = ''">×</button>
</div>
</div>
</div>
@@ -326,6 +374,14 @@ onMounted(async () => {
</div>
</section>
</div>
<BbModal :model-value="confirmOpen" :title="confirmTitle" max-width="520px" @update:model-value="onConfirmModalUpdate">
<div class="bb-muted" style="white-space: pre-wrap; line-height: 1.6;">{{ confirmMessage }}</div>
<div class="bb-row" style="justify-content: flex-end; gap: 10px; margin-top: 14px;">
<button class="bb-btn bb-btn--secondary" type="button" @click="resolveConfirm(false)">取消</button>
<button class="bb-btn" :class="confirmDanger ? 'bb-btn--danger' : ''" type="button" @click="resolveConfirm(true)">{{ confirmOkText }}</button>
</div>
</BbModal>
</section>
</template>

63
apps/web/src/pages/MyPage.vue
View File

@@ -32,6 +32,36 @@ const addModalOpen = ref(false);
const folderModalOpen = ref(false);
const treeEl = ref(null);
const confirmOpen = ref(false);
const confirmTitle = ref("请确认");
const confirmMessage = ref("");
const confirmOkText = ref("确定");
const confirmDanger = ref(false);
let confirmResolve = null;
function askConfirm(message, { title = "请确认", okText = "确定", danger = false } = {}) {
confirmTitle.value = title;
confirmMessage.value = message;
confirmOkText.value = okText;
confirmDanger.value = danger;
confirmOpen.value = true;
return new Promise((resolve) => {
confirmResolve = resolve;
});
}
function resolveConfirm(result) {
const resolve = confirmResolve;
confirmResolve = null;
confirmOpen.value = false;
if (resolve) resolve(Boolean(result));
}
function onConfirmModalUpdate(v) {
if (!v) resolveConfirm(false);
else confirmOpen.value = true;
}
let folderSortable = null;
const bookmarkSortables = new Map();
@@ -275,13 +305,13 @@ async function saveFolder(id) {
async function removeFolder(id) {
try {
if (loggedIn.value) {
if (!confirm("确定删除该文件夹？文件夹内书签会移到『未分组』。")) return;
if (!(await askConfirm("确定删除该文件夹？文件夹内书签会移到『未分组』。", { title: "删除文件夹", okText: "删除", danger: true }))) return;
await apiFetch(`/folders/${id}`, { method: "DELETE" });
if (folderId.value === id) folderId.value = null;
await loadRemote();
return;
}
if (!confirm("确定删除该文件夹？文件夹内书签会移到『未分组』（本地）。")) return;
if (!(await askConfirm("确定删除该文件夹？文件夹内书签会移到『未分组』（本地）。", { title: "删除文件夹", okText: "删除", danger: true }))) return;
deleteLocalFolder(id);
if (folderId.value === id) folderId.value = null;
loadLocal();
@@ -476,7 +506,7 @@ async function syncSortables() {
}
async function remove(id) {
if (!confirm("确定删除该书签？")) return;
if (!(await askConfirm("确定删除该书签？", { title: "删除书签", okText: "删除", danger: true }))) return;
if (loggedIn.value) {
await apiFetch(`/bookmarks/${id}`, { method: "DELETE" });
await loadRemote();
@@ -549,6 +579,17 @@ onMounted(() => {
window.addEventListener("scroll", onWindowScroll, { passive: true });
});
let searchTimer = 0;
watch(
() => q.value,
() => {
window.clearTimeout(searchTimer);
searchTimer = window.setTimeout(() => {
reload();
}, 200);
}
);
watch([() => loggedIn.value, () => q.value, () => openFolderIds.value], () => {
// keep Sortable instances in sync with current DOM (open folders)
syncSortables();
@@ -556,6 +597,7 @@ watch([() => loggedIn.value, () => q.value, () => openFolderIds.value], () => {
onBeforeUnmount(() => {
destroySortables();
window.clearTimeout(searchTimer);
window.removeEventListener("scroll", onWindowScroll);
});
</script>
@@ -583,10 +625,9 @@ onBeforeUnmount(() => {
<div class="bb-card" style="margin-top: 12px;">
<div class="sectionTitle">快速搜索</div>
<div class="searchRow" style="margin-top: 10px;">
<input v-model="q" class="bb-input" placeholder="搜索标题/链接" @keyup.enter="reload" />
<div class="searchActions">
<button class="bb-btn bb-btn--secondary bb-btn--soft" :disabled="loading" @click="reload">搜索</button>
<button class="bb-btn bb-btn--secondary bb-btn--soft" :disabled="loading" @click="clearSearch">清除</button>
<div class="bb-searchWrap">
<input v-model="q" class="bb-input bb-input--withClear" placeholder="搜索标题/链接" />
<button v-if="q.trim()" class="bb-searchClear" type="button" aria-label="清空搜索" @click="q = ''">×</button>
</div>
</div>
</div>
@@ -616,6 +657,14 @@ onBeforeUnmount(() => {
</div>
</BbModal>
<BbModal :model-value="confirmOpen" :title="confirmTitle" max-width="520px" @update:model-value="onConfirmModalUpdate">
<div class="bb-muted" style="white-space: pre-wrap; line-height: 1.6;">{{ confirmMessage }}</div>
<div class="bb-row" style="justify-content: flex-end; gap: 10px; margin-top: 14px;">
<button class="bb-btn bb-btn--secondary" type="button" @click="resolveConfirm(false)">取消</button>
<button class="bb-btn" :class="confirmDanger ? 'bb-btn--danger' : ''" type="button" @click="resolveConfirm(true)">{{ confirmOkText }}</button>
</div>
</BbModal>
<p v-if="error" class="bb-alert bb-alert--error" style="margin-top: 12px;">{{ error }}</p>
<p v-if="loading" class="bb-muted">加载中…</p>

23
apps/web/src/pages/PublicPage.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { computed, onMounted, ref } from "vue";
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
import BbSelect from "../components/BbSelect.vue";
import BbModal from "../components/BbModal.vue";
import { apiFetch, tokenRef } from "../lib/api";
@@ -86,6 +86,21 @@ async function load() {
}
}
let searchTimer = 0;
watch(
() => q.value,
() => {
window.clearTimeout(searchTimer);
searchTimer = window.setTimeout(() => {
load();
}, 200);
}
);
onBeforeUnmount(() => {
window.clearTimeout(searchTimer);
});
onMounted(load);
onMounted(loadFolders);
</script>
@@ -107,8 +122,10 @@ onMounted(loadFolders);
<div class="bb-card" style="margin-top: 12px;">
<div class="bb-row">
<input v-model="q" class="bb-input" placeholder="搜索标题或链接" @keyup.enter="load" />
<button class="bb-btn bb-btn--secondary" :disabled="loading" @click="load">搜索</button>
<div class="bb-searchWrap">
<input v-model="q" class="bb-input bb-input--withClear" placeholder="搜索标题或链接" />
<button v-if="q.trim()" class="bb-searchClear" type="button" aria-label="清空搜索" @click="q = ''">×</button>
</div>
</div>
<p v-if="error" class="bb-alert bb-alert--error" style="margin-top: 12px;">{{ error }}</p>

34
apps/web/src/style.css
View File

@@ -120,6 +120,40 @@ input:focus-visible {
color: var(--bb-text);
}
.bb-searchWrap {
position: relative;
flex: 1;
min-width: 220px;
}
.bb-input.bb-input--withClear {
padding-right: 44px;
}
.bb-input.bb-input--sm.bb-input--withClear {
padding-right: 38px;
}
.bb-searchClear {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.55);
background: rgba(255,255,255,0.65);
cursor: pointer;
display: grid;
place-items: center;
color: rgba(19, 78, 74, 0.75);
}
.bb-searchClear:hover {
background: rgba(255,255,255,0.82);
}
/* Hide native file control (we use styled buttons) */
.bb-fileInput {
position: absolute;