feat: 添加 Husky 和 commit 限制配置

src/composables/README.md

@@ -0,0 +1,52 @@
+# Composables 使用说明
+
+## useScale Hook
+
+### 功能描述
+
+基于1920\*1080设计稿进行等比例缩放的响应式hook，确保应用在不同屏幕尺寸下保持设计比例。
+
+### 使用方法
+
+```vue
+<template>
+  <div class="my-component">
+    <h1>当前缩放比例: {{ scale }}</h1>
+    <p>窗口尺寸: {{ windowWidth }} x {{ windowHeight }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useScale } from '@/composables/useScale'
+
+const { scale, windowWidth, windowHeight, scaleStyle, DESIGN_WIDTH, DESIGN_HEIGHT } = useScale()
+</script>
+```
+
+### 返回值说明
+
+- `windowWidth`: 当前窗口宽度
+- `windowHeight`: 当前窗口高度
+- `scale`: 当前缩放比例
+- `scaledWidth`: 缩放后的实际宽度
+- `scaledHeight`: 缩放后的实际高度
+- `offsetX`: 水平居中偏移量
+- `offsetY`: 垂直居中偏移量
+- `scaleStyle`: 完整的缩放样式对象
+- `DESIGN_WIDTH`: 设计稿宽度 (1920)
+- `DESIGN_HEIGHT`: 设计稿高度 (1080)
+
+### 特性
+
+1. **等比例缩放**: 保持设计稿的宽高比不变
+2. **居中显示**: 内容在视窗中居中显示
+3. **响应式**: 自动监听窗口大小变化
+4. **性能优化**: 使用computed缓存计算结果
+5. **TypeScript支持**: 完整的类型定义
+
+### 注意事项
+
+- 设计稿尺寸固定为1920\*1080
+- 缩放比例取宽高比的最小值，确保内容完全显示
+- 超出设计稿尺寸的内容会被裁剪
+- 建议在根组件App.vue中使用，确保全局生效

src/composables/useScale.ts

@@ -0,0 +1,77 @@
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+
+/**
+ * 等比例缩放Hook
+ * 基于1920*1080设计稿进行等比例缩放
+ */
+export function useScale() {
+  // 设计稿尺寸
+  const DESIGN_WIDTH = 1920
+  const DESIGN_HEIGHT = 1080
+
+  // 当前窗口尺寸
+  const windowWidth = ref(window.innerWidth)
+  const windowHeight = ref(window.innerHeight)
+
+  // 缩放比例
+  const scale = computed(() => {
+    const scaleX = windowWidth.value / DESIGN_WIDTH
+    const scaleY = windowHeight.value / DESIGN_HEIGHT
+
+    // 取较小的缩放比例，确保内容完全显示在视窗内
+    return Math.min(scaleX, scaleY)
+  })
+
+  // 缩放后的实际尺寸
+  const scaledWidth = computed(() => DESIGN_WIDTH * scale.value)
+  const scaledHeight = computed(() => DESIGN_HEIGHT * scale.value)
+
+  // 居中偏移量
+  const offsetX = computed(() => (windowWidth.value - scaledWidth.value) / 2)
+  const offsetY = computed(() => (windowHeight.value - scaledHeight.value) / 2)
+
+  // 缩放样式对象
+  const scaleStyle = computed(() => ({
+    transform: `scale(${scale.value})`,
+    transformOrigin: 'top left',
+    width: `${DESIGN_WIDTH}px`,
+    height: `${DESIGN_HEIGHT}px`,
+    position: 'absolute' as const,
+    left: `${offsetX.value}px`,
+    top: `${offsetY.value}px`
+  }))
+
+  // 更新窗口尺寸
+  const updateWindowSize = () => {
+    windowWidth.value = window.innerWidth
+    windowHeight.value = window.innerHeight
+  }
+
+  // 监听窗口大小变化
+  onMounted(() => {
+    window.addEventListener('resize', updateWindowSize)
+    updateWindowSize()
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateWindowSize)
+  })
+
+  return {
+    // 响应式数据
+    windowWidth,
+    windowHeight,
+    scale,
+    scaledWidth,
+    scaledHeight,
+    offsetX,
+    offsetY,
+
+    // 样式对象
+    scaleStyle,
+
+    // 常量
+    DESIGN_WIDTH,
+    DESIGN_HEIGHT
+  }
+}