1

src/pages/CopywritingGeneration/index.vue

 <template>
   <div class="custom-copywriting-generation-page">
-    <div class="custom-copywriting-generation" v-show="!loading">
+    <div
+      class="custom-copywriting-generation"
+      v-show="!loading"
+      ref="CopywritingBox"
+    >
       <img class="tip-box" :src="res_img ?? imgs.tips" alt="" />
       <div class="interaction-form">
         <div class="basic-info" v-for="item in AdminData.list" :key="item.name">
@@ -56,18 +60,19 @@ import CustomTextArea from '@/components/custom/textarea.vue';
 import CustomInput from '@/components/custom/input/index.vue';
 import CustomResetButton from '@/components/custom/resetbutton.vue';
 import CustomGptMessage from '@/components/custom/gptmessage.vue';
-import { onBeforeMount, reactive, ref } from 'vue';
+import { onBeforeMount, reactive, ref, nextTick } from 'vue';
 import { getScenesList, useSubmitConversation } from '@/utils/api/scenes';
 import { useRoute } from 'vue-router';
 import { show_message } from '@/utils/tdesign_tool';
 import { FormExample, ConversationKey } from '@/utils/api/Task';
 import CustomLoading from '@/components/custom/loading2.vue';
-import { Validationrules } from '@/utils/tool';
+import { Validationrules, ChangePageHeight } from '@/utils/tool';
 const route = useRoute();
 const id = route.query.id;
 const imgs = {
   tips: new URL('../../assets/img/tips.png', import.meta.url).href,
 };
+const CopywritingBox = ref();
 // 场景id
 const scenario_id = ref();
 // 场景示例图
@@ -94,6 +99,12 @@ const MessageList = reactive({
   // 存本地的完整对话列表
   localList: getLocalList(),
 });
