feat(projects): 添加头部折叠按钮

src/components/common/HoverContainer/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div v-if="showTooltip">
+    <n-tooltip :placement="placement" trigger="hover">
+      <template #trigger>
+        <div class="flex-center h-full cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]" :class="contentClass">
+          <slot></slot>
+        </div>
+      </template>
+      {{ tooltipContent }}
+    </n-tooltip>
+  </div>
+  <div v-else class="flex-center cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]" :class="contentClass">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { NTooltip } from 'naive-ui';
+import type { FollowerPlacement } from 'vueuc';
+
+interface Props {
+  /** tooltip显示文本 */
+  tooltipContent?: string;
+  /** tooltip的位置 */
+  placement?: FollowerPlacement;
+  /** class类 */
+  contentClass?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  tooltipContent: '',
+  placement: 'bottom',
+  contentClass: ''
+});
+
+const showTooltip = computed(() => Boolean(props.tooltipContent));
+</script>
+<style scoped></style>

src/components/common/index.ts

@@ -2,5 +2,6 @@ import NaiveProvider from './NaiveProvider/index.vue';
 import SystemLogo from './SystemLogo/index.vue';
 import DarkModeSwitch from './DarkModeSwitch/index.vue';
 import DarkModeContainer from './DarkModeContainer/index.vue';
+import HoverContainer from './HoverContainer/index.vue';
 
-export { NaiveProvider, SystemLogo, DarkModeSwitch, DarkModeContainer };
+export { NaiveProvider, SystemLogo, DarkModeSwitch, DarkModeContainer, HoverContainer };