style: rename code

src/components/button-animation/ButtonAnimation.vue

@@ -7,17 +7,17 @@ import { buttonAnimationInjectionKey } from './injection'
 
 import type { ButtonAnimationProps } from './interface'
 
-const buttonAnimationInject = inject(buttonAnimationInjectionKey, null)
+const buttonAnimationInjection = inject(buttonAnimationInjectionKey, null)
 
 const { duration = 600, animation = 'beat' } = defineProps<ButtonAnimationProps>()
 
 const isAnimating = ref(false)
 
 const buttonAnimationProps = computed<ButtonAnimationProps>(() => {
-  return mergeWith({}, buttonAnimationInject, useAttrs())
+  return mergeWith({}, buttonAnimationInjection, useAttrs())
 })
 
-const onClick = () => {
+const handleButtonClick = () => {
   if (isAnimating.value) return
 
   isAnimating.value = true
@@ -33,7 +33,7 @@ const onClick = () => {
     quaternary
     circle
     v-bind="buttonAnimationProps"
-    @click.stop="onClick"
+    @click.stop="handleButtonClick"
   >
     <template #icon>
       <div

src/components/empty-placeholder/EmptyPlaceholder.vue

@@ -11,7 +11,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<EmptyPlaceholderProps>()
+const { show } = defineProps<EmptyPlaceholderProps>()
 </script>
 <template>
   <Transition
@@ -20,7 +20,7 @@ const props = defineProps<EmptyPlaceholderProps>()
     enter-from-class="scale-50 opacity-0"
   >
     <div
-      v-show="props.show"
+      v-show="show"
       class="absolute inset-0 grid size-full place-items-center"
     >
       <NEmpty v-bind="$attrs">

src/layout/component/Tabs.vue

@@ -274,7 +274,7 @@ function scrollToActiveTab(behavior: ScrollBehavior = 'auto') {
   })
 }
 
-function handleTabRefresh() {
+function handleTabRefreshClick() {
   shouldRefreshRoute.value = true
 }
 
@@ -284,7 +284,7 @@ const routerAfterEach = router.afterEach(() => {
   })
 })
 
-const CompTabs = defineComponent({
+const InternalTabs = defineComponent({
   props: {
     modelValue: {
       type: Array as PropType<Tab[]>,
@@ -446,18 +446,18 @@ onBeforeUnmount(() => {
   <div
     class="flex min-h-0 overflow-hidden border-b border-naive-border bg-naive-card transition-[background-color,border-color] select-none"
   >
-    <CompTabs v-model="tabPinnedList" />
+    <InternalTabs v-model="tabPinnedList" />
     <NScrollbar
       ref="scrollbarRef"
       x-scrollable
       @wheel.passive="onScrollbarWheeled"
     >
-      <CompTabs v-model="tabUnPinnedList" />
+      <InternalTabs v-model="tabUnPinnedList" />
     </NScrollbar>
     <div class="flex items-center px-3">
       <ButtonAnimation
         title="刷新"
-        @click="handleTabRefresh"
+        @click="handleTabRefreshClick"
         animation="rotate"
       >
         <span class="iconify size-5 ph--arrows-clockwise"></span>

src/layout/header/Breadcrumb.vue

@@ -12,6 +12,10 @@ const routerBreadcrumb = computed(() => {
   return router.currentRoute.value.matched.filter((item) => item.name !== 'layouts')
 })
 
+const onDropdownSelected: DropdownProps['onSelect'] = (key) => {
+  router.push({ name: key })
+}
+
 function resolveDropdownOptions(route: RouteRecordRaw[]): DropdownProps['options'] {
   return route.map((item) => {
     return {
@@ -25,10 +29,6 @@ function resolveDropdownOptions(route: RouteRecordRaw[]): DropdownProps['options
   })
 }
 
-const onDropdownSelected: DropdownProps['onSelect'] = (key) => {
-  router.push({ name: key })
-}
-
 function isCurrentRoute(name: RouteRecordNameGeneric) {
   return name === router.currentRoute.value.name
 }

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { throttle } from 'lodash-es'
 import {
   NForm,
   NFormItem,
@@ -18,13 +17,13 @@ import type { PreferencesOptions } from '@/stores'
 
 const preferencesStore = usePreferencesStore()
 
-const modifyWatermarkColor = throttle((color: string) => {
+const modifyWatermarkColor = (color: string) => {
   preferencesStore.modify({
     watermarkOptions: {
       fontColor: color,
     },
   })
-}, 100)
+}
 
 const updateWatermarkOptions = <K extends keyof PreferencesOptions['watermarkOptions']>(
   key: K,

src/layout/index.vue

@@ -18,15 +18,15 @@ defineOptions({
   name: 'Layout',
 })
 
+const MobileHeader = defineAsyncComponent(() => import('./mobile/MobileHeader.vue'))
+const MobileLeftAside = defineAsyncComponent(() => import('./mobile/MobileLeftAside.vue'))
+const MobileRightAside = defineAsyncComponent(() => import('./mobile/MobileRightAside.vue'))
+
 const tabsStore = useTabsStore()
 const preferencesStore = usePreferencesStore()
 const { isSmallScreen } = useInjection(mediaQueryInjectionKey)
 const { layoutSlideDirection, setLayoutSlideDirection } = useInjection(layoutInjectionKey)
 
-const MobileHeader = defineAsyncComponent(() => import('./mobile/MobileHeader.vue'))
-const MobileLeftAside = defineAsyncComponent(() => import('./mobile/MobileLeftAside.vue'))
-const MobileRightAside = defineAsyncComponent(() => import('./mobile/MobileRightAside.vue'))
-
 const layoutTranslateOffset = computed(() => {
   return layoutSlideDirection.value === 'right'
     ? preferencesStore.preferences.menu.maxWidth || 0

src/router/guard.ts

@@ -3,7 +3,7 @@ import { usePreferencesStore, pinia, useUserStore } from '@/stores'
 
 import type { Router } from 'vue-router'
 
-const Layouts = () => import('@/layout/index.vue')
+const Layout = () => import('@/layout/index.vue')
 
 const { loadingBar } = useDiscreteApi()
 
@@ -33,14 +33,14 @@ export function setupRouterGuard(router: Router) {
       return false
     }
 
-    if (userStore.token && !router.hasRoute('layouts')) {
+    if (userStore.token && !router.hasRoute('layout')) {
       try {
         await userStore.resolveMenuList()
 
         router.addRoute({
           path: '/',
-          name: 'layouts',
-          component: Layouts,
+          name: 'layout',
+          component: Layout,
           // if you need to have a redirect when accessing / routing
           redirect: '/dashboard',
           children: userStore.routeList,