+// 元素高度和页面高度比较
+const getElementHeight = () => {
+  if (CopywritingBox.value) {
+    ChangePageHeight(CopywritingBox.value);
+  }
+};
 // 获取后台配置的组件
 const getAdminComponent = async () => {
   try {
@@ -126,6 +137,9 @@ const getAdminComponent = async () => {
       AdminData.list = list;
     }
     loading.value = false;
+    nextTick(() => {
+      getElementHeight();
+    });
   } catch (e) {
     console.log(e);
     loading.value = false;
@@ -220,9 +234,10 @@ onBeforeMount(async () => {
   .custom-copywriting-generation {
     display: flex;
     padding-top: @page-padding-top;
+    padding-bottom: @page-padding-top;
     .tip-box {
       width: 50%;
-      object-fit: contain;
+      // object-fit: contain;
     }
     .interaction-form {
       background: #2d2d2d;
@@ -266,6 +281,9 @@ onBeforeMount(async () => {
         height: 1px;
         background: #565656;
       }
+      .custom-gpt-message {
+        max-height: none;
+      }
       & > :not(:first-child) {
         margin-top: 20px;
       }

src/pages/CreationRecord/components/CopywritingRecord.vue

@@ -183,6 +183,9 @@ onBeforeMount(() => {
       }
     }
   }
+  .t-loading--center {
+    background: rgba(255, 255, 255, 0.1);
+  }
 }
 .custom-pagination {
   padding: 12px 0;

src/pages/CreationRecord/components/ImageViewer.vue

+<template>
+  <div class="tdesign-demo-image-viewer__base">
+    <t-image-viewer :images="[img]">
+      <template #trigger="{ open }">
+        <div class="tdesign-demo-image-viewer__ui-image">
+          <img
+            alt="test"
+            :src="img"
+            class="tdesign-demo-image-viewer__ui-image--img"
+          />
+          <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
+            <span><BrowseIcon size="1.4em" /> 预览</span>
+          </div>
+        </div>
+      </template>
+    </t-image-viewer>
+  </div>
+</template>
+<script setup lang="ts">
+import { BrowseIcon } from 'tdesign-icons-vue-next';
+import { ImageViewer as TImageViewer } from 'tdesign-vue-next';
+const props = defineProps<{
+  img: string;
+}>();
+</script>
+<style scoped>
+.tdesign-demo-image-viewer__ui-image {
+  width: 100%;
+  height: 100%;
+  display: inline-flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--td-radius-small);
+  overflow: hidden;
+}
+
+.tdesign-demo-image-viewer__ui-image--hover {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-anti);
+  line-height: 22px;
+  transition: 0.2s;
+}
+
+.tdesign-demo-image-viewer__ui-image:hover
+  .tdesign-demo-image-viewer__ui-image--hover {
+  opacity: 1;
+  cursor: pointer;
+}
+
+.tdesign-demo-image-viewer__ui-image--img {
+  width: 85px;
+  height: 85px;
+  border-radius: 8px;
+  cursor: pointer;
+  position: absolute;
+}
+
+.tdesign-demo-image-viewer__ui-image--footer {
+  padding: 0 16px;
+  height: 56px;
+  width: 100%;
+  line-height: 56px;
+  font-size: 16px;
+  position: absolute;
+  bottom: 0;
+  color: var(--td-text-color-anti);
+  background-image: linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0.4) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  display: flex;
+  box-sizing: border-box;
+}
+
+.tdesign-demo-image-viewer__ui-image--title {
+  flex: 1;
+}
+
+.tdesign-demo-popup__reference {
+  margin-left: 16px;
+}
+
+.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
+  cursor: pointer;
+}
+
+.tdesign-demo-image-viewer__base {
+  width: 150px;
+  height: 85px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/pages/CreationRecord/components/MappingRecord.vue

@@ -22,7 +22,7 @@
         </div>
       </template>
       <template #url="{ row }">
-        <img class="img" :src="row.url" alt="" />
+        <ImageViewer :img="row.url"></ImageViewer>
       </template>
       <template #download>
         <span class="download-text"> 下载 </span>
@@ -46,10 +46,13 @@ import { onBeforeMount, reactive, ref } from 'vue';
 import { getGenerateRecords } from '@/utils/api/scenes';
 import { Pagination as TPagination } from 'tdesign-vue-next';
 import { TASKTYPE } from '@/utils/api/Task';
+import ImageViewer from './ImageViewer.vue';
 const RecordList = reactive({
   // 绘图列表
   list: [],
 });
+// 最后展示的预览图
+const LastImage = ref('');
 const loading = ref(false);
 const pageNum = ref<number>(1);
 const pageSize = ref<number>(10);
@@ -80,6 +83,7 @@ const columns = [
     title: '图片',
     colKey: 'url',
     align: 'center',
+    className: 'td-img',
   },
   {
     title: '下载',
@@ -175,6 +179,8 @@ onBeforeMount(() => {
           cursor: pointer;
         }
       }
+      .td-img {
+      }
     }
   }
 }

src/pages/ImageGeneration/index.vue

 <template>
   <div class="custom-image-generation-box">
-    <div class="generation-box" v-show="!loading">
+    <div class="generation-box" v-show="!loading" ref="GenerationBox">
       <div class="interaction-form">
         <div class="basic-info" v-for="item in AdminData.list" :key="item.name">
           <div class="label">*{{ item.name }}</div>
@@ -97,10 +97,12 @@ import { FormExample2, CustomNum } from '@/utils/api/Task';
 import { Validationrules } from '@/utils/tool';
 import { useRoute } from 'vue-router';
 import { show_message } from '@/utils/tdesign_tool';
-//
 const loading = ref(false);
 const route = useRoute();
 const id = route.query.id;
+// el
+const GenerationBox = ref();
+
 // 定时器
 let IntervalImg: any = null;
 // 本次提交的数量
@@ -332,7 +334,11 @@ onBeforeUnmount(() => {
   position: relative;
   width: 100%;
   height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   .generation-box {
+    width: 100%;
     display: flex;
     padding-bottom: 30px;
     .generate-result {

src/utils/tool.ts

@@ -282,7 +282,7 @@ export const filterRepeatTimestamp = (list: any, newList: any) => {
 };
 
 /**
- *
+ * 后台配置组件正则校验
  * @param rules
  * @param value
  * @returns
@@ -310,3 +310,16 @@ export const Validationrules = (
     return '';
   }
 };
+
+export const ChangePageHeight = (el: HTMLElement) => {
+  if (el) {
+    // 获取元素高度
+    const el_height = el.clientHeight;
+    const client = el.getBoundingClientRect();
+    if (client.bottom > el_height) {
+      // 铺满屏幕
+      el.style.height = '100%';
+      el.style.minHeight = el_height + 'px';
+    }
+  }
+};