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

- 在 global-layout.scss 中引入全局布局样式，统一页面宽度与对齐方式 - 更新多个组件与页面以优化响应式，包括宽度、间距及 flex 布局等调整 - 在 API 请求中增加 loading 状态管理，改善用户体验 - 优化领券中心与商品详情页，提升功能与 UI 一致性
2026-08-06 19:07:25 +08:00 · 2026-06-23 10:17:35 +08:00
parent c1447b4376
commit 8a60e23214
129 changed files with 5236 additions and 2232 deletions
--- a/manager/src/views/goods/goods-info/goods.vue
+++ b/manager/src/views/goods/goods-info/goods.vue
@@ -81,8 +81,8 @@
      <div class="goods-tab">
        <el-tabs v-model="currentStatus" @tab-click="onStatusTabClick">
          <el-tab-pane
-            v-for="(item, index) in goodsStatusWithCount"
-            :key="index"
+            v-for="item in goodsStatusWithCount"
+            :key="item.value"
            :label="item.title"
            :name="item.value"
          />
@@ -126,6 +126,7 @@

      <el-table
        ref="table"
+        :key="currentStatus"
        v-loading="loading"
        :data="data"
        class="mt_10"
@@ -223,7 +224,13 @@
      </template>
    </el-dialog>

-    <el-dialog v-model="auditModalVisible" title="商品审核" width="500px" :close-on-click-modal="false">
+    <el-dialog
+      v-model="auditModalVisible"
+      title="商品审核"
+      width="500px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
      <el-form ref="auditForm" :model="goodsAuditForm" label-width="100px">
        <el-form-item label="审核结果" prop="auth_flag">
          <el-radio-group v-model="goodsAuditForm.auth_flag">
@@ -234,7 +241,7 @@
      </el-form>
      <template #footer>
        <el-button @click="auditModalVisible = false">取消</el-button>
-        <el-button type="primary" @click="confirmAudit">提交审核</el-button>
+        <el-button type="primary" :loading="auditSubmitLoading" @click="submitAudit">提交审核</el-button>
      </template>
    </el-dialog>

@@ -243,6 +250,7 @@
      title="批量商品审核"
      width="500px"
      :close-on-click-modal="false"
+      destroy-on-close
    >
      <el-form ref="batchAuditForm" :model="batchAuditForm" label-width="100px">
        <el-form-item label="审核结果" prop="auth_flag">
@@ -251,7 +259,7 @@
            <el-radio :value="2">审核拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
-        <el-form-item v-if="batchAuditForm.auth_flag === 2" label="审核备注" prop="reason">
+        <el-form-item v-show="batchAuditForm.auth_flag === 2" label="审核备注" prop="reason">
          <el-input v-model="batchAuditForm.reason" type="textarea" :rows="3" placeholder="请输入拒绝原因" />
        </el-form-item>
        <el-form-item label="选中商品">
@@ -262,7 +270,7 @@
      </el-form>
      <template #footer>
        <el-button @click="batchAuditModalVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitBatchAudit">提交审核</el-button>
+        <el-button type="primary" :loading="batchAuditSubmitLoading" @click="submitBatchAudit">提交审核</el-button>
      </template>
    </el-dialog>

@@ -321,6 +329,7 @@ export default {
        auth_flag: 1,
      },
      auditModalVisible: false, // 审核弹框显示状态
+      auditSubmitLoading: false,
      currentAuditGoods: null, // 当前审核的商品
      submitLoading: false, // 添加或编辑提交状态
      data: [], // 表单数据
