制作屏幕录制需求

src/env/index.ts

@@ -15,7 +15,7 @@ export const bottomBarHeightStack = stackFactory(ref<string>('60px'))
 export const showTaggingsStack = stackFactory(ref<boolean>(true))
 export const showMeasuresStack = stackFactory(ref<boolean>(false))
 export const currentModelStack = stackFactory(ref<FuseModel | null>(null))
-export const showModelsMapStack = stackFactory(ref<WeakMap<FuseModel, boolean>>(new WeakMap()))
+export const showModelsMapStack = stackFactory(ref<WeakMap<FuseModel, boolean>>(new WeakMap()), true)
 export const modelsChangeStoreStack = stackFactory(ref<boolean>(false))
 export const showTaggingPositionsStack = stackFactory(ref<WeakSet<TaggingPosition>>(new WeakSet()))
 export const currentViewStack = stackFactory(ref<View>())

src/layout/show/index.vue

@@ -1,13 +1,17 @@
 <template>
   <template v-if="loaded">
     <div :class="{ hideLeft: !custom.showLeftPano }">
-      <SlideMenu />
-      
+      <SlideMenu 
+        :activeName="(router.currentRoute.value.name as RoutesName)" 
+        @change-item="item => router.push({ name: item.name })"
+      />
+
       <router-view v-slot="{ Component }">
         <keep-alive>
           <component :is="Component" />
         </keep-alive>
       </router-view>
+
     </div>
   </template>
 </template>
@@ -15,6 +19,7 @@
 <script lang="ts" setup>
 import { custom } from '@/env'
 import { ref } from 'vue'
