diff --git a/src/api/system/instruction.js b/src/api/system/instruction.js
index 9c9169d..d96a110 100644
--- a/src/api/system/instruction.js
+++ b/src/api/system/instruction.js
@@ -8,4 +8,12 @@ export function executeInstruction(data) {
   })
 }
 
+export function getHistory(type, limit) {
+  return request({
+    url: '/jarvis/instruction/history',
+    method: 'get',
+    params: { type, limit }
+  })
+}
+
 
diff --git a/src/assets/styles/custom-sidebar.scss b/src/assets/styles/custom-sidebar.scss
deleted file mode 100644
index 4da8712..0000000
--- a/src/assets/styles/custom-sidebar.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-// 自定义侧边栏样式 - 适配蓝色渐变背景
-.sidebar-container {
-  // 覆盖Element UI菜单的默认样式
-  .el-menu {
-    background: transparent !important;
-    border: none !important;
-    
-    .el-menu-item, .el-submenu__title {
-      color: #ffffff !important;
-      background: transparent !important;
-      
-      &:hover {
-        background-color: rgba(255, 255, 255, 0.1) !important;
-        color: #ffffff !important;
-      }
-      
-      &.is-active {
-        background-color: rgba(255, 255, 255, 0.2) !important;
-        color: #ffffff !important;
-        border-right: 3px solid #ffffff !important;
-      }
-    }
-    
-    .el-submenu {
-      .el-menu {
-        background-color: rgba(255, 255, 255, 0.05) !important;
-        
-        .el-menu-item {
-          &:hover {
-            background-color: rgba(255, 255, 255, 0.1) !important;
-          }
-          
-          &.is-active {
-            background-color: rgba(255, 255, 255, 0.15) !important;
-            color: #ffffff !important;
-          }
-        }
-      }
-    }
-  }
-  
-  // 图标颜色
-  .svg-icon {
-    color: #ffffff !important;
-  }
-  
-  // 文字颜色
-  span {
-    color: #ffffff !important;
-  }
-  
-  // 激活状态的子菜单标题
-  .is-active > .el-submenu__title {
-    color: #ffffff !important;
-  }
-  
-  // 子菜单展开时的样式
-  .el-submenu.is-opened > .el-submenu__title {
-    color: #ffffff !important;
-  }
-}
-
-// 弹出菜单样式
-.el-menu--popup {
-  background: linear-gradient(135deg, #3aa4ef 0%, #0067e2 100%) !important;
-  border-radius: 8px !important;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
-  
-  .el-menu-item {
-    color: #ffffff !important;
-    
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1) !important;
-    }
-    
-    &.is-active {
-      background-color: rgba(255, 255, 255, 0.2) !important;
-    }
-  }
-}
-
-// 响应式设计
-@media (max-width: 768px) {
-  .sidebar-container {
-    border-radius: 0 !important;
-  }
-}
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 1125c80..bb87292 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -3,7 +3,6 @@
 @import './transition.scss';
 @import './element-ui.scss';
 @import './sidebar.scss';
-@import './custom-sidebar.scss';
 @import './btn.scss';
 
 body {
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index d331faa..cb4b7e6 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -12,10 +12,10 @@
   }
 
   .sidebar-container {
-    -webkit-transition: width .28s;
-    transition: width 0.28s;
+    -webkit-transition: width .28s ease-in-out;
+    transition: width 0.28s ease-in-out, box-shadow 0.3s ease;
     width: $base-sidebar-width !important;
-    background: $base-menu-background;
+    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
     height: 100vh;
     position: fixed;
     font-size: 0px;
@@ -24,9 +24,31 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    border-radius: 0 24px 0 0;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 0 20px 20px 0;
+    -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    
+    // 添加悬停效果
+    &:hover {
+      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+    }
+    
+    // 添加进入动画
+    animation: slideInLeft 0.5s ease-out;
+  }
+  
+  @keyframes slideInLeft {
+    from {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -65,47 +87,114 @@
       margin-right: 16px;
     }
 
-         .el-menu {
-       border: none;
-       height: 100%;
-       width: 100% !important;
-       font-size: 15px; // 增加菜单字体大小
-     }
+    .el-menu {
+      border: none;
+      height: 100%;
+      width: 100% !important;
+      font-size: 14px;
+      background: transparent !important;
+      padding: 10px 0;
+    }
 
-         .el-menu-item, .el-submenu__title {
-       overflow: hidden !important;
-       text-overflow: ellipsis !important;
-       white-space: nowrap !important;
-       font-size: 15px; // 确保菜单项字体大小一致
-     }
-
-    // menu hover
-    .submenu-title-noDropdown,
-    .el-submenu__title {
+    .el-menu-item, .el-submenu__title {
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      white-space: nowrap !important;
+      font-size: 14px;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 0.95) !important;
+      background: transparent !important;
+      border-radius: 12px;
+      margin: 4px 12px;
+      padding: 0 16px !important;
+      height: 48px;
+      line-height: 48px;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      
       &:hover {
-        background-color: rgba(255, 255, 255, 0.1) !important;
+        background: rgba(255, 255, 255, 0.15) !important;
+        color: #ffffff !important;
+        transform: translateX(4px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+      
+      &.is-active {
+        background: rgba(255, 255, 255, 0.25) !important;
+        color: #ffffff !important;
+        font-weight: 600;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+        
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 4px;
+          height: 20px;
+          background: #ffffff;
+          border-radius: 0 2px 2px 0;
+        }
       }
     }
 
-    & .theme-dark .is-active > .el-submenu__title {
-      color: $base-menu-color-active !important;
-    }
-
-    & .nest-menu .el-submenu>.el-submenu__title,
-    & .el-submenu .el-menu-item {
-      min-width: $base-sidebar-width !important;
-
-      &:hover {
-        background-color: rgba(255, 255, 255, 0.1) !important;
+    // 子菜单样式优化
+    .el-submenu {
+      .el-submenu__title {
+        border-radius: 12px;
+        margin: 4px 12px;
+        padding: 0 16px !important;
+        height: 48px;
+        line-height: 48px;
+        
+        &:hover {
+          background: rgba(255, 255, 255, 0.15) !important;
+          color: #ffffff !important;
+          transform: translateX(4px);
+        }
+      }
+      
+      .el-menu {
+        background: rgba(255, 255, 255, 0.08) !important;
+        border-radius: 12px;
+        margin: 8px 12px;
+        padding: 8px 0;
+        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
+        
+        .el-menu-item {
+          margin: 2px 8px;
+          padding: 0 24px !important;
+          height: 40px;
+          line-height: 40px;
+          font-size: 13px;
+          
+          &:hover {
+            background: rgba(255, 255, 255, 0.12) !important;
+            transform: translateX(2px);
+          }
+          
+          &.is-active {
+            background: rgba(255, 255, 255, 0.2) !important;
+            
+            &::before {
+              width: 3px;
+              height: 16px;
+            }
+          }
+        }
       }
     }
-
-    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
-    & .theme-dark .el-submenu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
-
+    
+    // 图标样式优化
+    .svg-icon {
+      color: rgba(255, 255, 255, 0.8) !important;
+      transition: all 0.3s ease;
+      margin-right: 12px;
+      
       &:hover {
-        background-color: $base-sub-menu-hover !important;
+        color: #ffffff !important;
+        transform: scale(1.1);
       }
     }
   }
@@ -171,8 +260,24 @@
     }
 
     .sidebar-container {
-      transition: transform .28s;
+      transition: transform .28s ease-in-out;
       width: $base-sidebar-width !important;
+      border-radius: 0;
+      
+      // 移动端优化
+      .el-menu-item, .el-submenu__title {
+        margin: 2px 8px;
+        padding: 0 12px !important;
+        height: 44px;
+        line-height: 44px;
+        font-size: 13px;
+      }
+      
+      .el-submenu .el-menu-item {
+        height: 36px;
+        line-height: 36px;
+        font-size: 12px;
+      }
     }
 
     &.hideSidebar {
@@ -180,6 +285,38 @@
         pointer-events: none;
         transition-duration: 0.3s;
         transform: translate3d(-$base-sidebar-width, 0, 0);
+        box-shadow: none;
+      }
+    }
+  }
+  
+  // 平板设备优化
+  @media (max-width: 1024px) {
+    .sidebar-container {
+      .el-menu-item, .el-submenu__title {
+        font-size: 13px;
+        height: 44px;
+        line-height: 44px;
+      }
+    }
+  }
+  
+  // 小屏幕优化
+  @media (max-width: 768px) {
+    .sidebar-container {
+      border-radius: 0;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+      
+      .el-menu {
+        padding: 8px 0;
+      }
+      
+      .el-menu-item, .el-submenu__title {
+        margin: 2px 6px;
+        padding: 0 10px !important;
+        height: 40px;
+        line-height: 40px;
+        font-size: 12px;
       }
     }
   }
