From 01dd38f8abccf5d88d8cd0d73df438f3389de7f7 Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Mon, 8 Jan 2024 20:37:49 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=20Vue=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=86=85=20script=20=E6=A0=87=E7=AD=BE=E5=88=B0=20tem?=
 =?UTF-8?q?plate=20=E6=A0=87=E7=AD=BE=E4=B9=8B=E5=89=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.template 和 style 挨在一起，便于样式调整
2.打开文件，可以便于修改 Script 代码
---
 .../workplace/components/access-trend.vue     |  58 +-
 .../workplace/components/announcement.vue     | 104 +--
 .../dashboard/workplace/components/banner.vue |  22 +-
 .../workplace/components/carousel.vue         |  12 +-
 .../workplace/components/data-panel.vue       |  56 +-
 .../dashboard/workplace/components/docs.vue   |   4 +-
 .../workplace/components/geo-distribution.vue |  34 +-
 .../workplace/components/popular-module.vue   |  50 +-
 .../workplace/components/quick-operation.vue  |  24 +-
 .../workplace/components/recently-visited.vue |  38 +-
 src/views/dashboard/workplace/index.vue       |  38 +-
 src/views/login/components/account-login.vue  | 108 +--
 src/views/login/components/email-login.vue    |  80 +-
 src/views/login/components/phone-login.vue    | 108 +--
 src/views/login/index.vue                     |  54 +-
 src/views/login/social/index.vue              |  15 +-
 src/views/monitor/log/login/index.vue         | 170 ++--
 src/views/monitor/log/operation/index.vue     | 178 ++--
 src/views/monitor/log/system/index.vue        | 286 +++---
 src/views/monitor/online/index.vue            | 192 ++--
 src/views/system/announcement/index.vue       | 522 +++++------
 .../config/components/basic-setting.vue       | 342 +++----
 src/views/system/config/index.vue             |  20 +-
 src/views/system/dept/index.vue               | 608 ++++++-------
 src/views/system/dict/index.vue               | 444 ++++-----
 src/views/system/dict/item.vue                | 340 +++----
 .../file/components/FileDetailModal/index.vue |  64 +-
 .../file/components/FileRenameModal/index.vue |  58 +-
 .../components/PreviewAudioModal/index.vue    |  56 +-
 .../components/PreviewVideoModal/index.vue    |  26 +-
 src/views/system/file/index.vue               |  14 +-
 src/views/system/file/main/FileAside.vue      |  54 +-
 .../system/file/main/FileMain/FileGrid.vue    |  80 +-
 .../system/file/main/FileMain/FileImg.vue     |  10 +-
 .../system/file/main/FileMain/FileList.vue    |  68 +-
 .../file/main/FileMain/FileRightMenu.vue      |  38 +-
 src/views/system/file/main/FileMain/index.vue | 776 ++++++++--------
 src/views/system/menu/index.vue               | 628 ++++++-------
 src/views/system/message/index.vue            | 386 ++++----
 src/views/system/role/index.vue               | 836 ++++++++---------
 .../user/center/components/basic-info.vue     | 106 +--
 .../user/center/components/operation-log.vue  | 114 +--
 .../center/components/security-settings.vue   |  14 +-
 .../security-settings/bind-social.vue         | 132 +--
 .../security-settings/update-email.vue        | 206 ++---
 .../security-settings/update-phone.vue        | 220 ++---
 .../security-settings/update-pwd.vue          | 190 ++--
 .../user/center/components/user-panel.vue     | 190 ++--
 src/views/system/user/center/index.vue        |  46 +-
 src/views/system/user/index.vue               | 842 +++++++++---------
 src/views/tool/generator/index.vue            | 504 +++++------
 51 files changed, 4784 insertions(+), 4781 deletions(-)

diff --git a/src/views/dashboard/workplace/components/access-trend.vue b/src/views/dashboard/workplace/components/access-trend.vue
index abcc133..6fa7c49 100644
--- a/src/views/dashboard/workplace/components/access-trend.vue
+++ b/src/views/dashboard/workplace/components/access-trend.vue
@@ -1,32 +1,3 @@
-<template>
-  <a-spin :loading="loading" style="width: 100%">
-    <a-card
-      class="general-card"
-      :header-style="{ paddingBottom: 0 }"
-      :body-style="{
-        paddingTop: '20px',
-      }"
-      :title="$t('workplace.accessTrend')"
-    >
-      <template #extra>
-        <a-radio-group
-          v-model:model-value="dateRange"
-          type="button"
-          @change="handleDateRangeChange as any"
-        >
-          <a-radio :value="7">
-            {{ $t('workplace.accessTrend.dateRange7') }}
-          </a-radio>
-          <a-radio :value="30">
-            {{ $t('workplace.accessTrend.dateRange30') }}
-          </a-radio>
-        </a-radio-group>
-      </template>
-      <Chart height="289px" :option="chartOption" />
-    </a-card>
-  </a-spin>
-</template>
-
 <script lang="ts" setup>
   import useLoading from '@/hooks/loading';
   import {
@@ -215,4 +186,33 @@
   getList(30);
 </script>
 
+<template>
+  <a-spin :loading="loading" style="width: 100%">
+    <a-card
+      class="general-card"
+      :header-style="{ paddingBottom: 0 }"
+      :body-style="{
+        paddingTop: '20px',
+      }"
+      :title="$t('workplace.accessTrend')"
+    >
+      <template #extra>
+        <a-radio-group
+          v-model:model-value="dateRange"
+          type="button"
+          @change="handleDateRangeChange as any"
+        >
+          <a-radio :value="7">
+            {{ $t('workplace.accessTrend.dateRange7') }}
+          </a-radio>
+          <a-radio :value="30">
+            {{ $t('workplace.accessTrend.dateRange30') }}
+          </a-radio>
+        </a-radio-group>
+      </template>
+      <Chart height="289px" :option="chartOption" />
+    </a-card>
+  </a-spin>
+</template>
+
 <style scoped lang="less"></style>
diff --git a/src/views/dashboard/workplace/components/announcement.vue b/src/views/dashboard/workplace/components/announcement.vue
index 76b62da..7be56c7 100644
--- a/src/views/dashboard/workplace/components/announcement.vue
+++ b/src/views/dashboard/workplace/components/announcement.vue
@@ -1,3 +1,55 @@
+<script lang="ts" setup>
+  import {
+    DashboardAnnouncementRecord,
+    listAnnouncement,
+  } from '@/api/common/dashboard';
+  import { DataRecord, get } from '@/api/system/announcement';
+
+  const { proxy } = getCurrentInstance() as any;
+  const { announcement_type } = proxy.useDict('announcement_type');
+
+  const dataList = ref<DashboardAnnouncementRecord[]>([]);
+  const dataDetail = ref<DataRecord>({});
+  const detailLoading = ref(false);
+  const detailVisible = ref(false);
+
+  /**
+   * 查询公告列表
+   */
+  const getList = () => {
+    listAnnouncement().then((res) => {
+      dataList.value = res.data;
+    });
+  };
+  getList();
+
+  /**
+   * 查看详情
+   *
+   * @param id ID
+   */
+  const toDetail = async (id: number) => {
+    if (detailLoading.value) return;
+    detailLoading.value = true;
+    detailVisible.value = true;
+    get(id)
+      .then((res) => {
+        dataDetail.value = res.data;
+      })
+      .finally(() => {
+        detailLoading.value = false;
+      });
+  };
+
+  /**
+   * 关闭详情
+   */
+  const handleDetailCancel = () => {
+    detailVisible.value = false;
+    dataDetail.value = {};
+  };
+</script>
+
 <template>
   <a-card
     class="general-card"
@@ -79,58 +131,6 @@
   </a-card>
 </template>
 
-<script lang="ts" setup>
-  import {
-    DashboardAnnouncementRecord,
-    listAnnouncement,
-  } from '@/api/common/dashboard';
-  import { DataRecord, get } from '@/api/system/announcement';
-
-  const { proxy } = getCurrentInstance() as any;
-  const { announcement_type } = proxy.useDict('announcement_type');
-
-  const dataList = ref<DashboardAnnouncementRecord[]>([]);
-  const dataDetail = ref<DataRecord>({});
-  const detailLoading = ref(false);
-  const detailVisible = ref(false);
-
-  /**
-   * 查询公告列表
-   */
-  const getList = () => {
-    listAnnouncement().then((res) => {
-      dataList.value = res.data;
-    });
-  };
-  getList();
-
-  /**
-   * 查看详情
-   *
-   * @param id ID
-   */
-  const toDetail = async (id: number) => {
-    if (detailLoading.value) return;
-    detailLoading.value = true;
-    detailVisible.value = true;
-    get(id)
-      .then((res) => {
-        dataDetail.value = res.data;
-      })
-      .finally(() => {
-        detailLoading.value = false;
-      });
-  };
-
-  /**
-   * 关闭详情
-   */
-  const handleDetailCancel = () => {
-    detailVisible.value = false;
-    dataDetail.value = {};
-  };
-</script>
-
 <style scoped lang="less">
   .item {
     display: flex;
diff --git a/src/views/dashboard/workplace/components/banner.vue b/src/views/dashboard/workplace/components/banner.vue
index b5ed1f4..3c60af6 100644
--- a/src/views/dashboard/workplace/components/banner.vue
+++ b/src/views/dashboard/workplace/components/banner.vue
@@ -1,14 +1,3 @@
-<template>
-  <a-col class="banner">
-    <a-col :span="8">
-      <a-typography-title :heading="5" style="margin-top: 0">
-        {{ $t('workplace.welcome') }} {{ userInfo.nickname }}
-      </a-typography-title>
-    </a-col>
-    <a-divider class="panel-border" />
-  </a-col>
-</template>
-
 <script lang="ts" setup>
   import { useUserStore } from '@/store';
 
@@ -20,6 +9,17 @@
   });
 </script>
 
+<template>
+  <a-col class="banner">
+    <a-col :span="8">
+      <a-typography-title :heading="5" style="margin-top: 0">
+        {{ $t('workplace.welcome') }} {{ userInfo.nickname }}
+      </a-typography-title>
+    </a-col>
+    <a-divider class="panel-border" />
+  </a-col>
+</template>
+
 <style scoped lang="less">
   .banner {
     width: 100%;
diff --git a/src/views/dashboard/workplace/components/carousel.vue b/src/views/dashboard/workplace/components/carousel.vue
index 6b6f2c1..d1d8ff4 100644
--- a/src/views/dashboard/workplace/components/carousel.vue
+++ b/src/views/dashboard/workplace/components/carousel.vue
@@ -1,3 +1,9 @@
+<script lang="ts" setup>
+  const imageSrc = [
+    `https://doc.charles7c.top/qrcode.jpg?${new Date().getTime()}`,
+  ];
+</script>
+
 <template>
   <a-carousel
     indicator-type="slider"
@@ -16,9 +22,3 @@
     </a-carousel-item>
   </a-carousel>
 </template>
-
-<script lang="ts" setup>
-  const imageSrc = [
-    `https://doc.charles7c.top/qrcode.jpg?${new Date().getTime()}`,
-  ];
-</script>
diff --git a/src/views/dashboard/workplace/components/data-panel.vue b/src/views/dashboard/workplace/components/data-panel.vue
index c5356aa..070d10e 100644
--- a/src/views/dashboard/workplace/components/data-panel.vue
+++ b/src/views/dashboard/workplace/components/data-panel.vue
@@ -1,3 +1,31 @@
+<script lang="ts" setup>
+  import { DashboardTotalRecord, getTotal } from '@/api/common/dashboard';
+  import PvCountIcon from '@/assets/icons/png/popularity.png';
+  import IpCountIcon from '@/assets/icons/png/same-city.png';
+  import TodayPvCountIcon from '@/assets/icons/png/hot.png';
+  import NewPvFromYesterdayIcon from '@/assets/icons/png/data.png';
+
+  const totalData = ref<DashboardTotalRecord>({
+    pvCount: 0,
+    ipCount: 0,
+    todayPvCount: 0,
+    newPvFromYesterday: 0.0,
+  });
+
+  /**
+   * 查询总计信息
+   */
+  const getData = async () => {
+    try {
+      const { data } = await getTotal();
+      totalData.value = data;
+    } catch (err) {
+      // you can report use errorHandler or other
+    }
+  };
+  getData();
+</script>
+
 <template>
   <a-grid :cols="24" :row-gap="16" class="panel">
     <a-grid-item
@@ -99,34 +127,6 @@
   </a-grid>
 </template>
 
-<script lang="ts" setup>
-  import { DashboardTotalRecord, getTotal } from '@/api/common/dashboard';
-  import PvCountIcon from '@/assets/icons/png/popularity.png';
-  import IpCountIcon from '@/assets/icons/png/same-city.png';
-  import TodayPvCountIcon from '@/assets/icons/png/hot.png';
-  import NewPvFromYesterdayIcon from '@/assets/icons/png/data.png';
-
-  const totalData = ref<DashboardTotalRecord>({
-    pvCount: 0,
-    ipCount: 0,
-    todayPvCount: 0,
-    newPvFromYesterday: 0.0,
-  });
-
-  /**
-   * 查询总计信息
-   */
-  const getData = async () => {
-    try {
-      const { data } = await getTotal();
-      totalData.value = data;
-    } catch (err) {
-      // you can report use errorHandler or other
-    }
-  };
-  getData();
-</script>
-
 <style lang="less" scoped>
   .arco-grid.panel {
     margin-bottom: 0;
diff --git a/src/views/dashboard/workplace/components/docs.vue b/src/views/dashboard/workplace/components/docs.vue
index bf5517e..97a74ad 100644
--- a/src/views/dashboard/workplace/components/docs.vue
+++ b/src/views/dashboard/workplace/components/docs.vue
@@ -1,3 +1,5 @@
+<script setup lang="ts"></script>
+
 <template>
   <a-card
     class="general-card"
@@ -70,8 +72,6 @@
   </a-card>
 </template>
 
-<script setup lang="ts"></script>
-
 <style lang="less" scoped>
   .arco-card-body .arco-link {
     margin: 10px 0;
diff --git a/src/views/dashboard/workplace/components/geo-distribution.vue b/src/views/dashboard/workplace/components/geo-distribution.vue
index 8b268b9..cbdf7c1 100644
--- a/src/views/dashboard/workplace/components/geo-distribution.vue
+++ b/src/views/dashboard/workplace/components/geo-distribution.vue
@@ -1,20 +1,3 @@
-<template>
-  <a-spin :loading="loading" style="width: 100%">
-    <a-card
-      class="general-card"
-      :header-style="{ paddingBottom: '0' }"
-      :body-style="{
-        padding: '0 20px 15px 20px',
-      }"
-    >
-      <template #title>
-        {{ $t('workplace.geoDistribution') }}
-      </template>
-      <Chart height="480px" :option="chartOption" />
-    </a-card>
-  </a-spin>
-</template>
-
 <script lang="ts" setup>
   import useLoading from '@/hooks/loading';
   import useChartOption from '@/hooks/chart-option';
@@ -85,6 +68,23 @@
   });
 </script>
 
