From a719c8f386f84cba5fd07c0c5d4440ceed96c0ef Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Tue, 8 Jul 2025 22:45:41 +0800
Subject: [PATCH] =?UTF-8?q?refactor(operlog):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E6=97=A5=E5=BF=97=E9=A1=B5=E9=9D=A2=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E5=92=8C=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 简化操作按钮样式，移除复杂的圆形按钮和tooltip包装
- 统一使用小尺寸按钮(size: small)和14px图标
- 调整表格尺寸为medium，优化数据密度
- 优化列宽度分配：序号60px、操作类型90px、系统类型90px等
- 新增表格横向滚动支持(scroll-x: 1700)
- 调整操作列宽度为160px，优化按钮布局
- 优化按钮间距，使用gap-1减少空间占用
- 移除复杂的action-btn样式类，简化CSS代码
- 优化表格单元格内边距和字体大小
- 新增表格和页面滚动条样式优化
---
 src/views/system/operlog/index.vue | 189 ++++++++++++++---------------
 1 file changed, 92 insertions(+), 97 deletions(-)

diff --git a/src/views/system/operlog/index.vue b/src/views/system/operlog/index.vue
index 11fe85b..601ec93 100644
--- a/src/views/system/operlog/index.vue
+++ b/src/views/system/operlog/index.vue
@@ -156,7 +156,8 @@
           :row-key="(row: OperLogVo) => row.operId"
           :bordered="false"
           :single-line="false"
-          size="large"
+          :scroll-x="1700"
+          size="medium"
           class="custom-table"
           @update:checked-row-keys="handleRowSelectionChange"
         />
@@ -259,7 +260,7 @@
 <script setup lang="ts">
 import { h, nextTick, onMounted, ref } from 'vue'
 import type { DataTableColumns, FormInst } from 'naive-ui'
-import { NButton, NIcon, NPopconfirm, NSpace, NTag, NTooltip } from 'naive-ui'
+import { NButton, NIcon, NPopconfirm, NSpace, NTag } from 'naive-ui'
 import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
 import IconParkOutlinePreviewOpen from '~icons/icon-park-outline/preview-open'
 import CoiDialog from '@/components/common/CoiDialog.vue'
