From 3add8302c98c665de141cece068d84b3faae4720 Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Sat, 4 Feb 2023 22:46:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=85=A8=E5=B1=80=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/style/global.less              |  18 +
 .../src/router/routes/modules/monitor.ts      |   2 +-
 .../src/router/routes/modules/system.ts       |   2 +-
 .../src/views/login/components/login-form.vue |  10 +-
 continew-admin-ui/src/views/login/index.vue   |   3 -
 .../src/views/monitor/log/login/index.vue     |  23 +-
 .../src/views/monitor/log/operation/index.vue |  23 +-
 .../src/views/monitor/log/system/index.vue    |  24 +-
 .../src/views/monitor/online/index.vue        |  23 +-
 .../src/views/system/dept/index.vue           | 626 +++++++++---------
 .../center/components/security-settings.vue   |   6 -
 .../user/center/components/user-panel.vue     |   1 -
 12 files changed, 340 insertions(+), 421 deletions(-)

diff --git a/continew-admin-ui/src/assets/style/global.less b/continew-admin-ui/src/assets/style/global.less
index b6b80fff..11dfcba2 100644
--- a/continew-admin-ui/src/assets/style/global.less
+++ b/continew-admin-ui/src/assets/style/global.less
@@ -62,6 +62,16 @@ body {
   }
 }
 
