From 983e343373d5ada5d844e032dbe4be9ce6c021d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=92=8B=E5=90=89=E5=85=86?= <303176530@qq.com>
Date: Sat, 18 Sep 2021 00:10:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=B0=E7=89=88=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/resource/template/web/table.vue.tpl    |  121 +-
 web/src/api/sysOperationRecord.js             |   34 +-
 web/src/api/workflowProcess.js                |  124 +-
 web/src/style/animition.scss                  | 1044 -----------------
 web/src/style/base.scss                       |    8 +-
 web/src/style/main.scss                       |  184 +--
 .../view/example/breakpoint/breakpoint.vue    |   47 +-
 web/src/view/example/customer/customer.vue    |   91 +-
 web/src/view/example/excel/excel.vue          |   62 +-
 web/src/view/example/upload/upload.vue        |   33 +-
 web/src/view/superAdmin/api/api.vue           |   99 +-
 .../view/superAdmin/authority/authority.vue   |   84 +-
 .../superAdmin/dictionary/sysDictionary.vue   |  100 +-
 .../dictionary/sysDictionaryDetail.vue        |   97 +-
 web/src/view/superAdmin/menu/menu.vue         |  105 +-
 .../operation/sysOperationRecord.vue          |  170 +--
 web/src/view/superAdmin/user/user.vue         |  110 +-
 web/src/view/systemTools/autoCode/index.vue   |  258 ++--
 .../view/systemTools/autoCodeAdmin/index.vue  |  108 +-
 web/src/view/systemTools/system/system.vue    |    5 +-
 20 files changed, 934 insertions(+), 1950 deletions(-)
 delete mode 100644 web/src/style/animition.scss

diff --git a/server/resource/template/web/table.vue.tpl b/server/resource/template/web/table.vue.tpl
index 878830c3..917a9faa 100644
--- a/server/resource/template/web/table.vue.tpl
+++ b/server/resource/template/web/table.vue.tpl
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="search-term">
+    <div class="gva-search-box">
       <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
            {{- range .Fields}}  {{- if .FieldSearchType}} {{- if eq .FieldType "bool" }}
             <el-form-item label="{{.FieldDesc}}" prop="{{.FieldJson}}">
@@ -21,66 +21,69 @@
         <el-form-item label="{{.FieldDesc}}">
           <el-input v-model="searchInfo.{{.FieldJson}}" placeholder="搜索条件" />
         </el-form-item>{{ end }}{{ end }}{{ end }}
+        <el-form-item>
+          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
+        </el-form-item>
       </el-form>
-      <div class="gva-btn-list">
-        <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
-        <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增</el-button>
-        <el-popover v-model:visible="deleteVisible" placement="top" width="160">
-          <p>确定要删除吗？</p>
-          <div style="text-align: right; margin: 0">
-            <el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button>
-            <el-button size="mini" type="primary" @click="onDelete">确定</el-button>
-          </div>
-          <template #reference>
-            <el-button icon="el-icon-delete" size="mini" type="danger" style="margin-left: 10px;">批量删除</el-button>
-          </template>
-        </el-popover>
-      </div>
     </div>
-    <el-table
-      ref="multipleTable"
-      border
-      stripe
-      style="width: 100%"
-      tooltip-effect="dark"
-      :data="tableData"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" />
-      <el-table-column label="日期" width="180">
-        <template #default="scope">{{ "{{ formatDate(scope.row.CreatedAt) }}" }}</template>
-      </el-table-column>
-      {{- range .Fields}}
-      {{- if .DictType}}
-      <el-table-column label="{{.FieldDesc}}" prop="{{.FieldJson}}" width="120">
-        <template #default="scope">
-          {{"{{"}} filterDict(scope.row.{{.FieldJson}},"{{.DictType}}") {{"}}"}}
-        </template>
-      </el-table-column>
-      {{- else if eq .FieldType "bool" }}
-      <el-table-column label="{{.FieldDesc}}" prop="{{.FieldJson}}" width="120">
-        <template #default="scope">{{"{{"}} formatBoolean(scope.row.{{.FieldJson}}) {{"}}"}}</template>
-      </el-table-column> {{- else }}
-      <el-table-column label="{{.FieldDesc}}" prop="{{.FieldJson}}" width="120" />
-      {{- end }}
-      {{- end }}
-      <el-table-column label="按钮组">
-        <template #default="scope">
-          <el-button size="small" type="primary" icon="el-icon-edit" class="table-button" @click="update{{.StructName}}(scope.row)">变更</el-button>
-          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteRow(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      layout="total, sizes, prev, pager, next, jumper"
-      :current-page="page"
-      :page-size="pageSize"
-      :page-sizes="[10, 30, 50, 100]"
-      :style="{float:'right',padding:'20px'}"
-      :total="total"
-      @current-change="handleCurrentChange"
-      @size-change="handleSizeChange"
-    />
+    <div class="gva-table-box">
+        <div class="gva-btn-list">
+            <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增</el-button>
+            <el-popover v-model:visible="deleteVisible" placement="top" width="160">
+            <p>确定要删除吗？</p>
+            <div style="text-align: right; margin: 0">
+                <el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button>
+                <el-button size="mini" type="primary" @click="onDelete">确定</el-button>
+            </div>
+            <template #reference>
+                <el-button icon="el-icon-delete" size="mini" style="margin-left: 10px;">删除</el-button>
+            </template>
+            </el-popover>
+        </div>
+        <el-table
+        ref="multipleTable"
+        style="width: 100%"
+        tooltip-effect="dark"
+        :data="tableData"
+        @selection-change="handleSelectionChange"
+        >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="日期" width="180">
+            <template #default="scope">{{ "{{ formatDate(scope.row.CreatedAt) }}" }}</template>
+        </el-table-column>
+        {{- range .Fields}}
+        {{- if .DictType}}
+        <el-table-column label="{{.FieldDesc}}" prop="{{.FieldJson}}" width="120">
+            <template #default="scope">
+            {{"{{"}} filterDict(scope.row.{{.FieldJson}},"{{.DictType}}") {{"}}"}}
+            </template>
+        </el-table-column>
+        {{- else if eq .FieldType "bool" }}
+        <el-table-column label="{{.FieldDesc}}" prop="{{.FieldJson}}" width="120">
+            <template #default="scope">{{"{{"}} formatBoolean(scope.row.{{.FieldJson}}) {{"}}"}}</template>
+        </el-table-column> {{- else }}
+        <el-table-column label="{{.FieldDesc}}" prop="{{.FieldJson}}" width="120" />
+        {{- end }}
+        {{- end }}
+        <el-table-column label="按钮组">
+            <template #default="scope">
+            <el-button size="small" type="text" icon="el-icon-edit" class="table-button" @click="update{{.StructName}}(scope.row)">变更</el-button>
+            <el-button type="text" icon="el-icon-delete" size="mini" @click="deleteRow(scope.row)">删除</el-button>
+            </template>
+        </el-table-column>
+        </el-table>
+        <div class="gva-pagination">
+            <el-pagination
+            layout="total, sizes, prev, pager, next, jumper"
+            :current-page="page"
+            :page-size="pageSize"
+            :page-sizes="[10, 30, 50, 100]"
+            :total="total"
+            @current-change="handleCurrentChange"
+            @size-change="handleSizeChange"
+            />
+        </div>
+    </div>
     <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作">
       <el-form :model="formData" label-position="right" label-width="80px">
     {{- range .Fields}}
diff --git a/web/src/api/sysOperationRecord.js b/web/src/api/sysOperationRecord.js
index fb64245c..d9150c29 100644
--- a/web/src/api/sysOperationRecord.js
+++ b/web/src/api/sysOperationRecord.js
@@ -9,15 +9,15 @@ import service from '@/utils/request'
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"删除成功"}"
 // @Router /sysOperationRecord/deleteSysOperationRecord [delete]
 export const deleteSysOperationRecord = (data) => {
-  return service({
-    url: '/sysOperationRecord/deleteSysOperationRecord',
-    method: 'delete',
-    data
-  })
+    return service({
+        url: '/sysOperationRecord/deleteSysOperationRecord',
+        method: 'delete',
+        data
+    })
 }
 
 // @Tags SysOperationRecord
-// @Summary 批量删除SysOperationRecord
+// @Summary 删除SysOperationRecord
 // @Security ApiKeyAuth
 // @accept application/json
 // @Produce application/json
@@ -25,11 +25,11 @@ export const deleteSysOperationRecord = (data) => {
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"删除成功"}"
 // @Router /sysOperationRecord/deleteSysOperationRecord [delete]
 export const deleteSysOperationRecordByIds = (data) => {
-  return service({
-    url: '/sysOperationRecord/deleteSysOperationRecordByIds',
-    method: 'delete',
-    data
-  })
+    return service({
+        url: '/sysOperationRecord/deleteSysOperationRecordByIds',
+        method: 'delete',
+        data
+    })
 }
 
 // @Tags SysOperationRecord
@@ -41,9 +41,9 @@ export const deleteSysOperationRecordByIds = (data) => {
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"获取成功"}"
 // @Router /sysOperationRecord/getSysOperationRecordList [get]
 export const getSysOperationRecordList = (params) => {
-  return service({
-    url: '/sysOperationRecord/getSysOperationRecordList',
-    method: 'get',
-    params
-  })
-}
+    return service({
+        url: '/sysOperationRecord/getSysOperationRecordList',
+        method: 'get',
+        params
+    })
+}
\ No newline at end of file
diff --git a/web/src/api/workflowProcess.js b/web/src/api/workflowProcess.js
index 347df2a6..8e1ca4cb 100644
--- a/web/src/api/workflowProcess.js
+++ b/web/src/api/workflowProcess.js
@@ -9,11 +9,11 @@ import service from '@/utils/request'
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"获取成功"}"
 // @Router /workflowProcess/createWorkflowProcess [post]
 export const createWorkflowProcess = (data) => {
-  return service({
-    url: '/workflowProcess/createWorkflowProcess',
-    method: 'post',
-    data
-  })
+    return service({
+        url: '/workflowProcess/createWorkflowProcess',
+        method: 'post',
+        data
+    })
 }
 
 // @Tags WorkflowProcess
@@ -25,11 +25,11 @@ export const createWorkflowProcess = (data) => {
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"删除成功"}"
 // @Router /workflowProcess/deleteWorkflowProcess [delete]
 export const deleteWorkflowProcess = (data) => {
-  return service({
-    url: '/workflowProcess/deleteWorkflowProcess',
-    method: 'delete',
-    data
-  })
+    return service({
+        url: '/workflowProcess/deleteWorkflowProcess',
+        method: 'delete',
+        data
+    })
 }
 
 // @Tags WorkflowProcess
@@ -37,15 +37,15 @@ export const deleteWorkflowProcess = (data) => {
 // @Security ApiKeyAuth
 // @accept application/json
 // @Produce application/json
-// @Param data body request.IdsReq true "批量删除WorkflowProcess"
+// @Param data body request.IdsReq true "删除WorkflowProcess"
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"删除成功"}"
 // @Router /workflowProcess/deleteWorkflowProcess [delete]
 export const deleteWorkflowProcessByIds = (data) => {
-  return service({
-    url: '/workflowProcess/deleteWorkflowProcessByIds',
-    method: 'delete',
-    data
-  })
+    return service({
+        url: '/workflowProcess/deleteWorkflowProcessByIds',
+        method: 'delete',
+        data
+    })
 }
 
 // @Tags WorkflowProcess
@@ -57,11 +57,11 @@ export const deleteWorkflowProcessByIds = (data) => {
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"更新成功"}"
 // @Router /workflowProcess/updateWorkflowProcess [put]
 export const updateWorkflowProcess = (data) => {
-  return service({
-    url: '/workflowProcess/updateWorkflowProcess',
-    method: 'put',
-    data
-  })
+    return service({
+        url: '/workflowProcess/updateWorkflowProcess',
+        method: 'put',
+        data
+    })
 }
 
 // @Tags WorkflowProcess
@@ -73,11 +73,11 @@ export const updateWorkflowProcess = (data) => {
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"查询成功"}"
 // @Router /workflowProcess/findWorkflowProcess [get]
 export const findWorkflowProcess = (params) => {
-  return service({
-    url: '/workflowProcess/findWorkflowProcess',
-    method: 'get',
-    params
-  })
+    return service({
+        url: '/workflowProcess/findWorkflowProcess',
+        method: 'get',
+        params
+    })
 }
 
 // @Tags WorkflowProcess
@@ -89,11 +89,11 @@ export const findWorkflowProcess = (params) => {
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"获取成功"}"
 // @Router /workflowProcess/getWorkflowProcessList [get]
 export const getWorkflowProcessList = (params) => {
-  return service({
-    url: '/workflowProcess/getWorkflowProcessList',
-    method: 'get',
-    params
-  })
+    return service({
+        url: '/workflowProcess/getWorkflowProcessList',
+        method: 'get',
+        params
+    })
 }
 
 // @Tags WorkflowProcess
@@ -105,11 +105,11 @@ export const getWorkflowProcessList = (params) => {
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"查询成功"}"
 // @Router /workflowProcess/findWorkflowStep [get]
 export const findWorkflowStep = (params) => {
-  return service({
-    url: '/workflowProcess/findWorkflowStep',
-    method: 'get',
-    params
-  })
+    return service({
+        url: '/workflowProcess/findWorkflowStep',
+        method: 'get',
+        params
+    })
 }
 
 // @Tags ExaWfLeave
