refactor(views): 重构多个视图组件代码结构，优化类型定义和逻辑组织

feat(services): 新增文章分页查询方法，支持按状态筛选文章

style(styles): 调整主布局样式，优化分页组件显示效果

docs(README): 更新API文档，完善服务模块说明和类型定义

fix(components): 修复左侧模块点击属性时使用错误字段名的问题

chore(package): 移除未使用的依赖项，清理项目依赖

perf(layouts): 优化主布局组件性能，拆分功能模块，减少重复计算

test(views): 为分页组件添加基础测试用例

build: 更新构建配置，优化生产环境打包

ci: 调整CI配置，添加类型检查步骤

src/views/nonsense.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="nonsense-container">
     <div class="nonsense-list">
-      <div class="nonsense-item" v-for="item in nonsenseList" :key="item.id">
+      <div class="nonsense-item" v-for="item in displayedNonsenseList" :key="item.id">
         <div class="nonsense-meta-info">
           <span class="nonsense-time">{{ formatRelativeTime(item.time) }}</span>
           <div class="article-status-badge-container" v-if="globalStore.Login">
@@ -17,6 +17,9 @@
             :style="getCharStyle(item.id, index)">{{ char }}</span>
         </div>
       </div>
+      // 分页区域
+      <PaginationComponent class="pagination-container" :list="nonsenseList" :pageSize="10"
+        @changePage="handleCurrentDataUpdate" />
     </div>
   </div>
 </template>
@@ -25,6 +28,8 @@
 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'
 const globalStore = useGlobalStore()
@@ -37,6 +42,13 @@ const nonsenseList = ref([])
 // 存储字符引用和样式的映射
 const charRefs = ref(new Map())
 const charStyles = ref(new Map())
+// 显示的吐槽内容列表
+const displayedNonsenseList = ref([])
+// 处理分页数据更新
+const handleCurrentDataUpdate = (data) => {
+  displayedNonsenseList.value = data
+  console.log(data)
+}
 
 // 定时器引用
 let colorChangeTimer = null
@@ -62,7 +74,7 @@ const loadNonsenseList = async () => {
 const handleEdit = (item) => {
   // 清除更新文章状态
 
-   ElMessageBox.prompt('请输入您的疯言疯语：', '发表疯言疯语', {
+  ElMessageBox.prompt('请输入您的疯言疯语：', '发表疯言疯语', {
     confirmButtonText: '保存',
     cancelButtonText: '取消',
     inputValue: item.content,
@@ -266,7 +278,6 @@ onBeforeUnmount(() => {
 .nonsense-container {
   /* background-color: rgba(255, 255, 255, 0.85); */
   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;
 }
@@ -328,6 +339,7 @@ onBeforeUnmount(() => {
   margin-bottom: 8px;
   text-align: right;
 }
+
 .nonsense-meta-info span {
   padding: 4px 8px;
   margin-right: 8px;