@@ -191,9 +328,55 @@
       transition: none;
     }
   }
+
+// 弹出菜单样式优化
+.el-menu--popup {
+  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 8px 0;
+  
+  .el-menu-item {
+    color: rgba(255, 255, 255, 0.95) !important;
+    margin: 2px 8px;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.15) !important;
+      color: #ffffff !important;
+      transform: translateX(4px);
+    }
+    
+    &.is-active {
+      background: rgba(255, 255, 255, 0.25) !important;
+      color: #ffffff !important;
+    }
+  }
+  
+  // 自定义滚动条
+  &::-webkit-scrollbar-track-piece {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.5);
+    }
+  }
 }
 
-// when menu collapsed
+// 收起状态下的样式
 .el-menu--vertical {
   &>.el-menu {
     .svg-icon {
@@ -204,27 +387,7 @@
   .nest-menu .el-submenu>.el-submenu__title,
   .el-menu-item {
     &:hover {
-      // you can use $subMenuHover
-      background-color: rgba(58, 164, 239, 0.1) !important;
-    }
-  }
-
-  // the scroll bar appears when the subMenu is too long
-  >.el-menu--popup {
-    max-height: 100vh;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
-    }
-
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: #99a9bf;
-      border-radius: 20px;
+      background: rgba(255, 255, 255, 0.15) !important;
     }
   }
 }
diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
index 90708b6..9697807 100644
--- a/src/assets/styles/variables.scss
+++ b/src/assets/styles/variables.scss
@@ -8,18 +8,18 @@ $tiffany: #4AB7BD;
 $yellow:#FEC171;
 $panGreen: #30B08F;
 
-// 默认菜单主题风格 - 蓝色渐变主题
-$base-menu-color:#ffffff;
+// 默认菜单主题风格 - 现代化渐变主题
+$base-menu-color:rgba(255, 255, 255, 0.95);
 $base-menu-color-active:#ffffff;
-$base-menu-background:linear-gradient(0deg, #3aa4ef 0%, #0067e2 100%);
+$base-menu-background:linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
 $base-logo-title-color: #ffffff;
 
 $base-menu-light-color:rgba(0,0,0,.70);
 $base-menu-light-background:#ffffff;
 $base-logo-light-title-color: #001529;
 
-$base-sub-menu-background:rgba(255,255,255,0.1);
-$base-sub-menu-hover:rgba(255,255,255,0.2);
+$base-sub-menu-background:rgba(255,255,255,0.08);
+$base-sub-menu-hover:rgba(255,255,255,0.15);
 
 // 自定义暗色菜单风格
 /**
diff --git a/src/components/ListLayout/index.vue b/src/components/ListLayout/index.vue
new file mode 100644
index 0000000..a27489e
--- /dev/null
+++ b/src/components/ListLayout/index.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="list-layout">
+    <!-- 顶部搜索区域 -->
+    <div class="search-section">
+      <slot name="search"></slot>
+    </div>
+
+    <!-- 表格区域 - 可滚动 -->
+    <div class="table-section">
+      <slot name="table"></slot>
+    </div>
+
+    <!-- 固定分页区域 -->
+    <div class="pagination-section">
+      <slot name="pagination"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ListLayout',
+  props: {
+    // 可以添加一些配置属性
+    height: {
+      type: String,
+      default: 'calc(100vh - 84px)'
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 主容器布局 */
+.list-layout {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 84px); /* 减去头部导航高度 */
+  overflow: hidden;
+}
+
+/* 搜索区域 - 固定在顶部 */
+.search-section {
+  flex-shrink: 0;
+  background: #fff;
+  padding: 20px;
+  border-bottom: 1px solid #e4e7ed;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* 表格区域 - 可滚动 */
+.table-section {
+  flex: 1;
+  overflow: auto;
+  padding: 0 20px;
+  background: #fff;
+}
+
+/* 固定分页区域 */
+.pagination-section {
+  flex-shrink: 0;
+  background: #fff;
+  padding: 15px 20px;
+  border-top: 1px solid #e4e7ed;
+  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+}
+
+/* 表格区域滚动条样式 */
+.table-section::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.table-section::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.table-section::-webkit-scrollbar-thumb {
+  background: #c0c0c0;
+  border-radius: 3px;
+}
+
+.table-section::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 确保表格在容器内正确显示 */
+.table-section .el-table {
+  width: 100%;
+}
+
+/* 分页组件样式优化 */
+.pagination-section .pagination-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+  border-radius: 4px;
+  padding: 10px 0;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .list-layout {
+    height: calc(100vh - 50px); /* 移动端调整高度 */
+  }
+  
+  .search-section {
+    padding: 15px;
+  }
+  
+  .table-section {
+    padding: 0 15px;
+  }
+  
+  .pagination-section {
+    padding: 10px 15px;
+  }
+}
+</style>
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index d4cfab3..7bdd74b 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -31,12 +31,12 @@ export default {
     },
     limit: {
       type: Number,
-      default: 15
+      default: 10
     },
     pageSizes: {
       type: Array,
       default() {
-        return [15, 50, 100, 200,1]
+        return [10, 50, 100, 200,1000]
       }
     },
     // 移动端页码按钮的数量端默认值5
diff --git a/src/components/PublishDialog.vue b/src/components/PublishDialog.vue
index 717067f..d17c0a8 100644
--- a/src/components/PublishDialog.vue
+++ b/src/components/PublishDialog.vue
@@ -376,6 +376,9 @@ export default {
         else { this.$modal.msgError(res.msg || '加载属性失败'); }
       } catch(e) { this.$modal.msgError('加载属性失败'); }
     },
