shumengya/cwd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 重构后台管理页面

Browse Source
This commit is contained in:
anghunk
2026-01-15 15:02:48 +08:00
parent 6c617f79e3
commit d9949bd8ad
4 changed files with 599 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/index.ts
View File

@@ -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;

201
src/views/admin.ts
View File

@@ -1,85 +1,93 @@
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">
<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">
<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); } }
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 flex-col">
<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">
<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>
<!-- 设置弹窗 -->
<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>
<!-- 导航栏 -->
<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>
<!-- 侧边栏 -->
<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>
<!-- 主内容 -->
<main class="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
<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>
@@ -114,26 +122,44 @@ export const AdminView = html`
</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">
<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"
<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">
<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">
<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">
@@ -150,18 +176,24 @@ export const AdminView = html`
<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> 页
第 <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
@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
@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>
@@ -182,19 +214,18 @@ export const AdminView = html`
apiKey: '',
config: {
baseUrl: localStorage.getItem('apiBaseUrl') || location.origin,
blogDomain: localStorage.getItem('blogDomain') || ''
blogDomain: localStorage.getItem('blogDomain') || '',
},
comments: [],
pagination: { page: 1, limit: 20, total: 1 },
toast: { show: false, message: '', type: 'success' },
showSettings: false
});
const showToast = (msg, type = 'success') => {
state.toast.message = msg;
state.toast.type = type;
state.toast.show = true;
setTimeout(() => state.toast.show = false, 3000);
setTimeout(() => (state.toast.show = false), 3000);
};
const formatDate = (dateString) => {
@@ -204,14 +235,15 @@ export const AdminView = html`
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 }
headers: { Authorization: state.apiKey },
});
const result = await response.json();
if (result.message === "Invalid key" || result.status === 401) {
if (result.message === 'Invalid key' || result.status === 401) {
logout();
return;
}
@@ -233,10 +265,10 @@ export const AdminView = html`
const url = \`\${state.config.baseUrl}/admin/comments/status?id=\${id}&status=\${newStatus}\`;
const response = await fetch(url, {
method: 'PUT',
headers: { 'Authorization': state.apiKey }
headers: { Authorization: state.apiKey },
});
if (response.ok) {
const comment = state.comments.find(c => c.id === id);
const comment = state.comments.find((c) => c.id === id);
if (comment) comment.status = newStatus;
showToast('状态更新成功');
} else {
@@ -256,7 +288,7 @@ export const AdminView = html`
const url = \`\${state.config.baseUrl}/admin/comments/delete?id=\${id}\`;
const response = await fetch(url, {
method: 'DELETE',
headers: { 'Authorization': state.apiKey }
headers: { Authorization: state.apiKey },
});
if (response.ok) {
showToast('删除成功');
@@ -280,12 +312,6 @@ export const AdminView = html`
window.location.href = '/login';
};
const saveSettings = () => {
localStorage.setItem('blogDomain', state.config.blogDomain);
state.showSettings = false;
showToast('设置已保存');
};
onMounted(() => {
const storedKey = localStorage.getItem('adminKey');
if (!storedKey) {
@@ -303,10 +329,9 @@ export const AdminView = html`
confirmDelete,
changePage,
logout,
saveSettings,
formatDate
formatDate,
};
}
},
}).mount('#app');
</script>
</body>

63
src/views/login.ts
View File

@@ -1,40 +1,69 @@
import { html } from "hono/html";
import { html } from 'hono/html';
export const LoginView = html`
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">
<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">
<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); } }
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">
<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">
<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">
<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">
<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>
@@ -52,9 +81,9 @@ export const LoginView = html`
loading: false,
error: '',
config: {
baseUrl: localStorage.getItem('apiBaseUrl') || location.origin
baseUrl: localStorage.getItem('apiBaseUrl') || location.origin,
},
loginForm: { name: '', password: '' }
loginForm: { name: '${isDev ? adminName : ''}', password: '${isDev ? adminPassword : ''}' },
});
const handleLogin = async () => {
@@ -66,7 +95,7 @@ export const LoginView = html`
const response = await fetch(\`\${state.config.baseUrl}/admin/login\`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(state.loginForm)
body: JSON.stringify(state.loginForm),
});
const resData = await response.json();
const key = resData.key || (resData.data && resData.data.key);
@@ -92,7 +121,7 @@ export const LoginView = html`
});
return { ...toRefs(state), handleLogin };
}
},
}).mount('#app');
</script>
</body>

130
src/views/settings.ts Normal file
View 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>
`;