Merge branch 'v1.7.0' of http://192.168.0.115:3000/bill/fuse-code into v1.7.0

src/api/constant.ts

@@ -26,19 +26,19 @@ export const SCENE_LIST_ALL = `/fusion/api/scene/list`
 export const MODEL_LIST = `/fusion/case/sceneList`
 export const MODEL_SIGN = `/fusion/model/getInfo`
 
-// 标注列表
+// 标签列表
 export const TAGGING_LIST = `/fusion/caseTag/allList`
 export const INSERT_TAGGING = `/fusion/caseTag/add`
 export const UPDATE_TAGGING = `/fusion/caseTag/update`
 export const DELETE_TAGGING = `/fusion/caseTag/delete`
 
-// 标注放置列表
+// 标签放置列表
 export const TAGGING_POINT_LIST = `/fusion/caseTagPoint/allList`
 export const INSERT_TAGGING_POINT = `/fusion/caseTagPoint/place`
 export const UPDATE_TAGGING_POINT = `/fusion/caseTagPoint/update`
 export const DELETE_TAGGING_POINT = `/fusion/caseTagPoint/delete`
 
-// 标注样式类型列表
+// 标签样式类型列表
 export const TAGGING_STYLE_LIST = '/fusion/edit/hotIcon/list'
 export const INSERT_TAGGING_STYLE = '/fusion/edit/hotIcon/add'
 export const DELETE_TAGGING_STYLE = '/fusion/edit/hotIcon/delete'

src/layout/edit/fuse-left-pano.vue

@@ -1,10 +1,6 @@
 <template>
   <LeftPano>
-    <ModelList
-      :can-change="custom.modelsChangeStore"
-      @delete-model="modelDelete"
-      @click-model="modelChangeSelect"
-    >
+    <ModelList :can-change="custom.modelsChangeStore" @delete-model="modelDelete" @click-model="modelChangeSelect">
       <template #action v-if="custom.modelsChangeStore">
         <SelectModel>
           <ui-icon ctrl type="add" />

src/layout/edit/scene-select.vue

@@ -1,7 +1,7 @@
 <template>
-  <Modal 
+  <Modal
     width="800px"
-    title="添加场景" 
+    title="添加场景"
     :visible="visible"
     @ok="okHandler"
     @cancel="visible = false"
@@ -10,30 +10,32 @@
     class="model-table"
   >
     <div>
-      <div className='model-header'>
-        <p class="header-desc">已选择数据<span>（ {{ rowSelection.selectedRowKeys.length }} ）</span></p>
+      <div className="model-header">
+        <p class="header-desc">
+          已选择数据<span>（ {{ rowSelection.selectedRowKeys.length }} ）</span>
+        </p>
         <Search
-          className='content-header-search'
-          placeholder="输入名称搜索" 
+          className="content-header-search"
+          placeholder="输入名称搜索"
           v-model:value="keyword"
           allow-clear
           style="width: 264px"
         />
       </div>
       <div class="table-layout" v-if="filterScenes.length">
-        <Table 
-          :row-key="record => record.modelId"
+        <Table
+          :row-key="(record) => record.modelId"
           :columns="cloumns"
           :rowSelection="rowSelection"
           :data-source="filterScenes"
           :pagination="false"
         />
       </div>
-      <div style="padding: 1px;" v-else>
-        <Empty 
-          :description="keyword.length ? '暂无搜索结果': '暂无结果'" 
+      <div style="padding: 1px" v-else>
+        <Empty
+          :description="keyword.length ? '暂无搜索结果' : '暂无结果'"
           :image="Empty.PRESENTED_IMAGE_SIMPLE"
-          className="ant-empty ant-empty-normal" 
+          className="ant-empty ant-empty-normal"
         />
       </div>
     </div>
@@ -45,91 +47,103 @@
 </template>
 
 <script lang="ts" setup>
-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, initialScenes } 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 { asyncTimeout, createLoadPack } from "@/utils";
+import {
+  fuseModels,
+  createFuseModels,
+  addFuseModel,
+  fuseModelsLoaded,
+  initialScenes,
+} from "@/store";
 