@@ -330,6 +339,7 @@ export default {
      selectedRows: [], // 选中的行数据
      selectAll: false, // 全选状态
      batchAuditModalVisible: false, // 批量审核弹框显示状态
+      batchAuditSubmitLoading: false,
      batchAuditForm: {
        auth_flag: 1,
        reason: ''
@@ -361,7 +371,8 @@ export default {
      this.$refs.table?.clearSelection?.();
    },
    onStatusTabClick(tab) {
-      this.goodsStatusClick(tab.paneName);
+      const status = tab.paneName ?? tab.props?.name;
+      this.goodsStatusClick(status);
    },
    salesModelText(v) {
      if (v === "RETAIL") return "零售";
@@ -532,35 +543,28 @@ export default {
      this.currentAuditGoods = goods;
      this.goodsAuditForm.auth_flag = 1;
      this.goodsAuditForm.reason = '';
+      this.auditSubmitLoading = false;
      this.auditModalVisible = true;
    },

-    // 确认审核（二次确认）
-    confirmAudit() {
-      const auditText = this.goodsAuditForm.auth_flag === 1 ? '通过' : '拒绝';
-      this.$Modal.confirm({
-        title: '确认审核',
-        content: `您确认要审核${auditText} "${this.currentAuditGoods.goodsName}" 吗？`,
-        loading: true,
-        onOk: () => {
-          this.submitAudit();
-        },
-      });
-    },
-
    // 提交审核
    submitAudit() {
-      let formData = new FormData();
+      if (!this.currentAuditGoods) {
+        return;
+      }
+      this.auditSubmitLoading = true;
+      const formData = new FormData();
      formData.append('goodsIds', this.currentAuditGoods.id);
      formData.append('authFlag', this.goodsAuditForm.auth_flag === 1 ? 'PASS' : 'REFUSE');
      authGoods(formData).then((res) => {
-        this.$Modal.remove();
        if (res.success) {
          this.$Message.success('审核成功');
          this.auditModalVisible = false;
          this.getDataList();
          this.getNumberData();
        }
+      }).finally(() => {
+        this.auditSubmitLoading = false;
      });
    },

@@ -668,36 +672,27 @@ export default {
      }

      const actionText = this.batchAuditForm.auth_flag === 1 ? '通过' : '拒绝';
-      const goodsNames = this.selectedRows.map(item => item.goodsName).join('、');
+      const goodsIds = this.selectedRows.map(item => item.id);
+      const formData = new FormData();
+      formData.append('goodsIds', goodsIds.join(','));
+      formData.append('authFlag', this.batchAuditForm.auth_flag === 1 ? 'PASS' : 'REFUSE');
+      if (this.batchAuditForm.reason) {
+        formData.append('reason', this.batchAuditForm.reason);
+      }

-      this.$Modal.confirm({
-        title: `确认批量审核${actionText}`,
-        content: `您确认要${actionText}以下商品的审核吗？\n${goodsNames}`,
-        loading: true,
-        onOk: () => {
-          // 提取所有选中商品的ID
-          const goodsIds = this.selectedRows.map(item => item.id);
-
-          let formData = new FormData();
-          formData.append('goodsId', goodsIds);
-          formData.append('authFlag', this.batchAuditForm.auth_flag === 1 ? 'PASS' : 'REFUSE');
-          formData.append('reason', this.batchAuditForm.reason || '');
-
-          // 修正：直接调用authGoods，不传递'batch'参数
-          authGoods(formData).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success(`批量审核${actionText}成功`);
-              this.selectedRows = [];
-              this.selectAll = false;
-              this.batchAuditModalVisible = false;
-              this.getDataList();
-              this.getNumberData();
-            }
-          }).catch(() => {
-            this.$Modal.remove();
-          });
+      this.batchAuditSubmitLoading = true;
+      authGoods(formData).then((res) => {
+        if (res.success) {
+          this.$Message.success(`批量审核${actionText}成功`);
+          this.selectedRows = [];
+          this.selectAll = false;
+          this.batchAuditModalVisible = false;
+          this.clearTableSelection();
+          this.getDataList();
+          this.getNumberData();
        }
+      }).finally(() => {
+        this.batchAuditSubmitLoading = false;
      });
    },
    loadGoodsGroupList() {
--- a/manager/src/views/goods/goods-info/goodsApply.vue
+++ b/manager/src/views/goods/goods-info/goodsApply.vue
@@ -166,13 +166,11 @@ export default {
      this.$Modal.confirm({
        title: "确认审核",
        content: `您确认要审核${examine} ${v.goodsName} ?`,
-        loading: true,
        onOk: () => {
          const formData = new FormData();
          formData.append("goodsIds", v.id);
          formData.append("authFlag", this.goodsAuditForm.authFlag);
-          authGoods(formData).then((res) => {
-            this.$Modal.remove();
+          return authGoods(formData).then((res) => {
            if (res.success) {
              this.$Message.success("审核成功");
              this.getDataList();
--- a/manager/src/views/goods/goods-info/goodsDetail.vue
+++ b/manager/src/views/goods/goods-info/goodsDetail.vue
@@ -107,11 +107,11 @@
          </div>
          <h4>商品详情描述</h4>
          <div class="form-item-view">
-            <el-form-item label="商品描述">
-              <div v-html="goods.intro"></div>
+            <el-form-item class="goods-desc-item" label="商品描述">
+              <div class="goods-desc-content" v-html="goods.intro"></div>
            </el-form-item>
-            <el-form-item label="移动端描述">
-              <div v-html="goods.mobileIntro"></div>
+            <el-form-item class="goods-desc-item" label="移动端描述">
+              <div class="goods-desc-content" v-html="goods.mobileIntro"></div>
            </el-form-item>
          </div>
        </div>
@@ -179,6 +179,30 @@ div.base-info-item {
  .form-item-view {
    padding-left: 80px;
  }
+
+  .goods-desc-item {
+    align-items: flex-start;
+  }
+
+  .goods-desc-item .el-form-item__label {
+    line-height: 24px;
+    padding-top: 0;
+  }
+
+  .goods-desc-item .el-form-item__content {
+    align-items: flex-start;
+    line-height: 24px;
+  }
+
+  .goods-desc-content {
+    line-height: 24px;
+    text-align: left;
+    word-break: break-word;
+  }
+
+  .goods-desc-content > :first-child {
+    margin-top: 0;
+  }
 }

 .demo-upload-list {
--- a/manager/src/views/goods/goods-manage/brand.vue
+++ b/manager/src/views/goods/goods-manage/brand.vue
@@ -203,8 +203,12 @@ export default {
  },
  methods: {
    openLogoPicker() {
-      this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.ossManage) {
+          this.$refs.ossManage.selectImage = true;
+        }
+      });
    },
    callbackSelected(val) {
      this.picModelFlag = false;
--- a/manager/src/views/goods/goods-manage/category.vue
+++ b/manager/src/views/goods/goods-manage/category.vue
@@ -62,7 +62,7 @@
        :close-on-click-modal="false"
        destroy-on-close
      >
-        <el-form ref="form" :model="formAdd" label-width="100px" :rules="formValidate">
+        <el-form ref="form" :model="formAdd" label-width="110px" :rules="formValidate">
          <el-form-item v-if="showParent" label="上级分类" prop="parentId">
            {{ parentTitle }}
            <el-input v-model="formAdd.parentId" style="display: none" />
@@ -79,7 +79,8 @@
          <el-form-item label="排序值" prop="sortOrder">
            <el-input-number v-model="formAdd.sortOrder" style="width: 200px" />
          </el-form-item>
-          <el-form-item label="佣金比例(%)" prop="commissionRate">
+          <el-form-item prop="commissionRate" class="commission-rate-item">
+            <template #label>佣金比例(%)</template>
            <el-input-number v-model="formAdd.commissionRate" :min="0" :max="100" style="width: 200px" />
          </el-form-item>
          <el-form-item label="是否启用" prop="deleteFlag">
@@ -451,4 +452,7 @@ export default {
 .mb_10 {
  margin-bottom: 10px;
 }
+.commission-rate-item :deep(.el-form-item__label) {
+  white-space: nowrap;
+}
 </style>
--- a/manager/src/views/goods/goods-review/index.vue
+++ b/manager/src/views/goods/goods-review/index.vue
@@ -90,7 +90,7 @@
      </div>
    </el-card>

-    <el-dialog v-model="infoFlag" :title="infoTitle" width="800px">
+    <el-dialog v-model="infoFlag" :title="infoTitle" width="800px" @closed="onInfoDialogClosed">
      <div class="info-list" style="overflow: hidden">
        <div class="left-container">
          <div class="product">
@@ -99,6 +99,7 @@
          <div class="show">
            <label>页面展示：</label>
            <el-switch
+              v-if="detailStatusReady"
              v-model="infoData.status"
              active-value="OPEN"
              inactive-value="CLOSE"
@@ -179,6 +180,8 @@ export default {
      infoData: {},
      infoFlag: false,
      infoTitle: "",
+      currentReviewId: "",
+      detailStatusReady: false,
      loading: true,
      searchForm: {
        pageNumber: 1,
@@ -204,11 +207,15 @@ export default {
      if (grade === "MODERATE") return "中评";
      return "差评";
    },
-    changeSwitchView(val) {
-      const status = val;
-      API_Member.updateMemberReview(this.infoData.id, { status }).then(() => {
-        this.$Message.success("修改成功!");
-        this.init();
+    changeSwitchView(status) {
+      if (!this.detailStatusReady || !this.currentReviewId) {
+        return;
+      }
+      API_Member.updateMemberReview(this.currentReviewId, { status }).then((res) => {
+        if (res.success) {
+          this.$Message.success("修改成功!");
+          this.getDataList();
+        }
      });
    },
    init() {
@@ -227,10 +234,14 @@ export default {
      this.searchForm.pageSize = 20;
      this.getDataList();
    },
-    changeSwitch(v) {
-      const status = v.status;
-      API_Member.updateMemberReview(v.id, { status }).then(() => {
-        this.init();
+    changeSwitch(row) {
+      if (!row || !row.id) {
+        return;
+      }
+      API_Member.updateMemberReview(row.id, { status: row.status }).then((res) => {
+        if (res.success) {
+          this.getDataList();
+        }
      });
    },
    updateTop(v) {
@@ -264,14 +275,25 @@ export default {
      this.loading = false;
    },
    info(v) {
+      this.currentReviewId = v.id;
+      this.detailStatusReady = false;
+      this.infoData = {};
      this.infoFlag = true;
      this.infoTitle = `用户${v.memberName}的评价详情`;
      API_Member.getMemberInfoReview(v.id).then((res) => {
        if (res.result) {
          this.infoData = res.result;
+          this.$nextTick(() => {
+            this.detailStatusReady = true;
+          });
        }
      });
    },
+    onInfoDialogClosed() {
+      this.detailStatusReady = false;
+      this.currentReviewId = "";
+      this.infoData = {};
+    },
    remove(v) {
      this.$Modal.confirm({
        title: "确认删除",