+.app-container {
+  padding: 0 20px 20px 20px;
+  .header {
+    margin-bottom: 16px;
+    &-query {
+      margin-bottom: 8px;
+    }
+  }
+}
+
 .general-card {
   border-radius: 4px;
   border: none;
@@ -79,6 +89,14 @@ body {
   border-color: rgb(var(--gray-2));
 }
 
+:deep(.arco-table-th) {
+  &:last-child {
+    .arco-table-th-item-title {
+      margin-left: 16px;
+    }
+  }
+}
+
 .arco-table-cell {
   .circle {
     display: inline-block;
diff --git a/continew-admin-ui/src/router/routes/modules/monitor.ts b/continew-admin-ui/src/router/routes/modules/monitor.ts
index 0a3c863c..97fb13cb 100644
--- a/continew-admin-ui/src/router/routes/modules/monitor.ts
+++ b/continew-admin-ui/src/router/routes/modules/monitor.ts
@@ -7,8 +7,8 @@ const Monitor: AppRouteRecordRaw = {
   component: DEFAULT_LAYOUT,
   meta: {
     locale: 'menu.monitor',
-    requiresAuth: true,
     icon: 'icon-computer',
+    requiresAuth: true,
     order: 3,
   },
   children: [
diff --git a/continew-admin-ui/src/router/routes/modules/system.ts b/continew-admin-ui/src/router/routes/modules/system.ts
index b0c71c23..de283d57 100644
--- a/continew-admin-ui/src/router/routes/modules/system.ts
+++ b/continew-admin-ui/src/router/routes/modules/system.ts
@@ -7,8 +7,8 @@ const System: AppRouteRecordRaw = {
   component: DEFAULT_LAYOUT,
   meta: {
     locale: 'menu.system',
-    requiresAuth: true,
     icon: 'icon-settings',
+    requiresAuth: true,
     order: 2,
   },
   children: [
diff --git a/continew-admin-ui/src/views/login/components/login-form.vue b/continew-admin-ui/src/views/login/components/login-form.vue
index cf278bc9..f009d18b 100644
--- a/continew-admin-ui/src/views/login/components/login-form.vue
+++ b/continew-admin-ui/src/views/login/components/login-form.vue
@@ -83,8 +83,8 @@
     rememberMe: true,
     username: 'admin', // 演示默认值
     password: 'admin123', // 演示默认值
-    // username: !debug ? '' : 'admin', // 演示默认值
-    // password: !debug ? '' : 'admin123', // 演示默认值
+    // username: debug ? 'admin' : '', // 演示默认值
+    // password: debug ? 'admin123' : '', // 演示默认值
   });
 
   const data = reactive({
@@ -168,36 +168,30 @@
 <style lang="less" scoped>
   .login-form {
     margin-top: 32px;
-
     &-wrapper {
       width: 320px;
     }
-
     &-title {
       color: var(--color-text-1);
       font-weight: 500;
       font-size: 24px;
       line-height: 32px;
     }
-
     &-sub-title {
       color: var(--color-text-3);
       font-size: 16px;
       line-height: 24px;
     }
-
     &-captcha img {
       width: 111px;
       height: 36px;
       margin: 0 0 0 10px;
       cursor: pointer;
     }
-
     &-remember-me {
       display: flex;
       justify-content: space-between;
     }
-
     &-register-btn {
       color: var(--color-text-3) !important;
     }
diff --git a/continew-admin-ui/src/views/login/index.vue b/continew-admin-ui/src/views/login/index.vue
index b7c503b6..e4b1e1cf 100644
--- a/continew-admin-ui/src/views/login/index.vue
+++ b/continew-admin-ui/src/views/login/index.vue
@@ -26,12 +26,10 @@
   .container {
     display: flex;
     height: 100vh;
-
     .banner {
       width: 550px;
       background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
     }
-
     .content {
       position: relative;
       display: flex;
@@ -40,7 +38,6 @@
       justify-content: center;
       padding-bottom: 40px;
     }
-
     .footer {
       position: absolute;
       right: 0;
diff --git a/continew-admin-ui/src/views/monitor/log/login/index.vue b/continew-admin-ui/src/views/monitor/log/login/index.vue
index 4d9e8382..2f9297a6 100644
--- a/continew-admin-ui/src/views/monitor/log/login/index.vue
+++ b/continew-admin-ui/src/views/monitor/log/login/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="container">
+  <div class="app-container">
     <Breadcrumb :items="['menu.monitor', 'menu.log.login.list']" />
     <a-card class="general-card" :title="$t('menu.log.login.list')">
       <!-- 头部区域 -->
-      <div class="head-container">
+      <div class="header">
         <!-- 搜索栏 -->
-        <div class="query-container">
+        <div class="header-query">
           <a-form ref="queryRef" :model="queryParams" layout="inline">
             <a-form-item field="status" hide-label>
               <a-select
@@ -120,6 +120,7 @@
     listLoginLog(params).then((res) => {
       loginLogList.value = res.data.list;
       total.value = res.data.total;
+    }).finally(() => {
       loading.value = false;
     });
   };
@@ -167,18 +168,4 @@
   };
 </script>
 
-<style scoped lang="less">
-  .container {
-    padding: 0 20px 20px 20px;
-    .head-container {
-      margin-bottom: 16px
-    }
-  }
-  :deep(.arco-table-th) {
-    &:last-child {
-      .arco-table-th-item-title {
-        margin-left: 16px;
-      }
-    }
-  }
-</style>
+<style scoped lang="less"></style>
diff --git a/continew-admin-ui/src/views/monitor/log/operation/index.vue b/continew-admin-ui/src/views/monitor/log/operation/index.vue
index 70976b27..d7e330c5 100644
--- a/continew-admin-ui/src/views/monitor/log/operation/index.vue
+++ b/continew-admin-ui/src/views/monitor/log/operation/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="container">
+  <div class="app-container">
     <Breadcrumb :items="['menu.monitor', 'menu.log.operation.list']" />
     <a-card class="general-card" :title="$t('menu.log.operation.list')">
       <!-- 头部区域 -->
-      <div class="head-container">
+      <div class="header">
         <!-- 搜索栏 -->
-        <div class="query-container">
+        <div class="header-query">
           <a-form ref="queryRef" :model="queryParams" layout="inline">
             <a-form-item field="description" hide-label>
               <a-input
@@ -131,6 +131,7 @@
     listOperationLog(params).then((res) => {
       operationLogList.value = res.data.list;
       total.value = res.data.total;
+    }).finally(() => {
       loading.value = false;
     });
   };
@@ -178,18 +179,4 @@
   };
 </script>
 
-<style scoped lang="less">
-  .container {
-    padding: 0 20px 20px 20px;
-    .head-container {
-      margin-bottom: 16px
-    }
-  }
-  :deep(.arco-table-th) {
-    &:last-child {
-      .arco-table-th-item-title {
-        margin-left: 16px;
-      }
-    }
-  }
-</style>
+<style scoped lang="less"></style>
diff --git a/continew-admin-ui/src/views/monitor/log/system/index.vue b/continew-admin-ui/src/views/monitor/log/system/index.vue
index 8cff7903..94300e24 100644
--- a/continew-admin-ui/src/views/monitor/log/system/index.vue
+++ b/continew-admin-ui/src/views/monitor/log/system/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="container">
+  <div class="app-container">
     <Breadcrumb :items="['menu.monitor', 'menu.log.system.list']" />
     <a-card class="general-card" :title="$t('menu.log.system.list')">
       <!-- 头部区域 -->
-      <div class="head-container">
+      <div class="header">
         <!-- 搜索栏 -->
-        <div class="query-container">
+        <div class="header-query">
           <a-form ref="queryRef" :model="queryParams" layout="inline">
             <a-form-item field="createTime" hide-label>
               <date-range-picker v-model="queryParams.createTime" />
@@ -288,6 +288,7 @@
     listSystemLog(params).then((res) => {
       systemLogList.value = res.data.list;
       total.value = res.data.total;
+    }).finally(() => {
       loading.value = false;
     });
   };
@@ -303,6 +304,7 @@
     loading.value = true;
     getSystemLog(id).then((res) => {
       systemLog.value = res.data;
+    }).finally(() => {
       loading.value = false;
     });
   };
@@ -374,18 +376,4 @@
   };
 </script>
 
-<style scoped lang="less">
-  .container {
-    padding: 0 20px 20px 20px;
-    .head-container {
-      margin-bottom: 16px
-    }
-  }
-  :deep(.arco-table-th) {
-    &:last-child {
-      .arco-table-th-item-title {
-        margin-left: 16px;
-      }
-    }
-  }
-</style>
+<style scoped lang="less"></style>
diff --git a/continew-admin-ui/src/views/monitor/online/index.vue b/continew-admin-ui/src/views/monitor/online/index.vue
index 03f6e2bf..81a69dfb 100644
--- a/continew-admin-ui/src/views/monitor/online/index.vue
+++ b/continew-admin-ui/src/views/monitor/online/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="container">
+  <div class="app-container">
     <Breadcrumb :items="['menu.monitor', 'menu.online.user.list']" />
     <a-card class="general-card" :title="$t('menu.online.user.list')">
       <!-- 头部区域 -->
-      <div class="head-container">
+      <div class="header">
         <!-- 搜索栏 -->
-        <div class="query-container">
+        <div class="header-query">
           <a-form ref="queryRef" :model="queryParams" layout="inline">
             <a-form-item field="nickname" hide-label>
               <a-input
@@ -126,6 +126,7 @@
     listOnlineUser(params).then((res) => {
       onlineUserList.value = res.data.list;
       total.value = res.data.total;
+    }).finally(() => {
       loading.value = false;
     });
   };
@@ -185,18 +186,4 @@
   };
 </script>
 
-<style scoped lang="less">
-  .container {
-    padding: 0 20px 20px 20px;
-    .head-container {
-      margin-bottom: 16px
-    }
-  }
-  :deep(.arco-table-th) {
-    &:last-child {
-      .arco-table-th-item-title {
-        margin-left: 16px;
-      }
-    }
-  }
-</style>
+<style scoped lang="less"></style>
diff --git a/continew-admin-ui/src/views/system/dept/index.vue b/continew-admin-ui/src/views/system/dept/index.vue
index 1a088340..ee2ec83a 100644
--- a/continew-admin-ui/src/views/system/dept/index.vue
+++ b/continew-admin-ui/src/views/system/dept/index.vue
@@ -1,51 +1,51 @@
 <template>
-  <div class="container">
+  <div class="app-container">
     <Breadcrumb :items="['menu.system', 'menu.system.dept.list']" />
     <a-card class="general-card" :title="$t('menu.system.dept.list')">
-      <a-row :gutter="20">
-        <a-col>
-          <!-- 搜索栏 -->
-          <div class="query-container">
-            <a-form ref="queryRef" :model="queryParams" layout="inline">
-              <a-form-item field="deptName" hide-label>
-                <a-input
-                  v-model="queryParams.deptName"
-                  placeholder="输入部门名称搜索"
-                  allow-clear
-                  style="width: 150px"
-                  @press-enter="handleQuery"
-                />
-              </a-form-item>
-              <a-form-item field="status" hide-label>
-                <a-select
-                  v-model="queryParams.status"
-                  :options="statusOptions"
-                  placeholder="状态搜索"
-                  allow-clear
-                  style="width: 150px"
-                />
-              </a-form-item>
-              <a-form-item hide-label>
-                <a-space>
-                  <a-button type="primary" @click="handleQuery">
-                    <template #icon><icon-search /></template>查询
-                  </a-button>
-                  <a-button @click="resetQuery">
-                    <template #icon><icon-refresh /></template>重置
-                  </a-button>
-                </a-space>
-              </a-form-item>
-            </a-form>
-          </div>
-
-          <!-- 操作栏 -->
-          <a-row style="margin-bottom: 16px">
+      <!-- 头部区域 -->
+      <div class="header">
+        <!-- 搜索栏 -->
+        <div class="header-query">
+          <a-form ref="queryRef" :model="queryParams" layout="inline">
+            <a-form-item field="deptName" hide-label>
+              <a-input
+                v-model="queryParams.deptName"
+                placeholder="输入部门名称搜索"
+                allow-clear
+                style="width: 150px"
+                @press-enter="handleQuery"
+              />
+            </a-form-item>
+            <a-form-item field="status" hide-label>
+              <a-select
+                v-model="queryParams.status"
+                :options="statusOptions"
+                placeholder="状态搜索"
+                allow-clear
+                style="width: 150px"
+              />
+            </a-form-item>
+            <a-form-item hide-label>
+              <a-space>
+                <a-button type="primary" @click="handleQuery">
+                  <template #icon><icon-search /></template>查询
+                </a-button>
+                <a-button @click="resetQuery">
+                  <template #icon><icon-refresh /></template>重置
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-form>
+        </div>
+        <!-- 操作栏 -->
+        <div class="header-operation">
+          <a-row>
             <a-col :span="12">
               <a-space>
                 <a-button type="primary" @click="toCreate">
                   <template #icon><icon-plus /></template>新增
                 </a-button>
-                <a-button type="primary" status="danger" :disabled="multiple" @click="handleBatchDelete">
+                <a-button type="primary" status="danger" :disabled="multiple" :title="multiple ? '请选择要删除的数据' : ''" @click="handleBatchDelete">
                   <template #icon><icon-delete /></template>删除
                 </a-button>
               </a-space>
@@ -56,183 +56,183 @@
               </a-button>
             </a-col>
           </a-row>
+        </div>
+      </div>
 
-          <!-- 列表区域 -->
-          <a-table
-            ref="tableRef"
-            :data="deptList"
-            :row-selection="{
-              type: 'checkbox',
-              showCheckedAll: true,
-              onlyCurrent: false,
-            }"
-            :pagination="false"
-            :default-expand-all-rows="true"
-            :hide-expand-button-on-empty="true"
-            row-key="deptId"
-            :bordered="false"
-            :stripe="true"
-            :loading="loading"
-            size="large"
-            @selection-change="handleSelectionChange"
-          >
-            <template #columns>
-              <a-table-column title="部门名称" data-index="deptName">
-                <template #cell="{ record }">
-                  <a-button type="text" size="small" @click="toDetail(record.deptId)">{{ record.deptName }}</a-button>
-                </template>
-              </a-table-column>
-              <a-table-column title="部门排序" align="center" data-index="deptSort" />
-              <a-table-column title="状态" align="center" data-index="status">
-                <template #cell="{ record }">
-                  <a-switch
-                    v-model="record.status"
-                    :checked-value="1"
-                    :unchecked-value="2"
-                    @change="handleChangeStatus(record)"
-                  />
-                </template>
-              </a-table-column>
-              <a-table-column title="描述" data-index="description" />
-              <a-table-column title="创建人" data-index="createUserString" />
-              <a-table-column title="创建时间" data-index="createTime" />
-              <a-table-column title="操作" align="center">
-                <template #cell="{ record }">
-                  <a-button v-permission="['admin']" type="text" size="small" @click="toUpdate(record.deptId)">
-                    <template #icon><icon-edit /></template>修改
-                  </a-button>
-                  <a-popconfirm content="确定要删除当前选中的数据吗？如果存在下级部门则一并删除，此操作不能撤销！" type="warning" @ok="handleDelete([record.deptId])">
-                    <a-button v-permission="['admin']" type="text" size="small">
-                      <template #icon><icon-delete /></template>删除
-                    </a-button>
-                  </a-popconfirm>
-                </template>
-              </a-table-column>
+      <!-- 列表区域 -->
+      <a-table
+        ref="tableRef"
+        :data="deptList"
+        :row-selection="{
+          type: 'checkbox',
+          showCheckedAll: true,
+          onlyCurrent: false,
+        }"
+        :pagination="false"
+        :default-expand-all-rows="true"
+        :hide-expand-button-on-empty="true"
+        row-key="deptId"
+        :bordered="false"
+        :stripe="true"
+        :loading="loading"
+        size="large"
+        @selection-change="handleSelectionChange"
+      >
+        <template #columns>
+          <a-table-column title="部门名称" data-index="deptName">
+            <template #cell="{ record }">
+              <a-link @click="toDetail(record.deptId)">{{ record.deptName }}</a-link>
             </template>
