Merge remote-tracking branch 'origin/dev-frontend_v132' into feature-frontend

frontend/src/views/Photography/shot.vue

@@ -9,49 +9,45 @@
 
   <div class="photography-page flex-col">
     <div class="main-container">
-      <div class="content-wrapper flex-row">
-        <div class="step-number flex-col"><span class="text_22">1</span></div>
-        <div class="step-one flex-col justify-between">
-          <div class="step-header flex-row">
-            <span class="step-title">第一步：获取商品货号</span>
-            <img class="step-icon" referrerpolicy="no-referrer" src="@/assets/images/Photography/step1-icon.png" />
-            <img class="step-divider" referrerpolicy="no-referrer"
-              src="@/assets/images/Photography/step-divider-line.png" />
-          </div>
-          <div class="step-content flex-row justify-between">
-            <div class="method-container flex-col">
+      <div class="content-wrapper flex-col">
+        <div class="step-section">
+          <div class="step-number flex-col"><span class="text_22">1</span></div>
+          <div class="step-one flex-col">
+            <div class="step-header flex-row">
+              <span class="step-title">第一步：获取商品货号</span>
+            </div>
+            <div class="step-content">
               <div class="input-container flex-row">
                 <el-input class="input-item" ref="goodsArtNo" v-model="goods_art_no" placeholder="请输入货号"> </el-input>
               </div>
               <div class="auto-method flex-row justify-between">
-                <div class="text-method-tag flex-col"><span class="text_4">自动获取</span></div>
-                <span class="method-description">用遥控器扫描商品资料二维码</span>
-              </div>
-              <div class="scan-method flex-row justify-between">
-                <div class="remote-control flex-col">
-                </div>
+                <img class="step-icon" referrerpolicy="no-referrer" src="@/assets/images/Photography/step1-icon.png" />
+                <div class="text-method-tag flex-col mar-left-10"><span class="text_4">自动获取</span></div>
+                <span class="method-description mar-left-10">用遥控器扫描商品资料二维码</span>
               </div>
             </div>
-            <img class="remote-image" referrerpolicy="no-referrer"
-              src="@/assets/images/Photography/remote-control.png" />
           </div>
         </div>
-        <div class="step-number flex-col"><span class="text_22">2</span></div>
-        <div class="step-two flex-col justify-between">
-          <span class="step-title">第二步：启动拍摄（根据按遥控器左右键启动）</span>
-          <div class="shooting-container flex-col">
-            <div class="shooting-tips flex-row justify-between">
-              <img class="info-icon" referrerpolicy="no-referrer" src="@/assets/images/Photography/info-icon.png" />
-              <span class="tips-text">遥控左右按键可启动拍摄，中间按钮可在拍摄5张主图后解锁，用于拍摄自定义图</span>
-            </div>
-            <div class="wifi mar-top-20">
-              <img  referrerpolicy="no-referrer"
-                   src="@/assets/images/Photography/wifi.png" style="width: 60px" />
-            </div>
-            <div class="remote-control-wrap">
-              <RemoteControl
-                  @onRemoteControl="onRemoteControl"
-              />
+
+        <div class="step-section">
+          <div class="step-number flex-col"><span class="text_22">2</span></div>
+          <div class="step-two flex-col justify-between">
+            <span class="step-title">第二步：启动拍摄（根据按遥控器左右键启动）</span>
+            <div class="shooting-container flex-col">
+              <div class="shooting-tips flex-row justify-between">
+                <img class="info-icon" referrerpolicy="no-referrer" src="@/assets/images/Photography/info-icon.png" />
+                <span class="tips-text">遥控左右按键可启动拍摄，中间按钮可在拍摄5张主图后解锁，用于拍摄自定义图</span>
+              </div>
+              <div class="wifi mar-top-20">
+                <img  referrerpolicy="no-referrer"
+                     src="@/assets/images/Photography/wifi.png" style="width: 60px" />
+              </div>
+              <div class="remote-control-wrap">
+                <RemoteControl
+                    @onRemoteControl="onRemoteControl"
+                    :canStop="runLoading || takePictureLoading"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -61,103 +57,114 @@
         <el-image  :src="getFilePath((lastPhoto as any)?.file_path || '')"  fit="cover" ></el-image>
       </div>
 
