Просмотр исходного кода

feat(photography): 添加拍摄动作名称标签显示功能

- 在最后照片预览区域添加动作名称标签显示
- 新增 last-photo-content 容器样式布局
- 为动作名称标签添加背景色、圆角和阴影样式
- 调整图片高度以适应标签空间
- 从后端接口获取并传递 action_name 数据到前端显示
panqiuyao 12 часов назад
Родитель
Сommit
286400f27d

+ 2 - 1
frontend/src/views/Photography/mixin/usePhotography.ts

@@ -821,7 +821,8 @@ const onRemoteControl = async (type) => {
           setTimeout(() => {
           setTimeout(() => {
             showlastPhoto.value = true;
             showlastPhoto.value = true;
             lastPhoto.value = {
             lastPhoto.value = {
-              file_path: result.data.photo_file_name
+              file_path: result.data.photo_file_name,
+              action_name:  result.data.action_name
             };
             };
             setTimeout(() => {
             setTimeout(() => {
               if (!runAction.value.goods_art_no) {
               if (!runAction.value.goods_art_no) {

+ 25 - 3
frontend/src/views/Photography/shot.vue

@@ -59,12 +59,14 @@
       <div class="last-photo" v-show="showlastPhoto && (lastPhoto as any)?.file_path" v-key="(lastPhoto as any)?.file_path">
       <div class="last-photo" v-show="showlastPhoto && (lastPhoto as any)?.file_path" v-key="(lastPhoto as any)?.file_path">
         <el-button
         <el-button
           class="close-btn"
           class="close-btn"
-          type="danger"
           icon="Close"
           icon="Close"
           circle
           circle
           @click="closeLastPhoto"
           @click="closeLastPhoto"
         />
         />
-        <el-image  :src="getFilePath((lastPhoto as any)?.file_path || '')"  fit="contain" ></el-image>
+        <div class="last-photo-content">
+          <div class="action-name-tag" v-if="(lastPhoto as any)?.action_name">{{ (lastPhoto as any)?.action_name }}</div>
+          <el-image  :src="getFilePath((lastPhoto as any)?.file_path || '')"  fit="contain" ></el-image>
+        </div>
       </div>
       </div>
 
 
       <div class="history-section flex-col koutu-section">
       <div class="history-section flex-col koutu-section">
@@ -931,9 +933,29 @@ watch(goodsList, () => {
     }
     }
   }
   }
 
 
+  .last-photo-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .action-name-tag {
+      background: rgba(41, 87, 255, 0.9);
+      color: #fff;
+      padding: 8px 20px;
+      border-radius: 20px;
+      font-size: 16px;
+      font-weight: 500;
+      margin-bottom: 15px;
+      box-shadow: 0 2px 8px rgba(41, 87, 255, 0.4);
+    }
+  }
+
   .el-image {
   .el-image {
     width: 100%;
     width: 100%;
-    height:100%;
+    height: calc(100% - 60px);
     display: block;
     display: block;
 
 
     .el-image__inner {
     .el-image__inner {