-          </a-table>
+          </a-table-column>
+          <a-table-column title="部门排序" align="center" data-index="deptSort" />
+          <a-table-column title="状态" align="center" data-index="status">
+            <template #cell="{ record }">
+              <a-switch
+                v-model="record.status"
+                :checked-value="1"
+                :unchecked-value="2"
+                @change="handleChangeStatus(record)"
+              />
+            </template>
+          </a-table-column>
+          <a-table-column title="描述" data-index="description" />
+          <a-table-column title="创建人" data-index="createUserString" />
+          <a-table-column title="创建时间" data-index="createTime" />
+          <a-table-column title="操作" align="center">
+            <template #cell="{ record }">
+              <a-button v-permission="['admin']" type="text" size="small" title="修改" @click="toUpdate(record.deptId)">
+                <template #icon><icon-edit /></template>修改
+              </a-button>
+              <a-popconfirm content="确定要删除当前选中的数据吗？如果存在下级部门则一并删除，此操作不能撤销！" type="warning" @ok="handleDelete([record.deptId])">
+                <a-button v-permission="['admin']" type="text" size="small" title="删除">
+                  <template #icon><icon-delete /></template>删除
+                </a-button>
+              </a-popconfirm>
+            </template>
+          </a-table-column>
+        </template>
+      </a-table>
 