-      <div class="history-section flex-col">
-          <span class="history-title flex between">
-            <div>拍摄记录</div>
-            <div class="c-666 fs-12" v-if="goodsList.length" >
-                    <el-button :disabled="!(runLoading || takePictureLoading)" @click="oneClickStop" class="input-button" type="primary" size="mini" v-log="{ describe: { action: '一键停止拍摄' } }">一键停止</el-button>
-                    <el-button :disabled="runLoading || takePictureLoading" @click="delAll" class="input-button" type="danger" size="mini" v-log="{ describe: { action: '一键删除所有记录' } }">一键删除</el-button>
-            </div>
-          </span>
-          <img class="divider-line" referrerpolicy="no-referrer" src="@/assets/images/Photography/divider-line.png" />
-
+      <div class="history-section flex-col koutu-section">
           <div class="history-warp">
             <div v-if="!goodsList.length" class="fs-14 c-666 mar-top-50">
               {{ loading ? '数据正在加载中，请稍候...' : '暂无数据，请先进行拍摄'}}
             </div>
-              <div v-else class="history-item clearfix"  v-for="item in goodsList" :key="item.goods_art_no" style="padding:10px;">
-                <div class="flex  between flex-item  c-333">
-                  <div class="chaochu flex-item flex left">货号：{{ item.goods_art_no }}</div>
-                  <div >
-                    <el-dropdown :disabled="runLoading || takePictureLoading" >
-                      <el-button :disabled="runLoading || takePictureLoading" size="small"  plain style="margin-right: 5px" >高级生成</el-button>
-                      <template #dropdown>
-                        <el-dropdown-menu>
-                          <el-dropdown-item
-                              v-for="menu in generate.children"
-                              @click.native="onGenerateCLick(menu,item)">{{ menu.name }}</el-dropdown-item>
-                        </el-dropdown-menu>
-                      </template>
-                    </el-dropdown>
-
-                    <el-button size="small" :disabled="runLoading || takePictureLoading" @click="delGoods({goods_art_nos:[item.goods_art_no]})" v-log="{ describe: { action: '删除货号', goods_art_no: item.goods_art_no } }">删除</el-button>
+            <div v-else class="history-item"  v-for="item in goodsList" :key="item.goods_art_no"   >
+              <div class="history-item-header">
+                <div class="history-item-left">
+                  <el-checkbox
+                      :model-value="selectedGoods.has(item.goods_art_no)"
+                      @change="toggleGoods(item.goods_art_no)"
+                      class="goods-checkbox"
+                  />
+                  <span class="goods-art-no">{{ item.goods_art_no }}</span>
+
+                  <div class="history-item-meta ">
+                    <span class="action-time flex left">
+                       <img src="@/assets/images/processImage.vue/riq.png" />
+                      {{ getTime(item.action_time) }}</span>
+                    <span class="image-count mar-left-10 flex left">
+                       <img src="@/assets/images/processImage.vue/tup.png" />
+                      {{ item.items?.length || 0 }}张图片</span>
                   </div>
                 </div>
-                <div class="flex  between flex-item  c-333" style="margin-top: 5px">
-                  <div class="c-999 fs-12">{{ getTime(item.action_time) }}</div>
+                <div class="history-item-right">
+                  <el-dropdown :disabled="runLoading || takePictureLoading" trigger="click">
+                    <el-button :disabled="runLoading || takePictureLoading" size="small" plain>高级生成</el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item
+                            v-for="menu in generate.children"
+                            @click.native="onGenerateCLick(menu,item)">{{ menu.name }}</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+
                   <el-button size="small" :disabled="runLoading || takePictureLoading"  type="primary"  @click="reTakePictureNos(item.goods_art_no,item)" plain v-log="{ describe: { action: '重拍货号', goods_art_no: item.goods_art_no } }">重拍</el-button>
