ow

WebVue/src/views/master/Preview.vue

@@ -1,29 +1,15 @@
 <template>
-    <div class="main-list" :style="{ height: (height - 150) + 'px' }">
-        <a-row style="margin-left:-8px;margin-top:-8px;">
-            <a-col :sm="24" :lg="24">
-                <section class="vertical" :style='imgStyle'>
-                    <photo-provider>
-                        <photo-consumer v-for="(src, index) in images" :key="src.DetailId" :src="src.FileName">
-                            <img :src="src.PublishName" class="view-box">
-                        </photo-consumer>
-                    </photo-provider>
-
-                </section>
-            </a-col>
-        </a-row>
-    </div>
-    <div class="main-page-footer">
-        <a-pagination v-model:current="result.Page" v-model:page-size="result.Limit" :total="result.Total"
-            @change="onPagination" :pageSizeOptions="pageSizeOptions"></a-pagination>
+    <div class="pv-page">
+        <PhotoSlidePlayer :items="slides" @close="onClose" />
     </div>
 </template>
 <script lang="ts" setup>
 import { watch, computed, inject, reactive, ref, VNode, h, unref, onMounted, onBeforeMount } 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 publishPhotoService from "@/service/master/publishPhotoService";
-import { useWindowSize } from '@vueuse/core'
 import { bsInfo } from "@/utils/browser"
 import { DmsFileSearchCriteria } from "@/data/auto/dmsFileSearchCriteria";
 import { SearchFilter } from "@/data/auto/searchFilter";
@@ -34,8 +20,6 @@ import dmsFileService from "@/service/master/dmsFileService";
 import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
 import { SearchCriteriaResultData } from "@/data/auto/searchCriteriaResultData";
 
-const { width, height } = useWindowSize()
-
 const images = ref<PublishPhotoDetailEntity[]>([]);
 
 
@@ -53,14 +37,24 @@ const beforeChange = (from: number, to: number) => {
     }
 }
 
-const imgStyle = computed(() => {
-    if (!bsInfo.size.sm) {
-        return ' object-fit: cover;width:100%; height:' + (height.value - 260) + 'px;'
+// 交给 PhotoSlidePlayer 播放：FileName 为缩略图，PublishName 为原图
+const slides = computed<PhotoSlideItem[]>(() =>
+    images.value.map((item) => ({
+        url: item.PublishName,
+        thumb: item.FileName,
+        name: (item.FileName || "").replace(/\.[^./\\]+$/, "") || undefined,
+    }))
+);
+
+// 收起播放器：返回来源页；没有历史时回首页
+const onClose = (() => {
+    if (window.history.length > 1) {
+        router.back();
     }
     else {
-        return ' object-fit: cover;width:' + width.value + 'px; height:' + height.value + 'px;'
+        router.push('/');
     }
-})
+});
 
 const pagingParams = ref<PagingParams>({ pageSize: bsInfo.size.sm ? 30 : 100, page: 1 });
 const result = ref<SearchCriteriaResultData>(new SearchCriteriaResultData());
@@ -95,7 +89,7 @@ const findData = async (params: number) => {
     try {
         let c: DmsFileSearchCriteria = new DmsFileSearchCriteria();
         c.page = params;
-        c.limit = pagingParams.value.pageSize;
+        c.limit =999999;// pagingParams.value.pageSize;
         let filter: SearchFilter;
         filter = new SearchFilter();
         filter.Column = DmsFileUploadViewDisplayData.DB_FILE_PATH;
@@ -145,46 +139,18 @@ const showSizeChange = (async (current: number, size: number) => {
 
 
 <style lang="less" scoped>
-.vertical {
-    position: relative;
-    z-index: 10;
+/* 外层 .layout-content-view 自带 padding-top / padding-left（各 8px），
+   这里用等量负外边距抵消、同时把宽高补回满格，让播放器铺满整个内容区，
+   最外层不留任何间距 */
+.pv-page {
+    width: calc(100% + 8px);
+    height: calc(100% + 8px);
+    margin: -8px 0 0 -8px;
+    overflow: hidden;
 }
 
-.main-list {
-    /* 设置高度 */
-    overflow-y: auto;
-    /* 显示纵向滚动条 */
-
-    background-color: bisque;
-    padding-left: 16px;
-    padding-right: 16px;
-    padding-top: 8px;
-    margin-right: 8px;
-    background-image: url('/images/main/p3.png');
-    background-size: cover;
-    width: 100%;
-}
-
-.view-box {
-    display: inline-block;
-    width: 100px;
-    height: 100px;
-    margin-right: 20px;
-    margin-bottom: 20px;
-    cursor: pointer;
-    object-fit: cover;
-}
-
-.main-page-footer {
-    background-color: aliceblue;
-    z-index: 999;
-    padding-left: 8px;
-    padding-right: 18px;
-    padding-top: 8px;
-    width: 100%;
-    height: 50px;
-    position: fixed;
-    bottom: 0;
-    border-top: 1px solid silver;
+/* 铺满后不再需要卡片圆角，否则四个角会露出留白 */
+.pv-page :deep(.psp) {
+    border-radius: 0;
 }
 </style>