update 重构 彻底删除proxy用法 改为vue3官方推荐写法

src/layout/components/AppMain.vue

@@ -12,11 +12,11 @@
 </template>
 
 <script setup name="AppMain" lang="ts">
+import animateConfig from '@/animate';
 import { useSettingsStore } from '@/store/modules/settings';
 import { useTagsViewStore } from '@/store/modules/tagsView';
-
 import IframeToggle from './IframeToggle/index.vue';
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
 const route = useRoute();
 const tagsViewStore = useTagsViewStore();
 
@@ -26,11 +26,9 @@ watch(
   () => useSettingsStore().animationEnable,
   (val: boolean) => {
     if (val) {
-      animate.value = proxy?.animate.animateList[
-        Math.floor(Math.random() * proxy?.animate.animateList.length)
-      ] as string;
+      animate.value = animateConfig.animateList[Math.floor(Math.random() * animateConfig.animateList.length)] as string;
     } else {
-      animate.value = proxy?.animate.defaultAnimate as string;
+      animate.value = animateConfig.defaultAnimate as string;
     }
   },
   { immediate: true }

src/layout/components/IframeToggle/index.vue

@@ -9,9 +9,8 @@
 </template>
 
 <script setup lang="ts">
-import InnerLink from '../InnerLink/index.vue';
-
 import { useTagsViewStore } from '@/store/modules/tagsView';
+import InnerLink from '../InnerLink/index.vue';
 
 const route = useRoute();
 const tagsViewStore = useTagsViewStore();

src/layout/components/Navbar.vue

@@ -31,7 +31,7 @@
           </div>
         </el-tooltip>
         <!-- 消息 -->
-        <el-tooltip :content="proxy.$t('navbar.message')" effect="dark" placement="bottom">
+        <el-tooltip :content="$t('navbar.message')" effect="dark" placement="bottom">
           <div>
             <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
               <template #reference>
@@ -51,19 +51,19 @@
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
         </el-tooltip>
 
-        <el-tooltip :content="proxy.$t('navbar.document')" effect="dark" placement="bottom">
+        <el-tooltip :content="$t('navbar.document')" effect="dark" placement="bottom">
           <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
         </el-tooltip>
 
-        <el-tooltip :content="proxy.$t('navbar.full')" effect="dark" placement="bottom">
+        <el-tooltip :content="$t('navbar.full')" effect="dark" placement="bottom">
           <screenfull id="screenfull" class="right-menu-item hover-effect" />
         </el-tooltip>
 
-        <el-tooltip :content="proxy.$t('navbar.language')" effect="dark" placement="bottom">
+        <el-tooltip :content="$t('navbar.language')" effect="dark" placement="bottom">
           <lang-select id="lang-select" class="right-menu-item hover-effect" />
         </el-tooltip>
 
-        <el-tooltip :content="proxy.$t('navbar.layoutSize')" effect="dark" placement="bottom">
+        <el-tooltip :content="$t('navbar.layoutSize')" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
       </template>
@@ -80,13 +80,13 @@
           <template #dropdown>
             <el-dropdown-menu>
               <router-link to="/user/profile">
-                <el-dropdown-item>{{ proxy.$t('navbar.personalCenter') }}</el-dropdown-item>
+                <el-dropdown-item>{{ $t('navbar.personalCenter') }}</el-dropdown-item>
               </router-link>
               <el-dropdown-item v-if="settingsStore.showSettings" command="setLayout">
-                <span>{{ proxy.$t('navbar.layoutSetting') }}</span>
+                <span>{{ $t('navbar.layoutSetting') }}</span>
               </el-dropdown-item>
               <el-dropdown-item divided command="logout">
-                <span>{{ proxy.$t('navbar.logout') }}</span>
+                <span>{{ $t('navbar.logout') }}</span>
               </el-dropdown-item>
             </el-dropdown-menu>
           </template>
@@ -97,26 +97,25 @@
 </template>
 
 <script setup lang="ts">
-import SearchMenu from './TopBar/search.vue';
-import { useAppStore } from '@/store/modules/app';
-import { useUserStore } from '@/store/modules/user';
-import { useSettingsStore } from '@/store/modules/settings';
-import { useNoticeStore } from '@/store/modules/notice';
-import notice from './notice/index.vue';
-import router from '@/router';
 import type { ElMessageBoxOptions } from 'element-plus';
-import { NavTypeEnum } from '@/enums/NavTypeEnum';
-import TopBar from './TopBar/index.vue';
 import { CaretBottom } from '@element-plus/icons-vue';
 import appLogo from '@/assets/logo/logo.png';
+import { NavTypeEnum } from '@/enums/NavTypeEnum';
+import tab from '@/plugins/tab';
+import router from '@/router';
+import { useAppStore } from '@/store/modules/app';
+import { useNoticeStore } from '@/store/modules/notice';
+import { useSettingsStore } from '@/store/modules/settings';
+import { useUserStore } from '@/store/modules/user';
+import notice from './notice/index.vue';
+import TopBar from './TopBar/index.vue';
+import SearchMenu from './TopBar/search.vue';
 
 const appStore = useAppStore();
 const userStore = useUserStore();
 const settingsStore = useSettingsStore();
 const noticeStore = storeToRefs(useNoticeStore());
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
 const navType = computed(() => settingsStore.navType);
 const showLogo = computed(() => settingsStore.sidebarLogo);
 const displayName = computed(() => userStore.nickname || '管理员');
@@ -145,7 +144,7 @@ const logout = async () => {
         redirect: encodeURIComponent(router.currentRoute.value.fullPath || '/')
       }
     });