@@ -120,12 +120,12 @@ export const findWorkflowStep = (params) => {
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"获取成功"}"
 // @Router /workflowProcess/startWorkflow [post]
 export const startWorkflow = (data, params = { businessType: data.wf.businessType }) => {
-  return service({
-    url: '/workflowProcess/startWorkflow',
-    method: 'post',
-    data,
-    params
-  })
+    return service({
+        url: '/workflowProcess/startWorkflow',
+        method: 'post',
+        data,
+        params
+    })
 }
 
 // @Tags ExaWfLeave
@@ -136,12 +136,12 @@ export const startWorkflow = (data, params = { businessType: data.wf.businessTyp
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"获取成功"}"
 // @Router /workflowProcess/completeWorkflowMove [post]
 export const completeWorkflowMove = (data, params = { businessType: data.wf.businessType }) => {
-  return service({
-    url: '/workflowProcess/completeWorkflowMove',
-    method: 'post',
-    data,
-    params
-  })
+    return service({
+        url: '/workflowProcess/completeWorkflowMove',
+        method: 'post',
+        data,
+        params
+    })
 }
 
 // @Tags WorkflowProcess
@@ -152,10 +152,10 @@ export const completeWorkflowMove = (data, params = { businessType: data.wf.busi
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"获取成功"}"
 // @Router /workflowProcess/getMyStated [get]
 export const getMyStated = () => {
-  return service({
-    url: '/workflowProcess/getMyStated',
-    method: 'get'
-  })
+    return service({
+        url: '/workflowProcess/getMyStated',
+        method: 'get'
+    })
 }
 
 // @Tags WorkflowProcess
@@ -166,10 +166,10 @@ export const getMyStated = () => {
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"获取成功"}"
 // @Router /workflowProcess/getMyNeed [get]
 export const getMyNeed = () => {
-  return service({
-    url: '/workflowProcess/getMyNeed',
-    method: 'get'
-  })
+    return service({
+        url: '/workflowProcess/getMyNeed',
+        method: 'get'
+    })
 }
 
 // @Tags WorkflowProcess
@@ -181,9 +181,9 @@ export const getMyNeed = () => {
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"获取成功"}"
 // @Router /workflowProcess/getWorkflowMoveByID [get]
 export const getWorkflowMoveByID = (params) => {
-  return service({
-    url: '/workflowProcess/getWorkflowMoveByID',
-    method: 'get',
-    params
-  })
-}
+    return service({
+        url: '/workflowProcess/getWorkflowMoveByID',
+        method: 'get',
+        params
+    })
+}
\ No newline at end of file
diff --git a/web/src/style/animition.scss b/web/src/style/animition.scss
deleted file mode 100644
index 29833fe8..00000000
--- a/web/src/style/animition.scss
+++ /dev/null
@@ -1,1044 +0,0 @@
-body {
-    background-color: #fffaf0;
-}
-
-ul {
-    padding: 0;
-}
-
-li {
-    list-style: none;
-}
-
-.container {
-    background-image: linear-gradient(to top, #fcf3d8 30%, #eaafc8, #654ea3);
-    background-image: -webkit-linear-gradient(to bottom, #fcf3d8 30%, #eaafc8, #654ea3);
-    background-color: #654ea3;
-    height: 450px;
-    width: 450px;
-    border-radius: 100%;
-    position: relative;
-    transform: translate(-50%, -50%);
-    left: 50%;
-    top: 225px;
-    overflow: hidden;
-}
-
-.mountain-range {
-    position: absolute;
-    width: 100%;
-    height: 100px;
-    top: 50%;
-    display: flex;
-    justify-content: center;
-    padding: 0;
-}
-
-.mountain-range .mountain:nth-child(1) {
-    width: 0;
-    height: 0;
-    margin-top: 32px;
-    margin-left: -60%;
-    border-left: 183px solid transparent;
-    border-right: 183px solid transparent;
-    border-bottom: 91.5px solid #75bbff;
-}
-
-.mountain-range .mountain:nth-child(2) {
-    width: 0;
-    height: 0;
-    margin-top: 27px;
-    margin-left: -60%;
-    border-left: 195px solid transparent;
-    border-right: 195px solid transparent;
-    border-bottom: 97.5px solid #75bbff;
-}
-
-.mountain-range .mountain:nth-child(3) {
-    width: 0;
-    height: 0;
-    margin-top: 24px;
-    margin-left: -60%;
-    border-left: 198px solid transparent;
-    border-right: 198px solid transparent;
-    border-bottom: 99px solid #75bbff;
-}
-
-.mountain-range .mountain:nth-child(4) {
-    width: 0;
-    height: 0;
-    margin-top: 35px;
-    margin-left: -60%;
-    border-left: 154px solid transparent;
-    border-right: 154px solid transparent;
-    border-bottom: 77px solid #75bbff;
-}
-
-.mountain-range .mountain:nth-child(5) {
-    width: 0;
-    height: 0;
-    margin-top: 20px;
-    margin-left: -60%;
-    border-left: 150px solid transparent;
-    border-right: 150px solid transparent;
-    border-bottom: 75px solid #75bbff;
-}
-
-.mountain-range .mountain:nth-child(6) {
-    width: 0;
-    height: 0;
-    margin-top: 33px;
-    margin-left: -60%;
-    border-left: 198px solid transparent;
-    border-right: 198px solid transparent;
-    border-bottom: 99px solid #75bbff;
-}
-
-.mountain-range .mountain:nth-child(7) {
-    width: 0;
-    height: 0;
-    margin-top: 37px;
-    margin-left: -60%;
-    border-left: 152px solid transparent;
-    border-right: 152px solid transparent;
-    border-bottom: 76px solid #75bbff;
-}
-
-.mountain-range .mountain:nth-child(8) {
-    width: 0;
-    height: 0;
-    margin-top: 27px;
-    margin-left: -60%;
-    border-left: 166px solid transparent;
-    border-right: 166px solid transparent;
-    border-bottom: 83px solid #75bbff;
-}
-
-.forest {
-    position: absolute;
-    width: 100%;
-    height: 100px;
-    top: 65%;
-}
-
-.forest .hill {
-    position: absolute;
-    background-color: #82d9a2;
-}
-
-.forest .hill:nth-child(1) {
-    width: 600px;
-    height: 300px;
-    top: -10px;
-    left: -150px;
-    border-top-left-radius: 300px 150px;
-    border-top-right-radius: 300px 150px;
-    border-bottom-left-radius: 300px 150px;
-    border-bottom-right-radius: 300px 150px;
-    box-shadow: inset 20px 30px 50px #2d79a0;
-}
-
-.forest .hill:nth-child(2) {
-    width: 500px;
-    height: 250px;
-    top: -5px;
-    left: 100px;
-    border-top-left-radius: 250px 125px;
-    border-top-right-radius: 250px 125px;
-    border-bottom-left-radius: 250px 125px;
-    border-bottom-right-radius: 250px 125px;
-    box-shadow: inset 20px 30px 50px #2d79a0;
-}
-
-.forest .hill:nth-child(3) {
-    width: 500px;
-    height: 250px;
-    top: 17px;
-    left: -180px;
-    border-top-left-radius: 250px 125px;
-    border-top-right-radius: 250px 125px;
-    border-bottom-left-radius: 250px 125px;
-    border-bottom-right-radius: 250px 125px;
-    box-shadow: inset 20px 30px 50px #2d79a0;
-}
-
-.grass {
-    position: absolute;
-    width: 600px;
-    height: 300px;
-    border-radius: 300px / 150px;
-    top: 75%;
-    left: -100px;
-    background: #82d9a2;
-    box-shadow: inset 20px 30px 60px #2d79a0;
-}
-
-.pokemon {
-    position: absolute;
-    width: 300px;
-    height: 110px;
-    left: calc(53% - 150px);
-}
-
-.poke {
-    position: absolute;
-    width: 100px;
-    height: 100px;
-}
-
-#bulbasaur:before {
-    content: '';
-    position: absolute;
-    width: 100px;
-    height: 50px;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 100%;
-    top: 50px;
-    left: 15px;
-    transform: rotate(-15deg);
-}
-
-#bulbasaur .head {
-    position: absolute;
-    width: 60px;
-    height: 45px;
-    background-color: #00efd0;
-    border-top-left-radius: 50% 25px;
-    border-top-right-radius: 50% 25px;
-    border-bottom-left-radius: 18px;
-    border-bottom-right-radius: 18px;
-    left: 55px;
-}
-
-#bulbasaur .ear {
-    position: absolute;
-    height: 20px;
-    width: 23px;
-    background-color: #00efd0;
-    border-top-left-radius: 50px 90px;
-    border-top-right-radius: 50px 90px;
-    transform-origin: center bottom;
-}
-
-#bulbasaur .ear:nth-child(1) {
-    transform: rotate(-45deg);
-    left: 52px;
-    top: -5px;
-    animation: rotateLeftBulbEar 2s alternate infinite;
-}
-
-#bulbasaur .ear:nth-child(2) {
-    transform: rotate(45deg);
-    left: 87px;
-    top: -5px;
-    animation: rotateRightBulbEar 2s alternate infinite;
-}
-
-#bulbasaur .bulba-body {
-    position: relative;
-    width: 65px;
-    height: 55px;
-    background-color: #00efd0;
-    left: 42px;
-    top: 20px;
-    border-radius: 100%;
-    box-shadow: inset 10px -10px #00dbbe;
-    animation: bodyBreathe 2s alternate infinite;
-}
-
-#bulbasaur .bulba-body:before,
-#bulbasaur .bulba-body:after {
-    content: '';
-    position: absolute;
-}
-
-#bulbasaur .bulba-body:before {
-    width: 10px;
-    height: 13px;
-    top: 33px;
-    left: 8px;
-    background-color: #00c6ac;
-    border-bottom-left-radius: 100%;
-    border-bottom-right-radius: 30%;
-    border-top-right-radius: 30%;
-    border-top-left-radius: 50%;
-    transform: rotate(-45deg);
-}
-
-#bulbasaur .bulba-body:after {
-    width: 8px;
-    height: 8px;
-    top: 30px;
-    left: 53px;
-    background-color: #00dbbe;
-    border-bottom-left-radius: 100%;
-    border-bottom-right-radius: 30%;
-    border-top-right-radius: 30%;
-    border-top-left-radius: 50%;
-    transform: rotate(65deg);
-}
-
-#bulbasaur .leg {
-    position: absolute;
-    width: 20px;
-    height: 40px;
-    background-color: #00efd0;
-    border-bottom-left-radius: 35px 110%;
-    border-bottom-right-radius: 35px 110%;
-    box-shadow: inset 10px -20px #00d6ba;
-    left: 90px;
-    top: 30px;
-}
-
-#bulbasaur .bulbs {
-    position: absolute;
-    top: -1px;
-    width: 55px;
-    height: 55px;
-    left: 50px;
-    transform-origin: center;
-    transform: rotate(45deg);
-    z-index: 3;
-    animation: bulbaBreathe 2s alternate infinite;
-}
-
-#bulbasaur .bulbs:before,
-#bulbasaur .bulbs:after {
-    content: '';
-    position: absolute;
-    height: 45px;
-    width: 45px;
-    border-radius: 0 50% 50% 50%;
-}
-
-#bulbasaur .bulbs:before {
-    transform: translate(-5px, 10px) rotate(7deg);
-    background-color: #007061;
-}
-
-#bulbasaur .bulbs:after {
-    transform: translate(10px, -5px) rotate(-7deg);
-    background-color: #008a78;
-}
-
-#bulbasaur .bulb {
-    position: absolute;
-    top: 10px;
-    right: 2px;
-    left: 3px;
-    width: 90%;
-    height: 90%;
-    border-radius: 0 50% 100% 50%;
-    background-color: #00a38e;
-    z-index: 4;
-    box-shadow: inset 1px -5px #009480;
-}
-
-#pikachu {
-    left: -.1em;
-}
-
-#pikachu:before {
-    content: '';
-    position: absolute;
-    width: 60px;
-    height: 80px;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 100%;
-    top: 50px;
-    left: 115px;
-    transform: rotate(40deg);
-}
-
-#pikachu .ear {
-    position: absolute;
-    height: 40px;
-    width: 18px;
-    background-color: #fff069;
-    border-top-left-radius: 60px 150px;
-    border-top-right-radius: 60px 150px;
-    transform-origin: center bottom;
-    overflow: hidden;
-}
-
-#pikachu .ear:nth-child(1) {
-    transform: rotate(-35deg);
-    left: 125px;
-    top: -35px;
-    animation: rotateLeftEar 1s alternate infinite;
-}
-
-#pikachu .ear:nth-child(1):after {
-    content: '';
-    position: absolute;
-    background-color: #444;
-    width: 150%;
-    height: 15px;
-    left: -8px;
-    transform: rotate(-30deg);
-}
-
-#pikachu .ear:nth-child(2) {
-    transform: rotate(50deg);
-    left: 157px;
-    top: -30px;
-    animation: rotateRightEar 1s alternate infinite;
-}
-
-#pikachu .ear:nth-child(2):after {
-    content: '';
-    position: absolute;
-    background-color: #444;
-    width: 150%;
-    height: 15px;
-    left: 2px;
-    transform: rotate(30deg);
-}
-
-#pikachu .hand {
-    position: absolute;
-    height: 38px;
-    width: 15px;
-    background-color: #fff069;
-    border-top-left-radius: 60px 150px;
-    border-top-right-radius: 60px 150px;
-    transform-origin: center bottom;
-    left: 123px;
-    top: 5px;
-    z-index: 5;
-    transform: rotate(-40deg);
-    animation: pikaPat .7s alternate infinite;
-}
-
-#pikachu .head {
-    position: absolute;
-    width: 60px;
-    height: 45px;
-    background-color: #fff069;
-    border-top-left-radius: 50% 25px;
-    border-top-right-radius: 50% 25px;
-    border-bottom-left-radius: 18px;
-    border-bottom-right-radius: 18px;
-    left: 120px;
-    width: 60px;
-    height: 55px;
-    top: -12px;
-}
-
-#pikachu .pika-body {
-    position: absolute;
-    width: 55px;
-    height: 55px;
-    background-color: #fff069;
-    left: 122px;
-    top: 20px;
-    border-radius: 22px;
-}
-
-#pikachu .pika-body:before,
-#pikachu .pika-body:after {
-    content: '';
-    position: absolute;
-    background-color: #9c5200;
-    width: 70%;
-    height: 7px;
-    left: 13px;
-    border-radius: 100%;
-}
-
-#pikachu .pika-body:before {
-    top: 15px;
-    z-index: 2;
-}
-
-#pikachu .pika-body:after {
-    top: 30px;
-}
-
-#pikachu .pika-tail {
-    position: absolute;
-    height: 25px;
-    width: 16px;
-    background: #9c5200;
-    border-radius: 5px;
-    left: 150px;
-    top: 40px;
-    transform-origin: bottom center;
-    transform: rotate(55deg);
-    box-shadow: -2px 2px 1px rgba(68, 68, 68, 0.2);
-    z-index: 2;
-    animation: rotateTail 2s alternate infinite;
-}
-
-#pikachu .pika-tail:before,
-#pikachu .pika-tail:after {
-    content: '';
-    transform-origin: bottom center;
-    position: absolute;
-    background-color: #fff069;
-}
-
-#pikachu .pika-tail:before {
-    height: 1.45rem;
-    width: 1.4rem;
-    top: -2rem;
-    left: 0.25rem;
-    transform: rotate(-90deg);
-    border: 1px solid #9c5200;
-    border-bottom-right-radius: 5px;
-    z-index: 4;
-    border-top: 1px solid #fff069;
-}
-
-#pikachu .pika-tail:after {
-    background: #fff069;
-    height: 3rem;
-    width: 2rem;
-    top: -2.8rem;
-    left: -2.5rem;
-    border-radius: 5px 5px 0 5px;
-    border: 1px solid #9c5200;
-}
-
-.moon {
-    position: absolute;
-    width: 75px;
-    height: 75px;
-    background: #FFEFBA;
-    background: -webkit-linear-gradient(135deg, #FFFFFF, #FFEFBA);
-    background: linear-gradient(135deg, #FFFFFF, #FFEFBA);
-    border: 5px solid #fffaf0;
-    top: 10%;
-    left: calc(50% - 45px);
-    padding: 0;
-    border-radius: 100%;
-}
-
-.moon li {
-    position: absolute;
-    border-radius: 100%;
-}
-
-.moon li:nth-child(1) {
-    background: #ffe691;
-    background: -webkit-linear-gradient(45deg, rgba(255, 250, 240, 0.1), #ffe691);
-    background: linear-gradient(45deg, rgba(255, 250, 240, 0.1), #ffe691);
-    width: 20px;
-    height: 20px;
-    left: 5px;
-    top: 30px;
-}
-
-.moon li:nth-child(2) {
-    background: #ffe691;
-    background: -webkit-linear-gradient(to left, rgba(255, 250, 240, 0.1), #ffe691);
-    background: linear-gradient(to left, rgba(255, 250, 240, 0.1), #ffe691);
-    width: 35px;
-    height: 35px;
-    left: 35px;
-    top: 35px;
-}
-
-.moon li:nth-child(3) {
-    background: #ffe691;
-    background: -webkit-linear-gradient(-120deg, rgba(255, 250, 240, 0.1), #ffe691);
-    background: linear-gradient(-120deg, rgba(255, 250, 240, 0.1), #ffe691);
-    width: 25px;
-    height: 25px;
-    left: 25px;
-    top: 5px;
-}
-
-.sparkles {
-    position: absolute;
-    width: 120%;
-    height: 190px;
-    top: 30%;
-    left: -45px;
-}
-
-.sparkles .sparkle {
-    position: absolute;
-    width: 11px;
-    height: 11px;
-    border-radius: 100%;
-}
-
-.sparkles .sparkle:nth-child(1) {
-    background-color: #e9fbff;
-    box-shadow: 0px 0px 10px #e9fbff;
-}
-
-.sparkles .sparkle:nth-child(2) {
-    background-color: #e9fbff;
-    box-shadow: 0px 0px 10px #e9fbff;
-}
-
-.sparkles .sparkle:nth-child(3) {
-    background-color: #fffce6;
-    box-shadow: 0px 0px 10px #fffce6;
-}
-
-.sparkles .sparkle:nth-child(4) {
-    background-color: #e9fbff;
-    box-shadow: 0px 0px 10px #e9fbff;
-}
-
-.sparkles .sparkle:nth-child(5) {
-    background-color: #f3ffe4;
-    box-shadow: 0px 0px 10px #f3ffe4;
-}
-
-.sparkles .sparkle:nth-child(6) {
-    background-color: #fffce6;
-    box-shadow: 0px 0px 10px #fffce6;
-}
-
-.sparkles .sparkle:nth-child(7) {
-    background-color: #f3ffe4;
-    box-shadow: 0px 0px 10px #f3ffe4;
-}
-
-.sparkles .sparkle:nth-child(8) {
-    background-color: #f3ffe4;
-    box-shadow: 0px 0px 10px #f3ffe4;
-}
-
-.sparkles .sparkle:nth-child(9) {
-    background-color: #ffeefc;
-    box-shadow: 0px 0px 10px #ffeefc;
-}
-
-.sparkles .sparkle:nth-child(10) {
-    background-color: #fffce6;
-    box-shadow: 0px 0px 10px #fffce6;
-}
-
-.sparkles .sparkle:nth-child(11) {
-    background-color: #ffeefc;
-    box-shadow: 0px 0px 10px #ffeefc;
-}
-
-.sparkles .sparkle:nth-child(12) {
-    background-color: #f3ffe4;
-    box-shadow: 0px 0px 10px #f3ffe4;
-}
-
-.sparkles .sparkle:nth-child(13) {
-    background-color: #e9fbff;
-    box-shadow: 0px 0px 10px #e9fbff;
-}
-
-.sparkles .sparkle:nth-child(14) {
-    background-color: #f3ffe4;
-    box-shadow: 0px 0px 10px #f3ffe4;
-}
-
-.sparkles .sparkle:nth-child(15) {
-    background-color: #ffeefc;
-    box-shadow: 0px 0px 10px #ffeefc;
-}
-
-.sparkles .sparkle:nth-child(16) {
-    background-color: #f3ffe4;
-    box-shadow: 0px 0px 10px #f3ffe4;
-}
-
-.sparkles .sparkle:nth-child(17) {
-    background-color: #f3ffe4;
-    box-shadow: 0px 0px 10px #f3ffe4;
-}
-
-.sparkles .sparkle:nth-child(18) {
-    background-color: #ffeefc;
-    box-shadow: 0px 0px 10px #ffeefc;
-}
-
-.sparkles .sparkle:nth-child(19) {
-    background-color: #f3ffe4;
-    box-shadow: 0px 0px 10px #f3ffe4;
-}
-
-.sparkles .sparkle:nth-child(20) {
-    background-color: #ffeefc;
-    box-shadow: 0px 0px 10px #ffeefc;
-}
-
-.sparkles .sparkle:nth-child(21) {
-    background-color: #fffce6;
-    box-shadow: 0px 0px 10px #fffce6;
-}
-
-.sparkles .sparkle:nth-child(22) {
-    background-color: #f3ffe4;
-    box-shadow: 0px 0px 10px #f3ffe4;
-}
-
-.sparkles .sparkle:nth-child(23) {
-    background-color: #e9fbff;
-    box-shadow: 0px 0px 10px #e9fbff;
-}
-
-.sparkles .sparkle:nth-child(24) {
-    background-color: #fffce6;
-    box-shadow: 0px 0px 10px #fffce6;
-}
-
-.sparkles .sparkle:nth-child(25) {
-    background-color: #e9fbff;
-    box-shadow: 0px 0px 10px #e9fbff;
-}
-
-.sparkles .sparkle:nth-child(26) {
-    background-color: #ffeefc;
-    box-shadow: 0px 0px 10px #ffeefc;
-}
-
-.sparkles .sparkle:nth-child(27) {
-    background-color: #fffce6;
-    box-shadow: 0px 0px 10px #fffce6;
-}
-
-.sparkles .sparkle:nth-child(28) {
-    background-color: #e9fbff;
-    box-shadow: 0px 0px 10px #e9fbff;
-}
-
-.sparkles .sparkle:nth-child(29) {
-    background-color: #e9fbff;
-    box-shadow: 0px 0px 10px #e9fbff;
-}
-
-.sparkles .sparkle:nth-child(30) {
-    background-color: #ffeefc;
-    box-shadow: 0px 0px 10px #ffeefc;
-}
-
-.sparkles .sparkle:nth-child(31) {
-    background-color: #f3ffe4;
-    box-shadow: 0px 0px 10px #f3ffe4;
-}
-
-.sparkles .sparkle:nth-child(32) {
-    background-color: #f3ffe4;
-    box-shadow: 0px 0px 10px #f3ffe4;
-}
-
-.one {
-    left: 0;
-    top: 0;
-}
-
-@keyframes flyOne {
-    95% {
-        opacity: 1;
-    }
-    100% {
-        transform: translate(270px, 75px) scale(0);
-        opacity: 0;
-    }
-}
-
-.one:nth-child(1) {
-    animation: flyOne 15s 0s infinite;
-}
-
-.one:nth-child(2) {
-    animation: flyOne 15s 6.44s infinite;
-}
-
-.one:nth-child(3) {
-    animation: flyOne 15s 12.88s infinite;
-}
-
-.one:nth-child(4) {
-    animation: flyOne 15s 19.32s infinite;
-}
-
-.two {
-    right: 0;
-}
-
-@keyframes flyTwo {
-    95% {
-        opacity: 1;
-    }
-    100% {
-        transform: translate(-270px, 75px) scale(0);
-        opacity: 0;
-    }
-}
-
-.two:nth-child(5) {
-    animation: flyTwo 21s 2.7s infinite;
-}
-
-.two:nth-child(6) {
-    animation: flyTwo 21s 8s infinite;
-}
-
-.two:nth-child(7) {
-    animation: flyTwo 21s 13.3s infinite;
-}
-
-.two:nth-child(8) {
-    animation: flyTwo 21s 18.6s infinite;
-}
-
-.three {
-    left: 0;
-    top: 100%;
-}
-
-@keyframes flyThree {
-    95% {
-        opacity: 1;
-    }
-    100% {
-        transform: translate(270px, -75px) scale(0);
-        opacity: 0;
-    }
-}
-
-.three:nth-child(9) {
-    animation: flyThree 17s 1.4s infinite;
-}
-
-.three:nth-child(10) {
-    animation: flyThree 17s 9.9s infinite;
-}
-
-.three:nth-child(11) {
-    animation: flyThree 17s 18.4s infinite;
-}
-
-.three:nth-child(12) {
-    animation: flyThree 17s 26.9s infinite;
-}
-
-.four {
-    right: 0;
-    top: 100%;
-}
-
-@keyframes flyFour {
-    95% {
-        opacity: 1;
-    }
-    100% {
-        transform: translate(-270px, -75px) scale(0);
-        opacity: 0;
-    }
-}
-
-.four:nth-child(13) {
-    animation: flyFour 25s 5.8s infinite;
-}
-
-.four:nth-child(14) {
-    animation: flyFour 25s 10.4s infinite;
-}
-
-.four:nth-child(15) {
-    animation: flyFour 25s 15s infinite;
-}
-
-.four:nth-child(16) {
-    animation: flyFour 25s 19.6s infinite;
-}
-
-.five {
-    left: 0;
-    top: 50%;
-}
-
-@keyframes flyFive {
-    95% {
-        opacity: 1;
-    }
-    100% {
-        transform: translate(270px, 0px) scale(0);
-        opacity: 0;
-    }
-}
-
-.five:nth-child(17) {
-    animation: flyFive 35s 8.7s infinite;
-}
-
-.five:nth-child(18) {
-    animation: flyFive 35s 14.4s infinite;
-}
-
-.five:nth-child(19) {
-    animation: flyFive 35s 20.1s infinite;
-}
-
-.five:nth-child(20) {
-    animation: flyFive 35s 25.8s infinite;
-}
-
-.six {
-    right: 0;
-    top: 50%;
-}
-
-@keyframes flySix {
-    95% {
-        opacity: 1;
-    }
-    100% {
-        transform: translate(-270px, 0px) scale(0);
-        opacity: 0;
-    }
-}
-
-.six:nth-child(21) {
-    animation: flySix 23.5s 10.6s infinite;
-}
-
-.six:nth-child(22) {
-    animation: flySix 23.5s 15s infinite;
-}
-
-.six:nth-child(23) {
-    animation: flySix 23.5s 19.4s infinite;
-}
-
-.six:nth-child(24) {
-    animation: flySix 23.5s 23.8s infinite;
-}
-
-.seven {
-    left: 0;
-    top: 25%;
-}
-
-@keyframes flySeven {
-    95% {
-        opacity: 1;
-    }
-    100% {
-        transform: translate(270px, 37px) scale(0);
-        opacity: 0;
-    }
-}
-
-.seven:nth-child(25) {
-    animation: flySeven 29s 5s infinite;
-}
-
-.seven:nth-child(26) {
-    animation: flySeven 29s 12.67s infinite;
-}
-
-.seven:nth-child(27) {
-    animation: flySeven 29s 20.34s infinite;
-}
-
-.seven:nth-child(28) {
-    animation: flySeven 29s 28.01s infinite;
-}
-
-.eight {
-    right: 0;
-    top: 25%;
-}
-
-@keyframes flyEight {
-    95% {
-        opacity: 1;
-    }
-    100% {
-        transform: translate(-270px, 37px) scale(0);
-        opacity: 0;
-    }
-}
-
-.eight:nth-child(29) {
-    animation: flyEight 28.5s 1.6s infinite;
-}
-
-.eight:nth-child(30) {
-    animation: flyEight 28.5s 5.34s infinite;
-}
-
-.eight:nth-child(31) {
-    animation: flyEight 28.5s 9.08s infinite;
-}
-
-.eight:nth-child(32) {
-    animation: flyEight 28.5s 12.82s infinite;
-}
-
-@keyframes pikaPat {
-    from {
-        transform: rotate(-40deg);
-    }
-    to {
-        transform: rotate(-50deg);
-    }
-}
-
-@keyframes rotateTail {
-    from {
-        transform: rotate(55deg);
-    }
-    to {
-        transform: rotate(65deg);
-    }
-}
-
-@keyframes rotateLeftEar {
-    from {
-        transform: rotate(-35deg);
-    }
-    to {
-        transform: rotate(-40deg);
-    }
-}
-
-@keyframes rotateRightEar {
-    from {
-        transform: rotate(50deg);
-    }
-    to {
-        transform: rotate(60deg);
-    }
-}
-
-@keyframes bulbaBreathe {
-    from {
-        transform: rotate(45deg) scale(1);
-    }
-    to {
-        transform: rotate(45deg) scale(1.01);
-    }
-}
-
-@keyframes bodyBreathe {
-    from {
-        transform: scale(1);
-    }
-    to {
-        transform: scale(1.05);
-    }
-}
-
-@keyframes rotateLeftBulbEar {
-    from {
-        transform: rotate(-45deg);
-    }
-    to {
-        transform: rotate(-55deg);
-    }
-}
-
-@keyframes rotateRightBulbEar {
-    from {
-        transform: rotate(45deg);
-    }
-    to {
-        transform: rotate(55deg);
-    }
-}
\ No newline at end of file
diff --git a/web/src/style/base.scss b/web/src/style/base.scss
index 91c52758..33bd8922 100644
--- a/web/src/style/base.scss
+++ b/web/src/style/base.scss
@@ -59,16 +59,16 @@
     text-align: center;
 }
 
-.el-pager li.active{
+.el-pager li.active {
     color: #409EFF !important;
     border: 1px solid #409EFF;
 }
 
-.el-pager li.active+li{
-    border-left: 1px;
+.el-pager li.active+li {
+    border-left: 1px !important;
 }
 
-.el-pager li:hover{
+.el-pager li:hover {
     color: #409EFF !important;
     border: 1px solid #409EFF;
 }
\ No newline at end of file
diff --git a/web/src/style/main.scss b/web/src/style/main.scss
index e3418976..cb44d7b0 100644
--- a/web/src/style/main.scss
+++ b/web/src/style/main.scss
@@ -652,9 +652,6 @@ li {
         .el-sub-menu__title:hover span {
             color: #fff;
         }
-        .el-menu--inline {
-            // border-left: 5px solid #2c3b41;
-        }
     }
     .hideside {
         .aside {
@@ -720,26 +717,10 @@ li {
     }
 }
 
-.admin-box {
-    padding: 14px 20px;
-    .el-button {
-        padding: 7px 10px;
-    }
-    .el-input__inner {
-        height: 30px;
-        line-height: 30px;
-    }
-    .el-input__icon {
-        line-height: 30px;
-    }
-}
-
 .admin-box {
     min-height: calc(100vh - 200px);
-    background-color: $white-bg;
     padding: 14px;
-    margin: 114px 14px 20px;
-    border-radius: 2px;
+    margin: 100px 2px 20px;
     .el-table--border {
         border-radius: 4px;
         margin-bottom: 14px;
@@ -749,26 +730,30 @@ li {
             color: $color-table-thead;
         }
         th {
-            padding: 5px 0;
+            padding: 6px 0;
+            background: #F7FBFF;
             .cell {
-                min-height: 34px;
-                line-height: 34px;
+                color: rgba($color: #000000, $alpha: 0.85);
+                font-size: 14px;
+                min-height: 40px;
+                display: flex;
+                align-items: center;
             }
         }
         td {
-            padding: 8px 0;
+            padding: 6px 0;
+            .cell {
+                min-height: 40px;
+                display: flex;
+                align-items: center;
+                color: rgba($color: #000000, $alpha: 0.65);
+            }
         }
-        td,
-        th.is-leaf {
+        td.is-leaf {
             border-bottom: 1px solid #e8e8e8;
         }
-    }
-    .search-term {
-        border-left: none;
-        border-right: none;
-        padding: 0 5px;
-        .el-form-item {
-            margin-bottom: 10px;
+        th.is-leaf {
+            border-bottom: none;
         }
     }
     .el-pagination {
@@ -778,9 +763,6 @@ li {
     .upload {
         padding: 0;
     }
-    .system {
-        padding: 0;
-    }
     .el-form.el-form--inline {
         .el-form-item:last-child {
             margin-bottom: 0;
@@ -790,6 +772,16 @@ li {
     .edit {
         padding: 0;
     }
+    .el-input {
+        .el-input__suffix {
+            margin-top: -3px;
+        }
+    }
+    .el-input__inner {
+        border-color: rgba($color: #000000, $alpha: 0.15);
+        height: 32px;
+        border-radius: 2px;
+    }
 }
 
 .admin-box:after,
@@ -805,13 +797,6 @@ li {
     padding: 0 0 10px 0px;
 }
 
-.search-term {
-    background: $white-bg;
-    padding: 0 15px;
-    border-left: 1px solid #ebeef5;
-    border-right: 1px solid #ebeef5;
-}
-
 // table
 .has-gutter {
     tr {
@@ -833,7 +818,7 @@ li {
 
 .el-table th,
 .el-table tr {
-    background-color: #fafafa;
+    background-color: #ffffff;
 }
 
 .el-pagination {
@@ -886,36 +871,6 @@ li {
     }
 }
 
-// upload-demo
-.upload-demo,
-.upload {
-    .upload-box{
-        margin-bottom: 12px;
-        display: flex;
-        justify-content: flex-end;
-        .upload-btn{
-            margin-left: 12px;
-        }
-    }
-    background-color: $white-bg;
-    padding: 15px;
-    .el-upload-list__item-status-label {
-        right: 0;
-        left: 120px;
-    }
-    .el-upload__tip {
-        margin: 10px 0;
-    }
-}
-
-// system
-.system {
-    padding: 15px;
-    .el-input__inner {
-        width: 80%;
-    }
-}
-
 // .el-menu .el-menu--inline {
 //     background: #2c3b41;
 // }
@@ -973,14 +928,6 @@ li {
     //             border-bottom: 1px solid #e8e8e8;
     //         }
     //     }
-    //     .search-term {
-    //         border-left: none;
-    //         border-right: none;
-    //         padding: 0 5px;
-    //         .el-form-item {
-    //             margin-bottom: 10px;
-    //         }
-    //     }
     //     .el-pagination {
     //         padding: 20px 0 0 0;
     //     }
@@ -1049,11 +996,10 @@ li {
                     border: none;
                     border-left: 1px solid $border-color;
                     border-right: 1px solid $border-color;
-                    +.el-tabs__item{
+                    +.el-tabs__item {
                         border-left: 0px solid $border-color;
                     }
                 }
-                
                 .el-tabs__item.is-active {
                     background-color: rgba(64, 158, 255, .08);
                 }
@@ -1133,10 +1079,6 @@ li {
     font-size: 13px;
 }
 
-.table-button+span {
-    margin-left: 10px !important;
-}
-
 $headerHigh: 52px;
 $mainHight: 100vh;
 .dropdown-group {
@@ -1189,7 +1131,7 @@ $mainHight: 100vh;
         overflow: visible;
         position: relative;
         .menu-total {
-            margin-left:6px;
+            margin-left: 6px;
             cursor: pointer;
             float: left;
             margin-top: 10px;
@@ -1402,15 +1344,18 @@ $mainHight: 100vh;
     }
 }
 
-.gva-btn-list{
+.gva-btn-list {
     margin-bottom: 12px;
     display: flex;
-    justify-content: flex-end;
-    .el-button+.el-button{
+    .el-button+.el-button {
         margin-left: 12px;
     }
 }
 
+.justify-content-flex-end {
+    justify-content: flex-end;
+}
+
 ::-webkit-scrollbar-track-piece {
     background-color: #f8f8f8;
 }
@@ -1429,4 +1374,59 @@ $mainHight: 100vh;
 
 ::-webkit-scrollbar-thumb:hover {
     background-color: #bbb;
+}
+
+.el-button--primary {
+    --el-button-font-color: #ffffff;
+    --el-button-background-color: #4D70FF;
+    --el-button-border-color: #4D70FF;
+    --el-button-hover-color: #0d84ff;
+    --el-button-active-font-color: #e6e6e6;
+    --el-button-active-background-color: #0d84ff;
+    --el-button-active-border-color: #0d84ff;
+}
+
+.el-button--primary {
+    --el-button-font-color: #ffffff;
+    --el-button-background-color: #4D70FF;
+    --el-button-border-color: #4D70FF;
+    --el-button-hover-color: #0d84ff;
+    --el-button-active-font-color: #e6e6e6;
+    --el-button-active-background-color: #0d84ff;
+    --el-button-active-border-color: #0d84ff;
+}
+
+:root {
+    --el-color-primary: #4D70FF;
+}
+
+.gva-search-box {
+    padding: 24px;
+    padding-bottom: 2px;
+    background-color: #fff;
+    border-radius: 2px;
+    margin-bottom: 10px;
+}
+
+.gva-table-box {
+    padding: 24px;
+    background-color: #fff;
+    border-radius: 2px;
+}
+
+.gva-pagination {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.el-button--mini {
+    min-height: 32px;
+}
+
+.el-button {
+    padding: 8px 16px;
+    border-radius: 2px;
+    &.el-button--text {
+        padding: 8px 0;
+    }
 }
\ No newline at end of file
diff --git a/web/src/view/example/breakpoint/breakpoint.vue b/web/src/view/example/breakpoint/breakpoint.vue
index 3ea0caea..e58754cd 100644
--- a/web/src/view/example/breakpoint/breakpoint.vue
+++ b/web/src/view/example/breakpoint/breakpoint.vue
@@ -1,29 +1,32 @@
 <template>
-  <div class="hello">
-    <el-divider content-position="left">大文件上传</el-divider>
-    <form id="fromCont" method="post">
-      <div class="fileUpload" @click="inputChange">
-        选择文件
-        <input v-show="false" id="file" ref="Input" multiple="multiple" type="file" @change="choseFile">
-      </div>
-    </form>
-    <el-button :disabled="limitFileSize" type="primary" size="mini" class="uploadBtn" @click="getFile">上传文件</el-button>
-    <div class="el-upload__tip">请上传不超过5MB的文件</div>
-    <div class="list">
-      <transition name="list" tag="p">
-        <div v-if="file" class="list-item">
-          <i class="el-icon-document" />
-          <span>{{ file.name }}</span>
-          <span class="percentage">{{ percentage }}%</span>
-          <el-progress :show-text="false" :text-inside="false" :stroke-width="2" :percentage="percentage" />
+  <div class="break-point">
+    <div class="gva-table-box">
+      <el-divider content-position="left">大文件上传</el-divider>
+      <form id="fromCont" method="post">
+        <div class="fileUpload" @click="inputChange">
+          选择文件
+          <input v-show="false" id="file" ref="Input" multiple="multiple" type="file" @change="choseFile">
         </div>
-      </transition>
-    </div>
-    <!-- <span
+      </form>
+      <el-button :disabled="limitFileSize" type="primary" size="mini" class="uploadBtn" @click="getFile">上传文件</el-button>
+      <div class="el-upload__tip">请上传不超过5MB的文件</div>
+      <div class="list">
+        <transition name="list" tag="p">
+          <div v-if="file" class="list-item">
+            <i class="el-icon-document" />
+            <span>{{ file.name }}</span>
+            <span class="percentage">{{ percentage }}%</span>
+            <el-progress :show-text="false" :text-inside="false" :stroke-width="2" :percentage="percentage" />
+          </div>
+        </transition>
+      </div>
+      <!-- <span
       v-if="this.file"
     >{{Math.floor(((this.formDataList.length-this.waitNum)/this.formDataList.length)*100)}}%</span> -->
-    <div class="tips">此版本为先行体验功能测试版，样式美化和性能优化正在进行中，上传切片文件和合成的完整文件分别再QMPlusserver目录的breakpointDir文件夹和fileDir文件夹</div>
+      <div class="tips">此版本为先行体验功能测试版，样式美化和性能优化正在进行中，上传切片文件和合成的完整文件分别再QMPlusserver目录的breakpointDir文件夹和fileDir文件夹</div>
+    </div>
   </div>
+
 </template>
 
 <script>
@@ -35,7 +38,7 @@ import {
   removeChunk
 } from '@/api/breakpoint'
 export default {
-  name: 'HelloWorld',
+  name: 'BreakPoint',
   data() {
     return {
       file: null,
diff --git a/web/src/view/example/customer/customer.vue b/web/src/view/example/customer/customer.vue
index 942e59eb..00cd79ee 100644
--- a/web/src/view/example/customer/customer.vue
+++ b/web/src/view/example/customer/customer.vue
@@ -1,55 +1,53 @@
 <template>
   <div>
-    <div class="search-term">
+    <div class="gva-table-box">
       <div class="gva-btn-list">
         <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增</el-button>
       </div>
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        style="width: 100%"
+        tooltip-effect="dark"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="接入日期" width="180">
+          <template #default="scope">
+            <span>{{ formatDate(scope.row.CreatedAt) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="姓名" prop="customerName" width="120" />
+        <el-table-column label="电话" prop="customerPhoneData" width="120" />
+        <el-table-column label="接入人ID" prop="sysUserId" width="120" />
+        <el-table-column label="按钮组" min-width="160">
+          <template #default="scope">
+            <el-button size="small" type="text" @click="updateCustomer(scope.row)">变更</el-button>
+            <el-popover v-model:visible="scope.row.visible" placement="top" width="160">
+              <p>确定要删除吗？</p>
+              <div style="text-align: right; margin: 0">
+                <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
+                <el-button type="primary" size="mini" @click="deleteCustomer(scope.row)">确定</el-button>
+              </div>
+              <template #reference>
+                <el-button type="text" icon="el-icon-delete" size="mini">删除</el-button>
+              </template>
+            </el-popover>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="page"
+          :page-size="pageSize"
+          :page-sizes="[10, 30, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
     </div>
-    <el-table
-      ref="multipleTable"
-      :data="tableData"
-      border
-      stripe
-      style="width: 100%"
-      tooltip-effect="dark"
-    >
-      <el-table-column type="selection" width="55" />
-      <el-table-column label="接入日期" width="180">
-        <template #default="scope">
-          <span>{{ formatDate(scope.row.CreatedAt) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="姓名" prop="customerName" width="120" />
-      <el-table-column label="电话" prop="customerPhoneData" width="120" />
-      <el-table-column label="接入人ID" prop="sysUserId" width="120" />
-      <el-table-column label="按钮组" min-width="160">
-        <template #default="scope">
-          <el-button size="small" type="text" @click="updateCustomer(scope.row)">变更</el-button>
-          <el-popover v-model:visible="scope.row.visible" placement="top" width="160">
-            <p>确定要删除吗？</p>
-            <div style="text-align: right; margin: 0">
-              <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
-              <el-button type="primary" size="mini" @click="deleteCustomer(scope.row)">确定</el-button>
-            </div>
-            <template #reference>
-              <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
-            </template>
-          </el-popover>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <el-pagination
-      :current-page="page"
-      :page-size="pageSize"
-      :page-sizes="[10, 30, 50, 100]"
-      :style="{float:'right',padding:'20px'}"
-      :total="total"
-      layout="total, sizes, prev, pager, next, jumper"
-      @current-change="handleCurrentChange"
-      @size-change="handleSizeChange"
-    />
-
+    <div class="tips">在资源权限中将此角色的资源权限清空 或者不包含创建者的角色 即可屏蔽此客户资源的显示</div>
     <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="客户">
       <el-form :inline="true" :model="form" label-width="80px">
         <el-form-item label="客户名">
@@ -66,7 +64,6 @@
         </div>
       </template>
     </el-dialog>
-    <div class="tips">在资源权限中将此角色的资源权限清空 或者不包含创建者的角色 即可屏蔽此客户资源的显示</div>
   </div>
 </template>
 
diff --git a/web/src/view/example/excel/excel.vue b/web/src/view/example/excel/excel.vue
index 478c7bc2..1045f2ee 100644
--- a/web/src/view/example/excel/excel.vue
+++ b/web/src/view/example/excel/excel.vue
@@ -1,32 +1,35 @@
 <template>
   <div class="upload">
-    <div class="btn-list">
-      <el-upload
-        class="excel-btn"
-        :action="`${path}/excel/importExcel`"
-        :headers="{'x-token':token}"
-        :on-success="loadExcel"
-        :show-file-list="false"
-      >
-        <el-button size="mini" type="primary" icon="el-icon-upload2">导入</el-button>
-      </el-upload>
-      <el-button class="excel-btn" size="mini" type="primary" icon="el-icon-download" @click="handleExcelExport('ExcelExport.xlsx')">导出</el-button>
-      <el-button class="excel-btn" size="mini" type="success" icon="el-icon-download" @click="downloadExcelTemplate()">下载模板</el-button>
-    </div>
-    <el-table :data="tableData" border row-key="ID" stripe>
-      <el-table-column label="ID" min-width="100" prop="ID" />
-      <el-table-column label="路由Name" min-width="160" prop="name" />
-      <el-table-column label="路由Path" min-width="160" prop="path" />
-      <el-table-column label="是否隐藏" min-width="100" prop="hidden">
+    <div class="gva-table-box">
+
+      <div class="gva-btn-list">
+        <el-upload
+          class="excel-btn"
+          :action="`${path}/excel/importExcel`"
+          :headers="{'x-token':token}"
+          :on-success="loadExcel"
+          :show-file-list="false"
+        >
+          <el-button size="mini" type="primary" icon="el-icon-upload2">导入</el-button>
+        </el-upload>
+        <el-button class="excel-btn" size="mini" type="primary" icon="el-icon-download" @click="handleExcelExport('ExcelExport.xlsx')">导出</el-button>
+        <el-button class="excel-btn" size="mini" type="success" icon="el-icon-download" @click="downloadExcelTemplate()">下载模板</el-button>
+      </div>
+      <el-table :data="tableData" row-key="ID">
+        <el-table-column label="ID" min-width="100" prop="ID" />
+        <el-table-column label="路由Name" min-width="160" prop="name" />
+        <el-table-column label="路由Path" min-width="160" prop="path" />
+        <el-table-column label="是否隐藏" min-width="100" prop="hidden">
 
-        <template #default="scope">
-          <span>{{ scope.row.hidden?"隐藏":"显示" }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="父节点" min-width="90" prop="parentId" />
-      <el-table-column label="排序" min-width="70" prop="sort" />
-      <el-table-column label="文件路径" min-width="360" prop="component" />
-    </el-table>
+          <template #default="scope">
+            <span>{{ scope.row.hidden?"隐藏":"显示" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="父节点" min-width="90" prop="parentId" />
+        <el-table-column label="排序" min-width="70" prop="sort" />
+        <el-table-column label="文件路径" min-width="360" prop="component" />
+      </el-table>
+    </div>
   </div>
 </template>
 
@@ -75,8 +78,9 @@ export default {
   display: flex;
   margin-bottom: 12px;
   justify-content: flex-end;
-  .excel-btn+.excel-btn{
-    margin-left: 12px;
-  }
+
+}
+.excel-btn+.excel-btn{
+  margin-left: 10px;
 }
 </style>
diff --git a/web/src/view/example/upload/upload.vue b/web/src/view/example/upload/upload.vue
index 9103755b..86b00911 100644
--- a/web/src/view/example/upload/upload.vue
+++ b/web/src/view/example/upload/upload.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-loading.fullscreen.lock="fullscreenLoading">
-    <div class="upload">
-      <div class="upload-box">
+    <div class="gva-table-box">
+      <div class="gva-btn-list">
         <el-upload
           :action="`${path}/fileUploadAndDownload/upload`"
           :before-upload="checkFile"
@@ -22,7 +22,7 @@
         />
       </div>
 
-      <el-table :data="tableData" border stripe>
+      <el-table :data="tableData">
         <el-table-column label="预览" width="100">
           <template #default="scope">
             <CustomPic pic-type="file" :pic-src="scope.row.url" />
@@ -50,16 +50,18 @@
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination
-        :current-page="page"
-        :page-size="pageSize"
-        :page-sizes="[10, 30, 50, 100]"
-        :style="{ float: 'right', padding: '20px' }"
-        :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @current-change="handleCurrentChange"
-        @size-change="handleSizeChange"
-      />
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="page"
+          :page-size="pageSize"
+          :page-sizes="[10, 30, 50, 100]"
+          :style="{ float: 'right', padding: '20px' }"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -170,3 +172,8 @@ export default {
   }
 }
 </script>
+<style scoped>
+.upload-btn+.upload-btn {
+            margin-left: 12px;
+        }
+</style>
diff --git a/web/src/view/superAdmin/api/api.vue b/web/src/view/superAdmin/api/api.vue
index 372589cc..7d500b28 100644
--- a/web/src/view/superAdmin/api/api.vue
+++ b/web/src/view/superAdmin/api/api.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="search-term">
+    <div class="gva-search-box">
       <el-form :inline="true" :model="searchInfo">
         <el-form-item label="路径">
           <el-input v-model="searchInfo.path" placeholder="路径" />
@@ -21,9 +21,14 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item>
+          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
+        </el-form-item>
       </el-form>
+    </div>
+    <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
+
         <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog('addApi')">新增</el-button>
         <el-popover v-model:visible="deleteVisible" placement="top" width="160">
           <p>确定要删除吗？</p>
@@ -32,56 +37,51 @@
             <el-button size="mini" type="primary" @click="onDelete">确定</el-button>
           </div>
           <template #reference>
-            <el-button icon="el-icon-delete" size="mini" type="danger" style="margin-left: 10px;">批量删除</el-button>
+            <el-button icon="el-icon-delete" size="mini" style="margin-left: 10px;">删除</el-button>
           </template>
         </el-popover>
       </div>
-    </div>
-    <el-table :data="tableData" border stripe @sort-change="sortChange" @selection-change="handleSelectionChange">
-      <el-table-column
-        type="selection"
-        width="55"
-      />
-      <el-table-column label="id" min-width="60" prop="ID" sortable="custom" />
-      <el-table-column label="api路径" min-width="150" prop="path" sortable="custom" />
-      <el-table-column label="api分组" min-width="150" prop="apiGroup" sortable="custom" />
-      <el-table-column label="api简介" min-width="150" prop="description" sortable="custom" />
-      <el-table-column label="请求" min-width="150" prop="method" sortable="custom">
-        <template #default="scope">
-          <div>
-            {{ scope.row.method }}
-            <el-tag
-              :key="scope.row.methodFiletr"
-              :type="tagTypeFiletr(scope.row.method)"
-              effect="dark"
-              size="mini"
-            >{{ methodFiletr(scope.row.method) }}</el-tag>
-          </div>
-        </template>
-      </el-table-column>
+      <el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange">
+        <el-table-column
+          type="selection"
+          width="55"
+        />
+        <el-table-column label="id" min-width="60" prop="ID" sortable="custom" />
+        <el-table-column label="api路径" min-width="150" prop="path" sortable="custom" />
+        <el-table-column label="api分组" min-width="150" prop="apiGroup" sortable="custom" />
+        <el-table-column label="api简介" min-width="150" prop="description" sortable="custom" />
+        <el-table-column label="请求" min-width="150" prop="method" sortable="custom">
+          <template #default="scope">
+            <div>
+              {{ scope.row.method }} / {{ methodFiletr(scope.row.method) }}
+            </div>
+          </template>
+        </el-table-column>
 
-      <el-table-column fixed="right" label="操作" width="200">
-        <template #default="scope">
-          <el-button size="small" type="primary" icon="el-icon-edit" @click="editApi(scope.row)">编辑</el-button>
-          <el-button
-            size="small"
-            type="danger"
-            icon="el-icon-delete"
-            @click="deleteApi(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      :current-page="page"
-      :page-size="pageSize"
-      :page-sizes="[10, 30, 50, 100]"
-      :style="{float:'right',padding:'20px'}"
-      :total="total"
-      layout="total, sizes, prev, pager, next, jumper"
-      @current-change="handleCurrentChange"
-      @size-change="handleSizeChange"
-    />
+        <el-table-column fixed="right" label="操作" width="200">
+          <template #default="scope">
+            <el-button size="small" type="text" @click="editApi(scope.row)">编辑</el-button>
+            <el-button
+              size="small"
+              type="text"
+              @click="deleteApi(scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="page"
+          :page-size="pageSize"
+          :page-sizes="[10, 30, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+
+    </div>
 
     <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
       <el-form ref="apiForm" :inline="true" :model="form" :rules="rules" label-width="80px">
@@ -345,9 +345,6 @@ export default {
     float: right;
   }
 }
-.el-tag--mini {
-  margin-left: 5px;
-}
 .warning {
   color: #dc143c;
 }
diff --git a/web/src/view/superAdmin/authority/authority.vue b/web/src/view/superAdmin/authority/authority.vue
index 885b18b2..3ce6aa7c 100644
--- a/web/src/view/superAdmin/authority/authority.vue
+++ b/web/src/view/superAdmin/authority/authority.vue
@@ -1,48 +1,48 @@
 <template>
   <div class="authority">
-    <div class="gva-btn-list">
-      <el-button size="mini" type="primary" icon="el-icon-plus" @click="addAuthority('0')">新增角色</el-button>
+    <div class="gva-table-box">
+      <div class="gva-btn-list">
+        <el-button size="mini" type="primary" icon="el-icon-plus" @click="addAuthority('0')">新增角色</el-button>
+      </div>
+      <el-table
+        :data="tableData"
+        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+        row-key="authorityId"
+        style="width: 100%"
+      >
+        <el-table-column label="角色id" min-width="180" prop="authorityId" />
+        <el-table-column label="角色名称" min-width="180" prop="authorityName" />
+        <el-table-column label="操作" width="460">
+          <template #default="scope">
+            <el-button size="mini" type="text" @click="opdendrawer(scope.row)">设置权限</el-button>
+            <el-button
+              icon="el-icon-plus"
+              size="mini"
+              type="text"
+              @click="addAuthority(scope.row.authorityId)"
+            >新增子角色</el-button>
+            <el-button
+              icon="el-icon-copy-document"
+              size="mini"
+              type="text"
+              @click="copyAuthority(scope.row)"
+            >拷贝</el-button>
+            <el-button
+              icon="el-icon-edit"
+              size="mini"
+              type="text"
+              @click="editAuthority(scope.row)"
+            >编辑</el-button>
+            <el-button
+              icon="el-icon-delete"
+              size="mini"
+              type="text"
+              @click="deleteAuth(scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
-    <el-table
-      :data="tableData"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-      border
-      row-key="authorityId"
-      stripe
-      style="width: 100%"
-    >
-      <el-table-column label="角色id" min-width="180" prop="authorityId" />
-      <el-table-column label="角色名称" min-width="180" prop="authorityName" />
-      <el-table-column label="操作" width="460">
-        <template #default="scope">
-          <el-button size="mini" type="primary" @click="opdendrawer(scope.row)">设置权限</el-button>
-          <el-button
-            icon="el-icon-plus"
-            size="mini"
-            type="primary"
-            @click="addAuthority(scope.row.authorityId)"
-          >新增子角色</el-button>
-          <el-button
-            icon="el-icon-copy-document"
-            size="mini"
-            type="primary"
-            @click="copyAuthority(scope.row)"
-          >拷贝</el-button>
-          <el-button
-            icon="el-icon-edit"
-            size="mini"
-            type="primary"
-            @click="editAuthority(scope.row)"
-          >编辑</el-button>
-          <el-button
-            icon="el-icon-delete"
-            size="mini"
-            type="danger"
-            @click="deleteAuth(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
     <span style="color: red;font-size: 12px">注：右上角头像下拉可切换角色</span>
     <!-- 新增角色弹窗 -->
     <el-dialog v-model="dialogFormVisible" :title="dialogTitle">
diff --git a/web/src/view/superAdmin/dictionary/sysDictionary.vue b/web/src/view/superAdmin/dictionary/sysDictionary.vue
index 4bed737e..a91f8b33 100644
--- a/web/src/view/superAdmin/dictionary/sysDictionary.vue
+++ b/web/src/view/superAdmin/dictionary/sysDictionary.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="search-term">
+    <div class="gva-search-box">
       <el-form :inline="true" :model="searchInfo">
         <el-form-item label="字典名（中）">
           <el-input v-model="searchInfo.name" placeholder="搜索条件" />
@@ -17,64 +17,66 @@
         <el-form-item label="描述">
           <el-input v-model="searchInfo.desc" placeholder="搜索条件" />
         </el-form-item>
+        <el-form-item>
+          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
+        </el-form-item>
       </el-form>
+    </div>
+    <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
         <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增</el-button>
       </div>
-    </div>
-    <el-table
-      ref="multipleTable"
-      :data="tableData"
-      border
-      stripe
-      style="width: 100%"
-      tooltip-effect="dark"
-    >
-      <el-table-column type="selection" width="55" />
-      <el-table-column label="日期" width="180">
-        <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
-      </el-table-column>
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        style="width: 100%"
+        tooltip-effect="dark"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="日期" width="180">
+          <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
+        </el-table-column>
 
-      <el-table-column label="字典名（中）" prop="name" width="120" />
+        <el-table-column label="字典名（中）" prop="name" width="120" />
 
-      <el-table-column label="字典名（英）" prop="type" width="120" />
+        <el-table-column label="字典名（英）" prop="type" width="120" />
 
-      <el-table-column label="状态" prop="status" width="120">
-        <template #default="scope">{{ formatBoolean(scope.row.status) }}</template>
-      </el-table-column>
+        <el-table-column label="状态" prop="status" width="120">
+          <template #default="scope">{{ formatBoolean(scope.row.status) }}</template>
+        </el-table-column>
 
-      <el-table-column label="描述" prop="desc" width="280" />
+        <el-table-column label="描述" prop="desc" width="280" />
 
-      <el-table-column label="按钮组">
-        <template #default="scope">
-          <el-button size="mini" type="success" @click="toDetile(scope.row)">详情</el-button>
-          <el-button size="mini" type="primary" @click="updateSysDictionary(scope.row)">变更</el-button>
-          <el-popover v-model:visible="scope.row.visible" placement="top" width="160">
-            <p>确定要删除吗？</p>
-            <div style="text-align: right; margin: 0">
-              <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
-              <el-button type="primary" size="mini" @click="deleteSysDictionary(scope.row)">确定</el-button>
-            </div>
-            <template #reference>
-              <el-button type="danger" icon="el-icon-delete" size="mini" style="margin-left:10px">删除</el-button>
-            </template>
-          </el-popover>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <el-pagination
-      :current-page="page"
-      :page-size="pageSize"
-      :page-sizes="[10, 30, 50, 100]"
-      :style="{float:'right',padding:'20px'}"
-      :total="total"
-      layout="total, sizes, prev, pager, next, jumper"
-      @current-change="handleCurrentChange"
-      @size-change="handleSizeChange"
-    />
+        <el-table-column label="按钮组">
+          <template #default="scope">
+            <el-button size="mini" type="text" @click="toDetile(scope.row)">详情</el-button>
+            <el-button size="mini" type="text" @click="updateSysDictionary(scope.row)">变更</el-button>
+            <el-popover v-model:visible="scope.row.visible" placement="top" width="160">
+              <p>确定要删除吗？</p>
+              <div style="text-align: right; margin: 0">
+                <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
+                <el-button type="primary" size="mini" @click="deleteSysDictionary(scope.row)">确定</el-button>
+              </div>
+              <template #reference>
+                <el-button type="text" icon="el-icon-delete" size="mini" style="margin-left:10px">删除</el-button>
+              </template>
+            </el-popover>
+          </template>
+        </el-table-column>
+      </el-table>
 
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="page"
+          :page-size="pageSize"
+          :page-sizes="[10, 30, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
     <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作">
       <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="110px">
         <el-form-item label="字典名（中）" prop="name">
diff --git a/web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue b/web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue
index 68ffe4bf..de9718a7 100644
--- a/web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue
+++ b/web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="search-term">
+    <div class="gva-search-box">
       <el-form :inline="true" :model="searchInfo">
         <el-form-item label="展示值">
           <el-input v-model="searchInfo.label" placeholder="搜索条件" />
@@ -14,62 +14,65 @@
             <el-option key="false" label="否" value="false" />
           </el-select>
         </el-form-item>
+        <el-form-item>
+          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
+        </el-form-item>
       </el-form>
+    </div>
+    <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
         <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增字典项</el-button>
       </div>
-    </div>
-    <el-table
-      ref="multipleTable"
-      :data="tableData"
-      border
-      stripe
-      style="width: 100%"
-      tooltip-effect="dark"
-    >
-      <el-table-column type="selection" width="55" />
-      <el-table-column label="日期" width="180">
-        <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
-      </el-table-column>
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        style="width: 100%"
+        tooltip-effect="dark"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="日期" width="180">
+          <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
+        </el-table-column>
 
-      <el-table-column label="展示值" prop="label" width="120" />
+        <el-table-column label="展示值" prop="label" width="120" />
 
-      <el-table-column label="字典值" prop="value" width="120" />
+        <el-table-column label="字典值" prop="value" width="120" />
 
-      <el-table-column label="启用状态" prop="status" width="120">
-        <template #default="scope">{{ formatBoolean(scope.row.status) }}</template>
-      </el-table-column>
+        <el-table-column label="启用状态" prop="status" width="120">
+          <template #default="scope">{{ formatBoolean(scope.row.status) }}</template>
+        </el-table-column>
 
-      <el-table-column label="排序标记" prop="sort" width="120" />
+        <el-table-column label="排序标记" prop="sort" width="120" />
 
-      <el-table-column label="按钮组">
-        <template #default="scope">
-          <el-button size="small" type="primary" @click="updateSysDictionaryDetail(scope.row)">变更</el-button>
-          <el-popover v-model:visible="scope.row.visible" placement="top" width="160">
-            <p>确定要删除吗？</p>
-            <div style="text-align: right; margin: 0">
-              <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
-              <el-button type="primary" size="mini" @click="deleteSysDictionaryDetail(scope.row)">确定</el-button>
-            </div>
-            <template #reference>
-              <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
-            </template>
-          </el-popover>
-        </template>
-      </el-table-column>
-    </el-table>
+        <el-table-column label="按钮组">
+          <template #default="scope">
+            <el-button size="small" type="text" @click="updateSysDictionaryDetail(scope.row)">变更</el-button>
+            <el-popover v-model:visible="scope.row.visible" placement="top" width="160">
+              <p>确定要删除吗？</p>
+              <div style="text-align: right; margin: 0">
+                <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
+                <el-button type="primary" size="mini" @click="deleteSysDictionaryDetail(scope.row)">确定</el-button>
+              </div>
+              <template #reference>
+                <el-button type="text" icon="el-icon-delete" size="mini">删除</el-button>
+              </template>
+            </el-popover>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <el-pagination
-      :current-page="page"
-      :page-size="pageSize"
-      :page-sizes="[10, 30, 50, 100]"
-      :style="{float:'right',padding:'20px'}"
-      :total="total"
-      layout="total, sizes, prev, pager, next, jumper"
-      @current-change="handleCurrentChange"
-      @size-change="handleSizeChange"
-    />
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="page"
+          :page-size="pageSize"
+          :page-sizes="[10, 30, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
 
     <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作">
       <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="110px">
diff --git a/web/src/view/superAdmin/menu/menu.vue b/web/src/view/superAdmin/menu/menu.vue
index 739428ad..4704395a 100644
--- a/web/src/view/superAdmin/menu/menu.vue
+++ b/web/src/view/superAdmin/menu/menu.vue
@@ -1,57 +1,58 @@
 <template>
   <div>
-    <div class="gva-btn-list">
-      <el-button size="mini" type="primary" icon="el-icon-plus" @click="addMenu('0')">新增根菜单</el-button>
-    </div>
-
-    <!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
-    <el-table :data="tableData" border row-key="ID" stripe>
-      <el-table-column label="ID" min-width="100" prop="ID" />
-      <el-table-column label="路由Name" min-width="160" prop="name" />
-      <el-table-column label="路由Path" min-width="160" prop="path" />
-      <el-table-column label="是否隐藏" min-width="100" prop="hidden">
-        <template #default="scope">
-          <span>{{ scope.row.hidden?"隐藏":"显示" }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="父节点" min-width="90" prop="parentId" />
-      <el-table-column label="排序" min-width="70" prop="sort" />
-      <el-table-column label="文件路径" min-width="360" prop="component" />
-      <el-table-column label="展示名称" min-width="120" prop="authorityName">
-        <template #default="scope">
-          <span>{{ scope.row.meta.title }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="图标" min-width="140" prop="authorityName">
-        <template #default="scope">
-          <i :class="`el-icon-${scope.row.meta.icon}`" />
-          <span>{{ scope.row.meta.icon }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column fixed="right" label="操作" width="300">
-        <template #default="scope">
-          <el-button
-            size="mini"
-            type="primary"
-            icon="el-icon-edit"
-            @click="addMenu(scope.row.ID)"
-          >添加子菜单</el-button>
-          <el-button
-            size="mini"
-            type="primary"
-            icon="el-icon-edit"
-            @click="editMenu(scope.row.ID)"
-          >编辑</el-button>
-          <el-button
-            size="mini"
-            type="danger"
-            icon="el-icon-delete"
-            @click="deleteMenu(scope.row.ID)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div class="gva-table-box">
+      <div class="gva-btn-list">
+        <el-button size="mini" type="primary" icon="el-icon-plus" @click="addMenu('0')">新增根菜单</el-button>
+      </div>
 
+      <!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
+      <el-table :data="tableData" row-key="ID">
+        <el-table-column label="ID" min-width="100" prop="ID" />
+        <el-table-column label="路由Name" show-overflow-tooltip min-width="160" prop="name" />
+        <el-table-column label="路由Path" show-overflow-tooltip min-width="160" prop="path" />
+        <el-table-column label="是否隐藏" min-width="100" prop="hidden">
+          <template #default="scope">
+            <span>{{ scope.row.hidden?"隐藏":"显示" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="父节点" min-width="90" prop="parentId" />
+        <el-table-column label="排序" min-width="70" prop="sort" />
+        <el-table-column label="文件路径" min-width="360" prop="component" />
+        <el-table-column label="展示名称" min-width="120" prop="authorityName">
+          <template #default="scope">
+            <span>{{ scope.row.meta.title }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="图标" min-width="140" prop="authorityName">
+          <template #default="scope">
+            <i :class="`el-icon-${scope.row.meta.icon}`" />
+            <span>{{ scope.row.meta.icon }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" width="300">
+          <template #default="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="addMenu(scope.row.ID)"
+            >添加子菜单</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="editMenu(scope.row.ID)"
+            >编辑</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="deleteMenu(scope.row.ID)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
     <el-dialog v-model="dialogFormVisible" :before-close="handleClose" :title="dialogTitle">
       <el-form
         v-if="dialogFormVisible"
@@ -135,7 +136,7 @@
           icon="el-icon-edit"
           @click="addParameter(form)"
         >新增菜单参数</el-button>
-        <el-table :data="form.parameters" stripe style="width: 100%">
+        <el-table :data="form.parameters" style="width: 100%">
           <el-table-column prop="type" label="参数类型" width="180">
             <template #default="scope">
               <el-select v-model="scope.row.type" placeholder="请选择">
diff --git a/web/src/view/superAdmin/operation/sysOperationRecord.vue b/web/src/view/superAdmin/operation/sysOperationRecord.vue
index 8ce64c4c..35223ffb 100644
--- a/web/src/view/superAdmin/operation/sysOperationRecord.vue
+++ b/web/src/view/superAdmin/operation/sysOperationRecord.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="search-term">
+    <div class="gva-search-box">
       <el-form :inline="true" :model="searchInfo">
         <el-form-item label="请求方法">
           <el-input v-model="searchInfo.method" placeholder="搜索条件" />
@@ -11,9 +11,14 @@
         <el-form-item label="结果状态码">
           <el-input v-model="searchInfo.status" placeholder="搜索条件" />
         </el-form-item>
+        <el-form-item>
+          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
+        </el-form-item>
       </el-form>
+    </div>
+    <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
+
         <el-popover v-model:visible="deleteVisible" placement="top" width="160">
           <p>确定要删除吗？</p>
           <div style="text-align: right; margin: 0">
@@ -21,95 +26,94 @@
             <el-button size="mini" type="primary" @click="onDelete">确定</el-button>
           </div>
           <template #reference>
-            <el-button icon="el-icon-delete" size="mini" type="danger" style="margin-left: 10px;">批量删除</el-button>
+            <el-button icon="el-icon-delete" size="mini" style="margin-left: 10px;">删除</el-button>
           </template>
         </el-popover>
       </div>
-    </div>
-    <el-table
-      ref="multipleTable"
-      :data="tableData"
-      border
-      stripe
-      style="width: 100%"
-      tooltip-effect="dark"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" />
-      <el-table-column label="操作人" width="140">
-        <template #default="scope">
-          <div>{{ scope.row.user.userName }}({{ scope.row.user.nickName }})</div>
-        </template>
-      </el-table-column>
-      <el-table-column label="日期" width="180">
-        <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
-      </el-table-column>
-      <el-table-column label="状态码" prop="status" width="120">
-        <template #default="scope">
-          <div>
-            <el-tag type="success">{{ scope.row.status }}</el-tag>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="请求ip" prop="ip" width="120" />
-      <el-table-column label="请求方法" prop="method" width="120" />
-      <el-table-column label="请求路径" prop="path" width="240" />
-      <el-table-column label="请求" prop="path" width="80">
-        <template #default="scope">
-          <div>
-            <el-popover v-if="scope.row.body" placement="top-start" trigger="hover">
-              <div class="popover-box">
-                <pre>{{ fmtBody(scope.row.body) }}</pre>
-              </div>
-              <template #reference>
-                <i class="el-icon-view" />
-              </template>
-            </el-popover>
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        style="width: 100%"
+        tooltip-effect="dark"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="操作人" width="140">
+          <template #default="scope">
+            <div>{{ scope.row.user.userName }}({{ scope.row.user.nickName }})</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="日期" width="180">
+          <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
+        </el-table-column>
+        <el-table-column label="状态码" prop="status" width="120">
+          <template #default="scope">
+            <div>
+              <el-tag type="success">{{ scope.row.status }}</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="请求ip" prop="ip" width="120" />
+        <el-table-column label="请求方法" prop="method" width="120" />
+        <el-table-column label="请求路径" prop="path" width="240" />
+        <el-table-column label="请求" prop="path" width="80">
+          <template #default="scope">
+            <div>
+              <el-popover v-if="scope.row.body" placement="top-start" trigger="hover">
+                <div class="popover-box">
+                  <pre>{{ fmtBody(scope.row.body) }}</pre>
+                </div>
+                <template #reference>
+                  <i class="el-icon-view" />
+                </template>
+              </el-popover>
 
-            <span v-else>无</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="响应" prop="path" width="80">
-        <template #default="scope">
-          <div>
-            <el-popover v-if="scope.row.resp" placement="top-start" trigger="hover">
-              <div class="popover-box">
-                <pre>{{ fmtBody(scope.row.resp) }}</pre>
+              <span v-else>无</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="响应" prop="path" width="80">
+          <template #default="scope">
+            <div>
+              <el-popover v-if="scope.row.resp" placement="top-start" trigger="hover">
+                <div class="popover-box">
+                  <pre>{{ fmtBody(scope.row.resp) }}</pre>
+                </div>
+                <template #reference>
+                  <i class="el-icon-view" />
+                </template>
+              </el-popover>
+              <span v-else>无</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="按钮组">
+          <template #default="scope">
+            <el-popover v-model:visible="scope.row.visible" placement="top" width="160">
+              <p>确定要删除吗？</p>
+              <div style="text-align: right; margin: 0">
+                <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
+                <el-button size="mini" type="primary" @click="deleteSysOperationRecord(scope.row)">确定</el-button>
               </div>
               <template #reference>
-                <i class="el-icon-view" />
+                <el-button icon="el-icon-delete" size="mini" type="text">删除</el-button>
               </template>
             </el-popover>
-            <span v-else>无</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="按钮组">
-        <template #default="scope">
-          <el-popover v-model:visible="scope.row.visible" placement="top" width="160">
-            <p>确定要删除吗？</p>
-            <div style="text-align: right; margin: 0">
-              <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
-              <el-button size="mini" type="primary" @click="deleteSysOperationRecord(scope.row)">确定</el-button>
-            </div>
-            <template #reference>
-              <el-button icon="el-icon-delete" size="mini" type="danger">删除</el-button>
-            </template>
-          </el-popover>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      :current-page="page"
-      :page-size="pageSize"
-      :page-sizes="[10, 30, 50, 100]"
-      :style="{float:'right',padding:'20px'}"
-      :total="total"
-      layout="total, sizes, prev, pager, next, jumper"
-      @current-change="handleCurrentChange"
-      @size-change="handleSizeChange"
-    />
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="page"
+          :page-size="pageSize"
+          :page-sizes="[10, 30, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
diff --git a/web/src/view/superAdmin/user/user.vue b/web/src/view/superAdmin/user/user.vue
index 4303ee36..1a3e357c 100644
--- a/web/src/view/superAdmin/user/user.vue
+++ b/web/src/view/superAdmin/user/user.vue
@@ -1,60 +1,62 @@
 <template>
   <div>
-    <div class="gva-btn-list">
-      <el-button size="mini" type="primary" icon="el-icon-plus" @click="addUser">新增用户</el-button>
-    </div>
-    <el-table :data="tableData" border stripe>
-      <el-table-column label="头像" min-width="50">
-        <template #default="scope">
-          <div :style="{'textAlign':'center'}">
-            <CustomPic :pic-src="scope.row.headerImg" />
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="uuid" min-width="250" prop="uuid" />
-      <el-table-column label="用户名" min-width="150" prop="userName" />
-      <el-table-column label="昵称" min-width="150" prop="nickName" />
-      <el-table-column label="用户角色" min-width="150">
-        <template #default="scope">
-          <el-cascader
-            v-model="scope.row.authorityIds"
-            :options="authOptions"
-            :show-all-levels="false"
-            :props="{ multiple:true,checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
-            filterable
-            :clearable="false"
-            @visible-change="(flag)=>{changeAuthority(scope.row,flag)}"
-            @remove-tag="()=>{changeAuthority(scope.row,false)}"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" min-width="150">
-        <template #default="scope">
-          <el-popover v-model:visible="scope.row.visible" placement="top" width="160">
-            <p>确定要删除此用户吗</p>
-            <div style="text-align: right; margin: 0">
-              <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
-              <el-button type="primary" size="mini" @click="deleteUser(scope.row)">确定</el-button>
+    <div class="gva-table-box">
+      <div class="gva-btn-list">
+        <el-button size="mini" type="primary" icon="el-icon-plus" @click="addUser">新增用户</el-button>
+      </div>
+      <el-table :data="tableData">
+        <el-table-column label="头像" min-width="50">
+          <template #default="scope">
+            <div :style="{'textAlign':'center'}">
+              <CustomPic :pic-src="scope.row.headerImg" />
             </div>
-            <template #reference>
-              <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
-            </template>
-          </el-popover>
-        </template>
-      </el-table-column>
-    </el-table>
-    <span style="color: red;font-size: 12px">注：右上角头像下拉可切换角色</span>
-    <el-pagination
-      :current-page="page"
-      :page-size="pageSize"
-      :page-sizes="[10, 30, 50, 100]"
-      :style="{float:'right',padding:'20px'}"
-      :total="total"
-      layout="total, sizes, prev, pager, next, jumper"
-      @current-change="handleCurrentChange"
-      @size-change="handleSizeChange"
-    />
-
+          </template>
+        </el-table-column>
+        <el-table-column label="uuid" min-width="250" prop="uuid" />
+        <el-table-column label="用户名" min-width="150" prop="userName" />
+        <el-table-column label="昵称" min-width="150" prop="nickName" />
+        <el-table-column label="用户角色" min-width="150">
+          <template #default="scope">
+            <el-cascader
+              v-model="scope.row.authorityIds"
+              :options="authOptions"
+              :show-all-levels="false"
+              collapse-tags
+              :props="{ multiple:true,checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
+              :clearable="false"
+              @visible-change="(flag)=>{changeAuthority(scope.row,flag)}"
+              @remove-tag="()=>{changeAuthority(scope.row,false)}"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="150">
+          <template #default="scope">
+            <el-popover v-model:visible="scope.row.visible" placement="top" width="160">
+              <p>确定要删除此用户吗</p>
+              <div style="text-align: right; margin: 0">
+                <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
+                <el-button type="primary" size="mini" @click="deleteUser(scope.row)">确定</el-button>
+              </div>
+              <template #reference>
+                <el-button type="text" icon="el-icon-delete" size="mini">删除</el-button>
+              </template>
+            </el-popover>
+          </template>
+        </el-table-column>
+      </el-table>
+      <span style="color: red;font-size: 12px">注：右上角头像下拉可切换角色</span>
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="page"
+          :page-size="pageSize"
+          :page-sizes="[10, 30, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
     <el-dialog v-model="addUserDialog" custom-class="user-dialog" title="新增用户">
       <el-form ref="userForm" :rules="rules" :model="userInfo">
         <el-form-item label="用户名" label-width="80px" prop="username">
diff --git a/web/src/view/systemTools/autoCode/index.vue b/web/src/view/systemTools/autoCode/index.vue
index ce985a70..3640611f 100644
--- a/web/src/view/systemTools/autoCode/index.vue
+++ b/web/src/view/systemTools/autoCode/index.vue
@@ -1,136 +1,138 @@
 <template>
   <div>
     <!-- 从数据库直接获取字段 -->
-    <el-collapse v-model="activeNames">
-      <el-collapse-item name="1">
-        <template #title>
-          <div :style="{fontSize:'16px',paddingLeft:'20px'}">
-            点这里从现有数据库创建代码
-            <i class="header-icon el-icon-thumb" />
-          </div>
-        </template>
-        <el-form ref="getTableForm" :inline="true" :model="dbform" label-width="120px">
-          <el-form-item label="数据库名" prop="structName">
-            <el-select v-model="dbform.dbName" filterable placeholder="请选择数据库" @change="getTable">
-              <el-option
-                v-for="item in dbOptions"
-                :key="item.database"
-                :label="item.database"
-                :value="item.database"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="表名" prop="structName">
-            <el-select
-              v-model="dbform.tableName"
-              :disabled="!dbform.dbName"
-              filterable
-              placeholder="请选择表"
-            >
-              <el-option
-                v-for="item in tableOptions"
-                :key="item.tableName"
-                :label="item.tableName"
-                :value="item.tableName"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button size="mini" type="primary" @click="getColumn">使用此表创建</el-button>
-          </el-form-item>
-        </el-form>
-      </el-collapse-item>
-    </el-collapse>
-
-    <el-divider />
-    <!-- 初始版本自动化代码工具 -->
-    <el-form ref="autoCodeForm" :rules="rules" :model="form" label-width="120px" :inline="true">
-      <el-form-item label="Struct名称" prop="structName">
-        <el-input v-model="form.structName" placeholder="首字母自动转换大写" />
-      </el-form-item>
-      <el-form-item label="tableName" prop="tableName">
-        <el-input v-model="form.tableName" placeholder="指定表名（非必填）" />
-      </el-form-item>
-      <el-form-item label="Struct简称" prop="abbreviation">
-        <el-input v-model="form.abbreviation" placeholder="简称会作为入参对象名和路由group" />
-      </el-form-item>
-      <el-form-item label="Struct中文名称" prop="description">
-        <el-input v-model="form.description" placeholder="中文描述作为自动api描述" />
-      </el-form-item>
-      <el-form-item label="文件名称" prop="packageName">
-        <el-input v-model="form.packageName" placeholder="生成文件的默认名称(建议为驼峰格式,首字母小写,如sysXxxXxxx)" />
-      </el-form-item>
-      <el-form-item>
-        <template #label>
-          <el-tooltip content="注：把自动生成的API注册进数据库" placement="bottom" effect="light">
-            <div> 自动创建API </div>
-          </el-tooltip>
-        </template>
-        <el-checkbox v-model="form.autoCreateApiToSql" />
-      </el-form-item>
-      <el-form-item>
-        <template #label>
-          <el-tooltip content="注：自动迁移生成的文件到ymal配置的对应位置" placement="bottom" effect="light">
-            <div> 自动移动文件 </div>
-          </el-tooltip>
-        </template>
-        <el-checkbox v-model="form.autoMoveFile" />
-      </el-form-item>
-    </el-form>
-    <!-- 组件列表 -->
-    <div class="gva-btn-list">
-      <el-button size="mini" type="primary" @click="editAndAddField()">新增Field</el-button>
-    </div>
-    <el-table :data="form.fields" border stripe>
-      <el-table-column type="index" label="序列" width="100" />
-      <el-table-column prop="fieldName" label="Field名" />
-      <el-table-column prop="fieldDesc" label="中文名" />
-      <el-table-column prop="fieldJson" label="FieldJson" />
-      <el-table-column prop="fieldType" label="Field数据类型" width="130" />
-      <el-table-column prop="dataType" label="数据库字段类型" width="130" />
-      <el-table-column prop="dataTypeLong" label="数据库字段长度" width="130" />
-      <el-table-column prop="columnName" label="数据库字段" width="130" />
-      <el-table-column prop="comment" label="数据库字段描述" width="130" />
-      <el-table-column prop="fieldSearchType" label="搜索条件" width="130" />
-      <el-table-column prop="dictType" label="字典" width="130" />
-      <el-table-column label="操作" width="300">
-        <template #default="scope">
-          <el-button
-            size="mini"
-            type="primary"
-            icon="el-icon-edit"
-            @click="editAndAddField(scope.row)"
-          >编辑</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            :disabled="scope.$index === 0"
-            @click="moveUpField(scope.$index)"
-          >上移</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            :disabled="(scope.$index + 1) === form.fields.length"
-            @click="moveDownField(scope.$index)"
-          >下移</el-button>
-          <el-popover v-model:visible="scope.row.visible" placement="top">
-            <p>确定删除吗？</p>
-            <div style="text-align: right; margin: 0">
-              <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
-              <el-button type="primary" size="mini" @click="deleteField(scope.$index)">确定</el-button>
+    <div class="gva-search-box">
+      <el-collapse v-model="activeNames" style="margin-bottom:12px">
+        <el-collapse-item name="1">
+          <template #title>
+            <div :style="{fontSize:'16px',paddingLeft:'20px'}">
+              点这里从现有数据库创建代码
+              <i class="header-icon el-icon-thumb" />
             </div>
-            <template #reference>
-              <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
-            </template>
-          </el-popover>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-tag type="danger">id , created_at , updated_at , deleted_at 会自动生成请勿重复创建</el-tag>
+          </template>
+          <el-form ref="getTableForm" style="margin-top:24px" :inline="true" :model="dbform" label-width="120px">
+            <el-form-item label="数据库名" prop="structName">
+              <el-select v-model="dbform.dbName" filterable placeholder="请选择数据库" @change="getTable">
+                <el-option
+                  v-for="item in dbOptions"
+                  :key="item.database"
+                  :label="item.database"
+                  :value="item.database"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="表名" prop="structName">
+              <el-select
+                v-model="dbform.tableName"
+                :disabled="!dbform.dbName"
+                filterable
+                placeholder="请选择表"
+              >
+                <el-option
+                  v-for="item in tableOptions"
+                  :key="item.tableName"
+                  :label="item.tableName"
+                  :value="item.tableName"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button size="mini" type="primary" @click="getColumn">使用此表创建</el-button>
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+      </el-collapse>
+      <!-- 初始版本自动化代码工具 -->
+      <el-form ref="autoCodeForm" :rules="rules" :model="form" label-width="120px" :inline="true">
+        <el-form-item label="Struct名称" prop="structName">
+          <el-input v-model="form.structName" placeholder="首字母自动转换大写" />
+        </el-form-item>
+        <el-form-item label="tableName" prop="tableName">
+          <el-input v-model="form.tableName" placeholder="指定表名（非必填）" />
+        </el-form-item>
+        <el-form-item label="Struct简称" prop="abbreviation">
+          <el-input v-model="form.abbreviation" placeholder="简称会作为入参对象名和路由group" />
+        </el-form-item>
+        <el-form-item label="Struct中文名称" prop="description">
+          <el-input v-model="form.description" placeholder="中文描述作为自动api描述" />
+        </el-form-item>
+        <el-form-item label="文件名称" prop="packageName">
+          <el-input v-model="form.packageName" placeholder="生成文件的默认名称(建议为驼峰格式,首字母小写,如sysXxxXxxx)" />
+        </el-form-item>
+        <el-form-item>
+          <template #label>
+            <el-tooltip content="注：把自动生成的API注册进数据库" placement="bottom" effect="light">
+              <div> 自动创建API </div>
+            </el-tooltip>
+          </template>
+          <el-checkbox v-model="form.autoCreateApiToSql" />
+        </el-form-item>
+        <el-form-item>
+          <template #label>
+            <el-tooltip content="注：自动迁移生成的文件到ymal配置的对应位置" placement="bottom" effect="light">
+              <div> 自动移动文件 </div>
+            </el-tooltip>
+          </template>
+          <el-checkbox v-model="form.autoMoveFile" />
+        </el-form-item>
+      </el-form>
+    </div>
     <!-- 组件列表 -->
-    <div class="gva-btn-list">
-      <el-button size="mini" type="primary" @click="enterForm(true)">预览代码</el-button>
-      <el-button size="mini" type="primary" @click="enterForm(false)">生成代码</el-button>
+    <div class="gva-table-box">
+      <div class="gva-btn-list">
+        <el-button size="mini" type="primary" @click="editAndAddField()">新增Field</el-button>
+      </div>
+      <el-table :data="form.fields">
+        <el-table-column type="index" label="序列" width="100" />
+        <el-table-column prop="fieldName" label="Field名" />
+        <el-table-column prop="fieldDesc" label="中文名" />
+        <el-table-column prop="fieldJson" label="FieldJson" />
+        <el-table-column prop="fieldType" label="Field数据类型" width="130" />
+        <el-table-column prop="dataType" label="数据库字段类型" width="130" />
+        <el-table-column prop="dataTypeLong" label="数据库字段长度" width="130" />
+        <el-table-column prop="columnName" label="数据库字段" width="130" />
+        <el-table-column prop="comment" label="数据库字段描述" width="130" />
+        <el-table-column prop="fieldSearchType" label="搜索条件" width="130" />
+        <el-table-column prop="dictType" label="字典" width="130" />
+        <el-table-column label="操作" width="300">
+          <template #default="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="editAndAddField(scope.row)"
+            >编辑</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              :disabled="scope.$index === 0"
+              @click="moveUpField(scope.$index)"
+            >上移</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              :disabled="(scope.$index + 1) === form.fields.length"
+              @click="moveDownField(scope.$index)"
+            >下移</el-button>
+            <el-popover v-model:visible="scope.row.visible" placement="top">
+              <p>确定删除吗？</p>
+              <div style="text-align: right; margin: 0">
+                <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
+                <el-button type="primary" size="mini" @click="deleteField(scope.$index)">确定</el-button>
+              </div>
+              <template #reference>
+                <el-button size="mini" type="text" icon="el-icon-delete">删除</el-button>
+              </template>
+            </el-popover>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-tag type="danger" style="margin:12px 0;">id , created_at , updated_at , deleted_at 会自动生成请勿重复创建</el-tag>
+      <!-- 组件列表 -->
+      <div class="gva-btn-list justify-content-flex-end">
+        <el-button size="mini" type="primary" @click="enterForm(true)">预览代码</el-button>
+        <el-button size="mini" type="primary" @click="enterForm(false)">生成代码</el-button>
+      </div>
     </div>
     <!-- 组件弹窗 -->
     <el-dialog v-model="dialogFlag" title="组件内容">
diff --git a/web/src/view/systemTools/autoCodeAdmin/index.vue b/web/src/view/systemTools/autoCodeAdmin/index.vue
index 3bf721c4..9c18c812 100644
--- a/web/src/view/systemTools/autoCodeAdmin/index.vue
+++ b/web/src/view/systemTools/autoCodeAdmin/index.vue
@@ -1,63 +1,63 @@
 <template>
   <div>
-    <div class="search-term">
+    <div class="gva-table-box">
       <div class="gva-btn-list">
         <el-button size="mini" type="primary" icon="el-icon-plus" @click="goAutoCode(null)">新增</el-button>
       </div>
+      <el-table :data="tableData">
+        <el-table-column
+          type="selection"
+          width="55"
+        />
+        <el-table-column label="id" width="60" prop="ID" />
+        <el-table-column label="日期" width="180">
+          <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
+        </el-table-column>
+        <el-table-column label="结构体名" min-width="150" prop="structName" />
+        <el-table-column label="结构体描述" min-width="150" prop="structCNName" />
+        <el-table-column label="表名称" min-width="150" prop="tableName" />
+        <el-table-column label="回滚标记" min-width="150" prop="flag">
+          <template #default="scope">
+            <el-tag
+              v-if="scope.row.flag"
+              type="danger"
+              size="mini"
+              effect="dark"
+            >
+              已回滚
+            </el-tag>
+            <el-tag
+              v-else
+              size="mini"
+              type="success"
+              effect="dark"
+            >
+              未回滚
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="180">
+          <template #default="scope">
+            <div>
+              <el-button size="mini" type="text" :disabled="scope.row.flag === 1" @click="rollback(scope.row)">回滚</el-button>
+              <el-button size="mini" type="text" @click="goAutoCode(scope.row)">复用</el-button>
+              <el-button size="mini" type="text" @click="deleteRow(scope.row)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="page"
+          :page-size="pageSize"
+          :page-sizes="[10, 30, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
     </div>
-    <el-table :data="tableData" border stripe>
-      <el-table-column
-        type="selection"
-        width="55"
-      />
-      <el-table-column label="id" width="60" prop="ID" />
-      <el-table-column label="日期" width="180">
-        <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
-      </el-table-column>
-      <el-table-column label="结构体名" min-width="150" prop="structName" />
-      <el-table-column label="结构体描述" min-width="150" prop="structCNName" />
-      <el-table-column label="表名称" min-width="150" prop="tableName" />
-      <el-table-column label="回滚标记" min-width="150" prop="flag">
-        <template #default="scope">
-          <el-tag
-            v-if="scope.row.flag"
-            type="danger"
-            size="mini"
-            effect="dark"
-          >
-            已回滚
-          </el-tag>
-          <el-tag
-            v-else
-            size="mini"
-            type="success"
-            effect="dark"
-          >
-            未回滚
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" min-width="180">
-        <template #default="scope">
-          <div>
-            <el-button size="mini" type="primary" :disabled="scope.row.flag === 1" @click="rollback(scope.row)">回滚</el-button>
-            <el-button size="mini" type="success" @click="goAutoCode(scope.row)">复用</el-button>
-            <el-button size="mini" type="danger" @click="deleteRow(scope.row)">删除</el-button>
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      :current-page="page"
-      :page-size="pageSize"
-      :page-sizes="[10, 30, 50, 100]"
-      :style="{float:'right',padding:'20px'}"
-      :total="total"
-      layout="total, sizes, prev, pager, next, jumper"
-      @current-change="handleCurrentChange"
-      @size-change="handleSizeChange"
-    />
-
   </div>
 </template>
 
diff --git a/web/src/view/systemTools/system/system.vue b/web/src/view/systemTools/system/system.vue
index be994f9b..d4b662d1 100644
--- a/web/src/view/systemTools/system/system.vue
+++ b/web/src/view/systemTools/system/system.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="system">
-    <el-form ref="form" :model="config" label-width="100px" class="system">
+    <el-form ref="form" :model="config" label-width="100px">
       <!--  System start  -->
       <h2>系统配置</h2>
       <el-form-item label="环境值">
@@ -373,6 +373,9 @@ export default {
 
 <style lang="scss">
 .system {
+  background: #fff;
+  padding:12px;
+  border-radius: 2px;
   h2 {
     padding: 10px;
     margin: 10px 0;