Merge branch 'master' of http://192.168.0.115:3000/bill/traffic-laser

src/components/edit-fix-point/index.vue

@@ -19,8 +19,8 @@
         :key="option"
         :class="{ active: option === text }"
         @click="$emit('update:text', option)"
-        v-show="option.includes(text)"
       >
+        <!-- v-show="option.includes(text)" -->
         {{ option }}
       </p>
     </div>

src/graphic/Constant.js

@@ -34,8 +34,8 @@ const Constant = {
   maxRoadSideWidth: 800,
   oneWay: "oneWay", //one表示单向，two表示双向
   twoWay: "twoWay", //one表示单向，two表示双向
-  defaultSingleLaneWidth: 35, //单个车道的宽度
-  defaultMidDivideWidth: 2, //隔离带的宽度
+  defaultSingleLaneWidth: 3.5, //单个车道的宽度
+  defaultMidDivideWidth: 0.2, //隔离带的宽度
   angleLocationMode: "AngleLocationMode", //直角定位
   allLocationMode: "AllLocationMode", //综合定位
   normalLocationMode: "NormalLocationMode", //垂线定位

src/graphic/Controls/AddRoad.js

@@ -41,9 +41,17 @@ export default class AddRoad {
 
   buildRoad() {
     console.log("添加路！");
-    if (mathUtil.equalPoint(this.startInfo.position, this.endInfo.position)) {
+    let flag = this.needDelete();
+    if (flag) {
+      return null;
+    } else if (
+      this.startInfo.linkedRoadId &&
+      this.endInfo.linkedRoadId &&
+      this.startInfo.linkedRoadId == this.endInfo.linkedRoadId
+    ) {
       return null;
     }
+
     let joinInfos = this.getJoinsForRoads();
     let splitPointIds = this.splitAllJoins(joinInfos);
     this.creatNewRoads(splitPointIds);
@@ -319,6 +327,52 @@ export default class AddRoad {
     return false;
   }
 
+  needDelete() {
+    if (mathUtil.equalPoint(this.startInfo.position, this.endInfo.position)) {
+      return true;
+    } else if (this.startInfo.linkedRoadId && this.endInfo.linkedRoadId) {
+      return true;
+    } else if (this.startInfo.linkedRoadPointId && this.endInfo.linkedRoadId) {
+      let linkedRoad = dataService.getRoad(this.endInfo.linkedRoadId);
+      if (
+        linkedRoad.startId == this.startInfo.linkedRoadPointId ||
+        linkedRoad.endId == this.startInfo.linkedRoadPointId
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    } else if (this.startInfo.linkedRoadId && this.endInfo.linkedRoadPointId) {
+      let linkedRoad = dataService.getRoad(this.startInfo.linkedRoadId);
+      if (
+        linkedRoad.startId == this.endInfo.linkedRoadPointId ||
+        linkedRoad.endId == this.endInfo.linkedRoadPointId
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    } else if (
+      this.startInfo.linkedRoadPointId &&
+      this.endInfo.linkedRoadPointId
+    ) {
+      let startRoadPoint = dataService.getRoadPoint(
+        this.startInfo.linkedRoadPointId
+      );
+      let startParent = startRoadPoint.getParent();
+      let endRoadPoint = dataService.getRoadPoint(
+        this.endInfo.linkedRoadPointId
+      );
+      let endParent = endRoadPoint.getParent();
+      for (let key in startParent) {
+        if (endParent.hasOwnProperty(key)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
   /******************************************************************************************************************************************************************************/
   buildCurveRoad() {
     console.log("添加曲线路段！");

src/graphic/Controls/MovePoint.js

@@ -58,11 +58,11 @@ export default class MovePoint {
       );
       const category = linkedPoint.getCategory();
       if (
+        category != VectorCategory.Point.FixPoint &&
         category != VectorCategory.Point.BasePoint &&
         category != VectorCategory.Point.TestBasePoint
       ) {
         pointService.mergePoint(pointId, listenLayer.modifyPoint.linkedPointId);
-        uiService.setSelectBasePointId(null);
       } else {
         let point = dataService.getPoint(pointId);
         const parent = point.getParent();

src/graphic/Controls/MoveRoad.js

@@ -6,6 +6,8 @@ import { curveRoadService } from "../Service/CurveRoadService";
 import { coordinate } from "../Coordinate";
 import { edgeService } from "../Service/EdgeService";
 import { crossPointService } from "../Service/CrossPointService";
+import { roadPointService } from "../Service/RoadPointService";
+import { listenLayer } from "../ListenLayer";
 
 export default class MoveRoad {
   constructor() {
@@ -134,6 +136,49 @@ export default class MoveRoad {
     return true;
   }
 
+  finishByMoveRoadPoint(point) {
+    if (
+      listenLayer.modifyPoint &&
+      listenLayer.modifyPoint.hasOwnProperty("linkedRoadPointId")
+    ) {
+      this.moveTo(point.vectorId, listenLayer.modifyPoint.linkedRoadPointId);
+    } else if (
+      listenLayer.modifyPoint &&
+      (listenLayer.modifyPoint.linkedRoadPointIdX ||
+        listenLayer.modifyPoint.linkedRoadPointIdY)
+    ) {
+      mathUtil.clonePoint(point, listenLayer.modifyPoint);
+    } else if (
+      listenLayer.modifyPoint &&
+      listenLayer.modifyPoint.hasOwnProperty("linkedRoadId")
+    ) {
+      // let splitRoadPoint = roadPointService.create({
+      //   x: listenLayer.modifyPoint.x,
+      //   y: listenLayer.modifyPoint.y,
+      // });
+      // roadService.splitRoad(
+      //   listenLayer.modifyPoint.linkedRoadId,
+      //   splitRoadPoint.vectorId,
+      //   "start"
+      // );
+      roadService.splitRoad(
+        listenLayer.modifyPoint.linkedRoadId,
+        point.vectorId,
+        "start"
+      );
+      //this.moveTo(point.vectorId, point.vectorId);
+      edgeService.updateEdgeForMovePoint(point.vectorId);
+    } else if (this.splitRoadId != null) {
+      roadService.splitRoad(this.splitRoadId, point.vectorId, "start");
+    }
+    //draggingItem.vectorId所在的墙面与其他墙角相交
+    this.updateForAbsorbRoadPoints();
+    let parent = point.getParent();
+    for (let key in parent) {
+      roadService.setLanes(key);
+    }
+  }
+
   //拖拽墙角/墙面，被其他墙角吸附
   updateForAbsorbRoadPoints() {
     if (Object.keys(this.adsorbPointRoads).length == 0) {

src/graphic/Controls/UIControl.js

@@ -484,16 +484,24 @@ export default class UIControl {
     let item;
     switch (geoType) {
       case VectorType.Line:
-        lineService.copy(vectorId);
+        const lineId = lineService.copy(vectorId);
+        item = stateService.getFocusItem();
+        item.vectorId = lineId;
         break;
       case VectorType.CurveLine:
-        lineService.copyCurveLine(vectorId);
+        const curveLineId = lineService.copyCurveLine(vectorId);
+        item = stateService.getFocusItem();
+        item.vectorId = curveLineId;
         break;
       case VectorType.Circle:
-        circleService.copy(vectorId);
+        const circleId = circleService.copy(vectorId);
+        item = stateService.getFocusItem();
+        item.vectorId = circleId;
         break;
       case VectorType.Text:
-        textService.copy(vectorId);
+        const textId = textService.copy(vectorId);
+        item = stateService.getFocusItem();
+        item.vectorId = textId;
         break;
       case VectorType.Road:
         const roadId = roadService.copyRoad(vectorId);
@@ -506,10 +514,16 @@ export default class UIControl {
         item.vectorId = curveRoadId;
         break;
       case VectorType.Magnifier:
-        await magnifierService.copy(vectorId);
+        const magnifierId = await magnifierService.copy(vectorId);
+        item = stateService.getFocusItem();
+        if (magnifierId) {
+          item.vectorId = magnifierId;
+        }
         break;
       case VectorType.SVG:
-        svgService.copy(vectorId);
+        const svgId = svgService.copy(vectorId);
+        item = stateService.getFocusItem();
+        item.vectorId = svgId;
         break;
     }
     stateService.clearEventName();
@@ -674,33 +688,27 @@ export default class UIControl {
   // 设置默认设置
   setDefaultSetting(setting) {
     console.log("获得设置", setting);
-
     uiService.setRoadMidDivideWidth(
-      // (setting.roadQuarantineWidth / coordinate.res) * coordinate.ratio
       setting.roadQuarantineWidth / coordinate.res
     );
     uiService.setCurveRoadMidDivideWidth(
-      // (setting.roadQuarantineWidth / coordinate.res) * coordinate.ratio
       setting.roadQuarantineWidth / coordinate.res
     );
-    uiService.setSingleLaneWidth(
-      // (setting.singleRoadWidth / coordinate.res) * coordinate.ratio
-      setting.singleRoadWidth / coordinate.res
-    );
-    // uiService.setLineWidth(setting.lineWidth / 1000 / coordinate.res);
+    Constant.defaultMidDivideWidth = setting.roadQuarantineWidth;
+    uiService.setSingleLaneWidth(setting.singleRoadWidth / coordinate.res);
+    Constant.defaultSingleLaneWidth = setting.singleRoadWidth;
     uiService.setLineWidth(setting.lineWidth);
     this.layer.renderer.autoRedraw();
   }
 
   // 获取默认设置
   getDefaultSetting() {
-    const singleLaneWidth = uiService.getSingleLaneWidth();
-    const roadMidDivideWidth = uiService.getRoadMidDivideWidth();
+    const singleLaneWidth = Constant.defaultSingleLaneWidth;
+    const roadMidDivideWidth = Constant.defaultMidDivideWidth;
     const lineWidth = uiService.getLineWidth();
     return {
-      singleRoadWidth: singleLaneWidth * coordinate.res,
-      roadQuarantineWidth: roadMidDivideWidth * coordinate.res,
-      // lineWidth: lineWidth * coordinate.res * 1000,
+      singleRoadWidth: singleLaneWidth,
+      roadQuarantineWidth: roadMidDivideWidth,
       lineWidth: lineWidth,
     };
   }

src/graphic/Layer.js

@@ -976,6 +976,8 @@ export default class Layer {
           let vectorText = dataService.getText(draggingItem.vectorId);
           if (!vectorText.linkedPointId) {
             moveText.moveFullText(position, draggingItem.vectorId);
+          } else {
+            movePoint.movePoint(position, vectorText.linkedPointId);
           }
         }
         break;
@@ -1068,7 +1070,6 @@ export default class Layer {
         stateService.clearFocusItem();
         this.uiControl.clearFocusVector();
         this.uiControl.clearCurrentUI();
-        uiService.setSelectBasePointId(null);
         break;
       case LayerEvents.MoveRoadPoint:
         if (!draggingItem || !draggingItem.vectorId) {
@@ -1083,47 +1084,7 @@ export default class Layer {
             exceptRoadIds: point.parent,
           });
 
-          if (
-            listenLayer.modifyPoint &&
-            listenLayer.modifyPoint.hasOwnProperty("linkedRoadPointId")
-          ) {
-            moveRoad.moveTo(
-              draggingItem.vectorId,
-              listenLayer.modifyPoint.linkedRoadPointId
-            );
-          } else if (
-            listenLayer.modifyPoint &&
-            (listenLayer.modifyPoint.linkedRoadPointIdX ||
-              listenLayer.modifyPoint.linkedRoadPointIdY)
-          ) {
-            mathUtil.clonePoint(point, listenLayer.modifyPoint);
-          } else if (
-            listenLayer.modifyPoint &&
-            listenLayer.modifyPoint.hasOwnProperty("linkedRoadId")
-          ) {
-            point = roadPointService.create({
-              x: listenLayer.modifyPoint.x,
-              y: listenLayer.modifyPoint.y,
-            });
-            roadService.splitRoad(
-              listenLayer.modifyPoint.linkedRoadId,
-              point.vectorId,
-              "start"
-            );
-            moveRoad.moveTo(draggingItem.vectorId, point.vectorId);
-          } else if (moveRoad.splitRoadId != null) {
-            roadService.splitRoad(
-              moveRoad.splitRoadId,
-              draggingItem.vectorId,
-              "start"
-            );
-          }
-          //draggingItem.vectorId所在的墙面与其他墙角相交
-          moveRoad.updateForAbsorbRoadPoints();
-          let parent = point.getParent();
-          for (let key in parent) {
-            roadService.setLanes(key);
-          }
+          moveRoad.finishByMoveRoadPoint(point);
           this.history.save();
         }
         break;

src/graphic/Load.js

@@ -390,14 +390,6 @@ export default class Load {
           }
         } catch (e) {}
         if (data3d.meterPerPixel) {
-          uiService.setSingleLaneWidth(
-            (Constant.defaultSingleLaneWidth * coordinate.res) /
-              data3d.meterPerPixel
-          );
-          uiService.setRoadMidDivideWidth(
-            (Constant.defaultMidDivideWidth * coordinate.res) /
-              data3d.meterPerPixel
-          );
           coordinate.setRes(data3d.meterPerPixel);
         }
         const width = bgImg.imageData.width;
@@ -467,11 +459,20 @@ export default class Load {
         }
       }
     }
+    uiService.setRoadMidDivideWidth(
+      Constant.defaultMidDivideWidth / coordinate.res
+    );
+    uiService.setCurveRoadMidDivideWidth(
+      Constant.defaultMidDivideWidth / coordinate.res
+    );
+    uiService.setSingleLaneWidth(
+      Constant.defaultSingleLaneWidth / coordinate.res
+    );
+
     if (Settings.baseLineId) {
       this.layer.updateForLocation();
     }
     this.layer.history.init();
-
     this.layer.renderer.autoRedraw();
   }
 
@@ -483,6 +484,7 @@ export default class Load {
   }
 
   save() {
+    this.layer.exit();
     const res = coordinate.getRes();
     dataService.setRes(res);
 

src/graphic/Renderer/Draw.js

@@ -24,6 +24,7 @@ export const help = {
       [stateService.getDraggingItem(), "Dragging"],
       [stateService.getFocusItem(), "Focus"],
     ];
+    console.log(itemsEntry);
     let currentAttr;
 
     //console.log(itemsEntry)
@@ -1162,6 +1163,14 @@ export default class Draw {
   drawText(vector) {
     this.context.save();
     const [_, foo] = help.setVectorStyle(this.context, vector);
+
+    let select = false;
+    const geo = stateService.getFocusItem();
+    if (geo) {
+      const realVector = dataService.getGeo(geo.type, geo.vectorId);
+      select = realVector && realVector.linkedTextId === vector.vectorId;
+    }
+
     this.context.fillStyle = vector.color;
     this.context.textBaseline = "bottom";
     this.context.font = `${
@@ -1173,7 +1182,7 @@ export default class Draw {
 
     this.context.fillText(vector.value, bound[3].x, bound[3].y);
 
-    if (foo) {
+    if (select || foo) {
       this.context.beginPath();
       const padding = 2 * coordinate.ratio;
       this.context.moveTo(bound[0].x - padding, bound[0].y - padding);

src/graphic/Renderer/Render.js

@@ -5,6 +5,8 @@ import { coordinate } from "../Coordinate.js";
 import { draw } from "./Draw.js";
 import { listenLayer } from "../ListenLayer.js";
 import Settings from "../Settings.js";
+import VectorStyle from "../enum/VectorStyle.js";
+import VectorCategory from "../enum/VectorCategory.js";
 
 export default class Render {
   constructor(layer) {
@@ -153,8 +155,14 @@ export default class Render {
     }
 
     const lines = dataService.getLines();
-    for (const key in lines) {
-      this.drawGeometry(lines[key]);
+    const sortLine = Object.keys(lines)
+      .map((key) => dataService.getLine(key))
+      .sort((line) =>
+        line.getCategory() == VectorCategory.Line.GuideLocationLine ? -1 : 1
+      );
+
+    for (const line of sortLine) {
+      this.drawGeometry(line);
     }
 
     const curveLines = dataService.getCurveLines();

src/graphic/Service/CircleService.js

@@ -24,7 +24,7 @@ export default class CircleService {
     let radius = circle.radius;
     let newCircle = this.create(center, radius);
     newCircle.setColor(circle.color);
-    return newCircle;
+    return newCircle.vectorId;
   }
 
   updateRadiusXYForPoint(vectorId, pointIndex) {

src/graphic/Service/LineService.js

@@ -77,7 +77,7 @@ export default class LineService {
     if (line.style) {
       newLine.setStyle(line.style);
     }
-    return newLine;
+    return newLine.vectorId;
   }
 
   getLine(pointId1, pointId2) {
@@ -216,7 +216,7 @@ export default class LineService {
       curveLine.points[curveLine.points.length - 1].getIndex()
     );
     newCurveLine.curves = mathUtil.getCurvesByPoints(newCurveLine.points);
-    return newCurveLine;
+    return newCurveLine.vectorId;
   }
 
   deleteCrossPointForCurveLine(curvePointId, curveLineId) {

src/graphic/Service/MagnifierService.js

@@ -22,9 +22,10 @@ export default class MagnifierService {
       if (newMagnifier.photoUrl) {
         await newMagnifier.setImageData();
       }
-      return newMagnifier;
+      return newMagnifier.vectorId;
     } catch (e) {
       dataService.deleteMagnifier(newMagnifier.vectorId);
+      return null;
     }
   }
 }

src/graphic/Service/PointService.js

@@ -66,7 +66,7 @@ export default class PointService {
     if (point) {
       const category = point.getCategory();
       if (category == VectorCategory.Point.NormalPoint) {
-        dataService.deletePoint(pointId); //暂时简单粗暴
+        this.deleteNormalPoint(pointId); //暂时简单粗暴
       } else if (category == VectorCategory.Point.BasePoint) {
         this.deleteBasePoint(pointId);
       } else if (category == VectorCategory.Point.TestBasePoint) {
@@ -76,6 +76,7 @@ export default class PointService {
       }
     }
   }
+
   updateBasePointIds() {
     let points = dataService.vectorData.points;
     Settings.basePointIds = [];
@@ -86,6 +87,14 @@ export default class PointService {
     }
   }
 
+  deleteNormalPoint(normalPointId) {
+    let normalPoint = dataService.getPoint(normalPointId);
+    let parent = normalPoint.getParent();
+    for (let key in parent) {
+      dataService.deleteLine(key);
+    }
+  }
+
   deleteBasePoint(basePointId) {
     let lines = dataService.getLines();
     for (let key in lines) {

src/graphic/Service/RoadService.js

@@ -134,12 +134,14 @@ export default class RoadService {
     let oldLeftEdge = dataService.getRoadEdge(road.leftEdgeId);
     leftEdge.start = uiService.getNewPositionForPop(oldLeftEdge.start);
     leftEdge.end = uiService.getNewPositionForPop(oldLeftEdge.end);
+    leftEdge.setParent(newRoad.vectorId);
     leftEdge.setStyle(oldLeftEdge.getStyle());
     leftEdge.setWeight(oldLeftEdge.getWeight());
 
     let oldRightEdge = dataService.getRoadEdge(road.rightEdgeId);
     rightEdge.start = uiService.getNewPositionForPop(oldRightEdge.start);
     rightEdge.end = uiService.getNewPositionForPop(oldRightEdge.end);
+    rightEdge.setParent(newRoad.vectorId);
     rightEdge.setStyle(oldRightEdge.getStyle());
     rightEdge.setWeight(oldRightEdge.getWeight());
 
@@ -914,7 +916,6 @@ export default class RoadService {
       this.subtraRoadFromIntersect(road.endId, roadId);
     }
   }
-
   /****************************************************************************************************************************************************************/
 
   // updateDrivewayCount(roadId, dir, type) {

src/graphic/Service/SVGService.js

@@ -23,7 +23,7 @@ export default class SVGService {
       newSVG.points[i].x = newSVG.center.x + dx;
       newSVG.points[i].y = newSVG.center.y + dy;
     }
-    return newSVG;
+    return newSVG.vectorId;
   }
 }
 

src/graphic/Service/TextService.js

@@ -20,7 +20,7 @@ export default class TextService {
     newText.setColor(text.color);
     newText.setValue(text.value);
     newText.setFontSize(text.fontSize);
-    return newText;
+    return newText.vectorId;
   }
 }
 

src/graphic/Service/UIService.js

@@ -237,14 +237,17 @@ export default class UIService {
     return Settings.selectRoadStructure;
   }
 
+  //Constant.defaultMidDivideWidth是真实宽度，现在赋值的时候要转换成像素
   setRoadMidDivideWidth(value) {
     Settings.roadMidDivideWidth = value;
   }
 
+  //Constant.defaultMidDivideWidth是真实宽度，现在赋值的时候要转换成像素
   setCurveRoadMidDivideWidth(value) {
     Settings.curveRoadMidDivideWidth = value;
   }
 
+  //Constant.defaultSingleLaneWidth是真实宽度，现在赋值的时候要转换成像素
   setSingleLaneWidth(value) {
     Settings.singleLaneWidth = value;
   }

src/main.ts

@@ -1,4 +1,4 @@
-import VConsole from 'vconsole';
+import VConsole from "vconsole";
 if (import.meta.env.MODE === "test") {
   if (!os.isPc) {
     new VConsole();
@@ -14,7 +14,7 @@ import { setupI18n } from "@/lang";
 import { router, setupRouter } from "@/router";
 import appConfig from "./appConfig";
 import { currentApp, setCurrentApp } from "@/store/app";
-import { os } from '@/utils'
+import { os } from "@/utils";
 import App from "./main.vue";
 
 const app = createApp(App);

src/store/sync.ts

@@ -1,211 +1,221 @@
 import axios from "@/dbo/main";
-import {list} from "@/store/measure";
-import {baseLines} from "@/store/baseLine";
-import {basePoints} from "@/store/basePoint";
-import {fixPoints} from "@/store/fixPoint";
-import {photos} from "@/store/photos";
-import {accidentPhotos} from "@/store/accidentPhotos";
-import {roadPhotos} from "@/store/roadPhotos";
-import {base64ToBlob, blobToBase64, debounce, getId} from "@/utils";
-import {watch} from "vue";
-import {params} from "@/hook";
-import router, {writeRouteName} from "@/router";
-import {baseURL} from "@/dbo/main";
-import {defaultUses, uses} from '@/store/SVGLabel'
-import {imageRotate} from "@/utils/image-rotate";
+import { list } from "@/store/measure";
+import { baseLines } from "@/store/baseLine";
+import { basePoints } from "@/store/basePoint";
+import { fixPoints } from "@/store/fixPoint";
+import { photos } from "@/store/photos";
+import { accidentPhotos } from "@/store/accidentPhotos";
+import { roadPhotos } from "@/store/roadPhotos";
+import { base64ToBlob, blobToBase64, debounce, getId } from "@/utils";
+import { watch } from "vue";
+import { params } from "@/hook";
+import router, { writeRouteName } from "@/router";
+import { baseURL } from "@/dbo/main";
+import { defaultUses, uses } from "@/store/SVGLabel";
+import { imageRotate } from "@/utils/image-rotate";
 
 const global = window as any;
 
 const normalImage = async (url: string) => {
-  const getUrl = await api.getFile(url)
-  const blob = await imageRotate(getUrl)
+  const getUrl = await api.getFile(url);
+  const blob = await imageRotate(getUrl);
   if (!blob) {
-    return url
+    return url;
   } else {
-    return await api.uploadImage(new File([blob], getId()))
+    return await api.uploadImage(new File([blob], getId()));
   }
-}
+};
 
 let count = 0;
-export const api =
-  !global.android
-  // true
-    ? // const api = import.meta.env.DEV
-      {
-        async setStore(data) {
-          return axios.post("sceneStore", data);
-        },
-        async getStore() {
-          return (await axios.get("/attach/sceneStore")).data;
-        },
-        async uploadImage(file) {
-          return (
-            await axios({
-              url: "/upload",
-              headers: { "Content-Type": "multipart/form-data" },
-              method: "post",
-              data: { file },
-            })
-          ).data.data as string;
-        },
-        async downloadImage(file) {
-          window.open(URL.createObjectURL(file));
-          return true;
-        },
-        async getFile(url) {
-          if (url.includes(baseURL)) {
-            url = url.substring(baseURL.length);
-          }
-          url = url.trim();
-          const paths = url.split("/")
-          const notBase64BaseTypes = [
-            ".png", ".jpg"
-          ]
-          const notBase64 = notBase64BaseTypes.some(type => paths[paths.length - 1].includes(type))
-          if (notBase64) {
-            // await new Promise(resolve => setTimeout(resolve, 2000))
-            return baseURL + url
-          } else {
-            const data = await axios.get(url, { responseType: "blob" });
-            const base64 = await blobToBase64(data.data);
-            return URL.createObjectURL(base64ToBlob(base64))
-          }
-        },
-        async photograph() {
-          const file = await new Promise<File>(resolve => {
-            const input = document.createElement('input');
-            input.type = 'file';
-            input.click();
-            input.addEventListener("change", ev => {
-              resolve(input.files[0])
-            })
+export const api = !global.android
+  ? // true
+    // const api = import.meta.env.DEV
+    {
+      async setStore(data) {
+        return axios.post("sceneStore", data);
+      },
+      async getStore() {
+        return (await axios.get("/attach/sceneStore")).data;
+      },
+      async uploadImage(file) {
+        return (
+          await axios({
+            url: "/upload",
+            headers: { "Content-Type": "multipart/form-data" },
+            method: "post",
+            data: { file },
           })
-
-          const url = await this.uploadImage(file)
-          return await normalImage(url);
-        },
-        async selectPhotoAlbum() {
-          return await this.photograph()
-        },
-        async closePage() {
-          return router.push({ name: writeRouteName.scene });
-        },
-      }
-    : {
-        setStore(data) {
-          return new Promise((resolve) => {
-            console.log("调用setSceneStore参数", JSON.stringify(data));
-            global.setSceneStoreCallback = (data) => {
-              console.log("setSceneStoreCallback返回", data);
-              resolve(data);
-            };
-            global.android.setSceneStore(
-              params.m + "/store.json",
-              JSON.stringify(data),
-              "setSceneStoreCallback"
-            );
+        ).data.data as string;
+      },
+      async downloadImage(file) {
+        window.open(URL.createObjectURL(file));
+        return true;
+      },
+      async getFile(url) {
+        if (url.includes(baseURL)) {
+          url = url.substring(baseURL.length);
+        }
+        url = url.trim();
+        const paths = url.split("/");
+        const notBase64BaseTypes = [".png", ".jpg"];
+        const notBase64 = notBase64BaseTypes.some((type) =>
+          paths[paths.length - 1].includes(type)
+        );
+        if (notBase64) {
+          // await new Promise(resolve => setTimeout(resolve, 2000))
+          return baseURL + url;
+        } else {
+          const data = await axios.get(url, { responseType: "blob" });
+          const base64 = await blobToBase64(data.data);
+          return URL.createObjectURL(base64ToBlob(base64));
+        }
+      },
+      async photograph() {
+        const file = await new Promise<File>((resolve) => {
+          const input = document.createElement("input");
+          input.type = "file";
+          input.click();
+          input.addEventListener("change", (ev) => {
+            resolve(input.files[0]);
           });
-        },
-        getStore() {
-          return new Promise((resolve) => {
-            console.log("调用getSceneStore");
-            global.getSceneStoreCallback = (data) => {
-              console.log("getSceneStoreCallback返回", data);
-              resolve(data);
-            };
-            global.android.getSceneStore(params.m + "/store.json", "getSceneStoreCallback");
-          });
-        },
+        });
 
-        async getFile(fileUrl: string) {
-          fileUrl = fileUrl.trim();
-          if (fileUrl.includes(params.m)) {
-            fileUrl = fileUrl.substring(fileUrl.indexOf(params.m) + params.m.length)
-          }
-          fileUrl = new URL(fileUrl, "http://www.a.com").pathname
-          fileUrl = (params.realPath || params.m) + fileUrl
+        const url = await this.uploadImage(file);
+        return await normalImage(url);
+      },
+      async selectPhotoAlbum() {
+        return await this.photograph();
+      },
+      async closePage() {
+        return router.push({ name: writeRouteName.scene });
+      },
+    }
+  : {
+      setStore(data) {
+        return new Promise((resolve) => {
+          console.log("调用setSceneStore参数", JSON.stringify(data));
+          global.setSceneStoreCallback = (data) => {
+            console.log("setSceneStoreCallback返回", data);
+            resolve(data);
+          };
+          global.android.setSceneStore(
+            params.m + "/store.json",
+            JSON.stringify(data),
+            "setSceneStoreCallback"
+          );
+        });
+      },
+      getStore() {
+        return new Promise((resolve) => {
+          console.log("调用getSceneStore");
+          global.getSceneStoreCallback = (data) => {
+            console.log("getSceneStoreCallback返回", data);
+            resolve(data);
+          };
+          global.android.getSceneStore(
+            params.m + "/store.json",
+            "getSceneStoreCallback"
+          );
+        });
+      },
 
-          const paths = fileUrl.split("/")
-          const notBase64BaseTypes = [
-            // ".png", ".jpg"
-            // , ".bin"
-          ]
-          const notBase64 = notBase64BaseTypes.some(type => paths[paths.length - 1].includes(type))
+      async getFile(fileUrl: string) {
+        fileUrl = fileUrl.trim();
+        if (fileUrl.includes(params.m)) {
+          fileUrl = fileUrl.substring(
+            fileUrl.indexOf(params.m) + params.m.length
+          );
+        }
+        fileUrl = new URL(fileUrl, "http://www.a.com").pathname;
+        fileUrl = (params.realPath || params.m) + fileUrl;
 
-          if (!notBase64) {
-            return await new Promise<string>((resolve) => {
-              const apiName = `getImageCallback${count++}`
-              global[apiName] = (base64) => {
-                // console.error("请求url:" + fileUrl, "返回:" + base64.substring(0, 60))
-                resolve(URL.createObjectURL(base64ToBlob(base64)));
-                delete global[apiName]
-              };
-              global.android.getImage(fileUrl, apiName);
-            });
-          } else {
-            console.log("图片文件直接文件系统读取", fileUrl)
-            return fileUrl
-          }
-        },
-        uploadImage(file: File) {
-          return new Promise<string>(async (resolve) => {
-            const apiName = `uploadImageCallback${count++}`
-            global[apiName] = (data) => {
-              console.log("上传图片成功，返回路径为：", data)
-              resolve(data);
-              delete global[apiName]
-            }
-            const data = await blobToBase64(file);
-            // console.log("上传图片", params.m + "/" + file.name, "参数：", data);
-            global.android.uploadImage(params.m + "/attach/upload/" + file.name, data, apiName);
-          });
-        },
-        downloadImage(file: File) {
-          return new Promise<boolean>(async (resolve) => {
-            const apiName = `downloadImageCallback${count++}`
-            global[apiName] = () => {
-              console.log("已成功下载")
-              resolve(true);
-              delete global[apiName]
-            }
-            const data = await blobToBase64(file);
-            // file为base64
-            console.log("下载图片", file.name);
-            global.android.downloadImage(file.name, data, apiName);
-          });
-        },
-        photograph() {
-          return new Promise<string>((resolve) => {
-            const apiName = `photograph${count++}`
-            global[apiName] = (data) => {
-              console.log("拍照后路径：", data)
-              normalImage(data).then(resolve);
-              delete global[apiName]
-            }
-            global.android.cameraPhotograph(params.m, apiName);
-          });
-        },
-        selectPhotoAlbum() {
-          return new Promise<string>((resolve) => {
-            const apiName = `selectPhotoAlbum${count++}`
-            global[apiName] = (data) => {
-              console.log("获得相册图片路径：", data)
-              normalImage(data).then(resolve);
-              delete global[apiName]
-            }
-            global.android.selectPhotoAlbum(params.m, apiName);
-          });
-        },
-        closePage() {
-          return new Promise((resolve) => {
-            global.closeWebViewCallback = resolve;
-            global.android.closeWebView('closeWebViewCallback');
+        const paths = fileUrl.split("/");
+        const notBase64BaseTypes = [
+          // ".png", ".jpg"
+          // , ".bin"
+        ];
+        const notBase64 = notBase64BaseTypes.some((type) =>
+          paths[paths.length - 1].includes(type)
+        );
+
+        if (!notBase64) {
+          return await new Promise<string>((resolve) => {
+            const apiName = `getImageCallback${count++}`;
+            global[apiName] = (base64) => {
+              // console.error("请求url:" + fileUrl, "返回:" + base64.substring(0, 60))
+              resolve(URL.createObjectURL(base64ToBlob(base64)));
+              delete global[apiName];
+            };
+            global.android.getImage(fileUrl, apiName);
           });
-        },
-      };
+        } else {
+          console.log("图片文件直接文件系统读取", fileUrl);
+          return fileUrl;
+        }
+      },
+      uploadImage(file: File) {
+        return new Promise<string>(async (resolve) => {
+          const apiName = `uploadImageCallback${count++}`;
+          global[apiName] = (data) => {
+            console.log("上传图片成功，返回路径为：", data);
+            resolve(data);
+            delete global[apiName];
+          };
+          const data = await blobToBase64(file);
+          // console.log("上传图片", params.m + "/" + file.name, "参数：", data);
+          global.android.uploadImage(
+            params.m + "/attach/upload/" + file.name,
+            data,
+            apiName
+          );
+        });
+      },
+      downloadImage(file: File) {
+        return new Promise<boolean>(async (resolve) => {
+          const apiName = `downloadImageCallback${count++}`;
+          global[apiName] = () => {
+            console.log("已成功下载");
+            resolve(true);
+            delete global[apiName];
+          };
+          const data = await blobToBase64(file);
+          // file为base64
+          console.log("下载图片", file.name);
+          global.android.downloadImage(file.name, data, apiName);
+        });
+      },
+      photograph() {
+        return new Promise<string>((resolve) => {
+          const apiName = `photograph${count++}`;
+          global[apiName] = (data) => {
+            console.log("拍照后路径：", data);
+            normalImage(data).then(resolve);
+            delete global[apiName];
+          };
+          global.android.cameraPhotograph(params.m, apiName);
+        });
+      },
+      selectPhotoAlbum() {
+        return new Promise<string>((resolve) => {
+          const apiName = `selectPhotoAlbum${count++}`;
+          global[apiName] = (data) => {
+            console.log("获得相册图片路径：", data);
+            normalImage(data).then(resolve);
+            delete global[apiName];
+          };
+          global.android.selectPhotoAlbum(params.m, apiName);
+        });
+      },
+      closePage() {
+        return new Promise((resolve) => {
+          global.closeWebViewCallback = resolve;
+          global.android.closeWebView("closeWebViewCallback");
+        });
+      },
+    };
 
 export const back = () => {
-  api.closePage()
+  api.closePage();
 };
 
 const loadStore = async () => {
@@ -217,10 +227,10 @@ const loadStore = async () => {
   photos.value = data?.photos || [];
   accidentPhotos.value = data?.accidentPhotos || [];
   roadPhotos.value = data?.roadPhotos || [];
-  uses.value = data?.uses || defaultUses
+  uses.value = data?.uses || defaultUses;
 
   syncSceneStore();
-  console.log("开始同步syncSceneStore")
+  console.log("开始同步syncSceneStore");
 };
 
 export const updateSceneStore = debounce(api.setStore, 300);
@@ -239,7 +249,6 @@ export const downloadImage = async (
       : data;
   const file = new File([blob], name, { type: "image/jpeg" });
 
-
   return await api.downloadImage(file);
 };
 
@@ -256,7 +265,7 @@ const syncSceneStore = () => {
       roadPhotos: roadPhotos.value,
     }),
     (data) => {
-      console.log("监听到数据变化，自动保存store")
+      console.log("监听到数据变化，自动保存store");
       updateSceneStore(data);
     },
     { deep: true }

src/views/graphic/data.ts

@@ -1,37 +1,36 @@
-import {computed, ref, watch} from "vue";
-import {Mode} from "@/views/graphic/menus";
-import {accidentPhotos, types, AccidentPhoto} from "@/store/accidentPhotos";
-import {roadPhotos, RoadPhoto} from "@/store/roadPhotos";
-import {router} from '@/router'
-import {getId} from "@/utils";
-import {photos} from "@/store/photos";
-import {trackMode} from "@/views/scene/trackMeasureWidth";
+import { computed, ref, watch } from "vue";
+import { Mode } from "@/views/graphic/menus";
+import { accidentPhotos, types, AccidentPhoto } from "@/store/accidentPhotos";
+import { roadPhotos, RoadPhoto } from "@/store/roadPhotos";
+import { router } from "@/router";
+import { getId } from "@/utils";
+import { photos } from "@/store/photos";
+import { trackMode } from "@/views/scene/trackMeasureWidth";
 
 export const useData = () => {
   const data = ref<AccidentPhoto | RoadPhoto>(null);
   watch(
     () => ({
-        params: router.currentRoute.value.params,
-        accidentPhotos: accidentPhotos.value,
-        roadPhotos: roadPhotos.value
+      params: router.currentRoute.value.params,
+      accidentPhotos: accidentPhotos.value,
+      roadPhotos: roadPhotos.value,
     }),
-    ({params}) => {
-
+    ({ params }) => {
       if (trackMode.value) {
         return;
       }
-      console.error("reload data")
+      console.error("reload data");
       if (!params.action) {
-        data.value = null
-      } else if (params.action === 'add') {
-        const photo = photos.value.find(data => data.id === params.id)
+        data.value = null;
+      } else if (params.action === "add") {
+        const photo = photos.value.find((data) => data.id === params.id);
         if (!photo) {
           return;
         }
         data.value = {
           data: null,
           title: "",
-          type: types[0],
+          type: types[2],
           sceneData: {
             meterPerPixel: photo.meterPerPixel,
             measures: photo.measures,
@@ -42,19 +41,23 @@ export const useData = () => {
           photoUrl: photo.url,
           id: getId(),
           url: null,
-          time: new Date().getTime()
-        }
+          time: new Date().getTime(),
+        };
       } else {
-        const mode = Number(params.mode) as Mode
+        const mode = Number(params.mode) as Mode;
         if (mode === Mode.Photo) {
-          return data.value = accidentPhotos.value.find(data => data.id === params.id)
+          return (data.value = accidentPhotos.value.find(
+            (data) => data.id === params.id
+          ));
         } else {
-          return data.value = roadPhotos.value.find(data => data.id === params.id)
+          return (data.value = roadPhotos.value.find(
+            (data) => data.id === params.id
+          ));
         }
       }
     },
     { immediate: true }
-  )
+  );
 
   return data;
-}
+};

src/views/graphic/geos/del.vue

@@ -1,35 +1,35 @@
 <template>
   <GeoTeleport
-      :menus="menus"
-      class="geo-teleport-use"
-      v-if="!hideTypes.includes(geo.type) && !hideTypes.includes(geo.category)"
+    :menus="menus"
+    class="geo-teleport-use"
+    v-if="!hideTypes.includes(geo.type) && !hideTypes.includes(geo.category)"
   />
 </template>
 
 <script setup lang="ts">
 import GeoTeleport from "@/views/graphic/geos/geo-teleport.vue";
-import {drawRef, FocusVector, VectorType} from '@/hook/useGraphic'
-import GeoActions from "@/graphic/enum/GeoActions"
+import { drawRef, FocusVector, VectorType } from "@/hook/useGraphic";
+import GeoActions from "@/graphic/enum/GeoActions";
 import VectorCategory from "@/graphic/enum/VectorCategory";
 
-const props = defineProps<{geo: FocusVector}>()
+const props = defineProps<{ geo: FocusVector }>();
 const hideTypes = [
   VectorType.CrossPoint,
   // VectorType.RoadPoint,
   // VectorType.CurveRoadPoint,
-  VectorCategory.Point.NormalPoint
-]
-console.log(props)
+  // VectorCategory.Point.NormalPoint
+];
+console.log(props);
 const menus = [
   {
-    key: 'del',
+    key: "del",
     text: "删除",
-    icon: 'del',
+    icon: "del",
     onClick: () => {
-      drawRef.value.uiControl.handleGeo(GeoActions.DeleteAction)
-    }
-  }
-]
+      drawRef.value.uiControl.handleGeo(GeoActions.DeleteAction);
+    },
+  },
+];
 </script>
 
 <style scoped lang="scss">

src/views/graphic/geos/text.vue

@@ -45,7 +45,6 @@ import { debounce } from "@/utils";
 import GeoActions from "@/graphic/enum/GeoActions";
 import Color from "@/components/color/index.vue";
 import VectorCategory from "@/graphic/enum/VectorCategory";
-import EditFixPoint from "@/components/edit-fix-point/index.vue";
 
 const props = defineProps<{ geo: FocusVector }>();
 const inputTextRef = ref();

src/views/scene/TrackMeasure.vue

@@ -11,7 +11,11 @@
 <script setup lang="ts">
 import UiIcon from "@/components/base/components/icon/index.vue";
 import ButtonPane from "@/components/button-pane/index.vue";
-import { startMeasure, SuccessMeasureAtom } from "@/views/scene/linkage/measure";
+import {
+  startMeasure,
+  stopMeasure,
+  SuccessMeasureAtom,
+} from "@/views/scene/linkage/measure";
 import { onActivated, onMounted, ref, watchEffect, nextTick } from "vue";
 import { tempMeasures } from "@/store/measure";
 import { measureDisabledStack } from "@/hook/custom";
@@ -38,6 +42,8 @@ watchEffect(() => {
         });
       }
     });
+  } else {
+    stopMeasure();
   }
 });
 </script>

src/views/scene/photo.vue

@@ -1,5 +1,5 @@
 <template>
-  <img :src="tempPhoto" class="face-animation" v-if="tempPhoto" ref="coverRef">
+  <img :src="tempPhoto" class="face-animation" v-if="tempPhoto" ref="coverRef" />
 
   <div class="photo-layout" v-if="disabledMap.photo">
     <ButtonPane class="photo-btn fun-ctrl" :size="80" @click="photo">
@@ -7,93 +7,92 @@
     </ButtonPane>
 
     <img
-        v-if="showCoverUrl"
-        :src="showCoverUrl.value"
-        class="cover"
-        :style="{opacity: showCoverUrl ? '1' : 0}"
-        @click="router.push(writeRouteName.photos)"
-    >
+      v-if="showCoverUrl"
+      :src="showCoverUrl.value"
+      class="cover"
+      :style="{ opacity: showCoverUrl ? '1' : 0 }"
+      @click="router.push(writeRouteName.photos)"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import UiIcon from "@/components/base/components/icon/index.vue";
 import ButtonPane from "@/components/button-pane/index.vue";
-import {list} from '@/store/measure'
-import {fixPoints} from '@/store/fixPoint'
-import {baseLines} from '@/store/baseLine'
-import {basePoints} from '@/store/basePoint'
-import {photos} from '@/store/photos'
-import { useSDK } from '@/hook/useLaser'
-import {genUseLoading} from "@/hook";
-import {disabledMap} from "@/hook/custom";
-import {base64ToBlob, getId} from "@/utils";
-import {computed, nextTick, ref} from "vue";
-import {api, downloadImage, uploadImage} from "@/store/sync";
-import {router, writeRouteName} from "@/router";
-import {LaserSDK, Pos, Pos3D} from "@/sdk";
-import {useStaticUrl} from "@/hook/useStaticUrl";
+import { list } from "@/store/measure";
+import { fixPoints } from "@/store/fixPoint";
+import { baseLines } from "@/store/baseLine";
+import { basePoints } from "@/store/basePoint";
+import { photos } from "@/store/photos";
+import { useSDK } from "@/hook/useLaser";
+import { genUseLoading } from "@/hook";
+import { disabledMap } from "@/hook/custom";
+import { base64ToBlob, getId } from "@/utils";
+import { computed, nextTick, ref } from "vue";
+import { api, downloadImage, uploadImage } from "@/store/sync";
+import { router, writeRouteName } from "@/router";
+import { LaserSDK, Pos, Pos3D } from "@/sdk";
+import { useStaticUrl } from "@/hook/useStaticUrl";
+import { Loading } from "@kankan/components/index";
 
 const showCoverUrl = computed(() => {
   if (photos.value[photos.value.length - 1]?.url) {
-    return useStaticUrl(photos.value[photos.value.length - 1].url)
+    return useStaticUrl(photos.value[photos.value.length - 1].url);
   }
-})
+});
 
 const tempPhoto = ref<string>();
-const coverRef = ref<HTMLImageElement>()
-const audio = new Audio("/camera1.mp3")
+const coverRef = ref<HTMLImageElement>();
+const audio = new Audio("/camera1.mp3");
 const getCurrentScreen = (pos: Pos3D): Pos => {
-  const sdk = useSDK()
-  const data = sdk.scene.getScreenByPoint(pos)
-  return data.trueSide ? data.pos : null
-}
+  const sdk = useSDK();
+  const data = sdk.scene.getScreenByPoint(pos);
+  return data.trueSide ? data.pos : null;
+};
 
 const screenshot = async (sdk: LaserSDK) => {
-  const dom = sdk.scene.el
-  dom.style.pointerEvents = "none"
+  const dom = sdk.scene.el;
+  dom.style.pointerEvents = "none";
 
   const getScreenshot = async () => {
-    const data = sdk.scene.screenshot(
-      dom.offsetWidth,
-      dom.offsetHeight
-    )
-    const {dataUrl: base64} = await data.finishPromise
-    const url = await uploadImage(base64ToBlob(base64))
+    const data = sdk.scene.screenshot(dom.offsetWidth, dom.offsetHeight);
+    const { dataUrl: base64 } = await data.finishPromise;
+    const url = await uploadImage(base64ToBlob(base64));
     return {
       url,
-      meterPerPixel: data.meterPerPixel
-    }
-  }
-  const screenshotRaw = await getScreenshot()
+      meterPerPixel: data.meterPerPixel,
+    };
+  };
+  const screenshotRaw = await getScreenshot();
 
-  baseLines.value.concat(list.value).forEach(item => item.show = false)
-  await nextTick()
-  const screenshot = await getScreenshot()
-  baseLines.value.concat(list.value).forEach(item => item.show = true)
-  await nextTick()
+  baseLines.value.concat(list.value).forEach((item) => (item.show = false));
+  await nextTick();
+  const screenshot = await getScreenshot();
+  baseLines.value.concat(list.value).forEach((item) => (item.show = true));
+  await nextTick();
 
-  dom.style.pointerEvents = "all"
+  dom.style.pointerEvents = "all";
   return {
     rawUrl: screenshotRaw.url,
     url: screenshot.url,
-    meterPerPixel: screenshot.meterPerPixel
-  }
-}
+    meterPerPixel: screenshot.meterPerPixel,
+  };
+};
 
 const getCurrentScreens = (poss: Array<Pos3D>): Array<Pos> =>
-  poss.map(getCurrentScreen).filter(pos => !!pos);
+  poss.map(getCurrentScreen).filter((pos) => !!pos);
 
-const photo = genUseLoading(async () => {
+const photo = async () => {
+  Loading.show();
   await audio.play();
-  const sdk = useSDK()
-  const data = await screenshot(sdk)
-  tempPhoto.value = await api.getFile(data.rawUrl)
-  await nextTick()
+  const sdk = useSDK();
+  const data = await screenshot(sdk);
+  tempPhoto.value = await api.getFile(data.rawUrl);
+  await nextTick();
 
   const handler = async () => {
-    coverRef.value.removeEventListener("animationend", handler)
-    tempPhoto.value = null
+    coverRef.value.removeEventListener("animationend", handler);
+    tempPhoto.value = null;
 
     photos.value.push({
       id: getId(),
@@ -102,26 +101,28 @@ const photo = genUseLoading(async () => {
       time: new Date().getTime(),
       meterPerPixel: data.meterPerPixel,
       measures: list.value
-        .map(data => {
-          const pos = getCurrentScreens(data.points)
+        .map((data) => {
+          const pos = getCurrentScreens(data.points);
           if (pos.length) {
-            return { pos, dis: sdk.carry.measureMap.get(data).getDistance().value }
+            return { pos, dis: sdk.carry.measureMap.get(data).getDistance().value };
           } else {
-            return null
+            return null;
           }
         })
-        .filter(poss => poss?.pos.length === 2),
+        .filter((poss) => poss?.pos.length === 2),
       baseLines: baseLines.value
-        .map(data => getCurrentScreens(data.points))
-        .filter(poss => poss.length === 2),
+        .map((data) => getCurrentScreens(data.points))
+        .filter((poss) => poss.length === 2),
       fixPoints: fixPoints.value
-        .map(data => ({ text: data.text, pos: getCurrentScreen(data.pos) }))
-        .filter(data => !!data.pos),
-      basePoints: getCurrentScreens(basePoints.value.map(data => data.pos))
-    })
-  }
-  coverRef.value.addEventListener("animationend", handler)
-})
+        .map((data) => ({ text: data.text, pos: getCurrentScreen(data.pos) }))
+        .filter((data) => !!data.pos),
+      basePoints: getCurrentScreens(basePoints.value.map((data) => data.pos)),
+    });
+
+    Loading.hide();
+  };
+  coverRef.value.addEventListener("animationend", handler);
+};
 </script>
 
 <style scoped lang="scss">
@@ -167,7 +168,6 @@ const photo = genUseLoading(async () => {
   top: 0;
   bottom: 0;
   animation: 1s linear 1 both photo-face;
-
 }
 .face-animation.start {
 }
@@ -191,7 +191,7 @@ const photo = genUseLoading(async () => {
     height: 48px;
     margin-left: -24px;
     border-radius: 50%;
-    z-index: 3
+    z-index: 3;
   }
 
   70% {
@@ -203,6 +203,5 @@ const photo = genUseLoading(async () => {
     left: calc(100vw - 63px);
     top: calc(calc(50%) + 20px);
   }
-
 }
 </style>

vite.config.ts

@@ -14,9 +14,9 @@ export default async ({ mode }) => {
     server = {
       watch: {
         ignored: [
-          '**/node_modules/**',
-	  '**/server/**',
-	  '**/public/static/lib/**'
+          "**/node_modules/**",
+          "**/server/**",
+          "**/public/static/lib/**",
         ],
       },
       proxy: {
@@ -36,7 +36,6 @@ export default async ({ mode }) => {
   }
 
   return defineConfig({
-
     base: "./",
     mode,
     build: {