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

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

buyer/src/utils/message.js

@@ -1,4 +1,30 @@
-import { ElMessage, ElMessageBox } from "element-plus";
+import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
+
+let loadingInstance = null;
+
+export const Spin = {
+  show(options = {}) {
+    Spin.hide();
+    const config =
+      typeof options === "string"
+        ? { text: options }
+        : options && typeof options === "object"
+          ? options
+          : {};
+    loadingInstance = ElLoading.service({
+      lock: true,
+      text: config.text || "加载中...",
+      background: config.background || "rgba(255, 255, 255, 0.7)",
+      ...config,
+    });
+  },
+  hide() {
+    if (loadingInstance) {
+      loadingInstance.close();
+      loadingInstance = null;
+    }
+  },
+};
 
 export const Message = {
   success(content) {
@@ -53,6 +79,17 @@ export const Modal = {
         }
       });
   },
+  warning(options = {}) {
+    const content = options.content || options.title || "";
+    return ElMessageBox.alert(content, options.title || "提示", {
+      confirmButtonText: options.okText || "确定",
+      type: "warning",
+    }).then(() => {
+      if (typeof options.onOk === "function") {
+        return options.onOk();
+      }
+    });
+  },
   remove() {
     ElMessageBox.close();
   },
@@ -68,4 +105,5 @@ export function setupLegacyMessage(app) {
   app.config.globalProperties.$Message = Message;
   app.config.globalProperties.$Modal = Modal;
   app.config.globalProperties.$Notice = Notice;
+  app.config.globalProperties.$Spin = Spin;
 }