-import type { Scene } from '@/api'
+import type { Scene } from "@/api";
+import { getSceneModel } from "@/sdk";
 
-type Key = Scene['modelId']
+type Key = Scene["modelId"];
 
-const Search = Input.Search
+const Search = Input.Search;
 
-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))
-    .map(scene => ({
+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))
+    .map((scene) => ({
       ...scene,
       createTime: scene.createTime.substr(0, 16),
-      type: SceneTypeDesc[scene.type]
+      type: SceneTypeDesc[scene.type],
     }))
-)
-const selects = ref<Key[]>(selectIds.value)
+);
+const selects = ref<Key[]>(selectIds.value);
 const rowSelection: any = ref({
   selectedRowKeys: selects,
   onChange: (ids: number[]) => {
-    selects.value = Array.from(new Set(ids.concat(selectIds.value)))
+    selects.value = Array.from(new Set(ids.concat(selectIds.value)));
   },
   getCheckboxProps: (record: Scene) => ({
-    disabled: selectIds.value.includes(record.modelId)
-  })
-})
+    disabled: selectIds.value.includes(record.modelId),
+  }),
+});
 const cloumns = [
   {
     width: "400px",
-    title: '名称',
-    dataIndex: 'name',
-    key: 'name',
+    title: "名称",
+    dataIndex: "name",
+    key: "name",
   },
   {
-    title: '类型',
-    dataIndex: 'type',
-    key: 'type',
+    title: "类型",
+    dataIndex: "type",
+    key: "type",
   },
   {
-    title: '拍摄/创建时间',
-    dataIndex: 'createTime',
-    key: 'createTime',
-  }
-]
+    title: "拍摄/创建时间",
+    dataIndex: "createTime",
+    key: "createTime",
+  },
+];
 
 const okHandler = createLoadPack(async () => {
-  const addPromises = selects.value
-    .filter(modelId => !fuseModels.value.some(model => model.modelId === modelId))
-    .map(modelId => createFuseModels({ modelId }))
-    .map(addFuseModel)
+  const models = selects.value
+    .filter((modelId) => !fuseModels.value.some((model) => model.modelId === modelId))
+    .map((modelId) => createFuseModels({ modelId }));
+  const addPromises = models.map(addFuseModel);
 
-  await Promise.all(addPromises)
+  await Promise.all(addPromises);
   await new Promise<void>((resolve) => {
     nextTick(() => {
       const stop = watchEffect(() => {
         if (fuseModelsLoaded.value) {
           nextTick(() => {
-            stop()
-            resolve()
-          })
+            stop();
+            resolve();
+          });
         }
-        
-      })
-    })
-  })
-  await save()
-  visible.value = false
-})
+      });
+    });
+  });
+  models.forEach((model) => {
+    if (getSceneModel(model)) {
+      model.rotation = getSceneModel(model)!.getDefaultRotation();
+    }
+  });
+  await asyncTimeout(100);
+  await save();
+  visible.value = false;
+});
 
 watch(visible, (visible, oldvisible) => {
   if (visible !== oldvisible) {
-    keyword.value = ''
-    selects.value = selectIds.value
+    keyword.value = "";
+    selects.value = selectIds.value;
 
-    visible && initialScenes()
+    visible && initialScenes();
   }
-})
+});
 </script>
 
 <style lang="less" scoped>
