fix(列表): 样式优化

vue/src/views/iot/netty/clients.vue

@@ -15,8 +15,8 @@
             </el-form>
         </el-card>
 
-        <el-card style="padding-bottom:100px;">
-            <el-table v-loading="loading" :data="clientList">
+        <el-card style="padding-bottom: 100px">
+            <el-table v-loading="loading" :data="clientList" :border="false">
                 <el-table-column :label="$t('netty.clients.654908-4')" align="left" header-align="center" prop="clientId">
                     <template slot-scope="scope">
                         <el-link :underline="false" type="primary" @click.native="handleOpen(scope.row)">{{ scope.row.clientId }}</el-link>

vue/src/views/monitor/job/index.vue

@@ -1,5 +1,7 @@
 <template>
     <div class="app-container">
+        <!-- 搜索栏 - 上栏 -->
+        <el-card shadow="never" class="search-card">
             <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
                 <el-form-item :label="$t('system.job.356378-0')" prop="jobName">
                     <el-input v-model="queryParams.jobName" :placeholder="$t('system.job.356378-1')" clearable @keyup.enter.native="handleQuery" />
@@ -19,8 +21,11 @@
                     <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
                 </el-form-item>
             </el-form>
+        </el-card>
 
-        <el-row :gutter="10" class="mb8">
+        <!-- 操作按钮和数据表格 - 下栏 -->
+        <el-card shadow="never" class="table-card">
+            <el-row :gutter="10" style="margin-bottom: 15px">
                 <el-col :span="1.5">
                     <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['monitor:job:add']">{{ $t('add') }}</el-button>
                 </el-col>
@@ -39,7 +44,7 @@
                 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
             </el-row>
 
-        <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange" :border="false">
+            <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange" :border="false" header-cell-class-name="table-header">
                 <el-table-column type="selection" width="55" align="center" />
                 <el-table-column :label="$t('system.job.356378-7')" width="100" align="center" prop="jobId" />
                 <el-table-column :label="$t('system.job.356378-0')" align="center" prop="jobName" :show-overflow-tooltip="true" />
@@ -71,7 +76,9 @@
                 </el-table-column>
             </el-table>
 
+            <div class="pagination-container">
                 <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+            </div>
 
             <!-- 添加或修改定时任务对话框 -->
             <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
@@ -202,6 +209,7 @@
                     <el-button @click="openView = false">{{ $t('close') }}</el-button>
                 </div>
             </el-dialog>
+        </el-card>
     </div>
 </template>
 
@@ -436,3 +444,62 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.app-container {
+    padding: 20px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
+
+.search-card {
+    margin-bottom: 15px;
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px 18px 0 18px;
+    }
+}
+
+.table-card {
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px;
+    }
+}
+
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+        text-align: center;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+
+    .el-table__body tr:hover > td {
+        background-color: #f5f7fa !important;
+    }
+}
+
+::v-deep .el-pagination {
+    padding: 0;
+    text-align: right;
+}
+
+::v-deep .el-button--small {
+    padding: 8px 15px;
+    font-size: 13px;
+}
+</style>

vue/src/views/monitor/logininfor/index.vue

@@ -1,37 +1,16 @@
 <template>
     <div class="app-container">
+        <el-card shadow="never" class="search-card">
             <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
                 <el-form-item :label="$t('monitor.logininfor.670912-0')" prop="ipaddr">
-        <el-input
-          v-model="queryParams.ipaddr"
-          :placeholder="$t('monitor.logininfor.670912-1')"
-          clearable
-          style="width: 240px;"
-          @keyup.enter.native="handleQuery"
-        />
+                    <el-input v-model="queryParams.ipaddr" :placeholder="$t('monitor.logininfor.670912-1')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
                 </el-form-item>
                 <el-form-item :label="$t('monitor.logininfor.670912-2')" prop="userName">
-        <el-input
-          v-model="queryParams.userName"
-          :placeholder="$t('monitor.logininfor.670912-3')"
-          clearable
-          style="width: 240px;"
-          @keyup.enter.native="handleQuery"
-        />
+                    <el-input v-model="queryParams.userName" :placeholder="$t('monitor.logininfor.670912-3')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
                 </el-form-item>
                 <el-form-item :label="$t('monitor.logininfor.670912-4')" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          :placeholder="$t('monitor.logininfor.670912-5')"
