@kine-design/core 0.0.1-beta.12 → 0.0.1-beta.13

package/components/base/image/__tests__/useImage.test.ts

@@ -173,4 +173,65 @@ describe('useImage', () => {
     expect(previewScale.value).toBe(1);
     expect(previewRotate.value).toBe(0);
   });
+
+  // ── 混合媒体预览 ──
+
+  it('纯字符串列表 currentPreviewItem.type 为 image', () => {
+    const emit = createEmit();
+    const props = { ...defaultProps, src: 'a.png', previewSrcList: ['a.png', 'b.png'] };
+    const { currentPreviewItem, openPreview } = useImage(props, emit);
+
+    openPreview();
+    expect(currentPreviewItem.value).toEqual({ src: 'a.png', type: 'image' });
+  });
+
+  it('混合列表定位到 PreviewItem 对象', () => {
+    const emit = createEmit();
+    const props = {
+      ...defaultProps,
+      src: 'video.mp4',
+      previewSrcList: [
+        'a.png',
+        { src: 'video.mp4', type: 'video' as const },
+        'c.png',
+      ],
+    };
+    const { currentPreviewItem, currentPreviewIsVideo, previewIndex, openPreview } = useImage(props, emit);
+
+    openPreview();
+    expect(previewIndex.value).toBe(1);
+    expect(currentPreviewItem.value).toEqual({ src: 'video.mp4', type: 'video' });
+    expect(currentPreviewIsVideo.value).toBe(true);
+  });
+
+  it('切换时 currentPreviewIsVideo 跟随变化', () => {
+    const emit = createEmit();
+    const props = {
+      ...defaultProps,
+      src: 'a.png',
+      previewSrcList: [
+        'a.png',
+        { src: 'video.mp4', type: 'video' as const },
+      ],
+    };
+    const { currentPreviewIsVideo, openPreview, previewNext } = useImage(props, emit);
+
+    openPreview();
+    expect(currentPreviewIsVideo.value).toBe(false);
+
+    previewNext();
+    expect(currentPreviewIsVideo.value).toBe(true);
+  });
+
+  it('PreviewItem 不指定 type 时默认为 image', () => {
+    const emit = createEmit();
+    const props = {
+      ...defaultProps,
+      previewSrcList: [{ src: 'photo.jpg' }],
+    };
+    const { currentPreviewItem, openPreview } = useImage(props, emit);
+
+    openPreview();
+    expect(currentPreviewItem.value.type).toBe('image');
+  });
 });

package/components/base/image/api.ts

