refactor: right-panel修改

longyi-xw · Feb 14, 2024 · 2742844 · 2742844
1 parent 6cb6e2a
commit 2742844
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 64 deletions.
diff --git a/src/components/ThemeSwitch/index.vue b/src/components/ThemeSwitch/index.vue
@@ -1,30 +1,31 @@
 <script lang="ts" setup>
-import { useTheme } from "@/hooks/useTheme";
-import { MagicStick } from "@element-plus/icons-vue";
+import { useTheme, ThemeName } from "@/hooks/useTheme";
+import { StarOutlined } from "@ant-design/icons-vue";
 
 const { themeList, activeThemeName, setTheme } = useTheme();
+const handleThemeItemClick = (value: ThemeName) => {
+  setTheme(value);
+};
 </script>
 
 <template>
-  <el-dropdown trigger="click" @command="setTheme">
+  <a-dropdown trigger="click" @command="setTheme">
     <div>
-      <el-tooltip effect="dark" content="主题模式" placement="bottom">
-        <el-icon :size="20">
-          <MagicStick />
-        </el-icon>
-      </el-tooltip>
+      <a-tooltip title="主题模式" placement="bottom">
+        <StarOutlined />
+      </a-tooltip>
     </div>
-    <template #dropdown>
-      <el-dropdown-menu>
-        <el-dropdown-item
+    <template #overlay>
+      <a-menu>
+        <a-menu-item
           v-for="(theme, index) in themeList"
           :key="index"
           :disabled="activeThemeName === theme.name"
-          :command="theme.name"
+          @click="handleThemeItemClick(theme.name)"
         >
           <span>{{ theme.title }}</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
+        </a-menu-item>
+      </a-menu>
     </template>
-  </el-dropdown>
+  </a-dropdown>
 </template>
diff --git a/src/layouts/components/AppMain.vue b/src/layouts/components/AppMain.vue
@@ -5,6 +5,10 @@ import Footer from "./Footer/index.vue";
 
 const tagsViewStore = useTagsViewStore();
 const settingsStore = useSettingsStore();
+
+const getBackTopTarget = () => {
+  return document.querySelector(".app-scrollbar");
+};
 </script>
 
 <template>
@@ -22,9 +26,9 @@ const settingsStore = useSettingsStore();
       <Footer v-if="settingsStore.showFooter" />
     </div>
     <!-- 返回顶部 -->
-    <el-backtop />
+    <a-back-top />
     <!-- 返回顶部（固定 Header 情况下） -->
-    <el-backtop target=".app-scrollbar" />
+    <a-back-top :target="getBackTopTarget" />
   </section>
 </template>
 
@@ -43,6 +47,7 @@ const settingsStore = useSettingsStore();
   @extend %scrollbar;
   display: flex;
   flex-direction: column;
+
   .app-container-grow {
     flex-grow: 1;
   }

