fix: 1

src/api/floder.ts

@@ -56,22 +56,5 @@ export const fetchFloders = async () => {
   }))
 
 
-  // floders.forEach(item => item.filesTypeId = 102)
-  // floders.push(...floders.map(item => {
-  //   return {...item, filesTypeId: 101 }
-  // }))
-
-  floders.push(...floders.map(item => {
-    return {...item, filesTypeId: 1000 }
-  }))
-  floders.push(...floders.map(item => {
-    return {...item, filesTypeId: 1001 }
-  }))
-  floders.push(...floders.map(item => {
-    return {...item, filesTypeId: 1002 }
-  }))
-  floders.push(...floders.map(item => {
-    return {...item, filesTypeId: 1005 }
-  }))
   return floders
 }

src/api/folder-type.ts

@@ -5,6 +5,8 @@ export interface FloderType {
   filesTypeId: number,
   filesTypeName: string,
   parentFilesTypeId?: number,
+  modalShow?: boolean
+  flatShow?: boolean
 }
 
 export type FloderTypes = FloderType[]
@@ -12,42 +14,5 @@ export type FloderTypes = FloderType[]
 
 export const fetchFloderTypes = async () => {
   const types =await axios.get<FloderTypes>(FOLDER_TYPE_LIST)
-  types.push({
-    filesTypeId: 100,
-    filesTypeName: '其他',
-  })
-
-  types.push({
-    filesTypeId: 101,
-    filesTypeName: '现场照片',
-  })
-  types.push({
-    parentFilesTypeId: 101,
-    filesTypeId: 102,
-    filesTypeName: '中心现场',
-  })
-
-  types.push({
-    filesTypeId: 1000,
-    parentFilesTypeId: 102,
-    filesTypeName: '方位',
-  }, {
-    filesTypeId: 1001,
-    parentFilesTypeId: 102,
-    filesTypeName: '概貌',
-  }, {
-    filesTypeId: 1002,
-    parentFilesTypeId: 102,
-    filesTypeName: '重点部位',
-  },{
-    filesTypeId: 1001,
-    parentFilesTypeId: 103,
-    filesTypeName: '概貌',
-  },)
-  types.push({
-    parentFilesTypeId: 101,
-    filesTypeId: 103,
-    filesTypeName: '关联现场',
-  })
   return types
 }

src/components/static-preview/index.vue

@@ -23,17 +23,12 @@
 <script lang="ts">
 import { defineComponent, PropType, ref } from "vue";
 import Sign from "./sign.vue";
+import { MetaType } from "@/utils";
 