-          <!-- 对话框区域 -->
-          <a-modal
-            :title="title"
-            :visible="visible"
-            :width="570"
-            :mask-closable="false"
-            unmount-on-close
-            render-to-body
-            @ok="handleOk"
-            @cancel="handleCancel"
-          >
-            <a-form ref="formRef" :model="form" :rules="rules">
-              <a-form-item label="上级部门" field="parentId">
-                <a-tree-select
-                  v-model="form.parentId"
-                  :data="treeData"
-                  placeholder="请选择上级部门"
-                  allow-clear
-                  allow-search
-                  :filter-tree-node="filterDeptTree"
-                  :fallback-option="false"
-                  size="large"
-                />
-              </a-form-item>
-              <a-form-item label="部门名称" field="deptName">
-                <a-input v-model="form.deptName" placeholder="请输入部门名称" size="large" />
-              </a-form-item>
-              <a-form-item label="部门排序" field="deptSort">
-                <a-input-number
-                  v-model="form.deptSort"
-                  :min="1"
-                  placeholder="请输入部门排序"
-                  mode="button"
-                  size="large"
-                />
-              </a-form-item>
-              <a-form-item label="描述" field="description">
-                <a-textarea
-                  v-model="form.description"
-                  :max-length="200"
-                  placeholder="请输入描述"
-                  :auto-size="{
-                    minRows:3,
-                  }"
-                  show-word-limit
-                  size="large"
-                />
-              </a-form-item>
-            </a-form>
-          </a-modal>
-
-          <!-- 抽屉区域 -->
-          <a-drawer
-            title="部门详情"
-            :visible="detailVisible"
-            :width="570"
-            :footer="false"
-            unmount-on-close
-            render-to-body
-            @cancel="handleDetailCancel"
-          >
-            <a-descriptions
-              title="基础信息"
-              :column="2"
-              bordered
+      <!-- 表单区域 -->
+      <a-modal
+        :title="title"
+        :visible="visible"
+        :width="570"
+        :mask-closable="false"
+        unmount-on-close
+        render-to-body
+        @ok="handleOk"
+        @cancel="handleCancel"
+      >
+        <a-form ref="formRef" :model="form" :rules="rules">
+          <a-form-item label="上级部门" field="parentId">
+            <a-tree-select
+              v-model="form.parentId"
+              :data="treeData"
+              placeholder="请选择上级部门"
+              allow-clear
+              allow-search
+              :filter-tree-node="filterDeptTree"
+              :fallback-option="false"
               size="large"