@@ -153,4 +167,4 @@ watch(visible, (visible, oldvisible) => {
 .ant-modal-root .ant-table-tbody > tr > td {
   word-break: break-all;
 }
-</style>
+</style>

src/layout/model-list/index.vue

@@ -1,38 +1,22 @@
 <template>
-  <List
-    :title="title"
-    rawKey="id"
-    class="scene-model-list"
-    :data="modelList"
-    :showContent="showContent"
-  >
+  <List :title="title" rawKey="id" class="scene-model-list" :data="modelList" :showContent="showContent">
     <template #action>
       <slot name="action" />
     </template>
     <template #atom="{ item }">
-      <ModelSign
-        :canChange="canChange"
-        :model="item.raw"
-        @delete="modelDelete(item.raw)"
-        @click="(mode: any) => modelChangeSelect(item.raw, mode)"
-      />
+      <ModelSign :canChange="canChange" :model="item.raw" @delete="modelDelete(item.raw)"
+        @click="(mode: any) => modelChangeSelect(item.raw, mode)" />
     </template>
   </List>
 
-  <Teleport to="#left-pano" v-if="panoModel">
+  <Teleport to="#left-pano" v-if="panoModel && currentModel === fuseModel">
     <div class="mode-tab strengthen">
-      <div
-        class="mode-icon-layout"
-        @click="modelChangeSelect(panoModel, 'fuse')"
-        :class="{ active: custom.showMode === 'fuse' }"
-      >
+      <div class="mode-icon-layout" @click="modelChangeSelect(panoModel, 'fuse')"
+        :class="{ active: custom.showMode === 'fuse' }">
         <ui-icon type="show_3d_n" class="icon" ctrl />
       </div>
-      <div
-        class="mode-icon-layout"
-        @click="modelChangeSelect(panoModel, 'pano')"
-        :class="{ active: custom.showMode === 'pano' }"
-      >
+      <div class="mode-icon-layout" @click="modelChangeSelect(panoModel, 'pano')"
+        :class="{ active: custom.showMode === 'pano' }">
         <ui-icon type="show_roaming_n" class="icon" ctrl />
       </div>
     </div>
@@ -46,9 +30,8 @@ import List from "@/components/list/index.vue";
 import ModelSign from "./sign.vue";
 import { activeModel, getSupperPanoModel } from "@/sdk/association";
 import { fuseModels, getFuseModelShowVariable } from "@/store";
-
 import type { FuseModel } from "@/store";
-import { currentModel, fuseModel } from "@/model";
+import { currentModel, fuseModel, loadModel } from "@/model";
 
 export type ModelListProps = {
   title?: string;
@@ -76,10 +59,13 @@ const modelList = computed(() =>
 const modelChangeSelect = (model: FuseModel, mode: "pano" | "fuse") => {
   if (getFuseModelShowVariable(model).value) {
     if (custom.currentModel === model && mode === custom.showMode) {
-      activeModel({ showMode: "fuse" });
-    } else {
-      activeModel({ showMode: mode, active: model });
+      return;
     }
+    activeModel({ showMode: mode, active: model });
+  }
+
+  if (currentModel.value !== fuseModel) {
+    loadModel(fuseModel);
   }
 };
 

src/layout/model-list/sign.vue

@@ -1,39 +1,21 @@
 <template>
-  <div
-    @click="!model.error && $emit('click', 'fuse')"
-    class="sign-layout"
-    :class="{ disabled: model.error }"
-  >
+  <div @click="!model.error && $emit('click', 'fuse')" class="sign-layout" :class="{ disabled: model.error }">
     <div class="model-header">
       <p>{{ model.title }}</p>
       <div class="model-action">
-        <ui-icon
-          ctrl
-          type="show_roaming_n"
-          @click.stop="$emit('click', 'pano')"
-          class="icon"
-          :class="{ active: custom.showMode === 'pano' && active }"
-          v-if="getSceneModel(props.model)?.supportPano()"
-        />
-        <ui-input
-          type="checkbox"
-          v-model="show"
-          @click.stop
-          :class="{
-            disabled: model.error || custom.showMode === 'pano',
-          }"
-        />
-        <ui-icon
-          v-if="custom.modelsChangeStore"
-          type="del"
-          ctrl
-          @click="$emit('delete')"
-        />
+        <ui-icon ctrl type="show_roaming_n" @click.stop="$emit('click', 'pano')" class="icon"
+          :class="{ active: custom.showMode === 'pano' && active }" v-if="getSceneModel(props.model)?.supportPano()" />
+        <ui-input type="checkbox" v-model="show" @click.stop :class="{
+          disabled: model.error || custom.showMode === 'pano',
+        }" />
+        <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 v-if="![SceneType.SWSS, SceneType.SWYDSS].includes(model.type)">
+        <span>数据大小：</span>{{ model.size }}
+      </p>
       <p><span>拍摄时间：</span>{{ model.time }}</p>
     </div>
   </div>

src/router/constant.ts

@@ -74,7 +74,7 @@ export const metas = {
   [RoutesName.registration]: { full: true, sysTitle: "多元融合" },
   [RoutesName.tagging]: {
     icon: "label",
-    title: "标注",
+    title: "标签",
     sysTitle: "多元融合",
   },
   [RoutesName.guide]: {

src/sdk/association/fuseMode.ts

@@ -170,6 +170,10 @@ export const activeModel = (status: {
   const model = status.active && getSceneModel(status.active)!;
   const oldModel = oldStatus.active && getSceneModel(oldStatus.active)!;
 
+  if (oldModel) {
+    oldModel.changeSelect(false);
+  }
+
   if (model && status.active === oldStatus.active) {
     if (status.showMode === "pano") {
       model && model.flyInPano();

src/sdk/association/setting.ts

@@ -7,6 +7,7 @@ export const associationSetting = (sdk: SDK, mountEl: HTMLDivElement) => {
   watchEffect(() => {
     setting.value?.fov && sdk.setCameraFov(setting.value.fov);
   });
+  sdk.hideGrid()
 
   const stopWatchPose = watchEffect(() => {
     if (!setting.value?.pose) return;
@@ -16,8 +17,8 @@ export const associationSetting = (sdk: SDK, mountEl: HTMLDivElement) => {
 
   watchEffect(() => {
     if (setting.value) {
-      const direEl = document.querySelector("#direction") as HTMLDivElement;
-      direEl.style.display = setting.value.openCompass ? "block" : "none";
+      // const direEl = document.querySelector("#direction") as HTMLDivElement;
+      // direEl.style.display = setting.value.openCompass ? "block" : "none";
     }
   });
 

src/sdk/association/tagging.ts

@@ -9,7 +9,7 @@ import { SDK } from '../sdk'
 
 
 
-// -----------------热点关联--------------------
+// -----------------标签关联--------------------
 
 export const associationTaggings = (sdk: SDK, el: HTMLDivElement) => {
   const getTaggings = () => taggings.value

src/sdk/cover/index.js

@@ -1177,7 +1177,7 @@ export const enter = ({ dom, mapDom, isLocal, lonlat, scenes }) => {
 
 
 
-        addTag(info) {//加热点
+        addTag(info) {//加标签
             let bus = mitt()
             let tag
 

src/sdk/sdk.ts

@@ -41,6 +41,7 @@ export type SceneModel = ToChangeAPI<SceneModelAttrs> & {
   enterRotateMode: () => void;
   enterMoveMode: () => void;
   leaveTransform: () => void;
+  getDefaultRotation: () => SceneLocalPos
   enterAlignment: () => void;
   leaveAlignment: () => void;
   enterScaleSet: () => ScaleSet;
@@ -156,7 +157,6 @@ export interface SDK {
     type: SettingResourceType,
     tb: { scale?: number; rotate?: number }
   ) => void;
-  compassVisibility: (visibility: boolean) => void;
   switchScene: (
     scene: { type: SceneType; num: string } | null
   ) => Promise<void>;
@@ -165,6 +165,8 @@ export interface SDK {
   enableMap(dom: HTMLDivElement, latlng: number[]): void;
   switchMapType: (type: string) => void;
   showGrid: () => void;
+
+  compassVisibility: (visibility: boolean) => void;
   canTurnToPanoMode: () => { model: SceneModel };
   hideGrid: () => void;
   calcPathInfo: (

src/style.scss

@@ -140,4 +140,10 @@ input::-ms-clear,input::-ms-reveal {
 
 .vc-switch {
   z-index: 99999999 !important;
+}
+
+[contenteditable=true]:empty:before{
+  content:attr(placeholder);
+  color:grey;
+  // font-style:italic;
 }

src/views/merge/index.vue

@@ -128,11 +128,20 @@ watch(
 
 const reset = async () => {
   if (custom.currentModel && (await Dialog.confirm("确定恢复默认？此操作无法撤销"))) {
-    Object.assign(custom.currentModel, defaultFuseModelAttrs);
+    const rotation = getSceneModel(custom.currentModel)!.getDefaultRotation();
+    Object.assign(custom.currentModel, {
+      ...defaultFuseModelAttrs,
+      rotation: {
+        x: rotation.x,
+        y: rotation.y,
+        z: rotation.z,
+      },
+    });
     await nextTick();
     custom.currentModel && (custom.currentModel.bottom = 0);
   }
 };
+
 useViewStack(() =>
   togetherCallback([
     showLeftPanoStack.push(ref(true)),

src/views/record/index.vue

@@ -60,7 +60,7 @@ const getSignRecord = (record: Record): RecordProcess => ({
 })
 
 const setOptions = [
-  { value: 'tagging', label: '标注' },
+  { value: 'tagging', label: '标签' },
   { value: 'measure', label: '测量' },
 ] as const
 

src/views/summary/index.vue

@@ -35,7 +35,7 @@ import Guides from '@/views/guide/show.vue'
 
 enum TabKey { tagging, measure, guide }
 const tabs = [
-  { key: TabKey.tagging, text: '标注' },
+  { key: TabKey.tagging, text: '标签' },
   { key: TabKey.measure, text: '测量' },
   { key: TabKey.guide, text: '路径' },
 ]

src/views/tagging-position/index.vue

@@ -100,7 +100,7 @@ watchEffect((onCleanup) => {
 });
 useViewStack(autoSaveTaggings);
 useViewStack(() => {
-  const hide = Message.show({ msg: "请在模型上单击选择标注位置", type: "warning" });
+  const hide = Message.show({ msg: "请在模型上单击选择标签位置", type: "warning" });
   enterEdit(() => router.back());
   return hide;
 });

src/views/tagging/edit.vue

@@ -1,199 +1,211 @@
 <template>
   <div class="edit-hot-layer">
-      <div class="edit-hot-item">
-        <h3 class="edit-title">
-          标注
-          <ui-icon type="close" ctrl @click.stop="$emit('quit')" class="edit-close" />
-        </h3>
-        <StylesManage 
-          :styles="styles" 
-          :active="(getTaggingStyle(tagging.styleId) as TaggingStyle)" 
-          @change="style => tagging.styleId = style.id" 
-          @delete="deleteStyle"
-          @uploadStyle="uploadStyle" 
-        />
-        <ui-input 
-          require 
-          class="input" 
-          width="100%" 
-          placeholder="请输入热点标题" 
-          type="text" 
-          v-model="tagging.title"
-          maxlength="15" 
-        />
-        <ui-input
-          class="input"
-          width="100%"
-          height="158px"
-          placeholder="特征描述："
-          type="richtext"
-          v-model="tagging.desc"
-          :maxlength="200"
-        />
-        <ui-input 
-          class="input preplace" 
-          width="100%" 
-          placeholder="" 
-          type="text" 
-          v-model="tagging.part"
-          :maxlength="60"
-        >
-          <template #preIcon><span>遗留部位：</span></template>
-        </ui-input>
-        <ui-input 
-          class="input preplace" 
-          width="100%" 
-          placeholder="" 
-          type="text" 
-          v-model="tagging.method"
-          :maxlength="60"
-        >
-          <template #preIcon><span>提取方法：</span></template>
-        </ui-input>
-        <ui-input 
-          class="input preplace" 
-          width="100%" 
-          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"
-          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">
-                  <template v-slot:icons="{ active }">
-                    <span @click="delImageHandler(active)" class="del-file">
-                      <ui-icon type="del" ctrl />
-                    </span>
-                  </template>
-                </Images>
+    <div class="edit-hot-item">
+      <h3 class="edit-title">
+        标签
+        <ui-icon type="close" ctrl @click.stop="$emit('quit')" class="edit-close" />
+      </h3>
+      <StylesManage
+        :styles="styles"
+        :active="(getTaggingStyle(tagging.styleId) as TaggingStyle)"
+        @change="(style) => (tagging.styleId = style.id)"
+        @delete="deleteStyle"
+        @uploadStyle="uploadStyle"
+      />
+      <ui-input
+        require
+        class="input"
+        width="100%"
+        placeholder="请输入标签标题"
+        type="text"
+        v-model="tagging.title"
+        maxlength="15"
+      />
+      <ui-input
+        class="input"
+        width="100%"
+        height="158px"
+        placeholder="特征描述："
+        type="richtext"
+        v-model="tagging.desc"
+        :maxlength="200"
+      />
+      <ui-input
+        class="input preplace"
+        width="100%"
+        placeholder=""
+        type="text"
+        v-model="tagging.part"
+        :maxlength="60"
+      >
+        <template #preIcon><span>遗留部位：</span></template>
+      </ui-input>
+      <ui-input
+        class="input preplace"
+        width="100%"
+        placeholder=""
+        type="text"
+        v-model="tagging.method"
+        :maxlength="60"
+      >
+        <template #preIcon><span>提取方法：</span></template>
+      </ui-input>
+      <ui-input
+        class="input preplace"
+        width="100%"
+        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"
+        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">
+            <template v-slot:icons="{ active }">
+              <span @click="delImageHandler(active)" class="del-file">
+                <ui-icon type="del" ctrl />
+              </span>
             </template>
-        </ui-input>
-        <div class="edit-hot" >
-          <a @click="submitHandler">
-            <ui-icon type="nav-edit" />
-            确定
-          </a>
-        </div>
+          </Images>
+        </template>
+      </ui-input>
+      <div class="edit-hot">
+        <a @click="submitHandler">
+          <ui-icon type="nav-edit" />
+          确定
+        </a>
       </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import StylesManage from './styles.vue'
-import Images from './images.vue'
-import { computed, ref, watchEffect } from 'vue';
-import { Dialog, Message } from 'bill/index';
-import { 
+import StylesManage from "./styles.vue";
+import Images from "./images.vue";
+import { computed, ref, watchEffect } from "vue";
+import { Dialog, Message } from "bill/index";
+import {
   taggingStyles,
-  Tagging, 
-  getTaggingStyle, 
+  Tagging,
+  getTaggingStyle,
   TaggingStyle,
   taggings,
   isTemploraryID,
-defaultStyle
-} from '@/store'
+  defaultStyle,
+} from "@/store";
 
 export type EditProps = {
-  data: Tagging
-}
+  data: Tagging;
+};
 
-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))
+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
+    tagging.value.styleId = defaultStyle.value.id;
   }
-})
+});
 
 const submitHandler = () => {
   if (!tagging.value.title.trim()) {
-    Message.error('标注标题必须填写！')
+    Message.error("标签标题必须填写！");
   } else if (!tagging.value.images.length) {
-    Message.error('至少上传一张图片！')
+    Message.error("至少上传一张图片！");
   } else {
-    emit('save', tagging.value)
+    emit("save", tagging.value);
   }
-}
+};
 
-const styles = computed(() => 
-  [...taggingStyles.value].sort((a, b) => 
-    a.default ? -1 : b.default ? 1 :
-    a.lastUse ? -1 : b.lastUse ? 1 : isTemploraryID(a.id) ? -1 : isTemploraryID(b.id) ? 1 : 0
+const styles = computed(() =>
+  [...taggingStyles.value].sort((a, b) =>
+    a.default
+      ? -1
+      : b.default
+      ? 1
+      : a.lastUse
+      ? -1
+      : b.lastUse
+      ? 1
+      : isTemploraryID(a.id)
+      ? -1
+      : isTemploraryID(b.id)
+      ? 1
+      : 0
   )
-)
+);
 
 const deleteStyle = (style: TaggingStyle) => {
-    const index = taggingStyles.value.indexOf(style)
-    if (~index) {
-      taggingStyles.value.splice(index, 1)
-      for (const item of taggings.value) {
-        if (item.styleId === style.id) {
-          const defaultIcon = taggingStyles.value.find(({ default: isDefault }) => isDefault)?.id
-          if (defaultIcon) {
-            item.styleId = defaultIcon
-          }
+  const index = taggingStyles.value.indexOf(style);
+  if (~index) {
+    taggingStyles.value.splice(index, 1);
+    for (const item of taggings.value) {
+      if (item.styleId === style.id) {
+        const defaultIcon = taggingStyles.value.find(
+          ({ default: isDefault }) => isDefault
+        )?.id;
+        if (defaultIcon) {
+          item.styleId = defaultIcon;
         }
       }
     }
-}
+  }
+};
 
 const uploadStyle = (style: TaggingStyle) => {
-  taggingStyles.value.push(style)
-  tagging.value.styleId = style.id
-}
+  taggingStyles.value.push(style);
+  tagging.value.styleId = style.id;
+};
 
-type LocalImageFile = { file: File; preview: string } | Tagging['images'][number]
+type LocalImageFile = { file: File; preview: string } | Tagging["images"][number];
 const fileChange = (file: LocalImageFile | LocalImageFile[]) => {
-  const files = Array.isArray(file) ? file : [file]
+  const files = Array.isArray(file) ? file : [file];
 
-  tagging.value.images = files.map(atom => {
-    if (typeof atom === 'string' || 'blob' in atom) {
-      return atom
+  tagging.value.images = files.map((atom) => {
+    if (typeof atom === "string" || "blob" in atom) {
+      return atom;
     } else {
       return {
         blob: atom.file,
-        url: atom.preview
-      }
+        url: atom.preview,
+      };
     }
-  })
-}
+  });
+};
 
-const delImageHandler = async (file: Tagging['images'][number]) => {
-  const index = tagging.value.images.indexOf(file)
+const delImageHandler = async (file: Tagging["images"][number]) => {
+  const index = tagging.value.images.indexOf(file);
   if (~index && (await Dialog.confirm(`确定要删除此数据吗？`))) {
-    tagging.value.images.splice(index, 1)
+    tagging.value.images.splice(index, 1);
   }
-}
-
+};
 </script>
 
 <style lang="scss" scoped>
 .edit-hot-layer {
   position: fixed;
   inset: 0;
-  background: rgba(0,0,0,0.3000);
+  background: rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(4px);
   z-index: 2000;
   padding: 20px;
@@ -205,13 +217,12 @@ const delImageHandler = async (file: Tagging['images'][number]) => {
   width: 400px;
   padding: 20px;
   background: rgba(27, 27, 28, 0.8);
-  box-shadow: 0px 0px 10px 0px rgba(0,0,0, 0.3);
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
   border-radius: 4px;
 
   .input {
     margin-bottom: 10px;
   }
-
 }
 .edit-close {
   position: absolute;
@@ -227,13 +238,13 @@ const delImageHandler = async (file: Tagging['images'][number]) => {
   position: relative;
 
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     left: -20px;
     right: -20px;
     height: 1px;
     bottom: 0;
-    background-color: rgba(255, 255, 255, 0.16);;
+    background-color: rgba(255, 255, 255, 0.16);
   }
 }
 
@@ -249,12 +260,12 @@ const delImageHandler = async (file: Tagging['images'][number]) => {
 }
 </style>
 <style>
-.edit-hot-item .preplace input{
+.edit-hot-item .preplace input {
   padding-left: 76px !important;
 }
 
 .edit-hot-item .preplace .pre-icon {
-  color: rgba(255,255,255,0.6000);
+  color: rgba(255, 255, 255, 0.6);
   width: 70px;
   text-align: right;
 }
@@ -264,15 +275,15 @@ const delImageHandler = async (file: Tagging['images'][number]) => {
   width: 32px;
   height: 32px;
   font-size: 16px;
-  background-color: rgba(0,0,0,0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   border-radius: 50%;
   text-align: center;
-  line-height: 32px
+  line-height: 32px;
 }
 </style>
 
 <style>
-  .edit-hot-layer .input.ui-input .text.suffix input {
-    padding-right: 60px;
-  }
-</style>
+.edit-hot-layer .input.ui-input .text.suffix input {
+  padding-right: 60px;
+}
+</style>

src/views/tagging/index.vue

@@ -10,7 +10,7 @@
         </template>
       </ui-group>
     </template>
-    <ui-group title="标注列表" class="tagging-list">
+    <ui-group title="标签列表" class="tagging-list">
       <template #icon>
         <ui-icon 
           ctrl

src/views/tagging/show.vue

@@ -1,5 +1,5 @@
 <template>
-  <ui-group title="标注列表" class="show-taggings">
+  <ui-group title="标签列表" class="show-taggings">
     <template #icon>
       <ui-icon 
         ctrl