+                  <el-button style="color: #FF4C00"  size="small" class="mar-left-10" :disabled="runLoading || takePictureLoading" @click="delGoods({goods_art_nos:[item.goods_art_no]})" v-log="{ describe: { action: '删除货号', goods_art_no: item.goods_art_no } }">删除</el-button>
                 </div>
-                <div class="mar-top-10 clearfix history-item_image_wrap" style="width: 100%" >
-                    <component class="history-item_image"
-                         v-for="image in item.items"
-                               :key="image.action_id || image.action_name"
-                               v-loading="!image.PhotoRecord.image_path && runAction.goods_art_no == item.goods_art_no"
-                               :is="image.PhotoRecord.image_path ? 'div' : 'p'"
-                    >
-                      <span class="tag">{{ image.action_name }}</span>
-                      <el-popover
-                          popper-class="shot-image-popper"
-                          placement="left"
-                          :hide-after="0"
-                          width="50%"
-                          offset="20"
-                          v-if="image.PhotoRecord.image_path"
-                      >
-                        <template #reference>
-                          <div class="flex el-image_view">
-                            <el-image  :src="getFilePath(image.PhotoRecord.image_path)"  fit="contain" >
-                              <template #error>
-                                <div class="image-slot"></div>
-                              </template>
-                            </el-image>
-                            <el-button :disabled="runLoading || takePictureLoading" class="reset-button" @click="reTakePicture(image.PhotoRecord)" v-log="{ describe: { action: '重拍单张图片', goods_art_no: image.PhotoRecord.goods_art_no, action_name: image.action_name } }">重拍</el-button>
-                          </div>
-                        </template>
-
-                        <el-image  :src="getFilePath(image.PhotoRecord.image_path)"  fit="contain" >
-                          <template #error>
-                            <div class="image-slot"></div>
-                          </template>
-                        </el-image>
-                      </el-popover>
-
-                      <div class="flex el-image_view"  v-else>
-                      <el-image :src="getFilePath(image.PhotoRecord.image_path)"  fit="contain">
-                        <template #error>
-                          <div class="image-slot"></div>
-                          <el-button :disabled="runLoading || takePictureLoading" class="reset-button" @click="reTakePicture(image.PhotoRecord)" v-log="{ describe: { action: '重拍单张图片', goods_art_no: image.PhotoRecord.goods_art_no, action_name: image.action_name } }">重拍</el-button>
-                        </template>
-                      </el-image>
-                      </div>
-                    </component>
-                    <div v-if="item.items.length < 5"
-                      v-for="n in (5 - item.items.length)"
-                         :key="n"
-                         class="history-item_image"
+              </div>
+              <div class="history-item-images" >
+                <div
+                  v-for="(image, index) in item.items"
+                  :key="image.action_id || image.action_name"
+                  class="history-item_image"
+                  v-loading="!image.PhotoRecord.image_path && runAction.goods_art_no == item.goods_art_no"
+                >
+                  <span class="tag" v-if="!image.PhotoRecord.image_path">{{ image.action_name }}</span>
+                  <div class="el-image_view" v-if="image.PhotoRecord.image_path">
+                    <el-image
+                      :src="getFilePath(image.PhotoRecord.image_path)"
+                      :preview-src-list="getPreviewImageList(item)"
+                      hide-on-click-modal
+                      :initial-index="getPreviewIndex(item, index)"
+                      class="preview-image"
+                      fit="contain"
+                      :preview-teleported="true"
+                      lazy
                     >
-                      <span class="tag" style="font-size: 12px;">暂未配置</span>
-                    </div>
+                      <template #error>
+                        <div class="image-slot">
+                          <span class="tag">{{ image.action_name }}</span>
+                        </div>
+                      </template>
+                    </el-image>
+                    <el-button :disabled="runLoading || takePictureLoading" class="reset-button" @click="reTakePicture(image.PhotoRecord)" v-log="{ describe: { action: '重拍单张图片', goods_art_no: image.PhotoRecord.goods_art_no, action_name: image.action_name } }">重拍</el-button>
+                  </div>
+                  <div v-else class="image-placeholder">
+                    <span class="tag">{{ image.action_name }}</span>
+                  </div>
                 </div>
               </div>
