优化：优化全局样式

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;

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: [

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: [

continew-admin-ui/src/views/login/components/login-form.vue

@@ -83,8 +83,8 @@
     rememberMe: true,
     username: 'admin', // 演示默认值
     password: 'admin123', // 演示默认值
-    // username: !debug ? '' : 'admin', // 演示默认值
+    // username: debug ? 'admin' : '', // 演示默认值
-    // password: !debug ? '' : 'admin123', // 演示默认值
+    // 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;
     }

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;

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">
+<style scoped lang="less"></style>
-  .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>

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">
+<style scoped lang="less"></style>
-  .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>

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">
+<style scoped lang="less"></style>
-  .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>

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">
+<style scoped lang="less"></style>
-  .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>

continew-admin-ui/src/views/system/dept/index.vue

@@ -1,11 +1,11 @@
 <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="header">
         <!-- 搜索栏 -->
-          <div class="query-container">
+        <div class="header-query">
           <a-form ref="queryRef" :model="queryParams" layout="inline">
             <a-form-item field="deptName" hide-label>
               <a-input
@@ -37,15 +37,15 @@
             </a-form-item>
           </a-form>
         </div>
-
         <!-- 操作栏 -->
-          <a-row style="margin-bottom: 16px">
+        <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,6 +56,8 @@
               </a-button>
             </a-col>
           </a-row>
+        </div>
+      </div>
 
       <!-- 列表区域 -->
       <a-table
@@ -79,7 +81,7 @@
         <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>
+              <a-link @click="toDetail(record.deptId)">{{ record.deptName }}</a-link>
             </template>
           </a-table-column>
           <a-table-column title="部门排序" align="center" data-index="deptSort" />
@@ -98,11 +100,11 @@
           <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)">
+              <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">
+                <a-button v-permission="['admin']" type="text" size="small" title="删除">
                   <template #icon><icon-delete /></template>删除
                 </a-button>
               </a-popconfirm>
@@ -111,7 +113,7 @@
         </template>
       </a-table>
 
-          <!-- 对话框区域 -->
+      <!-- 表单区域 -->
       <a-modal
         :title="title"
         :visible="visible"
@@ -141,8 +143,8 @@
           <a-form-item label="部门排序" field="deptSort">
             <a-input-number
               v-model="form.deptSort"
-                  :min="1"
               placeholder="请输入部门排序"
+              :min="1"
               mode="button"
               size="large"
             />
@@ -162,7 +164,7 @@
         </a-form>
       </a-modal>
 
-          <!-- 抽屉区域 -->
+      <!-- 详情区域 -->
       <a-drawer
         title="部门详情"
         :visible="detailVisible"
@@ -225,14 +227,12 @@
           </a-descriptions-item>
         </a-descriptions>
       </a-drawer>
-        </a-col>
-      </a-row>
     </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,51 +296,36 @@
     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>) => {
+  const handleOk = () => {
-    ids.value = rowKeys;
+    proxy.$refs.formRef.validate((valid: any) => {
-    multiple.value = !rowKeys.length;
+      if (!valid) {
-  };
+        if (form.value.deptId !== undefined) {
-
+          updateDept(form.value).then((res) => {
-  /**
+            handleCancel();
-   * 修改状态
-   *
-   * @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 handleQuery = () => {
             getList();
-  };
+            proxy.$message.success(res.msg);
-
+          });
-  /**
+        } else {
-   * 重置
+          createDept(form.value).then((res) => {
-   */
+            handleCancel();
-  const resetQuery = () => {
+            getList();
-    proxy.$refs.queryRef.resetFields();
+            proxy.$message.success(res.msg);
-    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">
+<style scoped lang="less"></style>
-  .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>

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;
       }

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));