fix: 系统管理菜单和系统监控菜单所有首页列表的显示优化

src/theme/element.scss

@@ -5,6 +5,11 @@
 	//--el-color-danger: #909399; // 删除按钮
 }
 
+// 修复树形表格中 type index 的串行问题
+.el-table .cell:has(div) .el-table__placeholder {
+	display: unset;
+}
+
 /* Button 按钮
 ------------------------------- */
 // 第三方字体图标大小
@@ -22,27 +27,27 @@
 	margin-right: 5px;
 }
 
-.el-image{
+.el-image {
 	vertical-align: top;
 }
 
 .image-slot {
-  display: flex;
+	display: flex;
 	flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  background: var(--el-fill-color-light);
-  color: var(--el-text-color-secondary);
-  font-size: 12px;
-	gap:2px
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	background: var(--el-fill-color-light);
+	color: var(--el-text-color-secondary);
+	font-size: 12px;
+	gap: 2px;
 }
 
-.el-button.el-button--text.el-button--small{
+.el-button.el-button--text.el-button--small {
 	padding: 0;
 }
-.el-button.is-text.el-button--small{
+.el-button.is-text.el-button--small {
 	padding: 0;
 }
 
@@ -74,7 +79,7 @@
 ------------------------------- */
 // 鼠标 hover 时颜色
 .el-menu-hover-bg-color {
-	background-color: var(--next-color-menu-hover-blue) !important
+	background-color: var(--next-color-menu-hover-blue) !important;
 	// background-color: var(--next-color-menu-hover) !important;
 }
 // 默认样式修改
@@ -216,7 +221,7 @@
 .custom-dialog .el-dialog__body {
 	max-height: none !important;
 }
-.el-dialog.is-fullscreen{
+.el-dialog.is-fullscreen {
 	.el-dialog__body {
 		max-height: 100vh !important;
 	}
@@ -266,11 +271,11 @@
 }
 
 .el-tree-node__label,
-.custom-tree-node{
+.custom-tree-node {
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
 .el-popper {
-    max-width: 50vw;
-}
+	max-width: 50vw;
+}

src/theme/fast.scss

@@ -2,6 +2,7 @@
 .page {
 	height: 100%;
 	overflow-y: auto;
+	overflow-x: hidden;
 	background: var(--el-color-white);
 	color: var(--el-text-color-primary);
 	border: 1px solid var(--next-border-color-light);

src/views/system/manage/blacklist/index.vue

@@ -1,125 +1,81 @@
 <template>
-  <div class="system-dic-container">
+  <div class="page">
     <el-card shadow="nover">
-      <div class="system-user-search mb15">
-        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
-          <el-form-item label="IP地址" prop="keyWord">
-            <el-input v-model="tableData.param.keyWord" placeholder="请输入IP地址" clearable size="default" style="width: 240px" @keyup.enter.native="typeList" />
-          </el-form-item>
-          <!-- <el-form-item label="状态" prop="status" style="width: 200px;">
+      <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
+        <el-form-item label="IP地址" prop="keyWord">
+          <el-input v-model="tableData.param.keyWord" placeholder="请输入IP地址" clearable size="default" style="width: 240px" @keyup.enter.native="typeList" />
+        </el-form-item>
+        <!-- <el-form-item label="状态" prop="status" style="width: 200px;">
             <el-select v-model="tableData.param.status" placeholder="状态" clearable size="default" style="width: 240px">
               <el-option label="正常" :value="1" />
               <el-option label="停用" :value="0" />
             </el-select>
           </el-form-item> -->
-          <el-form-item>
-            <el-button size="default" type="primary" class="ml10" @click="typeList">
-              <el-icon>
-                <ele-Search />
-              </el-icon>
-              查询
-            </el-button>
-            <el-button size="default" @click="resetQuery(queryRef)">
-              <el-icon>
-                <ele-Refresh />
-              </el-icon>
-              重置
-            </el-button>
-            <el-button size="default" type="primary" class="ml10" @click="onOpenAdd" v-auth="'add'">
-              <el-icon>
-                <ele-FolderAdd />
-              </el-icon>
-              新建
-            </el-button>
-            <el-button size="default" type="info" class="ml10" @click="onRowDel(null)" v-auth="'del'">
-              <el-icon>
-                <ele-Delete />
-              </el-icon>
-              批量删除
-            </el-button>
-          </el-form-item>
-        </el-form>
-      </div>
+        <el-form-item>
+          <el-button size="default" type="primary" class="ml10" @click="typeList">
+            <el-icon>
+              <ele-Search />
+            </el-icon>
+            查询
+          </el-button>
+          <el-button size="default" @click="resetQuery(queryRef)">
+            <el-icon>
+              <ele-Refresh />
+            </el-icon>
+            重置
+          </el-button>
+          <el-button size="default" type="primary" class="ml10" @click="onOpenAdd" v-auth="'add'">
+            <el-icon>
+              <ele-FolderAdd />
+            </el-icon>
+            新建
+          </el-button>
+          <el-button size="default" type="info" class="ml10" @click="onRowDel(null)" v-auth="'del'">
+            <el-icon>
+              <ele-Delete />
+            </el-icon>
+            批量删除
+          </el-button>
+        </el-form-item>
+      </el-form>
       <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
         <el-table-column type="selection" width="55" align="center" />
         <!--        <el-table-column label="ID" align="center" prop="id" width="100"  v-col="'id'"/>-->
         <!-- <el-table-column label="标识" prop="key" show-overflow-tooltip v-col="'key'" /> -->
-        <el-table-column label="IP" prop="ip" v-col="'ip'"/>
+        <el-table-column label="IP" prop="ip" v-col="'ip'" />
         <!-- <el-table-column label="名称" prop="name" show-overflow-tooltip v-col="'name'" /> -->
-         <el-table-column label="备注" prop="remark" show-overflow-tooltip v-col="'remark'"/>
+        <el-table-column label="备注" prop="remark" show-overflow-tooltip v-col="'remark'" />
         <!-- <el-table-column label="分类" prop="categoryName" show-overflow-tooltip v-col="'categoryName'" /> -->
-        <el-table-column
-          align="center"
-          prop="status"
-          label="状态"
-          v-col="'status'"
-        >
-        <template #default="scope">
-          <el-tag
-            v-if="scope.row.status == 0"
-            class="ml-2"
-            type="info"
-          >停用</el-tag>
-          <el-tag
-            v-else
-            class="ml-2"
-            type="success"
-          >正常</el-tag>
-        </template>
-      </el-table-column>
+        <el-table-column align="center" prop="status" label="状态" v-col="'status'">
+          <template #default="scope">
+            <el-tag v-if="scope.row.status == 0" class="ml-2" type="info">停用</el-tag>
+            <el-tag v-else class="ml-2" type="success">正常</el-tag>
+          </template>
+        </el-table-column>
         <el-table-column v-col="'createdAt'" prop="createdAt" label="创建时间" align="center" width="180"></el-table-column>
-        <el-table-column v-col="'handle'"  label="操作" width="150" align="center" fixed="right">
+        <el-table-column v-col="'handle'" label="操作" width="150" align="center" fixed="right">
           <template #default="scope">
             <!-- <router-link :to="'/iotmanager/device/product/detail/' + scope.row.id" class="link-type" style="padding-right: 12px;font-size: 12px;color: #409eff;">
               <span>详情</span>
             </router-link> -->
             <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-auth="'edit'">编辑</el-button>
             <el-button size="small" text type="info" @click="onRowDel(scope.row)" v-auth="'del'">删除</el-button>
-            <el-popover
-              placement="bottom"
-              :width="154"
-              trigger="click"
-            >
+            <el-popover placement="bottom" :width="154" trigger="click">
               <template #reference>
-                <el-button
-                  size="small"
-                  type="text"
-                  class="more-btn"
-                  @click="isShowMore = !isShowMore"
-                  v-auth="'more'"
-                >更多
-                  <i
-                    style="margin-left: 2px;"
-                    :class="isShowMore ? 'fa fa-angle-down':'fa fa-angle-up'"
-                  ></i>
+                <el-button size="small" type="text" class="more-btn" @click="isShowMore = !isShowMore" v-auth="'more'">更多
+                  <i style="margin-left: 2px;" :class="isShowMore ? 'fa fa-angle-down' : 'fa fa-angle-up'"></i>
                 </el-button>
               </template>
               <div class="more-opearte-wrap">
-                <el-button
-                  @click="onChangeStatus(scope.row.id, 1)"
-                  :disabled="scope.row.status == 1"
-                  link
-                  size="small"
-                  key="success"
-                  type="success"
-                  v-auth="'on'"
-                >设为启用</el-button>
+                <el-button @click="onChangeStatus(scope.row.id, 1)" :disabled="scope.row.status == 1" link size="small" key="success" type="success" v-auth="'on'">设为启用</el-button>
                 <el-divider direction="vertical" />
-                <el-button
-                  @click="onChangeStatus(scope.row.id, 0)"
-                  :disabled="scope.row.status == 0"
-                  link
-                  size="small"
-                  key="warning"
-                  type="warning"
-                  v-auth="'off'"
-                >设为禁用</el-button>
+                <el-button @click="onChangeStatus(scope.row.id, 0)" :disabled="scope.row.status == 0" link size="small" key="warning" type="warning" v-auth="'off'">设为禁用</el-button>
               </div>
             </el-popover>
           </template>
         </el-table-column>
       </el-table>
-      <pagination v-show="tableData.total>0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="typeList" />
+      <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="typeList" />
     </el-card>
     <EditDic ref="editDicRef" @typeList="typeList" />
   </div>

src/views/system/manage/dept/index.vue

@@ -1,40 +1,38 @@
 <template>
-  <div class="system-dept-container">
+  <div class="page">
     <el-card shadow="nover">
-      <div class="system-dept-search mb15">
-        <el-form :model="tableData.param" :inline="true" ref="queryRef" @keyup.enter="deptList">
-          <el-form-item label="组织名称" prop="deptName">
-            <el-input size="default" v-model="tableData.param.deptName" placeholder="请输入组织名称" class="w-50" clearable />
-          </el-form-item>
-          <el-form-item label="状态" prop="status">
-            <el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
-              <el-option label="全部" :value="-1" />
-              <el-option label="启用" :value="1" />
-              <el-option label="禁用" :value="0" />
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button size="default" type="primary" class="ml10" @click="deptList">
-              <el-icon>
-                <ele-Search />
-              </el-icon>
-              查询
-            </el-button>
-            <el-button size="default" @click="resetQuery()">
-              <el-icon>
-                <ele-Refresh />
-              </el-icon>
-              重置
-            </el-button>
-            <el-button size="default" type="primary" class="ml10" @click="onOpenAddDept" v-auth="'add'">
-              <el-icon>
-                <ele-FolderAdd />
-              </el-icon>
-              新增组织
-            </el-button>
-          </el-form-item>
-        </el-form>
-      </div>
+      <el-form :model="tableData.param" :inline="true" ref="queryRef" @keyup.enter="deptList">
+        <el-form-item label="组织名称" prop="deptName">
+          <el-input size="default" v-model="tableData.param.deptName" placeholder="请输入组织名称" class="w-50" clearable />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
+            <el-option label="全部" :value="-1" />
+            <el-option label="启用" :value="1" />
+            <el-option label="禁用" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button size="default" type="primary" class="ml10" @click="deptList">
+            <el-icon>
+              <ele-Search />
+            </el-icon>
+            查询
+          </el-button>
+          <el-button size="default" @click="resetQuery()">
+            <el-icon>
+              <ele-Refresh />
+            </el-icon>
+            重置
+          </el-button>
+          <el-button size="default" type="primary" class="ml10" @click="onOpenAddDept" v-auth="'add'">
+            <el-icon>
+              <ele-FolderAdd />
+            </el-icon>
+            新增组织
+          </el-button>
+        </el-form-item>
+      </el-form>
       <el-table :data="tableData.data" style="width: 100%" row-key="deptId" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
         <el-table-column prop="deptName" label="组织名称" v-col="'deptName'" show-overflow-tooltip> </el-table-column>
         <el-table-column prop="status" label="组织状态" v-col="'status'" align="center" min-width="120">

src/views/system/manage/post/index.vue

@@ -1,49 +1,47 @@
 <template>
-  <div class="system-post-container">
+  <div class="page">
     <el-card shadow="nover">
-      <div class="system-user-search mb15">
-        <el-form :model="tableData.param" :inline="true" ref="queryRef">
-          <el-form-item label="岗位名称" prop="postName">
-            <el-input size="default" v-model="tableData.param.postName" placeholder="请输入岗位名称" class="w-50" clearable />
-          </el-form-item>
-          <el-form-item label="岗位编码" prop="postCode">
-            <el-input size="default" v-model="tableData.param.postCode" placeholder="请输入岗位编码" class="w-50" clearable />
-          </el-form-item>
-          <el-form-item label="状态" prop="status">
-            <el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
-              <el-option label="全部" :value="-1" />
-              <el-option label="启用" :value="1" />
-              <el-option label="禁用" :value="0" />
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button size="default" type="primary" class="ml10" @click="postList">
-              <el-icon>
-                <ele-Search />
-              </el-icon>
-              查询
-            </el-button>
-            <el-button size="default" @click="resetQuery()">
-              <el-icon>
-                <ele-Refresh />
-              </el-icon>
-              重置
-            </el-button>
-            <el-button size="default" type="primary" class="ml10" @click="onOpenAddPost" v-auth="'add'">
-              <el-icon>
-                <ele-FolderAdd />
-              </el-icon>
-              新增岗位
-            </el-button>
-            <!-- <el-button size="default" type="info" class="ml10" @click="onRowDel(null)">
+      <el-form :model="tableData.param" :inline="true" ref="queryRef">
+        <el-form-item label="岗位名称" prop="postName">
+          <el-input size="default" v-model="tableData.param.postName" placeholder="请输入岗位名称" class="w-50" clearable />
+        </el-form-item>
+        <el-form-item label="岗位编码" prop="postCode">
+          <el-input size="default" v-model="tableData.param.postCode" placeholder="请输入岗位编码" class="w-50" clearable />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
+            <el-option label="全部" :value="-1" />
+            <el-option label="启用" :value="1" />
+            <el-option label="禁用" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button size="default" type="primary" class="ml10" @click="postList">
+            <el-icon>
+              <ele-Search />
+            </el-icon>
+            查询
+          </el-button>
+          <el-button size="default" @click="resetQuery()">
+            <el-icon>
+              <ele-Refresh />
+            </el-icon>
+            重置
+          </el-button>
+          <el-button size="default" type="primary" class="ml10" @click="onOpenAddPost" v-auth="'add'">
+            <el-icon>
+              <ele-FolderAdd />
+            </el-icon>
+            新增岗位
+          </el-button>
+          <!-- <el-button size="default" type="info" class="ml10" @click="onRowDel(null)">
               <el-icon>
                 <ele-Delete />
               </el-icon>
               删除岗位
             </el-button> -->
-          </el-form-item>
-        </el-form>
-      </div>
+        </el-form-item>
+      </el-form>
       <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" row-key="postId" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column type="index" label="序号" width="60" align="center" />

src/views/system/manage/role/index.vue

@@ -1,40 +1,38 @@
 <template>
-  <div class="system-role-container">
+  <div class="page">
     <el-card shadow="nover">
-      <div class="system-user-search mb15">
-        <el-form :model="tableData.param" :inline="true" ref="queryRef">
-          <el-form-item label="角色名称" prop="name">
-            <el-input size="default" v-model="tableData.param.name" placeholder="请输入角色名称" class="w-50" clearable />
-          </el-form-item>
-          <el-form-item label="状态" prop="status">
-            <el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
-              <el-option label="全部" :value="-1" />
-              <el-option label="启用" :value="1" />
-              <el-option label="禁用" :value="0" />
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button size="default" type="primary" class="ml10" @click="roleList">
-              <el-icon>
-                <ele-Search />
-              </el-icon>
-              查询
-            </el-button>
-            <el-button size="default" @click="resetQuery()">
-              <el-icon>
-                <ele-Refresh />
-              </el-icon>
-              重置
-            </el-button>
-            <el-button size="default" type="primary" class="ml10" @click="onOpenAddRole" v-auth="'add'">
-              <el-icon>
-                <ele-FolderAdd />
-              </el-icon>
-              新增角色
-            </el-button>
-          </el-form-item>
-        </el-form>
-      </div>
+      <el-form :model="tableData.param" :inline="true" ref="queryRef">
+        <el-form-item label="角色名称" prop="name">
+          <el-input size="default" v-model="tableData.param.name" placeholder="请输入角色名称" class="w-50" clearable />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select size="default" placeholder="请选择状态" class="w-50" v-model="tableData.param.status">
+            <el-option label="全部" :value="-1" />
+            <el-option label="启用" :value="1" />
+            <el-option label="禁用" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button size="default" type="primary" class="ml10" @click="roleList">
+            <el-icon>
+              <ele-Search />
+            </el-icon>
+            查询
+          </el-button>
+          <el-button size="default" @click="resetQuery()">
+            <el-icon>
+              <ele-Refresh />
+            </el-icon>
+            重置
+          </el-button>
+          <el-button size="default" type="primary" class="ml10" @click="onOpenAddRole" v-auth="'add'">
+            <el-icon>
+              <ele-FolderAdd />
+            </el-icon>
+            新增角色
+          </el-button>
+        </el-form-item>
+      </el-form>
       <el-table :data="tableData.data" style="width: 100%" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
         <el-table-column type="index" label="序号" width="60" align="center" />
         <el-table-column prop="name" v-col="'name'" label="角色名称" show-overflow-tooltip></el-table-column>

src/views/system/manage/user/index.vue

@@ -1,97 +1,89 @@
 <template>
-	<div class="system-user-container">
-		<el-row :gutter="10">
-			<el-col :span="5">
-				<el-card shadow="nover">
-					<el-scrollbar>
-						<el-input :prefix-icon="search" v-model="filterText" placeholder="请输入组织名称" clearable size="default" style="width: 100%;" />
-						<el-tree ref="treeRef" class="filter-tree mt-4" :data="deptData" :props="deptProps" default-expand-all :filter-node-method="deptFilterNode" @node-click="handleNodeClick">
-							<template #default="{ node, data }">
-								<div class="custom-tree-node" :title="node.label">
-									{{ node.label }}
-								</div>
-							</template></el-tree>
-					</el-scrollbar>
-				</el-card>
-			</el-col>
-			<el-col :span="19">
-				<el-card shadow="nover">
-					<div class="system-user-search mb15">
-						<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
-							<el-form-item label="关键字" prop="keyWords">
-								<el-input v-model="tableData.param.keyWords" placeholder="请输入用户名或姓名" clearable size="default" style="width: 240px" @keyup.enter.native="userList" />
-							</el-form-item>
-							<!--							<el-form-item label="手机号码" prop="mobile">-->
-							<!--								<el-input v-model="tableData.param.mobile" placeholder="请输入手机号码" clearable size="default" style="width: 240px" @keyup.enter.native="userList" />-->
-							<!--							</el-form-item>-->
-							<el-form-item label="状态" prop="status" style="width: 200px;">
-								<el-select v-model="tableData.param.status" placeholder="用户状态" size="default" style="width: 240px">
-									<el-option label="全部" :value="-1" />
-									<el-option label="启用" :value="1" />
-									<el-option label="禁用" :value="0" />
-									<!-- <el-option label="未验证" :value="2" /> -->
-								</el-select>
-							</el-form-item>
-							<el-form-item label="创建时间" prop="dateRange">
-								<el-date-picker v-model="tableData.param.dateRange" size="default" 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 size="default" type="primary" class="ml10" @click="userList">
-									<el-icon>
-										<ele-Search />
-									</el-icon>
-									查询
-								</el-button>
-								<el-button size="default" @click="resetQuery(queryRef)">
-									<el-icon>
-										<ele-Refresh />
-									</el-icon>
-									重置
-								</el-button>
-								<el-button size="default" type="primary" class="ml10" @click="onOpenAddUser" v-auth="'add'">
-									<el-icon>
-										<ele-FolderAdd />
-									</el-icon>
-									新增用户
-								</el-button>
-								<!-- <el-button size="default" type="info" class="ml10" @click="onRowDel(null)">
+	<div class="page flex-row gap-5">
+		<el-card shadow="nover">
+			<el-scrollbar>
+				<el-input :prefix-icon="search" v-model="filterText" placeholder="请输入组织名称" clearable size="default" style="width: 100%;" />
+				<el-tree ref="treeRef" class="filter-tree mt-4" :data="deptData" :props="deptProps" default-expand-all :filter-node-method="deptFilterNode" @node-click="handleNodeClick">
+					<template #default="{ node, data }">
+						<div class="custom-tree-node" :title="node.label">
+							{{ node.label }}
+						</div>
+					</template></el-tree>
+			</el-scrollbar>
+		</el-card>
+		<el-card shadow="nover">
+			<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
+				<el-form-item label="关键字" prop="keyWords">
+					<el-input v-model="tableData.param.keyWords" placeholder="请输入用户名或姓名" clearable size="default" style="width: 240px" @keyup.enter.native="userList" />
+				</el-form-item>
+				<!--							<el-form-item label="手机号码" prop="mobile">-->
+				<!--								<el-input v-model="tableData.param.mobile" placeholder="请输入手机号码" clearable size="default" style="width: 240px" @keyup.enter.native="userList" />-->
+				<!--							</el-form-item>-->
+				<el-form-item label="状态" prop="status" style="width: 200px;">
+					<el-select v-model="tableData.param.status" placeholder="用户状态" size="default" style="width: 240px">
+						<el-option label="全部" :value="-1" />
+						<el-option label="启用" :value="1" />
+						<el-option label="禁用" :value="0" />
+						<!-- <el-option label="未验证" :value="2" /> -->
+					</el-select>
+				</el-form-item>
+				<el-form-item label="创建时间" prop="dateRange">
+					<el-date-picker v-model="tableData.param.dateRange" size="default" 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 size="default" type="primary" class="ml10" @click="userList">
+						<el-icon>
+							<ele-Search />
+						</el-icon>
+						查询
+					</el-button>
+					<el-button size="default" @click="resetQuery(queryRef)">
+						<el-icon>
+							<ele-Refresh />
+						</el-icon>
+						重置
+					</el-button>
+					<el-button size="default" type="primary" class="ml10" @click="onOpenAddUser" v-auth="'add'">
+						<el-icon>
+							<ele-FolderAdd />
+						</el-icon>
+						新增用户
+					</el-button>
+					<!-- <el-button size="default" type="info" class="ml10" @click="onRowDel(null)">
 									<el-icon>
 										<ele-Delete />
 									</el-icon>
 									删除用户
 								</el-button> -->
-							</el-form-item>
-						</el-form>
-					</div>
-					<el-table :data="tableData.data" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
-						<!-- <el-table-column type="selection" width="55" align="center" /> -->
-						<el-table-column type="index" label="序号" width="60" align="center" />
-						<el-table-column prop="userName" label="用户名" v-col="'userName'" min-width="120" show-overflow-tooltip></el-table-column>
-						<el-table-column prop="userNickname" label="姓名" v-col="'userNickname'" width="160" show-overflow-tooltip></el-table-column>
-						<el-table-column prop="dept.deptName" label="组织" v-col="'deptName'" show-overflow-tooltip></el-table-column>
-						<el-table-column label="角色" min-width="120" prop="rolesNames" v-col="'rolesNames'" show-overflow-tooltip></el-table-column>
-						<el-table-column prop="mobile" label="手机号" v-col="'mobile'" width="120" align="center"></el-table-column>
-						<el-table-column prop="status" label="用户状态" width="120" v-col="'status'" align="center">
-							<template #default="scope">
-								<el-switch v-model="scope.row.status" :disabled="scope.row.id === 1" v-auth="'change-status'" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁" @change="handleStatusChange(scope.row)">
-								</el-switch>
-							</template>
-						</el-table-column>
-						<el-table-column prop="createdAt" label="创建时间" width="180" v-col="'createdAt'" align="center"></el-table-column>
-						<el-table-column label="操作" width="180" align="center" v-col="'handle'" fixed="right">
-							<template #default="scope">
-								<!-- <el-button size="small" text type="warning" @click="onOpenEditUser(scope.row)" v-auths="['edit','del']">修改</el-button>
+				</el-form-item>
+			</el-form>
+			<el-table :data="tableData.data" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
+				<!-- <el-table-column type="selection" width="55" align="center" /> -->
+				<el-table-column type="index" label="序号" width="60" align="center" />
+				<el-table-column prop="userName" label="用户名" v-col="'userName'" min-width="120" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="userNickname" label="姓名" v-col="'userNickname'" width="160" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="dept.deptName" label="组织" v-col="'deptName'" show-overflow-tooltip></el-table-column>
+				<el-table-column label="角色" min-width="120" prop="rolesNames" v-col="'rolesNames'" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="mobile" label="手机号" v-col="'mobile'" width="120" align="center"></el-table-column>
+				<el-table-column prop="status" label="用户状态" width="120" v-col="'status'" align="center">
+					<template #default="scope">
+						<el-switch v-model="scope.row.status" :disabled="scope.row.id === 1" v-auth="'change-status'" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁" @change="handleStatusChange(scope.row)">
+						</el-switch>
+					</template>
+				</el-table-column>
+				<el-table-column prop="createdAt" label="创建时间" width="180" v-col="'createdAt'" align="center"></el-table-column>
+				<el-table-column label="操作" width="180" align="center" v-col="'handle'" fixed="right">
+					<template #default="scope">
+						<!-- <el-button size="small" text type="warning" @click="onOpenEditUser(scope.row)" v-auths="['edit','del']">修改</el-button>
                 <el-button size="small" text type="warning" @click="onOpenEditUser(scope.row)" v-auth-all="['edit','del']">修改</el-button> -->
-								<el-button size="small" text type="warning" @click="onOpenEditUser(scope.row)" v-auth="'edit'">修改</el-button>
-								<el-button size="small" text type="info" @click="onRowDel(scope.row)" v-if="scope.row.id !== 1" v-auth="'del'">删除</el-button>
-								<el-button size="small" text type="success" @click="handleResetPwd(scope.row)" v-auth="'reset'">重置</el-button>
-							</template>
-						</el-table-column>
-					</el-table>
-					<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="userList" />
-				</el-card>
-			</el-col>
-		</el-row>
+						<el-button size="small" text type="warning" @click="onOpenEditUser(scope.row)" v-auth="'edit'">修改</el-button>
+						<el-button size="small" text type="info" @click="onRowDel(scope.row)" v-if="scope.row.id !== 1" v-auth="'del'">删除</el-button>
+						<el-button size="small" text type="success" @click="handleResetPwd(scope.row)" v-auth="'reset'">重置</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="userList" />
+		</el-card>
 		<EditUser ref="editUserRef" :dept-data="deptData" :post-data="postData" :role-data="roleData" @getUserList="userList" />
 		<EditPer ref="editPerRef" @getUserList="userList" />
 	</div>

src/views/system/monitor/cache/index.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="system-cache-container">
-    <div class="flex-row gap-3">
+  <div class="page">
+    <el-row :gutter="15">
       <el-col :span="12" class="marg-b-15">
-        <el-card class="box-card-height" style="height:auto">
+        <el-card shadow="nover" class="box-card-height" style="height:auto">
           <template #header>
             <div class="card-header">
               <span>客户端信息</span>
             </div>
           </template>
-          <table cellspacing="0" style="height: 230px;width: 100%">
+          <table cellspacing="0" style=";width: 100%">
             <tbody v-if="sysInfo.clients">
               <tr>
                 <td>
@@ -48,13 +48,13 @@
         </el-card>
       </el-col>
       <el-col :span="12" class="marg-b-15">
-        <el-card class="box-card-height" style="height:auto">
+        <el-card shadow="nover" class="box-card-height" style="height:auto">
           <template #header>
             <div class="card-header">
               <span>CPU 信息</span>
             </div>
           </template>
-          <table cellspacing="0" style="height: 230px;width: 100%">
+          <table cellspacing="0" style="width: 100%">
             <tbody v-if="sysInfo.cpu">
               <tr>
                 <td>
@@ -93,16 +93,16 @@
           </table>
         </el-card>
       </el-col>
-    </div>
-    <div class="flex-row gap-3">
+    </el-row>
+    <el-row :gutter="15">
       <el-col :span="12" class="marg-b-15">
-        <el-card class="box-card-height" style="height:auto">
+        <el-card shadow="nover" class="box-card-height" style="height:auto">
           <template #header>
             <div class="card-header">
               <span>服务信息</span>
             </div>
           </template>
-          <table cellspacing="0" style="height: 300px;width: 100%">
+          <table cellspacing="0" style="width: 100%">
             <tbody v-if="sysInfo.clients">
               <tr>
                 <td>
@@ -174,13 +174,13 @@
         </el-card>
       </el-col>
       <el-col :span="12" class="marg-b-15">
-        <el-card class="box-card-height" style="height:auto">
+        <el-card shadow="nover" class="box-card-height" style="height:auto">
           <template #header>
             <div class="card-header">
               <span>内存信息</span>
             </div>
           </template>
-          <table v-if='sysInfo.memory' cellspacing="0" style="height: 300px;width: 100%">
+          <table v-if='sysInfo.memory' cellspacing="0" style="width: 100%">
             <tbody>
               <tr>
                 <td>
@@ -256,10 +256,10 @@
           </table>
         </el-card>
       </el-col>
-    </div>
+    </el-row>
     <div class="flex-row gap-3">
       <el-col :xs="24" :sm="24" :md="24" class="marg-b-15">
-        <el-card class="box-card-height" style="height:auto">
+        <el-card shadow="nover" class="box-card-height" style="height:auto">
           <template #header>
             <div class="card-header">
               <span>基础统计信息</span>
@@ -301,8 +301,8 @@
       </el-col>
     </div>
     <div class="flex-row gap-3">
-      <el-col :xs="24" :sm="24" :md="24" class="marg-b-15">
-        <el-card class="box-card-height" style="height:auto">
+      <el-col :xs="24" :sm="24" :md="24">
+        <el-card shadow="nover" class="box-card-height" style="height:auto">
           <template #header>
             <div class="card-header">
               <span>info Keyspace统计信息</span>
@@ -473,7 +473,8 @@ export default defineComponent({
   text-overflow: ellipsis;
   white-space: normal;
   word-break: break-all;
-  line-height: 36px;
+  line-height: 1.2;
+  margin: 10px 0;
 }
 
 .box-card {
@@ -485,4 +486,7 @@ export default defineComponent({
 
   min-height: 180px;
 }
+.el-form-item{
+  margin-bottom: 5px;
+}
 </style>

src/views/system/monitor/lastLinesLog/index.vue

@@ -1,98 +1,85 @@
 <template>
-  <div>
-    <div class="content-box chatdoom page">
+  <div class="page">
+    <el-card shadow="nover">
       <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-
-        <!-- 日志列表 -->
-        <el-tab-pane label="服务日志" name="1">
-          <el-card shadow="nover">
-            <el-table ref="table" :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
-              <el-table-column prop="name" label="文件名" show-overflow-tooltip></el-table-column>
-              <el-table-column prop="size" label="大小" show-overflow-tooltip></el-table-column>
-              <el-table-column prop="changeAt" label="修改时间" min-width="100" align="center"></el-table-column>
-              <el-table-column label="操作" width="200" align="center">
-                <template #default="scope">
-                  <el-button size="small" text type="primary" v-if="!scope.row.folderName"
-                             @click="view(scope.row)">详情
-                  </el-button>
-                  <el-button size="small" text type="warning" v-auth="'download'" @click="down(scope.row)">下载</el-button>
-                  <el-button size="small" text type="info" v-auth="'del'" @click="onRowDel(scope.row)">删除</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-          </el-card>
-
-          <el-dialog header="123" v-model="dialogVisible" title="查看详情">
-            <div v-for="line in topMsg" :key="line" class="error-line">{{ line }}</div>
-            <div v-for="line in errorMessage" :key="line" class="error-line">{{ line }}</div>
-          </el-dialog>
-        </el-tab-pane>
-
-        <!-- 数据库日志 -->
-        <el-tab-pane label="数据库日志" name="2">
-          <el-card shadow="nover">
-            <el-table :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
-              <el-table-column prop="name" label="文件名" show-overflow-tooltip></el-table-column>
-              <el-table-column prop="size" label="大小" show-overflow-tooltip></el-table-column>
-              <el-table-column prop="changeAt" label="修改时间" min-width="100" align="center"></el-table-column>
-              <el-table-column label="操作" width="200" align="center">
-                <template #default="scope">
-                  <el-button size="small" text type="primary" v-if="!scope.row.folderName"
-                             @click="view(scope.row)">详情
-                  </el-button>
-                  <el-button size="small" text type="warning" v-auth="'download'" @click="down(scope.row)">下载</el-button>
-                  <el-button size="small" text type="info" v-auth="'del'" @click="onRowDel(scope.row)">删除</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-          </el-card>
-
-          <el-dialog v-model="dialogVisible" title="查看详情">
-            <div v-for="line in topMsg" :key="line" class="error-line">{{ line }}</div>
-
-            <div v-for="line in errorMessage" :key="line" class="error-line">{{ line }}</div>
-          </el-dialog>
-        </el-tab-pane>
+        <el-tab-pane label="服务日志" name="1"> </el-tab-pane>
+        <el-tab-pane label="数据库日志" name="2"> </el-tab-pane>
+        <el-tab-pane label="运行日志" name="3"> </el-tab-pane>
+      </el-tabs>
+      <!-- 日志列表 -->
+      <el-table ref="table" v-if="activeName === '1'" :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
+        <el-table-column prop="name" label="文件名" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="size" label="大小" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="changeAt" label="修改时间" min-width="100" align="center"></el-table-column>
+        <el-table-column label="操作" width="200" align="center">
+          <template #default="scope">
+            <el-button size="small" text type="primary" v-if="!scope.row.folderName" @click="view(scope.row)">详情
+            </el-button>
+            <el-button size="small" text type="warning" v-auth="'download'" @click="down(scope.row)">下载</el-button>
+            <el-button size="small" text type="info" v-auth="'del'" @click="onRowDel(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 数据库日志 -->
+      <el-table v-else-if="activeName === '2'" :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
+        <el-table-column prop="name" label="文件名" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="size" label="大小" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="changeAt" label="修改时间" min-width="100" align="center"></el-table-column>
+        <el-table-column label="操作" width="200" align="center">
+          <template #default="scope">
+            <el-button size="small" text type="primary" v-if="!scope.row.folderName" @click="view(scope.row)">详情
+            </el-button>
+            <el-button size="small" text type="warning" v-auth="'download'" @click="down(scope.row)">下载</el-button>
+            <el-button size="small" text type="info" v-auth="'del'" @click="onRowDel(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <template v-else>
 
         <!-- 运行日志 -->
-        <el-tab-pane label="运行日志" name="3" class="runMessage">
-          <!-- 运行日志 -->
-          <div v-for="line in topMsg" :key="line" class="error-line">{{ line }}</div>
-          <div v-if="runButtonShow" v-loading="runLoading" v-for="line in runMessage" :key="line" class="error-line">{{ line }}</div>
-          <div v-else class="error-line">暂无数据</div>
-
-          <div class="run-button" v-if="runButtonShow">
-            <el-button size="small" text type="warning" v-auth="'download'" @click="down">下载</el-button>
-            <el-button size="small" text type="danger" v-auth="'del'" @click="onRowDel">删除</el-button>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
+        <div v-for="line in topMsg" :key="line" class="error-line">{{ line }}</div>
+        <div v-if="runButtonShow" v-loading="runLoading" v-for="line in runMessage" :key="line" class="error-line">{{ line }}</div>
+        <div v-else class="error-line">暂无数据</div>
+        <div class="run-button" v-if="runButtonShow">
+          <el-button size="small" text type="warning" v-auth="'download'" @click="down">下载</el-button>
+          <el-button size="small" text type="danger" v-auth="'del'" @click="onRowDel">删除</el-button>
+        </div>
+      </template>
+
+      <el-dialog v-model="dialogVisible" title="查看详情">
+        <div v-for="line in topMsg" :key="line" class="error-line">{{ line }}</div>
+        <div v-for="line in errorMessage" :key="line" class="error-line">{{ line }}</div>
+      </el-dialog>
+      <el-dialog v-model="dialogVisible" title="查看详情">
+        <div v-for="line in topMsg" :key="line" class="error-line">{{ line }}</div>
+        <div v-for="line in errorMessage" :key="line" class="error-line">{{ line }}</div>
+      </el-dialog>
+    </el-card>
   </div>
 </template>
 
 <script lang="ts" setup>
 import api from '/@/api/system';
-import {useSearch} from '/@/hooks/useCommon';
+import { useSearch } from '/@/hooks/useCommon';
 import getOrigin from '/@/utils/origin'
 import downloadFile from '/@/utils/download';
-import {ref, getCurrentInstance, nextTick, onMounted} from 'vue';
-import {ElMessage, ElMessageBox} from "element-plus";
+import { ref, getCurrentInstance, nextTick, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from "element-plus";
 
 const dialogVisible = ref(false);
 const errorMessage = ref([]);
 const runMessage = ref([]);
 const topMsg = ref([]);
-const activeName = '1';
+const activeName = ref('1');
 const types = ref('service');
 const runLoading = ref(false);
-const { proxy } = getCurrentInstance() as any;
 const isScrolling = ref(false);
 const chatContent: any = ref(null);
 const runButtonShow = ref(false);
 const runLogName = ref('');
 
-const {params, tableData, getList, loading} = useSearch<any[]>(api.lastLinesLog.getList, 'list', {types: types.value});
+const { params, tableData, getList, loading } = useSearch<any[]>(api.lastLinesLog.getList, 'list', { types: types.value });
 
 getList();
 
@@ -117,16 +104,16 @@ const view = (row: any) => {
     row.name = row.value;
   }
   const es = new EventSource(getOrigin(import.meta.env.VITE_SERVER_URL + "/subscribe/logInfo?name=" + row.name + '&types=' + types.value));
-  es.addEventListener('log', ({data}) => {
+  es.addEventListener('log', ({ data }) => {
     topMsg.value.unshift(data);
   });
-  api.lastLinesLog.detail({name: row.name, types: types.value}).then((res: any) => {
+  api.lastLinesLog.detail({ name: row.name, types: types.value }).then((res: any) => {
     if (types.value == 'run') {
-        runMessage.value = res.list;
-        runLoading.value = false;
-        if (res.list.length > 0) {
-          runButtonShow.value = true;
-        }
+      runMessage.value = res.list;
+      runLoading.value = false;
+      if (res.list.length > 0) {
+        runButtonShow.value = true;
+      }
     } else {
       errorMessage.value = res.list;
       dialogVisible.value = true;
@@ -137,7 +124,7 @@ const down = (row: any) => {
   if (types.value == 'run') {
     row.name = runLogName.value
   }
-  api.lastLinesLog.down({name: row.name, types: types.value}).then((res: any) => downloadFile(res, types.value +"-"+ row.name))
+  api.lastLinesLog.down({ name: row.name, types: types.value }).then((res: any) => downloadFile(res, types.value + "-" + row.name))
 };
 
 const onRowDel = (row: any) => {
@@ -150,7 +137,7 @@ const onRowDel = (row: any) => {
     cancelButtonText: '取消',
     type: 'warning',
   }).then(() => {
-    api.lastLinesLog.delete({name: row.name, types: types.value}).then(() => {
+    api.lastLinesLog.delete({ name: row.name, types: types.value }).then(() => {
       params.types = types.value;
       if (types.value == 'run') {
         runButtonShow.value = false;
@@ -188,23 +175,24 @@ const handleClick = (tab: any, event: Event) => {
   bottom: 50px;
   right: 80px;
 }
+
 .runMessage {
   height: 500px;
 }
+
 .content-box {
   width: 100%;
   padding: 5px 20px 20px 20px;
 }
+
 .error-line {
-  white-space: pre-line; /* 保留换行符 */
+  white-space: pre-line;
+  /* 保留换行符 */
 }
+
 .el-tabs--card {
   height: calc(100vh - 110px);
   overflow-y: auto;
 }
-.el-tab-pane {
-  position: relative;
-  height: calc(100vh - 110px);
-  overflow-y: auto;
-}
+
 </style>

src/views/system/monitor/loginLog/index.vue

@@ -1,69 +1,67 @@
 <template>
-  <div class="system-dic-container">
+  <div class="page">
     <el-card shadow="nover">
-      <div class="system-user-search mb15">
-        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
-          <el-form-item label="登录IP" prop="ipaddr">
-            <el-input v-model="tableData.param.ipaddr" placeholder="请输入登录地址" clearable style="width: 180px" size="default" @keyup.enter.native="dataList" />
-          </el-form-item>
+      <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
+        <el-form-item label="登录IP" prop="ipaddr">
+          <el-input v-model="tableData.param.ipaddr" placeholder="请输入登录地址" clearable style="width: 180px" size="default" @keyup.enter.native="dataList" />
+        </el-form-item>
 
-          <el-form-item label="登录地点" prop="loginLocation">
-            <el-input v-model="tableData.param.loginLocation" placeholder="请输入登录地点" clearable style="width: 180px" size="default" @keyup.enter.native="dataList" />
-          </el-form-item>
+        <el-form-item label="登录地点" prop="loginLocation">
+          <el-input v-model="tableData.param.loginLocation" placeholder="请输入登录地点" clearable style="width: 180px" size="default" @keyup.enter.native="dataList" />
+        </el-form-item>
 
-          <!-- <el-form-item label="用户名称" prop="userName">
+        <!-- <el-form-item label="用户名称" prop="userName">
             <el-input v-model="tableData.param.userName" placeholder="请输入用户名称" clearable style="width: 180px;" size="default" @keyup.enter.native="dataList" />
           </el-form-item> -->
 
-          <el-form-item label="状态" prop="status">
-            <el-select v-model="tableData.param.status" placeholder="登录状态" size="default" style="width: 180px">
-              <el-option label="全部" :value="-1" />
-              <el-option label="成功" :value="1" />
-              <el-option label="失败" :value="0" />
-            </el-select>
-          </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="tableData.param.status" placeholder="登录状态" size="default" style="width: 180px">
+            <el-option label="全部" :value="-1" />
+            <el-option label="成功" :value="1" />
+            <el-option label="失败" :value="0" />
+          </el-select>
+        </el-form-item>
 
-          <el-form-item label="登录时间" prop="dateRange">
-            <el-date-picker v-model="tableData.param.dateRange" size="default" 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 size="default" type="primary" class="ml10" @click="dataList">
-              <el-icon>
-                <ele-Search />
-              </el-icon>
-              查询
-            </el-button>
-            <el-button size="default" @click="resetQuery(queryRef)">
-              <el-icon>
-                <ele-Refresh />
-              </el-icon>
-              重置
-            </el-button>
-            <el-button size="default" type="info" class="ml10" @click="onRowDel(null)" v-auth="'del'">
-              <el-icon>
-                <ele-Delete />
-              </el-icon>
-              删除日志
-            </el-button>
+        <el-form-item label="登录时间" prop="dateRange">
+          <el-date-picker v-model="tableData.param.dateRange" size="default" 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 size="default" type="primary" class="ml10" @click="dataList">
+            <el-icon>
+              <ele-Search />
+            </el-icon>
+            查询
+          </el-button>
+          <el-button size="default" @click="resetQuery(queryRef)">
+            <el-icon>
+              <ele-Refresh />
+            </el-icon>
+            重置
+          </el-button>
+          <el-button size="default" type="info" class="ml10" @click="onRowDel(null)" v-auth="'del'">
+            <el-icon>
+              <ele-Delete />
+            </el-icon>
+            删除日志
+          </el-button>
 
-            <el-button size="default" type="primary" class="ml10" @click="onRowExport()">
-              <el-icon>
-                <ele-Download />
-              </el-icon>
-              导出日志
-            </el-button>
-            <!--<el-button size="default" type="info" class="ml10" @click="onRowClear()">
+          <el-button size="default" type="primary" class="ml10" @click="onRowExport()">
+            <el-icon>
+              <ele-Download />
+            </el-icon>
+            导出日志
+          </el-button>
+          <!--<el-button size="default" type="info" class="ml10" @click="onRowClear()">
               <el-icon>
                 <ele-Delete />
               </el-icon>
               清空日志
             </el-button> -->
-          </el-form-item>
-        </el-form>
-      </div>
+        </el-form-item>
+      </el-form>
       <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="编号" align="center" width="60" prop="infoId" />
+        <el-table-column label="编号" align="center" width="100" prop="infoId" />
         <el-table-column label="登录名称" align="center" prop="loginName" />
         <el-table-column label="登录地址" align="center" prop="ipaddr" width="150" show-overflow-tooltip />
         <el-table-column label="登录地点" v-col="'loginLocation'" align="center" prop="loginLocation" show-overflow-tooltip />
@@ -75,7 +73,7 @@
             <el-tag type="info" size="small" v-else>失败</el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="操作信息" v-col="'msg'" show-overflow-tooltip prop="msg" />
+        <el-table-column label="操作信息" v-col="'msg'" show-overflow-tooltip prop="msg" align="center" />
         <el-table-column label="登录日期" v-col="'loginTime'" align="center" prop="loginTime" width="180" />
         <el-table-column label="登录模块" v-col="'module'" align="center" show-overflow-tooltip prop="module" width="120"></el-table-column>
       </el-table>

src/views/system/monitor/online/index.vue

@@ -1,40 +1,37 @@
 <template>
-	<div class="system-dic-container">
+	<div class="page">
 		<el-card shadow="nover">
-			<div class="system-user-search mb15" v-if="false">
-				<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
-					<el-form-item label="登录时间" prop="dateRange">
-						<el-date-picker v-model="tableData.param.dateRange" size="default" style="width: 240px" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-					</el-form-item>
+			<el-form :model="tableData.param" v-if="false" ref="queryRef" :inline="true" label-width="68px">
+				<el-form-item label="登录时间" prop="dateRange">
+					<el-date-picker v-model="tableData.param.dateRange" size="default" 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 size="default" type="primary" class="ml10" @click="dataList">
-							<el-icon>
-								<ele-Search />
-							</el-icon>
-							查询
-						</el-button>
-						<el-button size="default" @click="resetQuery(queryRef)">
-							<el-icon>
-								<ele-Refresh />
-							</el-icon>
-							重置
-						</el-button>
-					</el-form-item>
-				</el-form>
-			</div>
+				<el-form-item>
+					<el-button size="default" type="primary" class="ml10" @click="dataList">
+						<el-icon>
+							<ele-Search />
+						</el-icon>
+						查询
+					</el-button>
+					<el-button size="default" @click="resetQuery(queryRef)">
+						<el-icon>
+							<ele-Refresh />
+						</el-icon>
+						重置
+					</el-button>
+				</el-form-item>
+			</el-form>
 			<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
-				<el-table-column type="selection" width="55" align="center" />
-				<el-table-column label="编号" align="center" width="60" prop="id" />
-				<el-table-column label="用户名" v-col="'userName'" align="center" prop="userName" />
+				<el-table-column label="编号" align="center" width="100" prop="id" />
+				<el-table-column label="用户名" v-col="'userName'" width="100" align="center" prop="userName" />
 				<el-table-column label="token" align="center" prop="token" show-overflow-tooltip />
-				<el-table-column label="登录地址" v-col="'ip'" align="center" prop="ip" show-overflow-tooltip />
-				<el-table-column label="登录时间" align="createdAt" prop="createdAt" show-overflow-tooltip />
+				<el-table-column label="登录地址" v-col="'ip'" align="center" prop="ip" width="160" />
+				<el-table-column label="登录时间" align="center" prop="createdAt" width="160" />
 				<el-table-column label="浏览器" align="center" prop="explorer" />
 				<el-table-column label="操作系统" v-col="'os'" show-overflow-tooltip align="center" prop="os" />
-				<el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-col="'handle'">
+				<el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-col="'handle'" width="100" >
 					<template #default="scope">
-						<el-button size="mini" type="text" @click="handleForceLogout(scope.row)" v-auth="'out'">强退</el-button>
+						<el-button  type="text" @click="handleForceLogout(scope.row)" v-auth="'out'">强退</el-button>
 					</template>
 				</el-table-column>
 			</el-table>

src/views/system/monitor/operLog/index.vue

@@ -1,64 +1,62 @@
 <template>
-  <div class="system-dic-container">
+  <div class="page">
     <el-card shadow="nover">
-      <div class="system-user-search mb15">
-        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
-          <el-form-item label="系统模块" prop="title">
-            <el-input v-model="tableData.param.title" placeholder="请输入系统模块" clearable style="width: 180px" size="default" @keyup.enter="dataList" />
-          </el-form-item>
+      <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
+        <el-form-item label="系统模块" prop="title">
+          <el-input v-model="tableData.param.title" placeholder="请输入系统模块" clearable style="width: 180px" size="default" @keyup.enter="dataList" />
+        </el-form-item>
 
-          <el-form-item label="操作人员" prop="operName">
-            <el-input v-model="tableData.param.operName" placeholder="请输入操作人员" clearable style="width: 180px" size="default" @keyup.enter="dataList" />
-          </el-form-item>
+        <el-form-item label="操作人员" prop="operName">
+          <el-input v-model="tableData.param.operName" placeholder="请输入操作人员" clearable style="width: 180px" size="default" @keyup.enter="dataList" />
+        </el-form-item>
 
-          <el-form-item label="业务类型" prop="businessType">
-            <el-select v-model="tableData.param.businessType" placeholder="请选择类型" clearable size="default" style="width: 180px">
-              <el-option label="新增" :value="1" />
-              <el-option label="修改" :value="2" />
-              <el-option label="删除" :value="3" />
-              <el-option label="其它" :value="0" />
-            </el-select>
-          </el-form-item>
+        <el-form-item label="业务类型" prop="businessType">
+          <el-select v-model="tableData.param.businessType" placeholder="请选择类型" clearable size="default" style="width: 180px">
+            <el-option label="新增" :value="1" />
+            <el-option label="修改" :value="2" />
+            <el-option label="删除" :value="3" />
+            <el-option label="其它" :value="0" />
+          </el-select>
+        </el-form-item>
 
-          <el-form-item label="状态" prop="status">
-            <el-select v-model="tableData.param.status" placeholder="请选择状态" size="default" style="width: 180px">
-              <el-option label="全部" :value="-1" />
-              <el-option label="正常" :value="1" />
-              <el-option label="异常" :value="0" />
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button size="default" type="primary" class="ml10" @click="dataList">
-              <el-icon>
-                <ele-Search />
-              </el-icon>
-              查询
-            </el-button>
-            <el-button size="default" @click="resetQuery(queryRef)">
-              <el-icon>
-                <ele-Refresh />
-              </el-icon>
-              重置
-            </el-button>
-            <el-button size="default" type="info" class="ml10" @click="onRowDel(null)" v-auth="'del'">
-              <el-icon>
-                <ele-Delete />
-              </el-icon>
-              删除日志
-            </el-button>
-            <!-- <el-button size="default" type="info" class="ml10" @click="onRowClear()">
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="tableData.param.status" placeholder="请选择状态" size="default" style="width: 180px">
+            <el-option label="全部" :value="-1" />
+            <el-option label="正常" :value="1" />
+            <el-option label="异常" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button size="default" type="primary" class="ml10" @click="dataList">
+            <el-icon>
+              <ele-Search />
+            </el-icon>
+            查询
+          </el-button>
+          <el-button size="default" @click="resetQuery(queryRef)">
+            <el-icon>
+              <ele-Refresh />
+            </el-icon>
+            重置
+          </el-button>
+          <el-button size="default" type="info" class="ml10" @click="onRowDel(null)" v-auth="'del'">
+            <el-icon>
+              <ele-Delete />
+            </el-icon>
+            删除日志
+          </el-button>
+          <!-- <el-button size="default" type="info" class="ml10" @click="onRowClear()">
               <el-icon>
                 <ele-Delete />
               </el-icon>
               清空日志
             </el-button> -->
-          </el-form-item>
-        </el-form>
-      </div>
+        </el-form-item>
+      </el-form>
       <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="编号" align="center" width="80" prop="operId" />
-        <el-table-column label="系统模块" align="center" prop="title" />
+        <el-table-column label="编号" align="center" width="100" prop="operId" />
+        <el-table-column label="系统模块" align="center" prop="title" min-width="120" show-overflow-tooltip />
         <el-table-column label="业务类型" align="center" prop="businessType" width="130">
           <template #default="scope">
             <span size="small" v-if="scope.row.businessType === 0">其他</span>
@@ -76,9 +74,9 @@
         </el-table-column>
         <el-table-column label="操作人员" v-col="'operName'" align="center" prop="operName" show-overflow-tooltip />
         <el-table-column label="组织名称" align="center" prop="deptName" />
-        <el-table-column label="主机" show-overflow-tooltip align="center" prop="operIp" />
-        <el-table-column label="操作地点" v-col="'operLocation'" show-overflow-tooltip align="center" prop="operLocation" />
-        <el-table-column label="操作时间" v-col="'operTime'" show-overflow-tooltip align="center" prop="operTime" />
+        <el-table-column label="主机" show-overflow-tooltip align="center" prop="operIp" width="160" />
+        <el-table-column label="操作地点" v-col="'operLocation'" show-overflow-tooltip align="center" prop="operLocation" width="130" />
+        <el-table-column label="操作时间" v-col="'operTime'" align="center" prop="operTime" width="160" />
         <el-table-column label="操作状态" v-col="'status'" align="center" prop="status" width="100">
           <template #default="scope">
             <el-tag type="success" size="small" v-if="scope.row.status === 1">正常</el-tag>
@@ -87,7 +85,7 @@
           </template>
         </el-table-column>
         <!-- <el-table-column label="操作信息" show-overflow-tooltip prop="msg" /> -->
-        <el-table-column label="操作" v-col="'handle'" width="100" align="center" fixed="right">
+        <el-table-column label="操作" v-col="'handle'" width="80" align="center" fixed="right">
           <template #default="scope">
             <el-button size="small" type="text" @click="onOpenDetail(scope.row)" v-auth="'detail'">详细</el-button>
           </template>

src/views/system/monitor/server/index.vue

@@ -1,166 +1,160 @@
 <template>
-  <div class="system-user-container" v-loading="loading">
-    <div class="flex-row gap-3">
-      <el-col :xs="24" :sm="12" :md="8" class="marg-b-15">
-        <el-card class="box-card-meter">
-          <div class="el-table--enable-row-hover el-table--medium">
-            <el-row :gutter="30">
-              <el-col :xs="24" :sm="24" :md="12">
-                <table cellspacing="0" style="width: 100%">
-                  <tbody>
-                    <tr>
-                      <td>
-                        <div class="cell-card">CPU数: </div>
-                      </td>
-                      <td>
-                        <div class="cell-card">{{ sysInfo.cpuNum }}</div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell-card">核心数: </div>
-                      </td>
-                      <td>
-                        <div class="cell-card">{{ sysInfo.cpuCores }}</div>
-                      </td>
-                    </tr>
-
-                    <tr>
-                      <td>
-                        <div class="cell-card">使用率:</div>
-                      </td>
-                      <td>
-                        <div class="cell-card">{{ sysInfo.cpuUsed }}%</div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell-card">LA5:</div>
-                      </td>
-                      <td>
-                        <div class="cell-card">{{ sysInfo.cpuAvg5 }}%</div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell-card">LA15:</div>
-                      </td>
-                      <td>
-                        <div class="cell-card">{{ sysInfo.cpuAvg15 }}%</div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </el-col>
-              <el-col :xs="24" :sm="24" :md="12">
-                <div style="min-height: 180px" ref="chartsWarningRef1"></div>
-              </el-col>
-            </el-row>
-          </div>
+  <div class="page" v-loading="loading">
+    <el-row :gutter="15">
+      <el-col :xs="24" :sm="12" :md="8" class="mb-4">
+        <el-card shadow="nover" class="box-card-meter">
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="24" :md="12">
+              <table cellspacing="0" style="width: 100%">
+                <tbody>
+                  <tr>
+                    <td>
+                      <div class="cell-card">CPU数: </div>
+                    </td>
+                    <td>
+                      <div class="cell-card">{{ sysInfo.cpuNum }}</div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <div class="cell-card">核心数: </div>
+                    </td>
+                    <td>
+                      <div class="cell-card">{{ sysInfo.cpuCores }}</div>
+                    </td>
+                  </tr>
+
+                  <tr>
+                    <td>
+                      <div class="cell-card">使用率:</div>
+                    </td>
+                    <td>
+                      <div class="cell-card">{{ sysInfo.cpuUsed }}%</div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <div class="cell-card">LA5:</div>
+                    </td>
+                    <td>
+                      <div class="cell-card">{{ sysInfo.cpuAvg5 }}%</div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <div class="cell-card">LA15:</div>
+                    </td>
+                    <td>
+                      <div class="cell-card">{{ sysInfo.cpuAvg15 }}%</div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12">
+              <div style="min-height: 180px" ref="chartsWarningRef1"></div>
+            </el-col>
+          </el-row>
         </el-card>
       </el-col>
-      <el-col :xs="24" :sm="12" :md="8" class="marg-b-15">
-        <el-card class="box-card-meter">
-          <div class="el-table--enable-row-hover el-table--medium">
-            <el-row :gutter="30">
-              <el-col :xs="24" :sm="24" :md="12">
-                <table cellspacing="0" style="width: 100%">
-                  <tbody>
-                    <tr>
-                      <td>
-                        <div class="cell-card">内存总数:</div>
-                      </td>
-                      <td>
-                        <div class="cell-card">{{ memorySizeFormat(sysInfo.memTotal) }}</div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell-card">已使用:</div>
-                      </td>
-                      <td>
-                        <div class="cell-card">{{ memorySizeFormat(sysInfo.memUsed) }}</div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell-card">剩余:</div>
-                      </td>
-                      <td>
-                        <div class="cell-card">{{ memorySizeFormat(sysInfo.available) }}</div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell-card">系统使用:</div>
-                      </td>
-                      <td>
-                        <div class="cell-card">{{ memorySizeFormat(sysInfo.goUsed) }}</div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell-card">使用率:</div>
-                      </td>
-                      <td>
-                        <div class="cell-card">{{ sysInfo.memUsage }}%</div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </el-col>
-              <el-col :xs="24" :sm="24" :md="12">
-                <div style="min-height: 180px" ref="chartsWarningRef2"></div>
-              </el-col>
-            </el-row>
-          </div>
+      <el-col :xs="24" :sm="12" :md="8" class="mb-4">
+        <el-card shadow="nover" class="box-card-meter">
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="24" :md="12">
+              <table cellspacing="0" style="width: 100%">
+                <tbody>
+                  <tr>
+                    <td>
+                      <div class="cell-card">内存总数:</div>
+                    </td>
+                    <td>
+                      <div class="cell-card">{{ memorySizeFormat(sysInfo.memTotal) }}</div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <div class="cell-card">已使用:</div>
+                    </td>
+                    <td>
+                      <div class="cell-card">{{ memorySizeFormat(sysInfo.memUsed) }}</div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <div class="cell-card">剩余:</div>
+                    </td>
+                    <td>
+                      <div class="cell-card">{{ memorySizeFormat(sysInfo.available) }}</div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <div class="cell-card">系统使用:</div>
+                    </td>
+                    <td>
+                      <div class="cell-card">{{ memorySizeFormat(sysInfo.goUsed) }}</div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <div class="cell-card">使用率:</div>
+                    </td>
+                    <td>
+                      <div class="cell-card">{{ sysInfo.memUsage }}%</div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12">
+              <div style="min-height: 180px" ref="chartsWarningRef2"></div>
+            </el-col>
+          </el-row>
         </el-card>
       </el-col>
-      <el-col :xs="24" :sm="12" :md="8" class="marg-b-15">
-        <el-card class="box-card-meter">
-          <div class="el-table--enable-row-hover el-table--medium">
-            <el-row :gutter="30">
-              <el-col :xs="24" :sm="24" :md="12">
-                <table cellspacing="0" style="width: 100%">
-                  <tbody>
-                    <tr>
-                      <td>
-                        <div class="cell-card">磁盘容量:</div>
-                      </td>
-                      <td>
-                        <div class="cell-card">{{ memorySizeFormat(sysInfo.diskTotal) }}</div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell-card">已使用:</div>
-                      </td>
-                      <td>
-                        <div class="cell-card">{{ memorySizeFormat(sysInfo.diskUsed) }}</div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell-card">使用率:</div>
-                      </td>
-                      <td>
-                        <div class="cell-card">{{ sysInfo.diskUsedPercent }}%</div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </el-col>
-              <el-col :xs="24" :sm="24" :md="12">
-                <div style="min-height: 180px" ref="chartsWarningRef3"></div>
-              </el-col>
-            </el-row>
-          </div>
+      <el-col :xs="24" :sm="12" :md="8" class="mb-4">
+        <el-card shadow="nover" class="box-card-meter">
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="24" :md="12">
+              <table cellspacing="0" style="width: 100%">
+                <tbody>
+                  <tr>
+                    <td>
+                      <div class="cell-card">磁盘容量:</div>
+                    </td>
+                    <td>
+                      <div class="cell-card">{{ memorySizeFormat(sysInfo.diskTotal) }}</div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <div class="cell-card">已使用:</div>
+                    </td>
+                    <td>
+                      <div class="cell-card">{{ memorySizeFormat(sysInfo.diskUsed) }}</div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <div class="cell-card">使用率:</div>
+                    </td>
+                    <td>
+                      <div class="cell-card">{{ sysInfo.diskUsedPercent }}%</div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="12">
+              <div style="min-height: 180px" ref="chartsWarningRef3"></div>
+            </el-col>
+          </el-row>
         </el-card>
       </el-col>
-    </div>
-    <div class="flex-row gap-3">
-      <el-col :xs="24" :sm="12" :md="8" class="marg-b-15">
-        <el-card class="box-card-height" style="height:auto">
+    </el-row>
+    <el-row :gutter="15">
+      <el-col :xs="24" :sm="12" :md="8" class="mb-4">
+        <el-card shadow="nover" class="box-card-height" style="height:auto">
           <template #header>
             <div class="card-header">
               <span>CPU运行情况</span>
@@ -169,8 +163,8 @@
           <div style="height: 250px" ref="chartsWarningRef4"></div>
         </el-card>
       </el-col>
-      <el-col :xs="24" :sm="12" :md="8" class="marg-b-15">
-        <el-card class="box-card-height" style="height:auto">
+      <el-col :xs="24" :sm="12" :md="8" class="mb-4">
+        <el-card shadow="nover" class="box-card-height" style="height:auto">
           <template #header>
             <div class="card-header">
               <span>内存运行情况</span>
@@ -179,8 +173,8 @@
           <div style="height: 250px" ref="chartsWarningRef5"></div>
         </el-card>
       </el-col>
-      <el-col :xs="24" :sm="12" :md="8" class="marg-b-15">
-        <el-card class="box-card-height" style="height:auto">
+      <el-col :xs="24" :sm="12" :md="8" class="mb-4">
+        <el-card shadow="nover" class="box-card-height" style="height:auto">
           <template #header>
             <div class="card-header">
               <span>磁盘使用情况</span>
@@ -189,10 +183,10 @@
           <div style="height: 250px" ref="chartsWarningRef6"></div>
         </el-card>
       </el-col>
-    </div>
-    <div class="flex-row gap-3">
-      <el-col :xs="24" :sm="24" :md="24" class="marg-b-15">
-        <el-card class="box-card-height" style="height:auto">
+    </el-row>
+    <div class="flex-row gap-2">
+      <el-col :xs="24" :sm="24" :md="24">
+        <el-card shadow="nover" class="box-card-height" style="height:auto">
           <template #header>
             <div class="card-header">
               <span>运行环境信息</span>
@@ -852,7 +846,7 @@ export default defineComponent({
   overflow-y: auto;
 }
 
-.marg-b-15 {
+.mb-4 {
   margin-bottom: 15px;
 }
 
@@ -882,7 +876,6 @@ export default defineComponent({
 
 .box-card-meter {
   height: 230px;
-
   min-height: 180px;
 }
 </style>