+            </div>
           </div>
 
-          <div
-            class="next-step button--primary1 flex-col"
-            :class="{ 'is-disabled': !goodsList.length || runLoading || takePictureLoading }"
-            @click="(!goodsList.length || runLoading || takePictureLoading) ? null : openPhotographyDetail()"
-            v-log="{ describe: { action: '点击开始生成' } }"
-          >
-            <span class="next-step-text">开始生成</span>
+          <div class="footer-controls">
+            <div class="footer-left">
+              <el-checkbox
+                :model-value="isSelectAll"
+                :indeterminate="isIndeterminate"
+                @change="toggleSelectAll"
+                class="select-all-checkbox"
+              >
+                全选
+              </el-checkbox>
+              <span class="image-count-text">
+                已选择 <span style="color: #2957FF">{{ selectedImageCount }}</span> 张图片 共 <span style="color: #2957FF">{{ totalImageCount }}</span> 张图片
+              </span>
+            </div>
+            <div class="footer-right">
+              <el-button
+                :disabled="selectedGoods.size === 0 || runLoading || takePictureLoading"
+                @click="deleteSelected"
+                v-log="{ describe: { action: '删除选中货号' } }"
+              >
+                删除
+              </el-button>
+              <el-button
+                type="primary"
+                :disabled="!goodsList.length || runLoading || takePictureLoading"
+                @click="openPhotographyDetail()"
+                v-log="{ describe: { action: '点击开始生成' } }"
+              >
+                <img src="@/assets/images/processImage.vue/sc.png" />
+                开始生成
+                <img src="@/assets/images/processImage.vue/go.png"  class="go"/>
+              </el-button>
+            </div>
           </div>
         </div>
     </div>
@@ -165,12 +172,13 @@
 </template>
 <script setup lang="ts">
 import headerBar from '@/components/header-bar/index.vue'
-import { onMounted, onBeforeUnmount } from 'vue'
+import { onMounted, onBeforeUnmount, ref, computed } from 'vue'
 import HardwareCheck from '@/components/check/index.vue'
 // @ts-ignore
 import RemoteControl from '@/views/RemoteControl/index.vue'
 import usePhotography from './mixin/usePhotography'
 import generate from '@/utils/menus/generate'
