bill 5 months ago
parent
commit
b429f02e46

+ 1 - 0
src/api/guide.ts

@@ -18,6 +18,7 @@ export interface Guide {
   cover: string
   title: string
   recoveryContent?: string
+  changeAnimationStatus?: boolean
 }
 
 export type Guides = Guide[]

+ 7 - 0
src/hook/ids.ts

@@ -37,7 +37,14 @@ export const useSelects = <T extends { id: any }>(items: Ref<T[]>) => {
   return {
     selects,
     unSelects: computed(() => items.value.filter(item => !selects.value.includes(item as any))),
+    all: computed({
+      get: () => items.value.length === selects.value.length,
+      set: (select: boolean) => {
+        items.value.forEach(item => updateSelect(item, select))
+      } 
+    }),
     updateSelect,
     updateSelectId,
   };
 };
+

+ 9 - 1
src/sdk/association/path.ts

@@ -1,6 +1,6 @@
 import { diffArrayChange, mount, shallowWatchArray } from "@/utils";
 import TaggingComponent from "@/components/path/list.vue";
-import { Path as PathData, paths } from "@/store/path";
+import { Path as PathData, paths, selectPaths } from "@/store/path";
 import { sdk, Path, SDK } from "../sdk";
 import { nextTick, reactive, ref, watch, watchEffect } from "vue";
 import { groupProxy } from "@/store/group";
@@ -101,4 +101,12 @@ export const associationPaths = (sdk: SDK, el: HTMLDivElement) => {
       {immediate: true}
     );
   });
+
+  watchEffect(() => {
+    selectPaths.selects.value.forEach(item => pathNodes.get(item)?.visibility(true))
+    selectPaths.unSelects.value.forEach(item => {
+      pathNodes.get(item)?.visibility(false)
+    })
+  })
+  
 };

+ 1 - 0
src/store/guide-path.ts

