style: rename useToRefsXx-> toRefsXxStore

src/components/Noise.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import noisePng from '@/assets/noise.png'
-import { useToRefsPreferences } from '@/stores'
+import { toRefsPreferencesStore } from '@/stores'
 
-const { noiseOpacity } = useToRefsPreferences()
+const { noiseOpacity } = toRefsPreferencesStore()
 </script>
 <template>
   <div

src/composables/useComponentThemeOverrides.ts

@@ -1,12 +1,12 @@
 import { computed } from 'vue'
 
-import { useToRefsPreferences } from '@/stores/preferences'
+import { toRefsPreferencesStore } from '@/stores/preferences'
 import twc from '@/utils/tailwindColor'
 
 import type { GlobalThemeOverrides } from 'naive-ui'
 
 export function useComponentThemeOverrides() {
-  const { isDark } = useToRefsPreferences()
+  const { isDark } = toRefsPreferencesStore()
 
   const scrollbarInModal = computed<GlobalThemeOverrides['Scrollbar']>(() =>
     isDark.value

src/composables/useTheme.ts

@@ -2,13 +2,13 @@ import { merge } from 'lodash-es'
 import { darkTheme, lightTheme } from 'naive-ui'
 import { computed } from 'vue'
 
-import { useToRefsPreferences } from '@/stores/preferences'
+import { toRefsPreferencesStore } from '@/stores/preferences'
 import { commonThemeOverrides } from '@/theme/common'
 import { baseDarkThemeOverrides } from '@/theme/dark'
 import { baseLightThemeOverrides } from '@/theme/light'
 
 export function useTheme() {
-  const { themeColor, isDark } = useToRefsPreferences()
+  const { themeColor, isDark } = toRefsPreferencesStore()
 
   const getLightThemeOverrides = (primaryColor = themeColor.value) => {
     return merge(commonThemeOverrides(primaryColor), baseLightThemeOverrides(primaryColor))

src/layout/aside/SidebarMenu.vue

@@ -5,11 +5,11 @@ import { storeToRefs } from 'pinia'
 import { h, ref, useTemplateRef, watch } from 'vue'
 
 import router from '@/router'
-import { useToRefsPreferences, useUserStore } from '@/stores'
+import { toRefsPreferencesStore, useUserStore } from '@/stores'
 
 import type { MenuInst, MenuProps } from 'naive-ui'
 
-const { sidebarMenu } = useToRefsPreferences()
+const { sidebarMenu } = toRefsPreferencesStore()
 
 const { menuList } = storeToRefs(useUserStore())
 

src/layout/aside/SidebarUserPanel.vue

@@ -4,11 +4,11 @@ import { useMessage } from 'naive-ui'
 import { ButtonAnimation } from '@/components'
 import Avatar from '@/components/UserAvatar.vue'
 import UserDropdown from '@/components/UserDropdown.vue'
-import { useToRefsPreferences, useToRefsUser } from '@/stores'
+import { toRefsPreferencesStore, toRefsUserStore } from '@/stores'
 
-const { sidebarMenu } = useToRefsPreferences()
+const { sidebarMenu } = toRefsPreferencesStore()
 
-const { user } = useToRefsUser()
+const { user } = toRefsUserStore()
 
 const message = useMessage()
 

src/layout/aside/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { useToRefsPreferences, DEFAULT_PREFERENCES_OPTIONS } from '@/stores'
+import { toRefsPreferencesStore, DEFAULT_PREFERENCES_OPTIONS } from '@/stores'
 
 import SidebarMenu from './SidebarMenu.vue'
 import SidebarUserPanel from './SidebarUserPanel.vue'
@@ -10,7 +10,7 @@ defineOptions({
   name: 'AsideLayout',
 })
 
-const { preferences, sidebarMenu } = useToRefsPreferences()
+const { preferences, sidebarMenu } = toRefsPreferencesStore()
 
 const menuCollapseWidth = computed(() => {
   return sidebarMenu.value.collapsed

src/layout/header/action/PreferencesDrawer.vue

@@ -13,7 +13,7 @@ import { h, ref } from 'vue'
 import { ButtonAnimation, ButtonAnimationProvider } from '@/components'
 import { useComponentThemeOverrides, useInjection } from '@/composables'
 import { mediaQueryInjectionKey } from '@/injection'
-import { usePreferencesStore, useSystemStore, useToRefsPreferences } from '@/stores'
+import { usePreferencesStore, useSystemStore, toRefsPreferencesStore } from '@/stores'
 import { ccAPCA } from '@/utils/chromaHelper'
 import twColors from '@/utils/tailwindColor'
 import twc from '@/utils/tailwindColor'
@@ -42,7 +42,7 @@ const {
   showWatermark,
   showNoise,
   sidebarMenu,
-} = useToRefsPreferences()
+} = toRefsPreferencesStore()
 
 const systemStore = useSystemStore()
 

src/layout/header/action/ThemeModePopover.vue

@@ -3,7 +3,7 @@ import { NPopselect } from 'naive-ui'
 import { computed, h } from 'vue'
 
 import { ButtonAnimation } from '@/components'
-import { useToRefsPreferences } from '@/stores'
+import { toRefsPreferencesStore } from '@/stores'
 
 import type { PopoverProps } from 'naive-ui'
 
@@ -15,7 +15,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const { themeMode } = useToRefsPreferences()
+const { themeMode } = toRefsPreferencesStore()
 
 const themeModeDropdownOptions = [
   {

src/layout/header/action/component/LayoutThumbnail.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useToRefsPreferences } from '@/stores'
+import { toRefsPreferencesStore } from '@/stores'
 
-const { preferences, themeColor, navigationMode } = useToRefsPreferences()
+const { preferences, themeColor, navigationMode } = toRefsPreferencesStore()
 </script>
 <template>
   <div

src/layout/header/action/component/NoiseModal.vue

@@ -2,11 +2,11 @@
 import { NSlider, NInputNumber } from 'naive-ui'
 import { reactive, ref } from 'vue'
 
-import { useToRefsPreferences } from '@/stores'
+import { toRefsPreferencesStore } from '@/stores'
 
 import type { SliderProps } from 'naive-ui'
 
-const { preferences, noiseOpacity } = useToRefsPreferences()
+const { preferences, noiseOpacity } = toRefsPreferencesStore()
 
 const opacity = ref(noiseOpacity.value)
 

src/layout/header/action/component/WatermarkModal.vue

@@ -11,9 +11,9 @@ import {
 } from 'naive-ui'
 
 import { HintHelp } from '@/components'
-import { useToRefsPreferences } from '@/stores'
+import { toRefsPreferencesStore } from '@/stores'
 
-const { watermarkOptions } = useToRefsPreferences()
+const { watermarkOptions } = toRefsPreferencesStore()
 </script>
 <template>
   <NForm

src/layout/header/action/index.vue

@@ -4,7 +4,7 @@ import { defineAsyncComponent, h } from 'vue'
 import { ButtonAnimation } from '@/components'
 import { useInjection } from '@/composables'
 import { mediaQueryInjectionKey } from '@/injection'
-import { useToRefsPreferences } from '@/stores'
+import { toRefsPreferencesStore } from '@/stores'
 
 import FullScreen from './FullScreen.vue'
 import PreferencesDrawer from './PreferencesDrawer.vue'
@@ -21,7 +21,7 @@ const AsyncAvatarDropdown = defineAsyncComponent({
 })
 
 const { isMaxSm } = useInjection(mediaQueryInjectionKey)
-const { navigationMode } = useToRefsPreferences()
+const { navigationMode } = toRefsPreferencesStore()
 </script>
 <template>
   <div class="flex items-center">

src/layout/header/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useToRefsPreferences } from '@/stores'
+import { toRefsPreferencesStore } from '@/stores'
 
 import Action from './action/index.vue'
 import Logo from './logo/index.vue'
@@ -9,7 +9,7 @@ defineOptions({
   name: 'HeaderLayout',
 })
 
-const { navigationMode } = useToRefsPreferences()
+const { navigationMode } = toRefsPreferencesStore()
 </script>
 <template>
   <header class="flex bg-naive-card transition-[background-color]">

src/layout/header/logo/index.vue

@@ -2,7 +2,7 @@
 import { nextTick, ref, useTemplateRef, watch } from 'vue'
 
 import Logo from '@/components/AppLogo.vue'
-import { useToRefsPreferences, DEFAULT_PREFERENCES_OPTIONS } from '@/stores'
+import { toRefsPreferencesStore, DEFAULT_PREFERENCES_OPTIONS } from '@/stores'
 
 defineOptions({
   name: 'Logo',
@@ -10,7 +10,7 @@ defineOptions({
 
 const APP_NAME = import.meta.env.VITE_APP_NAME
 
-const { navigationMode, sidebarMenu, showLogo } = useToRefsPreferences()
+const { navigationMode, sidebarMenu, showLogo } = toRefsPreferencesStore()
 
 const logoWrapperRef = useTemplateRef<HTMLElement>('logoWrapper')
 

src/layout/header/navigation/HorizontalMenu.vue

@@ -127,9 +127,7 @@ watchThrottled(
 )
 
 onMounted(() => {
-  navigationContainerRef.value = navigationWrapperRef.value?.closest(
-    'nav',
-  ) as HTMLElement
+  navigationContainerRef.value = navigationWrapperRef.value?.closest('nav') as HTMLElement
   calculateMenuRightBound()
 })
 

src/layout/header/navigation/index.vue

@@ -15,9 +15,7 @@ const AsyncBreadcrumb = defineAsyncComponent(() => import('./Breadcrumb.vue'))
 const { showNavigationButton, showBreadcrumb, navigationMode } = toRefsPreferencesStore()
 </script>
 <template>
-  <nav
-    class="flex h-9 flex-1 items-center"
-  >
+  <nav class="flex h-9 flex-1 items-center">
     <CollapseTransition :display="showNavigationButton && navigationMode === 'sidebar'">
       <AsyncNavigationButton />
     </CollapseTransition>

src/layout/index.vue

@@ -6,7 +6,7 @@ import texturePng from '@/assets/texture.png'
 import { CollapseTransition, EmptyPlaceholder } from '@/components'
 import { useInjection } from '@/composables'
 import { mediaQueryInjectionKey, layoutInjectionKey } from '@/injection'
-import { useToRefsPreferences, useToRefsTabs } from '@/stores'
+import { toRefsPreferencesStore, toRefsTabsStore } from '@/stores'
 
 import FooterLayout from './footer/index.vue'
 import HeaderLayout from './header/index.vue'
@@ -17,7 +17,7 @@ defineOptions({
   name: 'Layout',
 })
 
-const { preferences, sidebarMenu, navigationMode, showFooter, showTabs } = useToRefsPreferences()
+const { preferences, sidebarMenu, navigationMode, showFooter, showTabs } = toRefsPreferencesStore()
 
 const AsyncMobileHeader = defineAsyncComponent(() => import('./mobile/MobileHeader.vue'))
 const AsyncMobileLeftAside = defineAsyncComponent(() => import('./mobile/MobileLeftAside.vue'))
@@ -35,7 +35,7 @@ const AsyncAsideLayout = defineAsyncComponent({
   delay: 0,
 })
 
-const { tabs } = useToRefsTabs()
+const { tabs } = toRefsTabsStore()
 
 const { isMaxSm } = useInjection(mediaQueryInjectionKey)
 

src/layout/main/index.vue

@@ -6,7 +6,7 @@ import { RouterView } from 'vue-router'
 import { useInjection } from '@/composables'
 import { mediaQueryInjectionKey, layoutInjectionKey } from '@/injection'
 import router from '@/router'
-import { useToRefsPreferences, useTabsStore, useToRefsTabs } from '@/stores'
+import { toRefsPreferencesStore, useTabsStore, toRefsTabsStore } from '@/stores'
 
 import type { Tab } from '@/stores'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
@@ -20,11 +20,11 @@ const { isMaxSm } = useInjection(mediaQueryInjectionKey)
 const { shouldRefreshRoute, layoutSlideDirection, setLayoutSlideDirection } =
   useInjection(layoutInjectionKey)
 
-const { enableNavigationTransition, showTabs } = useToRefsPreferences()
+const { enableNavigationTransition, showTabs } = toRefsPreferencesStore()
 
 const { createTab, setTabActivePath } = useTabsStore()
 
-const { tabs, tabActivePath } = useToRefsTabs()
+const { tabs, tabActivePath } = toRefsTabsStore()
 
 const isMounted = ref(false)
 

src/layout/tabs/index.vue

@@ -20,7 +20,7 @@ import { ButtonAnimation } from '@/components'
 import { useInjection } from '@/composables'
 import { layoutInjectionKey } from '@/injection'
 import router from '@/router'
-import { useTabsStore, useToRefsPreferences, useToRefsTabs } from '@/stores'
+import { useTabsStore, toRefsPreferencesStore, toRefsTabsStore } from '@/stores'
 
 import type { Tab, Key } from '@/stores'
 import type { DropdownOption } from 'naive-ui'
@@ -57,9 +57,9 @@ const {
   getRemovableIds,
 } = useTabsStore()
 
-const { tabs, tabActivePath } = useToRefsTabs()
+const { tabs, tabActivePath } = toRefsTabsStore()
 
-const { showTabClose } = useToRefsPreferences()
+const { showTabClose } = toRefsPreferencesStore()
 
 const tabPinnedList = computed({
   get: () => tabs.value.filter((tab) => tab.pinned),
@@ -288,7 +288,7 @@ const routerAfterEach = router.afterEach(() => {
   })
 })
 
-const InternalTabs = defineComponent({
+const TabList = defineComponent({
   props: {
     modelValue: {
       type: Array as PropType<Tab[]>,
@@ -441,13 +441,13 @@ onBeforeUnmount(() => {
   <div
     class="flex min-h-0 overflow-hidden border-b border-naive-border bg-naive-card transition-[background-color,border-color] select-none"
   >
-    <InternalTabs v-model="tabPinnedList" />
+    <TabList v-model="tabPinnedList" />
     <NScrollbar
       ref="scrollbarRef"
       x-scrollable
       @wheel.passive="onScrollbarWheeled"
     >
-      <InternalTabs v-model="tabUnPinnedList" />
+      <TabList v-model="tabUnPinnedList" />
     </NScrollbar>
     <div class="flex items-center px-3">
       <ButtonAnimation

src/router/guard.ts

@@ -1,5 +1,5 @@
 import { useDiscreteApi } from '@/composables'
-import { useUserStore, useToRefsPreferences, useToRefsUser } from '@/stores'
+import { useUserStore, toRefsPreferencesStore, toRefsUserStore } from '@/stores'
 
 import type { Router } from 'vue-router'
 
@@ -7,10 +7,10 @@ const Layout = () => import('@/layout/index.vue')
 
 const { loadingBar } = useDiscreteApi()
 
-const { showTopLoadingBar } = useToRefsPreferences()
+const { showTopLoadingBar } = toRefsPreferencesStore()
 const { resolveMenuList, cleanup } = useUserStore()
 
-const { token, routeList } = useToRefsUser()
+const { token, routeList } = toRefsUserStore()
 
 export function setupRouterGuard(router: Router) {
   router.beforeEach(async (to, from, next) => {

src/stores/preferences.ts

@@ -122,7 +122,7 @@ export const usePreferencesStore = defineStore('preferencesStore', () => {
   }
 })
 
-export function useToRefsPreferences() {
+export function toRefsPreferencesStore() {
   return {
     ...storeToRefs(usePreferencesStore(pinia)),
   }

src/stores/tabs.ts

@@ -186,7 +186,7 @@ export const useTabsStore = defineStore('tabsStore', () => {
   }
 })
 
-export function useToRefsTabs() {
+export function toRefsTabsStore() {
   return {
     ...storeToRefs(useTabsStore(pinia)),
   }

src/stores/user.ts

@@ -79,7 +79,7 @@ export const useUserStore = defineStore('userStore', () => {
   }
 })
 
-export function useToRefsUser() {
+export function toRefsUserStore() {
   return {
     ...storeToRefs(useUserStore(pinia)),
   }

src/views/dashboard/index.vue

@@ -5,7 +5,7 @@ import { NNumberAnimation } from 'naive-ui'
 import { onMounted, watch, ref, computed, onUnmounted, nextTick } from 'vue'
 
 import { ContentWrapper } from '@/components'
-import { useToRefsPreferences } from '@/stores'
+import { toRefsPreferencesStore } from '@/stores'
 import twc from '@/utils/tailwindColor'
 
 import type { ECharts } from 'echarts'
@@ -14,7 +14,7 @@ defineOptions({
   name: 'Dashboard',
 })
 
-const { sidebarMenu, navigationMode, themeColor, isDark } = useToRefsPreferences()
+const { sidebarMenu, navigationMode, themeColor, isDark } = toRefsPreferencesStore()
 
 const cardList = ref(generateCardData())
 

src/views/sign-in/component/ThemeColorPopover.vue

@@ -2,10 +2,10 @@
 import { NPopover } from 'naive-ui'
 
 import { ButtonAnimation } from '@/components'
-import { useToRefsPreferences } from '@/stores'
+import { toRefsPreferencesStore } from '@/stores'
 import twColors from '@/utils/tailwindColor'
 
-const { themeColor } = useToRefsPreferences()
+const { themeColor } = toRefsPreferencesStore()
 
 const colorSwatches = [
   twColors.red[500],

src/views/sign-in/index.vue

@@ -15,7 +15,7 @@ import { useInjection } from '@/composables'
 import { mediaQueryInjectionKey } from '@/injection'
 import ThemeModePopover from '@/layout/header/action/ThemeModePopover.vue'
 import router from '@/router'
-import { useToRefsPreferences, useToRefsUser } from '@/stores'
+import { toRefsPreferencesStore, toRefsUserStore } from '@/stores'
 
 import ThemeColorPopover from './component/ThemeColorPopover.vue'
 
@@ -27,8 +27,8 @@ defineOptions({
 
 const { isMaxSm } = useInjection(mediaQueryInjectionKey)
 
-const { isDark } = useToRefsPreferences()
-const { token } = useToRefsUser()
+const { isDark } = toRefsPreferencesStore()
+const { token } = toRefsUserStore()
 
 const illustrations = [
   defineAsyncComponent(() => import('./component/Illustration1.vue')),