+import { ElMessageBox } from 'element-plus'
 
 const {
   loading,
@@ -186,11 +194,10 @@ const {
   getTime,
   getFilePath,
   getPhotoRecords,
-  delAll,
   delGoods,
+  del,
   reTakePicture,
   reTakePictureNos,
-  oneClickStop,
   onRemoteControl,
   openPhotographyDetail,
   onGenerateCLick,
@@ -198,6 +205,106 @@ const {
   cleanupEventListeners,
 } = usePhotography()
 
+// 选中的货号列表
+const selectedGoods = ref<Set<string>>(new Set())
+
+// 全选状态
+const isSelectAll = computed(() => {
+  return goodsList.value.length > 0 && selectedGoods.value.size === goodsList.value.length
+})
+
+// 是否半选状态
+const isIndeterminate = computed(() => {
+  return selectedGoods.value.size > 0 && selectedGoods.value.size < goodsList.value.length
+})
+
+// 切换单个货号的选中状态
+const toggleGoods = (goodsArtNo: string) => {
+  if (selectedGoods.value.has(goodsArtNo)) {
+    selectedGoods.value.delete(goodsArtNo)
+  } else {
+    selectedGoods.value.add(goodsArtNo)
+  }
+}
+
+// 全选/取消全选
+const toggleSelectAll = () => {
+  if (isSelectAll.value) {
+    selectedGoods.value.clear()
+  } else {
+    goodsList.value.forEach((item: any) => {
+      selectedGoods.value.add(item.goods_art_no)
+    })
+  }
+}
+
+// 计算已选择的图片数量
+const selectedImageCount = computed(() => {
+  let count = 0
+  goodsList.value.forEach((item: any) => {
+    if (selectedGoods.value.has(item.goods_art_no)) {
+      count += item.items?.length || 0
+    }
+  })
+  return count
+})
+
+// 计算总图片数量
+const totalImageCount = computed(() => {
+  let count = 0
+  goodsList.value.forEach((item: any) => {
+    count += item.items?.length || 0
+  })
+  return count
+})
+
+// 删除选中的货号
+const deleteSelected = async () => {
+  if (selectedGoods.value.size === 0) {
+    return
+  }
+
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除选中的 ${selectedGoods.value.size} 个货号的拍摄数据吗？`,
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+      }
+    )
+
+    const goodsArtNos = Array.from(selectedGoods.value)
+    await del({ goods_art_nos: goodsArtNos })
+    // 删除成功后清空选中状态
+    selectedGoods.value.clear()
+  } catch (e) {
+    // 用户取消
+  }
+}
+
+// 获取预览图片列表（只包含有图片路径的，保持原始顺序）
+const getPreviewImageList = (item: any) => {
+  if (!item || !item.items) return []
+  return item.items
+    .filter((img: any) => img.PhotoRecord?.image_path)
+    .map((img: any) => getFilePath(img.PhotoRecord.image_path))
+}
+
+// 获取当前图片在预览列表中的索引
+const getPreviewIndex = (item: any, currentIndex: number) => {
+  if (!item || !item.items) return 0
+  // 计算当前图片在过滤后的预览列表中的索引
+  let previewIndex = 0
+  for (let i = 0; i <= currentIndex; i++) {
+    if (item.items[i]?.PhotoRecord?.image_path) {
+      if (i === currentIndex) break
+      previewIndex++
+    }
+  }
+  return previewIndex
+}
+
 onMounted(async () => {
   await getPhotoRecords()
   initEventListeners()
@@ -208,10 +315,10 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style  lang="scss">
-.shot-image-popper {
+<style lang="scss">
+.koutu-image-popper {
   width: calc(100vw - 470px) !important;
-  left: 70px !important;
+  right: 70px !important;
   top: 100px !important;
   height: calc(100vh - 170px) !important;
   transform: translate(0px, 0px) !important;
@@ -245,8 +352,19 @@ onBeforeUnmount(() => {
       left: 0;
       right: 0;
       bottom: 0;
+      width: 510px;
       margin:  auto;
-      justify-content: center;
+      justify-content: flex-start;
+      flex-direction: column;
+
+      .step-section {
+        display: flex;
+        margin-bottom: 20px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
 
       .step-number {
         background-color: rgba(22, 119, 255, 1);
@@ -271,7 +389,7 @@ onBeforeUnmount(() => {
 
       .step-one {
         width: 426px;
-        height: 521px;
+        height: auto;
         margin: 55px 0 0 5px;
 
         .step-header {
@@ -307,97 +425,69 @@ onBeforeUnmount(() => {
 
         .step-content {
           width: 426px;
-          height: 469px;
-          margin-top: 28px;
 
-          .method-container {
-            background-color: rgba(247, 247, 247, 1);
-            height: 484px;
-            width: 353px;
+          .input-container {
+            width: calc(100% - 20px );
+            height: 36px;
+            margin: 10px 10px 0;
 
-            .auto-method {
-              width: 253px;
-              height: 24px;
-              margin: 28px 0 0 14px;
-
-              .text-method-tag {
-                background-color: rgba(0, 174, 30, 1);
-                height: 24px;
-                width: 65px;
-
-                .text_4 {
-                  width: 56px;
-                  height: 20px;
-                  overflow-wrap: break-word;
-                  color: rgba(255, 255, 255, 1);
-                  font-size: 14px;
-                  font-family: PingFangSC-Semibold;
-                  font-weight: 600;
-                  text-align: left;
-                  white-space: nowrap;
-                  line-height: 20px;
-                  margin: 2px 0 0 4px;
+            .input-item {
+              :deep(.el-input__inner){
+                  height: 36px;
+                  line-height: 36px;
                 }
-              }
+            }
+          }
 
-              .method-description {
-                width: 182px;
+          .auto-method {
+            width: 253px;
+            height: 24px;
+            margin: 28px 0 0 14px;
+
+            .text-method-tag {
+              background-color: rgba(0, 174, 30, 1);
+              height: 24px;
+              width: 65px;
+
+              .text_4 {
+                width: 56px;
                 height: 20px;
                 overflow-wrap: break-word;
-                color: rgba(71, 71, 71, 1);
+                color: rgba(255, 255, 255, 1);
                 font-size: 14px;
                 font-family: PingFangSC-Semibold;
                 font-weight: 600;
                 text-align: left;
                 white-space: nowrap;
                 line-height: 20px;
-                margin-top: 2px;
-              }
-            }
-
-            .scan-method {
-              width: 350px;
-              height: 350px;
-              margin: 10px;
-
-              .remote-control {
-                width: 350px;
-                height: 350px;
-                background: url(@/assets/images/Photography/left.png) 0px 0px no-repeat;
-                background-size: 300px 300px;
-                position: relative;
+                margin: 2px 0 0 4px;
               }
             }
 
-            .input-container {
-              width: calc(100% - 20px );
-              height: 36px;
-              margin: 20px 10px 0;
-
-              .input-item {
-                :deep(.el-input__inner){
-                    height: 36px;
-                    line-height: 36px;
-                  }
-              }
+            .method-description {
+              width: 182px;
+              height: 20px;
+              overflow-wrap: break-word;
+              color: rgba(71, 71, 71, 1);
+              font-size: 14px;
+              font-family: PingFangSC-Semibold;
+              font-weight: 600;
+              text-align: left;
+              white-space: nowrap;
+              line-height: 20px;
+              margin-top: 2px;
             }
           }
-
-          .remote-image {
-            width: 61px;
-            height: 38px;
-            margin-top: 216px;
-          }
         }
       }
 
       .step-two {
-        width: 384px;
-        height: 521px;
-        margin: 55px 0 0 7px;
+        width: 426px;
+        height: auto;
+        margin: 55px 0 0 5px;
 
         .step-title {
-          width: 384px;
+          width: 426px;
           height: 24px;
           overflow-wrap: break-word;
           color: rgba(0, 0, 0, 0.85);
@@ -410,10 +500,8 @@ onBeforeUnmount(() => {
         }
 
         .shooting-container {
-          background-color: rgba(247, 247, 247, 1);
           width: 353px;
-          height: 484px;
-          margin: 28px 0 0 2px;
+          height: auto;
           .remote-control-wrap {
             width: 353px;
             height: 300px;
@@ -448,66 +536,169 @@ onBeforeUnmount(() => {
 }
 
 .history-section {
-        background-color: rgba(234, 236, 237, 1);
-        width: 332px;
+        width:  calc(100vw - 510px);
         height: calc(100vh - 30px);
-
-        .history-title {
-          width: calc(100% - 20px);
-          height: 22px;
-          overflow-wrap: break-word;
-          color: rgba(51, 51, 51, 1);
-          font-size: 16px;
-          font-family: PingFangSC-Semibold;
-          font-weight: 600;
-          text-align: center;
-          white-space: nowrap;
-          line-height: 22px;
-          margin: 9px 0 0 10px;
-        }
-
-        .divider-line {
-          width: 100%;
-          height: 1px;
-          margin-top: 9px;
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        overflow-y: auto;
+         background:#F5F6F7;
+
+        ::v-deep {
+          .el-checkbox__input {
+            transform: scale(1.4);
+          }
         }
-
         .history-warp {
-          flex-grow: 1;
-          overflow: auto;
-          height: calc(100% - 125px);
+          flex: 1;
 
           .history-item {
+            background: #FFFFFF;
+            box-shadow: 0px 2px 4px 0px rgba(23,33,71,0.1);
+            border-radius: 10px;
+            border: 1px solid #D9DEE6;
+            margin-bottom: 20px;
+
+            .history-item-header {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              height: 40px;
+              padding: 0 10px;
+
+              background: linear-gradient( 90deg, #F4ECFF 0%, #DFEDFF 100%);
+              border-radius: 10px 10px 0px 0px;
+
+              .history-item-left {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+
+                .goods-checkbox {
+                  margin-right: 0;
+                }
+
+                .goods-art-no {
+                  font-size: 16px;
+                  font-weight: 500;
+                  color: #333;
+                }
+              }
+
+              .history-item-right {
+                display: flex;
+                align-items: center;
+                ::v-deep {
+                  .el-button { height: 30px; line-height: 30px;}
+                }
+              }
+            }
+
+            .history-item-meta {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              font-size: 12px;
+              color: #666;
+
+              img {
+                height: 14px;
+                margin-right: 2px;
+              }
+
+              .action-time {
+                color: #666;
+              }
+
+              .image-count {
+                color: #666;
+              }
+            }
+
+            .history-item-images {
+              display: grid;
+              grid-template-columns: repeat(5, 1fr);
+              gap: 10px;
+              padding: 15px;
+              border-top: 1px solid #f0f0f0;
+              overflow-x: auto;
+
+              // 如果图片数量超过5个，允许横向滚动
+              @media (min-width: 1200px) {
+                grid-template-columns: repeat(5, 1fr);
+              }
+
+              // 响应式：小屏幕时每行3个
+              @media (max-width: 768px) {
+                grid-template-columns: repeat(3, 1fr);
+              }
+            }
+
             .history-item_image_wrap {
-              padding-bottom: 20px;
-              border-bottom: 1px solid #CCCCCC;
+              padding-bottom: 0;
+              border-bottom: none;
             }
             .history-item_image {
+              position: relative;
+              width: 100%;
+              aspect-ratio: 1;
+              background: #F7F7F7;
+              border-radius: 10px;
+              overflow: hidden;
+              cursor: pointer;
+              border: 1px solid #D9DEE6;
+              transition: all 0.3s;
+
+
               .tag {
                 color: #bbb;
                 position: absolute;
                 left: 0;
                 right: 0;
-                top:50%;
-                margin-top: -15px;
+                top: 50%;
+                margin-top: -10px;
                 line-height: 20px;
+                text-align: center;
+                font-size: 12px;
+                z-index: 1;
+                pointer-events: none;
               }
 
-              position: relative;
-              width: 70px;
-              height: 70px;
-              float: left;
-              margin: 6px 0 0 6px;
-              background: #F7F7F7;
-              .el-image {
-                display: block;
-                width:100%;
+              .preview-image {
+                width: 100%;
+                height: 100%;
+
+                :deep(.el-image__inner) {
+                  width: 100%;
+                  height: 100%;
+                  object-fit: cover;
+                }
+              }
+
+              .image-placeholder {
+                width: 100%;
                 height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: #F7F7F7;
               }
-              &:first-child {
-                width: 146px;
-                height: 146px;
+
+              .image-slot {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: #F7F7F7;
+              }
+
+              &:hover {
+                border-color: #409eff;
+                transform: scale(1.02);
+                box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
               }
+
               &.el-loading-parent--relative{
                 ::v-deep {
                   .el-loading-mask { display: none}
@@ -515,6 +706,7 @@ onBeforeUnmount(() => {
               }
             }
 
+
             .el-image_view {
               display: flex;
               width: 100%;
@@ -548,30 +740,72 @@ onBeforeUnmount(() => {
                 .el-loading-mask { display: block !important;}
               }
             }
+
+
           }
         }
 
-        .next-step {
-          height: 50px;
-          background-size: 100% 100%;
-          width: 100%;
-          line-height: 50px;
-          cursor: pointer;
-
-          &.is-disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            pointer-events: none;
+        .footer-controls {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0px 20px;
+          border-top: 1px solid #D9DEE6;
+          background-color: #fff;
+          min-height: 50px;
+          flex-shrink: 0;
+          position: fixed;
+          bottom:0;
+          left: 510px;
+          right: 0;
+          font-size: 14px;
+          z-index: 100;
+          img {
+            height: 12px;
+            margin: 0 5px;
+          }
+          .go {
+            height: 12px;
+            opacity: .8;
+          }
+          ::v-deep {
+            .el-button {
+              border-radius: 10px;
+              height: 40px;
+              line-height: 40px;
+            }
           }
 
-          .next-step-text {
-            width: 100%;
-            overflow-wrap: break-word;
-            color: rgba(255, 255, 255, 1);
-            text-align: center;
-            white-space: nowrap;
+          .footer-left {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+
+            .select-all-checkbox {
+              margin-right: 0;
+              ::v-deep {
+                .el-checkbox__label {
+
+                  font-size: 14px;
+                  color: #666;
+                }
+              }
+            }
+
+            .image-count-text {
+              font-size: 14px;
+              color: #333;
+              margin-left: 0;
+            }
+          }
+
+          .footer-right {
+            display: flex;
+            align-items: center;
+            gap: 10px;
           }
         }
+
       }
 
 .last-photo{

frontend/src/views/RemoteControl/index.vue

@@ -15,24 +15,24 @@
       <el-col :span="3"></el-col>
     </el-row>
     <el-row align="middle">
-      <el-col :span="6"></el-col>
+      <el-col :span="3"></el-col>
       <el-col :span="6">
         <div class="button up" @click="switchLED(1)" v-log="{ describe: { action: 'LED开启' } }">LED开</div>
       </el-col>
-      <el-col :span="1"></el-col>
       <el-col :span="6">
         <div class="button up" @click="switchLED(0)" v-log="{ describe: { action: 'LED关闭' } }">LED关</div>
       </el-col>
-      <el-col :span="4"></el-col>
+      <el-col :span="6">
+        <div class="button up" :class="{ disabled: !canStop }" @click="oneClickStop" v-log="{ describe: { action: '一键停止拍摄' } }">停止</div>
+      </el-col>
+      <el-col :span="3"></el-col>
     </el-row>
-    <div class="te-c  fs-14"  style="color: #8C92A7">左脚控制左脚鞋启动拍摄</div>
-    <div class="te-c  fs-14"  style="color: #8C92A7">右脚控制右脚鞋启动拍摄</div>
   </div>
 
 </template>
 
 <script setup lang="ts">
-import { defineEmits } from 'vue'
+import { defineEmits, defineProps } from 'vue'
 import headerBar from '@/components/header-bar/index.vue'
 import icpList from '@/utils/ipc'
 import client from "@/stores/modules/client";
@@ -43,6 +43,10 @@ const clientStore = client();
 // 初始化 WebSocket 状态管理
 const socketStore = socket()
 
+const props = defineProps<{
+  canStop: boolean
+}>()
+
 const emit = defineEmits(['onRemoteControl'])
 const runLeft = async () => {
   emit('onRemoteControl','left')
@@ -70,6 +74,16 @@ const switchLED = async (value) => {
   });
 }
 
+// 一键停止
+const oneClickStop = () => {
+  if (!props.canStop) {
+    return
+  }
+  socketStore.sendMessage({
+    type: 'stop_action',
+  })
+}
+
 </script>
 
 <style scoped lang="scss">
@@ -105,4 +119,25 @@ const switchLED = async (value) => {
   background-size: 60px 60px;
   cursor: pointer;
 }
+
+.button.stop {
+  background: #ff4c00;
+  color: white;
+  border-radius: 10px;
+  width: 120px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  margin: 0 auto;
+}
+
+.button.stop:hover {
+  background: #e64500;
+}
+
+.button.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
 </style>