From 3dac1d893197dc807f595647cd3b63eac56929b3 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Tue, 3 Feb 2026 22:21:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97=E5=92=8C=E7=99=BB=E5=BD=95=E6=97=A5=E5=BF=97?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/operlog.js                     |  26 +
 src/pages.json                                |   6 +
 src/pages_mine/pages/system/index.vue         |  11 +-
 .../pages/system/logininfor/list.vue          | 131 ++--
 src/pages_mine/pages/system/operlog/list.vue  | 632 ++++++++++++++++++
 src/pages_mine/pages/system/post/list.vue     | 119 ++--
 src/pages_mine/pages/system/user/list.vue     | 119 ++--
 7 files changed, 919 insertions(+), 125 deletions(-)
 create mode 100644 src/api/system/operlog.js
 create mode 100644 src/pages_mine/pages/system/operlog/list.vue

diff --git a/src/api/system/operlog.js b/src/api/system/operlog.js
new file mode 100644
index 0000000..51a4cc3
--- /dev/null
+++ b/src/api/system/operlog.js
@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 查询操作日志列表
+export function list(query) {
+  return request({
+    url: '/system/operlog/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 删除操作日志
+export function delOperlog(operId) {
+  return request({
+    url: '/system/operlog/' + operId,
+    method: 'delete'
+  })
+}
+
+// 清空操作日志
+export function cleanOperlog() {
+  return request({
+    url: '/system/operlog/clean',
+    method: 'delete'
+  })
+}
diff --git a/src/pages.json b/src/pages.json
index f35ad2a..c383d04 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -943,6 +943,12 @@
           "style": {
             "navigationBarTitleText": "部门详情"
           }
+        },
+        {
+          "path": "system/operlog/list",
+          "style": {
+            "navigationBarTitleText": "操作日志"
+          }
         }
       ]
     },
