From 3ba7b179e885b0cd27fad164339c8b4cf7c08781 Mon Sep 17 00:00:00 2001
From: jacy <18049821889@163.com>
Date: Mon, 3 Aug 2026 19:59:44 +0800
Subject: [PATCH] =?UTF-8?q?style(store):=20=E7=BB=9F=E4=B8=80=E9=97=A8?=
 =?UTF-8?q?=E5=BA=97=E5=A5=97=E9=A4=90=E9=A1=B5=20UI=20=E4=B8=8E=E6=8B=93?=
 =?UTF-8?q?=E5=BA=97=E6=A0=A1=E9=AA=8C=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

管理后台套餐 Tab 对齐 Ant Design 表单；合伙人/门店端套餐表单与基本信息页风格一致；拓店下一步校验增加弹窗提示。

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/AdminStorePackagesSection.tsx  |  95 +++++---
 .../src/components/StorePackagesForm.tsx      | 140 +++++++-----
 apps/h5-partner/src/pages/StoreCreatePage.tsx |  41 +++-
 .../src/pages/StorePackagesPage.tsx           |  72 ++++--
 apps/h5-partner/src/styles.css                |  76 +++++++
 .../src/components/ShopPackagesForm.tsx       | 108 +++++++++
 apps/h5-shop/src/pages/PackagesPage.tsx       | 205 ++++++++----------
 apps/h5-shop/src/styles.css                   | 135 ++++++++++++
 8 files changed, 637 insertions(+), 235 deletions(-)
 create mode 100644 apps/h5-shop/src/components/ShopPackagesForm.tsx

diff --git a/apps/admin-web/src/components/AdminStorePackagesSection.tsx b/apps/admin-web/src/components/AdminStorePackagesSection.tsx
index 9a38790..0a01a41 100644
--- a/apps/admin-web/src/components/AdminStorePackagesSection.tsx
+++ b/apps/admin-web/src/components/AdminStorePackagesSection.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Button, Space, Typography, message } from 'antd';
+import { Alert, Button, Form, Input, InputNumber, Space, Typography, message } from 'antd';
 import type { StorePackageItemDto } from '@dukang/shared-types';
 import { STORE_PACKAGE_MAX_COUNT } from '@dukang/shared-types';
 import { request } from '../lib/api';
@@ -87,68 +87,101 @@ export default function AdminStorePackagesSection({ storeId }: { storeId: string
     }
   }
 
-  if (loading) return <Typography.Text type="secondary">加载套餐中…</Typography.Text>;
+  if (loading) {
+    return <Typography.Text type="secondary">加载套餐中…</Typography.Text>;
+  }
 
   return (
-    <div>
-      <Typography.Paragraph type="secondary">
-        总部直存立即生效，无需审核。最多 {STORE_PACKAGE_MAX_COUNT} 条。
-      </Typography.Paragraph>
+    <Form layout="vertical" requiredMark={false}>
+      <Alert
+        type="info"
+        showIcon
+        style={{ marginBottom: 16 }}
+        message={`总部直存立即生效，无需审核。同一门店最多 ${STORE_PACKAGE_MAX_COUNT} 条套餐。`}
+      />
+
       {items.map((item, index) => (
-        <div key={index} style={{ border: '1px solid #f0f0f0', borderRadius: 8, padding: 12, marginBottom: 12 }}>
-          <Space style={{ width: '100%', justifyContent: 'space-between', marginBottom: 8 }}>
-            <Typography.Text strong>套餐 {index + 1}</Typography.Text>
+        <div
+          key={index}
+          style={{
+            marginBottom: 16,
+            padding: 16,
+            border: '1px solid #f0f0f0',
+            borderRadius: 8,
+            background: '#fafafa',
+          }}
+        >
+          <Space style={{ width: '100%', justifyContent: 'space-between', marginBottom: 12 }}>
+            <Typography.Title level={5} style={{ margin: 0 }}>
+              套餐 {index + 1}
+            </Typography.Title>
             {items.length > 1 ? (
               <Button type="link" danger onClick={() => removeAt(index)}>
                 删除
               </Button>
             ) : null}
           </Space>
-          <Space direction="vertical" style={{ width: '100%' }}>
-            <input
-              placeholder="套餐名称"
+
+          <Form.Item label="套餐名称" required style={{ marginBottom: 12 }}>
+            <Input
+              placeholder="如：套餐A"
               value={item.name}
               onChange={(e) => updateAt(index, { name: e.target.value })}
-              style={{ width: '100%', padding: 8 }}
             />
-            <input
-              placeholder="价格（元）"
-              type="number"
+          </Form.Item>
+
+          <Form.Item label="价格（元）" required style={{ marginBottom: 12 }}>
+            <InputNumber
               min={0}
-              value={item.price}
-              onChange={(e) => updateAt(index, { price: e.target.value })}
-              style={{ width: '100%', padding: 8 }}
+              precision={2}
+              style={{ width: '100%' }}
+              addonAfter="元"
+              placeholder="198"
+              value={item.price === '' ? undefined : Number(item.price)}
+              onChange={(v) => updateAt(index, { price: v != null ? String(v) : '' })}
             />
-            <textarea
-              placeholder="菜品"
+          </Form.Item>
+
+          <Form.Item label="菜品" required style={{ marginBottom: 12 }}>
+            <Input.TextArea
               rows={2}
+              placeholder="红烧肉、红烧鱼、油焖茄子"
               value={item.dishes}
               onChange={(e) => updateAt(index, { dishes: e.target.value })}
-              style={{ width: '100%', padding: 8 }}
             />
-            <input
-              placeholder="使用时间"
+          </Form.Item>
+
+          <Form.Item label="使用时间" style={{ marginBottom: 12 }}>
+            <Input
+              placeholder="节假日除外"
               value={item.usableTime || ''}
               onChange={(e) => updateAt(index, { usableTime: e.target.value })}
-              style={{ width: '100%', padding: 8 }}
             />
-            <input
-              placeholder="其他说明"
+          </Form.Item>
+
+          <Form.Item label="其他说明" style={{ marginBottom: 0 }}>
+            <Input
+              placeholder="不可叠加"
               value={item.otherNotes || ''}
               onChange={(e) => updateAt(index, { otherNotes: e.target.value })}
-              style={{ width: '100%', padding: 8 }}
             />
-          </Space>
+          </Form.Item>
         </div>
       ))}
+
       {items.length < STORE_PACKAGE_MAX_COUNT ? (
-        <Button onClick={addRow} style={{ marginBottom: 12 }}>
+        <Button onClick={addRow} style={{ marginBottom: 16 }}>
           添加套餐
         </Button>
       ) : null}
+
+      <Typography.Paragraph type="secondary" style={{ marginBottom: 12 }}>
+        修改后点击下方按钮保存，C 端将立即展示生效套餐。
+      </Typography.Paragraph>
+
       <Button type="primary" loading={saving} onClick={() => void save()}>
         保存套餐
       </Button>
-    </div>
+    </Form>
   );
 }