@@ -33,6 +33,7 @@ export const createGuidePath = (path: Partial<GuidePath> = {}): GuidePath => ({
   time: 1,
   sort: 999,
   speed: 1,
+  
   position: {x: 0, y: 0, z: 0},
   target: {x: 0, y: 0, z: 0},
   ...path

+ 6 - 1
src/store/path.ts

@@ -21,11 +21,13 @@ import {
 import type { Path } from '@/api'
 import { custom, params } from '@/env'
 import { Message } from 'bill/expose-common'
+import { useSelects } from '@/hook/ids'
 
 export  type { Path } from '@/api'
 export type Paths = Path[]
 
 export const paths = ref<Paths>([])
+export const selectPaths = useSelects(paths)
 export const getPath = (id: Path['id']) => paths.value.find(path => path.id === id)
 
 export const getPathIsShow = (path: Path) => {
@@ -71,7 +73,10 @@ export const backupPaths = () => {
 export const initialPaths = fetchStoreItems(paths, async () => {
   const paths = await fetchPaths()
   return paths
-}, backupPaths)
+}, () => {
+  backupPaths()
+  selectPaths.all.value = true
+})
 export const recoverPaths = async () => {
   const backupItems = bcPaths;
   paths.value.length = 0

+ 3 - 3
src/utils/store-help.ts

@@ -129,7 +129,7 @@ export function fetchStoreItems<
 >(
   items: Ref<T[]>,
   fetchAction: () => Promise<T[]>,
-  callback: (() => void) | null
+  callback: () => void
 ): () => Promise<void>;
 export function fetchStoreItems<
   T extends { id: any },
@@ -137,7 +137,7 @@ export function fetchStoreItems<
 >(
   items: Ref<T[]>,
   fetchAction: () => Promise<K[]>,
-  callback: (() => void) | null,
+  callback: () => void,
   transform: (items: K[]) => Promise<T[]> | T[]
 ): () => Promise<void>;
 export function fetchStoreItems<
@@ -146,7 +146,7 @@ export function fetchStoreItems<
 >(
   items: Ref<T[]>,
   fetchAction: () => Promise<K[]>,
-  callback?: (() => void) | null,
+  callback?: () => void,
   transform?: (items: K[]) => Promise<T[]> | T[]
 ) {
   return async () => {

+ 2 - 1
src/views/animation/right/am.vue

@@ -146,7 +146,8 @@ const selectPathHandler = () => {
     return;
   }
   const name = options.value.find(({ value }) => value === pathId.value)!.label;
-  emit("addPath", { name });
+  console.log(pathId.value);
+  emit("addPath", { name, pathId: pathId.value });
   visibleSelectPath.value = false;
 };
 </script>

+ 1 - 1
src/views/animation/right/path.vue

@@ -22,7 +22,7 @@
               type="select"
               :options="options"
               placeholder="请选择路径"
-              v-model="data.id"
+              v-model="data.pathId"
             />
           </SignItem>
         </ui-group-option>

+ 6 - 3
src/views/guide/index.vue

@@ -18,15 +18,15 @@
   <Teleport to=".laser-layer">
     <div class="quisks">
       <div class="quisk-item fun-ctrl" @click="quiskAdd('guide')">
-        <ui-icon type="close" />
+        <ui-icon type="a-guide_s" />
         <span>导览</span>
       </div>
       <div class="quisk-item fun-ctrl" @click="quiskAdd('animation')">
-        <ui-icon type="close" />
+        <ui-icon type="a-animation_s" />
         <span>动画</span>
       </div>
       <div class="quisk-item fun-ctrl" @click="quiskAdd('path')">
-        <ui-icon type="close" />
+        <ui-icon type="a-path_s" />
         <span>路线</span>
       </div>
     </div>
@@ -129,6 +129,9 @@ const quiskAdd = async (key: string) => {
       margin-top: 6px;
       font-size: 14px;
     }
+    .icon {
+      font-size: 22px;
+    }
   }
 }
 </style>

+ 47 - 10
src/views/guide/path/edit.vue

@@ -1,20 +1,30 @@
 <template>
-  <ui-group>
+  <ui-group borderBottom class="path-header">
     <template #header>
-      <ui-button @click="edit()">
+      <!-- <ui-button @click="edit()">
         <ui-icon type="add" />
         新增
-      </ui-button>
+      </ui-button> -->
+      <div class="path-header-content">
+        <ui-input type="checkbox" v-model="all" label="全选" />
+        <ui-icon type="add" ctrl @click="edit()" />
+      </div>
     </template>
   </ui-group>
   <ui-group class="path-group">
-    <PathSign
-      v-for="path in paths"
-      :key="path.id"
-      :path="path"
-      @edit="edit(path)"
-      @delete="deletePath(path)"
-    />
+    <div v-for="path in paths" :key="path.id" class="path-item">
+      <ui-input
+        type="checkbox"
+        :modelValue="selects.includes(path)"
+        @update:modelValue="(select: boolean) => updateSelect(path, select)"
+      />
+      <PathSign
+        :path="path"
+        @edit="edit(path)"
+        @delete="deletePath(path)"
+        class="path-content"
+      />
+    </div>
   </ui-group>
   <EditPath :data="currentPath" v-if="currentPath" @applyGlobal="applyGlobal" />
 </template>
@@ -32,6 +42,7 @@ import {
   autoSavePaths,
   createPath,
   enterOld,
+  selectPaths,
   save,
 } from "@/store";
 
@@ -40,6 +51,9 @@ import { Dialog } from "bill/expose-common";
 import { showPathsStack, showPathStack } from "@/env";
 import { asyncTimeout } from "@/utils";
 
+const { all, selects, updateSelect } = selectPaths;
+
+
 const currentPath = ref<Path | null>();
 const leaveEdit = () => {
   currentPath.value = null;
@@ -103,5 +117,28 @@ defineExpose({
 
 .path-group {
   padding-bottom: 50px;
+  .path-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--colors-border-color);
+  }
+
+  .path-content {
+    flex: 1;
+  }
+}
+
+.path-header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>
+
+<style>
+.path-header.ui-group .border-bottom,
+.path-header.ui-group {
+  margin-bottom: 0;
 }
 </style>

+ 1 - 2
src/views/guide/path/sign.vue

@@ -108,11 +108,10 @@ const clickHandler = () => {
   align-items: center;
   padding: 20px 0;
   margin-bottom: 0;
-  border-bottom: 1px solid var(--colors-border-color);
+
   position: relative;
   cursor: pointer;
   &:first-child {
-    border-top: 1px solid var(--colors-border-color);
   }
 
   &.active::after {

+ 3 - 3
src/views/guide/show.vue

@@ -21,8 +21,8 @@
     <template #icon v-if="currentKey === 'path'">
       <ui-icon
         ctrl
-        :type="custom.showPaths ? 'eye-s' : 'eye-n'"
-        @click="custom.showPaths = !custom.showPaths"
+        :type="selectPaths.all.value ? 'eye-s' : 'eye-n'"
+        @click="selectPaths.all.value = !selectPaths.all.value"
       />
     </template>
     <div class="show-guides">
@@ -36,7 +36,7 @@
 import { computed, ref } from "vue";
 import Guide from "./guide/show.vue";
 import Path from "./path/show.vue";
-import { guides, paths } from "@/store";
+import { guides, paths, selectPaths } from "@/store";
 import { Menu, Dropdown } from "ant-design-vue";
 import { DownOutlined } from "@ant-design/icons-vue";
 import { custom } from "@/env";