feat: 添加分类树接口和分页组件，优化留言板功能

refactor: 重构文章服务和留言服务API调用方式
fix: 修复token验证逻辑和全局状态管理问题
style: 更新页脚样式和关于页面内容
docs: 添加类型定义和接口注释

src/views/nonsense.vue

@@ -30,9 +30,15 @@
             :style="getCharStyle(item.id, index)">{{ char }}</span>
         </div>
       </div>
-      // 分页区域
-      <PaginationComponent class="pagination-container" :list="nonsenseList" :pageSize="10"
-        @changePage="handleCurrentDataUpdate" />
+      <!-- 分页区域 -->
+      <div class="pagination-container">
+        <CustomPagination 
+          v-model:page-num="pageNum" 
+          :page-size="pageSize" 
+          :total-pages="totalPages"
+          @page-change="handlePageChange"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -42,9 +48,9 @@ import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { nonsenseService } from '@/services'
 import { ElMessage } from 'element-plus'
 import { ElMessageBox } from 'element-plus'
-import PaginationComponent from '@/views/page.vue'
 import { formatRelativeTime } from '@/utils/dateUtils'
 import { useGlobalStore } from '@/store/globalStore'
+import CustomPagination from '@/components/CustomPagination.vue'
 const globalStore = useGlobalStore()
 /**
  * 吐槽数据列表
@@ -61,15 +67,21 @@ const displayedNonsenseList = ref([])
 const loading = ref(false)
 // 错误状态
 const error = ref(false)
+// 分页相关
+const pageNum = ref(1) // 当前页码
+const pageSize = ref(5) // 每页数量
+const totalPages = ref(0) // 总页数
 
-// 处理分页数据更新
-const handleCurrentDataUpdate = (data) => {
-  displayedNonsenseList.value = data
-  // console.log(data)
+// 处理页码变化
+const handlePageChange = (newPage) => {
+  pageNum.value = newPage
+  loadNonsenseList()
 }
-
 // 重试加载
 const handleRetry = () => {
+  // 重置分页参数
+  pageNum.value = 1
+  totalPages.value = 0
   error.value = false
   loadNonsenseList()
 }
@@ -85,9 +97,22 @@ const loadNonsenseList = async () => {
   loading.value = true
   error.value = false
   try {
-    const response = await nonsenseService.getNonsenseByStatus(1)
+    const response = await nonsenseService.getNonsenseByStatus({
+      status: 1,
+      pageNum: pageNum.value - 1,
+      pageSize: pageSize.value
+    })
+    // console.log(response)
     if (response.code === 200) {
       nonsenseList.value = response.data
+      // 计算总页数
+      totalPages.value = response.totalPages
+      // 显示当前页的内容
+      displayedNonsenseList.value = response.data
+      // 初始化字符样式
+      // initializeCharStyles()
+      // 开始颜色变化定时器
+      console.log(displayedNonsenseList.value)
     } else {
       ElMessage.error('加载吐槽内容失败')
       error.value = true