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

fix: 更新文档链接和说明，调整评论管理界面样式

Browse Source
This commit is contained in:
anghunk
2026-01-19 17:24:57 +08:00
parent 73bbe44fbc
commit ff6563527b
7 changed files with 323 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
cwd-comments-admin/src/views/LayoutView.vue
View File

@@ -1,130 +1,149 @@
<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>
<div class="layout">
<header class="layout-header">
<div class="layout-title">CWD 评论后台</div>
<div class="layout-actions">
<a
class="layout-button"
href="https://github.com/anghunk/cwd-comments"
target="_blank"
>
Github
</a>
<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';
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;
return route.name === name;
}
function goComments() {
router.push({ name: 'comments' });
router.push({ name: "comments" });
}
function goSettings() {
router.push({ name: 'settings' });
router.push({ name: "settings" });
}
function handleLogout() {
logoutAdmin();
router.push({ name: 'login' });
logoutAdmin();
router.push({ name: "login" });
}
</script>
<style scoped>
.layout {
display: flex;
flex-direction: column;
height: 100%;
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;
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;
font-size: 18px;
font-weight: 600;
}
.layout-actions {
display: flex;
gap: 8px;
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;
text-decoration: none;
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;
background-color: #32383f;
}
.layout-body {
display: flex;
flex: 1;
min-height: 0;
display: flex;
flex: 1;
min-height: 0;
}
.layout-sider {
width: 180px;
background-color: #f6f8fa;
border-right: 1px solid #d0d7de;
width: 180px;
background-color: #f6f8fa;
border-right: 1px solid #d0d7de;
}
.menu {
list-style: none;
margin: 0;
padding: 12px 0;
list-style: none;
margin: 0;
padding: 12px 0;
}
.menu-item {
padding: 10px 16px;
cursor: pointer;
font-size: 14px;
color: #24292f;
padding: 10px 16px;
cursor: pointer;
font-size: 14px;
color: #24292f;
}
.menu-item:hover {
background-color: #eaeef2;
background-color: #eaeef2;
}
.menu-item.active {
background-color: #d0ebff;
font-weight: 600;
background-color: #d0ebff;
font-weight: 600;
}
.layout-content {
flex: 1;
padding: 16px 20px;
overflow: auto;
flex: 1;
padding: 16px 20px;
overflow: auto;
}
</style>