+    onPvChange() {
+      // 属性值变更时的回调（可用于调试或联动逻辑）
+    },
     submitPublish() {
       this.$refs.publishForm.validate(valid => {
         if (!valid) return;
@@ -389,10 +392,26 @@ export default {
           try { channelPv = JSON.parse(f.channelPvJson); }
           catch(e) { this.$modal.msgError('属性JSON格式不正确'); return; }
         } else if (this.selectedPv && Object.keys(this.selectedPv).length) {
-          channelPv = Object.keys(this.selectedPv).map(pid => ({
-            property_id: isNaN(Number(pid)) ? pid : Number(pid),
-            value_id: this.selectedPv[pid]
-          }));
+          // 从 pvOptions 中获取完整的属性信息（property_id, property_name, value_id, value_name）
+          channelPv = [];
+          Object.keys(this.selectedPv).forEach(pid => {
+            const valueId = this.selectedPv[pid];
+            if (!valueId) return; // 跳过未选择的属性
+            // 从 pvOptions 中找到对应的属性
+            const property = this.pvOptions.find(p => String(p.propertyId) === String(pid));
+            if (!property) return;
+            // 从属性的 values 中找到对应的值
+            const value = property.values && property.values.find(v => String(v.valueId) === String(valueId));
+            if (!value) return;
+            // 构建完整的4个字段
+            channelPv.push({
+              property_id: pid,
+              property_name: property.propertyName,
+              value_id: valueId,
+              value_name: value.valueName
+            });
+          });
+          if (channelPv.length === 0) channelPv = undefined;
         }
         const payload = {
           appid: f.appid || undefined,
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 4e599f6..ac98e67 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -60,10 +60,11 @@ export default {
   width: 100%;
   height: 60px;
   line-height: 60px;
-  background: linear-gradient(90deg, #3aa4ef 0%, #0067e2 100%);
+  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
   text-align: center;
   overflow: hidden;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
 
   & .sidebar-logo-link {
     height: 100%;
diff --git a/src/views/system/jd-instruction/index.vue b/src/views/system/jd-instruction/index.vue
index 015493a..e2f5fdd 100644
--- a/src/views/system/jd-instruction/index.vue
+++ b/src/views/system/jd-instruction/index.vue
@@ -35,12 +35,61 @@
           <el-button size="mini" type="primary" @click="copyAll">复制全部</el-button>
         </div>
       </div>
+
+      <el-divider>历史消息记录</el-divider>
+
+      <div class="history-container">
+        <div class="history-column">
+          <div class="history-header">
+            <span>历史请求（最近 {{ historyLimit }} 条）</span>
+            <el-button size="mini" type="primary" icon="el-icon-refresh" @click="loadHistory" :loading="historyLoading">刷新</el-button>
+          </div>
+          <div class="history-content">
+            <div v-if="requestHistory.length === 0" class="empty-history">
+              <el-empty description="暂无历史请求" :image-size="80" />
+            </div>
+            <div v-else class="history-list">
+              <div v-for="(item, idx) in requestHistory" :key="'req-' + idx" class="history-item">
+                <div class="history-item-header">
+                  <div class="history-time">{{ extractTime(item) }}</div>
+                  <el-button 
+                    size="mini" 
+                    icon="el-icon-document-copy" 
+                    type="text" 
+                    @click="copyHistoryItem(item)"
+                    title="复制此条消息">
+                  </el-button>
+                </div>
+                <div class="history-text">{{ extractMessage(item) }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="history-column">
+          <div class="history-header">
+            <span>历史响应（最近 {{ historyLimit }} 条）</span>
+            <el-button size="mini" type="success" @click="copyHistory('response')">复制全部</el-button>
+          </div>
+          <div class="history-content">
+            <div v-if="responseHistory.length === 0" class="empty-history">
+              <el-empty description="暂无历史响应" :image-size="80" />
+            </div>
+            <div v-else class="history-list">
+              <div v-for="(item, idx) in responseHistory" :key="'res-' + idx" class="history-item">
+                <div class="history-time">{{ extractTime(item) }}</div>
+                <div class="history-text">{{ extractMessage(item) }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </el-card>
   </div>
 </template>
 
 <script>
-import { executeInstruction } from '@/api/system/instruction'
+import { executeInstruction, getHistory } from '@/api/system/instruction'
 
 export default {
   name: 'JdInstruction',
@@ -48,9 +97,16 @@ export default {
     return {
       form: { command: '' },
       loading: false,
-      resultList: []
+      resultList: [],
+      requestHistory: [],
+      responseHistory: [],
+      historyLoading: false,
+      historyLimit: 50
     }
   },
+  mounted() {
+    this.loadHistory()
+  },
   methods: {
     copyOne(text) {
       if (!text) return
@@ -61,6 +117,15 @@ export default {
       const text = this.resultList.join('\n\n')
       this.doCopy(text)
     },
+    copyHistory(type) {
+      const list = type === 'response' ? this.responseHistory : this.requestHistory
+      if (!list || list.length === 0) {
+        this.$modal.msgWarning('暂无历史记录')
+        return
+      }
+      const text = list.map(item => this.extractMessage(item)).join('\n\n')
+      this.doCopy(text)
+    },
     doCopy(text) {
       if (navigator.clipboard) {
         navigator.clipboard.writeText(text).then(() => {
@@ -91,6 +156,8 @@ export default {
           if (Array.isArray(data)) this.resultList = data
           else if (typeof data === 'string') this.resultList = data ? [data] : []
           else this.resultList = []
+          // 执行成功后刷新历史记录
+          this.loadHistory()
         } else {
           this.$modal.msgError(res && res.msg ? res.msg : '执行失败')
         }
@@ -99,16 +166,103 @@ export default {
         this.$modal.msgError('执行失败，请稍后重试')
       })
     },
+    loadHistory() {
+      this.historyLoading = true
+      Promise.all([
+        getHistory('request', this.historyLimit),
+        getHistory('response', this.historyLimit)
+      ]).then(([reqRes, respRes]) => {
+        this.historyLoading = false
+        if (reqRes && reqRes.code === 200) {
+          this.requestHistory = reqRes.data || []
+        }
+        if (respRes && respRes.code === 200) {
+          this.responseHistory = respRes.data || []
+        }
+      }).catch(() => {
+        this.historyLoading = false
+        this.$modal.msgError('加载历史记录失败')
+      })
+    },
+    extractTime(item) {
+      if (!item) return ''
+      const idx = item.indexOf(' | ')
+      return idx > 0 ? item.substring(0, idx) : ''
+    },
+    extractMessage(item) {
+      if (!item) return ''
+      const idx = item.indexOf(' | ')
+      return idx > 0 ? item.substring(idx + 3) : item
+    },
     fillTF() {
       this.form.command = 'TF'
     },
     fillSheng() {
       this.form.command = '生'
     },
-    fillMan() {
+    async fillMan() {
+      // 先尝试查询今天的数据
       this.form.command = '慢单'
+      this.loading = true
+      
+      try {
+        const res = await executeInstruction({ command: '慢单' })
+        this.loading = false
+        
+        if (res && (res.code === 200 || res.msg === '操作成功')) {
+          const data = res.data
+          let resultData = []
+          if (Array.isArray(data)) resultData = data
+          else if (typeof data === 'string') resultData = data ? [data] : []
+          else resultData = []
+          
+          // 如果今天的数据为空，尝试查询昨天的数据
+          if (resultData.length === 0 || (resultData.length === 1 && resultData[0].includes('无数据'))) {
+            this.$message.info('今天暂无慢单数据，正在查询昨天的数据...')
+            
+            // 获取昨天的日期
+            const yesterday = new Date()
+            yesterday.setDate(yesterday.getDate() - 1)
+            const yesterdayStr = yesterday.toISOString().split('T')[0].replace(/-/g, '')
+            
+            this.loading = true
+            const yesterdayRes = await executeInstruction({ command: `慢单${yesterdayStr}` })
+            this.loading = false
+            
+            if (yesterdayRes && (yesterdayRes.code === 200 || yesterdayRes.msg === '操作成功')) {
+              const yesterdayData = yesterdayRes.data
+              if (Array.isArray(yesterdayData)) this.resultList = yesterdayData
+              else if (typeof yesterdayData === 'string') this.resultList = yesterdayData ? [yesterdayData] : []
+              else this.resultList = []
+              
+              if (this.resultList.length > 0) {
+                this.$message.success(`已查询到昨天(${yesterdayStr})的慢单数据`)
+              } else {
+                this.$message.warning('昨天也没有慢单数据')
+                this.resultList = []
+              }
+            } else {
+              this.$message.error('查询昨天数据失败')
+              this.resultList = []
+            }
+          } else {
+            // 今天有数据，直接显示
+            this.resultList = resultData
+            this.$message.success('已查询到今天的慢单数据')
+          }
+          
+          // 执行成功后刷新历史记录
+          this.loadHistory()
+        } else {
+          this.$message.error(res && res.msg ? res.msg : '查询失败')
+          this.resultList = []
+        }
+      } catch (error) {
+        this.loading = false
+        this.$message.error('查询失败，请稍后重试')
+        this.resultList = []
+      }
     },
-
     clearAll() {
       this.form.command = ''
       this.resultList = []
@@ -121,6 +275,94 @@ export default {
 .box-card { margin: 20px; }
 .msg-block { margin-bottom: 12px; }
 .msg-header { display: flex; align-items: center; justify-content: space-between; margin: 6px 0; }
+
+/* 历史消息容器 */
+.history-container {
+  display: flex;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.history-column {
+  flex: 1;
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.history-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background-color: #F5F7FA;
+  border-bottom: 1px solid #DCDFE6;
+  font-weight: 600;
+  color: #303133;
+}
+
+.history-content {
+  height: 500px;
+  overflow-y: auto;
+  background-color: #FFFFFF;
+}
+
+.empty-history {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.history-list {
+  padding: 10px;
+}
+
+.history-item {
+  padding: 10px 12px;
+  margin-bottom: 8px;
+  border-radius: 4px;
+  background-color: #F9FAFC;
+  border-left: 3px solid #409EFF;
+  transition: all 0.3s;
+}
+
+.history-item:hover {
+  background-color: #ECF5FF;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.history-time {
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 4px;
+}
+
+.history-text {
+  font-size: 13px;
+  color: #303133;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* 滚动条美化 */
+.history-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.history-content::-webkit-scrollbar-track {
+  background: #F5F7FA;
+}
+
+.history-content::-webkit-scrollbar-thumb {
+  background: #DCDFE6;
+  border-radius: 4px;
+}
+
+.history-content::-webkit-scrollbar-thumb:hover {
+  background: #C0C4CC;
+}
 </style>
 
 
diff --git a/src/views/system/jdorder/orderList.vue b/src/views/system/jdorder/orderList.vue
index ee37c16..162a94b 100644
--- a/src/views/system/jdorder/orderList.vue
+++ b/src/views/system/jdorder/orderList.vue
@@ -1,122 +1,134 @@
 <template>
-  <div class="app-container">
-    <el-form :inline="true" :model="queryParams" label-width="80px">
-      <el-form-item label="备注">
-        <el-input v-model="queryParams.remark" placeholder="单据备注" clearable size="small" @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="分销标记">
-        <el-input v-model="queryParams.distributionMark" placeholder="分销标记" clearable size="small" @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="型号">
-        <el-input v-model="queryParams.modelNumber" placeholder="型号" clearable size="small" @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="订单号">
-        <el-input v-model="queryParams.orderId" placeholder="订单号" clearable size="small" @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="下单人">
-        <el-input v-model="queryParams.buyer" placeholder="下单人" clearable size="small" @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="地址">
-        <el-input v-model="queryParams.address" placeholder="收货地址" clearable size="small" @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="状态">
-        <el-input v-model="queryParams.status" placeholder="备注/状态" clearable size="small" @keyup.enter.native="handleQuery" />
-      </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"
+  <div>
+    <list-layout>
+      <!-- 搜索区域 -->
+      <template #search>
+        <el-form :inline="true" :model="queryParams" label-width="80px">
+          <el-form-item label="备注">
+            <el-input v-model="queryParams.remark" placeholder="单据备注" clearable size="small" @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="分销标记">
+            <el-input v-model="queryParams.distributionMark" placeholder="分销标记" clearable size="small" @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="型号">
+            <el-input v-model="queryParams.modelNumber" placeholder="型号" clearable size="small" @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="订单号">
+            <el-input v-model="queryParams.orderId" placeholder="订单号" clearable size="small" @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="下单人">
+            <el-input v-model="queryParams.buyer" placeholder="下单人" clearable size="small" @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="地址">
+            <el-input v-model="queryParams.address" placeholder="收货地址" clearable size="small" @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-input v-model="queryParams.status" placeholder="备注/状态" clearable size="small" @keyup.enter.native="handleQuery" />
+          </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="warning" size="small" icon="el-icon-download" @click="handleExport" v-hasPermi="['system:jdorder:export']">导出</el-button>
+          </el-form-item>
+        </el-form>
+      </template>
+
+      <!-- 表格区域 -->
+      <template #table>
+        <el-table :data="list" v-loading="loading" border stripe :default-sort="{prop: 'createTime', order: 'descending'}">
+          <el-table-column label="ID" prop="id" width="80" />
+          <el-table-column label="内部单号" prop="remark" width="160" sortable/>
+
+          <el-table-column label="订单号" prop="orderId" width="200">
+            <template slot-scope="scope">
+              <div>
+                <span style="margin-right: 8px;">{{ scope.row.orderId }}</span>
+                <el-button 
+                  type="text" 
+                  size="mini" 
+                  icon="el-icon-copy-document" 
+                  @click="copyToClipboard(scope.row.orderId)"
+                  title="复制订单号"
+                >
+                  复制
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="标记" prop="distributionMark" width="80"/>
+          <el-table-column label="型号" prop="modelNumber" width="180"/>
+          <el-table-column label="地址" prop="address" min-width="280" show-overflow-tooltip/>
+          <el-table-column label="付款金额" prop="paymentAmount" width="120">
+            <template slot-scope="scope">{{ toYuan(scope.row.paymentAmount) }}</template>
+          </el-table-column>
+          <el-table-column label="后返金额" prop="rebateAmount" width="120">
+            <template slot-scope="scope">{{ toYuan(scope.row.rebateAmount) }}</template>
+          </el-table-column>
+          <el-table-column label="下单人" prop="buyer" width="140"/>
+          <el-table-column label="备注/状态" prop="status" min-width="160"/>
+
+          <el-table-column label="物流链接" prop="logisticsLink" width="200">
+            <template slot-scope="scope">
+              <div v-if="scope.row.logisticsLink">
+                <a :href="scope.row.logisticsLink" target="_blank" style="margin-right: 8px;">查看物流</a>
+                <el-button 
+                  type="text" 
+                  size="mini" 
+                  icon="el-icon-copy-document" 
+                  @click="copyToClipboard(scope.row.logisticsLink)"
+                  title="复制链接"
+                >
+                  复制
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="赔付金额" prop="proPriceAmount" width="140"/>
+
+          <el-table-column label="创建时间" prop="createTime" width="160">
+            <template slot-scope="scope">{{ parseTime(scope.row.createTime) }}</template>
+          </el-table-column>
+          <el-table-column label="完成时间" prop="finishTime" width="160">
+            <template slot-scope="scope">{{ parseTime(scope.row.finishTime) }}</template>
+          </el-table-column>
+        </el-table>
+      </template>
+
+      <!-- 分页区域 -->
+      <template #pagination>
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
         />
-      </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="warning" size="small" icon="el-icon-download" @click="handleExport" v-hasPermi="['system:jdorder:export']">导出</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-table :data="list" v-loading="loading" border stripe :default-sort="{prop: 'createTime', order: 'descending'}">
-      <el-table-column label="ID" prop="id" width="80" />
-      <el-table-column label="内部单号" prop="remark" width="160" sortable/>
-
-      <el-table-column label="订单号" prop="orderId" width="200">
-        <template slot-scope="scope">
-          <div>
-            <span style="margin-right: 8px;">{{ scope.row.orderId }}</span>
-            <el-button 
-              type="text" 
-              size="mini" 
-              icon="el-icon-copy-document" 
-              @click="copyToClipboard(scope.row.orderId)"
-              title="复制订单号"
-            >
-              复制
-            </el-button>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="标记" prop="distributionMark" width="80"/>
-      <el-table-column label="型号" prop="modelNumber" width="180"/>
-      <el-table-column label="地址" prop="address" min-width="280" show-overflow-tooltip/>
-      <el-table-column label="付款金额" prop="paymentAmount" width="120">
-        <template slot-scope="scope">{{ toYuan(scope.row.paymentAmount) }}</template>
-      </el-table-column>
-      <el-table-column label="后返金额" prop="rebateAmount" width="120">
-        <template slot-scope="scope">{{ toYuan(scope.row.rebateAmount) }}</template>
-      </el-table-column>
-      <el-table-column label="下单人" prop="buyer" width="140"/>
-      <el-table-column label="备注/状态" prop="status" min-width="160"/>
-
-
-      <el-table-column label="物流链接" prop="logisticsLink" width="200">
-        <template slot-scope="scope">
-          <div v-if="scope.row.logisticsLink">
-            <a :href="scope.row.logisticsLink" target="_blank" style="margin-right: 8px;">查看物流</a>
-            <el-button 
-              type="text" 
-              size="mini" 
-              icon="el-icon-copy-document" 
-              @click="copyToClipboard(scope.row.logisticsLink)"
-              title="复制链接"
-            >
-              复制
-            </el-button>
-          </div>
-        </template>
-      </el-table-column>
-      proPriceAmount
-            <el-table-column label="赔付金额" prop="proPriceAmount" width="140"/>
-
-      <el-table-column label="创建时间" prop="createTime" width="160">
-        <template slot-scope="scope">{{ parseTime(scope.row.createTime) }}</template>
-      </el-table-column>
-            <el-table-column label="完成时间" prop="finishTime" width="160">
-        <template slot-scope="scope">{{ parseTime(scope.row.finishTime) }}</template>
-      </el-table-column>
-
-    </el-table>
-
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+      </template>
+    </list-layout>
   </div>
-  
 </template>
 
 <script>
 import { listJDOrders } from '@/api/system/jdorder'
+import ListLayout from '@/components/ListLayout'
+
 export default {
   name: 'JDOrderList',
+  components: {
+    ListLayout
+  },
   data() {
     return {
       loading: false,
@@ -142,7 +154,7 @@ export default {
   created() {
     // 设置默认日期为今天
     this.setDefaultDateRange()
-    this.getList()
+    this.getListWithFallback()
   },
   methods: {
     /** 设置默认日期范围为今天 */
@@ -168,6 +180,53 @@ export default {
         this.loading = false
       }).catch(() => { this.loading = false })
     },
+    /** 智能查询列表，如果今天数据为空则查询昨天 */
+    async getListWithFallback() {
+      this.loading = true
+      
+      try {
+        const res = await listJDOrders(this.queryParams)
+        this.list = (res.rows || res.data || [])
+        this.total = res.total || 0
+        
+        // 如果今天的数据为空，且是默认查询（没有手动选择日期），则尝试查询昨天
+        if (this.list.length === 0 && this.isDefaultQuery()) {
+          this.$message.info('今天暂无慢单数据，正在查询昨天的数据...')
+          
+          // 获取昨天的日期
+          const yesterday = new Date()
+          yesterday.setDate(yesterday.getDate() - 1)
+          const yesterdayStr = this.formatDate(yesterday)
+          
+          // 更新查询参数为昨天
+          this.queryParams.beginTime = yesterdayStr
+          this.queryParams.endTime = yesterdayStr
+          this.dateRange = [yesterdayStr, yesterdayStr]
+          
+          // 查询昨天的数据
+          const yesterdayRes = await listJDOrders(this.queryParams)
+          this.list = (yesterdayRes.rows || yesterdayRes.data || [])
+          this.total = yesterdayRes.total || 0
+          
+          if (this.list.length > 0) {
+            this.$message.success(`已查询到昨天(${yesterdayStr})的慢单数据`)
+          } else {
+            this.$message.warning('昨天也没有慢单数据')
+          }
+        }
+        
+        this.loading = false
+      } catch (error) {
+        this.loading = false
+        this.$message.error('查询失败，请稍后重试')
+      }
+    },
+    /** 判断是否为默认查询（今天的数据） */
+    isDefaultQuery() {
+      const today = new Date()
+      const todayStr = this.formatDate(today)
+      return this.queryParams.beginTime === todayStr && this.queryParams.endTime === todayStr
+    },
     handleQuery() {
       this.queryParams.pageNum = 1
       this.getList()
@@ -189,7 +248,7 @@ export default {
       }
       // 重置后重新设置默认日期为今天
       this.setDefaultDateRange()
-      this.getList()
+      this.getListWithFallback()
     },
     /** 日期范围变化处理 */
     handleDateRangeChange(dates) {
diff --git a/src/views/system/orderrows/index.vue b/src/views/system/orderrows/index.vue
index 098eb08..0a0770c 100644
--- a/src/views/system/orderrows/index.vue
+++ b/src/views/system/orderrows/index.vue
@@ -1,109 +1,185 @@
 <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="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>
+    <!-- 顶部搜索区域 -->
+    <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>
 
-    <el-row :gutter="10" class="mb8">
-      <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>
-      <el-col :span="1.5">
-        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:orderrows:edit']">修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:orderrows:remove']">删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:orderrows:export']">导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+      <!-- 统计悬浮模块 -->
+      <el-card class="statistics-card" shadow="hover" v-if="orderrowsList.length > 0">
+        <div slot="header" class="clearfix">
+          <span><i class="el-icon-data-analysis"></i> 佣金统计</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="toggleStatistics">
+            {{ showStatistics ? '收起' : '展开' }}
+          </el-button>
+        </div>
+        <div v-show="showStatistics" class="statistics-content">
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <div class="stat-item">
+                <div class="stat-label">总订单数</div>
+                <div class="stat-value">{{ statistics.totalOrders }}</div>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div class="stat-item">
+                <div class="stat-label">总计佣金额</div>
+                <div class="stat-value">¥{{ statistics.totalCosPrice.toFixed(2) }}</div>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div class="stat-item">
+                <div class="stat-label">预估佣金</div>
+                <div class="stat-value">¥{{ statistics.totalEstimateFee.toFixed(2) }}</div>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div class="stat-item">
+                <div class="stat-label">实际佣金</div>
+                <div class="stat-value">¥{{ statistics.totalActualFee.toFixed(2) }}</div>
+              </div>
+            </el-col>
+          </el-row>
+          
+          <el-divider></el-divider>
+          
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="status-stats">
+                <h4>按状态统计</h4>
+                <div class="status-list">
+                  <div v-for="(stat, key) in statistics.statusStats" :key="key" class="status-item">
+                    <el-tag :type="getStatusTypeByKey(key)" size="small">{{ stat.label }}</el-tag>
+                    <span class="status-count">{{ stat.count }}单</span>
+                    <span class="status-amount">¥{{ stat.amount.toFixed(2) }}</span>
+                  </div>
+                </div>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="account-stats">
+                <h4>按账号统计</h4>
+                <div class="account-list">
+                  <div v-for="(stat, unionId) in statistics.accountStats" :key="unionId" class="account-item">
+                    <span class="account-name">{{ getAdminName(unionId) }}</span>
+                    <span class="account-count">{{ stat.count }}单</span>
+                    <span class="account-amount">¥{{ stat.amount.toFixed(2) }}</span>
+                  </div>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-card>
 
-    <el-table v-loading="loading" :data="orderrowsList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="50" align="center" />
-      <el-table-column label="账号" align="center" prop="unionId" width="50">
-        <template slot-scope="scope">
-          <span>{{ getAdminName(scope.row.unionId) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="订单号" align="center" prop="orderId" width="120" />
-      <el-table-column label="商品名称" align="center" prop="skuName" :show-overflow-tooltip="true" min-width="200" />
-      <el-table-column label="计佣金额" align="center" prop="estimateCosPrice" width="100">
-        <template slot-scope="scope">
-          <span>¥{{ scope.row.estimateCosPrice }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="商品数量" align="center" prop="skuNum" width="80" />
-      <el-table-column label="订单状态" align="center" prop="validCode" width="240">
-        <template slot-scope="scope">
-          <el-tag :type="getStatusType(scope.row.validCode)">
-            {{ getStatusText(scope.row.validCode) }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="佣金比例" align="center" prop="commissionRate" width="100">
-        <template slot-scope="scope">
-          <span>{{ scope.row.commissionRate }}%</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="预估佣金" align="center" prop="estimateFee" width="100">
-        <template slot-scope="scope">
-          <span>¥{{ scope.row.estimateFee }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="实际佣金" align="center" prop="actualFee" width="100">
-        <template slot-scope="scope">
-          <span>¥{{ scope.row.actualFee }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="订单时间" align="center" prop="orderTime" width="160">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.orderTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="完成时间" align="center" prop="finishTime" width="160">
-        <template slot-scope="scope">
-          <span>{{ scope.row.finishTime ? parseTime(scope.row.finishTime) : '-' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:orderrows:edit']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:orderrows:remove']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+      <el-row :gutter="10" class="mb8">
+        <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>
+        <el-col :span="1.5">
+          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:orderrows:edit']">修改</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:orderrows:remove']">删除</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:orderrows:export']">导出</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+    </div>
 
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+    <!-- 表格区域 - 可滚动 -->
+    <div class="table-section">
+      <el-table v-loading="loading" :data="orderrowsList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="50" align="center" />
+        <el-table-column label="账号" align="center" prop="unionId" width="50">
+          <template slot-scope="scope">
+            <span>{{ getAdminName(scope.row.unionId) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="订单号" align="center" prop="orderId" width="120" />
+        <el-table-column label="商品名称" align="center" prop="skuName" :show-overflow-tooltip="true" min-width="200" />
+        <el-table-column label="计佣金额" align="center" prop="estimateCosPrice" width="100">
+          <template slot-scope="scope">
+            <span>¥{{ scope.row.estimateCosPrice }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品数量" align="center" prop="skuNum" width="80" />
+        <el-table-column label="订单状态" align="center" prop="validCode" width="240">
+          <template slot-scope="scope">
+            <el-tag :type="getStatusType(scope.row.validCode)">
+              {{ getStatusText(scope.row.validCode) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="佣金比例" align="center" prop="commissionRate" width="100">
+          <template slot-scope="scope">
+            <span>{{ scope.row.commissionRate }}%</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="预估佣金" align="center" prop="estimateFee" width="100">
+          <template slot-scope="scope">
+            <span>¥{{ scope.row.estimateFee }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="实际佣金" align="center" prop="actualFee" width="100">
+          <template slot-scope="scope">
+            <span>¥{{ scope.row.actualFee }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="订单时间" align="center" prop="orderTime" width="160">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.orderTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="完成时间" align="center" prop="finishTime" width="160">
+          <template slot-scope="scope">
+            <span>{{ scope.row.finishTime ? parseTime(scope.row.finishTime) : '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
+            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:orderrows:edit']">修改</el-button>
+            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:orderrows:remove']">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 固定分页区域 -->
+    <div class="pagination-section">
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+    </div>
 
     <!-- 查看订单详情对话框 -->
     <el-dialog :title="'订单详情 - ' + currentOrder.orderId" :visible.sync="viewDialogVisible" width="900px" append-to-body>
@@ -263,7 +339,17 @@ export default {
       // 查看详情对话框
       viewDialogVisible: false,
       // 当前查看的订单
-      currentOrder: {}
+      currentOrder: {},
+      // 统计相关
+      showStatistics: true,
+      statistics: {
+        totalOrders: 0,
+        totalCosPrice: 0,
+        totalEstimateFee: 0,
+        totalActualFee: 0,
+        statusStats: {},
+        accountStats: {}
+      }
     };
   },
   created() {
@@ -271,6 +357,23 @@ export default {
     this.getAdminList();
     this.getStatusList();
   },
+  watch: {
+    // 监听日期范围变化，自动调整分页条数
+    dateRange: {
+      handler(newVal) {
+        if (newVal && newVal.length === 2) {
+          // 选择了日期范围，设置分页条数为1000
+          this.queryParams.pageSize = 1000;
+          this.queryParams.pageNum = 1;
+        } else {
+          // 清空日期范围，恢复默认分页条数
+          this.queryParams.pageSize = 10;
+          this.queryParams.pageNum = 1;
+        }
+      },
+      deep: true
+    }
+  },
   methods: {
     /** 查询京粉订单列表 */
     getList() {
@@ -279,6 +382,8 @@ export default {
         this.orderrowsList = response.rows;
         this.total = response.total;
         this.loading = false;
+        // 计算统计数据
+        this.calculateStatistics();
       }).catch(error => {
         console.error('获取订单列表失败:', error);
         this.loading = false;
@@ -446,6 +551,7 @@ export default {
     handleQuery() {
       this.queryParams.pageNum = 1;
       console.log(this.queryParams.validCode);
+      
       // 合并项转为原始code数组
       if (this.queryParams.statusGroup) {
         this.queryParams.validCodes = this.statusValueMap[this.queryParams.statusGroup].map(code => Number(code));
@@ -467,7 +573,10 @@ export default {
       this.dateRange = [];
       this.resetForm("queryForm");
       this.queryParams.validCodes = [];
-      this.handleQuery();
+      // 重置时恢复默认分页条数
+      this.queryParams.pageSize = 10;
+      this.queryParams.pageNum = 1;
+      this.getList();
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
@@ -531,7 +640,336 @@ export default {
       this.download('/jarvis/orderrows/export', {
         ...this.queryParams
       }, `京粉订单数据_${new Date().getTime()}.xlsx`)
+    },
+    /** 切换统计显示 */
+    toggleStatistics() {
+      this.showStatistics = !this.showStatistics;
+    },
+    /** 计算统计数据 */
+    calculateStatistics() {
+      const stats = {
+        totalOrders: this.orderrowsList.length,
+        totalCosPrice: 0,
+        totalEstimateFee: 0,
+        totalActualFee: 0,
+        statusStats: {},
+        accountStats: {}
+      };
+
+      // 状态分组映射
+      const statusGroups = {
+        'cancel': { label: '取消', codes: ['3'] },
+        'invalid': { label: '无效', codes: ['2','4','5','6','7','8','9','10','11','14','19','20','21','22','23','29','30','31','32','33','34'] },
+        'pending': { label: '待付款', codes: ['15'] },
+        'paid': { label: '已付款', codes: ['16'] },
+        'finished': { label: '已完成', codes: ['17'] },
+        'deposit': { label: '已付定金', codes: ['24'] },
+        'illegal': { label: '违规', codes: ['25','26','27','28'] }
+      };
+
+      // 初始化状态统计
+      Object.keys(statusGroups).forEach(key => {
+        stats.statusStats[key] = {
+          label: statusGroups[key].label,
+          count: 0,
+          amount: 0
+        };
+      });
+
+      // 遍历订单数据计算统计
+      this.orderrowsList.forEach(order => {
+        // 总计佣金额
+        if (order.estimateCosPrice) {
+          stats.totalCosPrice += parseFloat(order.estimateCosPrice) || 0;
+        }
+        // 预估佣金
+        if (order.estimateFee) {
+          stats.totalEstimateFee += parseFloat(order.estimateFee) || 0;
+        }
+        // 实际佣金
+        if (order.actualFee) {
+          stats.totalActualFee += parseFloat(order.actualFee) || 0;
+        }
+
+        // 按状态统计
+        const validCode = String(order.validCode);
+        let statusKey = 'invalid'; // 默认无效
+        for (const [key, group] of Object.entries(statusGroups)) {
+          if (group.codes.includes(validCode)) {
+            statusKey = key;
+            break;
+          }
+        }
+        stats.statusStats[statusKey].count++;
+        stats.statusStats[statusKey].amount += parseFloat(order.actualFee) || 0;
+
+        // 按账号统计
+        const unionId = order.unionId;
+        if (!stats.accountStats[unionId]) {
+          stats.accountStats[unionId] = {
+            count: 0,
+            amount: 0
+          };
+        }
+        stats.accountStats[unionId].count++;
+        stats.accountStats[unionId].amount += parseFloat(order.actualFee) || 0;
+      });
+
+      this.statistics = stats;
+    },
+    /** 根据状态键获取标签类型 */
+    getStatusTypeByKey(key) {
+      const typeMap = {
+        'cancel': 'danger',
+        'invalid': 'info',
+        'pending': 'warning',
+        'paid': 'primary',
+        'finished': 'success',
+        'deposit': 'warning',
+        'illegal': 'danger'
+      };
+      return typeMap[key] || 'info';
     }
   }
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+/* 主容器布局 */
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 84px); /* 减去头部导航高度 */
+  overflow: hidden;
+}
+
+/* 搜索区域 - 固定在顶部 */
+.search-section {
+  flex-shrink: 0;
+  background: #fff;
+  padding: 20px;
+  border-bottom: 1px solid #e4e7ed;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* 表格区域 - 可滚动 */
+.table-section {
+  flex: 1;
+  overflow: auto;
+  padding: 0 20px;
+  background: #fff;
+}
+
+/* 固定分页区域 */
+.pagination-section {
+  flex-shrink: 0;
+  background: #fff;
+  padding: 15px 20px;
+  border-top: 1px solid #e4e7ed;
+  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+}
+
+/* 统计卡片样式 */
+.statistics-card {
+  margin-bottom: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.statistics-card .el-card__header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-radius: 8px 8px 0 0;
+  padding: 15px 20px;
+}
+
+.statistics-card .el-card__header span {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.statistics-card .el-card__header .el-button {
+  color: white;
+  font-weight: 500;
+}
+
+.statistics-card .el-card__header .el-button:hover {
+  color: #f0f0f0;
+}
+
+.statistics-content {
+  padding: 20px 0;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  margin-bottom: 10px;
+  transition: all 0.3s ease;
+}
+
+.stat-item:hover {
+  background: #e9ecef;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+.status-stats, .account-stats {
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 6px;
+  height: 100%;
+}
+
+.status-stats h4, .account-stats h4 {
+  margin: 0 0 15px 0;
+  color: #2c3e50;
+  font-size: 16px;
+  font-weight: 600;
+  border-bottom: 2px solid #e9ecef;
+  padding-bottom: 8px;
+}
+
+.status-list, .account-list {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.status-item, .account-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.status-item:last-child, .account-item:last-child {
+  border-bottom: none;
+}
+
+.status-count, .account-count {
+  font-size: 12px;
+  color: #666;
+  background: #e9ecef;
+  padding: 2px 8px;
+  border-radius: 12px;
+  min-width: 40px;
+  text-align: center;
+}
+
+.status-amount, .account-amount {
+  font-weight: 600;
+  color: #27ae60;
+  font-size: 14px;
+}
+
+.account-name {
+  font-weight: 500;
+  color: #2c3e50;
+  flex: 1;
+  margin-right: 10px;
+}
+
+/* 滚动条样式 */
+.status-list::-webkit-scrollbar, .account-list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.status-list::-webkit-scrollbar-track, .account-list::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 2px;
+}
+
+.status-list::-webkit-scrollbar-thumb, .account-list::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 2px;
+}
+
+.status-list::-webkit-scrollbar-thumb:hover, .account-list::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 表格区域滚动条样式 */
+.table-section::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.table-section::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.table-section::-webkit-scrollbar-thumb {
+  background: #c0c0c0;
+  border-radius: 3px;
+}
+
+.table-section::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .app-container {
+    height: calc(100vh - 50px); /* 移动端调整高度 */
+  }
+  
+  .search-section {
+    padding: 15px;
+  }
+  
+  .table-section {
+    padding: 0 15px;
+  }
+  
+  .pagination-section {
+    padding: 10px 15px;
+  }
+  
+  .statistics-content .el-col {
+    margin-bottom: 15px;
+  }
+  
+  .stat-item {
+    padding: 10px;
+  }
+  
+  .stat-value {
+    font-size: 20px;
+  }
+}
+
+/* 确保表格在容器内正确显示 */
+.table-section .el-table {
+  width: 100%;
+}
+
+/* 分页组件样式优化 */
+.pagination-section .pagination-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+  border-radius: 4px;
+  padding: 10px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index ab01a4a..ecd42fb 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,159 +1,170 @@
 <template>
-  <div class="app-container">
-    <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"
-        >
-          <el-option
-            v-for="dict in dict.type.sys_normal_disable"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+  <div>
+    <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-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>
+        <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>
+          <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-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:role:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:role:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:role:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:role:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="角色编号" prop="roleId" width="120" />
-      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="显示顺序" prop="roleSort" width="100" />
-      <el-table-column label="状态" align="center" width="100">
-        <template slot-scope="scope">
-          <el-switch
-            v-model="scope.row.status"
-            active-value="0"
-            inactive-value="1"
-            @change="handleStatusChange(scope.row)"
-          ></el-switch>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
           <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
             size="mini"
-            type="text"
+            @click="handleAdd"
+            v-hasPermi="['system:role:add']"
+          >新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="success"
+            plain
             icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
+            size="mini"
+            :disabled="single"
+            @click="handleUpdate"
             v-hasPermi="['system:role:edit']"
           >修改</el-button>
+        </el-col>
+        <el-col :span="1.5">
           <el-button
-            size="mini"
-            type="text"
+            type="danger"
+            plain
             icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
             v-hasPermi="['system:role:remove']"
           >删除</el-button>
-          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
-            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
-                v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
-              <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
-                v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </template>
-      </el-table-column>
-    </el-table>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="warning"
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            v-hasPermi="['system:role:export']"
+          >导出</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+    </template>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <!-- 表格区域 -->
+    <template #table>
+      <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="角色编号" prop="roleId" width="120" />
+        <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+        <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+        <el-table-column label="显示顺序" prop="roleSort" width="100" />
+        <el-table-column label="状态" align="center" width="100">
+          <template slot-scope="scope">
+            <el-switch
+              v-model="scope.row.status"
+              active-value="0"
+              inactive-value="1"
+              @change="handleStatusChange(scope.row)"
+            ></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope" v-if="scope.row.roleId !== 1">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['system:role:edit']"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['system:role:remove']"
+            >删除</el-button>
+            <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
+              <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
+                  v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
+                <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
+                  v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+    </template>
+
+    <!-- 分页区域 -->
+    <template #pagination>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </template>
+  </list-layout>
 
     <!-- 添加或修改角色配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -254,9 +265,13 @@
 <script>
 import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role"
 import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu"
+import ListLayout from "@/components/ListLayout"
 
 export default {
   name: "Role",
+  components: {
+    ListLayout
+  },
   dicts: ['sys_normal_disable'],
   data() {
     return {
diff --git a/src/views/system/superadmin/index.vue b/src/views/system/superadmin/index.vue
index ca979d0..6f72171 100644
--- a/src/views/system/superadmin/index.vue
+++ b/src/views/system/superadmin/index.vue
@@ -1,94 +1,105 @@
 <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="微信ID" prop="wxid">
-        <el-input v-model="queryParams.wxid" placeholder="请输入微信ID" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="姓名" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="联盟ID" prop="unionId">
-        <el-input v-model="queryParams.unionId" placeholder="请输入联盟ID" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="激活状态" prop="isActive">
-        <el-select v-model="queryParams.isActive" placeholder="激活状态" clearable style="width: 240px">
-          <el-option label="已激活" value="1" />
-          <el-option label="未激活" value="0" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="参与统计" prop="isCount">
-        <el-select v-model="queryParams.isCount" placeholder="参与统计" clearable style="width: 240px">
-          <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>
+  <div>
+    <list-layout>
+      <!-- 搜索区域 -->
+      <template #search>
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+          <el-form-item label="微信ID" prop="wxid">
+            <el-input v-model="queryParams.wxid" placeholder="请输入微信ID" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="姓名" prop="name">
+            <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="联盟ID" prop="unionId">
+            <el-input v-model="queryParams.unionId" placeholder="请输入联盟ID" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="激活状态" prop="isActive">
+            <el-select v-model="queryParams.isActive" placeholder="激活状态" clearable style="width: 240px">
+              <el-option label="已激活" value="1" />
+              <el-option label="未激活" value="0" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="参与统计" prop="isCount">
+            <el-select v-model="queryParams.isCount" placeholder="参与统计" clearable style="width: 240px">
+              <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>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:superadmin:add']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:superadmin:edit']">修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:superadmin:remove']">删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:superadmin:export']">导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:superadmin:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:superadmin:edit']">修改</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:superadmin:remove']">删除</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:superadmin:export']">导出</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
 
-    <el-table v-loading="loading" :data="superadminList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="50" align="center" />
-      <el-table-column label="微信ID" align="center" prop="wxid" min-width="120" />
-      <el-table-column label="姓名" align="center" prop="name" min-width="100" />
-      <el-table-column label="联盟ID" align="center" prop="unionId" min-width="120" />
-      <el-table-column label="应用密钥" align="center" prop="appKey" min-width="200" :show-overflow-tooltip="true" />
-      <el-table-column label="秘密密钥" align="center" prop="secretKey" min-width="200" :show-overflow-tooltip="true">
-        <template slot-scope="scope">
-          <span>{{ scope.row.secretKey ? '***' + scope.row.secretKey.substring(scope.row.secretKey.length - 4) : '-' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="激活状态" align="center" prop="isActive" min-width="100">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.isActive === 1 ? 'success' : 'info'">
-            {{ scope.row.isActive === 1 ? '已激活' : '未激活' }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="参与统计" align="center" prop="isCount" min-width="100">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.isCount === 1 ? 'success' : 'info'">
-            {{ scope.row.isCount === 1 ? '参与统计' : '不参与统计' }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createdAt" min-width="160">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createdAt) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="更新时间" align="center" prop="updatedAt" min-width="160">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.updatedAt) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" min-width="180" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:superadmin:edit']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:superadmin:remove']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+      <!-- 表格区域 -->
+      <template #table>
+        <el-table v-loading="loading" :data="superadminList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="50" align="center" />
+          <el-table-column label="微信ID" align="center" prop="wxid" min-width="120" />
+          <el-table-column label="姓名" align="center" prop="name" min-width="100" />
+          <el-table-column label="联盟ID" align="center" prop="unionId" min-width="120" />
+          <el-table-column label="应用密钥" align="center" prop="appKey" min-width="200" :show-overflow-tooltip="true" />
+          <el-table-column label="秘密密钥" align="center" prop="secretKey" min-width="200" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ scope.row.secretKey ? '***' + scope.row.secretKey.substring(scope.row.secretKey.length - 4) : '-' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="激活状态" align="center" prop="isActive" min-width="100">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.isActive === 1 ? 'success' : 'info'">
+                {{ scope.row.isActive === 1 ? '已激活' : '未激活' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="参与统计" align="center" prop="isCount" min-width="100">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.isCount === 1 ? 'success' : 'info'">
+                {{ scope.row.isCount === 1 ? '参与统计' : '不参与统计' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" align="center" prop="createdAt" min-width="160">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createdAt) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="更新时间" align="center" prop="updatedAt" min-width="160">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.updatedAt) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" min-width="180" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:superadmin:edit']">修改</el-button>
+              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:superadmin:remove']">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
 
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+      <!-- 分页区域 -->
+      <template #pagination>
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+      </template>
+    </list-layout>
 
     <!-- 添加或修改超级管理员对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -158,9 +169,13 @@
 
 <script>
 import { listSuperadmin, getSuperadmin, delSuperadmin, addSuperadmin, updateSuperadmin } from "@/api/system/superadmin";
+import ListLayout from "@/components/ListLayout";
 
 export default {
   name: "Superadmin",
+  components: {
+    ListLayout
+  },
   data() {
     return {
       // 遮罩层
diff --git a/update-list-pages.md b/update-list-pages.md
new file mode 100644
index 0000000..683b85a
--- /dev/null
+++ b/update-list-pages.md
@@ -0,0 +1,86 @@
+# 全局列表页面固定分页布局更新指南
+
+## 已完成的页面
+- ✅ 京粉订单列表 (`src/views/system/orderrows/index.vue`) - 已使用自定义布局
+- ✅ 角色管理 (`src/views/system/role/index.vue`) - 已使用ListLayout组件
+- ✅ 超级管理员 (`src/views/system/superadmin/index.vue`) - 已使用ListLayout组件
+
+## 待更新的页面列表
+以下是项目中其他需要更新为固定分页布局的列表页面：
+
+### 系统管理模块
+- `src/views/system/user/index.vue` - 用户管理（特殊布局，需要单独处理）
+- `src/views/system/post/index.vue` - 岗位管理
+- `src/views/system/notice/index.vue` - 通知公告
+- `src/views/system/dict/index.vue` - 字典管理
+- `src/views/system/dict/data.vue` - 字典数据
+- `src/views/system/config/index.vue` - 参数设置
+
+### 监控模块
+- `src/views/monitor/operlog/index.vue` - 操作日志
+- `src/views/monitor/job/log.vue` - 调度日志
+- `src/views/monitor/logininfor/index.vue` - 登录日志
+- `src/views/monitor/job/index.vue` - 定时任务
+- `src/views/monitor/online/index.vue` - 在线用户
+
+### 工具模块
+- `src/views/tool/gen/index.vue` - 代码生成
+
+### 业务模块
+- `src/views/system/jdorder/orderList.vue` - 京东订单列表
+- `src/views/system/xbmessage/index.vue` - 消息管理
+- `src/views/system/favoriteProduct/index.vue` - 收藏商品
+- `src/views/system/xbgroup/index.vue` - 群组管理
+
+## 更新步骤
+
+### 方法一：使用ListLayout组件（推荐）
+1. 在页面中导入ListLayout组件：
+```javascript
+import ListLayout from "@/components/ListLayout";
+
+export default {
+  components: {
+    ListLayout
+  },
+  // ...
+}
+```
+
+2. 将页面结构改为：
+```vue
+<template>
+  <list-layout>
+    <!-- 搜索区域 -->
+    <template #search>
+      <!-- 原来的搜索表单和操作按钮 -->
+    </template>
+
+    <!-- 表格区域 -->
+    <template #table>
+      <!-- 原来的el-table -->
+    </template>
+
+    <!-- 分页区域 -->
+    <template #pagination>
+      <!-- 原来的pagination组件 -->
+    </template>
+  </list-layout>
+</template>
+```
+
+### 方法二：直接修改CSS（适用于特殊布局）
+参考 `src/views/system/orderrows/index.vue` 的实现方式，直接修改页面样式。
+
+## 注意事项
+1. 用户管理页面使用了splitpanes布局，需要特殊处理
+2. 确保所有页面都保持原有的功能不变
+3. 测试分页导航在不同数据量下的表现
+4. 保持响应式设计在移动端的良好表现
+
+## 测试要点
+- [ ] 分页导航固定在页面底部
+- [ ] 表格内容可以独立滚动
+- [ ] 搜索区域固定在顶部
+- [ ] 移动端显示正常
+- [ ] 所有原有功能正常工作