From 02baf9d30823194c5d2742cf66b746b92343d365 Mon Sep 17 00:00:00 2001
From: waibao2 <1@qq.com>
Date: Fri, 28 Nov 2025 13:38:56 +0800
Subject: [PATCH] =?UTF-8?q?style:=E7=B3=BB=E7=BB=9F=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/message/value/index.vue      |   7 +-
 src/views/monitor/logininfor/index.vue | 366 ++++------
 src/views/monitor/operlog/index.vue    | 419 +++++------
 src/views/system/config/index.vue      | 464 ++++++------
 src/views/system/dept/index.vue        | 385 +++++-----
 src/views/system/dict/data.vue         | 536 +++++++-------
 src/views/system/dict/index.vue        | 479 ++++++-------
 src/views/system/menu/index.vue        | 457 ++++++------
 src/views/system/notice/index.vue      | 417 +++++------
 src/views/system/post/index.vue        | 422 +++++------
 src/views/system/role/index.vue        | 950 +++++++++++--------------
 11 files changed, 2154 insertions(+), 2748 deletions(-)

diff --git a/src/views/message/value/index.vue b/src/views/message/value/index.vue
index bb5a48c..9f0dfef 100644
--- a/src/views/message/value/index.vue
+++ b/src/views/message/value/index.vue
@@ -224,11 +224,8 @@
     const reset = () => {
         Object.assign(form, {
             id: null,
-            name: null,
-            deptId: null,
-            department: null,
-            phone: null,
-            remarks: null
+            stnmId: null,
+            value: null,
         });
         proxy.resetForm("formRef");
     }
diff --git a/src/views/monitor/logininfor/index.vue b/src/views/monitor/logininfor/index.vue
index bd58a5d..50965b3 100644
--- a/src/views/monitor/logininfor/index.vue
+++ b/src/views/monitor/logininfor/index.vue
@@ -1,225 +1,167 @@
 <template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-         <el-form-item label="登录地址" prop="ipaddr">
-            <el-input
-               v-model="queryParams.ipaddr"
-               placeholder="请输入登录地址"
-               clearable
-               style="width: 240px;"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="用户名称" prop="userName">
-            <el-input
-               v-model="queryParams.userName"
-               placeholder="请输入用户名称"
-               clearable
-               style="width: 240px;"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="状态" prop="status">
-            <el-select
-               v-model="queryParams.status"
-               placeholder="登录状态"
-               clearable
-               style="width: 240px"
-            >
-               <el-option
-                  v-for="dict in sys_common_status"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="登录时间" style="width: 308px">
-            <el-date-picker
-               v-model="dateRange"
-               value-format="YYYY-MM-DD HH:mm:ss"
-               type="daterange"
-               range-separator="-"
-               start-placeholder="开始日期"
-               end-placeholder="结束日期"
-               :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
-            ></el-date-picker>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
+   <div class="app-container app-container-bg">
+      <el-card class="first-card" ref='firstCard' shadow="always">
+         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+            <el-form-item label="登录地址" prop="ipaddr">
+               <el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable style="width: 240px;" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="用户名称" prop="userName">
+               <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px;" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+               <el-select v-model="queryParams.status" placeholder="登录状态" clearable style="width: 240px">
+                  <el-option v-for="dict in sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+               </el-select>
+            </el-form-item>
+            <el-form-item label="登录时间" style="width: 308px">
+               <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
+            </el-form-item>
+            <el-form-item>
+               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+         </el-form>
 
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['monitor:logininfor:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               @click="handleClean"
-               v-hasPermi="['monitor:logininfor:remove']"
-            >清空</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Unlock"
-               :disabled="single"
-               @click="handleUnlock"
-               v-hasPermi="['monitor:logininfor:unlock']"
-            >解锁</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['monitor:logininfor:export']"
-            >导出</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
+         <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+               <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:logininfor:remove']">删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="danger" plain icon="Delete" @click="handleClean" v-hasPermi="['monitor:logininfor:remove']">清空</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="primary" plain icon="Unlock" :disabled="single" @click="handleUnlock" v-hasPermi="['monitor:logininfor:unlock']">解锁</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['monitor:logininfor:export']">导出</el-button>
+            </el-col>
+            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+         </el-row>
+      </el-card>
 
-      <el-table ref="logininforRef" v-loading="loading" :data="logininforList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="访问编号" align="center" prop="infoId" />
-         <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
-         <el-table-column label="地址" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
-         <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
-         <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
-         <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
-         <el-table-column label="登录状态" align="center" prop="status">
-            <template #default="scope">
-               <dict-tag :options="sys_common_status" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="描述" align="center" prop="msg" :show-overflow-tooltip="true" />
-         <el-table-column label="访问时间" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.loginTime) }}</span>
-            </template>
-         </el-table-column>
-      </el-table>
+      <div class="el-card-p card-shadow carder-border mt10 pad10 ">
+         <el-table ref="logininforRef" v-table-height v-loading="loading" :data="logininforList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="访问编号" align="center" prop="infoId" />
+            <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
+            <el-table-column label="地址" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
+            <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
+            <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
+            <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
+            <el-table-column label="登录状态" align="center" prop="status">
+               <template #default="scope">
+                  <dict-tag :options="sys_common_status" :value="scope.row.status" />
+               </template>
+            </el-table-column>
+            <el-table-column label="描述" align="center" prop="msg" :show-overflow-tooltip="true" />
+            <el-table-column label="访问时间" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
+               <template #default="scope">
+                  <span>{{ parseTime(scope.row.loginTime) }}</span>
+               </template>
+            </el-table-column>
+         </el-table>
 
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
+         <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      </div>
    </div>
 </template>
 
 <script setup name="Logininfor">
-import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from "@/api/monitor/logininfor";
+   import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from "@/api/monitor/logininfor";
 
-const { proxy } = getCurrentInstance();
-const { sys_common_status } = proxy.useDict("sys_common_status");
+   const { proxy } = getCurrentInstance();
+   const { sys_common_status } = proxy.useDict("sys_common_status");
 
-const logininforList = ref([]);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const selectName = ref("");
-const total = ref(0);
-const dateRange = ref([]);
-const defaultSort = ref({ prop: "loginTime", order: "descending" });
+   const logininforList = ref([]);
+   const loading = ref(true);
+   const showSearch = ref(true);
+   const ids = ref([]);
+   const single = ref(true);
+   const multiple = ref(true);
+   const selectName = ref("");
+   const total = ref(0);
+   const dateRange = ref([]);
+   const defaultSort = ref({ prop: "loginTime", order: "descending" });
 
-// 查询参数
-const queryParams = ref({
-  pageNum: 1,
-  pageSize: 10,
-  ipaddr: undefined,
-  userName: undefined,
-  status: undefined,
-  orderByColumn: undefined,
-  isAsc: undefined
-});
+   // 查询参数
+   const queryParams = ref({
+      pageNum: 1,
+      pageSize: 10,
+      ipaddr: undefined,
+      userName: undefined,
+      status: undefined,
+      orderByColumn: undefined,
+      isAsc: undefined
+   });
 
-/** 查询登录日志列表 */
-function getList() {
-  loading.value = true;
-  list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    logininforList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
-}
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
-}
-/** 重置按钮操作 */
-function resetQuery() {
-  dateRange.value = [];
-  proxy.resetForm("queryRef");
-  queryParams.value.pageNum = 1;
-  proxy.$refs["logininforRef"].sort(defaultSort.value.prop, defaultSort.value.order);
-}
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.infoId);
-  multiple.value = !selection.length;
-  single.value = selection.length != 1;
-  selectName.value = selection.map(item => item.userName);
-}
-/** 排序触发事件 */
-function handleSortChange(column, prop, order) {
-  queryParams.value.orderByColumn = column.prop;
-  queryParams.value.isAsc = column.order;
-  getList();
-}
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const infoIds = row.infoId || ids.value;
-  proxy.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?').then(function () {
-    return delLogininfor(infoIds);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
-}
-/** 清空按钮操作 */
-function handleClean() {
-  proxy.$modal.confirm("是否确认清空所有登录日志数据项?").then(function () {
-    return cleanLogininfor();
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("清空成功");
-  }).catch(() => {});
-}
-/** 解锁按钮操作 */
-function handleUnlock() {
-  const username = selectName.value;
-  proxy.$modal.confirm('是否确认解锁用户"' + username + '"数据项?').then(function () {
-    return unlockLogininfor(username);
-  }).then(() => {
-    proxy.$modal.msgSuccess("用户" + username + "解锁成功");
-  }).catch(() => {});
-}
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("monitor/logininfor/export", {
-    ...queryParams.value,
-  }, `config_${new Date().getTime()}.xlsx`);
-}
+   /** 查询登录日志列表 */
+   function getList() {
+      loading.value = true;
+      list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+         logininforList.value = response.rows;
+         total.value = response.total;
+         loading.value = false;
+      });
+   }
+   /** 搜索按钮操作 */
+   function handleQuery() {
+      queryParams.value.pageNum = 1;
+      getList();
+   }
+   /** 重置按钮操作 */
+   function resetQuery() {
+      dateRange.value = [];
+      proxy.resetForm("queryRef");
+      queryParams.value.pageNum = 1;
+      proxy.$refs["logininforRef"].sort(defaultSort.value.prop, defaultSort.value.order);
+   }
+   /** 多选框选中数据 */
+   function handleSelectionChange(selection) {
+      ids.value = selection.map(item => item.infoId);
+      multiple.value = !selection.length;
+      single.value = selection.length != 1;
+      selectName.value = selection.map(item => item.userName);
+   }
+   /** 排序触发事件 */
+   function handleSortChange(column, prop, order) {
+      queryParams.value.orderByColumn = column.prop;
+      queryParams.value.isAsc = column.order;
+      getList();
+   }
+   /** 删除按钮操作 */
+   function handleDelete(row) {
+      const infoIds = row.infoId || ids.value;
+      proxy.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?').then(function () {
+         return delLogininfor(infoIds);
+      }).then(() => {
+         getList();
+         proxy.$modal.msgSuccess("删除成功");
+      }).catch(() => { });
+   }
+   /** 清空按钮操作 */
+   function handleClean() {
+      proxy.$modal.confirm("是否确认清空所有登录日志数据项?").then(function () {
+         return cleanLogininfor();
+      }).then(() => {
+         getList();
+         proxy.$modal.msgSuccess("清空成功");
+      }).catch(() => { });
+   }
+   /** 解锁按钮操作 */
+   function handleUnlock() {
+      const username = selectName.value;
+      proxy.$modal.confirm('是否确认解锁用户"' + username + '"数据项?').then(function () {
+         return unlockLogininfor(username);
+      }).then(() => {
+         proxy.$modal.msgSuccess("用户" + username + "解锁成功");
+      }).catch(() => { });
+   }
+   /** 导出按钮操作 */
+   function handleExport() {
+      proxy.download("monitor/logininfor/export", {
+         ...queryParams.value,
+      }, `config_${new Date().getTime()}.xlsx`);
+   }
 
-getList();
-</script>
+   getList();
+</script>
\ No newline at end of file
diff --git a/src/views/monitor/operlog/index.vue b/src/views/monitor/operlog/index.vue
index cb59a47..4b0071c 100644
--- a/src/views/monitor/operlog/index.vue
+++ b/src/views/monitor/operlog/index.vue
@@ -1,162 +1,93 @@
 <template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-         <el-form-item label="操作地址" prop="operIp">
