diff --git a/jog-frontend/src/App.vue b/jog-frontend/src/App.vue
index 696f8b7..4738e9b 100644
--- a/jog-frontend/src/App.vue
+++ b/jog-frontend/src/App.vue
@@ -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>
diff --git a/jog-frontend/src/assets/styles/tokens.css b/jog-frontend/src/assets/styles/tokens.css
new file mode 100644
index 0000000..83a5141
--- /dev/null
+++ b/jog-frontend/src/assets/styles/tokens.css
@@ -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;
+}
diff --git a/jog-frontend/src/layouts/AdminLayout.vue b/jog-frontend/src/layouts/AdminLayout.vue
index 77b01dd..b438e96 100644
--- a/jog-frontend/src/layouts/AdminLayout.vue
+++ b/jog-frontend/src/layouts/AdminLayout.vue
@@ -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>
diff --git a/jog-frontend/src/layouts/AppLayout.vue b/jog-frontend/src/layouts/AppLayout.vue
index 0cc7d7e..5d184e8 100644
--- a/jog-frontend/src/layouts/AppLayout.vue
+++ b/jog-frontend/src/layouts/AppLayout.vue
@@ -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>
diff --git a/jog-frontend/src/layouts/BlogLayout.vue b/jog-frontend/src/layouts/BlogLayout.vue
index 802cbaf..75211e1 100644
--- a/jog-frontend/src/layouts/BlogLayout.vue
+++ b/jog-frontend/src/layouts/BlogLayout.vue
@@ -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>
diff --git a/jog-frontend/src/main.js b/jog-frontend/src/main.js
index 84b89e4..81f5d97 100644
--- a/jog-frontend/src/main.js
+++ b/jog-frontend/src/main.js
@@ -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'
diff --git a/jog-frontend/src/views/ArticleDetail.vue b/jog-frontend/src/views/ArticleDetail.vue
index 44aa978..3917bce 100644
--- a/jog-frontend/src/views/ArticleDetail.vue
+++ b/jog-frontend/src/views/ArticleDetail.vue
@@ -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>
diff --git a/jog-frontend/src/views/Home.vue b/jog-frontend/src/views/Home.vue
index da5ab50..4bb0d05 100644
--- a/jog-frontend/src/views/Home.vue
+++ b/jog-frontend/src/views/Home.vue
@@ -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>
diff --git a/jog-frontend/src/views/Login.vue b/jog-frontend/src/views/Login.vue
index 6d38ce7..01a59dd 100644
--- a/jog-frontend/src/views/Login.vue
+++ b/jog-frontend/src/views/Login.vue
@@ -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>
diff --git a/jog-frontend/src/views/Register.vue b/jog-frontend/src/views/Register.vue
index 6660a1c..a621771 100644
--- a/jog-frontend/src/views/Register.vue
+++ b/jog-frontend/src/views/Register.vue
@@ -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>
diff --git a/jog-frontend/src/views/admin/Articles.vue b/jog-frontend/src/views/admin/Articles.vue
index f65c7bc..15744a5 100644
--- a/jog-frontend/src/views/admin/Articles.vue
+++ b/jog-frontend/src/views/admin/Articles.vue
@@ -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>
diff --git a/jog-frontend/src/views/admin/Categories.vue b/jog-frontend/src/views/admin/Categories.vue
index 24218c9..70147e2 100644
--- a/jog-frontend/src/views/admin/Categories.vue
+++ b/jog-frontend/src/views/admin/Categories.vue
@@ -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>
diff --git a/jog-frontend/src/views/admin/Comments.vue b/jog-frontend/src/views/admin/Comments.vue
index b442fc5..793436c 100644
--- a/jog-frontend/src/views/admin/Comments.vue
+++ b/jog-frontend/src/views/admin/Comments.vue
@@ -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>
diff --git a/jog-frontend/src/views/admin/Dashboard.vue b/jog-frontend/src/views/admin/Dashboard.vue
index d0a2079..2ec006c 100644
--- a/jog-frontend/src/views/admin/Dashboard.vue
+++ b/jog-frontend/src/views/admin/Dashboard.vue
@@ -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>
diff --git a/jog-frontend/src/views/admin/Users.vue b/jog-frontend/src/views/admin/Users.vue
index b65482f..477b6da 100644
--- a/jog-frontend/src/views/admin/Users.vue
+++ b/jog-frontend/src/views/admin/Users.vue
@@ -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>
diff --git a/jog-frontend/src/views/app/ArticleEditor.vue b/jog-frontend/src/views/app/ArticleEditor.vue
index 74a46a0..4195eef 100644
--- a/jog-frontend/src/views/app/ArticleEditor.vue
+++ b/jog-frontend/src/views/app/ArticleEditor.vue
@@ -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>
diff --git a/jog-frontend/src/views/app/Dashboard.vue b/jog-frontend/src/views/app/Dashboard.vue
index a89e745..1ab60c7 100644
--- a/jog-frontend/src/views/app/Dashboard.vue
+++ b/jog-frontend/src/views/app/Dashboard.vue
@@ -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>
diff --git a/jog-frontend/src/views/app/MyArticles.vue b/jog-frontend/src/views/app/MyArticles.vue
index 8af2268..0039f77 100644
--- a/jog-frontend/src/views/app/MyArticles.vue
+++ b/jog-frontend/src/views/app/MyArticles.vue
@@ -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>