-          clearable
-          style="width: 240px"
-        >
-          <el-option
-            v-for="dict in dict.type.sys_common_status"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
+                    <el-select v-model="queryParams.status" :placeholder="$t('monitor.logininfor.670912-5')" clearable style="width: 240px">
+                        <el-option v-for="dict in dict.type.sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />
                     </el-select>
                 </el-form-item>
                 <el-form-item :label="$t('monitor.logininfor.670912-6')">
@@ -53,51 +32,32 @@
 
             <el-row :gutter="10" class="mb8">
                 <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="small"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['monitor:logininfor:remove']"
-        >{{ $t('del') }}</el-button>
+                    <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:logininfor:remove']">{{ $t('del') }}</el-button>
                 </el-col>
                 <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="small"
-          @click="handleClean"
-          v-hasPermi="['monitor:logininfor:remove']"
-        >{{ $t('clean') }}</el-button>
+                    <el-button type="danger" plain icon="el-icon-delete" size="small" @click="handleClean" v-hasPermi="['monitor:logininfor:remove']">{{ $t('clean') }}</el-button>
                 </el-col>
                 <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-unlock"
-          size="small"
-          :disabled="single"
-          @click="handleUnlock"
-          v-hasPermi="['monitor:logininfor:unlock']"
-        >{{ $t('monitor.logininfor.670912-9') }}</el-button>
+                    <el-button type="primary" plain icon="el-icon-unlock" size="small" :disabled="single" @click="handleUnlock" v-hasPermi="['monitor:logininfor:unlock']">
+                        {{ $t('monitor.logininfor.670912-9') }}
+                    </el-button>
                 </el-col>
                 <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="small"
-          @click="handleExport"
-          v-hasPermi="['monitor:logininfor:export']"
-        >{{ $t('export') }}</el-button>
+                    <el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['monitor:logininfor:export']">{{ $t('export') }}</el-button>
                 </el-col>
                 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
             </el-row>
 
-    <el-table ref="tables" v-loading="loading" :data="list" :border="false" header-cell-class-name="table-header" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+            <el-table
+                ref="tables"
+                v-loading="loading"
+                :data="list"
+                :border="false"
+                header-cell-class-name="table-header"
+                @selection-change="handleSelectionChange"
+                :default-sort="defaultSort"
+                @sort-change="handleSortChange"
+            >
                 <el-table-column type="selection" width="55" align="center" />
                 <el-table-column :label="$t('monitor.logininfor.670912-10')" align="center" prop="infoId" />
                 <el-table-column :label="$t('monitor.logininfor.670912-2')" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
@@ -107,7 +67,7 @@
                 <el-table-column :label="$t('monitor.logininfor.670912-13')" align="center" prop="os" />
                 <el-table-column :label="$t('monitor.logininfor.670912-4')" align="center" prop="status">
                     <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
+                        <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status" />
                     </template>
                 </el-table-column>
                 <el-table-column :label="$t('monitor.logininfor.670912-14')" align="center" prop="msg" />
@@ -118,21 +78,16 @@
                 </el-table-column>
             </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+        </el-card>
     </div>
 </template>
 
 <script>
