ow

WebVue/src/views/master/Preview.vue

@@ -1,14 +1,14 @@
 <template>
     <div class="pv-page">
-        <PhotoSlidePlayer :items="slides" @close="onClose" />
+        <PhotoSlidePlayer v-model:controls="controlsVisible" :items="slides" @close="onClose" />
     </div>
 </template>
 <script lang="ts" setup>
-import { watch, computed, inject, reactive, ref, VNode, h, unref, onMounted, onBeforeMount } from "vue";
+import { watch, computed, inject, reactive, ref, VNode, h, unref, onMounted, onBeforeMount, onUnmounted } from "vue";
 import { useRoute, useRouter } from 'vue-router'
 import PhotoSlidePlayer from "@/components/basic/PhotoSlidePlayer.vue";
 import type { PhotoSlideItem } from "@/components/basic/PhotoSlidePlayer.vue";
-import { PublishPhotoDetailEntity } from "@/data/auto/publishPhotoDetailEntity";
+import { PublishPhotoDetailDisplayData } from "@/data/auto/publishPhotoDetailDisplayData";
 import publishPhotoService from "@/service/master/publishPhotoService";
 import { bsInfo } from "@/utils/browser"
 import { DmsFileSearchCriteria } from "@/data/auto/dmsFileSearchCriteria";
@@ -20,7 +20,13 @@ import dmsFileService from "@/service/master/dmsFileService";
 import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
 import { SearchCriteriaResultData } from "@/data/auto/searchCriteriaResultData";
 
-const images = ref<PublishPhotoDetailEntity[]>([]);
+/**
+ * 后端 PublishPhotoService 会把同一张图给出两个地址（见 PublishPhotoService.auto.cs）：
+ *   FileName      —— 原图
+ *   FormattedPic  —— 缩放后的缩略图
+ * 幻灯片轮播与图片列表用缩略图（加载快），精看和下载用原图。
+ */
+const images = ref<PublishPhotoDetailDisplayData[]>([]);
 
 
 const route = useRoute();
@@ -30,6 +36,22 @@ const router = useRouter();
 const publishName = ref<string>(route.params.id as string)
 const mode = ref<string>(route.params.mode as string)
 
+/**
+ * 控制区显隐：与影视厅 PreviewVideo.vue 同一套机制——
+ * 收起控制区时给 body 挂 .pv-fullscreen，藏掉 layout 顶部的两条栏
+ * （标题栏 + 页面头）并把内容区撑到整屏，图片真正占满全屏。
+ * class 挂在 body 上，离开本页立即移除，不会影响其它页面（样式见 styles/main.css）。
+ */
+const controlsVisible = ref(true);
+
+watch(controlsVisible, (visible) => {
+    document.body.classList.toggle("pv-fullscreen", !visible);
+});
+
+onUnmounted(() => {
+    document.body.classList.remove("pv-fullscreen");
+});
+
 const toIndex = ref<number>(0)
 const beforeChange = (from: number, to: number) => {
     if (to > 0) {
@@ -37,11 +59,12 @@ const beforeChange = (from: number, to: number) => {
     }
 }
 
-// 交给 PhotoSlidePlayer 播放：FileName 为缩略图，PublishName 为原图
+// 交给 PhotoSlidePlayer 播放：舞台与列表用 FormattedPic（缩略图），精看/下载用 FileName（原图）
 const slides = computed<PhotoSlideItem[]>(() =>
     images.value.map((item) => ({
-        url: item.PublishName,
-        thumb: item.FileName,
+        url: item.FormattedPic || item.FileName,
+        thumb: item.FormattedPic || item.FileName,
+        full: item.FileName || item.FormattedPic,
         name: (item.FileName || "").replace(/\.[^./\\]+$/, "") || undefined,
     }))
 );
@@ -69,17 +92,11 @@ onMounted(async () => {
     }
     else if (publishName.value && publishName.value.length > 0) {
         publishPhotoService.FindPublishPhotoDetailByPublishName(publishName.value).then(res => {
-            for (let i = 0; i <res.length; i++) {
-                res[i].PublishName = res[i].FileName;
-            }
             images.value = res;
         });
     }
     else {
         publishPhotoService.FindPublishPhotoDetail().then(res => {
-            for (let i = 0; i <res.length; i++) {
-                res[i].PublishName = res[i].FileName;
-            }
             images.value = res;
         });
     }
@@ -110,12 +127,12 @@ const findData = async (params: number) => {
         if (dr && dr.Datas && dr.Datas.length > 0) {
 
             images.value = [];
-            let detail: PublishPhotoDetailEntity;
+            let detail: PublishPhotoDetailDisplayData;
             for (let i = 0; i < dr.Datas.length; i++) {
-                detail = new PublishPhotoDetailEntity()
-                detail.FileName = dr.Datas[i].FormattedPic;
+                detail = new PublishPhotoDetailDisplayData()
+                detail.FileName = dr.Datas[i].Url;              // 原图：精看 / 下载
+                detail.FormattedPic = dr.Datas[i].FormattedPic;  // 缩略图：舞台轮播 / 列表
                 detail.Notice = dr.Datas[i].LandscapeIndc;
-                detail.PublishName = dr.Datas[i].Url;
                 images.value.push(detail);
             }
         }

WebVue/src/views/master/PreviewVideo.vue

@@ -130,27 +130,3 @@ const loadVideos = async () => {
 }
 </style>
 
-<style>
-/* 注意：这里是全局样式，但所有选择器都要求 body 上有 .pv-fullscreen
-   （只在影视厅收起控制区时由 PreviewVideo.vue 临时挂上，离开页面即移除），
-   所以不会影响其它页面。
-
-   收起控制区 = 页面全屏：
-   1. 藏掉 layout 顶部两条栏（标题栏 64px + 页面头 42px）；
-   2. 内容区和视频容器撑到整屏，去掉原有的 8px 内边距，做到真正的全屏铺满。
-   容器高度是行内样式（bsInfo.height - 100/-120），只能用 !important 覆盖。 */
-body.pv-fullscreen .layout-header,
-body.pv-fullscreen .layout-page-header {
-    display: none !important;
-}
-
-body.pv-fullscreen .layout-content-view {
-    height: 100vh !important;
-    padding: 0 !important;
-}
-
-body.pv-fullscreen .pv-page {
-    height: 100vh !important;
-    padding-right: 0 !important;
-}
-</style>