@@ -7,7 +7,7 @@
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 import { MCOPO, MPropType } from '../../types/props';
-import { ImageProps } from './props';
+import { ImageProps, PreviewSrcListItem } from './props';
 
 export const props: MCOPO<ImageProps> = {
   src: { type: String, required: true },
@@ -20,6 +20,6 @@ export const props: MCOPO<ImageProps> = {
   width: { type: [String, Number], default: undefined },
   height: { type: [String, Number], default: undefined },
   lazy: { type: Boolean, default: false },
-  previewSrcList: { type: Array as MPropType<string[]>, default: () => [] },
+  previewSrcList: { type: Array as MPropType<PreviewSrcListItem[]>, default: () => [] },
   zIndex: { type: Number, default: 2000 },
 };

package/components/base/image/index.ts

@@ -14,5 +14,5 @@ export const ImageCore = {
   useImage,
 };
 
-export type { ImageProps, ImageEvents } from './props';
-export type { ImageLoadStatus } from './useImage';
+export type { ImageProps, ImageEvents, PreviewItem, PreviewSrcListItem } from './props';
+export type { ImageLoadStatus, NormalizedPreviewItem } from './useImage';

package/components/base/image/props.d.ts

@@ -6,11 +6,21 @@
  *
  * @name m-image
  * @docDescription Image component with lazy loading and preview support.
- *                 图片组件，支持懒加载和全屏预览。
+ *                 图片组件，支持懒加载和全屏预览。支持图片与视频混合预览。
  *
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 
+/**
+ * @description 预览列表项，支持纯字符串（向后兼容，视为图片）或结构化对象
+ */
+export declare type PreviewItem = {
+  src: string,
+  type?: 'image' | 'video',
+};
+
+export declare type PreviewSrcListItem = string | PreviewItem;
+
 export declare type ImageProps = {
   /**
    * @description 图片地址
@@ -37,11 +47,12 @@ export declare type ImageProps = {
    */
   lazy?: boolean,
   /**
-   * @description 开启预览的图片列表，传入后点击可全屏预览
-   * @type string[]
+   * @description 开启预览的媒体列表，传入后点击可全屏预览。
+   *              支持纯字符串（向后兼容，视为图片）或 { src, type } 对象。
+   * @type (string | PreviewItem)[]
    * @default []
    */
-  previewSrcList?: string[],
+  previewSrcList?: PreviewSrcListItem[],
   /**
    * @description 图片宽度
    * @type string | number

package/components/base/image/useImage.ts

@@ -6,27 +6,44 @@
  *
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
-import { ref, watch, onMounted } from 'vue';
-import { ImageProps } from './props';
+import { ref, computed, watch, onMounted } from 'vue';
+import { ImageProps, PreviewSrcListItem } from './props';
 
 /** 图片加载状态 */
 export type ImageLoadStatus = 'loading' | 'loaded' | 'error';
 
+/** 正规化后的预览项 */
+export type NormalizedPreviewItem = { src: string; type: 'image' | 'video' };
+
+function normalizeItem(item: PreviewSrcListItem): NormalizedPreviewItem {
+  if (typeof item === 'string') {
+    return { src: item, type: 'image' };
+  }
+  return { src: item.src, type: item.type ?? 'image' };
+}
+
+function getSrc(item: PreviewSrcListItem): string {
+  return typeof item === 'string' ? item : item.src;
+}
+
 export function useImage(
   props: Required<ImageProps>,
   emit: (event: 'load' | 'error' | 'switch', payload: Event | number) => void,
 ) {
   const status = ref<ImageLoadStatus>('loading');
-  // 预览弹层是否可见
   const previewVisible = ref(false);
-  // 预览当前索引（在 previewSrcList 中的位置）
   const previewIndex = ref(0);
-  // 预览缩放比例
   const previewScale = ref(1);
-  // 预览旋转角度
   const previewRotate = ref(0);
 
-  /** 重置加载状态（src 变化时调用） */
+  const currentPreviewItem = computed<NormalizedPreviewItem>(() => {
+    const list = props.previewSrcList;
+    if (!list || list.length === 0) { return { src: '', type: 'image' }; }
+    return normalizeItem(list[previewIndex.value] ?? list[0]);
+  });
+
+  const currentPreviewIsVideo = computed(() => currentPreviewItem.value.type === 'video');
+
   const reset = () => {
     status.value = 'loading';
   };
@@ -41,10 +58,9 @@ export function useImage(
     emit('error', e);
   };
 
-  /** 打开全屏预览，定位到 src 在 previewSrcList 中的位置 */
   const openPreview = () => {
     if (!props.previewSrcList || props.previewSrcList.length === 0) { return; }
-    const idx = props.previewSrcList.indexOf(props.src);
+    const idx = props.previewSrcList.findIndex(item => getSrc(item) === props.src);
     previewIndex.value = idx >= 0 ? idx : 0;
     previewScale.value = 1;
     previewRotate.value = 0;
@@ -55,7 +71,6 @@ export function useImage(
     previewVisible.value = false;
   };
 
-  /** 预览切换到上一张 */
   const previewPrev = () => {
     const total = props.previewSrcList.length;
     if (total === 0) { return; }
@@ -65,7 +80,6 @@ export function useImage(
     emit('switch', previewIndex.value);
   };
 
-  /** 预览切换到下一张 */
   const previewNext = () => {
     const total = props.previewSrcList.length;
     if (total === 0) { return; }
@@ -75,27 +89,22 @@ export function useImage(
     emit('switch', previewIndex.value);
   };
 
-  /** 预览放大 */
   const zoomIn = () => {
     previewScale.value = Math.min(previewScale.value + 0.25, 5);
   };
 
-  /** 预览缩小 */
   const zoomOut = () => {
     previewScale.value = Math.max(previewScale.value - 0.25, 0.25);
   };
 
-  /** 顺时针旋转 90° */
   const rotate = () => {
     previewRotate.value = (previewRotate.value + 90) % 360;
   };
 
-  // src 变化时重置加载状态
   watch(() => props.src, reset);
 
   onMounted(() => {
     if (props.lazy) {
-      // 懒加载：交由 img 标签的 loading="lazy" 处理
       status.value = 'loading';
     }
   });
@@ -106,6 +115,8 @@ export function useImage(
     previewIndex,
     previewScale,
     previewRotate,
+    currentPreviewItem,
+    currentPreviewIsVideo,
     handleLoad,
     handleError,
     openPreview,

package/dist/components/base/image/index.d.ts

@@ -3,5 +3,5 @@ export declare const ImageCore: {
     props: import('../../types/props').MCOPO<import('./props').ImageProps>;
     useImage: typeof useImage;
 };
-export type { ImageProps, ImageEvents } from './props';
-export type { ImageLoadStatus } from './useImage';
+export type { ImageProps, ImageEvents, PreviewItem, PreviewSrcListItem } from './props';
+export type { ImageLoadStatus, NormalizedPreviewItem } from './useImage';

package/dist/components/base/image/useImage.d.ts

@@ -1,12 +1,19 @@
 import { ImageProps } from './props';
 /** 图片加载状态 */
 export type ImageLoadStatus = 'loading' | 'loaded' | 'error';
+/** 正规化后的预览项 */
+export type NormalizedPreviewItem = {
+    src: string;
+    type: 'image' | 'video';
+};
 export declare function useImage(props: Required<ImageProps>, emit: (event: 'load' | 'error' | 'switch', payload: Event | number) => void): {
     status: import('vue').Ref<ImageLoadStatus, ImageLoadStatus>;
     previewVisible: import('vue').Ref<boolean, boolean>;
     previewIndex: import('vue').Ref<number, number>;
     previewScale: import('vue').Ref<number, number>;
     previewRotate: import('vue').Ref<number, number>;
+    currentPreviewItem: import('vue').ComputedRef<NormalizedPreviewItem>;
+    currentPreviewIsVideo: import('vue').ComputedRef<boolean>;
     handleLoad: (e: Event) => void;
     handleError: (e: Event) => void;
     openPreview: () => void;

package/dist/core.js

@@ -5389,13 +5389,34 @@ var props$8 = {
 *
 * 江湖的业务千篇一律，复杂的代码好几百行。
 */
+function normalizeItem(item) {
+	if (typeof item === "string") return {
+		src: item,
+		type: "image"
+	};
+	return {
+		src: item.src,
+		type: item.type ?? "image"
+	};
+}
+function getSrc(item) {
+	return typeof item === "string" ? item : item.src;
+}
 function useImage(props, emit) {
 	const status = ref("loading");
 	const previewVisible = ref(false);
 	const previewIndex = ref(0);
 	const previewScale = ref(1);
 	const previewRotate = ref(0);
-	/** 重置加载状态（src 变化时调用） */
+	const currentPreviewItem = computed(() => {
+		const list = props.previewSrcList;
+		if (!list || list.length === 0) return {
+			src: "",
+			type: "image"
+		};
+		return normalizeItem(list[previewIndex.value] ?? list[0]);
+	});
+	const currentPreviewIsVideo = computed(() => currentPreviewItem.value.type === "video");
 	const reset = () => {
 		status.value = "loading";
 	};
@@ -5407,10 +5428,9 @@ function useImage(props, emit) {
 		status.value = "error";
 		emit("error", e);
 	};
-	/** 打开全屏预览，定位到 src 在 previewSrcList 中的位置 */
 	const openPreview = () => {
 		if (!props.previewSrcList || props.previewSrcList.length === 0) return;
-		const idx = props.previewSrcList.indexOf(props.src);
+		const idx = props.previewSrcList.findIndex((item) => getSrc(item) === props.src);
 		previewIndex.value = idx >= 0 ? idx : 0;
 		previewScale.value = 1;
 		previewRotate.value = 0;
@@ -5419,7 +5439,6 @@ function useImage(props, emit) {
 	const closePreview = () => {
 		previewVisible.value = false;
 	};
-	/** 预览切换到上一张 */
 	const previewPrev = () => {
 		const total = props.previewSrcList.length;
 		if (total === 0) return;
@@ -5428,7 +5447,6 @@ function useImage(props, emit) {
 		previewRotate.value = 0;
 		emit("switch", previewIndex.value);
 	};
-	/** 预览切换到下一张 */
 	const previewNext = () => {
 		const total = props.previewSrcList.length;
 		if (total === 0) return;
@@ -5437,15 +5455,12 @@ function useImage(props, emit) {
 		previewRotate.value = 0;
 		emit("switch", previewIndex.value);
 	};
-	/** 预览放大 */
 	const zoomIn = () => {
 		previewScale.value = Math.min(previewScale.value + .25, 5);
 	};
-	/** 预览缩小 */
 	const zoomOut = () => {
 		previewScale.value = Math.max(previewScale.value - .25, .25);
 	};
-	/** 顺时针旋转 90° */
 	const rotate = () => {
 		previewRotate.value = (previewRotate.value + 90) % 360;
 	};
@@ -5459,6 +5474,8 @@ function useImage(props, emit) {
 		previewIndex,
 		previewScale,
 		previewRotate,
+		currentPreviewItem,
+		currentPreviewIsVideo,
 		handleLoad,
 		handleError,
 		openPreview,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kine-design/core",
-  "version": "0.0.1-beta.12",
+  "version": "0.0.1-beta.13",
   "description": "",
   "type": "module",
   "main": "./dist/core.js",