diff --git a/vue/src/views/iot/netty/clients.vue b/vue/src/views/iot/netty/clients.vue
index aa4e5a5d..d164098e 100644
--- a/vue/src/views/iot/netty/clients.vue
+++ b/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>
diff --git a/vue/src/views/monitor/job/index.vue b/vue/src/views/monitor/job/index.vue
index 219f251c..e13fb9a6 100644
--- a/vue/src/views/monitor/job/index.vue
+++ b/vue/src/views/monitor/job/index.vue
@@ -1,207 +1,215 @@
 <template>
     <div class="app-container">
-        <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" />
-            </el-form-item>
-            <el-form-item :label="$t('system.job.356378-2')" prop="jobGroup">
-                <el-select v-model="queryParams.jobGroup" :placeholder="$t('system.job.356378-3')" clearable>
-                    <el-option v-for="dict in dict.type.sys_job_group" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('system.job.356378-4')" prop="status">
-                <el-select v-model="queryParams.status" :placeholder="$t('system.job.356378-5')" clearable>
-                    <el-option v-for="dict in dict.type.sys_job_status" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
-                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
-            </el-form-item>
-        </el-form>
-
-        <el-row :gutter="10" class="mb8">
-            <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>
-            <el-col :span="1.5">
-                <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['monitor:job:edit']">{{ $t('update') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:job:remove']">{{ $t('del') }}</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:job:export']">{{ $t('export') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="info" plain icon="el-icon-s-operation" size="small" @click="handleJobLog" v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-6') }}</el-button>
-            </el-col>
-            <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-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" />
-            <el-table-column :label="$t('system.job.356378-2')" align="center" prop="jobGroup">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.sys_job_group" :value="scope.row.jobGroup" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('system.job.356378-8')" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
-            <el-table-column :label="$t('system.job.356378-9')" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
-            <el-table-column :label="$t('status')" align="center">
-                <template slot-scope="scope">
-                    <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
-                <template slot-scope="scope">
-                    <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['monitor:job:edit']">{{ $t('update') }}</el-button>
-                    <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['monitor:job:remove']">{{ $t('del') }}</el-button>
-                    <el-dropdown size="small" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['monitor:job:changeStatus', 'monitor:job:query']">
-                        <el-button size="small" type="text" icon="el-icon-d-arrow-right">{{ $t('more') }}</el-button>
-                        <el-dropdown-menu slot="dropdown">
-                            <el-dropdown-item command="handleRun" icon="el-icon-caret-right" v-hasPermi="['monitor:job:changeStatus']">{{ $t('system.job.356378-10') }}</el-dropdown-item>
-                            <el-dropdown-item command="handleView" icon="el-icon-view" v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-11') }}</el-dropdown-item>
-                            <el-dropdown-item command="handleJobLog" icon="el-icon-s-operation" v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-12') }}</el-dropdown-item>
-                        </el-dropdown-menu>
-                    </el-dropdown>
-                </template>
-            </el-table-column>
-        </el-table>
-
-        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
-
-        <!-- 添加或修改定时任务对话框 -->
-        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
-            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-                <el-row>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.job.356378-0')" prop="jobName">
-                            <el-input v-model="form.jobName" :placeholder="$t('system.job.356378-1')" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.job.356378-13')" prop="jobGroup">
-                            <el-select v-model="form.jobGroup" :placeholder="$t('system.job.356378-14')">
-                                <el-option v-for="dict in dict.type.sys_job_group" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                        <el-form-item prop="invokeTarget">
-                            <span slot="label">
-                                {{ $t('system.job.356378-15') }}
-                                <el-tooltip placement="top">
-                                    <div slot="content">
-                                        {{ $t('system.job.356378-16') }}
-                                        <br />
-                                        {{ $t('system.job.356378-17') }}
-                                        <br />
-                                        {{ $t('system.job.356378-18') }}
-                                    </div>
-                                    <i class="el-icon-question"></i>
-                                </el-tooltip>
-                            </span>
-                            <el-input v-model="form.invokeTarget" :placeholder="$t('system.job.356378-8')" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                        <el-form-item :label="$t('system.job.356378-19')" prop="cronExpression">
-                            <el-input v-model="form.cronExpression" :placeholder="$t('system.job.356378-20')">
-                                <template slot="append">
-                                    <el-button type="primary" @click="handleShowCron">
-                                        {{ $t('system.job.356378-21') }}
-                                        <i class="el-icon-time el-icon--right"></i>
-                                    </el-button>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                        <el-form-item :label="$t('system.job.356378-22')" prop="misfirePolicy">
-                            <el-radio-group v-model="form.misfirePolicy" size="small">
-                                <el-radio-button label="1">{{ $t('system.job.356378-23') }}</el-radio-button>
-                                <el-radio-button label="2">{{ $t('system.job.356378-10') }}</el-radio-button>
-                                <el-radio-button label="3">{{ $t('system.job.356378-24') }}</el-radio-button>
-                            </el-radio-group>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.job.356378-25')" prop="concurrent">
-                            <el-radio-group v-model="form.concurrent" size="small">
-                                <el-radio-button label="0">{{ $t('system.job.356378-26') }}</el-radio-button>
-                                <el-radio-button label="1">{{ $t('system.job.356378-27') }}</el-radio-button>
-                            </el-radio-group>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('status')">
-                            <el-radio-group v-model="form.status">
-                                <el-radio v-for="dict in dict.type.sys_job_status" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
+        <!-- 搜索栏 - 上栏 -->
+        <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" />
+                </el-form-item>
+                <el-form-item :label="$t('system.job.356378-2')" prop="jobGroup">
+                    <el-select v-model="queryParams.jobGroup" :placeholder="$t('system.job.356378-3')" clearable>
+                        <el-option v-for="dict in dict.type.sys_job_group" :key="dict.value" :label="dict.label" :value="dict.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item :label="$t('system.job.356378-4')" prop="status">
+                    <el-select v-model="queryParams.status" :placeholder="$t('system.job.356378-5')" clearable>
+                        <el-option v-for="dict in dict.type.sys_job_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
+                </el-form-item>
             </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
