refactor(views): 重构多个视图组件代码和样式

重构了多个视图组件的代码结构和样式，包括：
1. 重命名变量和类名以提高可读性
2. 优化CSS样式结构和响应式设计
3. 添加过渡动画和悬停效果
4. 统一组件命名规范
5. 改进表单验证和交互体验
6. 增强代码注释和文档

feat(types): 修改Article接口定义
更新Article接口字段，将categoryId改为attributeid，并将categoryName和tags改为数组类型

fix(services): 修改文章服务接口
更新getAllArticles方法，改为获取已发布文章

style(layouts): 调整主布局样式
修改导航栏背景透明度和布局间距

chore(assets): 更新背景图片
替换旧的背景图片文件

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>