feat: 新增全局布局样式并提升组件响应式表现

- 在 global-layout.scss 中引入全局布局样式，统一页面宽度与对齐方式
- 更新多个组件与页面以优化响应式，包括宽度、间距及 flex 布局等调整
- 在 API 请求中增加 loading 状态管理，改善用户体验
- 优化领券中心与商品详情页，提升功能与 UI 一致性

manager/src/components/editor/upload-image.vue

@@ -4,28 +4,31 @@
     <el-dialog v-model="show" width="850px" title="上传图片" append-to-body :z-index="3500">
       <div class="import-oss" @click="importOSS">从资源库中导入</div>
       <div style="display: flex; flex-wrap: wrap">
-        <vuedraggable :animation="200" :list="images">
-          <div
-            v-for="(item, __index) in images"
-            :key="__index"
-            class="upload-list"
-          >
-            <img alt="image" :src="item.url" />
-            <div class="upload-list-cover">
-              <div>
-                <el-icon class="action-icon" :size="30" @click="handleView(item.url)">
-                  <ZoomIn />
-                </el-icon>
-                <el-icon
-                  class="action-icon"
-                  :size="30"
-                  @click="handleRemoveGoodsPicture(__index)"
-                >
-                  <Delete />
-                </el-icon>
+        <vuedraggable
+          v-model="images"
+          :animation="200"
+          :item-key="draggableItemKey"
+          style="display: flex; flex-wrap: wrap"
+        >
+          <template #item="{ element, index }">
+            <div class="upload-list">
+              <img alt="image" :src="element.url" />
+              <div class="upload-list-cover">
+                <div>
+                  <el-icon class="action-icon" :size="30" @click="handleView(element.url)">
+                    <ZoomIn />
+                  </el-icon>
+                  <el-icon
+                    class="action-icon"
+                    :size="30"
+                    @click="handleRemoveGoodsPicture(index)"
+                  >
+                    <Delete />
+                  </el-icon>
+                </div>
               </div>
             </div>
-          </div>
+          </template>
         </vuedraggable>
         <div class="upload-box">
           <el-upload
@@ -58,17 +61,16 @@
       append-to-body
       :z-index="3600"
       destroy-on-close
-      @closed="confirmUrls"
+      @closed="resetOssSelection"
     >
       <OssManage
         ref="ossManage"
         :is-component="true"
         :initialize="showOssManager"
-        @selected="(list) => { selectedImage = list }"
-        @callback="handleCallback"
+        @selected="handleOssSelected"
       />
       <template #footer>
-        <el-button @click="showOssManager = false">取消</el-button>
+        <el-button @click="cancelOssImport">取消</el-button>
         <el-button type="primary" @click="confirmUrls">确定</el-button>
       </template>
     </el-dialog>
@@ -114,6 +116,9 @@ export default {
     };
   },
   methods: {
+    draggableItemKey(item) {
+      return item?.url || item;
+    },
     handleClickUploadImage() {
       this.show = true;
     },
@@ -153,13 +158,39 @@ export default {
       this.$Message.error(err?.message || String(err));
     },
     confirmUrls() {
+      this.applySelectedImages();
       this.showOssManager = false;
     },
-    handleCallback(val) {
-      this.$Message.success("导入成功");
-      this.images.push({ url: val.url });
+    cancelOssImport() {
+      this.selectedImage = [];
+      this.showOssManager = false;
+    },
+    resetOssSelection() {
+      this.selectedImage = [];
+    },
+    handleOssSelected(list) {
+      this.selectedImage = Array.isArray(list) ? list : [];
+    },
+    parseOssSelectionUrl(item) {
+      if (!item) {
+        return "";
+      }
+      if (typeof item === "string") {
+        const index = item.indexOf(",");
+        return index >= 0 ? item.slice(index + 1) : item;
+      }
+      return item.url || "";
+    },
+    applySelectedImages() {
+      (this.selectedImage || []).forEach((item) => {
+        const url = this.parseOssSelectionUrl(item);
+        if (url) {
+          this.images.push({ url });
+        }
+      });
     },
     importOSS() {
+      this.selectedImage = [];
       this.showOssManager = true;
       this.$nextTick(() => {
         if (this.$refs.ossManage) {

manager/src/components/hotzone/components/Zone.vue

@@ -159,8 +159,12 @@ export default {
     },
     // 选择图片
     handleSelectImg() {
-      this.$refs.ossManage.selectImage = true;
       this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
     },
     // 选择图片回调
     callbackSelected(item) {

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

@@ -112,10 +112,14 @@ export default {
   },
   methods: {
     handleCLickImg(val, index) {
-      this.$refs.ossManage.selectImage = true;
       this.picModalFlag = true;
       this.selectedFormBtnName = val;
       this.picIndex = index;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
     },
     callbackSelected(val) {
       this.picModalFlag = false;