release: update 3.8.5

src/layout/components/notice/index.vue

@@ -2,25 +2,16 @@
 import { ref } from "vue";
 import { noticesData } from "./data";
 import NoticeList from "./noticeList.vue";
-import { templateRef } from "@vueuse/core";
-import { Tabs, TabPane } from "@pureadmin/components";
-
-const dropdownDom = templateRef<ElRef | null>("dropdownDom", null);
-const activeName = ref(noticesData[0].name);
-const notices = ref(noticesData);
 
 const noticesNum = ref(0);
-notices.value.forEach(notice => {
-  noticesNum.value += notice.list.length;
-});
+const notices = ref(noticesData);
+const activeKey = ref(noticesData[0].key);
 
-function tabClick() {
-  (dropdownDom as any).value.handleOpen();
-}
+notices.value.map(v => (noticesNum.value += v.list.length));
 </script>
 
 <template>
-  <el-dropdown ref="dropdownDom" trigger="click" placement="bottom-end">
+  <el-dropdown trigger="click" placement="bottom-end">
     <span class="dropdown-badge navbar-bg-hover select-none">
       <el-badge :value="noticesNum" :max="99">
         <span class="header-notice-icon">
@@ -30,33 +21,25 @@ function tabClick() {
     </span>
     <template #dropdown>
       <el-dropdown-menu>
-        <Tabs
-          centered
-          class="dropdown-tabs"
-          v-model:activeName="activeName"
-          @tabClick="tabClick"
-        >
+        <el-tabs :stretch="true" v-model="activeKey" class="dropdown-tabs">
           <template v-for="item in notices" :key="item.key">
-            <TabPane :tab="`${item.name}(${item.list.length})`">
+            <el-tab-pane
+              :label="`${item.name}(${item.list.length})`"
+              :name="`${item.key}`"
+            >
               <el-scrollbar max-height="330px">
                 <div class="noticeList-container">
                   <NoticeList :list="item.list" />
                 </div>
               </el-scrollbar>
-            </TabPane>
+            </el-tab-pane>
           </template>
-        </Tabs>
+        </el-tabs>
       </el-dropdown-menu>
     </template>
   </el-dropdown>
 </template>
 
-<style>
-.ant-tabs-dropdown {
-  z-index: 2900 !important;
-}
-</style>
-
 <style lang="scss" scoped>
 .dropdown-badge {
   display: flex;
@@ -72,30 +55,28 @@ function tabClick() {
 }
 
 .dropdown-tabs {
-  width: 336px;
-  background-color: #fff;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
-  border-radius: 4px;
+  width: 330px;
+
+  .noticeList-container {
+    padding: 15px 24px 0 24px;
+  }
 
   :deep(.el-tabs__header) {
     margin: 0;
   }
 
-  :deep(.el-tabs__nav-scroll) {
-    display: flex;
-    justify-content: center;
-  }
-
   :deep(.el-tabs__nav-wrap)::after {
     height: 1px;
   }
 
-  :deep(.noticeList-container) {
-    padding: 15px 24px 0 24px;
+  // 如果上面的 notices 长度大于 3 请注释掉下面代码
+  :deep(.el-tabs__nav-wrap) {
+    padding: 0 36px 0 36px;
+  }
+
+  // 如果上面的 notices 长度大于 3 请注释掉下面代码
+  :deep(.el-tabs__active-bar) {
+    margin: 0 36px 0 36px;
   }
 }
-
-:deep(.ant-tabs-nav) {
-  margin-bottom: 0;
-}
 </style>

src/layout/components/panel/index.vue

@@ -21,7 +21,7 @@ emitter.on("openPanel", () => {
     <div ref="target" class="right-panel bg-bg_color">
       <div class="right-panel-items">
         <div class="project-configuration">
-          <h3 class="dark:text-white">项目配置</h3>
+          <h4 class="dark:text-white">项目配置</h4>
           <span title="关闭配置">
             <IconifyIconOffline
               class="dark:text-white"

src/layout/components/search/components/SearchFooter.vue

@@ -16,10 +16,11 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
+<script setup lang="ts">
 import mdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
+import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
 </script>
+
 <style lang="scss" scoped>
 .search-footer {
   display: flex;

src/layout/components/search/components/SearchModal.vue

@@ -1,11 +1,11 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useRouter } from "vue-router";
 import { cloneDeep } from "lodash-unified";
 import SearchResult from "./SearchResult.vue";
 import SearchFooter from "./SearchFooter.vue";
+import { deleteChildren } from "@/utils/tree";
 import { useNav } from "@/layout/hooks/useNav";
 import { transformI18n } from "@/plugins/i18n";
-import { deleteChildren } from "@pureadmin/utils";
 import { useDebounceFn, onKeyStroke } from "@vueuse/core";
 import { ref, watch, computed, nextTick, shallowRef } from "vue";
 import { usePermissionStoreHook } from "@/store/modules/permission";

src/layout/components/search/components/SearchResult.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";

src/layout/components/search/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { SearchModal } from "./components";
 import { useBoolean } from "../../hooks/useBoolean";
 const { bool: show, toggle } = useBoolean();

src/layout/components/setting/index.vue

@@ -13,7 +13,6 @@ import { useRouter } from "vue-router";
 import panel from "../panel/index.vue";
 import { emitter } from "@/utils/mitt";
 import { resetRouter } from "@/router";
-import { templateRef } from "@vueuse/core";
 import { removeToken } from "@/utils/auth";
 import { routerArrays } from "@/layout/types";
 import { useNav } from "@/layout/hooks/useNav";
@@ -38,9 +37,9 @@ const { isDark } = useDark();
 const { isSelect } = useCssModule();
 const { $storage } = useGlobal<GlobalPropertiesApi>();
 
-const mixRef = templateRef<HTMLElement | null>("mixRef", null);
-const verticalRef = templateRef<HTMLElement | null>("verticalRef", null);
-const horizontalRef = templateRef<HTMLElement | null>("horizontalRef", null);
+const mixRef = ref();
+const verticalRef = ref();
+const horizontalRef = ref();
 
 const {
   body,

src/layout/components/sidebar/breadCrumb.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isEqual } from "lodash-unified";
+import { isEqual } from "@pureadmin/utils";
 import { transformI18n } from "@/plugins/i18n";
 import { ref, watch, onMounted, toRaw } from "vue";
 import { getParentPaths, findRouteByPath } from "@/router/utils";

src/layout/components/sidebar/sidebarItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import path from "path";
+import { getConfig } from "@/config";
 import { childrenType } from "../../types";
 import { useNav } from "@/layout/hooks/useNav";
 import { transformI18n } from "@/plugins/i18n";
@@ -76,6 +77,10 @@ const getSpanStyle = computed(() => {
   };
 });
 
+const expandCloseIcon = computed(() => {
+  return getConfig()?.MenuArrowIconNoTransition ? "expand-close-icon" : "";
+});
+
 const onlyOneChild: childrenType = ref(null);
 // 存放菜单是否存在showTooltip属性标识
 const hoverMenuMap = new WeakMap();
@@ -212,7 +217,15 @@ function resolvePath(routePath) {
     </el-menu-item>
   </template>
 
-  <el-sub-menu v-else ref="subMenu" :index="resolvePath(props.item.path)">
+  <el-sub-menu
+    v-else
+    ref="subMenu"
+    :index="resolvePath(props.item.path)"
+    v-bind:[expandCloseIcon]="useRenderIcon('ep-arrow-down')"
+    :expand-open-icon="useRenderIcon('ep-arrow-up')"
+    :collapse-close-icon="useRenderIcon('ep-arrow-right')"
+    :collapse-open-icon="useRenderIcon('ep-arrow-left')"
+  >
     <template #title>
       <div v-if="toRaw(props.item.meta.icon)" class="sub-menu-icon">
         <component

src/layout/components/sidebar/vertical.vue

@@ -4,7 +4,6 @@ import { useRoute } from "vue-router";
 import { emitter } from "@/utils/mitt";
 import SidebarItem from "./sidebarItem.vue";
 import leftCollapse from "./leftCollapse.vue";
-import type { StorageConfigs } from "/#/index";
 import { useNav } from "@/layout/hooks/useNav";
 import { storageLocal } from "@pureadmin/utils";
 import { ref, computed, watch, onBeforeMount } from "vue";