From 22f3e9b5e9cc7cee1a0af6102b6bb59ee251673d Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Mon, 2 Nov 2026 16:53:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor(after-sale):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=94=AE=E5=90=8E=E5=8D=95=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E4=B8=BA=E7=8E=B0=E4=BB=A3=E5=8C=96=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将页面从简单的 dl/dd 结构重构为基于 Element Plus 的卡片式两栏布局
- 新增顶部导航栏与状态看板，集成可视化流程步骤条
- 使用 el-descriptions 和 el-form 替代原有手写表单结构
- 添加动态步骤计算逻辑，支持仅退款和退货退款两种流程
- 新增复制单号、卡号格式化、跳转关联订单等辅助功能
- 物流弹窗改用 el-timeline 展示轨迹，优化请求时机为数据加载后打开
- 完善表单校验与操作 loading 状态，增加异常捕获处理
- 样式改为 scoped 并全面升级视觉设计
---
 manager/src/api/setting.js                    |  317 ++--
 manager/src/libs/lazyLoading.js               |    1 +
 manager/src/router/router.js                  |   14 +
 .../message-manage/weChatMessageManager.vue   |  283 ----
 manager/src/views/order/order/orderDetail.vue | 1280 ++++++++++-------
 .../setting-manage/pay/PAYMENT_SUPPORT.vue    |  161 +--
 .../setting-manage/setting/BASE_SETTING.vue   |  187 +--
 .../setting-manage/setting/LIVE_SETTING.vue   |  120 +-
 .../setting-manage/setting/POINT_SETTING.vue  |  149 +-
 .../setting-manage/setting/SMS_SETTING.vue    |  191 ++-
 .../setting/WITHDRAWAL_SETTING.vue            |    1 +
 11 files changed, 1398 insertions(+), 1306 deletions(-)
 delete mode 100644 manager/src/views/member/message-manage/weChatMessageManager.vue

