移动端页面适配

src/pages/admin/products/index.vue

@@ -4,8 +4,13 @@
     subtitle="管理系统中的所有数据产品"
   >
     <template #actions>
-      <el-button type="primary" @click="handleCreateProduct">
-        新增产品
+      <el-button
+        type="primary"
+        :size="isMobile ? 'small' : 'default'"
+        @click="handleCreateProduct"
+      >
+        <span :class="isMobile ? 'hidden sm:inline' : ''">新增产品</span>
+        <span :class="isMobile ? 'sm:hidden' : 'hidden'">新增</span>
       </el-button>
     </template>
 
@@ -76,107 +81,201 @@
     </template>
 
     <template #table>
-      <el-table
-        v-loading="loading"
-        :data="products"
-        stripe
-        class="w-full"
-      >
-        <el-table-column prop="code" label="产品编号" width="120" />
-        <el-table-column prop="name" label="产品名称" min-width="150">
-          <template #default="{ row }">
-            <div class="flex items-center">
-              <span class="font-medium text-blue-600">{{ row.name }}</span>
-              <el-tag v-if="row.is_package" type="success" size="small" class="ml-2">组合包</el-tag>
+      <!-- 加载状态 -->
+      <div v-if="loading" class="flex justify-center items-center py-12">
+        <el-loading size="large" />
+      </div>
+
+      <!-- 移动端卡片布局 -->
+      <div v-else-if="isMobile && products.length > 0" class="product-cards">
+        <div
+          v-for="product in products"
+          :key="product.id"
+          class="product-card"
+        >
+          <div class="card-header">
+            <div class="flex-1">
+              <div class="flex items-center gap-2 mb-1">
+                <span class="font-semibold text-base text-blue-600">{{ product.name }}</span>
+                <el-tag v-if="product.is_package" type="success" size="small">组合包</el-tag>
+              </div>
+              <div class="text-xs text-gray-500">编号: {{ product.code }}</div>
             </div>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="category.name" label="分类" width="120">