-            <el-input
-               v-model="queryParams.operIp"
-               placeholder="请输入操作地址"
-               clearable
-               style="width: 240px;"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="系统模块" prop="title">
-            <el-input
-               v-model="queryParams.title"
-               placeholder="请输入系统模块"
-               clearable
-               style="width: 240px;"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="操作人员" prop="operName">
-            <el-input
-               v-model="queryParams.operName"
-               placeholder="请输入操作人员"
-               clearable
-               style="width: 240px;"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="类型" prop="businessType">
-            <el-select
-               v-model="queryParams.businessType"
-               placeholder="操作类型"
-               clearable
-               style="width: 240px"
-            >
-               <el-option
-                  v-for="dict in sys_oper_type"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="状态" prop="status">
-            <el-select
-               v-model="queryParams.status"
-               placeholder="操作状态"
-               clearable
-               style="width: 240px"
-            >
-               <el-option
-                  v-for="dict in sys_common_status"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="操作时间" style="width: 308px">
-            <el-date-picker
-               v-model="dateRange"
-               value-format="YYYY-MM-DD HH:mm:ss"
-               type="daterange"
-               range-separator="-"
-               start-placeholder="开始日期"
-               end-placeholder="结束日期"
-               :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
-            ></el-date-picker>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
+   <div class="app-container app-container-bg">
+      <el-card class="first-card" ref='firstCard' shadow="always">
+         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+            <el-form-item label="操作地址" prop="operIp">
+               <el-input v-model="queryParams.operIp" placeholder="请输入操作地址" clearable style="width: 240px;" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="系统模块" prop="title">
+               <el-input v-model="queryParams.title" placeholder="请输入系统模块" clearable style="width: 240px;" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="操作人员" prop="operName">
+               <el-input v-model="queryParams.operName" placeholder="请输入操作人员" clearable style="width: 240px;" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="类型" prop="businessType">
+               <el-select v-model="queryParams.businessType" placeholder="操作类型" clearable style="width: 240px">
+                  <el-option v-for="dict in sys_oper_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+               </el-select>
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+               <el-select v-model="queryParams.status" placeholder="操作状态" clearable style="width: 240px">
+                  <el-option v-for="dict in sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+               </el-select>
+            </el-form-item>
+            <el-form-item label="操作时间" style="width: 308px">
+               <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
+            </el-form-item>
+            <el-form-item>
+               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+         </el-form>
 
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['monitor:operlog:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               @click="handleClean"
-               v-hasPermi="['monitor:operlog:remove']"
-            >清空</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['monitor:operlog:export']"
-            >导出</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
+         <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+               <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:operlog:remove']">删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="danger" plain icon="Delete" @click="handleClean" v-hasPermi="['monitor:operlog:remove']">清空</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['monitor:operlog:export']">导出</el-button>
+            </el-col>
+            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+         </el-row>
+      </el-card>
 
-      <el-table ref="operlogRef" v-loading="loading" :data="operlogList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
-         <el-table-column type="selection" width="50" align="center" />
-         <el-table-column label="日志编号" align="center" prop="operId" />
-         <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
-         <el-table-column label="操作类型" align="center" prop="businessType">
-            <template #default="scope">
-               <dict-tag :options="sys_oper_type" :value="scope.row.businessType" />
-            </template>
-         </el-table-column>
-         <el-table-column label="操作人员" align="center" width="110" prop="operName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
-         <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
-         <el-table-column label="操作状态" align="center" prop="status">
-            <template #default="scope">
-               <dict-tag :options="sys_common_status" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="操作日期" align="center" prop="operTime" width="180" sortable="custom" :sort-orders="['descending', 'ascending']">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.operTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="消耗时间" align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']">
-            <template #default="scope">
-               <span>{{ scope.row.costTime }}毫秒</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="View" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">详细</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
+      <div class="el-card-p card-shadow carder-border mt10 pad10 ">
+         <el-table ref="operlogRef" v-table-height v-loading="loading" :data="operlogList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+            <el-table-column type="selection" width="50" align="center" />
+            <el-table-column label="日志编号" align="center" prop="operId" />
+            <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
+            <el-table-column label="操作类型" align="center" prop="businessType">
+               <template #default="scope">
+                  <dict-tag :options="sys_oper_type" :value="scope.row.businessType" />
+               </template>
+            </el-table-column>
+            <el-table-column label="操作人员" align="center" width="110" prop="operName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
+            <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
+            <el-table-column label="操作状态" align="center" prop="status">
+               <template #default="scope">
+                  <dict-tag :options="sys_common_status" :value="scope.row.status" />
+               </template>
+            </el-table-column>
+            <el-table-column label="操作日期" align="center" prop="operTime" width="180" sortable="custom" :sort-orders="['descending', 'ascending']">
+               <template #default="scope">
+                  <span>{{ parseTime(scope.row.operTime) }}</span>
+               </template>
+            </el-table-column>
+            <el-table-column label="消耗时间" align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']">
+               <template #default="scope">
+                  <span>{{ scope.row.costTime }}毫秒</span>
+               </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+               <template #default="scope">
+                  <el-button link type="primary" icon="View" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">详细</el-button>
+               </template>
+            </el-table-column>
+         </el-table>
 
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
+         <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
 
+      </div>
       <!-- 操作日志详细 -->
-      <el-dialog title="操作日志详细" v-model="open" width="800px" append-to-body>
+      <el-dialog class="custom-dialog" title="操作日志详细" v-model="open" width="800px" append-to-body>
          <el-form :model="form" label-width="100px">
             <el-row>
                <el-col :span="12">
                   <el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
-                  <el-form-item
-                    label="登录信息："
-                  >{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
+                  <el-form-item label="登录信息：">{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
                </el-col>
                <el-col :span="12">
                   <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
@@ -198,104 +129,104 @@
 </template>
 
 <script setup name="Operlog">
-import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog";
+   import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog";
 
-const { proxy } = getCurrentInstance();
-const { sys_oper_type, sys_common_status } = proxy.useDict("sys_oper_type","sys_common_status");
+   const { proxy } = getCurrentInstance();
+   const { sys_oper_type, sys_common_status } = proxy.useDict("sys_oper_type", "sys_common_status");
 
-const operlogList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-const dateRange = ref([]);
-const defaultSort = ref({ prop: "operTime", order: "descending" });
+   const operlogList = ref([]);
+   const open = ref(false);
+   const loading = ref(true);
+   const showSearch = ref(true);
+   const ids = ref([]);
+   const single = ref(true);
+   const multiple = ref(true);
+   const total = ref(0);
+   const title = ref("");
+   const dateRange = ref([]);
+   const defaultSort = ref({ prop: "operTime", order: "descending" });
 
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    operIp: undefined,
-    title: undefined,
-    operName: undefined,
-    businessType: undefined,
-    status: undefined
-  }
-});
+   const data = reactive({
+      form: {},
+      queryParams: {
+         pageNum: 1,
+         pageSize: 10,
+         operIp: undefined,
+         title: undefined,
+         operName: undefined,
+         businessType: undefined,
+         status: undefined
+      }
+   });
 
-const { queryParams, form } = toRefs(data);
+   const { queryParams, form } = toRefs(data);
 
-/** 查询登录日志 */
-function getList() {
-  loading.value = true;
-  list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    operlogList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
-}
-/** 操作日志类型字典翻译 */
-function typeFormat(row, column) {
-  return proxy.selectDictLabel(sys_oper_type.value, row.businessType);
-}
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
-}
-/** 重置按钮操作 */
-function resetQuery() {
-  dateRange.value = [];
-  proxy.resetForm("queryRef");
-  queryParams.value.pageNum = 1;
-  proxy.$refs["operlogRef"].sort(defaultSort.value.prop, defaultSort.value.order);
-}
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.operId);
-  multiple.value = !selection.length;
-}
-/** 排序触发事件 */
-function handleSortChange(column, prop, order) {
-  queryParams.value.orderByColumn = column.prop;
-  queryParams.value.isAsc = column.order;
-  getList();
-}
-/** 详细按钮操作 */
-function handleView(row) {
-  open.value = true;
-  form.value = row;
-}
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const operIds = row.operId || ids.value;
-  proxy.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项?').then(function () {
-    return delOperlog(operIds);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
-}
-/** 清空按钮操作 */
-function handleClean() {
-  proxy.$modal.confirm("是否确认清空所有操作日志数据项?").then(function () {
-    return cleanOperlog();
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("清空成功");
-  }).catch(() => {});
-}
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("monitor/operlog/export",{
-    ...queryParams.value,
-  }, `config_${new Date().getTime()}.xlsx`);
-}
+   /** 查询登录日志 */
+   function getList() {
+      loading.value = true;
+      list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+         operlogList.value = response.rows;
+         total.value = response.total;
+         loading.value = false;
+      });
+   }
+   /** 操作日志类型字典翻译 */
+   function typeFormat(row, column) {
+      return proxy.selectDictLabel(sys_oper_type.value, row.businessType);
+   }
+   /** 搜索按钮操作 */
+   function handleQuery() {
+      queryParams.value.pageNum = 1;
+      getList();
+   }
+   /** 重置按钮操作 */
+   function resetQuery() {
+      dateRange.value = [];
+      proxy.resetForm("queryRef");
+      queryParams.value.pageNum = 1;
+      proxy.$refs["operlogRef"].sort(defaultSort.value.prop, defaultSort.value.order);
+   }
+   /** 多选框选中数据 */
+   function handleSelectionChange(selection) {
+      ids.value = selection.map(item => item.operId);
+      multiple.value = !selection.length;
+   }
+   /** 排序触发事件 */
+   function handleSortChange(column, prop, order) {
+      queryParams.value.orderByColumn = column.prop;
+      queryParams.value.isAsc = column.order;
+      getList();
+   }
+   /** 详细按钮操作 */
+   function handleView(row) {
+      open.value = true;
+      form.value = row;
+   }
+   /** 删除按钮操作 */
+   function handleDelete(row) {
+      const operIds = row.operId || ids.value;
+      proxy.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项?').then(function () {
+         return delOperlog(operIds);
+      }).then(() => {
+         getList();
+         proxy.$modal.msgSuccess("删除成功");
+      }).catch(() => { });
+   }
+   /** 清空按钮操作 */
+   function handleClean() {
+      proxy.$modal.confirm("是否确认清空所有操作日志数据项?").then(function () {
+         return cleanOperlog();
+      }).then(() => {
+         getList();
+         proxy.$modal.msgSuccess("清空成功");
+      }).catch(() => { });
+   }
+   /** 导出按钮操作 */
+   function handleExport() {
+      proxy.download("monitor/operlog/export", {
+         ...queryParams.value,
+      }, `config_${new Date().getTime()}.xlsx`);
+   }
 
-getList();
-</script>
+   getList();
+</script>
\ No newline at end of file
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
index 34fd53d..b34e5fe 100644
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -1,134 +1,76 @@
 <template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-         <el-form-item label="参数名称" prop="configName">
-            <el-input
-               v-model="queryParams.configName"
-               placeholder="请输入参数名称"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="参数键名" prop="configKey">
-            <el-input
-               v-model="queryParams.configKey"
-               placeholder="请输入参数键名"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="系统内置" prop="configType">
-            <el-select v-model="queryParams.configType" placeholder="系统内置" clearable>
-               <el-option
-                  v-for="dict in sys_yes_no"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="创建时间" style="width: 308px;">
-            <el-date-picker
-               v-model="dateRange"
-               value-format="YYYY-MM-DD"
-               type="daterange"
-               range-separator="-"
-               start-placeholder="开始日期"
-               end-placeholder="结束日期"
-            ></el-date-picker>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
+   <div class="app-container app-container-bg">
+      <el-card class="first-card" ref='firstCard' shadow="always">
+         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+            <el-form-item label="参数名称" prop="configName">
+               <el-input v-model="queryParams.configName" placeholder="请输入参数名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="参数键名" prop="configKey">
+               <el-input v-model="queryParams.configKey" placeholder="请输入参数键名" clearable style="width: 240px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="系统内置" prop="configType">
+               <el-select v-model="queryParams.configType" placeholder="系统内置" clearable>
+                  <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
+               </el-select>
+            </el-form-item>
+            <el-form-item label="创建时间" style="width: 308px;">
+               <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+            </el-form-item>
+            <el-form-item>
+               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+         </el-form>
 
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:config:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="success"
-               plain
-               icon="Edit"
-               :disabled="single"
-               @click="handleUpdate"
-               v-hasPermi="['system:config:edit']"
-            >修改</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['system:config:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['system:config:export']"
-            >导出</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Refresh"
-               @click="handleRefreshCache"
-               v-hasPermi="['system:config:remove']"
-            >刷新缓存</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
+         <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+               <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:config:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:config:edit']">修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:config:remove']">删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:config:export']">导出</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="danger" plain icon="Refresh" @click="handleRefreshCache" v-hasPermi="['system:config:remove']">刷新缓存</el-button>
+            </el-col>
+            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+         </el-row>
+      </el-card>
 
-      <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="参数主键" align="center" prop="configId" />
-         <el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" />
-         <el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
-         <el-table-column label="参数键值" align="center" prop="configValue" :show-overflow-tooltip="true" />
-         <el-table-column label="系统内置" align="center" prop="configType">
-            <template #default="scope">
-               <dict-tag :options="sys_yes_no" :value="scope.row.configType" />
-            </template>
-         </el-table-column>
-         <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']" >修改</el-button>
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']">删除</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
+      <div class="el-card-p card-shadow carder-border mt10 pad10 ">
+         <el-table v-table-height v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="参数主键" align="center" prop="configId" />
+            <el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" />
+            <el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
+            <el-table-column label="参数键值" align="center" prop="configValue" :show-overflow-tooltip="true" />
+            <el-table-column label="系统内置" align="center" prop="configType">
+               <template #default="scope">
+                  <dict-tag :options="sys_yes_no" :value="scope.row.configType" />
+               </template>
+            </el-table-column>
+            <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+               <template #default="scope">
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
+               </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
+               <template #default="scope">
+                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']">修改</el-button>
+                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']">删除</el-button>
+               </template>
+            </el-table-column>
+         </el-table>
 
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
+         <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
 
+      </div>
       <!-- 添加或修改参数配置对话框 -->
       <el-dialog :title="title" v-model="open" width="500px" append-to-body>
          <el-form ref="configRef" :model="form" :rules="rules" label-width="80px">
@@ -143,11 +85,7 @@
             </el-form-item>
             <el-form-item label="系统内置" prop="configType">
                <el-radio-group v-model="form.configType">
-                  <el-radio
-                     v-for="dict in sys_yes_no"
-                     :key="dict.value"
-                     :label="dict.value"
-                  >{{ dict.label }}</el-radio>
+                  <el-radio v-for="dict in sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
                </el-radio-group>
             </el-form-item>
             <el-form-item label="备注" prop="remark">
@@ -165,141 +103,141 @@
 </template>
 
 <script setup name="Config">
-import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
+   import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
 
-const { proxy } = getCurrentInstance();
-const { sys_yes_no } = proxy.useDict("sys_yes_no");
+   const { proxy } = getCurrentInstance();
+   const { sys_yes_no } = proxy.useDict("sys_yes_no");
 
-const configList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-const dateRange = ref([]);
+   const configList = ref([]);
+   const open = ref(false);
+   const loading = ref(true);
+   const showSearch = ref(true);
+   const ids = ref([]);
+   const single = ref(true);
+   const multiple = ref(true);
+   const total = ref(0);
+   const title = ref("");
+   const dateRange = ref([]);
 
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    configName: undefined,
-    configKey: undefined,
-    configType: undefined
-  },
-  rules: {
-    configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
-    configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
-    configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
-  }
-});
+   const data = reactive({
+      form: {},
+      queryParams: {
+         pageNum: 1,
+         pageSize: 10,
+         configName: undefined,
+         configKey: undefined,
+         configType: undefined
+      },
+      rules: {
+         configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
+         configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
+         configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
+      }
+   });
 
-const { queryParams, form, rules } = toRefs(data);
+   const { queryParams, form, rules } = toRefs(data);
 
