feat: loading改版

package.json

@@ -6,15 +6,15 @@
   "scripts": {
     "translate": "node ./scripts/fetch-langs.mjs",
     "dev:exe": "vite --mode=exedev",
-    "build:exe": "vite build --mode=exe",
-    "dev:fuse": "vite --mode=firedev",
-    "build:fusetest": "vite build --mode=firetest && vite build --mode=criminaltest && vite build --mode=cjzfiretest && vite build --mode=xmfiretest",
-    "build:fuse": "vite build --mode=fire && vite build --mode=criminal && vite build --mode=cjzfire && vite build --mode=xmfire",
+    "build:exe": "yarn translate & vite build --mode=exe",
+    "dev:fuse": "yarn translate & vite --mode=firedev",
+    "build:fusetest": "yarn translate & vite build --mode=firetest && vite build --mode=criminaltest && vite build --mode=cjzfiretest && vite build --mode=xmfiretest",
+    "build:fuse": "yarn translate & vite build --mode=fire && vite build --mode=criminal && vite build --mode=cjzfire && vite build --mode=xmfire",
     "dev:hx": "vite --mode=hxdev",
-    "build:dali": "vite build --mode=dalitest",
-    "build:hx": "vite build --mode=hx",
+    "build:dali": "yarn translate & vite build --mode=dalitest",
+    "build:hx": "yarn translate & vite build --mode=hx",
     "dev:jm": "vite --mode=jmdev",
-    "build:jm": "vite build --mode=jm",
+    "build:jm": "yarn translate & vite build --mode=jm",
     "ts-check": "vue-tsc -b"
   },
   "dependencies": {

src/core/components/icon/icon.ts

@@ -12,7 +12,7 @@ import { getSvgContent, parseSvgContent } from "@/utils/resource.ts";
 import { Color } from "three";
 import { ui18n } from "@/lang/index.ts";
 
-export const shapeName = ui18n.t('shape.icon.name');
+export const shapeName = ui18n.t("shape.icon.name");
 export const defaultStyle = {
   coverFill: "#000000",
   coverOpcatiy: 0,
@@ -21,7 +21,7 @@ export const defaultStyle = {
   width: 80,
   height: 80,
 };
-export const fixedStrokeOptions:number[] = [];
+export const fixedStrokeOptions: number[] = [];
 
 type ColorCounts = [string, number][];
 const colorsManage = (counts: ColorCounts, color: any) => {
@@ -54,15 +54,21 @@ export const getIconStyle = async (
   url: string,
   width = defaultStyle.width,
   height = defaultStyle.height,
-  fixed = false
+  fixed = false,
+  scale?: number ,
 ) => {
   const svgContent = parseSvgContent(await getSvgContent(url));
-  if (!fixed) {
-    if (width / height > svgContent.width / svgContent.height) {
-      width = (svgContent.width / svgContent.height) * height;
-    } else {
-      height = (svgContent.height / svgContent.width) * width;
+  if (!scale) {
+    if (!fixed) {
+      if (width / height > svgContent.width / svgContent.height) {
+        width = (svgContent.width / svgContent.height) * height;
+      } else {
+        height = (svgContent.height / svgContent.width) * width;
+      }
     }
+  } else {
+    width = svgContent.width * scale
+    height = svgContent.height * scale
   }
   const fillColorCounts: [string, number][] = [];
   const strokeColorCounts: [string, number][] = [];
@@ -154,10 +160,7 @@ export const interactiveToData: InteractiveTo<"icon"> = ({
   }
 };
 
-export const interactiveFixData: InteractiveFix<"icon"> = ({
-  data,
-  info,
-}) => {
+export const interactiveFixData: InteractiveFix<"icon"> = ({ data, info }) => {
   const mat = new Transform().translate(info.cur!.x, info.cur!.y);
   data.mat = mat.m;
   return data;

src/core/components/line/attach-server.ts

@@ -620,9 +620,11 @@ export const useLineDescribes = (
   watch(
     d,
     (d) => {
-      d.stroke.label = ui18n.t('sys.color');
-      d.stroke.props = {
-        colors: ['#000000', '#cccccc', null]
+      if (type === 'line') {
+        d.stroke.label = ui18n.t('sys.color');
+        d.stroke.props = {
+          colors: ['#000000', '#cccccc', null]
+        }
       }
       d.length = {
         type: "inputNum",

src/core/components/serial/serial.vue

@@ -95,7 +95,7 @@ const { shape, tData, data, operateMenus, describes } = useComponentStatus<
     // "opacity",
     // "dash",
     //  "zIndex"
-    "fontStyle",
+    // "fontStyle",
     // "ref", "zIndex"
   ],
 });

src/core/hook/use-dxf.ts

@@ -279,7 +279,7 @@ export const useGetDXF = () => {
                   points,
                   // stroke: '#000000',
                   // fill: line.stroke,
-                  stroke: line.stroke,
+                  stroke: type === 'line' ? '#000000' : line.stroke,
                   strokeWidth: 1,
                 };
                 writerPolyline(data);

src/core/hook/use-global-vars.ts

@@ -396,11 +396,11 @@ export const useTempStatus = installGlobalVar(() => {
   const dom = useRendererDOM();
   watch(temp, (_a, _b, onCleanup) => {
     if (temp.value && dom.value) {
-      const instance = ElLoading.service({
-        fullscreen: true,
-        target: dom.value,
-      });
-      onCleanup(() => instance.close());
+      // const instance = ElLoading.service({
+      //   fullscreen: true,
+      //   target: dom.value,
+      // });
+      // onCleanup(() => instance.close());
     }
   });
 

src/example/components/header/actions.ts

@@ -5,6 +5,7 @@ import saveAs from "@/utils/file-serve";
 import { ElMessage } from "element-plus";
 import { Mode } from "@/constant/mode";
 import { availableLocales, lang, langNameEum, ui18n } from "@/lang";
+import { loading } from "@/example/loadding";
 
 export type Action = {
   handler?: (draw: Draw) => void;
@@ -107,7 +108,7 @@ export const getHeaderActions = (draw: Draw) => {
       children: [
         {
           handler: async (filename = "canvas") => {
-            draw.enterTemp(async () => {
+            loading(async () => {
               const oldShowGrid = draw.config.showGrid;
               draw.config.showGrid = false;
               const pop = draw.mode.push(Mode.readonly);
@@ -126,7 +127,7 @@ export const getHeaderActions = (draw: Draw) => {
         },
         {
           handler: (filename = "canvas") => {
-            draw.enterTemp(async () => {
+            loading(async () => {
               const oldBack = draw.config.back && { ...draw.config.back };
               const oldShowGrid = draw.config.showGrid;
               const pop = draw.mode.push(Mode.readonly);
@@ -149,7 +150,7 @@ export const getHeaderActions = (draw: Draw) => {
         },
         {
           handler: async (filename = "canvas") => {
-            draw.enterTemp(async () => {
+            loading(async () => {
               const dxf = await draw.getDXF();
               saveAs(dxf, `${filename}.zip`);
             });

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

@@ -1,21 +1,12 @@
 <template>
   <div class="icon-layout">
-    <ElInput
-      v-model="keyword"
-      :placeholder="$t('icons.search')"
-      class="search"
-      style="height: 34px"
-    >
+    <ElInput v-model="keyword" :placeholder="$t('icons.search')" class="search" 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>
@@ -23,11 +14,8 @@
         <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>
@@ -60,7 +48,7 @@ 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);
+  const parset: any = await getIconStyle(url, undefined, undefined, undefined, item.type === 'realScale' ? 0.1 : undefined);
   parset.isIcon = true;
   props.draw.enterDrawShape(
     type,
@@ -102,7 +90,7 @@ const searchGroups = computed(() => {
     .filter((typeChildren) => typeChildren.children.length > 0);
 });
 watchEffect(() => {
-    activeGroups.value = searchGroups.value[0]?.name
+  activeGroups.value = searchGroups.value[0]?.name
 })
 
 props.cref &&
@@ -164,7 +152,7 @@ props.cref &&
   display: flex;
   flex-wrap: wrap;
 
-  > div {
+  >div {
     width: 25%;
     text-align: center;
     display: flex;

src/example/constant.ts

@@ -6,6 +6,7 @@ export type IconItem = {
   icon: string;
   name: string;
   color?: string;
+  type?: string
   parse?: {
     key?: string;
     fill?: string;
@@ -140,76 +141,77 @@ export const iconGroups: IconGroup[] = [
   },
   {
     name: getGT("jiaju"),
+    
     children: [
       {
         name: getGT("kecan"),
         children: [
-          { icon: "TV", name: getIT("TV") },
-          { icon: "HangingTV", name: getIT("HangingTV") },
-          { icon: "Cabinet", name: getIT("Cabinet") },
-          { icon: "CombinationSofa", name: getIT("CombinationSofa") },
-          { icon: "ThreeSofa", name: getIT("ThreeSofa") },
-          { icon: "SingleSofa", name: getIT("SingleSofa") },
-          { icon: "SingleSofaR", name: getIT("SingleSofaR") },
-          { icon: "CurvedSofa", name: getIT("CurvedSofa") },
-          { icon: "CornerSofa", name: getIT("CornerSofa") },
-          { icon: "TwoSofa", name: getIT("TwoSofa") },
-          { icon: "TeaTable", name: getIT("TeaTable") },
-          { icon: "Carpet", name: getIT("Carpet") },
-          { icon: "Plant", name: getIT("Plant") },
-          { icon: "TeaTableR", name: getIT("TeaTableR") },
-          { icon: "TeaTableO", name: getIT("TeaTableO") },
-          { icon: "SideTableR", name: getIT("SideTableR") },
-          { icon: "SideTableS", name: getIT("SideTableS") },
-          { icon: "DiningTableC", name: getIT("DiningTableC") }, 
-          { icon: "Chair", name: getIT("Chair") },
-          { icon: "DiningTableRC", name: getIT("DiningTableRC") },
-          { icon: "DiningTable", name: getIT("DiningTable") },
-          { icon: "DiningTableR", name: getIT("DiningTableR") },
-          { icon: "Stool", name: getIT("Stool") },
+          { 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") },
+          { type: 'realScale', icon: "ThreeSofa", name: getIT("ThreeSofa") },
+          { type: 'realScale', icon: "SingleSofa", name: getIT("SingleSofa") },
+          { type: 'realScale', icon: "SingleSofaR", name: getIT("SingleSofaR") },
+          { 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") }, 
+          { type: 'realScale', icon: "Chair", name: getIT("Chair") },
+          { type: 'realScale', icon: "DiningTableRC", name: getIT("DiningTableRC") },
+          { type: 'realScale', icon: "DiningTable", name: getIT("DiningTable") },
+          { type: 'realScale', icon: "DiningTableR", name: getIT("DiningTableR") },
+          { type: 'realScale', icon: "Stool", name: getIT("Stool") },
         ],
       },
       {
         name: getGT("woshi"),
         children: [
-          { icon: "DoubleBed", name: getIT("DoubleBed") },
-          { icon: "SingleBed", name: getIT("SingleBed") },
-          { icon: "Wardrobe", name: getIT("Wardrobe") },
-          { icon: "DoubleBedB", name: getIT("DoubleBedB") },
-          { icon: "Dresser", name: getIT("Dresser") },
-          { icon: "BedsideCupboard", name: getIT("BedsideCupboard") },
-          { icon: "Pillow", name: getIT("Pillow") },
+          { 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: "BedsideCupboard", name: getIT("BedsideCupboard") },
+          { type: 'realScale', icon: "Pillow", name: getIT("Pillow") },
         ],
       },
       {
         name: getGT("chuwei"),
         children: [
-          { icon: "GasStove", name: getIT("GasStove") },
-          { icon: "Cupboard", name: getIT("Cupboard") },
-          { icon: "Bathtub", name: getIT("Bathtub") },
-          { icon: "Closestool", name: getIT("Closestool") },
-          { icon: "Washstand", name: getIT("Washstand") },
-          { icon: "CupboardU", name: getIT("CupboardU") },
-          { icon: "WaterChannel", name: getIT("WaterChannel") },
-          { icon: "WaterChannelD", name: getIT("WaterChannelD") },
-          { icon: "FridgeS", name: getIT("FridgeS") },
-          { icon: "FridgeD", name: getIT("FridgeD") },
-          { icon: "CabinetB", name: getIT("CabinetB") },
-          { icon: "SquattingPan", name: getIT("SquattingPan") },
-          { icon: "Shower", name: getIT("Shower") },
+          { 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: "WaterChannel", name: getIT("WaterChannel") },
+          { type: 'realScale', icon: "WaterChannelD", name: getIT("WaterChannelD") },
+          { 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") },
+          { type: 'realScale', icon: "Shower", name: getIT("Shower") },
         ],
       },
       {
         name: getGT("qita"),
         children: [
-          { icon: "Desk", name: getIT("Desk") },
-          { icon: "BalconyChair", name: getIT("BalconyChair") },
-          { icon: "MopPool", name: getIT("MopPool") },
-          { icon: "WashingMachine", name: getIT("WashingMachine") },
-          { icon: "Elevator", name: getIT("Elevator") },
-          { icon: "WaterFountain", name: getIT("WaterFountain") },
-          { icon: "AirConditioner", name: getIT("AirConditioner") },
-          { icon: "Tablelamp", name: getIT("Tablelamp") },
+          { type: 'realScale', icon: "Desk", name: getIT("Desk") },
+          { type: 'realScale', icon: "BalconyChair", name: getIT("BalconyChair") },
+          { type: 'realScale', icon: "MopPool", name: getIT("MopPool") },
+          { type: 'realScale', icon: "WashingMachine", name: getIT("WashingMachine") },
+          { type: 'realScale', icon: "Elevator", name: getIT("Elevator") },
+          { type: 'realScale', icon: "WaterFountain", name: getIT("WaterFountain") },
+          { type: 'realScale', icon: "AirConditioner", name: getIT("AirConditioner") },
+          { type: 'realScale', icon: "Tablelamp", name: getIT("Tablelamp") },
         ],
       },
     ],
@@ -236,6 +238,7 @@ export const getIconItem = (icon: string) => {
   }
 };
 
+
 export const aiIconMap = {
   SingleDoor: "men_l",
   DoubleDoor: "shuangkaimen",

src/example/fuse/global.scss

@@ -66,4 +66,8 @@ body {
 	.el-tabs__item {
 		padding: 0 16px;
 	}
+}
+.el-loading-spinner {
+  backface-visibility: hidden;
+  transform: translateZ(0);
 }

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

@@ -35,6 +35,7 @@ import { asyncTimeout, mergeFuns, repeatedlyOnly } from "@/utils/shared.ts";
 import saveAs from "@/utils/file-serve.ts";
 import { setViewToTableCover } from "./actions.ts";
 import { ui18n } from "@/lang/index.ts";
+import { loading } from "@/example/loadding.ts";
 
 const props = defineProps<{ title: string }>();
 const draw = useDraw();
@@ -46,7 +47,7 @@ const emit = defineEmits<{
 const goTab = async (tab: TabsPaneContext) => {
   if (tab.props.name === "tabulation") {
     await saveHandler();
-    gotoTabulation();
+    loading(gotoTabulation());
   }
 };
 
@@ -77,7 +78,7 @@ const actions = [
         async handler() {
           const format = item.text.toLowerCase();
           if (format !== "dxf") {
-            const blob = await draw.enterTemp(async () => {
+            const blob: Blob | null = await loading(async () => {
               const [_, recover] = await setViewToTableCover(draw);
               if (format === "jpg") {
                 draw.config.back = {
@@ -173,7 +174,7 @@ const setViewToKanKanCover = async () => {
 
 const saveHandler = repeatedlyOnly(async () => {
   const storeData = draw.getData();
-  const [listBlob, kkBlob] = await draw.enterTemp(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;

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

@@ -42,6 +42,8 @@ import { router, routes } from "../../router.ts";
 import { initViewport, paperConfigs } from "@/example/components/slide/actions.ts";
 import { asyncTimeout } from "@/utils/shared.ts";
 import { ui18n } from "@/lang/index.ts";
+import { loading } from "@/example/loadding.ts";
+import { IRect } from "konva/lib/types";
 
 const props = defineProps<{ title: string }>();
 const emit = defineEmits<{ (e: "screenshot", val: boolean): void }>();
@@ -57,14 +59,14 @@ const goOverview = async () => {
 
 const goTab = (tab: TabsPaneContext) => {
   if (tab.props.name === "overview") {
-    goOverview();
+    loading(goOverview());
   }
 };
 
 const draw = useDraw();
-const getCoverImage = (format: string) => {
+const getCoverImage = (format: string): Promise<[IRect, Blob]> => {
   emit("screenshot", true);
-  return draw.enterTemp(async () => {
+  return loading(async () => {
     const pop = draw.mode.push(Mode.readonly);
     const oldMat = draw.viewer.viewMat;
     draw.viewer.setViewMat([1, 0, 0, 1, 0, 0]);

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

@@ -1,11 +1,6 @@
 <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>
 
@@ -203,9 +198,11 @@ const updateOrigin = async () => {
         item.strokeWidth *= viewScale.value! / 10;
       }
     };
-    d.store.items.forEach(setStyle);
-    const lineItems = d.store.getTypeItems("line")[0];
-    lineItems?.lines.forEach(setStyle);
+    if (d?.store) {
+      d.store.items.forEach(setStyle);
+      const lineItems = d.store.getTypeItems("line")[0];
+      lineItems?.lines.forEach(setStyle);
+    }
   }
 
   const size = canvasSize.value as Size;

src/example/loadding.ts

@@ -23,7 +23,12 @@ watchEffect(() => {
   }
   if (loadingStack.value.length && !instance) {
     console.log('gen')
-    instance = ElLoading.service(loadingStack.value[0]);
+    instance = ElLoading.service({
+      ...loadingStack.value[0],
+      lock: false, // 关键：防止滚动条消失导致的页面跳动
+      fullscreen: true, // 确保是全屏遮罩
+      background: 'rgba(255, 255, 255, 1)'
+    });
   }
 });
 
@@ -53,15 +58,12 @@ export const loading = <T, K extends PFN<T>>(
   ret
     .catch((e) => {
       error(e);
-
       throw e;
     })
     .finally(() => {
-      setTimeout(() => {
-        const ndx = tokens.indexOf(token);
-        loadingStack.value.splice(ndx, 1);
-        tokens.splice(ndx, 1);
-      }, 50);
+      const ndx = tokens.indexOf(token);
+      loadingStack.value.splice(ndx, 1);
+      tokens.splice(ndx, 1);
     });
   return ret;
 };