refactor: 引入 unplugin-auto-import，减少重复性 Vue 函数引入

避免在每个 Vue 组件中都重复性的去声明 ref 等函数

src/App.vue

@@ -6,7 +6,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed } from 'vue';
   import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
   import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
   import GlobalSetting from '@/components/global-setting/index.vue';

src/auto-import.d.ts

@@ -0,0 +1,71 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useLink: typeof import('vue-router')['useLink']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

src/components/date-range-picker/index.vue

@@ -10,7 +10,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed, PropType } from 'vue';
   import { ShortcutType } from '@arco-design/web-vue';
   import dayjs from 'dayjs';
 

src/components/dict-tag/index.vue

@@ -20,7 +20,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed } from 'vue';
   import { LabelValueState } from '@/store/modules/dict/types';
 
   const props = defineProps({

src/components/icon-select/index.vue

@@ -22,7 +22,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
   import icons from './requireIcons';
 
   const iconName = ref('');

src/env.d.ts

@@ -18,3 +18,17 @@ declare module '@kangc/v-md-editor/lib/plugins/copy-code/index';
 declare module '@kangc/v-md-editor/lib/plugins/todo-list/index';
 declare module 'highlight.js';
 declare module 'highlight.js/lib/languages/json';
+
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type {
+    Component,
+    ComponentPublicInstance,
+    ComputedRef,
+    InjectionKey,
+    PropType,
+    Ref,
+    VNode,
+  } from 'vue';
+}

src/views/dashboard/workplace/components/access-trend.vue

@@ -28,7 +28,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
   import useLoading from '@/hooks/loading';
   import {
     DashboardAccessTrendRecord,

src/views/dashboard/workplace/components/announcement.vue

@@ -80,7 +80,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref } from 'vue';
   import {
     DashboardAnnouncementRecord,
     listAnnouncement,

src/views/dashboard/workplace/components/banner.vue

@@ -10,7 +10,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed } from 'vue';
   import { useUserStore } from '@/store';
 
   const userStore = useUserStore();

src/views/dashboard/workplace/components/data-panel.vue

@@ -100,7 +100,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
   import { DashboardTotalRecord, getTotal } from '@/api/common/dashboard';
   import PvCountIcon from '@/assets/icons/png/popularity.png';
   import IpCountIcon from '@/assets/icons/png/same-city.png';

src/views/dashboard/workplace/components/geo-distribution.vue

@@ -16,7 +16,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
   import useLoading from '@/hooks/loading';
   import useChartOption from '@/hooks/chart-option';
   import {

src/views/dashboard/workplace/components/popular-module.vue

@@ -61,7 +61,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
   import useLoading from '@/hooks/loading';
   import { listPopularModule } from '@/api/common/dashboard';
   import type { TableData } from '@arco-design/web-vue/es/table/interface';

src/views/dashboard/workplace/components/quick-operation.vue

@@ -22,8 +22,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { useRouter } from 'vue-router';
-
   const router = useRouter();
   const links = [
     { text: '用户管理', icon: 'user', path: '/system/user' },

src/views/dashboard/workplace/components/recently-visited.vue

@@ -28,8 +28,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted } from 'vue';
-  import { useRouter } from 'vue-router';
   import { DashboardRecentlyVisitedRecord } from '@/api/common/dashboard';
 
   const router = useRouter();

src/views/login/components/account-login.vue

@@ -53,7 +53,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { useStorage } from '@vueuse/core';
   import { useUserStore } from '@/store';

src/views/login/components/email-login.vue

@@ -39,9 +39,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive, computed } from 'vue';
   import { useI18n } from 'vue-i18n';
-  import { useRouter } from 'vue-router';
   import { ValidatedError } from '@arco-design/web-vue';
   import { useUserStore } from '@/store';
   import { EmailLoginReq } from '@/api/auth';

src/views/login/components/phone-login.vue

@@ -53,9 +53,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive, computed } from 'vue';
   import { useI18n } from 'vue-i18n';
