移除全局属性

plop-templates/component/index.hbs

@@ -1,5 +1,6 @@
 <script setup{{#if isGlobal}} name="{{ properCase name }}"{{/if}}>
-// const { proxy } = getCurrentInstance()
+// const router = useRouter()
+// const route = useRoute()
 </script>
 
 <template>

plop-templates/page/index.hbs

@@ -1,5 +1,4 @@
 <script setup name="{{ properCase componentName }}">
-// const { proxy } = getCurrentInstance()
 // const router = useRouter()
 // const route = useRoute()
 </script>

src/layout/components/AppSetting/index.vue

@@ -1,10 +1,10 @@
 <script setup name="AppSetting">
 import { useClipboard } from '@vueuse/core'
+import eventBus from '@/util/eventBus'
 import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
 import globalSettings from '@/settings'
 
-const { proxy } = getCurrentInstance()
 const route = useRoute()
 
 const settingsStore = useSettingsStore()
@@ -23,7 +23,7 @@ watch(() => settings, () => {
 })
 
 onMounted(() => {
-    proxy.$eventBus.on('global-theme-toggle', () => {
+    eventBus.on('global-theme-toggle', () => {
         isShow.value = !isShow.value
     })
 })

src/layout/components/Header/index.vue

@@ -3,11 +3,10 @@ import Logo from '../Logo/index.vue'
 import Tools from '../Tools/index.vue'
 import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
+import { useMenu } from '@/util/composables'
 
 const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()
-
-const switchMenu = inject('switchMenu')
 </script>
 
 <template>
@@ -19,7 +18,7 @@ const switchMenu = inject('switchMenu')
                     <!-- 顶部模式 -->
                     <div class="nav">
                         <template v-for="(item, index) in menuStore.allMenus">
-                            <div v-if="item.children && item.children.length !== 0" :key="index" class="item" :class="{'active': index == menuStore.actived}" @click="switchMenu(index)">
+                            <div v-if="item.children && item.children.length !== 0" :key="index" class="item" :class="{'active': index == menuStore.actived}" @click="useMenu().switchTo(index)">
                                 <el-icon>
                                     <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
                                 </el-icon>

src/layout/components/MainSidebar/index.vue

@@ -2,11 +2,10 @@
 import Logo from '../Logo/index.vue'
 import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
+import { useMenu } from '@/util/composables'
 
 const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()
-
-const switchMenu = inject('switchMenu')
 </script>
 
 <template>
@@ -20,7 +19,7 @@ const switchMenu = inject('switchMenu')
                         v-if="item.children && item.children.length !== 0" :key="index" :class="{
                             'item': true,
                             'active': index === menuStore.actived
-                        }" :title="item.meta.title" @click="switchMenu(index)"
+                        }" :title="item.meta.title" @click="useMenu().switchTo(index)"
                     >
                         <el-icon>
                             <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />

src/layout/components/Search/index.vue

@@ -1,11 +1,11 @@
 <script setup name="Search">
+import hotkeys from 'hotkeys-js'
 import { deepClone, isExternalLink } from '@/util'
+import eventBus from '@/util/eventBus'
 import useSettingsStore from '@/store/modules/settings'
 import useRouteStore from '@/store/modules/route'
 import useMenuStore from '@/store/modules/menu'
 
-const { proxy } = getCurrentInstance()
-
 const settingsStore = useSettingsStore()
 const routeStore = useRouteStore()
 const menuStore = useMenuStore()
@@ -15,6 +15,14 @@ const searchInput = ref('')
 const sourceList = ref([])
 const actived = ref(-1)
 
+const inputRef = ref()
+const resultRef = ref()
+const resultItemRef = ref([])
+const setResultItemRef = el => resultItemRef.value.push(el)
+onBeforeUpdate(() => {
+    resultItemRef.value = []
+})
+
 const resultList = computed(() => {
     let result = []
     result = sourceList.value.filter(item => {
@@ -36,19 +44,19 @@ const resultList = computed(() => {
 watch(() => isShow.value, val => {
     if (val) {
         document.querySelector('body').classList.add('hidden')
-        proxy.$refs.search.scrollTop = 0
+        resultRef.value.scrollTop = 0
         // 当搜索显示的时候绑定上、下、回车快捷键，隐藏的时候再解绑。另外当 input 处于 focus 状态时，采用 vue 来绑定键盘事件
-        proxy.$hotkeys('up', keyUp)
-        proxy.$hotkeys('down', keyDown)
-        proxy.$hotkeys('enter', keyEnter)
+        hotkeys('up', keyUp)
+        hotkeys('down', keyDown)
+        hotkeys('enter', keyEnter)
         setTimeout(() => {
-            proxy.$refs.input.focus()
+            inputRef.value.focus()
         }, 500)
     } else {
         document.querySelector('body').classList.remove('hidden')
-        proxy.$hotkeys.unbind('up', keyUp)
-        proxy.$hotkeys.unbind('down', keyDown)
-        proxy.$hotkeys.unbind('enter', keyEnter)
+        hotkeys.unbind('up', keyUp)
+        hotkeys.unbind('down', keyDown)
+        hotkeys.unbind('enter', keyEnter)
         setTimeout(() => {
             searchInput.value = ''
             actived.value = -1
@@ -61,16 +69,16 @@ watch(() => resultList.value, () => {
 })
 
 onMounted(() => {
-    proxy.$eventBus.on('global-search-toggle', () => {
+    eventBus.on('global-search-toggle', () => {
         isShow.value = !isShow.value
     })
-    proxy.$hotkeys('alt+s', e => {
+    hotkeys('alt+s', e => {
         if (settingsStore.topbar.enableNavSearch) {
             e.preventDefault()
             isShow.value = true
         }
     })
-    proxy.$hotkeys('esc', e => {
+    hotkeys('esc', e => {
         if (settingsStore.topbar.enableNavSearch) {
             e.preventDefault()
             isShow.value = false
@@ -154,34 +162,34 @@ function keyDown() {
 }
 function keyEnter() {
     if (actived.value !== -1) {
-        proxy.$refs[`search-item-${actived.value}`][0].click()
+        resultItemRef.value[actived.value].click()
     }
 }
 function handleScroll() {
     let scrollTo = 0
     if (actived.value !== -1) {
-        scrollTo = proxy.$refs['search'].scrollTop
-        const activedOffsetTop = proxy.$refs[`search-item-${actived.value}`][0].offsetTop
-        const activedClientHeight = proxy.$refs[`search-item-${actived.value}`][0].clientHeight
-        const searchScrollTop = proxy.$refs['search'].scrollTop
-        const searchClientHeight = proxy.$refs['search'].clientHeight
+        scrollTo = resultRef.value.scrollTop
+        const activedOffsetTop = resultItemRef.value[actived.value].offsetTop
+        const activedClientHeight = resultItemRef.value[actived.value].clientHeight
+        const searchScrollTop = resultRef.value.scrollTop
+        const searchClientHeight = resultRef.value.clientHeight
         if (activedOffsetTop + activedClientHeight > searchScrollTop + searchClientHeight) {
             scrollTo = activedOffsetTop + activedClientHeight - searchClientHeight
         } else if (activedOffsetTop <= searchScrollTop) {
             scrollTo = activedOffsetTop
         }
     }
-    proxy.$refs['search'].scrollTo({
+    resultRef.value.scrollTo({
         top: scrollTo
     })
 }
 </script>
 
 <template>
-    <div id="search" :class="{'searching': isShow}" @click="isShow && $eventBus.emit('global-search-toggle')">
+    <div id="search" :class="{'searching': isShow}" @click="isShow && eventBus.emit('global-search-toggle')">
         <div class="container">
             <div class="search-box" @click.stop>
-                <el-input ref="input" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" clearable @keydown.esc="$eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
+                <el-input ref="inputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" clearable @keydown.esc="eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
                     <template #prefix>
                         <el-icon>
                             <svg-icon name="ep:search" />
@@ -220,9 +228,9 @@ function handleScroll() {
                     </div>
                 </div>
             </div>
-            <div ref="search" class="result" :class="{'mobile': settingsStore.mode === 'mobile'}">
+            <div ref="resultRef" class="result" :class="{'mobile': settingsStore.mode === 'mobile'}">
                 <router-link v-for="(item, index) in resultList" :key="item.path" v-slot="{ href, navigate }" custom :to="isShow ? item.path : ''">
-                    <a :ref="`search-item-${index}`" :href="isExternalLink(item.path) ? item.path : href" class="item" :class="{'actived': index === actived}" :target="isExternalLink(item.path) ? '_blank' : '_self'" @click="navigate" @mouseover="actived = index">
+                    <a :ref="setResultItemRef" :href="isExternalLink(item.path) ? item.path : href" class="item" :class="{'actived': index === actived}" :target="isExternalLink(item.path) ? '_blank' : '_self'" @click="navigate" @mouseover="actived = index">
                         <el-icon class="icon">
                             <svg-icon v-if="item.icon" :name="item.icon" />
                         </el-icon>

src/layout/components/Tools/index.vue

@@ -1,9 +1,10 @@
 <script setup name="Tools">
 import { useFullscreen } from '@vueuse/core'
+import eventBus from '@/util/eventBus'
+import { useMainPage } from '@/util/composables'
 import useSettingsStore from '@/store/modules/settings'
 import useUserStore from '@/store/modules/user'
 
-const reload = inject('reload')
 const router = useRouter()
 
 const settingsStore = useSettingsStore()
@@ -46,7 +47,7 @@ function pro() {
                 </el-icon>
                 <span class="title">查看专业版</span>
             </span>
-            <span v-if="settingsStore.topbar.enableNavSearch" class="item" @click="$eventBus.emit('global-search-toggle')">
+            <span v-if="settingsStore.topbar.enableNavSearch" class="item" @click="eventBus.emit('global-search-toggle')">
                 <el-icon>
                     <svg-icon name="ep:search" />
                 </el-icon>
@@ -56,7 +57,7 @@ function pro() {
                     <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
                 </el-icon>
             </span>
-            <span v-if="settingsStore.topbar.enablePageReload" class="item" @click="reload()">
+            <span v-if="settingsStore.topbar.enablePageReload" class="item" @click="useMainPage().reload()">
                 <el-icon>
                     <svg-icon name="ep:refresh-right" />
                 </el-icon>
@@ -67,7 +68,7 @@ function pro() {
                     <svg-icon v-show="settingsStore.app.colorScheme === 'dark'" name="ep:moon" />
                 </el-icon>
             </span>
-            <span v-if="settingsStore.topbar.enableAppSetting" class="item" @click="$eventBus.emit('global-theme-toggle')">
+            <span v-if="settingsStore.topbar.enableAppSetting" class="item" @click="eventBus.emit('global-theme-toggle')">
                 <el-icon>
                     <svg-icon name="ep:setting" />
                 </el-icon>

src/layout/index.vue

@@ -1,21 +1,19 @@
 <script setup name="Layout">
+import hotkeys from 'hotkeys-js'
 import Header from './components/Header/index.vue'
 import MainSidebar from './components/MainSidebar/index.vue'
 import SubSidebar from './components/SubSidebar/index.vue'
 import Topbar from './components/Topbar/index.vue'
 import Search from './components/Search/index.vue'
 import AppSetting from './components/AppSetting/index.vue'
-import { isExternalLink } from '@/util'
 import useSettingsStore from '@/store/modules/settings'
 import useKeepAliveStore from '@/store/modules/keepAlive'
-import useMenuStore from '@/store/modules/menu'
+import { useMainPage } from '@/util/composables'
 
-const { proxy } = getCurrentInstance()
-const routeInfo = useRoute(), router = useRouter()
+const routeInfo = useRoute()
 
 const settingsStore = useSettingsStore()
 const keepAliveStore = useKeepAliveStore()
-const menuStore = useMenuStore()
 
 const showCopyright = computed(() => {
     return typeof routeInfo.meta.copyright !== 'undefined' ? routeInfo.meta.copyright : settingsStore.copyright.enable
@@ -40,34 +38,16 @@ watch(() => routeInfo.path, () => {
 })
 
 onMounted(() => {
-    proxy.$hotkeys('f5', e => {
+    hotkeys('f5', e => {
         if (settingsStore.topbar.enablePageReload) {
             e.preventDefault()
-            reload()
+            useMainPage().reload()
         }
     })
 })
 onUnmounted(() => {
-    proxy.$hotkeys.unbind('f5')
+    hotkeys.unbind('f5')
 })
-provide('reload', reload)
-function reload() {
-    router.push({
-        name: 'reload'
-    })
-}
-
-provide('switchMenu', switchMenu)
-function switchMenu(index) {
-    menuStore.setActived(index)
-    if (settingsStore.menu.switchMainMenuAndPageJump) {
-        if (isExternalLink(menuStore.sidebarMenusFirstDeepestPath)) {
-            window.open(menuStore.sidebarMenusFirstDeepestPath, '_blank')
-        } else {
-            router.push(menuStore.sidebarMenusFirstDeepestPath)
-        }
-    }
-}
 </script>
 
 <template>

src/main.js

@@ -10,9 +10,6 @@ app.use(router)
 
 /* importElementPlusPlaceholder */
 
-import globalProperties from '@/util/global.properties'
-globalProperties(app)
-
 // 自定义指令
 import directive from '@/util/directive'
 directive(app)

src/util/composables/index.js

@@ -1,5 +1,9 @@
 import useAuth from './auth'
+import useMainPage from './mainPage'
+import useMenu from './menu'
 
 export {
-    useAuth
+    useAuth,
+    useMainPage,
+    useMenu
 }

src/util/composables/mainPage/index.js

@@ -0,0 +1,15 @@
+import router from '@/router'
+
+function useMainPage() {
+    function reload() {
+        router.push({
+            name: 'reload'
+        })
+    }
+
+    return {
+        reload
+    }
+}
+
+export default useMainPage

src/util/composables/menu/index.js

@@ -0,0 +1,24 @@
+import router from '@/router'
+import useSettingsStore from '@/store/modules/settings'
+import useMenuStore from '@/store/modules/menu'
+import { isExternalLink } from '@/util'
+
+export default function useMenu() {
+    const settingsStore = useSettingsStore()
+    const menuStore = useMenuStore()
+
+    function switchTo(index) {
+        menuStore.setActived(index)
+        if (settingsStore.menu.switchMainMenuAndPageJump) {
+            if (isExternalLink(menuStore.sidebarMenusFirstDeepestPath))
+                window.open(menuStore.sidebarMenusFirstDeepestPath, '_blank')
+
+            else
+                router.push(menuStore.sidebarMenusFirstDeepestPath)
+        }
+    }
+
+    return {
+        switchTo
+    }
+}

src/util/eventBus.js

@@ -0,0 +1,3 @@
+import mitt from 'mitt'
+
+export default mitt()

src/util/global.properties.js

@@ -1,21 +0,0 @@
-import api from '@/api'
-import { useAuth } from '@/util/composables'
-import dayjs from 'dayjs'
-import 'dayjs/locale/zh-cn'
-import Cookies from 'js-cookie'
-import hotkeys from 'hotkeys-js'
-import mitt from 'mitt'
-
-export default function globalProperties(app) {
-    // 请求
-    app.config.globalProperties.$api = api
-    // 鉴权
-    const { auth, authAll } = useAuth()
-    app.config.globalProperties.$auth = auth
-    app.config.globalProperties.$authAll = authAll
-    dayjs.locale('zh-cn')
-    app.config.globalProperties.$dayjs = dayjs
-    app.config.globalProperties.$cookies = Cookies
-    app.config.globalProperties.$hotkeys = hotkeys
-    app.config.globalProperties.$eventBus = mitt()
-}

src/views/login.vue

@@ -12,7 +12,6 @@
 import useSettingsStore from '@/store/modules/settings'
 import useUserStore from '@/store/modules/user'
 
-const { proxy } = getCurrentInstance()
 const route = useRoute(), router = useRouter()
 
 const settingsStore = useSettingsStore()
@@ -25,6 +24,7 @@ const title = import.meta.env.VITE_APP_TITLE
 const formType = ref('login')
 
 // 登录
+const loginFormRef = ref()
 const loginForm = ref({
     account: localStorage.login_account || '',
     password: '',
@@ -40,7 +40,7 @@ const loginRules = ref({
     ]
 })
 function handleLogin() {
-    proxy.$refs.loginFormRef.validate(valid => {
+    loginFormRef.value.validate(valid => {
         if (valid) {
             loading.value = true
             userStore.login(loginForm.value).then(() => {
@@ -59,6 +59,7 @@ function handleLogin() {
 }
 
 // 注册
+const registerFormRef = ref()
 const registerForm = ref({
     account: '',
     captcha: '',
@@ -92,7 +93,7 @@ function handleRegister() {
         message: '注册模块仅提供界面演示，无实际功能，需开发者自行扩展',
         type: 'warning'
     })
-    proxy.$refs.registerFormRef.validate(valid => {
+    registerFormRef.value.validate(valid => {
         if (valid) {
             // 这里编写业务代码
         }
@@ -100,6 +101,7 @@ function handleRegister() {
 }
 
 // 重置密码
+const resetFormRef = ref()
 const resetForm = ref({
     account: localStorage.login_account || '',
     captcha: '',
@@ -122,7 +124,7 @@ function handleReset() {
         message: '重置密码模块仅提供界面演示，无实际功能，需开发者自行扩展',
         type: 'warning'
     })
-    proxy.$refs.resetFormRef.validate(valid => {
+    resetFormRef.value.validate(valid => {
         if (valid) {
             // 这里编写业务代码
         }
@@ -132,6 +134,7 @@ function handleReset() {
 const loading = ref(false)
 const passwordType = ref('password')
 const redirect = ref(null)
+const passwordRef = ref()
 
 onMounted(() => {
     redirect.value = route.query.redirect ?? '/'
@@ -140,7 +143,7 @@ onMounted(() => {
 function showPassword() {
     passwordType.value = passwordType.value === 'password' ? '' : 'password'
     nextTick(() => {
-        proxy.$refs.password.focus()
+        passwordRef.value.focus()
     })
 }
 
@@ -174,7 +177,7 @@ function testAccount(account) {
                         </el-input>
                     </el-form-item>
                     <el-form-item prop="password">
-                        <el-input ref="password" v-model="loginForm.password" :type="passwordType" placeholder="密码" tabindex="2" autocomplete="on" @keyup.enter="handleLogin">
+                        <el-input ref="passwordRef" v-model="loginForm.password" :type="passwordType" placeholder="密码" tabindex="2" autocomplete="on" @keyup.enter="handleLogin">
                             <template #prefix>
                                 <el-icon>
                                     <svg-icon name="password" />
@@ -230,7 +233,7 @@ function testAccount(account) {
                         </el-input>
                     </el-form-item>
                     <el-form-item prop="password">
-                        <el-input ref="password" v-model="registerForm.password" :type="passwordType" placeholder="密码" tabindex="3" autocomplete="on">
+                        <el-input ref="passwordRef" v-model="registerForm.password" :type="passwordType" placeholder="密码" tabindex="3" autocomplete="on">
                             <template #prefix>
                                 <el-icon>
                                     <svg-icon name="password" />

src/views/personal/edit.password.vue

@@ -9,8 +9,8 @@
 <script setup name="PersonalEditPassword">
 import useUserStore from '@/store/modules/user'
 
-const route = useRoute(), router = useRouter()
-const { proxy } = getCurrentInstance()
+const route = useRoute()
+const router = useRouter()
 
 const userStore = useUserStore()
 
@@ -22,6 +22,7 @@ const validatePassword = (rule, value, callback) => {
     }
 }
 
+const formRef = ref()
 const form = ref({
     password: '',
     newpassword: '',
@@ -43,7 +44,7 @@ const rules = ref({
 })
 
 function onSubmit() {
-    proxy.$refs['formRef'].validate(valid => {
+    formRef.value.validate(valid => {
         if (valid) {
             userStore.editPassword(form.value).then(() => {
                 ElMessage({

src/views/personal/setting.vue

@@ -10,6 +10,7 @@
 <script setup name="PersonalSetting">
 const router = useRouter()
 
+const formRef = ref()
 const form = ref({
     headimg: '',
     mobile: '',