-    proxy?.$tab.closeAllPage();
+    tab.closeAllPage();
   });
 };
 

src/layout/components/Settings/index.vue

@@ -162,16 +162,16 @@
 </template>
 
 <script setup lang="ts">
-import { useDynamicTitle } from '@/utils/dynamicTitle';
-import { useAppStore } from '@/store/modules/app';
-import { useSettingsStore } from '@/store/modules/settings';
-import { usePermissionStore } from '@/store/modules/permission';
-import { handleThemeStyle } from '@/utils/theme';
-import { SideThemeEnum } from '@/enums/SideThemeEnum';
 import { NavTypeEnum } from '@/enums/NavTypeEnum';
+import { SideThemeEnum } from '@/enums/SideThemeEnum';
+import modal from '@/plugins/modal';
 import defaultSettings from '@/settings';
+import { useAppStore } from '@/store/modules/app';
+import { usePermissionStore } from '@/store/modules/permission';
+import { useSettingsStore } from '@/store/modules/settings';
+import { useDynamicTitle } from '@/utils/dynamicTitle';
+import { handleThemeStyle } from '@/utils/theme';
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
@@ -245,7 +245,7 @@ const handleTheme = (val: string) => {
   settingsStore.sideTheme = val;
 };
 const saveSetting = () => {
-  proxy?.$modal.loading('正在保存到本地，请稍候...');
+  modal.loading('正在保存到本地，请稍候...');
   const settings = useStorage<LayoutSetting>('layout-setting', defaultSettings);
   if (!storeSettings.value.tagsViewPersist) {
     localStorage.removeItem('tags-view-visited');
@@ -261,11 +261,11 @@ const saveSetting = () => {
   settings.value.navType = storeSettings.value.navType;
   settings.value.radiusBase = storeSettings.value.radiusBase;
   setTimeout(() => {
-    proxy?.$modal.closeLoading();
+    modal.closeLoading();
   }, 1000);
 };
 const resetSetting = () => {
-  proxy?.$modal.loading('正在清除设置缓存并刷新，请稍候...');
+  modal.loading('正在清除设置缓存并刷新，请稍候...');
   localStorage.removeItem('tags-view-visited');
   useStorage<any>('layout-setting', null).value = null;
   setTimeout('window.location.reload()', 1000);

src/layout/components/Sidebar/Logo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="sidebar-logo-container" :class="{ collapse: collapse }">
-    <transition :enter-active-class="proxy?.animate.logoAnimate.enter" mode="out-in">
+    <transition :enter-active-class="animateConfig.logoAnimate.enter" mode="out-in">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
         <h1 v-else class="sidebar-title">
@@ -18,10 +18,10 @@
 </template>
 
 <script setup lang="ts">
+import animateConfig from '@/animate';
 import logo from '@/assets/logo/logo.png';
-import { useSettingsStore } from '@/store/modules/settings';
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 import { NavTypeEnum } from '@/enums/NavTypeEnum';
+import { useSettingsStore } from '@/store/modules/settings';
 
 defineProps({
   collapse: {

src/layout/components/Sidebar/SidebarItem.vue

@@ -44,10 +44,10 @@
 </template>
 
 <script setup lang="ts">
+import { RouteRecordRaw } from 'vue-router';
+import { getNormalPath } from '@/utils/ruoyi';
 import { isExternal } from '@/utils/validate';
 import AppLink from './Link.vue';
-import { getNormalPath } from '@/utils/ruoyi';
-import { RouteRecordRaw } from 'vue-router';
 
 const props = defineProps({
   item: {
@@ -105,7 +105,10 @@ const resolvePath = (routePath: string, routeQuery?: string): any => {
   }
   if (routeQuery) {
     const query = JSON.parse(routeQuery);
-    return { path: getNormalPath(props.basePath + '/' + routePath), query: query };
+    return {
+      path: getNormalPath(props.basePath + '/' + routePath),
+      query: query
+    };
   }
   return getNormalPath(props.basePath + '/' + routePath);
 };

src/layout/components/Sidebar/index.vue

@@ -2,7 +2,7 @@
   <div class="sidebar-shell" :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: bgColor }">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
-      <transition :enter-active-class="proxy?.animate.menuSearchAnimate.enter" mode="out-in">
+      <transition :enter-active-class="animateConfig.menuSearchAnimate.enter" mode="out-in">
         <el-menu
           :default-active="activeMenu"
           :collapse="isCollapse"
@@ -22,14 +22,13 @@
 </template>
 
 <script setup lang="ts">
+import { RouteRecordRaw } from 'vue-router';
+import animateConfig from '@/animate';
+import { useAppStore } from '@/store/modules/app';
+import { usePermissionStore } from '@/store/modules/permission';
+import { useSettingsStore } from '@/store/modules/settings';
 import Logo from './Logo.vue';
 import SidebarItem from './SidebarItem.vue';
-import { useAppStore } from '@/store/modules/app';
-import { useSettingsStore } from '@/store/modules/settings';
-import { usePermissionStore } from '@/store/modules/permission';
-import { RouteRecordRaw } from 'vue-router';
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const route = useRoute();
 const appStore = useAppStore();

src/layout/components/SocialCallback/index.vue

@@ -4,8 +4,8 @@
 
 <script setup lang="ts">
 import { login, callback } from '@/api/login';
-import { setToken, getToken } from '@/utils/auth';
 import { LoginData } from '@/api/types';
+import { setToken, getToken } from '@/utils/auth';
 
 const route = useRoute();
 const loading = ref(true);

src/layout/components/TagsView/ScrollPane.vue

@@ -13,8 +13,7 @@ const emits = defineEmits(['scroll', 'updateArrows']);
 const scrollContainerRef = ref<ElScrollbarInstance>();
 
 const getScrollWrapper = (): HTMLElement | null => {
-  const scrollbar = scrollContainerRef.value as any;
-  return scrollbar?.wrapRef || scrollbar?.$refs?.wrapRef || null;
+  return scrollContainerRef.value?.wrapRef ?? null;
 };
 
 const emitScroll = () => {

src/layout/components/TagsView/index.vue

@@ -88,6 +88,7 @@
 </template>
 
 <script setup lang="ts">
+import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
 import {
   ArrowDown,
   ArrowLeft,
@@ -100,12 +101,12 @@ import {
   RefreshRight,
   Right
 } from '@element-plus/icons-vue';
-import ScrollPane from './ScrollPane.vue';
-import { getNormalPath } from '@/utils/ruoyi';
-import { useSettingsStore } from '@/store/modules/settings';
+import tab from '@/plugins/tab';
 import { usePermissionStore } from '@/store/modules/permission';
+import { useSettingsStore } from '@/store/modules/settings';
 import { useTagsViewStore } from '@/store/modules/tagsView';
-import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
+import { getNormalPath } from '@/utils/ruoyi';
+import ScrollPane from './ScrollPane.vue';
 
 const visible = ref(false);
 const top = ref(0);
@@ -118,7 +119,6 @@ const isFullscreen = ref(false);
 const scrollPaneRef = ref<InstanceType<typeof ScrollPane>>();
 const fullscreenModeClass = 'tags-fullscreen-mode';
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const route = useRoute();
 const router = useRouter();
 const settingsStore = useSettingsStore();
@@ -267,7 +267,7 @@ const refreshSelectedTag = (view?: RouteLocationNormalized) => {
   if (!view) {
     return;
   }
-  proxy?.$tab.refreshPage(view);
+  tab.refreshPage(view);
   if (route.meta.link) {
     tagsViewStore.delIframeView(route as RouteLocationNormalized);
   }
@@ -277,7 +277,7 @@ const closeSelectedTag = (view?: RouteLocationNormalized) => {
   if (!view) {
     return;
   }
-  proxy?.$tab.closePage(view).then(({ visitedViews }: { visitedViews: RouteLocationNormalized[] }) => {
+  tab.closePage(view).then(({ visitedViews }: { visitedViews: RouteLocationNormalized[] }) => {
     if (isActive(view)) {
       toLastView(visitedViews, view);
     }
@@ -289,7 +289,7 @@ const closeRightTags = () => {
   if (!tag) {
     return;
   }
-  proxy?.$tab.closeRightPage(tag).then((views: RouteLocationNormalized[]) => {
+  tab.closeRightPage(tag).then((views: RouteLocationNormalized[]) => {
     if (!views.find(item => item.fullPath === route.fullPath)) {
       toLastView(views);
     }
@@ -301,7 +301,7 @@ const closeLeftTags = () => {
   if (!tag) {
     return;
   }
-  proxy?.$tab.closeLeftPage(tag).then((views: RouteLocationNormalized[]) => {
+  tab.closeLeftPage(tag).then((views: RouteLocationNormalized[]) => {
     if (!views.find(item => item.fullPath === route.fullPath)) {
       toLastView(views);
     }
@@ -314,13 +314,13 @@ const closeOthersTags = () => {
     return;
   }
   router.push(tag.fullPath || tag.path || '/').catch(() => {});
-  proxy?.$tab.closeOtherPage(tag).then(() => {
+  tab.closeOtherPage(tag).then(() => {
     moveToCurrentTag();
   });
 };
 
 const closeAllTags = (view?: RouteLocationNormalized) => {
-  proxy?.$tab.closeAllPage().then(({ visitedViews: views }: { visitedViews: RouteLocationNormalized[] }) => {
+  tab.closeAllPage().then(({ visitedViews: views }: { visitedViews: RouteLocationNormalized[] }) => {
     if (affixTags.value.some(tag => tag.path === route.path)) {
       return;
     }

src/layout/components/TopBar/index.vue

@@ -7,10 +7,10 @@
     mode="horizontal"
   >
     <sidebar-item
-      :key="route.path + index"
-      v-for="(route, index) in topMenus"
-      :item="route"
-      :base-path="route.path"
+      :key="menuRoute.path + index"
+      v-for="(menuRoute, index) in topMenus"
+      :item="menuRoute"
+      :base-path="menuRoute.path"
       popper-class="topbar-menu-popper"
     />
 
@@ -24,10 +24,10 @@
         <span>更多菜单</span>
       </template>
       <sidebar-item
-        :key="route.path + index"
-        v-for="(route, index) in moreRoutes"
-        :item="route"
-        :base-path="route.path"
+        :key="menuRoute.path + index"
+        v-for="(menuRoute, index) in moreRoutes"
+        :item="menuRoute"
+        :base-path="menuRoute.path"
         popper-class="topbar-menu-popper"
       />
     </el-sub-menu>
@@ -35,9 +35,10 @@
 </template>
 
 <script setup lang="ts">
-import SidebarItem from '../Sidebar/SidebarItem';
-import { useSettingsStore } from '@/store/modules/settings';
+import type { RouteRecordRaw } from 'vue-router';
 import { usePermissionStore } from '@/store/modules/permission';
+import { useSettingsStore } from '@/store/modules/settings';
+import SidebarItem from '../Sidebar/SidebarItem.vue';
 
 const route = useRoute();
 const settingsStore = useSettingsStore();
@@ -53,11 +54,11 @@ const activeMenu = computed(() => {
 });
 
 const visibleNumber = ref(5);
-const topMenus = computed(() => {
-  return permissionStore.sidebarRouters.filter(f => !f.hidden).slice(0, visibleNumber.value);
+const topMenus = computed((): RouteRecordRaw[] => {
+  return permissionStore.sidebarRouters.filter(f => !f.hidden).slice(0, visibleNumber.value) as RouteRecordRaw[];
 });
-const moreRoutes = computed(() => {
-  return permissionStore.sidebarRouters.filter(f => !f.hidden).slice(visibleNumber.value);
+const moreRoutes = computed((): RouteRecordRaw[] => {
+  return permissionStore.sidebarRouters.filter(f => !f.hidden).slice(visibleNumber.value) as RouteRecordRaw[];
 });
 function setVisibleNumber() {
   let width = document.body.getBoundingClientRect().width;

src/layout/components/TopBar/search.vue

@@ -88,12 +88,12 @@
 </template>
 
 <script setup lang="ts" name="layoutBreadcrumbSearch">
+import type { RouteRecordRaw } from 'vue-router';
 import { Search } from '@element-plus/icons-vue';
-import { getNormalPath } from '@/utils/ruoyi';
-import { isHttp } from '@/utils/validate';
 import { usePermissionStore } from '@/store/modules/permission';
 import { useSettingsStore } from '@/store/modules/settings';
-import type { RouteRecordRaw } from 'vue-router';
+import { getNormalPath } from '@/utils/ruoyi';
+import { isHttp } from '@/utils/validate';
 
 type SearchMenuItem = {
   path: string;

src/layout/components/notice/index.vue

@@ -29,10 +29,10 @@
 </template>
 
 <script setup lang="ts" name="layoutBreadcrumbUserNews">
-import { useNoticeStore } from '@/store/modules/notice';
 import router from '@/router';
-import { markMessageRead, markMessageReadBatch } from '@/utils/message-read';
+import { useNoticeStore } from '@/store/modules/notice';
 import { useUserStore } from '@/store/modules/user';
+import { markMessageRead, markMessageReadBatch } from '@/utils/message-read';
 import { NOTICE_GROUP } from '@/utils/push-message';
 
 const noticeStore = useNoticeStore();

src/layout/index.vue

@@ -14,12 +14,12 @@
 </template>
 
 <script setup lang="ts">
-import SideBar from './components/Sidebar/index.vue';
-import { AppMain, Navbar, Settings, TagsView } from './components';
+import { NavTypeEnum } from '@/enums/NavTypeEnum';
 import { useAppStore } from '@/store/modules/app';
 import { useSettingsStore } from '@/store/modules/settings';
-import { NavTypeEnum } from '@/enums/NavTypeEnum';
 import { initMessageBox, initPush } from '@/utils/push';
+import { AppMain, Navbar, Settings, TagsView } from './components';
+import SideBar from './components/Sidebar/index.vue';
 
 const settingsStore = useSettingsStore();
 const theme = computed(() => settingsStore.theme);
@@ -45,14 +45,18 @@ const classObj = computed(() => ({
 const { width } = useWindowSize();
 const WIDTH = 992; // refer to Bootstrap's responsive design
 
-watch(width, (w) => {
-  if (w - 1 < WIDTH) {
-    useAppStore().toggleDevice('mobile');
-    useAppStore().closeSideBar({ withoutAnimation: true });
-  } else {
-    useAppStore().toggleDevice('desktop');
-  }
-}, { immediate: true });
+watch(
+  width,
+  w => {
+    if (w - 1 < WIDTH) {
+      useAppStore().toggleDevice('mobile');
+      useAppStore().closeSideBar({ withoutAnimation: true });
+    } else {
+      useAppStore().toggleDevice('desktop');
+    }
+  },
+  { immediate: true }
+);
 
 const settingRef = ref<InstanceType<typeof Settings>>();