@robot-admin/naive-ui-components 0.3.0

package/dist/C_Icon2.js

@@ -0,0 +1,286 @@
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, readonly, ref, resolveDynamicComponent, unref, watch } from "vue";
+import { Icon } from "@iconify/vue";
+
+//#region src/hooks/useImage/index.ts
+/**
+* @description: 图片路径解析函数（组件库版本）
+* 在组件库中，图片路径由宿主应用管理。
+* 如果传入的是完整 URL（http/https/data:）则直接返回；
+* 否则可通过 imageResolver 配置自定义解析逻辑。
+* @param {string} imagePath 图片路径或完整 URL
+* @param {Function} resolver 可选的自定义解析器
+* @return {Promise<string>} 处理后图片路径
+*/
+const useImage = async (imagePath, resolver) => {
+	if (!imagePath) return "";
+	if (imagePath.startsWith("http://") || imagePath.startsWith("https://") || imagePath.startsWith("data:") || imagePath.startsWith("blob:") || imagePath.startsWith("/")) return imagePath;
+	if (resolver) try {
+		return await resolver(imagePath);
+	} catch (e) {
+		console.error(`[useImage] 自定义解析器处理失败: ${imagePath}`, e);
+		return "";
+	}
+	return imagePath;
+};
+
+//#endregion
+//#region src/components/C_Icon/index.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"title",
+	"aria-label",
+	"role",
+	"tabindex"
+];
+const _hoisted_2 = [
+	"width",
+	"height",
+	"viewBox",
+	"fill"
+];
+const _hoisted_3 = ["d", "fill"];
+const _hoisted_4 = [
+	"src",
+	"alt",
+	"width",
+	"height"
+];
+const _hoisted_5 = ["title"];
+var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "index",
+	props: {
+		name: { default: void 0 },
+		type: { default: "iconify" },
+		color: { default: "currentColor" },
+		size: { default: 18 },
+		svgPath: { default: "" },
+		viewBox: { default: "0 0 24 24" },
+		alt: { default: "" },
+		clickable: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		fallbackIcon: { default: "" },
+		title: { default: "" },
+		ariaLabel: { default: "" },
+		customClass: { default: "" },
+		rotate: { default: 0 },
+		flip: { default: void 0 },
+		componentProps: { default: () => ({}) }
+	},
+	emits: [
+		"click",
+		"error",
+		"load"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const iconRef = ref();
+		const hasError = ref(false);
+		const errorMessage = ref("");
+		const imageSrc = ref("");
+		const imageLoading = ref(false);
+		const rootStyle = computed(() => ({
+			fontSize: typeof props.size === "number" ? `${props.size}px` : props.size,
+			color: props.color,
+			cursor: props.clickable ? "pointer" : "default"
+		}));
+		const iconStyle = computed(() => {
+			const style = {
+				display: "inline-flex",
+				justifyContent: "center",
+				alignItems: "center",
+				width: typeof props.size === "number" ? `${props.size}px` : props.size,
+				height: typeof props.size === "number" ? `${props.size}px` : props.size
+			};
+			if (props.rotate) style.transform = `rotate(${props.rotate}deg)`;
+			if (props.flip) {
+				const scaleX = props.flip === "horizontal" || props.flip === "both" ? -1 : 1;
+				const scaleY = props.flip === "vertical" || props.flip === "both" ? -1 : 1;
+				style.transform = `${style.transform || ""} scaleX(${scaleX}) scaleY(${scaleY})`.trim();
+			}
+			return style;
+		});
+		const iconDisplayName = computed(() => {
+			if (typeof props.name === "string") return props.name;
+			if (props.name && props.name.__name) return props.name.__name;
+			if (props.name && props.name.name) return props.name.name;
+			return "Component Icon";
+		});
+		const iconClasses = computed(() => [props.customClass, {
+			"c-icon__rotatable": props.rotate !== 0,
+			"c-icon__flippable": !!props.flip
+		}]);
+		const resolvedComponent = computed(() => {
+			if (props.type !== "component" || !props.name) return null;
+			return props.name;
+		});
+		const handleError = (type, message, originalError) => {
+			console.warn(`[C_Icon] ${message}:`, iconDisplayName.value, originalError);
+			hasError.value = true;
+			errorMessage.value = message;
+			imageLoading.value = false;
+			emit("error", type, originalError);
+			if (props.fallbackIcon && !hasError.value) {}
+		};
+		const handleClick = (event) => {
+			if (!props.clickable || props.loading) return;
+			emit("click", event);
+		};
+		const handleKeydown = (event) => {
+			if (!props.clickable || props.loading) return;
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				emit("click", event);
+			}
+		};
+		const handleImageLoad = () => {
+			imageLoading.value = false;
+			emit("load");
+		};
+		const loadImageSrc = async () => {
+			if (props.type !== "image" || typeof props.name !== "string") {
+				imageSrc.value = "";
+				return;
+			}
+			if (props.name.startsWith("http://") || props.name.startsWith("https://") || props.name.startsWith("//") || props.name.startsWith("/")) {
+				imageSrc.value = props.name;
+				return;
+			}
+			try {
+				imageLoading.value = true;
+				const imageUrl = await useImage(props.name);
+				if (imageUrl) imageSrc.value = imageUrl;
+				else handleError("image", "图片路径解析失败");
+			} catch (error) {
+				handleError("image", "图片加载失败", error);
+			} finally {
+				imageLoading.value = false;
+			}
+		};
+		const validationRules = {
+			iconify: () => {
+				if (!props.name.includes(":")) console.warn("[C_Icon] Iconify图标名称格式应为 \"prefix:name\"，如 \"mdi:home\"");
+				return null;
+			},
+			unocss: () => {
+				if (typeof props.name !== "string" || !props.name.startsWith("i-")) console.warn("[C_Icon] UnoCSS图标名称应以 \"i-\" 开头");
+				return null;
+			},
+			component: () => !resolvedComponent.value ? "无法解析组件" : null,
+			svg: () => !props.svgPath ? "SVG路径不能为空" : null,
+			image: () => {
+				return null;
+			}
+		};
+		const validateProps = () => {
+			hasError.value = false;
+			errorMessage.value = "";
+			if (!props.name) return handleError("validation", "图标名称不能为空");
+			const validator = validationRules[props.type];
+			if (!validator) return handleError("type", "不支持的图标类型");
+			const errorMsg = validator();
+			if (errorMsg) handleError(props.type, errorMsg);
+			if (props.type === "image") loadImageSrc();
+		};
+		watch(() => [
+			props.name,
+			props.type,
+			props.svgPath
+		], () => {
+			nextTick(validateProps);
+		}, { immediate: true });
+		onMounted(() => {
+			validateProps();
+			if (!hasError.value && props.type !== "image") emit("load");
+		});
+		__expose({
+			validate: validateProps,
+			hasError: readonly(hasError),
+			errorMessage: readonly(errorMessage),
+			el: iconRef
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "iconRef",
+				ref: iconRef,
+				class: normalizeClass(["c-icon", [`c-icon--${_ctx.type}`, {
+					"c-icon--clickable": _ctx.clickable,
+					"c-icon--loading": _ctx.loading,
+					"c-icon--error": hasError.value
+				}]]),
+				style: normalizeStyle(rootStyle.value),
+				title: _ctx.title || iconDisplayName.value,
+				"aria-label": _ctx.ariaLabel || iconDisplayName.value,
+				role: _ctx.clickable ? "button" : "img",
+				tabindex: _ctx.clickable ? 0 : -1,
+				onClick: handleClick,
+				onKeydown: handleKeydown
+			}, [
+				createCommentVNode(" 方式1：Iconify图标（默认方式） "),
+				(_ctx.type === "iconify" || !_ctx.type) && !hasError.value && typeof _ctx.name === "string" ? (openBlock(), createBlock(unref(Icon), {
+					key: 0,
+					icon: _ctx.name,
+					width: _ctx.size,
+					height: _ctx.size,
+					color: _ctx.color,
+					style: normalizeStyle(iconStyle.value),
+					onError: _cache[0] || (_cache[0] = () => handleError("iconify", "Iconify图标加载失败"))
+				}, null, 8, [
+					"icon",
+					"width",
+					"height",
+					"color",
+					"style"
+				])) : _ctx.type === "unocss" && !hasError.value && typeof _ctx.name === "string" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" 方式2：UnoCSS图标 "), createElementVNode("div", {
+					class: normalizeClass([_ctx.name, iconClasses.value]),
+					style: normalizeStyle(iconStyle.value),
+					onError: _cache[1] || (_cache[1] = () => handleError("unocss", "UnoCSS图标渲染失败"))
+				}, null, 38)], 2112)) : _ctx.type === "component" && resolvedComponent.value && !hasError.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createCommentVNode(" 方式3：组件挂载方式 "), (openBlock(), createBlock(resolveDynamicComponent(resolvedComponent.value), mergeProps({ style: iconStyle.value }, _ctx.componentProps, { onError: _cache[2] || (_cache[2] = () => handleError("component", "组件图标渲染失败")) }), null, 16, ["style"]))], 2112)) : _ctx.type === "svg" && _ctx.svgPath && !hasError.value ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [createCommentVNode(" 方式4：SVG路径方式 "), (openBlock(), createElementBlock("svg", {
+					width: _ctx.size,
+					height: _ctx.size,
+					viewBox: _ctx.viewBox,
+					style: normalizeStyle(iconStyle.value),
+					fill: _ctx.color,
+					onError: _cache[3] || (_cache[3] = () => handleError("svg", "SVG图标渲染失败"))
+				}, [createElementVNode("path", {
+					d: _ctx.svgPath,
+					fill: _ctx.color
+				}, null, 8, _hoisted_3)], 44, _hoisted_2))], 2112)) : _ctx.type === "image" && imageSrc.value && !hasError.value && !imageLoading.value ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [createCommentVNode(" 方式5：图片方式 - 修复异步加载 "), createElementVNode("img", {
+					src: imageSrc.value,
+					alt: _ctx.alt || iconDisplayName.value,
+					width: _ctx.size,
+					height: _ctx.size,
+					style: {
+						"display": "inline-block",
+						"vertical-align": "middle"
+					},
+					onError: _cache[4] || (_cache[4] = () => handleError("image", "图片图标加载失败")),
+					onLoad: handleImageLoad
+				}, null, 40, _hoisted_4)], 2112)) : createCommentVNode("v-if", true),
+				createCommentVNode(" 图片加载状态 "),
+				(_ctx.loading || imageLoading.value) && !hasError.value ? (openBlock(), createElementBlock("div", {
+					key: 5,
+					class: "c-icon__loading",
+					style: normalizeStyle(iconStyle.value)
+				}, _cache[5] || (_cache[5] = [createElementVNode("div", { class: "c-icon__spinner" }, null, -1)]), 4)) : hasError.value ? (openBlock(), createElementBlock(Fragment, { key: 6 }, [createCommentVNode(" 统一错误状态显示 "), createElementVNode("div", {
+					class: "c-icon__error",
+					style: normalizeStyle(iconStyle.value),
+					title: `图标解析失败: ${iconDisplayName.value} (${errorMessage.value})${_ctx.fallbackIcon ? ` (fallback: ${_ctx.fallbackIcon})` : ""}`
+				}, " ⚠️ ", 12, _hoisted_5)], 2112)) : createCommentVNode("v-if", true)
+			], 46, _hoisted_1);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/C_Icon/index.vue
+var C_Icon_default = index_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { C_Icon_default as t };
+//# sourceMappingURL=C_Icon2.js.map