-  import { useRouter } from 'vue-router';
   import { ValidatedError } from '@arco-design/web-vue';
   import { useUserStore } from '@/store';
   import { PhoneLoginReq } from '@/api/auth';

src/views/login/index.vue

@@ -72,7 +72,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
   import { useAppStore } from '@/store';
   import useResponsive from '@/hooks/responsive';
   import { socialAuth } from '@/api/auth';

src/views/login/social/index.vue

@@ -5,8 +5,6 @@
 </template>
 
 <script setup lang="ts">
-  import { getCurrentInstance, ref } from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
   import { useUserStore } from '@/store';
   import { useI18n } from 'vue-i18n';
   import { isLogin } from '@/utils/auth';

src/views/monitor/log/login/index.vue

@@ -84,7 +84,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
   import {
     LoginLogParam,
     LoginLogRecord,

src/views/monitor/log/operation/index.vue

@@ -93,7 +93,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
   import {
     OperationLogParam,
     OperationLogRecord,

src/views/monitor/log/system/index.vue

@@ -275,7 +275,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive, watch } from 'vue';
   import { useClipboard } from '@vueuse/core';
   import {
     SystemLogParam,

src/views/monitor/online/index.vue

@@ -100,7 +100,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
   import { DataRecord, ListParam, list, kickout } from '@/api/monitor/online';
   import { getToken } from '@/utils/auth';
   import checkPermission from '@/utils/permission';

src/views/system/announcement/index.vue

@@ -340,7 +340,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
   import {
     DataRecord,
     ListParam,

src/views/system/config/components/basic-setting.vue

@@ -170,7 +170,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, reactive, toRefs } from 'vue';
   import { FileItem, RequestOption } from '@arco-design/web-vue';
   import {
     BasicConfigRecord,

src/views/system/dept/index.vue

@@ -303,7 +303,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
   import { TreeNodeData, TableData } from '@arco-design/web-vue';
   import {
     DataRecord,

src/views/system/dict/index.vue

@@ -221,7 +221,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
   import { TableData } from '@arco-design/web-vue';
   import {
     DataRecord,

src/views/system/dict/item.vue

@@ -169,7 +169,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive, computed } from 'vue';
   import {
     DataRecord,
     ListParam,

src/views/system/file/components/FileDetailModal/index.vue

@@ -31,7 +31,6 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue';
   import { FileItem } from '@/api/system/file';
   import FileImg from '../../main/FileMain/FileImg.vue';
 

src/views/system/file/components/FileRenameModal/index.vue

@@ -28,7 +28,6 @@
 </template>
 
 <script setup lang="ts">
-  import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
   import type { FormInstance, Modal } from '@arco-design/web-vue';
   import { FileItem, update } from '@/api/system/file';
 

src/views/system/file/components/PreviewAudioModal/index.vue

@@ -29,7 +29,6 @@
 <script setup lang="ts">
   import { useDraggable, useWindowSize, useElementSize } from '@vueuse/core';
   import type { FileItem } from '@/api/system/file';
-  import { computed, onMounted, ref } from 'vue';
 
   interface Props {
     fileInfo: FileItem;

src/views/system/file/components/PreviewVideoModal/index.vue

@@ -14,7 +14,6 @@
 <script setup lang="ts">
   import Player from 'xgplayer';
   import type { FileItem } from '@/api/system/file';
-  import { nextTick, onMounted, ref } from 'vue';
 
   interface Props {
     fileInfo: FileItem;

src/views/system/file/main/FileAside.vue

@@ -31,8 +31,6 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, watch } from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
   import { fileTypeList, type fileTypeListItem } from '@/constant/file';
 
   const route = useRoute();

src/views/system/file/main/FileMain/FileImg.vue

@@ -4,7 +4,6 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue';
   import { fileExtendNameIconMap, imageTypeList } from '@/constant/file';
   import type { FileItem } from '@/api/system/file';
   import SvgIcon from '@/components/svg-icon/index.vue';

src/views/system/file/main/FileMain/FileList.vue

@@ -72,7 +72,6 @@
 <script setup lang="ts">
   import type { TableRowSelection } from '@arco-design/web-vue';
   import type { FileItem } from '@/api/system/file';
-  import { reactive } from 'vue';
   import FileImg from './FileImg.vue';
   import FileRightMenu from './FileRightMenu.vue';
 

src/views/system/file/main/FileMain/index.vue

@@ -403,8 +403,6 @@
     del as delStorage,
   } from '@/api/system/storage';
   import { upload } from '@/api/common';
-  import { onBeforeRouteUpdate, useRoute } from 'vue-router';
-  import { getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
   import FileGrid from './FileGrid.vue';
   import FileList from './FileList.vue';
   import {

src/views/system/menu/index.vue

@@ -345,7 +345,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
   import { TreeNodeData, TableData } from '@arco-design/web-vue';
   import {
     DataRecord,

src/views/system/message/index.vue

@@ -235,7 +235,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
   import { DataRecord, ListParam, list, del, read } from '@/api/system/message';
 
   const { proxy } = getCurrentInstance() as any;

src/views/system/role/index.vue

@@ -422,7 +422,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
   import { TreeNodeData } from '@arco-design/web-vue';
   import {
     DataRecord,

src/views/system/user/center/components/basic-info.vue

@@ -52,7 +52,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive, computed } from 'vue';
   import { FieldRule } from '@arco-design/web-vue';
   import { BasicInfoModel, updateBasicInfo } from '@/api/system/user-center';
   import { useI18n } from 'vue-i18n';

src/views/system/user/center/components/operation-log.vue

@@ -56,7 +56,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, toRefs, reactive } from 'vue';
   import {
     OperationLogParam,
     OperationLogRecord,

src/views/system/user/center/components/security-settings/bind-social.vue

@@ -76,7 +76,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref } from 'vue';
   import {
     UserSocialBindRecord,
     listSocial,

src/views/system/user/center/components/security-settings/update-email.vue

@@ -102,7 +102,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, reactive, computed } from 'vue';
   import { FieldRule } from '@arco-design/web-vue';
   import { getMailCaptcha } from '@/api/common/captcha';
   import { UserEmailUpdateReq, updateEmail } from '@/api/system/user-center';

src/views/system/user/center/components/security-settings/update-phone.vue

@@ -109,7 +109,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, reactive, computed } from 'vue';
   import { FieldRule } from '@arco-design/web-vue';
   import { BehaviorCaptchaReq, getSmsCaptcha } from '@/api/common/captcha';
   import { UserPhoneUpdateReq, updatePhone } from '@/api/system/user-center';

src/views/system/user/center/components/security-settings/update-pwd.vue

@@ -94,7 +94,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, reactive, computed } from 'vue';
   import { FieldRule } from '@arco-design/web-vue';
   import { updatePassword } from '@/api/system/user-center';
   import { useI18n } from 'vue-i18n';

src/views/system/user/center/components/user-panel.vue

@@ -112,7 +112,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { reactive, ref, getCurrentInstance } from 'vue';
   import { FileItem } from '@arco-design/web-vue';
   import { uploadAvatar, cropperOptions } from '@/api/system/user-center';
   import { useUserStore } from '@/store';

src/views/system/user/center/index.vue

@@ -29,8 +29,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted } from 'vue';
-  import { useRoute } from 'vue-router';
   import UserPanel from './components/user-panel.vue';
   import BasicInfo from './components/basic-info.vue';
   import SecuritySettings from './components/security-settings.vue';

src/views/system/user/index.vue

@@ -514,7 +514,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive, watch } from 'vue';
   import { TreeNodeData } from '@arco-design/web-vue';
   import {
     DataRecord,

src/views/tool/generator/index.vue

@@ -315,7 +315,6 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, toRefs, reactive, watch } from 'vue';
   import { useClipboard } from '@vueuse/core';
   import { Codemirror } from 'vue-codemirror';
   import { java } from '@codemirror/lang-java';