refactor(photography): 重构演示模式UI显示

- 移除全屏遮罩样式，改为左下角状态栏显示
- 添加旋转加载动画和拍摄状态信息展示
- 简化停止按钮样式并调整位置布局
- 新增计算属性过滤程序类型标签前缀
- 更新SCSS样式为卡片式设计，移除动画效果

frontend/src/views/Photography/shot.vue

@@ -15,31 +15,6 @@
     @close="previewVisible = false"
   />
 
-  <!-- 演示模式全屏遮罩 -->
-  <div class="demo-mode-overlay" v-if="isDemoMode">
-    <div class="demo-mode-content">
-      <div class="demo-mode-header">
-        <span class="demo-mode-tag">演示模式</span>
-        <el-button type="danger" size="large" @click="stopDemoMode" :loading="demoStopping">
-          停止演示
-        </el-button>
-      </div>
-      <div class="demo-mode-info">
-        <div class="demo-info-item">
-          <span class="demo-label">货号：</span>
-          <span class="demo-value">{{ demoGoodsArtNo }}</span>
-        </div>
-        <div class="demo-info-item">
-          <span class="demo-label">程序：</span>
-          <span class="demo-value">{{ demoProgramType }}</span>
-        </div>
-      </div>
-      <div class="demo-mode-hint">
-        拍摄中...
-      </div>
-    </div>
-  </div>
-
   <!-- 演示配置选择对话框 -->
   <el-dialog v-model="demoDialogVisible" title="选择演示配置" width="500px" :close-on-click-modal="false">
     <el-form label-width="80px">
@@ -284,6 +259,25 @@
     </div>
   </div>
 
+  <!-- 演示模式：左下角状态 -->
+  <div class="demo-mode-loading" v-if="isDemoMode">
+    <span class="demo-mode-spinner"></span>
+    <div class="demo-mode-copy">
+      <div class="demo-mode-title">演示拍摄中</div>
+      <div class="demo-mode-desc">{{ demoGoodsArtNo }} · {{ demoProgramLabel }}</div>
+      <div class="demo-mode-hint">拍完后自动开始下一轮</div>
+    </div>
+    <el-button
+      class="demo-mode-stop"
+      type="danger"
+      size="small"
+      :loading="demoStopping"
+      @click="stopDemoMode"
+    >
+      停止
+    </el-button>
+  </div>
+
   <!-- 常用操作悬浮按钮 -->
   <div class="shot-fab" v-if="!isDemoMode" :class="{ open: fabOpen }">
     <div v-if="fabOpen" class="shot-fab-mask" @click="fabOpen = false"></div>
@@ -382,6 +376,8 @@ const {
   onDemoProgramTypeChange,
 } = usePhotography()
 
+const demoProgramLabel = computed(() => demoProgramType.value.replace(/^执行/, ''))
+
 const headerMenu = computed(() => {
   const items: any[] = []
   for (const item of menu.value || []) {
@@ -671,88 +667,71 @@ watch(goodsList, () => {
 </style>
 
 <style scoped lang="scss">
-// 演示模式全屏遮罩
-.demo-mode-overlay {
+.demo-mode-loading {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.85);
-  z-index: 9999;
+  left: 24px;
+  bottom: 24px;
+  z-index: 2000;
   display: flex;
   align-items: center;
-  justify-content: center;
-
-  .demo-mode-content {
-    text-align: center;
-    color: #fff;
+  gap: 10px;
+  width: 280px;
+  padding: 10px 12px;
+  background: #fff;
+  border: 1px solid #e6eefc;
+  border-radius: 8px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
 
-    .demo-mode-header {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 30px;
-      margin-bottom: 40px;
-
-      .demo-mode-tag {
-        font-size: 48px;
-        font-weight: bold;
-        color: #FFD700;
-        text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
-        animation: pulse 2s infinite;
-      }
+.demo-mode-spinner {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  border: 2px solid #d6e4ff;
+  border-top-color: #1677ff;
+  border-radius: 50%;
+  animation: demo-spin 0.8s linear infinite;
+}
 
-      .el-button {
-        width: 200px;
-        height: 50px;
-        font-size: 18px;
-      }
-    }
+.demo-mode-copy {
+  flex: 1;
+  min-width: 0;
 
-    .demo-mode-info {
-      display: flex;
-      flex-direction: column;
-      gap: 15px;
-      margin-bottom: 40px;
-      font-size: 20px;
+  .demo-mode-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: #1677ff;
+    line-height: 18px;
+  }
 
-      .demo-info-item {
-        .demo-label {
-          color: #aaa;
-        }
-        .demo-value {
-          color: #fff;
-          font-weight: 500;
-        }
-      }
-    }
+  .demo-mode-desc,
+  .demo-mode-hint {
+    margin-top: 2px;
+    font-size: 12px;
+    line-height: 16px;
+    color: #666;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
-    .demo-mode-hint {
-      font-size: 24px;
-      color: #67C23A;
-      animation: blink 1.5s infinite;
-    }
+  .demo-mode-hint {
+    color: #999;
   }
 }
 
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.8;
-    transform: scale(1.05);
-  }
+.demo-mode-stop {
+  flex-shrink: 0;
+  height: 28px;
+  padding: 0 10px;
+  margin: 0;
 }
 
-@keyframes blink {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
+@keyframes demo-spin {
+  to {
+    transform: rotate(360deg);
   }
 }