ruoyi-vue/移动端适配说明.md

# 移动端适配说明

## 概述

本项目已全面适配移动端，提供了完整的移动端体验优化，包括：

1. **移动端专用组件**：卡片式列表、折叠搜索表单、底部导航等
2. **响应式布局**：自动适配不同屏幕尺寸
3. **触摸优化**：符合移动端交互规范
4. **性能优化**：流畅的滚动和动画效果

## 核心组件

### 1. MobileTable - 移动端表格组件

移动端自动显示为卡片式列表，桌面端显示为表格。

```vue
<template>
  <mobile-table
    :data="tableData"
    :columns="columns"
    :show-selection="true"
    :show-actions="true"
    :selected-rows="selectedRows"
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"
    @action="handleAction"
  >
    <!-- 自定义卡片头部 -->
    <template #header="{ row }">
      {{ row.name }}
    </template>
    
    <!-- 自定义列内容 -->
    <template #column-status="{ row, value }">
      <el-tag :type="value === '0' ? 'success' : 'danger'">
        {{ value === '0' ? '正常' : '停用' }}
      </el-tag>
    </template>
    
    <!-- 自定义操作按钮 -->
    <template #actions="{ row }">
      <el-dropdown-item command="edit" icon="el-icon-edit">编辑</el-dropdown-item>
      <el-dropdown-item command="delete" icon="el-icon-delete">删除</el-dropdown-item>
    </template>
  </mobile-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      columns: [
        { prop: 'name', label: '名称', mobile: true },
        { prop: 'status', label: '状态', dictType: 'sys_normal_disable' },
        { prop: 'createTime', label: '创建时间', formatter: this.parseTime }
      ],
      selectedRows: []
    }
  },
  methods: {
    handleSelectionChange(row, selected) {
      // 处理选择变化
    },
    handleRowClick(row) {
      // 处理行点击
    },
    handleAction(command, row) {
      // 处理操作
    }
  }
}
</script>
```

### 2. MobileSearchForm - 移动端搜索表单

移动端自动折叠为快速搜索，点击筛选按钮展开完整表单。

```vue
<template>
  <mobile-search-form
    :model="queryParams"
    @search="handleSearch"
    @reset="handleReset"
    @quick-search="handleQuickSearch"
  >
    <el-form-item label="用户名称" prop="userName">
      <el-input v-model="queryParams.userName" placeholder="请输入用户名称" />
    </el-form-item>
    
    <el-form-item label="状态" prop="status">
      <el-select v-model="queryParams.status" placeholder="请选择">
        <el-option label="正常" value="0" />
        <el-option label="停用" value="1" />
      </el-select>
    </el-form-item>
  </mobile-search-form>
</template>
```

### 3. MobileButtonGroup - 移动端按钮组

移动端自动将按钮分组，主要按钮显示，其他按钮放入"更多"菜单。

```vue
<template>
  <mobile-button-group
    :buttons="buttons"
    :primary-count="2"
    :sticky="true"
    @button-click="handleButtonClick"
  />
</template>

<script>
export default {
  data() {
    return {
      buttons: [
        { key: 'add', label: '新增', type: 'primary', icon: 'el-icon-plus', handler: this.handleAdd },
        { key: 'edit', label: '修改', type: 'success', icon: 'el-icon-edit', handler: this.handleEdit },
        { key: 'delete', label: '删除', type: 'danger', icon: 'el-icon-delete', handler: this.handleDelete },
        { key: 'export', label: '导出', type: 'warning', icon: 'el-icon-download', handler: this.handleExport }
      ]
    }
  }
}
</script>
```

### 4. MobileBottomNav - 移动端底部导航

在移动端显示底部导航栏，方便快速切换页面。

```vue
<template>
  <mobile-bottom-nav
    :items="navItems"
    :show="true"
    @nav-click="handleNavClick"
  />
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { path: '/index', label: '首页', icon: 'el-icon-s-home' },
        { path: '/system/user', label: '用户', icon: 'el-icon-user' },
        { path: '/system/menu', label: '菜单', icon: 'el-icon-menu' }
      ]
    }
  }
}
</script>
```

## 工具函数

### mobile.js

提供移动端检测和优化工具函数：

```javascript
import { isMobile, isIOS, initMobile } from '@/utils/mobile'

// 检测是否为移动端
if (isMobile()) {
  // 移动端逻辑
}

// 初始化移动端优化
initMobile()
```

## 混入

### mobile.js mixin

提供移动端相关的计算属性和方法：

```vue
<script>
import mobileMixin from '@/mixins/mobile'

export default {
  mixins: [mobileMixin],
  methods: {
    someMethod() {
      // 使用移动端检测
      if (this.$isMobile) {
        // 移动端逻辑
      }
      
      // 使用移动端提示
      this.$mobileToast('操作成功', 'success')
    }
  }
}
</script>
```

## 样式优化

### 响应式断点

- **移动端**：`max-width: 768px`
- **平板**：`769px - 1024px`
- **桌面端**：`min-width: 1025px`

### 主要优化

1. **触摸目标**：所有可点击元素最小 44px × 44px
2. **字体大小**：输入框字体 16px 防止 iOS 自动缩放
3. **间距优化**：移动端使用更紧凑的间距
4. **圆角优化**：使用更大的圆角值（8px-12px）
5. **阴影优化**：使用更柔和的阴影效果

## 使用示例

### 完整列表页面示例

```vue
<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <mobile-search-form
      :model="queryParams"
      @search="getList"
      @reset="resetQuery"
    >
      <el-form-item label="用户名称" prop="userName">
        <el-input v-model="queryParams.userName" placeholder="请输入用户名称" />
      </el-form-item>
    </mobile-search-form>

    <!-- 按钮组 -->
    <mobile-button-group
      :buttons="buttons"
      :primary-count="2"
    />

    <!-- 表格/卡片列表 -->
    <mobile-table
      :data="dataList"
      :columns="columns"
      :show-selection="true"
      :selected-rows="selectedRows"
      @selection-change="handleSelectionChange"
    >
      <template #column-status="{ value }">
        <dict-tag :options="dict.type.sys_normal_disable" :value="value" />
      </template>
    </mobile-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
```

## 注意事项

1. **组件注册**：移动端组件需要在使用前注册或导入
2. **字典数据**：MobileTable 组件需要字典数据支持，确保字典已加载
3. **路由配置**：底部导航需要配置正确的路由路径
4. **性能优化**：大数据量时建议使用虚拟滚动或分页加载

## 浏览器支持

- iOS Safari 12+
- Android Chrome 70+
- 微信内置浏览器
- 其他现代移动浏览器

## 更新日志

### v1.0.0
- 初始版本
- 支持移动端卡片式列表
- 支持移动端折叠搜索
- 支持移动端底部导航
- 完整的响应式适配