-/** 查询参数列表 */
-function getList() {
-  loading.value = true;
-  listConfig(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    configList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
-}
-/** 取消按钮 */
-function cancel() {
-  open.value = false;
-  reset();
-}
-/** 表单重置 */
-function reset() {
-  form.value = {
-    configId: undefined,
-    configName: undefined,
-    configKey: undefined,
-    configValue: undefined,
-    configType: "Y",
-    remark: undefined
-  };
-  proxy.resetForm("configRef");
-}
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
-}
-/** 重置按钮操作 */
-function resetQuery() {
-  dateRange.value = [];
-  proxy.resetForm("queryRef");
-  handleQuery();
-}
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.configId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
-/** 新增按钮操作 */
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加参数";
-}
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset();
-  const configId = row.configId || ids.value;
-  getConfig(configId).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改参数";
-  });
-}
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["configRef"].validate(valid => {
-    if (valid) {
-      if (form.value.configId != undefined) {
-        updateConfig(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addConfig(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
-}
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const configIds = row.configId || ids.value;
-  proxy.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？').then(function () {
-    return delConfig(configIds);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
-}
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("system/config/export", {
-    ...queryParams.value
-  }, `config_${new Date().getTime()}.xlsx`);
-}
-/** 刷新缓存按钮操作 */
-function handleRefreshCache() {
-  refreshCache().then(() => {
-    proxy.$modal.msgSuccess("刷新缓存成功");
-  });
-}
+   /** 查询参数列表 */
+   function getList() {
+      loading.value = true;
+      listConfig(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+         configList.value = response.rows;
+         total.value = response.total;
+         loading.value = false;
+      });
+   }
+   /** 取消按钮 */
+   function cancel() {
+      open.value = false;
+      reset();
+   }
+   /** 表单重置 */
+   function reset() {
+      form.value = {
+         configId: undefined,
+         configName: undefined,
+         configKey: undefined,
+         configValue: undefined,
+         configType: "Y",
+         remark: undefined
+      };
+      proxy.resetForm("configRef");
+   }
+   /** 搜索按钮操作 */
+   function handleQuery() {
+      queryParams.value.pageNum = 1;
+      getList();
+   }
+   /** 重置按钮操作 */
+   function resetQuery() {
+      dateRange.value = [];
+      proxy.resetForm("queryRef");
+      handleQuery();
+   }
+   /** 多选框选中数据 */
+   function handleSelectionChange(selection) {
+      ids.value = selection.map(item => item.configId);
+      single.value = selection.length != 1;
+      multiple.value = !selection.length;
+   }
+   /** 新增按钮操作 */
+   function handleAdd() {
+      reset();
+      open.value = true;
+      title.value = "添加参数";
+   }
+   /** 修改按钮操作 */
+   function handleUpdate(row) {
+      reset();
+      const configId = row.configId || ids.value;
+      getConfig(configId).then(response => {
+         form.value = response.data;
+         open.value = true;
+         title.value = "修改参数";
+      });
+   }
+   /** 提交按钮 */
+   function submitForm() {
+      proxy.$refs["configRef"].validate(valid => {
+         if (valid) {
+            if (form.value.configId != undefined) {
+               updateConfig(form.value).then(response => {
+                  proxy.$modal.msgSuccess("修改成功");
+                  open.value = false;
+                  getList();
+               });
+            } else {
+               addConfig(form.value).then(response => {
+                  proxy.$modal.msgSuccess("新增成功");
+                  open.value = false;
+                  getList();
+               });
+            }
+         }
+      });
+   }
+   /** 删除按钮操作 */
+   function handleDelete(row) {
+      const configIds = row.configId || ids.value;
+      proxy.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？').then(function () {
+         return delConfig(configIds);
+      }).then(() => {
+         getList();
+         proxy.$modal.msgSuccess("删除成功");
+      }).catch(() => { });
+   }
+   /** 导出按钮操作 */
+   function handleExport() {
+      proxy.download("system/config/export", {
+         ...queryParams.value
+      }, `config_${new Date().getTime()}.xlsx`);
+   }
+   /** 刷新缓存按钮操作 */
+   function handleRefreshCache() {
+      refreshCache().then(() => {
+         proxy.$modal.msgSuccess("刷新缓存成功");
+      });
+   }
 
-getList();
-</script>
+   getList();
+</script>
\ No newline at end of file
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index d073a26..4e28d91 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,80 +1,54 @@
 <template>
    <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
-         <el-form-item label="部门名称" prop="deptName">
-            <el-input
-               v-model="queryParams.deptName"
-               placeholder="请输入部门名称"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="状态" prop="status">
-            <el-select v-model="queryParams.status" placeholder="部门状态" clearable style="width: 200px">
-               <el-option
-                  v-for="dict in sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:dept:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="info"
-               plain
-               icon="Sort"
-               @click="toggleExpandAll"
-            >展开/折叠</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
+      <el-card class="first-card" ref='firstCard' shadow="always">
+         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+            <el-form-item label="部门名称" prop="deptName">
+               <el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable style="width: 200px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+               <el-select v-model="queryParams.status" placeholder="部门状态" clearable style="width: 200px">
+                  <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+               </el-select>
+            </el-form-item>
+            <el-form-item>
+               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+         </el-form>
 
-      <el-table
-         v-if="refreshTable"
-         v-loading="loading"
-         :data="deptList"
-         row-key="deptId"
-         :default-expand-all="isExpandAll"
-         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-      >
-         <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
-         <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
-         <el-table-column prop="status" label="状态" width="100">
-            <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="创建时间" align="center" prop="createTime" width="200">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']">修改</el-button>
-               <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']">新增</el-button>
-               <el-button v-if="scope.row.parentId != 0" link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
+         <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+               <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:dept:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
+            </el-col>
+            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+         </el-row>
+      </el-card>
+      <div class="el-card-p card-shadow carder-border mt10 pad10 ">
+         <el-table v-if="refreshTable" v-loading="loading" :data="deptList" row-key="deptId" :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+            <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
+            <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
+            <el-table-column prop="status" label="状态" width="100">
+               <template #default="scope">
+                  <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+               </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center" prop="createTime" width="200">
+               <template #default="scope">
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
+               </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+               <template #default="scope">
+                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']">修改</el-button>
+                  <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']">新增</el-button>
+                  <el-button v-if="scope.row.parentId != 0" link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除</el-button>
+               </template>
+            </el-table-column>
+         </el-table>
+      </div>
 
       <!-- 添加或修改部门对话框 -->
       <el-dialog :title="title" v-model="open" width="600px" append-to-body>
@@ -82,14 +56,7 @@
             <el-row>
                <el-col :span="24" v-if="form.parentId !== 0">
                   <el-form-item label="上级部门" prop="parentId">
-                     <el-tree-select
-                        v-model="form.parentId"
-                        :data="deptOptions"
-                        :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
-                        value-key="deptId"
-                        placeholder="选择上级部门"
-                        check-strictly
-                     />
+                     <el-tree-select v-model="form.parentId" :data="deptOptions" :props="{ value: 'deptId', label: 'deptName', children: 'children' }" value-key="deptId" placeholder="选择上级部门" check-strictly />
                   </el-form-item>
                </el-col>
                <el-col :span="12">
@@ -120,11 +87,7 @@
                <el-col :span="12">
                   <el-form-item label="部门状态">
                      <el-radio-group v-model="form.status">
-                        <el-radio
-                           v-for="dict in sys_normal_disable"
-                           :key="dict.value"
-                           :label="dict.value"
-                        >{{ dict.label }}</el-radio>
+                        <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
                      </el-radio-group>
                   </el-form-item>
                </el-col>
@@ -141,134 +104,134 @@
 </template>
 
 <script setup name="Dept">
-import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
+   import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
 
-const { proxy } = getCurrentInstance();
-const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+   const { proxy } = getCurrentInstance();
+   const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
 
-const deptList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const title = ref("");
-const deptOptions = ref([]);
-const isExpandAll = ref(true);
-const refreshTable = ref(true);
+   const deptList = ref([]);
+   const open = ref(false);
+   const loading = ref(true);
+   const showSearch = ref(true);
+   const title = ref("");
+   const deptOptions = ref([]);
+   const isExpandAll = ref(true);
+   const refreshTable = ref(true);
 
-const data = reactive({
-  form: {},
-  queryParams: {
-    deptName: undefined,
-    status: undefined
-  },
-  rules: {
-    parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
-    deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
-    orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
-    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
-    phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
-  },
-});
+   const data = reactive({
+      form: {},
+      queryParams: {
+         deptName: undefined,
+         status: undefined
+      },
+      rules: {
+         parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
+         deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
+         orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
+         email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
+         phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
+      },
+   });
 
-const { queryParams, form, rules } = toRefs(data);
+   const { queryParams, form, rules } = toRefs(data);
 
-/** 查询部门列表 */
-function getList() {
-  loading.value = true;
-  listDept(queryParams.value).then(response => {
-    deptList.value = proxy.handleTree(response.data, "deptId");
-    loading.value = false;
-  });
-}
-/** 取消按钮 */
-function cancel() {
-  open.value = false;
-  reset();
-}
-/** 表单重置 */
-function reset() {
-  form.value = {
-    deptId: undefined,
-    parentId: undefined,
-    deptName: undefined,
-    orderNum: 0,
-    leader: undefined,
-    phone: undefined,
-    email: undefined,
-    status: "0"
-  };
-  proxy.resetForm("deptRef");
-}
-/** 搜索按钮操作 */
-function handleQuery() {
-  getList();
-}
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
-}
-/** 新增按钮操作 */
-function handleAdd(row) {
-  reset();
-  listDept().then(response => {
-    deptOptions.value = proxy.handleTree(response.data, "deptId");
-  });
-  if (row != undefined) {
-    form.value.parentId = row.deptId;
-  }
-  open.value = true;
-  title.value = "添加部门";
-}
-/** 展开/折叠操作 */
-function toggleExpandAll() {
-  refreshTable.value = false;
-  isExpandAll.value = !isExpandAll.value;
-  nextTick(() => {
-    refreshTable.value = true;
-  });
-}
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset();
-  listDeptExcludeChild(row.deptId).then(response => {
-    deptOptions.value = proxy.handleTree(response.data, "deptId");
-  });
-  getDept(row.deptId).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改部门";
-  });
-}
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["deptRef"].validate(valid => {
-    if (valid) {
-      if (form.value.deptId != undefined) {
-        updateDept(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addDept(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
+   /** 查询部门列表 */
+   function getList() {
+      loading.value = true;
+      listDept(queryParams.value).then(response => {
+         deptList.value = proxy.handleTree(response.data, "deptId");
+         loading.value = false;
+      });
+   }
+   /** 取消按钮 */
+   function cancel() {
+      open.value = false;
+      reset();
+   }
+   /** 表单重置 */
+   function reset() {
+      form.value = {
+         deptId: undefined,
+         parentId: undefined,
+         deptName: undefined,
+         orderNum: 0,
+         leader: undefined,
+         phone: undefined,
+         email: undefined,
+         status: "0"
+      };
+      proxy.resetForm("deptRef");
+   }
+   /** 搜索按钮操作 */
+   function handleQuery() {
+      getList();
+   }
+   /** 重置按钮操作 */
+   function resetQuery() {
+      proxy.resetForm("queryRef");
+      handleQuery();
+   }
+   /** 新增按钮操作 */
+   function handleAdd(row) {
+      reset();
+      listDept().then(response => {
+         deptOptions.value = proxy.handleTree(response.data, "deptId");
+      });
+      if (row != undefined) {
+         form.value.parentId = row.deptId;
       }
-    }
-  });
-}
-/** 删除按钮操作 */
-function handleDelete(row) {
-  proxy.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function() {
-    return delDept(row.deptId);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
-}
+      open.value = true;
+      title.value = "添加部门";
+   }
+   /** 展开/折叠操作 */
+   function toggleExpandAll() {
+      refreshTable.value = false;
+      isExpandAll.value = !isExpandAll.value;
+      nextTick(() => {
+         refreshTable.value = true;
+      });
+   }
+   /** 修改按钮操作 */
+   function handleUpdate(row) {
+      reset();
+      listDeptExcludeChild(row.deptId).then(response => {
+         deptOptions.value = proxy.handleTree(response.data, "deptId");
+      });
+      getDept(row.deptId).then(response => {
+         form.value = response.data;
+         open.value = true;
+         title.value = "修改部门";
+      });
+   }
+   /** 提交按钮 */
+   function submitForm() {
+      proxy.$refs["deptRef"].validate(valid => {
+         if (valid) {
+            if (form.value.deptId != undefined) {
+               updateDept(form.value).then(response => {
+                  proxy.$modal.msgSuccess("修改成功");
+                  open.value = false;
+                  getList();
+               });
+            } else {
+               addDept(form.value).then(response => {
+                  proxy.$modal.msgSuccess("新增成功");
+                  open.value = false;
+                  getList();
+               });
+            }
+         }
+      });
+   }
+   /** 删除按钮操作 */
+   function handleDelete(row) {
+      proxy.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function () {
+         return delDept(row.deptId);
+      }).then(() => {
+         getList();
+         proxy.$modal.msgSuccess("删除成功");
+      }).catch(() => { });
+   }
 
-getList();
-</script>
+   getList();
+</script>
\ No newline at end of file
diff --git a/src/views/system/dict/data.vue b/src/views/system/dict/data.vue
index f817fd0..03953c8 100644
--- a/src/views/system/dict/data.vue
+++ b/src/views/system/dict/data.vue
@@ -1,129 +1,80 @@
 <template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
-         <el-form-item label="字典名称" prop="dictType">
-            <el-select v-model="queryParams.dictType" style="width: 200px">
-               <el-option
-                  v-for="item in typeOptions"
-                  :key="item.dictId"
-                  :label="item.dictName"
-                  :value="item.dictType"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="字典标签" prop="dictLabel">
-            <el-input
-               v-model="queryParams.dictLabel"
-               placeholder="请输入字典标签"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="状态" prop="status">
-            <el-select v-model="queryParams.status" placeholder="数据状态" clearable style="width: 200px">
-               <el-option
-                  v-for="dict in sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
+   <div class="app-container app-container-bg">
+      <el-card class="first-card" ref='firstCard' shadow="always">
+         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+            <el-form-item label="字典名称" prop="dictType">
+               <el-select v-model="queryParams.dictType" style="width: 200px">
+                  <el-option v-for="item in typeOptions" :key="item.dictId" :label="item.dictName" :value="item.dictType" />
+               </el-select>
+            </el-form-item>
+            <el-form-item label="字典标签" prop="dictLabel">
+               <el-input v-model="queryParams.dictLabel" placeholder="请输入字典标签" clearable style="width: 200px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+               <el-select v-model="queryParams.status" placeholder="数据状态" clearable style="width: 200px">
+                  <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+               </el-select>
+            </el-form-item>
+            <el-form-item>
+               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+         </el-form>
 
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:dict:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="success"
-               plain
-               icon="Edit"
-               :disabled="single"
-               @click="handleUpdate"
-               v-hasPermi="['system:dict:edit']"
-            >修改</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['system:dict:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['system:dict:export']"
-            >导出</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Close"
-               @click="handleClose"
-            >关闭</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
+         <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+               <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:dict:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:dict:edit']">修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:dict:remove']">删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:dict:export']">导出</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="warning" plain icon="Close" @click="handleClose">关闭</el-button>
+            </el-col>
+            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+         </el-row>
 
-      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="字典编码" align="center" prop="dictCode" />
-         <el-table-column label="字典标签" align="center" prop="dictLabel">
-            <template #default="scope">
-               <span v-if="(scope.row.listClass == '' || scope.row.listClass == 'default') && (scope.row.cssClass == '' || scope.row.cssClass == null)">{{ scope.row.dictLabel }}</span>
-               <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{ scope.row.dictLabel }}</el-tag>
-            </template>
-         </el-table-column>
-         <el-table-column label="字典键值" align="center" prop="dictValue" />
-         <el-table-column label="字典排序" align="center" prop="dictSort" />
-         <el-table-column label="状态" align="center" prop="status">
-            <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">修改</el-button>
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
+      </el-card>
+      <div class="el-card-p card-shadow carder-border mt10 pad10 ">
+         <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="字典编码" align="center" prop="dictCode" />
+            <el-table-column label="字典标签" align="center" prop="dictLabel">
+               <template #default="scope">
+                  <span v-if="(scope.row.listClass == '' || scope.row.listClass == 'default') && (scope.row.cssClass == '' || scope.row.cssClass == null)">{{ scope.row.dictLabel }}</span>
+                  <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{ scope.row.dictLabel }}</el-tag>
+               </template>
+            </el-table-column>
+            <el-table-column label="字典键值" align="center" prop="dictValue" />
+            <el-table-column label="字典排序" align="center" prop="dictSort" />
+            <el-table-column label="状态" align="center" prop="status">
+               <template #default="scope">
+                  <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+               </template>
+            </el-table-column>
+            <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+               <template #default="scope">
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
+               </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+               <template #default="scope">
+                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">修改</el-button>
+                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
+               </template>
+            </el-table-column>
+         </el-table>
 
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
+         <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
 