+import { router, RoutesName } from '@/router'
 import { loadModel, fuseModel } from '@/model'
 import SlideMenu from './slide-menu.vue'
 import { 

src/layout/show/slide-menu.vue

@@ -2,9 +2,9 @@
   <div class="slide-menu">
     <div 
       v-for="item in items" 
-      :class="{active: item.name === router.currentRoute.value.name}" 
+      :class="{active: item.name === activeName}" 
       :key="item.name"
-      @click="router.push({ name: item.name })"
+      @click="$emit('changeItem', item)"
     >
       <ui-icon :type="item.icon" :tip="item.title" class="icon" />
     </div>
@@ -12,14 +12,26 @@
 </template>
 
 <script lang="ts" setup>
-import { metas, RoutesName, router } from '@/router'
+import { metas, RoutesName, router, getRouteConfig } from '@/router'
 import { views, records, floders } from '@/store';
 import { computed } from 'vue';
 
+import type { RouteRecordRaw } from '@/router'
+
+export type MenuItem = {
+  name: RoutesName,
+  config: RouteRecordRaw,
+} & (typeof metas)[keyof typeof metas]
+
+defineProps<{ activeName: RoutesName }>()
+defineEmits<{ (e: 'changeItem', item: MenuItem): void }>()
+
+
 const items = computed(() => {
   const items = [
     {
       name: RoutesName.summaryShow,
+      config: getRouteConfig(RoutesName.summaryShow),
       ...metas[RoutesName.summaryShow]
     }
   ]
@@ -27,6 +39,7 @@ const items = computed(() => {
   if (views.value.length) {
     items.push({
       name: RoutesName.viewShow,
+      config: getRouteConfig(RoutesName.viewShow),
       ...metas[RoutesName.viewShow]
     }) 
   }
@@ -34,6 +47,7 @@ const items = computed(() => {
   if (records.value.length) {
     items.push({
       name: RoutesName.recordShow,
+      config: getRouteConfig(RoutesName.recordShow),
       ...metas[RoutesName.recordShow]
     }) 
   }
@@ -41,6 +55,7 @@ const items = computed(() => {
   if (floders.value.length) {
     items.push({
       name: RoutesName.folderShow,
+      config: getRouteConfig(RoutesName.folderShow),
       ...metas[RoutesName.folderShow]
     }) 
   }

src/main.ts

@@ -31,7 +31,8 @@ watchEffect((onCleanup) => {
           URL.VIEW_LIST,
           URL.FOLDER_TYPE_LIST,
           URL.FLODER_LIST,
-          URL.MODEL_SIGN
+          URL.MODEL_SIGN,
+          URL.CASE_INFO
         ]
       : []
       

src/router/index.ts

@@ -9,25 +9,38 @@ import type { RouteRecordRaw, RouteRecordName } from 'vue-router'
 export const history = createWebHashHistory()
 export const router = createRouter({ history, routes })
 
-export const getRouteNames = (name: RouteRecordName, routes: RouteRecordRaw[]): void | RouteRecordName[] => {
-  for (const route of routes) {
+export const getRouteTree = (name: RouteRecordName, raw: RouteRecordRaw[] = routes): void | RouteRecordRaw => {
+  for (const route of raw) {
     if (route.name === name) {
-      return [route.name]
+      return route
     } else if (route.children) {
-      const baseNames = getRouteNames(name, route.children)
-      if (baseNames) {
-        return [route.name as string, ...baseNames]
+      const children = getRouteTree(name, route.children)
+      if (children) {
+        return {...route, children: [children] }
       }
     }
   }
 }
 
-export const currentRouteNames = computed(() => {
-  const currentName = router.currentRoute.value.name
-  return currentName 
-    ? getRouteNames(currentName, routes) || []
-    : []
-})
+export const getRouteNames = (name: RouteRecordName, raw: RouteRecordRaw[] = routes): RouteRecordName[] => {
+  let current = getRouteTree(name, raw)
+  const names: RouteRecordName[] = []
+  while (current) {
+    names.push(current.name!)
+    current = current.children && current.children[0]
+  }
+  return names
+}
+
+export const getRouteConfig = (name: RouteRecordName, raw: RouteRecordRaw[] = routes): RouteRecordRaw | void => {
+  let current = getRouteTree(name, raw)
+  while (current) {
+    current = current.children && current.children[0]
+  }
+  return current
+}
+
+export const currentRouteNames = computed(() => getRouteNames(router.currentRoute.value.name!, routes))
 
 export const currentLayout = computed(() => {
   const names = currentRouteNames.value
@@ -44,5 +57,6 @@ export const currentMeta = computed(() => {
 
 export * from './config'
 export * from './constant'
+export type { RouteRecordRaw }
 
 export default router

src/store/fuse-model.ts

@@ -51,21 +51,29 @@ export const createFuseModels = (model: Partial<FuseModel> = {}): FuseModel => s
 })
 
 export const getFuseModel = (modelId: FuseModel['id']) => fuseModels.value.find(model => model.id === modelId)
+let setModel: FuseModel
 export const getFuseModelShowVariable = (model: FuseModel) => 
   computed({
-    get: () => false && custom.modelsChangeStore 
+    get: () => {
+      return false && custom.modelsChangeStore 
       ? model.show 
-      : custom.showModelsMap.get(model) || false,
+      : custom.showModelsMap.get(model) || false
+    },
     set: (show: boolean) => {
       if (false && custom.modelsChangeStore) {
         model.show = show
       } else {
+        setModel = model
         custom.showModelsMap.set(model, show)
       }
     }
   })
   
 
+watchEffect(() => {
+  fuseModels.value.forEach(item => custom.showModelsMap.get(item))
+}, { flush: 'sync' })
+
 export const fuseModelsLoaded = ref(false)
 watchPostEffect(() => {
   const loaded = fuseModels.value
@@ -105,7 +113,7 @@ const serviceToLocal = (model: SModel): FuseModel => ({
 })
 
 const initFuseModel = (model: FuseModel) => {
-  custom.showModelsMap.set(model, model.show)
+  custom.showModelsMap.has(model) || custom.showModelsMap.set(model, model.show)
 }
 
 export const recoverFuseModels = () => {
@@ -158,12 +166,12 @@ export const autoSaveFuseModels = autoSetModeCallback(fuseModels, {
   save: async () => {
     await saveFuseModels()
 
-    for (const model of bcModels) {
-      const currentModel = getFuseModel(model.id)
-      if (currentModel && currentModel.show !== model.show) {
-        custom.showModelsMap.set(currentModel, currentModel.show)
-      }
-    }
+    // for (const model of bcModels) {
+    //   const currentModel = getFuseModel(model.id)
+    //   if (currentModel && currentModel.show !== model.show) {
+    //     custom.showModelsMap.set(currentModel, currentModel.show)
+    //   }
+    // }
     
     await Promise.all([
       initialTaggings(),

src/views/record/index.vue

@@ -62,7 +62,6 @@ const setting = ref<SetKey[]>(['tagging', 'measure'])
 watch(setting, (setting, oldSetting = [], onCleanup) => {
   const { added } = diffArrayChange(setting, oldSetting)
   const pops = added.map(value => {
-    console.error('???')
     if (value === 'measure') {
       return showMeasuresStack.push(ref(true))
     } else {

src/views/record/shot-imitate.vue

@@ -0,0 +1,18 @@
+<template>
+  <slideMenu :activeName="activeName" @change-item="item => activeName = item.name" />
+
+  <component :is="component"></component>
+</template>
+
+<script lang="ts" setup>
+import slideMenu from '@/layout/show/slide-menu.vue';
+import { getRouteConfig, RoutesName } from '@/router'
+import { computed, ref } from 'vue';
+
+const activeName = ref(RoutesName.summaryShow)
+const component = computed(() => {
+  const route = getRouteConfig(activeName.value)
+  return route?.component
+})
+
+</script>

src/views/record/shot.vue

@@ -31,6 +31,8 @@
       :items="[{ type: MediaType.video, url: palyUrl }]"
       @close="palyUrl = null" 
     />
+
+    <ShotImiate v-if="!custom.showBottomBar" />
   </teleport>
 </template>
 
@@ -41,6 +43,7 @@ import { sdk } from '@/sdk'
 import { getVideoCover, togetherCallback } from '@/utils'
 import { MediaType, Preview } from '@/components/static-preview/index.vue'
 import { Record, getRecordFragmentBlobs } from '@/store'
+import ShotImiate from './shot-imitate.vue'
 import { 
   getResource, 
   showRightCtrlPanoStack, 
@@ -77,7 +80,6 @@ export default defineComponent({
       debug: false,
     }
   
-    console.error('new VideoRecorder')
     const videoRecorder = new VideoRecorder(config);
     const showLeftPano = ref(false)
     const showBottomBar = ref(false)
@@ -124,14 +126,8 @@ export default defineComponent({
     videoRecorder.on('record', blob => {
       blobs.push(new File([blob], '录屏.mp4', { type: 'video/mp4; codecs=h264' }))
     })
-    videoRecorder.on('cancelRecord', () => {
-      console.error('cancelRecord')
-      pause()
-    })
-    videoRecorder.on('endRecord', () => {
-      console.error('endRecord')
-      pause()
-    })
+    videoRecorder.on('cancelRecord', pause)
+    videoRecorder.on('endRecord', pause)
 
     const palyUrl = ref<string | Blob | null>(null)
     const videoList: VideoItem[] = shallowReactive([])
@@ -216,7 +212,8 @@ export default defineComponent({
     }
   },
   components: {
-    Preview
+    Preview,
+    ShotImiate
   }
 })
 

src/views/record/style.scss

@@ -134,6 +134,7 @@
 }
 
 .shot-ctrl {
+  z-index: 2;
   .btn {
     flex: none;
     width: 160px;
@@ -206,4 +207,4 @@
       font-size: 22px;
     }
   }
-}
+}