feat: 优化文件结构、组件、布局

src/components/common/HoverButton/Button.vue

@@ -0,0 +1,20 @@
+<script setup lang='ts'>
+interface Emit {
+  (e: 'click'): void
+}
+
+const emit = defineEmits<Emit>()
+
+function handleClick() {
+  emit('click')
+}
+</script>
+
+<template>
+  <button
+    class="flex items-center justify-center w-10 h-10 transition rounded-full hover:bg-neutral-100"
+    @click="handleClick"
+  >
+    <slot />
+  </button>
+</template>

src/components/common/HoverButton/index.vue

@@ -0,0 +1,46 @@
+<script setup lang='ts'>
+import { computed } from 'vue'
+import type { PopoverPlacement } from 'naive-ui'
+import { NTooltip } from 'naive-ui'
+import Button from './Button.vue'
+
+interface Props {
+  tooltip?: string
+  placement?: PopoverPlacement
+}
+
+interface Emit {
+  (e: 'click'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tooltip: '',
+  placement: 'bottom',
+})
+
+const emit = defineEmits<Emit>()
+
+const showTooltip = computed(() => Boolean(props.tooltip))
+
+function handleClick() {
+  emit('click')
+}
+</script>
+
+<template>
+  <div v-if="showTooltip">
+    <NTooltip :placement="placement" trigger="hover">
+      <template #trigger>
+        <Button @click="handleClick">
+          <slot />
+        </Button>
+      </template>
+      {{ tooltip }}
+    </NTooltip>
+  </div>
+  <div v-else>
+    <Button @click="handleClick">
+      <slot />
+    </Button>
+  </div>
+</template>

src/components/common/NaiveProvider.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { defineComponent, h } from 'vue'
+import {
+  NConfigProvider,
+  NDialogProvider,
+  NLoadingBarProvider,
+  NMessageProvider,
+  NNotificationProvider,
+  useDialog,
+  useLoadingBar,
+  useMessage,
+  useNotification,
+} from 'naive-ui'
+
+function registerNaiveTools() {
+  window.$loadingBar = useLoadingBar()
+  window.$dialog = useDialog()
+  window.$message = useMessage()
+  window.$notification = useNotification()
+}
+
+const NaiveProviderContent = defineComponent({
+  name: 'NaiveProviderContent',
+  setup() {
+    registerNaiveTools()
+  },
+  render() {
+    return h('div')
+  },
+})
+</script>
+
+<template>
+  <NConfigProvider class="h-full">
+    <NLoadingBarProvider>
+      <NDialogProvider>
+        <NNotificationProvider>
+          <NMessageProvider>
+            <slot />
+            <NaiveProviderContent />
+          </NMessageProvider>
+        </NNotificationProvider>
+      </NDialogProvider>
+    </NLoadingBarProvider>
+  </NConfigProvider>
+</template>

src/components/common/SvgIcon.vue

@@ -0,0 +1,21 @@
+<script setup lang='ts'>
+import { computed, useAttrs } from 'vue'
+import { Icon } from '@iconify/vue'
+
+interface Props {
+  icon?: string
+}
+
+defineProps<Props>()
+
+const attrs = useAttrs()
+
+const bindAttrs = computed<{ class: string; style: string }>(() => ({
+  class: (attrs.class as string) || '',
+  style: (attrs.style as string) || '',
+}))
+</script>
+
+<template>
+  <Icon :icon="icon" v-bind="bindAttrs" />
+</template>

src/components/common/index.ts

@@ -0,0 +1,5 @@
+import HoverButton from './HoverButton/index.vue'
+import NaiveProvider from './NaiveProvider.vue'
+import SvgIcon from './SvgIcon.vue'
+
+export { HoverButton, NaiveProvider, SvgIcon }