+      </div>
       <!-- 添加或修改参数配置对话框 -->
       <el-dialog :title="title" v-model="open" width="500px" append-to-body>
          <el-form ref="dataRef" :model="form" :rules="rules" label-width="80px">
@@ -144,21 +95,12 @@
             </el-form-item>
             <el-form-item label="回显样式" prop="listClass">
                <el-select v-model="form.listClass">
-                  <el-option
-                     v-for="item in listClassOptions"
-                     :key="item.value"
-                     :label="item.label + '(' + item.value + ')'"
-                     :value="item.value"
-                  ></el-option>
+                  <el-option v-for="item in listClassOptions" :key="item.value" :label="item.label + '(' + item.value + ')'" :value="item.value"></el-option>
                </el-select>
             </el-form-item>
             <el-form-item label="状态" prop="status">
                <el-radio-group v-model="form.status">
-                  <el-radio
-                     v-for="dict in sys_normal_disable"
-                     :key="dict.value"
-                     :label="dict.value"
-                  >{{ dict.label }}</el-radio>
+                  <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
                </el-radio-group>
             </el-form-item>
             <el-form-item label="备注" prop="remark">
@@ -176,175 +118,175 @@
 </template>
 
 <script setup name="Data">
-import useDictStore from '@/store/modules/dict'
-import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type";
-import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";
+   import useDictStore from '@/store/modules/dict'
+   import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type";
+   import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";
 
-const { proxy } = getCurrentInstance();
-const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+   const { proxy } = getCurrentInstance();
+   const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
 
-const dataList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-const defaultDictType = ref("");
-const typeOptions = ref([]);
-const route = useRoute();
-// 数据标签回显样式
-const listClassOptions = ref([
-  { value: "default", label: "默认" }, 
-  { value: "primary", label: "主要" }, 
-  { value: "success", label: "成功" },
-  { value: "info", label: "信息" },
-  { value: "warning", label: "警告" },
-  { value: "danger", label: "危险" }
-]);
+   const dataList = ref([]);
+   const open = ref(false);
+   const loading = ref(true);
+   const showSearch = ref(true);
+   const ids = ref([]);
+   const single = ref(true);
+   const multiple = ref(true);
+   const total = ref(0);
+   const title = ref("");
+   const defaultDictType = ref("");
+   const typeOptions = ref([]);
+   const route = useRoute();
+   // 数据标签回显样式
+   const listClassOptions = ref([
+      { value: "default", label: "默认" },
+      { value: "primary", label: "主要" },
+      { value: "success", label: "成功" },
+      { value: "info", label: "信息" },
+      { value: "warning", label: "警告" },
+      { value: "danger", label: "危险" }
+   ]);
 
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    dictType: undefined,
-    dictLabel: undefined,
-    status: undefined
-  },
-  rules: {
-    dictLabel: [{ required: true, message: "数据标签不能为空", trigger: "blur" }],
-    dictValue: [{ required: true, message: "数据键值不能为空", trigger: "blur" }],
-    dictSort: [{ required: true, message: "数据顺序不能为空", trigger: "blur" }]
-  }
-});
+   const data = reactive({
+      form: {},
+      queryParams: {
+         pageNum: 1,
+         pageSize: 10,
+         dictType: undefined,
+         dictLabel: undefined,
+         status: undefined
+      },
+      rules: {
+         dictLabel: [{ required: true, message: "数据标签不能为空", trigger: "blur" }],
+         dictValue: [{ required: true, message: "数据键值不能为空", trigger: "blur" }],
+         dictSort: [{ required: true, message: "数据顺序不能为空", trigger: "blur" }]
+      }
+   });
 
-const { queryParams, form, rules } = toRefs(data);
+   const { queryParams, form, rules } = toRefs(data);
 
-/** 查询字典类型详细 */
-function getTypes(dictId) {
-  getType(dictId).then(response => {
-    queryParams.value.dictType = response.data.dictType;
-    defaultDictType.value = response.data.dictType;
-    getList();
-  });
-}
+   /** 查询字典类型详细 */
+   function getTypes(dictId) {
+      getType(dictId).then(response => {
+         queryParams.value.dictType = response.data.dictType;
+         defaultDictType.value = response.data.dictType;
+         getList();
+      });
+   }
 
-/** 查询字典类型列表 */
-function getTypeList() {
-  getDictOptionselect().then(response => {
-    typeOptions.value = response.data;
-  });
-}
-/** 查询字典数据列表 */
-function getList() {
-  loading.value = true;
-  listData(queryParams.value).then(response => {
-    dataList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
-}
-/** 取消按钮 */
-function cancel() {
-  open.value = false;
-  reset();
-}
-/** 表单重置 */
-function reset() {
-  form.value = {
-    dictCode: undefined,
-    dictLabel: undefined,
-    dictValue: undefined,
-    cssClass: undefined,
-    listClass: "default",
-    dictSort: 0,
-    status: "0",
-    remark: undefined
-  };
-  proxy.resetForm("dataRef");
-}
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
-}
-/** 返回按钮操作 */
-function handleClose() {
-  const obj = { path: "/system/dict" };
-  proxy.$tab.closeOpenPage(obj);
-}
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  queryParams.value.dictType = defaultDictType.value;
-  handleQuery();
-}
-/** 新增按钮操作 */
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加字典数据";
-  form.value.dictType = queryParams.value.dictType;
-}
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.dictCode);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset();
-  const dictCode = row.dictCode || ids.value;
-  getData(dictCode).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改字典数据";
-  });
-}
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["dataRef"].validate(valid => {
-    if (valid) {
-      if (form.value.dictCode != undefined) {
-        updateData(form.value).then(response => {
-          useDictStore().removeDict(queryParams.value.dictType);
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addData(form.value).then(response => {
-          useDictStore().removeDict(queryParams.value.dictType);
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
-}
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const dictCodes = row.dictCode || ids.value;
-  proxy.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？').then(function() {
-    return delData(dictCodes);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-    useDictStore().removeDict(queryParams.value.dictType);
-  }).catch(() => {});
-}
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("system/dict/data/export", {
-    ...queryParams.value
-  }, `dict_data_${new Date().getTime()}.xlsx`);
-}
+   /** 查询字典类型列表 */
+   function getTypeList() {
+      getDictOptionselect().then(response => {
+         typeOptions.value = response.data;
+      });
+   }
+   /** 查询字典数据列表 */
+   function getList() {
+      loading.value = true;
+      listData(queryParams.value).then(response => {
+         dataList.value = response.rows;
+         total.value = response.total;
+         loading.value = false;
+      });
+   }
+   /** 取消按钮 */
+   function cancel() {
+      open.value = false;
+      reset();
+   }
+   /** 表单重置 */
+   function reset() {
+      form.value = {
+         dictCode: undefined,
+         dictLabel: undefined,
+         dictValue: undefined,
+         cssClass: undefined,
+         listClass: "default",
+         dictSort: 0,
+         status: "0",
+         remark: undefined
+      };
+      proxy.resetForm("dataRef");
+   }
+   /** 搜索按钮操作 */
+   function handleQuery() {
+      queryParams.value.pageNum = 1;
+      getList();
+   }
+   /** 返回按钮操作 */
+   function handleClose() {
+      const obj = { path: "/system/dict" };
+      proxy.$tab.closeOpenPage(obj);
+   }
+   /** 重置按钮操作 */
+   function resetQuery() {
+      proxy.resetForm("queryRef");
+      queryParams.value.dictType = defaultDictType.value;
+      handleQuery();
+   }
+   /** 新增按钮操作 */
+   function handleAdd() {
+      reset();
+      open.value = true;
+      title.value = "添加字典数据";
+      form.value.dictType = queryParams.value.dictType;
+   }
+   /** 多选框选中数据 */
+   function handleSelectionChange(selection) {
+      ids.value = selection.map(item => item.dictCode);
+      single.value = selection.length != 1;
+      multiple.value = !selection.length;
+   }
+   /** 修改按钮操作 */
+   function handleUpdate(row) {
+      reset();
+      const dictCode = row.dictCode || ids.value;
+      getData(dictCode).then(response => {
+         form.value = response.data;
+         open.value = true;
+         title.value = "修改字典数据";
+      });
+   }
+   /** 提交按钮 */
+   function submitForm() {
+      proxy.$refs["dataRef"].validate(valid => {
+         if (valid) {
+            if (form.value.dictCode != undefined) {
+               updateData(form.value).then(response => {
+                  useDictStore().removeDict(queryParams.value.dictType);
+                  proxy.$modal.msgSuccess("修改成功");
+                  open.value = false;
+                  getList();
+               });
+            } else {
+               addData(form.value).then(response => {
+                  useDictStore().removeDict(queryParams.value.dictType);
+                  proxy.$modal.msgSuccess("新增成功");
+                  open.value = false;
+                  getList();
+               });
+            }
+         }
+      });
+   }
+   /** 删除按钮操作 */
+   function handleDelete(row) {
+      const dictCodes = row.dictCode || ids.value;
+      proxy.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？').then(function () {
+         return delData(dictCodes);
+      }).then(() => {
+         getList();
+         proxy.$modal.msgSuccess("删除成功");
+         useDictStore().removeDict(queryParams.value.dictType);
+      }).catch(() => { });
+   }
+   /** 导出按钮操作 */
+   function handleExport() {
+      proxy.download("system/dict/data/export", {
+         ...queryParams.value
+      }, `dict_data_${new Date().getTime()}.xlsx`);
+   }
 
-getTypes(route.params && route.params.dictId);
-getTypeList();
-</script>
+   getTypes(route.params && route.params.dictId);
+   getTypeList();
+</script>
\ No newline at end of file
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 297ac84..6b2bdb4 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,143 +1,80 @@
 <template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-         <el-form-item label="字典名称" prop="dictName">
-            <el-input
-               v-model="queryParams.dictName"
-               placeholder="请输入字典名称"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="字典类型" prop="dictType">
-            <el-input
-               v-model="queryParams.dictType"
-               placeholder="请输入字典类型"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="状态" prop="status">
-            <el-select
-               v-model="queryParams.status"
-               placeholder="字典状态"
-               clearable
-               style="width: 240px"
-            >
-               <el-option
-                  v-for="dict in sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="创建时间" style="width: 308px">
-            <el-date-picker
-               v-model="dateRange"
-               value-format="YYYY-MM-DD"
-               type="daterange"
-               range-separator="-"
-               start-placeholder="开始日期"
-               end-placeholder="结束日期"
-            ></el-date-picker>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
+   <div class="app-container app-container-bg">
+      <el-card class="first-card" ref='firstCard' shadow="always">
+         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+            <el-form-item label="字典名称" prop="dictName">
+               <el-input v-model="queryParams.dictName" placeholder="请输入字典名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="字典类型" prop="dictType">
+               <el-input v-model="queryParams.dictType" placeholder="请输入字典类型" clearable style="width: 240px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+               <el-select v-model="queryParams.status" placeholder="字典状态" clearable style="width: 240px">
+                  <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+               </el-select>
+            </el-form-item>
+            <el-form-item label="创建时间" style="width: 308px">
+               <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+            </el-form-item>
+            <el-form-item>
+               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+         </el-form>
 
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:dict:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="success"
-               plain
-               icon="Edit"
-               :disabled="single"
-               @click="handleUpdate"
-               v-hasPermi="['system:dict:edit']"
-            >修改</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['system:dict:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['system:dict:export']"
-            >导出</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Refresh"
-               @click="handleRefreshCache"
-               v-hasPermi="['system:dict:remove']"
-            >刷新缓存</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
+         <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+               <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:dict:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:dict:edit']">修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:dict:remove']">删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:dict:export']">导出</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="danger" plain icon="Refresh" @click="handleRefreshCache" v-hasPermi="['system:dict:remove']">刷新缓存</el-button>
+            </el-col>
+            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+         </el-row>
+      </el-card>
 
-      <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="字典编号" align="center" prop="dictId" />
-         <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true"/>
-         <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
-            <template #default="scope">
-               <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
-                  <span>{{ scope.row.dictType }}</span>
-               </router-link>
-            </template>
-         </el-table-column>
-         <el-table-column label="状态" align="center" prop="status">
-            <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">修改</el-button>
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
+      <div class="el-card-p card-shadow carder-border mt10 pad10 ">
+         <el-table v-table-height v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="字典编号" align="center" prop="dictId" />
+            <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
+            <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
+               <template #default="scope">
+                  <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
+                     <span>{{ scope.row.dictType }}</span>
+                  </router-link>
+               </template>
+            </el-table-column>
+            <el-table-column label="状态" align="center" prop="status">
+               <template #default="scope">
+                  <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+               </template>
+            </el-table-column>
+            <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+               <template #default="scope">
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
+               </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+               <template #default="scope">
+                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">修改</el-button>
+                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
+               </template>
+            </el-table-column>
+         </el-table>
 
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
+         <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      </div>
 
       <!-- 添加或修改参数配置对话框 -->
       <el-dialog :title="title" v-model="open" width="500px" append-to-body>
@@ -150,11 +87,7 @@
             </el-form-item>
             <el-form-item label="状态" prop="status">
                <el-radio-group v-model="form.status">
-                  <el-radio
-                     v-for="dict in sys_normal_disable"
-                     :key="dict.value"
-                     :label="dict.value"
-                  >{{ dict.label }}</el-radio>
+                  <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
                </el-radio-group>
             </el-form-item>
             <el-form-item label="备注" prop="remark">
@@ -172,141 +105,141 @@
 </template>
 
 <script setup name="Dict">
-import useDictStore from '@/store/modules/dict'
-import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
+   import useDictStore from '@/store/modules/dict'
+   import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
 
-const { proxy } = getCurrentInstance();
-const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+   const { proxy } = getCurrentInstance();
+   const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
 
-const typeList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-const dateRange = ref([]);
+   const typeList = ref([]);
+   const open = ref(false);
+   const loading = ref(true);
+   const showSearch = ref(true);
+   const ids = ref([]);
+   const single = ref(true);
+   const multiple = ref(true);
+   const total = ref(0);
+   const title = ref("");
+   const dateRange = ref([]);
 
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    dictName: undefined,
-    dictType: undefined,
-    status: undefined
-  },
-  rules: {
-    dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
-    dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }]
-  },
-});
+   const data = reactive({
+      form: {},
+      queryParams: {
+         pageNum: 1,
+         pageSize: 10,
+         dictName: undefined,
+         dictType: undefined,
+         status: undefined
+      },
+      rules: {
+         dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
+         dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }]
+      },
+   });
 
