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

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

manager/src/views/sys/oss-manage/ossManage.scss

@@ -161,6 +161,9 @@
       box-sizing: border-box;
       margin: 0 13px 8px;
       position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       .card {
         width: 120px;
         height: 120px;
@@ -172,12 +175,19 @@
         img {
           width: 100%;
           height: 100%;
+          object-fit: cover;
         }
-        .checkbox {
+        .card-checkbox {
           position: absolute;
-          top: 10px;
-          right: 10px;
+          top: 8px;
+          right: 8px;
           z-index: 1000;
+          height: auto;
+          margin: 0;
+
+          :deep(.el-checkbox__label) {
+            display: none;
+          }
         }
         .preview {
           width: 100%;
@@ -226,35 +236,6 @@
     display: flex;
     flex-direction: row-reverse;
   }
-  /* Checkbox默认的样式 */
-  .check-box {
-    .ivu-checkbox {
-      position: absolute;
-      right: 10px;
-      top: 10px;
-      z-index: 100;
-    }
-  }
-  /* 覆盖iView默认的Checkbox样式 */
-  .ivu-checkbox-wrapper {
-    /*font-size: 16px; !* 修改字体大小 *!*/
-    /*color: #495060; !* 修改文本颜色 *!*/
-    /* 添加其他需要的样式 */
-  }
-  .ivu-checkbox-inner {
-    /*width: 20px; !* 修改选框大小 *!*/
-    /*height: 20px;*/
-    /*border-color: #dcdee2; !* 修改边框颜色 *!*/
-    /* 添加其他需要的样式 */
-  }
-  /* 当Checkbox被选中时的样式 */
-  .ivu-checkbox-checked .ivu-checkbox-inner {
-    /*background-color: #2db7f5; !* 修改选中时的背景颜色 *!*/
-  }
-  /* 当Checkbox不可用时的样式 */
-  .ivu-checkbox-disabled .ivu-checkbox-inner {
-    /*background-color: #e9e9e9; !* 修改禁用状态下的背景颜色 *!*/
-  }
 
   .demo-tree-render .ivu-tree-title{
     width: 94%;

manager/src/views/sys/oss-manage/ossManage.vue

@@ -35,6 +35,15 @@
   }
 }
 
+.oss-select-footer {
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #ededed;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
 .tab-empty {
   padding: 48px 0;
   color: #999;
@@ -59,6 +68,10 @@
   padding: 0 4px;
 }
 
+.oss-manage-date-popper {
+  z-index: 4000 !important;
+}
+
 </style>
 <template>
   <div class="search">
@@ -86,6 +99,8 @@
                   <el-date-picker
                     v-model="selectDate"
                     clearable
+                    teleported
+                    popper-class="oss-manage-date-popper"
                     value-format="YYYY-MM-DD"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期"
@@ -165,37 +180,39 @@
                   <el-checkbox-group v-model="selectedOss" @change="selectOssChange">
                     <div class="img-box">
                       <div v-for="(item, index) in data" :key="index" class="img-item">
-                        <el-checkbox :value="item.id + ',' + item.url" class="check-box">
-                          <div
-                            class="card"
-                            @mouseenter="onMouseOver(item, index)"
-                            @mouseleave="onMouseOut(item, index)"
-                          >
-                            <img :src="item.url" alt="" />
-                            <div v-if="item.isShowPreview" class="preview">
-                              <div @click.prevent="download(item)">
-                                <el-tooltip content="下载" placement="top">
-                                  <el-icon :size="18"><Download /></el-icon>
-                                </el-tooltip>
-                              </div>
-                              <div @click.prevent="remove(item)">
-                                <el-tooltip content="删除" placement="top">
-                                  <el-icon :size="18"><Delete /></el-icon>
-                                </el-tooltip>
-                              </div>
-                              <div @click.prevent="showPic(item)">
-                                <el-tooltip content="预览" placement="top">
-                                  <el-icon :size="22"><View /></el-icon>
-                                </el-tooltip>
-                              </div>
+                        <div
+                          class="card"
+                          :class="{ 'custom-checkbox-card-checked': selectedOss.includes(item.id + ',' + item.url) }"
+                          @mouseenter="onMouseOver(item, index)"
+                          @mouseleave="onMouseOut(item, index)"
+                        >
+                          <el-checkbox
+                            :value="item.id + ',' + item.url"
+                            class="card-checkbox"
+                            @click.stop
+                          />
+                          <img :src="item.url" alt="" />
+                          <div v-if="item.isShowPreview" class="preview">
+                            <div @click.prevent="download(item)">
+                              <el-tooltip content="下载" placement="top">
+                                <el-icon :size="18"><Download /></el-icon>
+                              </el-tooltip>
+                            </div>
+                            <div @click.prevent="remove(item)">
+                              <el-tooltip content="删除" placement="top">
+                                <el-icon :size="18"><Delete /></el-icon>
+                              </el-tooltip>
+                            </div>
+                            <div @click.prevent="showPic(item)">
+                              <el-tooltip content="预览" placement="top">
+                                <el-icon :size="22"><View /></el-icon>
+                              </el-tooltip>
                             </div>
                           </div>
-                        </el-checkbox>
-                        <div>
-                          <el-tooltip :content="item.name" placement="bottom">
-                            <div class="text">{{ item.name }}</div>
-                          </el-tooltip>
                         </div>
+                        <el-tooltip :content="item.name" placement="bottom">
+                          <div class="text">{{ item.name }}</div>
+                        </el-tooltip>
                       </div>
                     </div>
                   </el-checkbox-group>
@@ -210,6 +227,10 @@
                     @current-change="pageChange"
                   />
                 </div>
+                <div v-if="isComponent && selectImage" class="oss-select-footer">
+                  <el-button @click="handleSelectCancel">取消</el-button>
+                  <el-button type="primary" @click="handleSelectConfirm">确定</el-button>
+                </div>
               </div>
             </el-col>
           </el-row>
@@ -488,6 +509,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    maxSelect: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {
@@ -954,8 +979,8 @@ export default {
       if (val) this.selectImage = val
     },
     selectedOss(val) {
-      if (val && val.length) {
-        this.$emit("callback", {url: val[val.length - 1].split(',')[1]});
+      if (val && val.length && !(this.isComponent && this.selectImage)) {
+        this.$emit("callback", { url: val[val.length - 1].split(",")[1] });
       }
     },
     // 初始化监听 是否清空所选图片
@@ -1062,6 +1087,11 @@ export default {
     },
     // 复选框值改变时触发
     selectOssChange(e) {
+      if (this.maxSelect === 1 && e.length > 1) {
+        const last = e[e.length - 1];
+        this.selectedOss = [last];
+        e = [last];
+      }
       if (e) {
         this.selectList = e.map(item => {
           return {id: item.split(',')[0]}
@@ -1291,6 +1321,18 @@ export default {
     selectedParams(val) {
       this.$emit("callback", val);
     },
+    handleSelectConfirm() {
+      if (!this.selectedOss.length) {
+        this.$Message.warning("请选择图片");
+        return;
+      }
+      const last = this.selectedOss[this.selectedOss.length - 1];
+      this.$emit("callback", { url: last.split(",")[1] });
+    },
+    handleSelectCancel() {
+      this.selectedOss = [];
+      this.$emit("callback", { url: "" });
+    },
     // 初始化数据
     init() {
       this.accessToken = {