From bf557bb00bb2e25337b28825f1b2f48ec5c65054 Mon Sep 17 00:00:00 2001
From: taiyi <shuobo1224@qq.com>
Date: Sat, 30 May 2026 14:08:36 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E6=81=A2=E5=A4=8D=E8=A2=AB=E6=88=AA?=
 =?UTF-8?q?=E6=96=AD=E7=9A=84=E4=B8=9A=E5=8A=A1=E5=91=98=E7=AB=AF=20Vue=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E4=BF=AE=E5=A4=8D=20Vite=20?=
 =?UTF-8?q?=E7=BC=96=E8=AF=91=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

OrderDetailPage.vue、OrdersPage.vue、OrderFormPage.vue 在此前的提交中被
意外截断（script 标签丢失、模板内容残缺），导致 Vite 报 Element is missing end tag。
从完整版本恢复这三个文件，并在 mockApi.js 中补回 fetchOrdersPage 函数。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/web-sales/src/mockApi.js             |   45 +
 .../web-sales/src/views/OrderDetailPage.vue   |  646 +++++++-
 .../web-sales/src/views/OrderFormPage.vue     | 1302 ++++++++++++++++-
 frontend/web-sales/src/views/OrdersPage.vue   |  747 +++++++++-
 4 files changed, 2688 insertions(+), 52 deletions(-)

diff --git a/frontend/web-sales/src/mockApi.js b/frontend/web-sales/src/mockApi.js
index 3c5d358..38389db 100644
--- a/frontend/web-sales/src/mockApi.js
+++ b/frontend/web-sales/src/mockApi.js
@@ -131,6 +131,51 @@ export async function fetchCurrentUser() {
   return request("/api/auth/me");
 }
 
