feat: 优化前端布局和代理配置

refactor: 移除调试日志并优化代码结构
style: 调整响应式设计和UI细节
fix: 修复路由和导航相关的问题

src/views/nonsense.vue

@@ -1,6 +1,19 @@
 <template>
   <div class="nonsense-container">
     <div class="nonsense-list">
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading-state-container">
+        <el-skeleton :count="5" />
+      </div>
+      <!-- 错误状态 -->
+      <div v-if="error" class="error-state-container">
+        <div>加载失败，请稍后重试</div>
+        <el-button type="primary" @click="handleRetry">重试</el-button>
+      </div>
+      <!-- 空状态 -->
+      <div v-if="displayedNonsenseList.length === 0" class="empty-state-container">
+        <div>暂无吐槽内容</div>
+      </div>
       <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>
@@ -44,10 +57,21 @@ const charRefs = ref(new Map())
 const charStyles = ref(new Map())
 // 显示的吐槽内容列表
 const displayedNonsenseList = ref([])
+// 加载状态
+const loading = ref(false)
+// 错误状态
+const error = ref(false)
+
 // 处理分页数据更新
 const handleCurrentDataUpdate = (data) => {
   displayedNonsenseList.value = data
-  console.log(data)
+  // console.log(data)
+}
+
+// 重试加载
+const handleRetry = () => {
+  error.value = false
+  loadNonsenseList()
 }
 
 // 定时器引用
@@ -57,17 +81,24 @@ let colorChangeTimer = null
  * 加载所有吐槽内容
  */
 const loadNonsenseList = async () => {
+  // 设置加载状态
+  loading.value = true
+  error.value = false
   try {
     const response = await nonsenseService.getNonsenseByStatus(1)
     if (response.code === 200) {
       nonsenseList.value = response.data
     } else {
       ElMessage.error('加载吐槽内容失败')
+      error.value = true
     }
-  } catch (error) {
-    console.error('加载吐槽内容失败:', error)
+  } catch (err) {
+    console.error('加载吐槽内容失败:', err)
+    error.value = true
   } finally {
-    console.log('加载吐槽内容完成')
+    // 结束加载状态
+    loading.value = false
+    // console.log('加载吐槽内容完成')
   }
 }
 // 编辑吐槽内容
@@ -357,8 +388,7 @@ onBeforeUnmount(() => {
 /* 响应式设计 */
 @media (max-width: 768px) {
   .nonsense-container {
-    padding: 14px 4px 10px 4px;
-    margin: 0 8px;
+    margin: 0;
   }
 
   .nonsense-header h1 {
@@ -370,9 +400,9 @@ onBeforeUnmount(() => {
     line-height: 1.6;
   }
 
-  .nonsense-list {
+  /* .nonsense-list {
     gap: 12px;
-  }
+  } */
 
   .nonsense-item {
     padding: 14px 16px 10px 16px;