feat: 新增CWD评论系统前后端代码及文档
refactor: 移除旧版评论系统代码并重构为Vue3前端 docs: 更新后端配置文档说明 fix: 修复评论提交频率限制和邮件通知逻辑 style: 格式化代码并优化样式 test: 添加Vitest测试配置 build: 更新依赖项和构建配置 chore: 清理无用文件和缓存
This commit is contained in:
anghunk
23
cwd-comments-admin/src/App.vue
Normal file
23
cwd-comments-admin/src/App.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="app-root">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#app,
|
||||
.app-root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
|
||||
65
cwd-comments-admin/src/api/admin.ts
Normal file
65
cwd-comments-admin/src/api/admin.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
import { get, post, put, del } from './http';
|
||||
|
||||
export type AdminLoginResponse = {
|
||||
data: {
|
||||
key: string;
|
||||
};
|
||||
};
|
||||
|
||||
export type CommentItem = {
|
||||
id: number;
|
||||
pubDate: string;
|
||||
author: string;
|
||||
email: string;
|
||||
postSlug: string;
|
||||
url: string | null;
|
||||
ipAddress: string | null;
|
||||
contentText: string;
|
||||
contentHtml: string;
|
||||
status: string;
|
||||
};
|
||||
|
||||
export type CommentListResponse = {
|
||||
data: CommentItem[];
|
||||
pagination: {
|
||||
page: number;
|
||||
limit: number;
|
||||
total: number;
|
||||
};
|
||||
};
|
||||
|
||||
export type AdminEmailResponse = {
|
||||
email: string | null;
|
||||
};
|
||||
|
||||
export async function loginAdmin(name: string, password: string): Promise<string> {
|
||||
const res = await post<AdminLoginResponse>('/admin/login', { name, password });
|
||||
const key = res.data.key;
|
||||
localStorage.setItem('cwd_admin_token', key);
|
||||
return key;
|
||||
}
|
||||
|
||||
export function logoutAdmin(): void {
|
||||
localStorage.removeItem('cwd_admin_token');
|
||||
}
|
||||
|
||||
export function fetchComments(page: number): Promise<CommentListResponse> {
|
||||
return get<CommentListResponse>(`/admin/comments/list?page=${page}`);
|
||||
}
|
||||
|
||||
export function deleteComment(id: number): Promise<{ message: string }> {
|
||||
return del<{ message: string }>(`/admin/comments/delete?id=${id}`);
|
||||
}
|
||||
|
||||
export function updateCommentStatus(id: number, status: string): Promise<{ message: string }> {
|
||||
return put<{ message: string }>(`/admin/comments/status?id=${id}&status=${encodeURIComponent(status)}`);
|
||||
}
|
||||
|
||||
export function fetchAdminEmail(): Promise<AdminEmailResponse> {
|
||||
return get<AdminEmailResponse>('/admin/settings/email');
|
||||
}
|
||||
|
||||
export function saveAdminEmail(email: string): Promise<{ message: string }> {
|
||||
return put<{ message: string }>('/admin/settings/email', { email });
|
||||
}
|
||||
|
||||
47
cwd-comments-admin/src/api/http.ts
Normal file
47
cwd-comments-admin/src/api/http.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, '');
|
||||
|
||||
type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
|
||||
|
||||
async function request<T>(method: HttpMethod, path: string, body?: unknown): Promise<T> {
|
||||
const token = localStorage.getItem('cwd_admin_token');
|
||||
const headers: HeadersInit = {};
|
||||
if (body !== undefined) {
|
||||
headers['Content-Type'] = 'application/json';
|
||||
}
|
||||
if (token) {
|
||||
headers['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
const res = await fetch(`${API_BASE_URL}${path}`, {
|
||||
method,
|
||||
headers,
|
||||
body: body !== undefined ? JSON.stringify(body) : undefined
|
||||
});
|
||||
let data: any = null;
|
||||
try {
|
||||
data = await res.json();
|
||||
} catch {
|
||||
data = null;
|
||||
}
|
||||
if (!res.ok) {
|
||||
const message = data && data.message ? data.message : `请求失败，状态码 ${res.status}`;
|
||||
throw new Error(message);
|
||||
}
|
||||
return data as T;
|
||||
}
|
||||
|
||||
export function get<T>(path: string): Promise<T> {
|
||||
return request<T>('GET', path);
|
||||
}
|
||||
|
||||
export function post<T>(path: string, body?: unknown): Promise<T> {
|
||||
return request<T>('POST', path, body);
|
||||
}
|
||||
|
||||
export function put<T>(path: string, body?: unknown): Promise<T> {
|
||||
return request<T>('PUT', path, body);
|
||||
}
|
||||
|
||||
export function del<T>(path: string): Promise<T> {
|
||||
return request<T>('DELETE', path);
|
||||
}
|
||||
|
||||
10
cwd-comments-admin/src/env.d.ts
vendored
Normal file
10
cwd-comments-admin/src/env.d.ts
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_BASE_URL: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
||||
|
||||
8
cwd-comments-admin/src/main.ts
Normal file
8
cwd-comments-admin/src/main.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { createApp } from 'vue';
|
||||
import App from './App.vue';
|
||||
import { router } from './router';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(router);
|
||||
app.mount('#app');
|
||||
|
||||
52
cwd-comments-admin/src/router/index.ts
Normal file
52
cwd-comments-admin/src/router/index.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
|
||||
import LoginView from '../views/LoginView.vue';
|
||||
import LayoutView from '../views/LayoutView.vue';
|
||||
import CommentsView from '../views/CommentsView.vue';
|
||||
import SettingsView from '../views/SettingsView.vue';
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: LoginView
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
component: LayoutView,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
redirect: '/comments'
|
||||
},
|
||||
{
|
||||
path: 'comments',
|
||||
name: 'comments',
|
||||
component: CommentsView
|
||||
},
|
||||
{
|
||||
path: 'settings',
|
||||
name: 'settings',
|
||||
component: SettingsView
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
});
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.name === 'login') {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
const token = localStorage.getItem('cwd_admin_token');
|
||||
if (!token) {
|
||||
next({ name: 'login' });
|
||||
return;
|
||||
}
|
||||
next();
|
||||
});
|
||||
|
||||
254
cwd-comments-admin/src/views/CommentsView.vue
Normal file
254
cwd-comments-admin/src/views/CommentsView.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<h2 class="page-title">评论管理</h2>
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<select v-model="statusFilter" class="toolbar-select">
|
||||
<option value="">全部状态</option>
|
||||
<option value="approved">已通过</option>
|
||||
<option value="pending">待审核</option>
|
||||
<option value="rejected">已拒绝</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<button class="toolbar-button" @click="loadComments">刷新</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="loading" class="page-hint">加载中...</div>
|
||||
<div v-else-if="error" class="page-error">{{ error }}</div>
|
||||
<div v-else>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>文章</th>
|
||||
<th>作者</th>
|
||||
<th>邮箱</th>
|
||||
<th>内容</th>
|
||||
<th>状态</th>
|
||||
<th>时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in filteredComments" :key="item.id">
|
||||
<td>{{ item.id }}</td>
|
||||
<td>{{ item.postSlug }}</td>
|
||||
<td>{{ item.author }}</td>
|
||||
<td>{{ item.email }}</td>
|
||||
<td class="table-content">{{ item.contentText }}</td>
|
||||
<td>{{ item.status }}</td>
|
||||
<td>{{ formatDate(item.pubDate) }}</td>
|
||||
<td>
|
||||
<button class="table-button" @click="changeStatus(item, 'approved')" :disabled="item.status === 'approved'">
|
||||
通过
|
||||
</button>
|
||||
<button class="table-button" @click="changeStatus(item, 'pending')" :disabled="item.status === 'pending'">
|
||||
待审
|
||||
</button>
|
||||
<button class="table-button" @click="changeStatus(item, 'rejected')" :disabled="item.status === 'rejected'">
|
||||
拒绝
|
||||
</button>
|
||||
<button class="table-button table-button-danger" @click="removeComment(item)">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="filteredComments.length === 0">
|
||||
<td colspan="8" class="page-hint">暂无数据</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-if="pagination.total > 1" class="pagination">
|
||||
<button class="pagination-button" :disabled="pagination.page <= 1" @click="goPage(pagination.page - 1)">上一页</button>
|
||||
<span class="pagination-info">{{ pagination.page }} / {{ pagination.total }}</span>
|
||||
<button class="pagination-button" :disabled="pagination.page >= pagination.total" @click="goPage(pagination.page + 1)">
|
||||
下一页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { CommentItem, CommentListResponse, fetchComments, deleteComment, updateCommentStatus } from '../api/admin';
|
||||
|
||||
const comments = ref<CommentItem[]>([]);
|
||||
const pagination = ref<{ page: number; total: number }>({ page: 1, total: 1 });
|
||||
const loading = ref(false);
|
||||
const error = ref('');
|
||||
const statusFilter = ref('');
|
||||
|
||||
const filteredComments = computed(() => {
|
||||
if (!statusFilter.value) {
|
||||
return comments.value;
|
||||
}
|
||||
return comments.value.filter((item) => item.status === statusFilter.value);
|
||||
});
|
||||
|
||||
function formatDate(value: string) {
|
||||
const d = new Date(value);
|
||||
if (Number.isNaN(d.getTime())) {
|
||||
return value;
|
||||
}
|
||||
return d.toLocaleString();
|
||||
}
|
||||
|
||||
async function loadComments(page = 1) {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const res = await fetchComments(page);
|
||||
comments.value = res.data;
|
||||
pagination.value = { page: res.pagination.page, total: res.pagination.total };
|
||||
} catch (e: any) {
|
||||
error.value = e.message || '加载失败';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function goPage(page: number) {
|
||||
if (page < 1 || page > pagination.value.total) {
|
||||
return;
|
||||
}
|
||||
await loadComments(page);
|
||||
}
|
||||
|
||||
async function changeStatus(item: CommentItem, status: string) {
|
||||
try {
|
||||
await updateCommentStatus(item.id, status);
|
||||
item.status = status;
|
||||
} catch (e: any) {
|
||||
error.value = e.message || '更新状态失败';
|
||||
}
|
||||
}
|
||||
|
||||
async function removeComment(item: CommentItem) {
|
||||
if (!window.confirm(`确认删除评论 ${item.id} 吗`)) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await deleteComment(item.id);
|
||||
comments.value = comments.value.filter((c) => c.id !== item.id);
|
||||
} catch (e: any) {
|
||||
error.value = e.message || '删除失败';
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadComments();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #24292f;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar-select {
|
||||
padding: 4px 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d0d7de;
|
||||
background-color: #f6f8fa;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.page-hint {
|
||||
font-size: 14px;
|
||||
color: #57606a;
|
||||
}
|
||||
|
||||
.page-error {
|
||||
font-size: 14px;
|
||||
color: #d1242f;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
border: 1px solid #d0d7de;
|
||||
padding: 6px 8px;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.table-content {
|
||||
max-width: 260px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.table-button {
|
||||
margin-right: 4px;
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d0d7de;
|
||||
background-color: #f6f8fa;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-button-danger {
|
||||
border-color: #d1242f;
|
||||
color: #d1242f;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination-button {
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d0d7de;
|
||||
background-color: #f6f8fa;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
|
||||
130
cwd-comments-admin/src/views/LayoutView.vue
Normal file
130
cwd-comments-admin/src/views/LayoutView.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<header class="layout-header">
|
||||
<div class="layout-title">CWD 评论后台</div>
|
||||
<div class="layout-actions">
|
||||
<button class="layout-button" @click="goSettings">设置</button>
|
||||
<button class="layout-button" @click="handleLogout">退出</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="layout-body">
|
||||
<nav class="layout-sider">
|
||||
<ul class="menu">
|
||||
<li class="menu-item" :class="{ active: isRouteActive('comments') }" @click="goComments">评论管理</li>
|
||||
<li class="menu-item" :class="{ active: isRouteActive('settings') }" @click="goSettings">系统设置</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main class="layout-content">
|
||||
<router-view />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { logoutAdmin } from '../api/admin';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
function isRouteActive(name: string) {
|
||||
return route.name === name;
|
||||
}
|
||||
|
||||
function goComments() {
|
||||
router.push({ name: 'comments' });
|
||||
}
|
||||
|
||||
function goSettings() {
|
||||
router.push({ name: 'settings' });
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
logoutAdmin();
|
||||
router.push({ name: 'login' });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layout-header {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
background-color: #24292f;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.layout-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.layout-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.layout-button {
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #57606a;
|
||||
background-color: #24292f;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.layout-button:hover {
|
||||
background-color: #32383f;
|
||||
}
|
||||
|
||||
.layout-body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.layout-sider {
|
||||
width: 180px;
|
||||
background-color: #f6f8fa;
|
||||
border-right: 1px solid #d0d7de;
|
||||
}
|
||||
|
||||
.menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 10px 16px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #24292f;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: #eaeef2;
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
background-color: #d0ebff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
flex: 1;
|
||||
padding: 16px 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
127
cwd-comments-admin/src/views/LoginView.vue
Normal file
127
cwd-comments-admin/src/views/LoginView.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="login-card">
|
||||
<h1 class="login-title">CWD 评论后台</h1>
|
||||
<form class="login-form" @submit.prevent="handleSubmit">
|
||||
<div class="form-item">
|
||||
<label class="form-label">管理员账号</label>
|
||||
<input v-model="name" class="form-input" type="text" autocomplete="username" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="form-label">密码</label>
|
||||
<input v-model="password" class="form-input" type="password" autocomplete="current-password" />
|
||||
</div>
|
||||
<div v-if="error" class="form-error">{{ error }}</div>
|
||||
<button class="form-button" type="submit" :disabled="submitting">
|
||||
<span v-if="submitting">登录中...</span>
|
||||
<span v-else>登录</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { loginAdmin } from '../api/admin';
|
||||
|
||||
const router = useRouter();
|
||||
const name = ref('');
|
||||
const password = ref('');
|
||||
const submitting = ref(false);
|
||||
const error = ref('');
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!name.value || !password.value) {
|
||||
error.value = '请输入账号和密码';
|
||||
return;
|
||||
}
|
||||
error.value = '';
|
||||
submitting.value = true;
|
||||
try {
|
||||
await loginAdmin(name.value, password.value);
|
||||
router.push({ name: 'comments' });
|
||||
} catch (e: any) {
|
||||
error.value = e.message || '登录失败';
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background-color: #ffffff;
|
||||
padding: 32px 40px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
margin: 0 0 24px;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 8px 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d0d7de;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: #0969da;
|
||||
box-shadow: 0 0 0 1px rgba(9, 105, 218, 0.2);
|
||||
}
|
||||
|
||||
.form-error {
|
||||
font-size: 13px;
|
||||
color: #d1242f;
|
||||
}
|
||||
|
||||
.form-button {
|
||||
margin-top: 8px;
|
||||
padding: 10px 0;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
background-color: #0969da;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-button:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: default;
|
||||
}
|
||||
</style>
|
||||
|
||||
151
cwd-comments-admin/src/views/SettingsView.vue
Normal file
151
cwd-comments-admin/src/views/SettingsView.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<h2 class="page-title">系统设置</h2>
|
||||
<div class="card">
|
||||
<h3 class="card-title">通知邮箱设置</h3>
|
||||
<div class="form-item">
|
||||
<label class="form-label">管理员通知邮箱</label>
|
||||
<input v-model="email" class="form-input" type="email" />
|
||||
</div>
|
||||
<div v-if="message" :class="['form-message', messageType === 'error' ? 'form-message-error' : 'form-message-success']">
|
||||
{{ message }}
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="card-button" :disabled="saving" @click="save">
|
||||
<span v-if="saving">保存中...</span>
|
||||
<span v-else>保存</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { fetchAdminEmail, saveAdminEmail } from '../api/admin';
|
||||
|
||||
const email = ref('');
|
||||
const saving = ref(false);
|
||||
const message = ref('');
|
||||
const messageType = ref<'success' | 'error'>('success');
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const res = await fetchAdminEmail();
|
||||
email.value = res.email || '';
|
||||
} catch (e: any) {
|
||||
message.value = e.message || '加载失败';
|
||||
messageType.value = 'error';
|
||||
}
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (!email.value) {
|
||||
message.value = '请输入邮箱';
|
||||
messageType.value = 'error';
|
||||
return;
|
||||
}
|
||||
saving.value = true;
|
||||
message.value = '';
|
||||
try {
|
||||
const res = await saveAdminEmail(email.value);
|
||||
message.value = res.message || '保存成功';
|
||||
messageType.value = 'success';
|
||||
} catch (e: any) {
|
||||
message.value = e.message || '保存失败';
|
||||
messageType.value = 'error';
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #24292f;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #d0d7de;
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 8px 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d0d7de;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: #0969da;
|
||||
box-shadow: 0 0 0 1px rgba(9, 105, 218, 0.2);
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.card-button {
|
||||
padding: 8px 14px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
background-color: #0969da;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-button:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.form-message {
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-message-success {
|
||||
color: #1a7f37;
|
||||
}
|
||||
|
||||
.form-message-error {
|
||||
color: #d1242f;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user