feat: 实现文章状态管理及分类标签展示功能

新增文章状态管理功能，支持草稿、已发表和已删除状态的显示与切换
重构分类和标签展示模块，添加点击跳转功能
优化文章列表页面，增加状态筛选和分页功能
完善疯言疯语模块，支持编辑和删除操作
修复路由跳转和页面刷新问题

src/components/LeftModule.vue

@@ -20,7 +20,7 @@
             </el-icon>
             <span>首页</span>
           </el-menu-item>
-          <el-menu-item index="/article-list">
+          <el-menu-item index="/articlelist">
             <el-icon>
             </el-icon>
             <span>目录</span>
@@ -51,13 +51,13 @@
               </a>
             </div>
             <div>
-              <a href="#" class="stat-link">
+              <a href="#" class="stat-link" @click.prevent="showCategories">
                 <span class="site-state-item-count">{{ categoryCount }}</span>
                 <span class="site-state-item-name">分类</span>
               </a>
             </div>
             <div>
-              <a href="#" class="stat-link">
+              <a href="#" class="stat-link" @click.prevent="showAttributes">
                 <span class="site-state-item-count">{{ AttributeCount }}</span>
                 <span class="site-state-item-name">标签</span>
               </a>
@@ -68,6 +68,50 @@
         </el-tab-pane>
       </el-tabs>
     </div>