@@ -321,7 +322,7 @@ const columns: DataTableColumns<OperLogVo> = [
   {
     title: '序号',
     key: 'index',
-    width: 70,
+    width: 60,
     align: 'center',
     render: (_, index) => {
       return (pagination.value.page - 1) * pagination.value.pageSize + index + 1
@@ -340,7 +341,7 @@ const columns: DataTableColumns<OperLogVo> = [
   {
     title: '操作类型',
     key: 'operType',
-    width: 100,
+    width: 90,
     align: 'center',
     render: (row) => {
       return h(NTag, {
@@ -363,7 +364,7 @@ const columns: DataTableColumns<OperLogVo> = [
   {
     title: '系统类型',
     key: 'systemType',
-    width: 100,
+    width: 90,
     align: 'center',
     render: (row) => {
       return h('span', { class: 'text-gray-600' }, row.systemType || '-')
@@ -372,7 +373,7 @@ const columns: DataTableColumns<OperLogVo> = [
   {
     title: '请求方式',
     key: 'requestMethod',
-    width: 90,
+    width: 80,
     align: 'center',
     render: (row) => {
       return h(NTag, {
@@ -387,11 +388,11 @@ const columns: DataTableColumns<OperLogVo> = [
     title: '请求URL',
     key: 'operUrl',
     width: 200,
-    align: 'left',
+    align: 'center',
     ellipsis: { tooltip: true },
     render: (row) => {
       return h('span', {
-        class: 'text-gray-600 font-mono text-sm',
+        class: 'text-sm',
         title: row.operUrl,
       }, row.operUrl || '-')
     },
@@ -412,13 +413,13 @@ const columns: DataTableColumns<OperLogVo> = [
     align: 'center',
     ellipsis: { tooltip: true },
     render: (row) => {
-      return h('span', { class: 'text-gray-500' }, row.operLocation || '-')
+      return h('span', row.operLocation || '-')
     },
   },
   {
     title: '操作状态',
     key: 'operStatus',
-    width: 100,
+    width: 90,
     align: 'center',
     render: (row) => {
       const isSuccess = row.operStatus === '0'
@@ -442,7 +443,7 @@ const columns: DataTableColumns<OperLogVo> = [
   {
     title: '消耗时间',
     key: 'costTime',
-    width: 100,
+    width: 90,
     align: 'center',
     render: (row) => {
       return h('span', { class: 'text-gray-500 text-sm' }, `${row.costTime || '0'}ms`)
@@ -451,26 +452,22 @@ const columns: DataTableColumns<OperLogVo> = [
   {
     title: '操作',
     key: 'actions',
-    width: 120,
+    width: 160,
     align: 'center',
     fixed: 'right',
     render: (row) => {
       const buttons = []
 
       // 查看详情按钮
-      buttons.push(h(NTooltip, {
-        trigger: 'hover',
+      buttons.push(h(NButton, {
+        type: 'primary',
+        size: 'small',
+        onClick: () => handleViewDetail(row),
       }, {
-        default: () => '查看详情',
-        trigger: () => h(NButton, {
-          type: 'primary',
-          size: 'medium',
-          circle: true,
-          class: 'action-btn action-btn-info',
-          onClick: () => handleViewDetail(row),
-        }, {
-          icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlinePreviewOpen) }),
+        icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+          default: () => h(IconParkOutlinePreviewOpen),
         }),
+        default: () => '查看',
       }))
 
       // 删除按钮
@@ -481,23 +478,19 @@ const columns: DataTableColumns<OperLogVo> = [
           positiveText: '确定',
         }, {
           default: () => '确定删除此操作记录吗？',
-          trigger: () => h(NTooltip, {
-            trigger: 'hover',
+          trigger: () => h(NButton, {
+            type: 'error',
+            size: 'small',
           }, {
-            default: () => '删除',
-            trigger: () => h(NButton, {
-              type: 'error',
-              size: 'medium',
-              circle: true,
-              class: 'action-btn action-btn-delete',
-            }, {
-              icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlineDelete) }),
+            icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+              default: () => h(IconParkOutlineDelete),
             }),
+            default: () => '删除',
           }),
         }))
       }
 
-      return h('div', { class: 'flex items-center justify-center gap-2' }, buttons)
+      return h('div', { class: 'flex items-center justify-center gap-1' }, buttons)
     },
   },
 ]
@@ -778,13 +771,15 @@ onMounted(() => {
 }
 
 .custom-table :deep(.n-data-table-td) {
-  padding: 8px 12px;
+  padding: 7px 12px;
+  font-size: 14px;
 }
 
 .custom-table :deep(.n-data-table-th) {
-  padding: 10px 12px;
+  padding: 9px 12px;
   background-color: #fafafa;
   font-weight: normal;
+  font-size: 14px;
   color: #262626;
 }
 
@@ -794,6 +789,7 @@ onMounted(() => {
 
 .search-form :deep(.n-form-item-label) {
   font-weight: 500;
+  font-size: 14px;
   color: #262626;
 }
 
@@ -827,69 +823,16 @@ onMounted(() => {
   left: 100%;
 }
 
-/* 操作按钮样式 */
-.action-btn {
-  width: 36px !important;
-  height: 36px !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  border-radius: 50% !important;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
-  border: none !important;
-  position: relative !important;
-  overflow: hidden !important;
+/* 操作按钮样式优化 */
+.custom-table :deep(.n-button--small-type) {
+  font-size: 12px;
+  padding: 4px 8px;
 }
 
-.action-btn:hover {
-  transform: translateY(-2px) !important;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
-}
-
-.action-btn:active {
-  transform: translateY(0) !important;
-  transition: all 0.1s !important;
-}
-
-/* 删除按钮 */
-.action-btn-delete {
-  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
-  color: white !important;
-}
-
-.action-btn-delete:hover {
-  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
-  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4) !important;
-}
-
-/* 信息按钮 */
-.action-btn-info {
-  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
-  color: white !important;
-}
-
-.action-btn-info:hover {
-  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
-  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.4) !important;
-}
-
-/* 图标居中对齐 */
-.action-btn .n-icon {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  margin: 0 !important;
-}
-
-/* 移除默认边框和背景 */
-.action-btn.n-button {
-  border: none !important;
-}
-
-.action-btn.n-button:focus {
-  outline: none !important;
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
+/* 标签尺寸优化 */
+.custom-table :deep(.n-tag--small-type) {
+  font-size: 11px;
+  padding: 2px 6px;
 }
 
 /* 操作日志详情样式 */
@@ -965,4 +908,56 @@ onMounted(() => {
   line-height: 1.5;
   word-break: break-all;
 }
+
+/* 自定义滚动条样式 */
+.table-wrapper {
+  min-height: 0;
+}
+
+.table-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.table-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+.table-wrapper::-webkit-scrollbar-corner {
+  background: #f1f1f1;
+}
+
+/* 表格滚动条样式 */
+.custom-table :deep(.n-data-table-base-table) {
+  overflow: auto;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-track {
+  background: #f8f9fa;
+  border-radius: 3px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-thumb {
+  background: #dee2e6;
+  border-radius: 3px;
+}
+
+.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-thumb:hover {
+  background: #adb5bd;
+}
 </style>