diff --git a/src/views/system/comment/index.vue b/src/views/system/comment/index.vue
index 107c74c..1168854 100644
--- a/src/views/system/comment/index.vue
+++ b/src/views/system/comment/index.vue
@@ -5,46 +5,74 @@
       <el-tab-pane label="京东评论" name="jd">
         <div class="comment-container">
           <!-- 搜索区域 -->
-          <el-form :inline="true" :model="jdQueryParams" class="demo-form-inline" size="small">
-            <el-form-item label="商品ID">
-              <el-input v-model="jdQueryParams.productId" placeholder="商品ID" clearable @keyup.enter.native="handleJdQuery" />
-            </el-form-item>
-            <el-form-item label="产品类型">
-              <el-select v-model="jdQueryParams.productType" placeholder="请选择" clearable filterable style="width: 200px;">
-                <el-option
-                  v-for="(value, key) in jdProductTypeMap"
-                  :key="key"
-                  :label="key"
-                  :value="key">
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="用户名">
-              <el-input v-model="jdQueryParams.userName" placeholder="用户名" clearable @keyup.enter.native="handleJdQuery" />
-            </el-form-item>
-            <el-form-item label="使用状态">
-              <el-select v-model="jdQueryParams.isUse" placeholder="全部" clearable style="width: 120px;">
-                <el-option label="未使用" :value="0" />
-                <el-option label="已使用" :value="1" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="创建时间">
-              <el-date-picker
-                v-model="jdDateRange"
-                type="daterange"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                value-format="yyyy-MM-dd"
-                @change="handleJdDateRangeChange"
-              />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="el-icon-search" size="small" @click="handleJdQuery">搜索</el-button>
-              <el-button icon="el-icon-refresh" size="small" @click="resetJdQuery">重置</el-button>
-              <el-button type="success" icon="el-icon-download" size="small" @click="handleJdExport">导出</el-button>
-            </el-form-item>
-          </el-form>
+          <mobile-search-form
+            :model="jdQueryParams"
+            @search="handleJdQuery"
+            @reset="resetJdQuery"
+          >
+            <template #form="{ expanded }">
+              <el-form 
+                :inline="true" 
+                :model="jdQueryParams" 
+                class="demo-form-inline" 
+                size="small"
+                label-width="68px"
+              >
+                <el-form-item label="商品ID">
+                  <el-input v-model="jdQueryParams.productId" placeholder="商品ID" clearable @keyup.enter.native="handleJdQuery" />
+                </el-form-item>
+                <el-form-item label="产品类型">
+                  <el-select v-model="jdQueryParams.productType" placeholder="请选择" clearable filterable style="width: 200px;">
+                    <el-option
+                      v-for="(value, key) in jdProductTypeMap"
+                      :key="key"
+                      :label="key"
+                      :value="key">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="用户名">
+                  <el-input v-model="jdQueryParams.userName" placeholder="用户名" clearable @keyup.enter.native="handleJdQuery" />
+                </el-form-item>
+                <el-form-item label="使用状态">
+                  <el-select v-model="jdQueryParams.isUse" placeholder="全部" clearable style="width: 120px;">
+                    <el-option label="未使用" :value="0" />
+                    <el-option label="已使用" :value="1" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="创建时间">
+                  <el-date-picker
+                    v-model="jdDateRange"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    value-format="yyyy-MM-dd"
+                    @change="handleJdDateRangeChange"
+                  />
+                </el-form-item>
+                <!-- 桌面端搜索按钮 -->
+                <el-form-item v-if="!expanded">
+                  <el-button type="primary" icon="el-icon-search" size="small" @click="handleJdQuery">搜索</el-button>
+                  <el-button icon="el-icon-refresh" size="small" @click="resetJdQuery">重置</el-button>
+                  <el-button type="success" icon="el-icon-download" size="small" @click="handleJdExport">导出</el-button>
+                </el-form-item>
+              </el-form>
+            </template>
+          </mobile-search-form>
+          
+          <!-- 操作按钮区域（移动端单独显示） -->
+          <div class="action-buttons-section mobile-only">
+            <mobile-button-group
+              :buttons="jdActionButtons"
+              :primary-count="2"
+            />
+          </div>
+          
+          <!-- 桌面端按钮组 -->
+          <div class="desktop-action-buttons desktop-only">
+            <el-button type="success" icon="el-icon-download" size="small" @click="handleJdExport">导出</el-button>
+          </div>
 
           <!-- 表格区域 -->
           <el-table v-loading="jdLoading" :data="jdList" border>