-export enum MediaType {
-  video = "video",
-  img = "img",
-  web = "web",
-  audio = "audio",
-}
 
 export type MediaItem = {
   url: Blob | string;
-  type?: MediaType;
+  type?: MetaType;
 };
 
 export const Preview = defineComponent({

src/components/static-preview/resource.vue

@@ -1,12 +1,16 @@
 <template>
-  <video v-if="type === MediaType.video" controls autoplay playsinline webkit-playsinline>
+  <video v-if="type === MetaType.video" controls autoplay playsinline webkit-playsinline>
     <source :src="url" />
   </video>
-  <iframe v-else-if="type === MediaType.web" :src="url"></iframe>
-  <img :src="url" v-if="type === MediaType.img" />
+  <iframe v-else-if="type === MetaType.other" :src="url"></iframe>
+  <iframe
+    v-else-if="type === MetaType.xfile"
+    :src="`./xfile-viewer/index.html?file=${url}&time=${Date.now()}`"
+  ></iframe>
+  <img :src="url" v-if="type === MetaType.image" />
   <audio
     :src="url"
-    v-if="type === MediaType.audio"
+    v-if="type === MetaType.audio"
     controls
     autoplay
     playsinline
@@ -16,11 +20,10 @@
 
 <script lang="ts" setup>
 import { getResource } from "@/env";
-import { MediaType } from "./index.vue";
 import { computed } from "vue";
 import { getUrlType, MetaType } from "@/utils/meta";
 
-const props = defineProps<{ data: string | Blob | File; type?: MediaType }>();
+const props = defineProps<{ data: string | Blob | File; type?: MetaType }>();
 
 const url = computed(() =>
   typeof props.data === "string"
@@ -33,16 +36,9 @@ const type = computed(() => {
     return props.type;
   } else if (props.data instanceof File || typeof props.data === "string") {
     const d = props.data instanceof File ? props.data.name : props.data;
-    const otype = getUrlType(d);
-    const map = {
-      [MetaType.other]: MediaType.web,
-      [MetaType.audio]: MediaType.audio,
-      [MetaType.image]: MediaType.img,
-      [MetaType.video]: MediaType.video,
-    };
-    return map[otype];
+    return getUrlType(d);
   } else {
-    return MediaType.web;
+    return MetaType.other;
   }
 });
 </script>

src/components/tagging/sign.vue

@@ -55,9 +55,9 @@ import { computed, ref, watchEffect, watch, onUnmounted } from "vue";
 import { router, RoutesName } from "@/router";
 import UIBubble from "bill/components/bubble/index.vue";
 import Images from "@/views/tagging/images.vue";
-import Preview, { MediaType } from "../static-preview/index.vue";
+import Preview from "../static-preview/index.vue";
 import { getTaggingStyle, getFuseModel } from "@/store";
-import { getFileUrl } from "@/utils";
+import { getFileUrl, MetaType } from "@/utils";
 import { sdk } from "@/sdk";
 import { custom, getResource } from "@/env";
 import { useViewStack } from "@/hook";
@@ -109,7 +109,7 @@ const pullIndex = ref(-1);
 const isHover = ref(false);
 const queryItems = computed(() =>
   props.tagging.images.map((image) => ({
-    type: MediaType.img,
+    type: MetaType.image,
     url: getResource(getFileUrl(image)),
   }))
 );

src/store/floder-type.ts

@@ -1,7 +1,7 @@
 import { computed, ref } from "vue";
 import { fetchFloderTypes } from "@/api";
 
-import type { FloderTypes, FloderType } from "@/api";
+import type { FloderTypes, FloderType, Floder } from "@/api";
 import { getFloderByType } from "./floder";
 import { getUrlType, MetaType } from "@/utils";
 
@@ -15,6 +15,8 @@ export const initialFloderTypes = async () => {
 
 export type FloderRoot = {
   id: number;
+  flat: boolean,
+  modal: boolean
   title: string;
   floders: (ReturnType<typeof getFloderByType>[number] & { metaType: MetaType })[];
   children?: FloderRoot[];
@@ -26,6 +28,8 @@ const gemerateRoot = (parentId?: number) => {
     if (type.parentFilesTypeId === parentId) {
       const item = {
         id: type.filesTypeId,
+        flat: !!type.flatShow,
+        modal: !!type.modalShow,
         title: type.filesTypeName,
         floders: getFloderByType(type).map((floder) => ({
           ...floder,
@@ -40,4 +44,24 @@ const gemerateRoot = (parentId?: number) => {
 };
 export const floderRoots = computed(gemerateRoot);
 
+export const getLevelRoot = (floder: Floder, roots = floderRoots.value): FloderRoot | undefined => {
+  for (const root of roots) {
+    if (root.floders.some(f => f.filesId === floder.filesId)) {
+      return root;
+    } else if (root.children?.length) {
+      const cRoot = getLevelRoot(floder, root.children)
+      if (cRoot) {
+        return cRoot
+      }
+    }
+  }
+}
+
+export const getFlatFloders = (root: FloderRoot, floders: FloderRoot['floders'] = []) => {
+  floders.push(...root.floders)
+  if (root.children?.length) {
+    root.children.forEach(child => getFlatFloders(child, floders))
+  }
+  return floders
+}
 export type { FloderType, FloderTypes };

src/utils/meta.ts

@@ -2,13 +2,15 @@ export enum MetaType {
   image = 'image',
   video = 'video',
   audio = 'audio',
+  xfile = 'xfile',
   other = 'other'
 }
 
 export const metaTypeExtnames = {
   [MetaType.image]: ['bmp', 'jpg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp', 'avif', 'apng'],
   [MetaType.audio]: ['mp3'],
-  [MetaType.video]: ['wmv', 'asf', 'asx', 'rm', 'rmvb', 'mp4', '3gp', 'mov', 'm4v', 'avi', 'dat', 'mkv', 'flv', 'vob']
+  [MetaType.video]: ['wmv', 'asf', 'asx', 'rm', 'rmvb', 'mp4', '3gp', 'mov', 'm4v', 'avi', 'dat', 'mkv', 'flv', 'vob'],
+  [MetaType.xfile]: [".raw", ".dcm"]
 }
 
 export const getExtname = (url: string) => {

src/views/folder/floder-root-view.vue

@@ -1,87 +0,0 @@
-<template>
-  <ui-group v-if="root.floders.length">
-    <ui-group-option>{{ root.title }}</ui-group-option>
-    <ui-group-option>
-      <swiper
-        :slidesPerView="3"
-        :spaceBetween="10"
-        :pagination="{
-          type: 'fraction',
-        }"
-        :navigation="true"
-        :modules="[Pagination, Navigation]"
-        class="mySwiper"
-      >
-        <swiper-slide v-for="floder in root.floders" :key="floder.filesId">
-          <div class="img-item">
-            <img :src="floder.filesUrl" @click="clickHandler(floder)" />
-          </div>
-        </swiper-slide>
-      </swiper>
-    </ui-group-option>
-  </ui-group>
-
-  <Tabs v-if="!emptyTabs" v-model:activeKey="activeTab">
-    <template v-for="children in root.children">
-      <TabPane :tab="children.title" :key="children.id" v-if="!isLastLevel(children)">
-        <FloderRootView :root="children" @preview="(f: Floder) => emit('preview', f)" />
-      </TabPane>
-    </template>
-  </Tabs>
-
-  <template v-for="children in root.children" :key="children.id">
-    <FloderRootView
-      :root="children"
-      v-if="isLastLevel(children)"
-      @preview="(f: Floder) => emit('preview', f)"
-    />
-  </template>
-</template>
-<script lang="ts" setup>
-import { Floder, FloderRoot, Floders } from "@/store";
-import { computed, ref } from "vue";
-import { TabPane, Tabs } from "ant-design-vue";
-import { Swiper, SwiperSlide } from "swiper/vue";
-import { Pagination, Navigation } from "swiper/modules";
-import "swiper/css";
-import "swiper/css/pagination";
-import "swiper/css/navigation";
-
-const props = defineProps<{ root: FloderRoot }>();
-const emit = defineEmits<{ (e: "preview", v: Floder): void }>();
-const isLastLevel = (root: FloderRoot) => {
-  return !root.children?.length;
-};
-const emptyTabs = computed(() => props.root.children?.every((r) => isLastLevel(r)));
-const oneTabs = computed(() => {
-  if (!emptyTabs.value) return null;
-  return props.root.children!.find((i) => !isLastLevel(i));
-});
-const clickHandler = (floder: Floder) => {
-  console.log("click");
-  emit("preview", floder);
-};
-const activeTab = ref(oneTabs.value?.id);
-</script>
-
-<style lang="scss">
-.img-item {
-  cursor: pointer;
-  padding-top: 50%;
-  position: relative;
-  img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    object-fit: cover;
-  }
-}
-
-.mySwiper {
-  --swiper-pagination-fraction-color: #000;
-  --swiper-theme-color: #03ad98;
-  --swiper-navigation-size: 30px;
-}
-</style>

src/views/folder/floder-view.vue

@@ -0,0 +1,172 @@
+<template>
+  <div
+    :class="{ root: index === 1 }"
+    class="tree"
+    v-if="getFlatFloders(root).length !== 0"
+  >
+    <div
+      class="solid header"
+      :class="{ ['root-header']: index === 1 }"
+      :style="{ '--index': index }"
+    >
+      <span @click="showChildren = !showChildren">
+        {{ root.title }}
+      </span>
+      <ui-icon
+        :type="`pull-${showChildren ? 'up' : 'down'}`"
+        class="icon"
+        ctrl
+        v-if="floders.length || root.children?.length"
+      />
+    </div>
+
+    <template v-if="!root.modal && showChildren && (floders.length || children?.length)">
+      <div class="items" :class="{ ['root-items']: index === 1 }">
+        <template v-if="floders.length">
+          <div
+            :style="{ '--index': index }"
+            v-for="floder in floders"
+            :key="floder.filesId"
+            class="fun-ctrl solid item"
+            @click="$emit('preview', [floder, root])"
+          >
+            <ui-icon :type="typeIcons[floder.metaType]" v-if="floder.metaType" />
+            <p>{{ floder.filesTitle }}</p>
+          </div>
+        </template>
+        <template v-if="children?.length">
+          <FloderView
+            v-for="item in children"
+            @preview="(v: any) => emit('preview', v)"
+            :root="item"
+            :index="index + 1"
+          />
+        </template>
+      </div>
+    </template>
+  </div>
+
+  <Modal
+    v-if="root.modal"
+    width="800px"
+    :title="root.title"
+    @cancel="showChildren = false"
+    :open="showChildren"
+    :footer="null"
+  >
+    <div class="modal-root-content">
+      <ModalFloderView :root="root" @preview="(v) => emit('preview', v)" />
+    </div>
+  </Modal>
+</template>
+<script lang="ts" setup>
+import { Floder, FloderRoot, getFlatFloders } from "@/store";
+import { computed, ref } from "vue";
+import { MetaType } from "@/utils";
+import ModalFloderView from "./modal-floder-view.vue";
+import { Modal } from "ant-design-vue";
+
+const props = defineProps<{ root: FloderRoot; index?: number }>();
+const emit = defineEmits<{ (e: "preview", v: [Floder, FloderRoot]): void }>();
+
+const index = props.index || 1;
+const typeIcons = {
+  [MetaType.image]: "pic",
+  [MetaType.video]: "a-film",
+  [MetaType.other]: "nav-edit",
+  [MetaType.audio]: "nav-edit",
+  [MetaType.xfile]: "nav-edit",
+};
+
+const floders = computed(() => {
+  if (props.root.flat) {
+    return getFlatFloders(props.root);
+  } else {
+    return props.root.floders;
+  }
+});
+const children = computed(() => {
+  if (props.root.flat || props.root.modal) {
+    return [];
+  } else {
+    return props.root.children;
+  }
+});
+const showChildren = ref(props.root.modal ? false : true);
+</script>
+
+<style lang="scss" scoped>
+.tree {
+  margin-bottom: 0;
+}
+.modal-root-content {
+  max-height: 700px;
+  overflow-y: auto;
+}
+.root-items {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0;
+  cursor: pointer;
+  padding: 20px 0;
+  position: relative;
+  padding-left: calc(var(--index) * 20px);
+  padding-right: 20px;
+
+  span {
+    font-weight: normal;
+    font-size: 14px;
+  }
+
+  &.root-header {
+    padding: 20px;
+    span {
+      font-weight: bold;
+      font-size: 16px;
+    }
+  }
+
+  .icon {
+    font-size: 14px;
+  }
+}
+
+.solid {
+  &::after {
+    content: "";
+    position: absolute;
+    left: 20px;
+    right: 20px;
+    height: 1px;
+    background: rgba(255, 255, 255, 0.16);
+    bottom: 0;
+  }
+}
+
+.item {
+  margin-right: 20px;
+  padding: 20px 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding-left: calc(var(--index) * 20px);
+  padding-right: 0;
+
+  &.solid::after {
+    right: 0;
+  }
+
+  p {
+    margin-left: 10px;
+    font-size: 12px;
+    color: currentColor;
+    word-break: break-all;
+  }
+}
+</style>

src/views/folder/index.vue

@@ -1,118 +1,53 @@
 <template>
   <LeftPano>
-    <template v-for="item in types" :key="item.id">
-      <div class="types" v-if="item.floders.length || item.children?.length">
-        <h2 @click="showHanlder(item)">
-          {{ 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>
-        </div>
-      </div>
+    <template v-for="item in floderRoots" :key="item.id">
+      <FloderView :root="item" @preview="(v) => preview(v)" />
     </template>
   </LeftPano>
 
-  <Preview :items="[currentFile]" v-if="currentFile" @close="currentFile = null" />
-  <Modal
-    width="800px"
-    :title="showModalRoot?.title"
-    @cancel="showModalRoot = void 0"
-    :open="!!showModalRoot"
-    :footer="null"
-  >
-    <ShowFloderRoot :root="showModalRoot" v-if="showModalRoot" @preview="preview" />
-  </Modal>
+  <Preview
+    :items="currentItems"
+    :current="currentNdx"
+    v-if="~currentNdx"
+    @close="currentNdx = -1"
+  />
+  <Fire v-model:open="showInfo" />
 </template>
 
 <script lang="ts" setup>
 import { LeftPano } from "@/layout";
-import { computed, Ref, ref } from "vue";
+import { ref } from "vue";
 import { getUrlType, MetaType, saveAs } from "@/utils";
-import { Preview, MediaItem, MediaType } from "@/components/static-preview/index.vue";
-import { floderRoots, floderTypes, getFloderByType } from "@/store";
-import { Modal } from "ant-design-vue";
-import ShowFloderRoot from "./floder-root-view.vue";
+import { Preview, MediaItem } from "@/components/static-preview/index.vue";
+import { floderRoots, getFlatFloders } from "@/store";
+import FloderView from "./floder-view.vue";
+import Fire from "./fire/index.vue";
 
 import type { Floder, FloderRoot } from "@/store";
 import { useViewStack } from "@/hook";
 import { showRightPanoStack } from "@/env";
 
-const showModalRoot = ref<FloderRoot>();
-const types = computed(() =>
-  floderRoots.value.map((type) => {
-    let show: Ref<boolean>;
-    if (type.children?.length) {
-      show = computed(() => showModalRoot.value?.id === type.id);
-    } else {
-      show = ref(true);
-    }
-    return {
-      show,
-      ...type,
-    };
-  })
-);
-
-const typeIcons = {
-  [MetaType.image]: "pic",
-  [MetaType.video]: "a-film",
-  [MetaType.other]: "nav-edit",
-  [MetaType.audio]: "nav-edit",
-};
-
-const showHanlder = (item: FloderRoot & { show: Ref<boolean> }) => {
-  if (item.children?.length) {
-    showModalRoot.value = item;
-  } else {
-    item.show.value = !item.show.value;
-  }
-};
-
-const currentFile = ref<MediaItem | null>(null);
-const preview = async (floder: Floder) => {
-  console.log("???");
-  const ext = floder.filesUrl
-    .substring(floder.filesUrl.lastIndexOf("."))
-    .toLocaleLowerCase();
-  if ([".raw", ".dcm"].includes(ext)) {
-    window.open(
-      `/xfile-viewer/index.html?file=${floder.filesUrl}&name=${floder.filesTitle}&time=` +
-        Date.now()
-    );
-    return;
-  }
-
-  const type = getUrlType(floder.filesUrl);
-  const mediaType =
-    type === MetaType.image
-      ? MediaType.img
-      : type === MetaType.video
-      ? MediaType.video
-      : null;
-
-  if (!mediaType) {
+const showInfo = ref(false);
+const currentNdx = ref(-1);
+const currentItems = ref<MediaItem[]>([]);
+const preview = async ([floder, root]: [Floder, FloderRoot]) => {
+  const metaType = getUrlType(floder.filesUrl);
+  if (metaType === MetaType.other) {
     const isBlob = floder.filesUrl.includes("blob");
-
     if (floder.filesTypeId === 100) {
       saveAs(floder.filesUrl, floder.filesTitle + ".doc");
     } else {
       window.open(floder.filesUrl + (!isBlob ? "?time=" + Date.now() : ""));
     }
   } else {
-    currentFile.value = {
-      type: mediaType,
-      url: floder.filesUrl,
-    };
+    const floders = root.flat ? getFlatFloders(root) : root.floders;
+    const items = floders.map((item) => ({
+      type: getUrlType(item.filesUrl),
+      id: item.filesId,
+      url: item.filesUrl,
+    }));
+    currentNdx.value = items.findIndex((item) => item.id === floder.filesId);
+    currentItems.value = items;
   }
 };
 useViewStack(() => showRightPanoStack.push(ref(false)));
@@ -121,7 +56,9 @@ useViewStack(() => showRightPanoStack.push(ref(false)));
 <style lang="scss" scoped>
 .types {
   h2 {
-    padding: 20px;
+    padding: 20px 0;
+    margin: 0 20px;
+    font-size: 16px;
     font-weight: bold;
     display: flex;
     justify-content: space-between;

src/views/folder/modal-floder-view.vue

@@ -0,0 +1,114 @@
+<template>
+  <ui-group v-if="floders.length">
+    <ui-group-option>
+      <span @click="canAll && (showAll = !showAll)" :class="{ ['fun-ctrl']: canAll }">
+        {{ root.title }}
+        <template v-if="canAll">
+          <UpOutlined v-if="showAll" />
+          <DownOutlined v-else />
+        </template>
+      </span>
+    </ui-group-option>
+    <ui-group-option>
+      <div class="items">
+        <div class="img-item" v-for="(_, i) in showLen" :key="floders[i].filesId">
+          <div class="img-item-content">
+            <img :src="floders[i].filesUrl" @click="clickHandler(floders[i])" />
+          </div>
+        </div>
+      </div>
+    </ui-group-option>
+  </ui-group>
+
+  <Tabs v-if="!emptyTabs" v-model:activeKey="activeTab">
+    <template v-for="children in root.children">
+      <TabPane
+        :tab="children.title"
+        :key="children.id"
+        v-if="getFlatFloders(children).length"
+      >
+        <ModalFloderView :root="children" @preview="(v: any) => emit('preview', v)" />
+      </TabPane>
+    </template>
+  </Tabs>
+
+  <template v-for="c in children" :key="c.id">
+    <ModalFloderView
+      :root="c"
+      v-if="isLastLevel(c)"
+      @preview="(v: any) => emit('preview', v)"
+    />
+  </template>
+</template>
+<script lang="ts" setup>
+import { Floder, FloderRoot, getFlatFloders } from "@/store";
+import { computed, ref } from "vue";
+import { TabPane, Tabs } from "ant-design-vue";
+import { DownOutlined, UpOutlined } from "@ant-design/icons-vue";
+
+const props = defineProps<{ root: FloderRoot }>();
+const emit = defineEmits<{ (e: "preview", v: [Floder, FloderRoot]): void }>();
+const isLastLevel = (root: FloderRoot) => {
+  return !root.children?.length;
+};
+const emptyTabs = computed(
+  () => props.root.children?.every((r) => isLastLevel(r)) && !props.root.flat
+);
+const oneTabs = computed(() => {
+  if (!emptyTabs.value) return null;
+  return props.root.children!.find((i) => !isLastLevel(i));
+});
+const clickHandler = (floder: Floder) => {
+  emit("preview", [floder, props.root]);
+};
+const activeTab = ref(oneTabs.value?.id);
+const floders = computed(() => {
+  if (props.root.flat) {
+    return getFlatFloders(props.root);
+  } else {
+    return props.root.floders;
+  }
+});
+const children = computed(() => {
+  if (props.root.flat) {
+    return [];
+  } else {
+    return props.root.children;
+  }
+});
+const len = computed(() => floders.value.length);
+const showAll = ref(false);
+const samLen = 3;
+const showLen = computed(() => (showAll.value ? len.value : Math.min(samLen, len.value)));
+const canAll = computed(() => len.value > samLen);
+</script>
+
+<style lang="scss" scoped>
+.items {
+  display: flex;
+  flex-wrap: wrap;
+}
+.img-item {
+  width: 33.33%;
+  padding: 5px;
+  .img-item-content {
+    padding-top: 56.25%;
+    position: relative;
+    cursor: pointer;
+    img {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      object-fit: cover;
+    }
+  }
+}
+
+.mySwiper {
+  --swiper-pagination-fraction-color: #000;
+  --swiper-theme-color: #03ad98;
+  --swiper-navigation-size: 30px;
+}
+</style>

src/views/record/shot.vue

@@ -41,7 +41,7 @@
 
     <Preview
       v-if="palyUrl"
-      :items="[{ type: MediaType.video, url: palyUrl }]"
+      :items="[{ type: MetaType.video, url: palyUrl }]"
       @close="palyUrl = null"
     />
 
@@ -62,8 +62,8 @@ import {
 } from "vue";
 import { VideoRecorder } from "simaqcore";
 import { sdk } from "@/sdk";
-import { getVideoCover, togetherCallback } from "@/utils";
-import { MediaType, Preview } from "@/components/static-preview/index.vue";
+import { getVideoCover, MetaType, togetherCallback } from "@/utils";
+import { Preview } from "@/components/static-preview/index.vue";
 import { Record, getRecordFragmentBlobs } from "@/store";
 import ShotImiate from "./shot-imitate.vue";
 import {
@@ -251,7 +251,7 @@ export default defineComponent({
     });
 
     return {
-      MediaType,
+      MetaType,
       complete,
       pause,
       close,

src/views/record/sign.vue

@@ -43,7 +43,7 @@
       :record="record" />
     <Preview 
       v-if="isPlayVideo" 
-      :items="[{ type: MediaType.video, url: record.url! }]"
+      :items="[{ type: MetaType.video, url: record.url! }]"
       @close="isPlayVideo = false" 
     />
   </ui-group-option>
@@ -52,10 +52,10 @@
 <script lang="ts">
 import type {PropType} from 'vue'
 import {computed, defineComponent, ref, watchEffect} from 'vue'
-import {getExtname, getFileUrl, loadPack, saveAs} from '@/utils'
+import {getExtname, getFileUrl, loadPack, MetaType, saveAs} from '@/utils'
 import {useFocus} from 'bill/hook/useFocus'
 import {createRecordFragment, getRecordFragmentBlobs, isTemploraryID, recordFragments, RecordStatus} from '@/store'
-import {MediaType, Preview} from '@/components/static-preview/index.vue'
+import {Preview} from '@/components/static-preview/index.vue'
 import {getResource} from '@/env'
 import Shot from './shot.vue'
 import type {RecordProcess} from './help'
@@ -142,7 +142,7 @@ export default defineComponent({
       closeHandler,
       inputRef,
       RecordStatus,
-      MediaType,
+      MetaType,
       isPlayVideo,
       getResource,
       getFileUrl,