diff --git a/package.json b/package.json
index 49374ae..01a2fff 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
     "@element-plus/icons-vue": "2.3.1",
-    "ant-design-vue": "4.x",
+    "ant-design-vue": "~4.1.2",
     "axios": "1.6.5",
     "dayjs": "1.11.10",
     "element-plus": "2.5.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d394302..6de735c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,7 +12,7 @@ dependencies:
     specifier: 2.3.1
     version: 2.3.1(vue@3.4.15)
   ant-design-vue:
-    specifier: 4.x
+    specifier: ~4.1.2
     version: 4.1.2(vue@3.4.15)
   axios:
     specifier: 1.6.5
diff --git a/src/components/ThemeSwitch/index.vue b/src/components/ThemeSwitch/index.vue
index 229c798..98801f2 100644
--- a/src/components/ThemeSwitch/index.vue
+++ b/src/components/ThemeSwitch/index.vue
@@ -9,23 +9,25 @@ const handleThemeItemClick = (value: ThemeName) => {
 </script>
 
 <template>
-  <a-dropdown trigger="click" @command="setTheme">
-    <div>
-      <a-tooltip title="主题模式" placement="bottom">
-        <StarOutlined />
-      </a-tooltip>
-    </div>
-    <template #overlay>
-      <a-menu>
-        <a-menu-item
-          v-for="(theme, index) in themeList"
-          :key="index"
-          :disabled="activeThemeName === theme.name"
-          @click="handleThemeItemClick(theme.name)"
-        >
-          <span>{{ theme.title }}</span>
-        </a-menu-item>
-      </a-menu>
-    </template>
-  </a-dropdown>
+  <div>
+    <a-dropdown trigger="click" @command="setTheme">
+      <div>
+        <a-tooltip title="主题模式" placement="bottom">
+          <StarOutlined />
+        </a-tooltip>
+      </div>
+      <template #overlay>
+        <a-menu>
+          <a-menu-item
+            v-for="(theme, index) in themeList"
+            :key="index"
+            :disabled="activeThemeName === theme.name"
+            @click="handleThemeItemClick(theme.name)"
+          >
+            <span>{{ theme.title }}</span>
+          </a-menu-item>
+        </a-menu>
+      </template>
+    </a-dropdown>
+  </div>
 </template>
diff --git a/src/hooks/usePagination.ts b/src/hooks/usePagination.ts
index 7fb0901..b053d22 100644
--- a/src/hooks/usePagination.ts
+++ b/src/hooks/usePagination.ts
@@ -36,6 +36,10 @@ export function usePagination(initialPaginationData: PaginationData = {}) {
   const handleSizeChange = (value: number) => {
     paginationData.pageSize = value;
   };
+  const handlePaginationChange = (page: number, pageSize: number) => {
+    handleCurrentChange(page);
+    handleSizeChange(pageSize);
+  };
 
-  return { paginationData, handleCurrentChange, handleSizeChange };
+  return { paginationData, handleCurrentChange, handleSizeChange, handlePaginationChange };
 }
diff --git a/src/layouts/components/NavigationBar/index.vue b/src/layouts/components/NavigationBar/index.vue
index ddffef7..666eb47 100644
--- a/src/layouts/components/NavigationBar/index.vue
+++ b/src/layouts/components/NavigationBar/index.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, h } from "vue";
 import { useRouter } from "vue-router";
 import { storeToRefs } from "pinia";
 import { useAppStore } from "@/store/modules/app";
 import { useSettingsStore } from "@/store/modules/settings";
 import { useUserStore } from "@/store/modules/user";
-import { UserFilled } from "@element-plus/icons-vue";
+import { UserOutlined } from "@ant-design/icons-vue";
 import Hamburger from "../Hamburger/index.vue";
 import Breadcrumb from "../Breadcrumb/index.vue";
 import Sidebar from "../Sidebar/index.vue";
