feat: 1

src/components/icon/icon.vue

@@ -9,9 +9,11 @@
         fill: computedColor,
         display: 'inline-block',
         verticalAlign: 'middle',
+        strokeWidth: strokeWidth + 'px',
       }"
       :width="computedSize"
       :height="computedSize"
+      ref="svg"
     >
       <use :xlink:href="`#icon-${name}`" />
     </svg>
@@ -19,10 +21,36 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, ref, watch, watchEffect } from "vue";
 
-const props = defineProps<{ name: string; size?: string; color?: string }>();
+const props = defineProps<{
+  name: string;
+  percentage?: number;
+  size?: string;
+  color?: string;
+}>();
 // 计算属性：优先使用 props 传入的值，否则继承父级
 const computedSize = computed(() => props.size || "1em");
 const computedColor = computed(() => props.color || "currentColor");
+const svg = ref<SVGSVGElement | null>(null);
+const strokeWidth = ref<number>();
+const refreshStrokeWidth = () => {
+  if (!props.percentage) {
+    strokeWidth.value = undefined;
+    return;
+  }
+  if (!svg.value) return;
+  const symol = document.querySelector("#icon-" + props.name);
+  if (!symol) return;
+  const viewBox = symol.getAttribute("viewBox");
+  if (!viewBox) return;
+  const parts = viewBox.split(" ");
+  if (parts.length === 4) {
+    const size = Math.max(parseFloat(parts[2]), parseFloat(parts[3]));
+    strokeWidth.value = (props.percentage / 100) * size; // 设定为视图高度的 2%
+  }
+};
+watchEffect(refreshStrokeWidth);
+
+watch(props, () => setTimeout(refreshStrokeWidth), { deep: true, flush: "post" });
 </script>

src/components/icon/index.vue

@@ -12,6 +12,7 @@ import { computed } from "vue";
 
 const props = defineProps<{
   name: string;
+  percentage?: number;
   size?: string;
   color?: string;
   tip?: string;

src/example/components/slide/slide-icons.vue

@@ -17,7 +17,7 @@
             @click="drawIcon(item)"
             :class="{ active: activeName === item.name }"
           >
-            <Icon :name="item.icon" size="32px" :color="item.color" />
+            <Icon :name="item.icon" size="32px" :percentage="2.5" :color="item.color" />
             <span>{{ item.name }}</span>
           </div>
         </div>

src/example/components/slide/slide.vue

@@ -83,7 +83,7 @@ const enterItem = (item: MenuItem) => {
   return hoverMenu.push(svar);
 };
 const hover = hoverManage(enterItem);
-// enterItem(props.menus[2]);
+enterItem(props.menus[2]);
 
 const viewMap = reactive(new WeakMap<MenuItem, ShowAttr>());
 watch(active, (a) => {

src/example/platform/resource-swkk.ts

@@ -447,7 +447,7 @@ export const getAITaggingInfos = async (
       const name = itemIcon?.name || "";
       const isTag = icon === "Tag";
       if (getTag && !isTag) continue;
-      if (!name) continue;
+      if (!name && !isTag) continue;
 
       const pixelCenter = {
         x: (shape.bbox[0] + shape.bbox[2]) / 2 / data.imageWidth,
@@ -484,7 +484,6 @@ export const getAIBorderTaggingInfos = async (
   scale: number
 ) => {
   const taggingInfos = await getAITaggingInfos(scene, subgroup, bound, false);
-  console.log(taggingInfos)
   return taggingInfos.map((item) => {
     const size = item.size!;
     const p = item.position!;
@@ -665,7 +664,6 @@ export const getResource = async ({
   let coverLine: CoverLine;
 
   const compass = await getCompass(scene);
-  console.log(compass);
   const reqs: Promise<any>[] = [
     getCompass(scene),
     getCoverLine(scene, key, scale)
@@ -675,9 +673,9 @@ export const getResource = async ({
           getWallAITaggingInfos(scene, key, scale, cover).then((ts) =>
             wallTaggings.push(...ts)
           ),
-          getAITaggingInfos(scene, key, cover.bound).then((ts) =>
+          getAITaggingInfos(scene, key, cover.bound).then((ts) => {
             taggings.push(...ts)
-          ),
+          }),
           getAIBorderTaggingInfos(scene, key, cover.bound, scale).then((ts) =>
             borderTaggings.push(...ts)
           ),