-                <el-button @click="cancel">{{ $t('cancel') }}</el-button>
-            </div>
-        </el-dialog>
+        </el-card>
 
-        <el-dialog :title="$t('system.job.356378-28')" :visible.sync="openCron" append-to-body destroy-on-close class="scrollbar">
-            <crontab @hide="openCron = false" @fill="crontabFill" :expression="expression"></crontab>
-        </el-dialog>
+        <!-- 操作按钮和数据表格 - 下栏 -->
+        <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>
+                <el-col :span="1.5">
+                    <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['monitor:job:edit']">{{ $t('update') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:job:remove']">{{ $t('del') }}</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:job:export']">{{ $t('export') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="info" plain icon="el-icon-s-operation" size="small" @click="handleJobLog" v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-6') }}</el-button>
+                </el-col>
+                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
 
-        <!-- 任务日志详细 -->
-        <el-dialog :title="$t('system.job.356378-11')" :visible.sync="openView" width="700px" append-to-body>
-            <el-form ref="form" :model="form" label-width="120px" size="small">
-                <el-row>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.job.356378-29')">{{ form.jobId }}</el-form-item>
-                        <el-form-item :label="$t('system.job.356378-30')">{{ form.jobName }}</el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.job.356378-31')">{{ jobGroupFormat(form) }}</el-form-item>
-                        <el-form-item :label="$t('system.job.356378-32')">{{ form.createTime }}</el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.job.356378-33')">{{ form.cronExpression }}</el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.job.356378-34')">{{ parseTime(form.nextValidTime) }}</el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                        <el-form-item :label="$t('system.job.356378-35')">{{ form.invokeTarget }}</el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.job.356378-36')">
-                            <div v-if="form.status == 0">{{ $t('system.job.356378-37') }}</div>
-                            <div v-else-if="form.status == 1">{{ $t('system.job.356378-38') }}</div>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.job.356378-25') + '：'">
-                            <div v-if="form.concurrent == 0">{{ $t('system.job.356378-26') }}</div>
-                            <div v-else-if="form.concurrent == 1">{{ $t('system.job.356378-27') }}</div>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.job.356378-39')">
-                            <div v-if="form.misfirePolicy == 0">{{ $t('system.job.356378-40') }}</div>
-                            <div v-else-if="form.misfirePolicy == 1">{{ $t('system.job.356378-23') }}</div>
-                            <div v-else-if="form.misfirePolicy == 2">{{ $t('system.job.356378-10') }}</div>
-                            <div v-else-if="form.misfirePolicy == 3">{{ $t('system.job.356378-24') }}</div>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button @click="openView = false">{{ $t('close') }}</el-button>
+            <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" />
+                <el-table-column :label="$t('system.job.356378-2')" align="center" prop="jobGroup">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.sys_job_group" :value="scope.row.jobGroup" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('system.job.356378-8')" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('system.job.356378-9')" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('status')" align="center">
+                    <template slot-scope="scope">
+                        <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
+                    <template slot-scope="scope">
+                        <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['monitor:job:edit']">{{ $t('update') }}</el-button>
+                        <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['monitor:job:remove']">{{ $t('del') }}</el-button>
+                        <el-dropdown size="small" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['monitor:job:changeStatus', 'monitor:job:query']">
+                            <el-button size="small" type="text" icon="el-icon-d-arrow-right">{{ $t('more') }}</el-button>
+                            <el-dropdown-menu slot="dropdown">
+                                <el-dropdown-item command="handleRun" icon="el-icon-caret-right" v-hasPermi="['monitor:job:changeStatus']">{{ $t('system.job.356378-10') }}</el-dropdown-item>
+                                <el-dropdown-item command="handleView" icon="el-icon-view" v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-11') }}</el-dropdown-item>
+                                <el-dropdown-item command="handleJobLog" icon="el-icon-s-operation" v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-12') }}</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </el-dropdown>
+                    </template>
+                </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>
+
+            <!-- 添加或修改定时任务对话框 -->
+            <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+                <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.job.356378-0')" prop="jobName">
+                                <el-input v-model="form.jobName" :placeholder="$t('system.job.356378-1')" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.job.356378-13')" prop="jobGroup">
+                                <el-select v-model="form.jobGroup" :placeholder="$t('system.job.356378-14')">
+                                    <el-option v-for="dict in dict.type.sys_job_group" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="24">
+                            <el-form-item prop="invokeTarget">
+                                <span slot="label">
+                                    {{ $t('system.job.356378-15') }}
+                                    <el-tooltip placement="top">
+                                        <div slot="content">
+                                            {{ $t('system.job.356378-16') }}
+                                            <br />
+                                            {{ $t('system.job.356378-17') }}
+                                            <br />
+                                            {{ $t('system.job.356378-18') }}
+                                        </div>
+                                        <i class="el-icon-question"></i>
+                                    </el-tooltip>
+                                </span>
+                                <el-input v-model="form.invokeTarget" :placeholder="$t('system.job.356378-8')" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="24">
+                            <el-form-item :label="$t('system.job.356378-19')" prop="cronExpression">
+                                <el-input v-model="form.cronExpression" :placeholder="$t('system.job.356378-20')">
+                                    <template slot="append">
+                                        <el-button type="primary" @click="handleShowCron">
+                                            {{ $t('system.job.356378-21') }}
+                                            <i class="el-icon-time el-icon--right"></i>
+                                        </el-button>
+                                    </template>
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="24">
+                            <el-form-item :label="$t('system.job.356378-22')" prop="misfirePolicy">
+                                <el-radio-group v-model="form.misfirePolicy" size="small">
+                                    <el-radio-button label="1">{{ $t('system.job.356378-23') }}</el-radio-button>
+                                    <el-radio-button label="2">{{ $t('system.job.356378-10') }}</el-radio-button>
+                                    <el-radio-button label="3">{{ $t('system.job.356378-24') }}</el-radio-button>
+                                </el-radio-group>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.job.356378-25')" prop="concurrent">
+                                <el-radio-group v-model="form.concurrent" size="small">
+                                    <el-radio-button label="0">{{ $t('system.job.356378-26') }}</el-radio-button>
+                                    <el-radio-button label="1">{{ $t('system.job.356378-27') }}</el-radio-button>
+                                </el-radio-group>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('status')">
+                                <el-radio-group v-model="form.status">
+                                    <el-radio v-for="dict in dict.type.sys_job_status" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
+                    <el-button @click="cancel">{{ $t('cancel') }}</el-button>
+                </div>
+            </el-dialog>
+
+            <el-dialog :title="$t('system.job.356378-28')" :visible.sync="openCron" append-to-body destroy-on-close class="scrollbar">
+                <crontab @hide="openCron = false" @fill="crontabFill" :expression="expression"></crontab>
+            </el-dialog>
+
+            <!-- 任务日志详细 -->
+            <el-dialog :title="$t('system.job.356378-11')" :visible.sync="openView" width="700px" append-to-body>
+                <el-form ref="form" :model="form" label-width="120px" size="small">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.job.356378-29')">{{ form.jobId }}</el-form-item>
+                            <el-form-item :label="$t('system.job.356378-30')">{{ form.jobName }}</el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.job.356378-31')">{{ jobGroupFormat(form) }}</el-form-item>
+                            <el-form-item :label="$t('system.job.356378-32')">{{ form.createTime }}</el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.job.356378-33')">{{ form.cronExpression }}</el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.job.356378-34')">{{ parseTime(form.nextValidTime) }}</el-form-item>
+                        </el-col>
+                        <el-col :span="24">
+                            <el-form-item :label="$t('system.job.356378-35')">{{ form.invokeTarget }}</el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.job.356378-36')">
+                                <div v-if="form.status == 0">{{ $t('system.job.356378-37') }}</div>
+                                <div v-else-if="form.status == 1">{{ $t('system.job.356378-38') }}</div>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.job.356378-25') + '：'">
+                                <div v-if="form.concurrent == 0">{{ $t('system.job.356378-26') }}</div>
+                                <div v-else-if="form.concurrent == 1">{{ $t('system.job.356378-27') }}</div>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.job.356378-39')">
+                                <div v-if="form.misfirePolicy == 0">{{ $t('system.job.356378-40') }}</div>
+                                <div v-else-if="form.misfirePolicy == 1">{{ $t('system.job.356378-23') }}</div>
+                                <div v-else-if="form.misfirePolicy == 2">{{ $t('system.job.356378-10') }}</div>
+                                <div v-else-if="form.misfirePolicy == 3">{{ $t('system.job.356378-24') }}</div>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <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>
diff --git a/vue/src/views/monitor/logininfor/index.vue b/vue/src/views/monitor/logininfor/index.vue
index 0c660185..ed05a3e7 100644
--- a/vue/src/views/monitor/logininfor/index.vue
+++ b/vue/src/views/monitor/logininfor/index.vue
@@ -1,274 +1,241 @@
 <template>