package/dist/C_Icon2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_Icon2.js","names":["type","clickable","loading","title","ariaLabel","name","size","color","componentProps","svgPath","viewBox","alt","fallbackIcon"],"sources":["../src/hooks/useImage/index.ts","../src/components/C_Icon/index.vue","../src/components/C_Icon/index.vue","../src/components/C_Icon/index.vue"],"sourcesContent":["/**\r\n * @description: 图片路径解析函数（组件库版本）\r\n * 在组件库中，图片路径由宿主应用管理。\r\n * 如果传入的是完整 URL（http/https/data:）则直接返回；\r\n * 否则可通过 imageResolver 配置自定义解析逻辑。\r\n * @param {string} imagePath 图片路径或完整 URL\r\n * @param {Function} resolver 可选的自定义解析器\r\n * @return {Promise<string>} 处理后图片路径\r\n */\r\nexport const useImage = async (\r\n  imagePath: string,\r\n  resolver?: (path: string) => string | Promise<string>,\r\n): Promise<string> => {\r\n  if (!imagePath) return \"\";\r\n\r\n  // 完整 URL 直接返回\r\n  if (\r\n    imagePath.startsWith(\"http://\") ||\r\n    imagePath.startsWith(\"https://\") ||\r\n    imagePath.startsWith(\"data:\") ||\r\n    imagePath.startsWith(\"blob:\") ||\r\n    imagePath.startsWith(\"/\")\r\n  ) {\r\n    return imagePath;\r\n  }\r\n\r\n  // 如果提供了自定义解析器，使用自定义解析器\r\n  if (resolver) {\r\n    try {\r\n      return await resolver(imagePath);\r\n    } catch (e) {\r\n      console.error(`[useImage] 自定义解析器处理失败: ${imagePath}`, e);\r\n      return \"\";\r\n    }\r\n  }\r\n\r\n  // 默认：直接返回路径（宿主应用应保证路径可访问）\r\n  return imagePath;\r\n};\r\n\r\n/**\r\n * @description: 同步版本的图片路径处理函数\r\n * @param {string} imagePath 图片路径或完整 URL\r\n * @return {string} 图片URL\r\n */\r\nexport const useImageSync = (imagePath: string): string => {\r\n  if (!imagePath) return \"\";\r\n\r\n  // 完整 URL 直接返回\r\n  if (\r\n    imagePath.startsWith(\"http://\") ||\r\n    imagePath.startsWith(\"https://\") ||\r\n    imagePath.startsWith(\"data:\") ||\r\n    imagePath.startsWith(\"blob:\") ||\r\n    imagePath.startsWith(\"/\")\r\n  ) {\r\n    return imagePath;\r\n  }\r\n\r\n  return imagePath;\r\n};\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-14\r\n * @Description: 支持多种图标使用方式，默认使用Iconify图标，统一错误处理\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"iconRef\"\r\n    class=\"c-icon\"\r\n    :class=\"[\r\n      `c-icon--${type}`,\r\n      {\r\n        'c-icon--clickable': clickable,\r\n        'c-icon--loading': loading,\r\n        'c-icon--error': hasError,\r\n      },\r\n    ]\"\r\n    :style=\"rootStyle\"\r\n    :title=\"title || iconDisplayName\"\r\n    :aria-label=\"ariaLabel || iconDisplayName\"\r\n    :role=\"clickable ? 'button' : 'img'\"\r\n    :tabindex=\"clickable ? 0 : -1\"\r\n    @click=\"handleClick\"\r\n    @keydown=\"handleKeydown\"\r\n  >\r\n    <!-- 方式1：Iconify图标（默认方式） -->\r\n    <Icon\r\n      v-if=\"\r\n        (type === 'iconify' || !type) && !hasError && typeof name === 'string'\r\n      \"\r\n      :icon=\"name\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      :color=\"color\"\r\n      :style=\"iconStyle\"\r\n      @error=\"() => handleError('iconify', 'Iconify图标加载失败')\"\r\n    />\r\n\r\n    <!-- 方式2：UnoCSS图标 -->\r\n    <div\r\n      v-else-if=\"type === 'unocss' && !hasError && typeof name === 'string'\"\r\n      :class=\"[name, iconClasses]\"\r\n      :style=\"iconStyle\"\r\n      @error=\"() => handleError('unocss', 'UnoCSS图标渲染失败')\"\r\n    />\r\n\r\n    <!-- 方式3：组件挂载方式 -->\r\n    <component\r\n      v-else-if=\"type === 'component' && resolvedComponent && !hasError\"\r\n      :is=\"resolvedComponent\"\r\n      :style=\"iconStyle\"\r\n      v-bind=\"componentProps\"\r\n      @error=\"() => handleError('component', '组件图标渲染失败')\"\r\n    />\r\n\r\n    <!-- 方式4：SVG路径方式 -->\r\n    <svg\r\n      v-else-if=\"type === 'svg' && svgPath && !hasError\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      :viewBox=\"viewBox\"\r\n      :style=\"iconStyle\"\r\n      :fill=\"color\"\r\n      @error=\"() => handleError('svg', 'SVG图标渲染失败')\"\r\n    >\r\n      <path :d=\"svgPath\" :fill=\"color\" />\r\n    </svg>\r\n\r\n    <!-- 方式5：图片方式 - 修复异步加载 -->\r\n    <img\r\n      v-else-if=\"type === 'image' && imageSrc && !hasError && !imageLoading\"\r\n      :src=\"imageSrc\"\r\n      :alt=\"alt || iconDisplayName\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      style=\"display: inline-block; vertical-align: middle\"\r\n      @error=\"() => handleError('image', '图片图标加载失败')\"\r\n      @load=\"handleImageLoad\"\r\n    />\r\n\r\n    <!-- 图片加载状态 -->\r\n    <div\r\n      v-if=\"(loading || imageLoading) && !hasError\"\r\n      class=\"c-icon__loading\"\r\n      :style=\"iconStyle\"\r\n    >\r\n      <div class=\"c-icon__spinner\" />\r\n    </div>\r\n\r\n    <!-- 统一错误状态显示 -->\r\n    <div\r\n      v-else-if=\"hasError\"\r\n      class=\"c-icon__error\"\r\n      :style=\"iconStyle\"\r\n      :title=\"`图标解析失败: ${iconDisplayName} (${errorMessage})${\r\n        fallbackIcon ? ` (fallback: ${fallbackIcon})` : ''\r\n      }`\"\r\n    >\r\n      ⚠️\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { Icon } from \"@iconify/vue\";\r\nimport { useImage } from \"../../hooks/useImage\";\r\nimport { computed, nextTick, onMounted, readonly, ref, watch } from \"vue\";\r\n\r\nexport interface IconProps {\r\n  /** 图标名称/路径/组件实例 */\r\n  name: string | any;\r\n  /** 图标类型 */\r\n  type?: \"iconify\" | \"unocss\" | \"component\" | \"svg\" | \"image\";\r\n  /** 图标颜色 */\r\n  color?: string;\r\n  /** 图标大小(px) */\r\n  size?: number | string;\r\n  /** SVG路径数据(仅type=svg时使用) */\r\n  svgPath?: string;\r\n  /** SVG viewBox(仅type=svg时使用) */\r\n  viewBox?: string;\r\n  /** 图片alt属性(仅type=image时使用) */\r\n  alt?: string;\r\n  /** 是否可点击 */\r\n  clickable?: boolean;\r\n  /** 加载状态 */\r\n  loading?: boolean;\r\n  /** 错误时的回退图标 */\r\n  fallbackIcon?: string;\r\n  /** 工具提示 */\r\n  title?: string;\r\n  /** 无障碍标签 */\r\n  ariaLabel?: string;\r\n  /** 自定义样式类 */\r\n  customClass?: string;\r\n  /** 旋转角度 */\r\n  rotate?: number;\r\n  /** 是否翻转 */\r\n  flip?: \"horizontal\" | \"vertical\" | \"both\";\r\n  /** 传递给组件的额外属性(仅type=component时使用) */\r\n  componentProps?: Record<string, any>;\r\n}\r\n\r\nconst props = withDefaults(defineProps<IconProps>(), {\r\n  name: undefined,\r\n  type: \"iconify\",\r\n  color: \"currentColor\",\r\n  size: 18,\r\n  svgPath: \"\",\r\n  viewBox: \"0 0 24 24\",\r\n  alt: \"\",\r\n  clickable: false,\r\n  loading: false,\r\n  fallbackIcon: \"\",\r\n  title: \"\",\r\n  ariaLabel: \"\",\r\n  customClass: \"\",\r\n  rotate: 0,\r\n  flip: undefined,\r\n  componentProps: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  click: [event: MouseEvent];\r\n  error: [type: string, error?: any];\r\n  load: [];\r\n}>();\r\n\r\nconst iconRef = ref<HTMLElement>();\r\nconst hasError = ref(false);\r\nconst errorMessage = ref(\"\");\r\nconst imageSrc = ref<string>(\"\"); // 存储异步加载的图片URL\r\nconst imageLoading = ref(false); // 图片加载状态\r\n\r\n// 计算根元素样式\r\nconst rootStyle = computed(() => ({\r\n  fontSize: typeof props.size === \"number\" ? `${props.size}px` : props.size,\r\n  color: props.color,\r\n  cursor: props.clickable ? \"pointer\" : \"default\",\r\n}));\r\n\r\n// 计算图标样式\r\nconst iconStyle = computed(() => {\r\n  const style: Record<string, any> = {\r\n    display: \"inline-flex\",\r\n    justifyContent: \"center\",\r\n    alignItems: \"center\",\r\n    width: typeof props.size === \"number\" ? `${props.size}px` : props.size,\r\n    height: typeof props.size === \"number\" ? `${props.size}px` : props.size,\r\n  };\r\n\r\n  // 旋转\r\n  if (props.rotate) {\r\n    style.transform = `rotate(${props.rotate}deg)`;\r\n  }\r\n\r\n  // 翻转\r\n  if (props.flip) {\r\n    const scaleX =\r\n      props.flip === \"horizontal\" || props.flip === \"both\" ? -1 : 1;\r\n    const scaleY = props.flip === \"vertical\" || props.flip === \"both\" ? -1 : 1;\r\n    style.transform = `${\r\n      style.transform || \"\"\r\n    } scaleX(${scaleX}) scaleY(${scaleY})`.trim();\r\n  }\r\n\r\n  return style;\r\n});\r\n\r\n// 获取图标名称用于显示\r\nconst iconDisplayName = computed(() => {\r\n  if (typeof props.name === \"string\") {\r\n    return props.name;\r\n  }\r\n  if (props.name && props.name.__name) {\r\n    return props.name.__name;\r\n  }\r\n  if (props.name && props.name.name) {\r\n    return props.name.name;\r\n  }\r\n  return \"Component Icon\";\r\n});\r\n\r\n// 图标类名\r\nconst iconClasses = computed(() => [\r\n  props.customClass,\r\n  {\r\n    \"c-icon__rotatable\": props.rotate !== 0,\r\n    \"c-icon__flippable\": !!props.flip,\r\n  },\r\n]);\r\n\r\n// 解析组件名称（纯计算属性，无副作用）\r\nconst resolvedComponent = computed(() => {\r\n  if (props.type !== \"component\" || !props.name) return null;\r\n  return props.name;\r\n});\r\n\r\n// 统一错误处理函数\r\nconst handleError = (type: string, message: string, originalError?: any) => {\r\n  console.warn(`[C_Icon] ${message}:`, iconDisplayName.value, originalError);\r\n  hasError.value = true;\r\n  errorMessage.value = message;\r\n  imageLoading.value = false; // 错误时停止加载状态\r\n  emit(\"error\", type, originalError);\r\n\r\n  // 如果有回退图标，可以在这里尝试使用回退方案\r\n  if (props.fallbackIcon && !hasError.value) {\r\n    // 这里可以实现回退逻辑\r\n    // 比如尝试使用fallbackIcon作为iconify图标\r\n  }\r\n};\r\n\r\n// 处理点击事件\r\nconst handleClick = (event: MouseEvent) => {\r\n  if (!props.clickable || props.loading) return;\r\n  emit(\"click\", event);\r\n};\r\n\r\n// 处理键盘事件\r\nconst handleKeydown = (event: KeyboardEvent) => {\r\n  if (!props.clickable || props.loading) return;\r\n  if (event.key === \"Enter\" || event.key === \" \") {\r\n    event.preventDefault();\r\n    emit(\"click\", event as any);\r\n  }\r\n};\r\n\r\n// 处理图片加载成功\r\nconst handleImageLoad = () => {\r\n  imageLoading.value = false;\r\n  emit(\"load\");\r\n};\r\n\r\n// 异步加载图片 - 修复关键函数\r\nconst loadImageSrc = async () => {\r\n  if (props.type !== \"image\" || typeof props.name !== \"string\") {\r\n    imageSrc.value = \"\";\r\n    return;\r\n  }\r\n\r\n  // 如果是完整URL，直接设置\r\n  if (\r\n    props.name.startsWith(\"http://\") ||\r\n    props.name.startsWith(\"https://\") ||\r\n    props.name.startsWith(\"//\") ||\r\n    props.name.startsWith(\"/\")\r\n  ) {\r\n    imageSrc.value = props.name;\r\n    return;\r\n  }\r\n\r\n  // 其他情况都当作本地图片处理\r\n  try {\r\n    imageLoading.value = true;\r\n    const imageUrl = await useImage(props.name);\r\n    if (imageUrl) {\r\n      imageSrc.value = imageUrl;\r\n    } else {\r\n      handleError(\"image\", \"图片路径解析失败\");\r\n    }\r\n  } catch (error) {\r\n    handleError(\"image\", \"图片加载失败\", error);\r\n  } finally {\r\n    imageLoading.value = false;\r\n  }\r\n};\r\n\r\n// 验证规则映射\r\nconst validationRules = {\r\n  iconify: (): string | null => {\r\n    if (!props.name.includes(\":\")) {\r\n      console.warn(\r\n        '[C_Icon] Iconify图标名称格式应为 \"prefix:name\"，如 \"mdi:home\"',\r\n      );\r\n    }\r\n    return null;\r\n  },\r\n  unocss: (): string | null => {\r\n    if (typeof props.name !== \"string\" || !props.name.startsWith(\"i-\")) {\r\n      console.warn('[C_Icon] UnoCSS图标名称应以 \"i-\" 开头');\r\n    }\r\n    return null;\r\n  },\r\n  component: (): string | null =>\r\n    !resolvedComponent.value ? \"无法解析组件\" : null,\r\n  svg: (): string | null => (!props.svgPath ? \"SVG路径不能为空\" : null),\r\n  image: (): string | null => {\r\n    // 对于image类型，异步验证在loadImageSrc中处理\r\n    return null;\r\n  },\r\n};\r\n\r\n// 验证配置\r\nconst validateProps = () => {\r\n  hasError.value = false;\r\n  errorMessage.value = \"\";\r\n\r\n  // 基础验证\r\n  if (!props.name) {\r\n    return handleError(\"validation\", \"图标名称不能为空\");\r\n  }\r\n\r\n  // 类型验证\r\n  const validator = validationRules[props.type];\r\n  if (!validator) {\r\n    return handleError(\"type\", \"不支持的图标类型\");\r\n  }\r\n\r\n  const errorMsg = validator();\r\n  if (errorMsg) {\r\n    handleError(props.type, errorMsg);\r\n  }\r\n\r\n  // 如果是图片类型，异步加载图片\r\n  if (props.type === \"image\") {\r\n    loadImageSrc();\r\n  }\r\n};\r\n\r\n// 监听关键属性变化\r\nwatch(\r\n  () => [props.name, props.type, props.svgPath],\r\n  () => {\r\n    nextTick(validateProps);\r\n  },\r\n  { immediate: true },\r\n);\r\n\r\n// 组件挂载后验证\r\nonMounted(() => {\r\n  validateProps();\r\n  // 非image类型在这里触发load事件\r\n  if (!hasError.value && props.type !== \"image\") {\r\n    emit(\"load\");\r\n  }\r\n});\r\n\r\n// 暴露方法给父组件\r\ndefineExpose({\r\n  /** 重新验证配置 */\r\n  validate: validateProps,\r\n  /** 是否有错误 */\r\n  hasError: readonly(hasError),\r\n  /** 错误信息 */\r\n  errorMessage: readonly(errorMessage),\r\n  /** DOM引用 */\r\n  el: iconRef,\r\n});\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-14\r\n * @Description: 支持多种图标使用方式，默认使用Iconify图标，统一错误处理\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"iconRef\"\r\n    class=\"c-icon\"\r\n    :class=\"[\r\n      `c-icon--${type}`,\r\n      {\r\n        'c-icon--clickable': clickable,\r\n        'c-icon--loading': loading,\r\n        'c-icon--error': hasError,\r\n      },\r\n    ]\"\r\n    :style=\"rootStyle\"\r\n    :title=\"title || iconDisplayName\"\r\n    :aria-label=\"ariaLabel || iconDisplayName\"\r\n    :role=\"clickable ? 'button' : 'img'\"\r\n    :tabindex=\"clickable ? 0 : -1\"\r\n    @click=\"handleClick\"\r\n    @keydown=\"handleKeydown\"\r\n  >\r\n    <!-- 方式1：Iconify图标（默认方式） -->\r\n    <Icon\r\n      v-if=\"\r\n        (type === 'iconify' || !type) && !hasError && typeof name === 'string'\r\n      \"\r\n      :icon=\"name\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      :color=\"color\"\r\n      :style=\"iconStyle\"\r\n      @error=\"() => handleError('iconify', 'Iconify图标加载失败')\"\r\n    />\r\n\r\n    <!-- 方式2：UnoCSS图标 -->\r\n    <div\r\n      v-else-if=\"type === 'unocss' && !hasError && typeof name === 'string'\"\r\n      :class=\"[name, iconClasses]\"\r\n      :style=\"iconStyle\"\r\n      @error=\"() => handleError('unocss', 'UnoCSS图标渲染失败')\"\r\n    />\r\n\r\n    <!-- 方式3：组件挂载方式 -->\r\n    <component\r\n      v-else-if=\"type === 'component' && resolvedComponent && !hasError\"\r\n      :is=\"resolvedComponent\"\r\n      :style=\"iconStyle\"\r\n      v-bind=\"componentProps\"\r\n      @error=\"() => handleError('component', '组件图标渲染失败')\"\r\n    />\r\n\r\n    <!-- 方式4：SVG路径方式 -->\r\n    <svg\r\n      v-else-if=\"type === 'svg' && svgPath && !hasError\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      :viewBox=\"viewBox\"\r\n      :style=\"iconStyle\"\r\n      :fill=\"color\"\r\n      @error=\"() => handleError('svg', 'SVG图标渲染失败')\"\r\n    >\r\n      <path :d=\"svgPath\" :fill=\"color\" />\r\n    </svg>\r\n\r\n    <!-- 方式5：图片方式 - 修复异步加载 -->\r\n    <img\r\n      v-else-if=\"type === 'image' && imageSrc && !hasError && !imageLoading\"\r\n      :src=\"imageSrc\"\r\n      :alt=\"alt || iconDisplayName\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      style=\"display: inline-block; vertical-align: middle\"\r\n      @error=\"() => handleError('image', '图片图标加载失败')\"\r\n      @load=\"handleImageLoad\"\r\n    />\r\n\r\n    <!-- 图片加载状态 -->\r\n    <div\r\n      v-if=\"(loading || imageLoading) && !hasError\"\r\n      class=\"c-icon__loading\"\r\n      :style=\"iconStyle\"\r\n    >\r\n      <div class=\"c-icon__spinner\" />\r\n    </div>\r\n\r\n    <!-- 统一错误状态显示 -->\r\n    <div\r\n      v-else-if=\"hasError\"\r\n      class=\"c-icon__error\"\r\n      :style=\"iconStyle\"\r\n      :title=\"`图标解析失败: ${iconDisplayName} (${errorMessage})${\r\n        fallbackIcon ? ` (fallback: ${fallbackIcon})` : ''\r\n      }`\"\r\n    >\r\n      ⚠️\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { Icon } from \"@iconify/vue\";\r\nimport { useImage } from \"../../hooks/useImage\";\r\nimport { computed, nextTick, onMounted, readonly, ref, watch } from \"vue\";\r\n\r\nexport interface IconProps {\r\n  /** 图标名称/路径/组件实例 */\r\n  name: string | any;\r\n  /** 图标类型 */\r\n  type?: \"iconify\" | \"unocss\" | \"component\" | \"svg\" | \"image\";\r\n  /** 图标颜色 */\r\n  color?: string;\r\n  /** 图标大小(px) */\r\n  size?: number | string;\r\n  /** SVG路径数据(仅type=svg时使用) */\r\n  svgPath?: string;\r\n  /** SVG viewBox(仅type=svg时使用) */\r\n  viewBox?: string;\r\n  /** 图片alt属性(仅type=image时使用) */\r\n  alt?: string;\r\n  /** 是否可点击 */\r\n  clickable?: boolean;\r\n  /** 加载状态 */\r\n  loading?: boolean;\r\n  /** 错误时的回退图标 */\r\n  fallbackIcon?: string;\r\n  /** 工具提示 */\r\n  title?: string;\r\n  /** 无障碍标签 */\r\n  ariaLabel?: string;\r\n  /** 自定义样式类 */\r\n  customClass?: string;\r\n  /** 旋转角度 */\r\n  rotate?: number;\r\n  /** 是否翻转 */\r\n  flip?: \"horizontal\" | \"vertical\" | \"both\";\r\n  /** 传递给组件的额外属性(仅type=component时使用) */\r\n  componentProps?: Record<string, any>;\r\n}\r\n\r\nconst props = withDefaults(defineProps<IconProps>(), {\r\n  name: undefined,\r\n  type: \"iconify\",\r\n  color: \"currentColor\",\r\n  size: 18,\r\n  svgPath: \"\",\r\n  viewBox: \"0 0 24 24\",\r\n  alt: \"\",\r\n  clickable: false,\r\n  loading: false,\r\n  fallbackIcon: \"\",\r\n  title: \"\",\r\n  ariaLabel: \"\",\r\n  customClass: \"\",\r\n  rotate: 0,\r\n  flip: undefined,\r\n  componentProps: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  click: [event: MouseEvent];\r\n  error: [type: string, error?: any];\r\n  load: [];\r\n}>();\r\n\r\nconst iconRef = ref<HTMLElement>();\r\nconst hasError = ref(false);\r\nconst errorMessage = ref(\"\");\r\nconst imageSrc = ref<string>(\"\"); // 存储异步加载的图片URL\r\nconst imageLoading = ref(false); // 图片加载状态\r\n\r\n// 计算根元素样式\r\nconst rootStyle = computed(() => ({\r\n  fontSize: typeof props.size === \"number\" ? `${props.size}px` : props.size,\r\n  color: props.color,\r\n  cursor: props.clickable ? \"pointer\" : \"default\",\r\n}));\r\n\r\n// 计算图标样式\r\nconst iconStyle = computed(() => {\r\n  const style: Record<string, any> = {\r\n    display: \"inline-flex\",\r\n    justifyContent: \"center\",\r\n    alignItems: \"center\",\r\n    width: typeof props.size === \"number\" ? `${props.size}px` : props.size,\r\n    height: typeof props.size === \"number\" ? `${props.size}px` : props.size,\r\n  };\r\n\r\n  // 旋转\r\n  if (props.rotate) {\r\n    style.transform = `rotate(${props.rotate}deg)`;\r\n  }\r\n\r\n  // 翻转\r\n  if (props.flip) {\r\n    const scaleX =\r\n      props.flip === \"horizontal\" || props.flip === \"both\" ? -1 : 1;\r\n    const scaleY = props.flip === \"vertical\" || props.flip === \"both\" ? -1 : 1;\r\n    style.transform = `${\r\n      style.transform || \"\"\r\n    } scaleX(${scaleX}) scaleY(${scaleY})`.trim();\r\n  }\r\n\r\n  return style;\r\n});\r\n\r\n// 获取图标名称用于显示\r\nconst iconDisplayName = computed(() => {\r\n  if (typeof props.name === \"string\") {\r\n    return props.name;\r\n  }\r\n  if (props.name && props.name.__name) {\r\n    return props.name.__name;\r\n  }\r\n  if (props.name && props.name.name) {\r\n    return props.name.name;\r\n  }\r\n  return \"Component Icon\";\r\n});\r\n\r\n// 图标类名\r\nconst iconClasses = computed(() => [\r\n  props.customClass,\r\n  {\r\n    \"c-icon__rotatable\": props.rotate !== 0,\r\n    \"c-icon__flippable\": !!props.flip,\r\n  },\r\n]);\r\n\r\n// 解析组件名称（纯计算属性，无副作用）\r\nconst resolvedComponent = computed(() => {\r\n  if (props.type !== \"component\" || !props.name) return null;\r\n  return props.name;\r\n});\r\n\r\n// 统一错误处理函数\r\nconst handleError = (type: string, message: string, originalError?: any) => {\r\n  console.warn(`[C_Icon] ${message}:`, iconDisplayName.value, originalError);\r\n  hasError.value = true;\r\n  errorMessage.value = message;\r\n  imageLoading.value = false; // 错误时停止加载状态\r\n  emit(\"error\", type, originalError);\r\n\r\n  // 如果有回退图标，可以在这里尝试使用回退方案\r\n  if (props.fallbackIcon && !hasError.value) {\r\n    // 这里可以实现回退逻辑\r\n    // 比如尝试使用fallbackIcon作为iconify图标\r\n  }\r\n};\r\n\r\n// 处理点击事件\r\nconst handleClick = (event: MouseEvent) => {\r\n  if (!props.clickable || props.loading) return;\r\n  emit(\"click\", event);\r\n};\r\n\r\n// 处理键盘事件\r\nconst handleKeydown = (event: KeyboardEvent) => {\r\n  if (!props.clickable || props.loading) return;\r\n  if (event.key === \"Enter\" || event.key === \" \") {\r\n    event.preventDefault();\r\n    emit(\"click\", event as any);\r\n  }\r\n};\r\n\r\n// 处理图片加载成功\r\nconst handleImageLoad = () => {\r\n  imageLoading.value = false;\r\n  emit(\"load\");\r\n};\r\n\r\n// 异步加载图片 - 修复关键函数\r\nconst loadImageSrc = async () => {\r\n  if (props.type !== \"image\" || typeof props.name !== \"string\") {\r\n    imageSrc.value = \"\";\r\n    return;\r\n  }\r\n\r\n  // 如果是完整URL，直接设置\r\n  if (\r\n    props.name.startsWith(\"http://\") ||\r\n    props.name.startsWith(\"https://\") ||\r\n    props.name.startsWith(\"//\") ||\r\n    props.name.startsWith(\"/\")\r\n  ) {\r\n    imageSrc.value = props.name;\r\n    return;\r\n  }\r\n\r\n  // 其他情况都当作本地图片处理\r\n  try {\r\n    imageLoading.value = true;\r\n    const imageUrl = await useImage(props.name);\r\n    if (imageUrl) {\r\n      imageSrc.value = imageUrl;\r\n    } else {\r\n      handleError(\"image\", \"图片路径解析失败\");\r\n    }\r\n  } catch (error) {\r\n    handleError(\"image\", \"图片加载失败\", error);\r\n  } finally {\r\n    imageLoading.value = false;\r\n  }\r\n};\r\n\r\n// 验证规则映射\r\nconst validationRules = {\r\n  iconify: (): string | null => {\r\n    if (!props.name.includes(\":\")) {\r\n      console.warn(\r\n        '[C_Icon] Iconify图标名称格式应为 \"prefix:name\"，如 \"mdi:home\"',\r\n      );\r\n    }\r\n    return null;\r\n  },\r\n  unocss: (): string | null => {\r\n    if (typeof props.name !== \"string\" || !props.name.startsWith(\"i-\")) {\r\n      console.warn('[C_Icon] UnoCSS图标名称应以 \"i-\" 开头');\r\n    }\r\n    return null;\r\n  },\r\n  component: (): string | null =>\r\n    !resolvedComponent.value ? \"无法解析组件\" : null,\r\n  svg: (): string | null => (!props.svgPath ? \"SVG路径不能为空\" : null),\r\n  image: (): string | null => {\r\n    // 对于image类型，异步验证在loadImageSrc中处理\r\n    return null;\r\n  },\r\n};\r\n\r\n// 验证配置\r\nconst validateProps = () => {\r\n  hasError.value = false;\r\n  errorMessage.value = \"\";\r\n\r\n  // 基础验证\r\n  if (!props.name) {\r\n    return handleError(\"validation\", \"图标名称不能为空\");\r\n  }\r\n\r\n  // 类型验证\r\n  const validator = validationRules[props.type];\r\n  if (!validator) {\r\n    return handleError(\"type\", \"不支持的图标类型\");\r\n  }\r\n\r\n  const errorMsg = validator();\r\n  if (errorMsg) {\r\n    handleError(props.type, errorMsg);\r\n  }\r\n\r\n  // 如果是图片类型，异步加载图片\r\n  if (props.type === \"image\") {\r\n    loadImageSrc();\r\n  }\r\n};\r\n\r\n// 监听关键属性变化\r\nwatch(\r\n  () => [props.name, props.type, props.svgPath],\r\n  () => {\r\n    nextTick(validateProps);\r\n  },\r\n  { immediate: true },\r\n);\r\n\r\n// 组件挂载后验证\r\nonMounted(() => {\r\n  validateProps();\r\n  // 非image类型在这里触发load事件\r\n  if (!hasError.value && props.type !== \"image\") {\r\n    emit(\"load\");\r\n  }\r\n});\r\n\r\n// 暴露方法给父组件\r\ndefineExpose({\r\n  /** 重新验证配置 */\r\n  validate: validateProps,\r\n  /** 是否有错误 */\r\n  hasError: readonly(hasError),\r\n  /** 错误信息 */\r\n  errorMessage: readonly(errorMessage),\r\n  /** DOM引用 */\r\n  el: iconRef,\r\n});\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-14\r\n * @Description: 支持多种图标使用方式，默认使用Iconify图标，统一错误处理\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"iconRef\"\r\n    class=\"c-icon\"\r\n    :class=\"[\r\n      `c-icon--${type}`,\r\n      {\r\n        'c-icon--clickable': clickable,\r\n        'c-icon--loading': loading,\r\n        'c-icon--error': hasError,\r\n      },\r\n    ]\"\r\n    :style=\"rootStyle\"\r\n    :title=\"title || iconDisplayName\"\r\n    :aria-label=\"ariaLabel || iconDisplayName\"\r\n    :role=\"clickable ? 'button' : 'img'\"\r\n    :tabindex=\"clickable ? 0 : -1\"\r\n    @click=\"handleClick\"\r\n    @keydown=\"handleKeydown\"\r\n  >\r\n    <!-- 方式1：Iconify图标（默认方式） -->\r\n    <Icon\r\n      v-if=\"\r\n        (type === 'iconify' || !type) && !hasError && typeof name === 'string'\r\n      \"\r\n      :icon=\"name\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      :color=\"color\"\r\n      :style=\"iconStyle\"\r\n      @error=\"() => handleError('iconify', 'Iconify图标加载失败')\"\r\n    />\r\n\r\n    <!-- 方式2：UnoCSS图标 -->\r\n    <div\r\n      v-else-if=\"type === 'unocss' && !hasError && typeof name === 'string'\"\r\n      :class=\"[name, iconClasses]\"\r\n      :style=\"iconStyle\"\r\n      @error=\"() => handleError('unocss', 'UnoCSS图标渲染失败')\"\r\n    />\r\n\r\n    <!-- 方式3：组件挂载方式 -->\r\n    <component\r\n      v-else-if=\"type === 'component' && resolvedComponent && !hasError\"\r\n      :is=\"resolvedComponent\"\r\n      :style=\"iconStyle\"\r\n      v-bind=\"componentProps\"\r\n      @error=\"() => handleError('component', '组件图标渲染失败')\"\r\n    />\r\n\r\n    <!-- 方式4：SVG路径方式 -->\r\n    <svg\r\n      v-else-if=\"type === 'svg' && svgPath && !hasError\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      :viewBox=\"viewBox\"\r\n      :style=\"iconStyle\"\r\n      :fill=\"color\"\r\n      @error=\"() => handleError('svg', 'SVG图标渲染失败')\"\r\n    >\r\n      <path :d=\"svgPath\" :fill=\"color\" />\r\n    </svg>\r\n\r\n    <!-- 方式5：图片方式 - 修复异步加载 -->\r\n    <img\r\n      v-else-if=\"type === 'image' && imageSrc && !hasError && !imageLoading\"\r\n      :src=\"imageSrc\"\r\n      :alt=\"alt || iconDisplayName\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      style=\"display: inline-block; vertical-align: middle\"\r\n      @error=\"() => handleError('image', '图片图标加载失败')\"\r\n      @load=\"handleImageLoad\"\r\n    />\r\n\r\n    <!-- 图片加载状态 -->\r\n    <div\r\n      v-if=\"(loading || imageLoading) && !hasError\"\r\n      class=\"c-icon__loading\"\r\n      :style=\"iconStyle\"\r\n    >\r\n      <div class=\"c-icon__spinner\" />\r\n    </div>\r\n\r\n    <!-- 统一错误状态显示 -->\r\n    <div\r\n      v-else-if=\"hasError\"\r\n      class=\"c-icon__error\"\r\n      :style=\"iconStyle\"\r\n      :title=\"`图标解析失败: ${iconDisplayName} (${errorMessage})${\r\n        fallbackIcon ? ` (fallback: ${fallbackIcon})` : ''\r\n      }`\"\r\n    >\r\n      ⚠️\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { Icon } from \"@iconify/vue\";\r\nimport { useImage } from \"../../hooks/useImage\";\r\nimport { computed, nextTick, onMounted, readonly, ref, watch } from \"vue\";\r\n\r\nexport interface IconProps {\r\n  /** 图标名称/路径/组件实例 */\r\n  name: string | any;\r\n  /** 图标类型 */\r\n  type?: \"iconify\" | \"unocss\" | \"component\" | \"svg\" | \"image\";\r\n  /** 图标颜色 */\r\n  color?: string;\r\n  /** 图标大小(px) */\r\n  size?: number | string;\r\n  /** SVG路径数据(仅type=svg时使用) */\r\n  svgPath?: string;\r\n  /** SVG viewBox(仅type=svg时使用) */\r\n  viewBox?: string;\r\n  /** 图片alt属性(仅type=image时使用) */\r\n  alt?: string;\r\n  /** 是否可点击 */\r\n  clickable?: boolean;\r\n  /** 加载状态 */\r\n  loading?: boolean;\r\n  /** 错误时的回退图标 */\r\n  fallbackIcon?: string;\r\n  /** 工具提示 */\r\n  title?: string;\r\n  /** 无障碍标签 */\r\n  ariaLabel?: string;\r\n  /** 自定义样式类 */\r\n  customClass?: string;\r\n  /** 旋转角度 */\r\n  rotate?: number;\r\n  /** 是否翻转 */\r\n  flip?: \"horizontal\" | \"vertical\" | \"both\";\r\n  /** 传递给组件的额外属性(仅type=component时使用) */\r\n  componentProps?: Record<string, any>;\r\n}\r\n\r\nconst props = withDefaults(defineProps<IconProps>(), {\r\n  name: undefined,\r\n  type: \"iconify\",\r\n  color: \"currentColor\",\r\n  size: 18,\r\n  svgPath: \"\",\r\n  viewBox: \"0 0 24 24\",\r\n  alt: \"\",\r\n  clickable: false,\r\n  loading: false,\r\n  fallbackIcon: \"\",\r\n  title: \"\",\r\n  ariaLabel: \"\",\r\n  customClass: \"\",\r\n  rotate: 0,\r\n  flip: undefined,\r\n  componentProps: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  click: [event: MouseEvent];\r\n  error: [type: string, error?: any];\r\n  load: [];\r\n}>();\r\n\r\nconst iconRef = ref<HTMLElement>();\r\nconst hasError = ref(false);\r\nconst errorMessage = ref(\"\");\r\nconst imageSrc = ref<string>(\"\"); // 存储异步加载的图片URL\r\nconst imageLoading = ref(false); // 图片加载状态\r\n\r\n// 计算根元素样式\r\nconst rootStyle = computed(() => ({\r\n  fontSize: typeof props.size === \"number\" ? `${props.size}px` : props.size,\r\n  color: props.color,\r\n  cursor: props.clickable ? \"pointer\" : \"default\",\r\n}));\r\n\r\n// 计算图标样式\r\nconst iconStyle = computed(() => {\r\n  const style: Record<string, any> = {\r\n    display: \"inline-flex\",\r\n    justifyContent: \"center\",\r\n    alignItems: \"center\",\r\n    width: typeof props.size === \"number\" ? `${props.size}px` : props.size,\r\n    height: typeof props.size === \"number\" ? `${props.size}px` : props.size,\r\n  };\r\n\r\n  // 旋转\r\n  if (props.rotate) {\r\n    style.transform = `rotate(${props.rotate}deg)`;\r\n  }\r\n\r\n  // 翻转\r\n  if (props.flip) {\r\n    const scaleX =\r\n      props.flip === \"horizontal\" || props.flip === \"both\" ? -1 : 1;\r\n    const scaleY = props.flip === \"vertical\" || props.flip === \"both\" ? -1 : 1;\r\n    style.transform = `${\r\n      style.transform || \"\"\r\n    } scaleX(${scaleX}) scaleY(${scaleY})`.trim();\r\n  }\r\n\r\n  return style;\r\n});\r\n\r\n// 获取图标名称用于显示\r\nconst iconDisplayName = computed(() => {\r\n  if (typeof props.name === \"string\") {\r\n    return props.name;\r\n  }\r\n  if (props.name && props.name.__name) {\r\n    return props.name.__name;\r\n  }\r\n  if (props.name && props.name.name) {\r\n    return props.name.name;\r\n  }\r\n  return \"Component Icon\";\r\n});\r\n\r\n// 图标类名\r\nconst iconClasses = computed(() => [\r\n  props.customClass,\r\n  {\r\n    \"c-icon__rotatable\": props.rotate !== 0,\r\n    \"c-icon__flippable\": !!props.flip,\r\n  },\r\n]);\r\n\r\n// 解析组件名称（纯计算属性，无副作用）\r\nconst resolvedComponent = computed(() => {\r\n  if (props.type !== \"component\" || !props.name) return null;\r\n  return props.name;\r\n});\r\n\r\n// 统一错误处理函数\r\nconst handleError = (type: string, message: string, originalError?: any) => {\r\n  console.warn(`[C_Icon] ${message}:`, iconDisplayName.value, originalError);\r\n  hasError.value = true;\r\n  errorMessage.value = message;\r\n  imageLoading.value = false; // 错误时停止加载状态\r\n  emit(\"error\", type, originalError);\r\n\r\n  // 如果有回退图标，可以在这里尝试使用回退方案\r\n  if (props.fallbackIcon && !hasError.value) {\r\n    // 这里可以实现回退逻辑\r\n    // 比如尝试使用fallbackIcon作为iconify图标\r\n  }\r\n};\r\n\r\n// 处理点击事件\r\nconst handleClick = (event: MouseEvent) => {\r\n  if (!props.clickable || props.loading) return;\r\n  emit(\"click\", event);\r\n};\r\n\r\n// 处理键盘事件\r\nconst handleKeydown = (event: KeyboardEvent) => {\r\n  if (!props.clickable || props.loading) return;\r\n  if (event.key === \"Enter\" || event.key === \" \") {\r\n    event.preventDefault();\r\n    emit(\"click\", event as any);\r\n  }\r\n};\r\n\r\n// 处理图片加载成功\r\nconst handleImageLoad = () => {\r\n  imageLoading.value = false;\r\n  emit(\"load\");\r\n};\r\n\r\n// 异步加载图片 - 修复关键函数\r\nconst loadImageSrc = async () => {\r\n  if (props.type !== \"image\" || typeof props.name !== \"string\") {\r\n    imageSrc.value = \"\";\r\n    return;\r\n  }\r\n\r\n  // 如果是完整URL，直接设置\r\n  if (\r\n    props.name.startsWith(\"http://\") ||\r\n    props.name.startsWith(\"https://\") ||\r\n    props.name.startsWith(\"//\") ||\r\n    props.name.startsWith(\"/\")\r\n  ) {\r\n    imageSrc.value = props.name;\r\n    return;\r\n  }\r\n\r\n  // 其他情况都当作本地图片处理\r\n  try {\r\n    imageLoading.value = true;\r\n    const imageUrl = await useImage(props.name);\r\n    if (imageUrl) {\r\n      imageSrc.value = imageUrl;\r\n    } else {\r\n      handleError(\"image\", \"图片路径解析失败\");\r\n    }\r\n  } catch (error) {\r\n    handleError(\"image\", \"图片加载失败\", error);\r\n  } finally {\r\n    imageLoading.value = false;\r\n  }\r\n};\r\n\r\n// 验证规则映射\r\nconst validationRules = {\r\n  iconify: (): string | null => {\r\n    if (!props.name.includes(\":\")) {\r\n      console.warn(\r\n        '[C_Icon] Iconify图标名称格式应为 \"prefix:name\"，如 \"mdi:home\"',\r\n      );\r\n    }\r\n    return null;\r\n  },\r\n  unocss: (): string | null => {\r\n    if (typeof props.name !== \"string\" || !props.name.startsWith(\"i-\")) {\r\n      console.warn('[C_Icon] UnoCSS图标名称应以 \"i-\" 开头');\r\n    }\r\n    return null;\r\n  },\r\n  component: (): string | null =>\r\n    !resolvedComponent.value ? \"无法解析组件\" : null,\r\n  svg: (): string | null => (!props.svgPath ? \"SVG路径不能为空\" : null),\r\n  image: (): string | null => {\r\n    // 对于image类型，异步验证在loadImageSrc中处理\r\n    return null;\r\n  },\r\n};\r\n\r\n// 验证配置\r\nconst validateProps = () => {\r\n  hasError.value = false;\r\n  errorMessage.value = \"\";\r\n\r\n  // 基础验证\r\n  if (!props.name) {\r\n    return handleError(\"validation\", \"图标名称不能为空\");\r\n  }\r\n\r\n  // 类型验证\r\n  const validator = validationRules[props.type];\r\n  if (!validator) {\r\n    return handleError(\"type\", \"不支持的图标类型\");\r\n  }\r\n\r\n  const errorMsg = validator();\r\n  if (errorMsg) {\r\n    handleError(props.type, errorMsg);\r\n  }\r\n\r\n  // 如果是图片类型，异步加载图片\r\n  if (props.type === \"image\") {\r\n    loadImageSrc();\r\n  }\r\n};\r\n\r\n// 监听关键属性变化\r\nwatch(\r\n  () => [props.name, props.type, props.svgPath],\r\n  () => {\r\n    nextTick(validateProps);\r\n  },\r\n  { immediate: true },\r\n);\r\n\r\n// 组件挂载后验证\r\nonMounted(() => {\r\n  validateProps();\r\n  // 非image类型在这里触发load事件\r\n  if (!hasError.value && props.type !== \"image\") {\r\n    emit(\"load\");\r\n  }\r\n});\r\n\r\n// 暴露方法给父组件\r\ndefineExpose({\r\n  /** 重新验证配置 */\r\n  validate: validateProps,\r\n  /** 是否有错误 */\r\n  hasError: readonly(hasError),\r\n  /** 错误信息 */\r\n  errorMessage: readonly(errorMessage),\r\n  /** DOM引用 */\r\n  el: iconRef,\r\n});\r\n</script>\r\n"],"mappings":"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"}