+/**
+ * 标准化订单列表查询参数
+ * @param {Object} [filters={}] - 原始筛选条件
+ * @returns {Object} 标准化后的查询参数
+ */
+function normalizeOrderFilters(filters = {}) {
+  return {
+    order_status: filters.order_status || undefined,
+    customer_name: filters.customer_name?.trim() || undefined,
+    customer_mobile: filters.customer_mobile?.trim() || undefined,
+    order_source: filters.order_source?.trim() || undefined,
+    start_time: filters.start_date ? `${filters.start_date} 00:00:00` : undefined,
+    end_time: filters.end_date ? `${filters.end_date} 23:59:59` : undefined,
+    page_no: filters.page_no || 1,
+    page_size: filters.page_size || 20,
+  };
+}
+
+/**
+ * 分页查询业务员订单列表
+ * @param {Object} [filters={}] - 筛选条件
+ * @returns {Promise<Object>} 包含 orderRows、total、isMock 的结果
+ */
+export async function fetchOrdersPage(filters = {}) {
+  const query = buildQuery(normalizeOrderFilters(filters));
+  const data = await request(`/api/orders?${query}`);
+  return {
+    total: data.total || 0,
+    pageNo: data.page_no || 1,
+    pageSize: data.page_size || 20,
+    orderRows: (data.list || []).map((item) => ({
+      orderId: item.order_id,
+      orderNo: item.order_no,
+      customer: item.customer_name,
+      mobile: maskMobile(item.customer_mobile),
+      status: mapOrderStatus(item.order_status),
+      rawStatus: item.order_status,
+      source: item.order_source || "-",
+      amount: Number(item.sale_price_total || 0).toFixed(2),
+      createdAt: item.created_at || "-",
+    })),
+    isMock: false,
+  };
+}
+
 // ========== 下拉选项数据 ==========
 
 /**
diff --git a/frontend/web-sales/src/views/OrderDetailPage.vue b/frontend/web-sales/src/views/OrderDetailPage.vue
index 6f2e796..ceb16c4 100644
--- a/frontend/web-sales/src/views/OrderDetailPage.vue
+++ b/frontend/web-sales/src/views/OrderDetailPage.vue
@@ -1,11 +1,4 @@
-<!--
-  OrderDetailPage.vue - 订单详情页面
-  职责：展示单个订单的完整信息，包括基础信息、状态、明细与审批记录。
-  支持从订单列表或弹窗模式打开，提供关闭按钮返回上级页面。
--->
 <template>
-import { useToast } from "../composables/useToast";
-const toast = useToast();
   <section class="overlay" :class="{ modal: isModal }">
     <section class="page">
       <nav class="breadcrumb">
@@ -21,9 +14,648 @@ const toast = useToast();
           <p class="desc">集中展示订单状态、基础信息、明细与审批记录，便于查看与追踪。</p>
         </div>
         <div class="hero-actions">
+          <span class="mode-tag" :class="{ fallback: isMock }">
+            {{ isMock ? "演示数据" : "真实接口" }}
+          </span>
           <button class="close-btn" @click="handleClose">关闭</button>
         </div>
       </div>
 
     <p v-if="loading" class="loading">正在加载订单详情...</p>
 
+      <div v-if="message" class="message-box" :class="{ error: messageType === 'error' }">
+        {{ message }}
+      </div>
+
+      <div v-if="!loading && orderInfo" class="summary-card">
+      <div class="summary-main">
+        <strong>{{ orderInfo.orderNo }}</strong>
+        <span>{{ orderInfo.statusText }}</span>
+      </div>
+      <div class="summary-meta">
+        <span>客户：{{ orderMeta.customer }}</span>
+        <span>物流：{{ orderMeta.logistics }}</span>
+        <span>工厂：{{ orderMeta.factory }}</span>
+      </div>
+      <div class="action-hint">草稿 / 驳回状态可直接提交审核；如进入履约阶段，取消将保留审批与留痕。{{ cancelHint }}</div>
+      <div class="action-group">
+        <button
+          :disabled="actionLoading || !canSubmit(orderInfo.rawStatus) || isMock"
+          @click="handleSubmit"
+        >
+          {{ actionLoading === "submit" ? "提交中..." : "提交审核" }}
+        </button>
+        <button
+          class="secondary-btn"
+          :disabled="actionLoading || !canEdit(orderInfo.rawStatus) || isMock"
+          @click="handleEdit"
+        >
+          编辑草稿
+        </button>
+        <button
+          class="danger-btn"
+          :disabled="actionLoading || !canCancel(orderInfo.rawStatus) || isMock"
+          @click="handleCancel"
+        >
+          {{ actionLoading === "cancel" ? "取消中..." : "取消订单" }}
+        </button>
+      </div>
+    </div>
+
+      <div v-if="!loading" class="grid">
+        <article v-for="block in blocks" :key="block.title" class="card">
+          <h3>{{ block.title }}</h3>
+          <div class="fields">
+            <div v-for="(field, fi) in block.fields" :key="fi" class="field-row">
+              <span class="field-label">{{ field.label }}</span>
+              <span class="field-value" :class="{ highlight: field.highlight }">{{ field.value }}</span>
+            </div>
+          </div>
+        </article>
+      </div>
+
+        <section v-if="!loading" class="detail-panel">
+        <div class="panel-header">
+          <h3>订单明细</h3>
+          <span>展示真实订单商品内容</span>
+        </div>
+        <div v-if="orderItems.length" class="detail-table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>产品名称</th>
+                <th>规格</th>
+                <th>单位</th>
+                <th>数量</th>
+                <th>销售单价</th>
+                <th>成本单价</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in orderItems" :key="item.id">
+                <td>{{ item.productName }}</td>
+                <td>{{ item.specification }}</td>
+                <td>{{ item.unit }}</td>
+                <td>{{ item.quantity }}</td>
+                <td>{{ item.salePrice }}</td>
+                <td>{{ item.costPrice }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div v-else class="empty-box">当前订单暂无明细数据</div>
+      </section>
+
+        <section v-if="!loading" class="detail-panel">
+        <div class="panel-header">
+          <h3>审批记录</h3>
+          <span>展示真实审批流转历史</span>
+        </div>
+        <div v-if="approveLogs.length" class="log-list">
+          <article v-for="item in approveLogs" :key="item.id" class="log-card">
+            <div class="log-row">
+              <strong>{{ item.approveTime }}</strong>
+              <span>{{ item.approveType }}</span>
+              <span>{{ item.approveResult }}</span>
+              <span>{{ item.afterStatus }}</span>
+            </div>
+            <p>{{ item.approveOpinion }}</p>
+          </article>
+        </div>
+        <div v-else class="empty-box">暂无审批记录</div>
+      </section>
+    </section>
+
+    <ConfirmModal
+      :visible="showSubmitConfirm"
+      title="提交审核"
+      :message="`确定将订单 ${orderInfo?.orderNo} 提交审核吗？提交后将进入审批流程。`"
+      confirm-text="确认提交"
+      @confirm="doSubmit"
+      @cancel="showSubmitConfirm = false"
+    />
+
+    <div v-if="showCancelConfirm" class="modal-mask" @click.self="showCancelConfirm = false">
+      <div class="modal-box">
+        <h3>取消订单</h3>
+        <p>确定要取消订单 <strong>{{ orderInfo?.orderNo }}</strong> 吗？取消后将进入审批流程，操作不可撤回。</p>
+        <label class="reason-label">
+          <span>取消原因</span>
+          <input v-model.trim="cancelReason" type="text" placeholder="请输入取消原因" />
+        </label>
+        <div class="modal-actions">
+          <button class="cancel-btn" @click="showCancelConfirm = false">返回</button>
+          <button class="confirm-btn danger" :disabled="!cancelReason" @click="doCancel">确认取消</button>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { RouterLink, useRoute, useRouter } from "vue-router";
+
+import ConfirmModal from "../components/ConfirmModal.vue";
+import { cancelOrder, fetchOrderDetail, submitOrder } from "../mockApi";
+
+const route = useRoute();
+const router = useRouter();
+const loading = ref(true);
+const isMock = ref(false);
+const blocks = ref([]);
+const orderInfo = ref(null);
+const orderItems = ref([]);
+const approveLogs = ref([]);
+const actionLoading = ref("");
+const showSubmitConfirm = ref(false);
+const showCancelConfirm = ref(false);
+const cancelReason = ref("");
+const message = ref("");
+const messageType = ref("success");
+const orderMeta = ref({ customer: "-", logistics: "-", factory: "-" });
+const isModal = computed(() => route.query.modal === "1");
+
+function canSubmit(status) {
+  return ["draft", "rejected"].includes(status);
+}
+
+function canCancel(status) {
+  return ["draft", "pending_approve", "approved", "rejected", "cancel_pending", "pending_factory"].includes(status);
+}
+
+function canEdit(status) {
+  return ["draft", "rejected"].includes(status);
+}
+
+const cancelHint = computed(() => {
+  if (!orderInfo.value) return "";
+  if (canCancel(orderInfo.value.rawStatus)) {
+    return "当前状态允许发起取消申请，提交后进入审批流转。";
+  }
+  return "当前状态不支持直接取消，请联系管理层处理。";
+});
+
+async function loadDetail() {
+  const data = await fetchOrderDetail(route.params.id);
+  blocks.value = data.blocks;
+  orderInfo.value = data.orderInfo;
+  orderItems.value = data.orderItems || [];
+  approveLogs.value = data.approveLogs || [];
+  isMock.value = Boolean(data.isMock);
+  orderMeta.value = {
+    customer: data.blocks?.[1]?.content || "-",
+    logistics: data.blocks?.[3]?.content || "-",
+    factory: data.blocks?.[3]?.content || "-",
+  };
+}
+
+function handleSubmit() {
+  if (!orderInfo.value?.orderId || isMock.value) {
+    message.value = "当前是演示数据模式，暂不执行真实提交。";
+    messageType.value = "error";
+    return;
+  }
+  showSubmitConfirm.value = true;
+}
+
+async function doSubmit() {
+  showSubmitConfirm.value = false;
+  const orderId = orderInfo.value.orderId;
+  actionLoading.value = "submit";
+  try {
+    await submitOrder(orderId);
+    await loadDetail();
+    message.value = `订单 ${orderInfo.value.orderNo} 已提交审核。`;
+    messageType.value = "success";
+  } catch (error) {
+    message.value = error.message || "提交审核失败";
+    messageType.value = "error";
+  } finally {
+    actionLoading.value = "";
+  }
+}
+
+async function handleEdit() {
+  if (!orderInfo.value?.orderId || isMock.value) {
+    message.value = "当前是演示数据模式，暂不执行真实编辑。";
+    messageType.value = "error";
+    return;
+  }
+  router.push(`/orders/create?edit=${orderInfo.value.orderId}`);
+}
+
+function handleCancel() {
+  if (!orderInfo.value?.orderId || isMock.value) {
+    message.value = "当前是演示数据模式，暂不执行真实取消。";
+    messageType.value = "error";
+    return;
+  }
+  cancelReason.value = "";
+  showCancelConfirm.value = true;
+}
+
+async function doCancel() {
+  if (!cancelReason.value) return;
+  showCancelConfirm.value = false;
+  const orderId = orderInfo.value.orderId;
+  actionLoading.value = "cancel";
+  try {
+    await cancelOrder(orderId, cancelReason.value);
+    await loadDetail();
+    message.value = `订单 ${orderInfo.value.orderNo} 已发起取消。`;
+    messageType.value = "success";
+  } catch (error) {
+    message.value = error.message || "取消订单失败";
+    messageType.value = "error";
+  } finally {
+    actionLoading.value = "";
+    cancelReason.value = "";
+  }
+}
+
+function handleClose() {
+  router.push("/orders");
+}
+
+onMounted(async () => {
+  await loadDetail();
+  loading.value = false;
+});
+</script>
+
+<style scoped>
+.page {
+  display: grid;
+  gap: 18px;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #64748b;
+}
+
+.breadcrumb a {
+  color: #1d4ed8;
+  text-decoration: none;
+}
+
+.breadcrumb a:hover {
+  text-decoration: underline;
+}
+
+.breadcrumb .sep {
+  color: #d1d5db;
+}
+
+.page-hero,
+.summary-card,
+.card,
+.detail-panel {
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid #e5e7eb;
+  border-radius: 22px;
+  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
+}
+
+.page-hero {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 24px;
+}
+
+.eyebrow {
+  display: inline-flex;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: #dbeafe;
+  color: #1d4ed8;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+h2 {
+  margin: 12px 0 8px;
+  font-size: 30px;
+}
+
+.desc,
+.loading,
+.panel-header span,
+.summary-meta {
+  color: #64748b;
+}
+
+.mode-tag {
+  align-self: flex-start;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: #dcfce7;
+  color: #166534;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.mode-tag.fallback {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.message-box {
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: #dcfce7;
+  color: #166534;
+}
+
+.message-box.error {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.summary-card,
+.card,
+.detail-panel {
+  padding: 20px;
+}
+
+.summary-card {
+  display: grid;
+  gap: 12px;
+}
+
+.summary-main {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+}
+
+.summary-main strong {
+  font-size: 22px;
+}
+
+.summary-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.action-group {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+.action-group button {
+  border: 1px solid #d1d5db;
+  background: #fff;
+  border-radius: 999px;
+  padding: 8px 12px;
+}
+
+.action-group button:disabled {
+  color: #9ca3af;
+  background: #f3f4f6;
+}
+
+.danger-btn {
+  color: #b91c1c;
+  border-color: #fecaca;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 12px;
+}
+
+.fields { display: grid; gap: 8px; }
+
+.field-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 8px;
+  padding: 6px 0;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.field-row:last-child { border-bottom: 0; }
+
+.field-label {
+  color: #64748b;
+  font-size: 13px;
+  flex-shrink: 0;
+}
+
+.field-value {
+  color: #0f172a;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: right;
+}
+
+.field-value.highlight {
+  color: #1d4ed8;
+  font-weight: 700;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.detail-table-wrap {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  text-align: left;
+  padding: 12px 10px;
+  border-bottom: 1px solid #e5e7eb;
+  vertical-align: top;
+}
+
+.log-list {
+  display: grid;
+  gap: 10px;
+}
+
+.log-card {
+  border: 1px solid #dbe3ef;
+  border-radius: 16px;
+  padding: 12px;
+  background: linear-gradient(180deg, #ffffff, #f8fbff);
+}
+
+.log-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 8px;
+  color: #374151;
+}
+
+.empty-box {
+  padding: 20px;
+  border: 1px dashed #d1d5db;
+  border-radius: 16px;
+  color: #6b7280;
+  text-align: center;
+}
+
+h3 {
+  margin: 0 0 10px;
+  font-size: 16px;
+}
+
+p {
+  margin: 0;
+  line-height: 1.7;
+  color: #4b5563;
+}
+
+@media (max-width: 960px) {
+  .page-hero,
+  .summary-main,
+  .panel-header,
+  .action-group {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.overlay {
+  position: relative;
+}
+
+.overlay.modal {
+  padding: 24px;
+  background: rgba(15, 23, 42, 0.42);
+  min-height: 100vh;
+}
+
+.overlay.modal .page {
+  max-width: 1180px;
+  margin: 0 auto;
+  background: #fff;
+  border-radius: 24px;
+  padding: 16px;
+  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
+}
+
+.hero-actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.close-btn {
+  border: 1px solid #d1d5db;
+  background: #fff;
+  border-radius: 999px;
+  padding: 8px 12px;
+}
+
+@media (max-width: 640px) {
+  .page {
+    gap: 10px;
+  }
+
+  .page-hero,
+  .summary-card,
+  .card,
+  .detail-panel {
+    padding: 12px;
+    border-radius: 14px;
+  }
+
+  h2 {
+    font-size: 22px;
+    margin: 10px 0 6px;
+  }
+
+  .desc,
+  .loading,
+  .panel-header span,
+  .summary-meta,
+  p,
+  .message-box,
+  .mode-tag {
+    font-size: 11px;
+  }
+
+  .summary-main strong {
+    font-size: 17px;
+  }
+
+  .summary-card,
+  .grid,
+  .log-list {
+    gap: 8px;
+  }
+
+  .action-group {
+    width: 100%;
+    gap: 8px;
+  }
+
+  .action-group button {
+    flex: 1;
+    padding: 7px 10px;
+    font-size: 11px;
+  }
+
+  th,
+  td {
+    padding: 6px 4px;
+    font-size: 11px;
+  }
+
+  .log-card {
+    padding: 10px;
+    border-radius: 12px;
+  }
+}
+
+.modal-mask {
+  position: fixed; inset: 0; z-index: 1000;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(15,23,42,0.45); padding: 16px;
+}
+
+.modal-box {
+  background: #fff; border-radius: 18px; padding: 28px 24px 20px;
+  max-width: 400px; width: 100%;
+  box-shadow: 0 24px 60px rgba(15,23,42,0.18);
+}
+
+.modal-box h3 { margin: 0 0 10px; font-size: 18px; color: #0f172a; }
+.modal-box p { margin: 0 0 16px; font-size: 14px; color: #475569; line-height: 1.6; }
+
+.reason-label { display: grid; gap: 6px; margin-bottom: 16px; }
+.reason-label span { color: #374151; font-size: 13px; font-weight: 600; }
+.reason-label input { border: 1px solid #d1d5db; border-radius: 10px; padding: 10px 12px; }
+
+.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
+.cancel-btn, .confirm-btn { border: 1px solid #d1d5db; border-radius: 10px; padding: 8px 18px; font-size: 14px; font-weight: 600; cursor: pointer; }
+.cancel-btn { background: #fff; color: #475569; }
+.confirm-btn { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; border-color: transparent; }
+.confirm-btn.danger { background: linear-gradient(135deg, #dc2626, #b91c1c); }
+.confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+</style>
diff --git a/frontend/web-sales/src/views/OrderFormPage.vue b/frontend/web-sales/src/views/OrderFormPage.vue
index 1ae17e1..9deeb4c 100644
--- a/frontend/web-sales/src/views/OrderFormPage.vue
+++ b/frontend/web-sales/src/views/OrderFormPage.vue
@@ -1,21 +1,1287 @@
-<!--
-  OrderFormPage.vue - 订单新建/编辑表单页面
-  职责：提供订单录入表单，支持新建和编辑两种模式。
-  按客户信息、订单信息、物流信息与回扣信息分区填写，减少录单认知成本。
--->
 <template>
-import { useToast } from "../composables/useToast";
-const toast = useToast();
   <section class="page">
-<!--    <div class="page-hero">-->
-<!--      <div>-->
-<!--        <span class="eyebrow">录单中心</span>-->
-<!--        <h2>{{ isEditMode ? '编辑订单' : '新建订单' }}</h2>-->
-<!--        <p class="tips">按客户信息、订单信息、物流信息与回扣信息分区填写，减少录单认知成本。</p>-->
-<!--      </div>-->
-<!--      <div class="progress-card">-->
-<!--        <span>当前流程</span>-->
-<!--        <strong>4 个信息分区</strong>-->
-<!--      </div>-->
-<!--    </div>-->
+    <div class="page-hero">
+      <div>
+        <span class="eyebrow">录单中心</span>
+        <h2>{{ isEditMode ? '编辑订单' : '新建订单' }}</h2>
+        <p class="tips">按客户信息、订单信息、物流信息与回扣信息分区填写，减少录单认知成本。</p>
+      </div>
+      <div class="progress-card">
+        <span>当前流程</span>
+        <strong>4 个信息分区</strong>
+      </div>
+    </div>
 
+    <div v-if="message" class="message-box" :class="{ error: messageType === 'error' }">
+      {{ message }}
+    </div>
+
+    <!-- 智能填单 -->
+    <section v-if="!parsedResult" class="form-section parse-card">
+      <div class="section-header">
+        <h3>智能填单</h3>
+        <span v-if="isMockMode" class="mode-tag fallback">演示数据</span>
+      </div>
+      <div class="parse-tabs">
+        <button type="button" :class="{ active: parseMode === 'text' }" @click="parseMode = 'text'">粘贴文本</button>
+        <button type="button" :class="{ active: parseMode === 'image' }" @click="parseMode = 'image'">拍照/上传图片</button>
+      </div>
+      <div v-if="parseMode === 'text'" class="parse-text-area">
+        <textarea v-model="parseInput" rows="5" placeholder="请粘贴订单相关文本（微信聊天记录、电话记录等）"></textarea>
+        <div class="parse-actions">
+          <button type="button" class="primary-btn" :disabled="parseLoading || !parseInput.trim()" @click="handleParseSubmit">
+            {{ parseLoading ? '解析中...' : '智能解析' }}
+          </button>
+        </div>
+      </div>
+      <div v-else class="parse-image-area">
+        <div v-if="parseImagePreview" class="parse-image-preview">
+          <img :src="parseImagePreview" alt="预览" />
+        </div>
+        <label class="ghost-btn parse-upload-label">
+          选择图片
+          <input type="file" accept="image/*" capture="environment" style="display:none" @change="handleParseImageChange" />
+        </label>
+        <div class="parse-actions">
+          <button type="button" class="primary-btn" :disabled="parseLoading || !parseImageFile" @click="handleParseImageFile">
+            {{ parseLoading ? '识别中...' : '上传识别' }}
+          </button>
+        </div>
+      </div>
+    </section>
+
+    <!-- 解析结果预览 -->
+    <section v-if="parsedResult" class="form-section parse-result-card">
+      <div class="section-header">
+        <h3>智能填单 - 解析结果</h3>
+        <div class="parse-result-meta">
+          <span v-if="isMockMode" class="mode-tag fallback">演示数据</span>
+          <span class="confidence-tag">置信度 {{ Math.round(parsedResult.confidence * 100) }}%</span>
+        </div>
+      </div>
+      <div class="parse-result-fields">
+        <label>
+          <span>客户姓名</span>
+          <input v-model="parseEditable.customer_name" type="text" />
+        </label>
+        <label>
+          <span>客户手机号</span>
+          <input v-model="parseEditable.customer_mobile" type="text" />
+        </label>
+        <label>
+          <span>客户地址</span>
+          <input v-model="parseEditable.customer_address" type="text" />
+        </label>
+        <label>
+          <span>订单来源</span>
+          <input v-model="parseEditable.order_source" type="text" placeholder="可选" />
+        </label>
+        <label>
+          <span>配送方式</span>
+          <input v-model="parseEditable.delivery_type" type="text" placeholder="可选" />
+        </label>
+        <label>
+          <span>备注</span>
+          <input v-model="parseEditable.remark" type="text" placeholder="可选" />
+        </label>
+      </div>
+      <div v-if="parseEditable.items.length" class="parse-result-items">
+        <h4>产品明细</h4>
+        <div v-for="(item, idx) in parseEditable.items" :key="idx" class="parse-item-card">
+          <div class="parse-item-main">
+            <strong>{{ item.product_name || '未识别产品' }}</strong>
+            <span>{{ item.specification || '-' }} / {{ item.unit || '-' }} / {{ item.quantity || 0 }} / 单价 {{ item.sale_price || 0 }}</span>
+          </div>
+          <div v-if="parsedResult.product_matches?.[idx]?.candidates?.length" class="parse-item-candidates">
+            <span class="candidate-label">匹配建议：</span>
+            <button
+              v-for="(c, ci) in parsedResult.product_matches[idx].candidates"
+              :key="ci"
+              type="button"
+              class="candidate-btn"
+              :class="{ selected: item._selectedCandidate?.product_id === c.product_id }"
+              @click="handleProductCandidateSelect(idx, c)"
+            >
+              {{ c.product_name }} / {{ c.specification }} ({{ Math.round(c.match_score * 100) }}%)
+            </button>
+          </div>
+        </div>
+      </div>
+      <div v-if="parsedResult.warnings?.length" class="parse-warnings">
+        <p v-for="(w, wi) in parsedResult.warnings" :key="wi">{{ w }}</p>
+      </div>
+      <div class="parse-actions">
+        <button type="button" class="ghost-btn" @click="handleResetParse">重新解析</button>
+        <button type="button" class="primary-btn" @click="handleConfirmParse">确认填入表单</button>
+      </div>
+    </section>
+
+    <form class="form-grid" @submit.prevent="handleSubmit">
+      <section class="form-section">
+        <div class="section-header toggle-header" @click="toggleSection('customer')">
+          <div class="toggle-left">
+            <span class="toggle-icon">{{ openSection === 'customer' ? '−' : '+' }}</span>
+            <h3>客户信息</h3>
+          </div>
+          <span>先选择客户，再补充信息</span>
+        </div>
+        <div v-if="openSection === 'customer'" class="section-grid">
+          <label>
+            <span>选择客户</span>
+            <select v-model="selectedCustomerId" @change="handleCustomerChange">
+              <option value="">请选择客户</option>
+              <option v-for="option in customerOptions" :key="option.value" :value="String(option.value)">
+                {{ option.label }}
+              </option>
+            </select>
+          </label>
+          <label>
+            <span>客户姓名</span>
+            <input v-model.trim="form.customer_name" type="text" placeholder="请输入客户姓名" @blur="handleCustomerInputBlur" />
+          </label>
+          <label>
+            <span>客户手机号</span>
+            <input v-model.trim="form.customer_mobile" type="text" placeholder="请输入客户手机号" @blur="handleCustomerInputBlur" />
+          </label>
+          <label>
+            <span>客户地址</span>
+            <input v-model.trim="form.customer_address" type="text" placeholder="请输入客户地址" />
+          </label>
+          <label class="checkline">
+            <input v-model="form.auto_sync_customer" type="checkbox" />
+            <span>新客户自动同步到客户库</span>
+          </label>
+        </div>
+        <p v-if="customerHint" class="hint-line">{{ customerHint }}</p>
+      </section>
+
+      <section class="form-section">
+        <div class="section-header toggle-header" @click="toggleSection('order')">
+          <div class="toggle-left">
+            <span class="toggle-icon">{{ openSection === 'order' ? '−' : '+' }}</span>
+            <h3>订单信息</h3>
+          </div>
+          <span>高频字段前置</span>
+        </div>
+        <div v-if="openSection === 'order'" class="section-grid">
+          <label>
+            <span>订单来源</span>
+            <input v-model.trim="form.order_source" type="text" placeholder="例如：线下拜访" />
+          </label>
+          <label>
+            <span>配送方式</span>
+            <input v-model.trim="form.delivery_type" type="text" placeholder="例如：工厂直送" />
+          </label>
+          <label>
+            <span>选择工厂</span>
+            <select v-model.number="form.factory_id">
+              <option :value="null">请选择工厂</option>
+              <option v-for="option in factoryOptions" :key="option.value" :value="option.value">
+                {{ option.label }}
+              </option>
+            </select>
+          </label>
+          <label>
+            <span>备注</span>
+            <textarea v-model.trim="form.remark" rows="3" placeholder="请输入订单备注"></textarea>
+          </label>
+        </div>
+      </section>
+
+      <section class="form-section">
+        <div class="section-header toggle-header" @click="toggleSection('logistics')">
+          <div class="toggle-left">
+            <span class="toggle-icon">{{ openSection === 'logistics' ? '−' : '+' }}</span>
+            <h3>物流信息</h3>
+          </div>
+          <span>费用字段统一管理</span>
+        </div>
+        <div v-if="openSection === 'logistics'" class="section-grid">
+          <label>
+            <span>运费合计</span>
+            <input v-model.number="form.freight_total" type="number" min="0" step="0.01" />
+          </label>
+          <label>
+            <span>税费合计</span>
+            <input v-model.number="form.tax_total" type="number" min="0" step="0.01" />
+          </label>
+          <label>
+            <span>其他费用</span>
+            <input v-model.number="form.other_fee_total" type="number" min="0" step="0.01" />
+          </label>
+          <label>
+            <span>提成金额</span>
+            <input v-model.number="form.commission_amount" type="number" min="0" step="0.01" />
+          </label>
+        </div>
+      </section>
+
+      <section class="form-section full-width">
+        <div class="section-header toggle-header" @click="toggleSection('items')">
+          <div class="toggle-left">
+            <span class="toggle-icon">{{ openSection === 'items' ? '−' : '+' }}</span>
+            <h3>订单明细</h3>
+          </div>
+          <div class="section-actions">
+            <span>支持一次录入多个产品</span>
+            <button type="button" class="ghost-btn small-btn" @click.stop="addItemRow">添加产品</button>
+          </div>
+        </div>
+        <div v-if="openSection === 'items'">
+        <div v-for="(row, index) in items" :key="row.rowKey" class="item-card">
+          <div class="item-card-header">
+            <h4>产品 {{ index + 1 }}</h4>
+            <button v-if="items.length > 1" type="button" class="link-btn danger-link" @click="removeItemRow(index)">删除</button>
+          </div>
+          <div class="section-grid">
+            <label>
+              <span>选择产品</span>
+              <select v-model="row.selectedProductId" @change="handleProductChange(row)">
+                <option value="">请选择产品</option>
+                <option v-for="option in productOptions" :key="option.value" :value="String(option.value)">
+                  {{ option.label }}
+                </option>
+              </select>
+            </label>
+            <label>
+              <span>产品名称</span>
+              <input v-model.trim="row.product_name" type="text" placeholder="请输入产品名称" />
+            </label>
+            <label>
+              <span>规格</span>
+              <input v-model.trim="row.specification" type="text" placeholder="请输入规格" />
+            </label>
+            <label>
+              <span>单位</span>
+              <input v-model.trim="row.unit" type="text" placeholder="例如：吨" />
+            </label>
+            <label>
+              <span>数量</span>
+              <input v-model.number="row.quantity" type="number" min="0.01" step="0.01" />
+            </label>
+            <label>
+              <span>销售单价</span>
+              <input v-model.number="row.sale_price" type="number" min="0" step="0.01" />
+            </label>
+            <label>
+              <span>成本单价</span>
+              <input v-model.number="row.cost_price" type="number" min="0" step="0.01" />
+            </label>
+          </div>
+          <!-- 报价引擎：动态尺寸输入 + 附加费 -->
+          <div v-if="row.pricingRule" class="pricing-section">
+            <div class="pricing-header">
+              <h5>报价计算</h5>
+              <span class="formula-note">{{ row.pricingRule.formula_note }}</span>
+            </div>
+            <div class="section-grid">
+              <label v-for="input in row.pricingInputs" :key="input.key">
+                <span>{{ input.label }} <small v-if="input.unit_options">({{ input.unit_options.join('/') }})</small></span>
+                <div class="input-with-unit">
+                  <input v-model.number="row.pricingInputValues[input.key]" type="number" min="0" step="0.01"
+                    :placeholder="input.label" @input="handlePricingInput(row)" />
+                  <select v-if="input.unit_options && input.unit_options.length > 1"
+                    v-model="row.pricingInputUnits[input.key]" @change="handlePricingInput(row)">
+                    <option v-for="u in input.unit_options" :key="u" :value="u">{{ u }}</option>
+                  </select>
+                </div>
+              </label>
+            </div>
+            <div v-if="row.surchargeOptions.length" class="surcharge-section">
+              <span class="surcharge-label">可选附加费：</span>
+              <label v-for="opt in row.surchargeOptions" :key="opt.key" class="surcharge-check">
+                <input type="checkbox" v-model="row.surchargeSelections[opt.key]" @change="handlePricingInput(row)" />
+                {{ opt.name }} ({{ opt.method === 'per_sqm' ? '¥' + opt.price + '/㎡' : '¥' + opt.price + '/件' }})
+              </label>
+            </div>
+            <div v-if="row.pricingLoading" class="pricing-loading">计算中...</div>
+            <div v-if="row.pricingResult" class="pricing-result">
+              <div class="pricing-row"><span>面积</span><strong>{{ row.pricingResult.area_sqm }} ㎡</strong></div>
+              <div class="pricing-row"><span>基础成本</span><strong>¥{{ row.pricingResult.base_cost }}</strong></div>
+              <div v-if="row.pricingResult.total_surcharge > 0" class="pricing-row"><span>附加费合计</span><strong>¥{{ row.pricingResult.total_surcharge }}</strong></div>
+              <div class="pricing-row highlight"><span>计算成本价</span><strong>¥{{ row.pricingResult.cost_price }}</strong></div>
+              <div v-if="row.pricingResult.sale_price_tier && Object.keys(row.pricingResult.sale_price_tier).length" class="tier-prices">
+                <span v-for="(price, code) in row.pricingResult.sale_price_tier" :key="code" class="tier-badge">
+                  {{ tierLabel(code) }}: ¥{{ price }}
+                </span>
+              </div>
+              <p class="calc-detail">{{ row.pricingResult.formula_detail }}</p>
+            </div>
+          </div>
+        </div>
+        </div>
+      </section>
+    </form>
+
+    <section class="summary">
+      <article>
+        <span>销售额</span>
+        <strong>{{ saleTotal.toFixed(2) }}</strong>
+      </article>
+      <article>
+        <span>成本额</span>
+        <strong>{{ costTotal.toFixed(2) }}</strong>
+      </article>
+      <article>
+        <span>预估利润</span>
+        <strong :class="{ positive: profitTotal >= 0, negative: profitTotal < 0 }">{{ profitTotal.toFixed(2) }}</strong>
+      </article>
+    </section>
+
+    <section class="actions">
+      <button type="button" class="secondary-btn" @click="resetForm">重置表单</button>
+      <button type="button" class="secondary-btn" @click="fillDemoData">填充演示数据</button>
+      <button type="submit" class="primary-btn" :disabled="submitting || optionLoading" @click="handleSubmit">
+        {{ submitting ? (isEditMode ? "更新中..." : "创建中...") : (isEditMode ? "更新订单" : "创建订单") }}
+      </button>
+    </section>
+  </section>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import {
+  createOrder,
+  createUploadToken,
+  fetchCustomerOptions,
+  fetchFactoryOptions,
+  fetchOrderForEdit,
+  fetchProductOptions,
+  parseOrderImage,
+  parseOrderText,
+  updateOrder,
+} from "../mockApi";
+
+const router = useRouter();
+const route = useRoute();
+const submitting = ref(false);
+const optionLoading = ref(true);
+const openSection = ref("customer");
+
+function toggleSection(key) {
+  openSection.value = openSection.value === key ? "" : key;
+}
+
+const message = ref("");
+const messageType = ref("success");
+const editingOrderId = ref(null);
+const isEditMode = computed(() => Boolean(editingOrderId.value));
+const customerOptions = ref([]);
+const factoryOptions = ref([]);
+const productOptions = ref([]);
+const selectedCustomerId = ref("");
+// 智能填单状态
+const parseMode = ref("text");
+const parseInput = ref("");
+const parseImageFile = ref(null);
+const parseImagePreview = ref("");
+const parsedResult = ref(null);
+const parseLoading = ref(false);
+const parseEditable = ref({
+  customer_name: "",
+  customer_mobile: "",
+  customer_address: "",
+  order_source: "",
+  delivery_type: "",
+  remark: "",
+  items: [],
+});
+function buildDefaultItem() {
+  return {
+    rowKey: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    selectedProductId: "",
+    product_id: null,
+    product_name: "",
+    specification: "",
+    unit: "",
+    quantity: 1,
+    sale_price: 0,
+    cost_price: 0,
+    rebate_amount: 0,
+    freight_amount: 0,
+    tax_amount: 0,
+    other_fee_amount: 0,
+    remark: "",
+    // 报价引擎
+    pricingRule: null,
+    pricingInputs: [],
+    pricingInputValues: {},
+    pricingInputUnits: {},
+    surchargeOptions: [],
+    surchargeSelections: {},
+    surchargeInputs: {},
+    pricingLoading: false,
+    pricingResult: null,
+  };
+}
+
+function buildDefaultForm() {
+  return {
+    customer_name: "",
+    customer_mobile: "",
+    customer_address: "",
+    order_source: "",
+    delivery_type: "",
+    factory_id: null,
+    commission_amount: 0,
+    rebate_total: 0,
+    freight_total: 0,
+    tax_total: 0,
+    other_fee_total: 0,
+    auto_sync_customer: true,
+    remark: "",
+  };
+}
+
+const form = reactive(buildDefaultForm());
+const items = ref([buildDefaultItem()]);
+const customerHint = ref("");
+
+const saleTotal = computed(() =>
+  items.value.reduce((total, row) => total + Number(row.quantity || 0) * Number(row.sale_price || 0), 0),
+);
+const costTotal = computed(() =>
+  items.value.reduce((total, row) => total + Number(row.quantity || 0) * Number(row.cost_price || 0), 0),
+);
+const profitTotal = computed(
+  () =>
+    saleTotal.value -
+    costTotal.value -
+    Number(form.rebate_total || 0) -
+    Number(form.freight_total || 0) -
+    Number(form.tax_total || 0) -
+    Number(form.other_fee_total || 0),
+);
+
+function resetForm() {
+  Object.assign(form, buildDefaultForm());
+  items.value = [buildDefaultItem()];
+  selectedCustomerId.value = "";
+  customerHint.value = "";
+  message.value = "";
+}
+
+function addItemRow() {
+  items.value.push(buildDefaultItem());
+}
+
+function removeItemRow(index) {
+  if (items.value.length <= 1) {
+    return;
+  }
+  items.value.splice(index, 1);
+}
+
+function handleCustomerChange() {
+  const selected = customerOptions.value.find((option) => String(option.value) === selectedCustomerId.value);
+  if (!selected) {
+    return;
+  }
+  form.customer_name = selected.customer_name;
+  form.customer_mobile = selected.customer_mobile;
+  form.customer_address = selected.customer_address;
+  customerHint.value = `已选中客户 ${selected.customer_name}，系统将优先使用客户库信息。`;
+}
+
+function handleCustomerInputBlur() {
+  if (selectedCustomerId.value || !form.customer_name.trim() || !form.customer_mobile.trim()) {
+    return;
+  }
+  const exists = customerOptions.value.find((option) => option.customer_name === form.customer_name.trim() && option.customer_mobile === form.customer_mobile.trim());
+  if (exists) {
+    selectedCustomerId.value = String(exists.value);
+    handleCustomerChange();
+    customerHint.value = '已匹配到客户库中的同名同号客户，系统已自动关联。';
+    return;
+  }
+  customerHint.value = form.auto_sync_customer ? '系统将把当前客户视为新客户，并在提交后自动同步到客户库。' : '当前客户未在客户库中匹配到记录，请确认是否需要手动新增。';
+}
+
+// ---------------------------------------------------------------------------
+// 智能填单
+// ---------------------------------------------------------------------------
+let parseTimer = null;
+
+const isMockMode = computed(() => parsedResult.value?.is_mock === true);
+
+async function handleParseSubmit() {
+  if (parseLoading.value || !parseInput.value.trim()) return;
+  parseLoading.value = true;
+  message.value = "";
+  try {
+    const result = await parseOrderText(parseInput.value);
+    parsedResult.value = result;
+    parseEditable.value = {
+      customer_name: result.parsed_order.customer_name || "",
+      customer_mobile: result.parsed_order.customer_mobile || "",
+      customer_address: result.parsed_order.customer_address || "",
+      order_source: result.parsed_order.order_source || "",
+      delivery_type: result.parsed_order.delivery_type || "",
+      remark: result.parsed_order.remark || "",
+      items: (result.parsed_order.items || []).map((item, idx) => ({
+        ...item,
+        _selectedCandidate: result.product_matches?.[idx]?.candidates?.[0] || null,
+      })),
+    };
+  } catch (error) {
+    message.value = error.message || "解析失败";
+    messageType.value = "error";
+  } finally {
+    parseLoading.value = false;
+  }
+}
+
+async function handleParseImageFile() {
+  const file = parseImageFile.value;
+  if (!file) return;
+  parseLoading.value = true;
+  message.value = "";
+  try {
+    const tokenData = await createUploadToken({
+      file_name: file.name,
+      file_type: file.type,
+      file_size: file.size,
+      biz_type: "order_parse",
+      biz_id: 0,
+    });
+    const formData = new FormData();
+    formData.append("key", tokenData.object_key);
+    formData.append("policy", tokenData.policy);
+    formData.append("OSSAccessKeyId", tokenData.access_key_id);
+    formData.append("signature", tokenData.signature);
+    formData.append("file", file);
+    await fetch(tokenData.upload_url, { method: "POST", body: formData });
+    const imageUrl = `${tokenData.public_base_url}/${tokenData.object_key}`;
+    const result = await parseOrderImage(imageUrl);
+    parsedResult.value = result;
+    parseEditable.value = {
+      customer_name: result.parsed_order.customer_name || "",
+      customer_mobile: result.parsed_order.customer_mobile || "",
+      customer_address: result.parsed_order.customer_address || "",
+      order_source: result.parsed_order.order_source || "",
+      delivery_type: result.parsed_order.delivery_type || "",
+      remark: result.parsed_order.remark || "",
+      items: (result.parsed_order.items || []).map((item, idx) => ({
+        ...item,
+        _selectedCandidate: result.product_matches?.[idx]?.candidates?.[0] || null,
+      })),
+    };
+  } catch (error) {
+    message.value = error.message || "图片识别失败";
+    messageType.value = "error";
+  } finally {
+    parseLoading.value = false;
+  }
+}
+
+function handleParseImageChange(event) {
+  const file = event.target.files?.[0];
+  if (!file) return;
+  parseImageFile.value = file;
+  parseImagePreview.value = URL.createObjectURL(file);
+}
+
+function handleConfirmParse() {
+  const parsed = parseEditable.value;
+  form.customer_name = parsed.customer_name || "";
+  form.customer_mobile = parsed.customer_mobile || "";
+  form.customer_address = parsed.customer_address || "";
+  form.order_source = parsed.order_source || "";
+  form.delivery_type = parsed.delivery_type || "";
+  form.remark = parsed.remark || "";
+
+  if (parsedResult.value?.parsed_order?.customer_id) {
+    const cid = parsedResult.value.parsed_order.customer_id;
+    selectedCustomerId.value = String(cid);
+    handleCustomerChange();
+  } else {
+    selectedCustomerId.value = "";
+  }
+
+  const newItems = [];
+  for (const parsedItem of parsed.items) {
+    const row = buildDefaultItem();
+    if (parsedItem._selectedCandidate) {
+      const c = parsedItem._selectedCandidate;
+      row.selectedProductId = String(c.product_id);
+      row.product_id = c.product_id;
+      row.product_name = c.product_name;
+      row.specification = c.specification;
+      row.unit = c.unit;
+      row.sale_price = c.sale_price;
+      row.cost_price = c.cost_price;
+    } else {
+      row.product_name = parsedItem.product_name || "";
+      row.specification = parsedItem.specification || "";
+      row.unit = parsedItem.unit || "";
+      row.quantity = parsedItem.quantity || 1;
+      row.sale_price = parsedItem.sale_price || 0;
+      row.cost_price = parsedItem.cost_price || 0;
+    }
+    if (!row.quantity || row.quantity <= 0) row.quantity = parsedItem.quantity || 1;
+    if (row.sale_price <= 0 && parsedItem.sale_price > 0) row.sale_price = parsedItem.sale_price;
+    newItems.push(row);
+  }
+  items.value = newItems.length > 0 ? newItems : [buildDefaultItem()];
+  parsedResult.value = null;
+  parseEditable.value = { customer_name: "", customer_mobile: "", customer_address: "", order_source: "", delivery_type: "", remark: "", items: [] };
+}
+
+function handleProductCandidateSelect(itemIndex, candidate) {
+  if (parseEditable.value.items[itemIndex]) {
+    parseEditable.value.items[itemIndex]._selectedCandidate = candidate;
+  }
+}
+
+function handleResetParse() {
+  parsedResult.value = null;
+  parseEditable.value = { customer_name: "", customer_mobile: "", customer_address: "", order_source: "", delivery_type: "", remark: "", items: [] };
+  parseInput.value = "";
+  parseImageFile.value = null;
+  parseImagePreview.value = "";
+}
+
+function fillDemoData() {
+  if (customerOptions.value.length) {
+    selectedCustomerId.value = String(customerOptions.value[0].value);
+    handleCustomerChange();
+  } else {
+    form.customer_name = "演示客户";
+    form.customer_mobile = "13900000000";
+    form.customer_address = "杭州市西湖区演示地址 1 号";
+  }
+
+  if (productOptions.value.length) {
+    items.value[0].selectedProductId = String(productOptions.value[0].value);
+    handleProductChange(items.value[0]);
+  } else {
+    items.value[0].product_name = "演示产品A";
+    items.value[0].specification = "10kg";
+    items.value[0].unit = "吨";
+    items.value[0].sale_price = 100;
+    items.value[0].cost_price = 60;
+  }
+
+  form.order_source = "线下拜访";
+  form.delivery_type = "工厂直送";
+  form.factory_id = factoryOptions.value[0]?.value ?? 1001;
+  form.commission_amount = 50;
+  form.rebate_total = 5;
+  form.freight_total = 10;
+  form.tax_total = 3;
+  form.other_fee_total = 2;
+  form.remark = "前后端联调演示订单";
+
+  items.value[0].quantity = 1;
+  items.value[0].rebate_amount = 5;
+  items.value[0].freight_amount = 10;
+  items.value[0].tax_amount = 3;
+  items.value[0].other_fee_amount = 2;
+  items.value[0].remark = "演示明细";
+}
+
+// ---- 报价引擎 ----
+
+const SALES_TOKEN_KEY = "sales_token";
+const API_BASE = import.meta.env.VITE_API_BASE_URL || "http://localhost:8000";
+
+function tierLabel(code) {
+  return { special: "特批价", tier1: "一级经销", tier2: "二级经销", default: "默认" }[code] || code;
+}
+
+async function handleProductChange(row) {
+  const selected = productOptions.value.find((option) => String(option.value) === row.selectedProductId);
+  if (!selected) return;
+  row.product_id = selected.value;
+  row.product_name = selected.product_name;
+  row.specification = selected.specification;
+  row.unit = selected.unit;
+  row.sale_price = Number(selected.sale_price || 0);
+  row.cost_price = Number(selected.cost_price || 0);
+  // 加载定价规则
+  row.pricingRule = null;
+  row.pricingInputs = [];
+  row.surchargeOptions = [];
+  row.pricingResult = null;
+  row.pricingInputValues = {};
+  row.pricingInputUnits = {};
+  row.surchargeSelections = {};
+  try {
+    const token = localStorage.getItem(SALES_TOKEN_KEY) || "";
+    const res = await fetch(`${API_BASE}/api/pricing-rules/${row.product_id}`, {
+      headers: { "Content-Type": "application/json", ...(token ? { Authorization: `Bearer ${token}` } : {}) },
+    });
+    const result = await res.json();
+    if (res.ok && result.code === 0 && result.data) {
+      const rule = result.data;
+      row.pricingRule = rule;
+      // 解析 pricing_inputs
+      let inputs = [];
+      try { inputs = JSON.parse(rule.pricing_inputs || "[]"); } catch { inputs = []; }
+      row.pricingInputs = inputs;
+      inputs.forEach(f => {
+        row.pricingInputValues[f.key] = f.default_value || "";
+        row.pricingInputUnits[f.key] = f.default_unit || "m";
+      });
+      // 解析附加费选项
+      let surcharges = {};
+      try { surcharges = JSON.parse(rule.surcharge_json || "{}"); } catch { surcharges = {}; }
+      row.surchargeOptions = Object.entries(surcharges).map(([key, cfg]) => ({
+        key, name: cfg.name || key, method: cfg.method || "", price: cfg.price || 0,
+        needs_input: cfg.needs_input || false, input_key: cfg.input_key || key,
+      }));
+      row.surchargeOptions.forEach(opt => {
+        row.surchargeSelections[opt.key] = false;
+        if (opt.needs_input) row.surchargeInputs[opt.input_key] = 0;
+      });
+      // 如果有输入字段，自动触发首次计算
+      if (inputs.length > 0) {
+        handlePricingInput(row);
+      }
+    }
+  } catch { /* 无定价规则时静默失败 */ }
+}
+
+let pricingTimers = {};
+async function handlePricingInput(row) {
+  clearTimeout(pricingTimers[row.rowKey]);
+  if (!row.pricingRule) return;
+  pricingTimers[row.rowKey] = setTimeout(async () => {
+    row.pricingLoading = true;
+    try {
+      const token = localStorage.getItem(SALES_TOKEN_KEY) || "";
+      const userInputs = {};
+      row.pricingInputs.forEach(f => {
+        userInputs[f.key] = row.pricingInputValues[f.key] || "";
+        userInputs[`${f.key}_unit`] = row.pricingInputUnits[f.key] || "m";
+      });
+      const surchargeSelections = {};
+      Object.entries(row.surchargeSelections).forEach(([k, v]) => { surchargeSelections[`surcharge_${k}`] = v; });
+      const res = await fetch(`${API_BASE}/api/quotation/calculate`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...(token ? { Authorization: `Bearer ${token}` } : {}) },
+        body: JSON.stringify({
+          product_id: row.product_id,
+          user_inputs: userInputs,
+          surcharge_selections: surchargeSelections,
+          surcharge_inputs: row.surchargeInputs,
+        }),
+      });
+      const result = await res.json();
+      if (res.ok && result.code === 0 && result.data) {
+        row.pricingResult = result.data;
+        row.cost_price = result.data.cost_price;
+        if (result.data.recommended_sale_price > 0 && row.sale_price === 0) {
+          row.sale_price = result.data.recommended_sale_price;
+        }
+      }
+    } catch { /* ignore */ }
+    finally { row.pricingLoading = false; }
+  }, 300);
+}
+
+async function loadOptions() {
+  optionLoading.value = true;
+  try {
+    const [customers, factories, products] = await Promise.all([
+      fetchCustomerOptions(),
+      fetchFactoryOptions(),
+      fetchProductOptions(),
+    ]);
+    customerOptions.value = customers;
+    factoryOptions.value = factories;
+    // fetchProductOptions 已经展平了嵌套的 specifications，直接使用
+    productOptions.value = products;
+  } catch (error) {
+    message.value = error.message || "加载客户、工厂、产品选项失败";
+    messageType.value = "error";
+  } finally {
+    optionLoading.value = false;
+  }
+}
+
+async function handleSubmit() {
+  // 前端先做最小必填校验，避免无效请求直接打到后端。
+  if (!form.customer_name.trim()) {
+    message.value = "请输入客户姓名";
+    messageType.value = "error";
+    return;
+  }
+  if (!form.customer_mobile.trim()) {
+    message.value = "请输入客户手机号";
+    messageType.value = "error";
+    return;
+  }
+  const matchedCustomer = customerOptions.value.find((option) => option.customer_name === form.customer_name.trim() && option.customer_mobile === form.customer_mobile.trim());
+  if (!matchedCustomer && form.auto_sync_customer) {
+    customerHint.value = '当前客户未匹配到客户库，提交后将自动同步为新客户。';
+  }
+  const validItems = items.value.filter((row) => row.product_name.trim() && row.specification.trim() && row.unit.trim());
+  if (!validItems.length) {
+    message.value = "请至少填写一个完整的产品明细";
+    messageType.value = "error";
+    return;
+  }
+
+  submitting.value = true;
+  message.value = "";
+  try {
+    const payload = {
+      ...form,
+      customer_sync_mode: matchedCustomer ? 'linked' : form.auto_sync_customer ? 'auto_create' : 'manual_review',
+      items: validItems.map(({ rowKey, selectedProductId, pricingRule, pricingInputs, pricingInputValues, pricingInputUnits, surchargeOptions, surchargeSelections, surchargeInputs, pricingLoading, pricingResult, ...rest }) => ({
+        ...rest,
+        pricing_type: pricingRule ? pricingRule.pricing_type : null,
+        length_m: pricingResult && pricingResult.area_sqm ? (pricingInputValues.length || 0) : null,
+        width_m: pricingResult && pricingResult.area_sqm ? (pricingInputValues.width || 0) : null,
+        area_sqm: pricingResult ? pricingResult.area_sqm : null,
+        surcharge_detail: pricingResult && pricingResult.surcharge_items && pricingResult.surcharge_items.length ? JSON.stringify(pricingResult.surcharge_items) : null,
+      })),
+    };
+    let result;
+    if (isEditMode.value) {
+      result = await updateOrder(editingOrderId.value, payload);
+      message.value = `订单 ${result.order_no} 更新成功。`;
+    } else {
+      result = await createOrder(payload);
+      message.value = `订单 ${result.order_no} 创建成功，当前状态：${result.order_status}，客户同步模式：${result.customer_sync_mode || '未返回'}`;
+    }
+    messageType.value = "success";
+    await router.push(`/orders/${result.order_id}`);
+  } catch (error) {
+    message.value = error.message || (isEditMode.value ? "更新订单失败" : "创建订单失败");
+    messageType.value = "error";
+  } finally {
+    submitting.value = false;
+  }
+}
+
+async function loadOrderForEdit(orderId) {
+  try {
+    const data = await fetchOrderForEdit(orderId);
+    // 预填客户信息
+    form.customer_name = data.customer_name || "";
+    form.customer_mobile = data.customer_mobile || "";
+    form.customer_address = data.customer_address || "";
+    form.order_source = data.order_source || "";
+    form.delivery_type = data.delivery_type || "";
+    form.factory_id = data.factory_id || null;
+    form.commission_amount = data.commission_amount || 0;
+    form.rebate_total = data.rebate_total || 0;
+    form.freight_total = data.freight_total || 0;
+    form.tax_total = data.tax_total || 0;
+    form.other_fee_total = data.other_fee_total || 0;
+    form.remark = data.remark || "";
+    // 关联客户
+    if (data.customer_id) {
+      selectedCustomerId.value = String(data.customer_id);
+      handleCustomerChange();
+    }
+    // 预填产品明细
+    if (data.items && data.items.length) {
+      items.value = data.items.map((item) => {
+        const row = buildDefaultItem();
+        row.product_id = item.product_id;
+        row.product_name = item.product_name;
+        row.specification = item.specification;
+        row.unit = item.unit;
+        row.quantity = item.quantity;
+        row.sale_price = item.sale_price;
+        row.cost_price = item.cost_price;
+        row.rebate_amount = item.rebate_amount || 0;
+        row.freight_amount = item.freight_amount || 0;
+        row.tax_amount = item.tax_amount || 0;
+        row.other_fee_amount = item.other_fee_amount || 0;
+        row.remark = item.remark || "";
+        if (item.product_id) {
+          row.selectedProductId = String(item.product_id);
+        }
+        return row;
+      });
+    }
+    customerHint.value = `正在编辑订单，修改后将覆盖原有订单内容。`;
+  } catch (error) {
+    message.value = error.message || "加载订单数据失败";
+    messageType.value = "error";
+  }
+}
+
+onMounted(async () => {
+  await loadOptions();
+  // 检测编辑模式：?edit=<orderId>
+  const editId = route.query.edit;
+  if (editId) {
+    editingOrderId.value = Number(editId);
+    await loadOrderForEdit(editId);
+  }
+});
+</script>
+
+<style scoped>
+.page {
+  display: grid;
+  gap: 18px;
+}
+
+.page-hero,
+.form-section,
+.summary {
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid #e5e7eb;
+  border-radius: 20px;
+  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
+}
+
+.page-hero {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  align-items: flex-start;
+  padding: 24px;
+}
+
+.eyebrow {
+  display: inline-flex;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: #dbeafe;
+  color: #1d4ed8;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+h2 {
+  margin: 12px 0 8px;
+  font-size: 30px;
+}
+
+.tips,
+.section-header span,
+.progress-card span {
+  color: #64748b;
+}
+
+.progress-card {
+  min-width: 180px;
+  align-self: center;
+  padding: 16px;
+  border-radius: 16px;
+  background: linear-gradient(180deg, #ffffff, #eff6ff);
+  border: 1px solid #dbe3ef;
+  display: grid;
+  gap: 6px;
+}
+
+.progress-card strong {
+  font-size: 22px;
+}
+
+.message-box {
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: #dcfce7;
+  color: #166534;
+}
+
+.message-box.error {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.form-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.form-section {
+  padding: 20px;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+  align-items: center;
+}
+
+.toggle-header {
+  cursor: pointer;
+  user-select: none;
+}
+
+.toggle-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toggle-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 8px;
+  background: #f1f5f9;
+  color: #475569;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+}
+.section-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+
+.section-header h3,
+.summary strong {
+  margin: 0;
+}
+
+.section-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+label {
+  display: grid;
+  gap: 8px;
+}
+
+label span {
+  color: #374151;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+input,
+textarea,
+select {
+  border: 1px solid #d1d5db;
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: #fff;
+}
+
+.full-width {
+  grid-column: 1 / -1;
+}
+
+.summary {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  padding: 18px 20px;
+}
+
+.summary article {
+  padding: 16px;
+  border-radius: 16px;
+  background: linear-gradient(180deg, #ffffff, #f8fbff);
+  border: 1px solid #dbe3ef;
+  display: grid;
+  gap: 8px;
+}
+
+.summary span {
+  color: #64748b;
+}
+
+.summary strong {
+  font-size: 24px;
+  color: #0f172a;
+}
+
+.summary strong.positive {
+  color: #15803d;
+}
+
+.summary strong.negative {
+  color: #b91c1c;
+}
+
+.item-card {
+  margin-bottom: 14px;
+  padding: 14px;
+  border: 1px solid #dbe3ef;
+  border-radius: 16px;
+  background: #f8fbff;
+}
+.item-card-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.item-card-header h4 { margin: 0; }
+.pricing-section { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #dbe3ef; }
+.pricing-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
+.pricing-header h5 { margin: 0; font-size: 14px; color: #1d4ed8; }
+.formula-note { color: #64748b; font-size: 12px; }
+.input-with-unit { display: flex; gap: 6px; }
+.input-with-unit input { flex: 1; }
+.input-with-unit select { width: 70px; }
+.surcharge-section { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
+.surcharge-label { font-size: 13px; font-weight: 600; color: #374151; }
+.surcharge-check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #475569; }
+.pricing-loading { color: #64748b; font-size: 12px; margin-top: 6px; }
+.pricing-result { margin-top: 10px; padding: 10px; background: #f0f9ff; border-radius: 12px; border: 1px solid #bfdbfe; }
+.pricing-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
+.pricing-row.highlight { font-weight: 700; color: #1d4ed8; border-top: 1px solid #bfdbfe; padding-top: 6px; margin-top: 4px; }
+.tier-prices { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
+.tier-badge { background: #eff6ff; color: #1d4ed8; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
+.calc-detail { margin: 6px 0 0; font-size: 11px; color: #64748b; word-break: break-all; }
+.actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+button {
+  border: 1px solid #d1d5db;
+  background: #fff;
+  border-radius: 12px;
+  padding: 10px 14px;
+}
+.small-btn { padding: 8px 12px; }
+.danger-link { color: #dc2626; }
+
+.primary-btn {
+  background: linear-gradient(135deg, #2563eb, #1d4ed8);
+  color: #fff;
+  border-color: transparent;
+}
+
+button:disabled {
+  color: #9ca3af;
+  background: #f3f4f6;
+}
+
+.secondary-btn {
+  color: #374151;
+}
+
+@media (max-width: 960px) {
+  .page-hero {
+    flex-direction: column;
+  }
+
+  .summary,
+  .section-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .actions {
+    flex-direction: column;
+  }
+  .section-header,
+  .item-card-header,
+  .product-create-summary {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+@media (max-width: 640px) {
+  .page {
+    gap: 12px;
+  }
+
+  .page-hero,
+  .form-section,
+  .summary {
+    padding: 14px;
+    border-radius: 16px;
+  }
+
+  h2 {
+    font-size: 24px;
+    margin: 10px 0 6px;
+  }
+
+  .tips,
+  .section-header span,
+  .progress-card span,
+  label span,
+  .summary span,
+  .message-box,
+  button {
+    font-size: 12px;
+  }
+
+  .progress-card {
+    min-width: 0;
+    padding: 12px;
+  }
+
+  .progress-card strong {
+    font-size: 16px;
+  }
+
+  .form-grid {
+    gap: 12px;
+  }
+
+  .form-section {
+    padding: 12px;
+  }
+
+  .section-header {
+    margin-bottom: 10px;
+  }
+
+  .section-grid,
+  .summary {
+    gap: 10px;
+  }
+
+  input,
+  textarea,
+  select,
+  button {
+    padding: 9px 10px;
+    border-radius: 10px;
+  }
+
+  .summary strong {
+    font-size: 18px;
+  }
+
+  .actions {
+    gap: 8px;
+  }
+}
+
+/* 智能填单样式 */
+.parse-card { border: 2px dashed #93c5fd; background: linear-gradient(180deg, #f0f9ff, #fff); }
+.parse-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
+.parse-tabs button { border: 1px solid #d1d5db; background: #fff; border-radius: 10px; padding: 8px 16px; cursor: pointer; font-size: 13px; }
+.parse-tabs button.active { background: #2563eb; color: #fff; border-color: #2563eb; }
+.parse-text-area textarea { width: 100%; border: 1px solid #d1d5db; border-radius: 12px; padding: 10px 12px; resize: vertical; font-size: 14px; }
+.parse-image-area { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
+.parse-image-preview { max-width: 200px; border-radius: 10px; overflow: hidden; }
+.parse-image-preview img { width: 100%; display: block; }
+.parse-upload-label { cursor: pointer; }
+.parse-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
+
+.parse-result-card { border: 2px solid #2563eb; background: linear-gradient(180deg, #eff6ff, #fff); }
+.parse-result-meta { display: flex; gap: 8px; align-items: center; }
+.confidence-tag { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: 12px; font-weight: 600; }
+.mode-tag.fallback { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 12px; font-weight: 600; }
+.parse-result-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
+.parse-result-items { margin-bottom: 14px; }
+.parse-result-items h4 { margin: 0 0 8px; font-size: 14px; }
+.parse-item-card { padding: 10px; border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 8px; background: #f9fafb; }
+.parse-item-main { display: flex; flex-direction: column; gap: 4px; }
+.parse-item-main strong { font-size: 14px; }
+.parse-item-main span { font-size: 12px; color: #6b7280; }
+.parse-item-candidates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
+.candidate-label { font-size: 12px; color: #6b7280; }
+.candidate-btn { border: 1px solid #d1d5db; background: #fff; border-radius: 8px; padding: 4px 10px; font-size: 11px; cursor: pointer; }
+.candidate-btn.selected { background: #2563eb; color: #fff; border-color: #2563eb; }
+.parse-warnings { margin-bottom: 10px; }
+.parse-warnings p { font-size: 12px; color: #b45309; margin: 2px 0; }
+</style>
diff --git a/frontend/web-sales/src/views/OrdersPage.vue b/frontend/web-sales/src/views/OrdersPage.vue
index ccc8c0f..1d6caa3 100644
--- a/frontend/web-sales/src/views/OrdersPage.vue
+++ b/frontend/web-sales/src/views/OrdersPage.vue
@@ -1,38 +1,35 @@
-<!--
-  OrdersPage.vue - 订单列表页面
-  职责：展示业务员的订单列表，支持按客户名称、订单状态等条件筛选查询。
-  提供订单查询和重置筛选功能，页面加载时自动获取订单数据。
--->
 <template>
-import { useToast } from "../composables/useToast";
-const toast = useToast();
   <section class="page">
-<!--    <div class="page-hero">-->
-<!--      <div>-->
-<!--        <span class="eyebrow">订单跟踪</span>-->
-<!--        <h2>我的订单列表</h2>-->
-<!--        <p class="desc">集中查看客户、状态、金额与时间信息，支持快速筛选、提交审核和取消订单。</p>-->
-<!--      </div>-->
-<!--      <div class="hero-right">-->
-<!--        <div class="hero-metrics">-->
-<!--          <article>-->
-<!--            <strong>{{ total }}</strong>-->
-<!--            <span>当前订单</span>-->
-<!--          </article>-->
-<!--          <article>-->
-<!--            <strong>{{ activeCount }}</strong>-->
-<!--            <span>可处理订单</span>-->
-<!--          </article>-->
-<!--        </div>-->
-<!--        <RouterLink to="/orders/create" class="create-link">+ 新建订单</RouterLink>-->
-<!--      </div>-->
-<!--    </div>-->
+    <div class="page-hero">
+      <div>
+        <span class="eyebrow">订单跟踪</span>
+        <h2>我的订单列表</h2>
+        <p class="desc">集中查看客户、状态、金额与时间信息，支持快速筛选、提交审核和取消订单。</p>
+      </div>
+      <div class="hero-right">
+        <div class="hero-metrics">
+          <article>
+            <strong>{{ total }}</strong>
+            <span>当前订单</span>
+          </article>
+          <article>
+            <strong>{{ activeCount }}</strong>
+            <span>可处理订单</span>
+          </article>
+        </div>
+        <RouterLink to="/orders/create" class="create-link">+ 新建订单</RouterLink>
+      </div>
+    </div>
 
+    <p v-if="!user" class="notice">当前未登录，页面展示的是本地演示账号视角。</p>
     <p v-if="loading" class="loading">正在加载订单数据...</p>
 
     <div v-else class="block filter-card">
       <div class="header-row">
         <h3>筛选条件</h3>
+        <span class="mode-tag" :class="{ fallback: isMock }">
+          {{ isMock ? "演示数据" : "真实接口" }}
+        </span>
       </div>
       <div class="chips">
         <label v-for="item in filterFields" :key="item.key" class="filter">
@@ -57,3 +54,699 @@ const toast = useToast();
       </div>
     </div>
 
+    <div v-if="message" class="message-box" :class="{ error: messageType === 'error' }">
+      {{ message }}
+    </div>
+
+    <div v-if="!loading && !orderRows.length" class="empty-state">
+      <strong>当前没有订单数据</strong>
+      <span>请尝试调整筛选条件或新建订单。</span>
+    </div>
+
+    <div v-if="!loading" class="block table-panel">
+      <div class="header-row">
+        <h3>订单列表</h3>
+        <span class="table-tip">状态已统一标签化展示，便于快速扫描</span>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th>订单编号</th>
+            <th>客户名称</th>
+            <th>客户手机</th>
+            <th>订单状态</th>
+            <th>订单来源</th>
+            <th>销售金额</th>
+            <th>创建时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in orderRows" :key="row.orderNo">
+            <td :data-label="'订单编号'">{{ row.orderNo }}</td>
+            <td :data-label="'客户名称'">{{ row.customer }}</td>
+            <td :data-label="'客户手机'">{{ row.mobile }}</td>
+            <td :data-label="'订单状态'"><span class="status" :class="statusClass(row.rawStatus)">{{ row.status }}</span></td>
+            <td :data-label="'订单来源'">{{ row.source }}</td>
+            <td :data-label="'销售金额'" class="amount-cell">{{ row.amount }}</td>
+            <td :data-label="'创建时间'">{{ row.createdAt }}</td>
+            <td :data-label="'操作'" class="actions-cell">
+              <RouterLink v-if="row.orderId" class="detail-link" :to="`/orders/${row.orderId}`">查看</RouterLink>
+              <span v-else class="detail-link disabled-link">演示</span>
+              <button
+                class="inline-btn"
+                :disabled="submittingId === row.orderId || !canSubmit(row.rawStatus)"
+                @click="handleSubmit(row)"
+              >
+                {{ submittingId === row.orderId ? "提交中..." : "提交审核" }}
+              </button>
+              <button
+                class="inline-btn danger-btn"
+                :disabled="cancelingId === row.orderId || !canCancel(row.rawStatus)"
+                @click="handleCancel(row)"
+              >
+                {{ cancelingId === row.orderId ? "取消中..." : "取消订单" }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div v-if="totalPages > 1" class="pagination">
+        <button :disabled="pageNo <= 1" @click="goPage(pageNo - 1)">上一页</button>
+        <span>{{ pageNo }} / {{ totalPages }}（共 {{ total }} 条）</span>
+        <button :disabled="pageNo >= totalPages" @click="goPage(pageNo + 1)">下一页</button>
+      </div>
+    </div>
+
+    <ConfirmModal
+      :visible="showSubmitConfirm"
+      title="提交审核"
+      :message="`确定将订单 ${pendingRow?.orderNo} 提交审核吗？提交后将进入审批流程。`"
+      confirm-text="确认提交"
+      @confirm="confirmSubmit"
+      @cancel="showSubmitConfirm = false"
+    />
+
+    <div v-if="showCancelConfirm" class="modal-mask" @click.self="showCancelConfirm = false">
+      <div class="modal-box">
+        <h3>取消订单</h3>
+        <p>确定要取消订单 <strong>{{ pendingRow?.orderNo }}</strong> 吗？取消后将进入审批流程，操作不可撤回。</p>
+        <label class="reason-label">
+          <span>取消原因</span>
+          <input v-model.trim="cancelReason" type="text" placeholder="请输入取消原因" />
+        </label>
+        <div class="modal-actions">
+          <button class="cancel-btn" @click="showCancelConfirm = false">返回</button>
+          <button class="confirm-btn danger" :disabled="!cancelReason" @click="confirmCancel">确认取消</button>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { RouterLink } from "vue-router";
+
+import ConfirmModal from "../components/ConfirmModal.vue";
+import { cancelOrder, fetchOrdersPage, submitOrder } from "../mockApi";
+import { salesStore } from "../store";
+
+const loading = ref(true);
+const isMock = ref(false);
+const orderRows = ref([]);
+const user = salesStore.user;
+const submittingId = ref(null);
+const cancelingId = ref(null);
+const message = ref("");
+const messageType = ref("success");
+const showSubmitConfirm = ref(false);
+const showCancelConfirm = ref(false);
+const pendingRow = ref(null);
+const cancelReason = ref("");
+const total = ref(0);
+const pageNo = ref(1);
+const pageSize = 20;
+const filters = reactive({
+  order_status: "",
+  customer_name: "",
+  customer_mobile: "",
+  order_source: "",
+  start_date: "",
+  end_date: "",
+});
+
+const activeCount = computed(() => orderRows.value.filter((row) => canSubmit(row.rawStatus) || canCancel(row.rawStatus)).length);
+
+const filterFields = [
+  {
+    key: "order_status",
+    label: "订单状态",
+    type: "select",
+    options: [
+      { value: "draft", label: "草稿" },
+      { value: "pending_approve", label: "待审批" },
+      { value: "approved", label: "已审批" },
+      { value: "rejected", label: "已驳回" },
+      { value: "cancel_pending", label: "待取消审批" },
+      { value: "canceled", label: "已取消" },
+      { value: "pending_factory", label: "待工厂处理" },
+    ],
+  },
+  { key: "customer_name", label: "客户姓名", type: "text", placeholder: "请输入客户姓名" },
+  { key: "customer_mobile", label: "客户手机号", type: "text", placeholder: "请输入客户手机号" },
+  { key: "order_source", label: "订单来源", type: "text", placeholder: "请输入订单来源" },
+  { key: "start_date", label: "开始日期", type: "date", placeholder: "" },
+  { key: "end_date", label: "结束日期", type: "date", placeholder: "" },
+];
+
+function canSubmit(status) {
+  return ["draft", "rejected"].includes(status);
+}
+
+function canCancel(status) {
+  return !["canceled", "settled"].includes(status);
+}
+
+function statusClass(status) {
+  if (["approved", "settled", "finished"].includes(status)) return "success";
+  if (["rejected", "canceled"].includes(status)) return "danger";
+  if (["pending_approve", "cancel_pending", "pending_factory"].includes(status)) return "warning";
+  return "info";
+}
+
+async function loadOrders() {
+  const data = await fetchOrdersPage({ ...filters, page_no: pageNo.value, page_size: pageSize });
+  orderRows.value = data.orderRows;
+  total.value = data.total || 0;
+  isMock.value = Boolean(data.isMock);
+}
+
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)));
+
+async function goPage(p) {
+  pageNo.value = p;
+  loading.value = true;
+  try {
+    await loadOrders();
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function handleSearch() {
+  loading.value = true;
+  message.value = "";
+  try {
+    await loadOrders();
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function handleReset() {
+  filters.order_status = "";
+  filters.customer_name = "";
+  filters.customer_mobile = "";
+  filters.order_source = "";
+  filters.start_date = "";
+  filters.end_date = "";
+  pageNo.value = 1;
+  await handleSearch();
+}
+
+function handleSubmit(row) {
+  if (!row.orderId || isMock.value) {
+    message.value = "当前是演示数据模式，暂不执行真实提交。";
+    messageType.value = "error";
+    return;
+  }
+  pendingRow.value = row;
+  showSubmitConfirm.value = true;
+}
+
+async function confirmSubmit() {
+  const row = pendingRow.value;
+  showSubmitConfirm.value = false;
+  submittingId.value = row.orderId;
+  try {
+    await submitOrder(row.orderId);
+    await loadOrders();
+    message.value = `订单 ${row.orderNo} 已提交审核。`;
+    messageType.value = "success";
+  } catch (error) {
+    message.value = error.message || "提交审核失败";
+    messageType.value = "error";
+  } finally {
+    submittingId.value = null;
+    pendingRow.value = null;
+  }
+}
+
+function handleCancel(row) {
+  if (!row.orderId || isMock.value) {
+    message.value = "当前是演示数据模式，暂不执行真实取消。";
+    messageType.value = "error";
+    return;
+  }
+  pendingRow.value = row;
+  cancelReason.value = "";
+  showCancelConfirm.value = true;
+}
+
+async function confirmCancel() {
+  const row = pendingRow.value;
+  if (!cancelReason.value) return;
+  showCancelConfirm.value = false;
+  cancelingId.value = row.orderId;
+  try {
+    await cancelOrder(row.orderId, cancelReason.value);
+    await loadOrders();
+    message.value = `订单 ${row.orderNo} 已发起取消。`;
+    messageType.value = "success";
+  } catch (error) {
+    message.value = error.message || "取消订单失败";
+    messageType.value = "error";
+  } finally {
+    cancelingId.value = null;
+    pendingRow.value = null;
+    cancelReason.value = "";
+  }
+}
+
+onMounted(async () => {
+  await loadOrders();
+  loading.value = false;
+});
+</script>
+
+<style scoped>
+.page {
+  display: grid;
+  gap: 18px;
+}
+
+.page-hero,
+.filter-card,
+.table-panel {
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid #e5e7eb;
+  border-radius: 20px;
+  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
+}
+
+.page-hero {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  align-items: flex-start;
+  padding: 24px;
+}
+
+.eyebrow {
+  display: inline-flex;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: #dbeafe;
+  color: #1d4ed8;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+h2 {
+  margin: 12px 0 8px;
+  font-size: 30px;
+}
+
+.desc,
+.notice,
+.loading,
+.table-tip,
+.empty-state span {
+  color: #64748b;
+}
+
+.notice,
+.loading {
+  margin: 0;
+}
+
+.hero-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(120px, 1fr));
+  gap: 12px;
+  min-width: 260px;
+}
+
+.hero-right {
+  display: grid;
+  gap: 10px;
+  align-items: start;
+}
+
+.create-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #2563eb, #1d4ed8);
+  color: #fff;
+  text-decoration: none;
+  border-radius: 12px;
+  padding: 10px 16px;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  margin-top: 16px;
+}
+
+.pagination button {
+  border: 1px solid #d1d5db;
+  background: #fff;
+  border-radius: 999px;
+  padding: 6px 14px;
+}
+
+.pagination button:disabled {
+  color: #9ca3af;
+  background: #f3f4f6;
+}
+
+.pagination span {
+  color: #64748b;
+  font-size: 13px;
+}
+
+.hero-metrics article {
+  padding: 16px;
+  border-radius: 16px;
+  background: linear-gradient(180deg, #ffffff, #f8fbff);
+  border: 1px solid #dbe3ef;
+  display: grid;
+  gap: 6px;
+}
+
+.hero-metrics strong {
+  font-size: 28px;
+  color: #0f172a;
+}
+
+.filter-card,
+.table-panel {
+  padding: 20px;
+}
+
+.header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+h3 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.mode-tag {
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: #dcfce7;
+  color: #166534;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.mode-tag.fallback {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.chips {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.filter {
+  display: grid;
+  gap: 6px;
+}
+
+.filter span {
+  color: #4b5563;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.filter input,
+.filter select {
+  border: 1px solid #d1d5db;
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: #fff;
+}
+
+.filter-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.message-box {
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: #dcfce7;
+  color: #166534;
+}
+
+.message-box.error {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.empty-state {
+  display: grid;
+  gap: 4px;
+  padding: 28px;
+  border: 1px dashed #d1d5db;
+  border-radius: 16px;
+  color: #374151;
+  text-align: center;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  text-align: left;
+  padding: 12px 10px;
+  border-bottom: 1px solid #e5e7eb;
+  vertical-align: top;
+}
+
+.amount-cell {
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.status {
+  display: inline-flex;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.status.info {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.status.warning {
+  background: #fef3c7;
+  color: #b45309;
+}
+
+.status.success {
+  background: #dcfce7;
+  color: #15803d;
+}
+
+.status.danger {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.actions-cell {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.detail-link,
+.inline-btn {
+  border-radius: 999px;
+  padding: 7px 12px;
+}
+
+.detail-link {
+  color: #1d4ed8;
+  text-decoration: none;
+  background: #dbeafe;
+}
+
+.disabled-link {
+  color: #9ca3af;
+  background: #f3f4f6;
+}
+
+.inline-btn {
+  border: 1px solid #d1d5db;
+  background: #fff;
+}
+
+.primary-btn {
+  background: linear-gradient(135deg, #2563eb, #1d4ed8);
+  color: #fff;
+  border-color: transparent;
+}
+
+.danger-btn {
+  color: #b91c1c;
+  border-color: #fecaca;
+}
+
+.inline-btn:disabled {
+  color: #9ca3af;
+  background: #f3f4f6;
+  border-color: #e5e7eb;
+}
+
+@media (max-width: 960px) {
+  .page-hero {
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 640px) {
+  .page {
+    gap: 10px;
+  }
+
+  .filter-card,
+  .table-panel,
+  .page-hero {
+    padding: 12px;
+    border-radius: 14px;
+  }
+
+  h2 {
+    font-size: 22px;
+    margin: 10px 0 6px;
+  }
+
+  .desc,
+  .notice,
+  .loading,
+  .table-tip,
+  .filter span,
+  .message-box,
+  .empty-state,
+  .detail-link,
+  .inline-btn {
+    font-size: 11px;
+  }
+
+  .hero-metrics {
+    min-width: 0;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .hero-metrics article {
+    padding: 10px;
+    border-radius: 12px;
+    gap: 4px;
+  }
+
+  .hero-metrics strong {
+    font-size: 18px;
+  }
+
+  .chips {
+    gap: 8px;
+  }
+
+  .filter-actions {
+    margin-top: 10px;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .filter input,
+  .filter select,
+  .inline-btn,
+  .detail-link {
+    padding: 7px 10px;
+    border-radius: 10px;
+  }
+
+  table,
+  thead,
+  tbody,
+  th,
+  td,
+  tr {
+    display: block;
+  }
+
+  thead {
+    display: none;
+  }
+
+  tr {
+    margin-bottom: 8px;
+    padding: 8px;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    background: #fff;
+  }
+
+  td {
+    border: 0;
+    padding: 4px 0;
+  }
+
+  td::before {
+    content: attr(data-label);
+    display: block;
+    margin-bottom: 2px;
+    color: #6b7280;
+    font-size: 10px;
+    font-weight: 600;
+  }
+
+  .actions-cell {
+    margin-top: 6px;
+    gap: 6px;
+  }
+}
+
+.modal-mask {
+  position: fixed; inset: 0; z-index: 1000;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(15,23,42,0.45); padding: 16px;
+}
+
+.modal-box {
+  background: #fff; border-radius: 18px; padding: 28px 24px 20px;
+  max-width: 400px; width: 100%;
+  box-shadow: 0 24px 60px rgba(15,23,42,0.18);
+}
+
+.modal-box h3 { margin: 0 0 10px; font-size: 18px; color: #0f172a; }
+.modal-box p { margin: 0 0 16px; font-size: 14px; color: #475569; line-height: 1.6; }
+
+.reason-label { display: grid; gap: 6px; margin-bottom: 16px; }
+.reason-label span { color: #374151; font-size: 13px; font-weight: 600; }
+.reason-label input { border: 1px solid #d1d5db; border-radius: 10px; padding: 10px 12px; }
+
+.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
+.cancel-btn, .confirm-btn { border: 1px solid #d1d5db; border-radius: 10px; padding: 8px 18px; font-size: 14px; font-weight: 600; cursor: pointer; }
+.cancel-btn { background: #fff; color: #475569; }
+.confirm-btn { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; border-color: transparent; }
+.confirm-btn.danger { background: linear-gradient(135deg, #dc2626, #b91c1c); }
+.confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+</style>

From 81ab04a96463de31677ee351b514004ccab5079c Mon Sep 17 00:00:00 2001
From: taiyi <shuobo1224@qq.com>
Date: Sat, 30 May 2026 16:13:33 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E4=B8=9A=E5=8A=A1=E5=91=98?=
 =?UTF-8?q?=E7=AB=AF=E6=94=AF=E6=8C=81=E4=BF=AE=E6=94=B9=E7=89=A9=E6=B5=81?=
 =?UTF-8?q?=E5=8D=95=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 PUT /api/logistics/tasks/{id}/tracking 接口，业务员可在订单详情页
修改进行中订单的快递单号和快递公司，修改记录写入审计日志。
四端同步：管理后台、司机端、管理小程序下次拉取即自动获取新值。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 backend/app/api/logistics.py                  | 28 +++++-
 backend/app/schemas/logistics.py              | 13 +++
 backend/app/services/logistics_service.py     | 64 ++++++++++++++
 .../web-sales/src/views/OrderDetailPage.vue   | 87 +++++++++++++++++++
 4 files changed, 191 insertions(+), 1 deletion(-)

diff --git a/backend/app/api/logistics.py b/backend/app/api/logistics.py
index 71239c8..41e7add 100644
--- a/backend/app/api/logistics.py
+++ b/backend/app/api/logistics.py
@@ -16,7 +16,7 @@ from sqlalchemy.orm import Session
 from backend.app.api.deps import get_logistics_service, require_permissions, require_roles
 from backend.app.db import get_db_session
 from backend.app.schemas.common import success_payload
-from backend.app.schemas.logistics import CreateLogisticsTaskRequest, CreateLogisticsTraceRequest, DriverTaskOperateRequest
+from backend.app.schemas.logistics import CreateLogisticsTaskRequest, CreateLogisticsTraceRequest, DriverTaskOperateRequest, UpdateTrackingRequest
 from backend.app.services.logistics_service import LogisticsService
 
 router = APIRouter(tags=["logistics"])
@@ -113,6 +113,32 @@ def get_logistics_task(
     return success_payload(logistics_service.get_task(task_id, session, current_user))
 
 
+@router.put("/api/logistics/tasks/{task_id}/tracking")
+def update_tracking_number(
+    task_id: int,  # 物流任务ID
+    payload: UpdateTrackingRequest,  # 修改物流单号请求体
+    logistics_service: LogisticsService = Depends(get_logistics_service),
+    session: Session = Depends(get_db_session),
+    current_user: dict = Depends(require_roles("salesman", "manager", "admin")),
+) -> dict:
+    """
+    修改物流单号
+
+    业务员或管理员修改已有物流任务的快递单号和快递公司。
+    业务员仅可修改自己订单关联的物流任务。
+
+    请求参数：
+        task_id: 路径参数，物流任务ID
+        payload: UpdateTrackingRequest 请求体
+
+    返回值：
+        更新后的物流任务信息
+
+    权限要求：salesman、manager、admin 角色
+    """
+    return success_payload(logistics_service.update_tracking(task_id, payload.model_dump(), session, current_user))
+
+
 @router.get("/api/driver/tasks")
 def list_driver_tasks(
     logistics_service: LogisticsService = Depends(get_logistics_service),  # 物流服务实例
diff --git a/backend/app/schemas/logistics.py b/backend/app/schemas/logistics.py
index 9b12f08..b9e5aaf 100644
--- a/backend/app/schemas/logistics.py
+++ b/backend/app/schemas/logistics.py
@@ -113,3 +113,16 @@ class CreateLogisticsTraceRequest(BaseModel):
 
     source_platform: str
     """来源平台"""
+
+
+class UpdateTrackingRequest(BaseModel):
+    """修改物流单号请求体。被 PUT /api/logistics/tasks/{id}/tracking 路由使用。"""
+
+    tracking_number: str
+    """新的物流追踪单号"""
+
+    express_company: str | None = None
+    """快递公司"""
+
+    remark: str | None = None
+    """修改原因/备注"""
diff --git a/backend/app/services/logistics_service.py b/backend/app/services/logistics_service.py
index 25a0d83..1c72863 100644
--- a/backend/app/services/logistics_service.py
+++ b/backend/app/services/logistics_service.py
@@ -285,6 +285,70 @@ class LogisticsService:
         """
         return self.get_task(task_id, session=session, current_user=current_user)
 
+    def update_tracking(
+        self,
+        task_id: int,
+        payload: dict,
+        session: Session | None = None,
+        current_user: dict | None = None,
+    ) -> dict:
+        """修改物流单号。
+
+        业务员/管理员修改已有物流任务的快递单号和快递公司。
+        业务员只能修改自己订单关联的任务。
+
+        Args:
+            task_id: 物流任务 ID
+            payload: 包含 tracking_number、express_company、remark 的字典
+            session: 数据库会话
+            current_user: 当前登录用户信息
+
+        Returns:
+            更新后的任务信息字典
+
+        被调用路由: logistics.py - PUT /logistics/tasks/{task_id}/tracking
+        """
+        if session is None:
+            raise AppException(code=ErrorCode.PARAM_ERROR, message="数据库会话未初始化", status_code=500)
+
+        task = self.logistics_repository.get_task(session, task_id)
+        if task is None:
+            raise AppException(code=ErrorCode.NOT_FOUND, message="物流任务不存在", status_code=404)
+
+        # 权限校验：salesman 只能改自己订单的物流单号
+        if current_user and current_user.get("role_code") == "salesman":
+            order = self.order_repository.get_order(session, task.order_id)
+            if order and order.salesman_id != current_user.get("user_id"):
+                raise AppException(code=ErrorCode.FORBIDDEN, message="无权修改他人订单的物流单号", status_code=403)
+
+        new_tracking = (payload.get("tracking_number") or "").strip()
+        if not new_tracking:
+            raise AppException(code=ErrorCode.PARAM_ERROR, message="物流单号不能为空", status_code=400)
+
+        old_tracking = task.tracking_number or ""
+        old_express = task.express_company or ""
+        task.tracking_number = new_tracking
+        task.express_company = (payload.get("express_company") or "").strip() or None
+
+        audit_service.write_log(
+            session,
+            {
+                "operate_type": "tracking_update",
+                "biz_type": "logistics_task",
+                "biz_id": task.id,
+                "before_value": {"tracking_number": old_tracking, "express_company": old_express},
+                "after_value": {"tracking_number": new_tracking, "express_company": task.express_company},
+                "remark": payload.get("remark") or f"修改物流单号：{old_tracking} → {new_tracking}",
+            },
+        )
+        session.commit()
+        return {
+            "task_id": task.id,
+            "order_id": task.order_id,
+            "tracking_number": task.tracking_number,
+            "express_company": task.express_company or "",
+        }
+
     def accept_task(
         self,
         task_id: int,
diff --git a/frontend/web-sales/src/views/OrderDetailPage.vue b/frontend/web-sales/src/views/OrderDetailPage.vue
index ceb16c4..94741ce 100644
--- a/frontend/web-sales/src/views/OrderDetailPage.vue
+++ b/frontend/web-sales/src/views/OrderDetailPage.vue
@@ -74,6 +74,17 @@
         </article>
       </div>
 
+      <div v-if="!loading && trackingInfo" class="tracking-card">
+        <div class="tracking-header">
+          <h3>物流信息</h3>
+          <button class="link-btn" @click="openTrackingEdit">修改单号</button>
+        </div>
+        <div class="tracking-fields">
+          <span>快递公司：<strong>{{ trackingInfo.express_company || '-' }}</strong></span>
+          <span>快递单号：<strong>{{ trackingInfo.tracking_number || '-' }}</strong></span>
+        </div>
+      </div>
+
         <section v-if="!loading" class="detail-panel">
         <div class="panel-header">
           <h3>订单明细</h3>
@@ -149,6 +160,28 @@
         </div>
       </div>
     </div>
+
+    <div v-if="showTrackingEdit" class="modal-mask" @click.self="showTrackingEdit = false">
+      <div class="modal-box">
+        <h3>修改物流单号</h3>
+        <label class="reason-label">
+          <span>快递公司</span>
+          <input v-model.trim="trackingForm.express_company" type="text" placeholder="如：顺丰、圆通" />
+        </label>
+        <label class="reason-label">
+          <span>快递单号</span>
+          <input v-model.trim="trackingForm.tracking_number" type="text" placeholder="请输入新快递单号" />
+        </label>
+        <label class="reason-label">
+          <span>修改原因</span>
+          <input v-model.trim="trackingForm.remark" type="text" placeholder="选填" />
+        </label>
+        <div class="modal-actions">
+          <button class="cancel-btn" @click="showTrackingEdit = false">取消</button>
+          <button class="confirm-btn" :disabled="!trackingForm.tracking_number || trackingSaving" @click="doUpdateTracking">{{ trackingSaving ? '保存中...' : '确认修改' }}</button>
+        </div>
+      </div>
+    </div>
   </section>
 </template>
 
@@ -157,8 +190,11 @@ import { computed, onMounted, ref } from "vue";
 import { RouterLink, useRoute, useRouter } from "vue-router";
 
 import ConfirmModal from "../components/ConfirmModal.vue";
+import { apiBaseUrl } from "../config";
 import { cancelOrder, fetchOrderDetail, submitOrder } from "../mockApi";
 
+const SALES_TOKEN_KEY = "sales_token";
+
 const route = useRoute();
 const router = useRouter();
 const loading = ref(true);
@@ -175,6 +211,11 @@ const message = ref("");
 const messageType = ref("success");
 const orderMeta = ref({ customer: "-", logistics: "-", factory: "-" });
 const isModal = computed(() => route.query.modal === "1");
+const trackingInfo = ref(null);
+const showTrackingEdit = ref(false);
+const trackingSaving = ref(false);
+const trackingForm = reactive({ tracking_number: "", express_company: "", remark: "" });
+const currentTaskId = ref(null);
 
 function canSubmit(status) {
   return ["draft", "rejected"].includes(status);
@@ -208,6 +249,14 @@ async function loadDetail() {
     logistics: data.blocks?.[3]?.content || "-",
     factory: data.blocks?.[3]?.content || "-",
   };
+  const task = data.logistics_info?.task;
+  if (task && task.task_id) {
+    trackingInfo.value = { tracking_number: task.tracking_number || "", express_company: task.express_company || "" };
+    currentTaskId.value = task.task_id;
+  } else {
+    trackingInfo.value = null;
+    currentTaskId.value = null;
+  }
 }
 
 function handleSubmit() {
@@ -274,6 +323,37 @@ async function doCancel() {
   }
 }
 
+function openTrackingEdit() {
+  trackingForm.tracking_number = trackingInfo.value?.tracking_number || "";
+  trackingForm.express_company = trackingInfo.value?.express_company || "";
+  trackingForm.remark = "";
+  showTrackingEdit.value = true;
+}
+
+async function doUpdateTracking() {
+  if (!trackingForm.tracking_number || !currentTaskId.value) return;
+  trackingSaving.value = true;
+  try {
+    const token = localStorage.getItem(SALES_TOKEN_KEY) || "";
+    const res = await fetch(`${apiBaseUrl}/api/logistics/tasks/${currentTaskId.value}/tracking`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json", ...(token ? { Authorization: `Bearer ${token}` } : {}) },
+      body: JSON.stringify({ tracking_number: trackingForm.tracking_number, express_company: trackingForm.express_company, remark: trackingForm.remark }),
+    });
+    const result = await res.json().catch(() => ({}));
+    if (!res.ok || result.code !== 0) throw new Error(result.message || "修改失败");
+    showTrackingEdit.value = false;
+    await loadDetail();
+    message.value = "物流单号已更新";
+    messageType.value = "success";
+  } catch (error) {
+    message.value = error.message || "修改物流单号失败";
+    messageType.value = "error";
+  } finally {
+    trackingSaving.value = false;
+  }
+}
+
 function handleClose() {
   router.push("/orders");
 }
@@ -658,4 +738,11 @@ p {
 .confirm-btn { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; border-color: transparent; }
 .confirm-btn.danger { background: linear-gradient(135deg, #dc2626, #b91c1c); }
 .confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.tracking-card { border: 1px solid #dbe3ef; border-radius: 18px; padding: 16px; background: #f0fdf4; }
+.tracking-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+.tracking-header h3 { margin: 0; font-size: 16px; }
+.tracking-fields { display: flex; gap: 24px; color: #475569; }
+.tracking-fields strong { color: #1d4ed8; }
+.link-btn { background: none; border: none; color: #2563eb; cursor: pointer; font-size: 13px; text-decoration: underline; }
 </style>