feat(cfc-web): 手机自适应扩展 — Dashboard 2列 + 表格滚动 + 表单堆叠

cfc-web/src/views/Dashboard.vue

@@ -12,7 +12,7 @@
 
 <!-- 统计卡片 -->
 <el-row :gutter="20" class="stats-row">
-  <el-col :span="6">
+  <el-col :xs="12" :sm="12" :md="6">
     <el-card class="stat-card" shadow="hover">
       <div class="stat-icon" style="background: linear-gradient(135deg, #FF8C42, #FFA66B);">
         <i class="el-icon-s-home"></i>
@@ -23,7 +23,7 @@
       </div>
     </el-card>
   </el-col>
-  <el-col :span="6">
+  <el-col :xs="12" :sm="12" :md="6">
     <el-card class="stat-card" shadow="hover">
       <div class="stat-icon" style="background: linear-gradient(135deg, #6366F1, #818CF8);">
         <i class="el-icon-user"></i>
@@ -34,7 +34,7 @@
       </div>
     </el-card>
   </el-col>
-  <el-col :span="6">
+  <el-col :xs="12" :sm="12" :md="6">
     <el-card class="stat-card" shadow="hover">
       <div class="stat-icon" style="background: linear-gradient(135deg, #F59E0B, #FBBF24);">
         <i class="el-icon-s-custom"></i>
@@ -45,7 +45,7 @@
       </div>
     </el-card>
   </el-col>
-  <el-col :span="6">
+  <el-col :xs="12" :sm="12" :md="6">
     <el-card class="stat-card" shadow="hover">
       <div class="stat-icon" style="background: linear-gradient(135deg, #10B981, #34D399);">
         <i class="el-icon-s-cooperation"></i>
@@ -60,7 +60,7 @@
 
 <!-- 第二行统计卡片 -->
 <el-row :gutter="20" class="stats-row">
-  <el-col :span="6">
+  <el-col :xs="12" :sm="12" :md="6">
     <el-card class="stat-card todo-stat-card" shadow="hover" @click.native="stats.pendingGuideCount > 0 && $router.push('/review-center?tab=guide')">
       <div class="stat-icon" :class="stats.pendingGuideCount > 0 ? 'todo-heart' : 'todo-disabled'">
         <i class="el-icon-s-check"></i>
@@ -74,7 +74,7 @@
       </div>
     </el-card>
   </el-col>
-  <el-col :span="6">
+  <el-col :xs="12" :sm="12" :md="6">
     <el-card class="stat-card todo-stat-card" shadow="hover" @click.native="stats.pendingPackageCount > 0 && $router.push('/review-center?tab=package')">
       <div class="stat-icon" :class="stats.pendingPackageCount > 0 ? 'todo-danger' : 'todo-disabled'">
         <i class="el-icon-s-goods"></i>
@@ -88,7 +88,7 @@
       </div>
     </el-card>
   </el-col>
-  <el-col :span="6">
+  <el-col :xs="12" :sm="12" :md="6">
     <el-card class="stat-card" shadow="hover">
       <div class="stat-icon" style="background: linear-gradient(135deg, #0EA5E9, #38BDF8);">
         <i class="el-icon-user-solid"></i>
@@ -99,7 +99,7 @@
       </div>
     </el-card>
   </el-col>
-  <el-col :span="6">
+  <el-col :xs="12" :sm="12" :md="6">
     <el-card class="stat-card" shadow="hover">
       <div class="stat-icon" style="background: linear-gradient(135deg, #8B5CF6, #A78BFA);">
         <i class="el-icon-s-home"></i>

cfc-web/src/views/Layout.vue

@@ -852,6 +852,59 @@ export default {
     padding-left: 4px !important;
     padding-right: 4px !important;
   }
+
+  /* 表格横向滚动优化 */
+  .el-table {
+    min-width: 600px !important;
+    table-layout: auto !important;
+  }
+  .el-table__body-wrapper {
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* 搜索表单：form-item 换行 */
+  .el-form-item--inline {
+    display: block !important;
+    margin-bottom: 12px !important;
+  }
+  .el-form-item--inline .el-form-item__content {
+    display: flex !important;
+    width: 100% !important;
+    margin-left: 0 !important;
+  }
+  .el-form-item--inline .el-form-item__label {
+    display: block !important;
+    text-align: left !important;
+    margin-bottom: 4px !important;
+  }
+
+  /* 搜索表单中 el-input/el-select 宽度 100% */
+  .el-form-item--inline .el-input,
+  .el-form-item--inline .el-select,
+  .el-form-item--inline .el-date-editor {
+    width: 100% !important;
+  }
+
+  /* 文章编辑等复杂表单 */
+  .el-form--inline .el-form-item {
+    display: block !important;
+  }
+  .el-form--inline .el-form-item__content {
+    display: block !important;
+    width: 100% !important;
+    margin-left: 0 !important;
+  }
+  .el-form--inline .el-form-item__label {
+    text-align: left !important;
+    display: block !important;
+  }
+
+  /* 通用：卡片内容紧凑 */
+  .stat-card {
+    margin-bottom: 12px !important;
+  }
+
 }
 
 /* 桌面端隐藏 header-left（无汉堡按钮） */

docs/superpowers/plans/2026-07-24-cfc-web-responsive-implementation.md

@@ -140,9 +140,9 @@
 
 ---
 
-## 6. 后续扩展建议（本期不做）
+## 6. 后续扩展（已全部实施）
 
-- [ ] 列表页表格列宽自适应（依赖各页面改造）
-- [ ] Dashboard 统计卡片移动端 2 列布局
-- [ ] 复杂表单（如文章编辑）移动端优化
-- [ ] 侧边栏二级/三级菜单移动端手风琴样式
+- ✅ 列表页表格横向滚动 — 全局 CSS `min-width: 600px` + `overflow-x: auto`
+- ✅ Dashboard 统计卡片移动端 2 列 — `:xs="12" :sm="12" :md="6"`
+- ✅ 复杂表单移动端优化 — `.el-form-item--inline` 换行 + 100% 宽度
+- ✅ 侧边栏二级/三级菜单移动端手风琴 — Element UI 默认行为，已通过折叠逻辑适配