package/dist/C_ImageCropper-BVJfUufl.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_ImageCropper-BVJfUufl.css","names":[],"sources":["../src/components/C_ImageCropper/components/CropperToolbar.vue?vue&type=style&index=0&scoped=499ffd01&lang.scss","../src/components/C_ImageCropper/components/CropperPreview.vue?vue&type=style&index=0&scoped=cefefdc0&lang.scss","../src/components/C_ImageCropper/index.vue?vue&type=style&index=0&scoped=692ad231&lang.scss"],"sourcesContent":[".cropper-toolbar[data-v-499ffd01] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  align-items: center;\n  padding: 8px 0;\n}",".cropper-preview[data-v-cefefdc0] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.cropper-preview .preview-label[data-v-cefefdc0] {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--text-color-2);\n}\n.cropper-preview .preview-main[data-v-cefefdc0] {\n  width: 100%;\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);\n  background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  background-size: 16px 16px;\n}\n.cropper-preview .preview-main--circular[data-v-cefefdc0] {\n  border-radius: 50%;\n}\n.cropper-preview .preview-main__viewport img[data-v-cefefdc0] {\n  display: block;\n  max-width: none !important;\n}\n.cropper-preview .preview-empty[data-v-cefefdc0] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n}\n.cropper-preview .preview-thumbs[data-v-cefefdc0] {\n  display: flex;\n  gap: 12px;\n  align-items: flex-end;\n  justify-content: center;\n}\n.cropper-preview .preview-thumb[data-v-cefefdc0] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  align-items: center;\n}\n.cropper-preview .preview-thumb__box[data-v-cefefdc0] {\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  background: var(--body-color);\n}\n.cropper-preview .preview-thumb__box--circular[data-v-cefefdc0] {\n  border-radius: 50%;\n}\n.cropper-preview .preview-thumb__viewport img[data-v-cefefdc0] {\n  display: block;\n  max-width: none !important;\n}\n.cropper-preview .preview-thumb__label[data-v-cefefdc0] {\n  font-size: 11px;\n  color: var(--text-color-3);\n}","/* C_ImageCropper styles */\n.c-image-cropper[data-v-692ad231] {\n  width: 100%;\n}\n.c-image-cropper__body[data-v-692ad231] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.c-image-cropper__workspace[data-v-692ad231] {\n  display: flex;\n  gap: 16px;\n  align-items: stretch;\n}\n.c-image-cropper__canvas[data-v-692ad231] {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: var(--body-color);\n}\n.c-image-cropper__canvas[data-v-692ad231] .vue-cropper {\n  width: 100% !important;\n  height: 100% !important;\n}\n.c-image-cropper__preview-panel[data-v-692ad231] {\n  flex: 0 1 280px;\n  min-width: 200px;\n  padding: 16px;\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: var(--card-color);\n}\n.c-image-cropper__placeholder[data-v-692ad231] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--text-color-3);\n  font-size: 14px;\n}\n@media (width <= 768px) {\n.c-image-cropper__workspace[data-v-692ad231] {\n    flex-direction: column;\n}\n.c-image-cropper__preview-panel[data-v-692ad231] {\n    max-width: none;\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;ACNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACjEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/C_ImageCropper.cjs

@@ -0,0 +1,6 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+require('./C_Icon.js');
+const require_C_ImageCropper = require('./C_ImageCropper.js');
+
+exports.C_ImageCropper = require_C_ImageCropper.C_ImageCropper_default;
+exports.useCropperCore = require_C_ImageCropper.useCropperCore;

package/dist/C_ImageCropper.d.cts

@@ -0,0 +1,2 @@
+import { a as CropResult, c as ImageCropperProps, i as CropOutputFormat, n as _default, o as ImageCropperEmits, r as AspectRatioPreset, s as ImageCropperExpose, t as useCropperCore } from "./useCropperCore.js";
+export { type AspectRatioPreset, _default as C_ImageCropper, type CropOutputFormat, type CropResult, type ImageCropperEmits, type ImageCropperExpose, type ImageCropperProps, useCropperCore };

package/dist/C_ImageCropper.d.ts

@@ -0,0 +1,2 @@
+import { a as CropResult, c as ImageCropperProps, i as CropOutputFormat, n as _default, o as ImageCropperEmits, r as AspectRatioPreset, s as ImageCropperExpose, t as useCropperCore } from "./useCropperCore.js";
+export { type AspectRatioPreset, _default as C_ImageCropper, type CropOutputFormat, type CropResult, type ImageCropperEmits, type ImageCropperExpose, type ImageCropperProps, useCropperCore };

package/dist/C_ImageCropper.js

@@ -0,0 +1,4 @@
+import "./C_Icon2.js";
+import { n as useCropperCore, t as C_ImageCropper_default } from "./C_ImageCropper2.js";
+
+export { C_ImageCropper_default as C_ImageCropper, useCropperCore };