-const { queryParams, form, rules } = toRefs(data);
+   const { queryParams, form, rules } = toRefs(data);
 
-/** 查询字典类型列表 */
-function getList() {
-  loading.value = true;
-  listType(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    typeList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
-}
-/** 取消按钮 */
-function cancel() {
-  open.value = false;
-  reset();
-}
-/** 表单重置 */
-function reset() {
-  form.value = {
-    dictId: undefined,
-    dictName: undefined,
-    dictType: undefined,
-    status: "0",
-    remark: undefined
-  };
-  proxy.resetForm("dictRef");
-}
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
-}
-/** 重置按钮操作 */
-function resetQuery() {
-  dateRange.value = [];
-  proxy.resetForm("queryRef");
-  handleQuery();
-}
-/** 新增按钮操作 */
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加字典类型";
-}
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.dictId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset();
-  const dictId = row.dictId || ids.value;
-  getType(dictId).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改字典类型";
-  });
-}
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["dictRef"].validate(valid => {
-    if (valid) {
-      if (form.value.dictId != undefined) {
-        updateType(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addType(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
-}
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const dictIds = row.dictId || ids.value;
-  proxy.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function() {
-    return delType(dictIds);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
-}
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("system/dict/type/export", {
-    ...queryParams.value
-  }, `dict_${new Date().getTime()}.xlsx`);
-}
-/** 刷新缓存按钮操作 */
-function handleRefreshCache() {
-  refreshCache().then(() => {
-    proxy.$modal.msgSuccess("刷新成功");
-    useDictStore().cleanDict();
-  });
-}
+   /** 查询字典类型列表 */
+   function getList() {
+      loading.value = true;
+      listType(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+         typeList.value = response.rows;
+         total.value = response.total;
+         loading.value = false;
+      });
+   }
+   /** 取消按钮 */
+   function cancel() {
+      open.value = false;
+      reset();
+   }
+   /** 表单重置 */
+   function reset() {
+      form.value = {
+         dictId: undefined,
+         dictName: undefined,
+         dictType: undefined,
+         status: "0",
+         remark: undefined
+      };
+      proxy.resetForm("dictRef");
+   }
+   /** 搜索按钮操作 */
+   function handleQuery() {
+      queryParams.value.pageNum = 1;
+      getList();
+   }
+   /** 重置按钮操作 */
+   function resetQuery() {
+      dateRange.value = [];
+      proxy.resetForm("queryRef");
+      handleQuery();
+   }
+   /** 新增按钮操作 */
+   function handleAdd() {
+      reset();
+      open.value = true;
+      title.value = "添加字典类型";
+   }
+   /** 多选框选中数据 */
+   function handleSelectionChange(selection) {
+      ids.value = selection.map(item => item.dictId);
+      single.value = selection.length != 1;
+      multiple.value = !selection.length;
+   }
+   /** 修改按钮操作 */
+   function handleUpdate(row) {
+      reset();
+      const dictId = row.dictId || ids.value;
+      getType(dictId).then(response => {
+         form.value = response.data;
+         open.value = true;
+         title.value = "修改字典类型";
+      });
+   }
+   /** 提交按钮 */
+   function submitForm() {
+      proxy.$refs["dictRef"].validate(valid => {
+         if (valid) {
+            if (form.value.dictId != undefined) {
+               updateType(form.value).then(response => {
+                  proxy.$modal.msgSuccess("修改成功");
+                  open.value = false;
+                  getList();
+               });
+            } else {
+               addType(form.value).then(response => {
+                  proxy.$modal.msgSuccess("新增成功");
+                  open.value = false;
+                  getList();
+               });
+            }
+         }
+      });
+   }
+   /** 删除按钮操作 */
+   function handleDelete(row) {
+      const dictIds = row.dictId || ids.value;
+      proxy.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function () {
+         return delType(dictIds);
+      }).then(() => {
+         getList();
+         proxy.$modal.msgSuccess("删除成功");
+      }).catch(() => { });
+   }
+   /** 导出按钮操作 */
+   function handleExport() {
+      proxy.download("system/dict/type/export", {
+         ...queryParams.value
+      }, `dict_${new Date().getTime()}.xlsx`);
+   }
+   /** 刷新缓存按钮操作 */
+   function handleRefreshCache() {
+      refreshCache().then(() => {
+         proxy.$modal.msgSuccess("刷新成功");
+         useDictStore().cleanDict();
+      });
+   }
 
-getList();
-</script>
+   getList();
+</script>
\ No newline at end of file
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index bb486e9..17b8739 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,87 +1,62 @@
 <template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
-         <el-form-item label="菜单名称" prop="menuName">
-            <el-input
-               v-model="queryParams.menuName"
-               placeholder="请输入菜单名称"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="状态" prop="status">
-            <el-select v-model="queryParams.status" placeholder="菜单状态" clearable style="width: 200px">
-               <el-option
-                  v-for="dict in sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
+   <div class="app-container app-container-bg">
+      <el-card class="first-card" ref='firstCard' shadow="always">
+         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+            <el-form-item label="菜单名称" prop="menuName">
+               <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable style="width: 200px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+               <el-select v-model="queryParams.status" placeholder="菜单状态" clearable style="width: 200px">
+                  <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+               </el-select>
+            </el-form-item>
+            <el-form-item>
+               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+         </el-form>
 
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:menu:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button 
-               type="info"
-               plain
-               icon="Sort"
-               @click="toggleExpandAll"
-            >展开/折叠</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
+         <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+               <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:menu:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
+            </el-col>
+            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+         </el-row>
+      </el-card>
 
-      <el-table
-         v-if="refreshTable"
-         v-loading="loading"
-         :data="menuList"
-         row-key="menuId"
-         :default-expand-all="isExpandAll"
-         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-      >
-         <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
-         <el-table-column prop="icon" label="图标" align="center" width="100">
-            <template #default="scope">
-               <svg-icon :icon-class="scope.row.icon" />
-            </template>
-         </el-table-column>
-         <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
-         <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
-         <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
-         <el-table-column prop="status" label="状态" width="80">
-            <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="创建时间" align="center" width="160" prop="createTime">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button>
-               <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">新增</el-button>
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">删除</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
+      <div class="el-card-p card-shadow carder-border mt10 pad10 ">
+         <el-table v-table-height v-if="refreshTable" v-loading="loading" :data="menuList" row-key="menuId" :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+            <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
+            <el-table-column prop="icon" label="图标" align="center" width="100">
+               <template #default="scope">
+                  <svg-icon :icon-class="scope.row.icon" />
+               </template>
+            </el-table-column>
+            <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
+            <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column prop="status" label="状态" width="80">
+               <template #default="scope">
+                  <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+               </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center" width="160" prop="createTime">
+               <template #default="scope">
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
+               </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
+               <template #default="scope">
+                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button>
+                  <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">新增</el-button>
+                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">删除</el-button>
+               </template>
+            </el-table-column>
+         </el-table>
+      </div>
 
       <!-- 添加或修改菜单对话框 -->
       <el-dialog :title="title" v-model="open" width="680px" append-to-body>
@@ -89,14 +64,7 @@
             <el-row>
                <el-col :span="24">
                   <el-form-item label="上级菜单">
-                     <el-tree-select
-                        v-model="form.parentId"
-                        :data="menuOptions"
-                        :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
-                        value-key="menuId"
-                        placeholder="选择上级菜单"
-                        check-strictly
-                     />
+                     <el-tree-select v-model="form.parentId" :data="menuOptions" :props="{ value: 'menuId', label: 'menuName', children: 'children' }" value-key="menuId" placeholder="选择上级菜单" check-strictly />
                   </el-form-item>
                </el-col>
                <el-col :span="24">
@@ -110,21 +78,14 @@
                </el-col>
                <el-col :span="24" v-if="form.menuType != 'F'">
                   <el-form-item label="菜单图标" prop="icon">
-                     <el-popover
-                        placement="bottom-start"
-                        :width="540"
-                        trigger="click"
-                     >
+                     <el-popover placement="bottom-start" :width="540" trigger="click">
                         <template #reference>
                            <el-input v-model="form.icon" placeholder="点击选择图标" @blur="showSelectIcon" readonly>
                               <template #prefix>
-                                 <svg-icon
-                                    v-if="form.icon"
-                                    :icon-class="form.icon"
-                                    class="el-input__icon"
-                                    style="height: 32px;width: 16px;"
-                                 />
-                                 <el-icon v-else style="height: 32px;width: 16px;"><search /></el-icon>
+                                 <svg-icon v-if="form.icon" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
+                                 <el-icon v-else style="height: 32px;width: 16px;">
+                                    <search />
+                                 </el-icon>
                               </template>
                            </el-input>
                         </template>
@@ -236,11 +197,7 @@
                         </span>
                      </template>
                      <el-radio-group v-model="form.visible">
-                        <el-radio
-                           v-for="dict in sys_show_hide"
-                           :key="dict.value"
-                           :label="dict.value"
-                        >{{ dict.label }}</el-radio>
+                        <el-radio v-for="dict in sys_show_hide" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
                      </el-radio-group>
                   </el-form-item>
                </el-col>
@@ -255,11 +212,7 @@
                         </span>
                      </template>
                      <el-radio-group v-model="form.status">
-                        <el-radio
-                           v-for="dict in sys_normal_disable"
-                           :key="dict.value"
-                           :label="dict.value"
-                        >{{ dict.label }}</el-radio>
+                        <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
                      </el-radio-group>
                   </el-form-item>
                </el-col>
@@ -276,152 +229,152 @@
 </template>
 
 <script setup name="Menu">
-import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu";
-import SvgIcon from "@/components/SvgIcon";
-import IconSelect from "@/components/IconSelect";
+   import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu";
+   import SvgIcon from "@/components/SvgIcon";
+   import IconSelect from "@/components/IconSelect";
 
-const { proxy } = getCurrentInstance();
-const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable");
+   const { proxy } = getCurrentInstance();
+   const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable");
 
-const menuList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const title = ref("");
-const menuOptions = ref([]);
-const isExpandAll = ref(false);
-const refreshTable = ref(true);
-const iconSelectRef = ref(null);
+   const menuList = ref([]);
+   const open = ref(false);
+   const loading = ref(true);
+   const showSearch = ref(true);
+   const title = ref("");
+   const menuOptions = ref([]);
+   const isExpandAll = ref(false);
+   const refreshTable = ref(true);
+   const iconSelectRef = ref(null);
 
-const data = reactive({
-  form: {},
-  queryParams: {
-    menuName: undefined,
-    visible: undefined
-  },
-  rules: {
-    menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
-    orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
-    path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }]
-  },
-});
+   const data = reactive({
+      form: {},
+      queryParams: {
+         menuName: undefined,
+         visible: undefined
+      },
+      rules: {
+         menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
+         orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
+         path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }]
+      },
+   });
 
-const { queryParams, form, rules } = toRefs(data);
+   const { queryParams, form, rules } = toRefs(data);
 
