v3-comf-dm 1.0.0

package/packages/components/ImageCropper/types.ts

@@ -0,0 +1,47 @@
+export type CropMode = 'free' | 'fixed' | 'ratio'
+
+export interface ImageCropperProps {
+  // 图片源（URL 或 base64）
+  imageSrc?: string
+  // 裁剪模式：'free' 自由裁剪 | 'fixed' 固定尺寸 | 'ratio' 固定比例
+  cropMode?: CropMode
+  // 固定宽度（cropMode 为 'fixed' 时使用）
+  fixedWidth?: number
+  // 固定高度（cropMode 为 'fixed' 时使用）
+  fixedHeight?: number
+  // 固定宽高比（cropMode 为 'ratio' 时使用，如 16/9）
+  aspectRatio?: number
+  // 最小裁剪宽度
+  minWidth?: number
+  // 最小裁剪高度
+  minHeight?: number
+  // 最大裁剪宽度
+  maxWidth?: number
+  // 最大裁剪高度
+  maxHeight?: number
+  // 是否显示网格线
+  showGrid?: boolean
+  // 是否可旋转
+  rotatable?: boolean
+  // 是否可缩放
+  zoomable?: boolean
+  // 初始缩放比例
+  initialZoom?: number
+  // 容器宽度
+  containerWidth?: number | string
+  // 容器高度
+  containerHeight?: number | string
+}
+
+export interface CropArea {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export interface ImageCropperEmits {
+  (e: 'crop', data: { blob: Blob; dataUrl: string; cropArea: CropArea }): void
+  (e: 'cancel'): void
+  (e: 'ready'): void
+}

package/packages/components/ScaleContainer/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <div ref="scaleContainer" class="vc-scale-container" :style="containerStyle">
+    <div class="vc-scale-wrapper" :style="wrapperStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import type { ScaleContainerProps } from './types'
+
+const props = withDefaults(defineProps<ScaleContainerProps>(), {
+  designWidth: 1920,
+  designHeight: 1080,
+  keepAspectRatio: true,
+  scaleMode: 'fit',
+  detectBrowserZoom: true,
+})
+
+const scaleContainer = ref<HTMLElement | null>(null)
+const scale = ref(1)
+const scaleX = ref(1)
+const scaleY = ref(1)
+const containerWidth = ref(1920)
+const containerHeight = ref(1080)
+
+// 容器样式
+const containerStyle = computed(() => ({
+  width: `${containerWidth.value}px`,
+  height: `${containerHeight.value}px`,
+  position: 'relative' as const,
+  overflow: 'hidden' as const,
+}))
+
+// 包装器样式
+const wrapperStyle = computed(() => {
+  const commonStyle = {
+    width: `${props.designWidth}px`,
+    height: `${props.designHeight}px`,
+    transformOrigin: 'top left' as const,
+  }
+
+  if (props.keepAspectRatio && (props.scaleMode === 'fit' || props.scaleMode === 'fill')) {
+    const sw = props.designWidth * scale.value
+    const sh = props.designHeight * scale.value
+    return {
+      ...commonStyle,
+      transform: `scale(${scale.value})`,
+      position: 'absolute' as const,
+      top: '50%',
+      left: '50%',
+      marginTop: `-${sh / 2}px`,
+      marginLeft: `-${sw / 2}px`,
+    }
+  }
+
+  return {
+    ...commonStyle,
+    transform: `scale(${scaleX.value}, ${scaleY.value})`,
+  }
+})
+
+const updateScale = () => {
+  const el = scaleContainer.value
+  if (!el || !el.parentElement) return
+
+  const parent = el.parentElement
+  let pw = parent.clientWidth || window.innerWidth
+  let ph = parent.clientHeight || window.innerHeight
+
+  if (pw === 0) pw = window.innerWidth
+  if (ph === 0) ph = window.innerHeight
+
+  containerWidth.value = pw
+  containerHeight.value = ph
+
+  const sx = pw / props.designWidth
+  const sy = ph / props.designHeight
+
+  if (props.scaleMode === 'stretch') {
+    scaleX.value = sx
+    scaleY.value = sy
+  } else if (props.keepAspectRatio) {
+    scale.value = props.scaleMode === 'fit' ? Math.min(sx, sy) : Math.max(sx, sy)
+  } else {
+    scaleX.value = sx
+    scaleY.value = sy
+  }
+}
+
+let resizeObserver: ResizeObserver | null = null
+const handleResize = () => updateScale()
+
+onMounted(() => {
+  nextTick(() => {
+    updateScale()
+    window.addEventListener('resize', handleResize)
+
+    if (window.ResizeObserver && scaleContainer.value?.parentElement) {
+      resizeObserver = new ResizeObserver(handleResize)
+      resizeObserver.observe(scaleContainer.value.parentElement)
+    }
+  })
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+  }
+})
+
+defineOptions({
+  name: 'VcScaleContainer'
+})
+</script>
+
+<style lang="scss" scoped>
+.vc-scale-container {
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+.vc-scale-wrapper {
+  box-sizing: border-box;
+  display: block;
+}
+</style>

package/packages/components/ScaleContainer/types.ts

@@ -0,0 +1,10 @@
+export type ScaleMode = 'fit' | 'fill' | 'stretch'
+
+export interface ScaleContainerProps {
+  designWidth?: number // 设计稿宽度，默认1920
+  designHeight?: number // 设计稿高度，默认1080
+  keepAspectRatio?: boolean // 是否保持宽高比，默认true
+  scaleMode?: ScaleMode // 缩放模式：'fit' 适应 | 'fill' 填充 | 'stretch' 拉伸
+  detectBrowserZoom?: boolean // 是否检测浏览器缩放，默认true
+}
+

package/packages/components/index.ts

@@ -0,0 +1,9 @@
+// 导出所有组件
+export { default as ScaleContainer } from './ScaleContainer/index.vue'
+export { default as ImageCropper } from './ImageCropper/index.vue'
+// 导出更多组件...
+
+// 导出组件类型
+export type { ScaleContainerProps, ScaleMode } from './ScaleContainer/types'
+export type { ImageCropperProps, CropMode, CropArea, ImageCropperEmits } from './ImageCropper/types'
+

package/packages/index.ts

@@ -0,0 +1,26 @@
+// 主入口文件
+import type { App } from 'vue'
+import { install as installComponents } from './install'
+
+// 导出所有组件
+export * from './components'
+
+// 导出类型
+export * from './types'
+
+// 导出工具函数
+export * from './utils'
+
+// 安装函数（用于 Vue.use()）
+export const install = (app: App) => {
+  installComponents(app)
+}
+
+// 默认导出
+export default {
+  install
+}
+
+// 版本号
+export const version = '1.0.0'
+

package/packages/install.ts

@@ -0,0 +1,21 @@
+import type { App, Component } from 'vue'
+import ScaleContainer from './components/ScaleContainer/index.vue'
+import ImageCropper from './components/ImageCropper/index.vue'
+
+const components: Component[] = [
+  ScaleContainer,
+  ImageCropper
+]
+
+export const install = (app: App) => {
+  components.forEach(component => {
+    const name = (component as any).name || (component as any).__name
+    if (name) {
+      app.component(name, component)
+    }
+  })
+}
+
+export default {
+  install
+}

package/packages/styles/index.scss

@@ -0,0 +1,8 @@
+// 全局样式
+* {
+  box-sizing: border-box;
+}
+
+// 注意：组件样式已经在各自的 .vue 文件中（scoped）
+// 这里只放置全局样式
+

package/packages/types/index.ts

@@ -0,0 +1,3 @@
+// 全局类型定义
+export * from '../components/ScaleContainer/types'
+

package/packages/utils/index.ts

@@ -0,0 +1,56 @@
+// 工具函数
+export const isString = (val: unknown): val is string => typeof val === 'string'
+
+export const isNumber = (val: unknown): val is number => typeof val === 'number'
+
+export const isBoolean = (val: unknown): val is boolean => typeof val === 'boolean'
+
+export const isObject = (val: unknown): val is Record<string, any> =>
+  val !== null && typeof val === 'object'
+
+export const isArray = (val: unknown): val is Array<any> => Array.isArray(val)
+
+export const isFunction = (val: unknown): val is Function => typeof val === 'function'
+
+// 防抖函数
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout> | null = null
+  return function (this: any, ...args: Parameters<T>) {
+    const context = this
+    if (timeout) clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      func.apply(context, args)
+    }, wait)
+  }
+}
+
+// 节流函数
+export function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout> | null = null
+  let previous = 0
+  return function (this: any, ...args: Parameters<T>) {
+    const now = Date.now()
+    const remaining = wait - (now - previous)
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout)
+        timeout = null
+      }
+      previous = now
+      func.apply(this, args)
+    } else if (!timeout) {
+      timeout = setTimeout(() => {
+        previous = Date.now()
+        timeout = null
+        func.apply(this, args)
+      }, remaining)
+    }
+  }
+}
+