feat: shape for cards

src/components/md-deck/hooks/shape-styles.ts

@@ -0,0 +1,56 @@
+import type { CardShape } from '../types';
+
+/**
+ * 获取 CSS clip-path 值用于形状裁剪
+ */
+export function getShapeClipPath(shape: CardShape): string {
+  switch (shape) {
+    case 'circle':
+      return 'circle(50% at 50% 50%)';
+    case 'triangle':
+      return 'polygon(50% 0%, 0% 100%, 100% 100%)';
+    case 'hexagon':
+      return 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)';
+    case 'rectangle':
+    default:
+      return 'none';
+  }
+}
+
+/**
+ * 获取 SVG clipPath 定义
+ * @param id clipPath 的唯一 ID
+ * @param width 卡片宽度
+ * @param height 卡片高度
+ * @param shape 卡片形状
+ */
+export function getShapeSvgClipPath(
+  id: string,
+  width: number,
+  height: number,
+  shape: CardShape
+): string {
+  const halfW = width / 2;
+  const halfH = height / 2;
+
+  switch (shape) {
+    case 'circle':
+      return `
+  <clipPath id="${id}">
+    <circle cx="${halfW}" cy="${halfH}" r="${halfW}" />
+  </clipPath>`;
+    case 'triangle':
+      return `
+  <clipPath id="${id}">
+    <polygon points="${halfW},0 0,${height} ${width},${height}" />
+  </clipPath>`;
+    case 'hexagon':
+      return `
+  <clipPath id="${id}">
+    <polygon points="${halfW},0 ${width},${height * 0.25} ${width},${height * 0.75} ${halfW},${height} 0,${height * 0.75} 0,${height * 0.25}" />
+  </clipPath>`;
+    case 'rectangle':
+    default:
+      return '';
+  }
+}