添加绘制相关类

src/components/photos/index.vue

@@ -5,17 +5,19 @@
           v-for="photo in data"
           :key="photo.id"
           class="photo"
-          @click="$emit('update:active', photo)"
+          @click="selectMode ? changeSelects(photo, !selects.includes(photo)) : $emit('update:active', photo)"
       >
         <img :src="getStaticFile(photo.url)" v-if="!$slots.default" />
         <slot :data="photo"  v-else/>
         <ui-input
+          width="24px"
+          height="24px"
           v-if="selectMode"
           type="checkbox"
           :modelValue="selects.includes(photo)"
           @update:modelValue="selected => changeSelects(photo, selected)"
           @click.stop
-          class="select"
+          class="photo-select"
         />
       </div>
     </div>
@@ -70,10 +72,30 @@ const changeSelects = (item: Item, selected: boolean) => {
 .photo {
   position: relative;
 }
-.select {
-
+.photo-select {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  z-index: 1;
 }
 .photo img {
   width: 100%;
 }
+</style>
+
+<style lang="scss">
+.photo-select.ui-input .checkbox input + .replace {
+  background-color: #ccc;
+  border-color: #fff;
+  border-radius: 50%;
+}
+.photo-select.ui-input .checkbox input + .replace.checked {
+  background-color: var(--colors-primary-base);
+  border-color: var(--colors-primary-base);
+  color: #fff;
+
+  .icon {
+    font-size: 18px !important;
+  }
+}
 </style>

src/views/graphic/menus.ts

@@ -72,23 +72,8 @@ export const templateMenusRaw = [
 ]
 
 export const mainMenusRaw: MenusRaw = [
-  // { key: UIType.CurveRoad, text: "弯路" },
-  // { key: UIType.Road, text: "直路" },
   { key: UIType.Line, text: "画线" },
-  // {
-  //   key: UITypeExtend.road,
-  //   text: "道路",
-  //   children: [
-  //     { key: UIType.OneEdgeOneLanRoad, text: "单向单车道直路" },
-  //     { key: UIType.OneEdgeTwoLanRoad, text: "单向双车道直路" },
-  //     { key: UIType.OneEdgeThreeLanRoad, text: "单向三车道直路" },
-  //     { key: UIType.TwoEdgeOneLanRoad, text: "双向单车道直路" },
-  //     { key: UIType.TwoEdgeTwoLanRoad, text: "双向双车道直路" },
-  //     { key: UIType.TwoEdgeThreeLanRoad, text: "双向三车道直路" },
-  //     { key: UITypeExtend.structure, text: "道路结构", extend: structureMenusRaw },
-  //     { key: UITypeExtend.template, text: "道路模板", extend: templateMenusRaw },
-  //   ]
-  // },
+
   // { key: UIType.Img, text: "图例" },
   { key: UIType.MeasureLine, text: "测量" },
   { key: UIType.Text, text: "文字" },
@@ -97,6 +82,23 @@ export const mainMenusRaw: MenusRaw = [
   { key: UITypeExtend.setup, text: "设置" },
 ];
 
+if (import.meta.env.DEV) {
+  mainMenusRaw.splice(1, 0, {
+    key: UITypeExtend.road,
+    text: "道路",
+    children: [
+      { key: UIType.OneEdgeOneLanRoad, text: "单向单车道直路" },
+      { key: UIType.OneEdgeTwoLanRoad, text: "单向双车道直路" },
+      { key: UIType.OneEdgeThreeLanRoad, text: "单向三车道直路" },
+      { key: UIType.TwoEdgeOneLanRoad, text: "双向单车道直路" },
+      { key: UIType.TwoEdgeTwoLanRoad, text: "双向双车道直路" },
+      { key: UIType.TwoEdgeThreeLanRoad, text: "双向三车道直路" },
+      { key: UITypeExtend.structure, text: "道路结构", extend: structureMenusRaw },
+      { key: UITypeExtend.template, text: "道路模板", extend: templateMenusRaw },
+    ]
+  },)
+}
+
 export const photoMenusRaw: MenusRaw = [
   { key: UIType.Text, text: "文字" },
   { key: UIType.Circle, text: "圈出" },

src/views/photos/index.vue

@@ -9,7 +9,6 @@
       v-model:active="active"
       v-model:selects="selects"
       :data="sortPhotos"
-      :select-mode="true"
     />
     <ButtonPane class="back fun-ctrl" @click="router.push(writeRouteName.scene)">
       <ui-icon type="close" class="icon" />