-  <div class="app-container">
-    <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-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-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>
-      </el-form-item>
-      <el-form-item :label="$t('monitor.logininfor.670912-6')">
-        <el-date-picker
-          v-model="dateRange"
-          style="width: 240px"
-          value-format="yyyy-MM-dd"
-          type="daterange"
-          range-separator="-"
-          :start-placeholder="$t('monitor.logininfor.670912-7')"
-          :end-placeholder="$t('monitor.logininfor.670912-8')"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
-        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
-      </el-form-item>
-    </el-form>
+    <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-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-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>
+                </el-form-item>
+                <el-form-item :label="$t('monitor.logininfor.670912-6')">
+                    <el-date-picker
+                        v-model="dateRange"
+                        style="width: 240px"
+                        value-format="yyyy-MM-dd"
+                        type="daterange"
+                        range-separator="-"
+                        :start-placeholder="$t('monitor.logininfor.670912-7')"
+                        :end-placeholder="$t('monitor.logininfor.670912-8')"
+                    ></el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
+                </el-form-item>
+            </el-form>
 
-    <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-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-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-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-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+            <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-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-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-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-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-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']" />
-      <el-table-column :label="$t('monitor.logininfor.670912-0')" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
-      <el-table-column :label="$t('monitor.logininfor.670912-11')" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
-      <el-table-column :label="$t('monitor.logininfor.670912-12')" align="center" prop="browser" :show-overflow-tooltip="true" />
-      <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"/>
-        </template>
-      </el-table-column>
-      <el-table-column :label="$t('monitor.logininfor.670912-14')" align="center" prop="msg" />
-      <el-table-column :label="$t('monitor.logininfor.670912-6')" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.loginTime) }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
+            <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']" />
+                <el-table-column :label="$t('monitor.logininfor.670912-0')" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('monitor.logininfor.670912-11')" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('monitor.logininfor.670912-12')" align="center" prop="browser" :show-overflow-tooltip="true" />
+                <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" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('monitor.logininfor.670912-14')" align="center" prop="msg" />
+                <el-table-column :label="$t('monitor.logininfor.670912-6')" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
+                    <template slot-scope="scope">
+                        <span>{{ parseTime(scope.row.loginTime) }}</span>
+                    </template>
+                </el-table-column>
+            </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </div>
+            <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",
-  dicts: ['sys_common_status'],
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 选择用户名
-      selectName: "",
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 表格数据
-      list: [],
-      // 日期范围
-      dateRange: [],
-      // 默认排序
-      defaultSort: {prop: 'loginTime', order: 'descending'},
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        ipaddr: undefined,
-        userName: undefined,
-        status: undefined
-      }
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询登录日志列表 */
-    getList() {
-      this.loading = true;
-      list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.list = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        }
-      );
+    name: 'Logininfor',
+    dicts: ['sys_common_status'],
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 选择用户名
+            selectName: '',
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 表格数据
+            list: [],
+            // 日期范围
+            dateRange: [],
+            // 默认排序
+            defaultSort: { prop: 'loginTime', order: 'descending' },
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                ipaddr: undefined,
+                userName: undefined,
+                status: undefined,
+            },
+        };
     },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.queryParams.pageNum = 1;
