refactor(projects): 代码优化

ISSUES CLOSED: \

README.md

@@ -101,11 +101,8 @@ pnpm dev
 pnpm build
 ```
 
-::: warning 注意
-
 **本地环境需要安装 pnpm 6.x 、Node.js 14.x 和 Git**
 
-:::
 
 ## 如何贡献
 

package.json

@@ -76,7 +76,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
-		"eslint-plugin-vue": "8.7.1",
+    "eslint-plugin-vue": "8.7.1",
     "husky": "^8.0.1",
     "lint-staged": "^12.4.2",
     "mockjs": "^1.1.0",
@@ -95,7 +95,6 @@
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-mock": "^2.9.6",
-    "vue-tsc": "^0.34.16",
-    "vueuc": "^0.4.37"
+    "vue-tsc": "^0.34.16"
   }
 }

src/components/common/HoverContainer.vue

@@ -2,27 +2,27 @@
   <div v-if="showTooltip">
     <n-tooltip :placement="placement" trigger="hover">
       <template #trigger>
-        <div class="flex-center h-full cursor-pointer dark:hover:bg-[#333]" :class="computedClass">
+        <div class="flex-center h-full cursor-pointer dark:hover:bg-[#333]" :class="contentClassName">
           <slot></slot>
         </div>
       </template>
       {{ tooltipContent }}
     </n-tooltip>
   </div>
-  <div v-else class="flex-center cursor-pointer dark:hover:bg-[#333]" :class="computedClass">
+  <div v-else class="flex-center cursor-pointer dark:hover:bg-[#333]" :class="contentClassName">
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import type { FollowerPlacement } from 'vueuc';
+import type { PopoverPlacement } from 'naive-ui';
 
 interface Props {
   /** tooltip显示文本 */
   tooltipContent?: string;
   /** tooltip的位置 */
-  placement?: FollowerPlacement;
+  placement?: PopoverPlacement;
   /** class类 */
   contentClass?: string;
   /** 反转模式下 */
@@ -37,8 +37,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const showTooltip = computed(() => Boolean(props.tooltipContent));
 
-const computedClass = computed(() =>
-  [props.contentClass, props.inverted ? 'hover:bg-primary' : 'hover:bg-[#f6f6f6]'].join(' ')
+const contentClassName = computed(
+  () => `${props.contentClass} ${props.inverted ? 'hover:bg-primary' : 'hover:bg-[#f6f6f6]'}`
 );
 </script>
 

src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue

@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import type { FollowerPlacement } from 'vueuc';
+import type { PopoverPlacement } from 'naive-ui';
 import type { EnumThemeLayoutMode } from '@/enum';
 
 interface Props {
@@ -34,7 +34,7 @@ const props = defineProps<Props>();
 type LayoutConfig = Record<
   EnumType.ThemeLayoutMode,
   {
-    placement: FollowerPlacement;
+    placement: PopoverPlacement;
     menuClass: string;
     mainClass: string;
   }