+<template>
+  <a-spin :loading="loading" style="width: 100%">
+    <a-card
+      class="general-card"
+      :header-style="{ paddingBottom: '0' }"
+      :body-style="{
+        padding: '0 20px 15px 20px',
+      }"
+    >
+      <template #title>
+        {{ $t('workplace.geoDistribution') }}
+      </template>
+      <Chart height="480px" :option="chartOption" />
+    </a-card>
+  </a-spin>
+</template>
+
 <style scoped lang="less">
   .general-card {
     min-height: 566.14px;
diff --git a/src/views/dashboard/workplace/components/popular-module.vue b/src/views/dashboard/workplace/components/popular-module.vue
index fc3240e..ced335d 100644
--- a/src/views/dashboard/workplace/components/popular-module.vue
+++ b/src/views/dashboard/workplace/components/popular-module.vue
@@ -1,3 +1,28 @@
+<script lang="ts" setup>
+  import useLoading from '@/hooks/loading';
+  import { listPopularModule } from '@/api/common/dashboard';
+  import type { TableData } from '@arco-design/web-vue/es/table/interface';
+
+  const { loading, setLoading } = useLoading();
+  const dataList = ref<TableData[]>();
+
+  /**
+   * 查询热门模块列表
+   */
+  const getList = async () => {
+    try {
+      setLoading(true);
+      const { data } = await listPopularModule();
+      dataList.value = data;
+    } catch (err) {
+      // you can report use errorHandler or other
+    } finally {
+      setLoading(false);
+    }
+  };
+  getList();
+</script>
+
 <template>
   <a-spin :loading="loading" style="width: 100%">
     <a-card
@@ -60,31 +85,6 @@
   </a-spin>
 </template>
 
-<script lang="ts" setup>
-  import useLoading from '@/hooks/loading';
-  import { listPopularModule } from '@/api/common/dashboard';
-  import type { TableData } from '@arco-design/web-vue/es/table/interface';
-
-  const { loading, setLoading } = useLoading();
-  const dataList = ref<TableData[]>();
-
-  /**
-   * 查询热门模块列表
-   */
-  const getList = async () => {
-    try {
-      setLoading(true);
-      const { data } = await listPopularModule();
-      dataList.value = data;
-    } catch (err) {
-      // you can report use errorHandler or other
-    } finally {
-      setLoading(false);
-    }
-  };
-  getList();
-</script>
-
 <style scoped lang="less">
   .general-card {
     min-height: 400px;
diff --git a/src/views/dashboard/workplace/components/quick-operation.vue b/src/views/dashboard/workplace/components/quick-operation.vue
index 6451f04..4a7d262 100644
--- a/src/views/dashboard/workplace/components/quick-operation.vue
+++ b/src/views/dashboard/workplace/components/quick-operation.vue
@@ -1,3 +1,15 @@
+<script lang="ts" setup>
+  const router = useRouter();
+  const links = [
+    { text: '用户管理', icon: 'user', path: '/system/user' },
+    { text: '角色管理', icon: 'safe', path: '/system/role' },
+    { text: '部门管理', icon: 'user-group', path: '/system/dept' },
+    { text: '代码生成', icon: 'code', path: '/tool/generator' },
+    { text: '在线用户', icon: 'anonymity', path: '/monitor/online' },
+    { text: '操作日志', icon: 'history', path: '/monitor/log/operation' },
+  ];
+</script>
+
 <template>
   <a-card
     class="general-card"
@@ -21,16 +33,4 @@
   </a-card>
 </template>
 
-<script lang="ts" setup>
-  const router = useRouter();
-  const links = [
-    { text: '用户管理', icon: 'user', path: '/system/user' },
-    { text: '角色管理', icon: 'safe', path: '/system/role' },
-    { text: '部门管理', icon: 'user-group', path: '/system/dept' },
-    { text: '代码生成', icon: 'code', path: '/tool/generator' },
-    { text: '在线用户', icon: 'anonymity', path: '/monitor/online' },
-    { text: '操作日志', icon: 'history', path: '/monitor/log/operation' },
-  ];
-</script>
-
 <style scoped lang="less"></style>
diff --git a/src/views/dashboard/workplace/components/recently-visited.vue b/src/views/dashboard/workplace/components/recently-visited.vue
index 9493b02..55346d0 100644
--- a/src/views/dashboard/workplace/components/recently-visited.vue
+++ b/src/views/dashboard/workplace/components/recently-visited.vue
@@ -1,3 +1,22 @@
+<script lang="ts" setup>
+  import { DashboardRecentlyVisitedRecord } from '@/api/common/dashboard';
+
+  const router = useRouter();
+  const links = ref<DashboardRecentlyVisitedRecord[]>();
+
+  /**
+   * 加载最近访问菜单列表
+   */
+  onMounted(() => {
+    const recentlyVisitedList = window.localStorage.getItem('recently-visited');
+    if (recentlyVisitedList === null) {
+      links.value = [];
+    } else {
+      links.value = JSON.parse(recentlyVisitedList);
+    }
+  });
+</script>
+
 <template>
   <a-card
     class="general-card"
@@ -27,25 +46,6 @@
   </a-card>
 </template>
 
-<script lang="ts" setup>
-  import { DashboardRecentlyVisitedRecord } from '@/api/common/dashboard';
-
-  const router = useRouter();
-  const links = ref<DashboardRecentlyVisitedRecord[]>();
-
-  /**
-   * 加载最近访问菜单列表
-   */
-  onMounted(() => {
-    const recentlyVisitedList = window.localStorage.getItem('recently-visited');
-    if (recentlyVisitedList === null) {
-      links.value = [];
-    } else {
-      links.value = JSON.parse(recentlyVisitedList);
-    }
-  });
-</script>
-
 <style lang="less" scoped>
   :deep(.arco-card-header-title) {
     line-height: inherit;
diff --git a/src/views/dashboard/workplace/index.vue b/src/views/dashboard/workplace/index.vue
index 3dc73f4..e1080fa 100644
--- a/src/views/dashboard/workplace/index.vue
+++ b/src/views/dashboard/workplace/index.vue
@@ -1,3 +1,22 @@
+<script lang="ts" setup>
+  import Banner from './components/banner.vue';
+  import DataPanel from './components/data-panel.vue';
+  import ContentChart from './components/access-trend.vue';
+  import PopularModule from './components/popular-module.vue';
+  import CategoriesPercent from './components/geo-distribution.vue';
+  import RecentlyVisited from './components/recently-visited.vue';
+  import QuickOperation from './components/quick-operation.vue';
+  import Announcement from './components/announcement.vue';
+  import Carousel from './components/carousel.vue';
+  import Docs from './components/docs.vue';
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Workplace', // If you want the include property of keep-alive to take effect, you must name the component
+  };
+</script>
+
 <template>
   <div class="container">
     <div class="left-side">
@@ -41,25 +60,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-  import Banner from './components/banner.vue';
-  import DataPanel from './components/data-panel.vue';
-  import ContentChart from './components/access-trend.vue';
-  import PopularModule from './components/popular-module.vue';
-  import CategoriesPercent from './components/geo-distribution.vue';
-  import RecentlyVisited from './components/recently-visited.vue';
-  import QuickOperation from './components/quick-operation.vue';
-  import Announcement from './components/announcement.vue';
-  import Carousel from './components/carousel.vue';
-  import Docs from './components/docs.vue';
-</script>
-
-<script lang="ts">
-  export default {
-    name: 'Workplace', // If you want the include property of keep-alive to take effect, you must name the component
-  };
-</script>
-
 <style lang="less" scoped>
   .container {
     background-color: var(--color-fill-2);
diff --git a/src/views/login/components/account-login.vue b/src/views/login/components/account-login.vue
index 339b6ee..6cc8ae5 100644
--- a/src/views/login/components/account-login.vue
+++ b/src/views/login/components/account-login.vue
@@ -1,57 +1,3 @@
-<template>
-  <a-form
-    ref="formRef"
-    :model="form"
-    :rules="rules"
-    layout="vertical"
-    size="large"
-    class="login-form"
-    @submit="handleLogin"
-  >
-    <a-form-item field="username" hide-label>
-      <a-input
-        v-model="form.username"
-        :placeholder="$t('login.account.placeholder.username')"
-        :max-length="64"
-        allow-clear
-      />
-    </a-form-item>
-    <a-form-item field="password" hide-label>
-      <a-input-password
-        v-model="form.password"
-        :placeholder="$t('login.account.placeholder.password')"
-        :max-length="32"
-      />
-    </a-form-item>
-    <a-form-item field="captcha" hide-label>
-      <a-input
-        v-model="form.captcha"
-        :placeholder="$t('login.account.placeholder.captcha')"
-        :max-length="4"
-        allow-clear
-        style="flex: 1 1"
-      />
-      <img
-        :src="captchaImgBase64"
-        :alt="$t('login.captcha')"
-        class="captcha"
-        @click="getCaptcha"
-      />
-    </a-form-item>
-    <div class="remember-me">
-      <a-checkbox
-        :model-value="loginConfig.rememberMe"
-        @change="setRememberMe as any"
-      >
-        {{ $t('login.rememberMe') }}
-      </a-checkbox>
-    </div>
-    <a-button class="btn" :loading="loading" type="primary" html-type="submit"
-      >{{ $t('login.button') }}
-    </a-button>
-  </a-form>
-</template>
-
 <script lang="ts" setup>
   import { useI18n } from 'vue-i18n';
   import { useStorage } from '@vueuse/core';
@@ -162,6 +108,60 @@
   };
 </script>
 
+<template>
+  <a-form
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    layout="vertical"
+    size="large"
+    class="login-form"
+    @submit="handleLogin"
+  >
+    <a-form-item field="username" hide-label>
+      <a-input
+        v-model="form.username"
+        :placeholder="$t('login.account.placeholder.username')"
+        :max-length="64"
+        allow-clear
+      />
+    </a-form-item>
+    <a-form-item field="password" hide-label>
+      <a-input-password
+        v-model="form.password"
+        :placeholder="$t('login.account.placeholder.password')"
+        :max-length="32"
+      />
+    </a-form-item>
+    <a-form-item field="captcha" hide-label>
+      <a-input
+        v-model="form.captcha"
+        :placeholder="$t('login.account.placeholder.captcha')"
+        :max-length="4"
+        allow-clear
+        style="flex: 1 1"
+      />
+      <img
+        :src="captchaImgBase64"
+        :alt="$t('login.captcha')"
+        class="captcha"
+        @click="getCaptcha"
+      />
+    </a-form-item>
+    <div class="remember-me">
+      <a-checkbox
+        :model-value="loginConfig.rememberMe"
+        @change="setRememberMe as any"
+      >
+        {{ $t('login.rememberMe') }}
+      </a-checkbox>
+    </div>
+    <a-button class="btn" :loading="loading" type="primary" html-type="submit"
+      >{{ $t('login.button') }}
+    </a-button>
+  </a-form>
+</template>
+
 <style lang="less" scoped>
   .login-form {
     box-sizing: border-box;
diff --git a/src/views/login/components/email-login.vue b/src/views/login/components/email-login.vue
index e516294..022673c 100644
--- a/src/views/login/components/email-login.vue
+++ b/src/views/login/components/email-login.vue
@@ -1,43 +1,3 @@
-<template>
-  <a-form
-    ref="formRef"
-    :model="form"
-    :rules="rules"
-    layout="vertical"
-    size="large"
-    class="login-form"
-    @submit="handleLogin"
-  >
-    <a-form-item field="email" hide-label>
-      <a-input
-        v-model="form.email"
-        :placeholder="$t('login.email.placeholder.email')"
-        allow-clear
-      />
-    </a-form-item>
-    <a-form-item field="captcha" hide-label>
-      <a-input
-        v-model="form.captcha"
-        :placeholder="$t('login.email.placeholder.captcha')"
-        :max-length="6"
-        allow-clear
-        style="flex: 1 1"
-      />
-      <a-button
-        class="captcha-btn"
-        :loading="captchaLoading"
-        :disabled="captchaDisable"
-        @click="handleSendCaptcha"
-      >
-        {{ captchaBtnName }}
-      </a-button>
-    </a-form-item>
-    <a-button class="btn" :loading="loading" type="primary" html-type="submit"
-      >{{ $t('login.button') }}
-    </a-button>
-  </a-form>
-</template>
-
 <script lang="ts" setup>
   import { useI18n } from 'vue-i18n';
   import { ValidatedError } from '@arco-design/web-vue';
@@ -158,6 +118,46 @@
   };
 </script>
 
+<template>
+  <a-form
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    layout="vertical"
+    size="large"
+    class="login-form"
+    @submit="handleLogin"
+  >
+    <a-form-item field="email" hide-label>
+      <a-input
+        v-model="form.email"
+        :placeholder="$t('login.email.placeholder.email')"
+        allow-clear
+      />
+    </a-form-item>
+    <a-form-item field="captcha" hide-label>
+      <a-input
+        v-model="form.captcha"
+        :placeholder="$t('login.email.placeholder.captcha')"
+        :max-length="6"
+        allow-clear
+        style="flex: 1 1"
+      />
+      <a-button
+        class="captcha-btn"
+        :loading="captchaLoading"
+        :disabled="captchaDisable"
+        @click="handleSendCaptcha"
+      >
+        {{ captchaBtnName }}
+      </a-button>
+    </a-form-item>
+    <a-button class="btn" :loading="loading" type="primary" html-type="submit"
+      >{{ $t('login.button') }}
+    </a-button>
+  </a-form>
+</template>
+
 <style lang="less" scoped>
   .login-form {
     box-sizing: border-box;
diff --git a/src/views/login/components/phone-login.vue b/src/views/login/components/phone-login.vue
index a7ae1c8..614f9c3 100644
--- a/src/views/login/components/phone-login.vue
+++ b/src/views/login/components/phone-login.vue
@@ -1,57 +1,3 @@
-<template>
-  <a-form
-    ref="formRef"
-    :model="form"
-    :rules="rules"
-    layout="vertical"
-    size="large"
-    class="login-form"
-    @submit="handleLogin"
-  >
-    <a-form-item field="phone" hide-label>
-      <a-select :options="['+86']" style="flex: 1 1" default-value="+86" />
-      <a-input
-        v-model="form.phone"
-        :placeholder="$t('login.phone.placeholder.phone')"
-        :max-length="11"
-        allow-clear
-      />
-    </a-form-item>
-    <a-form-item field="captcha" hide-label>
-      <a-input
-        v-model="form.captcha"
-        :placeholder="$t('login.phone.placeholder.captcha')"
-        :max-length="4"
-        allow-clear
-        style="flex: 1 1"
-      />
-      <a-button
-        class="captcha-btn"
-        :loading="captchaLoading"
-        :disabled="captchaDisable"
-        @click="handleOpenBehaviorCaptcha"
-      >
-        {{ captchaBtnName }}
-      </a-button>
-    </a-form-item>
-    <a-button
-      class="btn"
-      :loading="loading"
-      type="primary"
-      html-type="submit"
-      :disabled="captchaDisable"
-      >{{ $t('login.button') }}（演示不开放）
-    </a-button>
-  </a-form>
-  <Verify
-    ref="verifyRef"
-    :mode="captchaMode"
-    :captcha-type="captchaType"
-    :img-size="{ width: '330px', height: '155px' }"
-    @success="handleSendCaptcha"
-  ></Verify>
-</template>
-
 <script lang="ts" setup>
   import { useI18n } from 'vue-i18n';
   import { ValidatedError } from '@arco-design/web-vue';
@@ -190,6 +136,60 @@
   };
 </script>
 
+<template>
+  <a-form
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    layout="vertical"
+    size="large"
+    class="login-form"
+    @submit="handleLogin"
+  >
+    <a-form-item field="phone" hide-label>
+      <a-select :options="['+86']" style="flex: 1 1" default-value="+86" />
+      <a-input
+        v-model="form.phone"
+        :placeholder="$t('login.phone.placeholder.phone')"
+        :max-length="11"
+        allow-clear
+      />
+    </a-form-item>
+    <a-form-item field="captcha" hide-label>
+      <a-input
+        v-model="form.captcha"
+        :placeholder="$t('login.phone.placeholder.captcha')"
+        :max-length="4"
+        allow-clear
+        style="flex: 1 1"
+      />
+      <a-button
+        class="captcha-btn"
+        :loading="captchaLoading"
+        :disabled="captchaDisable"
+        @click="handleOpenBehaviorCaptcha"
+      >
+        {{ captchaBtnName }}
+      </a-button>
+    </a-form-item>
+    <a-button
+      class="btn"
+      :loading="loading"
+      type="primary"
+      html-type="submit"
+      :disabled="captchaDisable"
+      >{{ $t('login.button') }}（演示不开放）
+    </a-button>
+  </a-form>
+  <Verify
+    ref="verifyRef"
+    :mode="captchaMode"
+    :captcha-type="captchaType"
+    :img-size="{ width: '330px', height: '155px' }"
+    @success="handleSendCaptcha"
+  ></Verify>
+</template>
+
 <style lang="less" scoped>
   .login-form {
     box-sizing: border-box;
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 6b6642f..6ba24e0 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,3 +1,30 @@
+<script lang="ts" setup>
+  import { useAppStore } from '@/store';
+  import useResponsive from '@/hooks/responsive';
+  import { socialAuth } from '@/api/auth';
+  import AccountLogin from './components/account-login.vue';
+  import PhoneLogin from './components/phone-login.vue';
+  import EmailLogin from './components/email-login.vue';
+
+  const appStore = useAppStore();
+  useResponsive(true);
+  const isEmailLogin = ref(false);
+
+  /**
+   * 第三方登录授权
+   *
+   * @param source 来源
+   */
+  const handleSocialAuth = async (source: string) => {
+    const { data } = await socialAuth(source);
+    window.location.href = data;
+  };
+
+  const toggleLoginMode = () => {
+    isEmailLogin.value = !isEmailLogin.value;
+  };
+</script>
+
 <template>
   <div class="root">
     <div class="header">
@@ -71,33 +98,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-  import { useAppStore } from '@/store';
-  import useResponsive from '@/hooks/responsive';
-  import { socialAuth } from '@/api/auth';
-  import AccountLogin from './components/account-login.vue';
-  import PhoneLogin from './components/phone-login.vue';
-  import EmailLogin from './components/email-login.vue';
-
-  const appStore = useAppStore();
-  useResponsive(true);
-  const isEmailLogin = ref(false);
-
-  /**
-   * 第三方登录授权
-   *
-   * @param source 来源
-   */
-  const handleSocialAuth = async (source: string) => {
-    const { data } = await socialAuth(source);
-    window.location.href = data;
-  };
-
-  const toggleLoginMode = () => {
-    isEmailLogin.value = !isEmailLogin.value;
-  };
-</script>
-
 <style lang="less" scoped>
   .root {
     background-image: url(https://z1.ax1x.com/2023/09/27/pPbnTOK.jpg);
diff --git a/src/views/login/social/index.vue b/src/views/login/social/index.vue
index d7add88..0ca388d 100644
--- a/src/views/login/social/index.vue
+++ b/src/views/login/social/index.vue
@@ -1,9 +1,3 @@
-<template>
-  <a-spin :loading="loading" :tip="isLogin() ? $t('bind.ing') : $t('login.ing')">
-    <div></div>
-  </a-spin>
-</template>
-
 <script setup lang="ts">
   import { useUserStore } from '@/store';
   import { useI18n } from 'vue-i18n';
@@ -83,6 +77,15 @@
   }
 </script>
 
+<template>
+  <a-spin
+    :loading="loading"
+    :tip="isLogin() ? $t('bind.ing') : $t('login.ing')"
+  >
+    <div></div>
+  </a-spin>
+</template>
+
 <script lang="ts">
   export default {
     name: 'SocialCallback',
diff --git a/src/views/monitor/log/login/index.vue b/src/views/monitor/log/login/index.vue
index dde307b..6346895 100644
--- a/src/views/monitor/log/login/index.vue
+++ b/src/views/monitor/log/login/index.vue
@@ -1,88 +1,3 @@
-<template>
-  <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="header">
-        <!-- 搜索栏 -->
-        <div class="header-query">
-          <a-form ref="queryRef" :model="queryParams" layout="inline">
-            <a-form-item field="status" hide-label>
-              <a-select
-                v-model="queryParams.status"
-                :options="success_failure_status_enum"
-                placeholder="登录状态搜索"
-                allow-clear
-                style="width: 150px"
-              />
-            </a-form-item>
-            <a-form-item field="createTime" hide-label>
-              <date-range-picker v-model="queryParams.createTime" />
-            </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>
-
-      <!-- 列表区域 -->
-      <a-table
-        ref="tableRef"
-        row-key="id"
-        :data="loginLogList"
-        :loading="loading"
-        :pagination="{
-          showTotal: true,
-          showPageSize: true,
-          total: total,
-          current: queryParams.page,
-        }"
-        :bordered="false"
-        column-resizable
-        stripe
-        size="large"
-        @page-change="handlePageChange"
-        @page-size-change="handlePageSizeChange"
-      >
-        <template #columns>
-          <a-table-column title="序号">
-            <template #cell="{ rowIndex }">
-              {{ rowIndex + 1 + (queryParams.page - 1) * queryParams.size }}
-            </template>
-          </a-table-column>
-          <a-table-column title="用户昵称" data-index="createUserString" />
-          <a-table-column title="登录行为" data-index="description" />
-          <a-table-column title="登录状态" align="center">
-            <template #cell="{ record }">
-              <a-tag v-if="record.status === 1" color="green"
-                ><span class="circle pass" />成功</a-tag
-              >
-              <a-tooltip v-else :content="record.errorMsg">
-                <a-tag color="red" style="cursor: pointer">
-                  <span class="circle fail" />失败
-                </a-tag>
-              </a-tooltip>
-            </template>
-          </a-table-column>
-          <a-table-column title="登录 IP" data-index="ip" />
-          <a-table-column title="登录地点" data-index="address" />
-          <a-table-column title="浏览器" data-index="browser" />
-          <a-table-column title="终端系统" data-index="os" />
-          <a-table-column title="登录时间" data-index="createTime" />
-        </template>
-      </a-table>
-    </a-card>
-  </div>
-</template>
-
 <script lang="ts" setup>
   import {
     LoginLogParam,
@@ -171,4 +86,89 @@
   };
 </script>
 
+<template>
+  <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="header">
+        <!-- 搜索栏 -->
+        <div class="header-query">
+          <a-form ref="queryRef" :model="queryParams" layout="inline">
+            <a-form-item field="status" hide-label>
+              <a-select
+                v-model="queryParams.status"
+                :options="success_failure_status_enum"
+                placeholder="登录状态搜索"
+                allow-clear
+                style="width: 150px"
+              />
+            </a-form-item>
+            <a-form-item field="createTime" hide-label>
+              <date-range-picker v-model="queryParams.createTime" />
+            </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>
+
+      <!-- 列表区域 -->
+      <a-table
+        ref="tableRef"
+        row-key="id"
+        :data="loginLogList"
+        :loading="loading"
+        :pagination="{
+          showTotal: true,
+          showPageSize: true,
+          total: total,
+          current: queryParams.page,
+        }"
+        :bordered="false"
+        column-resizable
+        stripe
+        size="large"
+        @page-change="handlePageChange"
+        @page-size-change="handlePageSizeChange"
+      >
+        <template #columns>
+          <a-table-column title="序号">
+            <template #cell="{ rowIndex }">
+              {{ rowIndex + 1 + (queryParams.page - 1) * queryParams.size }}
+            </template>
+          </a-table-column>
+          <a-table-column title="用户昵称" data-index="createUserString" />
+          <a-table-column title="登录行为" data-index="description" />
+          <a-table-column title="登录状态" align="center">
+            <template #cell="{ record }">
+              <a-tag v-if="record.status === 1" color="green"
+                ><span class="circle pass" />成功</a-tag
+              >
+              <a-tooltip v-else :content="record.errorMsg">
+                <a-tag color="red" style="cursor: pointer">
+                  <span class="circle fail" />失败
+                </a-tag>
+              </a-tooltip>
+            </template>
+          </a-table-column>
+          <a-table-column title="登录 IP" data-index="ip" />
+          <a-table-column title="登录地点" data-index="address" />
+          <a-table-column title="浏览器" data-index="browser" />
+          <a-table-column title="终端系统" data-index="os" />
+          <a-table-column title="登录时间" data-index="createTime" />
+        </template>
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
 <style scoped lang="less"></style>
diff --git a/src/views/monitor/log/operation/index.vue b/src/views/monitor/log/operation/index.vue
index b07b7b4..250d74c 100644
--- a/src/views/monitor/log/operation/index.vue
+++ b/src/views/monitor/log/operation/index.vue
@@ -1,3 +1,92 @@
+<script lang="ts" setup>
+  import {
+    OperationLogParam,
+    OperationLogRecord,
+    listOperationLog,
+  } from '@/api/monitor/log';
+
+  const { proxy } = getCurrentInstance() as any;
+  const { success_failure_status_enum } = proxy.useDict(
+    'success_failure_status_enum'
+  );
+
+  const operationLogList = ref<OperationLogRecord[]>([]);
+  const total = ref(0);
+  const loading = ref(false);
+
+  const data = reactive({
+    // 查询参数
+    queryParams: {
+      description: undefined,
+      status: undefined,
+      createTime: undefined,
+      page: 1,
+      size: 10,
+      sort: ['createTime,desc'],
+    },
+  });
+  const { queryParams } = toRefs(data);
+
+  /**
+   * 查询列表
+   *
+   * @param params 查询参数
+   */
+  const getList = (params: OperationLogParam = { ...queryParams.value }) => {
+    loading.value = true;
+    listOperationLog(params)
+      .then((res) => {
+        operationLogList.value = res.data.list;
+        total.value = res.data.total;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+  getList();
+
+  /**
+   * 查询
+   */
+  const handleQuery = () => {
+    getList();
+  };
+
+  /**
+   * 重置
+   */
+  const resetQuery = () => {
+    proxy.$refs.queryRef.resetFields();
+    handleQuery();
+  };
+
+  /**
+   * 切换页码
+   *
+   * @param current 页码
+   */
+  const handlePageChange = (current: number) => {
+    queryParams.value.page = current;
+    getList();
+  };
+
+  /**
+   * 切换每页条数
+   *
+   * @param pageSize 每页条数
+   */
+  const handlePageSizeChange = (pageSize: number) => {
+    queryParams.value.size = pageSize;
+    getList();
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'OperationLog',
+  };
+</script>
+
 <template>
   <div class="app-container">
     <Breadcrumb :items="['menu.monitor', 'menu.log.operation.list']" />
@@ -92,93 +181,4 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-  import {
-    OperationLogParam,
-    OperationLogRecord,
-    listOperationLog,
-  } from '@/api/monitor/log';
-
-  const { proxy } = getCurrentInstance() as any;
-  const { success_failure_status_enum } = proxy.useDict(
-    'success_failure_status_enum'
-  );
-
-  const operationLogList = ref<OperationLogRecord[]>([]);
-  const total = ref(0);
-  const loading = ref(false);
-
-  const data = reactive({
-    // 查询参数
-    queryParams: {
-      description: undefined,
-      status: undefined,
-      createTime: undefined,
-      page: 1,
-      size: 10,
-      sort: ['createTime,desc'],
-    },
-  });
-  const { queryParams } = toRefs(data);
-
-  /**
-   * 查询列表
-   *
-   * @param params 查询参数
-   */
-  const getList = (params: OperationLogParam = { ...queryParams.value }) => {
-    loading.value = true;
-    listOperationLog(params)
-      .then((res) => {
-        operationLogList.value = res.data.list;
-        total.value = res.data.total;
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  };
-  getList();
-
-  /**
-   * 查询
-   */
-  const handleQuery = () => {
-    getList();
-  };
-
-  /**
-   * 重置
-   */
-  const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
-    handleQuery();
-  };
-
-  /**
-   * 切换页码
-   *
-   * @param current 页码
-   */
-  const handlePageChange = (current: number) => {
-    queryParams.value.page = current;
-    getList();
-  };
-
-  /**
-   * 切换每页条数
-   *
-   * @param pageSize 每页条数
-   */
-  const handlePageSizeChange = (pageSize: number) => {
-    queryParams.value.size = pageSize;
-    getList();
-  };
-</script>
-
-<script lang="ts">
-  export default {
-    name: 'OperationLog',
-  };
-</script>
-
 <style scoped lang="less"></style>
diff --git a/src/views/monitor/log/system/index.vue b/src/views/monitor/log/system/index.vue
index 50750a2..672addd 100644
--- a/src/views/monitor/log/system/index.vue
+++ b/src/views/monitor/log/system/index.vue
@@ -1,3 +1,146 @@
+<script lang="ts" setup>
+  import { useClipboard } from '@vueuse/core';
+  import {
+    SystemLogParam,
+    SystemLogRecord,
+    SystemLogDetailRecord,
+    listSystemLog,
+    getSystemLog,
+  } from '@/api/monitor/log';
+  import VueJsonPretty from 'vue-json-pretty';
+  import 'vue-json-pretty/lib/styles.css';
+
+  const { proxy } = getCurrentInstance() as any;
+  const { copy, copied } = useClipboard();
+  const systemLogList = ref<SystemLogRecord[]>([]);
+  const systemLog = ref<SystemLogDetailRecord>({
+    requestUrl: '',
+    requestMethod: '',
+    requestHeaders: '',
+    requestBody: '',
+    statusCode: 200,
+    responseHeaders: '',
+    responseBody: '',
+    timeTaken: 0,
+    ip: '',
+    address: '',
+    browser: '',
+    os: '',
+    createTime: '',
+  });
+  const total = ref(0);
+  const loading = ref(false);
+  const visible = ref(false);
+
+  const data = reactive({
+    // 查询参数
+    queryParams: {
+      createTime: undefined,
+      page: 1,
+      size: 10,
+      sort: ['createTime,desc'],
+    },
+  });
+  const { queryParams } = toRefs(data);
+
+  /**
+   * 查询列表
+   *
+   * @param params 查询参数
+   */
+  const getList = (params: SystemLogParam = { ...queryParams.value }) => {
+    loading.value = true;
+    listSystemLog(params)
+      .then((res) => {
+        systemLogList.value = res.data.list;
+        total.value = res.data.total;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+  getList();
+
+  /**
+   * 查看详情
+   *
+   * @param id ID
+   */
+  const toDetail = async (id: number) => {
+    visible.value = true;
+    loading.value = true;
+    getSystemLog(id)
+      .then((res) => {
+        systemLog.value = res.data;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+
+  /**
+   * 关闭详情
+   */
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  /**
+   * 复制内容
+   *
+   * @param content 内容
+   */
+  const handleCopy = (content: string) => {
+    copy(content);
+  };
+  watch(copied, () => {
+    if (copied.value) {
+      proxy.$message.success('复制成功');
+    }
+  });
+
+  /**
+   * 查询
+   */
+  const handleQuery = () => {
+    getList();
+  };
+
+  /**
+   * 重置
+   */
+  const resetQuery = () => {
+    proxy.$refs.queryRef.resetFields();
+    handleQuery();
+  };
+
+  /**
+   * 切换页码
+   *
+   * @param current 页码
+   */
+  const handlePageChange = (current: number) => {
+    queryParams.value.page = current;
+    getList();
+  };
+
+  /**
+   * 切换每页条数
+   *
+   * @param pageSize 每页条数
+   */
+  const handlePageSizeChange = (pageSize: number) => {
+    queryParams.value.size = pageSize;
+    getList();
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'SystemLog',
+  };
+</script>
+
 <template>
   <div class="app-container">
     <Breadcrumb :items="['menu.monitor', 'menu.log.system.list']" />
@@ -274,149 +417,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-  import { useClipboard } from '@vueuse/core';
-  import {
-    SystemLogParam,
-    SystemLogRecord,
-    SystemLogDetailRecord,
-    listSystemLog,
-    getSystemLog,
-  } from '@/api/monitor/log';
-  import VueJsonPretty from 'vue-json-pretty';
-  import 'vue-json-pretty/lib/styles.css';
-
-  const { proxy } = getCurrentInstance() as any;
-  const { copy, copied } = useClipboard();
-  const systemLogList = ref<SystemLogRecord[]>([]);
-  const systemLog = ref<SystemLogDetailRecord>({
-    requestUrl: '',
-    requestMethod: '',
-    requestHeaders: '',
-    requestBody: '',
-    statusCode: 200,
-    responseHeaders: '',
-    responseBody: '',
-    timeTaken: 0,
-    ip: '',
-    address: '',
-    browser: '',
-    os: '',
-    createTime: '',
-  });
-  const total = ref(0);
-  const loading = ref(false);
-  const visible = ref(false);
-
-  const data = reactive({
-    // 查询参数
-    queryParams: {
-      createTime: undefined,
-      page: 1,
-      size: 10,
-      sort: ['createTime,desc'],
-    },
-  });
-  const { queryParams } = toRefs(data);
-
-  /**
-   * 查询列表
-   *
-   * @param params 查询参数
-   */
-  const getList = (params: SystemLogParam = { ...queryParams.value }) => {
-    loading.value = true;
-    listSystemLog(params)
-      .then((res) => {
-        systemLogList.value = res.data.list;
-        total.value = res.data.total;
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  };
-  getList();
-
-  /**
-   * 查看详情
-   *
-   * @param id ID
-   */
-  const toDetail = async (id: number) => {
-    visible.value = true;
-    loading.value = true;
-    getSystemLog(id)
-      .then((res) => {
-        systemLog.value = res.data;
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  };
-
-  /**
-   * 关闭详情
-   */
-  const handleCancel = () => {
-    visible.value = false;
-  };
-
-  /**
-   * 复制内容
-   *
-   * @param content 内容
-   */
-  const handleCopy = (content: string) => {
-    copy(content);
-  };
-  watch(copied, () => {
-    if (copied.value) {
-      proxy.$message.success('复制成功');
-    }
-  });
-
-  /**
-   * 查询
-   */
-  const handleQuery = () => {
-    getList();
-  };
-
-  /**
-   * 重置
-   */
-  const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
-    handleQuery();
-  };
-
-  /**
-   * 切换页码
-   *
-   * @param current 页码
-   */
-  const handlePageChange = (current: number) => {
-    queryParams.value.page = current;
-    getList();
-  };
-
-  /**
-   * 切换每页条数
-   *
-   * @param pageSize 每页条数
-   */
-  const handlePageSizeChange = (pageSize: number) => {
-    queryParams.value.size = pageSize;
-    getList();
-  };
-</script>
-
-<script lang="ts">
-  export default {
-    name: 'SystemLog',
-  };
-</script>
-
 <style scoped lang="less">
   .copy-btn {
     color: gray;
diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue
index 0d51a89..e051c28 100644
--- a/src/views/monitor/online/index.vue
+++ b/src/views/monitor/online/index.vue
@@ -1,3 +1,99 @@
+<script lang="ts" setup>
+  import { DataRecord, ListParam, list, kickout } from '@/api/monitor/online';
+  import { getToken } from '@/utils/auth';
+  import checkPermission from '@/utils/permission';
+
+  const { proxy } = getCurrentInstance() as any;
+
+  const dataList = ref<DataRecord[]>([]);
+  const total = ref(0);
+  const loading = ref(false);
+  const currentToken = getToken();
+
+  const data = reactive({
+    // 查询参数
+    queryParams: {
+      nickname: undefined,
+      loginTime: undefined,
+      page: 1,
+      size: 10,
+      sort: ['createTime,desc'],
+    },
+  });
+  const { queryParams } = toRefs(data);
+
+  /**
+   * 查询列表
+   *
+   * @param params 查询参数
+   */
+  const getList = (params: ListParam = { ...queryParams.value }) => {
+    loading.value = true;
+    list(params)
+      .then((res) => {
+        dataList.value = res.data.list;
+        total.value = res.data.total;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+  getList();
+
+  /**
+   * 强退
+   *
+   * @param token Token
+   */
+  const handleKickout = (token: string) => {
+    kickout(token).then((res) => {
+      getList();
+      proxy.$message.success(res.msg);
+    });
+  };
+
+  /**
+   * 查询
+   */
+  const handleQuery = () => {
+    getList();
+  };
+
+  /**
+   * 重置
+   */
+  const resetQuery = () => {
+    proxy.$refs.queryRef.resetFields();
+    handleQuery();
+  };
+
+  /**
+   * 切换页码
+   *
+   * @param current 页码
+   */
+  const handlePageChange = (current: number) => {
+    queryParams.value.page = current;
+    getList();
+  };
+
+  /**
+   * 切换每页条数
+   *
+   * @param pageSize 每页条数
+   */
+  const handlePageSizeChange = (pageSize: number) => {
+    queryParams.value.size = pageSize;
+    getList();
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'OnlineUser',
+  };
+</script>
+
 <template>
   <div class="app-container">
     <Breadcrumb :items="['menu.monitor', 'menu.online.user.list']" />
@@ -99,100 +195,4 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-  import { DataRecord, ListParam, list, kickout } from '@/api/monitor/online';
-  import { getToken } from '@/utils/auth';
-  import checkPermission from '@/utils/permission';
-
-  const { proxy } = getCurrentInstance() as any;
-
-  const dataList = ref<DataRecord[]>([]);
-  const total = ref(0);
-  const loading = ref(false);
-  const currentToken = getToken();
-
-  const data = reactive({
-    // 查询参数
-    queryParams: {
-      nickname: undefined,
-      loginTime: undefined,
-      page: 1,
-      size: 10,
-      sort: ['createTime,desc'],
-    },
-  });
-  const { queryParams } = toRefs(data);
-
-  /**
-   * 查询列表
-   *
-   * @param params 查询参数
-   */
-  const getList = (params: ListParam = { ...queryParams.value }) => {
-    loading.value = true;
-    list(params)
-      .then((res) => {
-        dataList.value = res.data.list;
-        total.value = res.data.total;
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  };
-  getList();
-
-  /**
-   * 强退
-   *
-   * @param token Token
-   */
-  const handleKickout = (token: string) => {
-    kickout(token).then((res) => {
-      getList();
-      proxy.$message.success(res.msg);
-    });
-  };
-
-  /**
-   * 查询
-   */
-  const handleQuery = () => {
-    getList();
-  };
-
-  /**
-   * 重置
-   */
-  const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
-    handleQuery();
-  };
-
-  /**
-   * 切换页码
-   *
-   * @param current 页码
-   */
-  const handlePageChange = (current: number) => {
-    queryParams.value.page = current;
-    getList();
-  };
-
-  /**
-   * 切换每页条数
-   *
-   * @param pageSize 每页条数
-   */
-  const handlePageSizeChange = (pageSize: number) => {
-    queryParams.value.size = pageSize;
-    getList();
-  };
-</script>
-
-<script lang="ts">
-  export default {
-    name: 'OnlineUser',
-  };
-</script>
-
 <style scoped lang="less"></style>
diff --git a/src/views/system/announcement/index.vue b/src/views/system/announcement/index.vue
index 3617c26..4c1d52f 100644
--- a/src/views/system/announcement/index.vue
+++ b/src/views/system/announcement/index.vue
@@ -1,3 +1,264 @@
+<script lang="ts" setup>
+  import {
+    DataRecord,
+    ListParam,
+    list,
+    get,
+    add,
+    update,
+    del,
+  } from '@/api/system/announcement';
+  import checkPermission from '@/utils/permission';
+
+  const { proxy } = getCurrentInstance() as any;
+  const { announcement_type, announcement_status_enum } = proxy.useDict(
+    'announcement_type',
+    'announcement_status_enum',
+  );
+
+  const dataList = ref<DataRecord[]>([]);
+  const dataDetail = ref<DataRecord>({});
+  const total = ref(0);
+  const ids = ref<Array<number>>([]);
+  const title = ref('');
+  const single = ref(true);
+  const multiple = ref(true);
+  const showQuery = ref(true);
+  const loading = ref(false);
+  const detailLoading = ref(false);
+  const exportLoading = ref(false);
+  const visible = ref(false);
+  const detailVisible = ref(false);
+
+  const data = reactive({
+    // 查询参数
+    queryParams: {
+      title: undefined,
+      status: undefined,
+      type: undefined,
+      page: 1,
+      size: 10,
+      sort: ['createTime,desc'],
+    },
+    // 表单数据
+    form: {} as DataRecord,
+    // 表单验证规则
+    rules: {
+      title: [{ required: true, message: '请输入标题' }],
+      content: [{ required: true, message: '请输入内容' }],
+      type: [{ required: true, message: '请选择类型' }],
+    },
+  });
+  const { queryParams, form, rules } = toRefs(data);
+
+  /**
+   * 查询列表
+   *
+   * @param params 查询参数
+   */
+  const getList = (params: ListParam = { ...queryParams.value }) => {
+    loading.value = true;
+    list(params)
+      .then((res) => {
+        dataList.value = res.data.list;
+        total.value = res.data.total;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+  getList();
+
+  /**
+   * 打开新增对话框
+   */
+  const toAdd = () => {
+    reset();
+    title.value = '新增公告';
+    visible.value = true;
+  };
+
+  /**
+   * 打开修改对话框
+   *
+   * @param id ID
+   */
+  const toUpdate = (id: number) => {
+    reset();
+    get(id).then((res) => {
+      form.value = res.data;
+      title.value = '修改公告';
+      visible.value = true;
+    });
+  };
+
+  /**
+   * 重置表单
+   */
+  const reset = () => {
+    form.value = {};
+    proxy.$refs.formRef?.resetFields();
+  };
+
+  /**
+   * 取消
+   */
+  const handleCancel = () => {
+    visible.value = false;
+    proxy.$refs.formRef.resetFields();
+  };
+
+  /**
+   * 确定
+   */
+  const handleOk = () => {
+    proxy.$refs.formRef.validate((valid: any) => {
+      if (!valid) {
+        if (form.value.id !== undefined) {
+          update(form.value, form.value.id).then((res) => {
+            handleCancel();
+            getList();
+            proxy.$message.success(res.msg);
+          });
+        } else {
+          add(form.value).then((res) => {
+            handleCancel();
+            getList();
+            proxy.$message.success(res.msg);
+          });
+        }
+      }
+    });
+  };
+
+  /**
+   * 查看详情
+   *
+   * @param id ID
+   */
+  const toDetail = async (id: number) => {
+    if (detailLoading.value) return;
+    detailLoading.value = true;
+    detailVisible.value = true;
+    get(id)
+      .then((res) => {
+        dataDetail.value = res.data;
+      })
+      .finally(() => {
+        detailLoading.value = false;
+      });
+  };
+
+  /**
+   * 关闭详情
+   */
+  const handleDetailCancel = () => {
+    detailVisible.value = false;
+    dataDetail.value = {};
+  };
+
+  /**
+   * 批量删除
+   */
+  const handleBatchDelete = () => {
+    if (ids.value.length === 0) {
+      proxy.$message.info('请选择要删除的数据');
+    } else {
+      proxy.$modal.warning({
+        title: '警告',
+        titleAlign: 'start',
+        content: `是否确定删除所选的${ids.value.length}条数据？`,
+        hideCancel: false,
+        onOk: () => {
+          handleDelete(ids.value);
+        },
+      });
+    }
+  };
+
+  /**
+   * 删除
+   *
+   * @param ids ID 列表
+   */
+  const handleDelete = (ids: Array<number>) => {
+    del(ids).then((res) => {
+      proxy.$message.success(res.msg);
+      getList();
+      proxy.$refs.tableRef.selectAll(false);
+    });
+  };
+
+  /**
+   * 已选择的数据行发生改变时触发
+   *
+   * @param rowKeys ID 列表
+   */
+  const handleSelectionChange = (rowKeys: Array<any>) => {
+    ids.value = rowKeys;
+    single.value = rowKeys.length !== 1;
+    multiple.value = !rowKeys.length;
+  };
+
+  /**
+   * 导出
+   */
+  const handleExport = () => {
+    if (exportLoading.value) return;
+    exportLoading.value = true;
+    proxy
+      .download(
+        '/system/announcement/export',
+        { ...queryParams.value },
+        '公告数据',
+      )
+      .finally(() => {
+        exportLoading.value = false;
+      });
+  };
+
+  /**
+   * 查询
+   */
+  const handleQuery = () => {
+    getList();
+  };
+
+  /**
+   * 重置
+   */
+  const resetQuery = () => {
+    proxy.$refs.queryRef.resetFields();
+    handleQuery();
+  };
+
+  /**
+   * 切换页码
+   *
+   * @param current 页码
+   */
+  const handlePageChange = (current: number) => {
+    queryParams.value.page = current;
+    getList();
+  };
+
+  /**
+   * 切换每页条数
+   *
+   * @param pageSize 每页条数
+   */
+  const handlePageSizeChange = (pageSize: number) => {
+    queryParams.value.size = pageSize;
+    getList();
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Announcement',
+  };
+</script>
+
 <template>
   <div class="app-container">
     <Breadcrumb :items="['menu.system', 'menu.system.announcement.list']" />
@@ -339,267 +600,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-  import {
-    DataRecord,
-    ListParam,
-    list,
-    get,
-    add,
-    update,
-    del,
-  } from '@/api/system/announcement';
-  import checkPermission from '@/utils/permission';
-
-  const { proxy } = getCurrentInstance() as any;
-  const { announcement_type, announcement_status_enum } = proxy.useDict(
-    'announcement_type',
-    'announcement_status_enum',
-  );
-
-  const dataList = ref<DataRecord[]>([]);
-  const dataDetail = ref<DataRecord>({});
-  const total = ref(0);
-  const ids = ref<Array<number>>([]);
-  const title = ref('');
-  const single = ref(true);
-  const multiple = ref(true);
-  const showQuery = ref(true);
-  const loading = ref(false);
-  const detailLoading = ref(false);
-  const exportLoading = ref(false);
-  const visible = ref(false);
-  const detailVisible = ref(false);
-
-  const data = reactive({
-    // 查询参数
-    queryParams: {
-      title: undefined,
-      status: undefined,
-      type: undefined,
-      page: 1,
-      size: 10,
-      sort: ['createTime,desc'],
-    },
-    // 表单数据
-    form: {} as DataRecord,
-    // 表单验证规则
-    rules: {
-      title: [{ required: true, message: '请输入标题' }],
-      content: [{ required: true, message: '请输入内容' }],
-      type: [{ required: true, message: '请选择类型' }],
-    },
-  });
-  const { queryParams, form, rules } = toRefs(data);
-
-  /**
-   * 查询列表
-   *
-   * @param params 查询参数
-   */
-  const getList = (params: ListParam = { ...queryParams.value }) => {
-    loading.value = true;
-    list(params)
-      .then((res) => {
-        dataList.value = res.data.list;
-        total.value = res.data.total;
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  };
-  getList();
-
-  /**
-   * 打开新增对话框
-   */
-  const toAdd = () => {
-    reset();
-    title.value = '新增公告';
-    visible.value = true;
-  };
-
-  /**
-   * 打开修改对话框
-   *
-   * @param id ID
-   */
-  const toUpdate = (id: number) => {
-    reset();
-    get(id).then((res) => {
-      form.value = res.data;
-      title.value = '修改公告';
-      visible.value = true;
-    });
-  };
-
-  /**
-   * 重置表单
-   */
-  const reset = () => {
-    form.value = {};
-    proxy.$refs.formRef?.resetFields();
-  };
-
-  /**
-   * 取消
-   */
-  const handleCancel = () => {
-    visible.value = false;
-    proxy.$refs.formRef.resetFields();
-  };
-
-  /**
-   * 确定
-   */
-  const handleOk = () => {
-    proxy.$refs.formRef.validate((valid: any) => {
-      if (!valid) {
-        if (form.value.id !== undefined) {
-          update(form.value, form.value.id).then((res) => {
-            handleCancel();
-            getList();
-            proxy.$message.success(res.msg);
-          });
-        } else {
-          add(form.value).then((res) => {
-            handleCancel();
-            getList();
-            proxy.$message.success(res.msg);
-          });
-        }
-      }
-    });
-  };
-
-  /**
-   * 查看详情
-   *
-   * @param id ID
-   */
-  const toDetail = async (id: number) => {
-    if (detailLoading.value) return;
-    detailLoading.value = true;
-    detailVisible.value = true;
-    get(id)
-      .then((res) => {
-        dataDetail.value = res.data;
-      })
-      .finally(() => {
-        detailLoading.value = false;
-      });
-  };
-
-  /**
-   * 关闭详情
-   */
-  const handleDetailCancel = () => {
-    detailVisible.value = false;
-    dataDetail.value = {};
-  };
-
-  /**
-   * 批量删除
-   */
-  const handleBatchDelete = () => {
-    if (ids.value.length === 0) {
-      proxy.$message.info('请选择要删除的数据');
-    } else {
-      proxy.$modal.warning({
-        title: '警告',
-        titleAlign: 'start',
-        content: `是否确定删除所选的${ids.value.length}条数据？`,
-        hideCancel: false,
-        onOk: () => {
-          handleDelete(ids.value);
-        },
-      });
-    }
-  };
-
-  /**
-   * 删除
-   *
-   * @param ids ID 列表
-   */
-  const handleDelete = (ids: Array<number>) => {
-    del(ids).then((res) => {
-      proxy.$message.success(res.msg);
-      getList();
-      proxy.$refs.tableRef.selectAll(false);
-    });
-  };
-
-  /**
-   * 已选择的数据行发生改变时触发
-   *
-   * @param rowKeys ID 列表
-   */
-  const handleSelectionChange = (rowKeys: Array<any>) => {
-    ids.value = rowKeys;
-    single.value = rowKeys.length !== 1;
-    multiple.value = !rowKeys.length;
-  };
-
-  /**
-   * 导出
-   */
-  const handleExport = () => {
-    if (exportLoading.value) return;
-    exportLoading.value = true;
-    proxy
-      .download(
-        '/system/announcement/export',
-        { ...queryParams.value },
-        '公告数据',
-      )
-      .finally(() => {
-        exportLoading.value = false;
-      });
-  };
-
-  /**
-   * 查询
-   */
-  const handleQuery = () => {
-    getList();
-  };
-
-  /**
-   * 重置
-   */
-  const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
-    handleQuery();
-  };
-
-  /**
-   * 切换页码
-   *
-   * @param current 页码
-   */
-  const handlePageChange = (current: number) => {
-    queryParams.value.page = current;
-    getList();
-  };
-
-  /**
-   * 切换每页条数
-   *
-   * @param pageSize 每页条数
-   */
-  const handlePageSizeChange = (pageSize: number) => {
-    queryParams.value.size = pageSize;
-    getList();
-  };
-</script>
-
-<script lang="ts">
-  export default {
-    name: 'Announcement',
-  };
-</script>
-
 <style scoped lang="less">
   :deep(.github-markdown-body) {
     padding: 16px 32px 5px;
diff --git a/src/views/system/config/components/basic-setting.vue b/src/views/system/config/components/basic-setting.vue
index dabc61b..1f1e160 100644
--- a/src/views/system/config/components/basic-setting.vue
+++ b/src/views/system/config/components/basic-setting.vue
@@ -1,174 +1,3 @@
-<template>
-  <a-form
-    ref="formRef"
-    layout="vertical"
-    :model="form"
-    :rules="rules"
-    size="large"
-    :disabled="!isEdit"
-  >
-    <a-list class="list-layout" :bordered="false">
-      <a-list-item>
-        <a-form-item class="image-item" hide-label field="favicon">
-          {{ siteFavicon?.name }}
-          <template #extra>
-            {{ siteFavicon?.description }}
-            <br />
-            <a-upload
-              :file-list="faviconFile ? [faviconFile] : []"
-              accept="image/*"
-              :show-file-list="false"
-              :custom-request="handleUploadFavicon"
-              @change="handleChangeFavicon"
-            >
-              <template #upload-button>
-                <div
-                  :class="`arco-upload-list-item${
-                    faviconFile && faviconFile.status === 'error'
-                      ? ' arco-upload-list-item-error'
-                      : ''
-                  }`"
-                >
-                  <div
-                    v-if="faviconFile && faviconFile.url"
-                    class="arco-upload-list-picture custom-upload-avatar favicon"
-                  >
-                    <img :src="faviconFile.url" alt="favicon" />
-                    <div
-                      v-if="isEdit"
-                      class="arco-upload-list-picture-mask favicon"
-                    >
-                      <IconEdit />
-                    </div>
-                  </div>
-                  <div v-else class="arco-upload-picture-card favicon">
-                    <div class="arco-upload-picture-card-text">
-                      <icon-upload />
-                    </div>
-                  </div>
-                </div>
-              </template>
-            </a-upload>
-          </template>
-        </a-form-item>
-      </a-list-item>
-      <a-list-item>
-        <a-form-item class="image-item" hide-label field="site_logo">
-          {{ siteLogo?.name }}
-          <template #extra>
-            {{ siteLogo?.description }}
-            <br />
-            <a-upload
-              :file-list="logoFile ? [logoFile] : []"
-              accept="image/*"
-              :show-file-list="false"
-              :custom-request="handleUploadLogo"
-              @change="handleChangeLogo"
-            >
-              <template #upload-button>
-                <div
-                  :class="`arco-upload-list-item${
-                    logoFile && logoFile.status === 'error'
-                      ? ' arco-upload-list-item-error'
-                      : ''
-                  }`"
-                >
-                  <div
-                    v-if="logoFile && logoFile.url"
-                    class="arco-upload-list-picture custom-upload-avatar logo"
-                  >
-                    <img :src="logoFile.url" alt="Logo" />
-                    <div
-                      v-if="isEdit"
-                      class="arco-upload-list-picture-mask logo"
-                    >
-                      <IconEdit />
-                    </div>
-                  </div>
-                  <div v-else class="arco-upload-picture-card logo">
-                    <div class="arco-upload-picture-card-text">
-                      <icon-upload />
-                    </div>
-                  </div>
-                </div>
-              </template>
-            </a-upload>
-          </template>
-        </a-form-item>
-      </a-list-item>
-      <a-list-item style="padding-top: 13px; border: none">
-        <a-form-item
-          class="input-item"
-          :label="siteTitle?.name"
-          field="site_title"
-        >
-          <a-input
-            v-model="form.site_title"
-            placeholder="请输入网站标题"
-            :max-length="18"
-          />
-        </a-form-item>
-        <a-form-item
-          class="input-item"
-          :label="siteCopyright?.name"
-          field="site_copyright"
-          tooltip="支持HTML标签"
-        >
-          <a-textarea
-            v-model="form.site_copyright"
-            placeholder="请输入版权信息"
-            :auto-size="{
-              minRows: 3,
-            }"
-            show-word-limit
-          />
-        </a-form-item>
-        <div style="margin-top: 20px">
-          <a-space>
-            <a-button
-              v-if="!isEdit"
-              v-permission="['system:config:reset']"
-              @click="toResetValue"
-            >
-              <template #icon><icon-undo /></template>恢复默认
-            </a-button>
-            <a-button
-              v-if="!isEdit"
-              v-permission="['system:config:update']"
-              type="primary"
-              @click="toEdit"
-            >
-              <template #icon><icon-edit /></template>修改
-            </a-button>
-            <a-button
-              v-if="isEdit"
-              v-permission="['system:config:update']"
-              type="primary"
-              @click="handleSave"
-            >
-              <template #icon><icon-save /></template>保存
-            </a-button>
-            <a-button
-              v-if="isEdit"
-              v-permission="['system:config:update']"
-              @click="reset"
-            >
-              <template #icon><icon-refresh /></template>重置
-            </a-button>
-            <a-button
-              v-if="isEdit"
-              v-permission="['system:config:update']"
-              @click="handleCancel"
-            >
-              <template #icon><icon-undo /></template>取消
-            </a-button>
-          </a-space>
-        </div>
-      </a-list-item>
-    </a-list>
-  </a-form>
-</template>
-
 <script lang="ts" setup>
   import { FileItem, RequestOption } from '@arco-design/web-vue';
   import {
@@ -399,6 +228,177 @@
   };
 </script>
 
+<template>
+  <a-form
+    ref="formRef"
+    layout="vertical"
+    :model="form"
+    :rules="rules"
+    size="large"
+    :disabled="!isEdit"
+  >
+    <a-list class="list-layout" :bordered="false">
+      <a-list-item>
+        <a-form-item class="image-item" hide-label field="favicon">
+          {{ siteFavicon?.name }}
+          <template #extra>
+            {{ siteFavicon?.description }}
+            <br />
+            <a-upload
+              :file-list="faviconFile ? [faviconFile] : []"
+              accept="image/*"
+              :show-file-list="false"
+              :custom-request="handleUploadFavicon"
+              @change="handleChangeFavicon"
+            >
+              <template #upload-button>
+                <div
+                  :class="`arco-upload-list-item${
+                    faviconFile && faviconFile.status === 'error'
+                      ? ' arco-upload-list-item-error'
+                      : ''
+                  }`"
+                >
+                  <div
+                    v-if="faviconFile && faviconFile.url"
+                    class="arco-upload-list-picture custom-upload-avatar favicon"
+                  >
+                    <img :src="faviconFile.url" alt="favicon" />
+                    <div
+                      v-if="isEdit"
+                      class="arco-upload-list-picture-mask favicon"
+                    >
+                      <IconEdit />
+                    </div>
+                  </div>
+                  <div v-else class="arco-upload-picture-card favicon">
+                    <div class="arco-upload-picture-card-text">
+                      <icon-upload />
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </a-upload>
+          </template>
+        </a-form-item>
+      </a-list-item>
+      <a-list-item>
+        <a-form-item class="image-item" hide-label field="site_logo">
+          {{ siteLogo?.name }}
+          <template #extra>
+            {{ siteLogo?.description }}
+            <br />
+            <a-upload
+              :file-list="logoFile ? [logoFile] : []"
+              accept="image/*"
+              :show-file-list="false"
+              :custom-request="handleUploadLogo"
+              @change="handleChangeLogo"
+            >
+              <template #upload-button>
+                <div
+                  :class="`arco-upload-list-item${
+                    logoFile && logoFile.status === 'error'
+                      ? ' arco-upload-list-item-error'
+                      : ''
+                  }`"
+                >
+                  <div
+                    v-if="logoFile && logoFile.url"
+                    class="arco-upload-list-picture custom-upload-avatar logo"
+                  >
+                    <img :src="logoFile.url" alt="Logo" />
+                    <div
+                      v-if="isEdit"
+                      class="arco-upload-list-picture-mask logo"
+                    >
+                      <IconEdit />
+                    </div>
+                  </div>
+                  <div v-else class="arco-upload-picture-card logo">
+                    <div class="arco-upload-picture-card-text">
+                      <icon-upload />
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </a-upload>
+          </template>
+        </a-form-item>
+      </a-list-item>
+      <a-list-item style="padding-top: 13px; border: none">
+        <a-form-item
+          class="input-item"
+          :label="siteTitle?.name"
+          field="site_title"
+        >
+          <a-input
+            v-model="form.site_title"
+            placeholder="请输入网站标题"
+            :max-length="18"
+          />
+        </a-form-item>
+        <a-form-item
+          class="input-item"
+          :label="siteCopyright?.name"
+          field="site_copyright"
+          tooltip="支持HTML标签"
+        >
+          <a-textarea
+            v-model="form.site_copyright"
+            placeholder="请输入版权信息"
+            :auto-size="{
+              minRows: 3,
+            }"
+            show-word-limit
+          />
+        </a-form-item>
+        <div style="margin-top: 20px">
+          <a-space>
+            <a-button
+              v-if="!isEdit"
+              v-permission="['system:config:reset']"
+              @click="toResetValue"
+            >
+              <template #icon><icon-undo /></template>恢复默认
+            </a-button>
+            <a-button
+              v-if="!isEdit"
+              v-permission="['system:config:update']"
+              type="primary"
+              @click="toEdit"
+            >
+              <template #icon><icon-edit /></template>修改
+            </a-button>
+            <a-button
+              v-if="isEdit"
+              v-permission="['system:config:update']"
+              type="primary"
+              @click="handleSave"
+            >
+              <template #icon><icon-save /></template>保存
+            </a-button>
+            <a-button
+              v-if="isEdit"
+              v-permission="['system:config:update']"
+              @click="reset"
+            >
+              <template #icon><icon-refresh /></template>重置
+            </a-button>
+            <a-button
+              v-if="isEdit"
+              v-permission="['system:config:update']"
+              @click="handleCancel"
+            >
+              <template #icon><icon-undo /></template>取消
+            </a-button>
+          </a-space>
+        </div>
+      </a-list-item>
+    </a-list>
+  </a-form>
+</template>
+
 <style scoped lang="less">
   .logo {
     width: 33px;
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
index a2d6aff..9544ae6 100644
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -1,3 +1,13 @@
+<script lang="ts" setup>
+  import BasicSetting from './components/basic-setting.vue';
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Config',
+  };
+</script>
+
 <template>
   <div class="app-container">
     <Breadcrumb :items="['menu.system', 'menu.system.config']" />
@@ -12,16 +22,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-  import BasicSetting from './components/basic-setting.vue';
-</script>
-
-<script lang="ts">
-  export default {
-    name: 'Config',
-  };
-</script>
-
 <style scoped lang="less">
   :deep(.arco-tabs-content) {
     padding-top: 5px;
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 8c55f67..3b35679 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,307 +1,3 @@
-<template>
-  <div class="app-container">
-    <Breadcrumb :items="['menu.system', 'menu.system.dept.list']" />
-    <a-card class="general-card" :title="$t('menu.system.dept.list')">
-      <!-- 头部区域 -->
-      <div class="header">
-        <!-- 搜索栏 -->
-        <div v-if="showQuery" class="header-query">
-          <a-form ref="queryRef" :model="queryParams" layout="inline">
-            <a-form-item field="name" hide-label>
-              <a-input
-                v-model="queryParams.name"
-                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="dis_enable_status_enum"
-                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
-                  v-permission="['system:dept:add']"
-                  type="primary"
-                  @click="toAdd"
-                >
-                  <template #icon><icon-plus /></template>新增
-                </a-button>
-                <a-button
-                  v-permission="['system:dept:update']"
-                  type="primary"
-                  status="success"
-                  :disabled="single"
-                  :title="single ? '请选择一条要修改的数据' : ''"
-                  @click="toUpdate(ids[0])"
-                >
-                  <template #icon><icon-edit /></template>修改
-                </a-button>
-                <a-button
-                  v-permission="['system:dept:delete']"
-                  type="primary"
-                  status="danger"
-                  :disabled="multiple"
-                  :title="multiple ? '请选择要删除的数据' : ''"
-                  @click="handleBatchDelete"
-                >
-                  <template #icon><icon-delete /></template>删除
-                </a-button>
-                <a-button
-                  v-permission="['system:dept:export']"
-                  :loading="exportLoading"
-                  type="primary"
-                  status="warning"
-                  @click="handleExport"
-                >
-                  <template #icon><icon-download /></template>导出
-                </a-button>
-              </a-space>
-            </a-col>
-            <a-col :span="12">
-              <right-toolbar
-                v-model:show-query="showQuery"
-                @refresh="getList"
-              />
-            </a-col>
-          </a-row>
-        </div>
-      </div>
-
-      <!-- 列表区域 -->
-      <a-table
-        ref="tableRef"
-        row-key="id"
-        :data="dataList"
-        :loading="loading"
-        :row-selection="{
-          type: 'checkbox',
-          showCheckedAll: true,
-          onlyCurrent: false,
-        }"
-        :pagination="false"
-        :bordered="false"
-        :default-expand-all-rows="true"
-        :hide-expand-button-on-empty="true"
-        column-resizable
-        stripe
-        size="large"
-        @select="handleSelect"
-        @selection-change="handleSelectionChange"
-      >
-        <template #columns>
-          <a-table-column title="名称">
-            <template #cell="{ record }">
-              <a-link @click="toDetail(record.id)">{{ record.name }}</a-link>
-            </template>
-          </a-table-column>
-          <a-table-column title="排序" align="center" data-index="sort" />
-          <a-table-column title="状态" align="center" data-index="status">
-            <template #cell="{ record }">
-              <a-switch
-                v-model="record.status"
-                :checked-value="1"
-                :unchecked-value="2"
-                :disabled="
-                  record.disabled || !checkPermission(['system:dept:update'])
-                "
-                @change="handleChangeStatus(record)"
-              />
-            </template>
-          </a-table-column>
-          <a-table-column title="系统内置" align="center">
-            <template #cell="{ record }">
-              <a-tag v-if="record.isSystem" color="red">是</a-tag>
-              <a-tag v-else color="arcoblue">否</a-tag>
-            </template>
-          </a-table-column>
-          <a-table-column title="描述" data-index="description" />
-          <a-table-column title="创建时间" data-index="createTime" />
-          <a-table-column
-            v-if="checkPermission(['system:dept:update', 'system:dept:delete'])"
-            title="操作"
-            align="center"
-          >
-            <template #cell="{ record }">
-              <a-button
-                v-permission="['system:dept:update']"
-                type="text"
-                size="small"
-                title="修改"
-                @click="toUpdate(record.id)"
-              >
-                <template #icon><icon-edit /></template>修改
-              </a-button>
-              <a-popconfirm
-                content="是否确定删除该数据？"
-                type="warning"
-                @ok="handleDelete([record.id])"
-              >
-                <a-button
-                  v-permission="['system:dept:delete']"
-                  type="text"
-                  size="small"
-                  :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
-                  :disabled="record.disabled"
-                >
-                  <template #icon><icon-delete /></template>删除
-                </a-button>
-              </a-popconfirm>
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
-
-      <!-- 表单区域 -->
-      <a-modal
-        :title="title"
-        :visible="visible"
-        :mask-closable="false"
-        :esc-to-close="false"
-        unmount-on-close
-        render-to-body
-        @ok="handleOk"
-        @cancel="handleCancel"
-      >
-        <a-form ref="formRef" :model="form" :rules="rules" size="large">
-          <a-form-item
-            label="上级部门"
-            field="parentId"
-            :disabled="form.disabled"
-          >
-            <a-tree-select
-              v-model="form.parentId"
-              :data="treeData"
-              placeholder="请选择上级部门"
-              allow-clear
-              allow-search
-              :filter-tree-node="filterDeptTree"
-              :fallback-option="false"
-            />
-          </a-form-item>
-          <a-form-item label="名称" field="name">
-            <a-input v-model="form.name" placeholder="请输入名称" />
-          </a-form-item>
-          <a-form-item label="排序" field="sort">
-            <a-input-number
-              v-model="form.sort"
-              placeholder="请输入排序"
-              :min="1"
-              mode="button"
-            />
-          </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
-            />
-          </a-form-item>
-        </a-form>
-      </a-modal>
-
-      <!-- 详情区域 -->
-      <a-drawer
-        title="部门详情"
-        :visible="detailVisible"
-        :width="580"
-        :footer="false"
-        unmount-on-close
-        render-to-body
-        @cancel="handleDetailCancel"
-      >
-        <a-descriptions :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>{{ dataDetail.name }}</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>{{ dataDetail.parentName || '无' }}</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>
-              <dict-tag
-                :value="dataDetail.status"
-                :dict="dis_enable_status_enum"
-              />
-            </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>{{ dataDetail.sort }}</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>{{ dataDetail.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>{{ dataDetail.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>{{ dataDetail.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>{{ dataDetail.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>{{ dataDetail.description }}</span>
-          </a-descriptions-item>
-        </a-descriptions>
-      </a-drawer>
-    </a-card>
-  </div>
-</template>
-
 <script lang="ts" setup>
   import { TreeNodeData, TableData } from '@arco-design/web-vue';
   import {
@@ -612,4 +308,308 @@
   };
 </script>
 
+<template>
+  <div class="app-container">
+    <Breadcrumb :items="['menu.system', 'menu.system.dept.list']" />
+    <a-card class="general-card" :title="$t('menu.system.dept.list')">
+      <!-- 头部区域 -->
+      <div class="header">
+        <!-- 搜索栏 -->
+        <div v-if="showQuery" class="header-query">
+          <a-form ref="queryRef" :model="queryParams" layout="inline">
+            <a-form-item field="name" hide-label>
+              <a-input
+                v-model="queryParams.name"
+                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="dis_enable_status_enum"
+                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
+                  v-permission="['system:dept:add']"
+                  type="primary"
+                  @click="toAdd"
+                >
+                  <template #icon><icon-plus /></template>新增
+                </a-button>
+                <a-button
+                  v-permission="['system:dept:update']"
+                  type="primary"
+                  status="success"
+                  :disabled="single"
+                  :title="single ? '请选择一条要修改的数据' : ''"
+                  @click="toUpdate(ids[0])"
+                >
+                  <template #icon><icon-edit /></template>修改
+                </a-button>
+                <a-button
+                  v-permission="['system:dept:delete']"
+                  type="primary"
+                  status="danger"
+                  :disabled="multiple"
+                  :title="multiple ? '请选择要删除的数据' : ''"
+                  @click="handleBatchDelete"
+                >
+                  <template #icon><icon-delete /></template>删除
+                </a-button>
+                <a-button
+                  v-permission="['system:dept:export']"
+                  :loading="exportLoading"
+                  type="primary"
+                  status="warning"
+                  @click="handleExport"
+                >
+                  <template #icon><icon-download /></template>导出
+                </a-button>
+              </a-space>
+            </a-col>
+            <a-col :span="12">
+              <right-toolbar
+                v-model:show-query="showQuery"
+                @refresh="getList"
+              />
+            </a-col>
+          </a-row>
+        </div>
+      </div>
+
+      <!-- 列表区域 -->
+      <a-table
+        ref="tableRef"
+        row-key="id"
+        :data="dataList"
+        :loading="loading"
+        :row-selection="{
+          type: 'checkbox',
+          showCheckedAll: true,
+          onlyCurrent: false,
+        }"
+        :pagination="false"
+        :bordered="false"
+        :default-expand-all-rows="true"
+        :hide-expand-button-on-empty="true"
+        column-resizable
+        stripe
+        size="large"
+        @select="handleSelect"
+        @selection-change="handleSelectionChange"
+      >
+        <template #columns>
+          <a-table-column title="名称">
+            <template #cell="{ record }">
+              <a-link @click="toDetail(record.id)">{{ record.name }}</a-link>
+            </template>
+          </a-table-column>
+          <a-table-column title="排序" align="center" data-index="sort" />
+          <a-table-column title="状态" align="center" data-index="status">
+            <template #cell="{ record }">
+              <a-switch
+                v-model="record.status"
+                :checked-value="1"
+                :unchecked-value="2"
+                :disabled="
+                  record.disabled || !checkPermission(['system:dept:update'])
+                "
+                @change="handleChangeStatus(record)"
+              />
+            </template>
+          </a-table-column>
+          <a-table-column title="系统内置" align="center">
+            <template #cell="{ record }">
+              <a-tag v-if="record.isSystem" color="red">是</a-tag>
+              <a-tag v-else color="arcoblue">否</a-tag>
+            </template>
+          </a-table-column>
+          <a-table-column title="描述" data-index="description" />
+          <a-table-column title="创建时间" data-index="createTime" />
+          <a-table-column
+            v-if="checkPermission(['system:dept:update', 'system:dept:delete'])"
+            title="操作"
+            align="center"
+          >
+            <template #cell="{ record }">
+              <a-button
+                v-permission="['system:dept:update']"
+                type="text"
+                size="small"
+                title="修改"
+                @click="toUpdate(record.id)"
+              >
+                <template #icon><icon-edit /></template>修改
+              </a-button>
+              <a-popconfirm
+                content="是否确定删除该数据？"
+                type="warning"
+                @ok="handleDelete([record.id])"
+              >
+                <a-button
+                  v-permission="['system:dept:delete']"
+                  type="text"
+                  size="small"
+                  :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
+                  :disabled="record.disabled"
+                >
+                  <template #icon><icon-delete /></template>删除
+                </a-button>
+              </a-popconfirm>
+            </template>
+          </a-table-column>
+        </template>
+      </a-table>
+
+      <!-- 表单区域 -->
+      <a-modal
+        :title="title"
+        :visible="visible"
+        :mask-closable="false"
+        :esc-to-close="false"
+        unmount-on-close
+        render-to-body
+        @ok="handleOk"
+        @cancel="handleCancel"
+      >
+        <a-form ref="formRef" :model="form" :rules="rules" size="large">
+          <a-form-item
+            label="上级部门"
+            field="parentId"
+            :disabled="form.disabled"
+          >
+            <a-tree-select
+              v-model="form.parentId"
+              :data="treeData"
+              placeholder="请选择上级部门"
+              allow-clear
+              allow-search
+              :filter-tree-node="filterDeptTree"
+              :fallback-option="false"
+            />
+          </a-form-item>
+          <a-form-item label="名称" field="name">
+            <a-input v-model="form.name" placeholder="请输入名称" />
+          </a-form-item>
+          <a-form-item label="排序" field="sort">
+            <a-input-number
+              v-model="form.sort"
+              placeholder="请输入排序"
+              :min="1"
+              mode="button"
+            />
+          </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
+            />
+          </a-form-item>
+        </a-form>
+      </a-modal>
+
+      <!-- 详情区域 -->
+      <a-drawer
+        title="部门详情"
+        :visible="detailVisible"
+        :width="580"
+        :footer="false"
+        unmount-on-close
+        render-to-body
+        @cancel="handleDetailCancel"
+      >
+        <a-descriptions :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>{{ dataDetail.name }}</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>{{ dataDetail.parentName || '无' }}</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>
+              <dict-tag
+                :value="dataDetail.status"
+                :dict="dis_enable_status_enum"
+              />
+            </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>{{ dataDetail.sort }}</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>{{ dataDetail.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>{{ dataDetail.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>{{ dataDetail.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>{{ dataDetail.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>{{ dataDetail.description }}</span>
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-drawer>
+    </a-card>
+  </div>
+</template>
+
 <style scoped lang="less"></style>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 2bee90b..ee8e274 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,225 +1,3 @@
-<template>
-  <div class="app-container">
-    <Breadcrumb :items="['menu.system', 'menu.system.dict.list']" />
-    <a-card class="general-card" :title="$t('menu.system.dict.list')">
-      <a-row>
-        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-          <!-- 头部区域 -->
-          <div class="header">
-            <!-- 搜索栏 -->
-            <div v-if="showQuery" class="header-query">
-              <a-form ref="queryRef" :model="queryParams" layout="inline">
-                <a-form-item field="name" hide-label>
-                  <a-input
-                    v-model="queryParams.name"
-                    placeholder="输入名称搜索"
-                    allow-clear
-                    style="width: 150px"
-                    @press-enter="handleQuery"
-                  />
-                </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
-                      v-permission="['system:dict:add']"
-                      type="primary"
-                      @click="toAdd"
-                    >
-                      <template #icon><icon-plus /></template>新增
-                    </a-button>
-                    <a-button
-                      v-permission="['system:dict:update']"
-                      type="primary"
-                      status="success"
-                      :disabled="single"
-                      :title="single ? '请选择一条要修改的数据' : ''"
-                      @click="toUpdate(ids[0])"
-                    >
-                      <template #icon><icon-edit /></template>修改
-                    </a-button>
-                    <a-button
-                      v-permission="['system:dict:delete']"
-                      type="primary"
-                      status="danger"
-                      :disabled="multiple"
-                      :title="multiple ? '请选择要删除的数据' : ''"
-                      @click="handleBatchDelete"
-                    >
-                      <template #icon><icon-delete /></template>删除
-                    </a-button>
-                    <a-button
-                      v-permission="['system:dict:export']"
-                      :loading="exportLoading"
-                      type="primary"
-                      status="warning"
-                      @click="handleExport"
-                    >
-                      <template #icon><icon-download /></template>导出
-                    </a-button>
-                  </a-space>
-                </a-col>
-                <a-col :span="12">
-                  <right-toolbar
-                    v-model:show-query="showQuery"
-                    @refresh="handleQuery"
-                  />
-                </a-col>
-              </a-row>
-            </div>
-          </div>
-
-          <!-- 列表区域 -->
-          <a-table
-            ref="tableRef"
-            row-key="id"
-            :data="dataList"
-            :loading="loading"
-            :row-selection="{
-              type: 'checkbox',
-              showCheckedAll: true,
-              onlyCurrent: false,
-            }"
-            :pagination="{
-              showTotal: true,
-              showPageSize: true,
-              total: total,
-              current: queryParams.page,
-            }"
-            :bordered="false"
-            column-resizable
-            class="dictTable"
-            size="large"
-            @page-change="handlePageChange"
-            @page-size-change="handlePageSizeChange"
-            @selection-change="handleSelectionChange"
-            @row-click="handleSelect"
-          >
-            <template #columns>
-              <a-table-column
-                title="序号"
-                :width="60"
-                :body-cell-style="bodyCellStyle"
-              >
-                <template #cell="{ rowIndex }">
-                  {{ rowIndex + 1 + (queryParams.page - 1) * queryParams.size }}
-                </template>
-              </a-table-column>
-              <a-table-column
-                title="名称"
-                data-index="name"
-                :width="100"
-                :body-cell-style="bodyCellStyle"
-              />
-              <a-table-column
-                title="编码"
-                data-index="code"
-                :body-cell-style="bodyCellStyle"
-              />
-              <a-table-column
-                title="描述"
-                data-index="description"
-                ellipsis
-                tooltip
-                :width="100"
-                :body-cell-style="bodyCellStyle"
-              />
-              <a-table-column
-                v-if="
-                  checkPermission(['system:dict:update', 'system:dict:delete'])
-                "
-                title="操作"
-                align="center"
-                :body-cell-style="bodyCellStyle"
-              >
-                <template #cell="{ record }">
-                  <a-button
-                    v-permission="['system:dict:update']"
-                    type="text"
-                    size="small"
-                    title="修改"
-                    @click="toUpdate(record.id)"
-                  >
-                    <template #icon><icon-edit /></template>修改
-                  </a-button>
-                  <a-popconfirm
-                    content="是否确定删除该数据？"
-                    type="warning"
-                    @ok="handleDelete([record.id])"
-                  >
-                    <a-button
-                      v-permission="['system:dict:delete']"
-                      type="text"
-                      size="small"
-                      :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
-                      :disabled="record.isSystem"
-                    >
-                      <template #icon><icon-delete /></template>删除
-                    </a-button>
-                  </a-popconfirm>
-                </template>
-              </a-table-column>
-            </template>
-          </a-table>
-        </a-col>
-        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-          <dict-item ref="dictItemRef" :dict-id="dictId" />
-        </a-col>
-      </a-row>
-
-      <!-- 表单区域 -->
-      <a-modal
-        :title="title"
-        :visible="visible"
-        :mask-closable="false"
-        :esc-to-close="false"
-        unmount-on-close
-        render-to-body
-        @ok="handleOk"
-        @cancel="handleCancel"
-      >
-        <a-form ref="formRef" :model="form" :rules="rules" size="large">
-          <a-form-item label="名称" field="name">
-            <a-input v-model="form.name" placeholder="请输入名称" />
-          </a-form-item>
-          <a-form-item label="编码" field="code">
-            <a-input
-              v-model="form.code"
-              placeholder="请输入编码"
-              :disabled="form.isSystem"
-            />
-          </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
-            />
-          </a-form-item>
-        </a-form>
-      </a-modal>
-    </a-card>
-  </div>
-</template>
-
 <script lang="ts" setup>
   import { TableData } from '@arco-design/web-vue';
   import {
@@ -484,4 +262,226 @@
   };
 </script>
 
+<template>
+  <div class="app-container">
+    <Breadcrumb :items="['menu.system', 'menu.system.dict.list']" />
+    <a-card class="general-card" :title="$t('menu.system.dict.list')">
+      <a-row>
+        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <!-- 头部区域 -->
+          <div class="header">
+            <!-- 搜索栏 -->
+            <div v-if="showQuery" class="header-query">
+              <a-form ref="queryRef" :model="queryParams" layout="inline">
+                <a-form-item field="name" hide-label>
+                  <a-input
+                    v-model="queryParams.name"
+                    placeholder="输入名称搜索"
+                    allow-clear
+                    style="width: 150px"
+                    @press-enter="handleQuery"
+                  />
+                </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
+                      v-permission="['system:dict:add']"
+                      type="primary"
+                      @click="toAdd"
+                    >
+                      <template #icon><icon-plus /></template>新增
+                    </a-button>
+                    <a-button
+                      v-permission="['system:dict:update']"
+                      type="primary"
+                      status="success"
+                      :disabled="single"
+                      :title="single ? '请选择一条要修改的数据' : ''"
+                      @click="toUpdate(ids[0])"
+                    >
+                      <template #icon><icon-edit /></template>修改
+                    </a-button>
+                    <a-button
+                      v-permission="['system:dict:delete']"
+                      type="primary"
+                      status="danger"
+                      :disabled="multiple"
+                      :title="multiple ? '请选择要删除的数据' : ''"
+                      @click="handleBatchDelete"
+                    >
+                      <template #icon><icon-delete /></template>删除
+                    </a-button>
+                    <a-button
+                      v-permission="['system:dict:export']"
+                      :loading="exportLoading"
+                      type="primary"
+                      status="warning"
+                      @click="handleExport"
+                    >
+                      <template #icon><icon-download /></template>导出
+                    </a-button>
+                  </a-space>
+                </a-col>
+                <a-col :span="12">
+                  <right-toolbar
+                    v-model:show-query="showQuery"
+                    @refresh="handleQuery"
+                  />
+                </a-col>
+              </a-row>
+            </div>
+          </div>
+
+          <!-- 列表区域 -->
+          <a-table
+            ref="tableRef"
+            row-key="id"
+            :data="dataList"
+            :loading="loading"
+            :row-selection="{
+              type: 'checkbox',
+              showCheckedAll: true,
+              onlyCurrent: false,
+            }"
+            :pagination="{
+              showTotal: true,
+              showPageSize: true,
+              total: total,
+              current: queryParams.page,
+            }"
+            :bordered="false"
+            column-resizable
+            class="dictTable"
+            size="large"
+            @page-change="handlePageChange"
+            @page-size-change="handlePageSizeChange"
+            @selection-change="handleSelectionChange"
+            @row-click="handleSelect"
+          >
+            <template #columns>
+              <a-table-column
+                title="序号"
+                :width="60"
+                :body-cell-style="bodyCellStyle"
+              >
+                <template #cell="{ rowIndex }">
+                  {{ rowIndex + 1 + (queryParams.page - 1) * queryParams.size }}
+                </template>
+              </a-table-column>
+              <a-table-column
+                title="名称"
+                data-index="name"
+                :width="100"
+                :body-cell-style="bodyCellStyle"
+              />
+              <a-table-column
+                title="编码"
+                data-index="code"
+                :body-cell-style="bodyCellStyle"
+              />
+              <a-table-column
+                title="描述"
+                data-index="description"
+                ellipsis
+                tooltip
+                :width="100"
+                :body-cell-style="bodyCellStyle"
+              />
+              <a-table-column
+                v-if="
+                  checkPermission(['system:dict:update', 'system:dict:delete'])
+                "
+                title="操作"
+                align="center"
+                :body-cell-style="bodyCellStyle"
+              >
+                <template #cell="{ record }">
+                  <a-button
+                    v-permission="['system:dict:update']"
+                    type="text"
+                    size="small"
+                    title="修改"
+                    @click="toUpdate(record.id)"
+                  >
+                    <template #icon><icon-edit /></template>修改
+                  </a-button>
+                  <a-popconfirm
+                    content="是否确定删除该数据？"
+                    type="warning"
+                    @ok="handleDelete([record.id])"
+                  >
+                    <a-button
+                      v-permission="['system:dict:delete']"
+                      type="text"
+                      size="small"
+                      :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
+                      :disabled="record.isSystem"
+                    >
+                      <template #icon><icon-delete /></template>删除
+                    </a-button>
+                  </a-popconfirm>
+                </template>
+              </a-table-column>
+            </template>
+          </a-table>
+        </a-col>
+        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <dict-item ref="dictItemRef" :dict-id="dictId" />
+        </a-col>
+      </a-row>
+
+      <!-- 表单区域 -->
+      <a-modal
+        :title="title"
+        :visible="visible"
+        :mask-closable="false"
+        :esc-to-close="false"
+        unmount-on-close
+        render-to-body
+        @ok="handleOk"
+        @cancel="handleCancel"
+      >
+        <a-form ref="formRef" :model="form" :rules="rules" size="large">
+          <a-form-item label="名称" field="name">
+            <a-input v-model="form.name" placeholder="请输入名称" />
+          </a-form-item>
+          <a-form-item label="编码" field="code">
+            <a-input
+              v-model="form.code"
+              placeholder="请输入编码"
+              :disabled="form.isSystem"
+            />
+          </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
+            />
+          </a-form-item>
+        </a-form>
+      </a-modal>
+    </a-card>
+  </div>
+</template>
+
 <style scoped lang="less"></style>
diff --git a/src/views/system/dict/item.vue b/src/views/system/dict/item.vue
index 992d978..c28cb9c 100644
--- a/src/views/system/dict/item.vue
+++ b/src/views/system/dict/item.vue
@@ -1,173 +1,3 @@
-<template>
-  <div class="app-container">
-    <!-- 头部区域 -->
-    <div style="margin-bottom: 18px">
-      <a-row>
-        <a-col :span="18" />
-        <a-col :span="6" style="display: flex; justify-content: end">
-          <a-button
-            v-permission="['system:dictItem:add']"
-            type="primary"
-            :disabled="!dictId"
-            :title="!dictId ? '请先点击字典' : ''"
-            @click="toAdd"
-          >
-            <template #icon><icon-plus /></template>新增
-          </a-button>
-        </a-col>
-      </a-row>
-    </div>
-
-    <!-- 列表区域 -->
-    <a-table
-      ref="tableRef"
-      row-key="id"
-      :data="dictId ? dataList : []"
-      :loading="loading"
-      :pagination="{
-        showTotal: true,
-        showPageSize: true,
-        total: total,
-        current: queryParams.page,
-      }"
-      :bordered="false"
-      column-resizable
-      stripe
-      size="large"
-      @page-change="handlePageChange"
-      @page-size-change="handlePageSizeChange"
-    >
-      <template #empty>
-        <a-empty v-if="!dictId">点击字典查看详情</a-empty>
-        <a-empty v-else>暂无数据</a-empty>
-      </template>
-      <template #columns>
-        <a-table-column title="标签" align="center">
-          <template #cell="{ record }">
-            <dict-tag :value="record.value" :dict="dataList" />
-          </template>
-        </a-table-column>
-        <a-table-column title="值" align="center" data-index="value" />
-        <a-table-column title="排序" align="center" data-index="sort" />
-        <a-table-column title="描述" data-index="description" />
-        <a-table-column
-          v-if="
-            checkPermission([
-              'system:dictItem:update',
-              'system:dictItem:delete',
-            ])
-          "
-          title="操作"
-          align="center"
-        >
-          <template #cell="{ record }">
-            <a-button
-              v-permission="['system:dictItem:update']"
-              type="text"
-              size="small"
-              title="修改"
-              @click="toUpdate(record.id)"
-            >
-              <template #icon><icon-edit /></template>修改
-            </a-button>
-            <a-popconfirm
-              content="是否确定删除该数据？"
-              type="warning"
-              @ok="handleDelete([record.id])"
-            >
-              <a-button
-                v-permission="['system:dictItem:delete']"
-                type="text"
-                size="small"
-                title="删除"
-                :disabled="record.disabled"
-              >
-                <template #icon><icon-delete /></template>删除
-              </a-button>
-            </a-popconfirm>
-          </template>
-        </a-table-column>
-      </template>
-    </a-table>
-
-    <!-- 表单区域 -->
-    <a-modal
-      :title="title"
-      :visible="visible"
-      :mask-closable="false"
-      :esc-to-close="false"
-      unmount-on-close
-      render-to-body
-      @ok="handleOk"
-      @cancel="handleCancel"
-    >
-      <a-form ref="formRef" :model="form" :rules="rules" size="large">
-        <a-form-item label="标签" field="label">
-          <a-input
-            v-model="form.label"
-            placeholder="请输入标签"
-            :max-length="30"
-          />
-        </a-form-item>
-        <a-form-item label="值" field="value">
-          <a-input
-            v-model="form.value"
-            placeholder="请输入值"
-            :max-length="30"
-          />
-        </a-form-item>
-        <a-form-item label="标签颜色" field="color">
-          <a-auto-complete
-            v-model="form.color"
-            :data="colors"
-            placeholder="请选择或输入标签颜色"
-            :max-length="30"
-            allow-clear
-          >
-            <template #option="{ data }">
-              <a-tag v-if="data.value === 'primary'" color="arcoblue">{{
-                data.value
-              }}</a-tag>
-              <a-tag v-else-if="data.value === 'success'" color="green">{{
-                data.value
-              }}</a-tag>
-              <a-tag v-else-if="data.value === 'warning'" color="orangered">{{
-                data.value
-              }}</a-tag>
-              <a-tag v-else-if="data.value === 'error'" color="red">{{
-                data.value
-              }}</a-tag>
-              <a-tag v-else color="gray">{{ data.value }}</a-tag>
-            </template>
-            <template #suffix>
-              <color-picker v-model:pureColor="form.color" shape="circle" />
-            </template>
-          </a-auto-complete>
-        </a-form-item>
-        <a-form-item label="排序" field="sort">
-          <a-input-number
-            v-model="form.sort"
-            placeholder="请输入排序"
-            :min="1"
-            mode="button"
-          />
-        </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
-          />
-        </a-form-item>
-      </a-form>
-    </a-modal>
-  </div>
-</template>
-
 <script lang="ts" setup>
   import {
     DataRecord,
@@ -338,6 +168,176 @@
   };
 </script>
 
+<template>
+  <div class="app-container">
+    <!-- 头部区域 -->
+    <div style="margin-bottom: 18px">
+      <a-row>
+        <a-col :span="18" />
+        <a-col :span="6" style="display: flex; justify-content: end">
+          <a-button
+            v-permission="['system:dictItem:add']"
+            type="primary"
+            :disabled="!dictId"
+            :title="!dictId ? '请先点击字典' : ''"
+            @click="toAdd"
+          >
+            <template #icon><icon-plus /></template>新增
+          </a-button>
+        </a-col>
+      </a-row>
+    </div>
+
+    <!-- 列表区域 -->
+    <a-table
+      ref="tableRef"
+      row-key="id"
+      :data="dictId ? dataList : []"
+      :loading="loading"
+      :pagination="{
+        showTotal: true,
+        showPageSize: true,
+        total: total,
+        current: queryParams.page,
+      }"
+      :bordered="false"
+      column-resizable
+      stripe
+      size="large"
+      @page-change="handlePageChange"
+      @page-size-change="handlePageSizeChange"
+    >
+      <template #empty>
+        <a-empty v-if="!dictId">点击字典查看详情</a-empty>
+        <a-empty v-else>暂无数据</a-empty>
+      </template>
+      <template #columns>
+        <a-table-column title="标签" align="center">
+          <template #cell="{ record }">
+            <dict-tag :value="record.value" :dict="dataList" />
+          </template>
+        </a-table-column>
+        <a-table-column title="值" align="center" data-index="value" />
+        <a-table-column title="排序" align="center" data-index="sort" />
+        <a-table-column title="描述" data-index="description" />
+        <a-table-column
+          v-if="
+            checkPermission([
+              'system:dictItem:update',
+              'system:dictItem:delete',
+            ])
+          "
+          title="操作"
+          align="center"
+        >
+          <template #cell="{ record }">
+            <a-button
+              v-permission="['system:dictItem:update']"
+              type="text"
+              size="small"
+              title="修改"
+              @click="toUpdate(record.id)"
+            >
+              <template #icon><icon-edit /></template>修改
+            </a-button>
+            <a-popconfirm
+              content="是否确定删除该数据？"
+              type="warning"
+              @ok="handleDelete([record.id])"
+            >
+              <a-button
+                v-permission="['system:dictItem:delete']"
+                type="text"
+                size="small"
+                title="删除"
+                :disabled="record.disabled"
+              >
+                <template #icon><icon-delete /></template>删除
+              </a-button>
+            </a-popconfirm>
+          </template>
+        </a-table-column>
+      </template>
+    </a-table>
+
+    <!-- 表单区域 -->
+    <a-modal
+      :title="title"
+      :visible="visible"
+      :mask-closable="false"
+      :esc-to-close="false"
+      unmount-on-close
+      render-to-body
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      <a-form ref="formRef" :model="form" :rules="rules" size="large">
+        <a-form-item label="标签" field="label">
+          <a-input
+            v-model="form.label"
+            placeholder="请输入标签"
+            :max-length="30"
+          />
+        </a-form-item>
+        <a-form-item label="值" field="value">
+          <a-input
+            v-model="form.value"
+            placeholder="请输入值"
+            :max-length="30"
+          />
+        </a-form-item>
+        <a-form-item label="标签颜色" field="color">
+          <a-auto-complete
+            v-model="form.color"
+            :data="colors"
+            placeholder="请选择或输入标签颜色"
+            :max-length="30"
+            allow-clear
+          >
+            <template #option="{ data }">
+              <a-tag v-if="data.value === 'primary'" color="arcoblue">{{
+                data.value
+              }}</a-tag>
+              <a-tag v-else-if="data.value === 'success'" color="green">{{
+                data.value
+              }}</a-tag>
+              <a-tag v-else-if="data.value === 'warning'" color="orangered">{{
+                data.value
+              }}</a-tag>
+              <a-tag v-else-if="data.value === 'error'" color="red">{{
+                data.value
+              }}</a-tag>
+              <a-tag v-else color="gray">{{ data.value }}</a-tag>
+            </template>
+            <template #suffix>
+              <color-picker v-model:pureColor="form.color" shape="circle" />
+            </template>
+          </a-auto-complete>
+        </a-form-item>
+        <a-form-item label="排序" field="sort">
+          <a-input-number
+            v-model="form.sort"
+            placeholder="请输入排序"
+            :min="1"
+            mode="button"
+          />
+        </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
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
 <style scoped lang="less">
   :deep(.vc-color-wrap) {
     margin-right: -3px;
diff --git a/src/views/system/file/components/FileDetailModal/index.vue b/src/views/system/file/components/FileDetailModal/index.vue
index c3a93e0..f9f3ab6 100644
--- a/src/views/system/file/components/FileDetailModal/index.vue
+++ b/src/views/system/file/components/FileDetailModal/index.vue
@@ -1,35 +1,3 @@
-<template>
-  <a-modal
-    v-model:visible="visible"
-    :title="title"
-    title-align="start"
-    width="90%"
-    modal-animation-name="el-fade"
-    :footer="false"
-    :modal-style="{ maxWidth: '300px' }"
-    @close="cancel"
-  >
-    <a-row justify="center" align="center">
-      <div style="height: 100px">
-        <FileImg :data="fileInfo" style="border-radius: 5px"></FileImg>
-      </div>
-    </a-row>
-    <a-row style="margin-top: 15px">
-      <a-descriptions :column="1" title="详细信息" layout="inline-vertical">
-        <a-descriptions-item :label="title">{{
-          formatFileSize(fileInfo.size)
-        }}</a-descriptions-item>
-        <a-descriptions-item label="创建时间">{{
-          fileInfo.createTime
-        }}</a-descriptions-item>
-        <a-descriptions-item label="修改时间">{{
-          fileInfo.updateTime
-        }}</a-descriptions-item>
-      </a-descriptions>
-    </a-row>
-  </a-modal>
-</template>
-
 <script setup lang="ts">
   import { FileItem } from '@/api/system/file';
   import FileImg from '../../main/FileMain/FileImg.vue';
@@ -65,6 +33,38 @@
   };
 </script>
 
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="title"
+    title-align="start"
+    width="90%"
+    modal-animation-name="el-fade"
+    :footer="false"
+    :modal-style="{ maxWidth: '300px' }"
+    @close="cancel"
+  >
+    <a-row justify="center" align="center">
+      <div style="height: 100px">
+        <FileImg :data="fileInfo" style="border-radius: 5px"></FileImg>
+      </div>
+    </a-row>
+    <a-row style="margin-top: 15px">
+      <a-descriptions :column="1" title="详细信息" layout="inline-vertical">
+        <a-descriptions-item :label="title">{{
+          formatFileSize(fileInfo.size)
+        }}</a-descriptions-item>
+        <a-descriptions-item label="创建时间">{{
+          fileInfo.createTime
+        }}</a-descriptions-item>
+        <a-descriptions-item label="修改时间">{{
+          fileInfo.updateTime
+        }}</a-descriptions-item>
+      </a-descriptions>
+    </a-row>
+  </a-modal>
+</template>
+
 <style lang="less" scoped>
   .label {
     color: var(--color-text-2);
diff --git a/src/views/system/file/components/FileRenameModal/index.vue b/src/views/system/file/components/FileRenameModal/index.vue
index 53deb6d..bd947aa 100644
--- a/src/views/system/file/components/FileRenameModal/index.vue
+++ b/src/views/system/file/components/FileRenameModal/index.vue
@@ -1,32 +1,3 @@
-<template>
-  <a-modal
-    v-model:visible="visible"
-    title="重命名"
-    width="90%"
-    modal-animation-name="el-fade"
-    :modal-style="{ maxWidth: '500px' }"
-    @close="cancel"
-    @before-ok="save"
-  >
-    <a-row justify="center" align="center">
-      <a-form
-        ref="FormRef"
-        :model="form"
-        auto-label-width
-        :style="{ width: '80%' }"
-      >
-        <a-form-item
-          field="name"
-          label="文件名称"
-          :rules="[{ required: true, message: '请输入文件名称' }]"
-        >
-          <a-input v-model="form.name" placeholder="请输入文件名称" allow-clear />
-        </a-form-item>
-      </a-form>
-    </a-row>
-  </a-modal>
-</template>
-
 <script setup lang="ts">
   import type { FormInstance, Modal } from '@arco-design/web-vue';
   import { FileItem, update } from '@/api/system/file';
@@ -65,6 +36,35 @@
   };
 </script>
 
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="重命名"
+    width="90%"
+    modal-animation-name="el-fade"
+    :modal-style="{ maxWidth: '500px' }"
+    @close="cancel"
+    @before-ok="save"
+  >
+    <a-row justify="center" align="center">
+      <a-form
+        ref="FormRef"
+        :model="form"
+        auto-label-width
+        :style="{ width: '80%' }"
+      >
+        <a-form-item
+          field="name"
+          label="文件名称"
+          :rules="[{ required: true, message: '请输入文件名称' }]"
+        >
+          <a-input v-model="form.name" placeholder="请输入文件名称" allow-clear />
+        </a-form-item>
+      </a-form>
+    </a-row>
+  </a-modal>
+</template>
+
 <style lang="less" scoped>
   .label {
     color: var(--color-text-2);
diff --git a/src/views/system/file/components/PreviewAudioModal/index.vue b/src/views/system/file/components/PreviewAudioModal/index.vue
index 555dd20..2753904 100644
--- a/src/views/system/file/components/PreviewAudioModal/index.vue
+++ b/src/views/system/file/components/PreviewAudioModal/index.vue
@@ -1,31 +1,3 @@
-<template>
-  <transition name="slide-dynamic-origin">
-    <div
-      v-show="visible"
-      ref="audioRef"
-      class="audio-preview-wrapper"
-      :style="audioStyle"
-    >
-      <section style="padding: 10px 14px 14px 14px">
-        <div ref="audioHeadRef" class="head">
-          <div class="name">
-            <icon-music :size="16" spin />
-            <span
-              >{{ props.fileInfo?.name }}.{{ props.fileInfo?.extension }}</span
-            >
-          </div>
-          <div class="close-icon" @click="close">
-            <icon-close :size="12" />
-          </div>
-        </div>
-
-        <!-- 音频组件 -->
-        <audio class="audio" :src="audioSrc" controls autoplay></audio>
-      </section>
-    </div>
-  </transition>
-</template>
-
 <script setup lang="ts">
   import { useDraggable, useWindowSize, useElementSize } from '@vueuse/core';
   import type { FileItem } from '@/api/system/file';
@@ -89,6 +61,34 @@
   };
 </script>
 
+<template>
+  <transition name="slide-dynamic-origin">
+    <div
+      v-show="visible"
+      ref="audioRef"
+      class="audio-preview-wrapper"
+      :style="audioStyle"
+    >
+      <section style="padding: 10px 14px 14px 14px">
+        <div ref="audioHeadRef" class="head">
+          <div class="name">
+            <icon-music :size="16" spin />
+            <span
+              >{{ props.fileInfo?.name }}.{{ props.fileInfo?.extension }}</span
+            >
+          </div>
+          <div class="close-icon" @click="close">
+            <icon-close :size="12" />
+          </div>
+        </div>
+
+        <!-- 音频组件 -->
+        <audio class="audio" :src="audioSrc" controls autoplay></audio>
+      </section>
+    </div>
+  </transition>
+</template>
+
 <style lang="less" scoped>
   .audio-preview-wrapper {
     width: 300px;
diff --git a/src/views/system/file/components/PreviewVideoModal/index.vue b/src/views/system/file/components/PreviewVideoModal/index.vue
index 46444f4..1233655 100644
--- a/src/views/system/file/components/PreviewVideoModal/index.vue
+++ b/src/views/system/file/components/PreviewVideoModal/index.vue
@@ -1,16 +1,3 @@
-<template>
-  <a-modal
-    v-model:visible="visible"
-    :title="title"
-    width="auto"
-    :footer="false"
-    draggable
-    @close="close"
-  >
-    <div id="videoId"></div>
-  </a-modal>
-</template>
-
 <script setup lang="ts">
   import Player from 'xgplayer';
   import type { FileItem } from '@/api/system/file';
@@ -46,3 +33,16 @@
     props.onClose();
   };
 </script>
+
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="title"
+    width="auto"
+    :footer="false"
+    draggable
+    @close="close"
+  >
+    <div id="videoId"></div>
+  </a-modal>
+</template>
diff --git a/src/views/system/file/index.vue b/src/views/system/file/index.vue
index e7554b9..c35ee3c 100644
--- a/src/views/system/file/index.vue
+++ b/src/views/system/file/index.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+  import FileAside from './main/FileAside.vue';
+  import FileMain from './main/FileMain/index.vue';
+
+  defineOptions({ name: 'FileIndex' });
+</script>
+
 <template>
   <div>
     <Breadcrumb :items="['menu.system', 'menu.system.file.list']" />
@@ -30,13 +37,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-  import FileAside from './main/FileAside.vue';
-  import FileMain from './main/FileMain/index.vue';
-
-  defineOptions({ name: 'FileIndex' });
-</script>
-
 <style lang="less" scoped>
   .container-breadcrumb {
     margin-left: 16px;
diff --git a/src/views/system/file/main/FileAside.vue b/src/views/system/file/main/FileAside.vue
index 1fde846..79b77db 100644
--- a/src/views/system/file/main/FileAside.vue
+++ b/src/views/system/file/main/FileAside.vue
@@ -1,3 +1,30 @@
+<script setup lang="ts">
+  import { fileTypeList, type fileTypeListItem } from '@/constant/file';
+
+  const route = useRoute();
+  const router = useRouter();
+
+  const selectedKey = ref('0');
+
+  // 监听路由变化
+  watch(
+    () => route.query,
+    () => {
+      if (route.query.type) {
+        selectedKey.value = route.query.type as string;
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  // 点击事件
+  const onClickItem = (item: fileTypeListItem) => {
+    router.push({ name: 'File', query: { type: item.value } });
+  };
+</script>
+
 <template>
   <div>
     <a-card
@@ -30,33 +57,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-  import { fileTypeList, type fileTypeListItem } from '@/constant/file';
-
-  const route = useRoute();
-  const router = useRouter();
-
-  const selectedKey = ref('0');
-
-  // 监听路由变化
-  watch(
-    () => route.query,
-    () => {
-      if (route.query.type) {
-        selectedKey.value = route.query.type as string;
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  // 点击事件
-  const onClickItem = (item: fileTypeListItem) => {
-    router.push({ name: 'File', query: { type: item.value } });
-  };
-</script>
-
 <style lang="less" scoped>
   :deep(.arco-card) {
     .arco-card-header {
diff --git a/src/views/system/file/main/FileMain/FileGrid.vue b/src/views/system/file/main/FileMain/FileGrid.vue
index be9e212..eee8e27 100644
--- a/src/views/system/file/main/FileMain/FileGrid.vue
+++ b/src/views/system/file/main/FileMain/FileGrid.vue
@@ -1,3 +1,43 @@
+<script setup lang="ts">
+  import type { FileItem } from '@/api/system/file';
+  import FileImg from './FileImg.vue';
+  import FileRightMenu from './FileRightMenu.vue';
+
+  interface Props {
+    data?: FileItem[];
+    selectedFileIds?: string[];
+    isBatchMode?: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    data: () => [], // 文件数据
+    selectedFileIds: () => [], // 批量模式下选中的文件id数组
+    isBatchMode: false, // 是否是批量模式
+  });
+
+  const emit = defineEmits(['click', 'check', 'rightMenuClick']);
+
+  // 文件名称带后缀
+  const getFileName = (item: FileItem) => {
+    return `${item.name}${item.extension ? `.${item.extension}` : ''}`;
+  };
+
+  // 点击事件
+  const handleClickFile = (item: FileItem) => {
+    emit('click', item);
+  };
+
+  // 选中事件
+  const handleCheckFile = (item: FileItem) => {
+    emit('check', item);
+  };
+
+  // 右键菜单点击事件
+  const handleRightMenuItemClick = (mode: string, item: FileItem) => {
+    emit('rightMenuClick', mode, item);
+  };
+</script>
+
 <template>
   <div class="file-grid">
     <a-grid
@@ -50,46 +90,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-  import type { FileItem } from '@/api/system/file';
-  import FileImg from './FileImg.vue';
-  import FileRightMenu from './FileRightMenu.vue';
-
-  interface Props {
-    data?: FileItem[];
-    selectedFileIds?: string[];
-    isBatchMode?: boolean;
-  }
-
-  const props = withDefaults(defineProps<Props>(), {
-    data: () => [], // 文件数据
-    selectedFileIds: () => [], // 批量模式下选中的文件id数组
-    isBatchMode: false, // 是否是批量模式
-  });
-
-  const emit = defineEmits(['click', 'check', 'rightMenuClick']);
-
-  // 文件名称带后缀
-  const getFileName = (item: FileItem) => {
-    return `${item.name}${item.extension ? `.${item.extension}` : ''}`;
-  };
-
-  // 点击事件
-  const handleClickFile = (item: FileItem) => {
-    emit('click', item);
-  };
-
-  // 选中事件
-  const handleCheckFile = (item: FileItem) => {
-    emit('check', item);
-  };
-
-  // 右键菜单点击事件
-  const handleRightMenuItemClick = (mode: string, item: FileItem) => {
-    emit('rightMenuClick', mode, item);
-  };
-</script>
-
 <style lang="less" scoped>
   .file-grid {
     flex: 1;
diff --git a/src/views/system/file/main/FileMain/FileImg.vue b/src/views/system/file/main/FileMain/FileImg.vue
index 17a3e6f..faf77f5 100644
--- a/src/views/system/file/main/FileMain/FileImg.vue
+++ b/src/views/system/file/main/FileMain/FileImg.vue
@@ -1,8 +1,3 @@
-<template>
-  <img v-if="isImage" class="img" :src="props.data.url || ''" alt="" />
-  <SvgIcon v-else :icon-class="getFileImg" style="height: 100%; width: 100%" />
-</template>
-
 <script setup lang="ts">
   import { fileExtendNameIconMap, imageTypeList } from '@/constant/file';
   import type { FileItem } from '@/api/system/file';
@@ -35,6 +30,11 @@
   });
 </script>
 
+<template>
+  <img v-if="isImage" class="img" :src="props.data.url || ''" alt="" />
+  <SvgIcon v-else :icon-class="getFileImg" style="height: 100%; width: 100%" />
+</template>
+
 <style lang="less" scoped>
   img {
     width: 100%;
diff --git a/src/views/system/file/main/FileMain/FileList.vue b/src/views/system/file/main/FileMain/FileList.vue
index fbdc1a5..ae9b8bf 100644
--- a/src/views/system/file/main/FileMain/FileList.vue
+++ b/src/views/system/file/main/FileMain/FileList.vue
@@ -1,3 +1,37 @@
+<script setup lang="ts">
+  import type { TableRowSelection } from '@arco-design/web-vue';
+  import type { FileItem } from '@/api/system/file';
+  import FileImg from './FileImg.vue';
+  import FileRightMenu from './FileRightMenu.vue';
+
+  interface Props {
+    data?: FileItem[];
+    isBatchMode?: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    data: () => [], // 文件数据
+    isBatchMode: false, // 是否是批量模式
+  });
+
+  const rowSelection: TableRowSelection = reactive({
+    type: 'checkbox',
+    showCheckedAll: true,
+  });
+
+  const emit = defineEmits(['click', 'rightMenuClick']);
+
+  // 行点击事件
+  const handleRowClick = (row: FileItem) => {
+    emit('click', row);
+  };
+
+  // 右键菜单点击事件
+  const handleRightMenuItemClick = (mode: string, item: FileItem) => {
+    emit('rightMenuClick', mode, item);
+  };
+</script>
+
 <template>
   <div class="file-list">
     <a-table
@@ -69,40 +103,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-  import type { TableRowSelection } from '@arco-design/web-vue';
-  import type { FileItem } from '@/api/system/file';
-  import FileImg from './FileImg.vue';
-  import FileRightMenu from './FileRightMenu.vue';
-
-  interface Props {
-    data?: FileItem[];
-    isBatchMode?: boolean;
-  }
-
-  const props = withDefaults(defineProps<Props>(), {
-    data: () => [], // 文件数据
-    isBatchMode: false, // 是否是批量模式
-  });
-
-  const rowSelection: TableRowSelection = reactive({
-    type: 'checkbox',
-    showCheckedAll: true,
-  });
-
-  const emit = defineEmits(['click', 'rightMenuClick']);
-
-  // 行点击事件
-  const handleRowClick = (row: FileItem) => {
-    emit('click', row);
-  };
-
-  // 右键菜单点击事件
-  const handleRightMenuItemClick = (mode: string, item: FileItem) => {
-    emit('rightMenuClick', mode, item);
-  };
-</script>
-
 <style lang="scss">
   .more-option {
     .arco-popover-content {
diff --git a/src/views/system/file/main/FileMain/FileRightMenu.vue b/src/views/system/file/main/FileMain/FileRightMenu.vue
index a57a695..f017979 100644
--- a/src/views/system/file/main/FileMain/FileRightMenu.vue
+++ b/src/views/system/file/main/FileMain/FileRightMenu.vue
@@ -1,3 +1,22 @@
+<script setup lang="ts">
+  import GiOption from '@/components/gi-option/index.vue';
+  import GiOptionItem from '@/components/gi-option-item/index.vue';
+
+  interface Props {
+    showClassStyle?: boolean;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    showClassStyle: true,
+  });
+
+  const emit = defineEmits(['click']);
+
+  const onClickItem = (mode: string) => {
+    emit('click', mode);
+  };
+</script>
+
 <template>
   <GiOption :class="{ option: showClassStyle }">
     <GiOptionItem v-permission="['system:file:update']" @click="onClickItem('rename')">
@@ -19,25 +38,6 @@
   </GiOption>
 </template>
 
-<script setup lang="ts">
-  import GiOption from '@/components/gi-option/index.vue';
-  import GiOptionItem from '@/components/gi-option-item/index.vue';
-
-  interface Props {
-    showClassStyle?: boolean;
-  }
-
-  withDefaults(defineProps<Props>(), {
-    showClassStyle: true,
-  });
-
-  const emit = defineEmits(['click']);
-
-  const onClickItem = (mode: string) => {
-    emit('click', mode);
-  };
-</script>
-
 <style lang="less" scoped>
   .option {
     box-shadow:
diff --git a/src/views/system/file/main/FileMain/index.vue b/src/views/system/file/main/FileMain/index.vue
index 0c97853..63a4403 100644
--- a/src/views/system/file/main/FileMain/index.vue
+++ b/src/views/system/file/main/FileMain/index.vue
@@ -1,391 +1,3 @@
-<template>
-  <div class="file-main">
-    <a-row justify="space-between" class="row-operate">
-      <!-- 左侧区域 -->
-      <a-space wrap>
-        <a-form ref="queryRef" :model="queryParams" layout="inline">
-          <a-form-item hide-label>
-            <a-upload
-              v-permission="['system:file:upload']"
-              :show-file-list="false"
-              :custom-request="handleUpload"
-            >
-              <template #upload-button>
-                <a-button type="primary" shape="round">
-                  <template #icon><icon-upload /></template>
-                  <template #default>上传</template>
-                </a-button>
-              </template>
-            </a-upload>
-          </a-form-item>
-          <a-form-item field="name" hide-label>
-            <a-input
-              v-model="queryParams.name"
-              placeholder="输入文件名称搜索"
-              allow-clear
-              @press-enter="handleQuery"
-            />
-          </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>
-      </a-space>
-
-      <!-- 右侧区域 -->
-      <a-space wrap>
-        <a-button
-          v-if="isBatchMode"
-          :disabled="!fileStore.selectedFileIds.length"
-          type="primary"
-          status="danger"
-          @click="handleMulDelete"
-          ><template #icon><icon-delete /></template
-        ></a-button>
-        <a-button
-          v-permission="['system:file:delete']"
-          type="primary"
-          @click="isBatchMode = !isBatchMode"
-        >
-          <template #icon><icon-select-all /></template>
-          <template #default>{{
-            isBatchMode ? '取消批量' : '批量操作'
-          }}</template>
-        </a-button>
-        <a-button-group>
-          <a-tooltip content="视图" position="bottom">
-            <a-button @click="fileStore.changeViewMode">
-              <template #icon>
-                <icon-apps v-if="fileStore.viewMode === 'grid'" />
-                <icon-list v-else />
-              </template>
-            </a-button>
-          </a-tooltip>
-          <a-tooltip content="配置存储库" position="bottom">
-            <a-button
-              v-permission="['system:storage:list']"
-              @click="handleConfig"
-            >
-              <template #icon>
-                <icon-settings />
-              </template>
-            </a-button>
-          </a-tooltip>
-        </a-button-group>
-      </a-space>
-    </a-row>
-
-    <!-- 文件列表-宫格模式 -->
-    <a-spin class="file-wrap" :loading="loading">
-      <FileGrid
-        v-show="fileList.length && fileStore.viewMode == 'grid'"
-        :data="fileList"
-        :is-batch-mode="isBatchMode"
-        :selected-file-ids="fileStore.selectedFileIds"
-        @click="handleClickFile"
-        @check="handleCheckFile"
-        @right-menu-click="handleRightMenuClick"
-      ></FileGrid>
-
-      <!-- 文件列表-列表模式 -->
-      <FileList
-        v-show="fileList.length && fileStore.viewMode == 'list'"
-        :data="fileList"
-        :is-batch-mode="isBatchMode"
-        @click="handleClickFile"
-        @right-menu-click="handleRightMenuClick"
-      ></FileList>
-
-      <a-empty v-show="!fileList.length"></a-empty>
-    </a-spin>
-
-    <!-- 配置存储库 -->
-    <a-drawer
-      title="配置存储库"
-      :visible="storageVisible"
-      :width="1070"
-      :mask-closable="false"
-      :esc-to-close="false"
-      unmount-on-close
-      render-to-body
-      :footer="false"
-      @cancel="handleCancelConfig"
-    >
-      <!-- 操作栏 -->
-      <div class="header-operation" style="margin-bottom: 16px">
-        <a-row>
-          <a-col :span="12">
-            <a-space>
-              <a-button
-                v-permission="['system:storage:add']"
-                type="primary"
-                @click="toAddStorage"
-              >
-                <template #icon><icon-plus /></template>新增
-              </a-button>
-              <a-button
-                v-permission="['system:storage:export']"
-                :loading="exportStorageLoading"
-                type="primary"
-                status="warning"
-                @click="handleStorageExport"
-              >
-                <template #icon><icon-download /></template>导出
-              </a-button>
-            </a-space>
-          </a-col>
-        </a-row>
-      </div>
-      <a-table
-        row-key="id"
-        :data="storageList"
-        :loading="storageLoading"
-        :bordered="false"
-        :pagination="{
-          showTotal: true,
-          showPageSize: true,
-          total: totalStorage,
-          current: storageQueryParams.page,
-        }"
-        size="large"
-        column-resizable
-        stripe
-        @page-change="handleStoragePageChange"
-        @page-size-change="handleStoragePageSizeChange"
-      >
-        <template #columns>
-          <a-table-column title="名称" :width="135">
-            <template #cell="{ record }">
-              {{ record.name }}
-              <a-tag v-if="record.isDefault" color="arcoblue">默认</a-tag>
-            </template>
-          </a-table-column>
-          <a-table-column title="编码" data-index="code" />
-          <a-table-column title="类型" align="center">
-            <template #cell="{ record }">
-              <dict-tag :value="record.type" :dict="storage_type_enum" />
-            </template>
-          </a-table-column>
-          <a-table-column
-            title="访问密钥"
-            data-index="accessKey"
-            ellipsis
-            tooltip
-          />
-          <a-table-column
-            title="终端节点"
-            data-index="endpoint"
-            ellipsis
-            tooltip
-          />
-          <a-table-column
-            title="桶名称"
-            data-index="bucketName"
-            ellipsis
-            tooltip
-          />
-          <a-table-column title="域名" data-index="domain" ellipsis tooltip />
-          <a-table-column title="状态" align="center">
-            <template #cell="{ record }">
-              <a-switch
-                v-model="record.status"
-                :checked-value="1"
-                :unchecked-value="2"
-                :disabled="!checkPermission(['system:storage:update'])"
-                @change="handleStorageChangeStatus(record)"
-              />
-            </template>
-          </a-table-column>
-          <a-table-column
-            title="描述"
-            data-index="description"
-            ellipsis
-            tooltip
-          />
-          <a-table-column
-            v-if="
-              checkPermission([
-                'system:storage:update',
-                'system:storage:delete',
-              ])
-            "
-            title="操作"
-            align="center"
-            fixed="right"
-            :width="90"
-          >
-            <template #cell="{ record }">
-              <a-button
-                v-permission="['system:storage:update']"
-                type="text"
-                size="small"
-                title="修改"
-                @click="toUpdateStorage(record.id)"
-              >
-                <template #icon><icon-edit /></template>
-              </a-button>
-              <a-popconfirm
-                content="是否确定删除该数据？"
-                type="warning"
-                @ok="handleDeleteStorage([record.id])"
-              >
-                <a-button
-                  v-permission="['system:storage:delete']"
-                  type="text"
-                  size="small"
-                  :title="record.isDefault ? '默认存储库不能删除' : '删除'"
-                  :disabled="record.disabled"
-                >
-                  <template #icon><icon-delete /></template>
-                </a-button>
-              </a-popconfirm>
-            </template>
-          </a-table-column>
-        </template>
-      </a-table>
-    </a-drawer>
-    <!-- 表单区域 -->
-    <a-modal
-      :title="storageFormTitle"
-      :visible="storageFormVisible"
-      :width="580"
-      :mask-closable="false"
-      :esc-to-close="false"
-      unmount-on-close
-      render-to-body
-      @ok="handleStorageFormOk"
-      @cancel="handleStorageFormCancel"
-    >
-      <a-form
-        ref="storageFormRef"
-        :model="storageForm"
-        :rules="storageRules"
-        size="large"
-        :label-col-style="{ width: '84px' }"
-        layout="inline"
-      >
-        <a-form-item label="名称" field="name">
-          <a-input
-            v-model="storageForm.name"
-            placeholder="请输入名称"
-            style="width: 162px"
-          />
-        </a-form-item>
-        <a-form-item label="编码" field="code">
-          <a-input
-            v-model="storageForm.code"
-            placeholder="请输入编码"
-            style="width: 162px"
-          />
-        </a-form-item>
-        <a-form-item label="类型" field="type">
-          <a-select
-            v-model="storageForm.type"
-            :options="storage_type_enum"
-            placeholder="请选择存储类型"
-            style="width: 416px"
-          />
-        </a-form-item>
-        <a-form-item
-          v-if="storageForm.type === 1"
-          label="访问密钥"
-          field="accessKey"
-        >
-          <a-input
-            v-model="storageForm.accessKey"
-            placeholder="请输入访问密钥"
-            style="width: 416px"
-          />
-        </a-form-item>
-        <a-form-item
-          v-if="storageForm.type === 1"
-          label="私有密钥"
-          field="secretKey"
-        >
-          <a-input
-            v-model="storageForm.secretKey"
-            placeholder="请输入私有密钥"
-            style="width: 416px"
-          />
-        </a-form-item>
-        <a-form-item
-          v-if="storageForm.type === 1"
-          label="终端节点"
-          field="endpoint"
-        >
-          <a-input
-            v-model="storageForm.endpoint"
-            placeholder="请输入终端节点"
-            style="width: 416px"
-          />
-        </a-form-item>
-        <a-form-item label="桶名称" field="bucketName">
-          <a-input
-            v-model="storageForm.bucketName"
-            placeholder="请输入桶名称"
-            style="width: 416px"
-          />
-        </a-form-item>
-        <a-form-item v-if="storageForm.type === 1" label="域名" field="domain">
-          <a-input
-            v-model="storageForm.domain"
-            placeholder="请输入域名"
-            style="width: 416px"
-          />
-        </a-form-item>
-        <a-form-item
-          v-if="storageForm.type === 2"
-          label="域名"
-          field="domain"
-          :rules="[
-            {
-              required: true,
-              message: '请输入域名',
-            },
-          ]"
-        >
-          <a-input
-            v-model="storageForm.domain"
-            placeholder="请输入域名"
-            style="width: 416px"
-          />
-        </a-form-item>
-        <a-form-item label="排序" field="sort">
-          <a-input-number
-            v-model="storageForm.sort"
-            placeholder="请输入排序"
-            style="width: 416px"
-            :min="1"
-            mode="button"
-          />
-        </a-form-item>
-        <a-form-item label="描述" field="description">
-          <a-textarea
-            v-model="storageForm.description"
-            :max-length="200"
-            placeholder="请输入描述"
-            style="width: 416px"
-            :auto-size="{
-              minRows: 3,
-            }"
-            show-word-limit
-          />
-        </a-form-item>
-        <a-form-item label="默认存储" field="isDefault">
-          <a-switch v-model="storageForm.isDefault" type="round" />
-        </a-form-item>
-      </a-form>
-    </a-modal>
-  </div>
-</template>
-
 <script setup lang="ts">
   import { Modal, RequestOption } from '@arco-design/web-vue';
   import checkPermission from '@/utils/permission';
@@ -776,6 +388,394 @@
   };
 </script>
 
+<template>
+  <div class="file-main">
+    <a-row justify="space-between" class="row-operate">
+      <!-- 左侧区域 -->
+      <a-space wrap>
+        <a-form ref="queryRef" :model="queryParams" layout="inline">
+          <a-form-item hide-label>
+            <a-upload
+              v-permission="['system:file:upload']"
+              :show-file-list="false"
+              :custom-request="handleUpload"
+            >
+              <template #upload-button>
+                <a-button type="primary" shape="round">
+                  <template #icon><icon-upload /></template>
+                  <template #default>上传</template>
+                </a-button>
+              </template>
+            </a-upload>
+          </a-form-item>
+          <a-form-item field="name" hide-label>
+            <a-input
+              v-model="queryParams.name"
+              placeholder="输入文件名称搜索"
+              allow-clear
+              @press-enter="handleQuery"
+            />
+          </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>
+      </a-space>
+
+      <!-- 右侧区域 -->
+      <a-space wrap>
+        <a-button
+          v-if="isBatchMode"
+          :disabled="!fileStore.selectedFileIds.length"
+          type="primary"
+          status="danger"
+          @click="handleMulDelete"
+          ><template #icon><icon-delete /></template
+        ></a-button>
+        <a-button
+          v-permission="['system:file:delete']"
+          type="primary"
+          @click="isBatchMode = !isBatchMode"
+        >
+          <template #icon><icon-select-all /></template>
+          <template #default>{{
+            isBatchMode ? '取消批量' : '批量操作'
+          }}</template>
+        </a-button>
+        <a-button-group>
+          <a-tooltip content="视图" position="bottom">
+            <a-button @click="fileStore.changeViewMode">
+              <template #icon>
+                <icon-apps v-if="fileStore.viewMode === 'grid'" />
+                <icon-list v-else />
+              </template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip content="配置存储库" position="bottom">
+            <a-button
+              v-permission="['system:storage:list']"
+              @click="handleConfig"
+            >
+              <template #icon>
+                <icon-settings />
+              </template>
+            </a-button>
+          </a-tooltip>
+        </a-button-group>
+      </a-space>
+    </a-row>
+
+    <!-- 文件列表-宫格模式 -->
+    <a-spin class="file-wrap" :loading="loading">
+      <FileGrid
+        v-show="fileList.length && fileStore.viewMode == 'grid'"
+        :data="fileList"
+        :is-batch-mode="isBatchMode"
+        :selected-file-ids="fileStore.selectedFileIds"
+        @click="handleClickFile"
+        @check="handleCheckFile"
+        @right-menu-click="handleRightMenuClick"
+      ></FileGrid>
+
+      <!-- 文件列表-列表模式 -->
+      <FileList
+        v-show="fileList.length && fileStore.viewMode == 'list'"
+        :data="fileList"
+        :is-batch-mode="isBatchMode"
+        @click="handleClickFile"
+        @right-menu-click="handleRightMenuClick"
+      ></FileList>
+
+      <a-empty v-show="!fileList.length"></a-empty>
+    </a-spin>
+
+    <!-- 配置存储库 -->
+    <a-drawer
+      title="配置存储库"
+      :visible="storageVisible"
+      :width="1070"
+      :mask-closable="false"
+      :esc-to-close="false"
+      unmount-on-close
+      render-to-body
+      :footer="false"
+      @cancel="handleCancelConfig"
+    >
+      <!-- 操作栏 -->
+      <div class="header-operation" style="margin-bottom: 16px">
+        <a-row>
+          <a-col :span="12">
+            <a-space>
+              <a-button
+                v-permission="['system:storage:add']"
+                type="primary"
+                @click="toAddStorage"
+              >
+                <template #icon><icon-plus /></template>新增
+              </a-button>
+              <a-button
+                v-permission="['system:storage:export']"
+                :loading="exportStorageLoading"
+                type="primary"
+                status="warning"
+                @click="handleStorageExport"
+              >
+                <template #icon><icon-download /></template>导出
+              </a-button>
+            </a-space>
+          </a-col>
+        </a-row>
+      </div>
+      <a-table
+        row-key="id"
+        :data="storageList"
+        :loading="storageLoading"
+        :bordered="false"
+        :pagination="{
+          showTotal: true,
+          showPageSize: true,
+          total: totalStorage,
+          current: storageQueryParams.page,
+        }"
+        size="large"
+        column-resizable
+        stripe
+        @page-change="handleStoragePageChange"
+        @page-size-change="handleStoragePageSizeChange"
+      >
+        <template #columns>
+          <a-table-column title="名称" :width="135">
+            <template #cell="{ record }">
+              {{ record.name }}
+              <a-tag v-if="record.isDefault" color="arcoblue">默认</a-tag>
+            </template>
+          </a-table-column>
+          <a-table-column title="编码" data-index="code" />
+          <a-table-column title="类型" align="center">
+            <template #cell="{ record }">
+              <dict-tag :value="record.type" :dict="storage_type_enum" />
+            </template>
+          </a-table-column>
+          <a-table-column
+            title="访问密钥"
+            data-index="accessKey"
+            ellipsis
+            tooltip
+          />
+          <a-table-column
+            title="终端节点"
+            data-index="endpoint"
+            ellipsis
+            tooltip
+          />
+          <a-table-column
+            title="桶名称"
+            data-index="bucketName"
+            ellipsis
+            tooltip
+          />
+          <a-table-column title="域名" data-index="domain" ellipsis tooltip />
+          <a-table-column title="状态" align="center">
+            <template #cell="{ record }">
+              <a-switch
+                v-model="record.status"
+                :checked-value="1"
+                :unchecked-value="2"
+                :disabled="!checkPermission(['system:storage:update'])"
+                @change="handleStorageChangeStatus(record)"
+              />
+            </template>
+          </a-table-column>
+          <a-table-column
+            title="描述"
+            data-index="description"
+            ellipsis
+            tooltip
+          />
+          <a-table-column
+            v-if="
+              checkPermission([
+                'system:storage:update',
+                'system:storage:delete',
+              ])
+            "
+            title="操作"
+            align="center"
+            fixed="right"
+            :width="90"
+          >
+            <template #cell="{ record }">
+              <a-button
+                v-permission="['system:storage:update']"
+                type="text"
+                size="small"
+                title="修改"
+                @click="toUpdateStorage(record.id)"
+              >
+                <template #icon><icon-edit /></template>
+              </a-button>
+              <a-popconfirm
+                content="是否确定删除该数据？"
+                type="warning"
+                @ok="handleDeleteStorage([record.id])"
+              >
+                <a-button
+                  v-permission="['system:storage:delete']"
+                  type="text"
+                  size="small"
+                  :title="record.isDefault ? '默认存储库不能删除' : '删除'"
+                  :disabled="record.disabled"
+                >
+                  <template #icon><icon-delete /></template>
+                </a-button>
+              </a-popconfirm>
+            </template>
+          </a-table-column>
+        </template>
+      </a-table>
+    </a-drawer>
+    <!-- 表单区域 -->
+    <a-modal
+      :title="storageFormTitle"
+      :visible="storageFormVisible"
+      :width="580"
+      :mask-closable="false"
+      :esc-to-close="false"
+      unmount-on-close
+      render-to-body
+      @ok="handleStorageFormOk"
+      @cancel="handleStorageFormCancel"
+    >
+      <a-form
+        ref="storageFormRef"
+        :model="storageForm"
+        :rules="storageRules"
+        size="large"
+        :label-col-style="{ width: '84px' }"
+        layout="inline"
+      >
+        <a-form-item label="名称" field="name">
+          <a-input
+            v-model="storageForm.name"
+            placeholder="请输入名称"
+            style="width: 162px"
+          />
+        </a-form-item>
+        <a-form-item label="编码" field="code">
+          <a-input
+            v-model="storageForm.code"
+            placeholder="请输入编码"
+            style="width: 162px"
+          />
+        </a-form-item>
+        <a-form-item label="类型" field="type">
+          <a-select
+            v-model="storageForm.type"
+            :options="storage_type_enum"
+            placeholder="请选择存储类型"
+            style="width: 416px"
+          />
+        </a-form-item>
+        <a-form-item
+          v-if="storageForm.type === 1"
+          label="访问密钥"
+          field="accessKey"
+        >
+          <a-input
+            v-model="storageForm.accessKey"
+            placeholder="请输入访问密钥"
+            style="width: 416px"
+          />
+        </a-form-item>
+        <a-form-item
+          v-if="storageForm.type === 1"
+          label="私有密钥"
+          field="secretKey"
+        >
+          <a-input
+            v-model="storageForm.secretKey"
+            placeholder="请输入私有密钥"
+            style="width: 416px"
+          />
+        </a-form-item>
+        <a-form-item
+          v-if="storageForm.type === 1"
+          label="终端节点"
+          field="endpoint"
+        >
+          <a-input
+            v-model="storageForm.endpoint"
+            placeholder="请输入终端节点"
+            style="width: 416px"
+          />
+        </a-form-item>
+        <a-form-item label="桶名称" field="bucketName">
+          <a-input
+            v-model="storageForm.bucketName"
+            placeholder="请输入桶名称"
+            style="width: 416px"
+          />
+        </a-form-item>
+        <a-form-item v-if="storageForm.type === 1" label="域名" field="domain">
+          <a-input
+            v-model="storageForm.domain"
+            placeholder="请输入域名"
+            style="width: 416px"
+          />
+        </a-form-item>
+        <a-form-item
+          v-if="storageForm.type === 2"
+          label="域名"
+          field="domain"
+          :rules="[
+            {
+              required: true,
+              message: '请输入域名',
+            },
+          ]"
+        >
+          <a-input
+            v-model="storageForm.domain"
+            placeholder="请输入域名"
+            style="width: 416px"
+          />
+        </a-form-item>
+        <a-form-item label="排序" field="sort">
+          <a-input-number
+            v-model="storageForm.sort"
+            placeholder="请输入排序"
+            style="width: 416px"
+            :min="1"
+            mode="button"
+          />
+        </a-form-item>
+        <a-form-item label="描述" field="description">
+          <a-textarea
+            v-model="storageForm.description"
+            :max-length="200"
+            placeholder="请输入描述"
+            style="width: 416px"
+            :auto-size="{
+              minRows: 3,
+            }"
+            show-word-limit
+          />
+        </a-form-item>
+        <a-form-item label="默认存储" field="isDefault">
+          <a-switch v-model="storageForm.isDefault" type="round" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
 <style lang="less" scoped>
   .file-main {
     height: 100%;
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 25c1772..10d0a20 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,3 +1,317 @@
+<script lang="ts" setup>
+  import { TreeNodeData, TableData } from '@arco-design/web-vue';
+  import {
+    DataRecord,
+    ListParam,
+    list,
+    get,
+    add,
+    update,
+    del,
+  } from '@/api/system/menu';
+  import { listMenuTree } from '@/api/common';
+  import checkPermission from '@/utils/permission';
+
+  const { proxy } = getCurrentInstance() as any;
+  const { dis_enable_status_enum } = proxy.useDict('dis_enable_status_enum');
+
+  const dataList = ref<DataRecord[]>([]);
+  const ids = ref<Array<number>>([]);
+  const title = ref('');
+  const single = ref(true);
+  const multiple = ref(true);
+  const showQuery = ref(true);
+  const loading = ref(false);
+  const exportLoading = ref(false);
+  const expandAll = ref(false);
+  const visible = ref(false);
+  const showChooseIcon = ref(false);
+  const treeData = ref<TreeNodeData[]>();
+
+  const data = reactive({
+    // 查询参数
+    queryParams: {
+      title: undefined,
+      status: undefined,
+      sort: ['parentId,asc', 'sort,asc', 'createTime,desc'],
+    },
+    // 表单数据
+    form: {} as DataRecord,
+    // 表单验证规则
+    rules: {
+      title: [{ required: true, message: '请输入菜单标题' }],
+      path: [{ required: true, message: '请输入路由地址' }],
+      name: [{ required: true, message: '请输入组件名称' }],
+      component: [{ required: true, message: '请输入组件路径' }],
+      permission: [{ required: true, message: '请输入权限标识' }],
+      sort: [{ required: true, message: '请输入菜单排序' }],
+    },
+  });
+  const { queryParams, form, rules } = toRefs(data);
+
+  /**
+   * 查询列表
+   *
+   * @param params 查询参数
+   */
+  const getList = (params: ListParam = { ...queryParams.value }) => {
+    loading.value = true;
+    list(params)
+      .then((res) => {
+        dataList.value = res.data;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+  getList();
+
+  /**
+   * 打开新增对话框
+   */
+  const toAdd = () => {
+    reset();
+    listMenuTree({}).then((res) => {
+      treeData.value = res.data;
+    });
+    title.value = '新增菜单';
+    visible.value = true;
+  };
+
+  /**
+   * 打开修改对话框
+   *
+   * @param id ID
+   */
+  const toUpdate = (id: number) => {
+    reset();
+    listMenuTree({}).then((res) => {
+      treeData.value = res.data;
+    });
+
+    get(id).then((res) => {
+      form.value = res.data;
+      title.value = '修改菜单';
+      visible.value = true;
+    });
+  };
+
+  /**
+   * 重置表单
+   */
+  const reset = () => {
+    form.value = {
+      type: 1,
+      isExternal: false,
+      isCache: false,
+      isHidden: false,
+      sort: 999,
+    };
+    proxy.$refs.formRef?.resetFields();
+  };
+
+  /**
+   * 取消
+   */
+  const handleCancel = () => {
+    visible.value = false;
+    proxy.$refs.formRef.resetFields();
+  };
+
+  /**
+   * 确定
+   */
+  const handleOk = () => {
+    proxy.$refs.formRef.validate((valid: any) => {
+      if (!valid) {
+        if (form.value.id !== undefined) {
+          update(form.value, form.value.id).then((res) => {
+            handleCancel();
+            getList();
+            proxy.$message.success(res.msg);
+          });
+        } else {
+          add(form.value).then((res) => {
+            handleCancel();
+            getList();
+            proxy.$message.success(res.msg);
+          });
+        }
+      }
+    });
+  };
+
+  /**
+   * 批量删除
+   */
+  const handleBatchDelete = () => {
+    if (ids.value.length === 0) {
+      proxy.$message.info('请选择要删除的数据');
+    } else {
+      proxy.$modal.warning({
+        title: '警告',
+        titleAlign: 'start',
+        content:
+          '是否确定删除所选的数据？如果存在下级菜单则一并删除，此操作不能撤销！',
+        hideCancel: false,
+        onOk: () => {
+          handleDelete(ids.value);
+        },
+      });
+    }
+  };
+
+  /**
+   * 删除
+   *
+   * @param ids ID 列表
+   */
+  const handleDelete = (ids: Array<number>) => {
+    del(ids).then((res) => {
+      proxy.$message.success(res.msg);
+      getList();
+      proxy.$refs.tableRef.selectAll(false);
+    });
+  };
+
+  /**
+   * 点击行选择器
+   */
+  const handleSelect = (rowKeys: any, rowKey: any, record: TableData) => {
+    if (rowKeys.find((key: any) => key === rowKey)) {
+      if (record.children) {
+        record.children.forEach((r) => {
+          proxy.$refs.tableRef.select(r.id);
+          rowKeys.push(r.id);
+          if (r.children) {
+            handleSelect(rowKeys, rowKey, r);
+          }
+        });
+      }
+    } else if (record.children) {
+      record.children.forEach((r) => {
+        rowKeys.splice(
+          rowKeys.findIndex((key: number | undefined) => key === r.id),
+          1,
+        );
+        proxy.$refs.tableRef.select(r.id, false);
+        if (r.children) {
+          handleSelect(rowKeys, rowKey, r);
+        }
+      });
+    }
+  };
+
+  /**
+   * 已选择的数据行发生改变
+   *
+   * @param rowKeys ID 列表
+   */
+  const handleSelectionChange = (rowKeys: Array<any>) => {
+    ids.value = rowKeys;
+    single.value = rowKeys.length !== 1;
+    multiple.value = !rowKeys.length;
+  };
+
+  /**
+   * 导出
+   */
+  const handleExport = () => {
+    if (exportLoading.value) return;
+    exportLoading.value = true;
+    proxy
+      .download('/system/menu/export', { ...queryParams.value }, '菜单数据')
+      .finally(() => {
+        exportLoading.value = false;
+      });
+  };
+
+  /**
+   * 展开/折叠
+   */
+  const handleExpandAll = () => {
+    expandAll.value = !expandAll.value;
+    proxy.$refs.tableRef.expandAll(expandAll.value);
+  };
+
+  /**
+   * 修改状态
+   *
+   * @param record 记录信息
+   */
+  const handleChangeStatus = (record: DataRecord) => {
+    if (record.id) {
+      const tip = record.status === 1 ? '启用' : '禁用';
+      update(record, record.id)
+        .then(() => {
+          proxy.$message.success(`${tip}成功`);
+        })
+        .catch(() => {
+          record.status = record.status === 1 ? 2 : 1;
+        });
+    }
+  };
+
+  /**
+   * 过滤菜单树
+   *
+   * @param searchValue 搜索值
+   * @param nodeData 节点值
+   */
+  const filterMenuTree = (searchValue: string, nodeData: TreeNodeData) => {
+    if (nodeData.title) {
+      return (
+        nodeData.title.toLowerCase().indexOf(searchValue.toLowerCase()) > -1
+      );
+    }
+    return false;
+  };
+
+  /**
+   * 展示下拉图标
+   */
+  const showSelectIcon = () => {
+    proxy.$refs.iconSelectRef.reset();
+    showChooseIcon.value = true;
+  };
+
+  /**
+   * 选择图标
+   *
+   * @param name 图标名称
+   */
+  const selected = (name: string) => {
+    form.value.icon = name;
+    showChooseIcon.value = false;
+  };
+
+  const hideSelectIcon = () => {
+    showChooseIcon.value = false;
+  };
+
+  /**
+   * 查询
+   */
+  const handleQuery = () => {
+    getList();
+  };
+
+  /**
+   * 重置
+   */
+  const resetQuery = () => {
+    proxy.$refs.queryRef.resetFields();
+    handleQuery();
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    // eslint-disable-next-line vue/no-reserved-component-names
+    name: 'Menu',
+  };
+</script>
+
 <template>
   <div class="app-container">
     <Breadcrumb :items="['menu.system', 'menu.system.menu.list']" />
@@ -344,318 +658,4 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-  import { TreeNodeData, TableData } from '@arco-design/web-vue';
-  import {
-    DataRecord,
-    ListParam,
-    list,
-    get,
-    add,
-    update,
-    del,
-  } from '@/api/system/menu';
-  import { listMenuTree } from '@/api/common';
-  import checkPermission from '@/utils/permission';
-
-  const { proxy } = getCurrentInstance() as any;
-  const { dis_enable_status_enum } = proxy.useDict('dis_enable_status_enum');
-
-  const dataList = ref<DataRecord[]>([]);
-  const ids = ref<Array<number>>([]);
-  const title = ref('');
-  const single = ref(true);
-  const multiple = ref(true);
-  const showQuery = ref(true);
-  const loading = ref(false);
-  const exportLoading = ref(false);
-  const expandAll = ref(false);
-  const visible = ref(false);
-  const showChooseIcon = ref(false);
-  const treeData = ref<TreeNodeData[]>();
-
-  const data = reactive({
-    // 查询参数
-    queryParams: {
-      title: undefined,
-      status: undefined,
-      sort: ['parentId,asc', 'sort,asc', 'createTime,desc'],
-    },
-    // 表单数据
-    form: {} as DataRecord,
-    // 表单验证规则
-    rules: {
-      title: [{ required: true, message: '请输入菜单标题' }],
-      path: [{ required: true, message: '请输入路由地址' }],
-      name: [{ required: true, message: '请输入组件名称' }],
-      component: [{ required: true, message: '请输入组件路径' }],
-      permission: [{ required: true, message: '请输入权限标识' }],
-      sort: [{ required: true, message: '请输入菜单排序' }],
-    },
-  });
-  const { queryParams, form, rules } = toRefs(data);
-
-  /**
-   * 查询列表
-   *
-   * @param params 查询参数
-   */
-  const getList = (params: ListParam = { ...queryParams.value }) => {
-    loading.value = true;
-    list(params)
-      .then((res) => {
-        dataList.value = res.data;
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  };
-  getList();
-
-  /**
-   * 打开新增对话框
-   */
-  const toAdd = () => {
-    reset();
-    listMenuTree({}).then((res) => {
-      treeData.value = res.data;
-    });
-    title.value = '新增菜单';
-    visible.value = true;
-  };
-
-  /**
-   * 打开修改对话框
-   *
-   * @param id ID
-   */
-  const toUpdate = (id: number) => {
-    reset();
-    listMenuTree({}).then((res) => {
-      treeData.value = res.data;
-    });
-
-    get(id).then((res) => {
-      form.value = res.data;
-      title.value = '修改菜单';
-      visible.value = true;
-    });
-  };
-
-  /**
-   * 重置表单
-   */
-  const reset = () => {
-    form.value = {
-      type: 1,
-      isExternal: false,
-      isCache: false,
-      isHidden: false,
-      sort: 999,
-    };
-    proxy.$refs.formRef?.resetFields();
-  };
-
-  /**
-   * 取消
-   */
-  const handleCancel = () => {
-    visible.value = false;
-    proxy.$refs.formRef.resetFields();
-  };
-
-  /**
-   * 确定
-   */
-  const handleOk = () => {
-    proxy.$refs.formRef.validate((valid: any) => {
-      if (!valid) {
-        if (form.value.id !== undefined) {
-          update(form.value, form.value.id).then((res) => {
-            handleCancel();
-            getList();
-            proxy.$message.success(res.msg);
-          });
-        } else {
-          add(form.value).then((res) => {
-            handleCancel();
-            getList();
-            proxy.$message.success(res.msg);
-          });
-        }
-      }
-    });
-  };
-
-  /**
-   * 批量删除
-   */
-  const handleBatchDelete = () => {
-    if (ids.value.length === 0) {
-      proxy.$message.info('请选择要删除的数据');
-    } else {
-      proxy.$modal.warning({
-        title: '警告',
-        titleAlign: 'start',
-        content:
-          '是否确定删除所选的数据？如果存在下级菜单则一并删除，此操作不能撤销！',
-        hideCancel: false,
-        onOk: () => {
-          handleDelete(ids.value);
-        },
-      });
-    }
-  };
-
-  /**
-   * 删除
-   *
-   * @param ids ID 列表
-   */
-  const handleDelete = (ids: Array<number>) => {
-    del(ids).then((res) => {
-      proxy.$message.success(res.msg);
-      getList();
-      proxy.$refs.tableRef.selectAll(false);
-    });
-  };
-
-  /**
-   * 点击行选择器
-   */
-  const handleSelect = (rowKeys: any, rowKey: any, record: TableData) => {
-    if (rowKeys.find((key: any) => key === rowKey)) {
-      if (record.children) {
-        record.children.forEach((r) => {
-          proxy.$refs.tableRef.select(r.id);
-          rowKeys.push(r.id);
-          if (r.children) {
-            handleSelect(rowKeys, rowKey, r);
-          }
-        });
-      }
-    } else if (record.children) {
-      record.children.forEach((r) => {
-        rowKeys.splice(
-          rowKeys.findIndex((key: number | undefined) => key === r.id),
-          1,
-        );
-        proxy.$refs.tableRef.select(r.id, false);
-        if (r.children) {
-          handleSelect(rowKeys, rowKey, r);
-        }
-      });
-    }
-  };
-
-  /**
-   * 已选择的数据行发生改变
-   *
-   * @param rowKeys ID 列表
-   */
-  const handleSelectionChange = (rowKeys: Array<any>) => {
-    ids.value = rowKeys;
-    single.value = rowKeys.length !== 1;
-    multiple.value = !rowKeys.length;
-  };
-
-  /**
-   * 导出
-   */
-  const handleExport = () => {
-    if (exportLoading.value) return;
-    exportLoading.value = true;
-    proxy
-      .download('/system/menu/export', { ...queryParams.value }, '菜单数据')
-      .finally(() => {
-        exportLoading.value = false;
-      });
-  };
-
-  /**
-   * 展开/折叠
-   */
-  const handleExpandAll = () => {
-    expandAll.value = !expandAll.value;
-    proxy.$refs.tableRef.expandAll(expandAll.value);
-  };
-
-  /**
-   * 修改状态
-   *
-   * @param record 记录信息
-   */
-  const handleChangeStatus = (record: DataRecord) => {
-    if (record.id) {
-      const tip = record.status === 1 ? '启用' : '禁用';
-      update(record, record.id)
-        .then(() => {
-          proxy.$message.success(`${tip}成功`);
-        })
-        .catch(() => {
-          record.status = record.status === 1 ? 2 : 1;
-        });
-    }
-  };
-
-  /**
-   * 过滤菜单树
-   *
-   * @param searchValue 搜索值
-   * @param nodeData 节点值
-   */
-  const filterMenuTree = (searchValue: string, nodeData: TreeNodeData) => {
-    if (nodeData.title) {
-      return (
-        nodeData.title.toLowerCase().indexOf(searchValue.toLowerCase()) > -1
-      );
-    }
-    return false;
-  };
-
-  /**
-   * 展示下拉图标
-   */
-  const showSelectIcon = () => {
-    proxy.$refs.iconSelectRef.reset();
-    showChooseIcon.value = true;
-  };
-
-  /**
-   * 选择图标
-   *
-   * @param name 图标名称
-   */
-  const selected = (name: string) => {
-    form.value.icon = name;
-    showChooseIcon.value = false;
-  };
-
-  const hideSelectIcon = () => {
-    showChooseIcon.value = false;
-  };
-
-  /**
-   * 查询
-   */
-  const handleQuery = () => {
-    getList();
-  };
-
-  /**
-   * 重置
-   */
-  const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
-    handleQuery();
-  };
-</script>
-
-<script lang="ts">
-  export default {
-    // eslint-disable-next-line vue/no-reserved-component-names
-    name: 'Menu',
-  };
-</script>
-
 <style scoped lang="less"></style>
diff --git a/src/views/system/message/index.vue b/src/views/system/message/index.vue
index 9716707..e3431e3 100644
--- a/src/views/system/message/index.vue
+++ b/src/views/system/message/index.vue
@@ -1,3 +1,196 @@
+<script lang="ts" setup>
+  import { DataRecord, ListParam, list, del, read } from '@/api/system/message';
+
+  const { proxy } = getCurrentInstance() as any;
+  const { message_type_enum } = proxy.useDict('message_type_enum');
+  const dataList = ref<DataRecord[]>([]);
+  const dataDetail = ref<DataRecord>({
+    id: 0,
+    title: '',
+    content: '',
+    type: 1,
+    createUserString: '',
+    createTime: '',
+    isRead: false,
+    readTime: '',
+  });
+  const total = ref(0);
+  const ids = ref<Array<number>>([]);
+  const single = ref(true);
+  const multiple = ref(true);
+  const readMultiple = ref(true);
+  const showQuery = ref(true);
+  const loading = ref(false);
+  const detailVisible = ref(false);
+  const detailLoading = ref(false);
+
+  const data = reactive({
+    // 查询参数
+    queryParams: {
+      title: undefined,
+      type: undefined,
+      isRead: undefined,
+      page: 1,
+      size: 10,
+      sort: ['isRead,asc', 'createTime,desc'],
+    },
+  });
+  const { queryParams } = toRefs(data);
+
+  /**
+   * 查询列表
+   *
+   */
+  const getList = (params: ListParam = { ...queryParams.value }) => {
+    loading.value = true;
+    list(params)
+      .then((res) => {
+        dataList.value = res.data.list;
+        total.value = res.data.total;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+  getList();
+
+  /**
+   * 查看详情
+   *
+   * @param record 记录信息
+   */
+  const toDetail = async (record: DataRecord) => {
+    detailVisible.value = true;
+    dataDetail.value = record;
+  };
+
+  /**
+   * 关闭详情
+   */
+  const handleDetailCancel = () => {
+    detailVisible.value = false;
+  };
+
+  /**
+   * 批量删除
+   */
+  const handleBatchDelete = () => {
+    if (ids.value.length === 0) {
+      proxy.$message.info('请选择要删除的数据');
+    } else {
+      proxy.$modal.warning({
+        title: '警告',
+        titleAlign: 'start',
+        content: `是否确定删除所选的${ids.value.length}条数据？`,
+        hideCancel: false,
+        onOk: () => {
+          handleDelete(ids.value);
+        },
+      });
+    }
+  };
+
+  /**
+   * 删除
+   *
+   * @param ids ID 列表
+   */
+  const handleDelete = (ids: Array<number>) => {
+    del(ids).then((res) => {
+      proxy.$message.success(res.msg);
+      getList();
+      proxy.$refs.tableRef.selectAll(false);
+    });
+  };
+
+  /**
+   * 批量将消息设置为已读
+   */
+  const handleBatchRedaMessage = () => {
+    if (ids.value.length === 0) {
+      proxy.$message.info('请选择数据');
+    } else {
+      handleReadMessage(ids.value);
+    }
+  };
+
+  /**
+   * 批量所以消息设置为已读
+   */
+  const handleAllRedaMessage = () => {
+    handleReadMessage([]);
+  };
+
+  /**
+   * 将消息设置为已读
+   *
+   * @param ids ID 列表
+   */
+  const handleReadMessage = (ids: Array<number>) => {
+    read(ids).then((res) => {
+      proxy.$message.success(res.msg);
+      getList();
+      proxy.$refs.tableRef.selectAll(false);
+    });
+  };
+
+  /**
+   * 已选择的数据行发生改变时触发
+   *
+   * @param rowKeys ID 列表
+   */
+  const handleSelectionChange = (rowKeys: Array<any>) => {
+    const unReadMessageList = dataList.value.filter(
+      (item) => rowKeys.indexOf(item.id) !== -1 && !item.isRead,
+    );
+    readMultiple.value = !unReadMessageList.length;
+    ids.value = rowKeys;
+    single.value = rowKeys.length !== 1;
+    multiple.value = !rowKeys.length;
+  };
+
+  /**
+   * 查询
+   */
+  const handleQuery = () => {
+    getList();
+  };
+
+  /**
+   * 重置
+   */
+  const resetQuery = () => {
+    proxy.$refs.queryRef.resetFields();
+    handleQuery();
+  };
+
+  /**
+   * 切换页码
+   *
+   * @param current 页码
+   */
+  const handlePageChange = (current: number) => {
+    queryParams.value.page = current;
+    getList();
+  };
+
+  /**
+   * 切换每页条数
+   *
+   * @param pageSize 每页条数
+   */
+  const handlePageSizeChange = (pageSize: number) => {
+    queryParams.value.size = pageSize;
+    getList();
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Message',
+  };
+</script>
+
 <template>
   <div class="app-container">
     <Breadcrumb :items="['menu.system', 'menu.system.message.list']" />
@@ -234,197 +427,4 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-  import { DataRecord, ListParam, list, del, read } from '@/api/system/message';
-
-  const { proxy } = getCurrentInstance() as any;
-  const { message_type_enum } = proxy.useDict('message_type_enum');
-  const dataList = ref<DataRecord[]>([]);
-  const dataDetail = ref<DataRecord>({
-    id: 0,
-    title: '',
-    content: '',
-    type: 1,
-    createUserString: '',
-    createTime: '',
-    isRead: false,
-    readTime: '',
-  });
-  const total = ref(0);
-  const ids = ref<Array<number>>([]);
-  const single = ref(true);
-  const multiple = ref(true);
-  const readMultiple = ref(true);
-  const showQuery = ref(true);
-  const loading = ref(false);
-  const detailVisible = ref(false);
-  const detailLoading = ref(false);
-
-  const data = reactive({
-    // 查询参数
-    queryParams: {
-      title: undefined,
-      type: undefined,
-      isRead: undefined,
-      page: 1,
-      size: 10,
-      sort: ['isRead,asc', 'createTime,desc'],
-    },
-  });
-  const { queryParams } = toRefs(data);
-
-  /**
-   * 查询列表
-   *
-   */
-  const getList = (params: ListParam = { ...queryParams.value }) => {
-    loading.value = true;
-    list(params)
-      .then((res) => {
-        dataList.value = res.data.list;
-        total.value = res.data.total;
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  };
-  getList();
-
-  /**
-   * 查看详情
-   *
-   * @param record 记录信息
-   */
-  const toDetail = async (record: DataRecord) => {
-    detailVisible.value = true;
-    dataDetail.value = record;
-  };
-
-  /**
-   * 关闭详情
-   */
-  const handleDetailCancel = () => {
-    detailVisible.value = false;
-  };
-
-  /**
-   * 批量删除
-   */
-  const handleBatchDelete = () => {
-    if (ids.value.length === 0) {
-      proxy.$message.info('请选择要删除的数据');
-    } else {
-      proxy.$modal.warning({
-        title: '警告',
-        titleAlign: 'start',
-        content: `是否确定删除所选的${ids.value.length}条数据？`,
-        hideCancel: false,
-        onOk: () => {
-          handleDelete(ids.value);
-        },
-      });
-    }
-  };
-
-  /**
-   * 删除
-   *
-   * @param ids ID 列表
-   */
-  const handleDelete = (ids: Array<number>) => {
-    del(ids).then((res) => {
-      proxy.$message.success(res.msg);
-      getList();
-      proxy.$refs.tableRef.selectAll(false);
-    });
-  };
-
-  /**
-   * 批量将消息设置为已读
-   */
-  const handleBatchRedaMessage = () => {
-    if (ids.value.length === 0) {
-      proxy.$message.info('请选择数据');
-    } else {
-      handleReadMessage(ids.value);
-    }
-  };
-
-  /**
-   * 批量所以消息设置为已读
-   */
-  const handleAllRedaMessage = () => {
-    handleReadMessage([]);
-  };
-
-  /**
-   * 将消息设置为已读
-   *
-   * @param ids ID 列表
-   */
-  const handleReadMessage = (ids: Array<number>) => {
-    read(ids).then((res) => {
-      proxy.$message.success(res.msg);
-      getList();
-      proxy.$refs.tableRef.selectAll(false);
-    });
-  };
-
-  /**
-   * 已选择的数据行发生改变时触发
-   *
-   * @param rowKeys ID 列表
-   */
-  const handleSelectionChange = (rowKeys: Array<any>) => {
-    const unReadMessageList = dataList.value.filter(
-      (item) => rowKeys.indexOf(item.id) !== -1 && !item.isRead,
-    );
-    readMultiple.value = !unReadMessageList.length;
-    ids.value = rowKeys;
-    single.value = rowKeys.length !== 1;
-    multiple.value = !rowKeys.length;
-  };
-
-  /**
-   * 查询
-   */
-  const handleQuery = () => {
-    getList();
-  };
-
-  /**
-   * 重置
-   */
-  const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
-    handleQuery();
-  };
-
-  /**
-   * 切换页码
-   *
-   * @param current 页码
-   */
-  const handlePageChange = (current: number) => {
-    queryParams.value.page = current;
-    getList();
-  };
-
-  /**
-   * 切换每页条数
-   *
-   * @param pageSize 每页条数
-   */
-  const handlePageSizeChange = (pageSize: number) => {
-    queryParams.value.size = pageSize;
-    getList();
-  };
-</script>
-
-<script lang="ts">
-  export default {
-    name: 'Message',
-  };
-</script>
-
 <style scoped lang="less"></style>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 423ad1f..c3bda75 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,3 +1,421 @@
+<script lang="ts" setup>
+  import { TreeNodeData } from '@arco-design/web-vue';
+  import {
+    DataRecord,
+    ListParam,
+    list,
+    get,
+    add,
+    update,
+    del,
+  } from '@/api/system/role';
+  import { listMenuTree, listDeptTree } from '@/api/common';
+  import checkPermission from '@/utils/permission';
+
+  const { proxy } = getCurrentInstance() as any;
+  const { data_scope_enum, dis_enable_status_enum } = proxy.useDict(
+    'data_scope_enum',
+    'dis_enable_status_enum',
+  );
+
+  const dataList = ref<DataRecord[]>([]);
+  const dataDetail = ref<DataRecord>({});
+  const total = ref(0);
+  const ids = ref<Array<number>>([]);
+  const title = ref('');
+  const single = ref(true);
+  const multiple = ref(true);
+  const showQuery = ref(true);
+  const loading = ref(false);
+  const detailLoading = ref(false);
+  const exportLoading = ref(false);
+  const visible = ref(false);
+  const detailVisible = ref(false);
+  const menuLoading = ref(false);
+  const deptLoading = ref(false);
+  const menuOptions = ref<TreeNodeData[]>([]);
+  const deptOptions = ref<TreeNodeData[]>([]);
+  const menuExpandAll = ref(false);
+  const deptExpandAll = ref(true);
+  const menuCheckAll = ref(false);
+  const deptCheckAll = ref(false);
+  const menuCheckStrictly = ref(true);
+  const deptCheckStrictly = ref(true);
+
+  const data = reactive({
+    // 查询参数
+    queryParams: {
+      name: undefined,
+      status: undefined,
+      page: 1,
+      size: 10,
+      sort: ['createTime,desc'],
+    },
+    // 表单数据
+    form: {} as DataRecord,
+    // 表单验证规则
+    rules: {
+      name: [
+        { required: true, message: '请输入角色名称' },
+        {
+          match: /^[\u4e00-\u9fa5a-zA-Z0-9_-]{2,30}$/,
+          message:
+            '长度为 2 到 30 位，可以包含中文、字母、数字、下划线，短横线',
+        },
+      ],
+      code: [
+        { required: true, message: '请输入角色编码' },
+        {
+          match: /^[a-zA-Z][a-zA-Z0-9_]{1,29}$/,
+          message: '长度为 2 到 30 位，可以包含字母、数字，下划线，以字母开头',
+        },
+      ],
+      dataScope: [{ required: true, message: '请选择数据权限' }],
+    },
+  });
+  const { queryParams, form, rules } = toRefs(data);
+
+  /**
+   * 查询列表
+   *
+   * @param params 查询参数
+   */
+  const getList = (params: ListParam = { ...queryParams.value }) => {
+    loading.value = true;
+    list(params)
+      .then((res) => {
+        dataList.value = res.data.list;
+        total.value = res.data.total;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+  getList();
+
+  /**
+   * 打开新增对话框
+   */
+  const toAdd = () => {
+    reset();
+    getMenuTree();
+    title.value = '新增角色';
+    visible.value = true;
+    getDeptTree();
+  };
+
+  /**
+   * 打开修改对话框
+   *
+   * @param id ID
+   */
+  const toUpdate = (id: number) => {
+    reset();
+    menuCheckStrictly.value = false;
+    deptCheckStrictly.value = false;
+    getMenuTree();
+    getDeptTree();
+    get(id).then((res) => {
+      form.value = res.data;
+      title.value = '修改角色';
+      visible.value = true;
+    });
+  };
+
+  /**
+   * 查询菜单树
+   */
+  const getMenuTree = () => {
+    if (menuOptions.value.length <= 0) {
+      menuLoading.value = true;
+    }
+    listMenuTree({})
+      .then((res) => {
+        menuOptions.value = res.data;
+      })
+      .finally(() => {
+        menuLoading.value = false;
+      });
+  };
+
+  /**
+   * 查询部门树
+   */
+  const getDeptTree = () => {
+    if (deptOptions.value.length <= 0) {
+      deptLoading.value = true;
+    }
+    listDeptTree({})
+      .then((res) => {
+        deptOptions.value = res.data;
+      })
+      .finally(() => {
+        deptLoading.value = false;
+      });
+  };
+
+  /**
+   * 重置表单
+   */
+  const reset = () => {
+    menuExpandAll.value = false;
+    menuCheckAll.value = false;
+    menuCheckStrictly.value = true;
+    deptExpandAll.value = true;
+    deptCheckAll.value = false;
+    deptCheckStrictly.value = true;
+    proxy.$refs.menuRef?.expandAll(menuExpandAll.value);
+    proxy.$refs.deptRef?.expandAll(deptExpandAll.value);
+    form.value = {
+      dataScope: 4,
+      sort: 999,
+    };
+    proxy.$refs.formRef?.resetFields();
+  };
+
+  /**
+   * 取消
+   */
+  const handleCancel = () => {
+    visible.value = false;
+    proxy.$refs.formRef.resetFields();
+  };
+
+  /**
+   * 获取所有选中的菜单
+   */
+  const getMenuAllCheckedKeys = () => {
+    // 获取目前被选中的菜单
+    const checkedNodes = proxy.$refs.menuRef.getCheckedNodes();
+    const checkedKeys = checkedNodes.map((item: TreeNodeData) => item.key);
+
+    // 获取半选中的菜单
+    const halfCheckedNodes = proxy.$refs.menuRef.getHalfCheckedNodes();
+    const halfCheckedKeys = halfCheckedNodes.map(
+      (item: TreeNodeData) => item.key,
+    );
+    // eslint-disable-next-line prefer-spread
+    checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+    return checkedKeys;
+  };
+
+  /**
+   * 获取所有选中的部门
+   */
+  const getDeptAllCheckedKeys = () => {
+    if (!proxy.$refs.deptRef) {
+      return [];
+    }
+    // 获取目前被选中的部门
+    const checkedNodes = proxy.$refs.deptRef.getCheckedNodes();
+    const checkedKeys = checkedNodes.map((item: TreeNodeData) => item.key);
+
+    // 获取半选中的部门
+    const halfCheckedNodes = proxy.$refs.deptRef.getHalfCheckedNodes();
+    const halfCheckedKeys = halfCheckedNodes.map(
+      (item: TreeNodeData) => item.key,
+    );
+    // eslint-disable-next-line prefer-spread
+    checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+    return checkedKeys;
+  };
+
+  /**
+   * 确定
+   */
+  const handleOk = () => {
+    proxy.$refs.formRef.validate((valid: any) => {
+      if (!valid) {
+        if (form.value.id !== undefined) {
+          form.value.menuIds = getMenuAllCheckedKeys();
+          form.value.deptIds = getDeptAllCheckedKeys();
+          update(form.value, form.value.id).then((res) => {
+            handleCancel();
+            getList();
+            proxy.$message.success(res.msg);
+          });
+        } else {
+          form.value.menuIds = getMenuAllCheckedKeys();
+          form.value.deptIds = getDeptAllCheckedKeys();
+          add(form.value).then((res) => {
+            handleCancel();
+            getList();
+            proxy.$message.success(res.msg);
+          });
+        }
+      }
+    });
+  };
+
+  /**
+   * 查看详情
+   *
+   * @param id ID
+   */
+  const toDetail = async (id: number) => {
+    if (detailLoading.value) return;
+    getMenuTree();
+    getDeptTree();
+    detailLoading.value = true;
+    detailVisible.value = true;
+    get(id)
+      .then((res) => {
+        dataDetail.value = res.data;
+      })
+      .finally(() => {
+        detailLoading.value = false;
+      });
+  };
+
+  /**
+   * 关闭详情
+   */
+  const handleDetailCancel = () => {
+    detailVisible.value = false;
+  };
+
+  /**
+   * 批量删除
+   */
+  const handleBatchDelete = () => {
+    if (ids.value.length === 0) {
+      proxy.$message.info('请选择要删除的数据');
+    } else {
+      proxy.$modal.warning({
+        title: '警告',
+        titleAlign: 'start',
+        content: `是否确定删除所选的${ids.value.length}条数据？`,
+        hideCancel: false,
+        onOk: () => {
+          handleDelete(ids.value);
+        },
+      });
+    }
+  };
+
+  /**
+   * 删除
+   *
+   * @param ids ID 列表
+   */
+  const handleDelete = (ids: Array<number>) => {
+    del(ids).then((res) => {
+      proxy.$message.success(res.msg);
+      getList();
+      proxy.$refs.tableRef.selectAll(false);
+    });
+  };
+
+  /**
+   * 已选择的数据行发生改变时触发
+   *
+   * @param rowKeys ID 列表
+   */
+  const handleSelectionChange = (rowKeys: Array<any>) => {
+    ids.value = rowKeys;
+    single.value = rowKeys.length !== 1;
+    multiple.value = !rowKeys.length;
+  };
+
+  /**
+   * 导出
+   */
+  const handleExport = () => {
+    if (exportLoading.value) return;
+    exportLoading.value = true;
+    proxy
+      .download('/system/role/export', { ...queryParams.value }, '角色数据')
+      .finally(() => {
+        exportLoading.value = false;
+      });
+  };
+
+  /**
+   * 修改状态
+   *
+   * @param record 记录信息
+   */
+  const handleChangeStatus = (record: DataRecord) => {
+    if (record.id) {
+      const tip = record.status === 1 ? '启用' : '禁用';
+      update(record, record.id)
+        .then(() => {
+          proxy.$message.success(`${tip}成功`);
+        })
+        .catch(() => {
+          record.status = record.status === 1 ? 2 : 1;
+        });
+    }
+  };
+
+  /**
+   * 展开/折叠
+   *
+   * @param type 类型（菜单/部门）
+   */
+  const handleExpandAll = (type: string) => {
+    if (type === 'menu') {
+      proxy.$refs.menuRef.expandAll(menuExpandAll.value);
+    } else if (type === 'dept') {
+      proxy.$refs.deptRef.expandAll(deptExpandAll.value);
+    }
+  };
+
+  /**
+   * 全选/全不选
+   *
+   * @param type 类型（菜单/部门）
+   */
+  const handleCheckAll = (type: string) => {
+    if (type === 'menu') {
+      proxy.$refs.menuRef.checkAll(menuCheckAll.value);
+    } else if (type === 'dept') {
+      proxy.$refs.deptRef.checkAll(deptCheckAll.value);
+    }
+  };
+
+  /**
+   * 查询
+   */
+  const handleQuery = () => {
+    getList();
+  };
+
+  /**
+   * 重置
+   */
+  const resetQuery = () => {
+    proxy.$refs.queryRef.resetFields();
+    handleQuery();
+  };
+
+  /**
+   * 切换页码
+   *
+   * @param current 页码
+   */
+  const handlePageChange = (current: number) => {
+    queryParams.value.page = current;
+    getList();
+  };
+
+  /**
+   * 切换每页条数
+   *
+   * @param pageSize 每页条数
+   */
+  const handlePageSizeChange = (pageSize: number) => {
+    queryParams.value.size = pageSize;
+    getList();
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Role',
+  };
+</script>
+
 <template>
   <div class="app-container">
     <Breadcrumb :items="['menu.system', 'menu.system.role.list']" />
@@ -421,422 +839,4 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-  import { TreeNodeData } from '@arco-design/web-vue';
-  import {
-    DataRecord,
-    ListParam,
-    list,
-    get,
-    add,
-    update,
-    del,
-  } from '@/api/system/role';
-  import { listMenuTree, listDeptTree } from '@/api/common';
-  import checkPermission from '@/utils/permission';
-
-  const { proxy } = getCurrentInstance() as any;
-  const { data_scope_enum, dis_enable_status_enum } = proxy.useDict(
-    'data_scope_enum',
-    'dis_enable_status_enum',
-  );
-
-  const dataList = ref<DataRecord[]>([]);
-  const dataDetail = ref<DataRecord>({});
-  const total = ref(0);
-  const ids = ref<Array<number>>([]);
-  const title = ref('');
-  const single = ref(true);
-  const multiple = ref(true);
-  const showQuery = ref(true);
-  const loading = ref(false);
-  const detailLoading = ref(false);
-  const exportLoading = ref(false);
-  const visible = ref(false);
-  const detailVisible = ref(false);
-  const menuLoading = ref(false);
-  const deptLoading = ref(false);
-  const menuOptions = ref<TreeNodeData[]>([]);
-  const deptOptions = ref<TreeNodeData[]>([]);
-  const menuExpandAll = ref(false);
-  const deptExpandAll = ref(true);
-  const menuCheckAll = ref(false);
-  const deptCheckAll = ref(false);
-  const menuCheckStrictly = ref(true);
-  const deptCheckStrictly = ref(true);
-
-  const data = reactive({
-    // 查询参数
-    queryParams: {
-      name: undefined,
-      status: undefined,
-      page: 1,
-      size: 10,
-      sort: ['createTime,desc'],
-    },
-    // 表单数据
-    form: {} as DataRecord,
-    // 表单验证规则
-    rules: {
-      name: [
-        { required: true, message: '请输入角色名称' },
-        {
-          match: /^[\u4e00-\u9fa5a-zA-Z0-9_-]{2,30}$/,
-          message:
-            '长度为 2 到 30 位，可以包含中文、字母、数字、下划线，短横线',
-        },
-      ],
-      code: [
-        { required: true, message: '请输入角色编码' },
-        {
-          match: /^[a-zA-Z][a-zA-Z0-9_]{1,29}$/,
-          message: '长度为 2 到 30 位，可以包含字母、数字，下划线，以字母开头',
-        },
-      ],
-      dataScope: [{ required: true, message: '请选择数据权限' }],
-    },
-  });
-  const { queryParams, form, rules } = toRefs(data);
-
-  /**
-   * 查询列表
-   *
-   * @param params 查询参数
-   */
-  const getList = (params: ListParam = { ...queryParams.value }) => {
-    loading.value = true;
-    list(params)
-      .then((res) => {
-        dataList.value = res.data.list;
-        total.value = res.data.total;
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  };
-  getList();
-
-  /**
-   * 打开新增对话框
-   */
-  const toAdd = () => {
-    reset();
-    getMenuTree();
-    title.value = '新增角色';
-    visible.value = true;
-    getDeptTree();
-  };
-
-  /**
-   * 打开修改对话框
-   *
-   * @param id ID
-   */
-  const toUpdate = (id: number) => {
-    reset();
-    menuCheckStrictly.value = false;
-    deptCheckStrictly.value = false;
-    getMenuTree();
-    getDeptTree();
-    get(id).then((res) => {
-      form.value = res.data;
-      title.value = '修改角色';
-      visible.value = true;
-    });
-  };
-
-  /**
-   * 查询菜单树
-   */
-  const getMenuTree = () => {
-    if (menuOptions.value.length <= 0) {
-      menuLoading.value = true;
-    }
-    listMenuTree({})
-      .then((res) => {
-        menuOptions.value = res.data;
-      })
-      .finally(() => {
-        menuLoading.value = false;
-      });
-  };
-
-  /**
-   * 查询部门树
-   */
-  const getDeptTree = () => {
-    if (deptOptions.value.length <= 0) {
-      deptLoading.value = true;
-    }
-    listDeptTree({})
-      .then((res) => {
-        deptOptions.value = res.data;
-      })
-      .finally(() => {
-        deptLoading.value = false;
-      });
-  };
-
-  /**
-   * 重置表单
-   */
-  const reset = () => {
-    menuExpandAll.value = false;
-    menuCheckAll.value = false;
-    menuCheckStrictly.value = true;
-    deptExpandAll.value = true;
-    deptCheckAll.value = false;
-    deptCheckStrictly.value = true;
-    proxy.$refs.menuRef?.expandAll(menuExpandAll.value);
-    proxy.$refs.deptRef?.expandAll(deptExpandAll.value);
-    form.value = {
-      dataScope: 4,
-      sort: 999,
-    };
-    proxy.$refs.formRef?.resetFields();
-  };
-
-  /**
-   * 取消
-   */
-  const handleCancel = () => {
-    visible.value = false;
-    proxy.$refs.formRef.resetFields();
-  };
-
-  /**
-   * 获取所有选中的菜单
-   */
-  const getMenuAllCheckedKeys = () => {
-    // 获取目前被选中的菜单
-    const checkedNodes = proxy.$refs.menuRef.getCheckedNodes();
-    const checkedKeys = checkedNodes.map((item: TreeNodeData) => item.key);
-
-    // 获取半选中的菜单
-    const halfCheckedNodes = proxy.$refs.menuRef.getHalfCheckedNodes();
-    const halfCheckedKeys = halfCheckedNodes.map(
-      (item: TreeNodeData) => item.key,
-    );
-    // eslint-disable-next-line prefer-spread
-    checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-    return checkedKeys;
-  };
-
-  /**
-   * 获取所有选中的部门
-   */
-  const getDeptAllCheckedKeys = () => {
-    if (!proxy.$refs.deptRef) {
-      return [];
-    }
-    // 获取目前被选中的部门
-    const checkedNodes = proxy.$refs.deptRef.getCheckedNodes();
-    const checkedKeys = checkedNodes.map((item: TreeNodeData) => item.key);
-
-    // 获取半选中的部门
-    const halfCheckedNodes = proxy.$refs.deptRef.getHalfCheckedNodes();
-    const halfCheckedKeys = halfCheckedNodes.map(
-      (item: TreeNodeData) => item.key,
-    );
-    // eslint-disable-next-line prefer-spread
-    checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-    return checkedKeys;
-  };
-
-  /**
-   * 确定
-   */
-  const handleOk = () => {
-    proxy.$refs.formRef.validate((valid: any) => {
-      if (!valid) {
-        if (form.value.id !== undefined) {
-          form.value.menuIds = getMenuAllCheckedKeys();
-          form.value.deptIds = getDeptAllCheckedKeys();
-          update(form.value, form.value.id).then((res) => {
-            handleCancel();
-            getList();
-            proxy.$message.success(res.msg);
-          });
-        } else {
-          form.value.menuIds = getMenuAllCheckedKeys();
-          form.value.deptIds = getDeptAllCheckedKeys();
-          add(form.value).then((res) => {
-            handleCancel();
-            getList();
-            proxy.$message.success(res.msg);
-          });
-        }
-      }
-    });
-  };
-
-  /**
-   * 查看详情
-   *
-   * @param id ID
-   */
-  const toDetail = async (id: number) => {
-    if (detailLoading.value) return;
-    getMenuTree();
-    getDeptTree();
-    detailLoading.value = true;
-    detailVisible.value = true;
-    get(id)
-      .then((res) => {
-        dataDetail.value = res.data;
-      })
-      .finally(() => {
-        detailLoading.value = false;
-      });
-  };
-
-  /**
-   * 关闭详情
-   */
-  const handleDetailCancel = () => {
-    detailVisible.value = false;
-  };
-
-  /**
-   * 批量删除
-   */
-  const handleBatchDelete = () => {
-    if (ids.value.length === 0) {
-      proxy.$message.info('请选择要删除的数据');
-    } else {
-      proxy.$modal.warning({
-        title: '警告',
-        titleAlign: 'start',
-        content: `是否确定删除所选的${ids.value.length}条数据？`,
-        hideCancel: false,
-        onOk: () => {
-          handleDelete(ids.value);
-        },
-      });
-    }
-  };
-
-  /**
-   * 删除
-   *
-   * @param ids ID 列表
-   */
-  const handleDelete = (ids: Array<number>) => {
-    del(ids).then((res) => {
-      proxy.$message.success(res.msg);
-      getList();
-      proxy.$refs.tableRef.selectAll(false);
-    });
-  };
-
-  /**
-   * 已选择的数据行发生改变时触发
-   *
-   * @param rowKeys ID 列表
-   */
-  const handleSelectionChange = (rowKeys: Array<any>) => {
-    ids.value = rowKeys;
-    single.value = rowKeys.length !== 1;
-    multiple.value = !rowKeys.length;
-  };
-
-  /**
-   * 导出
-   */
-  const handleExport = () => {
-    if (exportLoading.value) return;
-    exportLoading.value = true;
-    proxy
-      .download('/system/role/export', { ...queryParams.value }, '角色数据')
-      .finally(() => {
-        exportLoading.value = false;
-      });
-  };
-
-  /**
-   * 修改状态
-   *
-   * @param record 记录信息
-   */
-  const handleChangeStatus = (record: DataRecord) => {
-    if (record.id) {
-      const tip = record.status === 1 ? '启用' : '禁用';
-      update(record, record.id)
-        .then(() => {
-          proxy.$message.success(`${tip}成功`);
-        })
-        .catch(() => {
-          record.status = record.status === 1 ? 2 : 1;
-        });
-    }
-  };
-
-  /**
-   * 展开/折叠
-   *
-   * @param type 类型（菜单/部门）
-   */
-  const handleExpandAll = (type: string) => {
-    if (type === 'menu') {
-      proxy.$refs.menuRef.expandAll(menuExpandAll.value);
-    } else if (type === 'dept') {
-      proxy.$refs.deptRef.expandAll(deptExpandAll.value);
-    }
-  };
-
-  /**
-   * 全选/全不选
-   *
-   * @param type 类型（菜单/部门）
-   */
-  const handleCheckAll = (type: string) => {
-    if (type === 'menu') {
-      proxy.$refs.menuRef.checkAll(menuCheckAll.value);
-    } else if (type === 'dept') {
-      proxy.$refs.deptRef.checkAll(deptCheckAll.value);
-    }
-  };
-
-  /**
-   * 查询
-   */
-  const handleQuery = () => {
-    getList();
-  };
-
-  /**
-   * 重置
-   */
-  const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
-    handleQuery();
-  };
-
-  /**
-   * 切换页码
-   *
-   * @param current 页码
-   */
-  const handlePageChange = (current: number) => {
-    queryParams.value.page = current;
-    getList();
-  };
-
-  /**
-   * 切换每页条数
-   *
-   * @param pageSize 每页条数
-   */
-  const handlePageSizeChange = (pageSize: number) => {
-    queryParams.value.size = pageSize;
-    getList();
-  };
-</script>
-
-<script lang="ts">
-  export default {
-    name: 'Role',
-  };
-</script>
-
 <style scoped lang="less"></style>
diff --git a/src/views/system/user/center/components/basic-info.vue b/src/views/system/user/center/components/basic-info.vue
index 6bc64aa..3ff9ab0 100644
--- a/src/views/system/user/center/components/basic-info.vue
+++ b/src/views/system/user/center/components/basic-info.vue
@@ -1,56 +1,3 @@
-<template>
-  <a-form
-    ref="formRef"
-    :model="form"
-    :rules="rules"
-    :label-col-props="{ span: 8 }"
-    :wrapper-col-props="{ span: 16 }"
-    size="large"
-    class="form"
-  >
-    <a-form-item
-      :label="$t('userCenter.basicInfo.form.label.username')"
-      disabled
-    >
-      <a-input
-        v-model="form.username"
-        :placeholder="$t('userCenter.basicInfo.form.placeholder.username')"
-        :max-length="64"
-      />
-    </a-form-item>
-    <a-form-item
-      :label="$t('userCenter.basicInfo.form.label.nickname')"
-      field="nickname"
-    >
-      <a-input
-        v-model="form.nickname"
-        :placeholder="$t('userCenter.basicInfo.form.placeholder.nickname')"
-        :max-length="30"
-      />
-    </a-form-item>
-    <a-form-item
-      :label="$t('userCenter.basicInfo.form.label.gender')"
-      field="gender"
-    >
-      <a-radio-group v-model="form.gender">
-        <a-radio :value="1">男</a-radio>
-        <a-radio :value="2">女</a-radio>
-        <a-radio :value="0" disabled>未知</a-radio>
-      </a-radio-group>
-    </a-form-item>
-    <a-form-item>
-      <a-space>
-        <a-button :loading="loading" type="primary" @click="handleSave">
-          {{ $t('userCenter.basicInfo.form.save') }}
-        </a-button>
-        <a-button @click="handleReset">
-          {{ $t('userCenter.basicInfo.form.reset') }}
-        </a-button>
-      </a-space>
-    </a-form-item>
-  </a-form>
-</template>
-
 <script lang="ts" setup>
   import { FieldRule } from '@arco-design/web-vue';
   import { BasicInfoModel, updateBasicInfo } from '@/api/system/user-center';
@@ -125,6 +72,59 @@
   };
 </script>
 
+<template>
+  <a-form
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    :label-col-props="{ span: 8 }"
+    :wrapper-col-props="{ span: 16 }"
+    size="large"
+    class="form"
+  >
+    <a-form-item
+      :label="$t('userCenter.basicInfo.form.label.username')"
+      disabled
+    >
+      <a-input
+        v-model="form.username"
+        :placeholder="$t('userCenter.basicInfo.form.placeholder.username')"
+        :max-length="64"
+      />
+    </a-form-item>
+    <a-form-item
+      :label="$t('userCenter.basicInfo.form.label.nickname')"
+      field="nickname"
+    >
+      <a-input
+        v-model="form.nickname"
+        :placeholder="$t('userCenter.basicInfo.form.placeholder.nickname')"
+        :max-length="30"
+      />
+    </a-form-item>
+    <a-form-item
+      :label="$t('userCenter.basicInfo.form.label.gender')"
+      field="gender"
+    >
+      <a-radio-group v-model="form.gender">
+        <a-radio :value="1">男</a-radio>
+        <a-radio :value="2">女</a-radio>
+        <a-radio :value="0" disabled>未知</a-radio>
+      </a-radio-group>
+    </a-form-item>
+    <a-form-item>
+      <a-space>
+        <a-button :loading="loading" type="primary" @click="handleSave">
+          {{ $t('userCenter.basicInfo.form.save') }}
+        </a-button>
+        <a-button @click="handleReset">
+          {{ $t('userCenter.basicInfo.form.reset') }}
+        </a-button>
+      </a-space>
+    </a-form-item>
+  </a-form>
+</template>
+
 <style scoped lang="less">
   .form {
     width: 540px;
diff --git a/src/views/system/user/center/components/operation-log.vue b/src/views/system/user/center/components/operation-log.vue
index 5f62109..6950fd0 100644
--- a/src/views/system/user/center/components/operation-log.vue
+++ b/src/views/system/user/center/components/operation-log.vue
@@ -1,60 +1,3 @@
-<template>
-  <div class="container">
-    <!-- 列表区域 -->
-    <a-table
-      ref="tableRef"
-      row-key="id"
-      :data="dataList"
-      :loading="loading"
-      :pagination="{
-        showTotal: true,
-        showPageSize: true,
-        total: total,
-        current: queryParams.page,
-      }"
-      :bordered="false"
-      column-resizable
-      stripe
-      size="large"
-      @page-change="handlePageChange"
-      @page-size-change="handlePageSizeChange"
-    >
-      <template #columns>
-        <a-table-column title="序号">
-          <template #cell="{ rowIndex }">
-            {{ rowIndex + 1 + (queryParams.page - 1) * queryParams.size }}
-          </template>
-        </a-table-column>
-        <a-table-column title="操作时间" data-index="createTime" />
-        <a-table-column title="操作内容" data-index="description" />
-        <a-table-column title="所属模块" data-index="module" />
-        <a-table-column title="操作状态" align="center">
-          <template #cell="{ record }">
-            <a-tag v-if="record.status === 1" color="green"
-              ><span class="circle pass" />成功</a-tag
-            >
-            <a-tooltip v-else :content="record.errorMsg">
-              <a-tag color="red" style="cursor: pointer">
-                <span class="circle fail" />失败
-              </a-tag>
-            </a-tooltip>
-          </template>
-        </a-table-column>
-        <a-table-column title="操作 IP" data-index="ip" />
-        <a-table-column title="操作地点" data-index="address" />
-        <a-table-column title="浏览器" data-index="browser" />
-      </template>
-      <template #pagination-left>
-        <a-tooltip content="刷新">
-          <div class="action-icon" @click="handleRefresh">
-            <icon-refresh size="18" />
-          </div>
-        </a-tooltip>
-      </template>
-    </a-table>
-  </div>
-</template>
-
 <script lang="ts" setup>
   import {
     OperationLogParam,
@@ -126,6 +69,63 @@
   };
 </script>
 
+<template>
+  <div class="container">
+    <!-- 列表区域 -->
+    <a-table
+      ref="tableRef"
+      row-key="id"
+      :data="dataList"
+      :loading="loading"
+      :pagination="{
+        showTotal: true,
+        showPageSize: true,
+        total: total,
+        current: queryParams.page,
+      }"
+      :bordered="false"
+      column-resizable
+      stripe
+      size="large"
+      @page-change="handlePageChange"
+      @page-size-change="handlePageSizeChange"
+    >
+      <template #columns>
+        <a-table-column title="序号">
+          <template #cell="{ rowIndex }">
+            {{ rowIndex + 1 + (queryParams.page - 1) * queryParams.size }}
+          </template>
+        </a-table-column>
+        <a-table-column title="操作时间" data-index="createTime" />
+        <a-table-column title="操作内容" data-index="description" />
+        <a-table-column title="所属模块" data-index="module" />
+        <a-table-column title="操作状态" align="center">
+          <template #cell="{ record }">
+            <a-tag v-if="record.status === 1" color="green"
+              ><span class="circle pass" />成功</a-tag
+            >
+            <a-tooltip v-else :content="record.errorMsg">
+              <a-tag color="red" style="cursor: pointer">
+                <span class="circle fail" />失败
+              </a-tag>
+            </a-tooltip>
+          </template>
+        </a-table-column>
+        <a-table-column title="操作 IP" data-index="ip" />
+        <a-table-column title="操作地点" data-index="address" />
+        <a-table-column title="浏览器" data-index="browser" />
+      </template>
+      <template #pagination-left>
+        <a-tooltip content="刷新">
+          <div class="action-icon" @click="handleRefresh">
+            <icon-refresh size="18" />
+          </div>
+        </a-tooltip>
+      </template>
+    </a-table>
+  </div>
+</template>
+
 <style scoped lang="less">
   .container {
     padding: 0 20px 20px 20px;
diff --git a/src/views/system/user/center/components/security-settings.vue b/src/views/system/user/center/components/security-settings.vue
index 11b4530..5d0ef9e 100644
--- a/src/views/system/user/center/components/security-settings.vue
+++ b/src/views/system/user/center/components/security-settings.vue
@@ -1,3 +1,10 @@
+<script lang="ts" setup>
+  import UpdatePwd from './security-settings/update-pwd.vue';
+  import UpdatePhone from './security-settings/update-phone.vue';
+  import UpdateEmail from './security-settings/update-email.vue';
+  import BindSocial from './security-settings/bind-social.vue';
+</script>
+
 <template>
   <a-list :bordered="false">
     <a-list-item>
@@ -15,13 +22,6 @@
   </a-list>
 </template>
 
-<script lang="ts" setup>
-  import UpdatePwd from './security-settings/update-pwd.vue';
-  import UpdatePhone from './security-settings/update-phone.vue';
-  import UpdateEmail from './security-settings/update-email.vue';
-  import BindSocial from './security-settings/bind-social.vue';
-</script>
-
 <style scoped lang="less">
   :deep(.arco-list-item) {
     border-bottom: none !important;
diff --git a/src/views/system/user/center/components/security-settings/bind-social.vue b/src/views/system/user/center/components/security-settings/bind-social.vue
index ec08fff..40cae52 100644
--- a/src/views/system/user/center/components/security-settings/bind-social.vue
+++ b/src/views/system/user/center/components/security-settings/bind-social.vue
@@ -1,3 +1,69 @@
+<script lang="ts" setup>
+  import {
+    UserSocialBindRecord,
+    listSocial,
+    unbindSocial,
+  } from '@/api/system/user-center';
+  import { socialAuth } from '@/api/auth';
+
+  const { proxy } = getCurrentInstance() as any;
+  const socialBinds = ref<UserSocialBindRecord[]>([]);
+  const giteeSocial = ref<UserSocialBindRecord>();
+  const githubSocial = ref<UserSocialBindRecord>();
+
+  /**
+   * 查询绑定的第三方账号
+   */
+  const list = () => {
+    listSocial().then((res) => {
+      socialBinds.value = res.data;
+      giteeSocial.value = socialBinds.value.find(
+        (item) => item.source === 'GITEE'
+      );
+      githubSocial.value = socialBinds.value.find(
+        (item) => item.source === 'GITHUB'
+      );
+    });
+  };
+  list();
+
+  /**
+   * 绑定或解绑
+   *
+   * @param source 来源
+   * @param sourceDescription 来源描述
+   */
+  const handleBind = (source: string, sourceDescription: string) => {
+    const isBind = socialBinds.value.some((item) => item.source === source);
+    if (isBind) {
+      proxy.$modal.warning({
+        title: `确认解除和${sourceDescription}平台的三方账号绑定吗?`,
+        titleAlign: 'start',
+        content: '解除绑定后，将无法使用该第三方账户登录到此账号',
+        hideCancel: false,
+        onOk: () => {
+          unbindSocial(source).then((res) => {
+            list();
+            proxy.$message.success(res.msg);
+          });
+        },
+      });
+      return;
+    }
+    proxy.$modal.info({
+      title: '提示',
+      titleAlign: 'start',
+      content: `确认和${sourceDescription}平台的三方账号绑定吗?`,
+      hideCancel: false,
+      onOk: () => {
+        socialAuth(source).then((res) => {
+          window.location.href = res.data;
+        });
+      },
+    });
+  };
+</script>
+
 <template>
   <a-list-item-meta>
     <template #avatar>
@@ -75,72 +141,6 @@
   </a-list-item-meta>
 </template>
 
-<script lang="ts" setup>
-  import {
-    UserSocialBindRecord,
-    listSocial,
-    unbindSocial,
-  } from '@/api/system/user-center';
-  import { socialAuth } from '@/api/auth';
-
-  const { proxy } = getCurrentInstance() as any;
-  const socialBinds = ref<UserSocialBindRecord[]>([]);
-  const giteeSocial = ref<UserSocialBindRecord>();
-  const githubSocial = ref<UserSocialBindRecord>();
-
-  /**
-   * 查询绑定的第三方账号
-   */
-  const list = () => {
-    listSocial().then((res) => {
-      socialBinds.value = res.data;
-      giteeSocial.value = socialBinds.value.find(
-        (item) => item.source === 'GITEE'
-      );
-      githubSocial.value = socialBinds.value.find(
-        (item) => item.source === 'GITHUB'
-      );
-    });
-  };
-  list();
-
-  /**
-   * 绑定或解绑
-   *
-   * @param source 来源
-   * @param sourceDescription 来源描述
-   */
-  const handleBind = (source: string, sourceDescription: string) => {
-    const isBind = socialBinds.value.some((item) => item.source === source);
-    if (isBind) {
-      proxy.$modal.warning({
-        title: `确认解除和${sourceDescription}平台的三方账号绑定吗?`,
-        titleAlign: 'start',
-        content: '解除绑定后，将无法使用该第三方账户登录到此账号',
-        hideCancel: false,
-        onOk: () => {
-          unbindSocial(source).then((res) => {
-            list();
-            proxy.$message.success(res.msg);
-          });
-        },
-      });
-      return;
-    }
-    proxy.$modal.info({
-      title: '提示',
-      titleAlign: 'start',
-      content: `确认和${sourceDescription}平台的三方账号绑定吗?`,
-      hideCancel: false,
-      onOk: () => {
-        socialAuth(source).then((res) => {
-          window.location.href = res.data;
-        });
-      },
-    });
-  };
-</script>
-
 <style scoped lang="less">
   :deep(.arco-link) {
     padding: 1px 2px;
diff --git a/src/views/system/user/center/components/security-settings/update-email.vue b/src/views/system/user/center/components/security-settings/update-email.vue
index 3387137..152acbb 100644
--- a/src/views/system/user/center/components/security-settings/update-email.vue
+++ b/src/views/system/user/center/components/security-settings/update-email.vue
@@ -1,106 +1,3 @@
-<template>
-  <a-list-item-meta>
-    <template #avatar>
-      <a-typography-paragraph>
-        {{ $t('userCenter.securitySettings.email.label') }}
-      </a-typography-paragraph>
-    </template>
-    <template #description>
-      <div class="tip">
-        {{ $t('userCenter.securitySettings.email.tip') }}
-      </div>
-      <div class="content">
-        <a-typography-paragraph v-if="userStore.email">
-          {{ userStore.email }}
-        </a-typography-paragraph>
-        <a-typography-paragraph v-else class="tip">
-          {{ $t('userCenter.securitySettings.email.content') }}
-        </a-typography-paragraph>
-      </div>
-      <div class="operation">
-        <a-link
-          :title="$t('userCenter.securitySettings.button.update')"
-          @click="toUpdate"
-        >
-          {{ $t('userCenter.securitySettings.button.update') }}
-        </a-link>
-      </div>
-    </template>
-  </a-list-item-meta>
-
-  <a-modal
-    :title="$t('userCenter.securitySettings.updateEmail.modal.title')"
-    :visible="visible"
-    :mask-closable="false"
-    :esc-to-close="false"
-    @ok="handleUpdate"
-    @cancel="handleCancel"
-  >
-    <a-form ref="formRef" :model="form" :rules="rules" size="large">
-      <a-form-item
-        :label="
-          $t('userCenter.securitySettings.updateEmail.form.label.newEmail')
-        "
-        field="newEmail"
-      >
-        <a-input
-          v-model="form.newEmail"
-          :placeholder="
-            $t(
-              'userCenter.securitySettings.updateEmail.form.placeholder.newEmail'
-            )
-          "
-          allow-clear
-        />
-      </a-form-item>
-      <a-form-item
-        :label="
-          $t('userCenter.securitySettings.updateEmail.form.label.captcha')
-        "
-        field="captcha"
-      >
-        <a-input
-          v-model="form.captcha"
-          :placeholder="
-            $t('userCenter.securitySettings.form.placeholder.captcha')
-          "
-          :max-length="6"
-          allow-clear
-          style="width: 80%"
-        />
-        <a-button
-          :loading="captchaLoading"
-          type="primary"
-          :disabled="captchaDisable"
-          class="captcha-btn"
-          @click="handleSendCaptcha"
-        >
-          {{ captchaBtnName }}
-        </a-button>
-      </a-form-item>
-      <a-form-item
-        :label="
-          $t(
-            'userCenter.securitySettings.updateEmail.form.label.currentPassword'
-          )
-        "
-        field="currentPassword"
-      >
-        <a-input-password
-          v-model="form.currentPassword"
-          :placeholder="
-            $t(
-              'userCenter.securitySettings.updateEmail.form.placeholder.currentPassword'
-            )
-          "
-          :max-length="32"
-          allow-clear
-        />
-      </a-form-item>
-    </a-form>
-  </a-modal>
-</template>
-
 <script lang="ts" setup>
   import { FieldRule } from '@arco-design/web-vue';
   import { getMailCaptcha } from '@/api/common/captcha';
@@ -241,6 +138,109 @@
   };
 </script>
 
+<template>
+  <a-list-item-meta>
+    <template #avatar>
+      <a-typography-paragraph>
+        {{ $t('userCenter.securitySettings.email.label') }}
+      </a-typography-paragraph>
+    </template>
+    <template #description>
+      <div class="tip">
+        {{ $t('userCenter.securitySettings.email.tip') }}
+      </div>
+      <div class="content">
+        <a-typography-paragraph v-if="userStore.email">
+          {{ userStore.email }}
+        </a-typography-paragraph>
+        <a-typography-paragraph v-else class="tip">
+          {{ $t('userCenter.securitySettings.email.content') }}
+        </a-typography-paragraph>
+      </div>
+      <div class="operation">
+        <a-link
+          :title="$t('userCenter.securitySettings.button.update')"
+          @click="toUpdate"
+        >
+          {{ $t('userCenter.securitySettings.button.update') }}
+        </a-link>
+      </div>
+    </template>
+  </a-list-item-meta>
+
+  <a-modal
+    :title="$t('userCenter.securitySettings.updateEmail.modal.title')"
+    :visible="visible"
+    :mask-closable="false"
+    :esc-to-close="false"
+    @ok="handleUpdate"
+    @cancel="handleCancel"
+  >
+    <a-form ref="formRef" :model="form" :rules="rules" size="large">
+      <a-form-item
+        :label="
+          $t('userCenter.securitySettings.updateEmail.form.label.newEmail')
+        "
+        field="newEmail"
+      >
+        <a-input
+          v-model="form.newEmail"
+          :placeholder="
+            $t(
+              'userCenter.securitySettings.updateEmail.form.placeholder.newEmail'
+            )
+          "
+          allow-clear
+        />
+      </a-form-item>
+      <a-form-item
+        :label="
+          $t('userCenter.securitySettings.updateEmail.form.label.captcha')
+        "
+        field="captcha"
+      >
+        <a-input
+          v-model="form.captcha"
+          :placeholder="
+            $t('userCenter.securitySettings.form.placeholder.captcha')
+          "
+          :max-length="6"
+          allow-clear
+          style="width: 80%"
+        />
+        <a-button
+          :loading="captchaLoading"
+          type="primary"
+          :disabled="captchaDisable"
+          class="captcha-btn"
+          @click="handleSendCaptcha"
+        >
+          {{ captchaBtnName }}
+        </a-button>
+      </a-form-item>
+      <a-form-item
+        :label="
+          $t(
+            'userCenter.securitySettings.updateEmail.form.label.currentPassword'
+          )
+        "
+        field="currentPassword"
+      >
+        <a-input-password
+          v-model="form.currentPassword"
+          :placeholder="
+            $t(
+              'userCenter.securitySettings.updateEmail.form.placeholder.currentPassword'
+            )
+          "
+          :max-length="32"
+          allow-clear
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
 <style scoped lang="less">
   .captcha-btn {
     margin-left: 5px;
diff --git a/src/views/system/user/center/components/security-settings/update-phone.vue b/src/views/system/user/center/components/security-settings/update-phone.vue
index cb859e6..2108ec3 100644
--- a/src/views/system/user/center/components/security-settings/update-phone.vue
+++ b/src/views/system/user/center/components/security-settings/update-phone.vue
@@ -1,113 +1,3 @@
-<template>
-  <a-list-item-meta>
-    <template #avatar>
-      <a-typography-paragraph>
-        {{ $t('userCenter.securitySettings.phone.label') }}
-      </a-typography-paragraph>
-    </template>
-    <template #description>
-      <div class="tip">
-        {{ $t('userCenter.securitySettings.phone.tip') }}
-      </div>
-      <div class="content">
-        <a-typography-paragraph v-if="userStore.phone">
-          {{ userStore.phone }}
-        </a-typography-paragraph>
-        <a-typography-paragraph v-else class="tip">
-          {{ $t('userCenter.securitySettings.phone.content') }}
-        </a-typography-paragraph>
-      </div>
-      <div class="operation">
-        <a-link
-          :title="$t('userCenter.securitySettings.button.update')"
-          @click="toUpdate"
-        >
-          {{ $t('userCenter.securitySettings.button.update') }}
-        </a-link>
-      </div>
-    </template>
-  </a-list-item-meta>
-
-  <a-modal
-    :title="$t('userCenter.securitySettings.updatePhone.modal.title')"
-    :visible="visible"
-    :mask-closable="false"
-    :esc-to-close="false"
-    @ok="handleUpdate"
-    @cancel="handleCancel"
-  >
-    <a-form ref="formRef" :model="form" :rules="rules" size="large">
-      <a-form-item
-        :label="
-          $t('userCenter.securitySettings.updatePhone.form.label.newPhone')
-        "
-        field="newPhone"
-      >
-        <a-input
-          v-model="form.newPhone"
-          :placeholder="
-            $t(
-              'userCenter.securitySettings.updatePhone.form.placeholder.newPhone',
-            )
-          "
-          allow-clear
-        />
-      </a-form-item>
-      <a-form-item
-        :label="
-          $t('userCenter.securitySettings.updatePhone.form.label.captcha')
-        "
-        field="captcha"
-      >
-        <a-input
-          v-model="form.captcha"
-          :placeholder="
-            $t('userCenter.securitySettings.form.placeholder.captcha')
-          "
-          :max-length="4"
-          allow-clear
-          style="width: 80%"
-        />
-        <a-button
-          :loading="captchaLoading"
-          type="primary"
-          :disabled="captchaDisable"
-          class="captcha-btn"
-          @click="handleOpenBehaviorCaptcha"
-        >
-          {{ captchaBtnName }}
-        </a-button>
-      </a-form-item>
-      <a-form-item
-        :label="
-          $t(
-            'userCenter.securitySettings.updatePhone.form.label.currentPassword',
-          )
-        "
-        field="currentPassword"
-      >
-        <a-input-password
-          v-model="form.currentPassword"
-          :placeholder="
-            $t(
-              'userCenter.securitySettings.updatePhone.form.placeholder.currentPassword',
-            )
-          "
-          :max-length="32"
-          allow-clear
-        />
-      </a-form-item>
-    </a-form>
-    <Verify
-      ref="verifyRef"
-      :mode="captchaMode"
-      :captcha-type="captchaType"
-      :img-size="{ width: '330px', height: '155px' }"
-      @success="handleSendCaptcha"
-    ></Verify>
-  </a-modal>
-</template>
-
 <script lang="ts" setup>
   import { FieldRule } from '@arco-design/web-vue';
   import { BehaviorCaptchaReq, getSmsCaptcha } from '@/api/common/captcha';
@@ -262,6 +152,116 @@
   };
 </script>
 
+<template>
+  <a-list-item-meta>
+    <template #avatar>
+      <a-typography-paragraph>
+        {{ $t('userCenter.securitySettings.phone.label') }}
+      </a-typography-paragraph>
+    </template>
+    <template #description>
+      <div class="tip">
+        {{ $t('userCenter.securitySettings.phone.tip') }}
+      </div>
+      <div class="content">
+        <a-typography-paragraph v-if="userStore.phone">
+          {{ userStore.phone }}
+        </a-typography-paragraph>
+        <a-typography-paragraph v-else class="tip">
+          {{ $t('userCenter.securitySettings.phone.content') }}
+        </a-typography-paragraph>
+      </div>
+      <div class="operation">
+        <a-link
+          :title="$t('userCenter.securitySettings.button.update')"
+          @click="toUpdate"
+        >
+          {{ $t('userCenter.securitySettings.button.update') }}
+        </a-link>
+      </div>
+    </template>
+  </a-list-item-meta>
+
+  <a-modal
+    :title="$t('userCenter.securitySettings.updatePhone.modal.title')"
+    :visible="visible"
+    :mask-closable="false"
+    :esc-to-close="false"
+    @ok="handleUpdate"
+    @cancel="handleCancel"
+  >
+    <a-form ref="formRef" :model="form" :rules="rules" size="large">
+      <a-form-item
+        :label="
+          $t('userCenter.securitySettings.updatePhone.form.label.newPhone')
+        "
+        field="newPhone"
+      >
+        <a-input
+          v-model="form.newPhone"
+          :placeholder="
+            $t(
+              'userCenter.securitySettings.updatePhone.form.placeholder.newPhone',
+            )
+          "
+          allow-clear
+        />
+      </a-form-item>
+      <a-form-item
+        :label="
+          $t('userCenter.securitySettings.updatePhone.form.label.captcha')
+        "
+        field="captcha"
+      >
+        <a-input
+          v-model="form.captcha"
+          :placeholder="
+            $t('userCenter.securitySettings.form.placeholder.captcha')
+          "
+          :max-length="4"
+          allow-clear
+          style="width: 80%"
+        />
+        <a-button
+          :loading="captchaLoading"
+          type="primary"
+          :disabled="captchaDisable"
+          class="captcha-btn"
+          @click="handleOpenBehaviorCaptcha"
+        >
+          {{ captchaBtnName }}
+        </a-button>
+      </a-form-item>
+      <a-form-item
+        :label="
+          $t(
+            'userCenter.securitySettings.updatePhone.form.label.currentPassword',
+          )
+        "
+        field="currentPassword"
+      >
+        <a-input-password
+          v-model="form.currentPassword"
+          :placeholder="
+            $t(
+              'userCenter.securitySettings.updatePhone.form.placeholder.currentPassword',
+            )
+          "
+          :max-length="32"
+          allow-clear
+        />
+      </a-form-item>
+    </a-form>
+    <Verify
+      ref="verifyRef"
+      :mode="captchaMode"
+      :captcha-type="captchaType"
+      :img-size="{ width: '330px', height: '155px' }"
+      @success="handleSendCaptcha"
+    ></Verify>
+  </a-modal>
+</template>
+
 <style scoped lang="less">
   .captcha-btn {
     margin-left: 5px;
diff --git a/src/views/system/user/center/components/security-settings/update-pwd.vue b/src/views/system/user/center/components/security-settings/update-pwd.vue
index 05fd12e..fe503e7 100644
--- a/src/views/system/user/center/components/security-settings/update-pwd.vue
+++ b/src/views/system/user/center/components/security-settings/update-pwd.vue
@@ -1,98 +1,3 @@
-<template>
-  <a-list-item-meta>
-    <template #avatar>
-      <a-typography-paragraph>
-        {{ $t('userCenter.securitySettings.password.label') }}
-      </a-typography-paragraph>
-    </template>
-    <template #description>
-      <div class="tip">
-        {{ $t('userCenter.securitySettings.password.tip') }}
-      </div>
-      <div class="content">
-        <a-typography-paragraph v-if="userStore.pwdResetTime">
-          {{ $t('userCenter.securitySettings.content.hasBeenSet') }}
-        </a-typography-paragraph>
-        <a-typography-paragraph v-else class="tip">
-          {{ $t('userCenter.securitySettings.password.content') }}
-        </a-typography-paragraph>
-      </div>
-      <div class="operation">
-        <a-link
-          :title="$t('userCenter.securitySettings.button.update')"
-          @click="toUpdate"
-        >
-          {{ $t('userCenter.securitySettings.button.update') }}
-        </a-link>
-      </div>
-    </template>
-  </a-list-item-meta>
-
-  <a-modal
-    :title="$t('userCenter.securitySettings.updatePwd.modal.title')"
-    :visible="visible"
-    :mask-closable="false"
-    :esc-to-close="false"
-    @ok="handleUpdate"
-    @cancel="handleCancel"
-  >
-    <a-form ref="formRef" :model="form" :rules="rules" size="large">
-      <a-form-item
-        v-if="userStore.pwdResetTime"
-        :label="
-          $t('userCenter.securitySettings.updatePwd.form.label.oldPassword')
-        "
-        field="oldPassword"
-      >
-        <a-input-password
-          v-model="form.oldPassword"
-          :placeholder="
-            $t(
-              'userCenter.securitySettings.updatePwd.form.placeholder.oldPassword'
-            )
-          "
-          :max-length="32"
-          allow-clear
-        />
-      </a-form-item>
-      <a-form-item
-        :label="
-          $t('userCenter.securitySettings.updatePwd.form.label.newPassword')
-        "
-        field="newPassword"
-      >
-        <a-input-password
-          v-model="form.newPassword"
-          :placeholder="
-            $t(
-              'userCenter.securitySettings.updatePwd.form.placeholder.newPassword'
-            )
-          "
-          :max-length="32"
-          allow-clear
-        />
-      </a-form-item>
-      <a-form-item
-        :label="
-          $t('userCenter.securitySettings.updatePwd.form.label.rePassword')
-        "
-        field="rePassword"
-      >
-        <a-input-password
-          v-model="form.rePassword"
-          :placeholder="
-            $t(
-              'userCenter.securitySettings.updatePwd.form.placeholder.rePassword'
-            )
-          "
-          :max-length="32"
-          allow-clear
-        />
-      </a-form-item>
-    </a-form>
-  </a-modal>
-</template>
-
 <script lang="ts" setup>
   import { FieldRule } from '@arco-design/web-vue';
   import { updatePassword } from '@/api/system/user-center';
@@ -208,4 +113,99 @@
   };
 </script>
 
+<template>
+  <a-list-item-meta>
+    <template #avatar>
+      <a-typography-paragraph>
+        {{ $t('userCenter.securitySettings.password.label') }}
+      </a-typography-paragraph>
+    </template>
+    <template #description>
+      <div class="tip">
+        {{ $t('userCenter.securitySettings.password.tip') }}
+      </div>
+      <div class="content">
+        <a-typography-paragraph v-if="userStore.pwdResetTime">
+          {{ $t('userCenter.securitySettings.content.hasBeenSet') }}
+        </a-typography-paragraph>
+        <a-typography-paragraph v-else class="tip">
+          {{ $t('userCenter.securitySettings.password.content') }}
+        </a-typography-paragraph>
+      </div>
+      <div class="operation">
+        <a-link
+          :title="$t('userCenter.securitySettings.button.update')"
+          @click="toUpdate"
+        >
+          {{ $t('userCenter.securitySettings.button.update') }}
+        </a-link>
+      </div>
+    </template>
+  </a-list-item-meta>
+
+  <a-modal
+    :title="$t('userCenter.securitySettings.updatePwd.modal.title')"
+    :visible="visible"
+    :mask-closable="false"
+    :esc-to-close="false"
+    @ok="handleUpdate"
+    @cancel="handleCancel"
+  >
+    <a-form ref="formRef" :model="form" :rules="rules" size="large">
+      <a-form-item
+        v-if="userStore.pwdResetTime"
+        :label="
+          $t('userCenter.securitySettings.updatePwd.form.label.oldPassword')
+        "
+        field="oldPassword"
+      >
+        <a-input-password
+          v-model="form.oldPassword"
+          :placeholder="
+            $t(
+              'userCenter.securitySettings.updatePwd.form.placeholder.oldPassword'
+            )
+          "
+          :max-length="32"
+          allow-clear
+        />
+      </a-form-item>
+      <a-form-item
+        :label="
+          $t('userCenter.securitySettings.updatePwd.form.label.newPassword')
+        "
+        field="newPassword"
+      >
+        <a-input-password
+          v-model="form.newPassword"
+          :placeholder="
+            $t(
+              'userCenter.securitySettings.updatePwd.form.placeholder.newPassword'
+            )
+          "
+          :max-length="32"
+          allow-clear
+        />
+      </a-form-item>
+      <a-form-item
+        :label="
+          $t('userCenter.securitySettings.updatePwd.form.label.rePassword')
+        "
+        field="rePassword"
+      >
+        <a-input-password
+          v-model="form.rePassword"
+          :placeholder="
+            $t(
+              'userCenter.securitySettings.updatePwd.form.placeholder.rePassword'
+            )
+          "
+          :max-length="32"
+          allow-clear
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
 <style scoped lang="less"></style>
diff --git a/src/views/system/user/center/components/user-panel.vue b/src/views/system/user/center/components/user-panel.vue
index 3508961..eb0285b 100644
--- a/src/views/system/user/center/components/user-panel.vue
+++ b/src/views/system/user/center/components/user-panel.vue
@@ -1,3 +1,98 @@
+<script lang="ts" setup>
+  import { FileItem } from '@arco-design/web-vue';
+  import { uploadAvatar, cropperOptions } from '@/api/system/user-center';
+  import { useUserStore } from '@/store';
+  import getAvatar from '@/utils/avatar';
+  import { VueCropper } from 'vue-cropper';
+  import 'vue-cropper/dist/index.css';
+
+  const { proxy } = getCurrentInstance() as any;
+  const userStore = useUserStore();
+  const cropperRef = ref();
+  const visible = ref(false);
+  const previews: any = ref({});
+  const previewStyle: any = ref({});
+  const fileRef = ref(reactive({ name: 'avatar.png' }));
+  const avatar = {
+    uid: '-2',
+    name: 'avatar.png',
+    url: getAvatar(userStore.avatar, userStore.gender),
+  };
+  const avatarList = ref<FileItem[]>([avatar]);
+
+  const options: cropperOptions = reactive({
+    img: '',
+    autoCrop: true,
+    autoCropWidth: 160,
+    autoCropHeight: 160,
+    fixedBox: true,
+    fixed: true,
+    full: false,
+    centerBox: true,
+    canMove: true,
+    outputSize: 1,
+    outputType: 'png',
+  });
+
+  /**
+   * 上传前弹出裁剪框
+   *
+   * @param file 头像
+   */
+  const handleBeforeUpload = (file: File): boolean => {
+    fileRef.value = file;
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      options.img = reader.result;
+    };
+    visible.value = true;
+    return false;
+  };
+
+  /**
+   * 关闭裁剪框
+   */
+  const handleCancel = () => {
+    fileRef.value = { name: '' };
+    options.img = '';
+    visible.value = false;
+  };
+
+  /**
+   * 上传头像
+   */
+  const handleUpload = () => {
+    cropperRef.value.getCropBlob((data: any) => {
+      const formData = new FormData();
+      formData.append('avatarFile', data, fileRef.value?.name);
+      uploadAvatar(formData).then((res) => {
+        userStore.avatar = res.data.avatar;
+        avatarList.value[0].url = getAvatar(res.data.avatar, undefined);
+        proxy.$message.success(res.msg);
+        handleCancel();
+      });
+    });
+  };
+
+  /**
+   * 实时预览
+   *
+   * @param data data 预览图像
+   */
+  const handleRealTime = (data: any) => {
+    previewStyle.value = {
+      width: `${data.w}px`,
+      height: `${data.h}px`,
+      overflow: 'hidden',
+      margin: '0',
+      zoom: 100 / data.h,
+      borderRadius: '50%',
+    };
+    previews.value = data;
+  };
+</script>
+
 <template>
   <a-card :bordered="false">
     <a-space :size="54">
@@ -111,101 +206,6 @@
   </a-card>
 </template>
 
-<script lang="ts" setup>
-  import { FileItem } from '@arco-design/web-vue';
-  import { uploadAvatar, cropperOptions } from '@/api/system/user-center';
-  import { useUserStore } from '@/store';
-  import getAvatar from '@/utils/avatar';
-  import { VueCropper } from 'vue-cropper';
-  import 'vue-cropper/dist/index.css';
-
-  const { proxy } = getCurrentInstance() as any;
-  const userStore = useUserStore();
-  const cropperRef = ref();
-  const visible = ref(false);
-  const previews: any = ref({});
-  const previewStyle: any = ref({});
-  const fileRef = ref(reactive({ name: 'avatar.png' }));
-  const avatar = {
-    uid: '-2',
-    name: 'avatar.png',
-    url: getAvatar(userStore.avatar, userStore.gender),
-  };
-  const avatarList = ref<FileItem[]>([avatar]);
-
-  const options: cropperOptions = reactive({
-    img: '',
-    autoCrop: true,
-    autoCropWidth: 160,
-    autoCropHeight: 160,
-    fixedBox: true,
-    fixed: true,
-    full: false,
-    centerBox: true,
-    canMove: true,
-    outputSize: 1,
-    outputType: 'png',
-  });
-
-  /**
-   * 上传前弹出裁剪框
-   *
-   * @param file 头像
-   */
-  const handleBeforeUpload = (file: File): boolean => {
-    fileRef.value = file;
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => {
-      options.img = reader.result;
-    };
-    visible.value = true;
-    return false;
-  };
-
-  /**
-   * 关闭裁剪框
-   */
-  const handleCancel = () => {
-    fileRef.value = { name: '' };
-    options.img = '';
-    visible.value = false;
-  };
-
-  /**
-   * 上传头像
-   */
-  const handleUpload = () => {
-    cropperRef.value.getCropBlob((data: any) => {
-      const formData = new FormData();
-      formData.append('avatarFile', data, fileRef.value?.name);
-      uploadAvatar(formData).then((res) => {
-        userStore.avatar = res.data.avatar;
-        avatarList.value[0].url = getAvatar(res.data.avatar, undefined);
-        proxy.$message.success(res.msg);
-        handleCancel();
-      });
-    });
-  };
-
-  /**
-   * 实时预览
-   *
-   * @param data data 预览图像
-   */
-  const handleRealTime = (data: any) => {
-    previewStyle.value = {
-      width: `${data.w}px`,
-      height: `${data.h}px`,
-      overflow: 'hidden',
-      margin: '0',
-      zoom: 100 / data.h,
-      borderRadius: '50%',
-    };
-    previews.value = data;
-  };
-</script>
-
 <style scoped lang="less">
   .arco-card {
     padding: 14px 0 4px 4px;
diff --git a/src/views/system/user/center/index.vue b/src/views/system/user/center/index.vue
index ed8b5a5..532be19 100644
--- a/src/views/system/user/center/index.vue
+++ b/src/views/system/user/center/index.vue
@@ -1,3 +1,26 @@
+<script lang="ts" setup>
+  import UserPanel from './components/user-panel.vue';
+  import BasicInfo from './components/basic-info.vue';
+  import SecuritySettings from './components/security-settings.vue';
+  import OperationLog from './components/operation-log.vue';
+
+  const route = useRoute();
+  const activeKey = ref('1');
+  const tab = route.query.tab as string;
+
+  onMounted(() => {
+    if (tab === 'security-setting') {
+      activeKey.value = '2';
+    }
+  });
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'UserCenter',
+  };
+</script>
+
 <template>
   <div class="container">
     <Breadcrumb :items="['menu.user.center']" />
@@ -28,29 +51,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-  import UserPanel from './components/user-panel.vue';
-  import BasicInfo from './components/basic-info.vue';
-  import SecuritySettings from './components/security-settings.vue';
-  import OperationLog from './components/operation-log.vue';
-
-  const route = useRoute();
-  const activeKey = ref('1');
-  const tab = route.query.tab as string;
-
-  onMounted(() => {
-    if (tab === 'security-setting') {
-      activeKey.value = '2';
-    }
-  });
-</script>
-
-<script lang="ts">
-  export default {
-    name: 'UserCenter',
-  };
-</script>
-
 <style scoped lang="less">
   .container {
     padding: 0 20px 20px 20px;
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 5afb009..b366367 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,3 +1,424 @@
+<script lang="ts" setup>
+  import { TreeNodeData } from '@arco-design/web-vue';
+  import {
+    DataRecord,
+    ListParam,
+    list,
+    get,
+    add,
+    update,
+    del,
+    resetPassword,
+    updateUserRole,
+  } from '@/api/system/user';
+  import { listDeptTree, listRoleDict } from '@/api/common';
+  import { LabelValueState } from '@/store/modules/dict/types';
+  import getAvatar from '@/utils/avatar';
+  import checkPermission from '@/utils/permission';
+
+  const { proxy } = getCurrentInstance() as any;
+  const { dis_enable_status_enum } = proxy.useDict('dis_enable_status_enum');
+
+  const dataList = ref<DataRecord[]>([]);
+  const dataDetail = ref<DataRecord>({});
+  const total = ref(0);
+  const ids = ref<Array<number>>([]);
+  const title = ref('');
+  const single = ref(true);
+  const multiple = ref(true);
+  const showQuery = ref(true);
+  const loading = ref(false);
+  const detailLoading = ref(false);
+  const exportLoading = ref(false);
+  const visible = ref(false);
+  const userRoleVisible = ref(false);
+  const detailVisible = ref(false);
+  const deptLoading = ref(false);
+  const roleLoading = ref(false);
+  const deptOptions = ref<TreeNodeData[]>([]);
+  const roleOptions = ref<LabelValueState[]>([]);
+  const deptTree = ref<TreeNodeData[]>([]);
+  const deptName = ref('');
+
+  const data = reactive({
+    // 查询参数
+    queryParams: {
+      username: undefined,
+      status: undefined,
+      createTime: undefined,
+      deptId: undefined,
+      page: 1,
+      size: 10,
+      sort: ['createTime,desc'],
+    },
+    // 表单数据
+    form: {} as DataRecord,
+    // 表单验证规则
+    rules: {
+      username: [{ required: true, message: '请输入用户名' }],
+      nickname: [{ required: true, message: '请输入昵称' }],
+      deptId: [{ required: true, message: '请选择所属部门' }],
+      roleIds: [{ required: true, message: '请选择所属角色' }],
+    },
+  });
+  const { queryParams, form, rules } = toRefs(data);
+
+  /**
+   * 查询部门树
+   *
+   * @param name 名称
+   */
+  const getDeptTree = (name: string) => {
+    listDeptTree({ name }).then((res) => {
+      deptTree.value = res.data;
+      setTimeout(() => {
+        proxy.$refs.deptTreeRef.expandAll();
+      }, 0);
+    });
+  };
+  getDeptTree('');
+  watch(deptName, (val) => {
+    getDeptTree(val);
+  });
+
+  /**
+   * 查询列表
+   *
+   * @param params 查询参数
+   */
+  const getList = (params: ListParam = { ...queryParams.value }) => {
+    loading.value = true;
+    list(params)
+      .then((res) => {
+        dataList.value = res.data.list;
+        total.value = res.data.total;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+  getList();
+
+  /**
+   * 打开新增对话框
+   */
+  const toAdd = () => {
+    reset();
+    getDeptOptions();
+    getRoleOptions();
+    title.value = '新增用户';
+    visible.value = true;
+  };
+
+  /**
+   * 打开修改对话框
+   *
+   * @param id ID
+   */
+  const toUpdate = (id: number) => {
+    reset();
+    getDeptOptions();
+    getRoleOptions();
+    get(id).then((res) => {
+      form.value = res.data;
+      title.value = '修改用户';
+      visible.value = true;
+    });
+  };
+
+  /**
+   * 打开分配角色对话框
+   *
+   * @param id ID
+   */
+  const toUpdateRole = (id: number) => {
+    reset();
+    getRoleOptions();
+    get(id).then((res) => {
+      form.value = res.data;
+      userRoleVisible.value = true;
+    });
+  };
+
+  /**
+   * 查询部门列表
+   */
+  const getDeptOptions = () => {
+    deptLoading.value = true;
+    listDeptTree({})
+      .then((res) => {
+        deptOptions.value = res.data;
+      })
+      .finally(() => {
+        deptLoading.value = false;
+      });
+  };
+
+  /**
+   * 查询角色列表
+   */
+  const getRoleOptions = () => {
+    roleLoading.value = true;
+    listRoleDict({})
+      .then((res) => {
+        roleOptions.value = res.data;
+      })
+      .finally(() => {
+        roleLoading.value = false;
+      });
+  };
+
+  /**
+   * 重置表单
+   */
+  const reset = () => {
+    form.value = {
+      gender: 1,
+    };
+    proxy.$refs.formRef?.resetFields();
+  };
+
+  /**
+   * 取消
+   */
+  const handleCancel = () => {
+    visible.value = false;
+    userRoleVisible.value = false;
+    proxy.$refs.formRef?.resetFields();
+    proxy.$refs.userRoleFormRef?.resetFields();
+  };
+
+  /**
+   * 确定
+   */
+  const handleOk = () => {
+    proxy.$refs.formRef.validate((valid: any) => {
+      if (!valid) {
+        if (form.value.id !== undefined) {
+          update(form.value, form.value.id).then((res) => {
+            handleCancel();
+            getList();
+            proxy.$message.success(res.msg);
+          });
+        } else {
+          add(form.value).then((res) => {
+            handleCancel();
+            getList();
+            proxy.$message.success(res.msg);
+          });
+        }
+      }
+    });
+  };
+
+  /**
+   * 修改角色
+   */
+  const handleUpdateRole = () => {
+    proxy.$refs.userRoleFormRef.validate((valid: any) => {
+      if (!valid && form.value.id !== undefined) {
+        updateUserRole({ roleIds: form.value.roleIds }, form.value.id).then(
+          (res) => {
+            handleCancel();
+            getList();
+            proxy.$message.success(res.msg);
+          },
+        );
+      }
+    });
+  };
+
+  /**
+   * 查看详情
+   *
+   * @param id ID
+   */
+  const toDetail = async (id: number) => {
+    if (detailLoading.value) return;
+    detailLoading.value = true;
+    detailVisible.value = true;
+    get(id)
+      .then((res) => {
+        dataDetail.value = res.data;
+      })
+      .finally(() => {
+        detailLoading.value = false;
+      });
+  };
+
+  /**
+   * 关闭详情
+   */
+  const handleDetailCancel = () => {
+    detailVisible.value = false;
+  };
+
+  /**
+   * 批量删除
+   */
+  const handleBatchDelete = () => {
+    if (ids.value.length === 0) {
+      proxy.$message.info('请选择要删除的数据');
+    } else {
+      proxy.$modal.warning({
+        title: '警告',
+        titleAlign: 'start',
+        content: `是否确定删除所选的${ids.value.length}条数据？`,
+        hideCancel: false,
+        onOk: () => {
+          handleDelete(ids.value);
+        },
+      });
+    }
+  };
+
+  /**
+   * 删除
+   *
+   * @param ids ID 列表
+   */
+  const handleDelete = (ids: Array<number>) => {
+    del(ids).then((res) => {
+      proxy.$message.success(res.msg);
+      getList();
+      proxy.$refs.tableRef.selectAll(false);
+    });
+  };
+
+  /**
+   * 重置密码
+   *
+   * @param id ID
+   */
+  const handleResetPassword = (id: number) => {
+    resetPassword(id).then((res) => {
+      proxy.$message.success(res.msg);
+    });
+  };
+
+  /**
+   * 已选择的数据行发生改变时触发
+   *
+   * @param rowKeys ID 列表
+   */
+  const handleSelectionChange = (rowKeys: Array<any>) => {
+    ids.value = rowKeys;
+    single.value = rowKeys.length !== 1;
+    multiple.value = !rowKeys.length;
+  };
+
+  /**
+   * 导出
+   */
+  const handleExport = () => {
+    if (exportLoading.value) return;
+    exportLoading.value = true;
+    proxy
+      .download('/system/user/export', { ...queryParams.value }, '用户数据')
+      .finally(() => {
+        exportLoading.value = false;
+      });
+  };
+
+  /**
+   * 修改状态
+   *
+   * @param record 记录信息
+   */
+  const handleChangeStatus = (record: DataRecord) => {
+    const { id } = record;
+    if (id) {
+      const tip = record.status === 1 ? '启用' : '禁用';
+      get(id)
+        .then((res) => {
+          res.data.status = record.status;
+          update(res.data, id)
+            .then(() => {
+              proxy.$message.success(`${tip}成功`);
+            })
+            .catch(() => {
+              record.status = record.status === 1 ? 2 : 1;
+            });
+        })
+        .catch(() => {
+          record.status = record.status === 1 ? 2 : 1;
+        });
+    }
+  };
+
+  /**
+   * 过滤部门列表
+   *
+   * @param searchValue 搜索值
+   * @param nodeData 节点值
+   */
+  const filterDeptOptions = (searchValue: string, nodeData: TreeNodeData) => {
+    if (nodeData.title) {
+      return (
+        nodeData.title.toLowerCase().indexOf(searchValue.toLowerCase()) > -1
+      );
+    }
+    return false;
+  };
+
+  /**
+   * 根据选中部门查询
+   *
+   * @param keys 选中节点 key
+   */
+  const handleSelectNode = (keys: Array<any>) => {
+    if (queryParams.value.deptId === keys[0]) {
+      queryParams.value.deptId = undefined;
+      // 如已选中，再次点击则取消选中
+      proxy.$refs.deptTreeRef.selectNode(keys, false);
+    } else {
+      queryParams.value.deptId = keys.length === 1 ? keys[0] : undefined;
+    }
+    handleQuery();
+  };
+
+  /**
+   * 查询
+   */
+  const handleQuery = () => {
+    getList();
+  };
+
+  /**
+   * 重置
+   */
+  const resetQuery = () => {
+    proxy.$refs.queryRef.resetFields();
+    handleQuery();
+  };
+
+  /**
+   * 切换页码
+   *
+   * @param current 页码
+   */
+  const handlePageChange = (current: number) => {
+    queryParams.value.page = current;
+    getList();
+  };
+
+  /**
+   * 切换每页条数
+   *
+   * @param pageSize 每页条数
+   */
+  const handlePageSizeChange = (pageSize: number) => {
+    queryParams.value.size = pageSize;
+    getList();
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'User',
+  };
+</script>
+
 <template>
   <div class="app-container">
     <Breadcrumb :items="['menu.system', 'menu.system.user.list']" />
@@ -513,425 +934,4 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-  import { TreeNodeData } from '@arco-design/web-vue';
-  import {
-    DataRecord,
-    ListParam,
-    list,
-    get,
-    add,
-    update,
-    del,
-    resetPassword,
-    updateUserRole,
-  } from '@/api/system/user';
-  import { listDeptTree, listRoleDict } from '@/api/common';
-  import { LabelValueState } from '@/store/modules/dict/types';
-  import getAvatar from '@/utils/avatar';
-  import checkPermission from '@/utils/permission';
-
-  const { proxy } = getCurrentInstance() as any;
-  const { dis_enable_status_enum } = proxy.useDict('dis_enable_status_enum');
-
-  const dataList = ref<DataRecord[]>([]);
-  const dataDetail = ref<DataRecord>({});
-  const total = ref(0);
-  const ids = ref<Array<number>>([]);
-  const title = ref('');
-  const single = ref(true);
-  const multiple = ref(true);
-  const showQuery = ref(true);
-  const loading = ref(false);
-  const detailLoading = ref(false);
-  const exportLoading = ref(false);
-  const visible = ref(false);
-  const userRoleVisible = ref(false);
-  const detailVisible = ref(false);
-  const deptLoading = ref(false);
-  const roleLoading = ref(false);
-  const deptOptions = ref<TreeNodeData[]>([]);
-  const roleOptions = ref<LabelValueState[]>([]);
-  const deptTree = ref<TreeNodeData[]>([]);
-  const deptName = ref('');
-
-  const data = reactive({
-    // 查询参数
-    queryParams: {
-      username: undefined,
-      status: undefined,
-      createTime: undefined,
-      deptId: undefined,
-      page: 1,
-      size: 10,
-      sort: ['createTime,desc'],
-    },
-    // 表单数据
-    form: {} as DataRecord,
-    // 表单验证规则
-    rules: {
-      username: [{ required: true, message: '请输入用户名' }],
-      nickname: [{ required: true, message: '请输入昵称' }],
-      deptId: [{ required: true, message: '请选择所属部门' }],
-      roleIds: [{ required: true, message: '请选择所属角色' }],
-    },
-  });
-  const { queryParams, form, rules } = toRefs(data);
-
-  /**
-   * 查询部门树
-   *
-   * @param name 名称
-   */
-  const getDeptTree = (name: string) => {
-    listDeptTree({ name }).then((res) => {
-      deptTree.value = res.data;
-      setTimeout(() => {
-        proxy.$refs.deptTreeRef.expandAll();
-      }, 0);
-    });
-  };
-  getDeptTree('');
-  watch(deptName, (val) => {
-    getDeptTree(val);
-  });
-
-  /**
-   * 查询列表
-   *
-   * @param params 查询参数
-   */
-  const getList = (params: ListParam = { ...queryParams.value }) => {
-    loading.value = true;
-    list(params)
-      .then((res) => {
-        dataList.value = res.data.list;
-        total.value = res.data.total;
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  };
-  getList();
-
-  /**
-   * 打开新增对话框
-   */
-  const toAdd = () => {
-    reset();
-    getDeptOptions();
-    getRoleOptions();
-    title.value = '新增用户';
-    visible.value = true;
-  };
-
-  /**
-   * 打开修改对话框
-   *
-   * @param id ID
-   */
-  const toUpdate = (id: number) => {
-    reset();
-    getDeptOptions();
-    getRoleOptions();
-    get(id).then((res) => {
-      form.value = res.data;
-      title.value = '修改用户';
-      visible.value = true;
-    });
-  };
-
-  /**
-   * 打开分配角色对话框
-   *
-   * @param id ID
-   */
-  const toUpdateRole = (id: number) => {
-    reset();
-    getRoleOptions();
-    get(id).then((res) => {
-      form.value = res.data;
-      userRoleVisible.value = true;
-    });
-  };
-
-  /**
-   * 查询部门列表
-   */
-  const getDeptOptions = () => {
-    deptLoading.value = true;
-    listDeptTree({})
-      .then((res) => {
-        deptOptions.value = res.data;
-      })
-      .finally(() => {
-        deptLoading.value = false;
-      });
-  };
-
-  /**
-   * 查询角色列表
-   */
-  const getRoleOptions = () => {
-    roleLoading.value = true;
-    listRoleDict({})
-      .then((res) => {
-        roleOptions.value = res.data;
-      })
-      .finally(() => {
-        roleLoading.value = false;
-      });
-  };
-
-  /**
-   * 重置表单
-   */
-  const reset = () => {
-    form.value = {
-      gender: 1,
-    };
-    proxy.$refs.formRef?.resetFields();
-  };
-
-  /**
-   * 取消
-   */
-  const handleCancel = () => {
-    visible.value = false;
-    userRoleVisible.value = false;
-    proxy.$refs.formRef?.resetFields();
-    proxy.$refs.userRoleFormRef?.resetFields();
-  };
-
-  /**
-   * 确定
-   */
-  const handleOk = () => {
-    proxy.$refs.formRef.validate((valid: any) => {
-      if (!valid) {
-        if (form.value.id !== undefined) {
-          update(form.value, form.value.id).then((res) => {
-            handleCancel();
-            getList();
-            proxy.$message.success(res.msg);
-          });
-        } else {
-          add(form.value).then((res) => {
-            handleCancel();
-            getList();
-            proxy.$message.success(res.msg);
-          });
-        }
-      }
-    });
-  };
-
-  /**
-   * 修改角色
-   */
-  const handleUpdateRole = () => {
-    proxy.$refs.userRoleFormRef.validate((valid: any) => {
-      if (!valid && form.value.id !== undefined) {
-        updateUserRole({ roleIds: form.value.roleIds }, form.value.id).then(
-          (res) => {
-            handleCancel();
-            getList();
-            proxy.$message.success(res.msg);
-          },
-        );
-      }
-    });
-  };
-
-  /**
-   * 查看详情
-   *
-   * @param id ID
-   */
-  const toDetail = async (id: number) => {
-    if (detailLoading.value) return;
-    detailLoading.value = true;
-    detailVisible.value = true;
-    get(id)
-      .then((res) => {
-        dataDetail.value = res.data;
-      })
-      .finally(() => {
-        detailLoading.value = false;
-      });
-  };
-
-  /**
-   * 关闭详情
-   */
-  const handleDetailCancel = () => {
-    detailVisible.value = false;
-  };
-
-  /**
-   * 批量删除
-   */
-  const handleBatchDelete = () => {
-    if (ids.value.length === 0) {
-      proxy.$message.info('请选择要删除的数据');
-    } else {
-      proxy.$modal.warning({
-        title: '警告',
-        titleAlign: 'start',
-        content: `是否确定删除所选的${ids.value.length}条数据？`,
-        hideCancel: false,
-        onOk: () => {
-          handleDelete(ids.value);
-        },
-      });
-    }
-  };
-
-  /**
-   * 删除
-   *
-   * @param ids ID 列表
-   */
-  const handleDelete = (ids: Array<number>) => {
-    del(ids).then((res) => {
-      proxy.$message.success(res.msg);
-      getList();
-      proxy.$refs.tableRef.selectAll(false);
-    });
-  };
-
-  /**
-   * 重置密码
-   *
-   * @param id ID
-   */
-  const handleResetPassword = (id: number) => {
-    resetPassword(id).then((res) => {
-      proxy.$message.success(res.msg);
-    });
-  };
-
-  /**
-   * 已选择的数据行发生改变时触发
-   *
-   * @param rowKeys ID 列表
-   */
-  const handleSelectionChange = (rowKeys: Array<any>) => {
-    ids.value = rowKeys;
-    single.value = rowKeys.length !== 1;
-    multiple.value = !rowKeys.length;
-  };
-
-  /**
-   * 导出
-   */
-  const handleExport = () => {
-    if (exportLoading.value) return;
-    exportLoading.value = true;
-    proxy
-      .download('/system/user/export', { ...queryParams.value }, '用户数据')
-      .finally(() => {
-        exportLoading.value = false;
-      });
-  };
-
-  /**
-   * 修改状态
-   *
-   * @param record 记录信息
-   */
-  const handleChangeStatus = (record: DataRecord) => {
-    const { id } = record;
-    if (id) {
-      const tip = record.status === 1 ? '启用' : '禁用';
-      get(id)
-        .then((res) => {
-          res.data.status = record.status;
-          update(res.data, id)
-            .then(() => {
-              proxy.$message.success(`${tip}成功`);
-            })
-            .catch(() => {
-              record.status = record.status === 1 ? 2 : 1;
-            });
-        })
-        .catch(() => {
-          record.status = record.status === 1 ? 2 : 1;
-        });
-    }
-  };
-
-  /**
-   * 过滤部门列表
-   *
-   * @param searchValue 搜索值
-   * @param nodeData 节点值
-   */
-  const filterDeptOptions = (searchValue: string, nodeData: TreeNodeData) => {
-    if (nodeData.title) {
-      return (
-        nodeData.title.toLowerCase().indexOf(searchValue.toLowerCase()) > -1
-      );
-    }
-    return false;
-  };
-
-  /**
-   * 根据选中部门查询
-   *
-   * @param keys 选中节点 key
-   */
-  const handleSelectNode = (keys: Array<any>) => {
-    if (queryParams.value.deptId === keys[0]) {
-      queryParams.value.deptId = undefined;
-      // 如已选中，再次点击则取消选中
-      proxy.$refs.deptTreeRef.selectNode(keys, false);
-    } else {
-      queryParams.value.deptId = keys.length === 1 ? keys[0] : undefined;
-    }
-    handleQuery();
-  };
-
-  /**
-   * 查询
-   */
-  const handleQuery = () => {
-    getList();
-  };
-
-  /**
-   * 重置
-   */
-  const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
-    handleQuery();
-  };
-
-  /**
-   * 切换页码
-   *
-   * @param current 页码
-   */
-  const handlePageChange = (current: number) => {
-    queryParams.value.page = current;
-    getList();
-  };
-
-  /**
-   * 切换每页条数
-   *
-   * @param pageSize 每页条数
-   */
-  const handlePageSizeChange = (pageSize: number) => {
-    queryParams.value.size = pageSize;
-    getList();
-  };
-</script>
-
-<script lang="ts">
-  export default {
-    name: 'User',
-  };
-</script>
-
 <style scoped lang="less"></style>
diff --git a/src/views/tool/generator/index.vue b/src/views/tool/generator/index.vue
index ef528f5..5664c14 100644
--- a/src/views/tool/generator/index.vue
+++ b/src/views/tool/generator/index.vue
@@ -1,3 +1,255 @@
+<script lang="ts" setup>
+  import { useClipboard } from '@vueuse/core';
+  import { Codemirror } from 'vue-codemirror';
+  import { java } from '@codemirror/lang-java';
+  import { javascript } from '@codemirror/lang-javascript';
+
+  import {
+    TableRecord,
+    TableParam,
+    FieldConfigRecord,
+    GenConfigRecord,
+    listTable,
+    listFieldConfig,
+    getGenConfig,
+    GeneratorConfigRecord,
+    saveConfig,
+    GeneratePreviewRecord,
+    preview,
+    generate,
+  } from '@/api/tool/generator';
+
+  const { proxy } = getCurrentInstance() as any;
+  const { form_type_enum, query_type_enum } = proxy.useDict(
+    'form_type_enum',
+    'query_type_enum',
+  );
+
+  const { copy, copied } = useClipboard();
+  const extensions = [java(), javascript()];
+  const tableList = ref<TableRecord[]>([]);
+  const fieldConfigList = ref<FieldConfigRecord[]>([]);
+  const total = ref(0);
+  const title = ref('');
+  const showQuery = ref(true);
+  const loading = ref(false);
+  const visible = ref(false);
+  const fieldConfigLoading = ref(false);
+  const copyCodeContent = ref();
+  const generatePreviewList = ref<GeneratePreviewRecord[]>([]);
+  const previewVisible = ref(false);
+
+  const data = reactive({
+    // 查询参数
+    queryParams: {
+      tableName: undefined,
+      page: 1,
+      size: 10,
+    },
+    // 表单数据
+    form: {} as GenConfigRecord,
+    // 代码生成配置数据
+    config: {} as GeneratorConfigRecord,
+    // 表单验证规则
+    rules: {
+      author: [{ required: true, message: '请输入作者名称' }],
+      moduleName: [{ required: true, message: '请输入所属模块' }],
+      packageName: [{ required: true, message: '请输入模块包名' }],
+      businessName: [{ required: true, message: '请输入业务名称' }],
+    },
+  });
+  const { queryParams, form, rules, config } = toRefs(data);
+
+  /**
+   * 查询列表
+   *
+   * @param params 查询参数
+   */
+  const getList = (params: TableParam = { ...queryParams.value }) => {
+    loading.value = true;
+    listTable(params)
+      .then((res) => {
+        tableList.value = res.data.list;
+        total.value = res.data.total;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+  getList();
+
+  /**
+   * 打开配置对话框
+   *
+   * @param tableName 表名称
+   */
+  const toConfig = (tableName: string) => {
+    let tableComment = tableList.value.filter(
+      (t) => t.tableName === tableName,
+    )[0].comment;
+    tableComment = tableComment ? `（${tableComment}）` : ' ';
+    title.value = `${tableName}${tableComment}配置`;
+    visible.value = true;
+    // 查询字段配置
+    getFieldConfig(tableName, false);
+    // 查询生成配置
+    getGenConfig(tableName).then((res) => {
+      form.value = res.data;
+      form.value.isOverride = false;
+    });
+  };
+
+  /**
+   * 同步
+   *
+   * @param tableName 表名称
+   */
+  const handleRefresh = (tableName: string) => {
+    getFieldConfig(tableName, true);
+  };
+
+  /**
+   * 查询字段配置
+   *
+   * @param tableName 表名称
+   * @param requireSync 是否需要同步
+   */
+  const getFieldConfig = (tableName: string, requireSync: boolean) => {
+    fieldConfigLoading.value = true;
+    listFieldConfig(tableName, requireSync)
+      .then((res) => {
+        fieldConfigList.value = res.data;
+      })
+      .finally(() => {
+        fieldConfigLoading.value = false;
+      });
+  };
+
+  /**
+   * 确定
+   */
+  const handleOk = () => {
+    proxy.$refs.formRef.validate((valid: any) => {
+      if (!valid) {
+        config.value.fieldConfigs = fieldConfigList.value;
+        config.value.genConfig = form.value;
+        saveConfig(form.value.tableName, config.value).then((res) => {
+          handleCancel();
+          getList();
+          proxy.$message.success(res.msg);
+        });
+      }
+    });
+  };
+
+  /**
+   * 关闭配置
+   */
+  const handleCancel = () => {
+    visible.value = false;
+    proxy.$refs.formRef?.resetFields();
+    fieldConfigList.value = [];
+  };
+
+  /**
+   * 生成预览
+   *
+   * @param tableName 表名称
+   */
+  const handlePreview = (tableName: string) => {
+    preview(tableName).then((res) => {
+      generatePreviewList.value = res.data;
+      copyCodeContent.value = generatePreviewList.value[0].content;
+      previewVisible.value = true;
+    });
+  };
+
+  /**
+   * 关闭预览
+   */
+  const handlePreviewCancel = () => {
+    generatePreviewList.value = [];
+    copyCodeContent.value = '';
+    previewVisible.value = false;
+  };
+
+  /**
+   * 点击 Tab
+   *
+   * @param key Tab 键
+   */
+  const handleTabClick = (key: any) => {
+    copyCodeContent.value = generatePreviewList.value.filter(
+      (p) => p.fileName === key,
+    )[0].content;
+  };
+
+  /**
+   * 复制代码
+   *
+   */
+  const handleCopy = () => {
+    copy(copyCodeContent.value);
+  };
+  watch(copied, () => {
+    if (copied.value) {
+      proxy.$message.success('复制成功');
+    }
+  });
+
+  /**
+   * 生成代码
+   *
+   * @param tableName 表名称
+   */
+  const handleGenerate = (tableName: string) => {
+    generate(tableName).then((res) => {
+      proxy.$message.success(res.msg);
+    });
+  };
+
+  /**
+   * 查询
+   */
+  const handleQuery = () => {
+    getList();
+  };
+
+  /**
+   * 重置
+   */
+  const resetQuery = () => {
+    proxy.$refs.queryRef.resetFields();
+    handleQuery();
+  };
+
+  /**
+   * 切换页码
+   *
+   * @param current 页码
+   */
+  const handlePageChange = (current: number) => {
+    queryParams.value.page = current;
+    getList();
+  };
+
+  /**
+   * 切换每页条数
+   *
+   * @param pageSize 每页条数
+   */
+  const handlePageSizeChange = (pageSize: number) => {
+    queryParams.value.size = pageSize;
+    getList();
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Generator',
+  };
+</script>
+
 <template>
   <div class="app-container">
     <Breadcrumb :items="['menu.tool', 'menu.tool.generator.list']" />
@@ -314,258 +566,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-  import { useClipboard } from '@vueuse/core';
-  import { Codemirror } from 'vue-codemirror';
-  import { java } from '@codemirror/lang-java';
-  import { javascript } from '@codemirror/lang-javascript';
-
-  import {
-    TableRecord,
-    TableParam,
-    FieldConfigRecord,
-    GenConfigRecord,
-    listTable,
-    listFieldConfig,
-    getGenConfig,
-    GeneratorConfigRecord,
-    saveConfig,
-    GeneratePreviewRecord,
-    preview,
-    generate,
-  } from '@/api/tool/generator';
-
-  const { proxy } = getCurrentInstance() as any;
-  const { form_type_enum, query_type_enum } = proxy.useDict(
-    'form_type_enum',
-    'query_type_enum',
-  );
-
-  const { copy, copied } = useClipboard();
-  const extensions = [java(), javascript()];
-  const tableList = ref<TableRecord[]>([]);
-  const fieldConfigList = ref<FieldConfigRecord[]>([]);
-  const total = ref(0);
-  const title = ref('');
-  const showQuery = ref(true);
-  const loading = ref(false);
-  const visible = ref(false);
-  const fieldConfigLoading = ref(false);
-  const copyCodeContent = ref();
-  const generatePreviewList = ref<GeneratePreviewRecord[]>([]);
-  const previewVisible = ref(false);
-
-  const data = reactive({
-    // 查询参数
-    queryParams: {
-      tableName: undefined,
-      page: 1,
-      size: 10,
-    },
-    // 表单数据
-    form: {} as GenConfigRecord,
-    // 代码生成配置数据
-    config: {} as GeneratorConfigRecord,
-    // 表单验证规则
-    rules: {
-      author: [{ required: true, message: '请输入作者名称' }],
-      moduleName: [{ required: true, message: '请输入所属模块' }],
-      packageName: [{ required: true, message: '请输入模块包名' }],
-      businessName: [{ required: true, message: '请输入业务名称' }],
-    },
-  });
-  const { queryParams, form, rules, config } = toRefs(data);
-
-  /**
-   * 查询列表
-   *
-   * @param params 查询参数
-   */
-  const getList = (params: TableParam = { ...queryParams.value }) => {
-    loading.value = true;
-    listTable(params)
-      .then((res) => {
-        tableList.value = res.data.list;
-        total.value = res.data.total;
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  };
-  getList();
-
-  /**
-   * 打开配置对话框
-   *
-   * @param tableName 表名称
-   */
-  const toConfig = (tableName: string) => {
-    let tableComment = tableList.value.filter(
-      (t) => t.tableName === tableName,
-    )[0].comment;
-    tableComment = tableComment ? `（${tableComment}）` : ' ';
-    title.value = `${tableName}${tableComment}配置`;
-    visible.value = true;
-    // 查询字段配置
-    getFieldConfig(tableName, false);
-    // 查询生成配置
-    getGenConfig(tableName).then((res) => {
-      form.value = res.data;
-      form.value.isOverride = false;
-    });
-  };
-
-  /**
-   * 同步
-   *
-   * @param tableName 表名称
-   */
-  const handleRefresh = (tableName: string) => {
-    getFieldConfig(tableName, true);
-  };
-
-  /**
-   * 查询字段配置
-   *
-   * @param tableName 表名称
-   * @param requireSync 是否需要同步
-   */
-  const getFieldConfig = (tableName: string, requireSync: boolean) => {
-    fieldConfigLoading.value = true;
-    listFieldConfig(tableName, requireSync)
-      .then((res) => {
-        fieldConfigList.value = res.data;
-      })
-      .finally(() => {
-        fieldConfigLoading.value = false;
-      });
-  };
-
-  /**
-   * 确定
-   */
-  const handleOk = () => {
-    proxy.$refs.formRef.validate((valid: any) => {
-      if (!valid) {
-        config.value.fieldConfigs = fieldConfigList.value;
-        config.value.genConfig = form.value;
-        saveConfig(form.value.tableName, config.value).then((res) => {
-          handleCancel();
-          getList();
-          proxy.$message.success(res.msg);
-        });
-      }
-    });
-  };
-
-  /**
-   * 关闭配置
-   */
-  const handleCancel = () => {
-    visible.value = false;
-    proxy.$refs.formRef?.resetFields();
-    fieldConfigList.value = [];
-  };
-
-  /**
-   * 生成预览
-   *
-   * @param tableName 表名称
-   */
-  const handlePreview = (tableName: string) => {
-    preview(tableName).then((res) => {
-      generatePreviewList.value = res.data;
-      copyCodeContent.value = generatePreviewList.value[0].content;
-      previewVisible.value = true;
-    });
-  };
-
-  /**
-   * 关闭预览
-   */
-  const handlePreviewCancel = () => {
-    generatePreviewList.value = [];
-    copyCodeContent.value = '';
-    previewVisible.value = false;
-  };
-
-  /**
-   * 点击 Tab
-   *
-   * @param key Tab 键
-   */
-  const handleTabClick = (key: any) => {
-    copyCodeContent.value = generatePreviewList.value.filter(
-      (p) => p.fileName === key,
-    )[0].content;
-  };
-
-  /**
-   * 复制代码
-   *
-   */
-  const handleCopy = () => {
-    copy(copyCodeContent.value);
-  };
-  watch(copied, () => {
-    if (copied.value) {
-      proxy.$message.success('复制成功');
-    }
-  });
-
-  /**
-   * 生成代码
-   *
-   * @param tableName 表名称
-   */
-  const handleGenerate = (tableName: string) => {
-    generate(tableName).then((res) => {
-      proxy.$message.success(res.msg);
-    });
-  };
-
-  /**
-   * 查询
-   */
-  const handleQuery = () => {
-    getList();
-  };
-
-  /**
-   * 重置
-   */
-  const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
-    handleQuery();
-  };
-
-  /**
-   * 切换页码
-   *
-   * @param current 页码
-   */
-  const handlePageChange = (current: number) => {
-    queryParams.value.page = current;
-    getList();
-  };
-
-  /**
-   * 切换每页条数
-   *
-   * @param pageSize 每页条数
-   */
-  const handlePageSizeChange = (pageSize: number) => {
-    queryParams.value.size = pageSize;
-    getList();
-  };
-</script>
-
-<script lang="ts">
-  export default {
-    name: 'Generator',
-  };
-</script>
-
 <style scoped lang="less">
   :deep(.arco-tabs-content) {
     padding-top: 0;