diff --git a/apps/h5-partner/src/components/StorePackagesForm.tsx b/apps/h5-partner/src/components/StorePackagesForm.tsx
index c48f0b3..53e01bc 100644
--- a/apps/h5-partner/src/components/StorePackagesForm.tsx
+++ b/apps/h5-partner/src/components/StorePackagesForm.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import type { PackageFormItem } from '../lib/storePackages';
 import { STORE_PACKAGE_MAX_COUNT } from '@dukang/shared-types';
 import { emptyPackage } from '../lib/storePackages';
@@ -7,9 +6,11 @@ type Props = {
   items: PackageFormItem[];
   onChange: (items: PackageFormItem[]) => void;
   disabled?: boolean;
+  /** 嵌入拓店流程时不重复外层卡片边距 */
+  embedded?: boolean;
 };
 
-export default function StorePackagesForm({ items, onChange, disabled }: Props) {
+export default function StorePackagesForm({ items, onChange, disabled, embedded }: Props) {
   function updateAt(index: number, patch: Partial<PackageFormItem>) {
     const next = items.map((item, i) => (i === index ? { ...item, ...patch } : item));
     onChange(next);
@@ -27,76 +28,97 @@ export default function StorePackagesForm({ items, onChange, disabled }: Props)
   const list = items.length ? items : [emptyPackage(0)];
 
   return (
-    <div className="partner-packages-form">
+    <div className={`partner-packages-form${embedded ? ' partner-packages-form--embedded' : ''}`}>
       {list.map((item, index) => (
-        <div key={index} className="partner-card" style={{ marginBottom: 12 }}>
-          <div className="partner-card-title" style={{ display: 'flex', justifyContent: 'space-between' }}>
-            <span>套餐 {index + 1}</span>
+        <section
+          key={index}
+          className="partner-form-card partner-packages-item"
+          style={embedded ? { marginLeft: 0, marginRight: 0 } : undefined}
+        >
+          <div className="partner-packages-item-head">
+            <div className="partner-section-title" style={{ marginBottom: 0 }}>
+              <div className="partner-section-bar" />
+              <h2 className="headline-md">套餐 {index + 1}</h2>
+            </div>
             {!disabled && list.length > 1 ? (
-              <button type="button" className="partner-link-btn" onClick={() => removeAt(index)}>
+              <button type="button" className="partner-packages-remove" onClick={() => removeAt(index)}>
                 删除
               </button>
             ) : null}
           </div>
-          <label className="partner-field">
-            <span className="partner-label">套餐名称</span>
-            <input
-              className="partner-input"
-              value={item.name}
-              disabled={disabled}
-              placeholder="如：套餐A"
-              onChange={(e) => updateAt(index, { name: e.target.value })}
-            />
-          </label>
-          <label className="partner-field">
-            <span className="partner-label">价格（元）</span>
-            <input
-              className="partner-input"
-              type="number"
-              min={0}
-              step={0.01}
-              value={item.price}
-              disabled={disabled}
-              placeholder="198"
-              onChange={(e) => updateAt(index, { price: e.target.value })}
-            />
-          </label>
-          <label className="partner-field">
-            <span className="partner-label">菜品</span>
+
+          <div className="partner-field">
+            <label>套餐名称 <span className="text-primary">*</span></label>
+            <div className="partner-field-input">
+              <span className="material-symbols-outlined">restaurant</span>
+              <input
+                placeholder="如：套餐A"
+                value={item.name}
+                disabled={disabled}
+                onChange={(e) => updateAt(index, { name: e.target.value })}
+              />
+            </div>
+          </div>
+
+          <div className="partner-field">
+            <label>价格（元） <span className="text-primary">*</span></label>
+            <div className="partner-field-input">
+              <span className="material-symbols-outlined">payments</span>
+              <input
+                type="number"
+                min={0}
+                step={0.01}
+                placeholder="198"
+                value={item.price}
+                disabled={disabled}
+                onChange={(e) => updateAt(index, { price: e.target.value })}
+              />
+            </div>
+          </div>
+
+          <div className="partner-field">
+            <label>菜品 <span className="text-primary">*</span></label>
             <textarea
-              className="partner-input"
-              rows={2}
+              rows={3}
+              placeholder="红烧肉、红烧鱼、油焖茄子"
               value={item.dishes}
               disabled={disabled}
-              placeholder="红烧肉、红烧鱼、油焖茄子"
               onChange={(e) => updateAt(index, { dishes: e.target.value })}
             />
-          </label>
-          <label className="partner-field">
-            <span className="partner-label">使用时间</span>
-            <input
-              className="partner-input"
-              value={item.usableTime || ''}
-              disabled={disabled}
-              placeholder="节假日除外"
-              onChange={(e) => updateAt(index, { usableTime: e.target.value })}
-            />
-          </label>
-          <label className="partner-field">
-            <span className="partner-label">其他说明</span>
-            <input
-              className="partner-input"
-              value={item.otherNotes || ''}
-              disabled={disabled}
-              placeholder="不可叠加"
-              onChange={(e) => updateAt(index, { otherNotes: e.target.value })}
-            />
-          </label>
-        </div>
+          </div>
+
+          <div className="partner-field">
+            <label>使用时间</label>
+            <div className="partner-field-input">
+              <span className="material-symbols-outlined">schedule</span>
+              <input
+                placeholder="节假日除外"
+                value={item.usableTime || ''}
+                disabled={disabled}
+                onChange={(e) => updateAt(index, { usableTime: e.target.value })}
+              />
+            </div>
+          </div>
+
+          <div className="partner-field">
+            <label>其他说明</label>
+            <div className="partner-field-input">
+              <span className="material-symbols-outlined">info</span>
+              <input
+                placeholder="不可叠加"
+                value={item.otherNotes || ''}
+                disabled={disabled}
+                onChange={(e) => updateAt(index, { otherNotes: e.target.value })}
+              />
+            </div>
+          </div>
+        </section>
       ))}
+
       {!disabled && list.length < STORE_PACKAGE_MAX_COUNT ? (
-        <button type="button" className="partner-btn-outline" onClick={addItem}>
-          + 添加套餐
+        <button type="button" className="partner-packages-add" onClick={addItem}>
+          <span className="material-symbols-outlined">add_circle</span>
+          添加套餐
         </button>
       ) : null}
     </div>
diff --git a/apps/h5-partner/src/pages/StoreCreatePage.tsx b/apps/h5-partner/src/pages/StoreCreatePage.tsx
index 1a40210..14ebd80 100644
--- a/apps/h5-partner/src/pages/StoreCreatePage.tsx
+++ b/apps/h5-partner/src/pages/StoreCreatePage.tsx
@@ -102,6 +102,7 @@ export default function StoreCreatePage() {
   const [categoryTree, setCategoryTree] = useState<StoreCategoryNode[]>([]);
 
   const [mapPickerOpen, setMapPickerOpen] = useState(false);
+  const [stepErrorModal, setStepErrorModal] = useState<string | null>(null);
 
   const draftSaveDisabledRef = useRef(false);
 
@@ -109,6 +110,11 @@ export default function StoreCreatePage() {
     setSubmitError(message);
   }
 
+  function reportStepError(message: string) {
+    setSubmitError(message);
+    setStepErrorModal(message);
+  }
+
   const stepFromUrl = Number(params.get('step') || 0);
 
   const step = stepFromUrl >= 1 && stepFromUrl <= 4 ? stepFromUrl : (saved?.step ?? 1);
@@ -301,7 +307,7 @@ export default function StoreCreatePage() {
       const msg = validateStoreStep1(form);
 
       if (msg) {
-        reportFormError(msg);
+        reportStepError(msg);
         return;
       }
 
@@ -312,7 +318,7 @@ export default function StoreCreatePage() {
       const msg = validateStoreStep2(form);
 
       if (msg) {
-        reportFormError(msg);
+        reportStepError(msg);
         return;
       }
 
@@ -323,9 +329,10 @@ export default function StoreCreatePage() {
       if (msg) {
         if (isPhoneValidationMessage(msg)) {
           setFieldErrors({ phone: msg });
+          reportStepError(msg);
           return;
         }
-        reportFormError(msg);
+        reportStepError(msg);
         return;
       }
     }
@@ -1128,13 +1135,19 @@ export default function StoreCreatePage() {
 
       {step === 4 && (
         <>
-          <section className="partner-section">
-            <h2 className="partner-section-title">门店套餐（可选）</h2>
-            <p className="partner-form-hint">可不填；提交后将进入总部审核。也可跳过此步。</p>
+          <section className="partner-form-card">
+            <div className="partner-section-title">
+              <div className="partner-section-bar" />
+              <h2 className="headline-md">门店套餐</h2>
+            </div>
+            <p className="label-md text-muted" style={{ marginBottom: 16 }}>
+              可选填写；提交后将进入总部审核。也可在最后一页点击「跳过」。
+            </p>
             <StorePackagesForm
               items={form.packages?.length ? form.packages : [{ name: '', price: '', dishes: '', usableTime: '', otherNotes: '', sortOrder: 0 }]}
               onChange={(packages) => setForm((prev) => ({ ...prev, packages }))}
               disabled={submitting}
+              embedded
             />
           </section>
         </>
@@ -1181,6 +1194,22 @@ export default function StoreCreatePage() {
 
       </footer>
 
+      {stepErrorModal ? (
+        <div className="partner-ship-modal-backdrop" role="presentation" onClick={() => setStepErrorModal(null)}>
+          <div className="partner-ship-modal" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
+            <h3 className="headline-md" style={{ marginBottom: 8 }}>请完善信息</h3>
+            <p className="body-md text-muted" style={{ lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>
+              {stepErrorModal}
+            </p>
+            <div className="partner-ship-actions">
+              <button type="button" className="partner-btn-primary" onClick={() => setStepErrorModal(null)}>
+                我知道了
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
       <TencentLocPickerOverlay
         open={mapPickerOpen}
         onClose={() => setMapPickerOpen(false)}
diff --git a/apps/h5-partner/src/pages/StorePackagesPage.tsx b/apps/h5-partner/src/pages/StorePackagesPage.tsx
index 14dc4a0..d49c7d3 100644
--- a/apps/h5-partner/src/pages/StorePackagesPage.tsx
+++ b/apps/h5-partner/src/pages/StorePackagesPage.tsx
@@ -69,36 +69,66 @@ export default function StorePackagesPage() {
 
   if (loading) {
     return (
-      <div className="partner-page">
-        <p className="partner-muted">加载中…</p>
+      <div className="partner-detail-page partner-home--flush-top">
+        <main style={{ padding: '24px 20px' }}>
+          <p className="label-md text-muted">加载中…</p>
+        </main>
       </div>
     );
   }
 
   return (
-    <div className="partner-page partner-page-sticky">
-      <header className="partner-subheader">
-        <button type="button" className="partner-back" onClick={() => navigate(`/stores/${id}`)}>
-          返回
+    <div className="partner-page-sticky partner-home--flush-top">
+      <header className="partner-packages-page-header">
+        <button type="button" className="partner-packages-back" onClick={() => navigate(`/stores/${id}`)}>
+          <span className="material-symbols-outlined">arrow_back</span>
         </button>
-        <h1 className="partner-subheader-title">门店套餐</h1>
+        <h1 className="headline-md">门店套餐</h1>
       </header>
 
-      {error ? <p className="partner-form-error">{error}</p> : null}
-      {pending?.status === 'PENDING' ? (
-        <p className="partner-form-hint">套餐变更审核中，C 端仍展示上一版生效套餐。</p>
-      ) : null}
-      {pending?.status === 'REJECTED' && pending.rejectReason ? (
-        <p className="partner-form-error">上次驳回：{pending.rejectReason}</p>
-      ) : null}
+      <main className="partner-packages-page-main">
+        {error ? <p className="partner-form-error" role="alert">{error}</p> : null}
 
-      <StorePackagesForm
-        items={items}
-        onChange={setItems}
-        disabled={pending?.status === 'PENDING' || submitting}
-      />
+        {pending?.status === 'PENDING' ? (
+          <div className="partner-info-banner">
+            <span className="material-symbols-outlined" style={{ color: 'var(--color-heritage-red)' }}>hourglass_top</span>
+            <p className="body-md">套餐变更审核中，C 端仍展示上一版生效套餐。</p>
+          </div>
+        ) : null}
 
-      <div className="partner-sticky-footer">
+        {pending?.status === 'REJECTED' && pending.rejectReason ? (
+          <div className="partner-info-banner" style={{ background: 'rgba(180,35,24,0.06)', borderColor: 'rgba(180,35,24,0.15)' }}>
+            <span className="material-symbols-outlined" style={{ color: 'var(--color-heritage-red)' }}>error</span>
+            <p className="body-md">上次驳回：{pending.rejectReason}</p>
+          </div>
+        ) : null}
+
+        <section className="partner-form-card">
+          <div className="partner-section-title">
+            <div className="partner-section-bar" />
+            <h2 className="headline-md">套餐信息</h2>
+          </div>
+          <p className="label-md text-muted" style={{ marginBottom: 16 }}>
+            提交后将由总部审核，通过后 C 端展示生效套餐。
+          </p>
+          <StorePackagesForm
+            items={items}
+            onChange={setItems}
+            disabled={pending?.status === 'PENDING' || submitting}
+            embedded
+          />
+        </section>
+      </main>
+
+      <footer className="partner-sticky-footer">
+        <button
+          type="button"
+          className="partner-btn-outline"
+          onClick={() => navigate(`/stores/${id}`)}
+          disabled={submitting}
+        >
+          返回
+        </button>
         <button
           type="button"
           className="partner-btn-primary"
@@ -107,7 +137,7 @@ export default function StorePackagesPage() {
         >
           {submitting ? '提交中…' : '提交审核'}
         </button>
-      </div>
+      </footer>
     </div>
   );
 }
diff --git a/apps/h5-partner/src/styles.css b/apps/h5-partner/src/styles.css
index 47a1f7b..ae097c1 100644
--- a/apps/h5-partner/src/styles.css
+++ b/apps/h5-partner/src/styles.css
@@ -3634,3 +3634,79 @@ header:has(> .app-page-title:only-child),
   border: none !important;
   box-shadow: none !important;
 }
+
+/* ─── 门店套餐 ─── */
+.partner-packages-page-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px var(--space-page) 8px;
+  background: var(--color-surface);
+  border-bottom: 1px solid rgba(226, 190, 188, 0.12);
+}
+
+.partner-packages-back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: transparent;
+  color: var(--color-on-surface);
+  padding: 0;
+}
+
+.partner-packages-page-main {
+  padding-bottom: 88px;
+}
+
+.partner-packages-form--embedded .partner-packages-item {
+  margin-bottom: var(--space-md);
+  box-shadow: none;
+  border: 1px solid rgba(226, 190, 188, 0.2);
+}
+
+.partner-packages-form--embedded .partner-packages-item:last-of-type {
+  margin-bottom: 0;
+}
+
+.partner-packages-item-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-md);
+}
+
+.partner-packages-remove {
+  border: none;
+  background: transparent;
+  color: var(--color-heritage-red);
+  font-size: 13px;
+  padding: 4px 0;
+}
+
+.partner-packages-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: calc(100% - var(--space-page) * 2);
+  margin: 0 var(--space-page) var(--space-md);
+  min-height: 48px;
+  border: 1px dashed rgba(166, 29, 36, 0.35);
+  border-radius: var(--radius-md);
+  background: rgba(166, 29, 36, 0.04);
+  color: var(--color-heritage-red);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.partner-packages-add .material-symbols-outlined {
+  font-size: 20px;
+}
+
+.partner-packages-form:not(.partner-packages-form--embedded) .partner-packages-item {
+  margin-left: var(--space-page);
+  margin-right: var(--space-page);
+}
diff --git a/apps/h5-shop/src/components/ShopPackagesForm.tsx b/apps/h5-shop/src/components/ShopPackagesForm.tsx
new file mode 100644
index 0000000..0efa6cb
--- /dev/null
+++ b/apps/h5-shop/src/components/ShopPackagesForm.tsx
@@ -0,0 +1,108 @@
+import { STORE_PACKAGE_MAX_COUNT } from '@dukang/shared-types';
+import { emptyPackage, type PackageFormItem } from '../lib/storePackages';
+
+type Props = {
+  items: PackageFormItem[];
+  onChange: (items: PackageFormItem[]) => void;
+  disabled?: boolean;
+};
+
+export default function ShopPackagesForm({ items, onChange, disabled }: Props) {
+  function updateAt(index: number, patch: Partial<PackageFormItem>) {
+    onChange(items.map((item, i) => (i === index ? { ...item, ...patch } : item)));
+  }
+
+  function addItem() {
+    if (items.length >= STORE_PACKAGE_MAX_COUNT) return;
+    onChange([...items, emptyPackage(items.length)]);
+  }
+
+  function removeAt(index: number) {
+    onChange(items.filter((_, i) => i !== index).map((item, i) => ({ ...item, sortOrder: i })));
+  }
+
+  const list = items.length ? items : [emptyPackage(0)];
+
+  return (
+    <div className="shop-packages-form">
+      {list.map((item, index) => (
+        <section key={index} className="shop-packages-card">
+          <div className="shop-packages-card-head">
+            <h3 className="shop-packages-card-title">套餐 {index + 1}</h3>
+            {!disabled && list.length > 1 ? (
+              <button type="button" className="shop-packages-remove" onClick={() => removeAt(index)}>
+                删除
+              </button>
+            ) : null}
+          </div>
+
+          <label className="shop-packages-field">
+            <span className="shop-packages-label">套餐名称 *</span>
+            <input
+              className="shop-packages-input"
+              placeholder="如：套餐A"
+              value={item.name}
+              disabled={disabled}
+              onChange={(e) => updateAt(index, { name: e.target.value })}
+            />
+          </label>
+
+          <label className="shop-packages-field">
+            <span className="shop-packages-label">价格（元） *</span>
+            <input
+              className="shop-packages-input"
+              type="number"
+              min={0}
+              step={0.01}
+              placeholder="198"
+              value={item.price}
+              disabled={disabled}
+              onChange={(e) => updateAt(index, { price: e.target.value })}
+            />
+          </label>
+
+          <label className="shop-packages-field">
+            <span className="shop-packages-label">菜品 *</span>
+            <textarea
+              className="shop-packages-textarea"
+              rows={3}
+              placeholder="红烧肉、红烧鱼、油焖茄子"
+              value={item.dishes}
+              disabled={disabled}
+              onChange={(e) => updateAt(index, { dishes: e.target.value })}
+            />
+          </label>
+
+          <label className="shop-packages-field">
+            <span className="shop-packages-label">使用时间</span>
+            <input
+              className="shop-packages-input"
+              placeholder="节假日除外"
+              value={item.usableTime || ''}
+              disabled={disabled}
+              onChange={(e) => updateAt(index, { usableTime: e.target.value })}
+            />
+          </label>
+
+          <label className="shop-packages-field">
+            <span className="shop-packages-label">其他说明</span>
+            <input
+              className="shop-packages-input"
+              placeholder="不可叠加"
+              value={item.otherNotes || ''}
+              disabled={disabled}
+              onChange={(e) => updateAt(index, { otherNotes: e.target.value })}
+            />
+          </label>
+        </section>
+      ))}
+
+      {!disabled && list.length < STORE_PACKAGE_MAX_COUNT ? (
+        <button type="button" className="shop-packages-add" onClick={addItem}>
+          <span className="material-symbols-outlined">add_circle</span>
+          添加套餐
+        </button>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/h5-shop/src/pages/PackagesPage.tsx b/apps/h5-shop/src/pages/PackagesPage.tsx
index 7a43a20..41af591 100644
--- a/apps/h5-shop/src/pages/PackagesPage.tsx
+++ b/apps/h5-shop/src/pages/PackagesPage.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import type { StorePackagesResponse } from '@dukang/shared-types';
-import { STORE_PACKAGE_MAX_COUNT } from '@dukang/shared-types';
+import PullToRefresh from '@dukang/shared-ui/PullToRefresh';
+import ShopPackagesForm from '../components/ShopPackagesForm';
 import { request } from '../lib/api';
 import {
   emptyPackage,
@@ -16,49 +17,43 @@ export default function PackagesPage() {
   const [pending, setPending] = useState<StorePackagesResponse['pendingRequest']>(null);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState('');
+  const [msg, setMsg] = useState('');
+
+  async function load() {
+    setLoading(true);
+    try {
+      const data = await request<StorePackagesResponse>('SHOP_H5', '/shop/store/packages');
+      const base = data.pendingRequest?.packages?.length
+        ? data.pendingRequest.packages
+        : data.live?.length
+          ? data.live
+          : [emptyPackage()];
+      setItems(base.map((p, i) => ({ ...p, price: String(p.price), sortOrder: i })));
+      setPending(data.pendingRequest ?? null);
+      setMsg('');
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : '加载失败');
+    } finally {
+      setLoading(false);
+    }
+  }
 
   useEffect(() => {
-    setLoading(true);
-    request<StorePackagesResponse>('SHOP_H5', '/shop/store/packages')
-      .then((data) => {
-        const base = data.pendingRequest?.packages?.length
-          ? data.pendingRequest.packages
-          : data.live?.length
-            ? data.live
-            : [emptyPackage()];
-        setItems(base.map((p, i) => ({ ...p, price: String(p.price), sortOrder: i })));
-        setPending(data.pendingRequest ?? null);
-      })
-      .catch((e) => setError(e instanceof Error ? e.message : '加载失败'))
-      .finally(() => setLoading(false));
+    void load();
   }, []);
 
-  function updateAt(index: number, patch: Partial<PackageFormItem>) {
-    setItems((prev) => prev.map((item, i) => (i === index ? { ...item, ...patch } : item)));
-  }
-
-  function addItem() {
-    if (items.length >= STORE_PACKAGE_MAX_COUNT) return;
-    setItems((prev) => [...prev, emptyPackage(prev.length)]);
-  }
-
-  function removeAt(index: number) {
-    setItems((prev) => prev.filter((_, i) => i !== index).map((item, i) => ({ ...item, sortOrder: i })));
-  }
-
   async function submitAudit() {
-    const msg = validatePackageFormItems(items);
-    if (msg) {
-      setError(msg);
+    const validationMsg = validatePackageFormItems(items);
+    if (validationMsg) {
+      setMsg(validationMsg);
       return;
     }
     if (pending?.status === 'PENDING') {
-      setError('已有套餐变更审核中，请等待总部处理');
+      setMsg('已有套餐变更审核中，请等待总部处理');
       return;
     }
     setSubmitting(true);
-    setError('');
+    setMsg('');
     try {
       const packages = normalizePackageFormItems(items).map((p) => ({
         ...p,
@@ -68,105 +63,79 @@ export default function PackagesPage() {
         method: 'PUT',
         body: JSON.stringify({ packages }),
       });
-      navigate('/mine');
+      setMsg('已提交审核，请等待总部处理');
+      await load();
     } catch (e) {
-      setError(e instanceof Error ? e.message : '提交失败');
+      setMsg(e instanceof Error ? e.message : '提交失败');
     } finally {
       setSubmitting(false);
     }
   }
 
-  const list = items.length ? items : [emptyPackage()];
   const disabled = pending?.status === 'PENDING' || submitting;
 
   return (
-    <div className="shop-page">
-      <header className="shop-subheader">
-        <button type="button" className="shop-back" onClick={() => navigate('/mine')}>
-          返回
+    <PullToRefresh onRefresh={load} className="shop-records-page shop-packages-page">
+      <header className="shop-records-header" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <button
+          type="button"
+          className="shop-withdraw-back"
+          onClick={() => navigate('/mine')}
+          aria-label="返回"
+        >
+          <span className="material-symbols-outlined" style={{ fontSize: 22 }}>
+            arrow_back
+          </span>
         </button>
-        <h1>门店套餐</h1>
+        <h1 className="app-page-title" style={{ margin: 0 }}>
+          门店套餐
+        </h1>
       </header>
 
-      {loading ? <p className="shop-muted">加载中…</p> : null}
-      {error ? <p className="shop-error">{error}</p> : null}
-      {pending?.status === 'PENDING' ? (
-        <p className="shop-hint">套餐变更审核中，用户端仍展示上一版生效套餐。</p>
-      ) : null}
+      <div className="shop-records-main">
+        {loading ? <p className="shop-records-empty">加载中…</p> : null}
 
-      {!loading
-        ? list.map((item, index) => (
-            <div key={index} className="shop-card" style={{ marginBottom: 12 }}>
-              <div className="shop-card-head">
-                <strong>套餐 {index + 1}</strong>
-                {!disabled && list.length > 1 ? (
-                  <button type="button" onClick={() => removeAt(index)}>
-                    删除
-                  </button>
-                ) : null}
-              </div>
-              <label>
-                名称
-                <input
-                  value={item.name}
-                  disabled={disabled}
-                  onChange={(e) => updateAt(index, { name: e.target.value })}
-                />
-              </label>
-              <label>
-                价格（元）
-                <input
-                  type="number"
-                  min={0}
-                  value={item.price}
-                  disabled={disabled}
-                  onChange={(e) => updateAt(index, { price: e.target.value })}
-                />
-              </label>
-              <label>
-                菜品
-                <textarea
-                  rows={2}
-                  value={item.dishes}
-                  disabled={disabled}
-                  onChange={(e) => updateAt(index, { dishes: e.target.value })}
-                />
-              </label>
-              <label>
-                使用时间
-                <input
-                  value={item.usableTime || ''}
-                  disabled={disabled}
-                  onChange={(e) => updateAt(index, { usableTime: e.target.value })}
-                />
-              </label>
-              <label>
-                其他说明
-                <input
-                  value={item.otherNotes || ''}
-                  disabled={disabled}
-                  onChange={(e) => updateAt(index, { otherNotes: e.target.value })}
-                />
-              </label>
-            </div>
-          ))
-        : null}
+        {!loading && pending?.status === 'PENDING' ? (
+          <section className="shop-packages-notice">
+            <span className="material-symbols-outlined shop-fill-icon" style={{ fontSize: 18 }}>
+              hourglass_top
+            </span>
+            <p>套餐变更审核中，用户端仍展示上一版生效套餐。</p>
+          </section>
+        ) : null}
 
-      {!disabled && list.length < STORE_PACKAGE_MAX_COUNT ? (
-        <button type="button" className="shop-btn-outline" onClick={addItem}>
-          + 添加套餐
-        </button>
-      ) : null}
+        {!loading && pending?.status === 'REJECTED' && pending.rejectReason ? (
+          <section className="shop-packages-notice shop-packages-notice--warn">
+            <span className="material-symbols-outlined shop-fill-icon" style={{ fontSize: 18 }}>
+              error
+            </span>
+            <p>上次驳回：{pending.rejectReason}</p>
+          </section>
+        ) : null}
 
-      <button
-        type="button"
-        className="shop-btn-primary"
-        style={{ marginTop: 16 }}
-        disabled={disabled}
-        onClick={() => void submitAudit()}
-      >
-        {submitting ? '提交中…' : '提交审核'}
-      </button>
-    </div>
+        {!loading ? (
+          <>
+            <p className="shop-packages-intro">
+              维护门店可核销套餐信息，提交后由总部审核通过后在用户端展示。
+            </p>
+            <ShopPackagesForm items={items} onChange={setItems} disabled={disabled} />
+          </>
+        ) : null}
+
+        {msg ? <p className="shop-withdraw-msg">{msg}</p> : null}
+
+        {!loading ? (
+          <button
+            type="button"
+            className="shop-withdraw-btn"
+            style={{ marginTop: 16 }}
+            disabled={disabled}
+            onClick={() => void submitAudit()}
+          >
+            {submitting ? '提交中…' : '提交审核'}
+          </button>
+        ) : null}
+      </div>
+    </PullToRefresh>
   );
 }
diff --git a/apps/h5-shop/src/styles.css b/apps/h5-shop/src/styles.css
index ca8afff..deedb7c 100644
--- a/apps/h5-shop/src/styles.css
+++ b/apps/h5-shop/src/styles.css
@@ -1920,6 +1920,141 @@
   text-align: center;
 }
 
+/* ─── 门店套餐 ─── */
+.shop-packages-page .shop-records-main {
+  padding-bottom: 24px;
+}
+
+.shop-packages-intro {
+  margin: 0 0 12px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--color-subtle-gray);
+}
+
+.shop-packages-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 12px;
+  padding: 12px 14px;
+  border-radius: var(--radius-md);
+  background: rgba(46, 125, 50, 0.08);
+  border: 1px solid rgba(46, 125, 50, 0.15);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--color-on-surface);
+}
+
+.shop-packages-notice--warn {
+  background: rgba(180, 35, 24, 0.06);
+  border-color: rgba(180, 35, 24, 0.12);
+}
+
+.shop-packages-notice p {
+  margin: 0;
+}
+
+.shop-packages-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.shop-packages-card {
+  background: var(--color-card);
+  border-radius: var(--radius-md);
+  padding: 16px;
+  box-shadow: var(--shadow-card);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.shop-packages-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.shop-packages-card-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--color-on-surface);
+}
+
+.shop-packages-remove {
+  border: none;
+  background: transparent;
+  color: var(--color-heritage-red);
+  font-size: 13px;
+  padding: 0;
+}
+
+.shop-packages-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.shop-packages-field:last-child {
+  margin-bottom: 0;
+}
+
+.shop-packages-label {
+  font-size: 12px;
+  color: var(--color-subtle-gray);
+}
+
+.shop-packages-input,
+.shop-packages-textarea {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-container-low, #fafafa);
+  font-size: 14px;
+  color: var(--color-on-surface);
+}
+
+.shop-packages-textarea {
+  resize: vertical;
+  min-height: 72px;
+}
+
+.shop-packages-input:focus,
+.shop-packages-textarea:focus {
+  outline: none;
+  border-color: var(--color-heritage-red);
+  box-shadow: 0 0 0 1px rgba(166, 29, 36, 0.12);
+}
+
+.shop-packages-input:disabled,
+.shop-packages-textarea:disabled {
+  opacity: 0.6;
+}
+
+.shop-packages-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  min-height: 48px;
+  border: 1px dashed rgba(166, 29, 36, 0.35);
+  border-radius: var(--radius-md);
+  background: rgba(166, 29, 36, 0.04);
+  color: var(--color-heritage-red);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.shop-packages-add .material-symbols-outlined {
+  font-size: 20px;
+}
+
 .shop-record-amounts {
   display: grid;
   grid-template-columns: 1fr 1fr;