refactor(after-sale): 重构售后单详情页面为现代化布局

- 将页面从简单的 dl/dd 结构重构为基于 Element Plus 的卡片式两栏布局 - 新增顶部导航栏与状态看板，集成可视化流程步骤条 - 使用 el-descriptions 和 el-form 替代原有手写表单结构 - 添加动态步骤计算逻辑，支持仅退款和退货退款两种流程 - 新增复制单号、卡号格式化、跳转关联订单等辅助功能 - 物流弹窗改用 el-timeline 展示轨迹，优化请求时机为数据加载后打开 - 完善表单校验与操作 loading 状态，增加异常捕获处理 - 样式改为 scoped 并全面升级视觉设计
2026-11-06 17:09:08 +08:00 · 2026-11-02 16:53:49 +08:00
parent 7db1ee4fb7
commit 22f3e9b5e9
11 changed files with 1398 additions and 1306 deletions
--- 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}`);
 };
--- 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) {
--- 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: '首页',
--- a/manager/src/views/member/message-manage/weChatMessageManager.vue
+++ b/manager/src/views/member/message-manage/weChatMessageManager.vue
@@ -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>
--- a/manager/src/views/order/order/orderDetail.vue
+++ b/manager/src/views/order/order/orderDetail.vue
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>