-          <template #default="{ row }">
-            {{ row.category?.name || '未分类' }}
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="price" label="价格" width="120">
-          <template #default="{ row }">
-            <span class="text-red-600 font-semibold">¥{{ formatPrice(row.price) }}</span>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="cost_price" label="成本价" width="120">
-          <template #default="{ row }">
-            <span class="text-gray-600">¥{{ formatPrice(row.cost_price) }}</span>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="is_enabled" label="启用状态" width="120">
-          <template #default="{ row }">
-            <el-tag :type="row.is_enabled ? 'success' : 'danger'" size="small">
-              {{ row.is_enabled ? '已启用' : '已禁用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="is_visible" label="展示状态" width="120">
-          <template #default="{ row }">
-            <el-tag :type="row.is_visible ? 'success' : 'warning'" size="small">
-              {{ row.is_visible ? '已展示' : '已隐藏' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-
-        <el-table-column label="操作" min-width="350" fixed="right">
-          <template #default="{ row }">
-            <div class="flex gap-2">
+            <div class="flex flex-col gap-1">
+              <el-tag :type="product.is_enabled ? 'success' : 'danger'" size="small">
+                {{ product.is_enabled ? '已启用' : '已禁用' }}
+              </el-tag>
+              <el-tag :type="product.is_visible ? 'success' : 'warning'" size="small">
+                {{ product.is_visible ? '已展示' : '已隐藏' }}
+              </el-tag>
+            </div>
+          </div>
+          <div class="card-body">
+            <div class="card-row">
+              <span class="card-label">分类</span>
+              <span class="card-value">{{ product.category?.name || '未分类' }}</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">价格</span>
+              <span class="card-value text-red-600 font-semibold">¥{{ formatPrice(product.price) }}</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">成本价</span>
+              <span class="card-value text-gray-600">¥{{ formatPrice(product.cost_price) }}</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <div class="action-buttons">
               <el-button
                 type="primary"
                 size="small"
-                @click="handleEditProduct(row)"
+                @click="handleEditProduct(product)"
+                class="action-btn"
               >
                 编辑
               </el-button>
               <el-button
                 type="info"
                 size="small"
-                @click="handleViewProduct(row)"
+                @click="handleViewProduct(product)"
+                class="action-btn"
               >
                 查看
               </el-button>
-              <el-button
-                type="success"
-                size="small"
-                @click="handleConfigDocumentation(row)"
-              >
-                配置文档
-              </el-button>
-              <el-button
-                v-if="row.is_enabled"
-                type="warning"
-                size="small"
-                @click="handleToggleEnabled(row, false)"
-              >
-                禁用
-              </el-button>
-              <el-button
-                v-else
-                type="success"
-                size="small"
-                @click="handleToggleEnabled(row, true)"
-              >
-                启用
-              </el-button>
-              <el-button
-                type="danger"
-                size="small"
-                @click="handleDeleteProduct(row)"
-              >
-                删除
-              </el-button>
+              <el-dropdown @command="(cmd) => handleMobileAction(cmd, product)" trigger="click">
+                <el-button type="default" size="small" class="action-btn">
+                  更多<el-icon class="ml-1"><ArrowDown /></el-icon>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item command="config-doc">配置文档</el-dropdown-item>
+                    <el-dropdown-item
+                      :command="product.is_enabled ? 'disable' : 'enable'"
+                    >
+                      {{ product.is_enabled ? '禁用' : '启用' }}
+                    </el-dropdown-item>
+                    <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
             </div>
-          </template>
-        </el-table-column>
-      </el-table>
+          </div>
+        </div>
+      </div>
+
+      <!-- 桌面端表格布局 -->
+      <div v-else>
+        <el-table
+          v-loading="loading"
+          :data="products"
+          stripe
+          class="w-full"
+        >
+          <el-table-column prop="code" label="产品编号" width="120" />
+          <el-table-column prop="name" label="产品名称" min-width="150">
+            <template #default="{ row }">
+              <div class="flex items-center">
+                <span class="font-medium text-blue-600">{{ row.name }}</span>
+                <el-tag v-if="row.is_package" type="success" size="small" class="ml-2">组合包</el-tag>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="category.name" label="分类" width="120">
+            <template #default="{ row }">
+              {{ row.category?.name || '未分类' }}
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="price" label="价格" width="120">
+            <template #default="{ row }">
+              <span class="text-red-600 font-semibold">¥{{ formatPrice(row.price) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="cost_price" label="成本价" width="120">
+            <template #default="{ row }">
+              <span class="text-gray-600">¥{{ formatPrice(row.cost_price) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="is_enabled" label="启用状态" width="120">
+            <template #default="{ row }">
+              <el-tag :type="row.is_enabled ? 'success' : 'danger'" size="small">
+                {{ row.is_enabled ? '已启用' : '已禁用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="is_visible" label="展示状态" width="120">
+            <template #default="{ row }">
+              <el-tag :type="row.is_visible ? 'success' : 'warning'" size="small">
+                {{ row.is_visible ? '已展示' : '已隐藏' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" min-width="350" fixed="right">
+            <template #default="{ row }">
+              <div class="flex gap-2">
+                <el-button
+                  type="primary"
+                  size="small"
+                  @click="handleEditProduct(row)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  type="info"
+                  size="small"
+                  @click="handleViewProduct(row)"
+                >
+                  查看
+                </el-button>
+                <el-button
+                  type="success"
+                  size="small"
+                  @click="handleConfigDocumentation(row)"
+                >
+                  配置文档
+                </el-button>
+                <el-button
+                  v-if="row.is_enabled"
+                  type="warning"
+                  size="small"
+                  @click="handleToggleEnabled(row, false)"
+                >
+                  禁用
+                </el-button>
+                <el-button
+                  v-else
+                  type="success"
+                  size="small"
+                  @click="handleToggleEnabled(row, true)"
+                >
+                  启用
+                </el-button>
+                <el-button
+                  type="danger"
+                  size="small"
+                  @click="handleDeleteProduct(row)"
+                >
+                  删除
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="!loading && products.length === 0" class="text-center py-12">
+        <el-empty description="暂无产品数据">
+          <el-button type="primary" @click="handleCreateProduct">
+            创建第一个产品
+          </el-button>
+        </el-empty>
+      </div>
     </template>
 
     <template #pagination>
@@ -186,7 +285,8 @@
         v-model:page-size="pageSize"
         :page-sizes="[10, 20, 50, 100]"
         :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
+        :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
+        :small="isMobile"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
@@ -226,10 +326,15 @@ import ProductFormDialog from '@/components/admin/ProductFormDialog.vue'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
+import { ArrowDown } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 const router = useRouter()
 
+// 移动端检测
+const { isMobile, isTablet } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const products = ref([])
@@ -465,8 +570,165 @@ const handleFormSuccess = () => {
   closeDialog('form')
   loadProducts()
 }
+
+// 移动端操作处理
+const handleMobileAction = (command, product) => {
+  switch (command) {
+    case 'config-doc':
+      handleConfigDocumentation(product)
+      break
+    case 'enable':
+      handleToggleEnabled(product, true)
+      break
+    case 'disable':
+      handleToggleEnabled(product, false)
+      break
+    case 'delete':
+      handleDeleteProduct(product)
+      break
+  }
+}
 </script>
 
 <style scoped>
-/* 页面特定样式可以在这里添加 */
+/* 移动端卡片布局 */
+.product-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.product-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.card-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-label {
+  font-size: 12px;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.card-value {
+  font-size: 14px;
+  color: #1f2937;
+  font-weight: 500;
+}
+
+.card-footer {
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.action-btn {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 移动端响应式设计 */
+@media (max-width: 768px) {
+  /* 表格在移动端优化 */
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 800px;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 8px 4px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 4px;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 操作按钮在移动端优化 */
+  :deep(.el-table .el-button--small) {
+    padding: 4px 8px;
+    font-size: 11px;
+  }
+
+  /* 分页组件在移动端优化 */
+  :deep(.el-pagination) {
+    justify-content: center;
+  }
+
+  :deep(.el-pagination .el-pagination__sizes) {
+    display: none;
+  }
+
+  :deep(.el-pagination .el-pagination__total) {
+    display: none;
+  }
+
+  :deep(.el-pagination .el-pagination__jump) {
+    display: none;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .product-card {
+    padding: 12px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .card-body {
+    gap: 6px;
+  }
+
+  .card-label {
+    font-size: 11px;
+  }
+
+  .card-value {
+    font-size: 13px;
+  }
+
+  .action-buttons {
+    gap: 6px;
+  }
+
+  .action-btn {
+    font-size: 12px;
+    padding: 6px 8px;
+  }
+}
 </style>