@@ -106,46 +134,74 @@
       <el-tab-pane label="淘宝评论" name="tb">
         <div class="comment-container">
           <!-- 搜索区域 -->
-          <el-form :inline="true" :model="tbQueryParams" class="demo-form-inline" size="small">
-            <el-form-item label="商品ID">
-              <el-input v-model="tbQueryParams.productId" placeholder="商品ID" clearable @keyup.enter.native="handleTbQuery" />
-            </el-form-item>
-            <el-form-item label="产品类型">
-              <el-select v-model="tbQueryParams.productType" placeholder="请选择" clearable filterable style="width: 200px;">
-                <el-option
-                  v-for="(value, key) in tbProductTypeMap"
-                  :key="key"
-                  :label="key"
-                  :value="key">
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="用户名">
-              <el-input v-model="tbQueryParams.userName" placeholder="用户名" clearable @keyup.enter.native="handleTbQuery" />
-            </el-form-item>
-            <el-form-item label="使用状态">
-              <el-select v-model="tbQueryParams.isUse" placeholder="全部" clearable style="width: 120px;">
-                <el-option label="未使用" :value="0" />
-                <el-option label="已使用" :value="1" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="创建时间">
-              <el-date-picker
-                v-model="tbDateRange"
-                type="daterange"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                value-format="yyyy-MM-dd"
-                @change="handleTbDateRangeChange"
-              />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="el-icon-search" size="small" @click="handleTbQuery">搜索</el-button>
-              <el-button icon="el-icon-refresh" size="small" @click="resetTbQuery">重置</el-button>
-              <el-button type="success" icon="el-icon-download" size="small" @click="handleTbExport">导出</el-button>
-            </el-form-item>
-          </el-form>
+          <mobile-search-form
+            :model="tbQueryParams"
+            @search="handleTbQuery"
+            @reset="resetTbQuery"
+          >
+            <template #form="{ expanded }">
+              <el-form 
+                :inline="true" 
+                :model="tbQueryParams" 
+                class="demo-form-inline" 
+                size="small"
+                label-width="68px"
+              >
+                <el-form-item label="商品ID">
+                  <el-input v-model="tbQueryParams.productId" placeholder="商品ID" clearable @keyup.enter.native="handleTbQuery" />
+                </el-form-item>
+                <el-form-item label="产品类型">
+                  <el-select v-model="tbQueryParams.productType" placeholder="请选择" clearable filterable style="width: 200px;">
+                    <el-option
+                      v-for="(value, key) in tbProductTypeMap"
+                      :key="key"
+                      :label="key"
+                      :value="key">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="用户名">
+                  <el-input v-model="tbQueryParams.userName" placeholder="用户名" clearable @keyup.enter.native="handleTbQuery" />
+                </el-form-item>
+                <el-form-item label="使用状态">
+                  <el-select v-model="tbQueryParams.isUse" placeholder="全部" clearable style="width: 120px;">
+                    <el-option label="未使用" :value="0" />
+                    <el-option label="已使用" :value="1" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="创建时间">
+                  <el-date-picker
+                    v-model="tbDateRange"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    value-format="yyyy-MM-dd"
+                    @change="handleTbDateRangeChange"
+                  />
+                </el-form-item>
+                <!-- 桌面端搜索按钮 -->
+                <el-form-item v-if="!expanded">
+                  <el-button type="primary" icon="el-icon-search" size="small" @click="handleTbQuery">搜索</el-button>
+                  <el-button icon="el-icon-refresh" size="small" @click="resetTbQuery">重置</el-button>
+                  <el-button type="success" icon="el-icon-download" size="small" @click="handleTbExport">导出</el-button>
+                </el-form-item>
+              </el-form>
+            </template>
+          </mobile-search-form>
+          
+          <!-- 操作按钮区域（移动端单独显示） -->
+          <div class="action-buttons-section mobile-only">
+            <mobile-button-group
+              :buttons="tbActionButtons"
+              :primary-count="2"
+            />
+          </div>
+          
+          <!-- 桌面端按钮组 -->
+          <div class="desktop-action-buttons desktop-only">
+            <el-button type="success" icon="el-icon-download" size="small" @click="handleTbExport">导出</el-button>
+          </div>
 
           <!-- 表格区域 -->
           <el-table v-loading="tbLoading" :data="tbList" border>