diff --git a/src/pages_mine/pages/system/index.vue b/src/pages_mine/pages/system/index.vue
index 1528840..0860cec 100644
--- a/src/pages_mine/pages/system/index.vue
+++ b/src/pages_mine/pages/system/index.vue
@@ -34,13 +34,18 @@ const systemGridList = ref([
   { path: '/pages/system/config/index', text: '参数设置', icon: 'gear', color: 'linear-gradient(135deg, #5f72bd 0%, #9b23ea 100%)' },
   { path: '/pages/system/notice/index', text: '通知公告', icon: 'notification', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)' },
   { path: '/pages/system/job/index', text: '定时任务', icon: 'calendar', color: 'linear-gradient(135deg, #6366f1 0%, #a855f7 100%)' },
-  { path: '/pages/system/log/operlog/index', text: '操作日志', icon: 'compose', color: 'linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)' },
+  { path: '/pages_mine/pages/system/operlog/list', text: '操作日志', icon: 'compose', color: 'linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)' },
   { path: '/pages_mine/pages/system/logininfor/list', text: '登录日志', icon: 'eye', color: 'linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)' }
 ])
 
 function navigateTo(path) {
-  // 字典管理、登录日志、用户管理、岗位管理、部门管理已开发完成,可以跳转
-  if (path === '/pages_mine/pages/system/dict/list' || path === '/pages_mine/pages/system/logininfor/list' || path === '/pages_mine/pages/system/user/list' || path === '/pages_mine/pages/system/post/list' || path === '/pages_mine/pages/system/dept/list') {
+  // 字典管理、登录日志、用户管理、岗位管理、部门管理、操作日志已开发完成,可以跳转
+  if (path === '/pages_mine/pages/system/dict/list' || 
+      path === '/pages_mine/pages/system/logininfor/list' || 
+      path === '/pages_mine/pages/system/user/list' || 
+      path === '/pages_mine/pages/system/post/list' || 
+      path === '/pages_mine/pages/system/dept/list' ||
+      path === '/pages_mine/pages/system/operlog/list') {
     uni.navigateTo({
       url: path
     });
diff --git a/src/pages_mine/pages/system/logininfor/list.vue b/src/pages_mine/pages/system/logininfor/list.vue
index f84807a..b9a6602 100644
--- a/src/pages_mine/pages/system/logininfor/list.vue
+++ b/src/pages_mine/pages/system/logininfor/list.vue
@@ -24,10 +24,18 @@
               <view class="filter-title">登录时间</view>
               <view class="date-range">
                 <u--input v-model="dateRange[0]" placeholder="开始日期" border="surround" disabled
-                  disabledColor="#ffffff" @click="showStartDate = true"></u--input>
+                  disabledColor="#ffffff">
+                  <template #suffix>
+                    <u-icon name="calendar" @click="showStartDate = true"></u-icon>
+                  </template>
+                </u--input>
                 <text style="margin: 0 16rpx;">至</text>
                 <u--input v-model="dateRange[1]" placeholder="结束日期" border="surround" disabled
-                  disabledColor="#ffffff" @click="showEndDate = true"></u--input>
+                  disabledColor="#ffffff">
+                  <template #suffix>
+                    <u-icon name="calendar" @click="showEndDate = true"></u-icon>
+                  </template>
+                </u--input>
               </view>
             </view>
             <view class="btn-box">
@@ -274,49 +282,69 @@ page {
   }
 
   .filter-panel {
+    width: 100%;
     position: absolute;
-    top: 100rpx;
     left: 0;
-    right: 0;
-    background-color: #ffffff;
+    top: 96rpx;
+    background-color: rgba(0, 0, 0, 0.5);
     z-index: 999;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
 
     .filter-panel-content {
-      flex: 1;
-      padding: 32rpx;
-      overflow-y: auto;
+      background-color: #ffffff;
+      padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        font-size: 28rpx;
-        font-weight: bold;
-        margin: 32rpx 0 24rpx 0;
-        color: #303133;
-
-        &:first-child {
-          margin-top: 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx 20rpx;
+        position: relative;
+        display: flex;
+        align-items: center;
+        
+        &::before {
+          content: '';
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+          margin-right: 12rpx;
+          flex-shrink: 0;
         }
       }
 
       .state-list {
         display: flex;
         flex-wrap: wrap;
+        justify-content: flex-start;
         gap: 16rpx;
 
         .state-item {
-          padding: 16rpx 32rpx;
-          background-color: #f5f5f5;
-          border-radius: 32rpx;
+          padding: 0 32rpx;
+          height: 68rpx;
+          border: 2rpx solid #e8edf3;
+          border-radius: 34rpx;
+          text-align: center;
+          line-height: 68rpx;
           font-size: 28rpx;
-          color: #606266;
-
-          &.active {
-            background-color: #667eea;
-            color: #ffffff;
+          color: #666666;
+          transition: all 0.3s ease;
+          background: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+          
+          &:active {
+            transform: scale(0.95);
           }
         }
+
+        .active {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
+        }
       }
 
       .date-range {
@@ -327,33 +355,52 @@ page {
 
     .btn-box {
       display: flex;
-      padding: 24rpx 32rpx;
-      border-top: 1rpx solid #f0f0f0;
-
+      gap: 20rpx;
+      padding: 24rpx 30rpx;
+      background-color: #fff;
+      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      
       .btn-reset,
       .btn-confirm {
-        flex: 1;
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 20rpx 0;
-        border-radius: 32rpx;
-        font-size: 28rpx;
-
+        gap: 8rpx;
+        height: 88rpx;
+        border-radius: 12rpx;
+        font-size: 30rpx;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        
+        &:active {
+          transform: scale(0.98);
+          opacity: 0.9;
+        }
+        
         text {
-          margin-left: 12rpx;
+          line-height: 1;
         }
       }
-
+      
       .btn-reset {
-        background-color: #f5f5f5;
-        color: #909399;
-        margin-right: 16rpx;
+        flex: 1;
+        background: #f5f7fa;
+        border: 2rpx solid #dcdfe6;
+        
+        text {
+          color: #606266;
+        }
       }
-
+      
       .btn-confirm {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: #ffffff;
+        flex: 1;
+        background: #667eea;
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+        border: none;
+        
+        text {
+          color: #ffffff;
+        }
       }
     }
   }
diff --git a/src/pages_mine/pages/system/operlog/list.vue b/src/pages_mine/pages/system/operlog/list.vue
new file mode 100644
index 0000000..5520b0e
--- /dev/null
+++ b/src/pages_mine/pages/system/operlog/list.vue
@@ -0,0 +1,632 @@
+<template>
+  <view class="container">
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+      <view class="search-view">
+        <u--input v-model="queryParams.title" border="false" placeholder="请输入系统模块" class="search-input"
+          @blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
+        </u--input>
+        <view class="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
+        <u-transition :show="filterPanel" mode="fade">
+          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
+            <view class="filter-panel-content">
+              <view class="filter-title">操作地址</view>
+              <u--input v-model="queryParams.operIp" placeholder="请输入操作地址" border="surround"></u--input>
+              
+              <view class="filter-title">操作人员</view>
+              <u--input v-model="queryParams.operName" placeholder="请输入操作人员" border="surround"></u--input>
+              
+              <view class="filter-title">操作类型</view>
+              <view class="state-list">
+                <view v-for="item in businessTypeList" :key="item.dictValue" class="state-item"
+                  :class="item.selected ? 'active' : ''" @click="selectBusinessType(item)">{{ item.dictLabel }}</view>
+              </view>
+
+              <view class="filter-title">状态</view>
+              <view class="state-list">
+                <view v-for="item in statusList" :key="item.dictValue" class="state-item"
+                  :class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
+              </view>
+
+              <view class="filter-title">操作时间</view>
+              <view class="date-range">
+                <u--input v-model="dateRange[0]" placeholder="开始日期" border="surround" disabled
+                  disabledColor="#ffffff">
+                  <template #suffix>
+                    <u-icon name="calendar" @click="showStartDate = true"></u-icon>
+                  </template>
+                </u--input>
+                <text style="margin: 0 16rpx;">至</text>
+                <u--input v-model="dateRange[1]" placeholder="结束日期" border="surround" disabled
+                  disabledColor="#ffffff">
+                  <template #suffix>
+                    <u-icon name="calendar" @click="showEndDate = true"></u-icon>
+                  </template>
+                </u--input>
+              </view>
+            </view>
+            <view class="btn-box">
+              <view class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
+            </view>
+          </view>
+        </u-transition>
+      </view>
+    </u-sticky>
+    <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
+      <u-list-item v-for="(item, index) in listData" :key="index">
+        <view class="list-item">
+          <view class="item-header">
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.title }}<text class="card-code" v-if="item.operName">({{ item.operName }})</text><text class="card-code" v-if="dictStr(item.businessType, businessTypeList)"> - {{ dictStr(item.businessType, businessTypeList) }}</text></text>
+              </view>
+            </view>
+            <view class="balance-section">
+              <view class="status-tag" :class="item.status === '0' ? 'status-normal' : 'status-disabled'">
+                {{ dictStr(item.status, statusList) }}
+              </view>
+            </view>
+          </view>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item" v-if="item.requestMethod">
+                <text class="info-label">请求方式</text>
+                <text class="info-value">{{ item.requestMethod }}</text>
+              </view>
+              <view class="info-item" v-if="item.operIp">
+                <text class="info-label">操作地址</text>
+                <text class="info-value">{{ item.operIp }}</text>
+              </view>
+              <view class="info-item" v-if="item.operTime">
+                <text class="info-label">操作时间</text>
+                <text class="info-value">{{ item.operTime }}</text>
+              </view>
+              <view class="info-item" v-if="item.costTime !== undefined">
+                <text class="info-label">消耗时间</text>
+                <text class="info-value">{{ item.costTime }}毫秒</text>
+              </view>
+              <view class="info-item" v-if="item.operUrl">
+                <text class="info-label">请求地址</text>
+                <text class="info-value">{{ item.operUrl }}</text>
+              </view>
+              <view class="info-item full-width" v-if="item.method">
+                <text class="info-label">操作方法</text>
+                <text class="info-value method-text">{{ item.method }}</text>
+              </view>
+              <view class="info-item full-width" v-if="item.operParam">
+                <text class="info-label">请求参数</text>
+                <text class="info-value param-text">{{ item.operParam }}</text>
+              </view>
+              <view class="info-item full-width" v-if="item.jsonResult">
+                <text class="info-label">返回参数</text>
+                <text class="info-value param-text">{{ item.jsonResult }}</text>
+              </view>
+      
+              <view class="info-item full-width" v-if="item.status === '1' && item.errorMsg">
+                <text class="info-label">异常信息</text>
+                <text class="info-value error-text">{{ item.errorMsg }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </u-list-item>
+      <view></view>
+      <u-loadmore :status="loadStatus" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
+    </u-list>
+    <u-datetime-picker :show="showStartDate" v-model="startDateTime" mode="datetime"
+      @confirm="confirmStartDate" @cancel="showStartDate = false"></u-datetime-picker>
+    <u-datetime-picker :show="showEndDate" v-model="endDateTime" mode="datetime"
+      @confirm="confirmEndDate" @cancel="showEndDate = false"></u-datetime-picker>
+    <u-toast ref="uToast"></u-toast>
+  </view>
+  <suspend></suspend>
+  <refresh></refresh>
+</template>
+
+<script setup>
+import { ref, reactive, computed, getCurrentInstance } from 'vue'
+import { list } from '@/api/system/operlog'
+import { getDicts } from "@/api/system/dict/data"
+import { onLoad, onShow } from "@dcloudio/uni-app"
+import dayjs from 'dayjs'
+
+const { proxy } = getCurrentInstance()
+const pageNum = ref(1)
+const listData = ref([])
+const isShow = ref(false)
+const loadStatus = ref('loadmore')
+const businessTypeList = ref([])
+const statusList = ref([])
+const filterPanel = ref(false)
+const dateRange = ref(['', ''])
+const showStartDate = ref(false)
+const showEndDate = ref(false)
+const startDateTime = ref(Date.now())
+const endDateTime = ref(Date.now())
+
+const queryParams = reactive({
+  title: undefined,
+  operIp: undefined,
+  operName: undefined,
+  businessType: undefined,
+  status: undefined
+})
+
+const windowHeight = computed(() => {
+  return uni.getSystemInfoSync().windowHeight - 50
+})
+
+onLoad(() => {
+  getDicts('sys_oper_type').then(res => {
+    businessTypeList.value = res.data.map(item => ({
+      ...item,
+      selected: false
+    }))
+  })
+  getDicts('sys_common_status').then(res => {
+    statusList.value = res.data.map(item => ({
+      ...item,
+      selected: false
+    }))
+  })
+  getList()
+})
+
+onShow(() => {
+  if (isShow.value) {
+    listData.value = []
+    pageNum.value = 1
+    getList()
+    isShow.value = false
+  }
+})
+
+// 获取列表
+function getList() {
+  loadStatus.value = 'loading'
+  const params = {
+    pageSize: 10,
+    pageNum: pageNum.value,
+    ...queryParams
+  }
+  
+  if (dateRange.value[0]) {
+    params['params[beginTime]'] = dateRange.value[0]
+  }
+  if (dateRange.value[1]) {
+    params['params[endTime]'] = dateRange.value[1]
+  }
+
+  list(params).then(res => {
+    listData.value = listData.value.concat(res.rows)
+    if (listData.value.length < res.total) {
+      loadStatus.value = 'loadmore'
+    } else {
+      loadStatus.value = 'nomore'
+    }
+  }).catch(() => {
+    loadStatus.value = 'nomore'
+  })
+}
+
+// 搜索框失焦
+function searchBlur() {
+  listData.value = []
+  pageNum.value = 1
+  getList()
+}
+
+// 选择操作类型
+function selectBusinessType(item) {
+  businessTypeList.value.forEach(v => v.selected = false)
+  item.selected = !item.selected
+  queryParams.businessType = item.selected ? item.dictValue : undefined
+}
+
+// 选择状态
+function selectStatus(item) {
+  statusList.value.forEach(v => v.selected = false)
+  item.selected = !item.selected
+  queryParams.status = item.selected ? item.dictValue : undefined
+}
+
+// 搜索提交
+function searchSubmit() {
+  listData.value = []
+  pageNum.value = 1
+  filterPanel.value = false
+  getList()
+}
+
+// 重置查询
+function resetQuery() {
+  queryParams.title = undefined
+  queryParams.operIp = undefined
+  queryParams.operName = undefined
+  queryParams.businessType = undefined
+  queryParams.status = undefined
+  dateRange.value = ['', '']
+  listData.value = []
+  pageNum.value = 1
+  businessTypeList.value.forEach(v => v.selected = false)
+  statusList.value.forEach(v => v.selected = false)
+  filterPanel.value = false
+  getList()
+}
+
+// 上拉加载
+function loadmore() {
+  pageNum.value += 1
+  if (loadStatus.value == 'loadmore') {
+    getList()
+  }
+}
+
+// 确认开始日期
+function confirmStartDate(e) {
+  dateRange.value[0] = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
+  showStartDate.value = false
+}
+
+// 确认结束日期
+function confirmEndDate(e) {
+  dateRange.value[1] = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
+  showEndDate.value = false
+}
+
+// 字典翻译
+function dictStr(value, list) {
+  if (value === undefined || value === null) return ''
+  const item = list.find(v => v.dictValue == value) // 使用==支持类型转换
+  return item ? item.dictLabel : value
+}
+</script>
+
+<style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+}
+
+.container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.search-view {
+  display: flex;
+  align-items: center;
+  padding: 20rpx 24rpx;
+  background-color: #ffffff;
+  position: relative;
+
+  .search-input {
+    background: rgba(102, 126, 234, 0.08);
+    color: #333333;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    height: 66rpx !important;
+    display: flex;
+    align-items: center;
+  }
+
+  .filter-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: rgba(102, 126, 234, 0.08);
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    
+    &:active {
+      transform: scale(0.95);
+      background: rgba(102, 126, 234, 0.12);
+    }
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+    
+    uni-icons {
+      color: #667eea;
+    }
+  }
+
+  .filter-panel {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 96rpx;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+
+    .filter-panel-content {
+      background-color: #ffffff;
+      padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
+
+      .filter-title {
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx 20rpx;
+        position: relative;
+        display: flex;
+        align-items: center;
+        
+        &::before {
+          content: '';
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+          margin-right: 12rpx;
+          flex-shrink: 0;
+        }
+      }
+
+      .state-list {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        gap: 16rpx;
+
+        .state-item {
+          padding: 0 32rpx;
+          height: 68rpx;
+          border: 2rpx solid #e8edf3;
+          border-radius: 34rpx;
+          text-align: center;
+          line-height: 68rpx;
+          font-size: 28rpx;
+          color: #666666;
+          transition: all 0.3s ease;
+          background: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+          
+          &:active {
+            transform: scale(0.95);
+          }
+        }
+
+        .active {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
+        }
+      }
+
+      .date-range {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .btn-box {
+      display: flex;
+      gap: 20rpx;
+      padding: 24rpx 30rpx;
+      background-color: #fff;
+      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      
+      .btn-reset,
+      .btn-confirm {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8rpx;
+        height: 88rpx;
+        border-radius: 12rpx;
+        font-size: 30rpx;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        
+        &:active {
+          transform: scale(0.98);
+          opacity: 0.9;
+        }
+        
+        text {
+          line-height: 1;
+        }
+      }
+      
+      .btn-reset {
+        flex: 1;
+        background: #f5f7fa;
+        border: 2rpx solid #dcdfe6;
+        
+        text {
+          color: #606266;
+        }
+      }
+      
+      .btn-confirm {
+        flex: 1;
+        background: #667eea;
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+        border: none;
+        
+        text {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+
+.list-item {
+  margin: 10rpx 24rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.2s ease;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
+
+  .item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+      margin-right: 16rpx;
+    }
+    
+    .card-icon {
+      width: 40rpx;
+      height: 40rpx;
+      background: rgba(255, 255, 255, 0.25);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 12rpx;
+      flex-shrink: 0;
+    }
+    
+    .card-info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 28rpx;
+        font-weight: 600;
+        line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 26rpx;
+        font-weight: 400;
+        line-height: 1;
+      }
+    }
+    
+    .balance-section {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      white-space: nowrap;
+      
+      .status-tag {
+        padding: 8rpx 20rpx;
+        border-radius: 20rpx;
+        font-size: 22rpx;
+        font-weight: 500;
+
+        &.status-normal {
+          background-color: rgba(82, 196, 26, 0.2);
+          color: #ffffff;
+        }
+
+        &.status-disabled {
+          background-color: rgba(255, 77, 79, 0.2);
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
+
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
+
+    .info-item {
+      flex: 0 0 calc(50% - 12rpx);
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      margin-bottom: -5rpx;
+      
+      &.full-width {
+        flex: 0 0 100%;
+      }
+
+      .info-label {
+        font-size: 24rpx;
+        color: #667eea;
+        font-weight: 500;
+        background: rgba(102, 126, 234, 0.08);
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        align-self: flex-start;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+        
+        &.method-text,
+        &.param-text {
+          background: #f5f7fa;
+          padding: 12rpx;
+          border-radius: 8rpx;
+          font-family: 'Courier New', monospace;
+          font-size: 22rpx;
+          max-height: 200rpx;
+          overflow: auto;
+        }
+        
+        &.error-text {
+          color: #f5576c;
+          background: rgba(245, 87, 108, 0.1);
+          padding: 12rpx;
+          border-radius: 8rpx;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages_mine/pages/system/post/list.vue b/src/pages_mine/pages/system/post/list.vue
index 5b8e0b5..a6a5260 100644
--- a/src/pages_mine/pages/system/post/list.vue
+++ b/src/pages_mine/pages/system/post/list.vue
@@ -324,81 +324,120 @@ page {
   }
 
   .filter-panel {
+    width: 100%;
     position: absolute;
-    top: 100rpx;
     left: 0;
-    right: 0;
-    background-color: #ffffff;
+    top: 96rpx;
+    background-color: rgba(0, 0, 0, 0.5);
     z-index: 999;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
 
     .filter-panel-content {
-      flex: 1;
-      padding: 32rpx;
-      overflow-y: auto;
+      background-color: #ffffff;
+      padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        font-size: 28rpx;
-        font-weight: bold;
-        margin: 32rpx 0 24rpx 0;
-        color: #303133;
-
-        &:first-child {
-          margin-top: 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx 20rpx;
+        position: relative;
+        display: flex;
+        align-items: center;
+        
+        &::before {
+          content: '';
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+          margin-right: 12rpx;
+          flex-shrink: 0;
         }
       }
 
       .state-list {
         display: flex;
         flex-wrap: wrap;
+        justify-content: flex-start;
         gap: 16rpx;
 
         .state-item {
-          padding: 16rpx 32rpx;
-          background-color: #f5f5f5;
-          border-radius: 32rpx;
+          padding: 0 32rpx;
+          height: 68rpx;
+          border: 2rpx solid #e8edf3;
+          border-radius: 34rpx;
+          text-align: center;
+          line-height: 68rpx;
           font-size: 28rpx;
-          color: #606266;
-
-          &.active {
-            background-color: #667eea;
-            color: #ffffff;
+          color: #666666;
+          transition: all 0.3s ease;
+          background: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+          
+          &:active {
+            transform: scale(0.95);
           }
         }
+
+        .active {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
+        }
       }
     }
 
     .btn-box {
       display: flex;
-      padding: 24rpx 32rpx;
-      border-top: 1rpx solid #f0f0f0;
-
+      gap: 20rpx;
+      padding: 24rpx 30rpx;
+      background-color: #fff;
+      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      
       .btn-reset,
       .btn-confirm {
-        flex: 1;
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 20rpx 0;
-        border-radius: 32rpx;
-        font-size: 28rpx;
-
+        gap: 8rpx;
+        height: 88rpx;
+        border-radius: 12rpx;
+        font-size: 30rpx;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        
+        &:active {
+          transform: scale(0.98);
+          opacity: 0.9;
+        }
+        
         text {
-          margin-left: 12rpx;
+          line-height: 1;
         }
       }
-
+      
       .btn-reset {
-        background-color: #f5f5f5;
-        color: #909399;
-        margin-right: 16rpx;
+        flex: 1;
+        background: #f5f7fa;
+        border: 2rpx solid #dcdfe6;
+        
+        text {
+          color: #606266;
+        }
       }
-
+      
       .btn-confirm {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: #ffffff;
+        flex: 1;
+        background: #667eea;
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+        border: none;
+        
+        text {
+          color: #ffffff;
+        }
       }
     }
   }
diff --git a/src/pages_mine/pages/system/user/list.vue b/src/pages_mine/pages/system/user/list.vue
index 8bdfd03..2bc99e6 100644
--- a/src/pages_mine/pages/system/user/list.vue
+++ b/src/pages_mine/pages/system/user/list.vue
@@ -337,81 +337,120 @@ function dictStr(value, list) {
   }
 
   .filter-panel {
+    width: 100%;
     position: absolute;
-    top: 100rpx;
     left: 0;
-    right: 0;
-    background-color: #ffffff;
+    top: 96rpx;
+    background-color: rgba(0, 0, 0, 0.5);
     z-index: 999;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
 
     .filter-panel-content {
-      flex: 1;
-      padding: 32rpx;
-      overflow-y: auto;
+      background-color: #ffffff;
+      padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
-        font-size: 28rpx;
-        font-weight: bold;
-        margin: 32rpx 0 24rpx 0;
-        color: #303133;
-
-        &:first-child {
-          margin-top: 0;
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx 20rpx;
+        position: relative;
+        display: flex;
+        align-items: center;
+        
+        &::before {
+          content: '';
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+          margin-right: 12rpx;
+          flex-shrink: 0;
         }
       }
 
       .state-list {
         display: flex;
         flex-wrap: wrap;
+        justify-content: flex-start;
         gap: 16rpx;
 
         .state-item {
-          padding: 16rpx 32rpx;
-          background-color: #f5f5f5;
-          border-radius: 32rpx;
+          padding: 0 32rpx;
+          height: 68rpx;
+          border: 2rpx solid #e8edf3;
+          border-radius: 34rpx;
+          text-align: center;
+          line-height: 68rpx;
           font-size: 28rpx;
-          color: #606266;
-
-          &.active {
-            background-color: #667eea;
-            color: #ffffff;
+          color: #666666;
+          transition: all 0.3s ease;
+          background: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+          
+          &:active {
+            transform: scale(0.95);
           }
         }
+
+        .active {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
+        }
       }
     }
 
     .btn-box {
       display: flex;
-      padding: 24rpx 32rpx;
-      border-top: 1rpx solid #f0f0f0;
-
+      gap: 20rpx;
+      padding: 24rpx 30rpx;
+      background-color: #fff;
+      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      
       .btn-reset,
       .btn-confirm {
-        flex: 1;
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 20rpx 0;
-        border-radius: 32rpx;
-        font-size: 28rpx;
-
+        gap: 8rpx;
+        height: 88rpx;
+        border-radius: 12rpx;
+        font-size: 30rpx;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        
+        &:active {
+          transform: scale(0.98);
+          opacity: 0.9;
+        }
+        
         text {
-          margin-left: 12rpx;
+          line-height: 1;
         }
       }
-
+      
       .btn-reset {
-        background-color: #f5f5f5;
-        color: #909399;
-        margin-right: 16rpx;
+        flex: 1;
+        background: #f5f7fa;
+        border: 2rpx solid #dcdfe6;
+        
+        text {
+          color: #606266;
+        }
       }
-
+      
       .btn-confirm {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: #ffffff;
+        flex: 1;
+        background: #667eea;
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+        border: none;
+        
+        text {
+          color: #ffffff;
+        }
       }
     }
   }