添加新数据需求

src/components/base/assets/scss/components/_button.scss

@@ -41,14 +41,14 @@
     background-color: var( --color-main-normal);
     &:hover {
         
-        border-color: #4DD8C7;
-        background-color: #4DD8C7;
-        color: #4DD8C7;
+        //border-color: #4DD8C7;
+        //background-color: #4DD8C7;
+        //color: #4DD8C7;
     }
     &:active {
-        border-color: var( --color-main-focus);
-        background-color: var( --color-main-focus);
-        color: var( --color-main-focus);
+        //background-color: var(--colors-primary-hover) !important;
+        color: rgba(255,255,255,0.7);
+        background: #005046;
     }
 }
 

src/components/fill-slide/index.vue

@@ -12,6 +12,7 @@
           @change="index => $emit('update:active', data[index])"
       >
         <template v-slot="{raw}">
+          {{data.indexOf(active)}}
           <template v-if="$slots.default">
             <slot :data="raw" />
           </template>

src/views/accidents/index.vue

@@ -61,6 +61,8 @@ import UiButton from "@/components/base/components/button/index.vue";
 import Photos from "@/components/photos/index.vue";
 import Header from "@/components/photos/header.vue";
 import ButtonPane from "@/components/button-pane/index.vue";
+import {useConfirm} from "@/hook";
+import {roadPhotos} from "@/store/roadPhotos";
 
 const sortPhotos = computed(() => {
   const photos = [...accidentPhotos.value]
@@ -123,19 +125,39 @@ watchEffect(() => {
   }
 })
 
-const delPhoto = (accidentPhoto = active.value) => {
+const delPhotoRaw = (accidentPhoto = active.value) => {
   const index = accidentPhotos.value.indexOf(accidentPhoto)
+  const reset = active.value ? accidentPhotos.value.indexOf(active.value) : -1
   if (~index) {
     accidentPhotos.value.splice(index, 1)
   }
-}
-const delSelects = () => {
-  while (selects.value.length) {
-    delPhoto(selects.value[0])
-    selects.value.shift()
+  if (~reset) {
+    console.log(reset)
+    if (reset >= accidentPhotos.value.length) {
+      if (accidentPhotos.value.length) {
+        active.value = accidentPhotos.value[accidentPhotos.value.length - 1]
+      } else {
+        active.value = null
+      }
+    } else {
+      active.value = accidentPhotos.value[reset]
+    }
   }
 }
 
+const delPhoto = async (photo = active.value) => {
+  if (await useConfirm(`确定要删除此数据？`)) {
+    delPhotoRaw(photo)
+  }
+}
+const delSelects = async () => {
+  if (await useConfirm(`确定要删除这${selects.value.length}项数据？`)) {
+    while (selects.value.length) {
+      delPhotoRaw(selects.value[0])
+      selects.value.shift()
+    }
+  }
+}
 const gotoDraw = () => {
   router.push({
     name: writeRouteName.graphic,

src/views/graphic/geos/arrow.vue

@@ -6,7 +6,7 @@
         <span class="color" :style="{backgroundColor: color}"></span>
       </template>
       <ui-icon type="del" class="icon" v-if="data.key === 'del'" />
-      <ui-icon type="del" class="icon" v-if="data.key === 'copy'" />
+      <ui-icon type="copy" class="icon" v-if="data.key === 'copy'" />
     </template>
 
   </GeoTeleport>
@@ -42,10 +42,12 @@ watch(() => [color.value], debounce(syncVector, 500))
 const menus = [
   {
     key: 'color',
+    icon: 'del',
     text: "颜色"
   },
   {
     key: 'copy',
+    icon: 'copy',
     text: "复制",
     onClick: () => {
       drawRef.value.uiControl.handleGeo(GeoActions.CopyAction)
@@ -53,6 +55,7 @@ const menus = [
   },
   {
     key: 'del',
+    icon: 'del',
     text: "删除",
     onClick: () => {
       drawRef.value.uiControl.handleGeo(GeoActions.DeleteAction)

src/views/graphic/geos/circle.vue

@@ -39,11 +39,13 @@ watch(() => [color.value], debounce(syncVector, 500))
 const menus = [
   {
     key: 'color',
+    icon: 'del',
     text: "颜色"
   },
   {
     key: 'del',
     text: "删除",
+    icon: 'del',
     onClick: () => {
       drawRef.value.uiControl.handleGeo(GeoActions.DeleteAction)
     }

src/views/graphic/geos/del.vue

@@ -16,6 +16,7 @@ const menus = [
   {
     key: 'del',
     text: "删除",
+    icon: 'del',
     onClick: () => {
       drawRef.value.uiControl.handleGeo(GeoActions.DeleteAction)
     }

src/views/graphic/geos/magnifier.vue

@@ -3,10 +3,10 @@
     <template v-slot="{ data }">
       <template v-if="data.key === 'file'">
         <ui-input type="file" class="geo-input" v-model="file" />
-        <ui-icon type="del" class="icon" />
+        <ui-icon type="photo" class="icon" />
       </template>
       <ui-icon type="del" class="icon" v-if="data.key === 'del'" />
-      <ui-icon type="del" class="icon" v-if="data.key === 'reset'" />
+      <ui-icon type="recover" class="icon" v-if="data.key === 'reset'" />
     </template>
 
   </GeoTeleport>
@@ -29,15 +29,18 @@ const file = ref<Blob>()
 const menus = [
   {
     key: 'file',
-    text: "拍照"
+    text: "拍照",
+    icon: 'photo',
   },
   {
     key: 'reset',
+    icon: "recover",
     text: "恢复默认",
     onClick: () => syncVector(null)
   },
   {
     key: 'del',
+    icon: "del",
     text: "删除",
     onClick: () => {
       drawRef.value.uiControl.handleGeo(GeoActions.DeleteAction)

src/views/graphic/geos/text.vue

@@ -17,7 +17,7 @@
         <span class="font-size">{{ size }}</span>
       </template>
       <ui-icon type="del" class="del-icon" v-if="data.key === 'del'" />
-      <ui-icon type="del" class="del-icon" v-if="data.key === 'text'" />
+      <ui-icon type="edit" class="del-icon" v-if="data.key === 'text'" />
     </template>
   </GeoTeleport>
 
@@ -84,6 +84,7 @@ for (let i = 10; i < 30; i++) {
 const menus = [
   {
     key: 'color',
+    icon: 'del',
     text: "颜色"
   },
   {
@@ -92,11 +93,13 @@ const menus = [
   },
   {
     key: 'text',
+    icon: 'edit',
     text: "修改文字",
     onClick: () => updateText.value = true
   },
   {
     key: 'del',
+    icon: 'del',
     text: "删除",
     onClick: () => {
       drawRef.value.uiControl.handleGeo(GeoActions.DeleteAction)

src/views/photos/index.vue

@@ -41,6 +41,8 @@ import {Mode} from '@/views/graphic/menus'
 import UiButton from "@/components/base/components/button/index.vue";
 import Photos from '@/components/photos'
 import ActionMenus from "@/components/group-button/index.vue";
+import {useConfirm} from "@/hook";
+import {accidentPhotos} from "@/store/accidentPhotos";
 
 const sortPhotos = computed(() => photos.value.reverse())
 const active = ref<PhotoRaw>()
@@ -82,16 +84,35 @@ watchEffect(() => {
   }
 })
 
-const delPhoto = (photo = active.value) => {
+const delPhotoRaw = (photo = active.value) => {
   const index = photos.value.indexOf(photo)
+  const reset = active.value ? photos.value.indexOf(active.value) : -1
   if (~index) {
     photos.value.splice(index, 1)
   }
+  if (~reset) {
+    if (reset >= photos.value.length) {
+      if (photos.value.length) {
+        active.value = photos.value[photos.value.length - 1]
+      } else {
+        active.value = null
+      }
+    } else {
+      active.value = photos.value[reset]
+    }
+  }
+}
+const delPhoto = async (photo = active.value) => {
+  if (await useConfirm(`确定要删除此数据？`)) {
+    delPhotoRaw(photo)
+  }
 }
-const delSelects = () => {
-  while (selects.value.length) {
-    delPhoto(selects.value[0])
-    selects.value.shift()
+const delSelects = async () => {
+  if (await useConfirm(`确定要删除这${selects.value.length}项数据？`)) {
+    while (selects.value.length) {
+      delPhotoRaw(selects.value[0])
+      selects.value.shift()
+    }
   }
 }
 

src/views/roads/index.vue

@@ -63,6 +63,7 @@ import Header from "@/components/photos/header.vue";
 import Photos from "@/components/photos/index.vue";
 import ButtonPane from "@/components/button-pane/index.vue";
 import UiIcon from "@/components/base/components/icon/index.vue";
+import {useConfirm} from "@/hook";
 
 
 const sortPhotos = computed(() => roadPhotos.value.reverse())
@@ -99,18 +100,41 @@ watchEffect(() => {
   }
 })
 
-const delPhoto = (roadPhoto = active.value) => {
+const delPhotoRaw = (roadPhoto = active.value) => {
   const index = roadPhotos.value.indexOf(roadPhoto)
+  const reset = active.value ? roadPhotos.value.indexOf(active.value) : -1
   if (~index) {
     roadPhotos.value.splice(index, 1)
   }
+  if (~reset) {
+    if (reset >= roadPhotos.value.length) {
+      if (roadPhotos.value.length) {
+        active.value = roadPhotos.value[roadPhotos.value.length - 1]
+      } else {
+        active.value = null
+      }
+    } else {
+      active.value = roadPhotos.value[reset]
+    }
+  }
 }
-const delSelects = () => {
-  while (selects.value.length) {
-    delPhoto(selects.value[0])
-    selects.value.shift()
+
+const delPhoto = async (photo = active.value) => {
+  if (await useConfirm(`确定要删除此数据？`)) {
+    delPhotoRaw(photo)
   }
+
 }
+const delSelects = async () => {
+  if (await useConfirm(`确定要删除这${selects.value.length}项数据？`)) {
+    while (selects.value.length) {
+      delPhotoRaw(selects.value[0])
+      selects.value.shift()
+    }
+  }
+}
+
+
 const gotoDraw = () => {
   router.push({
     name: writeRouteName.graphic,