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

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

diff --git a/src/views/system/loginlog/index.vue b/src/views/system/loginlog/index.vue
index f5a0697..f1d3cb4 100644
--- a/src/views/system/loginlog/index.vue
+++ b/src/views/system/loginlog/index.vue
@@ -142,7 +142,8 @@
           :row-key="(row: LoginLogVo) => row.loginLogId"
           :bordered="false"
           :single-line="false"
-          size="large"
+          :scroll-x="1400"
+          size="medium"
           class="custom-table"
           @update:checked-row-keys="handleRowSelectionChange"
         />
@@ -200,7 +201,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 CoiEmpty from '@/components/common/CoiEmpty.vue'
 import {
@@ -254,7 +255,7 @@ const columns: DataTableColumns<LoginLogVo> = [
   {
     title: '序号',
     key: 'index',
-    width: 70,
+    width: 60,
     align: 'center',
     render: (_, index) => {
       return (pagination.value.page - 1) * pagination.value.pageSize + index + 1
@@ -263,7 +264,7 @@ const columns: DataTableColumns<LoginLogVo> = [
   {
     title: '登录用户',
     key: 'loginName',
-    width: 120,
+    width: 100,
     align: 'center',
     render: (row) => {
       return h('span', { class: 'text-gray-600 font-medium' }, row.loginName)
@@ -291,7 +292,7 @@ const columns: DataTableColumns<LoginLogVo> = [
   {
     title: '浏览器',
     key: 'loginBrowser',
-    width: 120,
+    width: 100,
     align: 'center',
     ellipsis: { tooltip: true },
     render: (row) => {
@@ -301,7 +302,7 @@ const columns: DataTableColumns<LoginLogVo> = [
   {
     title: '操作系统',
     key: 'loginOs',
-    width: 120,
+    width: 100,
     align: 'center',
     ellipsis: { tooltip: true },
     render: (row) => {
@@ -311,7 +312,7 @@ const columns: DataTableColumns<LoginLogVo> = [
   {
     title: '设备名称',
     key: 'deviceName',
-    width: 120,
+    width: 100,
     align: 'center',
     ellipsis: { tooltip: true },
     render: (row) => {
@@ -355,7 +356,7 @@ const columns: DataTableColumns<LoginLogVo> = [
   {
     title: '操作',
     key: 'actions',
-    width: 120,
+    width: 100,
     align: 'center',
     fixed: 'right',
     render: (row) => {
@@ -369,23 +370,19 @@ const columns: DataTableColumns<LoginLogVo> = [
           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)
     },
   },
 ]
@@ -612,13 +609,15 @@ onMounted(() => {
 }
 
 .custom-table :deep(.n-data-table-td) {
-  padding: 8px 12px;
+  padding: 6px 10px;
+  font-size: 13px;
 }
 
 .custom-table :deep(.n-data-table-th) {
-  padding: 10px 12px;
+  padding: 8px 10px;
   background-color: #fafafa;
   font-weight: normal;
+  font-size: 13px;
   color: #262626;
 }
 
@@ -628,6 +627,7 @@ onMounted(() => {
 
 .search-form :deep(.n-form-item-label) {
   font-weight: 500;
+  font-size: 13px;
   color: #262626;
 }
 
@@ -661,69 +661,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;
 }
 
 /* 登录日志详情样式 */
@@ -736,4 +683,56 @@ onMounted(() => {
 .login-log-detail :deep(.n-descriptions-item-content) {
   color: #6b7280;
 }
+
+/* 自定义滚动条样式 */
+.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>