-            >
-              <a-descriptions-item label="部门名称">
-                <a-skeleton v-if="detailLoading" :animation="true">
-                  <a-skeleton-line :rows="1" />
-                </a-skeleton>
-                <span v-else>{{ dept.deptName }}</span>
-              </a-descriptions-item>
-              <a-descriptions-item label="状态">
-                <a-skeleton v-if="detailLoading" :animation="true">
-                  <a-skeleton-line :rows="1" />
-                </a-skeleton>
-                <span v-else>
-                  <a-tag v-if="dept.status === 1" color="green"><span class="circle pass"></span>启用</a-tag>
-                  <a-tag v-else color="red"><span class="circle fail"></span>禁用</a-tag>
-                </span>
-              </a-descriptions-item>
-              <a-descriptions-item label="创建人">
-                <a-skeleton v-if="detailLoading" :animation="true">
-                  <a-skeleton-line :rows="1" />
-                </a-skeleton>
-                <span v-else>{{ dept.createUserString }}</span>
-              </a-descriptions-item>
-              <a-descriptions-item label="创建时间">
-                <a-skeleton v-if="detailLoading" :animation="true">
-                  <a-skeleton-line :rows="1" />
-                </a-skeleton>
-                <span v-else>{{ dept.createTime }}</span>
-              </a-descriptions-item>
-              <a-descriptions-item label="修改人">
-                <a-skeleton v-if="detailLoading" :animation="true">
-                  <a-skeleton-line :rows="1" />
-                </a-skeleton>
-                <span v-else>{{ dept.updateUserString }}</span>
-              </a-descriptions-item>
-              <a-descriptions-item label="修改时间">
-                <a-skeleton v-if="detailLoading" :animation="true">
-                  <a-skeleton-line :rows="1" />
-                </a-skeleton>
-                <span v-else>{{ dept.updateTime }}</span>
-              </a-descriptions-item>
-              <a-descriptions-item label="描述">
-                <a-skeleton v-if="detailLoading" :animation="true">
-                  <a-skeleton-line :rows="1" />
-                </a-skeleton>
-                <span v-else>{{ dept.description }}</span>
-              </a-descriptions-item>
-            </a-descriptions>
-          </a-drawer>
-        </a-col>
-      </a-row>
+            />
+          </a-form-item>
+          <a-form-item label="部门名称" field="deptName">
+            <a-input v-model="form.deptName" placeholder="请输入部门名称" size="large" />
+          </a-form-item>
+          <a-form-item label="部门排序" field="deptSort">
+            <a-input-number
+              v-model="form.deptSort"
+              placeholder="请输入部门排序"
+              :min="1"
+              mode="button"
+              size="large"
+            />
+          </a-form-item>
+          <a-form-item label="描述" field="description">
+            <a-textarea
+              v-model="form.description"
+              :max-length="200"
+              placeholder="请输入描述"
+              :auto-size="{
+                minRows:3,
+              }"
+              show-word-limit
+              size="large"
+            />
+          </a-form-item>
+        </a-form>
+      </a-modal>
+
+      <!-- 详情区域 -->
+      <a-drawer
+        title="部门详情"
+        :visible="detailVisible"
+        :width="570"
+        :footer="false"
+        unmount-on-close
+        render-to-body
+        @cancel="handleDetailCancel"
+      >
+        <a-descriptions
+          title="基础信息"
+          :column="2"
+          bordered
+          size="large"
+        >
+          <a-descriptions-item label="部门名称">
+            <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton-line :rows="1" />
+            </a-skeleton>
+            <span v-else>{{ dept.deptName }}</span>
+          </a-descriptions-item>
+          <a-descriptions-item label="状态">
+            <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton-line :rows="1" />
+            </a-skeleton>
+            <span v-else>
+              <a-tag v-if="dept.status === 1" color="green"><span class="circle pass"></span>启用</a-tag>
+              <a-tag v-else color="red"><span class="circle fail"></span>禁用</a-tag>
+            </span>
+          </a-descriptions-item>
+          <a-descriptions-item label="创建人">
+            <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton-line :rows="1" />
+            </a-skeleton>
+            <span v-else>{{ dept.createUserString }}</span>
+          </a-descriptions-item>
+          <a-descriptions-item label="创建时间">
+            <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton-line :rows="1" />
+            </a-skeleton>
+            <span v-else>{{ dept.createTime }}</span>
+          </a-descriptions-item>
+          <a-descriptions-item label="修改人">
+            <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton-line :rows="1" />
+            </a-skeleton>
+            <span v-else>{{ dept.updateUserString }}</span>
+          </a-descriptions-item>
+          <a-descriptions-item label="修改时间">
+            <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton-line :rows="1" />
+            </a-skeleton>
+            <span v-else>{{ dept.updateTime }}</span>
+          </a-descriptions-item>
+          <a-descriptions-item label="描述">
+            <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton-line :rows="1" />
+            </a-skeleton>
+            <span v-else>{{ dept.description }}</span>
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-drawer>
     </a-card>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive, computed, nextTick, watch } from 'vue';