-/** 查询菜单列表 */
-function getList() {
-  loading.value = true;
-  listMenu(queryParams.value).then(response => {
-    menuList.value = proxy.handleTree(response.data, "menuId");
-    loading.value = false;
-  });
-}
-/** 查询菜单下拉树结构 */
-function getTreeselect() {
-  menuOptions.value = [];
-  listMenu().then(response => {
-    const menu = { menuId: 0, menuName: "主类目", children: [] };
-    menu.children = proxy.handleTree(response.data, "menuId");
-    menuOptions.value.push(menu);
-  });
-}
-/** 取消按钮 */
-function cancel() {
-  open.value = false;
-  reset();
-}
-/** 表单重置 */
-function reset() {
-  form.value = {
-    menuId: undefined,
-    parentId: 0,
-    menuName: undefined,
-    icon: undefined,
-    menuType: "M",
-    orderNum: undefined,
-    isFrame: "1",
-    isCache: "0",
-    visible: "0",
-    status: "0"
-  };
-  proxy.resetForm("menuRef");
-}
-/** 展示下拉图标 */
-function showSelectIcon() {
-  iconSelectRef.value.reset();
-}
-/** 选择图标 */
-function selected(name) {
-  form.value.icon = name;
-}
-/** 搜索按钮操作 */
-function handleQuery() {
-  getList();
-}
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
-}
-/** 新增按钮操作 */
-function handleAdd(row) {
-  reset();
-  getTreeselect();
-  if (row != null && row.menuId) {
-    form.value.parentId = row.menuId;
-  } else {
-    form.value.parentId = 0;
-  }
-  open.value = true;
-  title.value = "添加菜单";
-}
-/** 展开/折叠操作 */
-function toggleExpandAll() {
-  refreshTable.value = false;
-  isExpandAll.value = !isExpandAll.value;
-  nextTick(() => {
-    refreshTable.value = true;
-  });
-}
-/** 修改按钮操作 */
-async function handleUpdate(row) {
-  reset();
-  await getTreeselect();
-  getMenu(row.menuId).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改菜单";
-  });
-}
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["menuRef"].validate(valid => {
-    if (valid) {
-      if (form.value.menuId != undefined) {
-        updateMenu(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
+   /** 查询菜单列表 */
+   function getList() {
+      loading.value = true;
+      listMenu(queryParams.value).then(response => {
+         menuList.value = proxy.handleTree(response.data, "menuId");
+         loading.value = false;
+      });
+   }
+   /** 查询菜单下拉树结构 */
+   function getTreeselect() {
+      menuOptions.value = [];
+      listMenu().then(response => {
+         const menu = { menuId: 0, menuName: "主类目", children: [] };
+         menu.children = proxy.handleTree(response.data, "menuId");
+         menuOptions.value.push(menu);
+      });
+   }
+   /** 取消按钮 */
+   function cancel() {
+      open.value = false;
+      reset();
+   }
+   /** 表单重置 */
+   function reset() {
+      form.value = {
+         menuId: undefined,
+         parentId: 0,
+         menuName: undefined,
+         icon: undefined,
+         menuType: "M",
+         orderNum: undefined,
+         isFrame: "1",
+         isCache: "0",
+         visible: "0",
+         status: "0"
+      };
+      proxy.resetForm("menuRef");
+   }
+   /** 展示下拉图标 */
+   function showSelectIcon() {
+      iconSelectRef.value.reset();
+   }
+   /** 选择图标 */
+   function selected(name) {
+      form.value.icon = name;
+   }
+   /** 搜索按钮操作 */
+   function handleQuery() {
+      getList();
+   }
+   /** 重置按钮操作 */
+   function resetQuery() {
+      proxy.resetForm("queryRef");
+      handleQuery();
+   }
+   /** 新增按钮操作 */
+   function handleAdd(row) {
+      reset();
+      getTreeselect();
+      if (row != null && row.menuId) {
+         form.value.parentId = row.menuId;
       } else {
-        addMenu(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
+         form.value.parentId = 0;
       }
-    }
-  });
-}
-/** 删除按钮操作 */
-function handleDelete(row) {
-  proxy.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(function() {
-    return delMenu(row.menuId);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
-}
+      open.value = true;
+      title.value = "添加菜单";
+   }
+   /** 展开/折叠操作 */
+   function toggleExpandAll() {
+      refreshTable.value = false;
+      isExpandAll.value = !isExpandAll.value;
+      nextTick(() => {
+         refreshTable.value = true;
+      });
+   }
+   /** 修改按钮操作 */
+   async function handleUpdate(row) {
+      reset();
+      await getTreeselect();
+      getMenu(row.menuId).then(response => {
+         form.value = response.data;
+         open.value = true;
+         title.value = "修改菜单";
+      });
+   }
+   /** 提交按钮 */
+   function submitForm() {
+      proxy.$refs["menuRef"].validate(valid => {
+         if (valid) {
+            if (form.value.menuId != undefined) {
+               updateMenu(form.value).then(response => {
+                  proxy.$modal.msgSuccess("修改成功");
+                  open.value = false;
+                  getList();
+               });
+            } else {
+               addMenu(form.value).then(response => {
+                  proxy.$modal.msgSuccess("新增成功");
+                  open.value = false;
+                  getList();
+               });
+            }
+         }
+      });
+   }
+   /** 删除按钮操作 */
+   function handleDelete(row) {
+      proxy.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(function () {
+         return delMenu(row.menuId);
+      }).then(() => {
+         getList();
+         proxy.$modal.msgSuccess("删除成功");
+      }).catch(() => { });
+   }
 
-getList();
-</script>
+   getList();
+</script>
\ No newline at end of file
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index c26b8c4..f685231 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -1,116 +1,72 @@
 <template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
-         <el-form-item label="公告标题" prop="noticeTitle">
-            <el-input
-               v-model="queryParams.noticeTitle"
-               placeholder="请输入公告标题"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="操作人员" prop="createBy">
-            <el-input
-               v-model="queryParams.createBy"
-               placeholder="请输入操作人员"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="类型" prop="noticeType">
-            <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable style="width: 200px">
-               <el-option
-                  v-for="dict in sys_notice_type"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
+   <div class="app-container app-container-bg">
+      <el-card class="first-card" ref='firstCard' shadow="always">
+         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+            <el-form-item label="公告标题" prop="noticeTitle">
+               <el-input v-model="queryParams.noticeTitle" placeholder="请输入公告标题" clearable style="width: 200px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="操作人员" prop="createBy">
+               <el-input v-model="queryParams.createBy" placeholder="请输入操作人员" clearable style="width: 200px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="类型" prop="noticeType">
+               <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable style="width: 200px">
+                  <el-option v-for="dict in sys_notice_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+               </el-select>
+            </el-form-item>
+            <el-form-item>
+               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+         </el-form>
 
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:notice:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="success"
-               plain
-               icon="Edit"
-               :disabled="single"
-               @click="handleUpdate"
-               v-hasPermi="['system:notice:edit']"
-            >修改</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['system:notice:remove']"
-            >删除</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
+         <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+               <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:notice:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:notice:edit']">修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:notice:remove']">删除</el-button>
+            </el-col>
+            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+         </el-row>
+      </el-card>
 
-      <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="序号" align="center" prop="noticeId" width="100" />
-         <el-table-column
-            label="公告标题"
-            align="center"
-            prop="noticeTitle"
-            :show-overflow-tooltip="true"
-         />
-         <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
-            <template #default="scope">
-               <dict-tag :options="sys_notice_type" :value="scope.row.noticeType" />
-            </template>
-         </el-table-column>
-         <el-table-column label="状态" align="center" prop="status" width="100">
-            <template #default="scope">
-               <dict-tag :options="sys_notice_status" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="创建者" align="center" prop="createBy" width="100" />
-         <el-table-column label="创建时间" align="center" prop="createTime" width="100">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:notice:edit']">修改</el-button>
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:notice:remove']" >删除</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
+      <div class="el-card-p card-shadow carder-border mt10 pad10 ">
+         <el-table v-table-height v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="序号" align="center" prop="noticeId" width="100" />
+            <el-table-column label="公告标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
+            <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
+               <template #default="scope">
+                  <dict-tag :options="sys_notice_type" :value="scope.row.noticeType" />
+               </template>
+            </el-table-column>
+            <el-table-column label="状态" align="center" prop="status" width="100">
+               <template #default="scope">
+                  <dict-tag :options="sys_notice_status" :value="scope.row.status" />
+               </template>
+            </el-table-column>
+            <el-table-column label="创建者" align="center" prop="createBy" width="100" />
+            <el-table-column label="创建时间" align="center" prop="createTime" width="100">
+               <template #default="scope">
+                  <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+               </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+               <template #default="scope">
+                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:notice:edit']">修改</el-button>
+                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:notice:remove']">删除</el-button>
+               </template>
+            </el-table-column>
+         </el-table>
 
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
+         <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
 
+      </div>
       <!-- 添加或修改公告对话框 -->
-      <el-dialog :title="title" v-model="open" width="780px" append-to-body>
+      <el-dialog class="custom-dialog" :title="title" v-model="open" width="780px" append-to-body>
          <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px">
             <el-row>
                <el-col :span="12">
@@ -121,29 +77,20 @@
                <el-col :span="12">
                   <el-form-item label="公告类型" prop="noticeType">
                      <el-select v-model="form.noticeType" placeholder="请选择">
-                        <el-option
-                           v-for="dict in sys_notice_type"
-                           :key="dict.value"
-                           :label="dict.label"
-                           :value="dict.value"
-                        ></el-option>
+                        <el-option v-for="dict in sys_notice_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                      </el-select>
                   </el-form-item>
                </el-col>
                <el-col :span="24">
                   <el-form-item label="状态">
                      <el-radio-group v-model="form.status">
-                        <el-radio
-                           v-for="dict in sys_notice_status"
-                           :key="dict.value"
-                           :label="dict.value"
-                        >{{ dict.label }}</el-radio>
+                        <el-radio v-for="dict in sys_notice_status" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
                      </el-radio-group>
                   </el-form-item>
                </el-col>
                <el-col :span="24">
                   <el-form-item label="内容">
-                    <editor v-model="form.noticeContent" :min-height="192"/>
+                     <editor v-model="form.noticeContent" :min-height="192" />
                   </el-form-item>
                </el-col>
             </el-row>
@@ -159,125 +106,125 @@
 </template>
 
 <script setup name="Notice">
-import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
+   import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
 
-const { proxy } = getCurrentInstance();
-const { sys_notice_status, sys_notice_type } = proxy.useDict("sys_notice_status", "sys_notice_type");
+   const { proxy } = getCurrentInstance();
+   const { sys_notice_status, sys_notice_type } = proxy.useDict("sys_notice_status", "sys_notice_type");
 
-const noticeList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
+   const noticeList = ref([]);
+   const open = ref(false);
+   const loading = ref(true);
+   const showSearch = ref(true);
+   const ids = ref([]);
+   const single = ref(true);
+   const multiple = ref(true);
+   const total = ref(0);
+   const title = ref("");
 
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    noticeTitle: undefined,
-    createBy: undefined,
-    status: undefined
-  },
-  rules: {
-    noticeTitle: [{ required: true, message: "公告标题不能为空", trigger: "blur" }],
-    noticeType: [{ required: true, message: "公告类型不能为空", trigger: "change" }]
-  },
-});
+   const data = reactive({
+      form: {},
+      queryParams: {
+         pageNum: 1,
+         pageSize: 10,
+         noticeTitle: undefined,
+         createBy: undefined,
+         status: undefined
+      },
+      rules: {
+         noticeTitle: [{ required: true, message: "公告标题不能为空", trigger: "blur" }],
+         noticeType: [{ required: true, message: "公告类型不能为空", trigger: "change" }]
+      },
+   });
 
-const { queryParams, form, rules } = toRefs(data);
+   const { queryParams, form, rules } = toRefs(data);
 
-/** 查询公告列表 */
-function getList() {
-  loading.value = true;
-  listNotice(queryParams.value).then(response => {
-    noticeList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
-}
-/** 取消按钮 */
-function cancel() {
-  open.value = false;
-  reset();
-}
-/** 表单重置 */
-function reset() {
-  form.value = {
-    noticeId: undefined,
-    noticeTitle: undefined,
-    noticeType: undefined,
-    noticeContent: undefined,
-    status: "0"
-  };
-  proxy.resetForm("noticeRef");
-}
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
-}
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
-}
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.noticeId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
-/** 新增按钮操作 */
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加公告";
-}
-/**修改按钮操作 */
-function handleUpdate(row) {
-  reset();
-  const noticeId = row.noticeId || ids.value;
-  getNotice(noticeId).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改公告";
-  });
-}
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["noticeRef"].validate(valid => {
-    if (valid) {
-      if (form.value.noticeId != undefined) {
-        updateNotice(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addNotice(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
-}
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const noticeIds = row.noticeId || ids.value
-  proxy.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {
-    return delNotice(noticeIds);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
-}
+   /** 查询公告列表 */
+   function getList() {
+      loading.value = true;
+      listNotice(queryParams.value).then(response => {
+         noticeList.value = response.rows;
+         total.value = response.total;
+         loading.value = false;
+      });
+   }
+   /** 取消按钮 */
+   function cancel() {
+      open.value = false;
+      reset();
+   }
+   /** 表单重置 */
+   function reset() {
+      form.value = {
+         noticeId: undefined,
+         noticeTitle: undefined,
+         noticeType: undefined,
+         noticeContent: undefined,
+         status: "0"
+      };
+      proxy.resetForm("noticeRef");
+   }
+   /** 搜索按钮操作 */
+   function handleQuery() {
+      queryParams.value.pageNum = 1;
+      getList();
+   }
+   /** 重置按钮操作 */
+   function resetQuery() {
+      proxy.resetForm("queryRef");
+      handleQuery();
+   }
+   /** 多选框选中数据 */
+   function handleSelectionChange(selection) {
+      ids.value = selection.map(item => item.noticeId);
+      single.value = selection.length != 1;
+      multiple.value = !selection.length;
+   }
+   /** 新增按钮操作 */
+   function handleAdd() {
+      reset();
+      open.value = true;
+      title.value = "添加公告";
+   }
+   /**修改按钮操作 */
+   function handleUpdate(row) {
+      reset();
+      const noticeId = row.noticeId || ids.value;
+      getNotice(noticeId).then(response => {
+         form.value = response.data;
+         open.value = true;
+         title.value = "修改公告";
+      });
+   }
+   /** 提交按钮 */
+   function submitForm() {
+      proxy.$refs["noticeRef"].validate(valid => {
+         if (valid) {
+            if (form.value.noticeId != undefined) {
+               updateNotice(form.value).then(response => {
+                  proxy.$modal.msgSuccess("修改成功");
+                  open.value = false;
+                  getList();
+               });
+            } else {
+               addNotice(form.value).then(response => {
+                  proxy.$modal.msgSuccess("新增成功");
+                  open.value = false;
+                  getList();
+               });
+            }
+         }
+      });
+   }
+   /** 删除按钮操作 */
+   function handleDelete(row) {
+      const noticeIds = row.noticeId || ids.value
+      proxy.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function () {
+         return delNotice(noticeIds);
+      }).then(() => {
+         getList();
+         proxy.$modal.msgSuccess("删除成功");
+      }).catch(() => { });
+   }
 
-getList();
-</script>
+   getList();
+</script>
\ No newline at end of file
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index 6fd1b64..db51b69 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -1,114 +1,68 @@
 <template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
-         <el-form-item label="岗位编码" prop="postCode">
-            <el-input
-               v-model="queryParams.postCode"
-               placeholder="请输入岗位编码"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="岗位名称" prop="postName">
-            <el-input
-               v-model="queryParams.postName"
-               placeholder="请输入岗位名称"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="状态" prop="status">
-            <el-select v-model="queryParams.status" placeholder="岗位状态" clearable style="width: 200px">
-               <el-option
-                  v-for="dict in sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:post:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="success"
-               plain
-               icon="Edit"
-               :disabled="single"
-               @click="handleUpdate"
-               v-hasPermi="['system:post:edit']"
-            >修改</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['system:post:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['system:post:export']"
-            >导出</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
+   <div class="app-container app-container-bg">
+      <el-card class="first-card" ref='firstCard' shadow="always">
+         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+            <el-form-item label="岗位编码" prop="postCode">
+               <el-input v-model="queryParams.postCode" placeholder="请输入岗位编码" clearable style="width: 200px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="岗位名称" prop="postName">
+               <el-input v-model="queryParams.postName" placeholder="请输入岗位名称" clearable style="width: 200px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+               <el-select v-model="queryParams.status" placeholder="岗位状态" clearable style="width: 200px">
+                  <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+               </el-select>
+            </el-form-item>
+            <el-form-item>
+               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+         </el-form>
 
-      <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="岗位编号" align="center" prop="postId" />
-         <el-table-column label="岗位编码" align="center" prop="postCode" />
-         <el-table-column label="岗位名称" align="center" prop="postName" />
-         <el-table-column label="岗位排序" align="center" prop="postSort" />
-         <el-table-column label="状态" align="center" prop="status">
-            <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
+         <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+               <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:post:add']">新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:post:edit']">修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:post:remove']">删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:post:export']">导出</el-button>
+            </el-col>
+            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+         </el-row>
 
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
+      </el-card>
+      <div class="el-card-p card-shadow carder-border mt10 pad10 ">
+         <el-table v-table-height v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="岗位编号" align="center" prop="postId" />
+            <el-table-column label="岗位编码" align="center" prop="postCode" />
+            <el-table-column label="岗位名称" align="center" prop="postName" />
+            <el-table-column label="岗位排序" align="center" prop="postSort" />
+            <el-table-column label="状态" align="center" prop="status">
+               <template #default="scope">
+                  <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+               </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+               <template #default="scope">
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
+               </template>
+            </el-table-column>
+            <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
+               <template #default="scope">
+                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>
+                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button>
+               </template>
+            </el-table-column>
+         </el-table>
 
+         <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      </div>
       <!-- 添加或修改岗位对话框 -->
       <el-dialog :title="title" v-model="open" width="500px" append-to-body>
          <el-form ref="postRef" :model="form" :rules="rules" label-width="80px">
@@ -123,11 +77,7 @@
             </el-form-item>
             <el-form-item label="岗位状态" prop="status">
                <el-radio-group v-model="form.status">
-                  <el-radio
-                     v-for="dict in sys_normal_disable"
-                     :key="dict.value"
-                     :label="dict.value"
-                  >{{ dict.label }}</el-radio>
+                  <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
                </el-radio-group>
             </el-form-item>
             <el-form-item label="备注" prop="remark">
@@ -145,133 +95,133 @@
 </template>
 
 <script setup name="Post">
-import { listPost, addPost, delPost, getPost, updatePost } from "@/api/system/post";
+   import { listPost, addPost, delPost, getPost, updatePost } from "@/api/system/post";
 
-const { proxy } = getCurrentInstance();
-const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+   const { proxy } = getCurrentInstance();
+   const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
 
-const postList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
+   const postList = ref([]);
+   const open = ref(false);
+   const loading = ref(true);
+   const showSearch = ref(true);
+   const ids = ref([]);
+   const single = ref(true);
+   const multiple = ref(true);
+   const total = ref(0);
+   const title = ref("");
 
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    postCode: undefined,
-    postName: undefined,
-    status: undefined
-  },
-  rules: {
-    postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
-    postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],
-    postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
-  }
-});
+   const data = reactive({
+      form: {},
+      queryParams: {
+         pageNum: 1,
+         pageSize: 10,
+         postCode: undefined,
+         postName: undefined,
+         status: undefined
+      },
+      rules: {
+         postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
+         postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],
+         postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
+      }
+   });
 