+    
+    <!-- 分类蒙板组件 -->
+    <Transition name="modal">
+      <div v-if="showCategoryModal" class="category-modal" @click.self="closeCategoryModal">
+        <div class="category-modal-content">
+          <div class="category-modal-header">
+            <h3>所有分类</h3>
+            <button class="category-modal-close" @click="closeCategoryModal">×</button>
+          </div>
+          <div class="category-modal-body">
+            <button 
+              v-for="category in categories" 
+              :key="category.typeid" 
+              class="category-button"
+              @click="handleCategoryClick(category)"
+            >
+              {{ category.typename }} <span class="category-button-count">({{ category.count || 0 }})</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+    
+    <!-- 标签蒙板组件 -->
+    <Transition name="modal">
+      <div v-if="showAttributeModal" class="category-modal" @click.self="closeAttributeModal">
+        <div class="category-modal-content">
+          <div class="category-modal-header">
+            <h3>所有标签</h3>
+            <button class="category-modal-close" @click="closeAttributeModal">×</button>
+          </div>
+          <div class="category-modal-body">
+            <button 
+              v-for="attribute in attributes" 
+              :key="attribute.attributeid" 
+              class="category-button"
+              @click="handleAttributeClick(attribute)"
+            >
+              {{ attribute.attributename }} <span class="category-button-count">({{ attribute.count || 0 }})</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -75,6 +119,8 @@
 import { reactive, ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { articleService, categoryService, categoryAttributeService } from "@/services";
+import { useGlobalStore } from '@/store/globalStore'
+const globalStore = useGlobalStore()
 
 // 当前激活菜单
 const activeIndex = ref('/:type')
@@ -86,6 +132,13 @@ const state = reactive({
   sizeList: ['small', '', 'large'] as const,
 })
 
+// 分类相关状态
+const categories = ref<any[]>([])
+const showCategoryModal = ref(false)
+
+// 标签相关状态
+const attributes = ref<any[]>([])
+const showAttributeModal = ref(false)
 
 // 处理菜单选择跳转
 const handleSelect = (key: string) => {
@@ -109,40 +162,110 @@ const fetchArticleCount = async () => {
   try { 
       const response = await articleService.getAllArticles();
       articleCount.value = response.data?.length || 0
-    // 这里应该调用API获取实际的文章数量
-    // 暂时设置为模拟数据
   } catch (error) {
     console.error('获取文章数量失败:', error)
     articleCount.value = 0
   }
 }
 
-// 获取分类数量
-const fetchCategoryCount = async () => {
+// 获取分类数据
+const fetchCategories = async () => {
   try { 
-      const response = await categoryService.getAllCategories();
-      categoryCount.value = response.data?.length || 0
-    // 这里应该调用API获取实际的分类数量
-    // 暂时设置为模拟数据
+    const response = await categoryService.getAllCategories();
+    // 如果API返回的数据结构不包含count属性，我们可以模拟一些数据
+    categories.value = response.data?.map((category: any) => ({
+      ...category,
+      count: 0 
+    })) || [];
+    categories.value.forEach(async (category: any) => {
+      const attributeResponse = await categoryAttributeService.getAttributesByCategory(category.typeid)
+      if (attributeResponse.data?.length) {
+        category.count = attributeResponse.data?.length || 0
+      }
+    })
+    categoryCount.value = categories.value.length
   } catch (error) {
-    console.error('获取分类数量失败:', error)
-    categoryCount.value = 0
+
+    console.error('获取分类失败:', error)
+    // 如果API调用失败，使用模拟数据
+    categories.value = [
+      
+    ];
+    categoryCount.value = categories.value.length
   }
 }
 
-// 获取标签数量
-const fetchAttributeCount = async () => {
+// 获取标签数据
+const fetchAttributes = async () => {
   try { 
-      const response = await categoryAttributeService.getAllAttributes();
-      AttributeCount.value = response.data?.length || 0
-    // 这里应该调用API获取实际的标签数量
-    // 暂时设置为模拟数据
+    const response = await categoryAttributeService.getAllAttributes();
+    // 如果API返回的数据结构不包含count属性，我们可以模拟一些数据
+    attributes.value = response.data?.map((attribute: any) => ({
+      ...attribute,
+      count: 0 
+    })) || [];
+    attributes.value.forEach(async (attribute: any) => {
+      const articleResponse = await articleService.getArticlesByAttributeId(attribute.attributeid)
+      if (articleResponse.data?.length) {
+        attribute.count = articleResponse.data?.length || 0
+      }
+    })
+    AttributeCount.value = attributes.value.length
   } catch (error) {
-    console.error('获取标签数量失败:', error)
-    AttributeCount.value = 0
+    console.error('获取标签失败:', error)
+    // 如果API调用失败，使用模拟数据
+    attributes.value = [
+      
+    ];
+    AttributeCount.value = attributes.value.length
   }
 }
 
+// 显示分类蒙板
+const showCategories = () => {
+  showCategoryModal.value = true
+}
+
+// 关闭分类蒙板
+const closeCategoryModal = () => {
+  showCategoryModal.value = false
+}
+
+// 处理分类点击
+const handleCategoryClick = (category: any) => {
+  // 这里可以根据实际需求跳转到对应分类的文章列表页
+  console.log('点击了分类:', category.typename)
+  // 示例：router.push(`/article-list?category=${category.typeid}`)
+  closeCategoryModal()
+}
+
+// 显示标签蒙板
+const showAttributes = () => {
+  showAttributeModal.value = true
+}
+
+// 关闭标签蒙板
+const closeAttributeModal = () => {
+  showAttributeModal.value = false
+}
+
+// 处理标签点击
+const handleAttributeClick = (attribute: any) => {
+  // 重置全局属性状态
+  globalStore.removeValue('attribute')
+
+  globalStore.setValue('attribute', {
+    id:  attribute.attributeid,
+    name: attribute.typename 
+  })
+  console.log(attribute)
+  router.push({
+    path: '/home/aericletype',
+
+  })
+  closeAttributeModal()
+}
+
 // 控制底部模块吸顶效果
 const scrollY = ref(false)
 const handleScroll = () => {
@@ -153,8 +276,8 @@ const handleScroll = () => {
 onMounted(() => {
   window.addEventListener('scroll', handleScroll)
   fetchArticleCount() // 组件挂载时获取文章数量
-  fetchCategoryCount() // 组件挂载时获取分类数量
-  fetchAttributeCount() // 组件挂载时获取标签数量
+  fetchCategories() // 组件挂载时获取分类数据
+  fetchAttributes() // 组件挂载时获取标签数据
 })
 
 onUnmounted(() => {
@@ -190,10 +313,17 @@ onUnmounted(() => {
 
 /* 内容区域样式 */
 #cont {
+  padding:0 0 10px 0;
   border-radius: 10px;
   background-color: rgba(255, 255, 255, 0.9);
   /* 白色半透明背景 */
 }
+#cont .cont1{
+  margin-bottom: 5px;
+}
+#cont .cont2{
+  margin-bottom: 0px;
+}
 
 .cont1 {
   text-align: center;
@@ -213,18 +343,19 @@ onUnmounted(() => {
 }
 
 /* 菜单样式 */
-.cont2 {
-  margin-top: 20px;
-}
-
 .cont2 .el-menu-vertical-demo {
   display: block;
   background-color: rgba(0, 0, 0, 0);
   /* 白色半透明背景 */
 }
+.cont2 .el-menu-vertical-demo li {
+  font-size: 14px;
+  height: 35px;
+}
 
 .cont2 .el-menu-vertical-demo .el-menu-item:nth-child(3) {
-  border-radius: 0 0 10px 10px;
+  /* border-radius: 0 0 10px 10px; */
+  /* margin-bottom: 10px; */
 }
 
 .cont2 .el-menu-vertical-demo .el-menu-item:hover {
@@ -376,4 +507,141 @@ onUnmounted(() => {
     transform: translateY(0);
   }
 }
+/* 分类蒙板样式 */
+.category-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.category-modal-content {
+  background-color: white;
+  border-radius: 10px;
+  width: 90%;
+  max-width: 500px;
+  max-height: 80vh;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.category-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.category-modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.category-modal-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #999;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: all 0.3s;
+}
+
+.category-modal-close:hover {
+  background-color: #f5f5f5;
+  color: #333;
+}
+
+.category-modal-body {
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 12px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.category-button {
+  background-color: rgba(102, 161, 216, 0.1);
+  border: 1px solid rgba(102, 161, 216, 0.3);
+  border-radius: 6px;
+  padding: 10px 15px;
+  cursor: pointer;
+  transition: all 0.3s;
+  font-size: 14px;
+  color: #333;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.category-button:hover {
+  background-color: rgba(102, 161, 216, 0.3);
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(102, 161, 216, 0.2);
+}
+
+.category-button-count {
+  font-size: 12px;
+  color: #66a1d8;
+  font-weight: 500;
+}
+
+/* 蒙板动画 */
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-active .category-modal-content,
+.modal-leave-active .category-modal-content {
+  transition: transform 0.3s ease;
+}
+
+.modal-enter-from .category-modal-content {
+  transform: scale(0.9);
+}
+
+.modal-leave-to .category-modal-content {
+  transform: scale(0.9);
+}
+
+/* 滚动条样式 */
+.category-modal-body::-webkit-scrollbar {
+  width: 6px;
+}
+
+.category-modal-body::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.category-modal-body::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 3px;
+}
+
+.category-modal-body::-webkit-scrollbar-thumb:hover {
+  background: #999;
+}
 </style>