diff --git a/src/layouts/components/Breadcrumb/index.vue b/src/layouts/components/Breadcrumb/index.vue
@@ -40,31 +40,31 @@ listenerRouteChange((route) => {
 </script>
 
 <template>
-  <el-breadcrumb class="app-breadcrumb">
-    <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
+  <a-breadcrumb class="app-breadcrumb">
+    <a-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
       <span v-if="item.redirect === 'noRedirect' || index === breadcrumbs.length - 1" class="no-redirect">
         {{ item.meta.title }}
       </span>
       <a v-else @click.prevent="handleLink(item)">
         {{ item.meta.title }}
       </a>
-    </el-breadcrumb-item>
-  </el-breadcrumb>
+    </a-breadcrumb-item>
+  </a-breadcrumb>
 </template>
 
 <style lang="scss" scoped>
-.el-breadcrumb__inner,
-.el-breadcrumb__inner a {
+.ant-breadcrumb-link,
+.ant-breadcrumb-link a {
   font-weight: 400 !important;
 }
 
-.app-breadcrumb.el-breadcrumb {
-  display: inline-block;
+.app-breadcrumb.ant-breadcrumb {
+  display: inline-flex;
   font-size: 14px;
-  line-height: var(--v3-navigationbar-height);
+  align-items: center;
   margin-left: 8px;
+
   .no-redirect {
-    color: #97a8be;
     cursor: text;
   }
 }

diff --git a/src/layouts/components/Hamburger/index.vue b/src/layouts/components/Hamburger/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Expand, Fold } from "@element-plus/icons-vue";
+import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons-vue";
 
 interface Props {
   isActive?: boolean;
@@ -21,10 +21,8 @@ const toggleClick = () => {
 
 <template>
   <div @click="toggleClick">
-    <el-icon :size="20" class="icon">
-      <Fold v-if="props.isActive" />
-      <Expand v-else />
-    </el-icon>
+    <MenuFoldOutlined v-if="props.isActive" />
+    <MenuUnfoldOutlined v-else />
   </div>
 </template>
 

diff --git a/src/layouts/components/NavigationBar/index.vue b/src/layouts/components/NavigationBar/index.vue
@@ -48,25 +48,27 @@ const logout = () => {
       <Screenfull v-if="showScreenfull" class="right-menu-item" />
       <ThemeSwitch v-if="showThemeSwitch" class="right-menu-item" />
       <Notify v-if="showNotify" class="right-menu-item" />
-      <el-dropdown class="right-menu-item">
-        <div class="right-menu-avatar">
-          <el-avatar :icon="UserFilled" :size="30" />
-          <span>{{ userStore.username }}</span>
-        </div>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <a target="_blank" href="https://github.com/un-pany/v3-admin-vite">
-              <el-dropdown-item>GitHub</el-dropdown-item>
-            </a>
-            <a target="_blank" href="https://gitee.com/un-pany/v3-admin-vite">
-              <el-dropdown-item>Gitee</el-dropdown-item>
-            </a>
-            <el-dropdown-item divided @click="logout">
-              <span style="display: block">退出登录</span>
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
+      <div class="right-menu-item">
+        <a-dropdown>
+          <div class="right-menu-avatar">
+            <el-avatar :icon="UserFilled" :size="30" />
+            <span>{{ userStore.username }}</span>
+          </div>
+          <template #overlay>
+            <a-menu>
+              <a target="_blank" href="https://github.com/un-pany/v3-admin-vite">
+                <a-menu-item>GitHub</a-menu-item>
+              </a>
+              <a target="_blank" href="https://gitee.com/un-pany/v3-admin-vite">
+                <a-menu-item>Gitee</a-menu-item>
+              </a>
+              <a-menu-item @click="logout">
+                <span style="display: block">退出登录</span>
+              </a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
+      </div>
     </div>
   </div>
 </template>
@@ -78,27 +80,33 @@ const logout = () => {
   background: var(--v3-header-bg-color);
   display: flex;
   justify-content: space-between;
+
   .hamburger {
     display: flex;
     align-items: center;
     height: 100%;
     padding: 0 15px;
     cursor: pointer;
   }
+
   .breadcrumb {
     flex: 1;
+
     // 参考 Bootstrap 的响应式设计将宽度设置为 576
     @media screen and (max-width: 576px) {
       display: none;
     }
   }
+
   .sidebar {
     flex: 1;
     // 设置 min-width 是为了让 Sidebar 里的 el-menu 宽度自适应
     min-width: 0px;
+
     :deep(.el-menu) {
       background-color: transparent;
     }
+
     :deep(.el-sub-menu) {
       &.is-active {
         .el-sub-menu__title {
@@ -107,21 +115,26 @@ const logout = () => {
       }
     }
   }
+
   .right-menu {
     margin-right: 10px;
     height: 100%;
     display: flex;
     align-items: center;
     color: #606266;
+
     .right-menu-item {
       padding: 0 10px;
       cursor: pointer;
+
       .right-menu-avatar {
         display: flex;
         align-items: center;
+
         .el-avatar {
           margin-right: 10px;
         }
+
         span {
           font-size: 16px;
         }

diff --git a/src/layouts/components/RightPanel/index.vue b/src/layouts/components/RightPanel/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from "vue";
-import { Setting } from "@element-plus/icons-vue";
+import { SettingOutlined } from "@ant-design/icons-vue";
 
 interface Props {
   buttonTop?: number;
@@ -16,13 +16,11 @@ const show = ref(false);
 
 <template>
   <div class="handle-button" @click="show = true">
-    <el-icon :size="24">
-      <Setting />
-    </el-icon>
+    <SettingOutlined style="font-size: 22px" />
   </div>
-  <el-drawer v-model="show" size="300px" :with-header="false">
+  <a-drawer v-model:open="show" width="300px" :closable="false">
     <slot />
-  </el-drawer>
+  </a-drawer>
 </template>
 
 <style lang="scss" scoped>

diff --git a/src/layouts/components/Settings/index.vue b/src/layouts/components/Settings/index.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { watchEffect } from "vue";
+import { watchEffect, h } from "vue";
 import { storeToRefs } from "pinia";
 import { useSettingsStore } from "@/store/modules/settings";
 import { resetConfigLayout } from "@/utils";
 import SelectLayoutMode from "./SelectLayoutMode.vue";
-import { Refresh } from "@element-plus/icons-vue";
+import { SyncOutlined } from "@ant-design/icons-vue";
 
 const settingsStore = useSettingsStore();
 
@@ -51,13 +51,16 @@ watchEffect(() => {
   <div class="setting-container">
     <h4>布局配置</h4>
     <SelectLayoutMode />
-    <el-divider />
+    <a-divider />
     <h4>功能配置</h4>
     <div class="setting-item" v-for="(settingValue, settingName, index) in switchSettings" :key="index">
       <span class="setting-name">{{ settingName }}</span>
-      <el-switch v-model="settingValue.value" :disabled="layoutMode !== 'left' && settingName === '固定 Header'" />
+      <a-switch
+        v-model:checked="settingValue.value"
+        :disabled="layoutMode !== 'left' && settingName === '固定 Header'"
+      />
     </div>
-    <a-button type="danger" :icon="Refresh" @click="resetConfigLayout">重 置</a-button>
+    <a-button type="primary" danger :icon="h(SyncOutlined)" @click="resetConfigLayout">重 置</a-button>
   </div>
 </template>
 
@@ -70,7 +73,7 @@ watchEffect(() => {
   .setting-item {
     font-size: 14px;
     color: var(--el-text-color-regular);
-    padding: 5px 0;
+    padding: 10px 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -80,7 +83,7 @@ watchEffect(() => {
     }
   }
 
-  .el-button {
+  .ant-btn {
     margin-top: 40px;
     width: 100%;
   }