refactor: 重构组件逻辑与样式优化

- 在 App.vue 中重构站点信息的获取与应用逻辑，提升代码可读性与维护性。
- 更新 Search.vue 组件，优化搜索框的样式与结构，增强用户体验。
- 在 element.scss 中注释掉不再使用的样式，并新增确认收货按钮的样式。
- 改进多个页面的布局与样式，确保响应式设计的一致性与美观性。
- 更新订单相关组件的按钮样式，提升视觉一致性与可用性。

manager/src/components/lili/upload-pic-thumb.vue

@@ -1,15 +1,8 @@
 <template>
   <div>
     <div class="upload-pic-thumb">
-      <vuedraggable
-        :list="uploadList"
-        :disabled="!draggable || !multiple"
-        :animation="200"
-        class="list-group"
-        ghost-class="thumb-ghost"
-        @end="onEnd"
-      >
-        <div v-for="(item, index) in uploadList" :key="index" class="upload-list">
+      <div v-if="!multiple" class="list-group">
+        <div v-for="item in uploadList" :key="draggableItemKey(item)" class="upload-list">
           <div v-if="item.status == 'finished'" style="height: 60px">
             <img :src="item.url" alt="" />
             <div class="upload-list-cover">
@@ -25,19 +18,47 @@
             />
           </div>
         </div>
+      </div>
+      <vuedraggable
+        v-else
+        v-model="uploadList"
+        :disabled="!draggable"
+        :animation="200"
+        class="list-group"
+        ghost-class="thumb-ghost"
+        :item-key="draggableItemKey"
+        @end="onEnd"
+      >
+        <template #item="{ element: item }">
+          <div class="upload-list">
+            <div v-if="item.status == 'finished'" style="height: 60px">
+              <img :src="item.url" alt="" />
+              <div class="upload-list-cover">
+                <el-icon class="action-icon" @click="handleView(item.url)"><View /></el-icon>
+                <el-icon class="action-icon" @click="handleRemove(item)"><Delete /></el-icon>
+              </div>
+            </div>
+            <div v-else>
+              <el-progress
+                v-if="item.showProgress"
+                :percentage="item.percentage"
+                :show-text="false"
+              />
+            </div>
+          </div>
+        </template>
       </vuedraggable>
       <el-upload
         ref="upload"
+        class="upload-box"
         :action="uploadFileUrl"
         :headers="accessToken"
         :multiple="multiple"
         :show-file-list="false"
         accept=".jpg,.jpeg,.png,.gif"
-        drag
         :before-upload="handleBeforeUpload"
         :on-success="handleSuccess"
         :on-error="handleError"
-        style="display: inline-block; width: 58px"
       >
         <div class="upload-trigger">
           <el-icon :size="20"><Camera /></el-icon>
@@ -99,6 +120,9 @@ export default {
     },
   },
   methods: {
+    draggableItemKey(item) {
+      return item.url || item.uid || item.name;
+    },
     onEnd() {
       this.returnValue();
     },
@@ -265,12 +289,29 @@ export default {
   opacity: 0.5;
   background: #c8ebfb;
 }
+.upload-box {
+  display: inline-block;
+  vertical-align: middle;
+
+  :deep(.el-upload) {
+    display: inline-block;
+    vertical-align: top;
+  }
+}
 .upload-trigger {
-  width: 58px;
-  height: 58px;
-  line-height: 58px;
+  width: 60px;
+  height: 60px;
+  border: 1px dashed #dcdfe6;
+  border-radius: 4px;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--el-color-primary);
+    color: var(--el-color-primary);
+  }
 }
 </style>