-import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from "@/api/monitor/logininfor";
+import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from '@/api/monitor/logininfor';
 
 export default {
-  name: "Logininfor",
+    name: 'Logininfor',
     dicts: ['sys_common_status'],
     data() {
         return {
@@ -145,7 +100,7 @@ export default {
             // 非多个禁用
             multiple: true,
             // 选择用户名
-      selectName: "",
+            selectName: '',
             // 显示搜索条件
             showSearch: true,
             // 总条数
@@ -155,15 +110,15 @@ export default {
             // 日期范围
             dateRange: [],
             // 默认排序
-      defaultSort: {prop: 'loginTime', order: 'descending'},
+            defaultSort: { prop: 'loginTime', order: 'descending' },
             // 查询参数
             queryParams: {
                 pageNum: 1,
                 pageSize: 10,
                 ipaddr: undefined,
                 userName: undefined,
-        status: undefined
-      }
+                status: undefined,
+            },
         };
     },
     created() {
@@ -173,12 +128,11 @@ export default {
         /** 查询登录日志列表 */
         getList() {
             this.loading = true;
-      list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+            list(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
                 this.list = response.rows;
                 this.total = response.total;
                 this.loading = false;
-        }
-      );
+            });
         },
         /** 搜索按钮操作 */
         handleQuery() {
@@ -188,16 +142,16 @@ export default {
         /** 重置按钮操作 */
         resetQuery() {
             this.dateRange = [];
-      this.resetForm("queryForm");
+            this.resetForm('queryForm');
             this.queryParams.pageNum = 1;
-      this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
+            this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order);
         },
         /** 多选框选中数据 */
         handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.infoId)
-      this.single = selection.length!=1
-      this.multiple = !selection.length
-      this.selectName = selection.map(item => item.userName);
+            this.ids = selection.map((item) => item.infoId);
+            this.single = selection.length != 1;
+            this.multiple = !selection.length;
+            this.selectName = selection.map((item) => item.userName);
         },
         /** 排序触发事件 */
         handleSortChange(column, prop, order) {
@@ -208,44 +162,57 @@ export default {
         /** 删除按钮操作 */
         handleDelete(row) {
             const infoIds = row.infoId || this.ids;
-      this.$modal.confirm(this.$t('monitor.logininfor.670912-15', [infoIds])).then(function() {
+            this.$modal
+                .confirm(this.$t('monitor.logininfor.670912-15', [infoIds]))
+                .then(function () {
                     return delLogininfor(infoIds);
-      }).then(() => {
+                })
+                .then(() => {
                     this.getList();
                     this.$modal.msgSuccess(this.$t('delSuccess'));
-      }).catch(() => {});
+                })
+                .catch(() => {});
         },
         /** 清空按钮操作 */
         handleClean() {
-      this.$modal.confirm(this.$t('monitor.logininfor.670912-16')).then(function() {
+            this.$modal
+                .confirm(this.$t('monitor.logininfor.670912-16'))
+                .then(function () {
                     return cleanLogininfor();
-      }).then(() => {
+                })
+                .then(() => {
                     this.getList();
                     this.$modal.msgSuccess(this.$t('cleanSuccess'));
-      }).catch(() => {});
+                })
+                .catch(() => {});
         },
         /** 解锁按钮操作 */
         handleUnlock() {
             const username = this.selectName;
-      this.$modal.confirm(this.$t('monitor.logininfor.670912-17', [username])).then(function() {
+            this.$modal
+                .confirm(this.$t('monitor.logininfor.670912-17', [username]))
+                .then(function () {
                     return unlockLogininfor(username);
-      }).then(() => {
+                })
+                .then(() => {
                     this.$modal.msgSuccess(this.$t('monitor.logininfor.670912-18', [username]));
-      }).catch(() => {});
+                })
+                .catch(() => {});
         },
         /** 导出按钮操作 */
         handleExport() {
-      this.download('monitor/logininfor/export', {
-        ...this.queryParams
-      }, `logininfor_${new Date().getTime()}.xlsx`)
-    }
-  }
+            this.download(
+                'monitor/logininfor/export',
+                {
+                    ...this.queryParams,
+                },
+                `logininfor_${new Date().getTime()}.xlsx`
+            );
+        },
+    },
 };
 </script>
 
-
-</script>
-
 <style lang="scss" scoped>
 .table-header {
     background-color: #f5f7fa !important;
@@ -282,4 +249,12 @@ export default {
     padding: 0;
     text-align: right;
 }
+.search-card {
+    margin-bottom: 15px;
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px 18px 0 18px;
+    }
+}
 </style>

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

@@ -1,5 +1,6 @@
 <template>
     <div class="app-container">
+        <el-card shadow="never" class="search-card">
             <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
                 <el-form-item :label="$t('online.093480-0')" prop="ipaddr">
                     <el-input v-model="queryParams.ipaddr" :placeholder="$t('online.093480-1')" clearable @keyup.enter.native="handleQuery" />
@@ -12,6 +13,8 @@
                     <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
                 </el-form-item>
             </el-form>
+        </el-card>
+        <el-card shadow="never" class="search-card">
             <el-table v-loading="loading" :data="list.slice((pageNum - 1) * pageSize, pageNum * pageSize)" style="width: 100%" :border="false">
                 <el-table-column :label="$t('online.093480-3')" type="index" align="center">
                     <template slot-scope="scope">
@@ -40,6 +43,7 @@
             <div class="pagination-container">
                 <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
             </div>
+        </el-card>
     </div>
 </template>
 
