feat: 修改需求

public/icons/WaterChannelD.svg

@@ -5,5 +5,5 @@
 <circle cx="270.5" cy="275.5" r="30" stroke="black"/>
 <path d="M512.79 79.5C515.25 80.1524 517.835 80.5 520.5 80.5C537.069 80.5 550.5 67.0685 550.5 50.5C550.5 33.9315 537.069 20.5 520.5 20.5C503.931 20.5 490.5 33.9315 490.5 50.5C490.5 53.1655 490.848 55.7498 491.5 58.21" stroke="black"/>
 <circle cx="695.5" cy="275.5" r="30" stroke="black"/>
-<rect x="520.203" y="29.5" width="30" height="240" rx="15" transform="rotate(45 520.203 29.5)" stroke="black"/>
+<path d="M509.597 40.1082C515.455 34.2504 524.952 34.2504 530.81 40.1082C536.668 45.9661 536.668 55.4636 530.81 61.3214L382.318 209.814C376.46 215.672 366.962 215.672 361.104 209.814C355.246 203.956 355.246 194.459 361.104 188.601L509.597 40.1082Z" stroke="black"/>
 </svg>

src/core/components/icon/icon.ts

@@ -11,10 +11,12 @@ import { Size } from "@/utils/math.ts";
 import { getSvgContent, parseSvgContent } from "@/utils/resource.ts";
 import { Color } from "three";
 import { ui18n } from "@/lang/index.ts";
+import { themeColor } from "@/constant/index.ts";
 
 export const shapeName = ui18n.t("shape.icon.name");
 export const defaultStyle = {
-  coverFill: "#000000",
+  coverStroke:  themeColor,
+  coverStrokeWidth: 1,
   coverOpcatiy: 0,
   strokeWidth: 1,
   strokeScaleEnabled: false,
@@ -67,6 +69,7 @@ export const getIconStyle = async (
       }
     }
   } else {
+    console.log(svgContent.width)
     width = svgContent.width * scale
     height = svgContent.height * scale
   }
@@ -108,18 +111,18 @@ export const getSnapPoints = (data: IconData) => {
 };
 
 export const getMouseStyle = (data: IconData) => {
-  const fillStatus = getMouseColors(data.coverFill || defaultStyle.coverFill);
-  const hCoverOpcaoty = data.coverOpcatiy ? data.coverOpcatiy : 0.3;
+  const strokeStatus = getMouseColors(data.coverStroke || defaultStyle.coverStroke);
+  const hCoverOpcaoty = data.coverOpcatiy ? data.coverOpcatiy : 1;
 
   return {
     default: {
-      coverFill: data.coverFill || defaultStyle.coverFill,
+      coverStroke: data.coverStroke || defaultStyle.coverStroke,
       coverOpcatiy: data.coverOpcatiy || 0,
     },
-    hover: { coverFill: fillStatus.hover, coverOpcatiy: hCoverOpcaoty },
-    select: { coverFill: fillStatus.select, coverOpcatiy: hCoverOpcaoty },
-    focus: { coverFill: fillStatus.select, coverOpcatiy: hCoverOpcaoty },
-    press: { coverFill: fillStatus.press, coverOpcatiy: hCoverOpcaoty },
+    hover: { coverStroke: strokeStatus.hover, coverOpcatiy: hCoverOpcaoty },
+    select: { coverStroke: strokeStatus.select, coverOpcatiy: hCoverOpcaoty },
+    focus: { coverStroke: strokeStatus.select, coverOpcatiy: hCoverOpcaoty },
+    press: { coverStroke: strokeStatus.press, coverOpcatiy: hCoverOpcaoty },
   };
 };
 

src/core/components/icon/temp-icon.vue

@@ -15,7 +15,7 @@
 
 <script lang="ts" setup>
 import { defaultStyle, IconData } from "./icon.ts";
-import { computed, ref, watch } from "vue";
+import { computed, ref, watch, watchEffect } from "vue";
 import { getSvgContent, parseSvgContent, SVGParseResult } from "@/utils/resource.ts";
 import { Group } from "konva/lib/Group";
 import { DC } from "@/deconstruction.js";
@@ -23,6 +23,7 @@ import { Transform } from "konva/lib/Util";
 import { useStore } from "@/core/store/index.ts";
 import { useHistory } from "@/core/hook/use-history.ts";
 import Path from "./temp-path.vue";
+import { themeColor } from "@/constant/index.ts";
 
 const props = defineProps<{ data: IconData; addMode?: boolean }>();
 const svg = ref<SVGParseResult | null>(null);
