添加绘制相关类

src/components/fill-slide/index.vue

@@ -9,7 +9,6 @@
           :items="data"
           :current-index="data.indexOf(active)"
           @change="index => $emit('update:active', data[index])"
-          show-ctrl
       >
         <template v-slot="{raw}">
           <template v-if="$slots.default">
@@ -51,13 +50,13 @@ defineEmits<{
   z-index: 3;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   flex-direction: column;
 }
 
 .slide-layout {
-  width: 90%;
-  height: 80%;
+  width: 840px;
+  height: 540px;
 }
 
 .image {
@@ -74,11 +73,29 @@ defineEmits<{
 
 .close {
   position: absolute;
-  right: 10px;
-  top: 10px;
+  right: 32px;
+  top: 32px;
+  font-size: 20px;
+  color: #fff;
 }
 .foot {
-  height: 10%;
   width: 100%;
+  padding-bottom: 24px;
+}
+</style>
+
+<style lang="scss">
+.fill-slide .ui-slide .ui-gate-layer {
+  overflow: initial !important;
+  .ui-gate-slides .ui-gate-content {
+    transition: all .3s ease;
+    transform: scale(0.9);
+    opacity: 0.5 !important;
+
+    &.active {
+      transform: scale(1);
+      opacity: 1 !important;
+    }
+  }
 }
 </style>

src/components/photos/header.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="photos-header">
+    <div>
+      <ui-icon type="close" ctrl style="margin-right: 10px" @click="router.back" />
+      <span>照片管理</span>
+    </div>
+    <span class="center" v-if="count">
+      已选择 {{ count }} 张
+    </span>
+    <div class="right">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiIcon from "@/components/base/components/icon/index.vue";
+import {router} from '@/router'
+
+defineProps<{ count: number }>()
+</script>
+
+<style lang="scss" scoped>
+.photos-header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+
+  .center {
+    position: absolute;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+}
+
+
+</style>

src/views/graphic/menus.ts

@@ -83,6 +83,9 @@ export const mainMenusRaw: MenusRaw = [
 ];
 
 if (import.meta.env.DEV) {
+  mainMenusRaw.unshift(
+    { key: UIType.CurveRoad, text: "弯路" }
+  )
   mainMenusRaw.splice(1, 0, {
     key: UITypeExtend.road,
     text: "道路",

src/views/photos/index.vue

@@ -1,16 +1,23 @@
 <template>
   <MainPanel>
     <template v-slot:header>
-      <ui-icon type="close" ctrl style="margin-right: 10px" @click="router.back" />
-      照片管理
+      <Header :count="selects.length">
+        <ui-button type="primary" @click="selectMode = !selectMode" width="96px">
+          {{ selectMode ? '取消' : '选择' }}
+        </ui-button>
+      </Header>
     </template>
 
     <Photos
       v-model:active="active"
       v-model:selects="selects"
+      :select-mode="selectMode"
       :data="sortPhotos"
     />
-    <ButtonPane class="back fun-ctrl" @click="router.push(writeRouteName.scene)">
+    <ButtonPane class="back fun-ctrl" @click="router.push(writeRouteName.scene)" v-if="!selectMode">
+      <ui-icon type="close" class="icon" />
+    </ButtonPane>
+    <ButtonPane class="del fun-ctrl" @click="delSelects" v-if="selects.length">
       <ui-icon type="close" class="icon" />
     </ButtonPane>
   </MainPanel>
@@ -41,24 +48,39 @@
 <script setup lang="ts">
 import MainPanel from '@/components/main-panel/index.vue'
 import FillSlide from '@/components/fill-slide/index.vue'
+import Header from '@/components/photos/header.vue'
 import {PhotoRaw, photos} from '@/store/photos'
 import UiIcon from "@/components/base/components/icon/index.vue";
 import {router, writeRouteName} from '@/router'
 import ButtonPane from "@/components/button-pane/index.vue";
-import {computed, ref} from "vue";
+import {computed, ref, watchEffect} from "vue";
 import {Mode} from '@/views/graphic/menus'
 import UiButton from "@/components/base/components/button/index.vue";
 import Photos from '@/components/photos'
 
 const sortPhotos = computed(() => photos.value.reverse())
 const active = ref<PhotoRaw>()
+const selectMode = ref(false)
 const selects = ref<PhotoRaw[]>([])
-const delPhoto = () => {
-  const index = photos.value.indexOf(active.value)
+
+watchEffect(() => {
+  if (!selectMode.value) {
+    selects.value = []
+  }
+})
+
+const delPhoto = (photo = active.value) => {
+  const index = photos.value.indexOf(photo)
   if (~index) {
     photos.value.splice(index, 1)
   }
 }
+const delSelects = () => {
+  while (selects.value.length) {
+    delPhoto(selects.value[0])
+    selects.value.shift()
+  }
+}
 
 const gotoDraw = (mode: Mode) => {
   router.push({ name: writeRouteName.graphic, params: {mode, id: active.value.id, action: 'add'} })
@@ -67,9 +89,7 @@ const gotoDraw = (mode: Mode) => {
 </script>
 
 <style scoped lang="scss">
-.back {
-  right: var(--boundMargin);
-  bottom: var(--boundMargin);
+.fun-ctrl {
   color: #fff;
   font-size: 20px;
   transition: color .3s ease;
@@ -80,6 +100,17 @@ const gotoDraw = (mode: Mode) => {
   }
 }
 
+.back {
+  right: var(--boundMargin);
+  bottom: var(--boundMargin);
+}
+
+.del {
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: var(--boundMargin);
+}
+
 .btns {
   display: flex;
   align-items: center;

src/views/scene/photo.vue

@@ -38,7 +38,6 @@ const showCoverUrl = ref<string>(
 const tempPhoto = ref<string>();
 const coverRef = ref<HTMLImageElement>()
 const getCurrentScreens = (poss: Array<Pos3D>): Array<Pos> => {
-  console.log(poss)
   const sdk = useSDK()
   return poss
     .map(pos => {