diff --git a/manager/src/api/setting.js b/manager/src/api/setting.js
index c021b57cd..f0634e51a 100644
--- a/manager/src/api/setting.js
+++ b/manager/src/api/setting.js
@@ -22,37 +22,11 @@ export const editNoticeMessage = (id, params) => {
 export const wechatMessageSync = (params) => {
   return getRequest("/wechat/wechatMessage/init", params)
 }
-//分页获取微信消息
-export const getWechatMessagePage = (params) => {
-  return getRequest("/wechat/wechatMessage", params)
-}
-//编辑微信消息模版
-export const editWechatMessageTemplate = (id, params) => {
-  return putRequest(`/wechat/wechatMessage/${id}`, params)
-}
-//删除微信消息模版
-export const delWechatMessageTemplate = (id, params) => {
-  return deleteRequest(`/wechat/wechatMessage/${id}`, params)
-}
 
-
-//微信消息订阅同步
+//微信消息码同步
 export const wechatMPMessageSync = (params) => {
   return getRequest("/wechat/wechatMPMessage/init", params)
 }
-//分页获取微信消息订阅
-export const getWechatMPMessagePage = (params) => {
-  return getRequest("/wechat/wechatMPMessage", params)
-}
-//编辑微信消息订阅模版
-export const editWechatMPMessageTemplate = (id, params) => {
-  return putRequest(`/wechat/wechatMPMessage/${id}`, params)
-}
-//删除微信消息订阅模版
-export const delWechatMPMessageTemplate = (id, params) => {
-  return deleteRequest(`/wechat/wechatMPMessage/${id}`, params)
-}
-
 
 
 // 查询站内信模板信息
@@ -73,120 +47,135 @@ export const updateMessageStatus = (id,status) => {
 };
 //获取短信模板
 export const getSmsTemplatePage = (params) => {
-  return getRequest(`sms/template/querySmsTemplatePage`, params);
+  return getRequest("/sms/sms/template", params);
 };
-//添加短信模板
-export const addSmsTemplatePage = (params) => {
-  return postRequest(`sms/template`, params);
-};
-//删除短信模板
-export const deleteSmsTemplatePage = (params) => {
-  return deleteRequest(`sms/template`, params);
-};
-//删除短信模板
-export const editSmsTemplatePage = (params) => {
-  return putRequest(`sms/template/modifySmsTemplate`, params);
-};
-//分页查询短信签名
+//获取短信签名
 export const getSmsSignPage = (params) => {
-  return getRequest(`sms/sign/querySmsSignPage`, params);
+  return getRequest("/sms/sms/sign", params);
 };
-//更新短信模板
-export const syncTemplate = () => {
-  return putRequest(`sms/template/querySmsSign`);
+//获取设置
+export const getSetting = (key) => {
+  return getRequest(`/setting/setting/get/${key}`);
 };
-//更新短信模板
+//根据类型查看配置信息
+export const getSettingList = (params) => {
+  return getRequest(`/setting/setting/all`, params);
+};
+//设置配置信息
+export const setSetting = (key, params) => {
+  return postRequest(`/setting/setting/put/${key}`, params);
+};
+
+//查看短信签名
+export const getSmsSign = () => {
+  return getRequest(`/sms/sms/sign`);
+};
+//添加短信签名
 export const addSmsSign = (params) => {
-  return postRequest(`sms/sign`, params);
+  return postRequest(`/sms/sms/sign`, params);
 };
-//同步短信签名
-export const syncSign = () => {
-  return putRequest(`sms/sign/querySmsSign`);
+//修改短信签名
+export const editSmsSign = (params) => {
+  return putRequest(`/sms/sms/sign`, params);
 };
 //删除短信签名
-export const deleteSign = (id) => {
-  return deleteRequest(`sms/sign/${id}`);
+export const delSmsSign = (id) => {
+  return deleteRequest(`/sms/sms/sign/${id}`);
 };
-//更新短信签名
-export const editSmsSign = (params) => {
-  return putRequest(`sms/sign/modifySmsSign`, params);
+//添加短信模板
+export const addSmsTemplate = (params) => {
+  return postRequest(`/sms/sms/template`, params);
 };
-//查询签名详情
-export const smsSignDetail = (id) => {
-  return getRequest(`sms/sign/${id}`);
+//修改短信模板
+export const editSmsTemplate = (params) => {
+  return putRequest(`/sms/sms/template`, params);
 };
-
-//分页查询app版本信息
-export const appVersionPage = (params) => {
-  return getRequest(`/other/appVersion`, params);
+//删除短信模板
+export const delSmsTemplate = (id) => {
+  return deleteRequest(`/sms/sms/template/${id}`);
 };
-//添加app版本信息
-export const addVersion = (params) => {
-  return postRequest(`/other/appVersion`, params);
-};
-//修改app版本信息
-export const editVersion = (params, id) => {
-  return putRequest(`/other/appVersion/${id}`, params);
-};
-//删除app版本信息
-export const deleteVersion = (id) => {
-  return deleteRequest(`/other/appVersion/${id}`);
-};
-//查询同城配送列表
-export const getInstantDelivery = (params) => {
-  return getRequest(`instant-delivery/getByPage`, params);
-};
-
-//添加同城配送信息
-export const editInstantDelivery = (bean, params, headers) => {
-  return putRequest(`instant-delivery/${bean}/config`, params, headers);
-};
-//启用配送方案
-export const openInstantDelivery = (bean) => {
-  return putRequest(`instant-delivery/${bean}/open`);
-};
-
-//修改封面图片
-export const editInstantDeliveryImage = (bean, params) => {
-  return putRequest(`instant-delivery/${bean}/image`, params);
-};
-
 //查询短信发送记录
-export const getSmsPage = (params) => {
-  return getRequest(`sms/sms`, params);
+export const getSmsReachPage = (params) => {
+  return getRequest(`/sms/sms`, params);
+};
+//重新发送
+export const repeatSendSms = (id) => {
+  return postRequest(`/sms/sms/repeat/${id}`);
+};
+//获取设置
+export const getExperienceData = (key) => {
+  return getRequest(`/setting/experience/get/${key}`);
+};
+//保存
+export const setExperienceData = (key, params) => {
+  return postRequest(`/setting/experience/put/${key}`, params);
 };
 
-//发送短信
-export const sendSms = (params) => {
-  return postRequest(`sms/sms`, params);
+//根据类型获取积分设置
+export const getPointData = (key) => {
+  return getRequest(`/setting/point/get/${key}`);
+};
+//保存
+export const setPointData = (key, params) => {
+  return postRequest(`/setting/point/put/${key}`, params);
 };
-/*
- * 获取 支付支持设置开关
- */
-export const getPaymentSupportForm = () => {
-  return getRequest(`setting/settingx/paymentSupport`);
-}
 
-//  验证码源文件删除
-export const delVerification = (id) => {
-  return deleteRequest(`/other/verificationSource/${id}`)
-}
+//根据类型获取积分设置
+export const getKuaidiSetting = (key) => {
+  return getRequest(`/setting/kuaidi/get/${key}`);
+};
+//保存
+export const setKuaidiSetting = (key, params) => {
+  return postRequest(`/setting/kuaidi/put/${key}`, params);
+};
 
-//  添加验证码源文件
-export const addVerification = (params) => {
+//获取所有的物流公司
+export const getLogisticsList = () => {
+  return getRequest(`/setting/logistics/all`);
+};
+//分页获取物流公司
+export const getLogisticsPage = (params) => {
+  return getRequest(`/setting/logistics/getByPage`, params);
+};
+//添加物流公司
+export const addLogistics = (params) => {
+  return postRequest(`/setting/logistics`, params);
+};
+//获取物流公司详情
+export const getLogisticsDetail = (id) => {
+  return getRequest(`/setting/logistics/get/${id}`);
+};
+//编辑物流公司
+export const editLogistics = (id, params) => {
+  return putRequest(`/setting/logistics/${id}`, params);
+};
+//删除物流公司
+export const delLogistics = (id) => {
+  return deleteRequest(`/setting/logistics/delete/${id}`);
+};
+
+//禁用启用物流公司
+export const openLogistics = (id) => {
+  return putRequest(`/setting/logistics/open/${id}`);
+};
+
+//获取所有的物流公司
+export const getLogisticsAll = () => {
+  return getRequest(`/setting/logistics/all`);
+};
+
+// 验证码源文件添加
+export const createVerification = (params) => {
   return postRequest(`/other/verificationSource`, params)
 }
-
-//  修改验证码源文件
-export const editVerification = (id, params) => {
+// 验证码源文件修改
+export const updateVerification = (id, params) => {
   return putRequest(`/other/verificationSource/${id}`, params)
 }
-
-// 验证码源文件详情
-export const verificationDetail = (id) => {
-  return getRequest(`/other/verificationSource/${id}`)
+// 验证码源文件删除
+export const deleteVerification = (id) => {
+  return deleteRequest(`/other/verificationSource/${id}`)
 }
-
 // 验证码源文件列表
 export const verificationPage = (params) => {
   return getRequest(`/other/verificationSource`, params)
@@ -197,12 +186,94 @@ export const getNoticeMessageDetail = (id, params) => {
   return getRequest(`/setting/noticeMessage/${id}`, params)
 }
 
-// 消息模板聚合分页（站内信 + 微信服务号 + 小程序）
+// 统一消息模板聚合分页（站内信 + 短信 + 微信服务号 + 小程序订阅）
 export const getMessageTemplateAggregatePage = params => {
-  return getRequest("/setting/noticeMessage/aggregate", params);
+  return getRequest("/setting/messageTemplate/page", params);
 };
 
-// 修改通知类站内信邮箱渠道开关
-export const updateNoticeMessageEmailStatus = (id, status) => {
-  return putRequest(`/setting/noticeMessage/${id}/email/${status}`);
+// 快速切换渠道开关 (channel: NOTICE / SMS / WECHAT_OA / WECHAT_MP, status: OPEN / CLOSE)
+export const updateMessageChannelSwitch = params => {
+  return putRequest("/setting/messageTemplate/switch", params);
+};
+
+// 保存站内信配置 (title, content, status)
+export const updateNoticeMessageTemplate = params => {
+  return putRequest("/setting/messageTemplate/notice", params);
+};
+
+// 保存短信配置 (smsTemplateCode, status; 内容只读不可编辑)
+export const updateSmsMessageTemplateConfig = params => {
+  return putRequest("/setting/messageTemplate/sms", params);
+};
+
+// 保存微信公众号服务号配置 (code, enable; 内容只读)
+export const updateWechatOaMessageTemplate = params => {
+  return putRequest("/setting/messageTemplate/wechat-oa", params);
+};
+
+// 保存微信小程序订阅消息配置 (code, enable; 内容只读)
+export const updateWechatMpMessageTemplate = params => {
+  return putRequest("/setting/messageTemplate/wechat-mp", params);
+};
+
+
+// -------------------------------------------------------------
+// 补充缺失的系统配置、短信、版本及验证码 API
+// -------------------------------------------------------------
+
+// 短信任务发送与记录 (sms.vue)
+export const getSmsPage = (params) => {
+  return getRequest(`/sms/sms`, params);
+};
+export const sendSms = (params) => {
+  return postRequest(`/sms/sms`, params);
+};
+
+// 短信签名同步与详细 (sms.vue, smsSign.vue)
+export const syncSign = () => {
+  return putRequest(`/sms/sign/querySmsSign`);
+};
+export const deleteSign = (id) => {
+  return deleteRequest(`/sms/sign/${id}`);
+};
+export const smsSignDetail = (id) => {
+  return getRequest(`/sms/sign/${id}`);
+};
+
+// 短信模板管理与同步 (sms.vue)
+export const syncTemplate = () => {
+  return putRequest(`/sms/template/querySmsSign`);
+};
+export const addSmsTemplatePage = (params) => {
+  return postRequest(`/sms/template`, params);
+};
+export const editSmsTemplatePage = (params) => {
+  return putRequest(`/sms/template/modifySmsTemplate`, params);
+};
+export const deleteSmsTemplatePage = (params) => {
+  return deleteRequest(`/sms/template`, params);
+};
+
+// 支付支持方式表单 (PAYMENT_SUPPORT.vue)
+export const getPaymentSupportForm = () => {
+  return getRequest(`/setting/settingx/paymentSupport`);
+};
+
+// 验证码源管理别名 (slider.vue)
+export const addVerification = createVerification;
+export const editVerification = updateVerification;
+export const delVerification = deleteVerification;
+
+// APP版本管理 (appVersion.vue)
+export const appVersionPage = (params) => {
+  return getRequest(`/other/appVersion`, params);
+};
+export const addVersion = (params) => {
+  return postRequest(`/other/appVersion`, params);
+};
+export const editVersion = (params, id) => {
+  return putRequest(`/other/appVersion/${id}`, params);
+};
+export const deleteVersion = (id) => {
+  return deleteRequest(`/other/appVersion/${id}`);
 };
diff --git a/manager/src/libs/lazyLoading.js b/manager/src/libs/lazyLoading.js
index 518ba1dbd..211304904 100644
--- a/manager/src/libs/lazyLoading.js
+++ b/manager/src/libs/lazyLoading.js
@@ -4,6 +4,7 @@ const viewContext = require.context("@/views", true, /\.vue$/);
 const VIEW_ALIASES = {
   "customWords/index": "custom-words/index",
   "sensitiveWords/index": "sensitive-words/index",
+  "sys/message/noticeMessageTemplate": "sys/message/messageTemplate",
 };
 
 function resolveViewPath(url) {
diff --git a/manager/src/router/router.js b/manager/src/router/router.js
index d3b4e8fb1..d037f1c43 100644
--- a/manager/src/router/router.js
+++ b/manager/src/router/router.js
@@ -38,6 +38,20 @@ export const otherRouter = {
   redirect: "/home",
   component: Main,
   children: [
+    {
+      path: "messageTemplate",
+      title: "消息模板",
+      name: "messageTemplate",
+      meta: { title: "消息模板" },
+      component: () => import("@/views/sys/message/messageTemplate.vue")
+    },
+    {
+      path: "noticeMessageTemplate",
+      title: "消息模板",
+      name: "noticeMessageTemplate",
+      meta: { title: "消息模板" },
+      component: () => import("@/views/sys/message/messageTemplate.vue")
+    },
     {
       path: "home",
       title: '首页',
diff --git a/manager/src/views/member/message-manage/weChatMessageManager.vue b/manager/src/views/member/message-manage/weChatMessageManager.vue
deleted file mode 100644
index 84ddb32be..000000000
--- a/manager/src/views/member/message-manage/weChatMessageManager.vue
+++ /dev/null
@@ -1,283 +0,0 @@
-<template>
-  <div>
-    <el-dialog v-model="wechatModal" title="微信设置" width="530px">
-      <el-form ref="wechatFormRef" :model="wechatFormData" label-width="100px">
-        <el-form-item v-if="tab === 'WECHAT'" label="模板名称">
-          <el-input v-model="wechatFormData.name" maxlength="9" disabled />
-        </el-form-item>
-        <el-form-item v-if="tab === 'WECHAT'" label="头部信息" prop="first">
-          <el-input v-model="wechatFormData.first" maxlength="50" />
-        </el-form-item>
-        <el-form-item v-if="tab === 'WECHAT'" label="备注" prop="remark">
-          <el-input v-model="wechatFormData.remark" type="textarea" :rows="5" maxlength="150" />
-        </el-form-item>
-        <el-form-item label="是否开启" prop="enable">
-          <el-switch v-model="wechatFormData.enable" active-text="开启" inactive-text="关闭" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button v-if="tab === 'WECHAT'" type="primary" @click="wechatFormDataEdit">保存</el-button>
-        <el-button v-else type="primary" @click="wechatMPFormDataEdit">保存</el-button>
-      </template>
-    </el-dialog>
-
-    <el-card>
-      <el-tabs v-model="tab" @tab-click="tabPaneChange">
-        <el-tab-pane label="微信消息" name="WECHAT">
-          <div class="search">
-            <div class="operation mt_10">
-              <el-button type="primary" @click="weChatSync">初始化微信消息</el-button>
-            </div>
-            <el-table v-loading="loading" border :data="weChatData" ref="weChatTable" style="width: 100%">
-              <el-table-column prop="code" label="模板编号" width="500" sortable />
-              <el-table-column label="是否开启" width="150" sortable>
-                <template #default="{ row }">
-                  <span v-if="row">{{ row.enable ? "开启" : "关闭" }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="name" label="模板名称" width="200" sortable />
-              <el-table-column prop="createTime" label="创建时间" sortable />
-              <el-table-column label="操作" width="200" align="center" fixed="right">
-                <template #default="{ row }">
-                  <template v-if="row">
-                    <a class="link-text" @click="wechatSettingAlert(row)">编辑</a>
-                    <span class="op-split">|</span>
-                    <a class="link-text" @click="delWeChat(row)">删除</a>
-                  </template>
-                </template>
-              </el-table-column>
-            </el-table>
-            <div class="mt_10" style="display: flex; justify-content: flex-end">
-              <el-pagination
-                v-model:current-page="weChatSearchForm.pageNumber"
-                v-model:page-size="weChatSearchForm.pageSize"
-                :page-sizes="[20, 50, 100]"
-                :total="weChatTotal"
-                layout="total, sizes, prev, pager, next"
-                size="small"
-                @current-change="changePage"
-                @size-change="changePageSize"
-              />
-            </div>
-          </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="微信小程序订阅消息" name="WECHATMP">
-          <div class="search">
-            <div class="operation mt_10">
-              <el-button type="primary" @click="weChatSync('mp')">初始化微信小程序订阅消息</el-button>
-            </div>
-            <el-table v-loading="loading" border :data="weChatMPData" ref="weChatMPTable" style="width: 100%">
-              <el-table-column prop="code" label="模板编号" width="500" sortable />
-              <el-table-column label="是否开启" width="150" sortable>
-                <template #default="{ row }">
-                  <span v-if="row">{{ row.enable ? "开启" : "关闭" }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="name" label="模板名称" width="200" sortable />
-              <el-table-column prop="createTime" label="创建时间" sortable />
-              <el-table-column label="操作" width="200" align="center" fixed="right">
-                <template #default="{ row }">
-                  <template v-if="row">
-                    <a class="link-text" @click="wechatSettingAlert(row)">编辑</a>
-                    <span class="op-split">|</span>
-                    <a class="link-text" @click="delWeChat(row)">删除</a>
-                  </template>
-                </template>
-              </el-table-column>
-            </el-table>
-            <div class="mt_10" style="display: flex; justify-content: flex-end">
-              <el-pagination
-                v-model:current-page="weChatMPSearchForm.pageNumber"
-                v-model:page-size="weChatMPSearchForm.pageSize"
-                :page-sizes="[20, 50, 100]"
-                :total="weChatMPTotal"
-                layout="total, sizes, prev, pager, next"
-                size="small"
-                @current-change="changePage"
-                @size-change="changePageSize"
-              />
-            </div>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-    </el-card>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, reactive, ref } from "vue";
-import {
-  wechatMessageSync,
-  getWechatMessagePage as fetchWechatMessagePage,
-  editWechatMessageTemplate,
-  delWechatMessageTemplate,
-  wechatMPMessageSync,
-  getWechatMPMessagePage as fetchWechatMPMessagePage,
-  editWechatMPMessageTemplate,
-  delWechatMPMessageTemplate,
-} from "@/api/setting";
-import { ElMessage, ElMessageBox } from "element-plus";
-
-defineOptions({ title: "wechat-message-manage" });
-
-const wechatFormRef = ref(null);
-
-const wechatModal = ref(false);
-const wechatFormData = ref({});
-const wechatMPFormData = ref({});
-const tab = ref("WECHAT");
-const searchForm = reactive({ type: "WECHAT" });
-const loading = ref(true);
-const id = ref("");
-const weChatSearchForm = reactive({ pageNumber: 1, pageSize: 20 });
-const weChatMPSearchForm = reactive({ pageNumber: 1, pageSize: 20 });
-const weChatData = ref([]);
-const weChatMPData = ref([]);
-const weChatTotal = ref(0);
-const weChatMPTotal = ref(0);
-
-onMounted(() => {
-  init();
-});
-
-function init() {
-  getDataList();
-}
-function changePage(v) {
-  searchForm.type = tab.value;
-  if (tab.value === "WECHAT") {
-    weChatSearchForm.pageNumber = v;
-    getWechatMessagePage();
-  } else {
-    weChatMPSearchForm.pageNumber = v;
-    getWechatMPMessagePage();
-  }
-}
-function changePageSize(v) {
-  searchForm.type = tab.value;
-  if (tab.value === "WECHAT") {
-    weChatSearchForm.pageSize = v;
-    getWechatMessagePage();
-  } else {
-    weChatMPSearchForm.pageSize = v;
-    getWechatMPMessagePage();
-  }
-}
-function wechatSettingAlert(v) {
-  wechatFormData.value = v;
-  id.value = v.id;
-  wechatModal.value = true;
-}
-function weChatSync(mp) {
-  ElMessageBox.confirm("确认要初始化微信小程序消息订阅?", "提示", { type: "warning" }).then(() => {
-    if (mp === "mp") {
-      wechatMPMessageSync().then((res) => {
-        if (res.success) {
-          ElMessage.success("微信小程序消息订阅初始化");
-          getWechatMPMessagePage();
-        }
-      });
-    } else {
-      wechatMessageSync().then((res) => {
-        if (res.success) {
-          ElMessage.success("微信消息模板初始化成功");
-          getWechatMessagePage();
-        }
-      });
-    }
-  }).catch(() => {});
-}
-function wechatFormDataEdit() {
-  wechatFormRef.value.validate((valid) => {
-    if (valid) {
-      if (!wechatFormData.value.updateTime) {
-        wechatFormData.value.updateTime = "";
-      }
-      editWechatMessageTemplate(id.value, wechatFormData.value).then((res) => {
-        if (res.message === "success") {
-          ElMessage.success("微信模板修改成功");
-          wechatModal.value = false;
-          getWechatMessagePage();
-        }
-      });
-    }
-  });
-}
-function wechatMPFormDataEdit() {
-  wechatFormRef.value.validate((valid) => {
-    if (valid) {
-      editWechatMPMessageTemplate(id.value, wechatMPFormData.value).then((res) => {
-        if (res.message === "success") {
-          ElMessage.success("微信消息订阅模板修改成功");
-          wechatModal.value = false;
-          getWechatMPMessagePage();
-        }
-      });
-    }
-  });
-}
-function delWeChat(v) {
-  ElMessageBox.confirm("确定删除此模板?", "提示", { type: "warning" }).then(() => {
-    if (tab.value === "WECHAT") {
-      delWechatMessageTemplate(v.id).then((res) => {
-        if (res.success) {
-          ElMessage.success("微信模板删除成功");
-          getWechatMessagePage();
-        }
-      });
-    } else {
-      delWechatMPMessageTemplate(v.id).then((res) => {
-        if (res.success) {
-          ElMessage.success("微信消息订阅删除成功");
-          getWechatMPMessagePage();
-        }
-      });
-    }
-  }).catch(() => {});
-}
-function getDataList() {
-  getWechatMessagePage();
-}
-function getWechatMessagePage() {
-  loading.value = true;
-  fetchWechatMessagePage(weChatSearchForm).then((res) => {
-    loading.value = false;
-    if (res.success) {
-      weChatData.value = res.result.records;
-      weChatTotal.value = res.result.total;
-    }
-  });
-}
-function getWechatMPMessagePage() {
-  loading.value = true;
-  fetchWechatMPMessagePage(weChatMPSearchForm).then((res) => {
-    loading.value = false;
-    if (res.success) {
-      weChatMPData.value = res.result.records;
-      weChatMPTotal.value = res.result.total;
-    }
-  });
-}
-function tabPaneChange(tabPane) {
-  const v = tabPane.paneName || tab.value;
-  searchForm.type = v;
-  if (v === "WECHAT") {
-    getWechatMessagePage();
-  } else if (v === "WECHATMP") {
-    getWechatMPMessagePage();
-  }
-}
-</script>
-<style scoped>
-.link-text {
-  color: #2d8cf0;
-  cursor: pointer;
-  text-decoration: none;
-}
-.op-split {
-  display: inline-block;
-  margin: 0 8px;
-  color: #dcdee2;
-}
-</style>
diff --git a/manager/src/views/order/order/orderDetail.vue b/manager/src/views/order/order/orderDetail.vue
index fb20813d9..e2199a76a 100644
--- a/manager/src/views/order/order/orderDetail.vue
+++ b/manager/src/views/order/order/orderDetail.vue
@@ -1,304 +1,177 @@
 <template>
   <div class="order-detail-page">
-    <!-- 顶部导航与快捷操作栏 -->
-    <div class="page-top-nav">
-      <el-page-header :icon="ArrowLeft" title="返回订单列表" @back="goBack">
-        <template #content>
-          <div class="nav-content">
-            <span class="page-title">订单详情</span>
-            <span class="page-sn font-mono">{{ sn }}</span>
-          </div>
-        </template>
-        <template #extra>
-          <div class="nav-actions">
-            <el-button v-if="allowOperation.editPrice" @click="modifyPrice">调整价格</el-button>
-            <el-button v-if="allowOperation.editConsignee" plain type="primary" @click="editAddress">修改收件信息</el-button>
-            <el-button v-if="allowOperation.cancel" plain type="warning" @click="orderCancel">取消订单</el-button>
-            <el-button v-if="isAppointmentOrder && canPlatformRefund" plain type="danger" @click="openPlatformRefund">平台退款</el-button>
-            <el-button v-if="isAppointmentOrder && canNoShowRefund" plain type="danger" @click="openNoShowRefund">爽约退款</el-button>
-            <el-button v-if="orderInfo.order.orderStatus === 'UNPAID'" type="primary" @click="confirmPrice">确认收款</el-button>
-            <el-button plain :icon="Tickets" @click="orderLogDrawer = true">订单日志</el-button>
-            <el-button v-if="!isNonPhysicalOrder" plain type="primary" :icon="Printer" @click="printOrder">打印发货单</el-button>
-            <el-button :icon="Refresh" @click="getDataList">刷新</el-button>
-          </div>
-        </template>
-      </el-page-header>
-    </div>
-
-    <!-- 顶部状态看板 + 履约生命周期步骤条 -->
-    <el-card shadow="never" class="status-header-card">
-      <div class="header-main">
-        <div class="status-summary-left">
-          <div class="status-badge-wrap">
-            <el-tag
-              :type="getOrderStatusTagType(orderInfo.order.orderStatus)"
-              effect="dark"
-              size="large"
-              class="status-tag"
-            >
-              {{ orderInfo.orderStatusValue || "加载中..." }}
-            </el-tag>
-            <el-tag type="info" size="large" class="type-tag">
-              {{ clientTypeWay(orderInfo.order.clientType) }}
-            </el-tag>
-            <el-tag v-if="orderInfo.paymentMethodValue" type="success" size="large" class="type-tag">
-              {{ orderInfo.paymentMethodValue }}
-            </el-tag>
-          </div>
-
-          <div class="sn-info-wrap">
-            <span class="sn-label">订单编号：</span>
-            <span class="sn-text font-mono">{{ orderInfo.order.sn }}</span>
+    <!-- 顶部一体化状态与履约进度卡片 -->
+    <el-card shadow="never" class="top-overview-card">
+      <!-- 第一层：返回导航 + 核心状态/单号 + 操作按钮组 -->
+      <div class="overview-header">
+        <div class="header-left">
+          <el-button link class="back-btn" @click="goBack">
+            <el-icon><ArrowLeft /></el-icon>
+            <span>返回列表</span>
+          </el-button>
+          <div class="header-divider"></div>
+          <el-tag
+            :type="getOrderStatusTagType(orderInfo.order.orderStatus)"
+            effect="dark"
+             class="main-status-tag"
+          >
+            {{ orderInfo.orderStatusValue || "加载中..." }}
+          </el-tag>
+          <div class="sn-title-group">
+            <span class="sn-label">订单号：</span>
+            <span class="sn-value font-mono">{{ orderInfo.order.sn || sn }}</span>
             <el-tooltip content="复制订单编号" placement="top">
               <el-button
                 link
                 type="primary"
                 :icon="CopyDocument"
-                class="copy-btn"
-                @click="copyText(orderInfo.order.sn, '订单编号')"
+                class="copy-icon-btn"
+                @click="copyText(orderInfo.order.sn || sn, '订单编号')"
               />
             </el-tooltip>
           </div>
-
-          <div v-if="orderInfo.order.createTime" class="create-time-text">
-            下单时间：{{ orderInfo.order.createTime }}
+          <div class="meta-tags">
+            <el-tag v-if="orderInfo.order.clientType" size="small" type="info" effect="plain">
+              {{ clientTypeWay(orderInfo.order.clientType) }}
+            </el-tag>
+            <el-tag v-if="orderInfo.paymentMethodValue" size="small" type="success" effect="plain">
+              {{ orderInfo.paymentMethodValue }}
+            </el-tag>
           </div>
         </div>
 
-        <div class="status-metrics-right">
-          <div class="metric-block">
-            <span class="metric-label">订单应付总额</span>
-            <span class="metric-val text-danger">
-              ¥ {{ unitPrice(orderInfo.order.flowPrice) }}
-            </span>
-          </div>
-          <div class="metric-divider"></div>
-          <div class="metric-block">
-            <span class="metric-label">支付状态</span>
-            <span class="metric-val" :class="orderInfo.order.payStatus === 'PAID' ? 'text-success' : 'text-warning'">
-              {{ orderInfo.order.payStatus === 'PAID' ? '已付款' : '待付款' }}
-            </span>
-          </div>
-          <div class="metric-divider"></div>
-          <div class="metric-block">
-            <span class="metric-label">商品总件数</span>
-            <span class="metric-val text-dark">
-              {{ totalGoodsNum }} <small>件</small>
-            </span>
-          </div>
+        <div class="header-actions">
+          <el-button v-if="allowOperation.editPrice" size="default" @click="modifyPrice">调整价格</el-button>
+          <el-button v-if="allowOperation.editConsignee" size="default" plain type="primary" @click="editAddress">
+            修改收件信息
+          </el-button>
+          <el-button v-if="allowOperation.cancel" size="default" plain type="warning" @click="orderCancel">
+            取消订单
+          </el-button>
+          <el-button
+            v-if="isAppointmentOrder && canPlatformRefund"
+            size="default"
+            plain
+            type="danger"
+            @click="openPlatformRefund"
+          >
+            平台退款
+          </el-button>
+          <el-button
+            v-if="isAppointmentOrder && canNoShowRefund"
+            size="default"
+            plain
+            type="danger"
+            @click="openNoShowRefund"
+          >
+            爽约退款
+          </el-button>
+          <el-button v-if="orderInfo.order.orderStatus === 'UNPAID'" size="default" type="primary" @click="confirmPrice">
+            确认收款
+          </el-button>
+          <el-button size="default" plain :icon="Tickets" @click="orderLogDrawer = true">订单日志</el-button>
+          <el-button
+            v-if="!isNonPhysicalOrder"
+            size="default"
+            plain
+            type="primary"
+            :icon="Printer"
+            @click="printOrder"
+          >
+            打印发货单
+          </el-button>
+          <el-button size="default" :icon="Refresh" @click="getDataList">刷新</el-button>
         </div>
       </div>
 
-      <!-- 订单履约生命周期步骤条（带时间戳） -->
-      <div class="lifecycle-steps-wrap">
-        <el-steps
-          :active="currentStepIndex"
-          :status="stepProcessStatus"
-          finish-status="success"
-          align-center
+      <!-- 第二层：紧凑型横向履约步骤条 -->
+      <div class="fulfillment-stepper">
+        <div
+          v-for="(step, sIdx) in orderSteps"
+          :key="sIdx"
+          class="step-item"
+          :class="getStepStateClass(sIdx)"
         >
-          <el-step
-            v-for="(step, sIdx) in orderSteps"
-            :key="sIdx"
-            :title="step.title"
-            :description="step.desc"
-          />
-        </el-steps>
+          <div class="step-node">
+            <div class="step-circle">
+              <el-icon v-if="isStepFinished(sIdx)"><Check /></el-icon>
+              <span v-else>{{ sIdx + 1 }}</span>
+            </div>
+            <div class="step-text">
+              <div class="step-title">{{ step.title }}</div>
+              <div class="step-desc">{{ step.desc }}</div>
+            </div>
+          </div>
+          <div v-if="sIdx < orderSteps.length - 1" class="step-connector"></div>
+        </div>
       </div>
     </el-card>
 
-    <!-- 主体两栏布局 -->
-    <el-row :gutter="18" class="content-row">
-      <!-- 左侧：商品明细、费用结算、以及内嵌流转日志 -->
-      <el-col :xs="24" :sm="24" :md="15" :lg="15" :xl="16">
-        <!-- 1. 商品表格卡片 -->
-        <el-card shadow="never" class="section-card">
+    <!-- 中部：三列等高核心信息面板 -->
+    <el-row :gutter="16" class="info-grid-row">
+      <!-- 1. 订单与买家信息 -->
+      <el-col :xs="24" :sm="24" :md="8">
+        <el-card shadow="never" class="section-card equal-card">
           <template #header>
             <div class="card-title">
-              <el-icon><Goods /></el-icon>
-              <span>商品清单 ({{ data.length }} 项)</span>
+              <el-icon><User /></el-icon>
+              <span>订单与买家信息</span>
             </div>
           </template>
 
-          <el-table
-            v-loading="loading"
-            border
-            :data="data"
-            class="goods-table"
-            style="width: 100%"
-          >
-            <el-table-column label="商品信息" min-width="260">
-              <template #default="{ row }">
-                <div v-if="row" class="goods-item-cell">
-                  <el-image
-                    :src="row.image"
-                    :preview-src-list="[row.image]"
-                    fit="cover"
-                    class="goods-thumb"
-                  />
-                  <div class="goods-info">
-                    <div class="goods-name">
-                      <span>{{ row.goodsName }}</span>
-                    </div>
-                    <div v-if="row.specs" class="goods-specs">
-                      <span v-for="(val, key) in parseSpecs(row.specs)" :key="key" class="spec-tag">
-                        {{ key }}: {{ val }}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </template>
-            </el-table-column>
-
-            <el-table-column label="优惠活动" min-width="110" align="center">
-              <template #default="{ row }">
-                <el-tag v-if="getPromotionText(row) !== '未参与'" size="small" type="warning">
-                  {{ getPromotionText(row) }}
-                </el-tag>
-                <span v-else class="text-gray">-</span>
-              </template>
-            </el-table-column>
-
-            <el-table-column label="单价" width="115" align="center">
-              <template #default="{ row }">
-                <span class="font-bold">¥ {{ Number(row.unitPrice || 0).toFixed(2) }}</span>
-              </template>
-            </el-table-column>
-
-            <el-table-column prop="num" label="数量" width="80" align="center" />
-
-            <el-table-column prop="returnGoodsNumber" label="已退款" width="85" align="center">
-              <template #default="{ row }">
-                <span :class="row.returnGoodsNumber > 0 ? 'text-danger font-bold' : 'text-gray'">
-                  {{ row.returnGoodsNumber || 0 }}
-                </span>
-              </template>
-            </el-table-column>
-
-            <el-table-column label="小计" width="120" align="center">
-              <template #default="{ row }">
-                <span class="text-danger font-bold">¥ {{ Number(row.flowPrice || 0).toFixed(2) }}</span>
-              </template>
-            </el-table-column>
-          </el-table>
-
-          <!-- 电子卡券卡密列表 -->
-          <div v-if="isECouponOrder" class="ecoupon-card-keys mt_16">
-            <div class="sub-header-title">
-              <el-icon><Tickets /></el-icon>
-              <span>卡密发放明细</span>
+          <div class="kv-list">
+            <div class="kv-row">
+              <span class="kv-label">买家账号</span>
+              <div class="kv-val">
+                <el-tooltip
+                  :content="orderInfo.order.memberName || '匿名买家'"
+                  placement="top"
+                  :disabled="!orderInfo.order.memberName || orderInfo.order.memberName.length < 20"
+                >
+                  <span class="member-name-text font-bold">{{ orderInfo.order.memberName || "匿名买家" }}</span>
+                </el-tooltip>
+              </div>
             </div>
-            <el-alert
-              v-if="!ecouponCardKeyDelivered"
-              type="info"
-              show-icon
-              :closable="false"
-              title="卡密尚未发放"
-              class="mb_10"
-            />
-            <el-table
-              v-else-if="ecouponCardKeyRows.length"
-              border
-              size="small"
-              :data="ecouponCardKeyRows"
-              style="width: 100%"
-            >
-              <el-table-column type="index" label="序号" width="60" align="center" />
-              <el-table-column prop="cardNo" label="卡号" min-width="140" show-overflow-tooltip />
-              <el-table-column prop="cardSecret" label="卡密" min-width="120" show-overflow-tooltip />
-              <el-table-column prop="allocatedTime" label="发卡时间" width="170" align="center" />
-              <el-table-column label="状态" width="100" align="center">
-                <template #default="{ row }">
-                  <el-tag size="small" type="success">{{ formatCardKeyStatus(row.status || 'ALLOCATED') }}</el-tag>
-                </template>
-              </el-table-column>
-              <el-table-column label="操作" width="80" align="center">
-                <template #default="{ row }">
-                  <el-button link type="primary" size="small" @click="copyCardKey(row)">复制</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
 
-          <!-- 商品清单底部金额汇总与核算 -->
-          <div class="goods-summary-footer">
-            <div class="summary-rows">
-              <div class="summary-item">
-                <span class="label">商品总额</span>
-                <span class="value font-mono">¥ {{ unitPrice(orderPriceDetail.goodsPrice || orderInfo.order.goodsPrice || 0) }}</span>
-              </div>
+            <div class="kv-row">
+              <span class="kv-label">成交店铺</span>
+              <div class="kv-val font-bold text-dark">{{ orderInfo.order.storeName || "-" }}</div>
+            </div>
 
-              <div v-if="!isECouponOrder" class="summary-item">
-                <span class="label">运费</span>
-                <span class="value font-mono">+ ¥ {{ unitPrice(orderInfo.order.freightPrice || 0) }}</span>
-              </div>
+            <div class="kv-row">
+              <span class="kv-label">下单时间</span>
+              <div class="kv-val font-mono">{{ orderInfo.order.createTime || "-" }}</div>
+            </div>
 
-              <div v-if="orderPriceDetail.discountPrice > 0" class="summary-item">
-                <span class="label">活动优惠抵扣</span>
-                <span class="value text-success font-mono">- ¥ {{ unitPrice(orderPriceDetail.discountPrice) }}</span>
-              </div>
-
-              <div v-if="orderPriceDetail.couponPrice > 0" class="summary-item">
-                <span class="label">优惠券抵扣</span>
-                <span class="value text-success font-mono">- ¥ {{ unitPrice(orderPriceDetail.couponPrice) }}</span>
-              </div>
-
-              <div v-if="orderPriceDetail.giftCardPrice > 0" class="summary-item">
-                <span class="label">礼品卡抵扣</span>
-                <span class="value text-success font-mono">- ¥ {{ unitPrice(orderPriceDetail.giftCardPrice) }}</span>
-              </div>
-
-              <div v-if="orderPriceDetail.updatePrice" class="summary-item">
-                <span class="label">人工改价调整</span>
-                <span class="value font-mono">¥ {{ unitPrice(orderPriceDetail.updatePrice) }}</span>
-              </div>
-
-              <div v-if="orderPriceDetail.payPoint > 0" class="summary-item">
-                <span class="label">使用积分抵扣</span>
-                <span class="value font-mono">{{ orderPriceDetail.payPoint }} 积分</span>
-              </div>
-
-              <div class="summary-divider"></div>
-
-              <div class="summary-item final-total">
-                <span class="label">订单应付总额</span>
-                <span class="final-price text-danger font-mono">
-                  ¥ {{ unitPrice(orderPriceDetail.flowPrice || orderInfo.order.flowPrice || 0) }}
+            <div class="kv-row">
+              <span class="kv-label">支付状态</span>
+              <div class="kv-val">
+                <el-tag
+                  size="small"
+                  :type="orderInfo.order.payStatus === 'PAID' ? 'success' : 'warning'"
+                  effect="light"
+                >
+                  {{ orderInfo.order.payStatus === "PAID" ? "已付款" : "待付款" }}
+                </el-tag>
+                <span v-if="orderInfo.paymentMethodValue" class="sub-pay-method">
+                  （{{ orderInfo.paymentMethodValue }}）
                 </span>
               </div>
             </div>
+
+            <div class="kv-row">
+              <span class="kv-label">应付总额</span>
+              <div class="kv-val text-danger font-bold font-mono">
+                ¥ {{ unitPrice(orderInfo.order.flowPrice) }}
+              </div>
+            </div>
           </div>
         </el-card>
       </el-col>
 
-      <!-- 右侧：买家画像、收件信息、发票与预约 -->
-      <el-col :xs="24" :sm="24" :md="9" :lg="9" :xl="8">
-        <!-- 1. 买家画像卡片 -->
-        <el-card shadow="never" class="section-card side-card">
-          <template #header>
-            <div class="card-title">
-              <el-icon><User /></el-icon>
-              <span>买家信息</span>
-            </div>
-          </template>
-
-          <div class="side-info-list">
-            <div class="side-info-item">
-              <span class="item-label">买家账号</span>
-              <div class="item-value font-bold">
-                <span>{{ orderInfo.order.memberName || "匿名买家" }}</span>
-              </div>
-            </div>
-
-            <div v-if="orderInfo.order.storeName" class="side-info-item">
-              <span class="item-label">成交店铺</span>
-              <div class="item-value font-bold text-dark">{{ orderInfo.order.storeName }}</div>
-            </div>
-          </div>
-        </el-card>
-
-        <!-- 2. 收货与配送信息卡片 -->
-        <el-card shadow="never" class="section-card side-card">
+      <!-- 2. 收货与配送信息 -->
+      <el-col :xs="24" :sm="24" :md="8">
+        <el-card shadow="never" class="section-card equal-card">
           <template #header>
             <div class="card-title justify-between">
               <div class="flex-title">
@@ -318,16 +191,16 @@
             </div>
           </template>
 
-          <div class="side-info-list">
-            <template v-if="!isECouponOrder && orderInfo.order.deliveryMethod != 'SELF_PICK_UP'">
-              <div class="side-info-item">
-                <span class="item-label">收货人</span>
-                <div class="item-value font-bold">{{ orderInfo.order.consigneeName || "-" }}</div>
+          <div class="kv-list">
+            <template v-if="!isECouponOrder && orderInfo.order.deliveryMethod !== 'SELF_PICK_UP'">
+              <div class="kv-row">
+                <span class="kv-label">收货人</span>
+                <div class="kv-val font-bold">{{ orderInfo.order.consigneeName || "-" }}</div>
               </div>
 
-              <div class="side-info-item">
-                <span class="item-label">联系电话</span>
-                <div class="item-value">
+              <div class="kv-row">
+                <span class="kv-label">联系电话</span>
+                <div class="kv-val">
                   <span class="font-mono">{{ orderInfo.order.consigneeMobile || "-" }}</span>
                   <el-tooltip v-if="orderInfo.order.consigneeMobile" content="复制手机号" placement="top">
                     <el-button
@@ -340,100 +213,114 @@
                 </div>
               </div>
 
-              <div class="side-info-item">
-                <span class="item-label">收货详细地址</span>
-                <div class="item-value address-text">
-                  {{ orderInfo.order.consigneeAddressPath || "" }} {{ orderInfo.order.consigneeDetail || "" }}
+              <div class="kv-row">
+                <span class="kv-label">收货地址</span>
+                <div class="kv-val address-val">
+                  {{ formatAddress(orderInfo.order.consigneeAddressPath, orderInfo.order.consigneeDetail) }}
                 </div>
               </div>
             </template>
 
-            <div v-else-if="orderInfo.order.deliveryMethod === 'SELF_PICK_UP'" class="side-info-item">
-              <span class="item-label">履约方式</span>
-              <div class="item-value font-bold text-success">买家自提</div>
+            <div v-else-if="orderInfo.order.deliveryMethod === 'SELF_PICK_UP'" class="kv-row">
+              <span class="kv-label">履约方式</span>
+              <div class="kv-val font-bold text-success">买家自提</div>
             </div>
 
-            <div v-if="!isNonPhysicalOrder" class="side-info-item">
-              <span class="item-label">配送方式</span>
-              <div class="item-value">{{ orderInfo.deliveryMethodValue || "-" }}</div>
+            <div v-if="!isNonPhysicalOrder" class="kv-row">
+              <span class="kv-label">配送方式</span>
+              <div class="kv-val">{{ orderInfo.deliveryMethodValue || "-" }}</div>
             </div>
 
-            <div class="side-divider"></div>
-
-            <div class="side-info-item">
-              <span class="item-label">买家留言</span>
-              <div class="item-value remark-text">
+            <div class="kv-row">
+              <span class="kv-label">买家留言</span>
+              <div class="kv-val" :class="{ 'text-gray': !orderInfo.order.remark }">
                 {{ orderInfo.order.remark || "暂无买家留言" }}
               </div>
             </div>
           </div>
         </el-card>
+      </el-col>
 
-        <!-- 3. 发票信息卡片 -->
-        <el-card shadow="never" class="section-card side-card">
+      <!-- 3. 发票与扩展信息 -->
+      <el-col :xs="24" :sm="24" :md="8">
+        <el-card shadow="never" class="section-card equal-card">
           <template #header>
             <div class="card-title">
               <el-icon><Document /></el-icon>
-              <span>发票信息</span>
+              <span>{{ isAppointmentOrder ? "发票与预约信息" : "发票与备注信息" }}</span>
             </div>
           </template>
 
-          <div v-if="orderInfo.order.needReceipt" class="side-info-list">
-            <div class="side-info-item">
-              <span class="item-label">发票抬头</span>
-              <div class="item-value font-bold">{{ orderInfo.receipt?.receiptTitle || "-" }}</div>
-            </div>
+          <div class="kv-list">
+            <template v-if="orderInfo.order.needReceipt">
+              <div class="kv-row">
+                <span class="kv-label">开票状态</span>
+                <div class="kv-val">
+                  <el-tag size="small" :type="orderInfo.receipt?.receiptStatus === 1 ? 'success' : 'info'">
+                    {{ orderInfo.receipt?.receiptStatus === 1 ? "已开票" : "未开票" }}
+                  </el-tag>
+                </div>
+              </div>
 
-            <div v-if="orderInfo.receipt?.taxpayerId" class="side-info-item">
-              <span class="item-label">纳税人识别号</span>
-              <div class="item-value font-mono">{{ orderInfo.receipt.taxpayerId }}</div>
-            </div>
+              <div class="kv-row">
+                <span class="kv-label">发票抬头</span>
+                <div class="kv-val font-bold">{{ orderInfo.receipt?.receiptTitle || "-" }}</div>
+              </div>
 
-            <div class="side-info-item">
-              <span class="item-label">发票内容</span>
-              <div class="item-value">{{ orderInfo.receipt?.receiptContent || "-" }}</div>
-            </div>
+              <div v-if="orderInfo.receipt?.taxpayerId" class="kv-row">
+                <span class="kv-label">纳税人识别号</span>
+                <div class="kv-val font-mono">{{ orderInfo.receipt.taxpayerId }}</div>
+              </div>
 
-            <div class="side-info-item">
-              <span class="item-label">发票金额</span>
-              <div class="item-value text-danger font-bold font-mono">
-                ¥ {{ Number(orderInfo.receipt?.receiptPrice || 0).toFixed(2) }}
+              <div class="kv-row">
+                <span class="kv-label">发票内容</span>
+                <div class="kv-val">{{ orderInfo.receipt?.receiptContent || "-" }}</div>
+              </div>
+
+              <div class="kv-row">
+                <span class="kv-label">发票金额</span>
+                <div class="kv-val text-danger font-bold font-mono">
+                  ¥ {{ Number(orderInfo.receipt?.receiptPrice || 0).toFixed(2) }}
+                </div>
+              </div>
+            </template>
+
+            <template v-else>
+              <div class="kv-row">
+                <span class="kv-label">是否开票</span>
+                <div class="kv-val">
+                  <el-tag size="small" type="info" effect="plain">未申请开票</el-tag>
+                </div>
+              </div>
+              <div class="kv-row">
+                <span class="kv-label">发票抬头</span>
+                <div class="kv-val text-gray">-</div>
+              </div>
+              <div class="kv-row">
+                <span class="kv-label">发票内容</span>
+                <div class="kv-val text-gray">-</div>
+              </div>
+            </template>
+
+            <div class="kv-row">
+              <span class="kv-label">商家备注</span>
+              <div class="kv-val" :class="{ 'text-gray': !orderInfo.order.sellerRemark }">
+                {{ orderInfo.order.sellerRemark || "暂无商家备注" }}
               </div>
             </div>
 
-            <div class="side-info-item">
-              <span class="item-label">开票状态</span>
-              <div class="item-value">
-                <el-tag size="small" :type="orderInfo.receipt?.receiptStatus === 1 ? 'success' : 'info'">
-                  {{ orderInfo.receipt?.receiptStatus === 1 ? "已开票" : "未开票" }}
-                </el-tag>
+            <template v-if="isAppointmentOrder">
+              <div v-if="appointmentSlotText" class="kv-row">
+                <span class="kv-label">预约时段</span>
+                <div class="kv-val font-bold text-primary">{{ appointmentSlotText }}</div>
               </div>
-            </div>
-          </div>
-          <div v-else class="empty-receipt-box">
-            <span class="text-gray">本订单买家未申请发票</span>
-          </div>
-        </el-card>
-
-        <!-- 4. 预约订单信息（若是预约服务） -->
-        <el-card v-if="isAppointmentOrder" shadow="never" class="section-card side-card">
-          <template #header>
-            <div class="card-title">
-              <el-icon><Clock /></el-icon>
-              <span>预约服务信息</span>
-            </div>
-          </template>
-
-          <div class="side-info-list">
-            <div v-if="appointmentSlotText" class="side-info-item">
-              <span class="item-label">预约服务时段</span>
-              <div class="item-value font-bold text-primary">{{ appointmentSlotText }}</div>
-            </div>
-
-            <template v-for="(rows, gi) in appointmentFormGroups" :key="'form-' + gi">
-              <div class="side-info-item">
-                <span class="item-label">{{ appointmentFormGroups.length > 1 ? `补充信息 ${gi + 1}` : '预约补充信息' }}</span>
-                <div class="item-value flex-col">
+              <div
+                v-for="(rows, gi) in appointmentFormGroups"
+                :key="'form-' + gi"
+                class="kv-row"
+              >
+                <span class="kv-label">{{ appointmentFormGroups.length > 1 ? `补充信息${gi + 1}` : "补充信息" }}</span>
+                <div class="kv-val flex-col">
                   <div v-for="row in rows" :key="row.fieldKey" class="form-ans-line">
                     <span class="f-label">{{ row.fieldLabel }}：</span>
                     <span class="f-val">{{ row.value }}</span>
@@ -446,6 +333,172 @@
       </el-col>
     </el-row>
 
+    <!-- 底部：全宽商品清单与费用结算 -->
+    <el-card shadow="never" class="section-card goods-section-card">
+      <template #header>
+        <div class="card-title justify-between">
+          <div class="flex-title">
+            <el-icon><Goods /></el-icon>
+            <span>商品清单</span>
+            <el-tag size="small" type="info" effect="plain" round class="count-badge">
+              共 {{ data.length }} 种 / {{ totalGoodsNum }} 件
+            </el-tag>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        v-loading="loading"
+        border
+        :data="data"
+        class="goods-table"
+        style="width: 100%"
+      >
+        <el-table-column label="商品信息" min-width="320">
+          <template #default="{ row }">
+            <div v-if="row" class="goods-item-cell">
+              <el-image
+                :src="row.image"
+                :preview-src-list="[row.image]"
+                fit="cover"
+                class="goods-thumb"
+              />
+              <div class="goods-info">
+                <div class="goods-name">
+                  <span>{{ row.goodsName }}</span>
+                </div>
+                <div v-if="row.specs" class="goods-specs">
+                  <span v-for="(val, key) in parseSpecs(row.specs)" :key="key" class="spec-tag">
+                    {{ key }}: {{ val }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="优惠活动" min-width="140" align="center">
+          <template #default="{ row }">
+            <el-tag v-if="getPromotionText(row) !== '未参与'" size="small" type="warning">
+              {{ getPromotionText(row) }}
+            </el-tag>
+            <span v-else class="text-gray">-</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="单价" width="150" align="center">
+          <template #default="{ row }">
+            <span class="font-mono font-bold">¥ {{ Number(row.unitPrice || 0).toFixed(2) }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="num" label="数量" width="110" align="center" />
+
+        <el-table-column prop="returnGoodsNumber" label="已退款" width="110" align="center">
+          <template #default="{ row }">
+            <span :class="row.returnGoodsNumber > 0 ? 'text-danger font-bold' : 'text-gray'">
+              {{ row.returnGoodsNumber || 0 }}
+            </span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="小计" width="160" align="right" header-align="center">
+          <template #default="{ row }">
+            <span class="text-danger font-bold font-mono pr_12">
+              ¥ {{ Number(row.flowPrice || 0).toFixed(2) }}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 电子卡券卡密列表 -->
+      <div v-if="isECouponOrder" class="ecoupon-card-keys mt_16">
+        <div class="sub-header-title">
+          <el-icon><Tickets /></el-icon>
+          <span>卡密发放明细</span>
+        </div>
+        <el-alert
+          v-if="!ecouponCardKeyDelivered"
+          type="info"
+          show-icon
+          :closable="false"
+          title="卡密尚未发放"
+          class="mb_10"
+        />
+        <el-table
+          v-else-if="ecouponCardKeyRows.length"
+          border
+          size="small"
+          :data="ecouponCardKeyRows"
+          style="width: 100%"
+        >
+          <el-table-column type="index" label="序号" width="60" align="center" />
+          <el-table-column prop="cardNo" label="卡号" min-width="140" show-overflow-tooltip />
+          <el-table-column prop="cardSecret" label="卡密" min-width="120" show-overflow-tooltip />
+          <el-table-column prop="allocatedTime" label="发卡时间" width="170" align="center" />
+          <el-table-column label="状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag size="small" type="success">{{ formatCardKeyStatus(row.status || 'ALLOCATED') }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="80" align="center">
+            <template #default="{ row }">
+              <el-button link type="primary" size="small" @click="copyCardKey(row)">复制</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <!-- 商品清单底部金额汇总与核算 -->
+      <div class="goods-summary-footer">
+        <div class="summary-rows">
+          <div class="summary-item">
+            <span class="label">商品总额</span>
+            <span class="value font-mono">¥ {{ unitPrice(orderPriceDetail.goodsPrice || orderInfo.order.goodsPrice || 0) }}</span>
+          </div>
+
+          <div v-if="!isECouponOrder" class="summary-item">
+            <span class="label">运费</span>
+            <span class="value font-mono">+ ¥ {{ unitPrice(orderInfo.order.freightPrice || 0) }}</span>
+          </div>
+
+          <div v-if="orderPriceDetail.discountPrice > 0" class="summary-item">
+            <span class="label">活动优惠抵扣</span>
+            <span class="value text-success font-mono">- ¥ {{ unitPrice(orderPriceDetail.discountPrice) }}</span>
+          </div>
+
+          <div v-if="orderPriceDetail.couponPrice > 0" class="summary-item">
+            <span class="label">优惠券抵扣</span>
+            <span class="value text-success font-mono">- ¥ {{ unitPrice(orderPriceDetail.couponPrice) }}</span>
+          </div>
+
+          <div v-if="orderPriceDetail.giftCardPrice > 0" class="summary-item">
+            <span class="label">礼品卡抵扣</span>
+            <span class="value text-success font-mono">- ¥ {{ unitPrice(orderPriceDetail.giftCardPrice) }}</span>
+          </div>
+
+          <div v-if="orderPriceDetail.updatePrice" class="summary-item">
+            <span class="label">人工改价调整</span>
+            <span class="value font-mono">¥ {{ unitPrice(orderPriceDetail.updatePrice) }}</span>
+          </div>
+
+          <div v-if="orderPriceDetail.payPoint > 0" class="summary-item">
+            <span class="label">使用积分抵扣</span>
+            <span class="value font-mono">{{ orderPriceDetail.payPoint }} 积分</span>
+          </div>
+
+          <div class="summary-divider"></div>
+
+          <div class="summary-item final-total">
+            <span class="label">订单应付总额</span>
+            <span class="final-price text-danger font-mono">
+              ¥ {{ unitPrice(orderPriceDetail.flowPrice || orderInfo.order.flowPrice || 0) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </el-card>
+
     <!-- 弹窗：修改金额 -->
     <el-dialog v-model="modal" title="调整订单金额" width="480px" destroy-on-close>
       <el-form ref="modifyPriceFormRef" :model="modifyPriceForm" label-width="90px" :rules="modifyPriceValidate">
@@ -786,6 +839,7 @@ import {
   TopRight,
   User,
   Edit,
+  Check,
 } from "@element-plus/icons-vue";
 
 defineOptions({ name: "orderDetail" });
@@ -1000,6 +1054,29 @@ function getOrderStatusTagType(status) {
   return map[status] || "info";
 }
 
+function isStepFinished(sIdx) {
+  const status = orderInfo.value?.order?.orderStatus;
+  if (status === "CANCELLED") return sIdx === 0;
+  return sIdx < currentStepIndex.value;
+}
+
+function getStepStateClass(sIdx) {
+  const status = orderInfo.value?.order?.orderStatus;
+  if (status === "CANCELLED") {
+    return sIdx === 0 ? "is-done" : "is-cancelled";
+  }
+  if (sIdx < currentStepIndex.value) return "is-done";
+  if (sIdx === currentStepIndex.value) return "is-active";
+  return "is-pending";
+}
+
+function formatAddress(path, detail) {
+  const cleanPath = (path || "").replace(/,/g, " ").trim();
+  const cleanDetail = (detail || "").trim();
+  const full = [cleanPath, cleanDetail].filter(Boolean).join(" ");
+  return full || "-";
+}
+
 function parseSpecs(specs) {
   if (!specs) return {};
   try {
@@ -1327,194 +1404,273 @@ onMounted(() => {
 <style lang="scss" scoped>
 .order-detail-page {
   width: 100%;
-  padding-bottom: 30px;
+  padding-bottom: 28px;
 
-  .page-top-nav {
-    margin-bottom: 14px;
-
-    :deep(.el-page-header__left) {
-      margin-right: 16px;
-    }
-
-    .nav-content {
-      display: flex;
-      align-items: baseline;
-      gap: 12px;
-
-      .page-title {
-        font-size: 17px;
-        font-weight: 700;
-        color: #1e293b;
-      }
-
-      .page-sn {
-        font-size: 13px;
-        color: #94a3b8;
-      }
-    }
-
-    .nav-actions {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      flex-wrap: wrap;
-    }
-  }
-
-  .status-header-card {
+  // 顶部一体化状态与履约步骤卡片
+  .top-overview-card {
     border-radius: 10px;
-    border: 1px solid #ebeef5;
+    border: 1px solid #e2e8f0;
     background: #fff;
-    margin-bottom: 18px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+    margin-bottom: 16px;
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
 
     :deep(.el-card__body) {
-      padding: 20px 24px;
+      padding: 16px 22px 18px;
     }
 
-    .header-main {
+    .overview-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap;
-      gap: 20px;
-      padding-bottom: 20px;
-      border-bottom: 1px dashed #f1f5f9;
-    }
+      gap: 14px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid #f1f5f9;
 
-    .status-summary-left {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-
-      .status-badge-wrap {
+      .header-left {
         display: flex;
         align-items: center;
-        gap: 10px;
+        flex-wrap: wrap;
+        gap: 12px;
 
-        .status-tag {
+        .back-btn {
           font-size: 14px;
-          padding: 6px 14px;
-          height: auto;
           font-weight: 600;
-        }
+          color: #475569;
+          padding: 4px 2px;
 
-        .type-tag {
-          font-size: 13px;
-        }
-      }
+          &:hover {
+            color: var(--el-color-primary);
+          }
 
-      .sn-info-wrap {
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-        color: #475569;
-
-        .sn-label {
-          color: #94a3b8;
-        }
-
-        .sn-text {
-          font-weight: 600;
-          color: #1e293b;
-          font-size: 15px;
-        }
-
-        .copy-btn {
-          margin-left: 6px;
-          font-size: 15px;
-        }
-      }
-
-      .create-time-text {
-        font-size: 12px;
-        color: #94a3b8;
-      }
-    }
-
-    .status-metrics-right {
-      display: flex;
-      align-items: center;
-      gap: 24px;
-      background: #f8fafc;
-      padding: 12px 20px;
-      border-radius: 8px;
-      border: 1px solid #edf2f7;
-
-      .metric-block {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-
-        .metric-label {
-          font-size: 12px;
-          color: #64748b;
-        }
-
-        .metric-val {
-          font-size: 18px;
-          font-weight: 700;
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-
-          small {
-            font-size: 12px;
-            font-weight: normal;
+          .el-icon {
+            margin-right: 4px;
+            font-size: 15px;
           }
         }
+
+        .header-divider {
+          width: 1px;
+          height: 16px;
+          background: #cbd5e1;
+        }
+
+        .main-status-tag {
+          font-size: 13px;
+          font-weight: 600;
+          padding: 0 12px;
+          height: 28px;
+          border-radius: 6px;
+        }
+
+        .sn-title-group {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+
+          .sn-label {
+            color: #64748b;
+          }
+
+          .sn-value {
+            font-size: 15px;
+            font-weight: 700;
+            color: #0f172a;
+            letter-spacing: 0.3px;
+          }
+
+          .copy-icon-btn {
+            margin-left: 4px;
+            font-size: 15px;
+          }
+        }
+
+        .meta-tags {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
       }
 
-      .metric-divider {
-        width: 1px;
-        height: 28px;
-        background: #e2e8f0;
+      .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-wrap: wrap;
       }
     }
 
-    .lifecycle-steps-wrap {
-      padding-top: 22px;
+    // 紧凑型横向履约进度条
+    .fulfillment-stepper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 16px;
+      padding: 14px 24px;
+      background: #f8fafc;
+      border: 1px solid #f1f5f9;
+      border-radius: 8px;
+      gap: 12px;
 
-      :deep(.el-step__title) {
-        font-size: 14px;
-        font-weight: 600;
-      }
+      .step-item {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        min-width: 0;
 
-      :deep(.el-step__description) {
-        font-size: 12px;
+        &:last-child {
+          flex: 0 0 auto;
+        }
+
+        .step-node {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          flex-shrink: 0;
+        }
+
+        .step-circle {
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          font-weight: 700;
+          border: 2px solid #cbd5e1;
+          background: #fff;
+          color: #94a3b8;
+          transition: all 0.2s ease;
+          flex-shrink: 0;
+        }
+
+        .step-text {
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
+
+          .step-title {
+            font-size: 14px;
+            font-weight: 600;
+            color: #64748b;
+            line-height: 1.3;
+          }
+
+          .step-desc {
+            font-size: 12px;
+            color: #94a3b8;
+            line-height: 1.3;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
+          }
+        }
+
+        .step-connector {
+          flex: 1;
+          height: 2px;
+          background: #e2e8f0;
+          margin: 0 20px;
+          border-radius: 2px;
+          min-width: 30px;
+        }
+
+        // 已完成状态
+        &.is-done {
+          .step-circle {
+            border-color: #10b981;
+            background: #ecfdf5;
+            color: #10b981;
+          }
+          .step-text .step-title {
+            color: #0f172a;
+          }
+          .step-text .step-desc {
+            color: #10b981;
+          }
+          .step-connector {
+            background: #10b981;
+          }
+        }
+
+        // 当前进行中状态
+        &.is-active {
+          .step-circle {
+            border-color: #3b82f6;
+            background: #3b82f6;
+            color: #fff;
+            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
+          }
+          .step-text .step-title {
+            color: #1e293b;
+            font-weight: 700;
+          }
+          .step-text .step-desc {
+            color: #3b82f6;
+            font-weight: 500;
+          }
+        }
+
+        // 已取消状态
+        &.is-cancelled {
+          .step-circle {
+            border-color: #e2e8f0;
+            background: #f1f5f9;
+            color: #cbd5e1;
+          }
+        }
       }
     }
   }
 
-  .content-row {
-    margin-top: 0;
+  // 中部三列等高卡片网格
+  .info-grid-row {
+    margin-bottom: 16px;
+    display: flex;
+    flex-wrap: wrap;
+
+    :deep(.el-col) {
+      display: flex;
+      margin-bottom: 0;
+    }
   }
 
   .section-card {
     border-radius: 10px;
-    border: 1px solid #ebeef5;
+    border: 1px solid #e2e8f0;
     background: #fff;
-    margin-bottom: 18px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
+    width: 100%;
+
+    &.equal-card {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      :deep(.el-card__body) {
+        flex: 1;
+      }
+    }
 
     :deep(.el-card__header) {
-      padding: 14px 20px;
+      padding: 13px 18px;
       border-bottom: 1px solid #f1f5f9;
-      background: #fafafa;
+      background: #fafbfc;
     }
 
     :deep(.el-card__body) {
-      padding: 18px 20px;
+      padding: 16px 18px;
     }
 
     .card-title {
       display: flex;
       align-items: center;
       gap: 8px;
-      font-size: 15px;
+      font-size: 14px;
       font-weight: 600;
       color: #1e293b;
 
       .el-icon {
-        font-size: 17px;
+        font-size: 16px;
         color: #ff6a00;
       }
 
@@ -1528,6 +1684,92 @@ onMounted(() => {
         align-items: center;
         gap: 8px;
       }
+
+      .count-badge {
+        margin-left: 4px;
+        font-weight: 500;
+      }
+    }
+  }
+
+  // 水平对齐键值对列表
+  .kv-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .kv-row {
+      display: flex;
+      align-items: flex-start;
+      font-size: 13px;
+      line-height: 20px;
+
+      .kv-label {
+        width: 82px;
+        flex-shrink: 0;
+        color: #64748b;
+        font-weight: 400;
+      }
+
+      .kv-val {
+        flex: 1;
+        min-width: 0;
+        color: #1e293b;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 6px;
+        word-break: break-all;
+
+        &.address-val {
+          line-height: 20px;
+          color: #334155;
+        }
+
+        &.flex-col {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 4px;
+        }
+
+        .member-name-text {
+          display: inline-block;
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          vertical-align: bottom;
+        }
+
+        .sub-pay-method {
+          font-size: 12px;
+          color: #64748b;
+        }
+      }
+
+      .form-ans-line {
+        font-size: 13px;
+        color: #334155;
+        line-height: 20px;
+
+        .f-label {
+          color: #64748b;
+        }
+      }
+    }
+  }
+
+  // 商品表格与底部结算卡
+  .goods-section-card {
+    margin-bottom: 0;
+
+    .goods-table {
+      :deep(th.el-table__cell) {
+        background-color: #f8fafc;
+        color: #475569;
+        font-weight: 600;
+        height: 44px;
+      }
     }
   }
 
@@ -1536,11 +1778,11 @@ onMounted(() => {
     display: flex;
     align-items: center;
     gap: 12px;
-    padding: 6px 0;
+    padding: 4px 0;
 
     .goods-thumb {
-      width: 60px;
-      height: 60px;
+      width: 56px;
+      height: 56px;
       border-radius: 6px;
       border: 1px solid #e2e8f0;
       flex-shrink: 0;
@@ -1572,7 +1814,7 @@ onMounted(() => {
           color: #64748b;
           background: #f1f5f9;
           padding: 1px 6px;
-          border-radius: 3px;
+          border-radius: 4px;
         }
       }
     }
@@ -1596,15 +1838,17 @@ onMounted(() => {
   .goods-summary-footer {
     display: flex;
     justify-content: flex-end;
-    margin-top: 18px;
-    padding-top: 14px;
-    border-top: 1px solid #f1f5f9;
+    margin-top: 16px;
 
     .summary-rows {
-      width: 330px;
+      width: 340px;
+      background: #f8fafc;
+      border: 1px solid #f1f5f9;
+      border-radius: 8px;
+      padding: 14px 20px;
       display: flex;
       flex-direction: column;
-      gap: 10px;
+      gap: 8px;
 
       .summary-item {
         display: flex;
@@ -1622,17 +1866,17 @@ onMounted(() => {
         }
 
         &.final-total {
-          padding-top: 6px;
+          padding-top: 4px;
           align-items: baseline;
 
           .label {
             font-size: 14px;
             font-weight: 600;
-            color: #1e293b;
+            color: #0f172a;
           }
 
           .final-price {
-            font-size: 22px;
+            font-size: 20px;
             font-weight: 700;
           }
         }
@@ -1646,65 +1890,6 @@ onMounted(() => {
     }
   }
 
-  // 侧边栏卡片
-  .side-card {
-    .side-info-list {
-      display: flex;
-      flex-direction: column;
-      gap: 14px;
-
-      .side-info-item {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-
-        .item-label {
-          font-size: 12px;
-          color: #94a3b8;
-        }
-
-        .item-value {
-          font-size: 14px;
-          color: #1e293b;
-          display: flex;
-          align-items: center;
-          gap: 6px;
-
-          &.address-text,
-          &.remark-text {
-            line-height: 20px;
-            color: #334155;
-          }
-
-          &.flex-col {
-            flex-direction: column;
-            align-items: flex-start;
-          }
-        }
-
-        .form-ans-line {
-          font-size: 13px;
-          color: #334155;
-          line-height: 20px;
-
-          .f-label {
-            color: #64748b;
-          }
-        }
-      }
-
-      .side-divider {
-        height: 1px;
-        background: #f1f5f9;
-        margin: 4px 0;
-      }
-    }
-
-    .empty-receipt-box {
-      padding: 10px 0;
-    }
-  }
-
   .addr-select-line {
     display: flex;
     align-items: center;
@@ -1718,9 +1903,10 @@ onMounted(() => {
   .text-gray { color: #94a3b8; }
   .text-dark { color: #0f172a; }
   .font-bold { font-weight: 600; }
-  .font-mono { font-family: monospace; }
+  .font-mono { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace; }
   .mt_16 { margin-top: 16px; }
   .mb_10 { margin-bottom: 10px; }
+  .pr_12 { padding-right: 12px; }
 }
 </style>
 
diff --git a/manager/src/views/sys/setting-manage/pay/PAYMENT_SUPPORT.vue b/manager/src/views/sys/setting-manage/pay/PAYMENT_SUPPORT.vue
index 010b600ae..cef9ce96b 100644
--- a/manager/src/views/sys/setting-manage/pay/PAYMENT_SUPPORT.vue
+++ b/manager/src/views/sys/setting-manage/pay/PAYMENT_SUPPORT.vue
@@ -1,48 +1,32 @@
 <template>
-  <div class="layout">
-    <div class="row" v-for="(item, index) in formValidate" :key="index">
-      <div class="col">
-        <el-card shadow="never" :body-style="{ padding: '0 16px' }">
-          <div class="icon-item" v-if="item.client == 'APP'">
-            <img class="icon" src="../../../../assets/setting/app.svg" alt="" />
-          </div>
-          <div class="icon-item" v-if="item.client == 'PC'">
-            <img class="icon" src="../../../../assets/setting/pc.svg" alt="" />
-          </div>
-          <div class="icon-item" v-if="item.client == 'WECHAT_MP'">
-            <img class="icon" src="../../../../assets/setting/wechat_mp.svg" alt="" />
-          </div>
-          <div class="icon-item" v-if="item.client == 'H5'">
-            <img class="icon" src="../../../../assets/setting/h5.svg" alt="" />
-          </div>
-          <div class="pay-title">{{ way[item.client] }}</div>
-
-          <div>
-            <el-divider content-position="left">支付设置</el-divider>
-
-            <div class="pay-list">
-              <el-checkbox-group v-model="item.supports" @change="handleChangePayType">
-                <el-checkbox
-                  v-for="(support, i) in supportForm.payments"
-                  :key="i"
-                  :value="support"
-                >
-                  {{ payWay[support] || support }}
-                </el-checkbox>
-              </el-checkbox-group>
-            </div>
-          </div>
-        </el-card>
+  <div class="setting-page">
+    <div class="setting-section" v-for="(item, index) in formValidate" :key="index">
+      <div class="section-title">
+        <img class="client-icon" :src="clientIcons[item.client]" alt="" />
+        <span>{{ way[item.client] || item.client }}</span>
+      </div>
+      <div class="pay-options">
+        <el-checkbox
+          v-for="payment in paymentOptions"
+          :key="payment"
+          :model-value="item.supports.includes(payment)"
+          :label="payWay[payment] || payment"
+          @change="(val) => togglePay(item, payment, val)"
+        />
       </div>
     </div>
   </div>
 </template>
 <script setup>
-import { getCurrentInstance, ref } from "vue";
+import { computed, getCurrentInstance, ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { setSetting } from "@/api/index";
 import { handleSubmit } from "../setting/validate";
 import { getPaymentSupportForm } from "@/api/setting";
+import iconApp from "../../../../assets/setting/app.svg";
+import iconPc from "../../../../assets/setting/pc.svg";
+import iconWechatMp from "../../../../assets/setting/wechat_mp.svg";
+import iconH5 from "../../../../assets/setting/h5.svg";
 
 const DEFAULT_PAYMENT_SUPPORT_ITEMS = [
   { client: "PC", supports: [] },
@@ -58,10 +42,16 @@ const { proxy } = getCurrentInstance();
 
 const ruleValidate = ref({});
 const way = {
-  APP: "移动应用端",
-  H5: "移动端",
-  WECHAT_MP: "小程序端",
-  PC: "PC端",
+  APP: "APP",
+  H5: "手机网页",
+  WECHAT_MP: "微信小程序",
+  PC: "电脑网页",
+};
+const clientIcons = {
+  APP: iconApp,
+  PC: iconPc,
+  WECHAT_MP: iconWechatMp,
+  H5: iconH5,
 };
 const formValidate = ref([]);
 const payWay = {
@@ -70,7 +60,8 @@ const payWay = {
   WALLET: "余额支付",
 };
 const supportForm = ref("");
-const checkSupport = ref({});
+
+const paymentOptions = computed(() => supportForm.value.payments || []);
 
 function submit(name) {
   handleSubmit(proxy, name)
@@ -79,17 +70,21 @@ function submit(name) {
     })
     .catch(() => {});
 }
-function handleChangePayType(val) {
-  ElMessageBox.confirm("您是否修改此项？", "修改支付设置", { type: "warning" }).then(() => {
-    setupSetting();
-  }).catch(() => {
-    formValidate.value = JSON.parse(JSON.stringify(checkSupport.value));
-  });
+function togglePay(row, payment, checked) {
+  ElMessageBox.confirm("您是否修改此项？", "修改支付设置", { type: "warning" })
+    .then(() => {
+      if (checked) {
+        row.supports.push(payment);
+      } else {
+        row.supports = row.supports.filter((p) => p !== payment);
+      }
+      setupSetting();
+    })
+    .catch(() => {});
 }
 function setupSetting() {
   setSetting(props.type, { paymentSupportItems: formValidate.value }).then((res) => {
     if (res.success) {
-      checkSupport.value = JSON.parse(JSON.stringify(formValidate.value));
       ElMessage.success("保存成功!");
     } else {
       ElMessage.error("保存失败!");
@@ -101,7 +96,10 @@ function init() {
   const items = setting.paymentSupportItems;
   formValidate.value =
     Array.isArray(items) && items.length ? items : DEFAULT_PAYMENT_SUPPORT_ITEMS;
-  checkSupport.value = JSON.parse(JSON.stringify(formValidate.value));
+  // 清理历史已保存的失效支付方式，下次保存时一并去除
+  formValidate.value.forEach((item) => {
+    item.supports = (item.supports || []).filter((p) => p in payWay);
+  });
 
   getPaymentSupportForm().then((res) => {
     if (res.success && res.result) {
@@ -115,48 +113,37 @@ init();
 
 <style lang="scss" scoped>
 @import "../setting/style.scss";
-.pay-title {
-  text-align: center;
-  margin: 10px 0;
-}
-.layout {
-  padding: 20px;
 
+.setting-page {
+  padding: 16px;
+}
+
+.setting-section {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 20px 24px;
+  margin-bottom: 16px;
+}
+
+.section-title {
   display: flex;
   align-items: center;
+  gap: 10px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 16px;
+}
+
+.client-icon {
+  width: 28px;
+  height: 28px;
+}
+
+.pay-options {
+  display: flex;
   flex-wrap: wrap;
-  justify-content: flex-start;
-}
-.row {
-  width: 300px;
-  margin-right: 20px;
-  display: flex;
-  margin-bottom: 20px;
-}
-
-.label-item {
-  display: flex;
-  align-items: center;
-}
-.pay-list {
-  display: flex;
-  justify-content: center;
-  padding-bottom: 10px;
-}
-.icon-item {
-  width: 100%;
-  padding: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.el-form-item {
-  display: flex;
-  align-items: center;
-}
-.icon {
-  width: 100px;
-  height: 100px;
+  gap: 8px 32px;
 }
 </style>
diff --git a/manager/src/views/sys/setting-manage/setting/BASE_SETTING.vue b/manager/src/views/sys/setting-manage/setting/BASE_SETTING.vue
index af478108f..b8f3a5b7c 100644
--- a/manager/src/views/sys/setting-manage/setting/BASE_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/BASE_SETTING.vue
@@ -1,81 +1,57 @@
 <template>
-  <div class="layout">
+  <div class="setting-page">
     <el-form ref="formValidateRef" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
-      <el-form-item label="站点名称" prop="siteName">
-        <el-input style="width:200px;" v-model="formValidate.siteName" />
-        <span class="desc">配置买家端站点名称</span>
-      </el-form-item>
-      <el-form-item label="icp" prop="icp">
-        <el-input v-model="formValidate.icp" />
-      </el-form-item>
+      <div class="setting-section">
+        <div class="section-title">商城信息</div>
+        <el-form-item label="商城名称" prop="siteName">
+          <el-input v-model="formValidate.siteName" />
+        </el-form-item>
+        <el-form-item label="站点地址" prop="staticPageAddress">
+          <el-input v-model="formValidate.staticPageAddress" />
+        </el-form-item>
+        <el-form-item label="wap站点地址" prop="staticPageWapAddress">
+          <el-input v-model="formValidate.staticPageWapAddress" />
+        </el-form-item>
 
-      <el-form-item label="后台Logo" prop="domainLogo">
-        <div class="label-item-upload">
-          <img alt="平台 Logo" v-if="formValidate.domainLogo" class="img" :src="formValidate.domainLogo" />
-          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
-          <el-button @click="onClickImg('domainLogo')">选择图片</el-button>
-          <span class="desc">后台管理左上角logo展示 	17∶6</span>
-        </div>
-      </el-form-item>
-      <el-form-item label="后台Icon" prop="domainIcon">
-        <div class="label-item-upload">
-          <img alt="平台图标" v-if="formValidate.domainIcon" class="img" :src="formValidate.domainIcon" />
-          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
-          <el-button @click="onClickImg('domainIcon')">选择图片</el-button>
-          <span class="desc">后台管理网站icon展示 	1∶1</span>
-        </div>
-      </el-form-item>
-      <el-form-item label="买家端Logo" prop="buyerSideLogo">
-        <div class="label-item-upload">
-          <img alt="买家端 Logo" v-if="formValidate.buyerSideLogo" class="img" :src="formValidate.buyerSideLogo" />
-          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
-          <el-button @click="onClickImg('buyerSideLogo')">选择图片</el-button>
-          <span class="desc">买家端logo展示 	17∶6</span>
-        </div>
-      </el-form-item>
-      <el-form-item label="买家端Icon" prop="buyerSideIcon">
-        <div class="label-item-upload">
-          <img alt="买家端图标" v-if="formValidate.buyerSideIcon" class="img" :src="formValidate.buyerSideIcon" />
-          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
-          <el-button @click="onClickImg('buyerSideIcon')">选择图片</el-button>
-          <span class="desc">买家端网站icon展示 	1∶1</span>
-        </div>
-      </el-form-item>
-      <el-form-item label="商家端Logo" prop="storeSideLogo">
-        <div class="label-item-upload">
-          <img alt="商家端 Logo" v-if="formValidate.storeSideLogo" class="img" :src="formValidate.storeSideLogo" />
-          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
-          <el-button @click="onClickImg('storeSideLogo')">选择图片</el-button>
-          <span class="desc">商家端logo展示 	17∶6</span>
-        </div>
-      </el-form-item>
-      <el-form-item label="商家端Icon" prop="storeSideIcon">
-        <div class="label-item-upload">
-          <img alt="商家端图标" v-if="formValidate.storeSideIcon" class="img" :src="formValidate.storeSideIcon" />
-          <img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
-          <el-button @click="onClickImg('storeSideIcon')">选择图片</el-button>
-          <span class="desc">商家端icon展示 	1∶1</span>
-        </div>
-      </el-form-item>
+        <el-form-item label="商城Logo" prop="domainLogo">
+          <div class="upload-item">
+            <div class="upload-row">
+              <img alt="商城 Logo" v-if="formValidate.domainLogo" class="img img-logo" :src="formValidate.domainLogo" />
+              <img v-else class="img img-logo" src="../../../../assets/emptyImg.png" alt="" />
+              <el-button @click="onClickImg('domainLogo')">选择图片</el-button>
+            </div>
+            <span class="field-desc">各端logo统一展示，建议比例 17:6</span>
+          </div>
+        </el-form-item>
+        <el-form-item label="商城Icon" prop="domainIcon">
+          <div class="upload-item">
+            <div class="upload-row">
+              <img alt="商城图标" v-if="formValidate.domainIcon" class="img" :src="formValidate.domainIcon" />
+              <img v-else class="img" src="../../../../assets/emptyImg.png" alt="" />
+              <el-button @click="onClickImg('domainIcon')">选择图片</el-button>
+            </div>
+            <span class="field-desc">各端网站icon统一展示，建议比例 1:1</span>
+          </div>
+        </el-form-item>
+      </div>
 
-      <el-form-item label="站点地址" prop="staticPageAddress">
-        <el-input style="width:200px;" v-model="formValidate.staticPageAddress" />
-      </el-form-item>
-      <el-form-item label="wap站点地址" prop="staticPageWapAddress">
-        <el-input v-model="formValidate.staticPageWapAddress" />
-      </el-form-item>
-      <el-form-item label="公司名称" prop="companyName">
-        <el-input style="width:350px;" v-model="formValidate.companyName" />
-        <span class="desc">页脚展示的公司名称</span>
-      </el-form-item>
-      <el-form-item label="公司链接" prop="companyUrl">
-        <el-input style="width:350px;" v-model="formValidate.companyUrl" />
-        <span class="desc">页脚公司名称的跳转链接</span>
-      </el-form-item>
-      <el-form-item label="官网地址" prop="website">
-        <el-input style="width:350px;" v-model="formValidate.website" />
-      </el-form-item>
-      <div class="label-btns">
+      <div class="setting-section">
+        <div class="section-title">公司信息</div>
+        <el-form-item label="公司名称" prop="companyName">
+          <el-input v-model="formValidate.companyName" />
+        </el-form-item>
+        <el-form-item label="公司链接" prop="companyUrl">
+          <el-input v-model="formValidate.companyUrl" />
+        </el-form-item>
+        <el-form-item label="官网地址" prop="website">
+          <el-input v-model="formValidate.website" />
+        </el-form-item>
+        <el-form-item label="ICP备案号" prop="icp">
+          <el-input v-model="formValidate.icp" />
+        </el-form-item>
+      </div>
+
+      <div class="submit-bar">
         <el-button type="primary" @click="submit('formValidateRef')">保存</el-button>
       </div>
     </el-form>
@@ -152,6 +128,10 @@ function callbackSelected(val) {
   formValidate.value[selected.value] = val.url;
 }
 function setupSetting() {
+  formValidate.value.buyerSideLogo = formValidate.value.domainLogo;
+  formValidate.value.storeSideLogo = formValidate.value.domainLogo;
+  formValidate.value.buyerSideIcon = formValidate.value.domainIcon;
+  formValidate.value.storeSideIcon = formValidate.value.domainIcon;
   setSetting(props.type, formValidate.value).then((res) => {
     if (res.success) {
       ElMessage.success("保存成功!");
@@ -181,20 +161,65 @@ init();
 </script>
 <style scoped lang="scss">
 @import "./style.scss";
-.label-item {
-  display: flex;
-  > .el-input {
-    width: 200px;
-    margin: 0 10px;
-  }
+
+.setting-page {
+  padding: 16px 0;
 }
-.label-item-upload {
+
+.setting-section {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 20px 24px 4px;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 20px;
+}
+
+.field-desc {
+  margin-top: 8px;
+  color: #999;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.upload-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.upload-row {
   display: flex;
   align-items: flex-end;
   img {
     margin-right: 10px;
     width: 100px;
     height: 100px;
+    object-fit: contain;
+  }
+  // Logo 按建议比例 17:6 展示
+  img.img-logo {
+    width: 170px;
+    height: 60px;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    background: #fafafa;
   }
 }
+
+// 覆盖共享样式里 :deep(.el-input) 的 200px !important，统一输入框宽度
+:deep(.el-input) {
+  width: 400px !important;
+}
+
+.submit-bar {
+  text-align: center;
+  margin: 24px 0 8px;
+}
 </style>
diff --git a/manager/src/views/sys/setting-manage/setting/LIVE_SETTING.vue b/manager/src/views/sys/setting-manage/setting/LIVE_SETTING.vue
index e5bc08edb..65c324cd8 100644
--- a/manager/src/views/sys/setting-manage/setting/LIVE_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/LIVE_SETTING.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="layout">
+  <div class="setting-page">
     <el-form
       ref="formValidateRef"
       label-width="180px"
@@ -7,50 +7,60 @@
       :model="formValidate"
       :rules="ruleValidate"
     >
-      <h4 class="section-title">推流 / 拉流</h4>
-      <el-form-item label="直播推流域名" prop="domain">
-        <el-input v-model="formValidate.domain" placeholder="请输入直播推流域名" />
-      </el-form-item>
-      <el-form-item label="小程序直播推流域名" prop="mpPushDomain">
-        <el-input v-model="formValidate.mpPushDomain" placeholder="请输入小程序直播推流域名" />
-      </el-form-item>
-      <el-form-item label="直播拉流域名" prop="pullDomain">
-        <el-input v-model="formValidate.pullDomain" placeholder="请输入直播拉流域名" />
-      </el-form-item>
+      <div class="setting-section">
+        <div class="section-title">推流 / 拉流</div>
+        <el-form-item label="直播推流域名" prop="domain">
+          <el-input v-model="formValidate.domain" placeholder="请输入直播推流域名" />
+        </el-form-item>
+        <el-form-item label="小程序直播推流域名" prop="mpPushDomain">
+          <el-input v-model="formValidate.mpPushDomain" placeholder="请输入小程序直播推流域名" />
+        </el-form-item>
+        <el-form-item label="直播拉流域名" prop="pullDomain">
+          <el-input v-model="formValidate.pullDomain" placeholder="请输入直播拉流域名" />
+        </el-form-item>
+      </div>
 
-      <h4 class="section-title">应用配置</h4>
-      <el-form-item label="直播应用名称" prop="appName">
-        <el-input v-model="formValidate.appName" placeholder="请输入直播应用名称" />
-      </el-form-item>
-      <el-form-item label="直播流名称" prop="streamName">
-        <el-input v-model="formValidate.streamName" placeholder="请输入直播流名称" />
-      </el-form-item>
+      <div class="setting-section">
+        <div class="section-title">应用配置</div>
+        <el-form-item label="直播应用名称" prop="appName">
+          <el-input v-model="formValidate.appName" placeholder="请输入直播应用名称" />
+        </el-form-item>
+        <el-form-item label="直播流名称" prop="streamName">
+          <el-input v-model="formValidate.streamName" placeholder="请输入直播流名称" />
+        </el-form-item>
+      </div>
 
-      <h4 class="section-title">密钥配置</h4>
-      <el-form-item label="密钥Id" prop="secretId">
-        <el-input v-model="formValidate.secretId" placeholder="请输入密钥Id" show-password />
-      </el-form-item>
-      <el-form-item label="密钥Key" prop="secretKey">
-        <el-input v-model="formValidate.secretKey" placeholder="请输入密钥Key" show-password />
-      </el-form-item>
-      <el-form-item label="推流鉴权秘钥" :prop="'key'">
-        <el-input v-model="formValidate.key" placeholder="请输入推流鉴权秘钥" show-password />
-      </el-form-item>
+      <div class="setting-section">
+        <div class="section-title">密钥配置</div>
+        <el-form-item label="密钥Id" prop="secretId">
+          <el-input v-model="formValidate.secretId" placeholder="请输入密钥Id" show-password />
+        </el-form-item>
+        <el-form-item label="密钥Key" prop="secretKey">
+          <el-input v-model="formValidate.secretKey" placeholder="请输入密钥Key" show-password />
+        </el-form-item>
+        <el-form-item label="推流鉴权秘钥" :prop="'key'">
+          <el-input v-model="formValidate.key" placeholder="请输入推流鉴权秘钥" show-password />
+        </el-form-item>
+      </div>
 
-      <h4 class="section-title">回调配置</h4>
-      <el-form-item label="直播回调地址" prop="callBackUrl">
-        <el-input v-model="formValidate.callBackUrl" placeholder="请输入直播回调地址" />
-      </el-form-item>
+      <div class="setting-section">
+        <div class="section-title">回调配置</div>
+        <el-form-item label="直播回调地址" prop="callBackUrl">
+          <el-input v-model="formValidate.callBackUrl" placeholder="请输入直播回调地址" />
+        </el-form-item>
+      </div>
 
-      <h4 class="section-title">IM 配置</h4>
-      <el-form-item label="直播IM SDK APPID" prop="imSdkAppid">
-        <el-input v-model="formValidate.imSdkAppid" placeholder="请输入直播IM SDK APPID" />
-      </el-form-item>
-      <el-form-item label="直播IM SDK 密钥" prop="imSdkSecretKey">
-        <el-input v-model="formValidate.imSdkSecretKey" placeholder="请输入直播IM SDK 密钥" show-password />
-      </el-form-item>
+      <div class="setting-section">
+        <div class="section-title">IM 配置</div>
+        <el-form-item label="直播IM SDK APPID" prop="imSdkAppid">
+          <el-input v-model="formValidate.imSdkAppid" placeholder="请输入直播IM SDK APPID" />
+        </el-form-item>
+        <el-form-item label="直播IM SDK 密钥" prop="imSdkSecretKey">
+          <el-input v-model="formValidate.imSdkSecretKey" placeholder="请输入直播IM SDK 密钥" show-password />
+        </el-form-item>
+      </div>
 
-      <div class="label-btns">
+      <div class="submit-bar">
         <el-button type="primary" @click="submit('formValidateRef')">保存</el-button>
       </div>
     </el-form>
@@ -138,24 +148,32 @@ init();
 <style lang="scss" scoped>
 @import "./style.scss";
 
+.setting-page {
+  padding: 16px 0;
+}
+
+.setting-section {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 20px 24px 4px;
+  margin-bottom: 16px;
+}
+
 .section-title {
-  margin: 16px 0 8px 180px;
-  padding-left: 0;
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 600;
   color: #303133;
-
-  &:first-of-type {
-    margin-top: 0;
-  }
+  margin-bottom: 20px;
 }
 
+// 覆盖共享样式里 :deep(.el-input) 的 200px !important，统一输入框宽度
 :deep(.el-input) {
-  width: 420px !important;
-  margin: 0;
+  width: 400px !important;
 }
 
-.el-input {
-  width: 420px;
+.submit-bar {
+  text-align: center;
+  margin: 24px 0 8px;
 }
 </style>
diff --git a/manager/src/views/sys/setting-manage/setting/POINT_SETTING.vue b/manager/src/views/sys/setting-manage/setting/POINT_SETTING.vue
index 575701d6a..0a360543d 100644
--- a/manager/src/views/sys/setting-manage/setting/POINT_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/POINT_SETTING.vue
@@ -1,50 +1,61 @@
 <template>
-  <div class="layout">
+  <div class="setting-page">
     <el-form ref="formValidateRef" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
-      <el-form-item label="消费1元赠送积分" prop="consumer">
-        <el-input type="number" v-model="formValidate.consumer">
-          <template #append>积分</template>
-        </el-input>
-      </el-form-item>
+      <div class="setting-section">
+        <div class="section-title">积分赠送</div>
+        <el-form-item label="消费1元赠送积分" prop="consumer">
+          <el-input class="w400" type="number" v-model="formValidate.consumer">
+            <template #append>积分</template>
+          </el-input>
+        </el-form-item>
 
-      <el-form-item label="注册账号" prop="register">
-        <el-input type="number" v-model="formValidate.register">
-          <template #append>积分</template>
-        </el-input>
-      </el-form-item>
+        <el-form-item label="注册账号" prop="register">
+          <el-input class="w400" type="number" v-model="formValidate.register">
+            <template #append>积分</template>
+          </el-input>
+        </el-form-item>
 
-      <el-form-item label="每日签到积分" prop="signIn">
-        <el-input type="number" v-model="formValidate.signIn">
-          <template #append>积分</template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="订单评价赠送积分" prop="comment">
-        <el-input type="number" v-model="formValidate.comment">
-          <template #append>积分</template>
-        </el-input>
-      </el-form-item>
+        <el-form-item label="订单评价赠送积分" prop="comment">
+          <el-input class="w400" type="number" v-model="formValidate.comment">
+            <template #append>积分</template>
+          </el-input>
+        </el-form-item>
+      </div>
 
-      <el-form-item
-        class="label-item"
-        v-for="(point, index) in formValidate.pointSettingItems"
-        :key="index"
-        :label="'签到设置' + (index + 1)"
-      >
-        <div class="label-item">
-          <el-input-number :min="1" v-model="point.day" />
-          <el-input-number :min="0" v-model="point.point" />
-          <el-button plain type="danger" @click="delSign(point, index)">删除</el-button>
-          <span class="ml_10"
-            >签到<span class="theme_color">{{ point.day }}</span
-            >天，赠送<span class="theme_color">{{ point.point }}</span
-            >积分</span
-          >
-        </div>
-      </el-form-item>
-      <el-form-item label="操作：">
-        <el-button @click="addSign">新增签到</el-button>
-      </el-form-item>
-      <div class="label-btns">
+      <div class="setting-section">
+        <div class="section-title">签到奖励</div>
+        <el-form-item label="每日签到积分" prop="signIn">
+          <el-input class="w400" type="number" v-model="formValidate.signIn">
+            <template #append>积分</template>
+          </el-input>
+        </el-form-item>
+
+        <el-form-item
+          class="label-item"
+          v-for="(point, index) in formValidate.pointSettingItems"
+          :key="index"
+          :label="'签到设置' + (index + 1)"
+        >
+          <div class="label-item">
+            <el-input-number :min="1" v-model="point.day" />
+            <el-input-number :min="0" v-model="point.point" />
+            <el-button plain type="danger" @click="delSign(point, index)">删除</el-button>
+            <span class="ml_10"
+              >签到<span class="theme_color">{{ point.day }}</span
+              >天，赠送<span class="theme_color">{{ point.point }}</span
+              >积分</span
+            >
+          </div>
+        </el-form-item>
+        <el-form-item label=" ">
+          <div class="field-item">
+            <el-button @click="addSign">新增签到</el-button>
+            <span class="field-desc">连续签到满指定天数时，当天按规则赠送积分（替代当日基础签到积分），最多可添加4条</span>
+          </div>
+        </el-form-item>
+      </div>
+
+      <div class="submit-bar">
         <el-button type="primary" @click="submit('formValidate')">保存</el-button>
       </div>
     </el-form>
@@ -135,6 +146,38 @@ init();
 <style lang="scss" scoped>
 @import "./style.scss";
 
+.setting-page {
+  padding: 16px 0;
+}
+
+.setting-section {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 20px 24px 4px;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 20px;
+}
+
+.field-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.field-desc {
+  margin-top: 8px;
+  color: #999;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
 .label-item {
   display: flex;
 
@@ -147,25 +190,15 @@ init();
     width: 180px;
     margin-right: 5px;
   }
-
-  > .el-input {
-    width: 180px;
-    margin: 0 10px;
-  }
 }
 
-:deep(.el-input){
-  width: 180px !important;
+// 覆盖共享样式里 :deep(.el-input) 的 200px !important，仅统一普通输入框宽度，签到规则行内的数字框不受影响
+:deep(.el-input.w400) {
+  width: 400px !important;
 }
 
-.el-input {
-  width: 180px;
-  margin-right: 10px;
-}
-
-.label-btns {
-  :deep(.el-button){
-    margin-right: 10px;
-  }
+.submit-bar {
+  text-align: center;
+  margin: 24px 0 8px;
 }
 </style>
diff --git a/manager/src/views/sys/setting-manage/setting/SMS_SETTING.vue b/manager/src/views/sys/setting-manage/setting/SMS_SETTING.vue
index 561f17980..cbf06bb70 100644
--- a/manager/src/views/sys/setting-manage/setting/SMS_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/SMS_SETTING.vue
@@ -1,78 +1,89 @@
 <template>
-  <div class="layout">
-    <el-form ref="formValidateRef" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
-      <el-form-item label="是否测试模式" prop="isTestModel">
-        <el-radio-group v-model="formValidate.isTestModel">
-          <el-radio-button value="true">开启</el-radio-button>
-          <el-radio-button value="false">关闭</el-radio-button>
-        </el-radio-group>
-        <span class="desc">测试模式则不实际发送短信，短信验证码为：111111</span>
-      </el-form-item>
-      <el-form-item label="登录短信模板CODE" prop="loginTemplateCode">
-        <el-input v-model="formValidate.loginTemplateCode"/>
-      </el-form-item>
-      <el-form-item label="注册短信模板CODE" prop="registerTemplateCode">
-        <el-input v-model="formValidate.registerTemplateCode"/>
-      </el-form-item>
-      <el-form-item label="找回密码短信模板CODE" prop="findPasswordTemplateCode">
-        <el-input v-model="formValidate.findPasswordTemplateCode"/>
-      </el-form-item>
-      <el-form-item label="设置密码短信模板CODE" prop="walletPasswordTemplateCode">
-        <el-input v-model="formValidate.walletPasswordTemplateCode"/>
-      </el-form-item>
-      <el-form-item label="支付密码短信模板CODE" prop="payPasswordTemplateCode">
-        <el-input v-model="formValidate.payPasswordTemplateCode"/>
-      </el-form-item>
+  <div class="setting-page">
+    <el-form ref="formValidateRef" label-width="180px" label-position="right" :model="formValidate" :rules="ruleValidate">
+      <div class="setting-section">
+        <div class="section-title">基础设置</div>
+        <el-form-item label="是否测试模式" prop="isTestModel">
+          <div class="field-item">
+            <el-radio-group v-model="formValidate.isTestModel">
+              <el-radio-button value="true">开启</el-radio-button>
+              <el-radio-button value="false">关闭</el-radio-button>
+            </el-radio-group>
+            <span class="field-desc">测试模式则不实际发送短信，短信验证码为：111111</span>
+          </div>
+        </el-form-item>
+      </div>
 
-      <el-form-item label="平台" prop="endPoint">
-        <el-radio-group v-model="formValidate.type">
-          <el-radio-button value="ALI">阿里云</el-radio-button>
-          <el-radio-button value="HUAWEI">华为云</el-radio-button>
-          <el-radio-button value="TENCENT">腾讯云</el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-      <!--      阿里云-->
-      <el-form-item v-if="formValidate.type==='ALI'" label="accessKeyId" prop="accessKeyId">
-        <el-input v-model="formValidate.accessKeyId"/>
-      </el-form-item>
-      <el-form-item v-if="formValidate.type==='ALI'" label="accessSecret" prop="accessSecret">
-        <el-input v-model="formValidate.accessSecret"/>
-      </el-form-item>
-      <el-form-item v-if="formValidate.type==='ALI'" label="短信签名" prop="signName">
-        <el-input v-model="formValidate.signName"/>
-      </el-form-item>
+      <div class="setting-section">
+        <div class="section-title">短信模板</div>
+        <el-form-item label="登录短信模板CODE" prop="loginTemplateCode">
+          <el-input v-model="formValidate.loginTemplateCode"/>
+        </el-form-item>
+        <el-form-item label="注册短信模板CODE" prop="registerTemplateCode">
+          <el-input v-model="formValidate.registerTemplateCode"/>
+        </el-form-item>
+        <el-form-item label="找回密码短信模板CODE" prop="findPasswordTemplateCode">
+          <el-input v-model="formValidate.findPasswordTemplateCode"/>
+        </el-form-item>
+        <el-form-item label="设置密码短信模板CODE" prop="walletPasswordTemplateCode">
+          <el-input v-model="formValidate.walletPasswordTemplateCode"/>
+        </el-form-item>
+        <el-form-item label="支付密码短信模板CODE" prop="payPasswordTemplateCode">
+          <el-input v-model="formValidate.payPasswordTemplateCode"/>
+        </el-form-item>
+      </div>
 
-      <!--      华为云-->
-      <el-form-item v-if="formValidate.type==='HUAWEI'" label="APP_Key" prop="huaweiAppKey">
-        <el-input v-model="formValidate.huaweiAppKey"/>
-      </el-form-item>
-      <el-form-item v-if="formValidate.type==='HUAWEI'" label="APP_Secret" prop="huaweiAppSecret">
-        <el-input v-model="formValidate.huaweiAppSecret"/>
-      </el-form-item>
-      <el-form-item v-if="formValidate.type==='HUAWEI'" label="短信签名通道号" prop="huaweiSender">
-        <el-input v-model="formValidate.huaweiSender"/>
-      </el-form-item>
-      <el-form-item v-if="formValidate.type==='HUAWEI'" label="短信签名" prop="huaweiSignature">
-        <el-input v-model="formValidate.huaweiSignature"/>
-      </el-form-item>
+      <div class="setting-section">
+        <div class="section-title">平台配置</div>
+        <el-form-item label="平台" prop="endPoint">
+          <el-radio-group v-model="formValidate.type">
+            <el-radio-button value="ALI">阿里云</el-radio-button>
+            <el-radio-button value="HUAWEI">华为云</el-radio-button>
+            <el-radio-button value="TENCENT">腾讯云</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <!--      阿里云-->
+        <el-form-item v-if="formValidate.type==='ALI'" label="accessKeyId" prop="accessKeyId">
+          <el-input v-model="formValidate.accessKeyId"/>
+        </el-form-item>
+        <el-form-item v-if="formValidate.type==='ALI'" label="accessSecret" prop="accessSecret">
+          <el-input v-model="formValidate.accessSecret"/>
+        </el-form-item>
+        <el-form-item v-if="formValidate.type==='ALI'" label="短信签名" prop="signName">
+          <el-input v-model="formValidate.signName"/>
+        </el-form-item>
 
-      <!--      腾讯云-->
-      <el-form-item v-if="formValidate.type==='TENCENT'" label="用户的 SecretId" prop="tencentSecretId">
-        <el-input v-model="formValidate.tencentSecretId"/>
-      </el-form-item>
-      <el-form-item v-if="formValidate.type==='TENCENT'" label="用户的 SecretKey" prop="tencentSecretKey">
-        <el-input v-model="formValidate.tencentSecretKey"/>
-      </el-form-item>
-      <el-form-item v-if="formValidate.type==='TENCENT'" label="短信应用ID" prop="tencentSdkAppId">
-        <el-input v-model="formValidate.tencentSdkAppId"/>
-      </el-form-item>
-      <el-form-item v-if="formValidate.type==='TENCENT'" label="短信签名" prop="tencentSignName">
-        <el-input v-model="formValidate.tencentSignName"/>
-      </el-form-item>
+        <!--      华为云-->
+        <el-form-item v-if="formValidate.type==='HUAWEI'" label="APP_Key" prop="huaweiAppKey">
+          <el-input v-model="formValidate.huaweiAppKey"/>
+        </el-form-item>
+        <el-form-item v-if="formValidate.type==='HUAWEI'" label="APP_Secret" prop="huaweiAppSecret">
+          <el-input v-model="formValidate.huaweiAppSecret"/>
+        </el-form-item>
+        <el-form-item v-if="formValidate.type==='HUAWEI'" label="短信签名通道号" prop="huaweiSender">
+          <el-input v-model="formValidate.huaweiSender"/>
+        </el-form-item>
+        <el-form-item v-if="formValidate.type==='HUAWEI'" label="短信签名" prop="huaweiSignature">
+          <el-input v-model="formValidate.huaweiSignature"/>
+        </el-form-item>
 
-      <div class="label-btns">
+        <!--      腾讯云-->
+        <el-form-item v-if="formValidate.type==='TENCENT'" label="用户的 SecretId" prop="tencentSecretId">
+          <el-input v-model="formValidate.tencentSecretId"/>
+        </el-form-item>
+        <el-form-item v-if="formValidate.type==='TENCENT'" label="用户的 SecretKey" prop="tencentSecretKey">
+          <el-input v-model="formValidate.tencentSecretKey"/>
+        </el-form-item>
+        <el-form-item v-if="formValidate.type==='TENCENT'" label="短信应用ID" prop="tencentSdkAppId">
+          <el-input v-model="formValidate.tencentSdkAppId"/>
+        </el-form-item>
+        <el-form-item v-if="formValidate.type==='TENCENT'" label="短信签名" prop="tencentSignName">
+          <el-input v-model="formValidate.tencentSignName"/>
+        </el-form-item>
+      </div>
+
+      <div class="submit-bar">
         <el-button type="primary" @click="submit('formValidateRef')">保存</el-button>
-
       </div>
     </el-form>
   </div>
@@ -157,17 +168,45 @@ init();
 <style lang="scss" scoped>
 @import "./style.scss";
 
-.label-item {
+.setting-page {
+  padding: 16px 0;
+}
+
+.setting-section {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 20px 24px 4px;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 20px;
+}
+
+.field-item {
   display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
-:deep(.el-input){
-  width: 300px !important;
-  margin: 0 10px;
+.field-desc {
+  margin-top: 8px;
+  color: #999;
+  font-size: 12px;
+  line-height: 1.4;
 }
 
-.el-input {
-  width: 300px;
-  margin-right: 10px;
+// 覆盖共享样式里 :deep(.el-input) 的 200px !important，统一输入框宽度
+:deep(.el-input) {
+  width: 400px !important;
+}
+
+.submit-bar {
+  text-align: center;
+  margin: 24px 0 8px;
 }
 </style>
diff --git a/manager/src/views/sys/setting-manage/setting/WITHDRAWAL_SETTING.vue b/manager/src/views/sys/setting-manage/setting/WITHDRAWAL_SETTING.vue
index ae49c89a8..a698d322f 100644
--- a/manager/src/views/sys/setting-manage/setting/WITHDRAWAL_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/WITHDRAWAL_SETTING.vue
@@ -26,6 +26,7 @@
             v-model="formValidate.withdrawRule"
             type="textarea"
             :rows="6"
+            resize="none"
             placeholder="请输入提现规则说明（需包含可提现额度、每日提现次数、提现时间、到账时间等，以满足微信审核要求）"
           />
           <div class="rule-tip">展示在移动端/小程序提现页面底部，用于满足微信审核对提现规则公示的要求。</div>