+  import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
   import { SelectOptionData, TreeNodeData } from '@arco-design/web-vue';
   import {
     DeptRecord,
@@ -296,53 +296,38 @@
     loading.value = true;
     listDept(params).then((res) => {
       deptList.value = res.data;
-      loading.value = false;
       setTimeout(() => {
         proxy.$refs.tableRef.expandAll();
       }, 0);
+    }).finally(() => {
+      loading.value = false;
     });
   };
   getList();
 
   /**
-   * 多选
-   *
-   * @param rowKeys ID 列表
+   * 确定
    */
-  const handleSelectionChange = (rowKeys: Array<any>) => {
-    ids.value = rowKeys;
-    multiple.value = !rowKeys.length;
-  };
-
-  /**
-   * 修改状态
-   *
-   * @param record 记录信息
-   */
-  const handleChangeStatus = (record: DeptRecord) => {
-    const tip = record.status === 1 ? '启用' : '禁用';
-    updateDept(record).then((res) => {
-      proxy.$message.success(`${tip}成功`);
-    }).catch(() => {
-      record.status = (record.status === 1) ? 2 : 1;
+  const handleOk = () => {
+    proxy.$refs.formRef.validate((valid: any) => {
+      if (!valid) {
+        if (form.value.deptId !== undefined) {
+          updateDept(form.value).then((res) => {
+            handleCancel();
+            getList();
+            proxy.$message.success(res.msg);
+          });
+        } else {
+          createDept(form.value).then((res) => {
+            handleCancel();
+            getList();
+            proxy.$message.success(res.msg);
+          });
+        }
+      }
     });
   };
 
-  /**
-   * 查询
-   */
-  const handleQuery = () => {
-    getList();
-  };
-
-  /**
-   * 重置
-   */
-  const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
-    handleQuery();
-  };
-
   /**
    * 打开新增对话框
    */
@@ -372,20 +357,6 @@
     });
   };
 
