fix: Merge branch 'new-dev' into dev

src/api/constant.ts

@@ -12,6 +12,7 @@ export const UPLOAD_HEADS = {
   'Content-Type': 'multipart/form-data'
 }
 
+export const CASE_INFO = `/fusion/case/getInfo`
 
 // 融合模型列表
 export const FUSE_MODEL_LIST = `/fusion/caseFusion/list`
@@ -19,6 +20,7 @@ export const FUSE_INSERT_MODEL = `/fusion/caseFusion/add`
 export const FUSE_UPDATE_MODEL = `/fusion/caseFusion/update`
 export const FUSE_DELETE_MODEL = `/fusion/caseFusion/delete`
 // 场景列表
+export const SCENE_LIST_ALL = `/fusion/api/scene/list`
 export const MODEL_LIST = `/fusion/case/sceneList`
 export const MODEL_SIGN = `/fusion/model/getInfo`
 

src/api/fuse-model.ts

@@ -7,7 +7,7 @@ import {
 } from './constant'
 import { params } from '@/env'
 
-import { Scene, SceneType } from './scene'
+import { Scene, SceneStatus, SceneType } from './scene'
 
 
 export interface FuseModelAttrs {
@@ -26,8 +26,10 @@ export interface FuseModel extends FuseModelAttrs {
   url: string
   title: string
   fusionId: number,
+  modelType: string,
   type: SceneType
   size: number,
+  status: SceneStatus,
   time: string
 }
 
@@ -46,21 +48,23 @@ interface ServiceFuseModel {
 }
 
 const serviceToLocal = (serviceModel: ServiceFuseModel): FuseModel => ({
-  show: !serviceModel.hide,
+  show: true,
   scale: serviceModel.transform.scale[0],
   opacity: serviceModel.opacity || 1,
   bottom: serviceModel.bottom || 0,
   fusionNumId: serviceModel.fusionNumId,
+  modelType: serviceModel.sceneData?.modelDateType,
   position: serviceModel.transform.position,
   rotation: serviceModel.transform.rotation,
   id: serviceModel.fusionNumId.toString(),
-  url: serviceModel.sceneData.type === SceneType.SWSS ? serviceModel.sceneData.num : serviceModel.sceneData.modelGlbUrl,
-  title: serviceModel.sceneData.name || serviceModel.sceneData.sceneName || serviceModel.sceneData.modelTitle,
-  modelId: serviceModel.sceneData.modelId,
+  url: serviceModel.sceneData ? (serviceModel.sceneData.type === SceneType.SWSS ? serviceModel.sceneData.num : serviceModel.sceneData.modelGlbUrl) : '',
+  title: serviceModel.sceneData ? (serviceModel.sceneData?.name || serviceModel.sceneData.sceneName || serviceModel.sceneData.modelTitle) : '-',
+  modelId: serviceModel.sceneData?.modelId,
   fusionId: serviceModel.fusionId,
-  type: serviceModel.sceneData.type,
-  size: serviceModel.sceneData.modelSize,
-  time: serviceModel.sceneData.createTime
+  type: serviceModel.sceneData?.type,
+  size: serviceModel.sceneData?.modelSize,
+  time: serviceModel.sceneData?.createTime,
+  status: serviceModel.sceneData ? serviceModel.sceneData.status : SceneStatus.ERR
 })
 
 const localToService = (model: FuseModel): Omit<ServiceFuseModel, 'sceneData'> => ({

src/api/guide-path.ts

@@ -15,6 +15,7 @@ interface ServiceGuidePath {
   position: string
   target: string
   time: number
+  sort: number
   speed: number
   cover: string
 }
@@ -25,6 +26,7 @@ export interface GuidePath {
   position: SceneLocalPos
   target: SceneLocalPos
   time: number
+  sort: number
   speed: number
   cover: string
 }

src/api/instance.ts

@@ -2,7 +2,7 @@ import { axiosFactory } from './setup'
 import { Message } from 'bill/index'
 import { showLoad, hideLoad } from '@/utils'
 import * as URL from './constant'
-import { ResCodeDesc } from './constant'
+import { ResCode, ResCodeDesc } from './constant'
 import { baseURL, params } from '@/env'
 
 const instance = axiosFactory()
@@ -10,6 +10,7 @@ const instance = axiosFactory()
 export const {
   axios,
   addUnsetTokenURLS,
+  delUnsetTokenURLS,
   addReqErrorHandler,
   addResErrorHandler,
   delReqErrorHandler,
@@ -23,17 +24,28 @@ export const {
   setHook
 } = instance
 
+const gotoLogin = () => {
+  const loginHref = import.meta.env.DEV ? 'http://localhost:3000' : '/'
+  location.href = loginHref + '?redirect=' + escape(location.href) + '#/login'
+}
+
 addReqErrorHandler(err => {
-  Message.error(err.message)
+  // Message.error(err.message)
+  hideLoad()
+  gotoLogin()
 })
 
 addResErrorHandler(
   (response, data) => {
-    if (response.status !== 200) {
+    if (response && response.status !== 200) {
       Message.error(response.statusText)
     } else if (data) {
       const msg = data.code && ResCodeDesc[data.code] ? ResCodeDesc[data.code] : (data?.message || data?.msg)
-      Message.error(msg)
+      if (data.code === ResCode.TOKEN_INVALID) {
+        gotoLogin()
+      } else {
+        Message.error(msg)
+      }
     }
   }
 )
@@ -45,28 +57,13 @@ addHook({
     }
   }, 
   after: (config) => {
-    if (config.url !== URL.RECORD_STATUS) {
+    if (!config || config.url !== URL.RECORD_STATUS) {
       hideLoad()
     }
   } 
 })
 
-addUnsetTokenURLS(
-  // URL.FUSE_MODEL_LIST,
-  // URL.FUSE_UPDATE_MODEL,
-  // URL.FUSE_INSERT_MODEL,
-  // URL.FUSE_DELETE_MODEL,
-  // URL.TAGGING_LIST,
-  // URL.DELETE_TAGGING,
-  // URL.INSERT_TAGGING,
-  // URL.UPDATE_TAGGING,
-  // URL.TAGGING_POINT_LIST,
-  // URL.INSERT_TAGGING_POINT,
-  // URL.UPDATE_TAGGING_POINT,
-  // URL.DELETE_TAGGING_POINT,
-)
 setDefaultURI(baseURL)
 params.token && setToken(params.token)
 
-
 export default axios

src/api/mesasure.ts

@@ -39,7 +39,7 @@ const toLocal = (serviceMeasure: ServiceMeasure) : Measure => ({
   fusionId: serviceMeasure.fusionId,
   title: serviceMeasure.meterTitle,
   desc: serviceMeasure.length.toString(),
-  positions: JSON.parse(serviceMeasure.position),
+  positions: JSON.parse(serviceMeasure.position).map((pos: any) => ({modelId: pos.fusionNumId, ...pos})),
   type: serviceMeasure.meterType === ServiceMeasureType.area 
     ? MeasureType.area
     : serviceMeasure.meterType === ServiceMeasureType.vertical
@@ -56,7 +56,7 @@ const toService = (measure: Measure, isUpdate = true): PartialProps<ServiceMeasu
     : measure.type === MeasureType.vertical
     ? ServiceMeasureType.vertical
     : ServiceMeasureType.free,
-  position: JSON.stringify(measure.positions),
+  position: JSON.stringify(measure.positions.map(item => ({...item, modelId: undefined, fusionNumId: item.modelId}))),
   length: Number(measure.desc),
 
 })

src/api/record.ts

@@ -14,7 +14,7 @@ export interface Record {
   id: string
   cover: string
   title: string
-  url: string
+  url: string | null
   sort: number
   status: RecordStatus
 }
@@ -23,7 +23,7 @@ interface ServiceRecord {
   videoFolderId: number,
   videoFolderName: string,
   videoFolderCover: string,
-  videoMergeUrl: string,
+  videoMergeUrl: string | null,
   sort: number,
   uploadStatus: RecordStatus
 }
@@ -56,8 +56,10 @@ export const fetchRecords = async () => {
 
 export const fetchRecordStatus = async (recordId: Record['id']) => {
   const step = await axios.get<number>(RECORD_STATUS, { params: { folderId: Number(recordId) } })
-  if (step === 100) {
+  if (step >= 100) {
     return RecordStatus.SUCCESS
+  } else if (step < 0) {
+    return RecordStatus.ERR
   } else {
     return RecordStatus.RUN
   }

src/api/scene.ts

@@ -1,19 +1,31 @@
 import axios from './instance'
-import { MODEL_LIST, MODEL_SIGN } from './constant'
+import { MODEL_LIST, MODEL_SIGN, SCENE_LIST_ALL } from './constant'
 import { params } from '@/env'
+import type { PagingResult } from './index'
 
 export enum SceneType {
   SWKK = 0,
   SWKJ = 1,
   SWSS = 2,
   SWMX = 3,
+  SWSSMX = 4
+}
+
+export enum SceneStatus {
+  DEL = -1,
+  RUN = 0,
+  ERR = 1,
+  SUCCESS = 2,
+  ARCHIVE = 3,
+  RERUN = 4,
 }
 
 export const SceneTypeDesc: Record<SceneType, string>  = {
   [SceneType.SWKK]: '四维看看',
   [SceneType.SWKJ]: '四维看见',
-  [SceneType.SWSS]: '四维深时',
+  [SceneType.SWSS]: '四维深时点云场景',
   [SceneType.SWMX]: '三维模型',
+  [SceneType.SWSSMX]: '四维深时obj场景'
 }
 
 export interface Scene {
@@ -25,6 +37,7 @@ export interface Scene {
   modelId: number
   modelObjUrl: string
   modelSize: number
+  status: SceneStatus
   modelTitle: string
   name: string
   num: string
@@ -44,10 +57,16 @@ const toLocalScene = (scene: Scene) => ({
 })
 
 export const fetchScenes = async () => {
-  const scenes = await axios.post<Scenes>(MODEL_LIST, { caseId: params.caseId })
+  const scenes = await axios.get<Scenes>(MODEL_LIST, { params: { caseId: params.caseId } })
+  return scenes.map(toLocalScene)
+}
+
+export const fetchScenesAll = async (params: {numList: Scene['num'][], type: SceneType}) => {
+  const scenes = await axios.post<Scenes>(SCENE_LIST_ALL, params)
   return scenes.map(toLocalScene)
 }
 
+
 export const fetchScene = async (modelId: Scene['modelId']) => {
   const scene = await axios.get<Scene>(MODEL_SIGN, { params: { modelId } })
   return toLocalScene(scene)

src/api/setup.ts

@@ -7,8 +7,8 @@ export type ResErrorHandler = <D, T extends ResData<D>>(response: AxiosResponse<
 export type ReqErrorHandler = <T>(err: Error, response: AxiosRequestConfig<T>) => void
 export type ResData<T> = { code: ResCode, message: string, data: T, msg: string }
 export type Hook = {
-  before: (config: AxiosRequestConfig) => void
-  after: (config: AxiosRequestConfig) => void
+  before?: (config: AxiosRequestConfig) => void
+  after?: (config: AxiosRequestConfig) => void
 }
 
 export const axiosFactory = () => {
@@ -114,7 +114,7 @@ export const axiosFactory = () => {
   }
 
   const matchURL = (urls: string[], config: AxiosRequestConfig<any>) => 
-    config.url && urls.includes(config.url)
+    config && config.url && urls.includes(config.url)
 
   const callErrorHandler = (key: 'req' | 'res', ...args: any[]) => {
     Promise.resolve()
@@ -127,16 +127,17 @@ export const axiosFactory = () => {
   axiosRaw.interceptors.request.use(
     config => {
       for (const hook of axiosConfig.hook) {
-        hook.before(config)
+        hook.before && hook.before(config)
       }
 
       if (!matchURL(axiosConfig.unTokenSet, config)) {
         if (!axiosConfig.token) {
-          // if (!matchURL(axiosConfig.unReqErrorSet, config)) {
-          //   const error = new Error('缺少token')
-          //   callErrorHandler('req', error, config)
-          //   throw error
-          // }
+          if (!matchURL(axiosConfig.unReqErrorSet, config)) {
+            console.log(config.url)
+            const error = new Error('缺少token')
+            callErrorHandler('req', error, config)
+            throw error
+          }
         } else {
           config.headers = {
             ...config.headers,
@@ -151,7 +152,7 @@ export const axiosFactory = () => {
   axiosRaw.interceptors.response.use(
     (response: AxiosResponse<ResData<any>>) => {
       for (const hook of axiosConfig.hook) {
-        hook.after(response.config)
+        hook.after && hook.after(response.config)
       }
 
       if (matchURL(axiosConfig.unResErrorSet, response.config)) {
@@ -173,12 +174,12 @@ export const axiosFactory = () => {
     },
     (err) => {
       for (const hook of axiosConfig.hook) {
-        hook.after(err.config)
+        hook.after && hook.after(err.config)
       }
       if (!matchURL(axiosConfig.unResErrorSet, err.config)) {
         callErrorHandler('res', err.response)
       }
-      throw new Error(err.response.statusText)
+      throw new Error(err.response && err.response.statusText)
     }
   )
 

src/api/sys.ts

@@ -1,6 +1,7 @@
-import { UPLOAD_FILE, UPLOAD_HEADS } from './constant'
+import { UPLOAD_FILE, UPLOAD_HEADS, CASE_INFO } from './constant'
 import { axios } from './instance'
 import { jsonToForm } from '@/utils'
+import { params } from '@/env'
 
 type UploadFile = LocalFile | string
 
@@ -19,4 +20,11 @@ export const uploadFile = async (file: UploadFile, suffix = '.png') => {
     })
     return url
   }
-}
+}
+
+export interface Case {
+  caseTitle: string	
+}
+
+export const getCaseInfo = () => 
+  axios.get<Case>(CASE_INFO, { params: { caseId: params.caseId } })

src/api/tagging-position.ts

@@ -12,7 +12,8 @@ import type { Tagging } from './tagging'
 interface ServicePosition {
   "tagPointId": number,
   "tagId": number,
-  "modelId": number
+  "fusionNumId": number
+  "modelId"?: number
   "tagPoint": string,
 }
 
@@ -28,7 +29,7 @@ export type TaggingPositions = TaggingPosition[]
 
 const serviceToLocal = (position: ServicePosition, taggingId?: Tagging['id']): TaggingPosition => ({
   id: position.tagPointId.toString(),
-  modelId: position.modelId ? position.modelId.toString() : '123123',
+  modelId: position.fusionNumId ? position.fusionNumId.toString() : position.modelId ? position.modelId.toString() : '123123',
   taggingId: taggingId || position.tagId.toString(),
   localPos: JSON.parse(position.tagPoint)
 })
@@ -36,7 +37,7 @@ const serviceToLocal = (position: ServicePosition, taggingId?: Tagging['id']): T
 const localToService = (position: TaggingPosition, update = false): PartialProps<ServicePosition, 'tagPointId'> => ({
   "tagPointId": update ? Number(position.id) : undefined,
   "tagId": Number(position.taggingId),
-  "modelId": Number(position.modelId),
+  "fusionNumId": Number(position.modelId),
   "tagPoint": JSON.stringify(position.localPos),
 })
 

src/api/tagging-style.ts

@@ -1,22 +1,26 @@
 import axios from './instance'
 import { TAGGING_STYLE_LIST, INSERT_TAGGING_STYLE, DELETE_TAGGING_STYLE, UPLOAD_HEADS } from './constant'
 import { jsonToForm } from '@/utils'
+import { params } from '@/env'
 interface ServiceStyle {
   iconId: number,
   iconTitle: string,
   iconUrl: string,
   isSystem: number
+  lastUse: 1 | 0
 }
 
 export interface TaggingStyle {
   id: string
   icon: string
   name: string
+  lastUse: 1 | 0
   default: boolean
 }
 
 const toLocal = (serviceStyle: ServiceStyle) : TaggingStyle => ({
   id: serviceStyle.iconId.toString(),
+  lastUse: serviceStyle.lastUse,
   name: serviceStyle.iconTitle,
   icon: serviceStyle.iconUrl,
   default: Boolean(serviceStyle.isSystem)
@@ -25,6 +29,7 @@ const toLocal = (serviceStyle: ServiceStyle) : TaggingStyle => ({
 const toService = (style: TaggingStyle): ServiceStyle => ({
   iconId: Number(style.id),
   iconTitle: style.name,
+  lastUse: style.lastUse,
   iconUrl: style.icon,
   isSystem: Number(style.default)
 
@@ -33,7 +38,8 @@ const toService = (style: TaggingStyle): ServiceStyle => ({
 export type TaggingStyles = TaggingStyle[]
 
 export const fetchTaggingStyles = async () => {
-  const data = await axios.get<ServiceStyle[]>(TAGGING_STYLE_LIST)
+  const reqParams = params.share ? { caseId: params.caseId } : { }
+  const data = await axios.get<ServiceStyle[]>(TAGGING_STYLE_LIST, { params: reqParams })
   return data.map(toLocal)
 }
 

src/app.vue

@@ -18,8 +18,10 @@
 
 <script lang="ts" setup>
 import { custom } from '@/env'
-import { computed } from 'vue'
-import { isEdit, appEl } from '@/store'
+import { computed, watchEffect } from 'vue'
+import { isEdit, prefix, appEl } from '@/store'
+import { getCaseInfo } from '@/api'
+import { currentLayout, RoutesName } from './router';
 
 const layoutClassNames = computed(() => {
   return {
@@ -42,6 +44,12 @@ const layoutStyles = computed(() => {
   return styles
 })
 
+watchEffect(() => {
+  if (currentLayout.value && currentLayout.value !== RoutesName.signModel) {
+    getCaseInfo().then(ecase => prefix.value = ecase.caseTitle)  
+  }
+})
+
 </script>
 
 <style scoped lang="scss">

src/components/actions/index.vue

@@ -6,14 +6,15 @@
       :key="action.key || i" 
       @click="clickHandler(action)"
     >
-      <ui-icon :type="action.icon" />
+      <ui-icon :type="action.icon" class="icon" />
       {{ action.text }}
     </span>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, toRaw, watchEffect, onBeforeUnmount, nextTick } from 'vue'
+import { useActive } from '@/hook';
+import { ref, toRaw, watchEffect, onBeforeUnmount, nextTick, watch } from 'vue'
 
 export type ActionsItem<T = any> = { 
   icon: string, 
@@ -34,13 +35,12 @@ const clickHandler = (select: ActionsItem) => {
     nextTick(() => selected.value && clickHandler(selected.value))
   }
 }
-
-watchEffect((onCleanup) => {
+watch(selected, (_n, _o, onCleanup) => {
   if (selected.value?.action) {
     const cleanup = selected.value.action()
     cleanup && onCleanup(cleanup)
   }
-})
+}, { flush: 'sync' })
 
 onBeforeUnmount(() => {
   selected.value = null
@@ -66,6 +66,10 @@ onBeforeUnmount(() => {
     cursor: pointer;
     transition: all .3s ease;
 
+    .icon {
+      margin-right: 4px;
+    }
+
 
     &:hover,
     &.active {

src/components/bill-ui/assets/scss/components/_input.scss

@@ -278,7 +278,7 @@
         display: flex;
         padding: 0 10px;
         align-items: center;
-        justify-content: space-between;
+        justify-content: end;
 
       }
 

src/components/bill-ui/assets/scss/components/_slide.scss

@@ -49,6 +49,7 @@
       display: inline-flex;
       align-items: center;
       font-size: 10px;
+      color: rgba(255,255,255,.6);
 
       span {
         color: var(--colors-primary-base);

src/components/bill-ui/components/slide/index.vue

@@ -6,8 +6,8 @@
             </GateContent>
         </Gate>
         <template v-if="showCtrl">
-            <span class="left" @click="prevHandler"><UIIcon type="left1" /></span>
-            <span class="right" @click="nextHandler"><UIIcon type="right" /></span>
+            <span class="left fun-ctrl" @click="prevHandler"><UIIcon type="left1" /></span>
+            <span class="right fun-ctrl" @click="nextHandler"><UIIcon type="right" /></span>
         </template>
         <slot name="attach" :active="items[index]" />
 

src/components/control-panl/style.scss

@@ -137,7 +137,7 @@
 .ctrl {
   margin-bottom: 1px;
   width: 50px;
-  height: 40px;
+  height: 50px;
   border-radius: 4px;
   cursor: pointer;
   transition: background-color .3s ease, color .3s ease;

src/components/list/index.vue

@@ -11,7 +11,7 @@
         v-for="(item, i) in data" 
         :key="rawKey ? item.raw[rawKey] : i" 
         :class="{select: item.select}"
-        @click.stop="$emit('changeSelect', item)"
+        @click="$emit('changeSelect', item)"
       >
         <div class="atom-content">
           <slot name="atom" :item="item"></slot>

src/components/static-preview/index.vue

@@ -4,24 +4,19 @@
       <ui-icon type="close" ctrl />
     </span>
     <div class="pull-preview pc">
-      <div class="preview-layer">
-        <div class="pull-meta">
-            <video v-if="type === MediaType.video" controls autoplay playsinline webkit-playsinline>
-              <source :src="staticURL" />
-            </video>
-            <iframe v-else-if="type === MediaType.web" :src="staticURL"></iframe>
-            <div v-if="type === MediaType.img" class="full-img pc">
-              <img :src="staticURL" />
-            </div>
-        </div>
-      </div>
+      <ui-slide v-if="items.length > 1" :currentIndex="current" showCtrl :items="items" showInfos>
+        <template v-slot="{ raw }">
+          <Sign :media="raw" />
+        </template>
+      </ui-slide>
+      <Sign :media="items[0]" v-else />
     </div>
   </teleport>
 </template>
 
 <script lang="ts">
-import { ref, watchEffect, defineComponent, PropType } from 'vue'
-import { getResource } from '@/env'
+import { defineComponent, PropType, ref } from 'vue'
+import Sign from './sign.vue'
 
 export enum MediaType {
   video,
@@ -29,37 +24,28 @@ export enum MediaType {
   web
 }
 
+export type MediaItem = {
+  url: Blob | string,
+  type: MediaType
+}
+
 export const Preview =  defineComponent({
   name: 'static-preview',
   props: {
-    url: {
-      type: String as PropType<Blob | string>,
+    items: {
+      type: Array as PropType<MediaItem[]>,
       required: true
     },
-    type: {
-      type: Number as PropType<MediaType>,
-      required: true
+    current: {
+      type: Number,
+      default: 1
     }
   },
   emits: {
     close: () => true
   },
-  setup(props) {
-    const staticURL = ref('')
-    watchEffect(() => {
-      const data = props.url
-      const url = typeof data === 'string'
-        ? getResource(data)
-        : URL.createObjectURL(data)
-
-      staticURL.value = url
-      return () => URL.revokeObjectURL(url)
-    })
-    
-    return {
-      staticURL,
-      MediaType
-    }
+  components: {
+    Sign
   }
 })
 

src/components/static-preview/sign.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="preview-layer">
+    <div class="pull-meta">
+      <video v-if="media.type === MediaType.video" controls autoplay playsinline webkit-playsinline>
+        <source :src="staticURL" />
+      </video>
+      <iframe v-else-if="media.type === MediaType.web" :src="staticURL"></iframe>
+      <img :src="staticURL" v-if="media.type === MediaType.img"/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, watchEffect, defineComponent, PropType } from 'vue'
+import { getResource } from '@/env'
+import { MediaType } from './index.vue'
+import type { MediaItem } from './index.vue'
+
+
+export const Preview =  defineComponent({
+  name: 'static-preview',
+  props: {
+    media: {
+      type: Object as PropType<MediaItem>,
+        required: true
+    }
+  },
+  emits: {
+    close: () => true
+  },
+  setup(props) {
+    const staticURL = ref('')
+    watchEffect(() => {
+      const data = props.media.url
+      const url = typeof data === 'string'
+        ? getResource(data)
+        : URL.createObjectURL(data)
+
+      staticURL.value = url
+      return () => URL.revokeObjectURL(url)
+    })
+    
+    return {
+      staticURL,
+      MediaType
+    }
+  }
+})
+
+
+export default Preview
+</script>
+
+<style scoped lang="scss" src="./style.scss"></style>

src/components/static-preview/style.scss

@@ -19,7 +19,7 @@
 .pull-preview {
   position: absolute;
   z-index: 9999;
-  display: flex;
+  // display: flex;
   align-items: center;
   top: 0;
   right: 0;
@@ -61,6 +61,9 @@
       width: 100%;
       overflow-y: auto;
       flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
       .content {
         margin-bottom: 10px;
@@ -73,14 +76,19 @@
   
       }
 
-      iframe,
-      video,
-      img {
+      iframe {
         width: 100%;
         height: 100%;
         display: block;
       }
 
+      video,
+      img {
+        max-width: 100%;
+        max-height: 100%;
+        display: block;
+      }
+
       video, img {
         object-fit: contain;
       }

src/components/tagging/sign.vue

@@ -44,8 +44,8 @@
 
       <Preview 
         @close="pullIndex = -1"
-        :type="MediaType.img" 
-        :url="getResource(getFileUrl(tagging.images[pullIndex]))"
+        :current="pullIndex"
+        :items="queryItems"
         v-if="!!~pullIndex" 
       />
     </div>
@@ -97,6 +97,12 @@ const taggingStyle = getTaggingStyle(props.tagging.styleId)
 
 const pullIndex = ref(-1)
 const isHover = ref(false)
+const queryItems = computed(() => 
+  props.tagging.images.map(image => ({
+    type: MediaType.img, 
+    url: getResource(getFileUrl(image))
+  }))
+)
 
 const iconClickHandler = () => {
   if (custom.showTaggingPositions.has(props.scenePos)) {

src/env/index.ts

@@ -1,7 +1,7 @@
 import { stackFactory, flatStacksValue, strToParams } from '@/utils'
 import { ref } from 'vue'
 
-import type { FuseModel, TaggingPosition } from '@/store'
+import type { FuseModel, TaggingPosition, View } from '@/store'
 
 export const viewModeStack = stackFactory(ref<'full' | 'auto'>('auto'))
 export const showToolbarStack = stackFactory(ref<boolean>(false))
@@ -10,14 +10,15 @@ export const showRightPanoStack = stackFactory(ref<boolean>(true))
 export const showLeftPanoStack = stackFactory(ref<boolean>(false))
 export const showLeftCtrlPanoStack = stackFactory(ref<boolean>(true))
 export const showRightCtrlPanoStack = stackFactory(ref<boolean>(true))
-export const showBottomBarStack = stackFactory(ref<boolean>(false))
+export const showBottomBarStack = stackFactory(ref<boolean>(false), true)
 export const bottomBarHeightStack = stackFactory(ref<string>('60px'))
 export const showTaggingsStack = stackFactory(ref<boolean>(true))
-export const showMeasuresStack = stackFactory(ref<boolean>(false))
+export const showMeasuresStack = stackFactory(ref<boolean>(true))
 export const currentModelStack = stackFactory(ref<FuseModel | null>(null))
-export const showModelsMapStack = stackFactory(ref<Map<FuseModel, boolean>>(new Map), true)
+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>())
 
 export const custom = flatStacksValue({
   viewMode: viewModeStack,
@@ -34,16 +35,20 @@ export const custom = flatStacksValue({
   showTaggingPositions: showTaggingPositionsStack,
   showBottomBar: showBottomBarStack,
   bottomBarHeight: bottomBarHeightStack,
-  showHeadBar: showHeadBarStack
+  showHeadBar: showHeadBarStack,
+  currentView: currentViewStack
 })
 
 
 export const params = strToParams(location.search) as unknown as Params
 params.caseId = Number(params.caseId)
+params.share = Boolean(Number(params.share))
 export type Params = { 
   caseId: number,
   baseURL?: string,
   modelId?: string,
+  m?: string
+  share: boolean,
   token?: string
 }
 

src/layout/edit/fuse-edit.vue

@@ -83,6 +83,12 @@ watch(router.currentRoute, (_n, _, onClean) => {
     ]))
   }
 }, { flush: 'post', immediate: true })
+
+watchEffect((onCleanup) => {
+  if (!fuseModels.value.length) {
+    onCleanup(showRightPanoStack.push(ref(false)))
+  }
+})
 </script>
 
 <style lang="scss" scoped>

src/layout/edit/header/index.vue

@@ -22,13 +22,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watchEffect } from 'vue'
+import { computed } from 'vue'
 import { isEdit, title, isOld, leave, save } from '@/store'
 
 const props = defineProps<{ title?: string }>()
-const sysTitle = computed(() => props.title || title)
-
-watchEffect(() => (document.title = sysTitle.value))
+const sysTitle = computed(() => props.title || title.value)
 </script>
 
 <style lang="sass" scoped>

src/layout/edit/scene-select.vue

@@ -11,20 +11,30 @@
   >
     <div>
       <div className='model-header'>
+        <p class="header-desc">已选择数据<span>（ {{ selectIds.length }} ）</span></p>
         <Search
           className='content-header-search'
           placeholder="输入名称搜索" 
+          v-model:value="keyword"
+          allow-clear
           style="width: 264px"
-          @search="val => keyword = val"
         />
       </div>
       <Table 
+        v-if="filterScenes.length"
         :row-key="record => record.modelId"
         :columns="cloumns"
         :rowSelection="rowSelection"
         :data-source="filterScenes"
         :pagination="false"
       />
+      <div style="padding: 1px;" v-else>
+        <Empty 
+          :description="keyword.length ? '暂无搜索结果': '暂无结果'" 
+          :image="Empty.PRESENTED_IMAGE_SIMPLE"
+          className="ant-empty ant-empty-normal" 
+        />
+      </div>
     </div>
   </Modal>
 
@@ -34,11 +44,11 @@
 </template>
 
 <script lang="ts" setup>
-import { Modal, Input, Table } from 'ant-design-vue'
-import { computed, nextTick, ref, watchEffect } from 'vue';
-import { scenes, save } from '@/store'
+import { Modal, Input, Table, Empty } from 'ant-design-vue'
+import { computed, nextTick, ref, watch, watchEffect } from 'vue';
+import { scenes, save, SceneTypeDesc } from '@/store'
 import { createLoadPack } from '@/utils'
-import { fuseModels, createFuseModels, addFuseModel, fuseModelsLoaded } from '@/store'
+import { fuseModels, createFuseModels, addFuseModel, fuseModelsLoaded, initialScenes } from '@/store'
 
 import type { Scene } from '@/api'
 
@@ -50,7 +60,12 @@ const selectIds = computed(() => fuseModels.value.map(item => item.modelId))
 const visible = ref(false)
 const keyword = ref('')
 const filterScenes = computed(
-  () => scenes.value.filter(item => item.name && item.modelId && item.name.includes(keyword.value))
+  () => scenes.value
+    .filter(item => item.name && item.modelId && item.name.includes(keyword.value))
+    .map(scene => ({
+      ...scene,
+      type: SceneTypeDesc[scene.type]
+    }))
 )
 const selects = ref<Key[]>(selectIds.value)
 const rowSelection: any = ref({
@@ -64,12 +79,18 @@ const rowSelection: any = ref({
 })
 const cloumns = [
   {
+    width: "400px",
     title: '名称',
     dataIndex: 'name',
     key: 'name',
   },
   {
-    title: '拍摄时间',
+    title: '类型',
+    dataIndex: 'type',
+    key: 'type',
+  },
+  {
+    title: '拍摄/创建时间',
     dataIndex: 'createTime',
     key: 'createTime',
   }
@@ -82,27 +103,39 @@ const okHandler = createLoadPack(async () => {
     .map(addFuseModel)
 
   await Promise.all(addPromises)
-
   await new Promise<void>((resolve) => {
     nextTick(() => {
       const stop = watchEffect(() => {
         if (fuseModelsLoaded.value) {
-          nextTick(() => stop())
-          resolve()
+          nextTick(() => {
+            stop()
+            resolve()
+          })
         }
+        
       })
     })
   })
   await save()
   visible.value = false
 })
+
+watch(visible, (visible, oldvisible) => {
+  if (visible !== oldvisible) {
+    keyword.value = ''
+    selects.value = selectIds.value
+
+    visible && initialScenes()
+  }
+})
 </script>
 
 <style lang="less" scoped>
 .model-header {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   padding-bottom: 24px;
+  align-items: center;
 }
 </style>
 
@@ -115,5 +148,14 @@ const okHandler = createLoadPack(async () => {
   // .ant-table-tbody > tr.ant-table-row-selected > td {
   //   background: none;
   // }
+  .model-header .header-desc {
+    margin-bottom: 0;
+  }
+  .model-header .header-desc span {
+    color: @primary-color;
+  }
+}
+.ant-modal-root .ant-table-tbody > tr > td {
+  word-break: break-all;
 }
 </style>

src/layout/model-list/index.vue

@@ -23,6 +23,7 @@ import ModelSign from './sign.vue'
 import { fuseModels, getFuseModelShowVariable } from '@/store'
 
 import type { FuseModel } from '@/store'
+import { currentModel, fuseModel } from '@/model'
 
 export type ModelListProps = { 
   title?: string, 
@@ -41,19 +42,13 @@ defineEmits<{
 const modelList = computed(() => 
   fuseModels.value.map(model => ({
     raw: model,
-    select: custom.currentModel === model
+    select: custom.currentModel === model && currentModel.value === fuseModel
   }))
 )
 
 const modelChangeSelect = (model: FuseModel) => {
   if (getFuseModelShowVariable(model).value) {
-    if (custom.currentModel !== model) {
-      getSceneModel(model)?.changeSelect(true)
-      custom.currentModel = model
-    } else {
-      getSceneModel(custom.currentModel)?.changeSelect(false)
-      custom.currentModel = null
-    }
+    custom.currentModel = custom.currentModel !== model ? model : null
   }
 }
 

src/layout/model-list/sign.vue

@@ -1,31 +1,43 @@
 <template>
-  <div class="model-header" @click.stop="!model.error && $emit('click')">
-    <p>{{ model.title }}</p>
-    <div class="model-action" @click.stop>
-      <ui-input type="checkbox" v-model="show" :class="{disabled: model.error}"/>
-      <ui-icon 
-        v-if="custom.modelsChangeStore" 
-        type="del" 
-        ctrl 
-        @click="$emit('delete')" 
-      />
+  <div @click="!model.error && $emit('click')" class="sign-layout">
+    <div class="model-header">
+      <p>{{ model.title }}</p>
+      <div class="model-action">
+        <ui-input 
+          type="checkbox" 
+          v-model="show" 
+          @click.stop 
+          :class="{disabled: model.error}"
+        />
+        <ui-icon 
+          v-if="custom.modelsChangeStore" 
+          type="del" 
+          ctrl 
+          @click="$emit('delete')" 
+        />
+      </div>
+    </div>
+    <div class="model-desc"  v-if="active">
+      <p><span>数据来源：</span>{{ SceneTypeDesc[model.type] }}</p>
+      <p v-if="model.type !== SceneType.SWSS"><span>数据大小：</span>{{ model.size }}</p>
+      <p><span>拍摄时间：</span>{{ model.time }}</p>
     </div>
-  </div>
-  <div class="model-desc" @click="$emit('click')" v-if="custom.currentModel === model">
-    <p><span>数据来源：</span>{{ SceneTypeDesc[model.type] }}</p>
-    <p><span>数据大小：</span>{{ model.size }}</p>
-    <p><span>拍摄时间：</span>{{ model.time }}</p>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { getFuseModelShowVariable, SceneTypeDesc } from '@/store'
+import { getFuseModelShowVariable, SceneTypeDesc, SceneType } from '@/store'
 import { custom } from '@/env'
 
 import type { FuseModel } from '@/store'
+import { computed } from 'vue';
+import { currentModel, fuseModel } from '@/model';
 
 type ModelProps = { model: FuseModel, canChange?: boolean }
 const props = defineProps<ModelProps>()
+const active = computed(() => 
+  custom.currentModel === props.model && currentModel.value === fuseModel
+)
 
 type ModelEmits = {
   (e: 'changeSelect', selected: boolean): void

src/layout/model-list/style.scss

@@ -7,6 +7,10 @@
   p {
     font-size: 14px;
     color: #fff;
+    height: 1.5em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 
@@ -19,7 +23,13 @@
 .model-action {
   display: flex;
   align-items: center;
+  flex: none;
   > * {
     margin-left: 20px;
   }
 }
+
+.sign-layout {
+  margin: -20px 0;
+  padding: 20px 0;
+}

src/layout/right-fill-pano.vue

@@ -6,13 +6,22 @@
     :class="{ active: custom.showRightPano }">
     <ui-icon type="extend" class="icon"></ui-icon>
   </span>
-  <ui-editor-toolbox :toolbox="true" disabledAnimation>
-    <slot></slot>
+  <ui-editor-toolbox :toolbox="true" disabledAnimation :class="{ flex: $slots.header }">
+    <template v-if="$slots.header">
+      <div class="header">
+        <slot name="header"></slot>
+      </div>
+      <div class="content">
+        <slot></slot>
+      </div>
+    </template>
+    <slot v-else></slot>
   </ui-editor-toolbox>
 </template>
 
 <script setup lang="ts">
 import { custom } from '@/env'
+
 </script>
 
 <style lang="scss" scoped>
@@ -54,4 +63,20 @@ import { custom } from '@/env'
   }
 }
 
+.flex {
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .header {
+    flex: none;
+  }
+
+  .content {
+    flex: 1;
+    overflow-y: auto;
+    margin: 0 -20px;
+    padding: 0 20px;
+  }
+}
 </style>

src/layout/scene-list/index.vue

@@ -4,25 +4,30 @@
       <slot name="action" />
     </template>
     <template #atom="{ item }">
-      <div 
-        v-if="item.raw === fuseModel" 
+      <div v-if="item.raw === fuseModel" 
         @click="updateCurrent(item.raw)"
       >
         <ModelList
           class="scene-model-list"
           :class="{active: current === fuseModel}"
           :title="getModelTypeDesc(fuseModel as any)"
-          :show-content="current === fuseModel"
+          :show-content="showModelList"
         >
           <template #action>
             <ui-icon 
-              :type="`pull-${current === fuseModel ? 'up' : 'down'}`" 
+              :type="`pull-${showModelList ? 'up' : 'down'}`" 
+              @click="showModelList = !showModelList"
               ctrl 
             />
           </template>
         </ModelList>
       </div>
-      <div class="scene" @click="updateCurrent(item.raw)" v-else>
+      <div 
+        class="scene" 
+        :class="{disabled: item.raw.status !== SceneStatus.SUCCESS}" 
+        @click="updateCurrent(item.raw)" 
+        v-else
+      >
         <p>{{ item.raw.name }}</p>
         <p>{{ SceneTypeDesc[item.raw.type as SceneType] }}</p>
       </div>
@@ -31,8 +36,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { scenes, SceneType, SceneTypeDesc } from '@/store'
+import { computed, nextTick, ref, watch } from 'vue'
+import { scenes, SceneType, SceneTypeDesc, fuseModels, SceneStatus } from '@/store'
 import List from '@/components/list/index.vue'
 import ModelList from '../model-list/index.vue'
 import { fuseModel, getModelTypeDesc } from '@/model'
@@ -42,6 +47,7 @@ import type { Scene } from '@/store'
 
 const emit = defineEmits<{ (e: 'update:current', data: ModelType): void }>()
 const props = defineProps<{ current: ModelType }>()
+const showModelList = ref(true)
 
 const list = computed(() => {
   const sceneList = scenes.value.map(scene => ({
@@ -50,7 +56,11 @@ const list = computed(() => {
       && (props.current.num === scene.num )
       && props.current.type === scene.type
   }))
-  return [{ raw: fuseModel }, ...sceneList]
+  if (fuseModels.value.length) {
+    return [{ raw: fuseModel }, ...sceneList]
+  } else {
+    return sceneList
+  }
 })
 
 const updateCurrent = (scene: FuseModelType | Scene) => {
@@ -61,6 +71,12 @@ const updateCurrent = (scene: FuseModelType | Scene) => {
   }
 }
 
+const stopWatch = watch(list, () => {
+  if (!list.value.some(model => model.raw === fuseModel)) {
+    updateCurrent(list.value[0].raw as any)
+    nextTick(() => stopWatch())
+  }
+}, { immediate: true })
 </script>
 
 <style lang="scss">
@@ -70,6 +86,12 @@ const updateCurrent = (scene: FuseModelType | Scene) => {
 
 .scene {
   padding: 0 20px;
+
+  p {
+    height: 1.5em;
+    overflow: hidden;
+    text-overflow: ellipsis
+  }
 }
 
 .scene-model-list.list {

src/layout/show/index.vue

@@ -1,34 +1,61 @@
 <template>
   <template v-if="loaded">
-    <SlideMenu />
-    
-    <router-view v-slot="{ Component }">
-      <keep-alive>
-        <component :is="Component" />
-      </keep-alive>
-    </router-view>
+    <div :class="{ hideLeft: !custom.showLeftPano }">
+      <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>
 
 <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 { initialFuseModels, initialScenes } from '@/store'
-
+import { 
+  initialFloders, 
+  initialFloderTypes, 
+  initialFuseModels, 
+  initialRecords, 
+  initialScenes, 
+  initialViews,
+  defTitle,
+  initialTaggingStyles,
+  initialTaggings,
+  initialMeasures,
+  initialGuides
+} from '@/store'
 
 const loaded = ref(false)
 const initialSys = async () => {
   await Promise.all([
     initialFuseModels(),
-    initialScenes()
+    initialScenes(),
+    initialViews(),
+    initialRecords(),
+    initialFloders(),
+    initialFloderTypes(),
+    initialTaggingStyles(),
+    initialTaggings(),
+    initialGuides()
   ])
+  await initialMeasures()
   loaded.value = true
   loadModel(fuseModel)
   custom.showLeftPano = true
 }
 initialSys()
+defTitle.value = ''
 </script>
 
 <style>
@@ -36,4 +63,9 @@ initialSys()
   --editor-menu-width: 80px;
   --editor-head-height: 0px;
 }
+
+.hideLeft {
+  --editor-menu-left: calc(-1 * var(--editor-menu-width));
+  --left-pano-left: calc(var(--editor-menu-left) + var(--editor-menu-width) - var(--left-pano-width)) !important
+}
 </style>

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 as any)"
     >
       <ui-icon :type="item.icon" :tip="item.title" class="icon" />
     </div>
@@ -12,26 +12,56 @@
 </template>
 
 <script lang="ts" setup>
-import { metas, RoutesName, router } from '@/router'
-
-const items = [
-  {
-    name: RoutesName.summaryShow,
-    ...metas[RoutesName.summaryShow]
-  },
-  {
-    name: RoutesName.viewShow,
-    ...metas[RoutesName.viewShow]
-  },
-  {
-    name: RoutesName.recordShow,
-    ...metas[RoutesName.recordShow]
-  },
-  {
-    name: RoutesName.folderShow,
-    ...metas[RoutesName.folderShow]
+import { metas, RoutesName, router, getRouteConfig } from '@/router'
+import { views, records, floders } from '@/store';
+import { computed } from 'vue';
+
+import type { RouteRaw } from '@/router'
+
+export type MenuItem = {
+  name: RoutesName,
+  config: RouteRaw,
+} & (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]
+    }
+  ]
+
+  if (views.value.length) {
+    items.push({
+      name: RoutesName.viewShow,
+      config: getRouteConfig(RoutesName.viewShow),
+      ...metas[RoutesName.viewShow]
+    }) 
+  }
+
+  if (records.value.length) {
+    items.push({
+      name: RoutesName.recordShow,
+      config: getRouteConfig(RoutesName.recordShow),
+      ...metas[RoutesName.recordShow]
+    }) 
   }
-]
+
+  if (floders.value.length) {
+    items.push({
+      name: RoutesName.folderShow,
+      config: getRouteConfig(RoutesName.folderShow),
+      ...metas[RoutesName.folderShow]
+    }) 
+  }
+
+  return items
+})
 </script>
 
 <style lang="scss" scoped>
@@ -42,11 +72,12 @@ const items = [
   background-color: var(--editor-menu-back);
   position: fixed;
   left: var(--editor-menu-left);
-  top: var(--editor-head-height);
+  top: calc(var(--editor-head-height) + var(--header-top));
   bottom: 0;
   z-index: 2000;
   overflow: hidden;
   backdrop-filter: blur(4px);
+  transition: all .3s ease;
 
   > div {
     height: 70px;

src/main.ts

@@ -1,12 +1,58 @@
-import { createApp } from 'vue'
+import { createApp, watchEffect } from 'vue'
 import './style.scss'
 import App from './app.vue'
 import Components from 'bill/index'
 import router from './router'
+import { params } from '@/env'
+import { addHook, addUnsetTokenURLS, delHook, delUnsetTokenURLS } from '@/api'
+import { currentLayout, RoutesName } from './router';
+import * as URL from '@/api/constant'
 
 const app = createApp(App)
 app.use(Components)
 app.use(router)
 app.mount('#app')
 
+
+watchEffect((onCleanup) => {
+  if ([RoutesName.show, RoutesName.signModel].includes(currentLayout.value!)) {
+    const untokenURLS = params.share 
+      ? [
+          URL.FUSE_MODEL_LIST,
+          URL.MODEL_LIST,
+          URL.TAGGING_LIST,
+          URL.TAGGING_POINT_LIST,
+          URL.TAGGING_STYLE_LIST,
+          URL.MESASURE_LIST,
+          URL.GUIDE_LIST,
+          URL.GUIDE_PATH_LIST,
+          URL.RECORD_LIST,
+          URL.RECORD_FRAGMENT_LIST,
+          URL.VIEW_LIST,
+          URL.FOLDER_TYPE_LIST,
+          URL.FLODER_LIST,
+          URL.MODEL_SIGN,
+          URL.CASE_INFO
+        ]
+      : []
+      
+    const apiHook = {
+      before(config: any) {
+        const isShare = Number(params.share)
+        if (config.headers) {
+          config.headers.share = isShare
+        } else {
+          config.headers = { share: isShare }
+        }
+      }
+    }
+    addHook(apiHook)
+    addUnsetTokenURLS(...untokenURLS)
+    onCleanup(() => {
+      delHook(apiHook)
+      delUnsetTokenURLS(...untokenURLS)
+    })
+  }
+}, { flush: 'sync' })
+
 export default app

src/model/app.vue

@@ -1,14 +1,16 @@
 <template>
   <iframe class="external" :src="url" ref="iframeRef" v-if="url"></iframe>
   <div class="laser-layer" v-show="!url">
-    <div class="scene-canvas" ref="fuseRef"></div>
+    <div class="scene-canvas" ref="fuseRef">
+      <div id="direction"></div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watchEffect, computed, watch, onMounted, nextTick } from 'vue'
+import { defineComponent, ref, watchEffect, computed, watch, nextTick } from 'vue'
 import { SceneType } from '@/store'
-import { params, showModelsMapStack } from '@/env'
+import { params } from '@/env'
 import { fuseModel, modelProps } from './index'
 import { modelSDKFactory } from './platform'
 
@@ -38,7 +40,8 @@ export const Model = defineComponent({
         [SceneType.SWKK]: `/swkk/spg.html?m=${scene.value.num}`,
         [SceneType.SWKJ]: `/swkk/spg.html?m=${scene.value.num}`,
         [SceneType.SWSS]: `/swss/index.html?m=${scene.value.num}`,
-        [SceneType.SWMX]: `index.html?caseId=${params.caseId}&modelId=${scene.value.num}&token=${params.token}#sign-model`
+        [SceneType.SWSSMX]: `/swkk/spg.html?m=${scene.value.num}`,
+        [SceneType.SWMX]: `index.html?caseId=${params.caseId}&modelId=${scene.value.num}&share=1#sign-model`
       }
       return urls[type]
     })
@@ -50,10 +53,6 @@ export const Model = defineComponent({
       async (type, oldType, onCleanup) => {
         const callback = modelProps.callback
 
-        if (oldType === fuseModel) {
-          onCleanup(showModelsMapStack.push(ref(new Map())))
-        }
-
         await nextTick()
         const { typePromise, typeCleanup } = typeChange()
         const modelPromise = modelSDKFactory(type, type === fuseModel ? fuseRef.value! : iframeRef.value!)
@@ -81,7 +80,6 @@ export default Model
 </script>
 
 <style scoped lang="scss">
-.external,
 .laser-layer {
   position: absolute;
   z-index: 1;
@@ -98,6 +96,19 @@ export default Model
 }
 
 .external {
+  position: absolute;
+  z-index: 1;
   border: none;
+  top: calc(var(--editor-head-height) + var(--header-top));
+  left: 0;
+  height: calc(100% - (var(--editor-head-height) + var(--header-top)));
+  width: 100%;
+}
+
+#direction {
+  right: calc(var(--editor-menu-right) + var(--editor-toolbox-width)) !important;
+  top: calc(var(--header-top) + var(--editor-head-height)) !important;
+  margin: 10px;
+  transition: top .3s ease, right .3s ease;
 }
 </style>

src/model/index.ts

@@ -1,5 +1,5 @@
 import App from './app.vue'
-import { appEl, SceneTypeDesc } from '@/store'
+import { appEl, SceneTypeDesc, scenes } from '@/store'
 import { mount, deepIsRevise } from '@/utils'
 import { reactive, ref } from 'vue'
 
@@ -22,6 +22,14 @@ export const getModelTypeDesc = (model: ModelType) => {
     return SceneTypeDesc[model.type]
   }
 }
+export const getModelDesc = (model: ModelType) => {
+  console.log(model)
+  if (model === fuseModel) {
+    return '融合场景'
+  } else {
+    return scenes.value.find(scene => scene.num === model.num && scene.type === model.type)?.name
+  }
+}
 
 const _loadModel = (() => {
   let oldModelType: ModelType

src/model/platform.ts

@@ -10,6 +10,7 @@ export async function modelSDKFactory (
   type: ModelType, 
   dom: HTMLDivElement | HTMLIFrameElement
 ): Promise<ModelExpose> {
+  console.log(type, dom)
   if (type === fuseModel) {
     if (!fuseInitialed) {
       await initialSDK({ layout: dom })
@@ -146,7 +147,7 @@ export async function exposeFactory(type: ModelType, win?: any): Promise<ModelEx
       }
     }
   }
-  platforms[SceneType.SWKJ] = platforms[SceneType.SWKK]
+  platforms[SceneType.SWSSMX] = platforms[SceneType.SWKJ] = platforms[SceneType.SWKK]
   platforms[SceneType.SWMX] = {
     getSDK: async () => findObjectAttr(win , '__sdk'),
     expose: platforms[fuseModel].expose

src/router/config.ts

@@ -1,8 +1,7 @@
 import { RoutesName, paths, metas } from './constant'
 
-import type { RouteRecordRaw } from 'vue-router'
-
-export const routes: RouteRecordRaw[] = [
+export type RouteRaw = (typeof routes)[number]
+export const routes = [
   {
     path: paths[RoutesName.fuseEdit],
     name: RoutesName.fuseEdit,

src/router/constant.ts

@@ -81,6 +81,10 @@ export const metas = {
     title: '测量'
   },
 
+  [RoutesName.view]: { sysTitle: '视图提取' },
+  [RoutesName.record]: { sysTitle: '屏幕录制' },
+  [RoutesName.show]: { sysTitle: '' },
+
 
   [RoutesName.summaryShow]: {
     icon: 'list-view',
@@ -88,7 +92,8 @@ export const metas = {
   },
   [RoutesName.viewShow]: {
     icon: 'list-scene',
-    title: '视图'
+    title: '视图',
+    
   },
   [RoutesName.recordShow]: {
     icon: 'list-record',

src/router/index.ts

@@ -4,34 +4,47 @@ import { computed } from 'vue'
 import { RoutesName } from './constant'
 import { metas } from './constant'
 
-import type { RouteRecordRaw, RouteRecordName } from 'vue-router'
+import { RouteRaw } from './config'
 
 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: RoutesName, raw: RouteRaw[] = routes): void | RouteRaw => {
+  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: RoutesName, raw: RouteRaw[] = routes): RoutesName[] => {
+  let current = getRouteTree(name, raw)
+  const names: RoutesName[] = []
+  while (current) {
+    names.push(current.name!)
+    current = current.children && current.children[0]
+  }
+  return names
+}
+
+export const getRouteConfig = (name: RoutesName, raw: RouteRaw[] = routes): RouteRaw | void => {
+  let current = getRouteTree(name, raw)
+  while (current?.children && current.children[0]) {
+    current = current.children[0]
+  }
+  return current
+}
+
+export const currentRouteNames = computed(() => getRouteNames(router.currentRoute.value.name as RoutesName, routes))
 
 export const currentLayout = computed(() => {
   const names = currentRouteNames.value
-  const layoutNames = [RoutesName.fuseEditSwitch] as const
+  const layoutNames = [RoutesName.fuseEditSwitch, RoutesName.show, RoutesName.sceneEdit, RoutesName.signModel] as const
   return layoutNames.find(name => names.includes(name))
 })
 

src/sdk/association.ts

@@ -18,6 +18,7 @@ import {
   togetherCallback
 } from '@/utils'
 import { 
+  dynamicAddedModelIds,
   fuseModels, 
   taggings, 
   isEdit, 
@@ -28,8 +29,9 @@ import {
   measures,
   fuseModelsLoaded,
   getMeasureIsShow,
-  unSetModelUpdate
+  SceneStatus
 } from '@/store'
+import { currentLayout, RoutesName } from '@/router'
 
 import TaggingComponent from '@/components/tagging/list.vue'
 
@@ -72,14 +74,30 @@ const associationModels = (sdk: SDK) => {
         continue;
       }
 
+      if (item.status !== SceneStatus.SUCCESS) {
+        item.error = true
+        item.loaded = true
+        continue;
+      }
+
       const itemRaw = toRaw(item)
-      console.error('loaded')
-      const sceneModel = sdk.addModel({
-        ...itemRaw,
-        ...modelRange,
-        type: item.type === SceneType.SWSS ? 'laser' : 'glb',
-        url: item.type === SceneType.SWSS ? item.url : getResource(item.url)
-      })
+      let sceneModel: SceneModel
+      console.error('loaded', itemRaw)
+      try {
+        sceneModel = sdk.addModel({
+          ...itemRaw,
+          ...modelRange,
+          mode: RoutesName.signModel === currentLayout.value! ? 'single' : 'many',
+          isDynamicAdded: dynamicAddedModelIds.value.some(id => itemRaw.id === id),
+          type: item.type === SceneType.SWSS ? 'laser' : item.modelType,
+          url: item.type === SceneType.SWSS ? item.url : getResource(item.url)
+        })
+      } catch(e) {
+        console.error('模型加载失败', e)
+        item.error = true
+        return;
+      }
+
       sceneModelMap.set(itemRaw, sceneModel)
 
       let changeId: NodeJS.Timeout
@@ -102,9 +120,10 @@ const associationModels = (sdk: SDK) => {
               z: round(transform.position.z, 5),
             }
           }
-          if (transform.bottom) {
-            transform.bottom = round(transform.bottom, 2)
-          }
+          delete transform.bottom
+          // if (transform.bottom) {
+          //   transform.bottom = round(transform.bottom, 2)
+          // }
           if (transform.scale) {
             transform.scale = round(transform.scale, 2)
           }
@@ -116,19 +135,19 @@ const associationModels = (sdk: SDK) => {
           }
           
           if (deepIsRevise(update, transform)) {
-
-          console.error(update, transform)
             unSet(() => Object.assign(item, transform))
           }
         }, 16)
       })
 
       sceneModel.bus.on('changeSelect', select => {
-        if (custom.currentModel === item && !select) {
-          custom.currentModel = null
-        } else if (custom.currentModel !== item && select) {
-          custom.currentModel = item
-        }
+        unSet(() => {
+          if (custom.currentModel === item && !select) {
+            custom.currentModel = null
+          } else if (custom.currentModel !== item && select) {
+            custom.currentModel = item
+          }
+        })
       })
       showLoad()
       sceneModel.bus.on('loadDone', () => {
@@ -138,6 +157,7 @@ const associationModels = (sdk: SDK) => {
       sceneModel.bus.on('loadError', () => {
         item.error = true
         item.show = false
+        
         custom.showModelsMap.delete(item)
         hideLoad()
       })
@@ -158,50 +178,66 @@ const associationModels = (sdk: SDK) => {
           watch(
             () => item.bottom, 
             () => isUnSet || getSceneModel(item)?.changeBottom(item.bottom), 
-            { immediate: true }
+            // { immediate: true }
           )
           watch(
             () => item.opacity, 
             () => isUnSet || getSceneModel(item)?.changeOpacity(item.opacity), 
-            { immediate: true }
+            // { immediate: true }
           )
           watch(
             () => item.scale, 
             () => isUnSet || getSceneModel(item)?.changeScale(item.scale), 
-            { immediate: true }
+            // { immediate: true }
           )
           watch(
             () => item.position, 
             () => {
               if (!isUnSet) {
-                console.log('set position', item.position)
                 getSceneModel(item)?.changePosition(item.position)
               }
             }, 
-            { immediate: true }
+            // { immediate: true }
           )
           watch(
             () => item.rotation, 
             () => {
               if (!isUnSet) {
-                console.log('set rotation', item.rotation)
                 getSceneModel(item)?.changeRotation(item.rotation)
               }
             }, 
-            { immediate: true }
+            // { immediate: true }
           )
           watch(
             () => modelShow.value, 
-            () => isUnSet || getSceneModel(item)?.changeShow(modelShow.value), 
+            () => {
+              const sceneModel = getSceneModel(item)
+              if (!isUnSet && sceneModel) {
+                sceneModel.changeSelect(false)
+                sceneModel.changeShow(modelShow.value)
+              }
+            }, 
             { immediate: true }
           )
 
+          watch(
+            () => custom.currentModel === item,
+            (selected) => {
+              isUnSet || console.log(item.title, selected, getSceneModel(item))
+              isUnSet || getSceneModel(item)?.changeSelect(selected)
+            }
+          )
+
           stopLoadedWatch()
         }
       },
       // { immediate: true }
     )
   })
+
+  watch(() => custom.currentModel, () => {
+
+  })
 }
 
 
@@ -319,7 +355,7 @@ const fullView = async (fn: () => void) => {
 }
 
 export const isScenePlayIng = ref(false)
-export const playSceneGuide = async (paths: SceneGuidePath[], changeIndexCallback?: (index: number) => void) => {
+export const playSceneGuide = async (paths: SceneGuidePath[], changeIndexCallback?: (index: number) => void, forceFull = false) => {
   if (isScenePlayIng.value) {
     throw new Error('导览正在播放')
   }
@@ -330,7 +366,7 @@ export const playSceneGuide = async (paths: SceneGuidePath[], changeIndexCallbac
   changeIndexCallback && sceneGuide.bus.on('changePoint', changeIndexCallback)
 
   const quitHandler = () => (isScenePlayIng.value = false)
-  const clearHandler = isEdit.value ? null : await fullView(quitHandler)
+  const clearHandler = !forceFull && isEdit.value ? null : await fullView(quitHandler)
   if (!clearHandler) {
     sysBus.on('leave', quitHandler, { last: true })
     sysBus.on('save', quitHandler, { last: true })

src/sdk/cover/index.js

@@ -9,9 +9,18 @@ export const enter = (dom, isLocal) => {
     //Potree.fileServer = axios 
     Potree.settings.libsUrl = './lib/'
     
-    const tagLimitDis = 8;
+    if(location.host === 'mix3d.4dkankan.com' ){//正式环境
+        Potree.settings.urls.prefix = Potree.settings.urls.prefix6  
+        Potree.settings.webSite = 'datav1' 
+    }
+    
     
+    Potree.settings.notAdditiveBlending = true
     
+    const tagLimitDis = 8;
+
+    Potree.settings.showCompass = true
+    Potree.settings.compassDom = dom.querySelector('#direction')
     
     let {THREE} = Potree.mergeEditStart(dom)
     let MergeEditor = viewer.modules.MergeEditor
@@ -249,11 +258,11 @@ export const enter = (dom, isLocal) => {
             const camera = viewer.scene.getActiveCamera()
             const target = viewer.scene.view.getPivot().clone()
             const position = viewer.scene.view.position.clone() 
-            console.log('getPose',position, target)
+            //console.log('getPose',position, target)
             return { position, target }
         }, 
         comeTo(o = {}) {
-            console.log('comeTo',o.position, o.target)
+            //console.log('comeTo',o.position, o.target)
             //飞到某个点  
             if(o.modelId){ 
                 ['position','target'].forEach(e=>{
@@ -410,7 +419,7 @@ export const enter = (dom, isLocal) => {
             } 
             */
             
-            console.log('enterSceneGuide',pathArr)
+            //console.log('enterSceneGuide',pathArr)
             
             let data = {
                 duration: pathArr.slice(0,pathArr.length-1).reduce(function(total, currentValue ){return total+currentValue.time}, 0), //总时长(要去掉最后一个，因为已到终点，该点time无意义)
@@ -469,15 +478,16 @@ export const enter = (dom, isLocal) => {
         //scaleRange: { min, max }, opacityRange: { min, max }, bottomRange: { min, max } })
         
         addModel(props){ 
-            
+ 
+            //console.log(props.isDynamicAdded, props.mode)
+ 
             let bus = mitt()  
             //console.log('addModel',props)
-            props.isFirstLoad = props.bottom == void 0 //在编辑时用户添加的
-            if(props.opacity == void 0)  props.opacity = 1
+            props.isFirstLoad = isLocal ? props.bottom == void 0 : (props.isDynamicAdded || props.mode == 'single')  // 在编辑时用户添加的 或 展示单个模型 （props.mode='single'模型展示页， props.mode='many'融合页）
+            if(props.opacity == void 0)  props.opacity = 1 
+            if(props.type == 'obj') props.type = 'glb'
             props.scale /= 100
             
-            
-            
             if(!props.isFirstLoad){ 
                 if(autoLoads.length == 0){ //首次加载
                     setTimeout(()=>{
@@ -494,7 +504,7 @@ export const enter = (dom, isLocal) => {
                 autoLoads.push(props)
                 readyToAddModel = false               
             }else{
-                readyToAddModel = true
+                readyToAddModel = true 
             }
              
             
@@ -543,6 +553,7 @@ export const enter = (dom, isLocal) => {
                 if(!props.isFirstLoad){
                     model.visible = false//先不显示，防止卡顿
                 }
+                
                 props.opacity < 100 && result.changeOpacity(props.opacity) 
                 
                 model.addEventListener('changeSelect',(e)=>{
@@ -553,10 +564,20 @@ export const enter = (dom, isLocal) => {
                         position : model.position.clone(),
                         scale: model.scale.x * 100,
                         rotation: model.rotation.clone(),
-                        bottom: model.btmHeight
+                        //bottom: model.btmHeight
                     })
                 }) 
                 spliceFromArr(model,true)
+                
+                                
+                if(props.mode == 'single'){//模型查看页
+                    MergeEditor.noNeedSelection = true
+                    setTimeout(()=>{
+                        MergeEditor.focusOn([model], 1000, true, true)
+                    },1) 
+                }
+
+                
                 bus.emit('loadDone')
                 
                 //console.log('loadDone' )
@@ -618,40 +639,53 @@ export const enter = (dom, isLocal) => {
                         model.dispatchEvent("scale_changed")
                     }
                 },
-                changeOpacity(opacity){ 
+                changeOpacity(opacity){ //见笔记：透明物体的材质设置
                     if(opacity == void 0)opacity = 100
                     opacity/=100
                     
-                    let setOp = (mesh)=>{//见笔记：透明物体的材质设置
-                        if(model.isPointcloud){
-                            mesh.changePointOpacity(opacity)  
-                        }else{
-                            mesh.material.opacity = opacity
-                        }
-                        
-                        if(opacity<1){
-                            mesh.material.transparent = true
-                            mesh.renderOrder = Potree.config.renderOrders.model+1 
-                            mesh.material.depthWrite = false
-                        }else{
-                            mesh.material.transparent = false
-                            mesh.renderOrder = Potree.config.renderOrders.model
-                            mesh.material.depthWrite = true
-                        }
-                    }
+                  
                     
                     if(model){
-                        if(model.isPointcloud){
-                            setOp(model)  
+                        if(model.isPointcloud){ 
+                            model.changePointOpacity(opacity) 
+                            //MergeEditor.updateEdgeStrength()
                         }else{
-                            model.traverse(e=>e.material && setOp(e, opacity))
+                            //model.traverse(e=>e.material && setOp(e, opacity))
+                            model.traverse(mesh=>{
+                                if(mesh.material){ 
+                                
+                                    mesh.material.opacity = opacity
+                                    if(opacity<1){
+                                        mesh.material.transparent = true 
+                                        if(model.isPointcloud){
+                                            mesh.changePointOpacity(opacity)  
+                                        }else{
+                                            mesh.material.opacity = opacity
+                                        }
+                                        
+                                        mesh.renderOrder = Potree.config.renderOrders.model+1 
+                                        mesh.material.depthWrite = false
+                                    }else{
+                                        mesh.material.transparent = false
+                                        mesh.renderOrder = Potree.config.renderOrders.model
+                                        mesh.material.depthWrite = true
+                                    }
+                                
+                                }
+                            })
                         }
+                            
+                            
+                            
+                            
+                         
+                        model.opacity = opacity//记录在最外层
                     }
                      
                 },
                 changeBottom(z){
-                    model && MergeEditor.setModelBtmHeight(model,z)
-                    model.dispatchEvent('transformChanged') //改了position
+                    /* model && MergeEditor.setModelBtmHeight(model,z)
+                    model.dispatchEvent('transformChanged') //改了position */
                 },
                 changePosition(pos){//校准取消时执行
                     //if(MergeEditor.selected == model){
@@ -673,38 +707,49 @@ export const enter = (dom, isLocal) => {
                     if(model){
                         if(MergeEditor.split){//分屏校准
                             MergeEditor.setTransformState('rotate')
-                        }else{
-                            MergeEditor.transformControls.attach(model)
-                            MergeEditor.transformControls.mode = 'rotate'
+                            MergeEditor.transformControls2.attach(model)
+                            MergeEditor.transformControls2.mode = 'rotate'
                         } 
+                         
+                        
+                        MergeEditor.transformControls.attach(model)
+                        MergeEditor.transformControls.mode = 'rotate'
+                         
                     }
                 }, 
                 enterMoveMode(){
                     if(model){ 
                         if(MergeEditor.split){//分屏校准
                             MergeEditor.setTransformState('translate')
-                        }else{
-                            MergeEditor.transformControls.attach(model)
-                            MergeEditor.transformControls.mode = 'translate'
+                            MergeEditor.transformControls2.attach(model)
+                            MergeEditor.transformControls2.mode = 'translate'
                         } 
+                        MergeEditor.transformControls.attach(model)
+                        MergeEditor.transformControls.mode = 'translate'
+                         
                     }
                 },
-                leaveTransform(){
-                    
+                leaveTransform(){ 
                     
                     if(MergeEditor.split){//分屏校准
                         MergeEditor.setTransformState(null)
                     }else{ 
                         MergeEditor.transformControls.detach()
+                        MergeEditor.transformControls2.detach()
                     }
                 },
                 
                 enterAlignment(){//开始校准
-                    MergeEditor.enterSplit()
                     result.leaveTransform()
+                    MergeEditor.enterSplit()
+                    
+                    
                     //console.log('enterAlignment',model.position, model.rotation)
                     let bus = new mitt()
                     
+                    /* MergeEditor.transformControls.attach(model)
+                    MergeEditor.transformControls.mode = 'translate' */
+                    
                     return { 
                         bus  
                     } 
@@ -712,6 +757,9 @@ export const enter = (dom, isLocal) => {
                 leaveAlignment(){
                     //console.log('leaveAlignment',model.position, model.rotation)
                     MergeEditor.leaveSplit() 
+                    
+                    MergeEditor.transformControls.detach()
+                    MergeEditor.transformControls2.detach()
                 },
                 
                 enterScaleSet(){//设置比例
@@ -989,7 +1037,7 @@ export const enter = (dom, isLocal) => {
     }
      
     
-    console.log('版本： 2022.8.29-1')
+    console.log('版本： 2022.9.20-1')
      
     return sdk 
 }

src/sdk/sdk.ts

@@ -49,7 +49,7 @@ export type ModelAttrRange = {
 
 export type AddModelProps = Pick<FuseModel, 'url' | 'id'> 
   & FuseModelAttrs 
-  & { type: 'laser' | 'glb' }
+  & { type: string, isDynamicAdded: boolean, mode: 'many' | 'single' }
   & ModelAttrRange
 
 
@@ -133,7 +133,7 @@ export const initialSDK = async (props: InialSDKProps) => {
   await Promise.all(libs.map(loadLib))
   await loadLib(`./lib/potree/potree.js`)
 
-  const localSdk = cover(props.layout, true) as unknown as SDK
+  const localSdk = cover(props.layout, false) as unknown as SDK
 
   sdk = localSdk
   sdk.layout = props.layout

src/store/fuse-model.ts

@@ -1,4 +1,4 @@
-import { computed, ref, watch, watchEffect, watchPostEffect } from 'vue'
+import { computed, reactive, ref, watch, watchEffect, watchPostEffect } from 'vue'
 import { autoSetModeCallback, unSetModelUpdate, createTemploraryID } from './sys'
 import { custom } from '@/env'
 import { 
@@ -6,15 +6,14 @@ import {
   postAddFuseModel, 
   postDeleteFuseModel,
   postUpdateFuseModels,
-  SceneType
+  SceneType,
+  SceneStatus
 } from '@/api'
 import { 
   deleteStoreItem, 
-  addStoreItem, 
   updateStoreItem, 
   fetchStoreItems,
   saveStoreItems,
-  recoverStoreItems,
   deepIsRevise
 } from '@/utils'
 import { initialTaggings } from './tagging'
@@ -27,6 +26,8 @@ export type FuseModels = FuseModel[]
 export type { FuseModelAttrs } from '@/api'
 
 export const fuseModels = ref<FuseModels>([])
+export const dynamicAddedModelIds = ref<FuseModel['id'][]>([])
+
 export const defaultFuseModelAttrs: FuseModelAttrs = {
   show: true,
   scale: 100,
@@ -42,7 +43,9 @@ export const createFuseModels = (model: Partial<FuseModel> = {}): FuseModel => s
   url: '',
   fusionId: 0,
   title: '',
+  modelType: 'glb',
   type: SceneType.SWMX,
+  status: SceneStatus.SUCCESS,
   size: 0,
   time: new Date().toString(),
   ...defaultFuseModelAttrs,
@@ -50,21 +53,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: () => custom.modelsChangeStore 
+    get: () => {
+      return false && custom.modelsChangeStore 
       ? model.show 
-      : custom.showModelsMap.get(model) || false,
+      : custom.showModelsMap.get(model) || false
+    },
     set: (show: boolean) => {
-      if (custom.modelsChangeStore) {
+      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
@@ -73,7 +84,6 @@ watchPostEffect(() => {
   fuseModelsLoaded.value = loaded
 })
 
-
 let bcModels: FuseModels = []
 export const getBackupFuseModels = () => bcModels
 export const backupFuseModels = () => {
@@ -82,8 +92,11 @@ export const backupFuseModels = () => {
     rotation: {...model.rotation},
     position: {...model.position},
   }))
+  for (const model of fuseModels.value) {
+    initFuseModel(model)
+  }
 }
-watchEffect(() => {
+watch(fuseModels, () => {
   for (const model of bcModels) {
     const newModel = getFuseModel(model.id)
     if (newModel) {
@@ -92,7 +105,7 @@ watchEffect(() => {
       model.loaded = newModel.loaded
     }
   }
-})
+}, { deep: true })
 
 const serviceToLocal = (model: SModel): FuseModel => ({
   ...model, 
@@ -102,7 +115,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 = () => {
@@ -111,17 +124,25 @@ export const recoverFuseModels = () => {
     const model = fuseModels.value.find(item => item.id === oldItem.id)
     return model ? Object.assign(model, oldItem) : serviceToLocal(oldItem)
   })
+  console.log(backupItems)
 }
 
 export const updateFuseModel = updateStoreItem(fuseModels, postUpdateFuseModels)
-export const deleteFuseModel = deleteStoreItem(fuseModels, postDeleteFuseModel)
+export const deleteFuseModel = deleteStoreItem(fuseModels, async (model) => {
+  await postDeleteFuseModel(model)
+  const index = dynamicAddedModelIds.value.indexOf(model.id)
+  ~index && dynamicAddedModelIds.value.splice(index, 1)
+})
+
 export const addFuseModel = async (model: FuseModel) => {
-  const addModel = serviceToLocal(await postAddFuseModel(model))
+  const addModel = reactive(serviceToLocal(await postAddFuseModel(model)))
   initFuseModel(addModel)
-  unSetModelUpdate(() => fuseModels.value.push(addModel))
+  unSetModelUpdate(() => {
+    fuseModels.value.push(addModel)
+    dynamicAddedModelIds.value.push(addModel.id)
+  })
 }
 
-
 export const initialFuseModels = fetchStoreItems(
   fuseModels, 
   fetchFuseModels, 
@@ -154,12 +175,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/store/guide-path.ts

@@ -31,6 +31,7 @@ export const createGuidePath = (path: Partial<GuidePath> = {}): GuidePath => ({
   guideId: '',
   cover: '',
   time: 1,
+  sort: 999,
   speed: 1,
   position: {x: 0, y: 0, z: 0},
   target: {x: 0, y: 0, z: 0},
@@ -61,7 +62,7 @@ export const initialGuidePathsByGuide = async (guide: Guide) => {
   backupGuidePaths()
 }
 
-export const saveGuidePaths = saveStoreItems(
+const _saveGuidePaths = saveStoreItems(
   guidePaths,
   getBackupGuidePaths,
   {
@@ -70,6 +71,20 @@ export const saveGuidePaths = saveStoreItems(
     delete: deleteGuidePath,
   }
 )
+
+export const saveGuidePaths = async () => {
+  await _saveGuidePaths()
+  backupGuidePaths()
+  const sortMaps = new Map<GuidePath['guideId'], number>()
+
+  guidePaths.value.forEach((path) => {
+    const sort = (sortMaps.get(path.guideId) || 0) + 1
+    path.sort = sort
+    sortMaps.set(path.guideId, sort)
+  })
+  console.log(guidePaths.value)
+  await _saveGuidePaths()
+}
 export const autoSaveGuidePaths = autoSetModeCallback(guidePaths, {
   backup: backupGuidePaths,
   recovery: recoverGuidePaths,

src/store/measure.ts

@@ -20,6 +20,7 @@ import {
 } from '@/api'
 
 import type { Measure as SMeasure } from '@/api'
+import { Message } from 'bill/index'
 
 export type Measure<T extends MeasureType = MeasureType> = SMeasure<T> & { selected?: boolean }
 export type Measures = Measure[]
@@ -41,7 +42,7 @@ export const getMeasureIsShow = (measure: Measure) =>
 export const createMeasure = (measure: Partial<Measure> = {}): Measure => ({
   id: createTemploraryID(),
   fusionId: fuseModels.value[0].fusionId,
-  title: `测量${measures.value.length + 1}`,
+  title: MeasureTypeMeta[measure.type || MeasureType.free].unitDesc,
   positions: [],
   desc: '',
   type: MeasureType.free,
@@ -82,7 +83,14 @@ export const autoSaveMeasures = autoSetModeCallback(measures, {
   },
   backup: backupMeasures,
   recovery: recoverMeasures,
-  save: saveMeasures
+  save: async () => {
+    if (!measures.value.every(record => record.title)) {
+      Message.warning('测量名称不可为空')
+      throw '测量名称不可为空'
+    }
+
+    await saveMeasures()
+  }
 })
 
 export type { MeasurePosition } from '@/api'

src/store/record.ts

@@ -31,6 +31,7 @@ import {
 } from './record-fragment'
 
 import type { Record as SRecord } from '@/api'
+import { Message } from "bill/index";
 
 export type Record = LocalMode<SRecord, 'cover'> 
 export type Records = Record[]
@@ -39,7 +40,7 @@ export const records = ref<Records>([])
 
 export const createRecord = (record: Partial<Record> = {}): Record => ({
   id: createTemploraryID(),
-  title: '讲解视频',
+  title: '讲解视频' + (records.value.length + 1),
   cover: '',
   url: '',
   status: RecordStatus.UN,
@@ -55,12 +56,17 @@ export const backupRecords = () => {
 }
 export const recoverRecords = recoverStoreItems(records, getBackupRecords)
 
+const refreshRecords: NodeJS.Timeout[] = []
 const refreshRecordStatus = async (record: Record) => {
   const status = await fetchRecordStatus(record.id)
   if (status === RecordStatus.SUCCESS) {
-    unSetModelUpdate(() => record.status = RecordStatus.SUCCESS)
+    refreshRecords.forEach(clearTimeout)
+    refreshRecords.length = 0
+    initialRecords()
   } else {
-    setTimeout(refreshRecordStatus.bind(null, record), 3000)
+    refreshRecords.push(
+      setTimeout(refreshRecordStatus.bind(null, record), 3000)
+    )
   }
 }
 
@@ -86,14 +92,14 @@ export const initialRecords = async () => {
 }
 
 export const addRecord = addStoreItem(records, async (record) => {
-  const cover = await uploadFile(record.cover)
+  const cover = record.cover ? await uploadFile(record.cover) : record.cover
   const serviceRecord = await postAddRecord({ ...record, cover }, getRecordMergeFiles(record))
   record.id = serviceRecord.id
   await postUpdateRecord(record as SRecord)
   return record
 })
 export const updateRecord = updateStoreItem(records, async (record) => {
-  const cover = await uploadFile(record.cover)
+  const cover = record.cover ? await uploadFile(record.cover) : record.cover
   return await postUpdateRecord({ ...record, cover })
 })
 export const deleteRecord = deleteStoreItem(records, async record => {
@@ -115,6 +121,11 @@ export const autoSaveRecords = autoSetModeCallback(
     backup: togetherCallback([backupRecordFragments, backupRecords]),
     recovery: togetherCallback([recoverRecordFragments, recoverRecords]),
     save: async () => {
+      if (!records.value.every(record => record.title)) {
+        Message.warning('视频名称不可为空')
+        throw '视频名称不可为空'
+      }
+
       for (let i = 0; i < records.value.length; i++) {
         records.value[i].sort = i
       }

src/store/scene.ts

@@ -15,4 +15,4 @@ export const initialScenes = fetchStoreItems(
   fetchScenes, 
 )
 
-export { SceneType, SceneTypeDesc } from '@/api'
+export { SceneType, SceneTypeDesc, SceneStatus } from '@/api'

src/store/sys.ts

@@ -1,9 +1,11 @@
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick, watchEffect } from 'vue'
 import { asyncBusFactory } from '@/utils'
 import { Dialog } from 'bill/index'
 import { useViewStack } from '@/hook'
 
 import type { UnwrapRef } from 'vue'
+import { getCaseInfo } from '@/api'
+import { currentMeta } from '@/router'
 
 const Flags = {
   EDIT: 0b10,
@@ -18,14 +20,27 @@ export const isEdit = computed(() => !!(mode.value & Flags.EDIT))
 export const isLogin = computed(() => !!(mode.value & Flags.LOGIN))
 export const isOld = computed(() => !(mode.value & Flags.NOW))
 export const isNow = computed(() => !!(mode.value & Flags.NOW))
-export const title = '多元融合'
 export const appEl = ref<HTMLDivElement | null>(null)
+export const prefix = ref('')
+
+export const defTitle = ref('多元融合')
+export const title = computed(() => {
+  const last = currentMeta.value && 'sysTitle' in currentMeta.value
+    ? currentMeta.value.sysTitle
+    : defTitle.value
+
+  if (prefix.value && last) {
+    return prefix.value + ' | ' + last
+  } else {
+    return prefix.value + last
+  }
+})
+watchEffect(() => (document.title = title.value))
 
 let currentTempIndex = 0
 export const isTemploraryID = (id: string) => id.includes('__currentTempIndex__')
 export const createTemploraryID = () => `__currentTempIndex__${currentTempIndex++}`
 
-
 export const sysBus = asyncBusFactory<{ save: void; leave: void }>()
 
 // 进入编辑界面
@@ -79,7 +94,6 @@ export type AutoSetModeSetting<T> = {
 
 let isUnset = false
 export const unSetModelUpdate = (run: () => void) => {
-  console.error('unset')
   isUnset = true
   run()
   nextTick(() => isUnset = false)

src/store/tagging-style.ts

@@ -21,10 +21,12 @@ export type TaggingStyles = TaggingStyle[]
 
 export const taggingStyles = ref<TaggingStyles>([])
 export const defaultStyle = computed(() => taggingStyles.value.find(style => style.default))
+export const lastUseStyle = computed(() => taggingStyles.value.find(style => style.lastUse))
 
 export const createTaggingStyle = (style: Partial<TaggingStyle> = {}): TaggingStyle => ({
   id: createTemploraryID(),
   icon: '',
+  lastUse: 0,
   default: false,
   name: '',
   ...style

src/store/tagging.ts

@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import { togetherCallback } from '@/utils'
 import { autoSetModeCallback, createTemploraryID } from './sys'
-import { defaultStyle, getTaggingStyle } from './tagging-style'
+import { defaultStyle, getTaggingStyle, initialTaggingStyles, lastUseStyle } from './tagging-style'
 import { 
   initTaggingPositionsByTagging, 
   saveTaggingPositions,
@@ -46,17 +46,19 @@ export const getTagging = (id: Tagging['id']) => taggings.value.find(tagging =>
 export const getTaggingIsShow = (tagging: Tagging) => 
   getTaggingPositions(tagging).some(getTaggingPositionIsShow)
 
-export const createTagging = (tagging: Partial<Tagging> = {}): Tagging => ({
-  id: createTemploraryID(),
-  title: ``,
-  styleId: defaultStyle.value?.id || '',
-  desc: '',
-  part: '',
-  method: '',
-  principal: '',
-  images: [],
-  ...tagging
-})
+export const createTagging = (tagging: Partial<Tagging> = {}): Tagging => {
+  return {
+    id: createTemploraryID(),
+    title: ``,
+    styleId: lastUseStyle.value?.id || defaultStyle.value?.id || '',
+    desc: '',
+    part: '',
+    method: '',
+    principal: '',
+    images: [],
+    ...tagging
+  }
+}
 
 
 let bcTaggings: Taggings = []
@@ -122,5 +124,6 @@ export const autoSaveTaggings = autoSetModeCallback([taggings, taggingPositions,
     }
     await saveTaggings()
     await saveTaggingPositions()
+    await initialTaggingStyles()
   },
 })

src/store/view.ts

@@ -20,6 +20,7 @@ import { fuseModel } from '@/model'
 
 import type { View as SView } from '@/api'
 import type { ModelType } from '@/model'
+import { Message } from "bill/expose-common";
 
 export type View = LocalMode<SView, 'cover'>
 export type Views = View[]
@@ -29,7 +30,7 @@ export const views = ref<Views>([])
 export const createView = (view: Partial<View> = {}): View => {
   const base = {
     id: createTemploraryID(),
-    title: '视图',
+    title: '视图' + (views.value.length + 1),
     cover: 'https://4dkk.4dage.com/scene_view_data/KK-t-F8e5M46wcQ/images/floor_0.png?t=1659422513133?v=0&rnd=0.9219648338739086&x-oss-process=image/resize,m_fill,w_80,h_60/quality,q_70&rnd=0.25420557086595965',
     flyData: '',
     num: null,
@@ -102,6 +103,10 @@ export const autoSaveViews = autoSetModeCallback(views, {
   backup: backupViews,
   recovery: recoverViews,
   save: async () => {
+    if (!views.value.every(view => view.title)) {
+      Message.warning('视图名称不可为空')
+      throw '视图名称不可为空'
+    }
     for (let i = 0; i < views.value.length; i++) {
       views.value[i].sort = i
     }

src/utils/loading.ts

@@ -3,7 +3,7 @@ import { defineAsyncComponent } from 'vue'
 
 import type { AsyncComponentLoader, Component } from 'vue'
 
-export const loadPack = <T, K extends (...args: any) => Promise<T>>(fn: K | Promise<T>): Promise<T> => {
+export const loadPack = <T, K extends (...args: any[]) => Promise<T>>(fn: K | Promise<T>): Promise<T> => {
     Loading.show()
     const ret = typeof fn === 'function' ? fn() : fn
     ret.finally(() => Loading.hide())

src/utils/stack.ts

@@ -19,13 +19,23 @@ export const stackFactory = <T>(initVal?: T, debug?: boolean): Stack<T> => {
   return {
     push(raw: T) {
       stack.push(raw);
+      if (debug) {
+        console.warn('push', raw)
+      }
       return () => {
         const index = stack.indexOf(raw);
         ~index && stack.splice(index, 1);
+        if (debug) {
+          console.warn('pop', raw)
+          console.warn('current', stack)
+        }
       };
     },
     pop() {
       let ret = stack[stack.length-- - 1];
+      if (debug) {
+        console.warn('pop current', stack)
+      }
       return ret;
     },
     current: computed(() => {

src/utils/store-help.ts

@@ -152,8 +152,6 @@ export const saveStoreItems = <T extends {id: any}>(
   }
 ) => () => {
   const oldItems = getOldItem()
-  console.error('save save')
-  console.log(oldItems)
   const {
     deleted,
     updated,

src/utils/video-cover.ts

@@ -38,6 +38,7 @@ export const getVideoCover = (data: string | Blob,  seekTo: number = 0.0, width?
         const dataURL = canvas.toDataURL('image/jpeg') 
 
         if (typeof data !== 'string') {
+          video.pause()
           URL.revokeObjectURL(url)
         }
         resolve(dataURL)

src/views/folder/index.vue

@@ -1,42 +1,39 @@
 <template>
   <LeftPano>
-    <div v-for="item in types" :key="item.id" class="types">
-      <h2 @click="item.show.value = !item.show.value">
-        {{item.title}}
-        <ui-icon :type="`pull-${item.show.value ? 'up' : 'down'}`" class="icon" ctrl />
-      </h2>
+    <template v-for="item in types">
+      <div :key="item.id" class="types" v-if="item.floders.length">
+        <h2 @click="item.show.value = !item.show.value">
+          {{item.title}}
+          <ui-icon :type="`pull-${item.show.value ? 'up' : 'down'}`" class="icon" ctrl />
+        </h2>
 
-      <div class="floders"  v-if="item.show.value">
-        <div 
-          v-for="floder in item.floders" 
-          :key="floder.filesId" 
-          class="fun-ctrl" 
-          @click="preview(floder)"
-        >
-          <ui-icon :type="typeIcons[floder.metaType]" v-if="floder.metaType" />
-          <p>{{ floder.filesTitle }}</p>
+        <div class="floders"  v-if="item.show.value">
+          <div 
+            v-for="floder in item.floders" 
+            :key="floder.filesId" 
+            class="fun-ctrl" 
+            @click="preview(floder)"
+          >
+            <ui-icon :type="typeIcons[floder.metaType]" v-if="floder.metaType" />
+            <p>{{ floder.filesTitle }}</p>
+          </div>
         </div>
       </div>
-    </div>
+    </template>
   </LeftPano>
+
+  <Preview :items="[currentFile]" v-if="currentFile" @close="currentFile = null" />
 </template>
 
 <script lang="ts" setup>
 import { LeftPano } from '@/layout'
 import { computed, ref } from 'vue';
 import { getUrlType, MetaType } from '@/utils'
-import { 
-  initialFloderTypes, 
-  initialFloders,
-  floderTypes,
-  getFloderByType,
-} from '@/store'
+import { Preview, MediaItem, MediaType } from '@/components/static-preview/index.vue'
+import { floderTypes, getFloderByType } from '@/store'
 
 import type { Floder } from '@/store'
 
-initialFloderTypes()
-initialFloders()
-
 const types = computed(() => 
   floderTypes.value.map(type => ({
     show: ref(true),
@@ -56,7 +53,24 @@ const typeIcons = {
   [MetaType.other]: 'nav-edit'
 }
 
-const preview = (floder: Floder) => window.open(floder.filesUrl)
+const currentFile = ref<MediaItem | null>(null)
+const preview = (floder: Floder) => {
+  const type = getUrlType(floder.filesUrl)
+  const mediaType = type === MetaType.image 
+      ? MediaType.img 
+      : type === MetaType.video
+        ? MediaType.video
+        : null
+  
+  if (!mediaType) {
+    window.open(floder.filesUrl)
+  } else {
+    currentFile.value = {
+      type: mediaType,
+      url: floder.filesUrl
+    }
+  }
+}
 
 </script>
 

src/views/guide/edit-paths.vue

@@ -63,7 +63,6 @@
               type="number" 
               width="54px" 
               height="26px" 
-              v-model="path.time" 
               :modelValue="path.time" 
               @update:modelValue="(val: number) => updatePathInfo(i, { time: val })"
               :ctrl="false" 
@@ -229,7 +228,7 @@ watchEffect(async () => {
 
   .meta {
     font-size: 12px;
-    border-bottom: 1px solid rgba(255,255,255,.6);
+    border-bottom: 1px solid rgba(255,255,255,.16);
     padding: 10px 20px;
     display: flex;
     justify-content: space-between;

src/views/guide/index.vue

@@ -1,14 +1,16 @@
 <template>
   <RightFillPano>
-    <ui-group borderBottom>
-      <template #header>
-        <ui-button @click="edit(createGuide())">
-          <ui-icon type="add" />
-          新增 
-        </ui-button>
-      </template>
-    </ui-group>
-    <ui-group title="导览列表">
+    <template #header>
+      <ui-group borderBottom>
+        <template #header>
+          <ui-button @click="edit(createGuide())">
+            <ui-icon type="add" />
+            新增 
+          </ui-button>
+        </template>
+      </ui-group>
+    </template>
+    <ui-group title="路径列表" class="guide-list">
       <GuideSign 
         v-for="guide in guides" 
         :key="guide.id" 
@@ -62,4 +64,8 @@ useViewStack(autoSaveGuides)
   display: block;
 }
 
+.guide-list {
+  padding-bottom: 30px;
+}
+
 </style>

src/views/guide/show.vue

@@ -1,5 +1,5 @@
 <template>
-  <ui-group title="导览列表" class="show-guides">
+  <ui-group title="路径列表" class="show-guides">
     <GuideSign 
       v-for="guide in guides" 
       :key="guide.id" 
@@ -11,9 +11,8 @@
 
 <script setup lang="ts">
 import GuideSign from '@/views/guide/sign.vue'
-import { guides, initialGuides } from '@/store'
+import { guides } from '@/store'
 
-initialGuides()
 </script>
 
 

src/views/guide/sign.vue

@@ -7,7 +7,7 @@
           type="preview" 
           class="icon" 
           ctrl 
-          @click="playSceneGuide(paths)" 
+          @click="playSceneGuide(paths, undefined, true)" 
           v-if="paths.length" 
         />
       </div>

src/views/measure/edit.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
 import { ref, reactive } from 'vue'
-import { enterEdit, enterOld, sysBus, giveupLeave, MeasureType } from '@/store'
+import { enterEdit, enterOld, sysBus, giveupLeave } from '@/store'
 import { useViewStack } from '@/hook'
 import { togetherCallback } from '@/utils'
 import { showRightCtrlPanoStack, showRightPanoStack } from '@/env'

src/views/measure/index.vue

@@ -1,11 +1,13 @@
 <template>
   <RightFillPano>
-    <ui-group borderBottom>
-      <template #header>
-        <Actions class="edit-header" :items="options" single />
-      </template>
-    </ui-group>
-    <ui-group title="测量列表">
+    <template #header>
+      <ui-group borderBottom>
+        <template #header>
+          <Actions class="edit-header" :items="options" single />
+        </template>
+      </ui-group>
+    </template>
+    <ui-group title="测量列表" class="measure-list">
       <template #icon>
         <ui-icon 
           ctrl
@@ -25,6 +27,7 @@
         :key="measure.id" 
         :measure="measure" 
         @delete="deleteMeasure(measure)"
+        @updateTitle="title => measure.title = title"
       />
     </ui-group>
   </RightFillPano>
@@ -43,7 +46,7 @@ import Actions from '@/components/actions/index.vue'
 import EditMeasure from './edit.vue'
 import { RightFillPano } from '@/layout'
 import { computed, ref } from 'vue';
-import { custom, showMeasuresStack } from '@/env'
+import { custom } from '@/env'
 import { measures, MeasureTypeMeta, MeasureType, createMeasure, autoSaveMeasures } from '@/store'
 import { useViewStack } from '@/hook'
 
@@ -81,6 +84,11 @@ const deleteMeasure = (measure: Measure) => {
   measures.value.splice(index, 1)
 }
 
-useViewStack(() => showMeasuresStack.push(ref(true)))
 useViewStack(autoSaveMeasures)
-</script>
+</script>
+
+<style scoped>
+  .measure-list {
+    padding-bottom: 30px;
+  }
+</style>

src/views/measure/show.vue

@@ -18,13 +18,9 @@
 
 <script setup lang="ts">
 import MeasureSign from '@/views/measure/sign.vue'
-import { ref } from 'vue'
-import { measures, initialMeasures } from '@/store'
-import { custom, showMeasuresStack } from '@/env'
-import { useViewStack } from '@/hook'
+import { measures } from '@/store'
+import { custom } from '@/env'
 
-initialMeasures() 
-useViewStack(() => showMeasuresStack.push(ref(true)))
 </script>
 
 

src/views/measure/sign.vue

@@ -1,19 +1,36 @@
 <template>
   <ui-group-option 
     class="sign-measure" 
+    :class="{ active: measure.selected }"
     @mouseenter="measure.selected = true"
     @mouseleave="measure.selected = false"
   >
     <div class="info">
       <ui-icon :type="MeasureTypeMeta[measure.type].icon" class="type" />
-      <div>
-        <p>{{ desc }} {{ MeasureTypeMeta[measure.type].unit }}</p>
-        <span>{{ MeasureTypeMeta[measure.type].unitDesc }}</span>
+      <div v-show="!isEditTitle">
+        <p>{{ measure.title || MeasureTypeMeta[measure.type].unitDesc }}</p>
+        <span>{{ desc }} {{ MeasureTypeMeta[measure.type].unit }}</span>
       </div>
+      <ui-input 
+        class="view-title-input"
+        type="text" 
+        :modelValue="measure.title" 
+        :maxlength="15"
+        @update:modelValue="(title: string) => $emit('updateTitle', title.trim())"
+        v-show="isEditTitle" 
+        ref="inputRef" 
+        height="28px" 
+      />
     </div>
     <div class="actions" @click.stop>
-      <ui-icon type="del" ctrl @click.stop="$emit('delete')" v-if="edit" />
+      <!-- <ui-icon type="del" ctrl @click.stop="$emit('delete')" v-if="edit" /> -->
       <ui-icon type="pin" ctrl @click.stop="fly" :class="{disabled: !getMeasureIsShow(measure)}" />
+      <ui-more 
+        v-if="edit"
+        :options="menus" 
+        style="margin-left: 20px" 
+        @click="(action: keyof typeof actions) => actions[action]()" 
+      />
     </div>
   </ui-group-option>
 </template>
@@ -21,29 +38,53 @@
 <script setup lang="ts">
 import { MeasureTypeMeta, getMeasureIsShow } from '@/store'
 import { getSceneMeasure, getSceneMeasureDesc } from '@/sdk'
+import { useFocus } from 'bill/hook/useFocus'
 
 import type { Measure } from '@/store'
-import { computed } from 'vue';
+import { computed, ref, watch, watchEffect } from 'vue';
+import { Message } from 'bill/index';
+import { custom } from '@/env';
 
 const props = withDefaults(
   defineProps<{ measure: Measure, edit?: boolean }>(),
   { edit: true }
 )
+const emit = defineEmits<{ 
+  (e: 'delete'): void,
+  (e: 'updateTitle', title: string): void,
+}>()
 
-defineEmits<{ (e: 'delete'): void }>()
+const inputRef = ref()
+const isEditTitle = useFocus(computed(() => inputRef.value?.vmRef.root))
+const menus = [
+  { label: '重命名', value: 'rename' },
+  { label: '删除', value: 'delete' },
+]
+const actions = {
+  delete: () => emit('delete'),
+  rename: () => isEditTitle.value = true
+}
+
+watchEffect(() => {
+  if (!isEditTitle.value && !props.measure.title.length) {
+    isEditTitle.value = true
+    Message.warning('测量名称不可为空')
+  }
+})
 
 const fly = () => {
   getSceneMeasure(props.measure)?.fly()
 }
-const desc = computed(() => {
-  const smeasure = getSceneMeasure(props.measure)
-  console.log(smeasure)
-  if (smeasure) {
-    return getSceneMeasureDesc(smeasure, props.measure)
-  } else {
-    return '-'
-  }
-})
+const desc = ref('-')
+watch(
+  () => [props.measure, custom.showMeasures, custom.showModelsMap], 
+  () => {
+    const smeasure = getSceneMeasure(props.measure)
+    desc.value = smeasure ? getSceneMeasureDesc(smeasure, props.measure) : '-'
+  }, 
+  { deep: true, flush: 'post', immediate: true }
+)
+
 </script>
 
 <style lang="scss" scoped>
@@ -56,6 +97,15 @@ const desc = computed(() => {
   border-bottom: 1px solid var(--colors-border-color);
   position: relative;
 
+  &.active::after {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    inset: 0 -20px;
+    background-color: rgba(0, 200, 175, 0.16);
+    z-index: -1;
+  }
+
   .info {
     flex: 1;
 
@@ -96,6 +146,10 @@ const desc = computed(() => {
     }
   }  
 }
+</style>
 
-
+<style>
+.view-title-input.ui-input .text.suffix input {
+  padding-right: 50px;
+}
 </style>

src/views/merge/index.vue

@@ -7,7 +7,7 @@
       <ui-group-option label="等比缩放">
         <template #icon>
           <a class="set-prop" 
-            :class="{disabled: isOld}"
+            :class="{disabled: isOld || currentItem}"
             @click="router.push({ 
               name: RoutesName.proportion, 
               params: { id: custom.currentModel!.id, save: '1' },
@@ -24,7 +24,7 @@
           <template #icon>%</template>
         </ui-input>
       </ui-group-option>
-      <ui-group-option label="离地高度">
+      <!-- <ui-group-option label="离地高度">
         <ui-input 
           type="range" 
           v-model="custom.currentModel.bottom" 
@@ -34,7 +34,7 @@
         >
           <template #icon>m</template>
         </ui-input>
-      </ui-group-option>
+      </ui-group-option> -->
       <ui-group-option label="模型不透明度">
         <ui-input 
           type="range" 
@@ -70,8 +70,8 @@ import { autoSaveFuseModels, defaultFuseModelAttrs, isOld } from '@/store'
 import { togetherCallback } from '@/utils'
 import { getSceneModel, modelRange } from '@/sdk'
 import { useViewStack, useActive } from '@/hook'
-import { showLeftCtrlPanoStack, showLeftPanoStack, custom, modelsChangeStoreStack } from '@/env'
-import { ref, nextTick, watchEffect } from 'vue'
+import { showLeftPanoStack, custom, modelsChangeStoreStack, showRightPanoStack } from '@/env'
+import { ref, nextTick, watchEffect, computed } from 'vue'
 import { Dialog } from 'bill/expose-common'
 
 import Actions from '@/components/actions/index.vue'
@@ -92,11 +92,17 @@ const actionItems: ActionsProps['items'] = [
     icon: 'flip',
     text: '旋转',
     action: () => {
+      console.log('enter')
       getSceneModel(custom.currentModel)?.enterRotateMode()
-      return () => getSceneModel(custom.currentModel)?.leaveTransform()
+      return () => {
+        console.log('leave la ')
+        getSceneModel(custom.currentModel)?.leaveTransform()
+      }
     }
   },
 ]
+
+
 const currentItem = ref<ActionsItem | null>(null)
 watchEffect(() => {
   if (!custom.currentModel) {
@@ -111,14 +117,13 @@ const reset = async () => {
     custom.currentModel && (custom.currentModel.bottom = 0)
   }
 }
-
 useViewStack(() => togetherCallback([
   showLeftPanoStack.push(ref(true)),
+  showRightPanoStack.push(computed(() => !!custom.currentModel)),
   modelsChangeStoreStack.push(ref(true)),
   () => currentItem.value = null
 ]))
 useViewStack(autoSaveFuseModels)
-
 </script>
 
 <style lang="scss">

src/views/proportion/index.vue

@@ -18,11 +18,13 @@
 import { Message } from 'bill/index'
 import { useViewStack } from '@/hook'
 import { router, RoutesName } from '@/router'
-import { ref, computed, watch, nextTick, watchEffect } from 'vue'
+import { ref, computed, watch, watchEffect } from 'vue'
 import { getSceneModel } from '@/sdk'
-import { autoSaveFuseModels, getFuseModel, leave } from '@/store'
+import { autoSaveFuseModels, FuseModel, getFuseModel, leave } from '@/store'
+import { currentModelStack } from '@/env'
 
 import type { ScaleSet } from '@/sdk'
+import { round } from '@/utils'
 
 const isCurrent = computed(() => router.currentRoute.value.name === RoutesName.proportion)
 const model = computed(() => {
@@ -43,6 +45,7 @@ watch(length, () => {
   const len = length.value
   if (len !== null) {
     scaleSet?.setLength(len)
+    length.value = round(len, 2)
   }
 })
 
@@ -56,10 +59,12 @@ watchEffect((onCleanup) => {
   if (smodel) {
     scaleSet = smodel.enterScaleSet()
     scaleSet.startMeasure()
+    const pop = currentModelStack.push(model as any)
 
     onCleanup(() => {
       smodel.leaveScaleSet()
       scaleSet = null
+      pop()
     })
   } else if (isCurrent.value) {
     leave()

src/views/record/index.vue

@@ -1,17 +1,10 @@
 <template>
   <RightFillPano>
-    <div class="btns header-btns">
-      <ui-button class="start" @click="start" type="primary">开始录制</ui-button>
-      <ui-input 
-        class="unit" 
-        type="multiple" 
-        :options="setOptions" 
-        v-model="setting" 
-        width="120px" 
-        placeholder="显示设置"
-      >
-      </ui-input>
-    </div>
+    <template #header>
+      <div class="btns header-btns">
+        <ui-button class="start" @click="start" type="primary">开始录制</ui-button>
+      </div>
+    </template>
 
     <ui-group title="全部视频" class="tree" >
       <Draggable :list="records" draggable=".sign" itemKey="id">
@@ -35,18 +28,22 @@ import { showMeasuresStack, showTaggingsStack } from '@/env'
 import { useViewStack } from '@/hook'
 import { diffArrayChange, togetherCallback } from '@/utils'
 import { RecordProcess } from './help'
-import { records, createRecord, Record, RecordStatus, autoSaveRecords, initialRecords } from '@/store'
+import { records, createRecord, Record, RecordStatus, autoSaveRecords, initialRecords, getRecordFragmentBlobs, isTemploraryID } from '@/store'
 import { RightFillPano } from '@/layout'
 import Draggable from 'vuedraggable'
 import Sign from './sign.vue'
+import { Dialog } from 'bill/index'
 
 initialRecords()
 
 const start = () => records.value.push(createRecord())
-const deleteRecord = (record: Record) => {
-  const index = records.value.indexOf(record)
-  if (~index) {
-    records.value.splice(index, 1)
+const deleteRecord = async (record: Record) => {
+  const isTemp = getRecordFragmentBlobs(record).length === 0 && isTemploraryID(record.id)
+  if (isTemp || await Dialog.confirm('确定要删除视频吗？')) {
+    const index = records.value.indexOf(record)
+    if (~index) {
+      records.value.splice(index, 1)
+    }
   }
 }
 
@@ -61,7 +58,7 @@ const setOptions = [
 ] as const
 
 type SetKey = typeof setOptions[number]['value']
-const setting = ref<SetKey[]>([])
+const setting = ref<SetKey[]>(['tagging', 'measure'])
 watch(setting, (setting, oldSetting = [], onCleanup) => {
   const { added } = diffArrayChange(setting, oldSetting)
   const pops = added.map(value => {

src/views/record/shot-imitate.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="imiate">
+    <div :class="{ hideLeft: !custom.showLeftPano }">
+      <slideMenu :activeName="activeName" @change-item="item => activeName = item.name" />
+      <component :is="component" v-if="component"></component>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useViewStack } from '@/hook';
+import slideMenu from '@/layout/show/slide-menu.vue';
+import { getRouteConfig, RoutesName } from '@/router'
+import { ref, shallowRef, watch, watchEffect } from 'vue';
+import { togetherCallback } from '@/utils'
+import { 
+  custom,
+  showLeftCtrlPanoStack, 
+  showLeftPanoStack,
+  showRightCtrlPanoStack,
+  showRightPanoStack,
+showTaggingsStack
+} from '@/env'
+import {
+  initialScenes,
+  initialViews,
+  initialRecords,
+  initialFloders,
+  initialFloderTypes
+} from '@/store'
+
+import type { Component } from 'vue'
+import { currentModel } from '@/model';
+
+
+initialScenes(),
+initialViews(),
+initialFloders(),
+initialFloderTypes()
+
+const activeName = ref(RoutesName.summaryShow)
+const component = shallowRef<Component | null>(null)
+
+watchEffect(() => {
+  const route = getRouteConfig(activeName.value)
+  route?.component().then(comp => component.value = comp.default)
+})
+
+const showLeftPano = ref(false)
+
+watch(currentModel, () => {
+  if (currentModel.value) {
+    showLeftPano.value = false
+  }
+})
+
+useViewStack(() => {
+  const style = document.createElement('style')
+  style.type = 'text/css'
+  style.textContent = `
+    #app  {
+      --editor-menu-width: 80px;
+    }
+    #app .edit-mode {
+      --editor-menu-left: 0px;
+    }
+    #app .hideLeft {
+      --editor-menu-left: calc(-1 * var(--editor-menu-width));
+      --left-pano-left: calc(var(--editor-menu-left) + var(--editor-menu-width) - var(--left-pano-width)) !important
+    }
+    #app .ctrl-pano-c,
+    #app .left-pano,
+    #app .ui-editor-toolbox {
+      display: none;
+    }
+    #app .imiate .ctrl-pano-c,
+    #app .imiate .ui-editor-toolbox {
+      display: flex;
+    }
+    #app .imiate .left-pano {
+      display: block;
+    }
+  `
+  document.head.appendChild(style)
+
+  return togetherCallback([
+    showTaggingsStack.push(ref(true)),
+    showLeftCtrlPanoStack.push(ref(true)), 
+    showLeftPanoStack.push(showLeftPano),
+    showRightCtrlPanoStack.push(ref(true)),
+    showRightPanoStack.push(ref(false)),
+    () => document.head.removeChild(style)
+  ])
+})
+</script>

src/views/record/shot.vue

@@ -1,17 +1,17 @@
 <template>
   <teleport :to="appEl" v-if="appEl">
-    <div class="countdown strengthen" v-if="!custom.showBottomBar && countdown">
+    <!-- <div class="countdown strengthen" v-if="!custom.showBottomBar && countdown">
       <p class="title"><span>{{countdown}}</span>秒后开始录制</p>
       <p>按ESC可暂停录制</p>
-    </div>
+    </div> -->
 
     <ui-editor-toolbar :toolbar="custom.showBottomBar" class="shot-ctrl">
       <ui-button type="submit" class="btn" @click="close">取消</ui-button>
       <ui-button type="primary" class="btn" @click="complete" :class="{disabled: blobs.length === 0}">合并视频</ui-button>
-      <div class="other">
+      <div class="other" :style="{bottom: barHeight}">
         <ui-icon class="icon" type="video1" ctrl @click="start" tip="继续录制" tipV="top" />
       </div>
-      <div class="video-list">
+      <div class="video-list" v-if="videoList.length">
         <div class="layout" :style="{width: `${videoList.length * 130}px`}">
           <div v-for="video in videoList" :key="video.cover" class="cover">
             <img :src="video.cover">
@@ -28,20 +28,22 @@
 
     <Preview 
       v-if="palyUrl" 
-      :type="MediaType.video" 
-      :url="palyUrl" 
+      :items="[{ type: MediaType.video, url: palyUrl }]"
       @close="palyUrl = null" 
     />
+
+    <ShotImiate v-if="!custom.showBottomBar && !countdown" />
   </teleport>
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, onUnmounted, watch, shallowReactive, PropType } from 'vue'
+import { ref, defineComponent, onUnmounted, watch, shallowReactive, PropType, computed, watchEffect } from 'vue'
 import { VideoRecorder } from '@simaq/core';
 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, 
@@ -49,9 +51,13 @@ import {
   showBottomBarStack, 
   custom, 
   bottomBarHeightStack,
-  showHeadBarStack
+  showHeadBarStack,
+  showLeftPanoStack
 } from '@/env'
 import { appEl } from '@/store';
+import { useViewStack } from '@/hook';
+import { currentModel } from '@/model';
+import { Message } from 'bill/expose-common';
 
 
 export default defineComponent({
@@ -71,54 +77,82 @@ export default defineComponent({
   setup(props, { emit }) {
     const config: any = {
       uploadUrl: '',
-      resolution: '2k',
+      resolution: '4k',
       debug: false,
     }
   
-    console.error('new VideoRecorder')
     const videoRecorder = new VideoRecorder(config);
+    const showLeftPano = ref(false)
+    const showBottomBar = ref(false)
+    const MAX_SIZE = 2 * 1024 * 1024 * 1024
+    const MAX_TIME = 30 * 60 * 1000
 
     type VideoItem = { origin: Blob | string, cover: string }
 
     const countdown = ref(0)
     let interval: NodeJS.Timer
+    let recordIng = ref(false)
     const start = () => {
-      custom.showBottomBar = false
-      countdown.value = 3
-      interval = setInterval(() => {
-        if (--countdown.value === 0) {
+      if (size.value > MAX_SIZE || pauseTime.value < 2000) {
+        return Message.warning('已超出限制大小无法继续录制，可保存后继续录制！')
+      }
+
+      showBottomBar.value = false
+      countdown.value = 2
+      const timeiffe = () => {
+        if (--countdown.value <= 0) {
           clearInterval(interval)
           videoRecorder.startRecord()
+          recordIng.value = true
+        } else {
+          interval = setTimeout(timeiffe, 300)
         }
-      }, 1000)
+      }
+      timeiffe()
+      // interval = setInterval(() => {
+      //   if (--countdown.value === 0) {
+      //     clearInterval(interval)
+      //     videoRecorder.startRecord()
+      //     recordIng = true
+      //   }
+      // }, 1000)
     }
 
     const pause = () => {
-      if (countdown.value === 0 && videoRecorder.status !== 3) {
+      if (countdown.value === 0 && recordIng.value) {
         videoRecorder.endRecord()
+        recordIng.value = false
       }
-      
       countdown.value = 0
-      custom.showBottomBar = true
+      showBottomBar.value = true
       clearInterval(interval)
     }
 
+    watch(recordIng, (_n, _o, onCleanup) => {
+      if (recordIng.value) {
+        const timeout = setTimeout(() => videoRecorder.endRecord(), pauseTime.value)
+        onCleanup(() => clearTimeout(timeout))
+      }
+    })
+
     const blobs: File[] = shallowReactive([])
+    const size = computed(() => {
+      console.log(videoList)
+      return videoList.reduce((t, f) => typeof f.origin === 'string' ? t : t + f.origin.size, 0)
+    })
+    const pauseTime = computed(() => (MAX_TIME / MAX_SIZE) * (MAX_SIZE - size.value))
     videoRecorder.off('*')
     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()
+      if (recordIng.value) {
+        blobs.push(new File([blob], '录屏.mp4', { type: 'video/mp4; codecs=h264' }))
+      }
     })
+    videoRecorder.on('cancelRecord', pause)
+    videoRecorder.on('endRecord', pause)
 
     const palyUrl = ref<string | Blob | null>(null)
     const videoList: VideoItem[] = shallowReactive([])
+    let initial = false
     watch([blobs, props], async () => {
       const existsVideos = []
 
@@ -142,9 +176,14 @@ export default defineComponent({
       if (!props.record.cover && videoList.length) {
         emit('updateCover', videoList[0].cover)
       }
+      if (!initial) {
+        initial = true
+        start()
+      }
+      
     }, { immediate: true })
 
-    const upHandler = (ev: KeyboardEvent) => ev.code === `Escape` && pause()
+    const upHandler = (ev: KeyboardEvent) => ev.code === `Escape` && videoRecorder.endRecord()
     document.body.addEventListener('keyup', upHandler, { capture: true })
 
     const complete = () => {
@@ -157,27 +196,40 @@ export default defineComponent({
       emit('close')
     }
 
-    start()
-    const pop = togetherCallback([
-      showHeadBarStack.push(ref(false)),
-      showRightCtrlPanoStack.push(ref(false)),
-      showRightPanoStack.push(ref(false)),
-      showBottomBarStack.push(ref(false)),
-      bottomBarHeightStack.push(ref('180px'))
-    ])
+    const barHeight = computed(() => videoList.length ? '180px' : '60px')
+    
     onUnmounted(() => {
-      close()
-      pop()
-      custom.showBottomBar = false
       document.body.removeEventListener('keyup', upHandler, { capture: true })
     })
 
+
+    watch(currentModel, () => {
+      if (currentModel.value) {
+        showLeftPano.value = false
+      }
+    })
+    useViewStack(() => {
+      return togetherCallback([
+        showHeadBarStack.push(ref(false)),
+        showRightCtrlPanoStack.push(ref(false)),
+        showRightPanoStack.push(ref(false)),
+        showBottomBarStack.push(showBottomBar),
+        bottomBarHeightStack.push(barHeight),
+        showLeftPanoStack.push(showLeftPano),
+        close,
+        () => {
+          console.log('pop', showBottomBarStack.current)
+        }
+      ])
+    })
+
     return {
       MediaType,
       complete,
       pause,
       close,
       start,
+      barHeight,
       el: sdk.layout,
       blobs,
       countdown,
@@ -188,7 +240,8 @@ export default defineComponent({
     }
   },
   components: {
-    Preview
+    Preview,
+    ShotImiate
   }
 })
 

src/views/record/show.vue

@@ -3,7 +3,7 @@
   <LeftPano>
     <ui-group class="pano-group">
       <Sign 
-        v-for="record in records" 
+        v-for="record in filterRecords" 
         :record="record"
         :key="record.id" 
         :edit="false"
@@ -14,10 +14,12 @@
 
 <script setup lang="ts">
 import Sign from './sign.vue'
-import { records, initialRecords } from '@/store'
+import { isTemploraryID, records } from '@/store'
 import { LeftPano } from '@/layout'
+import { computed } from 'vue';
+
+const filterRecords = computed(() => records.value.filter(record => !isTemploraryID(record.id)))
 
-initialRecords()
 </script>
 
 <style lang="scss" scoped>

src/views/record/sign.vue

@@ -1,5 +1,5 @@
 <template>
-  <ui-group-option class="sign">
+  <ui-group-option class="sign record-sign">
     <div class="content">
       <span class="cover">
         <img :src="getResource(getFileUrl(record.cover))" alt="" v-if="record.cover">
@@ -14,10 +14,11 @@
       <ui-input 
         type="text" 
         :modelValue="record.title" 
-        @update:modelValue="(title: string) => $emit('updateTitle', title)"
+        @update:modelValue="(title: string) => $emit('updateTitle', title.trim())"
         v-show="isEditTitle" 
         ref="inputRef" 
         height="28px" 
+        :maxlength="15"
       />
       <div class="title" v-show="!isEditTitle">
         <p>{{ record.title }}</p>
@@ -42,16 +43,15 @@
       :record="record" />
     <Preview 
       v-if="isPlayVideo" 
-      :type="MediaType.video" 
-      :url="record.url" 
+      :items="[{ type: MediaType.video, url: record.url! }]"
       @close="isPlayVideo = false" 
     />
   </ui-group-option>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue'
-import { getFileUrl } from '@/utils'
+import { defineComponent, ref, computed, watchEffect } from 'vue'
+import { getFileUrl, getExtname } from '@/utils'
 import { useFocus } from 'bill/hook/useFocus'
 import { RecordStatus, createRecordFragment, getRecordFragmentBlobs, recordFragments } from '@/store'
 import { saveAs, loadPack } from '@/utils'
@@ -62,6 +62,7 @@ import Shot from './shot.vue'
 import type { PropType } from 'vue'
 import type { RecordProcess } from './help'
 import { isTemploraryID } from '@/store'
+import { Message } from 'bill/index'
 
 export default defineComponent({
   props: {
@@ -87,8 +88,11 @@ export default defineComponent({
         base.push(
           { label: '重命名', value: 'rename' },
           { label: '继续录制', value: 'continue' },
-          { label: '下载', value: 'download' },
         )
+
+        if (props.record.status === RecordStatus.SUCCESS) {
+          base.push({ label: '下载', value: 'download' },)
+        }
       }
       base.push({ label: '删除', value: 'delete' })
       return base
@@ -97,6 +101,14 @@ export default defineComponent({
     const isShot = ref<boolean>(false)
     const inputRef = ref()
     const isEditTitle = useFocus(computed(() => inputRef.value?.vmRef.root))
+
+    watchEffect(() => {
+      if (!isEditTitle.value && !props.record.title.length) {
+        isEditTitle.value = true
+        Message.warning('视频名称不可为空')
+      }
+    })
+
     const isPlayVideo = ref(false)
     const actions = {
       continue: () => isShot.value = true,
@@ -104,9 +116,9 @@ export default defineComponent({
       rename: () => isEditTitle.value = true,
       play: () => isPlayVideo.value = true,
       download() {
-        const url = getResource(props.record.url)
-        const paths = url.split('/')
-        loadPack(saveAs(url, paths[paths.length - 1]))
+        const url = getResource(props.record.url!)
+        const ext = getExtname(url) || 'mp4'
+        loadPack(saveAs(url, `${props.record.title}.${ext}`))
       },
     }
     props.record.immediately && actions.continue()
@@ -149,4 +161,10 @@ export default defineComponent({
 
 
 <style lang="scss" src="./style.scss" scoped>
+</style>
+
+<style>
+  .record-sign .ui-input .text.suffix input {
+    padding-right: 60px;
+  }
 </style>

src/views/record/style.scss

@@ -18,6 +18,7 @@
 
 .tree {
   margin-top: 20px;
+  padding-bottom: 100px;
 }
 
 .header-btns {
@@ -54,6 +55,7 @@
     color: #fff;
     font-size: 16px;
     margin-right: 10px;
+    flex: none;
 
     img,
     &::before {
@@ -99,6 +101,8 @@
 .action {
   color: #fff;
   font-size: 14px;
+  flex: none;
+  margin-left: 10px;
 }
 
 .countdown {
@@ -130,6 +134,7 @@
 }
 
 .shot-ctrl {
+  z-index: 2;
   .btn {
     flex: none;
     width: 160px;
@@ -202,4 +207,4 @@
       font-size: 22px;
     }
   }
-}
+}

src/views/registration/index.vue

@@ -8,10 +8,28 @@
     <ui-floating
       v-if="selectOptions.some(({key}) => key === 'opacity')"
       :refer="opacityOptionEl"
+      class="opacity-range"
       isTransform
       dire="right-center"
     >
-      <div class="floating-range strengthen">
+
+      <div class="right-range floating-range strengthen ">
+        <div class="range-content">
+          <div class="range-layout">
+            <ui-input 
+              type="range" 
+              v-model="model.opacity"
+              v-bind="modelRange.opacityRange" 
+              :moveCallback="changeRange"
+              :ctrl="false" 
+              :input="false"
+              width="100%"
+            />
+            <span class="num" :style="{left: `${model.opacity}%`}">{{parseInt(model.opacity.toString())}}%</span>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="floating-range strengthen">
         <div class="range-content">
           <ui-input 
             type="range" 
@@ -21,12 +39,12 @@
             :input="false"
             width="100%"
           />
-          <span class="num" :style="{left: `${model.opacity}%`}">{{model.opacity}}%</span>
+          <span class="num" :style="{left: `${model.opacity}%`}">{{parseInt(model.opacity.toString())}}%</span>
         </div>
-      </div>
+      </div> -->
     </ui-floating>
 
-    <div class="right-range floating-range strengthen">
+    <!-- <div class="right-range floating-range strengthen">
       <div class="range-content">
         <span class="fun-ctrl" @click="model!.bottom += modelRange.bottomRange.step">+</span>
         <ui-input 
@@ -40,7 +58,7 @@
         />
         <span class="fun-ctrl" @click="model!.bottom -= modelRange.bottomRange.step">-</span>
       </div>
-    </div>
+    </div> -->
 
     <div class="ui-message tip-left">请在当前窗口调整水平方向位置</div>
     <div class="ui-message tip-right">请在当前窗口调整垂直方向位置</div>
@@ -55,6 +73,7 @@ import { diffArrayChange } from '@/utils'
 import { useViewStack } from '@/hook'
 import { autoSaveFuseModels, getFuseModel, leave } from '@/store'
 import { router, RoutesName } from '@/router'
+import { currentModelStack } from '@/env'
 
 import type { ControlExpose } from '@/components/control-panl'
 
@@ -105,16 +124,19 @@ watchEffect((onCleanup) => {
   const smodel = sceneModel.value
   if (smodel) {
     smodel.enterAlignment()
+    const pop = currentModelStack.push(model as any)
 
     onCleanup(() => {
       smodel.leaveTransform()
       smodel.leaveAlignment()
+      pop()
     })
   } else if (isCurrent.value) {
     leave()
   }
 })
 
+
 useViewStack(() => () => {
   if (selectOptions.value.length) {
     selectOptions.value = []
@@ -138,13 +160,19 @@ useViewStack(autoSaveFuseModels)
     display: flex;
     align-items: center;
     height: 100%;
-    position: relative;
+    padding: 0 15px;
+    .range-layout {
+      height: 100%;
+      width: 100%;
+      position: relative;
+      padding: 5px 0;
+    }
 
     .num {
       position: absolute;
       color: #fff;
-      bottom: 100%;
-      transform: translateX(-50%);
+      top: 100%;
+      transform: translateX(calc(-50% - 10px)) rotate(90deg);
       background: #000000;
       border-radius: 4px;
       padding: 2px 6px;
@@ -192,10 +220,14 @@ useViewStack(autoSaveFuseModels)
   left: 75%;
   transform: translateX(-50%);
 }
+
 </style>
 
 <style>
 .floating-range .ui-input .range .range-content {
   --slideSize: calc(var(--height) + 8px) !important;
 }
+.opacity-range {
+  margin-left: 70px;
+}
 </style>

src/views/sign-model/index.vue

@@ -5,8 +5,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { loadModel, fuseModel as FModel } from '@/model'
-import { fetchScene } from '@/api'
-import { createFuseModels, fuseModels } from '@/store'
+import { fetchScene, fetchScenesAll, Scene, SceneType } from '@/api'
+import { createFuseModels, defTitle, fuseModels, SceneStatus } from '@/store'
 import { params, showModelsMapStack } from '@/env'
 import { Dialog } from 'bill/index'
 import { useViewStack, useActive } from '@/hook';
@@ -15,17 +15,31 @@ import { sdk } from '@/sdk'
 const active = useActive()
 let pop: () => void
 const loadSignModel = async () => {
-  const scene = await fetchScene(Number(params.modelId))
+  let scene: Scene | undefined
+  if ('modelId' in params) {
+    const mscene = await fetchScene(Number(params.modelId))
+    if (mscene.status !== SceneStatus.SUCCESS) {
+      scene = mscene
+    }
+  } else if ('m' in params) {
+    const scenes = await fetchScenesAll({ numList: [params.m!], type: SceneType.SWSSMX })
+    scene = scenes.find(scene => scene.num === params.m)
+    console.log(scene)
+  } 
+
   if (!scene) {
     return Dialog.alert(`模型不存在！`)
   }
   if (active.value) {
+    defTitle.value = scene.title || scene.modelTitle
+    
     const fuseModel = createFuseModels({
       modelId: scene.modelId,
       show: true,
       url: scene.modelGlbUrl || scene.modelObjUrl,
       type: scene.type,
-      opacity: 100
+      opacity: 100,
+      modelType: scene.modelDateType
     })
     fuseModels.value.push(fuseModel)
 
@@ -35,7 +49,6 @@ const loadSignModel = async () => {
   }
 }
 
-
 useViewStack(() => {
   const bcModels = fuseModels.value
   fuseModels.value = []

src/views/summary/index.vue

@@ -4,16 +4,18 @@
   </LeftPano>
 
   <RightFillPano>
-    <div class="tabs">
-      <span 
-        v-for="tab in tabs"
-        :key="tab.key"
-        :class="{ active: tab.key === current }"
-        @click="current = tab.key"
-      >
-        {{tab.text}}
-      </span>
-    </div>
+    <template #header>
+      <div class="tabs">
+        <span 
+          v-for="tab in tabs"
+          :key="tab.key"
+          :class="{ active: tab.key === current }"
+          @click="current = tab.key"
+        >
+          {{tab.text}}
+        </span>
+      </div>
+    </template>
     <Taggings v-if="current === TabKey.tagging" />
     <Guides  v-if="current === TabKey.guide"/>
     <Measures  v-if="current === TabKey.measure"/>
@@ -21,9 +23,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref, watchEffect } from 'vue'
 import { useViewStack } from '@/hook'
-import { togetherCallback } from '@/utils'
 import { showRightCtrlPanoStack, showRightPanoStack } from '@/env'
 import { currentModel, fuseModel, loadModel } from '@/model'
 import { LeftPano, RightFillPano } from '@/layout'
@@ -39,14 +40,16 @@ const tabs = [
   { key: TabKey.guide, text: '路径' },
 ]
 const current = ref(tabs[0].key)
+const showRightCtrl = ref(true)
 
-const showRightPano = computed(() => currentModel.value === fuseModel)
-useViewStack(
-  () => togetherCallback([
-    showRightCtrlPanoStack.push(showRightPano), 
-    showRightPanoStack.push(showRightPano)
-  ])
-)
+watchEffect((onclean) => {
+  const isFuse = currentModel.value === fuseModel
+  if (!isFuse) {
+    onclean(showRightPanoStack.push(ref(false)))
+  }
+  showRightCtrl.value = isFuse
+})
+useViewStack(() => showRightCtrlPanoStack.push(showRightCtrl))
 </script>
 
 <style lang="scss" scoped>

src/views/tagging-position/index.vue

@@ -1,6 +1,6 @@
 <template>
   <RightFillPano>
-    <ui-group :title="`标注${tagging?.title}`" class="position-group">
+    <ui-group :title="`${tagging?.title}放置位置`" class="position-group">
       <PositionSign 
         v-for="(position, i) in positions" 
         :key="position.id" 
@@ -93,7 +93,9 @@ watchEffect((onCleanup) => {
 })
 useViewStack(autoSaveTaggings)
 useViewStack(() => {
+  const hide = Message.show({ msg: '请在模型上单击选择标注位置', type: 'warning' })
   enterEdit(() => router.back())
+  return hide
 })
 </script>
 

src/views/tagging/edit.vue

@@ -36,6 +36,7 @@
           placeholder="" 
           type="text" 
           v-model="tagging.part"
+          :maxlength="60"
         >
           <template #preIcon><span>遗留部位：</span></template>
         </ui-input>
@@ -45,6 +46,7 @@
           placeholder="" 
           type="text" 
           v-model="tagging.method"
+          :maxlength="60"
         >
           <template #preIcon><span>提取方法：</span></template>
         </ui-input>
@@ -54,24 +56,26 @@
           type="text" 
           placeholder=""
           v-model="tagging.principal"
+          :maxlength="60"
         >
           <template #preIcon><span>提取人：</span></template>
         </ui-input>
         <ui-input
-            class="input "
-            type="file"
-            width="100%"
-            height="225px"
-            preview
-            placeholder="上传图片"
-            othPlaceholder="支持JPG、PNG图片格式，单张不超过5MB，最多支持上传9张。"
-            accept=".jpg, .png"
-            :disable="true"
-            :multiple="true"
-            :maxSize="5 * 1024 * 1024"
-            :maxLen="9"
-            :modelValue="tagging.images"
-            @update:modelValue="fileChange"
+          class="input "
+          type="file"
+          width="100%"
+          height="225px"
+          require
+          preview
+          placeholder="上传图片"
+          othPlaceholder="支持JPG、PNG图片格式，单张不超过5MB，最多支持上传9张。"
+          accept=".jpg, .png"
+          :disable="true"
+          :multiple="true"
+          :maxSize="5 * 1024 * 1024"
+          :maxLen="9"
+          :modelValue="tagging.images"
+          @update:modelValue="fileChange"
         >
             <template v-slot:valuable>
                 <Images :tagging="tagging" :hideInfo="true">
@@ -96,7 +100,7 @@
 <script lang="ts" setup>
 import StylesManage from './styles.vue'
 import Images from './images.vue'
-import { computed, ref } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 import { Dialog, Message } from 'bill/index';
 import { 
   taggingStyles,
@@ -104,7 +108,8 @@ import {
   getTaggingStyle, 
   TaggingStyle,
   taggings,
-  isTemploraryID
+  isTemploraryID,
+defaultStyle
 } from '@/store'
 
 export type EditProps = {
@@ -114,6 +119,13 @@ export type EditProps = {
 const props = defineProps<EditProps>()
 const emit = defineEmits<{ (e: 'quit'): void, (e: 'save', data: Tagging): void }>()
 const tagging = ref<Tagging>({...props.data, images: [...props.data.images]})
+const activeStyle = computed(() => getTaggingStyle(tagging.value.styleId))
+
+watchEffect(() => {
+  if (!activeStyle.value && defaultStyle.value) {
+    tagging.value.styleId = defaultStyle.value.id
+  }
+})
 
 const submitHandler = () => {
   if (!tagging.value.title.trim()) {
@@ -127,7 +139,8 @@ const submitHandler = () => {
 
 const styles = computed(() => 
   [...taggingStyles.value].sort((a, b) => 
-    a.default ? -1 : b.default ? 1 : isTemploraryID(a.id) ? -1 : isTemploraryID(b.id) ? 1 : 0
+    a.default ? -1 : b.default ? 1 :
+    a.lastUse ? -1 : b.lastUse ? 1 : isTemploraryID(a.id) ? -1 : isTemploraryID(b.id) ? 1 : 0
   )
 )
 
@@ -245,4 +258,21 @@ const delImageHandler = async (file: Tagging['images'][number]) => {
   width: 70px;
   text-align: right;
 }
+
+.del-file {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  font-size: 16px;
+  background-color: rgba(0,0,0,0.5);
+  border-radius: 50%;
+  text-align: center;
+  line-height: 32px
+}
+</style>
+
+<style>
+  .edit-hot-layer .input.ui-input .text.suffix input {
+    padding-right: 60px;
+  }
 </style>

src/views/tagging/index.vue

@@ -1,21 +1,23 @@
 <template>
   <RightFillPano>
-    <ui-group borderBottom>
-      <template #header>
-        <ui-button @click="editTagging = createTagging()">
-          <ui-icon type="add" />
-          新增
-        </ui-button>
-      </template>
-    </ui-group>
-    <ui-group title="标注">
+    <template #header>
+      <ui-group borderBottom>
+        <template #header>
+          <ui-button @click="editTagging = createTagging()">
+            <ui-icon type="add" />
+            新增
+          </ui-button>
+        </template>
+      </ui-group>
+    </template>
+    <ui-group title="标注列表" class="tagging-list">
       <template #icon>
         <ui-icon 
           ctrl
           :class="{active: showSearch}"
           type="search" 
           @click="showSearch = !showSearch" 
-          style="margin-right: 10px"
+          style="margin-right: 20px"
         />
         <ui-icon 
           ctrl
@@ -61,14 +63,15 @@ import { router, RoutesName } from '@/router'
 import { custom } from '@/env'
 import { 
   taggings, 
-  isTemploraryID, 
+  getTaggingStyle, 
   Tagging, 
   autoSaveTaggings, 
   createTagging,
   getTaggingPositions,
   taggingPositions,
   isOld,
-  save
+  save,
+  getTagging
 } from '@/store'
 
 const showSearch = ref(false)
@@ -78,11 +81,16 @@ const filterTaggings = computed(() => taggings.value.filter(tagging => tagging.t
 const editTagging = ref<Tagging | null>(null)
 const saveHandler = (tagging: Tagging) => {
   if (!editTagging.value) return;
-  if (isTemploraryID(editTagging.value.id)) {
+  if (!getTagging(editTagging.value.id)) {
     taggings.value.push(tagging)
+    const style = getTaggingStyle(tagging.styleId)
+    if (style) {
+      style.lastUse = 1
+    }
   } else {
     Object.assign(editTagging.value, tagging)
   }
+  
   editTagging.value = null
 }
 
@@ -109,4 +117,8 @@ useViewStack(autoSaveTaggings)
   .active {
     color: var(--color-main-normal) !important;
   }
+
+  .tagging-list {
+    padding-bottom: 30px;
+  }
 </style>

src/views/tagging/show.vue

@@ -23,13 +23,10 @@
 import { ref } from 'vue'
 import { custom } from '@/env'
 import TaggingSign from './sign.vue'
-import { taggings, initialTaggings, initialTaggingStyles } from '@/store'
+import { taggings } from '@/store'
 
 import type { Tagging } from '@/store'
 
-initialTaggingStyles()
-initialTaggings() 
-
 const selectTagging = ref<Tagging | null>(null)
 </script>
 

src/views/tagging/sign.vue

@@ -5,7 +5,10 @@
     @click="edit && getTaggingIsShow(tagging) && emit('select', true)"
   >
     <div class="info">
-      <img :src="getResource(getFileUrl(tagging.images.length ? tagging.images[0] : style.icon))" v-if="style">
+      <img 
+        :src="getResource(getFileUrl(tagging.images[0]))" 
+        v-if="tagging.images.length"
+      >
       <div>
         <p>{{ tagging.title }}</p>
         <span>放置：{{ positions.length }}</span>
@@ -20,7 +23,7 @@
         :class="{ disabled: !getTaggingIsShow(tagging) }"
       />
       <template v-else>
-        <ui-icon type="pin1" ctrl @click.stop="$emit('fixed')" />
+        <ui-icon type="pin1" ctrl @click.stop="$emit('fixed')" tip="放置" />
         <ui-more 
           :options="menus" 
           style="margin-left: 20px" 

src/views/tagging/styles.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="hot-styles">
-    <div class="add item" v-if="!props.all">
+    <div class="add item" v-if="!props.all && styles.length < maxLength">
       <span class="fun-ctrl">
         <ui-input 
           class="input" 
@@ -32,7 +32,7 @@
       </span>
     </div>
     <div 
-      v-if="!props.all && props.styles.length > 6"
+      v-if="!props.all && props.styles.length > maxShowLen"
       class="add item style-more" 
       @click="showAll = !showAll"
     >
@@ -76,6 +76,9 @@ const props = defineProps<{
   all?: boolean
 }>()
 
+const maxLength = 20
+const maxShowLen = computed(() => props.styles.length < maxLength ? 5 : 6)
+
 const emit = defineEmits<{
   (e: 'change', style: TaggingStyle): void
   (e: 'delete', style: TaggingStyle): void
@@ -88,9 +91,9 @@ const styleAll = computed(() => {
   if (props.all) {
     return props.styles
   } else {
-    const styles = props.styles.slice(0, props.styles.length > 6 ? 5 : 6)
-    if (!styles.includes(props.active)) {
-      styles[3] = props.active
+    const styles = props.styles.slice(0, props.styles.length > maxShowLen.value ? maxShowLen.value : maxShowLen.value + 1)
+    if (!styles.includes(props.active) && props.active) {
+      styles[styles.length - 1] = props.active
     }
     return styles
   }

src/views/test/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="layout">
+    <TI v-model:attr.number="attr" />
+    123123
+    <button @click="show = !show">切换</button>
+    <input type="text" @change="ev => ev.returnValue">
+    <component :is="cp" v-for="cp in cps"></component>
+
+    <keep-alive>
+      <TIN v-if="show" />
+    </keep-alive>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive, h, defineComponent, ref, onMounted, onUnmounted, onUpdated, computed, PropType } from 'vue'
+
+const TP = defineComponent({
+  props: {
+    children: { type: String }
+  },
+  setup(props) {
+    onUpdated(() => {
+      console.log('updated', props.children)
+    }),
+    onMounted(() => {
+      console.log('mounted', props.children)
+    })
+    onUnmounted(() => {
+      console.log('unmounted', props.children)
+    })
+
+    return () => h('p', props.children)
+  }
+})
+const TP1 = () => h(TP, { children: '111' })
+const TP2 = () => h(TP, { children: '222' })
+const TP3 = () => h(TP, { children: '333' })
+const TP4 = () => h(TP, { children: '444' })
+
+const TI = defineComponent({
+  props: {
+    attr: {
+      type: String
+    },
+    'onUpdate:attr': {
+      type: Function as PropType<(attr: string) => void>,
+    }
+  },
+  setup(props) {
+    const change = () => {
+      console.log('-->', props.attr)
+      props['onUpdate:attr']!(' 1' + props.attr + '1 ')
+    }
+    console.log(props)
+
+    return () => h('div', [
+        '内容：' + props.attr,
+        h('button', { onClick: change }, '变化')
+      ])
+  }
+})
+
+const TIN = defineComponent({
+  setup() {
+
+    return () => h('div', {style: { height: '3000px' }}, [
+      h('input')
+    ])
+  }
+})
+
+export default defineComponent({
+  setup() {
+    const data = reactive([
+      { name: '张三' },
+      { name: '李四' },
+    ])
+    const show = ref(false)
+    const cps = computed(() => 
+      show.value ? [TP1, TP2, TP3] : [TP4, TP1, TP2, TP3]
+    )
+    const attr = ref('1')
+
+    return {
+      cps,
+      show,
+      attr
+    }
+  },
+  components: {
+    TI,
+    TIN
+  }
+})
+
+
+</script>
+
+<style scoped>
+  .layout {
+    overflow: auto;
+    height: 100vh;
+    background-color: #ccc;
+  }
+  input {
+    border: 1px solid #000;
+  }
+</style>

src/views/view/index.vue

@@ -1,11 +1,13 @@
 <template>
   <RightFillPano>
-    <div class="btns header-btns">
-      <ui-button class="start" @click="getView">
-        <ui-icon type="add" />
-        视图提取
-      </ui-button>
-    </div>
+    <template #header>
+      <div class="btns header-btns">
+        <ui-button class="start" @click="getView">
+          <ui-icon type="add" />
+          视图提取
+        </ui-button>
+      </div>
+    </template>
 
     <ui-group title="全部视图" class="tree" >
       <Draggable :list="views" draggable=".sign" itemKey="id">
@@ -30,8 +32,10 @@ import { useViewStack } from '@/hook'
 import Draggable from 'vuedraggable'
 import Sign from './sign.vue'
 import { loadModel, currentModel, fuseModel } from '@/model'
-import { loadPack } from '@/utils'
+import { loadPack, togetherCallback } from '@/utils'
 import { Message } from 'bill/index'
+import { showLeftPanoStack } from '@/env'
+import { ref, watch } from 'vue'
 
 import type { View } from '@/store'
 
@@ -67,7 +71,19 @@ const deleteView = (record: View) => {
     views.value.splice(index, 1)
   }
 }
+
+const showLeftPano = ref(false)
+watch(currentModel, () => {
+  if (currentModel.value) {
+    showLeftPano.value = false
+  }
+})
+
+
 useViewStack(autoSaveViews)
+useViewStack(() => togetherCallback([
+  showLeftPanoStack.push(showLeftPano) 
+]))
 </script>
 
 <style lang="scss" src="./style.scss" scoped>

src/views/view/show.vue

@@ -13,14 +13,13 @@
 
 <script setup lang="ts">
 import Sign from './sign.vue'
-import { views, initialViews } from '@/store'
+import { views } from '@/store'
 import { LeftPano } from '@/layout'
 
-initialViews()
 </script>
 
 <style lang="scss" scoped>
 .pano-group {
-  padding: 0 20px;
+  padding: 0 20px 40px;
 }
 </style>

src/views/view/sign.vue

@@ -1,20 +1,22 @@
 <template>
-  <ui-group-option class="sign">
+  <ui-group-option class="sign" :class="{active}">
     <div class="content">
       <span class="cover" @click="fly">
         <img :src="getResource(getFileUrl(view.cover))" alt="">
       </span>
       <ui-input 
+        class="view-title-input"
         type="text" 
         :modelValue="view.title" 
-        @update:modelValue="(title: string) => $emit('updateTitle', title)"
+        :maxlength="15"
+        @update:modelValue="(title: string) => $emit('updateTitle', title.trim())"
         v-show="isEditTitle" 
         ref="inputRef" 
         height="28px" 
       />
       <div class="title" v-show="!isEditTitle" @click="fly">
         <p>{{ view.title }}</p>
-        <span>{{ getModelTypeDesc(modelType as ModelType) }}</span>
+        <span>  {{ getModelDesc(modelType as ModelType) }}</span>
       </div>
     </div>
     <div class="action" v-if="edit">
@@ -29,14 +31,15 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watchEffect } from 'vue'
 import { useFocus } from 'bill/hook/useFocus'
-import { getResource } from '@/env'
-import { getFileUrl } from '@/utils'
-import { loadModel, getModelTypeDesc, ModelType } from '@/model'
+import { custom, getResource } from '@/env'
+import { deepIsRevise, getFileUrl } from '@/utils'
+import { loadModel, getModelDesc, ModelType, currentModel } from '@/model'
 import { viewToModelType } from '@/store'
 
 import type { View } from '@/store'
+import { Message } from 'bill/expose-common'
 
 const props = withDefaults(
   defineProps<{ view: View, edit?: boolean }>(),
@@ -49,12 +52,20 @@ const emit = defineEmits<{
 }>()
 
 const menus = [
-  { label: '编辑', value: 'rename' },
+  { label: '重命名', value: 'rename' },
   { label: '删除', value: 'delete' },
 ]
 
 const inputRef = ref()
 const isEditTitle = useFocus(computed(() => inputRef.value?.vmRef.root))
+
+watchEffect(() => {
+  if (!isEditTitle.value && !props.view.title.length) {
+    isEditTitle.value = true
+    Message.warning('视图名称不可为空')
+  }
+})
+
 const actions = {
   delete: () => emit('delete'),
   rename: () => isEditTitle.value = true
@@ -62,10 +73,21 @@ const actions = {
 const modelType = viewToModelType(props.view)
 const fly = async () => {
   const sdk = await loadModel(modelType)
+  custom.currentView = props.view
   sdk.setView(props.view.flyData)
 }
+const active = computed(() => {
+  return custom.currentView === props.view && !deepIsRevise(currentModel.value, modelType)
+})
+
 </script>
 
 
 <style lang="scss" src="./style.scss" scoped>
+</style>
+
+<style>
+  .view-title-input.ui-input .text.suffix input {
+    padding-right: 50px;
+  }
 </style>

src/views/view/style.scss

@@ -18,6 +18,7 @@
 
 .tree {
   margin-top: 20px;
+  padding-bottom: 40px;
 }
 
 .header-btns {
@@ -34,10 +35,20 @@
   align-items: center;
   justify-content: space-between;
   margin-bottom: 0 !important;
+  position: relative;
 
   &:last-child {
     border-bottom: 1px solid rgba(255,255,255,0.1600);
   }
+
+  &.active::after {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    inset: 0 -20px;
+    background-color: rgba(0, 200, 175, 0.16);
+    z-index: -1;
+  }
 }
 
 .content {
@@ -45,6 +56,7 @@
   align-items: center;
 
   .cover {
+    flex: none;
     display: flex;
     position: relative;
     width: 48px;
@@ -78,4 +90,6 @@
 .action {
   color: #fff;
   font-size: 14px;
+  flex: none;
+  margin-left: 10px;
 }