feat: 添加 Husky 和 commit 限制配置

src/components/ModuleSwitcher/ModuleButton.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    :style="{ backgroundImage: getBackgroundImage(currentImage) }"
+    :class="['module-btn', module.className, { selected: isSelected }]"
+  >
+    <div :class="['btn-mask', module.maskConfig.className]" @click="$emit('click')"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getBackgroundImage } from '@/utils'
+
+// 定义模块类型
+type ModuleType = 'vlog' | 'film' | 'interview'
+
+// 模块配置接口
+interface ModuleConfig {
+  type: ModuleType
+  normalImage: string
+  selectedImage: string
+  className: string
+  maskConfig: {
+    className: string
+    position: string
+    size: string
+    transform: string
+  }
+}
+
+// Props定义
+interface Props {
+  module: ModuleConfig
+  isSelected: boolean
+}
+
+// Emits定义
+interface Emits {
+  (e: 'click'): void
+}
+
+const props = defineProps<Props>()
+defineEmits<Emits>()
+
+// 计算当前显示的图片
+const currentImage = computed(() => {
+  return props.isSelected ? props.module.selectedImage : props.module.normalImage
+})
+</script>
+
+<style scoped>
+.module-btn {
+  position: absolute;
+  transition:
+    transform 0.2s ease,
+    z-index 0.2s ease;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.btn-mask {
+  position: absolute;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.module-btn:hover {
+  z-index: 10;
+}
+
+.module-btn:active {
+  /* transform: scale(0.95); */
+}
+
+/* 确保选中的按钮在最上层 */
+.module-btn.selected {
+  z-index: 20;
+}
+</style>