-  /**
-   * 查看详情
-   *
-   * @param id ID
-   */
-  const toDetail = async (id: number) => {
-    detailLoading.value = true;
-    detailVisible.value = true;
-    getDept(id).then((res) => {
-      dept.value = res.data;
-      detailLoading.value = false;
-    });
-  };
-
   /**
    * 重置表单
    */
@@ -400,42 +371,6 @@
     proxy.$refs.formRef?.resetFields();
   };
 
-  /**
-   * 过滤部门树
-   *
-   * @param searchValue 搜索值
-   * @param nodeData 节点值
-   */
-  const filterDeptTree = (searchValue: string, nodeData: TreeNodeData) => {
-    if (nodeData.title) {
-      return nodeData.title.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
-    }
-    return false;
-  };
-
-  /**
-   * 确定
-   */
-  const handleOk = () => {
-    proxy.$refs.formRef.validate((valid: any) => {
-      if (!valid) {
-        if (form.value.deptId !== undefined) {
-          updateDept(form.value).then((res) => {
-            handleCancel();
-            getList();
-            proxy.$message.success(res.msg);
-          });
-        } else {
-          createDept(form.value).then((res) => {
-            handleCancel();
-            getList();
-            proxy.$message.success(res.msg);
-          });
-        }
-      }
-    });
-  };
-
   /**
    * 取消
    */
@@ -444,6 +379,21 @@
     proxy.$refs.formRef.resetFields();
   };
 
+  /**
+   * 查看详情
+   *
+   * @param id ID
+   */
+  const toDetail = async (id: number) => {
+    detailLoading.value = true;
+    detailVisible.value = true;
+    getDept(id).then((res) => {
+      dept.value = res.data;
+    }).finally(() => {
+      detailLoading.value = false;
+    });
+  };
+
   /**
    * 关闭详情
    */
