nojava/Jog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 前端 UI 重构——清新自然风设计系统

Browse Source 
统一全部页面视觉风格：绿色主色调(#4caf50)、暖象牙白背景(#faf8f5)、
圆角柔和阴影、Element Plus 组件主题覆盖。新增 CSS 设计令牌文件
tokens.css，重写 16 个 Vue 文件的 scoped 样式。

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nojava
2026-05-19 04:32:22 +08:00
parent d0052d9b63
commit 1bce12927e
18 changed files with 874 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jog-frontend/src/App.vue
+23 -1
View File
@@ -9,6 +9,28 @@
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-family: var(--font-family);
font-size: var(--font-size-base);
color: var(--text-primary);
background: var(--bg-page);
line-height: var(--line-height-base);
-webkit-font-smoothing: antialiased;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-primary-700);
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb {
background: var(--border-color-dark);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
</style>
jog-frontend/src/assets/styles/tokens.css
+171
View File
@@ -0,0 +1,171 @@
:root {
/* ===== Color Palette ===== */
--color-primary-50: #e8f5e9;
--color-primary-100: #c8e6c9;
--color-primary-200: #a5d6a7;
--color-primary-300: #81c784;
--color-primary-400: #66bb6a;
--color-primary: #4caf50;
--color-primary-600: #43a047;
--color-primary-700: #388e3c;
--color-primary-800: #2e7d32;
--color-primary-900: #1b5e20;
--color-primary-light: rgba(76, 175, 80, 0.1);
--color-accent: #ff8c42;
--color-accent-light: rgba(255, 140, 66, 0.08);
--color-accent-dark: #e07030;
--color-success: #67c23a;
--color-warning: #e6a23c;
--color-danger: #f56c6c;
--color-info: #909399;
--bg-page: #faf8f5;
--bg-card: #ffffff;
--bg-elevated: #ffffff;
--bg-soft: #f5f0eb;
--bg-input: #ffffff;
--bg-sidebar: #2c3e3a;
--bg-sidebar-hover: #344945;
--bg-sidebar-active: #4caf50;
--text-primary: #2c2c2c;
--text-regular: #5a5a5a;
--text-secondary: #909399;
--text-placeholder: #b0b0b0;
--text-inverse: #ffffff;
--border-color: #e8e3de;
--border-color-light: #f0ebe6;
--border-color-dark: #d0c8c0;
/* ===== Typography ===== */
--font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
sans-serif;
--font-size-xs: 12px;
--font-size-sm: 13px;
--font-size-base: 15px;
--font-size-md: 16px;
--font-size-lg: 18px;
--font-size-xl: 22px;
--font-size-2xl: 28px;
--font-size-3xl: 36px;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.3;
--line-height-base: 1.6;
--line-height-loose: 1.8;
/* ===== Spacing ===== */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 24px;
--spacing-2xl: 32px;
--spacing-3xl: 48px;
--spacing-4xl: 64px;
/* ===== Border Radius ===== */
--radius-sm: 6px;
--radius-base: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-full: 9999px;
/* ===== Shadows ===== */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-base: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
--shadow-warm: 0 4px 20px rgba(76, 175, 80, 0.12);
/* ===== Transitions ===== */
--transition-fast: 0.15s ease;
--transition-base: 0.25s ease;
--transition-slow: 0.4s ease;
}
/* ===== Element Plus Theme Overrides ===== */
.el-button--primary {
background-color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
}
.el-button--primary:hover,
.el-button--primary.is-hover {
background-color: var(--color-primary-600) !important;
border-color: var(--color-primary-600) !important;
}
.el-button--primary:active {
background-color: var(--color-primary-700) !important;
border-color: var(--color-primary-700) !important;
}
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:hover,
.el-button--primary.is-disabled:focus {
background-color: var(--color-primary-light) !important;
border-color: var(--color-primary-200) !important;
color: var(--color-primary-300) !important;
}
.el-button--primary.is-text,
.el-button--primary.is-link {
background-color: transparent !important;
border-color: transparent !important;
color: var(--color-primary) !important;
}
.el-button--primary.is-text:hover,
.el-button--primary.is-link:hover {
color: var(--color-primary-600) !important;
background-color: var(--color-primary-light) !important;
}
.el-input__wrapper.is-focus {
box-shadow: 0 0 0 1px var(--color-primary) inset !important;
}
.el-tag--primary {
--el-tag-bg-color: var(--color-primary-light);
--el-tag-border-color: var(--color-primary-200);
--el-tag-text-color: var(--color-primary-700);
}
.el-card {
border-radius: var(--radius-md);
border-color: var(--border-color-light);
transition: box-shadow var(--transition-base);
}
.el-dialog {
border-radius: var(--radius-lg);
}
.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
background-color: var(--color-primary) !important;
}
.el-menu--horizontal > .el-menu-item.is-active {
border-bottom-color: var(--color-primary) !important;
color: var(--color-primary) !important;
}
.el-menu .el-menu-item.is-active {
color: var(--color-primary) !important;
background-color: var(--color-primary-light) !important;
}
.el-select-dropdown__item.selected {
color: var(--color-primary) !important;
}
jog-frontend/src/layouts/AdminLayout.vue
+17 -9
View File
@@ -56,27 +56,35 @@ async function handleLogout() {
.admin-layout {
min-height: 100vh;
}
.el-aside {
background: #304156;
}
.el-aside { background: var(--bg-sidebar); }
.admin-logo {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
font-weight: bold;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.el-aside :deep(.el-menu) {
--el-menu-bg-color: transparent;
--el-menu-hover-bg-color: var(--bg-sidebar-hover);
--el-menu-active-color: var(--color-primary-300);
--el-menu-text-color: #bfcbd9;
border-right: none;
}
.admin-header {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
background: #fff;
border-bottom: 1px solid #e4e7ed;
gap: var(--spacing-sm);
background: var(--bg-card);
border-bottom: 1px solid var(--border-color-light);
box-shadow: var(--shadow-sm);
}
.el-main {
background: #f5f7fa;
background: var(--bg-page);
padding: var(--spacing-xl);
}
</style>
jog-frontend/src/layouts/AppLayout.vue
+10 -3
View File
@@ -30,12 +30,19 @@
<style scoped>
.app-layout {
min-height: 100vh;
background: var(--bg-page);
}
.el-aside {
background: #fff;
border-right: 1px solid #e4e7ed;
background: var(--bg-card);
border-right: 1px solid var(--border-color-light);
box-shadow: var(--shadow-sm);
--el-menu-bg-color: transparent;
--el-menu-hover-bg-color: var(--color-primary-light);
--el-menu-active-color: var(--color-primary);
--el-menu-text-color: var(--text-regular);
}
.el-main {
background: #f5f7fa;
background: var(--bg-page);
padding: var(--spacing-xl);
}
</style>
jog-frontend/src/layouts/BlogLayout.vue
+25 -11
View File
@@ -58,8 +58,10 @@ async function handleLogout() {
flex-direction: column;
}
.header {
border-bottom: 1px solid #e4e7ed;
background: #fff;
border-bottom: 1px solid var(--border-color-light);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
box-shadow: var(--shadow-sm);
}
.header-content {
max-width: 1200px;
@@ -70,37 +72,49 @@ async function handleLogout() {
padding: 0 20px;
}
.logo {
font-size: 20px;
font-weight: bold;
color: #409eff;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
text-decoration: none;
margin-right: 40px;
margin-right: var(--spacing-2xl);
transition: color var(--transition-fast);
}
.logo:hover { color: var(--color-primary-700); }
.nav-menu {
flex: 1;
border-bottom: none;
--el-menu-bg-color: transparent;
--el-menu-hover-bg-color: var(--color-primary-light);
--el-menu-active-color: var(--color-primary);
--el-menu-text-color: var(--text-regular);
}
.header-right {
display: flex;
align-items: center;
gap: 10px;
gap: var(--spacing-sm);
}
.user-info {
display: flex;
align-items: center;
gap: 8px;
gap: var(--spacing-sm);
cursor: pointer;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-full);
transition: background var(--transition-fast);
}
.user-info:hover { background: var(--color-primary-light); }
.main {
flex: 1;
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 20px;
padding: var(--spacing-xl);
}
.footer {
text-align: center;
color: #909399;
border-top: 1px solid #e4e7ed;
color: var(--text-secondary);
border-top: 1px solid var(--border-color-light);
padding: var(--spacing-lg) 0;
font-size: var(--font-size-sm);
}
</style>
jog-frontend/src/main.js
+1
View File
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './assets/styles/tokens.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
jog-frontend/src/views/ArticleDetail.vue
+107 -18
View File
@@ -148,23 +148,112 @@ onMounted(() => {
</script>
<style scoped>
.article-detail { max-width: 800px; margin: 0 auto; }
.article-detail h1 { font-size: 28px; margin-bottom: 16px; }
.meta { display: flex; gap: 16px; align-items: center; color: #909399; font-size: 14px; margin-bottom: 12px; }
.article-detail {
max-width: 800px;
margin: 0 auto;
}
.article-detail h1 {
font-size: var(--font-size-2xl);
margin: var(--spacing-2xl) 0 var(--spacing-md);
color: var(--text-primary);
line-height: var(--line-height-tight);
}
.meta {
display: flex;
gap: var(--spacing-lg);
align-items: center;
color: var(--text-secondary);
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-md);
flex-wrap: wrap;
}
.meta span { display: flex; align-items: center; gap: 4px; }
.tags { display: flex; gap: 8px; margin-bottom: 16px; }
.content { line-height: 1.8; font-size: 16px; }
.actions { margin: 20px 0; }
.comments-section { margin-top: 30px; }
.comment-form { margin-bottom: 20px; }
.login-tip { color: #909399; margin-bottom: 20px; }
.comment-item { padding: 16px 0; border-bottom: 1px solid #f0f0f0; }
.comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.nickname { font-weight: 500; }
.time { color: #909399; font-size: 12px; }
.comment-body { margin-left: 40px; }
.comment-actions { margin-left: 40px; margin-top: 4px; }
.replies { margin-left: 40px; padding: 12px; background: #f5f7fa; border-radius: 4px; margin-top: 8px; }
.reply-item { padding: 4px 0; font-size: 14px; }
.reply-to { color: #409eff; }
.tags { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); }
.content {
line-height: var(--line-height-loose);
font-size: var(--font-size-md);
color: var(--text-regular);
padding: var(--spacing-lg) 0;
}
.content :deep(h1), .content :deep(h2), .content :deep(h3) {
color: var(--text-primary);
margin-top: var(--spacing-xl);
margin-bottom: var(--spacing-md);
}
.content :deep(p) { margin-bottom: var(--spacing-md); }
.content :deep(img) {
max-width: 100%;
border-radius: var(--radius-md);
margin: var(--spacing-lg) 0;
}
.content :deep(blockquote) {
border-left: 4px solid var(--color-primary-300);
padding: var(--spacing-md) var(--spacing-lg);
background: var(--color-primary-light);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
margin: var(--spacing-lg) 0;
color: var(--text-regular);
}
.content :deep(code) {
background: var(--bg-soft);
padding: 2px 6px;
border-radius: var(--radius-sm);
font-size: 0.9em;
}
.content :deep(pre) {
background: #2d2d2d;
color: #f8f8f2;
padding: var(--spacing-lg);
border-radius: var(--radius-md);
overflow-x: auto;
margin: var(--spacing-lg) 0;
}
.content :deep(pre code) {
background: none;
padding: 0;
color: inherit;
}
.actions { margin: var(--spacing-xl) 0; }
.comments-section { margin-top: var(--spacing-2xl); }
.comments-section h3 {
font-size: var(--font-size-lg);
color: var(--text-primary);
margin-bottom: var(--spacing-lg);
}
.comment-form { margin-bottom: var(--spacing-xl); }
.login-tip {
color: var(--text-secondary);
margin-bottom: var(--spacing-lg);
padding: var(--spacing-md);
background: var(--bg-soft);
border-radius: var(--radius-sm);
text-align: center;
}
.comment-item {
padding: var(--spacing-lg) 0;
border-bottom: 1px solid var(--border-color-light);
}
.comment-header {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.nickname { font-weight: var(--font-weight-medium); }
.time { color: var(--text-secondary); font-size: var(--font-size-xs); }
.comment-body {
margin-left: 40px;
line-height: var(--line-height-base);
color: var(--text-regular);
}
.comment-actions { margin-left: 40px; margin-top: var(--spacing-xs); }
.replies {
margin-left: 40px;
padding: var(--spacing-md);
background: var(--bg-soft);
border-radius: var(--radius-sm);
margin-top: var(--spacing-sm);
}
.reply-item { padding: var(--spacing-xs) 0; font-size: var(--font-size-sm); }
.reply-to { color: var(--color-primary); }
</style>
jog-frontend/src/views/Home.vue
+67 -16
View File
@@ -79,36 +79,87 @@ onMounted(() => {
<style scoped>
.hero {
text-align: center;
padding: 60px 0 30px;
padding: var(--spacing-4xl) 0 var(--spacing-2xl);
background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--bg-page) 100%);
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-xl);
}
.hero h1 {
font-size: var(--font-size-3xl);
color: var(--color-primary-800);
margin: 0 0 var(--spacing-sm);
font-weight: var(--font-weight-bold);
}
.hero p {
color: var(--text-secondary);
font-size: var(--font-size-md);
margin: 0;
}
.hero h1 { font-size: 32px; color: #303133; }
.hero p { color: #909399; font-size: 16px; }
.filter-bar {
display: flex;
gap: 16px;
margin-bottom: 20px;
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
align-items: center;
padding: var(--spacing-md) var(--spacing-lg);
background: var(--bg-card);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.article-list {
display: flex;
flex-direction: column;
gap: 16px;
display: grid;
gap: var(--spacing-lg);
}
.article-card {
cursor: pointer;
transition: box-shadow 0.3s;
transition: transform var(--transition-base), box-shadow var(--transition-base);
border-radius: var(--radius-md);
overflow: hidden;
}
.article-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.article-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.article-card :deep(.el-card__body) {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: var(--spacing-lg);
}
.article-content { flex: 1; padding-right: var(--spacing-lg); }
.article-content h3 {
margin: 0 0 var(--spacing-sm);
font-size: var(--font-size-lg);
color: var(--text-primary);
transition: color var(--transition-fast);
}
.article-card:hover .article-content h3 { color: var(--color-primary-700); }
.summary {
color: var(--text-regular);
font-size: var(--font-size-sm);
margin: 0 0 var(--spacing-sm);
line-height: var(--line-height-base);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.meta {
display: flex;
gap: var(--spacing-lg);
color: var(--text-secondary);
font-size: var(--font-size-xs);
}
.article-content { flex: 1; }
.article-content h3 { margin: 0 0 8px; font-size: 18px; }
.summary { color: #606266; font-size: 14px; margin: 0 0 12px; }
.meta { display: flex; gap: 16px; color: #909399; font-size: 13px; }
.meta span { display: flex; align-items: center; gap: 4px; }
.cover { width: 160px; height: 100px; border-radius: 4px; margin-left: 16px; }
.el-pagination { margin-top: 20px; justify-content: center; }
.cover {
width: 180px;
height: 120px;
border-radius: var(--radius-sm);
margin-left: var(--spacing-md);
object-fit: cover;
flex-shrink: 0;
}
.el-pagination {
margin-top: var(--spacing-xl);
justify-content: center;
}
</style>
jog-frontend/src/views/Login.vue
+48 -6
View File
@@ -116,19 +116,61 @@ async function handleUserLogin() {
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f5f7fa;
background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--bg-page) 50%, var(--color-accent-light) 100%);
position: relative;
overflow: hidden;
}
.login-page::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
background: var(--color-primary-100);
opacity: 0.3;
top: -100px;
right: -100px;
}
.login-page::after {
content: '';
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: var(--color-accent-light);
opacity: 0.4;
bottom: -80px;
left: -80px;
}
.login-card {
width: 420px;
padding: 20px;
width: 440px;
padding: var(--spacing-2xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
}
.login-card h2 {
text-align: center;
margin-bottom: 20px;
margin-bottom: var(--spacing-xl);
color: var(--color-primary-800);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
}
.login-card :deep(.el-tabs__header) { margin-bottom: var(--spacing-xl); }
.login-card :deep(.el-tabs__active-bar) { background-color: var(--color-primary); }
.login-card :deep(.el-tabs__item.is-active) { color: var(--color-primary); }
.login-card :deep(.el-button--primary) {
height: 44px;
font-size: var(--font-size-md);
border-radius: var(--radius-base);
}
.footer-link {
text-align: center;
margin-top: 16px;
color: #909399;
margin-top: var(--spacing-lg);
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
</style>
jog-frontend/src/views/Register.vue
+34 -6
View File
@@ -84,19 +84,47 @@ async function handleRegister() {
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f5f7fa;
background: linear-gradient(135deg, var(--bg-page) 0%, var(--color-primary-50) 100%);
position: relative;
overflow: hidden;
}
.register-page::before {
content: '';
position: absolute;
width: 350px;
height: 350px;
border-radius: 50%;
background: var(--color-primary-100);
opacity: 0.25;
top: -60px;
left: -60px;
}
.register-card {
width: 420px;
padding: 20px;
width: 440px;
padding: var(--spacing-2xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
}
.register-card h2 {
text-align: center;
margin-bottom: 20px;
margin-bottom: var(--spacing-xl);
color: var(--color-primary-800);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
}
.register-card :deep(.el-button--primary) {
height: 44px;
font-size: var(--font-size-md);
border-radius: var(--radius-base);
}
.footer-link {
text-align: center;
margin-top: 16px;
color: #909399;
margin-top: var(--spacing-lg);
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
</style>
jog-frontend/src/views/admin/Articles.vue
+54 -27
View File
@@ -1,7 +1,7 @@
<template>
<div>
<h2>文章管理</h2>
<div style="margin-bottom: 16px; display: flex; gap: 12px;">
<h2 class="page-title">文章管理</h2>
<div class="filter-bar">
<el-input v-model="keyword" placeholder="搜索文章" clearable style="width: 300px" @keyup.enter="loadArticles">
<template #append>
<el-button @click="loadArticles"><el-icon><Search /></el-icon></el-button>
@@ -13,31 +13,34 @@
<el-option label="回收站" :value="2" />
</el-select>
</div>
<el-table :data="articles" v-loading="loading">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="title" label="标题" />
<el-table-column prop="authorNickname" label="作者" width="120" />
<el-table-column prop="viewCount" label="浏览" width="80" />
<el-table-column prop="likeCount" label="点赞" width="80" />
<el-table-column label="状态" width="100">
<template #default="{ row }">
<el-tag :type="statusType(row)">{{ statusText(row) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="120">
<template #default="{ row }">
<el-button text type="danger" @click="handleDelete(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:current-page="page"
:page-size="15"
:total="total"
layout="prev, pager, next"
@current-change="loadArticles"
style="margin-top: 20px; justify-content: center;"
/>
<el-card class="table-card">
<el-table :data="articles" v-loading="loading">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="title" label="标题" />
<el-table-column prop="authorNickname" label="作者" width="120" />
<el-table-column prop="viewCount" label="浏览" width="80" />
<el-table-column prop="likeCount" label="点赞" width="80" />
<el-table-column label="状态" width="100">
<template #default="{ row }">
<el-tag :type="statusType(row)">{{ statusText(row) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="120">
<template #default="{ row }">
<el-button text type="danger" @click="handleDelete(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<div class="pagination-wrapper">
<el-pagination
v-model:current-page="page"
:page-size="15"
:total="total"
layout="prev, pager, next"
@current-change="loadArticles"
/>
</div>
</div>
</template>
@@ -77,3 +80,27 @@ function statusText(row) {
onMounted(loadArticles)
</script>
<style scoped>
.page-title {
color: var(--text-primary);
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-lg);
}
.filter-bar {
margin-bottom: var(--spacing-lg);
display: flex;
gap: var(--spacing-md);
align-items: center;
}
.table-card {
border-radius: var(--radius-md);
overflow: hidden;
}
.table-card :deep(.el-card__body) { padding: 0; }
.pagination-wrapper {
margin-top: var(--spacing-xl);
display: flex;
justify-content: center;
}
</style>
jog-frontend/src/views/admin/Categories.vue
+40 -19
View File
@@ -1,26 +1,28 @@
<template>
<div>
<h2>分类管理</h2>
<div style="margin-bottom: 16px;">
<h2 class="page-title">分类管理</h2>
<div class="filter-bar">
<el-button type="primary" @click="showAddDialog">新增分类</el-button>
</div>
<el-table :data="categories" v-loading="loading">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="name" label="名称" />
<el-table-column prop="description" label="描述" />
<el-table-column prop="articleCount" label="文章数" width="100" />
<el-table-column label="状态" width="100">
<template #default="{ row }">
<el-tag :type="row.enabled ? 'success' : 'danger'">{{ row.enabled ? '启用' : '禁用' }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template #default="{ row }">
<el-button text type="primary" @click="showEditDialog(row)">编辑</el-button>
<el-button text type="danger" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-card class="table-card">
<el-table :data="categories" v-loading="loading">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="name" label="名称" />
<el-table-column prop="description" label="描述" />
<el-table-column prop="articleCount" label="文章数" width="100" />
<el-table-column label="状态" width="100">
<template #default="{ row }">
<el-tag :type="row.enabled ? 'success' : 'danger'">{{ row.enabled ? '启用' : '禁用' }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template #default="{ row }">
<el-button text type="primary" @click="showEditDialog(row)">编辑</el-button>
<el-button text type="danger" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog v-model="dialogVisible" :title="isEdit ? '编辑分类' : '新增分类'" width="400px">
<el-form :model="form" label-width="80px">
@@ -106,3 +108,22 @@ async function handleDelete(row) {
onMounted(loadCategories)
</script>
<style scoped>
.page-title {
color: var(--text-primary);
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-lg);
}
.filter-bar {
margin-bottom: var(--spacing-lg);
display: flex;
gap: var(--spacing-md);
align-items: center;
}
.table-card {
border-radius: var(--radius-md);
overflow: hidden;
}
.table-card :deep(.el-card__body) { padding: 0; }
</style>
jog-frontend/src/views/admin/Comments.vue
+57 -30
View File
@@ -1,41 +1,44 @@
<template>
<div>
<h2>评论管理</h2>
<div style="margin-bottom: 16px; display: flex; gap: 12px;">
<h2 class="page-title">评论管理</h2>
<div class="filter-bar">
<el-select v-model="status" placeholder="状态" clearable @change="loadComments">
<el-option label="待审核" :value="0" />
<el-option label="已通过" :value="1" />
<el-option label="已屏蔽" :value="2" />
</el-select>
</div>
<el-table :data="comments" v-loading="loading">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="nickname" label="评论者" width="120" />
<el-table-column prop="content" label="内容" show-overflow-tooltip />
<el-table-column prop="articleId" label="文章ID" width="80" />
<el-table-column label="状态" width="100">
<template #default="{ row }">
<el-tag :type="[null, 'success', 'danger'][row.status] || 'info'">
{{ ['待审核', '已通过', '已屏蔽', '已删除'][row.status] }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template #default="{ row }">
<el-button text type="success" @click="handleAudit(row.id, 1)">通过</el-button>
<el-button text type="warning" @click="handleAudit(row.id, 2)">屏蔽</el-button>
<el-button text type="danger" @click="handleDelete(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:current-page="page"
:page-size="15"
:total="total"
layout="prev, pager, next"
@current-change="loadComments"
style="margin-top: 20px; justify-content: center;"
/>
<el-card class="table-card">
<el-table :data="comments" v-loading="loading">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="nickname" label="评论者" width="120" />
<el-table-column prop="content" label="内容" show-overflow-tooltip />
<el-table-column prop="articleId" label="文章ID" width="80" />
<el-table-column label="状态" width="100">
<template #default="{ row }">
<el-tag :type="[null, 'success', 'danger'][row.status] || 'info'">
{{ ['待审核', '已通过', '已屏蔽', '已删除'][row.status] }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template #default="{ row }">
<el-button text type="success" @click="handleAudit(row.id, 1)">通过</el-button>
<el-button text type="warning" @click="handleAudit(row.id, 2)">屏蔽</el-button>
<el-button text type="danger" @click="handleDelete(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<div class="pagination-wrapper">
<el-pagination
v-model:current-page="page"
:page-size="15"
:total="total"
layout="prev, pager, next"
@current-change="loadComments"
/>
</div>
</div>
</template>
@@ -73,3 +76,27 @@ async function handleDelete(id) {
onMounted(loadComments)
</script>
<style scoped>
.page-title {
color: var(--text-primary);
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-lg);
}
.filter-bar {
margin-bottom: var(--spacing-lg);
display: flex;
gap: var(--spacing-md);
align-items: center;
}
.table-card {
border-radius: var(--radius-md);
overflow: hidden;
}
.table-card :deep(.el-card__body) { padding: 0; }
.pagination-wrapper {
margin-top: var(--spacing-xl);
display: flex;
justify-content: center;
}
</style>
jog-frontend/src/views/admin/Dashboard.vue
+25 -7
View File
@@ -1,18 +1,18 @@
<template>
<div>
<h2>管理后台仪表盘</h2>
<el-row :gutter="20" style="margin-top: 20px;">
<div class="admin-dashboard">
<h2 class="page-title">管理后台仪表盘</h2>
<el-row :gutter="20" style="margin-top: var(--spacing-xl);">
<el-col :span="6">
<el-card><el-statistic title="用户数" :value="0" /></el-card>
<el-card class="stat-card"><el-statistic title="用户数" :value="0" /></el-card>
</el-col>
<el-col :span="6">
<el-card><el-statistic title="文章数" :value="0" /></el-card>
<el-card class="stat-card"><el-statistic title="文章数" :value="0" /></el-card>
</el-col>
<el-col :span="6">
<el-card><el-statistic title="评论数" :value="0" /></el-card>
<el-card class="stat-card"><el-statistic title="评论数" :value="0" /></el-card>
</el-col>
<el-col :span="6">
<el-card><el-statistic title="今日访问" :value="0" /></el-card>
<el-card class="stat-card"><el-statistic title="今日访问" :value="0" /></el-card>
</el-col>
</el-row>
</div>
@@ -20,3 +20,21 @@
<script setup>
</script>
<style scoped>
.page-title {
color: var(--text-primary);
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-md);
}
.stat-card {
border-radius: var(--radius-md);
padding: var(--spacing-lg);
text-align: center;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-warm);
}
</style>
jog-frontend/src/views/admin/Users.vue
+50 -23
View File
@@ -1,34 +1,37 @@
<template>
<div>
<h2>用户管理</h2>
<div style="margin-bottom: 16px; display: flex; gap: 12px;">
<h2 class="page-title">用户管理</h2>
<div class="filter-bar">
<el-input v-model="keyword" placeholder="搜索用户" clearable style="width: 300px" @keyup.enter="loadUsers">
<template #append>
<el-button @click="loadUsers"><el-icon><Search /></el-icon></el-button>
</template>
</el-input>
</div>
<el-table :data="users" v-loading="loading">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="nickname" label="昵称" width="150" />
<el-table-column prop="email" label="邮箱" />
<el-table-column label="操作" width="240">
<template #default="{ row }">
<el-button text type="warning" @click="handleResetPassword(row.id)">重置密码</el-button>
<el-button text :type="row.status === 1 ? 'success' : 'danger'" @click="handleToggleStatus(row)">
{{ row.status === 1 ? '解锁' : '锁定' }}
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:current-page="page"
:page-size="15"
:total="total"
layout="prev, pager, next"
@current-change="loadUsers"
style="margin-top: 20px; justify-content: center;"
/>
<el-card class="table-card">
<el-table :data="users" v-loading="loading">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="nickname" label="昵称" width="150" />
<el-table-column prop="email" label="邮箱" />
<el-table-column label="操作" width="240">
<template #default="{ row }">
<el-button text type="warning" @click="handleResetPassword(row.id)">重置密码</el-button>
<el-button text :type="row.status === 1 ? 'success' : 'danger'" @click="handleToggleStatus(row)">
{{ row.status === 1 ? '解锁' : '锁定' }}
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<div class="pagination-wrapper">
<el-pagination
v-model:current-page="page"
:page-size="15"
:total="total"
layout="prev, pager, next"
@current-change="loadUsers"
/>
</div>
</div>
</template>
@@ -71,3 +74,27 @@ async function handleToggleStatus(row) {
onMounted(loadUsers)
</script>
<style scoped>
.page-title {
color: var(--text-primary);
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-lg);
}
.filter-bar {
margin-bottom: var(--spacing-lg);
display: flex;
gap: var(--spacing-md);
align-items: center;
}
.table-card {
border-radius: var(--radius-md);
overflow: hidden;
}
.table-card :deep(.el-card__body) { padding: 0; }
.pagination-wrapper {
margin-top: var(--spacing-xl);
display: flex;
justify-content: center;
}
</style>
jog-frontend/src/views/app/ArticleEditor.vue
+42 -5
View File
@@ -145,15 +145,52 @@ onBeforeUnmount(() => {
<style scoped>
.article-editor { max-width: 900px; }
.editor-wrapper { border: 1px solid #dcdfe6; border-radius: 4px; width: 100%; }
.toolbar { padding: 8px; border-bottom: 1px solid #dcdfe6; background: #fafafa; }
.editor-content { min-height: 400px; padding: 16px; }
.editor-content :deep(.tiptap) { outline: none; min-height: 360px; }
.article-editor h2 {
color: var(--color-primary-800);
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-xl);
}
.editor-wrapper {
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
width: 100%;
overflow: hidden;
transition: border-color var(--transition-fast);
}
.editor-wrapper:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary-light);
}
.toolbar {
padding: var(--spacing-sm) var(--spacing-md);
border-bottom: 1px solid var(--border-color-light);
background: var(--bg-soft);
}
.editor-content { min-height: 400px; padding: var(--spacing-lg); }
.editor-content :deep(.tiptap) {
outline: none;
min-height: 360px;
font-size: var(--font-size-md);
line-height: var(--line-height-loose);
}
.editor-content :deep(.tiptap p.is-editor-empty:first-child::before) {
content: attr(data-placeholder);
float: left;
color: #adb5bd;
color: var(--text-placeholder);
pointer-events: none;
height: 0;
}
.editor-content :deep(.tiptap h1),
.editor-content :deep(.tiptap h2),
.editor-content :deep(.tiptap h3) {
color: var(--text-primary);
margin-top: var(--spacing-lg);
margin-bottom: var(--spacing-sm);
}
.editor-content :deep(.tiptap blockquote) {
border-left: 4px solid var(--color-primary-300);
padding-left: var(--spacing-lg);
color: var(--text-secondary);
margin: var(--spacing-md) 0;
}
</style>
jog-frontend/src/views/app/Dashboard.vue
+51 -7
View File
@@ -1,16 +1,27 @@
<template>
<div>
<h2>控制台</h2>
<p>欢迎，{{ userStore.userInfo?.nickname }}</p>
<el-row :gutter="20" style="margin-top: 20px;">
<div class="dashboard">
<div class="welcome-banner">
<h2>欢迎回来，{{ userStore.userInfo?.nickname }}</h2>
<p>今天也想写点什么吗？</p>
</div>
<el-row :gutter="20" style="margin-top: var(--spacing-xl);">
<el-col :span="8">
<el-card><el-statistic title="我的文章" :value="0" /></el-card>
<el-card class="stat-card">
<el-icon class="stat-icon" size="24"><Document /></el-icon>
<el-statistic title="我的文章" :value="0" />
</el-card>
</el-col>
<el-col :span="8">
<el-card><el-statistic title="总浏览量" :value="0" /></el-card>
<el-card class="stat-card">
<el-icon class="stat-icon" size="24"><View /></el-icon>
<el-statistic title="总浏览量" :value="0" />
</el-card>
</el-col>
<el-col :span="8">
<el-card><el-statistic title="获赞数" :value="0" /></el-card>
<el-card class="stat-card">
<el-icon class="stat-icon" size="24"><Star /></el-icon>
<el-statistic title="获赞数" :value="0" />
</el-card>
</el-col>
</el-row>
</div>
@@ -20,3 +31,36 @@
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
</script>
<style scoped>
.dashboard { max-width: 100%; }
.welcome-banner {
padding: var(--spacing-2xl) var(--spacing-xl);
background: linear-gradient(135deg, var(--color-primary-50), var(--bg-card));
border-radius: var(--radius-md);
margin-bottom: var(--spacing-lg);
}
.welcome-banner h2 {
margin: 0 0 var(--spacing-xs);
color: var(--color-primary-800);
font-size: var(--font-size-xl);
}
.welcome-banner p {
margin: 0;
color: var(--text-secondary);
font-size: var(--font-size-md);
}
.stat-card {
text-align: center;
padding: var(--spacing-lg);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-warm);
}
.stat-icon {
color: var(--color-primary);
margin-bottom: var(--spacing-sm);
}
</style>
jog-frontend/src/views/app/MyArticles.vue
+52 -25
View File
@@ -1,33 +1,36 @@
<template>
<div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<div class="page-header">
<h2>我的文章</h2>
<el-button type="primary" @click="$router.push('/app/editor')">写文章</el-button>
</div>
<el-table :data="articles" v-loading="loading">
<el-table-column prop="title" label="标题" />
<el-table-column prop="categoryName" label="分类" width="120" />
<el-table-column prop="viewCount" label="浏览" width="80" />
<el-table-column prop="likeCount" label="点赞" width="80" />
<el-table-column prop="publishedAt" label="发布时间" width="180">
<template #default="{ row }">{{ formatDate(row.publishedAt) }}</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template #default="{ row }">
<el-button text type="primary" @click="$router.push(`/app/editor/${row.id}`)">编辑</el-button>
<el-button text type="warning" @click="handleRecycle(row.id)">回收站</el-button>
<el-button text type="danger" @click="handleDelete(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:current-page="page"
:page-size="15"
:total="total"
layout="prev, pager, next"
@current-change="loadArticles"
style="margin-top: 20px; justify-content: center;"
/>
<el-card class="table-card">
<el-table :data="articles" v-loading="loading">
<el-table-column prop="title" label="标题" />
<el-table-column prop="categoryName" label="分类" width="120" />
<el-table-column prop="viewCount" label="浏览" width="80" />
<el-table-column prop="likeCount" label="点赞" width="80" />
<el-table-column prop="publishedAt" label="发布时间" width="180">
<template #default="{ row }">{{ formatDate(row.publishedAt) }}</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template #default="{ row }">
<el-button text type="primary" @click="$router.push(`/app/editor/${row.id}`)">编辑</el-button>
<el-button text type="warning" @click="handleRecycle(row.id)">回收站</el-button>
<el-button text type="danger" @click="handleDelete(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<div class="pagination-wrapper">
<el-pagination
v-model:current-page="page"
:page-size="15"
:total="total"
layout="prev, pager, next"
@current-change="loadArticles"
/>
</div>
</div>
</template>
@@ -70,3 +73,27 @@ function formatDate(dateStr) {
onMounted(loadArticles)
</script>
<style scoped>
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-xl);
}
.page-header h2 {
margin: 0;
color: var(--text-primary);
font-size: var(--font-size-xl);
}
.table-card {
border-radius: var(--radius-md);
overflow: hidden;
}
.table-card :deep(.el-card__body) { padding: 0; }
.pagination-wrapper {
margin-top: var(--spacing-xl);
display: flex;
justify-content: center;
}
</style>