release: update 3.9.0

src/layout/components/navbar.vue

@@ -5,6 +5,8 @@ import mixNav from "./sidebar/mixNav.vue";
 import { useNav } from "@/layout/hooks/useNav";
 import Breadcrumb from "./sidebar/breadCrumb.vue";
 import topCollapse from "./sidebar/topCollapse.vue";
+import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
 
 const {
   layout,
@@ -54,7 +56,7 @@ const {
           <el-dropdown-menu class="logout">
             <el-dropdown-item @click="logout">
               <IconifyIconOffline
-                icon="logout-circle-r-line"
+                :icon="LogoutCircleRLine"
                 style="margin: 5px"
               />
               退出系统
@@ -67,7 +69,7 @@ const {
         title="打开项目配置"
         @click="onPanel"
       >
-        <IconifyIconOffline icon="setting" />
+        <IconifyIconOffline :icon="Setting" />
       </span>
     </div>
   </div>

src/layout/components/notice/index.vue

@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import { noticesData } from "./data";
 import NoticeList from "./noticeList.vue";
+import Bell from "@iconify-icons/ep/bell";
 
 const noticesNum = ref(0);
 const notices = ref(noticesData);
@@ -15,7 +16,7 @@ notices.value.map(v => (noticesNum.value += v.list.length));
     <span class="dropdown-badge navbar-bg-hover select-none">
       <el-badge :value="noticesNum" :max="99">
         <span class="header-notice-icon">
-          <IconifyIconOffline icon="bell" />
+          <IconifyIconOffline :icon="Bell" />
         </span>
       </el-badge>
     </span>

src/layout/components/panel/index.vue

@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { emitter } from "@/utils/mitt";
+import Close from "@iconify-icons/ep/close";
 
 const show = ref<Boolean>(false);
 const target = ref(null);
@@ -25,7 +26,7 @@ emitter.on("openPanel", () => {
           <span title="关闭配置">
             <IconifyIconOffline
               class="dark:text-white"
-              icon="close"
+              :icon="Close"
               @click="show = !show"
             />
           </span>

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

@@ -5,8 +5,8 @@
       确认
     </span>
     <span class="search-footer-item">
-      <IconifyIconOffline icon="arrow-up-line" class="icon" />
-      <IconifyIconOffline icon="arrow-down-line" class="icon" />
+      <IconifyIconOffline :icon="ArrowUpLine" class="icon" />
+      <IconifyIconOffline :icon="ArrowDownLine" class="icon" />
       切换
     </span>
     <span class="search-footer-item">
@@ -17,6 +17,8 @@
 </template>
 
 <script setup lang="ts">
+import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
+import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
 import mdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
 import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
 </script>

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

@@ -8,6 +8,7 @@ import { useNav } from "@/layout/hooks/useNav";
 import { useDebounceFn, onKeyStroke } from "@vueuse/core";
 import { ref, watch, computed, nextTick, shallowRef } from "vue";
 import { usePermissionStoreHook } from "@/store/modules/permission";
+import Search from "@iconify-icons/ep/search";
 
 interface Props {
   /** 弹窗显隐 */
@@ -147,7 +148,7 @@ onKeyStroke("ArrowDown", handleDown);
     >
       <template #prefix>
         <span class="el-input__icon">
-          <IconifyIconOffline icon="search" />
+          <IconifyIconOffline :icon="Search" />
         </span>
       </template>
     </el-input>

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

@@ -3,6 +3,7 @@ import { computed } from "vue";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
+import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
 
 interface optionsItem {
   path: string;
@@ -64,7 +65,7 @@ function handleTo() {
         @click="handleTo"
         @mouseenter="handleMouse(item)"
       >
-        <component :is="useRenderIcon(item.meta?.icon ?? 'bookmark-2-line')" />
+        <component :is="useRenderIcon(item.meta?.icon ?? Bookmark2Line)" />
         <span class="result-item-title">{{ item.meta?.title }}</span>
         <enterOutlined />
       </div>

src/layout/components/search/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { SearchModal } from "./components";
 import { useBoolean } from "../../hooks/useBoolean";
+import Search from "@iconify-icons/ep/search";
+
 const { bool: show, toggle } = useBoolean();
 function handleSearch() {
   toggle();
@@ -12,7 +14,7 @@ function handleSearch() {
     class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
     @click="handleSearch"
   >
-    <IconifyIconOffline icon="search" />
+    <IconifyIconOffline :icon="Search" />
   </div>
   <SearchModal v-model:value="show" />
 </template>

src/layout/components/setting/index.vue

@@ -30,6 +30,8 @@ import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
 
 import dayIcon from "@/assets/svg/day.svg?component";
 import darkIcon from "@/assets/svg/dark.svg?component";
+import Check from "@iconify-icons/ep/check";
+import Logout from "@iconify-icons/ri/logout-circle-r-line";
 
 const router = useRouter();
 const { device } = useNav();
@@ -42,7 +44,6 @@ const verticalRef = ref();
 const horizontalRef = ref();
 
 const {
-  body,
   dataTheme,
   layoutTheme,
   themeColors,
@@ -165,8 +166,6 @@ function setFalse(Doms): any {
 }
 
 watch($storage, ({ layout }) => {
-  /* 设置wangeditorV5主题色 */
-  body.style.setProperty("--w-e-toolbar-active-color", layout["epThemeColor"]);
   switch (layout["layout"]) {
     case "vertical":
       toggleClass(true, isSelect, unref(verticalRef));
@@ -302,7 +301,7 @@ nextTick(() => {
           :size="17"
           :color="getThemeColor(item.themeColor)"
         >
-          <IconifyIconOffline icon="check" />
+          <IconifyIconOffline :icon="Check" />
         </el-icon>
       </li>
     </ul>
@@ -383,7 +382,7 @@ nextTick(() => {
       @click="onReset"
     >
       <IconifyIconOffline
-        icon="fa-sign-out"
+        :icon="Logout"
         width="15"
         height="15"
         style="margin-right: 4px"

src/layout/components/sidebar/horizontal.vue

@@ -5,6 +5,8 @@ import { ref, watch, nextTick } from "vue";
 import SidebarItem from "./sidebarItem.vue";
 import { useNav } from "@/layout/hooks/useNav";
 import { usePermissionStoreHook } from "@/store/modules/permission";
+import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
 
 const menuRef = ref();
 
@@ -71,7 +73,7 @@ watch(
           <el-dropdown-menu class="logout">
             <el-dropdown-item @click="logout">
               <IconifyIconOffline
-                icon="logout-circle-r-line"
+                :icon="LogoutCircleRLine"
                 style="margin: 5px"
               />
               退出系统
@@ -84,7 +86,7 @@ watch(
         title="打开项目配置"
         @click="onPanel"
       >
-        <IconifyIconOffline icon="setting" />
+        <IconifyIconOffline :icon="Setting" />
       </span>
     </div>
   </div>

src/layout/components/sidebar/leftCollapse.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { useDark } from "@pureadmin/utils";
+import MenuFold from "@iconify-icons/ri/menu-fold-fill";
+import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
 
 interface Props {
   isActive: boolean;
@@ -27,7 +29,7 @@ const toggleClick = () => {
       :content="props.isActive ? '点击折叠' : '点击展开'"
     >
       <IconifyIconOffline
-        :icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
+        :icon="props.isActive ? MenuFold : MenuUnfold"
         class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1"
         @click="toggleClick"
       />

src/layout/components/sidebar/mixNav.vue

@@ -6,6 +6,8 @@ import { ref, toRaw, watch, onMounted, nextTick } from "vue";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { getParentPaths, findRouteByPath } from "@/router/utils";
 import { usePermissionStoreHook } from "@/store/modules/permission";
+import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
 
 const menuRef = ref();
 const defaultActive = ref(null);
@@ -102,7 +104,7 @@ watch(
           <el-dropdown-menu class="logout">
             <el-dropdown-item @click="logout">
               <IconifyIconOffline
-                icon="logout-circle-r-line"
+                :icon="LogoutCircleRLine"
                 style="margin: 5px"
               />
               退出系统
@@ -115,7 +117,7 @@ watch(
         title="打开项目配置"
         @click="onPanel"
       >
-        <IconifyIconOffline icon="setting" />
+        <IconifyIconOffline :icon="Setting" />
       </span>
     </div>
   </div>

src/layout/components/sidebar/sidebarItem.vue

@@ -6,6 +6,11 @@ import { useNav } from "@/layout/hooks/useNav";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from "vue";
 
+import ArrowUp from "@iconify-icons/ep/arrow-up";
+import EpArrowDown from "@iconify-icons/ep/arrow-down";
+import ArrowLeft from "@iconify-icons/ep/arrow-left";
+import ArrowRight from "@iconify-icons/ep/arrow-right";
+
 const { layout, isCollapse } = useNav();
 
 const props = defineProps({
@@ -77,7 +82,13 @@ const getSpanStyle = computed(() => {
 });
 
 const expandCloseIcon = computed(() => {
-  return getConfig()?.MenuArrowIconNoTransition ? "expand-close-icon" : "";
+  if (!getConfig()?.MenuArrowIconNoTransition) return "";
+  return {
+    "expand-close-icon": useRenderIcon(EpArrowDown),
+    "expand-open-icon": useRenderIcon(ArrowUp),
+    "collapse-close-icon": useRenderIcon(ArrowRight),
+    "collapse-open-icon": useRenderIcon(ArrowLeft)
+  };
 });
 
 const onlyOneChild: childrenType = ref(null);
@@ -219,11 +230,8 @@ function resolvePath(routePath) {
   <el-sub-menu
     v-else
     ref="subMenu"
+    v-bind="expandCloseIcon"
     :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">

src/layout/components/sidebar/topCollapse.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import MenuFold from "@iconify-icons/ri/menu-fold-fill";
+import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
+
 interface Props {
   isActive: boolean;
 }
@@ -23,7 +26,7 @@ const toggleClick = () => {
     @click="toggleClick"
   >
     <IconifyIconOffline
-      :icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
+      :icon="props.isActive ? MenuFold : MenuUnfold"
       class="inline-block align-middle hover:text-primary dark:hover:!text-white"
     />
   </div>

src/layout/components/tag/index.vue

@@ -10,6 +10,13 @@ import { handleAliveRoute, delAliveRoutes } from "@/router/utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";
 
+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
+import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
+import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
+import CloseBold from "@iconify-icons/ep/close-bold";
+
 const {
   route,
   router,
@@ -282,11 +289,11 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
       toggle();
       setTimeout(() => {
         if (isFullscreen.value) {
-          tagsViews[6].icon = "exit-fullscreen";
-          tagsViews[6].text = "整体页面退出全屏";
+          tagsViews[6].icon = ExitFullscreen;
+          tagsViews[6].text = "退出全屏";
         } else {
-          tagsViews[6].icon = "fullscreen";
-          tagsViews[6].text = "整体页面全屏";
+          tagsViews[6].icon = Fullscreen;
+          tagsViews[6].text = "全屏";
         }
       }, 100);
       break;
@@ -295,10 +302,10 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
       onContentFullScreen();
       setTimeout(() => {
         if (pureSetting.hiddenSideBar) {
-          tagsViews[7].icon = "exit-fullscreen";
+          tagsViews[7].icon = ExitFullscreen;
           tagsViews[7].text = "内容区退出全屏";
         } else {
-          tagsViews[7].icon = "fullscreen";
+          tagsViews[7].icon = Fullscreen;
           tagsViews[7].text = "内容区全屏";
         }
       }, 100);
@@ -494,7 +501,7 @@ onMounted(() => {
 <template>
   <div ref="containerDom" class="tags-view" v-if="!showTags">
     <span v-show="isShowArrow" class="arrow-left">
-      <IconifyIconOffline icon="arrow-left-s-line" @click="handleScroll(200)" />
+      <IconifyIconOffline :icon="ArrowLeftSLine" @click="handleScroll(200)" />
     </span>
     <div ref="scrollbarDom" class="scroll-container">
       <div class="tab select-none" ref="tabDom" :style="getTabStyle">
@@ -528,7 +535,7 @@ onMounted(() => {
             class="el-icon-close"
             @click.stop="deleteMenu(item)"
           >
-            <IconifyIconOffline icon="close-bold" />
+            <IconifyIconOffline :icon="CloseBold" />
           </span>
           <div
             :ref="'schedule' + index"
@@ -539,10 +546,7 @@ onMounted(() => {
       </div>
     </div>
     <span v-show="isShowArrow" class="arrow-right">
-      <IconifyIconOffline
-        icon="arrow-right-s-line"
-        @click="handleScroll(-200)"
-      />
+      <IconifyIconOffline :icon="ArrowRightSLine" @click="handleScroll(-200)" />
     </span>
     <!-- 右键菜单按钮 -->
     <transition name="el-zoom-in-top">
@@ -571,7 +575,7 @@ onMounted(() => {
       @command="handleCommand"
     >
       <span class="arrow-down">
-        <IconifyIconOffline icon="arrow-down" class="dark:text-white" />
+        <IconifyIconOffline :icon="ArrowDown" class="dark:text-white" />
       </span>
       <template #dropdown>
         <el-dropdown-menu>

src/layout/hooks/useTag.ts

@@ -16,6 +16,14 @@ import { useSettingStoreHook } from "@/store/modules/settings";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import { storageLocal, toggleClass, hasClass } from "@pureadmin/utils";
 
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import CloseAllTags from "@iconify-icons/ri/subtract-line";
+import CloseOtherTags from "@iconify-icons/ri/text-spacing";
+import CloseRightTags from "@iconify-icons/ri/text-direction-l";
+import CloseLeftTags from "@iconify-icons/ri/text-direction-r";
+import RefreshRight from "@iconify-icons/ep/refresh-right";
+import Close from "@iconify-icons/ep/close";
+
 export function useTags() {
   const route = useRoute();
   const router = useRouter();
@@ -46,56 +54,56 @@ export function useTags() {
 
   const tagsViews = reactive<Array<tagsViewsType>>([
     {
-      icon: "refresh-right",
+      icon: RefreshRight,
       text: "重新加载",
       divided: false,
       disabled: false,
       show: true
     },
     {
-      icon: "close",
+      icon: Close,
       text: "关闭当前标签页",
       divided: false,
       disabled: multiTags.value.length > 1 ? false : true,
       show: true
     },
     {
-      icon: "close-left-tags",
+      icon: CloseLeftTags,
       text: "关闭左侧标签页",
       divided: true,
       disabled: multiTags.value.length > 1 ? false : true,
       show: true
     },
     {
-      icon: "close-right-tags",
+      icon: CloseRightTags,
       text: "关闭右侧标签页",
       divided: false,
       disabled: multiTags.value.length > 1 ? false : true,
       show: true
     },
     {
-      icon: "close-other-tags",
+      icon: CloseOtherTags,
       text: "关闭其他标签页",
       divided: true,
       disabled: multiTags.value.length > 2 ? false : true,
       show: true
     },
     {
-      icon: "close-all-tags",
+      icon: CloseAllTags,
       text: "关闭全部标签页",
       divided: false,
       disabled: multiTags.value.length > 1 ? false : true,
       show: true
     },
     {
-      icon: "fullscreen",
+      icon: Fullscreen,
       text: "整体页面全屏",
       divided: true,
       disabled: false,
       show: true
     },
     {
-      icon: "fullscreen",
+      icon: Fullscreen,
       text: "内容区全屏",
       divided: false,
       disabled: false,

src/layout/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "animate.css";
 import { setType } from "./types";
 import { emitter } from "@/utils/mitt";
 import { useLayout } from "./hooks/useLayout";

src/layout/types.ts

@@ -1,17 +1,20 @@
+import type { IconifyIcon } from "@iconify/vue";
+import HomeFilled from "@iconify-icons/ep/home-filled";
+
 export const routerArrays: Array<RouteConfigs> = [
   {
     path: "/welcome",
     parentPath: "/",
     meta: {
       title: "首页",
-      icon: "home-filled"
+      icon: HomeFilled
     }
   }
 ];
 
 export type routeMetaType = {
   title?: string;
-  icon?: string;
+  icon?: string | IconifyIcon;
   showLink?: boolean;
   savedPosition?: boolean;
   auths?: Array<string>;
@@ -32,7 +35,7 @@ export type multiTagsType = {
 };
 
 export type tagsViewsType = {
-  icon: string;
+  icon: string | IconifyIcon;
   text: string;
   divided: boolean;
   disabled: boolean;