@@ -51,7 +51,7 @@ const logout = () => {
       <div class="right-menu-item">
         <a-dropdown>
           <div class="right-menu-avatar">
-            <el-avatar :icon="UserFilled" :size="30" />
+            <a-avatar :icon="h(UserOutlined)" :size="30" />
             <span>{{ userStore.username }}</span>
           </div>
           <template #overlay>
@@ -131,7 +131,7 @@ const logout = () => {
         display: flex;
         align-items: center;
 
-        .el-avatar {
+        .ant-avatar {
           margin-right: 10px;
         }
 
diff --git a/src/layouts/components/RightPanel/index.vue b/src/layouts/components/RightPanel/index.vue
index 22bb27a..c61405e 100644
--- a/src/layouts/components/RightPanel/index.vue
+++ b/src/layouts/components/RightPanel/index.vue
@@ -18,7 +18,7 @@ const show = ref(false);
   <div class="handle-button" @click="show = true">
     <SettingOutlined style="font-size: 22px" />
   </div>
-  <a-drawer v-model:open="show" width="300px" :closable="false">
+  <a-drawer v-model:open="show" width="300px" rootStyle="z-index: 2000" :closable="false">
     <slot />
   </a-drawer>
 </template>
diff --git a/src/layouts/components/Settings/SelectLayoutMode.vue b/src/layouts/components/Settings/SelectLayoutMode.vue
index 574f451..a236226 100644
--- a/src/layouts/components/Settings/SelectLayoutMode.vue
+++ b/src/layouts/components/Settings/SelectLayoutMode.vue
@@ -14,30 +14,34 @@ const isLeftTop = computed(() => layoutMode.value === "left-top");
 
 <template>
   <div class="select-layout-mode">
-    <el-tooltip content="左侧模式">
-      <el-container class="layout-mode left" :class="{ active: isLeft }" @click="layoutMode = 'left'">
-        <el-aside />
-        <el-container>
-          <el-header />
-          <el-main />
-        </el-container>
-      </el-container>
-    </el-tooltip>
-    <el-tooltip content="顶部模式">
-      <el-container class="layout-mode top" :class="{ active: isTop }" @click="layoutMode = 'top'">
-        <el-header />
-        <el-main />
-      </el-container>
-    </el-tooltip>
-    <el-tooltip content="混合模式">
-      <el-container class="layout-mode left-top" :class="{ active: isLeftTop }" @click="layoutMode = 'left-top'">
-        <el-header />
-        <el-container>
-          <el-aside />
-          <el-main />
-        </el-container>
-      </el-container>
-    </el-tooltip>
+    <a-tooltip title="左侧模式">
+      <section class="container layout-mode left" :class="{ active: isLeft }" @click="layoutMode = 'left'">
+        <aside class="layout-aside" />
+        <section class="container is-vertical">
+          <header class="layout-header" />
+          <main class="layout-main" />
+        </section>
+      </section>
+    </a-tooltip>
+    <a-tooltip title="顶部模式">
+      <sectionr class="container layout-mode top is-vertical" :class="{ active: isTop }" @click="layoutMode = 'top'">
+        <header class="layout-header" />
+        <main class="layout-main" />
+      </sectionr>
+    </a-tooltip>
+    <a-tooltip title="混合模式">
+      <section
+        class="container layout-mode left-top is-vertical"
+        :class="{ active: isLeftTop }"
+        @click="layoutMode = 'left-top'"
+      >
+        <header class="layout-header" />
+        <section class="container">
+          <aside class="layout-aside" />
+          <main class="layout-main" />
+        </section>
+      </section>
+    </a-tooltip>
   </div>
 </template>
 
@@ -47,13 +51,23 @@ const isLeftTop = computed(() => layoutMode.value === "left-top");
   justify-content: space-between;
 }
 
+.container {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  flex-basis: auto;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
 .layout-mode {
   width: 60px;
   flex-grow: 0;
   overflow: hidden;
   cursor: pointer;
   border-radius: 6px;
-  border: 2px solid #00000000;
+  border: 2px solid rgba(0, 0, 0, 0);
+
   &:hover {
     border: 2px solid var(--el-color-primary);
   }
@@ -63,43 +77,67 @@ const isLeftTop = computed(() => layoutMode.value === "left-top");
   border: 2px solid var(--el-color-primary);
 }
 
-.el-header {
+.is-vertical {
+  flex-direction: column;
+}
+
+.layout-header {
   height: 12px;
+  padding: 0 20px;
+  box-sizing: border-box;
+  flex-shrink: 0;
 }
 
-.el-aside {
+.layout-main {
+  display: block;
+  flex: 1;
+  flex-basis: auto;
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 20px;
+}
+
+.layout-aside {
   width: 16px;
+  overflow: auto;
+  box-sizing: border-box;
+  flex-shrink: 0;
 }
 
 .left {
-  .el-header {
+  .layout-header {
     background-color: var(--el-border-color);
   }
-  .el-aside {
+
+  .layout-aside {
     background-color: var(--el-color-primary);
   }
-  .el-main {
+
+  .layout-main {
     background-color: var(--el-fill-color);
   }
 }
 
 .top {
-  .el-header {
+  .layout-header {
     background-color: var(--el-color-primary);
   }
-  .el-main {
+
+  .layout-main {
     background-color: var(--el-fill-color);
   }
 }
 
 .left-top {
-  .el-header {
+  .layout-header {
     background-color: var(--el-border-color);
   }
-  .el-aside {
+
+  .layout-aside {
     background-color: var(--el-color-primary);
   }
-  .el-main {
+
+  .layout-main {
     background-color: var(--el-fill-color);
   }
 }
diff --git a/src/layouts/components/TagsView/ScrollPane.vue b/src/layouts/components/TagsView/ScrollPane.vue
index 89f1ce6..91511b6 100644
--- a/src/layouts/components/TagsView/ScrollPane.vue
+++ b/src/layouts/components/TagsView/ScrollPane.vue
@@ -5,7 +5,7 @@ import { useSettingsStore } from "@/store/modules/settings";
 import { useRouteListener } from "@/hooks/useRouteListener";
 import Screenfull from "@/components/Screenfull/index.vue";
 import { ElScrollbar } from "element-plus";
-import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
+import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons-vue";
 
 interface Props {
   tagRefs: InstanceType<typeof RouterLink>[];
@@ -103,17 +103,13 @@ listenerRouteChange(() => {
 
 <template>
   <div class="scroll-container">
-    <el-icon class="arrow left" @click="scrollTo('left')">
-      <ArrowLeft />
-    </el-icon>
+    <ArrowLeftOutlined class="arrow left" @click="scrollTo('left')" />
     <el-scrollbar ref="scrollbarRef" @wheel.passive="wheelScroll" @scroll="scroll">
       <div ref="scrollbarContentRef" class="scrollbar-content">
         <slot />
       </div>
     </el-scrollbar>
-    <el-icon class="arrow right" @click="scrollTo('right')">
-      <ArrowRight />
-    </el-icon>
+    <ArrowRightOutlined class="arrow right" @click="scrollTo('right')" />
     <Screenfull v-if="settingsStore.showScreenfull" element=".app-main" :content="true" class="screenfull" />
   </div>
 </template>
@@ -128,6 +124,10 @@ listenerRouteChange(() => {
     width: 40px;
     height: 100%;
     cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
     &.left {
       box-shadow: 5px 0 5px -6px #ccc;
     }
diff --git a/src/views/dashboard/components/Admin.vue b/src/views/dashboard/components/Admin.vue
index 7964172..71a7e74 100644
--- a/src/views/dashboard/components/Admin.vue
+++ b/src/views/dashboard/components/Admin.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container center">
-    <el-empty description="Admin 权限可见" />
+    <a-empty description="Admin 权限可见" />
   </div>
 </template>
 
diff --git a/src/views/dashboard/components/Editor.vue b/src/views/dashboard/components/Editor.vue
index 2f369d6..cb3da80 100644
--- a/src/views/dashboard/components/Editor.vue
+++ b/src/views/dashboard/components/Editor.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container center">
-    <el-empty description="Editor 权限可见" />
+    <a-empty description="Editor 权限可见" />
   </div>
 </template>
 
diff --git a/src/views/hook-demo/use-fetch-select.vue b/src/views/hook-demo/use-fetch-select.vue
index 221a969..a18337f 100644
--- a/src/views/hook-demo/use-fetch-select.vue
+++ b/src/views/hook-demo/use-fetch-select.vue
@@ -2,7 +2,7 @@
 import { useFetchSelect } from "@/hooks/useFetchSelect";
 import { getSelectDataApi } from "@/api/hook-demo/use-fetch-select";
 
-const { loading, options, value } = useFetchSelect({
+const { options, value } = useFetchSelect({
   api: getSelectDataApi
 });
 </script>
@@ -11,10 +11,12 @@ const { loading, options, value } = useFetchSelect({
   <div class="app-container">
     <h4>该示例是演示：通过 hook 自动调用 api 后拿到 Select 组件需要的数据并传递给 Select 组件</h4>
     <h5>Select 示例</h5>
-    <el-select :loading="loading" v-model="value" filterable>
-      <el-option v-for="(item, index) in options" v-bind="item" :key="index" placeholder="请选择" />
-    </el-select>
-    <h5>Select V2 示例（如果数据量过多，可以选择该组件）</h5>
-    <el-select-v2 :loading="loading" v-model="value" :options="options" filterable placeholder="请选择" />
+    <a-select style="width: 100%" v-model:value="value" showSearch>
+      <a-select-option v-for="(item, index) in options" v-bind="item" :key="index" placeholder="请选择">
+        {{ item.label }}
+      </a-select-option>
+    </a-select>
+    <h5>Select V2 示例（如果数据量过多，虚拟滚动技术）</h5>
+    <a-select v-model:value="value" style="width: 100%" placeholder="请选择" :options="options" />
   </div>
 </template>
diff --git a/src/views/menu/menu1/index.vue b/src/views/menu/menu1/index.vue
index 4215ad4..d6f8e77 100644
--- a/src/views/menu/menu1/index.vue
+++ b/src/views/menu/menu1/index.vue
@@ -10,9 +10,9 @@
         src/config/route.ts
       </el-link>
     </h4>
-    <el-card header="二级路由 - menu1">
+    <a-card title="二级路由 - menu1">
       <router-view />
-    </el-card>
+    </a-card>
   </div>
 </template>
 
diff --git a/src/views/menu/menu1/menu1-2/index.vue b/src/views/menu/menu1/menu1-2/index.vue
index 79eb6d5..ffa1dbb 100644
--- a/src/views/menu/menu1/menu1-2/index.vue
+++ b/src/views/menu/menu1/menu1-2/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
-    <el-card header="三级路由 - menu1-2">
+    <a-card title="三级路由 - menu1-2">
       <router-view />
-    </el-card>
+    </a-card>
   </div>
 </template>
diff --git a/src/views/permission/directive.vue b/src/views/permission/directive.vue
index 7b05de8..768cfca 100644
--- a/src/views/permission/directive.vue
+++ b/src/views/permission/directive.vue
@@ -16,38 +16,42 @@ const handleRolesChange = () => {
     <!-- v-permission 示例 -->
     <div :key="key" class="margin-top-30">
       <div>
-        <el-tag v-permission="['admin']" type="success" size="large" effect="plain">
+        <a-tag v-permission="['admin']" color="success" size="large">
           这里采用了 v-permission="['admin']" 所以只有 admin 可以看见这句话
-        </el-tag>
+        </a-tag>
       </div>
       <div>
-        <el-tag v-permission="['editor']" type="success" size="large" effect="plain">
+        <a-tag v-permission="['editor']" color="success" size="large">
           这里采用了 v-permission="['editor']" 所以只有 editor 可以看见这句话
-        </el-tag>
+        </a-tag>
       </div>
       <div class="margin-top-15">
-        <el-tag v-permission="['admin', 'editor']" type="success" size="large" effect="plain">
+        <a-tag v-permission="['admin', 'editor']" color="success" size="large">
           这里采用了 v-permission="['admin', 'editor']" 所以 admin 和 editor 都可以看见这句话
-        </el-tag>
+        </a-tag>
       </div>
     </div>
     <!-- checkPermission 示例 -->
     <div :key="`checkPermission${key}`" class="margin-top-30">
-      <el-tag type="warning" size="large">
+      <a-tag color="warning" size="large">
         例如 Element Plus 的 el-tab-pane 或 el-table-column 以及其它动态渲染 Dom 的场景不适合使用
         v-permission，这种情况下你可以通过 v-if 和 checkPermission 来实现：
-      </el-tag>
-      <el-tabs type="border-card" class="margin-top-15">
-        <el-tab-pane v-if="checkPermission(['admin'])" label="admin">
-          这里采用了 <el-tag>v-if="checkPermission(['admin'])"</el-tag> 所以只有 admin 可以看见这句话
-        </el-tab-pane>
-        <el-tab-pane v-if="checkPermission(['editor'])" label="editor">
-          这里采用了 <el-tag>v-if="checkPermission(['editor'])"</el-tag> 所以只有 editor 可以看见这句话
-        </el-tab-pane>
-        <el-tab-pane v-if="checkPermission(['admin', 'editor'])" label="admin 和 editor">
-          这里采用了 <el-tag>v-if="checkPermission(['admin', 'editor'])"</el-tag> 所以 admin 和 editor 都可以看见这句话
-        </el-tab-pane>
-      </el-tabs>
+      </a-tag>
+      <a-card class="margin-top-15">
+        <a-tabs type="card">
+          <a-tab-pane v-if="checkPermission(['admin'])" tab="admin">
+            这里采用了 <a-tag color="processing">v-if="checkPermission(['admin'])"</a-tag> 所以只有 admin 可以看见这句话
+          </a-tab-pane>
+          <a-tab-pane v-if="checkPermission(['editor'])" tab="editor">
+            这里采用了 <a-tag color="processing">v-if="checkPermission(['editor'])"</a-tag> 所以只有 editor
+            可以看见这句话
+          </a-tab-pane>
+          <a-tab-pane v-if="checkPermission(['admin', 'editor'])" tab="admin 和 editor">
+            这里采用了 <a-tag color="processing">v-if="checkPermission(['admin', 'editor'])"</a-tag> 所以 admin 和
+            editor 都可以看见这句话
+          </a-tab-pane>
+        </a-tabs>
+      </a-card>
     </div>
   </div>
 </template>
@@ -56,6 +60,7 @@ const handleRolesChange = () => {
 .margin-top-15 {
   margin-top: 15px;
 }
+
 .margin-top-30 {
   margin-top: 30px;
 }
diff --git a/src/views/permission/page.vue b/src/views/permission/page.vue
index 8212d9e..72fed56 100644
--- a/src/views/permission/page.vue
+++ b/src/views/permission/page.vue
@@ -11,12 +11,12 @@ const handleRolesChange = () => {
 <template>
   <div class="app-container">
     <SwitchRoles @change="handleRolesChange" />
-    <el-tag type="warning" size="large">当前页面只有 admin 权限可见，切换权限后将不能进入该页面</el-tag>
+    <a-tag color="warning" size="large">当前页面只有 admin 权限可见，切换权限后将不能进入该页面</a-tag>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.el-tag {
+.ant-tag {
   margin-top: 15px;
 }
 </style>
diff --git a/src/views/table/element-plus/index.vue b/src/views/table/element-plus/index.vue
index 49f8ac5..e667317 100644
--- a/src/views/table/element-plus/index.vue
+++ b/src/views/table/element-plus/index.vue
@@ -20,7 +20,7 @@ defineOptions({
 });
 
 const loading = ref<boolean>(false);
-const { paginationData, handleCurrentChange, handleSizeChange } = usePagination();
+const { paginationData, handlePaginationChange } = usePagination();
 
 //#region 增
 const dialogVisible = ref<boolean>(false);
@@ -175,16 +175,16 @@ watch([() => paginationData.currentPage, () => paginationData.pageSize], getTabl
           <el-table-column prop="username" label="用户名" align="center" />
           <el-table-column prop="roles" label="角色" align="center">
             <template #default="scope">
-              <el-tag v-if="scope.row.roles === 'admin'" effect="plain">admin</el-tag>
-              <el-tag v-else type="warning" effect="plain">{{ scope.row.roles }}</el-tag>
+              <a-tag v-if="scope.row.roles === 'admin'">admin</a-tag>
+              <a-tag v-else color="warning">{{ scope.row.roles }}</a-tag>
             </template>
           </el-table-column>
           <el-table-column prop="phone" label="手机号" align="center" />
           <el-table-column prop="email" label="邮箱" align="center" />
           <el-table-column prop="status" label="状态" align="center">
             <template #default="scope">
-              <el-tag v-if="scope.row.status" type="success" effect="plain">启用</el-tag>
-              <el-tag v-else type="danger" effect="plain">禁用</el-tag>
+              <a-tag v-if="scope.row.status" color="success" effect="plain">启用</a-tag>
+              <a-tag v-else color="error">禁用</a-tag>
             </template>
           </el-table-column>
           <el-table-column prop="createTime" label="创建时间" align="center" />
@@ -197,16 +197,20 @@ watch([() => paginationData.currentPage, () => paginationData.pageSize], getTabl
         </el-table>
       </div>
       <div class="pager-wrapper">
-        <el-pagination
-          background
-          :layout="paginationData.layout"
-          :page-sizes="paginationData.pageSizes"
+        <a-pagination
+          :pageSizeOptions="paginationData.pageSizes"
           :total="paginationData.total"
-          :page-size="paginationData.pageSize"
-          :currentPage="paginationData.currentPage"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
+          :show-total="(total: number) => `共 ${total} 条`"
+          v-model:page-size="paginationData.pageSize"
+          v-model:current="paginationData.currentPage"
+          show-size-changer
+          show-quick-jumper
+          @change="handlePaginationChange"
+        >
+          <template #buildOptionText="props">
+            <span>{{ props.value }}条/页</span>
+          </template>
+        </a-pagination>
       </div>
     </a-card>
     <!-- 新增/修改 -->