feat: multi-module iteration

apps/h5-partner/src/pages/StoreDetailPage.tsx

@@ -0,0 +1,517 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import AppImage from '@dukang/shared-ui/AppImage';
+import { request } from '../lib/api';
+import { toastError, toastSuccess } from '../lib/toast';
+import { usePartnerSession } from '../contexts/PartnerSessionContext';
+import { canManagePartnerStore } from '../lib/partnerAccess';
+import { MIN_ENV_PHOTO_COUNT, normalizeStringArray, patchEnvPhotoAt, addEnvPhotoSlot } from '../lib/storeDraft';
+import OssUploadField from '../components/OssUploadField';
+import TencentLocPickerOverlay from '../components/TencentLocPickerOverlay';
+import {
+  canPartnerOpenStore,
+  storeAuditLabel,
+  storeAuditPillClass,
+  storeStatusLabel,
+  storeStatusPillClass,
+  type StoreStatusValue,
+} from '../lib/storeStatus';
+import { usePartnerPageView } from '../lib/usePageView';
+
+const STATUS_OPTIONS: StoreStatusValue[] = ['OPEN', 'PAUSED', 'CLOSED'];
+
+function uniqueEnvUrls(urls: string[]): string[] {
+  const seen = new Set<string>();
+  const out: string[] = [];
+  for (const raw of urls) {
+    const url = raw.trim();
+    if (!url || seen.has(url)) continue;
+    seen.add(url);
+    out.push(url);
+  }
+  return out;
+}
+
+export default function StoreDetailPage() {
+  const { id } = useParams();
+  usePartnerPageView('partner_store_detail_view', id ? { storeId: id } : undefined);
+  const navigate = useNavigate();
+  const { account } = usePartnerSession();
+  const canMutate = canManagePartnerStore(account);
+  const [store, setStore] = useState<Record<string, unknown> | null>(null);
+  const [loadError, setLoadError] = useState('');
+  const [form, setForm] = useState({
+    name: '',
+    phone: '',
+    address: '',
+    intro: '',
+    benefitUsageRule: '',
+    latitude: '',
+    longitude: '',
+  });
+  const [coverUrl, setCoverUrl] = useState('');
+  const [envPhotoUrls, setEnvPhotoUrls] = useState<string[]>(['', '', '']);
+  const [status, setStatus] = useState<StoreStatusValue>('OPEN');
+  const [statusSaving, setStatusSaving] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [mediaSaving, setMediaSaving] = useState(false);
+  const [mapPickerOpen, setMapPickerOpen] = useState(false);
+  const [actionError, setActionError] = useState('');
+  const [closeConfirmOpen, setCloseConfirmOpen] = useState(false);
+
+  function applyStore(data: Record<string, unknown>) {
+    setStore(data);
+    setForm({
+      name: String(data.name || ''),
+      phone: String(data.phone || ''),
+      address: String(data.address || ''),
+      intro: String(data.intro || ''),
+      benefitUsageRule: (() => {
+        const raw = String(data.benefitUsageRule || '').trim();
+        return raw && !/^null$/i.test(raw) ? raw : '';
+      })(),
+      latitude: data.latitude != null && data.latitude !== '' ? String(data.latitude) : '',
+      longitude: data.longitude != null && data.longitude !== '' ? String(data.longitude) : '',
+    });
+    setStatus(String(data.status || 'OPEN').toUpperCase() as StoreStatusValue);
+    setCoverUrl(String(data.coverUrl || ''));
+    const envFromMedia = Array.isArray(data.media)
+      ? uniqueEnvUrls(
+          (data.media as Array<{ url?: string; bizType?: string }>)
+            .filter((m) => m.bizType === 'ENV')
+            .map((m) => String(m.url || '')),
+        )
+      : [];
+    setEnvPhotoUrls(normalizeStringArray(envFromMedia, MIN_ENV_PHOTO_COUNT));
+  }
+
+  useEffect(() => {
+    if (!id) return;
+    setLoadError('');
+    request<Record<string, unknown>>('PARTNER_H5', `/partner/stores/${id}`)
+      .then(applyStore)
+      .catch((e) => {
+        setStore(null);
+        setLoadError(e instanceof Error ? e.message : '加载失败');
+      });
+  }, [id]);
+
+  async function changeStatus(next: StoreStatusValue) {
+    if (!id || next === status || statusSaving) return;
+    if (status === 'CLOSED') return;
+    const auditStatus = String(store?.auditStatus || 'APPROVED').toUpperCase();
+    if (next === 'OPEN' && !canPartnerOpenStore(auditStatus)) {
+      setActionError(
+        auditStatus === 'REJECTED'
+          ? `门店审核未通过${store?.rejectReason ? `：${String(store.rejectReason)}` : ''}`
+          : '门店尚在总部审核中，通过后方可开门',
+      );
+      return;
+    }
+    if (next === 'CLOSED') {
+      setCloseConfirmOpen(true);
+      return;
+    }
+    setStatusSaving(true);
+    setActionError('');
+    try {
+      const updated = await request<Record<string, unknown>>('PARTNER_H5', `/partner/stores/${id}/status`, {
+        method: 'PUT',
+        body: JSON.stringify({ status: next }),
+      });
+      setStatus(next);
+      setStore((prev) => (prev ? { ...prev, ...updated, status: next } : prev));
+      toastSuccess(next === 'OPEN' ? '开店成功' : '状态已更新');
+    } catch (e) {
+      setActionError(e instanceof Error ? e.message : '状态更新失败');
+    } finally {
+      setStatusSaving(false);
+    }
+  }
+
+  async function confirmCloseStore() {
+    if (!id || statusSaving) return;
+    setCloseConfirmOpen(false);
+    setStatusSaving(true);
+    setActionError('');
+    try {
+      const updated = await request<Record<string, unknown>>('PARTNER_H5', `/partner/stores/${id}/status`, {
+        method: 'PUT',
+        body: JSON.stringify({ status: 'CLOSED' }),
+      });
+      setStatus('CLOSED');
+      setStore((prev) => (prev ? { ...prev, ...updated, status: 'CLOSED' } : prev));
+      toastSuccess('门店已关闭');
+    } catch (e) {
+      setActionError(e instanceof Error ? e.message : '状态更新失败');
+    } finally {
+      setStatusSaving(false);
+    }
+  }
+
+  async function saveBasic() {
+    if (!id || saving || status === 'CLOSED') return;
+    const auditStatus = String(store?.auditStatus || 'APPROVED').toUpperCase();
+    if (auditStatus === 'PENDING') {
+      setActionError('门店审核中，暂不可修改资料');
+      return;
+    }
+    setSaving(true);
+    setActionError('');
+    try {
+      const data = await request<Record<string, unknown>>('PARTNER_H5', `/partner/stores/${id}/basic`, {
+        method: 'PUT',
+        body: JSON.stringify({
+          name: form.name.trim(),
+          phone: form.phone.trim(),
+          address: form.address.trim(),
+          intro: form.intro.trim(),
+          benefitUsageRule: form.benefitUsageRule.trim() || null,
+          ...(form.latitude.trim() && form.longitude.trim()
+            ? {
+                latitude: Number(form.latitude),
+                longitude: Number(form.longitude),
+              }
+            : {}),
+        }),
+      });
+      applyStore(data);
+      toastSuccess(auditStatus === 'REJECTED' ? '已保存并重新提交审核' : '已保存');
+    } catch (e) {
+      setActionError(e instanceof Error ? e.message : '保存失败');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function saveMedia() {
+    if (!id || mediaSaving || status === 'CLOSED') return;
+    const auditStatus = String(store?.auditStatus || 'APPROVED').toUpperCase();
+    if (auditStatus === 'PENDING') {
+      setActionError('门店审核中，暂不可修改资料');
+      return;
+    }
+    const nextCover = coverUrl.trim();
+    const nextEnv = uniqueEnvUrls(envPhotoUrls);
+    if (!nextCover) {
+      setActionError('请上传门头照');
+      return;
+    }
+    if (nextEnv.length < MIN_ENV_PHOTO_COUNT) {
+      setActionError(`请上传至少 ${MIN_ENV_PHOTO_COUNT} 张环境照片`);
+      return;
+    }
+    setMediaSaving(true);
+    setActionError('');
+    try {
+      const data = await request<Record<string, unknown>>('PARTNER_H5', `/partner/stores/${id}/media`, {
+        method: 'PUT',
+        body: JSON.stringify({
+          coverUrl: nextCover,
+          envPhotoUrls: nextEnv,
+        }),
+      });
+      applyStore(data);
+      toastSuccess(auditStatus === 'REJECTED' ? '照片已更新并重新提交审核' : '照片已更新');
+    } catch (e) {
+      setActionError(e instanceof Error ? e.message : '照片更新失败');
+    } finally {
+      setMediaSaving(false);
+    }
+  }
+
+  if (loadError) {
+    return (
+      <div className="partner-detail-page partner-home--flush-top">
+        <div className="empty">{loadError}</div>
+      </div>
+    );
+  }
+
+  if (!store) return <div className="empty">加载中...</div>;
+
+  const envPhotos = uniqueEnvUrls(
+    Array.isArray(store.media)
+      ? (store.media as Array<{ url?: string; bizType?: string }>)
+          .filter((m) => m.bizType === 'ENV')
+          .map((m) => String(m.url || ''))
+      : [],
+  );
+  const auditStatus = String(store.auditStatus || 'APPROVED').toUpperCase();
+  const auditPending = auditStatus === 'PENDING';
+  const auditRejected = auditStatus === 'REJECTED';
+  const readOnly = !canMutate || status === 'CLOSED' || auditPending;
+  const canOpen = canPartnerOpenStore(auditStatus);
+
+  return (
+    <div className="partner-detail-page partner-home--flush-top">
+      <main style={{ padding: '12px 20px 16px' }}>
+        {actionError && <p className="partner-form-error" role="alert" style={{ marginBottom: 12 }}>{actionError}</p>}
+
+        <section className="partner-form-card" style={{ margin: '0 0 16px' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
+            <h3 className="label-md text-muted" style={{ textTransform: 'uppercase', letterSpacing: '0.1em' }}>审核状态</h3>
+            <span className={`partner-status-pill ${storeAuditPillClass(auditStatus)}`}>
+              {storeAuditLabel(auditStatus)}
+            </span>
+          </div>
+          {auditPending && (
+            <p className="body-md" style={{ color: 'var(--color-secondary)' }}>
+              资料已提交总部审核，通过后即可开门营业。审核期间不可修改资料。
+            </p>
+          )}
+          {auditRejected && (
+            <div>
+              <p className="body-md" style={{ color: 'var(--color-heritage-red)', fontWeight: 600, marginBottom: 8 }}>
+                审核未通过
+              </p>
+              <p className="body-md" style={{ background: 'rgba(180,35,24,0.06)', padding: 12, borderRadius: 8 }}>
+                {String(store.rejectReason || '未填写驳回原因')}
+              </p>
+              <p className="label-md text-muted" style={{ marginTop: 8 }}>
+                请按驳回原因修改资料并保存，将自动重新提交审核。
+              </p>
+            </div>
+          )}
+          {auditStatus === 'APPROVED' && (
+            <p className="label-md text-muted">总部审核已通过，可将门店设为营业中。</p>
+          )}
+        </section>
+
+        {canMutate && !auditPending && status !== 'CLOSED' && (
+          <section className="partner-form-card" style={{ margin: '0 0 16px' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <h3 className="label-md text-muted" style={{ textTransform: 'uppercase', letterSpacing: '0.1em' }}>门店套餐</h3>
+              <button type="button" className="partner-btn-outline" onClick={() => navigate(`/stores/${id}/packages`)}>
+                编辑套餐
+              </button>
+            </div>
+            <p className="label-md text-muted" style={{ marginTop: 8 }}>维护可核销套餐信息，提交后由总部审核。</p>
+          </section>
+        )}
+
+        {canMutate && (
+        <section className="partner-form-card" style={{ margin: '0 0 16px' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+            <h3 className="label-md text-muted" style={{ textTransform: 'uppercase', letterSpacing: '0.1em' }}>运营状态</h3>
+            <span className={`partner-status-pill ${storeStatusPillClass(status)}`}>
+              {status === 'OPEN' && <span className="partner-dot partner-dot--green" style={{ width: 8, height: 8, display: 'inline-block', marginRight: 4 }} />}
+              {storeStatusLabel(status)}
+            </span>
+          </div>
+          <div className="partner-status-toggle">
+            {STATUS_OPTIONS.map((s) => (
+              <button
+                key={s}
+                type="button"
+                className={status === s ? 'active' : ''}
+                disabled={readOnly || statusSaving || (s === 'OPEN' && !canOpen) || status === 'CLOSED'}
+                onClick={() => void changeStatus(s)}
+              >
+                {s === 'OPEN' && !canOpen ? '待审核' : storeStatusLabel(s)}
+              </button>
+            ))}
+          </div>
+          {status === 'CLOSED' && (
+            <p className="label-md text-muted" style={{ marginTop: 12 }}>门店已关闭，不可再变更状态或编辑资料</p>
+          )}
+        </section>
+        )}
+
+        <section className="partner-form-card" style={{ margin: '0 0 16px' }}>
+          <h3 className="headline-md" style={{ borderLeft: '4px solid var(--color-heritage-red)', paddingLeft: 12, marginBottom: 16 }}>基本信息</h3>
+          {!canMutate || readOnly ? (
+            <div className="partner-cover">
+              <AppImage
+                src={coverUrl || null}
+                alt={form.name}
+                wrapperClassName="app-image--fill"
+              />
+            </div>
+          ) : (
+            <div style={{ marginBottom: 16 }}>
+              <p className="label-md text-muted" style={{ marginBottom: 8 }}>门头照</p>
+              <OssUploadField
+                wide
+                bizType="STORE_TITLE"
+                mediaType="IMAGE"
+                value={coverUrl}
+                onChange={setCoverUrl}
+                label="拍照 / 从相册选择"
+              />
+            </div>
+          )}
+          <div className="partner-field">
+            <label>门店名称</label>
+            <input disabled={readOnly} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} style={{ width: '100%', padding: '12px 16px', border: '1px solid rgba(226,190,188,0.5)', borderRadius: 8, fontSize: 16, fontWeight: 500 }} />
+          </div>
+          <div className="partner-field">
+            <label>联系电话</label>
+            <div className="partner-field-input">
+              <span className="material-symbols-outlined">call</span>
+              <input disabled={readOnly} type="tel" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
+            </div>
+          </div>
+          <div className="partner-field">
+            <label>门店地址</label>
+            <textarea disabled={readOnly} rows={2} value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} />
+            {!readOnly ? (
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8, flexWrap: 'wrap' }}>
+                <button
+                  type="button"
+                  className="partner-btn-outline"
+                  style={{ padding: '8px 12px', fontSize: 13 }}
+                  onClick={() => setMapPickerOpen(true)}
+                >
+                  地图选点
+                </button>
+                <span className="label-md text-muted">
+                  {form.latitude.trim() && form.longitude.trim() ? '已选点' : '未选点'}
+                </span>
+              </div>
+            ) : null}
+            <input type="hidden" name="latitude" value={form.latitude} readOnly />
+            <input type="hidden" name="longitude" value={form.longitude} readOnly />
+          </div>
+          <div className="partner-field">
+            <label>门店简介</label>
+              <textarea disabled={readOnly} rows={4} placeholder="请输入门店简介（2-500字）" value={form.intro} onChange={(e) => setForm({ ...form, intro: e.target.value })} />
+            <div style={{ textAlign: 'right', marginTop: 4 }}>
+              <span className="label-md text-muted">{form.intro.length} / 500</span>
+            </div>
+          </div>
+          <div className="partner-field">
+            <label>好客权益券使用规则</label>
+            <textarea
+              disabled={readOnly}
+              rows={4}
+              placeholder="选填，展示在用户端门店详情，最多1000字"
+              maxLength={1000}
+              value={form.benefitUsageRule}
+              onChange={(e) => setForm({ ...form, benefitUsageRule: e.target.value })}
+            />
+            <div style={{ textAlign: 'right', marginTop: 4 }}>
+              <span className="label-md text-muted">{form.benefitUsageRule.length} / 1000</span>
+            </div>
+          </div>
+        </section>
+
+        <section className="partner-form-card" style={{ margin: '0 0 16px' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 16 }}>
+            <h3 className="headline-md" style={{ borderLeft: '4px solid var(--color-heritage-red)', paddingLeft: 12 }}>店内环境</h3>
+            <span className="label-md text-muted">
+              {canMutate && !readOnly
+                ? `至少 ${MIN_ENV_PHOTO_COUNT} 张 · 已选 ${uniqueEnvUrls(envPhotoUrls).length} 张`
+                : envPhotos.length
+                  ? `已上传 ${envPhotos.length} 张`
+                  : '暂无照片'}
+            </span>
+          </div>
+          {canMutate && !readOnly ? (
+            <>
+              <div className="partner-upload-grid">
+                {envPhotoUrls.map((url, index) => (
+                  <OssUploadField
+                    key={index}
+                    compact
+                    bizType="STORE_ENV"
+                    mediaType="IMAGE"
+                    value={url}
+                    onChange={(nextUrl) => setEnvPhotoUrls((prev) => patchEnvPhotoAt(prev, index, nextUrl))}
+                  />
+                ))}
+              </div>
+              <button
+                type="button"
+                className="partner-btn-outline"
+                style={{ width: '100%', marginTop: 12 }}
+                onClick={() => setEnvPhotoUrls((prev) => addEnvPhotoSlot(prev))}
+              >
+                添加环境照片
+              </button>
+              <button
+                type="button"
+                className="partner-btn-outline"
+                style={{ width: '100%', marginTop: 16 }}
+                disabled={mediaSaving}
+                onClick={() => void saveMedia()}
+              >
+                <span className="material-symbols-outlined" style={{ fontSize: 18, verticalAlign: 'middle', marginRight: 4 }}>
+                  upload
+                </span>
+                {mediaSaving ? '上传中…' : '重新上传照片'}
+              </button>
+            </>
+          ) : envPhotos.length > 0 ? (
+            <div className="partner-photo-grid">
+              {envPhotos.map((url, index) => (
+                <div key={`${url}-${index}`} className="partner-cover" style={{ aspectRatio: '1', marginBottom: 0 }}>
+                  <AppImage src={url || null} alt={`环境图 ${index + 1}`} wrapperClassName="app-image--fill" />
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="label-md text-muted">录入门店时上传的环境照片将显示在这里</p>
+          )}
+        </section>
+
+        <section className="partner-form-card" style={{ margin: 0, background: 'var(--color-surface-container)' }}>
+          <h3 className="headline-md" style={{ borderLeft: '4px solid var(--color-subtle-gray)', paddingLeft: 12, marginBottom: 16 }}>管理信息</h3>
+          <div style={{ marginBottom: 12 }}>
+            <label className="label-md text-muted">营业状态</label>
+            <p className="body-md" style={{ fontWeight: 500 }}>{storeStatusLabel(status)}</p>
+          </div>
+          <div>
+            <label className="label-md text-muted">审核状态</label>
+            <p className="body-md" style={{ fontWeight: 500 }}>{storeAuditLabel(auditStatus)}</p>
+          </div>
+        </section>
+      </main>
+
+      <footer className="partner-save-footer">
+        <button type="button" className="partner-save-cancel" onClick={() => navigate('/stores')}>返回</button>
+        {canMutate && (
+        <button type="button" className="partner-save-submit" onClick={() => void saveBasic()} disabled={readOnly || saving}>
+          <span className="material-symbols-outlined">save</span>
+          {saving ? '保存中…' : auditRejected ? '保存并重新提交' : '保存修改'}
+        </button>
+        )}
+      </footer>
+
+      {closeConfirmOpen && (
+        <div className="partner-ship-modal-backdrop" role="presentation" onClick={() => setCloseConfirmOpen(false)}>
+          <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.5 }}>
+              关闭后不可恢复营业，确认关闭该门店？
+            </p>
+            <div className="partner-ship-actions">
+              <button type="button" className="partner-btn-secondary" onClick={() => setCloseConfirmOpen(false)}>
+                取消
+              </button>
+              <button type="button" className="partner-btn-primary" onClick={() => void confirmCloseStore()}>
+                确认关闭
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <TencentLocPickerOverlay
+        open={mapPickerOpen}
+        onClose={() => setMapPickerOpen(false)}
+        latitude={form.latitude ? Number(form.latitude) : undefined}
+        longitude={form.longitude ? Number(form.longitude) : undefined}
+        onPick={(loc) => {
+          setForm((prev) => ({
+            ...prev,
+            latitude: String(loc.latitude),
+            longitude: String(loc.longitude),
+            ...(loc.address && !prev.address.trim() ? { address: loc.address } : {}),
+          }));
+          toastSuccess(loc.name ? `已选定：${loc.name}` : '位置已选定');
+        }}
+      />
+    </div>
+  );
+}