diff --git a/src/components/LeftModule.vue b/src/components/LeftModule.vue
index 545f95d..bafd8b8 100644
--- a/src/components/LeftModule.vue
+++ b/src/components/LeftModule.vue
@@ -215,9 +215,9 @@ onUnmounted(() => {
   background-color: rgba(255, 255, 255, 0.9); /* 白色半透明背景 */
   padding: 15px;
 }
-.demo-tabs  .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav-scroll{
-  text-align: center;
-  width: 100%;
+.el-tabs__nav-scroll .el-tabs__nav .el-tabs__item{
+  margin-left: 100px;
+  padding: 10px 20px;
 }
 /* 头像样式 */
 .mylogo {
diff --git a/src/img/8.21.1.jpg b/src/img/8.21.1.jpg
deleted file mode 100644
index 41bf8e6..0000000
Binary files a/src/img/8.21.1.jpg and /dev/null differ
diff --git a/src/img/bg.jpg b/src/img/bg.jpg
new file mode 100644
index 0000000..1af1296
Binary files /dev/null and b/src/img/bg.jpg differ
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index eccae98..aaf72ca 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="elrow-top" :class="elrowtop">
     <el-row justify="center">
-      <el-col :span="4" v-if="windowwidth">
+      <el-col :span="6" v-if="windowwidth">
         <div class="grid-content ep-bg-purple-dark">
           <div class="logo-text">清疯不颠</div>
         </div>
diff --git a/src/services/articleService.js b/src/services/articleService.js
index be92e9a..8fdc4f8 100644
--- a/src/services/articleService.js
+++ b/src/services/articleService.js
@@ -6,12 +6,12 @@ import apiService from './apiService'
  */
 class ArticleService {
   /**
-   * 获取所有文章
+   * 获取已发布文章
    * @param {Object} params - 查询参数
    * @returns {Promise}
    */
   getAllArticles(params = {}) {
-    return apiService.get('/articles', { params })
+    return apiService.get('/articles/published', { params })
   }
 
   /**
diff --git a/src/styles/MainLayout.css b/src/styles/MainLayout.css
index 2025993..bc6ed42 100644
--- a/src/styles/MainLayout.css
+++ b/src/styles/MainLayout.css
@@ -52,7 +52,7 @@
   /* 导航栏默认内边距 */
   --nav-padding-small: 10px 25px;
   /* 导航栏收缩后内边距 */
-  --nav-bg: rgba(145, 196, 238, 0.85);
+  --nav-bg: rgba(145, 196, 238, 0.95);
   /* 导航栏背景色 */
   --nav-bg-transparent: transparent;
   /* 导航栏透明背景 */
@@ -60,7 +60,7 @@
   /* 导航栏隐藏时背景 */
   --nav-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   /* 导航栏阴影 */
-  --nav-is-active: rgba(255, 0, 255, 0.5);
+  --nav-is-active: rgba(255, 0, 255, 0.75);
   /* 导航栏激活项字体颜色 */
   /* 字体颜色和菜单样式 */
   --font-color-title: #AF7AC5;
@@ -69,7 +69,7 @@
   /* 菜单字体大小 */
   --font-weight-menu: bold;
   /* 菜单字体加粗 */
-  --body-background-img: url('../img/8.21.1.jpg');
+  --body-background-img: url('../img/bg.jpg');
   /* 页面背景图片 */
 }
 
@@ -173,7 +173,7 @@ p {
   background: transparent;
   font-weight: var(--font-weight-menu);
   font-size: var(--font-size-menu);
-  left: 18%;
+  /* left: 18%; */
   border-bottom: 0;
 }
 
diff --git a/src/types/index.ts b/src/types/index.ts
index db51f39..33cb0b8 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -10,9 +10,10 @@ export interface Article {
   author: string
   createTime: string
   updateTime: string
-  categoryId: number
-  categoryName?: string
-  tags?: string
+  // categoryId: number
+  attributeid?: number
+  categoryName?: string[]
+  tags?: string[]
   viewCount?: number
   commentCount?: number
   articleid?: string
diff --git a/src/views/aboutme.vue b/src/views/aboutme.vue
index 8ac9d24..5f8ac27 100644
--- a/src/views/aboutme.vue
+++ b/src/views/aboutme.vue
@@ -1,70 +1,70 @@
 <template>
-  <div>
-    <div class="about-wrapper">
+  <div class="about-page-container">
+    <div class="about-content-wrapper">
       <!-- 页面头部 -->
-      <div class="about-header">
-        <h1 class="about-title">关于我</h1>
-        <div class="about-subtitle">一个热爱技术的全栈开发者</div>
+      <div class="about-page-header">
+        <h1 class="about-page-title">关于我</h1>
+        <div class="about-page-subtitle">一个热爱技术的全栈开发者</div>
       </div>
       
       <!-- 关于内容 -->
-      <div class="about-content">
-        <div class="about-intro">
+      <div class="about-main-content">
+        <div class="about-personal-intro">
           <p>你好！欢迎来到我的个人博客。我是一名热爱技术的全栈开发者，热衷于探索新技术和解决复杂问题。</p>
           <p>这个博客是我分享技术见解、学习心得和生活感悟的地方。希望通过这个平台，能够与更多志同道合的朋友交流和学习。</p>
         </div>
         
-        <div class="about-skills">
+        <div class="about-skill-section">
           <h3>前端技术栈</h3>
-          <div class="skills-list">
-            <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank" class="skill-link"><el-tag type="primary">HTML5</el-tag></a>
-            <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS" target="_blank" class="skill-link"><el-tag type="primary">CSS3</el-tag></a>
-            <a href="https://tailwindcss.com/" target="_blank" class="skill-link"><el-tag type="primary">Tailwind CSS</el-tag></a>
-            <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript" target="_blank" class="skill-link"><el-tag type="primary">JavaScript (ES6+)</el-tag></a>
-            <a href="https://www.typescriptlang.org/" target="_blank" class="skill-link"><el-tag type="primary">TypeScript</el-tag></a>
-            <a href="https://vuejs.org/" target="_blank" class="skill-link"><el-tag type="primary">Vue.js 3</el-tag></a>
-            <a href="https://pinia.vuejs.org/" target="_blank" class="skill-link"><el-tag type="primary">Pinia</el-tag></a>
-            <a href="https://react.dev/" target="_blank" class="skill-link"><el-tag type="primary">React 18</el-tag></a>
-            <a href="https://nodejs.org/" target="_blank" class="skill-link"><el-tag type="primary">Node.js</el-tag></a>
-            <a href="https://vite.dev/" target="_blank" class="skill-link"><el-tag type="primary">Vite</el-tag></a>
-            <a href="https://webpack.js.org/" target="_blank" class="skill-link"><el-tag type="primary">Webpack</el-tag></a>
-            <a href="https://element-plus.org/" target="_blank" class="skill-link"><el-tag type="primary">Element Plus</el-tag></a>
-            <a href="https://git-scm.com/" target="_blank" class="skill-link"><el-tag type="primary">Git</el-tag></a>
+          <div class="skills-display-list">
+            <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank" class="skill-tag-link"><el-tag type="primary">HTML5</el-tag></a>
+            <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS" target="_blank" class="skill-tag-link"><el-tag type="primary">CSS3</el-tag></a>
+            <a href="https://tailwindcss.com/" target="_blank" class="skill-tag-link"><el-tag type="primary">Tailwind CSS</el-tag></a>
+            <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript" target="_blank" class="skill-tag-link"><el-tag type="primary">JavaScript (ES6+)</el-tag></a>
+            <a href="https://www.typescriptlang.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">TypeScript</el-tag></a>
+            <a href="https://vuejs.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Vue.js 3</el-tag></a>
+            <a href="https://pinia.vuejs.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Pinia</el-tag></a>
+            <a href="https://react.dev/" target="_blank" class="skill-tag-link"><el-tag type="primary">React 18</el-tag></a>
+            <a href="https://nodejs.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Node.js</el-tag></a>
+            <a href="https://vite.dev/" target="_blank" class="skill-tag-link"><el-tag type="primary">Vite</el-tag></a>
+            <a href="https://webpack.js.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Webpack</el-tag></a>
+            <a href="https://element-plus.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Element Plus</el-tag></a>
+            <a href="https://git-scm.com/" target="_blank" class="skill-tag-link"><el-tag type="primary">Git</el-tag></a>
           </div>
         </div>
         
-        <div class="about-skills">
+        <div class="about-skill-section">
           <h3>后端技术栈</h3>
-          <div class="skills-list">
-            <a href="https://spring.io/projects/spring-boot" target="_blank" class="skill-link"><el-tag type="success">Spring Boot 3.x</el-tag></a>
-            <a href="https://spring.io/projects/spring-security" target="_blank" class="skill-link"><el-tag type="success">Spring Security</el-tag></a>
-            <a href="https://spring.io/projects/spring-data-jpa" target="_blank" class="skill-link"><el-tag type="success">Spring Data JPA</el-tag></a>
-            <a href="https://mybatis.org/mybatis-3/" target="_blank" class="skill-link"><el-tag type="success">MyBatis-Plus</el-tag></a>
-            <a href="https://www.mysql.com/" target="_blank" class="skill-link"><el-tag type="success">MySQL 8</el-tag></a>
-            <a href="https://www.postgresql.org/" target="_blank" class="skill-link"><el-tag type="success">PostgreSQL</el-tag></a>
-            <a href="https://redis.io/" target="_blank" class="skill-link"><el-tag type="success">Redis</el-tag></a>
-            <a href="https://projectlombok.org/" target="_blank" class="skill-link"><el-tag type="success">Lombok</el-tag></a>
-            <a href="https://mapstruct.org/" target="_blank" class="skill-link"><el-tag type="success">MapStruct</el-tag></a>
-            <a href="https://maven.apache.org/" target="_blank" class="skill-link"><el-tag type="success">Maven</el-tag></a>
-            <a href="https://gradle.org/" target="_blank" class="skill-link"><el-tag type="success">Gradle</el-tag></a>
-            <a href="https://www.oracle.com/java/technologies/java17.html" target="_blank" class="skill-link"><el-tag type="success">Java 17+</el-tag></a>
+          <div class="skills-display-list">
+            <a href="https://spring.io/projects/spring-boot" target="_blank" class="skill-tag-link"><el-tag type="success">Spring Boot 3.x</el-tag></a>
+            <a href="https://spring.io/projects/spring-security" target="_blank" class="skill-tag-link"><el-tag type="success">Spring Security</el-tag></a>
+            <a href="https://spring.io/projects/spring-data-jpa" target="_blank" class="skill-tag-link"><el-tag type="success">Spring Data JPA</el-tag></a>
+            <a href="https://mybatis.org/mybatis-3/" target="_blank" class="skill-tag-link"><el-tag type="success">MyBatis-Plus</el-tag></a>
+            <a href="https://www.mysql.com/" target="_blank" class="skill-tag-link"><el-tag type="success">MySQL 8</el-tag></a>
+            <a href="https://www.postgresql.org/" target="_blank" class="skill-tag-link"><el-tag type="success">PostgreSQL</el-tag></a>
+            <a href="https://redis.io/" target="_blank" class="skill-tag-link"><el-tag type="success">Redis</el-tag></a>
+            <a href="https://projectlombok.org/" target="_blank" class="skill-tag-link"><el-tag type="success">Lombok</el-tag></a>
+            <a href="https://mapstruct.org/" target="_blank" class="skill-tag-link"><el-tag type="success">MapStruct</el-tag></a>
+            <a href="https://maven.apache.org/" target="_blank" class="skill-tag-link"><el-tag type="success">Maven</el-tag></a>
+            <a href="https://gradle.org/" target="_blank" class="skill-tag-link"><el-tag type="success">Gradle</el-tag></a>
+            <a href="https://www.oracle.com/java/technologies/java17.html" target="_blank" class="skill-tag-link"><el-tag type="success">Java 17+</el-tag></a>
           </div>
         </div>
         
-        <div class="about-hobbies">
+        <div class="about-hobbies-section">
           <h3>兴趣爱好</h3>
-          <ul>
+          <ul class="hobbies-list">
             <li>阅读技术书籍和博客</li>
             <li>参与开源项目</li>
             <li>学习新技术和框架</li>
           </ul>
         </div>
         
-        <div class="about-contact">
+        <div class="about-contact-section">
           <h3>联系方式</h3>
           <p>如果你有任何问题或建议，欢迎随时联系我！</p>
-          <div class="contact-list">
-            <el-button type="primary" plain>留言板</el-button>
+          <div class="contact-options">
+            <el-button type="primary" plain @click="goToMessageBoard">留言板</el-button>
           </div>
         </div>
       </div>
@@ -76,159 +76,211 @@
 import { useRouter } from 'vue-router'
 const router = useRouter()
 
-// 跳转到留言板
+/**
+ * 跳转到留言板页面
+ * 当用户点击留言板按钮时触发
+ */
 const goToMessageBoard = () => {
   router.push('/message')
 }
 </script>
 
 <style scoped>
+/* 主容器样式 */
+.about-page-container {
+  width: 100%;
+  padding: 20px 0;
+}
 
-.about-wrapper {
+/* 内容包装器样式 */
+.about-content-wrapper {
   max-width: 900px;
   margin: 0 auto;
   background-color: white;
   border-radius: 12px;
   padding: 40px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.3s ease;
 }
 
-/* 页面头部 */
-.about-header {
+/* 内容包装器悬浮效果 */
+.about-content-wrapper:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+}
+
+/* 页面头部样式 */
+.about-page-header {
   text-align: center;
   margin-bottom: 40px;
   padding-bottom: 24px;
   border-bottom: 2px solid #ecf0f1;
 }
 
-.about-title {
+/* 页面标题样式 */
+.about-page-title {
   font-size: 2.2rem;
   color: #2c3e50;
   margin-bottom: 12px;
   font-weight: 600;
 }
 
-.about-subtitle {
+/* 页面副标题样式 */
+.about-page-subtitle {
   font-size: 1.1rem;
   color: #7f8c8d;
 }
 
-/* 关于内容 */
-.about-content {
+/* 主要内容区域样式 */
+.about-main-content {
   font-size: 1.05rem;
   line-height: 1.8;
   color: #34495e;
 }
 
-/* 个人介绍 */
-.about-intro {
+/* 个人介绍样式 */
+.about-personal-intro {
   margin-bottom: 32px;
 }
 
-.about-intro p {
+.about-personal-intro p {
   margin-bottom: 16px;
+  text-align: justify;
 }
 
-/* 技术栈 */
-.about-skills {
+/* 技能部分样式 */
+.about-skill-section {
   margin-bottom: 32px;
 }
 
-.about-skills h3 {
+.about-skill-section h3 {
   color: #2c3e50;
   font-size: 1.3rem;
   margin-bottom: 16px;
+  font-weight: 600;
 }
 
-.skills-list {
+/* 技能列表样式 */
+.skills-display-list {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
 }
 
-/* 技能链接样式 */
-.skill-link {
+/* 技能标签链接样式 */
+.skill-tag-link {
   text-decoration: none;
-  transition: transform 0.2s ease;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  display: inline-block;
 }
 
-.skill-link:hover {
+/* 技能标签链接悬浮效果 */
+.skill-tag-link:hover {
   transform: translateY(-2px);
+  opacity: 0.95;
 }
 
-.skill-link:hover .el-tag {
+.skill-tag-link:hover .el-tag {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
-/* 兴趣爱好 */
-.about-hobbies {
+/* 兴趣爱好部分样式 */
+.about-hobbies-section {
   margin-bottom: 32px;
 }
 
-.about-hobbies h3 {
+.about-hobbies-section h3 {
   color: #2c3e50;
   font-size: 1.3rem;
   margin-bottom: 16px;
+  font-weight: 600;
 }
 
-.about-hobbies ul {
+/* 兴趣爱好列表样式 */
+.hobbies-list {
   list-style: none;
   padding: 0;
 }
 
-.about-hobbies li {
+.hobbies-list li {
   position: relative;
   padding-left: 24px;
   margin-bottom: 12px;
+  transition: color 0.2s ease;
 }
 
-.about-hobbies li::before {
+.hobbies-list li:hover {
+  color: #3498db;
+}
+
+.hobbies-list li::before {
   content: '✦';
   position: absolute;
   left: 0;
   color: #3498db;
   font-size: 1.2rem;
+  transition: transform 0.2s ease;
 }
 
-/* 联系方式 */
-.about-contact {
+.hobbies-list li:hover::before {
+  transform: scale(1.2);
+}
+
+/* 联系方式部分样式 */
+.about-contact-section {
   margin-bottom: 20px;
 }
 
-.about-contact h3 {
+.about-contact-section h3 {
   color: #2c3e50;
   font-size: 1.3rem;
   margin-bottom: 16px;
+  font-weight: 600;
 }
 
-.about-contact p {
+.about-contact-section p {
   margin-bottom: 16px;
+  text-align: justify;
+}
+
+/* 联系方式选项样式 */
+.contact-options {
+  display: flex;
+  gap: 10px;
 }
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-  #about-container {
+  .about-page-container {
     padding: 20px 0;
   }
-  .about-wrapper {
+  
+  .about-content-wrapper {
     padding: 20px;
     margin: 0 15px;
   }
   
-  .about-title {
+  .about-page-title {
     font-size: 1.8rem;
   }
   
-  .about-subtitle {
+  .about-page-subtitle {
     font-size: 1rem;
   }
   
-  .about-content {
+  .about-main-content {
     font-size: 1rem;
   }
   
-  .about-header {
+  .about-page-header {
     margin-bottom: 32px;
   }
+  
+  .contact-options {
+    flex-direction: column;
+  }
+  
+  .skills-display-list {
+    gap: 8px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/aericlelist.vue b/src/views/aericlelist.vue
index b0dd9be..dd46417 100644
--- a/src/views/aericlelist.vue
+++ b/src/views/aericlelist.vue
@@ -1,32 +1,32 @@
 <template>
   <div id="allstyle">
-    <div class="header">
+    <div class="page-header">
       <h3>文章目录</h3>
     </div>
 
     <!-- 加载状态 -->
-    <div v-if="loading" class="loading-container">
+    <div v-if="loading" class="loading-state-container">
       <el-skeleton :count="5" />
     </div>
 
     <!-- 错误状态 -->
-    <div v-else-if="error" class="error-container">
+    <div v-else-if="error" class="error-state-container">
       <el-alert :title="error" type="error" show-icon />
       <el-button type="primary" @click="fetchCategories">重新加载</el-button>
     </div>
 
     <!-- 分类列表 -->
-    <div v-else-if="categories.length > 0" class="post_content" id="category-list">
+    <div v-else-if="categories.length > 0" class="article-content" id="category-list">
       <p><strong></strong></p>
-      <div class="alert alert-primary"><strong><span class="alert-inner--text">文章分类如下，点击跳转</span></strong></div>
+      <div class="alert alert-primary"><strong><span class="alert-inner-text">文章分类如下，点击跳转</span></strong></div>
       <div v-for="categoryGroup in categories" :key="categoryGroup.typeid"
-        class="category-group">
+        class="category-group-container">
         <div  v-if="categoryGroup.attributes.length > 0">
           <h2 id="header-id-1">{{ categoryGroup.typename }}</h2>
           <span class="badge badge-primary">共 {{ categoryGroup.attributes.length }} 篇</span>
-          <ul class="wp-block-list">
+          <ul class="category-item-list">
             <li v-for="category in categoryGroup.attributes" :key="category.typeid">
-               &nbsp;&nbsp;<a class="btn" @click="handleCategoryClick(category)"><kbd>{{ category.attributename
+               &nbsp;&nbsp;<a class="category-link" @click="handleCategoryClick(category)"><kbd>{{ category.attributename
                   }}</kbd></a>
               &nbsp; — —({{ category.articles.length }})
             </li>
@@ -37,7 +37,7 @@
     </div>
 
     <!-- 空状态 -->
-    <div v-else class="empty-container">
+    <div v-else class="empty-state-container">
       <el-empty description="暂无分类" />
     </div>
   </div>
@@ -178,34 +178,39 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.header {
+/* 页面标题样式 */
+.page-header {
   text-align: center;
   padding: 20px;
   margin-bottom: 20px;
 }
 
-.header h1 {
+.page-header h1 {
   color: #2c3e50;
   font-size: 1.8rem;
 }
 
-.post_content {
+/* 文章内容区域 */
+.article-content {
   padding: 15px;
 }
 
-.category-group ul li {
+/* 分类组样式 */
+.category-group-container ul li {
   display: flex;
   align-items: center;
 }
 
-.category-group ul li .btn::before {
+/* 分类链接样式 */
+.category-group-container ul li .category-link::before {
   background-color: rgba(0, 0, 0, 0);
 }
 
-.category-group ul li .btn:hover {
+.category-group-container ul li .category-link:hover {
   background-color: rgb(245, 247, 250, 0.7);
 }
 
+/* 提示框样式 */
 .alert:not(.alert-secondary) {
   color: #fff;
 }
@@ -223,7 +228,12 @@ onMounted(() => {
   background-color: #7889e8;
 }
 
-.btn kbd {
+.alert-inner-text {
+  font-weight: bold;
+}
+
+/* 键盘样式 */
+.category-link kbd {
   color: #fff;
   font-size: 14px;
   padding: 4px 8px;
@@ -239,14 +249,15 @@ onMounted(() => {
   border-radius: .25rem;
 }
 
-
-.category-group {
+/* 分类组容器样式 */
+.category-group-container {
   text-align: left;
   border-radius: 12px;
   padding: 20px;
   margin-bottom: 24px;
 }
 
+/* 徽章样式 */
 .badge {
   padding: .25em .4em;
   font-size: 75%;
@@ -259,6 +270,7 @@ onMounted(() => {
   margin: 10px 6px;
 }
 
+/* 分类标题样式 */
 .category-header {
   display: flex;
   justify-content: space-between;
@@ -274,7 +286,8 @@ onMounted(() => {
   margin: 0;
 }
 
-.pcont_ul {
+/* 项目列表样式 */
+.project-content-list {
   list-style: none;
   padding: 0;
   display: grid;
@@ -283,7 +296,7 @@ onMounted(() => {
   margin-top: 20px;
 }
 
-.pcont_li {
+.project-content-item {
   display: flex;
   align-items: center;
   padding: 10px 15px;
@@ -293,12 +306,13 @@ onMounted(() => {
   gap: 10px;
 }
 
-.pcont_li:hover {
+.project-content-item:hover {
   transform: translateY(-2px);
   background-color: rgba(236, 240, 241, 0.9);
 }
 
-.btn {
+/* 分类链接样式 */
+.category-link {
   position: relative;
   text-decoration: none;
   color: #34495e;
@@ -315,7 +329,7 @@ onMounted(() => {
 }
 
 /* 透明方块效果 */
-.btn::before {
+.category-link::before {
   content: '';
   position: absolute;
   top: 0;
@@ -331,12 +345,13 @@ onMounted(() => {
 }
 
 /* 悬浮效果 */
-.btn:hover::before {
+.category-link:hover::before {
   transform: scale(1.1);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
   background: rgba(145, 196, 238, 0.85);
 }
 
+/* 分类计数样式 */
 .category-count {
   color: #7f8c8d;
   font-size: 0.9rem;
@@ -366,42 +381,42 @@ onMounted(() => {
 }
 
 /* 加载状态 */
-.loading-container {
+.loading-state-container {
   padding: 40px 20px;
   text-align: center;
 }
 
 /* 错误状态 */
-.error-container {
+.error-state-container {
   text-align: center;
   padding: 40px 20px;
 }
 
-.error-container .el-button {
+.error-state-container .el-button {
   margin-top: 16px;
 }
 
 /* 空状态 */
-.empty-container {
+.empty-state-container {
   text-align: center;
   padding: 60px 20px;
 }
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-  .header {
+  .page-header {
     padding: 15px;
   }
 
-  .header h1 {
+  .page-header h1 {
     font-size: 1.5rem;
   }
 
-  .post_content {
+  .article-content {
     padding: 15px;
   }
 
-  .category-group {
+  .category-group-container {
     padding: 15px;
     margin-bottom: 15px;
   }
@@ -412,7 +427,7 @@ onMounted(() => {
     gap: 10px;
   }
 
-  .pcont_ul {
+  .project-content-list {
     grid-template-columns: 1fr;
     gap: 10px;
   }
diff --git a/src/views/articlecontents.vue b/src/views/articlecontents.vue
index ded2d00..3370b18 100644
--- a/src/views/articlecontents.vue
+++ b/src/views/articlecontents.vue
@@ -1,24 +1,24 @@
 <template>
-  <div>
+  <div id="article-detail-page">
     <!-- 加载状态 -->
-    <div v-if="loading" class="loading-container">
-      <el-skeleton :count="1" />
-      <el-skeleton :count="3" />
+    <div v-if="loading" class="loading-state-container">
+      <el-skeleton :count="1" />    
+      <el-skeleton :count="3" />    
     </div>
 
     <!-- 错误状态 -->
-    <div v-else-if="error" class="error-container">
-      <el-alert :title="error" type="error" show-icon />
+    <div v-else-if="error" class="error-state-container">
+      <el-alert :title="error" type="error" show-icon />    
       <el-button type="primary" @click="fetchArticleDetail">重新加载</el-button>
     </div>
 
     <!-- 文章详情 -->
-    <div v-else-if="article && Object.keys(article).length > 0" class="article-wrapper">
-      <!-- 文章头部 -->
-      <div class="article-header">
-        <h1 class="article-title">{{ article.title }}</h1>
+    <div v-else-if="article && Object.keys(article).length > 0" class="article-detail-wrapper">
+      <!-- 文章头部信息 -->
+      <div class="article-header-section">
+        <h1 class="article-main-title">{{ article.title }}</h1>
 
-        <div class="article-meta">
+        <div class="article-meta-info">
           <span class="meta-item">
             <i class="el-icon-date"></i>
             {{ formatDate(article.createTime) }}
@@ -34,31 +34,32 @@
         </div>
       </div>
 
-      <!-- 文章内容 -->
-      <div class="article-content">
+      <!-- 文章内容区域 -->
+      <div class="article-content-area">
         <div v-html="article.content"></div>
       </div>
 
-      <!-- 文章底部 -->
-      <div class="article-footer">
-        <div class="tag-list">
+      <!-- 文章底部信息 -->
+      <div class="article-footer-section">
+        <div class="article-tag-list">
           <span v-for="tag in article.tags || []" :key="tag" class="el-tag el-tag--primary">
             {{ tag }}
           </span>
         </div>
 
-        <!-- 文章操作 -->
-        <div class="article-actions">
+        <!-- 文章操作按钮 -->
+        <div class="article-actions-group">
           <el-button type="primary" @click="goBack" plain>
             返回
           </el-button>
         </div>
       </div>
-      <!-- 相关文章 -->
-      <div class="related-articles" v-if="relatedArticles.length > 0">
+      
+      <!-- 相关文章推荐 -->
+      <div class="related-articles-section" v-if="relatedArticles.length > 0">
         <h3>相关文章</h3>
         <div class="related-articles-list">
-          <div v-for="item in relatedArticles" :key="item.id" class="related-article-item"
+          <div v-for="item in relatedArticles" :key="item.id" class="related-article-card"
             @click="handleRelatedArticleClick(item.id)">
             <i class="el-icon-document"></i>
             <span>{{ item.title }}</span>
@@ -67,41 +68,43 @@
       </div>
     </div>
 
-    <!-- 空状态 -->
-    <div v-else class="empty-container">
+    <!-- 空状态 - 文章不存在 -->
+    <div v-else class="empty-state-container">
       <el-empty description="文章不存在" />
     </div>
 
-    <!-- 评论区 -->
+    <!-- 评论区组件 -->
     <div>
-      <messageboard class="message-board" v-if="article && Object.keys(article).length > 0"  />
+      <messageboard class="comment-section" v-if="article && Object.keys(article).length > 0"  />
     </div>
   </div>
 
 </template>
 
 <script setup lang="ts">
+// 导入必要的依赖
 import { useRoute, useRouter } from 'vue-router'
 import { ref, onMounted } from 'vue'
 import { articleService } from '@/services'
 import { messageService } from '@/services'
-import {categoryAttributeService} from '@/services'
+import { categoryAttributeService } from '@/services'
 import { ElMessage } from 'element-plus'
 import type { Article } from '@/types'
 import { formatDate } from '@/utils/dateUtils'
 import messageboard from './messageboard.vue'
 
+// 路由相关
 const route = useRoute()
 const router = useRouter()
 
-// 响应式状态
+// 响应式状态管理
 const article = ref<Article | null>(null)  // 使用 null 作为初始值，避免类型不匹配问题
 const loading = ref(false)
 const error = ref('')
 const relatedArticles = ref<Article[]>([])
 
 /**
- * 获取文章详情
+ * 获取文章详情数据
  */
 const fetchArticleDetail = async () => {
   try {
@@ -116,11 +119,15 @@ const fetchArticleDetail = async () => {
     }
 
     // 获取文章详情
-    const res = await articleService.getArticleById(Number(articleId))
+    const response = await articleService.getArticleById(Number(articleId))
 
-    if (res.data) {
-      article.value = res.data
-      article.value.categoryName =  await categoryAttributeService.getAttributeById(article.value.categoryId)|| '未分类'
+    if (response.data) {
+      article.value = response.data
+      
+      // 获取并设置分类名称
+      const categoryResponse = await categoryAttributeService.getAttributeById(article.value.attributeid)
+      article.value.categoryName = categoryResponse.data.attributename || '未分类'
+      
       // 增加文章浏览量
       try {
         await articleService.incrementArticleViews(Number(articleId))
@@ -137,29 +144,18 @@ const fetchArticleDetail = async () => {
       }
 
       // 获取相关文章（同属性下的其他文章）
-      if (article.value.categoryId) {
+      if (article.value.attributeid) {
         try {
-          const relatedRes = await articleService.getArticlesByCategory(article.value.categoryId)
+          const relatedResponse = await articleService.getArticlesByCategory(article.value.attributeid)
           // 过滤掉当前文章，并取前5篇作为相关文章
-          relatedArticles.value = relatedRes.data
-            ? relatedRes.data.filter((item: Article) => item.id !== article.value?.id).slice(0, 5)
+          relatedArticles.value = relatedResponse.data
+            ? relatedResponse.data.filter((item: Article) => item.id !== article.value?.id).slice(0, 5)
             : []
         } catch (err) {
           console.error('获取相关文章失败:', err)
           // 不阻止主流程
         }
       }
-      // 兼容旧的categoryId
-      else if (article.value.categoryId) {
-        try {
-          const relatedRes = await articleService.getArticlesByCategory(article.value.categoryId)
-          relatedArticles.value = relatedRes.data
-            ? relatedRes.data.filter((item: Article) => item.id !== article.value?.id).slice(0, 5)
-            : []
-        } catch (err) {
-          console.error('获取相关文章失败:', err)
-        }
-      }
     } else {
       throw new Error('文章不存在或已被删除')
     }
@@ -183,7 +179,8 @@ const goBack = () => {
 }
 
 /**
- * 处理相关文章点击
+ * 处理相关文章点击事件
+ * @param {number} id - 相关文章ID
  */
 const handleRelatedArticleClick = (id: number) => {
   router.push({
@@ -201,29 +198,69 @@ onMounted(() => {
 </script>
 
 <style scoped>
-#article-container {
+/* 页面主容器 */
+#article-detail-page {
   min-height: 100vh;
   background-color: #f5f7fa;
   padding: 40px 0;
 }
 
-.article-wrapper {
+/* 文章详情容器 */
+.article-detail-wrapper {
   max-width: 900px;
   margin: 0 auto;
   background-color: white;
   border-radius: 12px;
   padding: 40px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
-/* 文章头部 */
-.article-header {
+/* 加载状态容器 */
+.loading-state-container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 40px;
+  background-color: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* 错误状态容器 */
+.error-state-container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 60px 40px;
+  background-color: white;
+  border-radius: 12px;
+  text-align: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.error-state-container .el-button {
+  margin-top: 16px;
+}
+
+/* 空状态容器 */
+.empty-state-container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 80px 40px;
+  background-color: white;
+  border-radius: 12px;
+  text-align: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* 文章头部区域 */
+.article-header-section {
   margin-bottom: 32px;
   padding-bottom: 24px;
   border-bottom: 2px solid #ecf0f1;
 }
 
-.article-title {
+/* 文章标题 */
+.article-main-title {
   font-size: 2rem;
   color: #2c3e50;
   line-height: 1.4;
@@ -231,7 +268,8 @@ onMounted(() => {
   font-weight: 600;
 }
 
-.article-meta {
+/* 文章元信息 */
+.article-meta-info {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
@@ -239,90 +277,109 @@ onMounted(() => {
   font-size: 0.95rem;
 }
 
+/* 元信息项 */
 .meta-item {
   display: flex;
   align-items: center;
   gap: 6px;
+  font-weight: 500;
 }
 
-/* 文章内容 */
-.article-content {
-  font-size: 1.1rem;
+/* 文章内容区域 */
+.article-content-area {
+  font-size: 1.05rem;
   line-height: 1.8;
-  color: #333;
+  color: #34495e;
   margin-bottom: 32px;
 }
 
-.article-content p {
+/* 文章内容中的段落 */
+.article-content-area p {
   margin-bottom: 16px;
+  text-align: justify;
 }
 
-.article-content h2 {
-  font-size: 1.6rem;
+/* 文章内容中的二级标题 */
+.article-content-area h2 {
+  color: #2c3e50;
+  font-size: 1.5rem;
   margin: 32px 0 16px 0;
-  color: #2c3e50;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ecf0f1;
   font-weight: 600;
 }
 
-.article-content h3 {
-  font-size: 1.4rem;
-  margin: 24px 0 16px 0;
-  color: #2c3e50;
+/* 文章内容中的三级标题 */
+.article-content-area h3 {
+  color: #34495e;
+  font-size: 1.3rem;
+  margin: 24px 0 12px 0;
   font-weight: 600;
 }
 
-.article-content img {
+/* 文章内容中的图片 */
+.article-content-area img {
   max-width: 100%;
   height: auto;
   border-radius: 8px;
-  margin: 16px 0;
+  margin: 20px auto;
+  display: block;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.article-content blockquote {
+/* 文章内容中的引用 */
+.article-content-area blockquote {
   border-left: 4px solid #3498db;
   padding-left: 16px;
   color: #7f8c8d;
   margin: 16px 0;
+  font-style: italic;
 }
 
-/* 文章底部 */
-.article-footer {
+/* 文章底部区域 */
+.article-footer-section {
   padding-top: 24px;
-  border-top: 1px solid #ecf0f1;
+  border-top: 2px solid #ecf0f1;
   margin-bottom: 32px;
 }
 
-.tag-list {
+/* 标签列表 */
+.article-tag-list {
+  margin-bottom: 24px;
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 20px;
+  gap: 10px;
 }
 
-.article-actions {
+/* 文章操作按钮组 */
+.article-actions-group {
   display: flex;
   justify-content: flex-start;
 }
 
-/* 相关文章 */
-.related-articles {
+/* 相关文章区域 */
+.related-articles-section {
   padding-top: 32px;
   border-top: 2px solid #ecf0f1;
 }
 
-.related-articles h3 {
+/* 相关文章标题 */
+.related-articles-section h3 {
   font-size: 1.3rem;
   color: #2c3e50;
   margin-bottom: 16px;
+  font-weight: 600;
 }
 
+/* 相关文章列表容器 */
 .related-articles-list {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
-.related-article-item {
+/* 相关文章卡片 */
+.related-article-card {
   display: flex;
   align-items: center;
   gap: 10px;
@@ -331,164 +388,103 @@ onMounted(() => {
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.3s ease;
+  border: 1px solid transparent;
 }
 
-.related-article-item:hover {
+/* 相关文章卡片悬停效果 */
+.related-article-card:hover {
   background-color: #e9ecef;
   transform: translateX(5px);
+  border-color: #3498db;
 }
 
-.related-article-item i {
+.related-article-card i {
   color: #3498db;
 }
 
-.related-article-item span {
+.related-article-card span {
   font-size: 1rem;
   color: #495057;
+  transition: color 0.3s ease;
 }
 
-/* 错误和空状态 */
-.error-container {
-  max-width: 600px;
-  margin: 0 auto;
-  text-align: center;
+.related-article-card:hover span {
+  color: #3498db;
 }
 
-.empty-container {
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .article-wrapper {
-    padding: 20px;
-  }
-
-  .article-title {
-    font-size: 1.6rem;
-  }
-
-  .article-meta {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
-}
-
-/* 文章内容 */
-.article-content {
-  font-size: 1.05rem;
-  line-height: 1.8;
-  color: #34495e;
-  margin-bottom: 32px;
-}
-
-.article-content p {
-  margin-bottom: 16px;
-}
-
-.article-content h2 {
-  color: #2c3e50;
-  font-size: 1.5rem;
-  margin: 32px 0 16px 0;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #ecf0f1;
-}
-
-.article-content h3 {
-  color: #34495e;
-  font-size: 1.3rem;
-  margin: 24px 0 12px 0;
-}
-
-.article-content img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-  margin: 20px 0;
-  display: block;
-}
-
-/* 文章底部 */
-.article-footer {
-  padding-top: 24px;
-  border-top: 2px solid #ecf0f1;
-}
-
-.tag-list {
-  margin-bottom: 24px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.article-actions {
-  display: flex;
-  justify-content: flex-start;
-}
-
-/* 加载状态 */
-.loading-container {
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 40px;
-  background-color: white;
-  border-radius: 12px;
-}
-
-/* 错误状态 */
-.error-container {
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 60px 40px;
-  background-color: white;
-  border-radius: 12px;
-  text-align: center;
-}
-
-.error-container .el-button {
-  margin-top: 16px;
-}
-
-/* 空状态 */
-.empty-container {
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 80px 40px;
-  background-color: white;
-  border-radius: 12px;
-  text-align: center;
-}
-/* 评论区 */
-.message-board {
+/* 评论区样式 */
+.comment-section {
   margin-top: 32px;
 }
-/* 响应式设计 */
+
+/* 响应式设计 - 平板和手机 */
 @media (max-width: 768px) {
-  #article-container {
+  #article-detail-page {
     padding: 20px 0;
   }
 
-  .article-wrapper,
-  .loading-container,
-  .error-container,
-  .empty-container {
+  .article-detail-wrapper,
+  .loading-state-container,
+  .error-state-container,
+  .empty-state-container {
     padding: 20px;
     margin: 0 15px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
 
-  .article-title {
+  .article-main-title {
     font-size: 1.5rem;
+    line-height: 1.5;
   }
 
-  .article-meta {
-    gap: 15px;
+  .article-meta-info {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
     font-size: 0.9rem;
   }
 
-  .article-content {
+  .article-content-area {
     font-size: 1rem;
+    line-height: 1.7;
+  }
+
+  .article-content-area h2 {
+    font-size: 1.3rem;
+    margin: 24px 0 12px 0;
+  }
+
+  .article-content-area h3 {
+    font-size: 1.2rem;
+    margin: 20px 0 10px 0;
+  }
+
+  .related-articles-section h3 {
+    font-size: 1.2rem;
+  }
+
+  .related-article-card {
+    padding: 10px;
+    gap: 8px;
+  }
+
+  .related-article-card span {
+    font-size: 0.95rem;
+  }
+}
+
+/* 响应式设计 - 小屏幕手机 */
+@media (max-width: 480px) {
+  .article-detail-wrapper {
+    padding: 16px;
+  }
+
+  .article-main-title {
+    font-size: 1.35rem;
+  }
+
+  .article-meta-info {
+    font-size: 0.85rem;
   }
 }
 </style>
diff --git a/src/views/home.vue b/src/views/home.vue
index 0ab11cf..781d12f 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -11,24 +11,25 @@
     <transition-group name="article-item" tag="div" v-else>
       <div
         class="article-card"
-        v-for="item in datas"
-        :key="item.articleid"
-        @click="handleArticleClick(item)"
+        v-for="article in articleList"
+        :key="article.articleId"
+        @click="handleArticleClick(article)"
       >
-        <h2 class="article-title">{{ item.title }}</h2>
-        <div v-if="item.mg" class="article-tag">mg</div>
-        <p class="article-preview">{{ formatContentPreview(item.content, 150) }}</p>
-        <div class="article-meta">
-          <span class="article-date">{{ formatDateDisplay(item.createdAt || item.createTime) }}</span>
-          <span v-if="item.viewCount" class="article-views">{{ item.viewCount }} 阅读</span>
-          <span v-if="item.likes" class="article-likes">{{ item.likes }} 点赞</span>
-          <span v-if="item.messageCount" class="article-comments">{{ item.messageCount }} 评论</span>
+        <h6 class="article-title">{{ article.title }}</h6>
+        <div v-if="article.marked" class="article-special-tag">标记文章</div>
+        <p class="article-content-preview">{{ formatContentPreview(article.content, 150) }}</p>
+        <div class="article-meta-info">
+          <span class="article-publish-date">{{ formatDateDisplay(article.createdAt || article.createTime) }}</span>
+          <span v-if="article.viewCount" class="article-views-count">{{ article.viewCount }} 阅读</span>
+          <span v-if="article.categoryName" class="article-category-badge"> {{ article.categoryName }} </span>
+          <span v-if="article.likes > 0" class="article-likes-count">{{ article.likes }} 点赞</span>
+          <span v-if="article.commentCount > 0" class="article-comments-count">{{ article.commentCount }} 评论</span>
         </div>
       </div>
     </transition-group>
     
     <!-- 空状态 -->
-    <div v-if="!loading && datas.length === 0" class="empty-container">
+    <div v-if="!loading && articleList.length === 0" class="empty-state-container">
       <el-empty description="暂无文章" />
     </div>
   </div>
@@ -41,63 +42,79 @@ import { articleService } from '@/services'
 import { formatDate, formatRelativeTime } from '@/utils/dateUtils'
 import { formatContentPreview } from '@/utils/stringUtils'
 import { ElMessage } from 'element-plus'
-import { messageService } from '@/services'
+import { messageService, categoryAttributeService } from '@/services'
 import { useGlobalStore } from '@/store/globalStore'
+
+// 全局状态管理
 const globalStore = useGlobalStore()
-// 路由实例
+
+// 路由相关
 const router = useRouter()
 const route = useRoute()
 
-
-
 // 响应式状态
-const datas = ref([])
+const articleList = ref([])
 const loading = ref(false)
 
-
 /**
  * 获取文章列表
  */
 const fetchArticles = async () => {
   try {
     loading.value = true
-    let res = {} // 使用let而不是const
+    let response = {} 
     
-    // 检查URL参数
-    const localhome = route.path.split('/')[2];
+    // 检查URL参数，确定获取文章的方式
+    const pathSegment = route.path.split('/')[2];
     
-    // 优先使用attributeId参数（新接口）
-    if (localhome==='aericletype') {
-      const data = globalStore.getValue('attribute')
-      res = await articleService.getArticlesByAttributeId(data.id)
-    }
-    // 搜索标题
-    else if (localhome==='aericletitle') {
-      const data = globalStore.getValue('title')
-      res = await articleService.getArticlesByTitle(data.title)
-    }
-    // 获取所有文章
-    else {
+    // 根据不同路径获取不同文章
+    if (pathSegment === 'aericletype') {
+      // 按属性类型获取文章
+      const attributeData = globalStore.getValue('attribute')
+      response = await articleService.getArticlesByAttributeId(attributeData.id)
+    } else if (pathSegment === 'aericletitle') {
+      // 按标题搜索文章
+      const titleData = globalStore.getValue('title')
+      response = await articleService.getArticlesByTitle(titleData.title)
+    } else {
+      // 获取所有文章
       console.log('获取所有文章列表')
-      res = await articleService.getAllArticles()
+      response = await articleService.getAllArticles()
     }
-    // 获取每个文章的留言数量
-    for (const item of res.data) {
+    
+    // 为每个文章获取留言数量和分类名称
+    for (const article of response.data) {
       try {
-        const msgRes = await messageService.getMessagesByArticleId(item.articleid)
-        if (msgRes && msgRes.data) {
-          item.messageCount = msgRes.data.length
+        // 获取留言数量
+        const messageResponse = await messageService.getMessagesByArticleId(article.articleid)
+        console.log(`文章ID: ${article.articleid}, 分类ID: ${article.attributeid}`)
+        
+        // 获取分类名称
+        const categoryResponse = await categoryAttributeService.getAttributeById(article.attributeid)
+
+        if (categoryResponse && categoryResponse.data) {
+          article.categoryName = categoryResponse.data.attributename
         } else {
-          item.messageCount = 0
+          article.categoryName = '未分类'
         }
+        
+        // 设置评论数量
+        article.commentCount = messageResponse.data.length > 0 ? messageResponse.data.length : 0
+        
+        // 标准化ID字段名
+        article.articleId = article.articleid
+        
+        // 标准化标记字段名
+        article.marked = article.mg
       } catch (err) {
-        console.error(`获取文章${item.articleid}留言数量失败:`, err)
-        item.messageCount = 0
+        console.error(`获取文章${article.articleid}留言数量失败:`, err)
+        article.commentCount = 0
       }
     }
-    // 修复：使用正确的属性名data而不是date
-    console.log(res.data)
-    datas.value = res.data || []
+    
+    // 更新文章列表
+    console.log(response.data)
+    articleList.value = response.data || []
   } catch (error) {
     console.error('获取文章列表失败:', error)
     ElMessage.error('获取文章列表失败，请稍后重试')
@@ -106,21 +123,24 @@ const fetchArticles = async () => {
   }
 }
 
-
 /**
  * 处理文章点击事件
  * @param {Object} article - 文章对象
  */
 const handleArticleClick = (article) => {
   console.log('文章点击:', article)
-  globalStore.setValue('articlebutn', {
-    id: article.articleid,
+  
+  // 存储文章信息到全局状态
+  globalStore.setValue('articleInfo', {
+    id: article.articleId,
     name: article.title || '未命名文章',
   })
-    router.push({
-      path: '/article/:url',
-      query: { url: article.articleid }
-    })
+  
+  // 跳转到文章详情页
+  router.push({
+    path: '/article/:url',
+    query: { url: article.articleId }
+  })
 }
 
 /**
@@ -155,32 +175,38 @@ onMounted(() => {
 </script>
 
 <style scoped>
+/* 文章列表容器样式 */
 .article-list-container {
   max-width: 100%;
+  padding: 0 15px;
 }
 
-/* 分类筛选区域 */
-/* 加载状态 */
+/* 加载状态容器 */
 .loading-container {
   padding: 20px;
+  display: flex;
+  justify-content: center;
 }
 
-/* 文章卡片 */
+/* 文章卡片样式 */
 .article-card {
+  text-align: left;
   border-radius: 12px;
   display: flex;
   flex-direction: column;
-  gap: 0.8rem;
-  background-color: rgba(255, 255, 255, 0.9);
-  padding: 20px;
-  margin-bottom: 20px;
-  transition: all 0.4s ease;
+  gap: 12px;
+  background-color: rgba(255, 255, 255, 0.95);
+  padding: 24px;
+  margin-bottom: 24px;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: hidden;
   cursor: pointer;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
+/* 文章卡片悬停渐变效果 */
 .article-card::before {
   content: '';
   position: absolute;
@@ -189,82 +215,155 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, 
-            rgba(255,255,255,0.6) 0%, 
-            rgba(255,255,255,0.2) 50%,
-            rgba(255,255,255,0.05) 100%);
+            rgba(255, 255, 255, 0.6) 0%, 
+            rgba(255, 255, 255, 0.2) 50%,
+            rgba(255, 255, 255, 0.05) 100%);
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.4s ease;
 }
 
+/* 文章卡片悬停效果 */
 .article-card:hover {
-  transform: translateY(-5px) perspective(2000px) rotateX(0);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25),
-              0 0 50px rgba(255, 255, 255, 0.3);
+  transform: translateY(-5px);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15),
+              0 0 30px rgba(255, 255, 255, 0.2);
+  border-color: rgba(52, 152, 219, 0.3);
 }
 
 .article-card:hover::before {
   opacity: 1;
 }
 
-/* 文章标题 */
+/* 文章过渡动画 */
+.article-item {
+  transition: all 0.4s ease;
+}
+
+/* 文章标题样式 */
 .article-title {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   font-weight: 600;
   color: #2c3e50;
   margin: 0;
   transition: color 0.3s ease;
+  line-height: 1.4;
 }
 
 .article-card:hover .article-title {
   color: #3498db;
 }
 
-/* 文章元信息 */
-.article-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  font-size: 0.875rem;
-  color: #7f8c8d;
-}
-
-/* 文章分类 */
-.article-category {
-  padding: 2px 8px;
-  background-color: rgba(52, 152, 219, 0.1);
-  color: #3498db;
-  border-radius: 4px;
-  font-size: 0.8rem;
-}
-
-/* 文章标签 */
-.article-tag {
+/* 特殊标记标签样式 */
+.article-special-tag {
   display: inline-block;
-  padding: 2px 8px;
-  background-color: rgba(52, 152, 219, 0.1);
+  padding: 3px 10px;
+  background-color: rgba(52, 152, 219, 0.15);
   color: #3498db;
-  border-radius: 4px;
-  font-size: 0.8rem;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 500;
   align-self: flex-start;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
-/* 文章预览 */
-.article-preview {
+/* 文章内容预览样式 */
+.article-content-preview {
   color: #555;
   line-height: 1.6;
   margin: 0;
   font-size: 0.95rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-/* 空状态 */
-.empty-container {
+/* 文章元信息容器 */
+.article-meta-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 0.875rem;
+  color: #7f8c8d;
+  margin-top: auto;
+  padding-top: 10px;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+/* 发布日期样式 */
+.article-publish-date {
+  font-weight: 500;
+  color: #95a5a6;
+}
+
+/* 阅读数量样式 */
+.article-views-count {
+  display: flex;
+  align-items: center;
+  color: #95a5a6;
+}
+
+.article-views-count::before {
+  content: '|';
+  margin-right: 12px;
+  color: #e0e0e0;
+}
+
+/* 分类标签样式 */
+.article-category-badge {
+  display: flex;
+  align-items: center;
+  padding: 2px 10px;
+  background-color: rgba(52, 152, 219, 0.1);
+  color: #3498db;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+.article-category-badge::before {
+  content: '|';
+  margin-right: 12px;
+  color: #e0e0e0;
+}
+
+/* 点赞数量样式 */
+.article-likes-count {
+  display: flex;
+  align-items: center;
+  color: #95a5a6;
+}
+
+.article-likes-count::before {
+  content: '|';
+  margin-right: 12px;
+  color: #e0e0e0;
+}
+
+/* 评论数量样式 */
+.article-comments-count {
+  display: flex;
+  align-items: center;
+  color: #95a5a6;
+}
+
+.article-comments-count::before {
+  content: '|';
+  margin-right: 12px;
+  color: #e0e0e0;
+}
+
+/* 空状态容器样式 */
+.empty-state-container {
   text-align: center;
   padding: 60px 20px;
   color: #7f8c8d;
 }
 
-/* 过渡动画 */
+/* 过渡动画配置 */
 .article-item-enter-active,
 .article-item-leave-active {
   transition: all 0.5s ease;
@@ -276,19 +375,55 @@ onMounted(() => {
   transform: translateY(20px);
 }
 
-/* 响应式设计 */
+/* 响应式设计 - 平板和手机 */
 @media (max-width: 768px) {
+  .article-list-container {
+    padding: 0 10px;
+  }
+  
   .article-card {
-    padding: 15px;
-    margin-bottom: 15px;
+    padding: 18px;
+    margin-bottom: 18px;
+    gap: 10px;
   }
   
   .article-title {
-    font-size: 1.25rem;
+    font-size: 1.125rem;
   }
   
-  .article-meta {
+  .article-meta-info {
     font-size: 0.8rem;
+    gap: 8px;
+  }
+  
+  .article-content-preview {
+    font-size: 0.9rem;
+  }
+  
+  /* 响应式元信息分隔符 */
+  .article-views-count::before,
+  .article-category-badge::before,
+  .article-likes-count::before,
+  .article-comments-count::before {
+    margin-right: 8px;
+  }
+}
+
+/* 响应式设计 - 小屏幕手机 */
+@media (max-width: 480px) {
+  .article-card {
+    padding: 16px;
+    margin-bottom: 16px;
+  }
+  
+  .article-meta-info {
+    font-size: 0.75rem;
+    gap: 6px;
+  }
+  
+  .article-special-tag {
+    font-size: 0.7rem;
+    padding: 2px 8px;
   }
 }
 </style>
diff --git a/src/views/messageboard.vue b/src/views/messageboard.vue
index 079fe55..7af8ff8 100644
--- a/src/views/messageboard.vue
+++ b/src/views/messageboard.vue
@@ -1,80 +1,79 @@
 <template>
     <div>
-        <div class="message-board">
+        <div class="message-board-container">
             <!-- 留言内容区 -->
-            <div class="message-list">
-                <h3 class="title">留言板</h3>
+            <div class="message-list-wrapper">
+                <h3 class="message-board-title">留言板</h3>
                 <!-- 加载状态 -->
-                <div v-if="loading" class="loading-container">
+                <div v-if="loading" class="loading-state-container">
                     <el-skeleton :count="5" />
                 </div>
 
                 <!-- 留言列表 -->
-                <div class="comment-list">
-                    <div v-for="comment in messageBoardData" :key="comment.messageid" class="comment-item">
-                        <div class="comment-header">
-                            <!-- <img :src="getAvatar(comment.nickname)" :alt="" class="avatar"> -->
-                            <img :src="getAvatar()" class="avatar">
-                            <div class="user-info">
-                                <div class="username">{{ comment.displayName || comment.nickname }}</div>
-                                <div class="time">{{ formatDate(comment.createdAt) || '刚刚' }}</div>
+                <div class="comment-list-container">
+                    <div v-for="comment in messageBoardData" :key="comment.messageid" class="comment-item-wrapper">
+                        <div class="comment-header-info">
+                            <!-- 头像 -->
+                            <img :src="getAvatar()" class="user-avatar">
+                            <div class="user-meta-info">
+                                <div class="user-nickname">{{ comment.displayName || comment.nickname }}</div>
+                                <div class="comment-time">{{ formatDate(comment.createdAt) || '刚刚' }}</div>
                             </div>
                         </div>
-                        <div class="comment-content" v-html="comment.content"></div>
-                        <div class="comment-actions">
-                            <span class="likes-btn" @click="handleLike(comment)">
-                                <span v-if="comment.likes && comment.likes > 0" class="likes-count">{{ comment.likes }}</span>
+                        <div class="comment-content-text" v-html="comment.content"></div>
+                        <div class="comment-actions-bar">
+                            <span class="like-button" @click="handleLike(comment)">
+                                <span v-if="comment.likes && comment.likes > 0" class="like-count">{{ comment.likes }}</span>
                                 👍 赞
                             </span>
-                            <span class="reply-btn" @click="handleReply(null, comment)">回复</span>
+                            <span class="reply-button" @click="handleReply(null, comment)">回复</span>
                         </div>
                         <!-- 回复列表 -->
-                        <div v-if="comment.replies && comment.replies && comment.replies.length > 0" class="reply-list">
-                            <div v-for="reply in comment.replies" :key="reply.messageid" class="reply-item">
-                                <div class="reply-header">
-                                    <img :src="getAvatar()" class="avatar">
-                                    <div class="user-info">
-                                        <div class="username">{{ reply.displayName || reply.nickname }}</div>
-                                        <div class="time">{{ formatDate(reply.createdAt) || '刚刚' }}</div>
+                        <div v-if="comment.replies && comment.replies && comment.replies.length > 0" class="reply-list-container">
+                            <div v-for="reply in comment.replies" :key="reply.messageid" class="reply-item-wrapper">
+                                <div class="reply-header-info">
+                                    <img :src="getAvatar()" class="user-avatar">
+                                    <div class="user-meta-info">
+                                        <div class="user-nickname">{{ reply.displayName || reply.nickname }}</div>
+                                        <div class="comment-time">{{ formatDate(reply.createdAt) || '刚刚' }}</div>
                                     </div>
                                 </div>
-                                <div class="reply-content">{{ reply.content }}</div>
-                                <div class="reply-actions">
-                                    <span class="likes-btn" @click="handleLike(reply)">
-                                        <span v-if="reply.likes && reply.likes > 0" class="likes-count">{{ reply.likes }}</span>
+                                <div class="reply-content-text">{{ reply.content }}</div>
+                                <div class="reply-actions-bar">
+                                    <span class="like-button" @click="handleLike(reply)">
+                                        <span v-if="reply.likes && reply.likes > 0" class="like-count">{{ reply.likes }}</span>
                                         👍 赞
                                     </span>
-                                    <span class="reply-btn" @click="handleReply(comment, reply)">回复</span>
+                                    <span class="reply-button" @click="handleReply(comment, reply)">回复</span>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <!-- 无留言提示 -->
-                <div v-if="!loading && messageBoardData.length === 0 "
-                    class="message-empty">
+                <div v-if="!loading && messageBoardData.length === 0" class="empty-message-state">
                     还没有留言，快来抢沙发吧！
                 </div>
             </div>
 
             <!-- 留言输入区 -->
-            <div class="message-form-section">
-                <h2>发送评论（请正确填写邮箱地址，否则将会当成垃圾评论处理）</h2>
-                <div v-if="replyingTo.id" class="reply-preview">
+            <div class="comment-form-section">
+                <h2 class="comment-form-title">发送评论（请正确填写邮箱地址，否则将会当成垃圾评论处理）</h2>
+                <div v-if="replyingTo.id" class="reply-preview-container">
                     <span>
                         正在回复 <b>{{ replyingTo.nickname }}</b> 的评论:
                     </span>
-                    <div class="reply-preview-content">
+                    <div class="reply-preview-text">
                         {{ replyingTo.content }}
                     </div>
-                    <button class="reply-cancel-btn" @click="cancelReply">取消回复</button>
+                    <button class="cancel-reply-button" @click="cancelReply">取消回复</button>
                 </div>
                 <el-form :model="form" :rules="rules" ref="formRef" label-width="0">
                     <el-form-item prop="content">
                         <el-input v-model="form.content" placeholder="评论内容" type="textarea" rows="4" clearable
                             :disabled="submitting" />
                     </el-form-item>
-                    <div class="form-input-row">
+                    <div class="form-input-row form-input-row--inline">
                         <el-form-item prop="nickname">
                             <el-input v-model="form.nickname" placeholder="昵称" clearable :disabled="submitting" />
                         </el-form-item>
@@ -82,7 +81,7 @@
                             <el-input v-model="form.email" placeholder="邮箱/QQ号" clearable :disabled="submitting" />
                         </el-form-item>
                         <el-form-item prop="captcha">
-                            <div class="captcha-container">
+                            <div class="captcha-input-wrapper">
                                 <el-input 
                                     v-model="form.captcha" 
                                     placeholder="验证码" 
@@ -91,7 +90,7 @@
                                     @focus="showCaptchaHint = true"
                                     @blur="showCaptchaHint = false"
                                 />
-                                <div class="captcha-hint" @click="generateCaptcha" v-show="showCaptchaHint">
+                                <div class="captcha-hint-popup" @click="generateCaptcha" v-show="showCaptchaHint">
                                     {{ captchaHint }}
                                     <span class="refresh-icon">↻</span>
                                 </div>
@@ -464,442 +463,274 @@ const handleLike = async (msg) => {
 
 </script>
 
-<style scoped>
-.message-board {
+<style scoped lang="scss">
+/* 主容器样式 */
+.message-board-container {
     max-width: 1000px;
     margin: 0 auto;
 }
 
-.message-list {
-    margin-bottom: 30px;
-}
-
-.message-section {
-    margin-bottom: 30px;
-}
-
-.message-section h4 {
-    color: #3498db;
-    margin-bottom: 15px;
-    padding-bottom: 10px;
-    border-bottom: 2px solid #3498db;
-}
-
-.loading-container {
-    padding: 20px;
-}
-
-.message-item {
-    display: flex;
-    margin-bottom: 20px;
-    padding: 15px;
-    background-color: #f8f9fa;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-}
-
-.message-item:hover {
-    background-color: #e9ecef;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.message-avatar-container {
-    margin-right: 15px;
-    flex-shrink: 0;
-}
-
-.message-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    object-fit: cover;
-}
-
-.message-content-container {
-    flex: 1;
-}
-
-.message-item-top {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-}
-
-.message-nickname {
-    font-weight: 600;
-    color: #2c3e50;
-}
-
-.message-time {
-    font-size: 0.8rem;
-    color: #7f8c8d;
-}
-
-.message-content {
-    color: #34495e;
-    line-height: 1.6;
-    margin-bottom: 10px;
-    word-break: break-word;
-}
-
-.reply-to {
-    color: #e74c3c;
-    font-weight: 500;
-}
-
-.message-item-bottom {
-    display: flex;
-    justify-content: flex-end;
-}
-
-
-.reply-btn:hover {
-    color: #2980b9;
-    text-decoration: underline;
-}
-
-.likes-btn {
-    margin-right: 15px;
-    color: #666;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    padding: 4px 8px;
-    border-radius: 4px;
-}
-
-.likes-btn:hover {
-    color: #e74c3c;
-    background-color: rgba(231, 76, 60, 0.1);
-}
-
-.likes-btn:active {
-    transform: scale(0.95);
-}
-
-.likes-count {
-    margin-right: 4px;
-    font-weight: 600;
-}
-
-.replies {
-    margin-top: 15px;
-    padding-left: 20px;
-    border-left: 3px solid #3498db;
-}
-
-.reply-item {
-    margin-bottom: 15px;
-    /* padding: 10px; */
-    background-color: rgba(255, 255, 255, 0.7);
-    border-radius: 6px;
-}
-
-.reply-item:last-child {
-    margin-bottom: 0;
-}
-
-.message-empty {
-    text-align: center;
-    color: #7f8c8d;
-    padding: 40px;
-    background-color: #f8f9fa;
-    border-radius: 8px;
-}
-
-.message-form-section {
-    background-color: white;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.message-form-section h2 {
-    color: #2c3e50;
-    margin-bottom: 20px;
-    font-size: 1.3rem;
-}
-
-.reply-preview {
-    background-color: #e8f4fd;
-    padding: 15px;
-    border-radius: 6px;
-    margin-bottom: 20px;
-}
-
-.reply-preview-content {
-    margin-top: 10px;
-    padding: 10px;
-    background-color: rgba(255, 255, 255, 0.8);
-    border-radius: 4px;
-    font-style: italic;
-    color: #555;
-}
-
-.reply-cancel-btn {
-    background: none;
-    border: 1px solid #e74c3c;
-    color: #e74c3c;
-    padding: 4px 12px;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-top: 10px;
-    font-size: 0.85rem;
-}
-
-.reply-cancel-btn:hover {
-    background-color: #e74c3c;
-    color: white;
-}
-
-.form-input-row {
-    display: flex;
-    gap: 15px;
-    margin-bottom: 15px;
-}
-
-.form-input-row .el-form-item {
-    flex: 1;
-}
-
-.article-message-group {
-    margin-bottom: 25px;
-    padding: 15px;
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-}
-
-.article-message-header {
-    margin-bottom: 15px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #ecf0f1;
-}
-
-.article-title {
-    color: #3498db;
-    font-weight: 600;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-    .form-input-row {
-        flex-direction: column;
-    }
-
-    .message-item {
-        flex-direction: column;
-    }
-
-    .message-avatar-container {
-        margin-right: 0;
-        margin-bottom: 10px;
-    }
-}
-
-.message-list {
+/* 留言列表容器 */
+.message-list-wrapper {
     margin-bottom: 24px;
     background: #f8fafd;
     border-radius: 12px;
     padding: 16px;
     min-height: 120px;
 }
-
-.replies {
-    margin-left: 40px;
-    border-top: 2px solid #eee;
-    padding: 12px;
+/* 留言板标题 */
+.message-board-title {
+    color: #2c3e50;
+    margin-bottom: 16px;
+    font-size: 1.2rem;
+    font-weight: 600;
 }
 
-.message-item {
-    background: #fff;
-    border-radius: 10px;
-    padding: 14px 18px;
+/* 加载状态样式 */
+.loading-state-container {
+    padding: 40px 20px;
+    display: flex;
+    justify-content: center;
+}
+
+/* 评论列表容器 */
+.comment-list-container {
+    background-color: #f5f5f5;
+}
+
+/* 评论项容器 */
+.comment-item-wrapper {
+    background-color: #fff;
+    padding: 16px;
+    margin-bottom: 16px;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+}
+
+.comment-item-wrapper:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transform: translateY(-1px);
+}
+
+/* 评论头部信息 */
+.comment-header-info {
+    display: flex;
+    align-items: center;
     margin-bottom: 12px;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
-    flex-direction: column;
-    gap: 4px;
-    position: relative;
-    margin-left: 1%;
 }
 
-.message-avatar {
+/* 用户头像 */
+.user-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     margin-right: 12px;
-    float: left;
+    object-fit: cover;
 }
 
-.message-item-top {
+/* 用户元信息 */
+.user-meta-info {
+    flex: 1;
+    text-align: left;
+}
+
+/* 用户名 */
+.user-nickname {
+    font-weight: bold;
+    font-size: 14px;
+    color: #409eff;
+    margin-bottom: 4px;
+}
+
+/* 评论时间 */
+.comment-time {
+    font-size: 12px;
+    color: #999;
+}
+
+/* 评论内容文本 */
+.comment-content-text {
+    font-size: 14px;
+    line-height: 1.6;
+    margin-bottom: 12px;
+    word-break: break-word;
+    color: #333;
+}
+
+/* 评论操作栏 */
+.comment-actions-bar {
+    text-align: right;
+    font-size: 14px;
+    color: #666;
+}
+
+/* 点赞按钮 */
+.like-button {
+    margin-right: 15px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    padding: 4px 8px;
+    border-radius: 4px;
+    display: inline-block;
+}
+
+.like-button:hover {
+    color: #e74c3c;
+    background-color: rgba(231, 76, 60, 0.1);
+}
+
+.like-button:active {
+    transform: scale(0.95);
+}
+
+/* 点赞数量 */
+.like-count {
+    margin-right: 4px;
+    font-weight: 600;
+}
+
+/* 回复按钮 */
+.reply-button {
+    cursor: pointer;
+    transition: color 0.3s ease;
+    padding: 4px 8px;
+    border-radius: 4px;
+    display: inline-block;
+}
+
+.reply-button:hover {
+    color: #409eff;
+    background-color: rgba(64, 158, 255, 0.1);
+}
+
+/* 回复列表容器 */
+.reply-list-container {
+    margin-top: 16px;
+    padding-left: 52px;
+    border-top: 1px solid #f0f0f0;
+    padding-top: 16px;
+}
+/**
+ * 内联表单输入行样式
+ * 用于将表单输入项与标签或其他元素对齐
+ */
+.form-input-row--inline {
     display: flex;
-    justify-content: space-between;
     align-items: center;
 }
-
-.message-nickname {
-    font-weight: bold;
-    color: #409eff;
+.form-input-row--inline div:nth-child(2) {
+    margin-left: 9%;
+    margin-right: 9%;
 }
 
-.message-content {
+/* 回复项容器 */
+.reply-item-wrapper {
+    background-color: #fafafa;
+    padding: 12px;
+    margin-bottom: 8px;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+}
+
+.reply-item-wrapper:hover {
+    background-color: #f0f0f0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+/* 回复头部信息 */
+.reply-header-info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+/* 回复内容文本 */
+.reply-content-text {
+    font-size: 14px;
+    line-height: 1.5;
+    margin-bottom: 8px;
     color: #333;
-    margin-top: 2px;
 }
 
-.message-time {
+/* 回复操作栏 */
+.reply-actions-bar {
     font-size: 12px;
-    color: #aaa;
+    color: #666;
     text-align: right;
 }
 
-.message-item-bottom {
-    height: 45px;
-    /* 固定高度以防跳动 */
+/* 空状态提示 */
+.empty-message-state {
     text-align: center;
-}
-
-
-.message-empty {
     color: #bbb;
-    text-align: center;
     padding: 32px 0;
+    background-color: #f8f9fa;
+    border-radius: 8px;
 }
 
-.message-form-section {
+/* 评论表单区域 */
+.comment-form-section {
     background: #fff;
     border-radius: 12px;
     padding: 24px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
-.message-form-section h2 {
-    font-size: 1.1rem;
+/* 评论表单标题 */
+.comment-form-title {
+    color: #2c3e50;
     margin-bottom: 18px;
-    color: #333;
+    font-size: 1.1rem;
 }
 
-.reply-preview {
+/* 回复预览容器 */
+.reply-preview-container {
     background: #f0f9ff;
     border-left: 4px solid #409eff;
-    padding: 10px 16px;
-    border-radius: 8px;
+    padding: 15px;
+    border-radius: 6px;
     margin-bottom: 16px;
     color: #333;
 }
 
-.reply-preview-content {
+/* 回复预览文本 */
+.reply-preview-text {
     margin-top: 6px;
+    padding: 10px;
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 4px;
+    font-style: italic;
     color: #666;
     font-size: 0.98rem;
 }
 
-.reply-cancel-btn {
+/* 取消回复按钮 */
+.cancel-reply-button {
     background: #fff;
     color: #409eff;
     border: 1px solid #409eff;
     border-radius: 6px;
-    padding: 2px 10px;
+    padding: 4px 12px;
     cursor: pointer;
-    margin-top: 8px;
+    margin-top: 10px;
     font-size: 0.95rem;
     transition: background 0.2s, color 0.2s;
 }
 
-.reply-cancel-btn:hover {
+.cancel-reply-button:hover {
     background: #409eff;
     color: #fff;
 }
 
-.form-input-row {
-    display: flex;
-    gap: 16px;
-    margin-bottom: 12px;
-}
-
-.form-input-row .el-form-item {
-    flex: 1;
-}
-
-.el-form-item .el-input__inner,
-.el-form-item .el-textarea__inner {
-    min-height: 45px;
-    font-size: 1rem;
-}
-
-/* 加载状态 */
-.loading-container {
-    padding: 40px 20px;
-}
-
-/* 过渡动画 */
-.message-item-enter-active,
-.message-item-leave-active {
-    transition: all 0.5s ease;
-}
-
-.message-item-enter-from,
-.message-item-leave-to {
-    opacity: 0;
-    transform: translateY(20px);
-}
-
-.comment-list {
-    background-color: #f5f5f5;
-}
-
-.comment-item {
-    background-color: #fff;
-    padding: 16px;
-    margin-bottom: 16px;
-    border-radius: 8px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.comment-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 12px;
-}
-
-.avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    margin-right: 12px;
-}
-
-.user-info {
-    flex: 1;
-    text-align: left;
-}
-
-.username {
-    font-weight: bold;
-    font-size: 14px;
-    margin-bottom: 4px;
-}
-
-.time {
-    font-size: 12px;
-    color: #999;
-}
-
-.comment-content {
-    font-size: 14px;
-    line-height: 1.6;
-    margin-bottom: 12px;
-    word-break: break-word;
-}
-
-/* 验证码相关样式 */
-.captcha-container {
+/* 验证码输入包装器 */
+.captcha-input-wrapper {
     position: relative;
     width: 100%;
 }
 
-.captcha-hint {
+/* 验证码提示弹窗 */
+.captcha-hint-popup {
     position: absolute;
     top: -30px;
     right: 0;
@@ -918,85 +749,43 @@ const handleLike = async (msg) => {
     transition: all 0.3s;
 }
 
-.captcha-hint:hover {
+.captcha-hint-popup:hover {
     background-color: #e6f7ff;
     border-color: #91d5ff;
 }
 
-.refresh-icon {
-    font-size: 14px;
-    display: inline-block;
-    transition: transform 0.3s;
-}
-
-.captcha-hint:hover .refresh-icon {
-    transform: rotate(180deg);
-}
-
-.comment-actions {
-    text-align: right;
-    gap: 20px;
-    font-size: 14px;
-    color: #666;
-}
-
-.comment-actions .likes {
-    margin-right: 86%;
-}
-
-.likes,
-.reply-btn {
-    cursor: pointer;
-
-    &:hover {
-        color: #409eff;
-    }
-}
-
-.reply-list {
-    margin-top: 16px;
-    padding-left: 52px;
-    border-top: 1px solid #f0f0f0;
-    padding-top: 16px;
-}
-
-.reply-item {
-    background-color: #fafafa;
-    padding: 12px;
-    margin-bottom: 8px;
-    border-radius: 6px;
-}
-
-.reply-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 8px;
-}
-
-.reply-content {
-    font-size: 14px;
-    line-height: 1.5;
-    margin-bottom: 8px;
-}
-
-.reply-actions {
-    font-size: 12px;
-    color: #666;
-    text-align: right;
-}
-
+/* 响应式设计 */
 @media (max-width: 768px) {
-    .message-board {
+    .message-board-container {
         padding: 8px 0;
     }
-
-    .message-form-section {
+    
+    .message-list-wrapper {
         padding: 12px;
     }
-
+    
+    .comment-form-section {
+        padding: 16px;
+    }
+    
     .form-input-row {
         flex-direction: column;
         gap: 8px;
     }
+    
+    .comment-header-info,
+    .reply-header-info {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    .user-avatar {
+        margin-right: 0;
+        margin-bottom: 8px;
+    }
+    
+    .reply-list-container {
+        padding-left: 20px;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/nonsense.vue b/src/views/nonsense.vue
index cc84068..fe4575c 100644
--- a/src/views/nonsense.vue
+++ b/src/views/nonsense.vue
@@ -1,15 +1,15 @@
 <template>
-  <div id="aericle-style">
-    <div class="aericle-list">
+  <div class="nonsense-container">
+    <div class="nonsense-list">
       <div
-        class="aericle-item"
-        v-for="item in aericleList"
+        class="nonsense-item"
+        v-for="item in nonsenseList"
         :key="item.id"
       >
-        <div class="aericle-meta">
-          <span class="aericle-time">{{ item.time }}</span>
+        <div class="nonsense-meta-info">
+          <span class="nonsense-time">{{ item.time }}</span>
         </div>
-        <div class="aericle-content">{{ item.content }}</div>
+        <div class="nonsense-content">{{ item.content }}</div>
       </div>
     </div>
   </div>
@@ -18,8 +18,11 @@
 <script setup>
 import { ref } from 'vue'
 
-// 吐槽数据（仅站长可见/可发）
-const aericleList = ref([
+/**
+ * 吐槽数据列表
+ * 仅站长可见/可发
+ */
+const nonsenseList = ref([
   {
     id: 1,
     content: '嘿嘿 嘿嘿嘿（流口水ing）',
@@ -29,70 +32,101 @@ const aericleList = ref([
 </script>
 
 <style scoped>
-#aericle-style {
+/* 吐槽页面主容器样式 */
+.nonsense-container {
   background: rgba(255,255,255,0.95);
   border-radius: 12px;
   padding: 32px 20px 24px 20px;
   box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+  transition: box-shadow 0.3s ease;
 }
 
-.aericle-header {
+/* 吐槽页面主容器悬浮效果 */
+.nonsense-container:hover {
+  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
+}
+
+/* 吐槽头部样式 */
+.nonsense-header {
   text-align: center;
   margin-bottom: 28px;
 }
-.aericle-header h1 {
+
+.nonsense-header h1 {
   font-size: 2.2rem;
   margin-bottom: 8px;
   color: #409eff;
   letter-spacing: 2px;
 }
-.aericle-desc {
+
+.nonsense-description {
   color: #888;
   font-size: 1rem;
   margin-bottom: 0;
 }
 
-.aericle-list {
+/* 吐槽列表样式 */
+.nonsense-list {
   display: flex;
   flex-direction: column;
   gap: 18px;
 }
 
-.aericle-item {
+/* 吐槽项样式 */
+.nonsense-item {
   background: #f8fafd;
   border-radius: 10px;
   padding: 18px 20px 14px 20px;
   box-shadow: 0 1px 4px rgba(0,0,0,0.03);
   position: relative;
-  transition: box-shadow 0.2s;
-}
-.aericle-item:hover {
-  box-shadow: 0 4px 16px rgba(64,158,255,0.12);
+  transition: box-shadow 0.2s, transform 0.2s ease;
 }
 
-.aericle-meta {
+/* 吐槽项悬浮效果 */
+.nonsense-item:hover {
+  box-shadow: 0 4px 16px rgba(64,158,255,0.12);
+  transform: translateY(-2px);
+}
+
+/* 吐槽元信息样式 */
+.nonsense-meta-info {
   font-size: 13px;
   color: #aaa;
   margin-bottom: 8px;
   text-align: right;
 }
 
-.aericle-content {
+/* 吐槽内容样式 */
+.nonsense-content {
   font-size: 1.08rem;
   color: #333;
   line-height: 1.8;
   word-break: break-all;
+  font-style: italic;
 }
 
+/* 响应式设计 */
 @media (max-width: 768px) {
-  #aericle-style {
+  .nonsense-container {
     padding: 14px 4px 10px 4px;
+    margin: 0 8px;
   }
-  .aericle-header h1 {
+  
+  .nonsense-header h1 {
     font-size: 1.4rem;
   }
-  .aericle-content {
+  
+  .nonsense-content {
     font-size: 0.98rem;
+    line-height: 1.6;
+  }
+  
+  .nonsense-list {
+    gap: 12px;
+  }
+  
+  .nonsense-item {
+    padding: 14px 16px 10px 16px;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/toolbar/Alert.vue b/src/views/toolbar/Alert.vue
index bd242f6..a97c128 100644
--- a/src/views/toolbar/Alert.vue
+++ b/src/views/toolbar/Alert.vue
@@ -1,18 +1,53 @@
 <template>
-  <div style="max-width: 600px">
-    <el-alert title="Primary alert" type="primary" />
-    <el-alert title="Success alert" type="success" />
-    <el-alert title="Info alert" type="info" />
-    <el-alert title="Warning alert" type="warning" />
-    <el-alert title="Error alert" type="error" />
+  <div class="alert-demo-container">
+    <!-- 主要警告 -->
+    <el-alert title="主要警告" type="primary" />
+    
+    <!-- 成功警告 -->
+    <el-alert title="成功警告" type="success" />
+    
+    <!-- 信息警告 -->
+    <el-alert title="信息警告" type="info" />
+    
+    <!-- 警告提醒 -->
+    <el-alert title="警告提醒" type="warning" />
+    
+    <!-- 错误警告 -->
+    <el-alert title="错误警告" type="error" />
   </div>
 </template>
 
 <style scoped>
-.el-alert {
-  margin: 20px 0 0;
+/* 警告框演示容器样式 */
+.alert-demo-container {
+  max-width: 600px;
 }
-.el-alert:first-child {
+
+/* 警告框样式 */
+.alert-demo-container .el-alert {
+  margin: 20px 0 0;
+  transition: all 0.3s ease;
+}
+
+/* 第一个警告框的特殊样式（移除顶部外边距） */
+.alert-demo-container .el-alert:first-child {
   margin: 0;
 }
-</style>
+
+/* 警告框悬浮效果 */
+.alert-demo-container .el-alert:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .alert-demo-container {
+    max-width: 100%;
+    margin: 0 10px;
+  }
+  
+  .alert-demo-container .el-alert {
+    margin: 15px 0 0;
+  }
+}
+</style>
\ No newline at end of file