-      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);
-    },
-    /** 排序触发事件 */
-    handleSortChange(column, prop, order) {
-      this.queryParams.orderByColumn = column.prop;
-      this.queryParams.isAsc = column.order;
-      this.getList();
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const infoIds = row.infoId || this.ids;
-      this.$modal.confirm(this.$t('monitor.logininfor.670912-15', [infoIds])).then(function() {
-        return delLogininfor(infoIds);
-      }).then(() => {
+    created() {
         this.getList();
-        this.$modal.msgSuccess(this.$t('delSuccess'));
-      }).catch(() => {});
     },
-    /** 清空按钮操作 */
-    handleClean() {
-      this.$modal.confirm(this.$t('monitor.logininfor.670912-16')).then(function() {
-        return cleanLogininfor();
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess(this.$t('cleanSuccess'));
-      }).catch(() => {});
+    methods: {
+        /** 查询登录日志列表 */
+        getList() {
+            this.loading = true;
+            list(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
+                this.list = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.dateRange = [];
+            this.resetForm('queryForm');
+            this.queryParams.pageNum = 1;
+            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);
+        },
+        /** 排序触发事件 */
+        handleSortChange(column, prop, order) {
+            this.queryParams.orderByColumn = column.prop;
+            this.queryParams.isAsc = column.order;
+            this.getList();
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const infoIds = row.infoId || this.ids;
+            this.$modal
+                .confirm(this.$t('monitor.logininfor.670912-15', [infoIds]))
+                .then(function () {
+                    return delLogininfor(infoIds);
+                })
+                .then(() => {
+                    this.getList();
+                    this.$modal.msgSuccess(this.$t('delSuccess'));
+                })
+                .catch(() => {});
+        },
+        /** 清空按钮操作 */
+        handleClean() {
+            this.$modal
+                .confirm(this.$t('monitor.logininfor.670912-16'))
+                .then(function () {
+                    return cleanLogininfor();
+                })
+                .then(() => {
+                    this.getList();
+                    this.$modal.msgSuccess(this.$t('cleanSuccess'));
+                })
+                .catch(() => {});
+        },
+        /** 解锁按钮操作 */
+        handleUnlock() {
+            const username = this.selectName;
+            this.$modal
+                .confirm(this.$t('monitor.logininfor.670912-17', [username]))
+                .then(function () {
+                    return unlockLogininfor(username);
+                })
+                .then(() => {
+                    this.$modal.msgSuccess(this.$t('monitor.logininfor.670912-18', [username]));
+                })
+                .catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download(
+                'monitor/logininfor/export',
+                {
+                    ...this.queryParams,
+                },
+                `logininfor_${new Date().getTime()}.xlsx`
+            );
+        },
     },
-    /** 解锁按钮操作 */
-    handleUnlock() {
-      const username = this.selectName;
-      this.$modal.confirm(this.$t('monitor.logininfor.670912-17', [username])).then(function() {
-        return unlockLogininfor(username);
-      }).then(() => {
-        this.$modal.msgSuccess(this.$t('monitor.logininfor.670912-18', [username]));
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('monitor/logininfor/export', {
-        ...this.queryParams
-      }, `logininfor_${new Date().getTime()}.xlsx`)
-    }
-  }
 };
 </script>
 
-
-</script>
-
 <style lang="scss" scoped>
 .table-header {
-  background-color: #f5f7fa !important;
-  color: #606266;
-  font-weight: 600;
-  text-align: center;
-}
-
-::v-deep .el-table {
-  th {
-    background-color: #f5f7fa;
+    background-color: #f5f7fa !important;
     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-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;
+    }
 }
 
 .pagination-container {
@@ -279,7 +246,15 @@ export default {
 }
 
 ::v-deep .el-pagination {
-  padding: 0;
-  text-align: right;
+    padding: 0;
+    text-align: right;
+}
+.search-card {
+    margin-bottom: 15px;
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px 18px 0 18px;
+    }
 }
 </style>
diff --git a/vue/src/views/monitor/online/index.vue b/vue/src/views/monitor/online/index.vue
index c7a4555e..963a7915 100644
--- a/vue/src/views/monitor/online/index.vue
+++ b/vue/src/views/monitor/online/index.vue
@@ -1,45 +1,49 @@
 <template>
     <div class="app-container">
-        <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" />
-            </el-form-item>
-            <el-form-item :label="$t('online.093480-5')" prop="userName">
-                <el-input v-model="queryParams.userName" :placeholder="$t('online.093480-2')" clearable @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
-                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
-            </el-form-item>
-        </el-form>
-        <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">
-                    <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('online.093480-4')" align="center" prop="tokenId" :show-overflow-tooltip="true" />
-            <el-table-column :label="$t('online.093480-5')" align="center" prop="userName" :show-overflow-tooltip="true" />
-            <el-table-column :label="$t('online.093480-6')" align="center" prop="deptName" />
-            <el-table-column :label="$t('online.093480-7')" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
-            <el-table-column :label="$t('online.093480-8')" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
-            <el-table-column :label="$t('online.093480-9')" align="center" prop="browser" />
-            <el-table-column :label="$t('online.093480-10')" align="center" prop="os" />
-            <el-table-column :label="$t('online.093480-11')" align="center" prop="loginTime" width="180">
-                <template slot-scope="scope">
-                    <span>{{ parseTime(scope.row.loginTime) }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
-                <template slot-scope="scope">
-                    <el-button size="small" type="text" icon="el-icon-delete" @click="handleForceLogout(scope.row)" v-hasPermi="['monitor:online:forceLogout']">{{ $t('online.093480-12') }}</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
+        <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" />
+                </el-form-item>
+                <el-form-item :label="$t('online.093480-5')" prop="userName">
+                    <el-input v-model="queryParams.userName" :placeholder="$t('online.093480-2')" clearable @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                    <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">
+                        <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('online.093480-4')" align="center" prop="tokenId" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('online.093480-5')" align="center" prop="userName" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('online.093480-6')" align="center" prop="deptName" />
+                <el-table-column :label="$t('online.093480-7')" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('online.093480-8')" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('online.093480-9')" align="center" prop="browser" />
+                <el-table-column :label="$t('online.093480-10')" align="center" prop="os" />
+                <el-table-column :label="$t('online.093480-11')" align="center" prop="loginTime" width="180">
+                    <template slot-scope="scope">
+                        <span>{{ parseTime(scope.row.loginTime) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
+                    <template slot-scope="scope">
+                        <el-button size="small" type="text" icon="el-icon-delete" @click="handleForceLogout(scope.row)" v-hasPermi="['monitor:online:forceLogout']">{{ $t('online.093480-12') }}</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
 
-        <div class="pagination-container">
-            <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
-        </div>
+            <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>
diff --git a/vue/src/views/monitor/operlog/index.vue b/vue/src/views/monitor/operlog/index.vue
index 0b7d6585..54bdf4c1 100644
--- a/vue/src/views/monitor/operlog/index.vue
+++ b/vue/src/views/monitor/operlog/index.vue
@@ -1,136 +1,148 @@
 <template>
     <div class="app-container">
-        <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" />
-            </el-form-item>
-            <el-form-item :label="$t('operlog.874509-0')" prop="title">
-                <el-input v-model="queryParams.title" :placeholder="$t('operlog.874509-1')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('operlog.874509-2')" prop="operName">
-                <el-input v-model="queryParams.operName" :placeholder="$t('operlog.874509-3')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('system.notice.670989-4')" prop="businessType">
-                <el-select v-model="queryParams.businessType" :placeholder="$t('operlog.874509-4')" clearable style="width: 240px">
-                    <el-option v-for="dict in dict.type.sys_oper_type" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('status')" prop="status">
-                <el-select v-model="queryParams.status" :placeholder="$t('operlog.874509-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('operlog.874509-6')">
-                <el-date-picker
-                    v-model="dateRange"
-                    style="width: 240px"
-                    value-format="yyyy-MM-dd HH:mm:ss"
-                    type="daterange"
-                    range-separator="-"
-                    :start-placeholder="$t('system.dict.index.880996-3')"
-                    :end-placeholder="$t('system.dict.index.880996-4')"
-                    :default-time="['00:00:00', '23:59:59']"
-                ></el-date-picker>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
-                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
-            </el-form-item>
-        </el-form>
-
-        <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>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-delete" size="small" @click="handleClean" v-hasPermi="['monitor:operlog:remove']">{{ $t('operlog.874509-7') }}</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:operlog: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-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" />
-            <el-table-column :label="$t('operlog.874509-4')" align="center" prop="businessType">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.sys_oper_type" :value="scope.row.businessType" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('operlog.874509-2')" align="center" prop="operName" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
-            <el-table-column :label="$t('operlog.874509-10')" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
-            <el-table-column :label="$t('operlog.874509-11')" align="center" prop="operLocation" :show-overflow-tooltip="true" />
-            <el-table-column :label="$t('operlog.874509-30')" align="center" prop="status">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('operlog.874509-12')" align="center" prop="operTime" width="160" sortable="custom" :sort-orders="['descending', 'ascending']">
-                <template slot-scope="scope">
-                    <span>{{ parseTime(scope.row.operTime) }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('operlog.874509-31')" align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']">
-                <template slot-scope="scope">
-                    <span>{{ scope.row.costTime }}ms</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
-                <template slot-scope="scope">
-                    <el-button size="small" type="text" icon="el-icon-view" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">{{ $t('operlog.874509-13') }}</el-button>
-                </template>
-            </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="$t('operlog.874509-14')" :visible.sync="open" width="800px" append-to-body>
-            <el-form ref="form" :model="form" label-width="100px" size="small">
-                <el-row>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('operlog.874509-15')">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
-                        <el-form-item :label="$t('operlog.874509-16')">{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('operlog.874509-17')">{{ form.operUrl }}</el-form-item>
-                        <el-form-item :label="$t('operlog.874509-18')">{{ form.requestMethod }}</el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                        <el-form-item :label="$t('operlog.874509-19')">{{ form.method }}</el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                        <el-form-item :label="$t('operlog.874509-20')">{{ form.operParam }}</el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                        <el-form-item :label="$t('operlog.874509-21')">{{ form.jsonResult }}</el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item :label="$t('operlog.874509-22')">
-                            <div v-if="form.status === 0">{{ $t('operlog.874509-23') }}</div>
-                            <div v-else-if="form.status === 1">{{ $t('operlog.874509-24') }}</div>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item :label="$t('operlog.874509-31')">{{ form.costTime }}ms</el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item :label="$t('operlog.874509-25')">{{ parseTime(form.operTime) }}</el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                        <el-form-item :label="$t('operlog.874509-26')" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
-                    </el-col>
-                </el-row>
+        <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" />
+                </el-form-item>
+                <el-form-item :label="$t('operlog.874509-0')" prop="title">
+                    <el-input v-model="queryParams.title" :placeholder="$t('operlog.874509-1')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item :label="$t('operlog.874509-2')" prop="operName">
+                    <el-input v-model="queryParams.operName" :placeholder="$t('operlog.874509-3')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item :label="$t('system.notice.670989-4')" prop="businessType">
+                    <el-select v-model="queryParams.businessType" :placeholder="$t('operlog.874509-4')" clearable style="width: 240px">
+                        <el-option v-for="dict in dict.type.sys_oper_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item :label="$t('status')" prop="status">
+                    <el-select v-model="queryParams.status" :placeholder="$t('operlog.874509-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('operlog.874509-6')">
+                    <el-date-picker
+                        v-model="dateRange"
+                        style="width: 240px"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                        type="daterange"
+                        range-separator="-"
+                        :start-placeholder="$t('system.dict.index.880996-3')"
+                        :end-placeholder="$t('system.dict.index.880996-4')"
+                        :default-time="['00:00:00', '23:59:59']"
+                    ></el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
+                </el-form-item>
             </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button @click="open = false">{{ $t('close') }}</el-button>
+        </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>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="danger" plain icon="el-icon-delete" size="small" @click="handleClean" v-hasPermi="['monitor:operlog:remove']">{{ $t('operlog.874509-7') }}</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:operlog: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-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" />
+                <el-table-column :label="$t('operlog.874509-4')" align="center" prop="businessType">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.sys_oper_type" :value="scope.row.businessType" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('operlog.874509-2')" align="center" prop="operName" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
+                <el-table-column :label="$t('operlog.874509-10')" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('operlog.874509-11')" align="center" prop="operLocation" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('operlog.874509-30')" align="center" prop="status">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('operlog.874509-12')" align="center" prop="operTime" width="160" sortable="custom" :sort-orders="['descending', 'ascending']">
+                    <template slot-scope="scope">
+                        <span>{{ parseTime(scope.row.operTime) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('operlog.874509-31')" align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.costTime }}ms</span>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
+                    <template slot-scope="scope">
+                        <el-button size="small" type="text" icon="el-icon-view" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">{{ $t('operlog.874509-13') }}</el-button>
+                    </template>
+                </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>
+
+            <!-- 操作日志详细 -->
+            <el-dialog :title="$t('operlog.874509-14')" :visible.sync="open" width="800px" append-to-body>
+                <el-form ref="form" :model="form" label-width="100px" size="small">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('operlog.874509-15')">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
+                            <el-form-item :label="$t('operlog.874509-16')">{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('operlog.874509-17')">{{ form.operUrl }}</el-form-item>
+                            <el-form-item :label="$t('operlog.874509-18')">{{ form.requestMethod }}</el-form-item>
+                        </el-col>
+                        <el-col :span="24">
+                            <el-form-item :label="$t('operlog.874509-19')">{{ form.method }}</el-form-item>
+                        </el-col>
+                        <el-col :span="24">
+                            <el-form-item :label="$t('operlog.874509-20')">{{ form.operParam }}</el-form-item>
+                        </el-col>
+                        <el-col :span="24">
+                            <el-form-item :label="$t('operlog.874509-21')">{{ form.jsonResult }}</el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item :label="$t('operlog.874509-22')">
+                                <div v-if="form.status === 0">{{ $t('operlog.874509-23') }}</div>
+                                <div v-else-if="form.status === 1">{{ $t('operlog.874509-24') }}</div>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item :label="$t('operlog.874509-31')">{{ form.costTime }}ms</el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item :label="$t('operlog.874509-25')">{{ parseTime(form.operTime) }}</el-form-item>
+                        </el-col>
+                        <el-col :span="24">
+                            <el-form-item :label="$t('operlog.874509-26')" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button @click="open = false">{{ $t('close') }}</el-button>
+                </div>
+            </el-dialog>
+        </el-card>
     </div>
 </template>
 
@@ -260,31 +272,29 @@ export default {
 };
 </script>
 
-</script>
-
 <style lang="scss" scoped>
 .table-header {
-  background-color: #f5f7fa !important;
-  color: #606266;
-  font-weight: 600;
-  text-align: center;
-}
-
-::v-deep .el-table {
-  th {
-    background-color: #f5f7fa;
+    background-color: #f5f7fa !important;
     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-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;
+    }
 }
 
 .pagination-container {
@@ -295,7 +305,15 @@ export default {
 }
 
 ::v-deep .el-pagination {
-  padding: 0;
-  text-align: right;
+    padding: 0;
+    text-align: right;
+}
+.search-card {
+    margin-bottom: 15px;
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px 18px 0 18px;
+    }
 }
 </style>
diff --git a/vue/src/views/tool/gen/index.vue b/vue/src/views/tool/gen/index.vue
index 7f9e346d..1043a359 100644
--- a/vue/src/views/tool/gen/index.vue
+++ b/vue/src/views/tool/gen/index.vue
@@ -1,82 +1,88 @@
 <template>
     <div class="app-container">
-        <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" />
-            </el-form-item>
-            <el-form-item :label="$t('gen.import.832346-3')" prop="tableComment">
-                <el-input v-model="queryParams.tableComment" :placeholder="$t('gen.import.832346-4')" clearable @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('creatTime')">
-                <el-date-picker
-                    v-model="dateRange"
-                    style="width: 240px"
-                    value-format="yyyy-MM-dd"
-                    type="daterange"
-                    range-separator="-"
-                    :start-placeholder="$t('system.job.log.085689-5')"
-                    :end-placeholder="$t('system.job.log.085689-5')"
-                ></el-date-picker>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
-                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
-            </el-form-item>
-        </el-form>
+        <!-- 搜索栏 - 上栏 -->
+        <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" />
+                </el-form-item>
+                <el-form-item :label="$t('gen.import.832346-3')" prop="tableComment">
+                    <el-input v-model="queryParams.tableComment" :placeholder="$t('gen.import.832346-4')" clearable @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item :label="$t('creatTime')">
+                    <el-date-picker
+                        v-model="dateRange"
+                        style="width: 240px"
+                        value-format="yyyy-MM-dd"
+                        type="daterange"
+                        range-separator="-"
+                        :start-placeholder="$t('system.job.log.085689-5')"
+                        :end-placeholder="$t('system.job.log.085689-6')"
+                    ></el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                    <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-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>
-            <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-plus" size="small" @click="openCreateTable" v-hasRole="['admin']">{{ $t('add') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="info" plain icon="el-icon-upload" size="small" @click="openImportTable" v-hasPermi="['tool:gen:import']">{{ $t('import') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleEditTable" v-hasPermi="['tool:gen:edit']">{{ $t('update') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['tool:gen:remove']">{{ $t('del') }}</el-button>
-            </el-col>
-            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
+        <!-- 操作按钮和数据表格 - 下栏 -->
+        <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>
+                <el-col :span="1.5">
+                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="openCreateTable" v-hasRole="['admin']">{{ $t('add') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="info" plain icon="el-icon-upload" size="small" @click="openImportTable" v-hasPermi="['tool:gen:import']">{{ $t('import') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleEditTable" v-hasPermi="['tool:gen:edit']">{{ $t('update') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['tool:gen:remove']">{{ $t('del') }}</el-button>
+                </el-col>
+                <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-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">
-                    <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('gen.import.832346-1')" align="center" prop="tableName" :show-overflow-tooltip="true" width="120" />
-            <el-table-column :label="$t('gen.import.832346-3')" align="center" prop="tableComment" :show-overflow-tooltip="true" width="120" />
-            <el-table-column :label="$t('gen.index.467583-1')" align="center" prop="className" :show-overflow-tooltip="true" width="120" />
-            <el-table-column :label="$t('creatTime')" align="center" prop="createTime" width="160" />
-            <el-table-column :label="$t('updateTime')" align="center" prop="updateTime" width="160" />
-            <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
-                <template slot-scope="scope">
-                    <el-button type="text" size="small" icon="el-icon-view" @click="handlePreview(scope.row)" v-hasPermi="['tool:gen:preview']">{{ $t('preview') }}</el-button>
-                    <el-button type="text" size="small" icon="el-icon-edit" @click="handleEditTable(scope.row)" v-hasPermi="['tool:gen:edit']">{{ $t('edit') }}</el-button>
-                    <el-button type="text" size="small" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['tool:gen:remove']">{{ $t('del') }}</el-button>
-                    <el-button type="text" size="small" icon="el-icon-refresh" @click="handleSynchDb(scope.row)" v-hasPermi="['tool:gen:edit']">{{ $t('gen.index.467583-3') }}</el-button>
-                    <el-button type="text" size="small" icon="el-icon-download" @click="handleGenTable(scope.row)" v-hasPermi="['tool:gen:code']">{{ $t('gen.index.467583-4') }}</el-button>
-                </template>
-            </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>
-        <!-- Preview -->
-        <el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body class="scrollbar">
-            <el-tabs v-model="preview.activeName">
-                <el-tab-pane v-for="(value, key) in preview.data" :label="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))" :name="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))" :key="key">
-                    <el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="value" v-clipboard:success="clipboardSuccess" style="float: right">{{ $t('device.device-edit.148398-55') }}</el-link>
-                    <pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
-                </el-tab-pane>
-            </el-tabs>
-        </el-dialog>
+            <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">
+                        <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('gen.import.832346-1')" align="center" prop="tableName" :show-overflow-tooltip="true" width="120" />
+                <el-table-column :label="$t('gen.import.832346-3')" align="center" prop="tableComment" :show-overflow-tooltip="true" width="120" />
+                <el-table-column :label="$t('gen.index.467583-1')" align="center" prop="className" :show-overflow-tooltip="true" width="120" />
+                <el-table-column :label="$t('creatTime')" align="center" prop="createTime" width="160" />
+                <el-table-column :label="$t('updateTime')" align="center" prop="updateTime" width="160" />
+                <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
+                    <template slot-scope="scope">
+                        <el-button type="text" size="small" icon="el-icon-view" @click="handlePreview(scope.row)" v-hasPermi="['tool:gen:preview']">{{ $t('preview') }}</el-button>
+                        <el-button type="text" size="small" icon="el-icon-edit" @click="handleEditTable(scope.row)" v-hasPermi="['tool:gen:edit']">{{ $t('edit') }}</el-button>
+                        <el-button type="text" size="small" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['tool:gen:remove']">{{ $t('del') }}</el-button>
+                        <el-button type="text" size="small" icon="el-icon-refresh" @click="handleSynchDb(scope.row)" v-hasPermi="['tool:gen:edit']">{{ $t('gen.index.467583-3') }}</el-button>
+                        <el-button type="text" size="small" icon="el-icon-download" @click="handleGenTable(scope.row)" v-hasPermi="['tool:gen:code']">{{ $t('gen.index.467583-4') }}</el-button>
+                    </template>
+                </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>
+            <!-- Preview -->
+            <el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body class="scrollbar">
+                <el-tabs v-model="preview.activeName">
+                    <el-tab-pane v-for="(value, key) in preview.data" :label="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))" :name="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))" :key="key">
+                        <el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="value" v-clipboard:success="clipboardSuccess" style="float: right">{{ $t('device.device-edit.148398-55') }}</el-link>
+                        <pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
+                    </el-tab-pane>
+                </el-tabs>
+            </el-dialog>
+        </el-card>
         <import-table ref="import" @ok="handleQuery" />
         <create-table ref="create" @ok="handleQuery" />
     </div>
@@ -255,31 +261,52 @@ export default {
 };
 </script>
 
-</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 {
-  th {
-    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;
-  }
-  
-  td {
-    padding: 12px 0;
-  }
-  
-  .el-table__body tr:hover > td {
-    background-color: #f5f7fa !important;
-  }
+}
+
+::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;
+    }
 }
 
 .pagination-container {
@@ -290,7 +317,12 @@ export default {
 }
 
 ::v-deep .el-pagination {
-  padding: 0;
-  text-align: right;
+    padding: 0;
+    text-align: right;
+}
+
+::v-deep .el-button--small {
+    padding: 8px 15px;
+    font-size: 13px;
 }
 </style>