@@ -281,9 +337,16 @@ import {
   listTbComment, getTbComment, updateTbComment, delTbComment, resetTbCommentByProductId,
   getCommentStatistics, getJdProductTypeMap, getTbProductTypeMap
 } from '@/api/jarvis/comment'
+import { mapGetters } from 'vuex'
+import MobileSearchForm from '@/components/MobileSearchForm'
+import MobileButtonGroup from '@/components/MobileButtonGroup'
 
 export default {
   name: 'CommentManagement',
+  components: {
+    MobileSearchForm,
+    MobileButtonGroup
+  },
   data() {
     return {
       activeTab: 'jd',
@@ -326,6 +389,28 @@ export default {
       imageList: []
     }
   },
+  computed: {
+    ...mapGetters(['device']),
+    isMobile() {
+      if (this.device === 'mobile') {
+        return true
+      }
+      if (typeof window !== 'undefined' && window.innerWidth < 768) {
+        return true
+      }
+      return false
+    },
+    jdActionButtons() {
+      return [
+        { key: 'export', label: '导出', type: 'success', icon: 'el-icon-download', handler: () => this.handleJdExport(), disabled: false }
+      ]
+    },
+    tbActionButtons() {
+      return [
+        { key: 'export', label: '导出', type: 'success', icon: 'el-icon-download', handler: () => this.handleTbExport(), disabled: false }
+      ]
+    }
+  },
   created() {
     this.getJdList()
     this.getJdProductTypeMap()
@@ -488,5 +573,42 @@ export default {
   flex-wrap: wrap;
   justify-content: center;
 }
+
+/* 操作按钮区域 */
+.action-buttons-section {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+/* 移动端和桌面端按钮组显示控制 */
+@media (max-width: 768px) {
+  .desktop-only {
+    display: none !important;
+  }
+  
+  .action-buttons-section.mobile-only {
+    display: block;
+  }
+}
+
+@media (min-width: 769px) {
+  .mobile-only {
+    display: none !important;
+  }
+  
+  .desktop-action-buttons.desktop-only {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 12px;
+  }
+}
+
+.desktop-action-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 12px;
+}
 </style>
 
diff --git a/src/views/system/favoriteProduct/index.vue b/src/views/system/favoriteProduct/index.vue
index f4f05c5..a38a677 100644
--- a/src/views/system/favoriteProduct/index.vue
+++ b/src/views/system/favoriteProduct/index.vue
@@ -1,43 +1,68 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="商品名称" prop="productName">
-        <el-input
-          v-model="queryParams.productName"
-          placeholder="请输入商品名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="店铺名称" prop="shopName">
-        <el-input
-          v-model="queryParams.shopName"
-          placeholder="请输入店铺名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="SKUID" prop="skuid">
-        <el-input
-          v-model="queryParams.skuid"
-          placeholder="请输入SKUID"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="是否置顶" prop="isTop">
-        <el-select v-model="queryParams.isTop" placeholder="请选择" clearable>
-          <el-option label="是" :value="1" />
-          <el-option label="否" :value="0" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+    <mobile-search-form
+      :model="queryParams"
+      @search="handleQuery"
+      @reset="resetQuery"
+    >
+      <template #form="{ expanded }">
+        <el-form 
+          :model="queryParams" 
+          ref="queryForm" 
+          size="small" 
+          :inline="true" 
+          v-show="showSearch" 
+          label-width="68px"
+        >
+          <el-form-item label="商品名称" prop="productName">
+            <el-input
+              v-model="queryParams.productName"
+              placeholder="请输入商品名称"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="店铺名称" prop="shopName">
+            <el-input
+              v-model="queryParams.shopName"
+              placeholder="请输入店铺名称"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="SKUID" prop="skuid">
+            <el-input
+              v-model="queryParams.skuid"
+              placeholder="请输入SKUID"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="是否置顶" prop="isTop">
+            <el-select v-model="queryParams.isTop" placeholder="请选择" clearable>
+              <el-option label="是" :value="1" />
+              <el-option label="否" :value="0" />
+            </el-select>
+          </el-form-item>
+          <!-- 桌面端搜索按钮 -->
+          <el-form-item v-if="!expanded">
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </template>
+    </mobile-search-form>
 
-    <el-row :gutter="10" class="mb8">
+    <!-- 操作按钮区域（移动端单独显示） -->
+    <div class="action-buttons-section mobile-only">
+      <mobile-button-group
+        :buttons="actionButtons"
+        :primary-count="2"
+      />
+    </div>
+
+    <!-- 桌面端按钮组 -->
+    <el-row :gutter="10" class="mb8 desktop-only">
       <el-col :span="1.5">
         <el-button
           type="primary"
@@ -347,14 +372,38 @@
 import { listFavoriteProduct, getFavoriteProduct, delFavoriteProduct, addFavoriteProduct, updateFavoriteProduct, updateTopStatus } from "@/api/system/favoriteProduct";
 import { generatePromotionContent } from "@/api/system/jdorder";
 import { mapGetters, mapActions } from 'vuex'
+import MobileSearchForm from '@/components/MobileSearchForm'
+import MobileButtonGroup from '@/components/MobileButtonGroup'
 import PublishDialog from '@/components/PublishDialog.vue'
 // 自动加入常用逻辑由 PublishDialog 内部触发（线报、转链页面），本页主要用于打开发品弹窗
 
 export default {
   name: "FavoriteProduct",
-  components: { PublishDialog },
+  components: { 
+    PublishDialog,
+    MobileSearchForm,
+    MobileButtonGroup
+  },
   computed: {
-    ...mapGetters(['favoriteProductRefreshKey'])
+    ...mapGetters(['favoriteProductRefreshKey', 'device']),
+    isMobile() {
+      if (this.device === 'mobile') {
+        return true
+      }
+      if (typeof window !== 'undefined' && window.innerWidth < 768) {
+        return true
+      }
+      return false
+    },
+    actionButtons() {
+      return [
+        { key: 'add', label: '新增', type: 'primary', icon: 'el-icon-plus', handler: () => this.handleAdd(), disabled: false },
+        { key: 'update', label: '修改', type: 'success', icon: 'el-icon-edit', handler: () => this.handleUpdate(), disabled: this.single },
+        { key: 'delete', label: '删除', type: 'danger', icon: 'el-icon-delete', handler: () => this.handleDelete(), disabled: this.multiple },
+        { key: 'top', label: '批量置顶', type: 'warning', icon: 'el-icon-top', handler: () => this.handleBatchTop(), disabled: this.multiple },
+        { key: 'export', label: '导出', type: 'info', icon: 'el-icon-download', handler: () => this.handleExport(), disabled: false }
+      ]
+    }
   },
   data() {
     return {
@@ -628,4 +677,31 @@ export default {
 .el-tag {
   margin-right: 5px;
 }
+
+/* 操作按钮区域 */
+.action-buttons-section {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+/* 移动端和桌面端按钮组显示控制 */
+@media (max-width: 768px) {
+  .desktop-only {
+    display: none !important;
+  }
+  
+  .action-buttons-section.mobile-only {
+    display: block;
+  }
+}
+
+@media (min-width: 769px) {
+  .mobile-only {
+    display: none !important;
+  }
+  
+  .desktop-only {
+    display: block;
+  }
+}
 </style>
diff --git a/src/views/system/giftcoupon/index.vue b/src/views/system/giftcoupon/index.vue
index 6636e62..015f6fd 100644
--- a/src/views/system/giftcoupon/index.vue
+++ b/src/views/system/giftcoupon/index.vue
@@ -3,47 +3,74 @@
     <list-layout>
       <!-- 搜索区域 -->
       <template #search>
-        <el-form :inline="true" :model="queryParams" label-width="100px">
-          <el-form-item label="礼金Key">
-            <el-input v-model="queryParams.giftCouponKey" placeholder="礼金批次ID" clearable size="small" @keyup.enter.native="handleQuery" />
-          </el-form-item>
-          <el-form-item label="商品SKU">
-            <el-input v-model="queryParams.skuId" placeholder="商品SKU ID" clearable size="small" @keyup.enter.native="handleQuery" />
-          </el-form-item>
-          <el-form-item label="商品名称">
-            <el-input v-model="queryParams.skuName" placeholder="商品名称" clearable size="small" @keyup.enter.native="handleQuery" />
-          </el-form-item>
-          <el-form-item label="类型">
-            <el-select v-model="queryParams.owner" placeholder="请选择" clearable size="small">
-              <el-option label="自营" value="g" />
-              <el-option label="POP" value="pop" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="过期状态">
-            <el-select v-model="queryParams.isExpired" placeholder="请选择" clearable size="small">
-              <el-option label="未过期" :value="0" />
-              <el-option label="已过期" :value="1" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="创建时间">
-            <el-date-picker
-              v-model="dateRange"
-              type="daterange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              value-format="yyyy-MM-dd"
-              size="small"
-              range-separator="至"
-              @change="handleDateRangeChange"
-            />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-            <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-            <el-button type="success" size="small" icon="el-icon-plus" @click="handleCreate">创建礼金</el-button>
-            <el-button type="warning" size="small" icon="el-icon-download" @click="handleExport" v-hasPermi="['system:giftcoupon:export']">导出</el-button>
-          </el-form-item>
-        </el-form>
+        <mobile-search-form
+          :model="queryParams"
+          @search="handleQuery"
+          @reset="resetQuery"
+        >
+          <template #form="{ expanded }">
+            <el-form 
+              :model="queryParams" 
+              :inline="true"
+              label-width="100px"
+            >
+              <el-form-item label="礼金Key">
+                <el-input v-model="queryParams.giftCouponKey" placeholder="礼金批次ID" clearable size="small" @keyup.enter.native="handleQuery" />
+              </el-form-item>
+              <el-form-item label="商品SKU">
+                <el-input v-model="queryParams.skuId" placeholder="商品SKU ID" clearable size="small" @keyup.enter.native="handleQuery" />
+              </el-form-item>
+              <el-form-item label="商品名称">
+                <el-input v-model="queryParams.skuName" placeholder="商品名称" clearable size="small" @keyup.enter.native="handleQuery" />
+              </el-form-item>
+              <el-form-item label="类型">
+                <el-select v-model="queryParams.owner" placeholder="请选择" clearable size="small">
+                  <el-option label="自营" value="g" />
+                  <el-option label="POP" value="pop" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="过期状态">
+                <el-select v-model="queryParams.isExpired" placeholder="请选择" clearable size="small">
+                  <el-option label="未过期" :value="0" />
+                  <el-option label="已过期" :value="1" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="创建时间">
+                <el-date-picker
+                  v-model="dateRange"
+                  type="daterange"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  value-format="yyyy-MM-dd"
+                  size="small"
+                  range-separator="至"
+                  @change="handleDateRangeChange"
+                />
+              </el-form-item>
+              <!-- 桌面端搜索按钮 -->
+              <el-form-item v-if="!expanded">
+                <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+                <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+                <el-button type="success" size="small" icon="el-icon-plus" @click="handleCreate">创建礼金</el-button>
+                <el-button type="warning" size="small" icon="el-icon-download" @click="handleExport" v-hasPermi="['system:giftcoupon:export']">导出</el-button>
+              </el-form-item>
+            </el-form>
+          </template>
+        </mobile-search-form>
+        
+        <!-- 操作按钮区域（移动端单独显示） -->
+        <div class="action-buttons-section mobile-only">
+          <mobile-button-group
+            :buttons="actionButtons"
+            :primary-count="2"
+          />
+        </div>
+        
+        <!-- 桌面端按钮组 -->
+        <div class="desktop-action-buttons desktop-only">
+          <el-button type="success" size="small" icon="el-icon-plus" @click="handleCreate">创建礼金</el-button>
+          <el-button type="warning" size="small" icon="el-icon-download" @click="handleExport" v-hasPermi="['system:giftcoupon:export']">导出</el-button>
+        </div>
       </template>
 
       <!-- 统计信息卡片 -->
@@ -262,13 +289,18 @@
 <script>
 import { listGiftCoupons, getGiftCoupon, getGiftCouponStatistics, exportGiftCoupons } from '@/api/system/giftcoupon'
 import { createGiftCoupon, transferWithGift, generatePromotionContent } from '@/api/system/jdorder'
+import { mapGetters } from 'vuex'
 import ListLayout from '@/components/ListLayout'
+import MobileSearchForm from '@/components/MobileSearchForm'
+import MobileButtonGroup from '@/components/MobileButtonGroup'
 import { parseTime } from '@/utils/ruoyi'
 
 export default {
   name: 'GiftCoupon',
   components: {
-    ListLayout
+    ListLayout,
+    MobileSearchForm,
+    MobileButtonGroup
   },
   data() {
     return {
@@ -924,6 +956,42 @@ export default {
 </script>
 
 <style scoped>
+/* 操作按钮区域 */
+.action-buttons-section {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+/* 移动端和桌面端按钮组显示控制 */
+@media (max-width: 768px) {
+  .desktop-only {
+    display: none !important;
+  }
+  
+  .action-buttons-section.mobile-only {
+    display: block;
+  }
+}
+
+@media (min-width: 769px) {
+  .mobile-only {
+    display: none !important;
+  }
+  
+  .desktop-action-buttons.desktop-only {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 12px;
+  }
+}
+
+.desktop-action-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 12px;
+}
 .el-card {
   cursor: pointer;
 }
diff --git a/src/views/system/orderrows/index.vue b/src/views/system/orderrows/index.vue
index 05b0831..4f877c3 100644
--- a/src/views/system/orderrows/index.vue
+++ b/src/views/system/orderrows/index.vue
@@ -2,36 +2,52 @@
   <div class="app-container">
     <!-- 顶部搜索区域 -->
     <div class="search-section">
-      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-        <el-form-item label="京粉账号" prop="unionId">
-          <el-select v-model="queryParams.unionId" placeholder="请选择京粉账号" clearable style="width: 240px">
-            <el-option 
-              v-for="admin in adminList" 
-              :key="admin.value || admin.id" 
-              :label="admin.label || (admin.name + ' (' + admin.wxid + ')')" 
-              :value="admin.value || admin.id" 
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="订单号" prop="orderId">
-          <el-input v-model="queryParams.orderId" placeholder="请输入订单号" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="商品名称" prop="skuName">
-          <el-input v-model="queryParams.skuName" placeholder="请输入商品名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="订单状态" prop="statusGroup">
-          <el-select v-model="queryParams.statusGroup" placeholder="订单状态" clearable style="width: 240px">
-            <el-option v-for="status in mergedStatusList" :key="status.value" :label="status.label" :value="status.value" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="订单时间">
-          <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
+      <mobile-search-form
+        :model="queryParams"
+        @search="handleQuery"
+        @reset="resetQuery"
+      >
+        <template #form="{ expanded }">
+          <el-form 
+            :model="queryParams" 
+            ref="queryForm" 
+            size="small" 
+            :inline="true" 
+            v-show="showSearch" 
+            label-width="68px"
+          >
+            <el-form-item label="京粉账号" prop="unionId">
+              <el-select v-model="queryParams.unionId" placeholder="请选择京粉账号" clearable style="width: 240px">
+                <el-option 
+                  v-for="admin in adminList" 
+                  :key="admin.value || admin.id" 
+                  :label="admin.label || (admin.name + ' (' + admin.wxid + ')')" 
+                  :value="admin.value || admin.id" 
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="订单号" prop="orderId">
+              <el-input v-model="queryParams.orderId" placeholder="请输入订单号" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="商品名称" prop="skuName">
+              <el-input v-model="queryParams.skuName" placeholder="请输入商品名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="订单状态" prop="statusGroup">
+              <el-select v-model="queryParams.statusGroup" placeholder="订单状态" clearable style="width: 240px">
+                <el-option v-for="status in mergedStatusList" :key="status.value" :label="status.label" :value="status.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="订单时间">
+              <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+            </el-form-item>
+            <!-- 桌面端搜索按钮 -->
+            <el-form-item v-if="!expanded">
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </template>
+      </mobile-search-form>
 
       <!-- 统计悬浮模块 -->
       <el-card class="statistics-card" shadow="hover" v-if="orderrowsList.length > 0">
@@ -100,7 +116,16 @@
         </div>
       </el-card>
 
-      <el-row :gutter="10" class="mb8">
+      <!-- 操作按钮区域（移动端单独显示） -->
+      <div class="action-buttons-section mobile-only">
+        <mobile-button-group
+          :buttons="actionButtons"
+          :primary-count="2"
+        />
+      </div>
+
+      <!-- 桌面端按钮组 -->
+      <el-row :gutter="10" class="mb8 desktop-only">
         <el-col :span="1.5">
           <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:orderrows:add']">新增</el-button>
         </el-col>
@@ -295,9 +320,16 @@
 <script>
 import { listOrderrows, getOrderrows, delOrderrows, addOrderrows, updateOrderrows, getValidCodeSelectData, getOrderStatistics } from "@/api/system/orderrows";
 import { getAdminSelectData } from "@/api/system/superadmin";
+import { mapGetters } from 'vuex'
+import MobileSearchForm from '@/components/MobileSearchForm'
+import MobileButtonGroup from '@/components/MobileButtonGroup'
 
 export default {
   name: "Orderrows",
+  components: {
+    MobileSearchForm,
+    MobileButtonGroup
+  },
   data() {
     return {
       // 遮罩层
@@ -354,6 +386,26 @@ export default {
       }
     };
   },
+  computed: {
+    ...mapGetters(['device']),
+    isMobile() {
+      if (this.device === 'mobile') {
+        return true
+      }
+      if (typeof window !== 'undefined' && window.innerWidth < 768) {
+        return true
+      }
+      return false
+    },
+    actionButtons() {
+      return [
+        { key: 'add', label: '新增', type: 'primary', icon: 'el-icon-plus', handler: () => this.handleAdd(), disabled: false },
+        { key: 'update', label: '修改', type: 'success', icon: 'el-icon-edit', handler: () => this.handleUpdate(), disabled: this.single },
+        { key: 'delete', label: '删除', type: 'danger', icon: 'el-icon-delete', handler: () => this.handleDelete(), disabled: this.multiple },
+        { key: 'export', label: '导出', type: 'warning', icon: 'el-icon-download', handler: () => this.handleExport(), disabled: false }
+      ]
+    }
+  },
   created() {
     this.getList();
     this.getAdminList();
@@ -1105,4 +1157,31 @@ export default {
   border-radius: 4px;
   padding: 10px 0;
 }
+
+/* 操作按钮区域 */
+.action-buttons-section {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+/* 移动端和桌面端按钮组显示控制 */
+@media (max-width: 768px) {
+  .desktop-only {
+    display: none !important;
+  }
+  
+  .action-buttons-section.mobile-only {
+    display: block;
+  }
+}
+
+@media (min-width: 769px) {
+  .mobile-only {
+    display: none !important;
+  }
+  
+  .desktop-only {
+    display: block;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index ecd42fb..1b17b16 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -3,58 +3,82 @@
     <list-layout>
     <!-- 搜索区域 -->
     <template #search>
-      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
-        <el-form-item label="角色名称" prop="roleName">
-          <el-input
-            v-model="queryParams.roleName"
-            placeholder="请输入角色名称"
-            clearable
-            style="width: 240px"
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item label="权限字符" prop="roleKey">
-          <el-input
-            v-model="queryParams.roleKey"
-            placeholder="请输入权限字符"
-            clearable
-            style="width: 240px"
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-select
-            v-model="queryParams.status"
-            placeholder="角色状态"
-            clearable
-            style="width: 240px"
+      <mobile-search-form
+        :model="queryParams"
+        @search="handleQuery"
+        @reset="resetQuery"
+      >
+        <template #form="{ expanded }">
+          <el-form 
+            :model="queryParams" 
+            ref="queryForm" 
+            size="small" 
+            :inline="true"
+            label-width="68px"
           >
-            <el-option
-              v-for="dict in dict.type.sys_normal_disable"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="创建时间">
-          <el-date-picker
-            v-model="dateRange"
-            style="width: 240px"
-            value-format="yyyy-MM-dd"
-            type="daterange"
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          ></el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
+            <el-form-item label="角色名称" prop="roleName">
+              <el-input
+                v-model="queryParams.roleName"
+                placeholder="请输入角色名称"
+                clearable
+                style="width: 240px"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="权限字符" prop="roleKey">
+              <el-input
+                v-model="queryParams.roleKey"
+                placeholder="请输入权限字符"
+                clearable
+                style="width: 240px"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+              <el-select
+                v-model="queryParams.status"
+                placeholder="角色状态"
+                clearable
+                style="width: 240px"
+              >
+                <el-option
+                  v-for="dict in dict.type.sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="创建时间">
+              <el-date-picker
+                v-model="dateRange"
+                style="width: 240px"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              ></el-date-picker>
+            </el-form-item>
+            <!-- 桌面端搜索按钮 -->
+            <el-form-item v-if="!expanded">
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </template>
+      </mobile-search-form>
 
-      <el-row :gutter="10" class="mb8">
+      <!-- 操作按钮区域（移动端单独显示） -->
+      <div class="action-buttons-section mobile-only">
+        <mobile-button-group
+          :buttons="actionButtons"
+          :primary-count="2"
+        />
+      </div>
+
+      <!-- 桌面端按钮组 -->
+      <el-row :gutter="10" class="mb8 desktop-only">
         <el-col :span="1.5">
           <el-button
             type="primary"
@@ -265,12 +289,17 @@
 <script>
 import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role"
 import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu"
+import { mapGetters } from 'vuex'
 import ListLayout from "@/components/ListLayout"
+import MobileSearchForm from '@/components/MobileSearchForm'
+import MobileButtonGroup from '@/components/MobileButtonGroup'
 
 export default {
   name: "Role",
   components: {
-    ListLayout
+    ListLayout,
+    MobileSearchForm,
+    MobileButtonGroup
   },
   dicts: ['sys_normal_disable'],
   data() {
@@ -356,6 +385,26 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters(['device']),
+    isMobile() {
+      if (this.device === 'mobile') {
+        return true
+      }
+      if (typeof window !== 'undefined' && window.innerWidth < 768) {
+        return true
+      }
+      return false
+    },
+    actionButtons() {
+      return [
+        { key: 'add', label: '新增', type: 'primary', icon: 'el-icon-plus', handler: () => this.handleAdd(), disabled: false },
+        { key: 'update', label: '修改', type: 'success', icon: 'el-icon-edit', handler: () => this.handleUpdate(), disabled: this.single },
+        { key: 'delete', label: '删除', type: 'danger', icon: 'el-icon-delete', handler: () => this.handleDelete(), disabled: this.multiple },
+        { key: 'export', label: '导出', type: 'warning', icon: 'el-icon-download', handler: () => this.handleExport(), disabled: false }
+      ]
+    }
+  },
   created() {
     this.getList()
   },
@@ -617,4 +666,33 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+/* 操作按钮区域 */
+.action-buttons-section {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+/* 移动端和桌面端按钮组显示控制 */
+@media (max-width: 768px) {
+  .desktop-only {
+    display: none !important;
+  }
+  
+  .action-buttons-section.mobile-only {
+    display: block;
+  }
+}
+
+@media (min-width: 769px) {
+  .mobile-only {
+    display: none !important;
+  }
+  
+  .desktop-only {
+    display: block;
+  }
+}
+</style>
\ No newline at end of file