@@ -106,11 +110,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.table-header {
-    background-color: #f5f7fa !important;
-    color: #606266;
-    font-weight: 600;
-    text-align: center;
+.app-container {
+    padding: 20px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
 }
 
 ::v-deep .el-table {
@@ -141,4 +144,12 @@ export default {
     padding: 0;
     text-align: right;
 }
+.search-card {
+    margin-bottom: 15px;
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px 18px 0 18px;
+    }
+}
 </style>

vue/src/views/monitor/operlog/index.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="app-container">
+        <el-card shadow="never" class="search-card">
             <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
                 <el-form-item :label="$t('operlog.874509-10')" prop="operIp">
                     <el-input v-model="queryParams.operIp" :placeholder="$t('operlog.874509-10')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
@@ -37,7 +38,8 @@
                     <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
                 </el-form-item>
             </el-form>
-
+        </el-card>
+        <el-card shadow="never" class="search-card">
             <el-row :gutter="10" class="mb8">
                 <el-col :span="1.5">
                     <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:operlog:remove']">{{ $t('del') }}</el-button>
@@ -51,7 +53,16 @@
                 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
             </el-row>
 
-        <el-table ref="tables" v-loading="loading" :data="list" :border="false" header-cell-class-name="table-header" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+            <el-table
+                ref="tables"
+                v-loading="loading"
+                :data="list"
+                :border="false"
+                header-cell-class-name="table-header"
+                @selection-change="handleSelectionChange"
+                :default-sort="defaultSort"
+                @sort-change="handleSortChange"
+            >
                 <el-table-column type="selection" width="50" align="center" />
                 <el-table-column :label="$t('operlog.874509-8')" align="center" prop="operId" />
                 <el-table-column :label="$t('operlog.874509-0')" align="center" prop="title" :show-overflow-tooltip="true" />
@@ -131,6 +142,7 @@
                     <el-button @click="open = false">{{ $t('close') }}</el-button>
                 </div>
             </el-dialog>
+        </el-card>
     </div>
 </template>
 
@@ -260,8 +272,6 @@ export default {
 };
 </script>
 
-</script>
-
 <style lang="scss" scoped>
 .table-header {
     background-color: #f5f7fa !important;
@@ -298,4 +308,12 @@ export default {
     padding: 0;
     text-align: right;
 }
+.search-card {
+    margin-bottom: 15px;
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px 18px 0 18px;
+    }
+}
 </style>

vue/src/views/tool/gen/index.vue

@@ -1,5 +1,7 @@
 <template>
     <div class="app-container">
+        <!-- 搜索栏 - 上栏 -->
+        <el-card shadow="never" class="search-card">
             <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
                 <el-form-item :label="$t('gen.import.832346-1')" prop="tableName">
                     <el-input v-model="queryParams.tableName" :placeholder="$t('gen.import.832346-2')" clearable @keyup.enter.native="handleQuery" />
@@ -15,7 +17,7 @@
                         type="daterange"
                         range-separator="-"
                         :start-placeholder="$t('system.job.log.085689-5')"
-                    :end-placeholder="$t('system.job.log.085689-5')"
+                        :end-placeholder="$t('system.job.log.085689-6')"
                     ></el-date-picker>
                 </el-form-item>
                 <el-form-item>
@@ -23,8 +25,11 @@
                     <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
                 </el-form-item>
             </el-form>
+        </el-card>
 
-        <el-row :gutter="10" class="mb8">
+        <!-- 操作按钮和数据表格 - 下栏 -->
+        <el-card shadow="never" class="table-card">
+            <el-row :gutter="10" style="margin-bottom: 15px">
                 <el-col :span="1.5">
                     <el-button type="primary" plain icon="el-icon-download" size="small" :disabled="multiple" @click="handleGenTable" v-hasPermi="['tool:gen:code']">{{ $t('build.index.2090840-3') }}</el-button>
                 </el-col>
@@ -43,7 +48,7 @@
                 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
             </el-row>
 
-        <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange" :border="false">
+            <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange" :border="false" header-cell-class-name="table-header">
                 <el-table-column type="selection" align="center" width="55"></el-table-column>
                 <el-table-column :label="$t('system.cache.list.093478-1')" type="index" width="50" align="center">
                     <template slot-scope="scope">
@@ -77,6 +82,7 @@
                     </el-tab-pane>
                 </el-tabs>
             </el-dialog>
+        </el-card>
         <import-table ref="import" @ok="handleQuery" />
         <create-table ref="create" @ok="handleQuery" />
     </div>
@@ -255,9 +261,30 @@ export default {
 };
 </script>
 
-</script>
-
 <style lang="scss" scoped>
+.app-container {
+    padding: 20px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
+
+.search-card {
+    margin-bottom: 15px;
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px 18px 0 18px;
+    }
+}
+
+.table-card {
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px;
+    }
+}
+
 .table-header {
     background-color: #f5f7fa !important;
     color: #606266;
@@ -293,4 +320,9 @@ export default {
     padding: 0;
     text-align: right;
 }
+
+::v-deep .el-button--small {
+    padding: 8px 15px;
+    font-size: 13px;
+}
 </style>