-const { queryParams, form, rules } = toRefs(data);
+   const { queryParams, form, rules } = toRefs(data);
 
-/** 查询岗位列表 */
-function getList() {
-  loading.value = true;
-  listPost(queryParams.value).then(response => {
-    postList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
-}
-/** 取消按钮 */
-function cancel() {
-  open.value = false;
-  reset();
-}
-/** 表单重置 */
-function reset() {
-  form.value = {
-    postId: undefined,
-    postCode: undefined,
-    postName: undefined,
-    postSort: 0,
-    status: "0",
-    remark: undefined
-  };
-  proxy.resetForm("postRef");
-}
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
-}
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
-}
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.postId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
-/** 新增按钮操作 */
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加岗位";
-}
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset();
-  const postId = row.postId || ids.value;
-  getPost(postId).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改岗位";
-  });
-}
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["postRef"].validate(valid => {
-    if (valid) {
-      if (form.value.postId != undefined) {
-        updatePost(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addPost(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
-}
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const postIds = row.postId || ids.value;
-  proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function() {
-    return delPost(postIds);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
-}
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("system/post/export", {
-    ...queryParams.value
-  }, `post_${new Date().getTime()}.xlsx`);
-}
+   /** 查询岗位列表 */
+   function getList() {
+      loading.value = true;
+      listPost(queryParams.value).then(response => {
+         postList.value = response.rows;
+         total.value = response.total;
+         loading.value = false;
+      });
+   }
+   /** 取消按钮 */
+   function cancel() {
+      open.value = false;
+      reset();
+   }
+   /** 表单重置 */
+   function reset() {
+      form.value = {
+         postId: undefined,
+         postCode: undefined,
+         postName: undefined,
+         postSort: 0,
+         status: "0",
+         remark: undefined
+      };
+      proxy.resetForm("postRef");
+   }
+   /** 搜索按钮操作 */
+   function handleQuery() {
+      queryParams.value.pageNum = 1;
+      getList();
+   }
+   /** 重置按钮操作 */
+   function resetQuery() {
+      proxy.resetForm("queryRef");
+      handleQuery();
+   }
+   /** 多选框选中数据 */
+   function handleSelectionChange(selection) {
+      ids.value = selection.map(item => item.postId);
+      single.value = selection.length != 1;
+      multiple.value = !selection.length;
+   }
+   /** 新增按钮操作 */
+   function handleAdd() {
+      reset();
+      open.value = true;
+      title.value = "添加岗位";
+   }
+   /** 修改按钮操作 */
+   function handleUpdate(row) {
+      reset();
+      const postId = row.postId || ids.value;
+      getPost(postId).then(response => {
+         form.value = response.data;
+         open.value = true;
+         title.value = "修改岗位";
+      });
+   }
+   /** 提交按钮 */
+   function submitForm() {
+      proxy.$refs["postRef"].validate(valid => {
+         if (valid) {
+            if (form.value.postId != undefined) {
+               updatePost(form.value).then(response => {
+                  proxy.$modal.msgSuccess("修改成功");
+                  open.value = false;
+                  getList();
+               });
+            } else {
+               addPost(form.value).then(response => {
+                  proxy.$modal.msgSuccess("新增成功");
+                  open.value = false;
+                  getList();
+               });
+            }
+         }
+      });
+   }
+   /** 删除按钮操作 */
+   function handleDelete(row) {
+      const postIds = row.postId || ids.value;
+      proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function () {
+         return delPost(postIds);
+      }).then(() => {
+         getList();
+         proxy.$modal.msgSuccess("删除成功");
+      }).catch(() => { });
+   }
+   /** 导出按钮操作 */
+   function handleExport() {
+      proxy.download("system/post/export", {
+         ...queryParams.value
+      }, `post_${new Date().getTime()}.xlsx`);
+   }
 
-getList();
-</script>
+   getList();
+</script>
\ No newline at end of file
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 65c8216..206a46c 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,559 +1,469 @@
 <template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
-         <el-form-item label="角色名称" prop="roleName">
-            <el-input
-               v-model="queryParams.roleName"
-               placeholder="请输入角色名称"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="权限字符" prop="roleKey">
-            <el-input
-               v-model="queryParams.roleKey"
-               placeholder="请输入权限字符"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="状态" prop="status">
-            <el-select
-               v-model="queryParams.status"
-               placeholder="角色状态"
-               clearable
-               style="width: 240px"
-            >
-               <el-option
-                  v-for="dict in sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="创建时间" style="width: 308px">
-            <el-date-picker
-               v-model="dateRange"
-               value-format="YYYY-MM-DD"
-               type="daterange"
-               range-separator="-"
-               start-placeholder="开始日期"
-               end-placeholder="结束日期"
-            ></el-date-picker>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
+  <div class="app-container app-container-bg">
+    <el-card class="first-card" ref='firstCard' shadow="always">
+      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" @submit.native.prevent>
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+        </el-form-item>
+        <el-form-item label="权限字符" prop="roleKey">
+          <el-input v-model="queryParams.roleKey" placeholder="请输入权限字符" clearable style="width: 240px" @keyup.enter="handleQuery" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="queryParams.status" placeholder="角色状态" clearable style="width: 240px">
+            <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="创建时间" style="width: 308px">
+          <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
       </el-form>
       <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:role:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="success"
-               plain
-               icon="Edit"
-               :disabled="single"
-               @click="handleUpdate"
-               v-hasPermi="['system:role:edit']"
-            >修改</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['system:role:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['system:role:export']"
-            >导出</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        <el-col :span="1.5">
+          <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:role:edit']">修改</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:role:remove']">删除</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:role:export']">导出</el-button>
+        </el-col>
+        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
       </el-row>
+    </el-card>
 
-      <!-- 表格数据 -->
-      <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="角色编号" prop="roleId" width="120" />
-         <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
-         <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
-         <el-table-column label="显示顺序" prop="roleSort" width="100" />
-         <el-table-column label="状态" align="center" width="100">
-            <template #default="scope">
-               <el-switch
-                  v-model="scope.row.status"
-                  active-value="0"
-                  inactive-value="1"
-                  @change="handleStatusChange(scope.row)"
-               ></el-switch>
-            </template>
-         </el-table-column>
-         <el-table-column label="创建时间" align="center" prop="createTime">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template #default="scope">
-              <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
-                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
-              </el-tooltip>
-              <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
-                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button>
-              </el-tooltip>
-              <el-tooltip content="数据权限" placement="top" v-if="scope.row.roleId !== 1">
-                <el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
-              </el-tooltip>
-              <el-tooltip content="分配用户" placement="top" v-if="scope.row.roleId !== 1">
-                <el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
-              </el-tooltip>
-            </template>
-         </el-table-column>
+    <!-- 表格数据 -->
+    <div class="el-card-p card-shadow carder-border mt10 pad10 ">
+      <el-table  v-table-height v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="角色编号" prop="roleId" width="120" />
+        <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+        <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+        <el-table-column label="显示顺序" prop="roleSort" width="100" />
+        <el-table-column label="状态" align="center" width="100">
+          <template #default="scope">
+            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="数据权限" placement="top" v-if="scope.row.roleId !== 1">
+              <el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="分配用户" placement="top" v-if="scope.row.roleId !== 1">
+              <el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
       </el-table>
 
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
 
-      <!-- 添加或修改角色配置对话框 -->
-      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-         <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
-            <el-form-item label="角色名称" prop="roleName">
-               <el-input v-model="form.roleName" placeholder="请输入角色名称" />
-            </el-form-item>
-            <el-form-item prop="roleKey">
-               <template #label>
-                  <span>
-                     <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
-                        <el-icon><question-filled /></el-icon>
-                     </el-tooltip>
-                     权限字符
-                  </span>
-               </template>
-               <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
-            </el-form-item>
-            <el-form-item label="角色顺序" prop="roleSort">
-               <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
-            </el-form-item>
-            <el-form-item label="状态">
-               <el-radio-group v-model="form.status">
-                  <el-radio
-                     v-for="dict in sys_normal_disable"
-                     :key="dict.value"
-                     :label="dict.value"
-                  >{{ dict.label }}</el-radio>
-               </el-radio-group>
-            </el-form-item>
-            <el-form-item label="菜单权限">
-               <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
-               <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
-               <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
-               <el-tree
-                  class="tree-border"
-                  :data="menuOptions"
-                  show-checkbox
-                  ref="menuRef"
-                  node-key="id"
-                  :check-strictly="!form.menuCheckStrictly"
-                  empty-text="加载中，请稍候"
-                  :props="{ label: 'label', children: 'children' }"
-               ></el-tree>
-            </el-form-item>
-            <el-form-item label="备注">
-               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-            </el-form-item>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitForm">确 定</el-button>
-               <el-button @click="cancel">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
+    </div>
+    <!-- 添加或修改角色配置对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input v-model="form.roleName" placeholder="请输入角色名称" />
+        </el-form-item>
+        <el-form-item prop="roleKey">
+          <template #label>
+            <span>
+              <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+              权限字符
+            </span>
+          </template>
+          <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
+        </el-form-item>
+        <el-form-item label="角色顺序" prop="roleSort">
+          <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="菜单权限">
+          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
+          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
+          <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menuRef" node-key="id" :check-strictly="!form.menuCheckStrictly" empty-text="加载中，请稍候" :props="{ label: 'label', children: 'children' }"></el-tree>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
 
-      <!-- 分配角色数据权限对话框 -->
-      <el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body>
-         <el-form :model="form" label-width="80px">
-            <el-form-item label="角色名称">
-               <el-input v-model="form.roleName" :disabled="true" />
-            </el-form-item>
-            <el-form-item label="权限字符">
-               <el-input v-model="form.roleKey" :disabled="true" />
-            </el-form-item>
-            <el-form-item label="权限范围">
-               <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
-                  <el-option
-                     v-for="item in dataScopeOptions"
-                     :key="item.value"
-                     :label="item.label"
-                     :value="item.value"
-                  ></el-option>
-               </el-select>
-            </el-form-item>
-            <el-form-item label="数据权限" v-show="form.dataScope == 2">
-               <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
-               <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
-               <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
-               <el-tree
-                  class="tree-border"
-                  :data="deptOptions"
-                  show-checkbox
-                  default-expand-all
-                  ref="deptRef"
-                  node-key="id"
-                  :check-strictly="!form.deptCheckStrictly"
-                  empty-text="加载中，请稍候"
-                  :props="{ label: 'label', children: 'children' }"
-               ></el-tree>
-            </el-form-item>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitDataScope">确 定</el-button>
-               <el-button @click="cancelDataScope">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
-   </div>
+    <!-- 分配角色数据权限对话框 -->
+    <el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body>
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="角色名称">
+          <el-input v-model="form.roleName" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="权限字符">
+          <el-input v-model="form.roleKey" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="权限范围">
+          <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
+            <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据权限" v-show="form.dataScope == 2">
+          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
+          <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
+          <el-tree class="tree-border" :data="deptOptions" show-checkbox default-expand-all ref="deptRef" node-key="id" :check-strictly="!form.deptCheckStrictly" empty-text="加载中，请稍候" :props="{ label: 'label', children: 'children' }"></el-tree>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitDataScope">确 定</el-button>
+          <el-button @click="cancelDataScope">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup name="Role">
-import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role";
-import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu";
+  import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role";
+  import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu";
 
-const router = useRouter();
-const { proxy } = getCurrentInstance();
-const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+  const router = useRouter();
+  const { proxy } = getCurrentInstance();
+  const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
 
-const roleList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-const dateRange = ref([]);
-const menuOptions = ref([]);
-const menuExpand = ref(false);
-const menuNodeAll = ref(false);
-const deptExpand = ref(true);
-const deptNodeAll = ref(false);
-const deptOptions = ref([]);
-const openDataScope = ref(false);
-const menuRef = ref(null);
-const deptRef = ref(null);
+  const roleList = ref([]);
+  const open = ref(false);
+  const loading = ref(true);
+  const showSearch = ref(true);
+  const ids = ref([]);
+  const single = ref(true);
+  const multiple = ref(true);
+  const total = ref(0);
+  const title = ref("");
+  const dateRange = ref([]);
+  const menuOptions = ref([]);
+  const menuExpand = ref(false);
+  const menuNodeAll = ref(false);
+  const deptExpand = ref(true);
+  const deptNodeAll = ref(false);
+  const deptOptions = ref([]);
+  const openDataScope = ref(false);
+  const menuRef = ref(null);
+  const deptRef = ref(null);
 
-/** 数据范围选项*/
-const dataScopeOptions = ref([
-  { value: "1", label: "全部数据权限" },
-  { value: "2", label: "自定数据权限" },
-  { value: "3", label: "本部门数据权限" },
-  { value: "4", label: "本部门及以下数据权限" },
-  { value: "5", label: "仅本人数据权限" }
-]);
+  /** 数据范围选项*/
+  const dataScopeOptions = ref([
+    { value: "1", label: "全部数据权限" },
+    { value: "2", label: "自定数据权限" },
+    { value: "3", label: "本部门数据权限" },
+    { value: "4", label: "本部门及以下数据权限" },
+    { value: "5", label: "仅本人数据权限" }
+  ]);
 
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    roleName: undefined,
-    roleKey: undefined,
-    status: undefined
-  },
-  rules: {
-    roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
-    roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
-    roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }]
-  },
-});
+  const data = reactive({
+    form: {},
+    queryParams: {
+      pageNum: 1,
+      pageSize: 10,
+      roleName: undefined,
+      roleKey: undefined,
+      status: undefined
+    },
+    rules: {
+      roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
+      roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
+      roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }]
+    },
+  });
 
