فهرست منبع

feat(photography): 添加场景图生成提示工具

- 在场景图选择区域添加了详细的使用说明工具提示
- 提示内容包括未选择场景时不生成图片以及重出需先删除旧文件的说明
- 优化了底部提示区域的样式布局和交互体验
- 添加了专门的工具提示弹窗样式类 scene-ffoot-popper
- 实现了提示文本左对齐和自适应宽度显示
- 确保禁用状态下提示仍然可点击查看帮助信息
panqiuyao 3 هفته پیش
والد
کامیت
685435073c
1فایلهای تغییر یافته به همراه54 افزوده شده و 1 حذف شده
  1. 54 1
      frontend/src/views/Photography/detail.vue

+ 54 - 1
frontend/src/views/Photography/detail.vue

@@ -47,7 +47,20 @@
               v-model:mode="sceneMode"
             />
           </div>
-          <footer class="ffoot"><svg class="ic"><use href="#i-info"/></svg>未选择则不生成场景图,使用白底图</footer>
+          <footer class="ffoot ffoot--tip">
+            <el-tooltip effect="dark" placement="top" :show-after="200" popper-class="scene-ffoot-popper">
+              <template #content>
+                未选择则不生成场景图。<br />
+                货号已经生成过场景图时,需要删除对应的「场景图.jpg」才能重新生成。
+              </template>
+              <span class="ffoot-inner">
+                <svg class="ic"><use href="#i-info"/></svg>
+                <span class="ffoot-copy">
+                  未选择则不生成场景图,重出请先删除场景图.jpg
+                </span>
+              </span>
+            </el-tooltip>
+          </footer>
         </section>
 
         <!-- 模特图 -->
@@ -2036,6 +2049,8 @@ const selectFolder = () => {
   display: flex;
   gap: 7px;
   align-items: flex-start;
+  justify-content: flex-start;
+  text-align: left;
   line-height: 1.5;
   .ic {
     flex: none;
@@ -2046,11 +2061,41 @@ const selectFolder = () => {
   }
 }
 
+.ffoot--tip {
+  :deep(.el-tooltip__trigger),
+  :deep(.el-only-child__content) {
+    display: flex !important;
+    width: 100%;
+    justify-content: flex-start;
+    text-align: left;
+  }
+}
+
+.ffoot-inner {
+  display: flex;
+  gap: 7px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-width: 0;
+  width: 100%;
+  cursor: help;
+  text-align: left;
+}
+
+.ffoot-copy {
+  min-width: 0;
+  flex: 1;
+  text-align: left;
+}
+
 .off .ffoot {
   opacity: 0.38;
   pointer-events: none;
   filter: saturate(0.5);
 }
+.off .ffoot--tip {
+  pointer-events: auto;
+}
 .off .fbody {
   pointer-events: none;
 }
@@ -3670,3 +3715,11 @@ const selectFolder = () => {
 }
 </style>
 
+<style lang="scss">
+.scene-ffoot-popper {
+  max-width: 280px;
+  line-height: 1.55;
+  text-align: left;
+}
+</style>
+