refactor: 重构后台管理页面
This commit is contained in:
anghunk
61
src/index.ts
61
src/index.ts
@@ -1,44 +1,49 @@
|
||||
import { Hono } from 'hono'
|
||||
import { cors } from 'hono/cors'
|
||||
import { Bindings } from './bindings'
|
||||
import { LoginView } from './views/login'
|
||||
import { AdminView } from './views/admin'
|
||||
import { customCors } from './utils/cors'
|
||||
import { adminAuth } from './utils/auth'
|
||||
import { Hono } from 'hono';
|
||||
import { cors } from 'hono/cors';
|
||||
import { Bindings } from './bindings';
|
||||
import { loginView } from './views/login';
|
||||
import { AdminView } from './views/admin';
|
||||
import { SettingsView } from './views/settings';
|
||||
import { customCors } from './utils/cors';
|
||||
import { adminAuth } from './utils/auth';
|
||||
|
||||
import { getComments } from './api/public/getComments'
|
||||
import { postComment } from './api/public/postComment'
|
||||
import { adminLogin } from './api/admin/login'
|
||||
import { deleteComment } from './api/admin/deleteComment'
|
||||
import { listComments } from './api/admin/listComments'
|
||||
import { updateStatus } from './api/admin/updateStatus'
|
||||
import { getComments } from './api/public/getComments';
|
||||
import { postComment } from './api/public/postComment';
|
||||
import { adminLogin } from './api/admin/login';
|
||||
import { deleteComment } from './api/admin/deleteComment';
|
||||
import { listComments } from './api/admin/listComments';
|
||||
import { updateStatus } from './api/admin/updateStatus';
|
||||
|
||||
const app = new Hono<{ Bindings: Bindings }>()
|
||||
const app = new Hono<{ Bindings: Bindings }>();
|
||||
|
||||
// 跨域
|
||||
app.use('/api/*', async (c, next) => {
|
||||
const corsMiddleware = customCors(c.env.ALLOW_ORIGIN)
|
||||
return corsMiddleware(c, next)
|
||||
})
|
||||
const corsMiddleware = customCors(c.env.ALLOW_ORIGIN);
|
||||
return corsMiddleware(c, next);
|
||||
});
|
||||
app.use('/admin/*', async (c, next) => {
|
||||
const corsMiddleware = customCors(c.env.ALLOW_ORIGIN)
|
||||
return corsMiddleware(c, next)
|
||||
})
|
||||
const corsMiddleware = customCors(c.env.ALLOW_ORIGIN);
|
||||
return corsMiddleware(c, next);
|
||||
});
|
||||
|
||||
// 页面路由
|
||||
app.get('/', (c) => c.redirect('/login'))
|
||||
app.get('/login', (c) => c.html(LoginView))
|
||||
app.get('/admin', (c) => c.html(AdminView))
|
||||
app.get('/', (c) => c.redirect('/login'));
|
||||
app.get('/login', (c) => {
|
||||
const isDev = new URL(c.req.url).hostname === 'localhost';
|
||||
return c.html(loginView(isDev, c.env.ADMIN_NAME, c.env.ADMIN_PASSWORD));
|
||||
});
|
||||
app.get('/admin', (c) => c.html(AdminView));
|
||||
|
||||
app.get('/admin/settings', (c) => c.html(SettingsView));
|
||||
|
||||
// API
|
||||
app.get('/api/comments', getComments)
|
||||
app.post('/api/comments', postComment)
|
||||
app.get('/api/comments', getComments);
|
||||
app.post('/api/comments', postComment);
|
||||
|
||||
app.post('/admin/login', adminLogin)
|
||||
app.use('/admin/*', adminAuth)
|
||||
app.post('/admin/login', adminLogin);
|
||||
app.use('/admin/*', adminAuth);
|
||||
app.delete('/admin/comments/delete', deleteComment);
|
||||
app.get('/admin/comments/list', listComments);
|
||||
app.put('/admin/comments/status', updateStatus);
|
||||
|
||||
export default app
|
||||
export default app;
|
||||
|
||||
@@ -1,314 +1,339 @@
|
||||
import { html } from "hono/html";
|
||||
import { html } from 'hono/html';
|
||||
|
||||
export const AdminView = html`
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CWD 评论后台管理系统</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
|
||||
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
|
||||
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
||||
.loader { border-top-color: #3498db; animation: spinner 1.5s linear infinite; }
|
||||
@keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100 text-gray-800">
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CWD 评论后台管理系统</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.loader {
|
||||
border-top-color: #3498db;
|
||||
animation: spinner 1.5s linear infinite;
|
||||
}
|
||||
@keyframes spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
aside {
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100 text-gray-800">
|
||||
<div id="app" class="min-h-screen flex">
|
||||
<!-- Toast -->
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="toast.show"
|
||||
:class="toast.type === 'error' ? 'bg-red-500' : 'bg-green-500'"
|
||||
class="fixed top-4 right-4 text-white px-6 py-3 rounded shadow-lg z-50 flex items-center"
|
||||
>
|
||||
<i :class="toast.type === 'error' ? 'fa-circle-exclamation' : 'fa-check-circle'" class="fa-solid mr-2"></i>
|
||||
{{ toast.message }}
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<div id="app" class="min-h-screen flex flex-col">
|
||||
<!-- Toast -->
|
||||
<transition name="fade">
|
||||
<div v-if="toast.show" :class="toast.type === 'error' ? 'bg-red-500' : 'bg-green-500'"
|
||||
class="fixed top-4 right-4 text-white px-6 py-3 rounded shadow-lg z-50 flex items-center">
|
||||
<i :class="toast.type === 'error' ? 'fa-circle-exclamation' : 'fa-check-circle'" class="fa-solid mr-2"></i>
|
||||
{{ toast.message }}
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="w-64 bg-white shadow-lg flex flex-col min-h-screen">
|
||||
<div class="p-4 border-b">
|
||||
<h1 class="text-xl font-bold text-blue-600">CWD 评论系统</h1>
|
||||
<p class="text-xs text-gray-400 mt-1 truncate">{{ config.baseUrl }}</p>
|
||||
</div>
|
||||
<nav class="flex-1 p-4">
|
||||
<a href="/admin" class="flex items-center px-4 py-3 rounded-lg mb-2 bg-blue-50 text-blue-600 transition">
|
||||
<i class="fa-solid fa-comments w-5"></i>
|
||||
<span class="ml-3">评论管理</span>
|
||||
</a>
|
||||
<a href="/admin/settings" class="flex items-center px-4 py-3 rounded-lg mb-2 text-gray-600 hover:bg-gray-50 transition">
|
||||
<i class="fa-solid fa-gear w-5"></i>
|
||||
<span class="ml-3">设置</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="p-4 border-t">
|
||||
<button @click="logout" class="flex items-center w-full px-4 py-3 rounded-lg text-red-500 hover:bg-red-50 transition">
|
||||
<i class="fa-solid fa-sign-out-alt w-5"></i>
|
||||
<span class="ml-3">退出登录</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 设置弹窗 -->
|
||||
<transition name="fade">
|
||||
<div v-if="showSettings" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-40" @click.self="showSettings = false">
|
||||
<div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-bold text-gray-700">设置</h3>
|
||||
<button @click="showSettings = false" class="text-gray-400 hover:text-gray-600">
|
||||
<i class="fa-solid fa-xmark text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">博客域名前缀</label>
|
||||
<input v-model="config.blogDomain" type="text" placeholder="例如: https://example.com"
|
||||
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<p class="text-xs text-gray-500 mt-1">设置后，文章链接将自动拼接此前缀</p>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button @click="saveSettings" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
||||
保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 主内容 -->
|
||||
<main class="flex-1 p-8 overflow-auto">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-bold text-gray-700">评论管理</h2>
|
||||
<button @click="fetchComments(pagination.page)" class="text-gray-600 hover:text-blue-600">
|
||||
<i class="fa-solid fa-rotate-right mr-1"></i> 刷新
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="loading && comments.length === 0" class="flex justify-center items-center h-64">
|
||||
<div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<nav class="bg-white shadow-sm">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex items-center">
|
||||
<span class="text-xl font-bold text-blue-600">CWD 评论管理系统</span>
|
||||
<span class="ml-4 text-xs text-gray-400 bg-gray-100 px-2 py-1 rounded">{{ config.baseUrl }}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<button @click="fetchComments(pagination.page)" class="mr-4 text-gray-600 hover:text-blue-600">
|
||||
<i class="fa-solid fa-rotate-right"></i> 刷新
|
||||
</button>
|
||||
<button @click="showSettings = true" class="mr-4 text-gray-600 hover:text-blue-600">
|
||||
<i class="fa-solid fa-gear"></i> 设置
|
||||
</button>
|
||||
<button @click="logout" class="text-red-500 hover:text-red-700 font-medium">
|
||||
<i class="fa-solid fa-sign-out-alt"></i> 退出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div v-if="loading && comments.length === 0" class="flex justify-center items-center h-64">
|
||||
<div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12"></div>
|
||||
</div>
|
||||
|
||||
<div v-else class="bg-white shadow overflow-hidden sm:rounded-lg">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">信息</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/2">内容</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tr v-if="comments.length === 0">
|
||||
<td colspan="4" class="px-6 py-10 text-center text-gray-500">暂无评论数据</td>
|
||||
</tr>
|
||||
<tr v-for="comment in comments" :key="comment.id" class="hover:bg-gray-50 transition">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<div>
|
||||
<span class="text-sm font-medium text-gray-900" v-text="comment.author"></span>
|
||||
<span class="text-sm text-gray-500"> (<em class="text-xs" v-text="comment.email"></em>)</span>
|
||||
</div>
|
||||
<a class="text-xs text-blue-500 hover:underline" :href="comment.url">{{ comment.url }}</a>
|
||||
<div class="text-xs text-gray-400 mt-1">IP: <em v-text="comment.ipAddress"></em></div>
|
||||
<div class="text-xs text-gray-400">{{ formatDate(comment.pubDate) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="text-sm text-gray-900 break-words whitespace-pre-wrap max-h-32 overflow-y-auto" v-text="comment.contentText"></div>
|
||||
<a v-if="comment.postSlug" :href="config.blogDomain + comment.postSlug" target="_blank" class="text-xs text-blue-500 hover:underline mt-1 inline-block">
|
||||
{{ config.blogDomain + comment.postSlug }}
|
||||
</a>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
|
||||
:class="{
|
||||
<div v-else class="bg-white shadow overflow-hidden sm:rounded-lg">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">信息</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/2">内容</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tr v-if="comments.length === 0">
|
||||
<td colspan="4" class="px-6 py-10 text-center text-gray-500">暂无评论数据</td>
|
||||
</tr>
|
||||
<tr v-for="comment in comments" :key="comment.id" class="hover:bg-gray-50 transition">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<div>
|
||||
<span class="text-sm font-medium text-gray-900" v-text="comment.author"></span>
|
||||
<span class="text-sm text-gray-500"> (<em class="text-xs" v-text="comment.email"></em>)</span>
|
||||
</div>
|
||||
<a class="text-xs text-blue-500 hover:underline" :href="comment.url">{{ comment.url }}</a>
|
||||
<div class="text-xs text-gray-400 mt-1">IP: <em v-text="comment.ipAddress"></em></div>
|
||||
<div class="text-xs text-gray-400">{{ formatDate(comment.pubDate) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div
|
||||
class="text-sm text-gray-900 break-words whitespace-pre-wrap max-h-32 overflow-y-auto"
|
||||
v-text="comment.contentText"
|
||||
></div>
|
||||
<a
|
||||
v-if="comment.postSlug"
|
||||
:href="config.blogDomain + comment.postSlug"
|
||||
target="_blank"
|
||||
class="text-xs text-blue-500 hover:underline mt-1 inline-block"
|
||||
>
|
||||
{{ config.blogDomain + comment.postSlug }}
|
||||
</a>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
|
||||
:class="{
|
||||
'bg-green-100 text-green-800': comment.status === 'approved',
|
||||
'bg-yellow-100 text-yellow-800': comment.status === 'pending',
|
||||
'bg-red-100 text-red-800': ['spam', 'rejected', 'deleted'].includes(comment.status)
|
||||
}">
|
||||
{{ comment.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<button v-if="comment.status !== 'approved'" @click="updateStatus(comment.id, 'approved')" class="text-green-600 hover:text-green-900 mr-3">
|
||||
<i class="fa-solid fa-check mr-1"></i>显示
|
||||
</button>
|
||||
<button v-if="comment.status === 'approved'" @click="updateStatus(comment.id, 'pending')" class="text-yellow-600 hover:text-yellow-900 mr-3">
|
||||
<i class="fa-solid fa-ban mr-1"></i>隐藏
|
||||
</button>
|
||||
<button @click="confirmDelete(comment.id)" class="text-red-600 hover:text-red-900">
|
||||
<i class="fa-solid fa-trash mr-1"></i>删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}"
|
||||
>
|
||||
{{ comment.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<button
|
||||
v-if="comment.status !== 'approved'"
|
||||
@click="updateStatus(comment.id, 'approved')"
|
||||
class="text-green-600 hover:text-green-900 mr-3"
|
||||
>
|
||||
<i class="fa-solid fa-check mr-1"></i>显示
|
||||
</button>
|
||||
<button
|
||||
v-if="comment.status === 'approved'"
|
||||
@click="updateStatus(comment.id, 'pending')"
|
||||
class="text-yellow-600 hover:text-yellow-900 mr-3"
|
||||
>
|
||||
<i class="fa-solid fa-ban mr-1"></i>隐藏
|
||||
</button>
|
||||
<button @click="confirmDelete(comment.id)" class="text-red-600 hover:text-red-900">
|
||||
<i class="fa-solid fa-trash mr-1"></i>删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-700">
|
||||
第 <span class="font-medium">{{ pagination.page }}</span> 页，
|
||||
共 <span class="font-medium">{{ pagination.total }}</span> 页
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
|
||||
<button @click="changePage(pagination.page - 1)" :disabled="pagination.page === 1"
|
||||
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
上一页
|
||||
</button>
|
||||
<button @click="changePage(pagination.page + 1)" :disabled="pagination.page >= pagination.total"
|
||||
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
下一页
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-700">
|
||||
第 <span class="font-medium">{{ pagination.page }}</span> 页， 共
|
||||
<span class="font-medium">{{ pagination.total }}</span> 页
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
|
||||
<button
|
||||
@click="changePage(pagination.page - 1)"
|
||||
:disabled="pagination.page === 1"
|
||||
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
上一页
|
||||
</button>
|
||||
<button
|
||||
@click="changePage(pagination.page + 1)"
|
||||
:disabled="pagination.page >= pagination.total"
|
||||
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
下一页
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp, reactive, toRefs, onMounted } = Vue;
|
||||
<script>
|
||||
const { createApp, reactive, toRefs, onMounted } = Vue;
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
apiKey: '',
|
||||
config: {
|
||||
baseUrl: localStorage.getItem('apiBaseUrl') || location.origin,
|
||||
blogDomain: localStorage.getItem('blogDomain') || ''
|
||||
},
|
||||
comments: [],
|
||||
pagination: { page: 1, limit: 20, total: 1 },
|
||||
toast: { show: false, message: '', type: 'success' },
|
||||
showSettings: false
|
||||
});
|
||||
createApp({
|
||||
setup() {
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
apiKey: '',
|
||||
config: {
|
||||
baseUrl: localStorage.getItem('apiBaseUrl') || location.origin,
|
||||
blogDomain: localStorage.getItem('blogDomain') || '',
|
||||
},
|
||||
comments: [],
|
||||
pagination: { page: 1, limit: 20, total: 1 },
|
||||
toast: { show: false, message: '', type: 'success' },
|
||||
});
|
||||
|
||||
const showToast = (msg, type = 'success') => {
|
||||
state.toast.message = msg;
|
||||
state.toast.type = type;
|
||||
state.toast.show = true;
|
||||
setTimeout(() => state.toast.show = false, 3000);
|
||||
};
|
||||
const showToast = (msg, type = 'success') => {
|
||||
state.toast.message = msg;
|
||||
state.toast.type = type;
|
||||
state.toast.show = true;
|
||||
setTimeout(() => (state.toast.show = false), 3000);
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return '';
|
||||
return new Date(dateString).toLocaleString('zh-CN', { hour12: false });
|
||||
};
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return '';
|
||||
return new Date(dateString).toLocaleString('zh-CN', { hour12: false });
|
||||
};
|
||||
|
||||
const fetchComments = async (page = 1) => {
|
||||
state.loading = true;
|
||||
try {
|
||||
const url = \`\${state.config.baseUrl}/admin/comments/list?page=\${page}\`;
|
||||
const response = await fetch(url, {
|
||||
headers: { 'Authorization': state.apiKey }
|
||||
});
|
||||
const result = await response.json();
|
||||
const fetchComments = async (page = 1) => {
|
||||
state.loading = true;
|
||||
state.comments = [];
|
||||
try {
|
||||
const url = \`\${state.config.baseUrl}/admin/comments/list?page=\${page}\`;
|
||||
const response = await fetch(url, {
|
||||
headers: { Authorization: state.apiKey },
|
||||
});
|
||||
const result = await response.json();
|
||||
|
||||
if (result.message === "Invalid key" || result.status === 401) {
|
||||
logout();
|
||||
return;
|
||||
}
|
||||
if (result.message === 'Invalid key' || result.status === 401) {
|
||||
logout();
|
||||
return;
|
||||
}
|
||||
|
||||
state.comments = result.data || [];
|
||||
state.pagination = result.pagination || { page, limit: 10, total: 1 };
|
||||
showToast('刷新成功');
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
showToast('获取数据失败', 'error');
|
||||
} finally {
|
||||
state.loading = false;
|
||||
}
|
||||
};
|
||||
state.comments = result.data || [];
|
||||
state.pagination = result.pagination || { page, limit: 10, total: 1 };
|
||||
showToast('刷新成功');
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
showToast('获取数据失败', 'error');
|
||||
} finally {
|
||||
state.loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
const updateStatus = async (id, newStatus) => {
|
||||
state.loading = true;
|
||||
try {
|
||||
const url = \`\${state.config.baseUrl}/admin/comments/status?id=\${id}&status=\${newStatus}\`;
|
||||
const response = await fetch(url, {
|
||||
method: 'PUT',
|
||||
headers: { 'Authorization': state.apiKey }
|
||||
});
|
||||
if (response.ok) {
|
||||
const comment = state.comments.find(c => c.id === id);
|
||||
if (comment) comment.status = newStatus;
|
||||
showToast('状态更新成功');
|
||||
} else {
|
||||
showToast('更新失败', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showToast('请求失败', 'error');
|
||||
} finally {
|
||||
state.loading = false;
|
||||
}
|
||||
};
|
||||
const updateStatus = async (id, newStatus) => {
|
||||
state.loading = true;
|
||||
try {
|
||||
const url = \`\${state.config.baseUrl}/admin/comments/status?id=\${id}&status=\${newStatus}\`;
|
||||
const response = await fetch(url, {
|
||||
method: 'PUT',
|
||||
headers: { Authorization: state.apiKey },
|
||||
});
|
||||
if (response.ok) {
|
||||
const comment = state.comments.find((c) => c.id === id);
|
||||
if (comment) comment.status = newStatus;
|
||||
showToast('状态更新成功');
|
||||
} else {
|
||||
showToast('更新失败', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showToast('请求失败', 'error');
|
||||
} finally {
|
||||
state.loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
const confirmDelete = async (id) => {
|
||||
if (!confirm('确定删除？')) return;
|
||||
state.loading = true;
|
||||
try {
|
||||
const url = \`\${state.config.baseUrl}/admin/comments/delete?id=\${id}\`;
|
||||
const response = await fetch(url, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': state.apiKey }
|
||||
});
|
||||
if (response.ok) {
|
||||
showToast('删除成功');
|
||||
fetchComments(state.pagination.page);
|
||||
} else {
|
||||
showToast('删除失败', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showToast('请求失败', 'error');
|
||||
} finally {
|
||||
state.loading = false;
|
||||
}
|
||||
};
|
||||
const confirmDelete = async (id) => {
|
||||
if (!confirm('确定删除？')) return;
|
||||
state.loading = true;
|
||||
try {
|
||||
const url = \`\${state.config.baseUrl}/admin/comments/delete?id=\${id}\`;
|
||||
const response = await fetch(url, {
|
||||
method: 'DELETE',
|
||||
headers: { Authorization: state.apiKey },
|
||||
});
|
||||
if (response.ok) {
|
||||
showToast('删除成功');
|
||||
fetchComments(state.pagination.page);
|
||||
} else {
|
||||
showToast('删除失败', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showToast('请求失败', 'error');
|
||||
} finally {
|
||||
state.loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
const changePage = (page) => {
|
||||
if (page > 0) fetchComments(page);
|
||||
};
|
||||
const changePage = (page) => {
|
||||
if (page > 0) fetchComments(page);
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
localStorage.removeItem('adminKey');
|
||||
window.location.href = '/login';
|
||||
};
|
||||
const logout = () => {
|
||||
localStorage.removeItem('adminKey');
|
||||
window.location.href = '/login';
|
||||
};
|
||||
|
||||
const saveSettings = () => {
|
||||
localStorage.setItem('blogDomain', state.config.blogDomain);
|
||||
state.showSettings = false;
|
||||
showToast('设置已保存');
|
||||
};
|
||||
onMounted(() => {
|
||||
const storedKey = localStorage.getItem('adminKey');
|
||||
if (!storedKey) {
|
||||
window.location.href = '/login';
|
||||
return;
|
||||
}
|
||||
state.apiKey = storedKey;
|
||||
fetchComments();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
const storedKey = localStorage.getItem('adminKey');
|
||||
if (!storedKey) {
|
||||
window.location.href = '/login';
|
||||
return;
|
||||
}
|
||||
state.apiKey = storedKey;
|
||||
fetchComments();
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
fetchComments,
|
||||
updateStatus,
|
||||
confirmDelete,
|
||||
changePage,
|
||||
logout,
|
||||
saveSettings,
|
||||
formatDate
|
||||
};
|
||||
}
|
||||
}).mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
return {
|
||||
...toRefs(state),
|
||||
fetchComments,
|
||||
updateStatus,
|
||||
confirmDelete,
|
||||
changePage,
|
||||
logout,
|
||||
formatDate,
|
||||
};
|
||||
},
|
||||
}).mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
@@ -1,100 +1,129 @@
|
||||
import { html } from "hono/html";
|
||||
import { html } from 'hono/html';
|
||||
|
||||
export const LoginView = html`
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>登录 - CWD 评论后台</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
|
||||
.loader { border-top-color: #3498db; animation: spinner 1.5s linear infinite; }
|
||||
@keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100 text-gray-800">
|
||||
export const loginView = (isDev: boolean, adminName?: string, adminPassword?: string) => html`
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>登录 - CWD 评论后台</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
.loader {
|
||||
border-top-color: #3498db;
|
||||
animation: spinner 1.5s linear infinite;
|
||||
}
|
||||
@keyframes spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100 text-gray-800">
|
||||
<div id="app" class="min-h-screen flex items-center justify-center px-4">
|
||||
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
|
||||
<h2 class="text-2xl font-bold mb-6 text-center text-gray-700">管理员登录</h2>
|
||||
<form @submit.prevent="handleLogin">
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">接口地址</label>
|
||||
<input
|
||||
v-model="config.baseUrl"
|
||||
type="text"
|
||||
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">用户名</label>
|
||||
<input
|
||||
v-model="loginForm.name"
|
||||
type="text"
|
||||
required
|
||||
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">密码</label>
|
||||
<input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
required
|
||||
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
:disabled="loading"
|
||||
type="submit"
|
||||
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none transition duration-300 flex justify-center items-center"
|
||||
>
|
||||
<span v-if="loading" class="loader ease-linear rounded-full border-2 border-t-2 border-gray-200 h-5 w-5 mr-2"></span>
|
||||
{{ loading ? '登录中...' : '登录' }}
|
||||
</button>
|
||||
</form>
|
||||
<p v-if="error" class="mt-4 text-red-500 text-sm text-center">{{ error }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="app" class="min-h-screen flex items-center justify-center px-4">
|
||||
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
|
||||
<h2 class="text-2xl font-bold mb-6 text-center text-gray-700">管理员登录</h2>
|
||||
<form @submit.prevent="handleLogin">
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">接口地址</label>
|
||||
<input v-model="config.baseUrl" type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">用户名</label>
|
||||
<input v-model="loginForm.name" type="text" required class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">密码</label>
|
||||
<input v-model="loginForm.password" type="password" required class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
<button :disabled="loading" type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none transition duration-300 flex justify-center items-center">
|
||||
<span v-if="loading" class="loader ease-linear rounded-full border-2 border-t-2 border-gray-200 h-5 w-5 mr-2"></span>
|
||||
{{ loading ? '登录中...' : '登录' }}
|
||||
</button>
|
||||
</form>
|
||||
<p v-if="error" class="mt-4 text-red-500 text-sm text-center">{{ error }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const { createApp, reactive, toRefs, onMounted } = Vue;
|
||||
|
||||
<script>
|
||||
const { createApp, reactive, toRefs, onMounted } = Vue;
|
||||
createApp({
|
||||
setup() {
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
error: '',
|
||||
config: {
|
||||
baseUrl: localStorage.getItem('apiBaseUrl') || location.origin,
|
||||
},
|
||||
loginForm: { name: '${isDev ? adminName : ''}', password: '${isDev ? adminPassword : ''}' },
|
||||
});
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
error: '',
|
||||
config: {
|
||||
baseUrl: localStorage.getItem('apiBaseUrl') || location.origin
|
||||
},
|
||||
loginForm: { name: '', password: '' }
|
||||
});
|
||||
const handleLogin = async () => {
|
||||
state.loading = true;
|
||||
state.error = '';
|
||||
localStorage.setItem('apiBaseUrl', state.config.baseUrl);
|
||||
|
||||
const handleLogin = async () => {
|
||||
state.loading = true;
|
||||
state.error = '';
|
||||
localStorage.setItem('apiBaseUrl', state.config.baseUrl);
|
||||
try {
|
||||
const response = await fetch(\`\${state.config.baseUrl}/admin/login\`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(state.loginForm),
|
||||
});
|
||||
const resData = await response.json();
|
||||
const key = resData.key || (resData.data && resData.data.key);
|
||||
|
||||
try {
|
||||
const response = await fetch(\`\${state.config.baseUrl}/admin/login\`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(state.loginForm)
|
||||
});
|
||||
const resData = await response.json();
|
||||
const key = resData.key || (resData.data && resData.data.key);
|
||||
if (key) {
|
||||
localStorage.setItem('adminKey', key);
|
||||
window.location.href = '/admin';
|
||||
} else {
|
||||
state.error = resData.message || '登录失败';
|
||||
}
|
||||
} catch (error) {
|
||||
state.error = '网络错误';
|
||||
} finally {
|
||||
state.loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
if (key) {
|
||||
localStorage.setItem('adminKey', key);
|
||||
window.location.href = '/admin';
|
||||
} else {
|
||||
state.error = resData.message || '登录失败';
|
||||
}
|
||||
} catch (error) {
|
||||
state.error = '网络错误';
|
||||
} finally {
|
||||
state.loading = false;
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
const storedKey = localStorage.getItem('adminKey');
|
||||
if (storedKey) {
|
||||
window.location.href = '/admin';
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
const storedKey = localStorage.getItem('adminKey');
|
||||
if (storedKey) {
|
||||
window.location.href = '/admin';
|
||||
}
|
||||
});
|
||||
|
||||
return { ...toRefs(state), handleLogin };
|
||||
}
|
||||
}).mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
return { ...toRefs(state), handleLogin };
|
||||
},
|
||||
}).mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
130
src/views/settings.ts
Normal file
130
src/views/settings.ts
Normal file
@@ -0,0 +1,130 @@
|
||||
import { html } from 'hono/html';
|
||||
|
||||
export const SettingsView = html`
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>设置 - CWD 评论后台</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
aside {
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100 text-gray-800">
|
||||
<div id="app" class="min-h-screen flex">
|
||||
<!-- Toast -->
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="toast.show"
|
||||
:class="toast.type === 'error' ? 'bg-red-500' : 'bg-green-500'"
|
||||
class="fixed top-4 right-4 text-white px-6 py-3 rounded shadow-lg z-50 flex items-center"
|
||||
>
|
||||
<i :class="toast.type === 'error' ? 'fa-circle-exclamation' : 'fa-check-circle'" class="fa-solid mr-2"></i>
|
||||
{{ toast.message }}
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="w-64 bg-white shadow-lg flex flex-col min-h-screen">
|
||||
<div class="p-4 border-b">
|
||||
<h1 class="text-xl font-bold text-blue-600">CWD 评论系统</h1>
|
||||
<p class="text-xs text-gray-400 mt-1 truncate">{{ config.baseUrl }}</p>
|
||||
</div>
|
||||
<nav class="flex-1 p-4">
|
||||
<a href="/admin" class="flex items-center px-4 py-3 rounded-lg mb-2 text-gray-600 hover:bg-gray-50 transition">
|
||||
<i class="fa-solid fa-comments w-5"></i>
|
||||
<span class="ml-3">评论管理</span>
|
||||
</a>
|
||||
<a href="/admin/settings" class="flex items-center px-4 py-3 rounded-lg mb-2 bg-blue-50 text-blue-600 transition">
|
||||
<i class="fa-solid fa-gear w-5"></i>
|
||||
<span class="ml-3">设置</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="p-4 border-t">
|
||||
<button @click="logout" class="flex items-center w-full px-4 py-3 rounded-lg text-red-500 hover:bg-red-50 transition">
|
||||
<i class="fa-solid fa-sign-out-alt w-5"></i>
|
||||
<span class="ml-3">退出登录</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="flex-1 p-8 overflow-auto">
|
||||
<h2 class="text-2xl font-bold text-gray-700 mb-6">设置</h2>
|
||||
<div class="bg-white shadow rounded-lg p-6 max-w-xl">
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">博客域名前缀</label>
|
||||
<input
|
||||
v-model="settingsForm.blogDomain"
|
||||
type="text"
|
||||
placeholder="例如: https://example.com"
|
||||
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<p class="text-xs text-gray-500 mt-1">设置后，文章链接将自动拼接此前缀</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button @click="saveSettings" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">确认保存</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp, reactive, toRefs, onMounted } = Vue;
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const state = reactive({
|
||||
config: { baseUrl: localStorage.getItem('apiBaseUrl') || location.origin },
|
||||
settingsForm: { blogDomain: localStorage.getItem('blogDomain') || '' },
|
||||
toast: { show: false, message: '', type: 'success' },
|
||||
});
|
||||
|
||||
const showToast = (msg, type = 'success') => {
|
||||
state.toast = { show: true, message: msg, type };
|
||||
setTimeout(() => (state.toast.show = false), 3000);
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
localStorage.removeItem('adminKey');
|
||||
window.location.href = '/login';
|
||||
};
|
||||
|
||||
const saveSettings = () => {
|
||||
localStorage.setItem('blogDomain', state.settingsForm.blogDomain);
|
||||
showToast('设置已保存');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (!localStorage.getItem('adminKey')) {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
});
|
||||
|
||||
return { ...toRefs(state), logout, saveSettings };
|
||||
},
|
||||
}).mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
Reference in New Issue
Block a user