-const { queryParams, form, rules } = toRefs(data);
+  const { queryParams, form, rules } = toRefs(data);
 
-/** 查询角色列表 */
-function getList() {
-  loading.value = true;
-  listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    roleList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
-}
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
-}
-/** 重置按钮操作 */
-function resetQuery() {
-  dateRange.value = [];
-  proxy.resetForm("queryRef");
-  handleQuery();
-}
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const roleIds = row.roleId || ids.value;
-  proxy.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?').then(function () {
-    return delRole(roleIds);
-  }).then(() => {
+  /** 查询角色列表 */
+  function getList() {
+    loading.value = true;
+    listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+      roleList.value = response.rows;
+      total.value = response.total;
+      loading.value = false;
+    });
+  }
+  /** 搜索按钮操作 */
+  function handleQuery() {
+    queryParams.value.pageNum = 1;
     getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
-}
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("system/role/export", {
-    ...queryParams.value,
-  }, `role_${new Date().getTime()}.xlsx`);
-}
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.roleId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
-/** 角色状态修改 */
-function handleStatusChange(row) {
-  let text = row.status === "0" ? "启用" : "停用";
-  proxy.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?').then(function () {
-    return changeRoleStatus(row.roleId, row.status);
-  }).then(() => {
-    proxy.$modal.msgSuccess(text + "成功");
-  }).catch(function () {
-    row.status = row.status === "0" ? "1" : "0";
-  });
-}
-/** 更多操作 */
-function handleCommand(command, row) {
-  switch (command) {
-    case "handleDataScope":
-      handleDataScope(row);
-      break;
-    case "handleAuthUser":
-      handleAuthUser(row);
-      break;
-    default:
-      break;
   }
-}
-/** 分配用户 */
-function handleAuthUser(row) {
-  router.push("/system/role-auth/user/" + row.roleId);
-}
-/** 查询菜单树结构 */
-function getMenuTreeselect() {
-  menuTreeselect().then(response => {
-    menuOptions.value = response.data;
-  });
-}
-/** 所有部门节点数据 */
-function getDeptAllCheckedKeys() {
-  // 目前被选中的部门节点
-  let checkedKeys = deptRef.value.getCheckedKeys();
-  // 半选中的部门节点
-  let halfCheckedKeys = deptRef.value.getHalfCheckedKeys();
-  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-  return checkedKeys;
-}
-/** 重置新增的表单以及其他数据  */
-function reset() {
-  if (menuRef.value != undefined) {
-    menuRef.value.setCheckedKeys([]);
+  /** 重置按钮操作 */
+  function resetQuery() {
+    dateRange.value = [];
+    proxy.resetForm("queryRef");
+    handleQuery();
+  }
+  /** 删除按钮操作 */
+  function handleDelete(row) {
+    const roleIds = row.roleId || ids.value;
+    proxy.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?').then(function () {
+      return delRole(roleIds);
+    }).then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    }).catch(() => { });
+  }
+  /** 导出按钮操作 */
+  function handleExport() {
+    proxy.download("system/role/export", {
+      ...queryParams.value,
+    }, `role_${new Date().getTime()}.xlsx`);
+  }
+  /** 多选框选中数据 */
+  function handleSelectionChange(selection) {
+    ids.value = selection.map(item => item.roleId);
+    single.value = selection.length != 1;
+    multiple.value = !selection.length;
+  }
+  /** 角色状态修改 */
+  function handleStatusChange(row) {
+    let text = row.status === "0" ? "启用" : "停用";
+    proxy.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?').then(function () {
+      return changeRoleStatus(row.roleId, row.status);
+    }).then(() => {
+      proxy.$modal.msgSuccess(text + "成功");
+    }).catch(function () {
+      row.status = row.status === "0" ? "1" : "0";
+    });
+  }
+  /** 更多操作 */
+  function handleCommand(command, row) {
+    switch (command) {
+      case "handleDataScope":
+        handleDataScope(row);
+        break;
+      case "handleAuthUser":
+        handleAuthUser(row);
+        break;
+      default:
+        break;
+    }
+  }
+  /** 分配用户 */
+  function handleAuthUser(row) {
+    router.push("/system/role-auth/user/" + row.roleId);
   }
-  menuExpand.value = false;
-  menuNodeAll.value = false;
-  deptExpand.value = true;
-  deptNodeAll.value = false;
-  form.value = {
-    roleId: undefined,
-    roleName: undefined,
-    roleKey: undefined,
-    roleSort: 0,
-    status: "0",
-    menuIds: [],
-    deptIds: [],
-    menuCheckStrictly: true,
-    deptCheckStrictly: true,
-    remark: undefined
-  };
-  proxy.resetForm("roleRef");
-}
-/** 添加角色 */
-function handleAdd() {
-  reset();
-  getMenuTreeselect();
-  open.value = true;
-  title.value = "添加角色";
-}
-/** 修改角色 */
-function handleUpdate(row) {
-  reset();
-  const roleId = row.roleId || ids.value;
-  const roleMenu = getRoleMenuTreeselect(roleId);
-  getRole(roleId).then(response => {
-    form.value = response.data;
-    form.value.roleSort = Number(form.value.roleSort);
+  /** 查询菜单树结构 */
+  function getMenuTreeselect() {
+    menuTreeselect().then(response => {
+      menuOptions.value = response.data;
+    });
+  }
+  /** 所有部门节点数据 */
+  function getDeptAllCheckedKeys() {
+    // 目前被选中的部门节点
+    let checkedKeys = deptRef.value.getCheckedKeys();
+    // 半选中的部门节点
+    let halfCheckedKeys = deptRef.value.getHalfCheckedKeys();
+    checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+    return checkedKeys;
+  }
+  /** 重置新增的表单以及其他数据  */
+  function reset() {
+    if (menuRef.value != undefined) {
+      menuRef.value.setCheckedKeys([]);
+    }
+    menuExpand.value = false;
+    menuNodeAll.value = false;
+    deptExpand.value = true;
+    deptNodeAll.value = false;
+    form.value = {
+      roleId: undefined,
+      roleName: undefined,
+      roleKey: undefined,
+      roleSort: 0,
+      status: "0",
+      menuIds: [],
+      deptIds: [],
+      menuCheckStrictly: true,
+      deptCheckStrictly: true,
+      remark: undefined
+    };
+    proxy.resetForm("roleRef");
+  }
+  /** 添加角色 */
+  function handleAdd() {
+    reset();
+    getMenuTreeselect();
     open.value = true;
-    nextTick(() => {
-      roleMenu.then((res) => {
-        let checkedKeys = res.checkedKeys;
-        checkedKeys.forEach((v) => {
-          nextTick(() => {
-            menuRef.value.setChecked(v, true, false);
+    title.value = "添加角色";
+  }
+  /** 修改角色 */
+  function handleUpdate(row) {
+    reset();
+    const roleId = row.roleId || ids.value;
+    const roleMenu = getRoleMenuTreeselect(roleId);
+    getRole(roleId).then(response => {
+      form.value = response.data;
+      form.value.roleSort = Number(form.value.roleSort);
+      open.value = true;
+      nextTick(() => {
+        roleMenu.then((res) => {
+          let checkedKeys = res.checkedKeys;
+          checkedKeys.forEach((v) => {
+            nextTick(() => {
+              menuRef.value.setChecked(v, true, false);
+            });
           });
         });
       });
+      title.value = "修改角色";
     });
-    title.value = "修改角色";
-  });
-}
-/** 根据角色ID查询菜单树结构 */
-function getRoleMenuTreeselect(roleId) {
-  return roleMenuTreeselect(roleId).then(response => {
-    menuOptions.value = response.menus;
-    return response;
-  });
-}
-/** 根据角色ID查询部门树结构 */
-function getDeptTree(roleId) {
-  return deptTreeSelect(roleId).then(response => {
-    deptOptions.value = response.depts;
-    return response;
-  });
-}
-/** 树权限（展开/折叠）*/
-function handleCheckedTreeExpand(value, type) {
-  if (type == "menu") {
-    let treeList = menuOptions.value;
-    for (let i = 0; i < treeList.length; i++) {
-      menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
+  }
+  /** 根据角色ID查询菜单树结构 */
+  function getRoleMenuTreeselect(roleId) {
+    return roleMenuTreeselect(roleId).then(response => {
+      menuOptions.value = response.menus;
+      return response;
+    });
+  }
+  /** 根据角色ID查询部门树结构 */
+  function getDeptTree(roleId) {
+    return deptTreeSelect(roleId).then(response => {
+      deptOptions.value = response.depts;
+      return response;
+    });
+  }
+  /** 树权限（展开/折叠）*/
+  function handleCheckedTreeExpand(value, type) {
+    if (type == "menu") {
+      let treeList = menuOptions.value;
+      for (let i = 0; i < treeList.length; i++) {
+        menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
+      }
+    } else if (type == "dept") {
+      let treeList = deptOptions.value;
+      for (let i = 0; i < treeList.length; i++) {
+        deptRef.value.store.nodesMap[treeList[i].id].expanded = value;
+      }
     }
-  } else if (type == "dept") {
-    let treeList = deptOptions.value;
-    for (let i = 0; i < treeList.length; i++) {
-      deptRef.value.store.nodesMap[treeList[i].id].expanded = value;
+  }
+  /** 树权限（全选/全不选） */
+  function handleCheckedTreeNodeAll(value, type) {
+    if (type == "menu") {
+      menuRef.value.setCheckedNodes(value ? menuOptions.value : []);
+    } else if (type == "dept") {
+      deptRef.value.setCheckedNodes(value ? deptOptions.value : []);
     }
   }
-}
-/** 树权限（全选/全不选） */
-function handleCheckedTreeNodeAll(value, type) {
-  if (type == "menu") {
-    menuRef.value.setCheckedNodes(value ? menuOptions.value : []);
-  } else if (type == "dept") {
-    deptRef.value.setCheckedNodes(value ? deptOptions.value : []);
+  /** 树权限（父子联动） */
+  function handleCheckedTreeConnect(value, type) {
+    if (type == "menu") {
+      form.value.menuCheckStrictly = value ? true : false;
+    } else if (type == "dept") {
+      form.value.deptCheckStrictly = value ? true : false;
+    }
   }
-}
-/** 树权限（父子联动） */
-function handleCheckedTreeConnect(value, type) {
-  if (type == "menu") {
-    form.value.menuCheckStrictly = value ? true : false;
-  } else if (type == "dept") {
-    form.value.deptCheckStrictly = value ? true : false;
+  /** 所有菜单节点数据 */
+  function getMenuAllCheckedKeys() {
+    // 目前被选中的菜单节点
+    let checkedKeys = menuRef.value.getCheckedKeys();
+    // 半选中的菜单节点
+    let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
+    checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+    return checkedKeys;
   }
-}
-/** 所有菜单节点数据 */
-function getMenuAllCheckedKeys() {
-  // 目前被选中的菜单节点
-  let checkedKeys = menuRef.value.getCheckedKeys();
-  // 半选中的菜单节点
-  let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
-  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-  return checkedKeys;
-}
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["roleRef"].validate(valid => {
-    if (valid) {
-      if (form.value.roleId != undefined) {
-        form.value.menuIds = getMenuAllCheckedKeys();
-        updateRole(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        form.value.menuIds = getMenuAllCheckedKeys();
-        addRole(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
+  /** 提交按钮 */
+  function submitForm() {
+    proxy.$refs["roleRef"].validate(valid => {
+      if (valid) {
+        if (form.value.roleId != undefined) {
+          form.value.menuIds = getMenuAllCheckedKeys();
+          updateRole(form.value).then(response => {
+            proxy.$modal.msgSuccess("修改成功");
+            open.value = false;
+            getList();
+          });
+        } else {
+          form.value.menuIds = getMenuAllCheckedKeys();
+          addRole(form.value).then(response => {
+            proxy.$modal.msgSuccess("新增成功");
+            open.value = false;
+            getList();
+          });
+        }
       }
+    });
+  }
+  /** 取消按钮 */
+  function cancel() {
+    open.value = false;
+    reset();
+  }
+  /** 选择角色权限范围触发 */
+  function dataScopeSelectChange(value) {
+    if (value !== "2") {
+      deptRef.value.setCheckedKeys([]);
     }
-  });
-}
-/** 取消按钮 */
-function cancel() {
-  open.value = false;
-  reset();
-}
-/** 选择角色权限范围触发 */
-function dataScopeSelectChange(value) {
-  if (value !== "2") {
-    deptRef.value.setCheckedKeys([]);
   }
-}
-/** 分配数据权限操作 */
-function handleDataScope(row) {
-  reset();
-  const deptTreeSelect = getDeptTree(row.roleId);
-  getRole(row.roleId).then(response => {
-    form.value = response.data;
-    openDataScope.value = true;
-    nextTick(() => {
-      deptTreeSelect.then(res => {
-        nextTick(() => {
-          if (deptRef.value) {
-            deptRef.value.setCheckedKeys(res.checkedKeys);
-          }
+  /** 分配数据权限操作 */
+  function handleDataScope(row) {
+    reset();
+    const deptTreeSelect = getDeptTree(row.roleId);
+    getRole(row.roleId).then(response => {
+      form.value = response.data;
+      openDataScope.value = true;
+      nextTick(() => {
+        deptTreeSelect.then(res => {
+          nextTick(() => {
+            if (deptRef.value) {
+              deptRef.value.setCheckedKeys(res.checkedKeys);
+            }
+          });
         });
       });
-    });
-    title.value = "分配数据权限";
-  });
-}
-/** 提交按钮（数据权限） */
-function submitDataScope() {
-  if (form.value.roleId != undefined) {
-    form.value.deptIds = getDeptAllCheckedKeys();
-    dataScope(form.value).then(response => {
-      proxy.$modal.msgSuccess("修改成功");
-      openDataScope.value = false;
-      getList();
+      title.value = "分配数据权限";
     });
   }
-}
-/** 取消按钮（数据权限）*/
-function cancelDataScope() {
-  openDataScope.value = false;
-  reset();
-}
+  /** 提交按钮（数据权限） */
+  function submitDataScope() {
+    if (form.value.roleId != undefined) {
+      form.value.deptIds = getDeptAllCheckedKeys();
+      dataScope(form.value).then(response => {
+        proxy.$modal.msgSuccess("修改成功");
+        openDataScope.value = false;
+        getList();
+      });
+    }
+  }
+  /** 取消按钮（数据权限）*/
+  function cancelDataScope() {
+    openDataScope.value = false;
+    reset();
+  }
 
-getList();
-</script>
+  getList();
+</script>
\ No newline at end of file