rrj-astra-ui 1.0.4 → 1.0.6

package/components/AuiIcon.vue

@@ -5,16 +5,42 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { camelize } from '@vue/shared';
 import * as svgFiles from '../icons/index.js';
-import { DOMParser, XMLSerializer } from '@xmldom/xmldom';
 
-const __name = 'AuiIcon';
+// 核心修复：兼容 xmldom 所有版本的导入逻辑
+let DOMParser, XMLSerializer;
+try {
+  // 动态导入避免编译时导出报错，兼容 v0.x（命名导出）和 v1+/v2+（默认导出）
+  import('@xmldom/xmldom').then(module => {
+    if (module.DOMParser) {
+      // v0.x 命名导出
+      DOMParser = module.DOMParser;
+      XMLSerializer = module.XMLSerializer;
+    } else if (module.default) {
+      // v1+/v2+ 默认导出
+      DOMParser = module.default.DOMParser;
+      XMLSerializer = module.default.XMLSerializer;
+    }
+    // 导入完成后重新加载 SVG
+    loadSvg();
+  });
+} catch (e) {
+  console.error('xmldom 导入失败:', e);
+  // 兜底：避免组件崩溃
+  DOMParser = function() {
+    this.parseFromString = () => ({
+      getElementsByTagName: () => [{}]
+    });
+  };
+  XMLSerializer = function() {
+    this.serializeToString = () => '';
+  };
+}
 
-defineOptions({
-    name: __name
-})
+const __name = 'AuiIcon';
+defineOptions({ name: __name });
 
 const props = defineProps({
   name: {
@@ -41,7 +67,6 @@ const props = defineProps({
     type: [String, Number],
     default: 0,
     validator: (value) => {
-      // 允许数值角度或预设值
       return !isNaN(Number(value)) || ['90', '180', '270', 'clockwise', 'counter-clockwise'].includes(value);
     }
   }
@@ -49,97 +74,117 @@ const props = defineProps({
 
 const svgContent = ref('');
 
+// 优化：封装 SVG 加载逻辑，支持 props 变化时重新加载
 const loadSvg = () => {
+  // 未加载完 xmldom 时跳过
+  if (!DOMParser || !XMLSerializer) return;
+  
   const svg = svgFiles[props.name];
-  if (svg) {
-    let parser = new DOMParser();
-    let doc = parser.parseFromString(svg, 'image/svg+xml');
-    let svgElement = doc.getElementsByTagName('svg')[0];
+  if (!svg) {
+    console.error(`Icon "${props.name}" 不存在，请检查 icons/index.js 导出`);
+    svgContent.value = '';
+    return;
+  }
+
+  try {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svg, 'image/svg+xml');
+    const svgElement = doc.getElementsByTagName('svg')[0];
+    
     if (svgElement) {
-      // 移除 SVG 根元素的 width、height、fill 和 stroke 属性
+      // 清除默认尺寸和颜色，统一由 props 控制
       svgElement.removeAttribute('width');
       svgElement.removeAttribute('height');
+      svgElement.removeAttribute('fill'); // 补充移除 fill，避免覆盖 color
       svgElement.removeAttribute('stroke');
       svgElement.setAttribute('stroke', props.color);
-
-      // 递归设置所有子元素的 stroke 属性
-      function setStrokeAttributes(element) {
+      svgElement.setAttribute('fill', 'currentColor'); // 统一填充色为继承
+    
+      // 递归设置子元素 stroke
+      const setStrokeAttributes = (element) => {
+        if (!element || !element.hasAttribute) return;
         if (element.hasAttribute('stroke')) {
           element.removeAttribute('stroke');
           element.setAttribute('stroke', props.color);
         } else {
           element.setAttribute('stroke', 'none');
         }
-        const children = element.childNodes;
+        const children = element.childNodes || [];
         for (let i = 0; i < children.length; i++) {
           if (children[i].nodeType === 1) {
             setStrokeAttributes(children[i]);
           }
         }
-      }
+      };
       setStrokeAttributes(svgElement);
     }
-    let serializer = new XMLSerializer();
-    let processedSvg = serializer.serializeToString(doc);
-    svgContent.value = processedSvg;
-  } else {
-    console.error(`Icon not found: ${props.name}`);
+
+    const serializer = new XMLSerializer();
+    svgContent.value = serializer.serializeToString(doc);
+  } catch (e) {
+    console.error(`处理 Icon "${props.name}" 失败:`, e);
+    svgContent.value = '';
   }
 };
 
-loadSvg();
+// 监听 props 变化，重新加载 SVG（比如动态改 name/color/rotate）
+watch([() => props.name, () => props.color, () => props.rotate], () => {
+  loadSvg();
+}, { immediate: true });
 
+// 样式计算（保持原有逻辑，优化可读性）
 const style = computed(() => {
-  const width = typeof props.size === 'number' ? `${props.size}px` : props.size;
-  const height = typeof props.size === 'number' ? `${props.size}px` : props.size;
-  
-  // 处理旋转逻辑
+  const sizeVal = typeof props.size === 'number' ? `${props.size}px` : props.size;
   let rotation = '0deg';
-  
+
   if (!isNaN(Number(props.rotate))) {
-    // 直接使用数值角度
     rotation = `${Number(props.rotate)}deg`;
   } else {
-    // 处理预设值
-    switch (props.rotate) {
-      case '90':
-      case 'clockwise':
-        rotation = '90deg';
-        break;
-      case '180':
-        rotation = '180deg';
-        break;
-      case '270':
-      case 'counter-clockwise':
-        rotation = '270deg';
-        break;
-    }
+    const rotateMap = {
+      '90': '90deg',
+      '180': '180deg',
+      '270': '270deg',
+      'clockwise': '90deg',
+      'counter-clockwise': '270deg'
+    };
+    rotation = rotateMap[props.rotate] || '0deg';
   }
-  
+
   return {
-    width,
-    height,
+    width: sizeVal,
+    height: sizeVal,
     display: 'inline-block',
     verticalAlign: 'middle',
     transform: `rotate(${rotation})`,
-    transition: 'transform 0.3s ease'
+    transition: 'transform 0.3s ease',
+    color: props.color // 确保 color 生效
   };
 });
 
+// 类名计算（优化逻辑，兼容更多 class 类型）
 const classes = computed(() => {
   const baseClass = `icon-${camelize(props.name)}`;
-  if (typeof props.class === 'string') {
-    return [baseClass, props.class];
-  }
-  if (Array.isArray(props.class)) {
-    return [baseClass, ...props.class];
-  }
-  if (typeof props.class === 'object') {
-    return [baseClass, ...Object.keys(props.class).filter((key) => props.class[key])];
+  const classList = [baseClass];
+
+  if (typeof props.class === 'string' && props.class) {
+    classList.push(...props.class.split(' ').filter(Boolean));
+  } else if (Array.isArray(props.class)) {
+    classList.push(...props.class.filter(Boolean));
+  } else if (typeof props.class === 'object' && props.class !== null) {
+    Object.entries(props.class).forEach(([key, value]) => {
+      if (value) classList.push(key);
+    });
   }
-  return [baseClass];
+
+  return classList;
 });
 </script>
 
 <style scoped>
+/* 补充基础样式，避免 SVG 溢出 */
+:deep(svg) {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rrj-astra-ui",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "RRJ - AstraUI - A powerful UI framework for UniApp with global SCSS color variables",
   "main": "index.js",
   "keywords": [