refactor: 修改右侧设置组件

longyi-xw · Feb 15, 2024 · d08864a · d08864a
1 parent 2742844
commit d08864a
Show file tree

Hide file tree

Showing 16 changed files with 171 additions and 116 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>