@@ -451,12 +401,26 @@
     detailVisible.value = false;
   };
 
+  /**
+   * 修改状态
+   *
+   * @param record 记录信息
+   */
+  const handleChangeStatus = (record: DeptRecord) => {
+    const tip = record.status === 1 ? '启用' : '禁用';
+    updateDept(record).then((res) => {
+      proxy.$message.success(`${tip}成功`);
+    }).catch(() => {
+      record.status = (record.status === 1) ? 2 : 1;
+    });
+  };
+
   /**
    * 批量删除
    */
   const handleBatchDelete = () => {
     if (ids.value.length === 0) {
-      proxy.$message.info('请选择要删除的数据！');
+      proxy.$message.info('请选择要删除的数据');
     } else {
       proxy.$modal.warning({
         title: '警告',
@@ -481,6 +445,44 @@
       getList();
     });
   };
+
+  /**
+   * 多选
+   *
+   * @param rowKeys ID 列表
+   */
+  const handleSelectionChange = (rowKeys: Array<any>) => {
+    ids.value = rowKeys;
+    multiple.value = !rowKeys.length;
+  };
+
+  /**
+   * 过滤部门树
+   *
+   * @param searchValue 搜索值
+   * @param nodeData 节点值
+   */
+  const filterDeptTree = (searchValue: string, nodeData: TreeNodeData) => {
+    if (nodeData.title) {
+      return nodeData.title.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
+    }
+    return false;
+  };
+
+  /**
+   * 查询
+   */
+  const handleQuery = () => {
+    getList();
+  };
+
+  /**
+   * 重置
+   */
+  const resetQuery = () => {
+    proxy.$refs.queryRef.resetFields();
+    handleQuery();
+  };
 </script>
 
 <script lang="ts">
@@ -489,38 +491,4 @@
   };
 </script>
 
-<style scoped lang="less">
-  .container {
-    padding: 0 20px 20px 20px;
-  }
-
-  .query-container {
-    margin-bottom: 12px;
-  }
-
-  :deep(.arco-table-th) {
-    &:last-child {
-      .arco-table-th-item-title {
-        margin-left: 16px;
-      }
-    }
-  }
-
-  .action-icon {
-    margin-left: 12px;
-    cursor: pointer;
-  }
-  .active {
-    color: #0960bd;
-    background-color: #e3f4fc;
-  }
-  .setting {
-    display: flex;
-    align-items: center;
-    width: 200px;
-    .title {
-      margin-left: 12px;
-      cursor: pointer;
-    }
-  }
-</style>
+<style scoped lang="less"></style>
diff --git a/continew-admin-ui/src/views/system/user/center/components/security-settings.vue b/continew-admin-ui/src/views/system/user/center/components/security-settings.vue
index 20896982..40f99abb 100644
--- a/continew-admin-ui/src/views/system/user/center/components/security-settings.vue
+++ b/continew-admin-ui/src/views/system/user/center/components/security-settings.vue
@@ -21,15 +21,12 @@
 <style scoped lang="less">
   :deep(.arco-list-item) {
     border-bottom: none !important;
-
     .arco-typography {
       margin-bottom: 20px;
     }
-
     .arco-list-item-meta-avatar {
       margin-bottom: 1px;
     }
-
     .arco-list-item-meta {
       padding: 0;
     }
@@ -38,16 +35,13 @@
   :deep(.arco-list-item-meta-content) {
     flex: 1;
     border-bottom: 1px solid var(--color-neutral-3);
-
     .arco-list-item-meta-description {
       display: flex;
       flex-flow: row;
       justify-content: space-between;
-
       .tip {
         color: rgb(var(--gray-6));
       }
-
       .operation {
         margin-right: 6px;
       }
diff --git a/continew-admin-ui/src/views/system/user/center/components/user-panel.vue b/continew-admin-ui/src/views/system/user/center/components/user-panel.vue
index 0a4aa9a6..f57aa4c1 100644
--- a/continew-admin-ui/src/views/system/user/center/components/user-panel.vue
+++ b/continew-admin-ui/src/views/system/user/center/components/user-panel.vue
@@ -124,7 +124,6 @@
     height: 32px;
     line-height: 32px;
     background-color: #e8f3ff;
-
     .arco-icon-camera {
       margin-top: 8px;
       color: rgb(var(--arcoblue-6));