@@ -99,14 +100,19 @@ const groupConfig = computed(() => {
 
 const rectConfig = computed(() => {
   if (!svg.value) return null;
+  const s = 1 / (scale.value?.x || 1);
+  const padding = 0 * s;
+
   return {
-    fill: data.value.coverFill,
+    // fill: data.value.coverFill,
     id: "rep",
-    stroke: data.value.coverStroke,
+    x: -padding,
+    y: -padding,
+    stroke: themeColor,
     opacity: data.value.coverOpcatiy,
-    strokeWidth: data.value.coverStrokeWidth,
-    width: svg.value.width,
-    height: svg.value.height,
+    strokeWidth: 1 * s,
+    width: svg.value.width + 2 * padding,
+    height: svg.value.height + 2 * padding,
   };
 });
 </script>

src/core/components/serial/serial-group.vue

@@ -29,6 +29,7 @@ import {
   syncTable,
 } from ".";
 import { useExpose } from "@/core/hook/use-expose";
+import { useConfig } from "@/core/hook/use-config";
 
 defineProps<{ type?: ShapeType }>();
 
@@ -47,11 +48,12 @@ const jTable = computed(() =>
 );
 
 const draw = useExpose();
+const config = useConfig();
 const updateJoinTable = () => {
   const items = data.value;
 
   let table = jTable.value;
-  if (!autoGenTable.value || items.length === 0) {
+  if (!autoGenTable.value || !config.serailAutoGenTable || items.length === 0) {
     table && history.preventTrack(() => store.delItem("table", table!.id));
     return;
   }

src/core/components/serial/temp-serial.vue

@@ -48,7 +48,7 @@ import { useStore } from "@/core/store/index.ts";
 import { getCircleLineIntersection, getLineRectIntersection, Pos } from "@/utils/math.ts";
 import { useStage } from "@/core/hook/use-global-vars.ts";
 import { Node } from "konva/lib/Node";
-import { flatPositions } from "@/utils/shared.ts";
+import { asyncTimeout, debounce, flatPositions } from "@/utils/shared.ts";
 import { MathUtils } from "three";
 import { Group } from "konva/lib/Group";
 
@@ -187,7 +187,7 @@ watch(
     }
     return [props.data.mat[4], props.data.mat[5]];
   },
-  async () => {
+  debounce(() => {
     if (!props.data.joinIds?.length) return;
     const $stage = stage.value!.getNode();
     joinPoints.value = props.data.joinIds
@@ -197,7 +197,7 @@ watch(
         return getJoinPoint(shape);
       })
       .filter(Boolean) as Pos[][];
-  },
+  }, 300),
   { immediate: true }
 );
 

src/core/hook/use-config.ts

@@ -35,7 +35,8 @@ export type Config = {
   margin?: number | number[];
   showCompass: boolean
   showComponentSize: boolean
-  labelLineConfig: typeof defLableLineConfig
+  labelLineConfig: typeof defLableLineConfig,
+  serailAutoGenTable: boolean
 };
 
 export const defConfig: Config = {
@@ -44,7 +45,8 @@ export const defConfig: Config = {
   size: null,
   showCompass: false,
   showComponentSize: true,
-  labelLineConfig: defLableLineConfig
+  labelLineConfig: defLableLineConfig,
+  serailAutoGenTable: true
 };
 
 export const useConfig = installGlobalVar(() => {

src/core/hook/use-draw.ts

@@ -118,7 +118,8 @@ export const useInteractiveDrawShapeAPI = installGlobalVar(() => {
       preset: InteractivePreset<T>["preset"] = {},
       single = false,
       force = false,
-      preSelectIds?: string[]
+      preSelectIds?: string[],
+      callback?: () => void
     ) => {
       if (isEnter) {
         leave();
@@ -134,7 +135,10 @@ export const useInteractiveDrawShapeAPI = installGlobalVar(() => {
         type: shapeType,
         preset,
         operate: { single, preSelectIds },
-        callback: leave,
+        callback: () => {
+          leave()
+          callback && callback()
+        },
       };
       enter();
     },

src/example/components/slide/actions.ts

@@ -102,20 +102,25 @@ export const imp: MenuItem = {
         const scale = 1000 * overviewMMToPixel;
 
         ElMessage.warning(ui18n.t('sys.actions.import.tip'));
-        draw.enterDrawShape(
+        await draw.enterDrawShape(
           "image",
           {
             width: realSize.width * scale,
             height: realSize.height * scale,
             url: result.url,
-            key: "kankan-floor-cover",
+            key: "mapkankan-floor-cover",
             lock: true,
             cornerRadius: 0,
             zIndex: -2,
           },
-          true
+          true,
+          undefined,
+          undefined,
+          () => {
+            draw.initViewport()
+          }
         );
-        // emit("updateMapImage", { url: result.url, size: result.info.size });
+        
       },
     },
     {

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

@@ -1,12 +1,22 @@
 <template>
   <div class="icon-layout">
-    <ElInput v-model="keyword" :placeholder="$t('icons.search')" class="search" clearable style="height: 34px">
+    <ElInput
+      v-model="keyword"
+      :placeholder="$t('icons.search')"
+      class="search"
+      clearable
+      style="height: 34px"
+    >
       <template #prefix>
         <icon name="Search" size="16px" />
       </template>
     </ElInput>
     <ElCollapse class="icon-menu" v-model="activeGroups" accordion>
-      <ElCollapseItem v-for="group in searchGroups" :name="group.name" v-if="searchGroups.length">
+      <ElCollapseItem
+        v-for="group in searchGroups"
+        :name="group.name"
+        v-if="searchGroups.length"
+      >
         <template #title>
           <h2>{{ group.name }}</h2>
         </template>
@@ -14,8 +24,11 @@
         <div class="type-children" v-for="typeChildren in group.children">
           <h3 v-if="typeChildren.name">{{ typeChildren.name }}</h3>
           <div class="icon-items">
-            <div v-for="item in typeChildren.children" @click="drawIcon(item)"
-              :class="{ active: activeName === item.name }">
+            <div
+              v-for="item in typeChildren.children"
+              @click="drawIcon(item)"
+              :class="{ active: activeName === item.name }"
+            >
               <Icon :name="item.icon" size="32px" :percentage="2.5" :color="item.color" />
               <span>{{ item.name }}</span>
             </div>
@@ -28,7 +41,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watchEffect } from "vue";
+import { computed, onMounted, onUnmounted, ref, watchEffect } from "vue";
 import { ElCollapse, ElCollapseItem, ElEmpty, ElInput } from "element-plus";
 import { defaultStyle, getIconStyle } from "@/core/components/icon/index.ts";
 import { Draw } from "../container/use-draw";
@@ -46,16 +59,24 @@ const emit = defineEmits<{
 
 const drawIcon = async (item: IconItem) => {
   const url = `./icons/${item.icon}.svg`;
+
   const name = item.name;
   const type = item.wall ? "lineIcon" : "icon";
-  const parset: any = await getIconStyle(url, undefined, undefined, undefined, item.type === 'realScale' ? 0.1 : undefined);
+  const parset: any = await getIconStyle(
+    url,
+    item.parse?.width,
+    item.parse?.height,
+    item.parse && "fixedScale" in item.parse ? item.parse.fixedScale : true,
+    item.type === "realScale" ? 0.1 : undefined
+  );
+  console.log(parset);
   parset.isIcon = true;
   props.draw.enterDrawShape(
     type,
     {
       ...defaultStyle,
-      ...parset,
       ...(item.parse || {}),
+      ...parset,
       url,
       name,
     },
@@ -89,9 +110,18 @@ const searchGroups = computed(() => {
     })
     .filter((typeChildren) => typeChildren.children.length > 0);
 });
+
+onMounted(() => {
+  keyword.value = sessionStorage.getItem("icons-keyword") || keyword.value;
+  activeGroups.value = sessionStorage.getItem("icons-actoveGroup") || activeGroups.value;
+});
+onUnmounted(() => {
+  sessionStorage.setItem("icons-keyword", keyword.value);
+  sessionStorage.setItem("icons-actoveGroup", activeGroups.value);
+});
 watchEffect(() => {
-  activeGroups.value = searchGroups.value[0]?.name
-})
+  activeGroups.value = searchGroups.value[0]?.name;
+});
 
 props.cref &&
   props.cref({
@@ -152,7 +182,7 @@ props.cref &&
   display: flex;
   flex-wrap: wrap;
 
-  >div {
+  > div {
     width: 25%;
     text-align: center;
     display: flex;

src/example/constant.ts

@@ -13,6 +13,7 @@ export type IconItem = {
     stroke?: string;
     type?: LineIconData["type"];
     height?: number;
+    fixedScale?: boolean
     width?: number;
   };
 };
@@ -24,318 +25,515 @@ export type IconGroup = {
   }[];
 };
 
-// 辅助函数：快速获取项的国际化名称
-const getIT = (icon: string) => ui18n.t(`icons.items.${icon}`);
-// 辅助函数：快速获取组的国际化名称
-const getGT = (key: string) => ui18n.t(`icons.groups.${key}`);
-
 const traceIcons: IconItem[] = [
-  { icon: "zhiwen_o", name: getIT("zhiwen_o") },
-  { icon: "zuozuji_o", name: getIT("zuozuji_o") },
-  { icon: "youzuji_o", name: getIT("youzuji_o") },
-  { icon: "xieyin_o", name: getIT("xieyin_o") },
-  { icon: "chelunhenji_o", name: getIT("chelunhenji_o") },
-  { icon: "dantou_o", name: getIT("dantou_o") },
-  { icon: "danke_o", name: getIT("danke_o") },
-  { icon: "shouqiang_o", name: getIT("shouqiang_o") },
-  { icon: "buqiang_o", name: getIT("buqiang_o") },
+  { icon: "zhiwen_o", name: ui18n.t("icons.items.zhiwen_o") },
+  { icon: "zuozuji_o", name: ui18n.t("icons.items.zuozuji_o") },
+  { icon: "youzuji_o", name: ui18n.t("icons.items.youzuji_o") },
+  { icon: "xieyin_o", name: ui18n.t("icons.items.xieyin_o") },
+  { icon: "chelunhenji_o", name: ui18n.t("icons.items.chelunhenji_o") },
+  { icon: "dantou_o", name: ui18n.t("icons.items.dantou_o") },
+  { icon: "danke_o", name: ui18n.t("icons.items.danke_o") },
+  { icon: "shouqiang_o", name: ui18n.t("icons.items.shouqiang_o") },
+  { icon: "buqiang_o", name: ui18n.t("icons.items.buqiang_o") },
   {
     icon: "xuepo_o",
-    name: getIT("xuepo_o"),
+    name: ui18n.t("icons.items.xuepo_o"),
     color: "#DD2C2C",
     parse: { fill: "#DD2C2C", stroke: undefined },
   },
   {
     icon: "xueji_o",
-    name: getIT("xueji_o"),
+    name: ui18n.t("icons.items.xueji_o"),
     color: "#DD2C2C",
     parse: { fill: "#DD2C2C", stroke: undefined },
   },
-  { parse: { key: "trace" }, icon: "shitiz_o", name: getIT("shitiz_o") },
-  { parse: { key: "trace" }, icon: "shitib_o", name: getIT("shitib_o") },
+  {
+    parse: { key: "trace" },
+    icon: "shitiz_o",
+    name: ui18n.t("icons.items.shitiz_o"),
+  },
+  {
+    parse: { key: "trace" },
+    icon: "shitib_o",
+    name: ui18n.t("icons.items.shitib_o"),
+  },
   {
     parse: { key: "trace" },
     icon: "shitifuhao_o",
-    name: getIT("shitifuhao_o"),
+    name: ui18n.t("icons.items.shitifuhao_o"),
   },
 
-  { parse: { key: "trace" }, icon: "handprint", name: getIT("handprint") },
-  { parse: { key: "trace" }, icon: "footprint", name: getIT("footprint") },
+  {
+    parse: { key: "trace" },
+    icon: "handprint",
+    name: ui18n.t("icons.items.handprint"),
+  },
+  {
+    parse: { key: "trace" },
+    icon: "footprint",
+    name: ui18n.t("icons.items.footprint"),
+  },
   {
     parse: { key: "trace" },
     icon: "wrenchAndScrewdriver",
-    name: getIT("wrenchAndScrewdriver"),
+    name: ui18n.t("icons.items.wrenchAndScrewdriver"),
+  },
+  {
+    parse: { key: "trace" },
+    icon: "video",
+    name: ui18n.t("icons.items.video"),
+  },
+  {
+    parse: { key: "trace" },
+    icon: "virus",
+    name: ui18n.t("icons.items.virus"),
+  },
+  {
+    parse: { key: "trace" },
+    icon: "cartridge",
+    name: ui18n.t("icons.items.cartridge"),
+  },
+  {
+    parse: { key: "trace" },
+    icon: "poison",
+    name: ui18n.t("icons.items.poison"),
   },
-  { parse: { key: "trace" }, icon: "video", name: getIT("video") },
-  { parse: { key: "trace" }, icon: "virus", name: getIT("virus") },
-  { parse: { key: "trace" }, icon: "cartridge", name: getIT("cartridge") },
-  { parse: { key: "trace" }, icon: "poison", name: getIT("poison") },
   {
     parse: { key: "trace" },
     icon: "physics_and_chemistry",
-    name: getIT("physics_and_chemistry"),
+    name: ui18n.t("icons.items.physics_and_chemistry"),
   },
   {
     parse: { key: "trace" },
     icon: "folder_close",
-    name: getIT("folder_close"),
+    name: ui18n.t("icons.items.folder_close"),
+  },
+  {
+    parse: { key: "trace" },
+    icon: "check",
+    name: ui18n.t("icons.items.check"),
   },
-  { parse: { key: "trace" }, icon: "check", name: getIT("check") },
   {
     parse: { key: "trace" },
     icon: "case_other",
-    name: getIT("case_other"),
+    name: ui18n.t("icons.items.case_other"),
+  },
+  {
+    parse: { key: "trace" },
+    icon: "electronic",
+    name: ui18n.t("icons.items.electronic"),
+  },
+  { parse: { key: "trace" }, icon: "cube", name: ui18n.t("icons.items.cube") },
+  {
+    parse: { key: "trace" },
+    icon: "corpse",
+    name: ui18n.t("icons.items.corpse"),
   },
-  { parse: { key: "trace" }, icon: "electronic", name: getIT("electronic") },
-  { parse: { key: "trace" }, icon: "cube", name: getIT("cube") },
-  { parse: { key: "trace" }, icon: "corpse", name: getIT("corpse") },
 ];
 
+traceIcons.forEach(item => item.parse = {...item.parse, width: 40, height: 40, fixedScale: false, key: "trace"})
+
 export const iconGroups: IconGroup[] = [
   {
-    name: getGT("huxing"),
+    name: ui18n.t("icons.groups.huxing"),
     children: [
       {
-        name: getGT("men"),
+        name: ui18n.t("icons.groups.men"),
         children: [
+          
           {
             wall: true,
-            icon: "MotherDoor",
-            name: getIT("MotherDoor"),
+            icon: "men_l",
+            name: ui18n.t("icons.items.men_l"),
             parse: { type: "align-bottom" },
           },
           {
             wall: true,
-            icon: "PullGate",
-            name: getIT("PullGate"),
-            parse: { type: "full" },
+            icon: "shuangkaimen",
+            name: ui18n.t("icons.items.shuangkaimen"),
+            parse: { type: "align-bottom" },
           },
           {
             wall: true,
-            icon: "RollerShutter",
-            name: getIT("RollerShutter"),
+            icon: "yimen",
+            name: ui18n.t("icons.items.yimen"),
             parse: { type: "full" },
           },
           {
             wall: true,
-            icon: "RevolutionDoor",
-            name: getIT("RevolutionDoor"),
-            parse: { type: "align-bottom" },
+            icon: "yakou",
+            name: ui18n.t("icons.items.yakou"),
+            parse: { type: "full" },
           },
           {
+            type: "realScale",
             wall: true,
-            icon: "DoorWindow",
-            name: getIT("DoorWindow"),
+            icon: "MotherDoor",
+            name: ui18n.t("icons.items.MotherDoor"),
             parse: { type: "align-bottom" },
           },
-
           {
+            type: "realScale",
             wall: true,
-            icon: "men_l",
-            name: getIT("men_l"),
-            parse: { type: "align-bottom" },
+            icon: "PullGate",
+            name: ui18n.t("icons.items.PullGate"),
+            parse: { type: "full" },
           },
           {
+            type: "realScale",
             wall: true,
-            icon: "shuangkaimen",
-            name: getIT("shuangkaimen"),
-            parse: { type: "align-bottom" },
+            icon: "RollerShutter",
+            name: ui18n.t("icons.items.RollerShutter"),
+            parse: { type: "full" },
           },
           {
+            type: "realScale",
             wall: true,
-            icon: "yimen",
-            name: getIT("yimen"),
-            parse: { type: "full" },
+            icon: "RevolutionDoor",
+            name: ui18n.t("icons.items.RevolutionDoor"),
+            parse: { type: "align-bottom" },
           },
           {
+            type: "realScale",
             wall: true,
-            icon: "yakou",
-            name: getIT("yakou"),
-            parse: { type: "full" },
+            icon: "DoorWindow",
+            name: ui18n.t("icons.items.DoorWindow"),
+            parse: { type: "align-bottom" },
           },
+
         ],
       },
       {
-        name: getGT("chuang"),
+        name: ui18n.t("icons.groups.chuang"),
         children: [
+          
           {
             wall: true,
-            icon: "SlidingWindow",
-            name: getIT("SlidingWindow"),
+            icon: "chuang",
+            name: ui18n.t("icons.items.chuang"),
             parse: { type: "full" },
           },
-
           {
             wall: true,
-            icon: "SingleBayWindow",
-            name: getIT("SingleBayWindow"),
+            icon: "piaochuang",
+            name: ui18n.t("icons.items.piaochuang"),
             parse: { type: "align-bottom-fix", width: 180, height: 70 },
           },
           {
             wall: true,
-            icon: "chuang",
-            name: getIT("chuang"),
+            icon: "luodichuang",
+            name: ui18n.t("icons.items.luodichuang"),
             parse: { type: "full" },
           },
           {
             wall: true,
-            icon: "piaochuang",
-            name: getIT("piaochuang"),
-            parse: { type: "align-bottom-fix", width: 180, height: 70 },
+            icon: "SlidingWindow",
+            name: ui18n.t("icons.items.SlidingWindow"),
+            parse: { type: "full" },
           },
+
           {
             wall: true,
-            icon: "luodichuang",
-            name: getIT("luodichuang"),
-            parse: { type: "full" },
+            icon: "SingleBayWindow",
+            name: ui18n.t("icons.items.SingleBayWindow"),
+            parse: { type: "align-bottom-fix", width: 180, height: 70 },
           },
         ],
       },
       {
-        name: getGT("goujian"),
+        name: ui18n.t("icons.groups.goujian"),
         children: [
-          { icon: "zhuzi", name: getIT("zhuzi") },
-          { icon: "yandao", name: getIT("yandao") },
-          { icon: "loudao", name: getIT("loudao") },
+          { icon: "zhuzi", name: ui18n.t("icons.items.zhuzi") },
+          { icon: "yandao", name: ui18n.t("icons.items.yandao") },
+          { icon: "loudao", name: ui18n.t("icons.items.loudao") },
         ],
       },
     ],
   },
   {
-    name: getGT("jiaju"),
-
+    name: ui18n.t("icons.groups.jiaju"),
     children: [
       {
-        name: getGT("kecan"),
+        name: ui18n.t("icons.groups.kecan"),
         children: [
-          { type: "realScale", icon: "TV", name: getIT("TV") },
-          { type: "realScale", icon: "HangingTV", name: getIT("HangingTV") },
-          { type: "realScale", icon: "Cabinet", name: getIT("Cabinet") },
           {
             type: "realScale",
             icon: "CombinationSofa",
-            name: getIT("CombinationSofa"),
+            name: ui18n.t("icons.items.CombinationSofa"),
+          },
+          {
+            type: "realScale",
+            icon: "ThreeSofa",
+            name: ui18n.t("icons.items.ThreeSofa"),
+          },
+          {
+            type: "realScale",
+            icon: "SingleSofa",
+            name: ui18n.t("icons.items.SingleSofa"),
           },
-          { type: "realScale", icon: "ThreeSofa", name: getIT("ThreeSofa") },
-          { type: "realScale", icon: "SingleSofa", name: getIT("SingleSofa") },
           {
             type: "realScale",
             icon: "SingleSofaR",
-            name: getIT("SingleSofaR"),
+            name: ui18n.t("icons.items.SingleSofaR"),
+          },
+          {
+            type: "realScale",
+            icon: "CurvedSofa",
+            name: ui18n.t("icons.items.CurvedSofa"),
+          },
+          {
+            type: "realScale",
+            icon: "CornerSofa",
+            name: ui18n.t("icons.items.CornerSofa"),
+          },
+          {
+            type: "realScale",
+            icon: "TwoSofa",
+            name: ui18n.t("icons.items.TwoSofa"),
+          },
+          {
+            type: "realScale",
+            icon: "TeaTable",
+            name: ui18n.t("icons.items.TeaTable"),
+          },
+          {
+            type: "realScale",
+            icon: "Carpet",
+            name: ui18n.t("icons.items.Carpet"),
+          },
+          {
+            type: "realScale",
+            icon: "Plant",
+            name: ui18n.t("icons.items.Plant"),
+          },
+          {
+            type: "realScale",
+            icon: "TeaTableR",
+            name: ui18n.t("icons.items.TeaTableR"),
+          },
+          {
+            type: "realScale",
+            icon: "TeaTableO",
+            name: ui18n.t("icons.items.TeaTableO"),
+          },
+          {
+            type: "realScale",
+            icon: "SideTableR",
+            name: ui18n.t("icons.items.SideTableR"),
+          },
+          {
+            type: "realScale",
+            icon: "SideTableS",
+            name: ui18n.t("icons.items.SideTableS"),
+          },
+          { type: "realScale", icon: "TV", name: ui18n.t("icons.items.TV") },
+          {
+            type: "realScale",
+            icon: "HangingTV",
+            name: ui18n.t("icons.items.HangingTV"),
+          },
+          {
+            type: "realScale",
+            icon: "Cabinet",
+            name: ui18n.t("icons.items.Cabinet"),
           },
-          { type: "realScale", icon: "CurvedSofa", name: getIT("CurvedSofa") },
-          { type: "realScale", icon: "CornerSofa", name: getIT("CornerSofa") },
-          { type: "realScale", icon: "TwoSofa", name: getIT("TwoSofa") },
-          { type: "realScale", icon: "TeaTable", name: getIT("TeaTable") },
-          { type: "realScale", icon: "Carpet", name: getIT("Carpet") },
-          { type: "realScale", icon: "Plant", name: getIT("Plant") },
-          { type: "realScale", icon: "TeaTableR", name: getIT("TeaTableR") },
-          { type: "realScale", icon: "TeaTableO", name: getIT("TeaTableO") },
-          { type: "realScale", icon: "SideTableR", name: getIT("SideTableR") },
-          { type: "realScale", icon: "SideTableS", name: getIT("SideTableS") },
           {
             type: "realScale",
             icon: "DiningTableC",
-            name: getIT("DiningTableC"),
+            name: ui18n.t("icons.items.DiningTableC"),
+          },
+          {
+            type: "realScale",
+            icon: "Chair",
+            name: ui18n.t("icons.items.Chair"),
           },
-          { type: "realScale", icon: "Chair", name: getIT("Chair") },
           {
             type: "realScale",
             icon: "DiningTableRC",
-            name: getIT("DiningTableRC"),
+            name: ui18n.t("icons.items.DiningTableRC"),
           },
           {
             type: "realScale",
             icon: "DiningTable",
-            name: getIT("DiningTable"),
+            name: ui18n.t("icons.items.DiningTable"),
           },
           {
             type: "realScale",
             icon: "DiningTableR",
-            name: getIT("DiningTableR"),
+            name: ui18n.t("icons.items.DiningTableR"),
+          },
+          {
+            type: "realScale",
+            icon: "Stool",
+            name: ui18n.t("icons.items.Stool"),
           },
-          { type: "realScale", icon: "Stool", name: getIT("Stool") },
         ],
       },
       {
-        name: getGT("woshi"),
+        name: ui18n.t("icons.groups.woshi"),
         children: [
-          { type: "realScale", icon: "DoubleBed", name: getIT("DoubleBed") },
-          { type: "realScale", icon: "SingleBed", name: getIT("SingleBed") },
-          { type: "realScale", icon: "Wardrobe", name: getIT("Wardrobe") },
-          { type: "realScale", icon: "DoubleBedB", name: getIT("DoubleBedB") },
-          { type: "realScale", icon: "Dresser", name: getIT("Dresser") },
+          {
+            type: "realScale",
+            icon: "DoubleBed",
+            name: ui18n.t("icons.items.DoubleBed"),
+          },
+          {
+            type: "realScale",
+            icon: "SingleBed",
+            name: ui18n.t("icons.items.SingleBed"),
+          },
+          {
+            type: "realScale",
+            icon: "Wardrobe",
+            name: ui18n.t("icons.items.Wardrobe"),
+          },
+          {
+            type: "realScale",
+            icon: "DoubleBedB",
+            name: ui18n.t("icons.items.DoubleBedB"),
+          },
+          {
+            type: "realScale",
+            icon: "Dresser",
+            name: ui18n.t("icons.items.Dresser"),
+          },
           {
             type: "realScale",
             icon: "BedsideCupboard",
-            name: getIT("BedsideCupboard"),
+            name: ui18n.t("icons.items.BedsideCupboard"),
+          },
+          {
+            type: "realScale",
+            icon: "Pillow",
+            name: ui18n.t("icons.items.Pillow"),
           },
-          { type: "realScale", icon: "Pillow", name: getIT("Pillow") },
         ],
       },
       {
-        name: getGT("chuwei"),
+        name: ui18n.t("icons.groups.chuwei"),
         children: [
-          { type: "realScale", icon: "GasStove", name: getIT("GasStove") },
-          { type: "realScale", icon: "Cupboard", name: getIT("Cupboard") },
-          { type: "realScale", icon: "Bathtub", name: getIT("Bathtub") },
-          { type: "realScale", icon: "Closestool", name: getIT("Closestool") },
-          { type: "realScale", icon: "Washstand", name: getIT("Washstand") },
-          { type: "realScale", icon: "CupboardU", name: getIT("CupboardU") },
+          {
+            type: "realScale",
+            icon: "GasStove",
+            name: ui18n.t("icons.items.GasStove"),
+          },
+          {
+            type: "realScale",
+            icon: "Cupboard",
+            name: ui18n.t("icons.items.Cupboard"),
+          },
+          {
+            type: "realScale",
+            icon: "Bathtub",
+            name: ui18n.t("icons.items.Bathtub"),
+          },
+          {
+            type: "realScale",
+            icon: "CupboardU",
+            name: ui18n.t("icons.items.CupboardU"),
+          },
           {
             type: "realScale",
             icon: "WaterChannel",
-            name: getIT("WaterChannel"),
+            name: ui18n.t("icons.items.WaterChannel"),
           },
           {
             type: "realScale",
             icon: "WaterChannelD",
-            name: getIT("WaterChannelD"),
+            name: ui18n.t("icons.items.WaterChannelD"),
+          },
+          {
+            type: "realScale",
+            icon: "FridgeS",
+            name: ui18n.t("icons.items.FridgeS"),
+          },
+          {
+            type: "realScale",
+            icon: "FridgeD",
+            name: ui18n.t("icons.items.FridgeD"),
+          },
+          {
+            type: "realScale",
+            icon: "Closestool",
+            name: ui18n.t("icons.items.Closestool"),
+          },
+          {
+            type: "realScale",
+            icon: "Washstand",
+            name: ui18n.t("icons.items.Washstand"),
+          },
+          {
+            type: "realScale",
+            icon: "CabinetB",
+            name: ui18n.t("icons.items.CabinetB"),
           },
-          { type: "realScale", icon: "FridgeS", name: getIT("FridgeS") },
-          { type: "realScale", icon: "FridgeD", name: getIT("FridgeD") },
-          { type: "realScale", icon: "CabinetB", name: getIT("CabinetB") },
           {
             type: "realScale",
             icon: "SquattingPan",
-            name: getIT("SquattingPan"),
+            name: ui18n.t("icons.items.SquattingPan"),
+          },
+          {
+            type: "realScale",
+            icon: "Shower",
+            name: ui18n.t("icons.items.Shower"),
           },
-          { type: "realScale", icon: "Shower", name: getIT("Shower") },
         ],
       },
       {
-        name: getGT("qita"),
+        name: ui18n.t("icons.groups.yangtai"),
         children: [
-          { type: "realScale", icon: "Desk", name: getIT("Desk") },
           {
             type: "realScale",
             icon: "BalconyChair",
-            name: getIT("BalconyChair"),
+            name: ui18n.t("icons.items.BalconyChair"),
+          },
+          {
+            type: "realScale",
+            icon: "MopPool",
+            name: ui18n.t("icons.items.MopPool"),
           },
-          { type: "realScale", icon: "MopPool", name: getIT("MopPool") },
           {
             type: "realScale",
             icon: "WashingMachine",
-            name: getIT("WashingMachine"),
+            name: ui18n.t("icons.items.WashingMachine"),
+          },
+        ],
+      },
+      {
+        name: ui18n.t("icons.groups.qita"),
+        children: [
+          {
+            type: "realScale",
+            icon: "Desk",
+            name: ui18n.t("icons.items.Desk"),
+          },
+          
+          {
+            type: "realScale",
+            icon: "Elevator",
+            name: ui18n.t("icons.items.Elevator"),
           },
-          { type: "realScale", icon: "Elevator", name: getIT("Elevator") },
           {
             type: "realScale",
             icon: "WaterFountain",
-            name: getIT("WaterFountain"),
+            name: ui18n.t("icons.items.WaterFountain"),
           },
           {
             type: "realScale",
             icon: "AirConditioner",
-            name: getIT("AirConditioner"),
+            name: ui18n.t("icons.items.AirConditioner"),
+          },
+          {
+            type: "realScale",
+            icon: "Tablelamp",
+            name: ui18n.t("icons.items.Tablelamp"),
           },
-          { type: "realScale", icon: "Tablelamp", name: getIT("Tablelamp") },
         ],
       },
     ],
   },
   {
-    name: getGT("henji"),
+    name: ui18n.t("icons.groups.henji"),
     children: [
       {
         name: "",

src/example/fuse/enter-shared.ts

@@ -435,7 +435,7 @@ export let getTableTemp = async () => {
       [ui18n.t('tableTemp.th2')]: "",
       [ui18n.t('tableTemp.th3')]: "",
       [ui18n.t('tableTemp.th4')]: "",
-      [ui18n.t('tableTemp.th5')]: "",
+      [ui18n.t('tableTemp.th5')]: formatDate(new Date(), ui18n.t('tableTemp.th5value'))
     };
 
     if (window.platform.num) {
@@ -447,7 +447,7 @@ export let getTableTemp = async () => {
         table[ui18n.t('tableTemp.th2')] = item.caseLocation;
         table[ui18n.t('tableTemp.th3')] = item.orgName;
         table[ui18n.t('tableTemp.th4')] = item.investigatorName;
-        table[ui18n.t('tableTemp.th5')] = formatDate(new Date(), "yyyy.MM.dd hh:mm");
+        table[ui18n.t('tableTemp.th5')] = formatDate(new Date(), ui18n.t('tableTemp.th5value'));
         if (!title) {
           title = ui18n.t('tableTemp.title', item);
         }

src/example/fuse/enter.ts

@@ -16,12 +16,12 @@ window.platform.login = (isBack = true) => {
   if (import.meta.env.DEV) {
     platform
       .post("/service/manage/login", {
-        // password: "Di8r5tFpExMjM0NTY=F39Vd0znQWfBY7W9iG",
-        // username: "W测试2",
-        // userName: "W测试2",
         password: encodePwd("Aa123456"),
-        username: "super-admin",
-        userName: "super-admin",
+        // username: "super-admin",
+        // userName: "super-admin",
+        username: "潘少爷",
+        userName: "潘少爷",
+        
       })
       .then((res) => {
         params.value.token = res.token;

src/example/fuse/views/overview/header.vue

@@ -2,7 +2,7 @@
   <Header :action-groups="actions" :title="title" no-back :draw="draw">
     <template #saves>
       <el-button type="primary" @click="saveHandler" :disabled="draw.drawing">
-        {{$t('sys.save')}}
+        {{ $t("sys.save") }}
       </el-button>
     </template>
     <template #nav>
@@ -66,7 +66,7 @@ const actions = [
         const scene = await selectScene();
         emit("selectVR", scene);
       },
-      text: ui18n.t('vr.fz'),
+      text: ui18n.t("vr.fz"),
       icon: "VR",
     },
   ],
@@ -93,10 +93,10 @@ const actions = [
               return blob;
             });
             if (!blob) {
-              ElMessage.error(ui18n.t('sys.actions.download.error'));
+              ElMessage.error(ui18n.t("sys.actions.download.error"));
             } else {
               await saveAs(blob, `${props.title}.${format}`);
-              ElMessage.success(ui18n.t('sys.actions.download.success'));
+              ElMessage.success(ui18n.t("sys.actions.download.success"));
             }
           } else {
             await item.handler(props.title);
@@ -104,7 +104,7 @@ const actions = [
         },
       })),
     },
-    baseActions.lang
+    baseActions.lang,
   ],
 ];
 
@@ -174,7 +174,7 @@ const setViewToKanKanCover = async () => {
 
 const saveHandler = repeatedlyOnly(async () => {
   const storeData = draw.getData();
-  const [listBlob, kkBlob]: [Blob| null, Blob | null] = await loading(async () => {
+  const [listBlob, kkBlob]: [Blob | null, Blob | null] = await loading(async () => {
     const back = draw.config.back;
     const [_, recover] = await setViewToTableCover(draw);
     draw.config.back = back;
@@ -190,7 +190,7 @@ const saveHandler = repeatedlyOnly(async () => {
   let listUrl = null;
   let kankanUrl = null;
   if (!listBlob || !kkBlob) {
-    ElMessage.error(ui18n.t('sys.screenshot.error'));
+    ElMessage.error(ui18n.t("sys.screenshot.error"));
   } else {
     [listUrl, kankanUrl] = await Promise.all([
       // window.platform.uploadResourse(new File([tabBlob], `tabulation-cover.png`)),
@@ -201,9 +201,9 @@ const saveHandler = repeatedlyOnly(async () => {
 
   let tabId = await window.platform.getTabulationId(overviewId.value);
   if (!tabId) {
-    tabId = params.value.tabulationId
+    tabId = params.value.tabulationId;
   }
-  tabulationId.value = tabId
+  tabulationId.value = tabId;
   await refreshTabulationData();
 
   const tabStore = await repTabulationStore(

src/example/fuse/views/tabulation/index.vue

@@ -6,7 +6,11 @@
     :ref="(d: any) => initDraw(d?.draw)"
   >
     <template #header>
-      <Header v-if="draw" :title="$t('tabulation.name1')" @screenshot="(val) => (needScreenshot = val)" />
+      <Header
+        v-if="draw"
+        :title="$t('tabulation.name1')"
+        @screenshot="(val) => (needScreenshot = val)"
+      />
     </template>
     <template #slide>
       <Slide v-if="draw" @update-map-image="setMapHandler" />
@@ -15,6 +19,7 @@
 
   <Preview
     @change-origin="(origin) => setOrigin && setOrigin(origin)"
+    :showLabelLine="coverSetting?.showViewportLabelLine"
     :cover-scale="coverSetting?.scale"
     :paperKey="tabulationData?.paperKey"
     :pixelRatio="needScreenshot ? 6 : pixelRatio"
@@ -166,7 +171,7 @@ const setMapHandler = async (config: { url: string; size: Size }) => {
     if (!draw.value || !serialTable.value) return;
     const un = draw.value.menusFilter.setShapeMenusFilter(
       serialTable.value.id,
-      (menu) => [{ label: ui18n.t('sys.update'), handler: updateSerialTable }, ...menu]
+      (menu) => [{ label: ui18n.t("sys.update"), handler: updateSerialTable }, ...menu]
     );
     onCleanup(un);
   });
@@ -181,7 +186,10 @@ const setMapHandler = async (config: { url: string; size: Size }) => {
       let desc = "";
       if (item.joinIds) {
         desc = item.joinIds
-          .map((id) => overview.image?.find((image) => image.id === id)?.name)
+          .map((id) => {
+            const img = overview.image?.find((image) => image.id === id)?.name;
+            return img || overview.icon?.find((image) => image.id === id)?.name;
+          })
           .filter(Boolean)
           .join("、");
       }
@@ -251,8 +259,11 @@ const setMapHandler = async (config: { url: string; size: Size }) => {
 const needScreenshot = ref(false);
 const coverSetting = computed(() => {
   const cover = draw.value?.store.items.find((item) => item.key === tableCoverKey);
-  return cover?.userData as { showScale: boolean; scale: number } | undefined;
+  return cover?.userData as
+    | { showScale: boolean; showViewportLabelLine?: boolean; scale: number }
+    | undefined;
 });
+
 let setOrigin: (canvas: HTMLCanvasElement) => void;
 const originConfig = shallowRef<{ size: Size; scale: number }>();
 const setCover = (paperKey: PaperKey, draw: Draw) => {
@@ -262,6 +273,16 @@ const setCover = (paperKey: PaperKey, draw: Draw) => {
     cleanups.length = 0;
   };
   let cover = draw.store.items.find((item) => item.key === tableCoverKey) as ImageData;
+  if (import.meta.env.DEV && cover) {
+    draw.history.preventTrack(() => {
+      draw.store.delItem("image", cover!.id);
+      cover = null as any;
+    });
+  }
+  const { margin, size } = getPaperConfig(
+    paperConfigs[paperKey].size,
+    paperConfigs[paperKey].scale
+  );
   if (!cover) {
     cover = reactive({
       ...getBaseItem(),
@@ -271,6 +292,7 @@ const setCover = (paperKey: PaperKey, draw: Draw) => {
       key: tableCoverKey,
       disableTransformer: true,
       userData: {
+        showViewportLabelLine: true,
         showScale: true,
         scale: 0,
       },
@@ -278,16 +300,12 @@ const setCover = (paperKey: PaperKey, draw: Draw) => {
       width: 0,
       height: 0,
       mat: [1, 0, 0, 1, 0, 0],
-      itemName: ui18n.t('cover.itemName'),
+      itemName: ui18n.t("cover.itemName"),
     });
     const stopWatch = watch(
       originConfig,
       (config) => {
         if (!config) return;
-        const { margin, size } = getPaperConfig(
-          paperConfigs[paperKey].size,
-          paperConfigs[paperKey].scale
-        );
         const pos = getFixPosition(
           {
             left: config.size.width / 2 + margin[3] + getRealPixel(15, paperKey),
@@ -297,7 +315,6 @@ const setCover = (paperKey: PaperKey, draw: Draw) => {
           size
         );
         const mat = new Transform().translate(pos.x, pos.y).m;
-
         draw.history.preventTrack(() => {
           draw.store.setItem("image", {
             id: cover.id,
@@ -321,39 +338,55 @@ const setCover = (paperKey: PaperKey, draw: Draw) => {
   }
 
   let text = draw.store.items.find((item) => item.key === tableCoverScaleKey) as TextData;
+  if (import.meta.env.DEV && text) {
+    draw.history.preventTrack(() => {
+      draw.store.delItem("text", text!.id);
+      text = null as any;
+    });
+  }
   if (!text) {
+    const width = getRealPixel(30, paperKey);
+    const heihgt = getRealPixel(4.8, paperKey);
+    const pos = getFixPosition(
+      {
+        right: margin[1] + getRealPixel(40, paperKey),
+        top: margin[0] + getRealPixel(45, paperKey),
+      },
+      { width, height: heihgt },
+      size
+    );
     text = reactive({
       ...getBaseItem(),
       content: ``,
-      width: getRealPixel(30, paperKey),
-      heihgt: getRealPixel(4.8, paperKey),
+      width,
+      heihgt,
       fontSize: getRealPixel(4, paperKey),
       disableEditText: true,
       key: tableCoverScaleKey,
       disableDelete: true,
       align: "center",
-      mat: [1, 0, 0, 1, 0, 0],
+      mat: [1, 0, 0, 1, pos.x, pos.y],
     });
     draw.store.addItem("text", text);
-    let stopWatch = watch(
-      () => cover.width && cover.height,
-      (loaded) => {
-        if (loaded) {
-          const mat = [...cover.mat];
-          const x = mat[4] - (text.width || 0) / 2;
-          const y = mat[5] + cover.height / 2 + getRealPixel(5, paperKey);
-          mat[4] = x;
-          mat[5] = y;
-          draw.history.preventTrack(() => {
-            draw.store.setItem("text", { id: text.id, value: { mat } });
-          });
-          nextTick(() => {
-            stopWatch();
-          });
-        }
-      }
-    );
-    cleanups.push(stopWatch);
+    // let stopWatch = watch(
+    //   () => cover.width && cover.height,
+    //   (loaded) => {
+    //     if (loaded) {
+    //       const mat = [...cover.mat];
+    //       const x = mat[4] - (text.width || 0) / 2;
+    //       const y = mat[5] + cover.height / 2 + getRealPixel(5, paperKey);
+    //       mat[4] = x;
+    //       mat[5] = y;
+    //       draw.history.preventTrack(() => {
+    //         draw.store.setItem("text", { id: text.id, value: { mat } });
+    //       });
+    //       nextTick(() => {
+    //         stopWatch();
+    //       });
+    //     }
+    //   }
+    // );
+    // cleanups.push(stopWatch);
   }
   // 兼容旧数据
   if (!cover.userData) {
@@ -391,12 +424,27 @@ const setCover = (paperKey: PaperKey, draw: Draw) => {
       },
       { deep: true }
     ),
+    watch(
+      coverTexQue,
+      (tex, _, cleanup) => {
+        if (!tex) return;
+        cleanup(
+          mountMenus.setShapeMenusFilter(tex.id, (menus) => {
+            const newMenus = { ...menus };
+            delete newMenus.align;
+            delete newMenus.fontStyle;
+            return newMenus;
+          })
+        );
+      },
+      { immediate: true }
+    ),
     menusFilter.setShapeMenusFilter(cover.id, () => []),
     mountMenus.setShapeMenusFilter(cover.id, (menus) => ({
       ...menus,
       scale: {
         type: "fixProportion",
-        label: ui18n.t('cover.fixProportion'),
+        label: ui18n.t("cover.fixProportion"),
         "layout-type": "row",
         get value() {
           return scale.value;
@@ -413,7 +461,7 @@ const setCover = (paperKey: PaperKey, draw: Draw) => {
       },
       showScale: {
         type: "check",
-        label: ui18n.t('cover.showProportion'),
+        label: ui18n.t("cover.showProportion"),
         "layout-type": "row",
         get value() {
           return coverSetting.value?.showScale;
@@ -425,7 +473,22 @@ const setCover = (paperKey: PaperKey, draw: Draw) => {
         },
         props: {},
       },
+      showViewportLabelLine: {
+        type: "check",
+        label: ui18n.t("tabulation.showLabelLine"),
+        "layout-type": "row",
+        get value() {
+          return coverSetting.value?.showViewportLabelLine;
+        },
+        set value(val) {
+          if (coverSetting.value) {
+            coverSetting.value.showViewportLabelLine = val || false;
+          }
+        },
+        props: {},
+      },
     })),
+
     watch(coverQue, (cover) => {
       if (!cover) {
         draw.history.preventTrack(() => {
@@ -527,7 +590,7 @@ const initDraw = async (_draw: Draw) => {
   quitMerges.concat(
     Object.keys(components).map((type) =>
       _draw.menusFilter.setMenusFilter(type as ShapeType, (items) => {
-        return items.filter((item) => item.label !== ui18n.t('sys.hide'));
+        return items.filter((item) => item.label !== ui18n.t("sys.hide"));
       })
     )
   );
@@ -553,7 +616,7 @@ watch(compass, (compass, _, onCleanup) => {
       // ...des,
       rotate: {
         type: "num",
-        label: ui18n.t('describes.rotate'),
+        label: ui18n.t("describes.rotate"),
         default: 0,
         props: {
           min: 0,
@@ -601,7 +664,7 @@ watchEffect((onCleanup) => {
   );
 });
 
-const title = computed(() => tabulationData.value?.title || ui18n.t('tabulation.name1'));
+const title = computed(() => tabulationData.value?.title || ui18n.t("tabulation.name1"));
 watchEffect(() => {
   document.title = title.value;
 });

src/example/fuse/views/tabulation/overview-viewport.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="content" ref="drawEle">
-    <DrawBoard v-if="drawEle" :merge-layers="true" :ref="(d: any) => initDraw(d)" :handler-resource="uploadResourse" />
+    <DrawBoard
+      v-if="drawEle"
+      :merge-layers="true"
+      :ref="(d: any) => initDraw(d)"
+      :handler-resource="uploadResourse"
+    />
   </div>
 </template>
 
@@ -12,6 +17,7 @@ import { debounce, round } from "@/utils/shared";
 import { StoreData } from "@/core/store/store";
 import { Group } from "konva/lib/Group";
 import { lineLen, Size } from "@/utils/math";
+import { defaultStyle as iconDefaultStyle } from "@/core/components/icon";
 import { paperConfigs, PaperKey } from "@/example/components/slide/actions";
 import { IRect } from "konva/lib/types";
 import { DataGroupId } from "@/constant";
@@ -25,6 +31,7 @@ const props = defineProps<{
   coverScale?: number;
   paperKey?: PaperKey;
   pixelRatio?: number;
+  showLabelLine?: boolean;
   notDebounce?: boolean;
 }>();
 
@@ -40,6 +47,7 @@ const initDraw = (d: Draw) => {
     d.config.showComponentSize = false;
     d.config.showGrid = false;
     d.mode.add(Mode.readonly);
+    d.config.serailAutoGenTable = false;
   }
   draw.value = d;
 };
@@ -87,6 +95,7 @@ watch(
       rect.value = undefined;
     } else {
       draw.value!.viewer.setViewMat(new Transform());
+
       await nextTick();
       rect.value = draw.value!.stage!.findOne<Group>(`#${DataGroupId}`)!.getClientRect();
     }
@@ -195,7 +204,8 @@ const updateOrigin = async () => {
         item.strokeWidth = (item.__strokeWidth * pixelPaperToDrawPixel.value!) / 2;
       }
       if (isIcon) {
-        item.strokeWidth *= viewScale.value! / 10;
+        item.strokeWidth =
+          ((item.strokeWidth || iconDefaultStyle.strokeWidth) * viewScale.value!) / 10;
       }
     };
     if (d?.store) {
@@ -210,6 +220,7 @@ const updateOrigin = async () => {
   d.config.size = size;
   d.config.labelLineConfig.type = "auto";
 
+  d.config.showLabelLine = "showLabelLine" in props ? props.showLabelLine : true;
   d.config.labelLineConfig.fontSize = Math.min(padding, 12) * viewScale.value!;
   d.config.labelLineConfig.splitWidth = size.width / 90;
   d.config.labelLineConfig.strokeWidth = size.width / 600;
@@ -240,7 +251,7 @@ watch([preed, viewScale, () => props.notDebounce], () => {
   }
 });
 // 设置更改
-watch(coverScale, () => {
+watch([coverScale, () => props.showLabelLine], () => {
   frameUpdateOrigin.stop();
   preed.value && updateOrigin();
   nextTick(() => frameUpdateOrigin.stop());

src/example/platform/platform-draw.ts

@@ -10,6 +10,7 @@ import {
 import { getIconStyle, IconData } from "@/core/components/icon";
 import { defaultStyle as textDefaultStyle } from "@/core/components/text";
 import { defaultStyle as rectDefaultStyle } from "@/core/components/rectangle";
+import { defaultStyle as iconDefaultStyle } from "@/core/components/icon";
 import { Transform } from "konva/lib/Util";
 import { ElMessage } from "element-plus";
 import { ImageData } from "@/core/components/image";
@@ -210,6 +211,7 @@ const getTaggingShapes = async (taggings: SceneResource["taggings"]) => {
       url: item.url,
       mat: mat.m,
       zIndex: 1,
+      ...iconDefaultStyle
     };
 
     if (!item.url.includes(".svg")) {
@@ -298,6 +300,7 @@ const getWallTaggingShapes = async (
     console.log(item);
     const shape: LineIconData = {
       ...getBaseItem(),
+      ...iconDefaultStyle,
       name: item.name,
       createTime: now + ndx,
       zIndex: 1,

src/lang/locales/zh.json

@@ -85,12 +85,13 @@
       "chuwei": "厨卫",
       "goujian": "构件",
       "henji": "痕迹物证",
-      "huxing": "户型",
-      "jiaju": "家具",
+      "huxing": "户型结构",
+      "jiaju": "家具装饰",
       "kecan": "客餐厅",
       "men": "门",
       "qita": "其他",
-      "woshi": "卧室"
+      "woshi": "卧室",
+      "yangtai": "阳台"
     },
     "items": {
       "AirConditioner": "空调-圆形",
@@ -111,7 +112,7 @@
       "DiningTable": "餐桌",
       "DiningTableC": "餐桌椅",
       "DiningTableR": "餐桌-圆",
-      "DiningTableRC": "餐桌",
+      "DiningTableRC": "餐桌椅-6人",
       "DoorWindow": "门联窗",
       "DoubleBed": "双人床",
       "DoubleBedB": "双人床1.8m",
@@ -134,7 +135,7 @@
       "SingleBayWindow": "单面飘窗",
       "SingleBed": "单人床",
       "SingleSofa": "单人沙发",
-      "SingleSofaR": "组合沙发",
+      "SingleSofaR": "单人沙发",
       "SlidingWindow": "推拉窗",
       "SquattingPan": "蹲便器",
       "Stool": "条凳",
@@ -376,13 +377,15 @@
     "th3": "绘图单位",
     "th4": "绘图人",
     "th5": "绘图时间",
+    "th5value": "yyyy年MM月dd日",
     "title": "”{crimeTimeBegin}”{caseLocation}{caseTypeName}现场平面示意图",
     "title1": "默认标题",
     "title2": "绘图说明"
   },
   "tabulation": {
     "name": "制表",
-    "name1": "图纸"
+    "name1": "图纸",
+    "showLabelLine": "显示尺寸线"
   },
   "tagging": {
     "name": "标注"