refactor: rename common component

src/components/SuspenseEmpty.vue → src/components/EmptyPlaceholder.vue

@@ -4,11 +4,11 @@ import { NEmpty } from 'naive-ui'
 import type { EmptyProps, EmptySlots } from 'naive-ui'
 import type { VNode } from 'vue'
 
-export interface SuspenseEmptyProps extends /* @vue-ignore */ EmptyProps {
+export interface EmptyPlaceholderProps extends /* @vue-ignore */ EmptyProps {
   show?: boolean
 }
 
-export interface SuspenseEmptySlots extends EmptySlots {
+export interface EmptyPlaceholderSlots extends EmptySlots {
   content?: () => VNode[]
 }
 
@@ -16,12 +16,14 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<SuspenseEmptyProps>()
+const props = defineProps<EmptyPlaceholderProps>()
 
-const slots = defineSlots<SuspenseEmptySlots>()
+const slots = defineSlots<EmptyPlaceholderSlots>()
 
-function getSuspenseEmptySlots() {
-  return (Object.keys(slots) as (keyof SuspenseEmptySlots)[]).filter((name) => name !== 'content')
+function getEmptySlots() {
+  return (Object.keys(slots) as (keyof EmptyPlaceholderSlots)[]).filter(
+    (name) => name !== 'content',
+  )
 }
 </script>
 <template>
@@ -35,7 +37,7 @@ function getSuspenseEmptySlots() {
     >
       <NEmpty v-bind="$attrs">
         <template
-          v-for="slot of getSuspenseEmptySlots()"
+          v-for="slot of getEmptySlots()"
           :key="slot"
           #[slot]
         >

src/components/HintHelp.vue

@@ -6,7 +6,7 @@ import { isVNode } from 'vue'
 import type { ButtonProps, PopoverProps } from 'naive-ui'
 import type { AllowedComponentProps, HTMLAttributes, SVGAttributes, VNodeChild } from 'vue'
 
-interface TipsProps {
+interface HintHelpProps {
   buttonProps?: AllowedComponentProps & ButtonProps
   content?: (() => VNodeChild) | string
   iconProps?: SVGAttributes
@@ -15,7 +15,7 @@ interface TipsProps {
   popoverProps?: PopoverProps
 }
 
-const { label, popoverProps, buttonProps, iconProps, content } = defineProps<TipsProps>()
+const { label, popoverProps, buttonProps, iconProps, content } = defineProps<HintHelpProps>()
 </script>
 <template>
   <div class="flex items-center gap-x-0.5">

src/components/__tests__/comp.test.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
 
-import { ButtonAnimation, SuspenseEmpty } from '../index'
+import { ButtonAnimation, EmptyPlaceholder } from '../index'
 
 describe('ButtonAnimation Component', () => {
   it('render component', () => {
@@ -51,9 +51,9 @@ describe('ButtonAnimation Component', () => {
   })
 })
 
-describe('SuspenseEmpty Component', () => {
+describe('EmptyPlaceholder Component', () => {
   it('render component', () => {
-    const wrapper = mount(SuspenseEmpty, {
+    const wrapper = mount(EmptyPlaceholder, {
       props: {
         show: true,
       },
@@ -64,7 +64,7 @@ describe('SuspenseEmpty Component', () => {
   })
 
   it('add content slot', () => {
-    const wrapper = mount(SuspenseEmpty, {
+    const wrapper = mount(EmptyPlaceholder, {
       props: {
         show: true,
       },

src/components/index.ts

@@ -1,9 +1,9 @@
 import ButtonAnimation from './ButtonAnimation.vue'
+import EmptyPlaceholder from './EmptyPlaceholder.vue'
 import HintHelp from './HintHelp.vue'
-import SuspenseEmpty from './SuspenseEmpty.vue'
 
-export { SuspenseEmpty, HintHelp, ButtonAnimation }
+export { EmptyPlaceholder, HintHelp, ButtonAnimation }
 
 export * from './ButtonAnimation.vue'
+export * from './EmptyPlaceholder.vue'
 export * from './HintHelp.vue'
-export * from './SuspenseEmpty.vue'

src/layout/index.vue

@@ -4,7 +4,7 @@ import { NScrollbar } from 'naive-ui'
 import { provide, reactive, ref } from 'vue'
 
 import texturePng from '@/assets/texture.png'
-import { SuspenseEmpty } from '@/components'
+import { EmptyPlaceholder } from '@/components'
 import { useComponentThemeOverrides } from '@/composable/comp/useComponentThemeOverrides'
 import { menuInjectionKey, tabsInjectionKey } from '@/injection'
 import { useConfigureStore } from '@/stores/configure'
@@ -80,7 +80,7 @@ provide(tabsInjectionKey, {
         >
           <MainLayout />
         </NScrollbar>
-        <SuspenseEmpty
+        <EmptyPlaceholder
           :show="isEmpty(tabsStore.tabs)"
           description="空标签页"
           size="huge"
@@ -108,7 +108,7 @@ provide(tabsInjectionKey, {
               </div>
             </Transition>
           </template>
-        </SuspenseEmpty>
+        </EmptyPlaceholder>
       </div>
     </div>
   </div>

src/views/about/index.vue

@@ -46,7 +46,7 @@ const dir = `📂 lithe-admin
 │    ├── 📄 ButtonAnimation.vue
 │    ├── 📄 HintHelp.vue
 │    ├── 📄 Noise.vue
-│    ├── 📄 SuspenseEmpty.vue
+│    ├── 📄 EmptyPlaceholder.vue
 │    └── 📂 __tests__/
 │      ├── 📄 comp.test.ts
 │    ├── 📄 index.ts

src/views/draggable/index.vue

@@ -5,7 +5,7 @@ import { NAlert, NCard, NSplit, NScrollbar, NButton } from 'naive-ui'
 import { ref, watch } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
 
-import { SuspenseEmpty } from '@/components'
+import { EmptyPlaceholder } from '@/components'
 import { usePersonalization } from '@/composable/usePersonalization'
 
 import type { UseDraggableReturn } from 'vue-draggable-plus'
@@ -208,7 +208,7 @@ watch(
               </VueDraggable>
             </NScrollbar>
             <NScrollbar>
-              <SuspenseEmpty
+              <EmptyPlaceholder
                 :show="cloneList2.length <= 0"
                 description="把左边的任务拖拽到这里"
               >
@@ -242,7 +242,7 @@ watch(
                     </div>
                   </VueDraggable>
                 </template>
-              </SuspenseEmpty>
+              </EmptyPlaceholder>
             </NScrollbar>
           </div>
         </template>