城市合伙人端页面优化

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

@@ -1,10 +1,19 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
+import type { PartnerBillDto } from '@dukang/shared-types';
+import { isWxAuthorizeEnabled } from '@dukang/shared-types';
 import { request } from '../lib/api';
 import { usePartnerSession } from '../contexts/PartnerSessionContext';
 import { contactSupport } from '../lib/contact';
 import { isPrimaryAccount } from '../lib/partnerAccess';
-import { toastError } from '../lib/toast';
+import { listPartnerStaff } from '../lib/staff';
+import { toastError, toastSuccess } from '../lib/toast';
+import {
+  authorizePartnerWechat,
+  fetchClientConfig,
+  handlePartnerWechatLoginResult,
+} from '../lib/wechat-auth';
+import { isWechatEnv } from '../lib/weixin';
 
 type CenterPageProps = {
   /** 子账号个人中心复用 */
@@ -12,11 +21,18 @@ type CenterPageProps = {
   roleLabel?: string;
 };
 
+function fmtMoney(n: number) {
+  return n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
 export default function CenterPage({ variant = 'primary', roleLabel }: CenterPageProps) {
-  const { account, logout, refresh } = usePartnerSession();
+  const { account, logout, refresh, applySession } = usePartnerSession();
   const isPrimary = variant === 'primary' && isPrimaryAccount(account);
   const [name, setName] = useState(account?.name ?? '');
   const [saving, setSaving] = useState(false);
+  const [authorizing, setAuthorizing] = useState(false);
+  const [bills, setBills] = useState<PartnerBillDto[]>([]);
+  const [staffCount, setStaffCount] = useState(0);
 
   useEffect(() => {
     document.title = isPrimary ? '合伙人中心' : '个人中心';
@@ -26,6 +42,29 @@ export default function CenterPage({ variant = 'primary', roleLabel }: CenterPag
     setName(account?.name ?? '');
   }, [account?.name]);
 
+  useEffect(() => {
+    if (!isPrimary) return;
+    void request<PartnerBillDto[]>('PARTNER_H5', '/partner/settlement/bills')
+      .then(setBills)
+      .catch(() => setBills([]));
+    void listPartnerStaff()
+      .then((list) => setStaffCount(list.length))
+      .catch(() => setStaffCount(0));
+  }, [isPrimary]);
+
+  const finance = useMemo(() => {
+    const pending = bills.filter((b) => b.status === 'DRAFT');
+    const settled = bills.filter((b) => b.status === 'PAID');
+    const paidCount = settled.length;
+    return {
+      pendingBillCount: pending.length,
+      pendingTotal: pending.reduce((s, b) => s + Number(b.totalAmount || 0), 0),
+      settledTotal: settled.reduce((s, b) => s + Number(b.totalAmount || 0), 0),
+      balance: settled.reduce((s, b) => s + Number(b.totalAmount || 0), 0),
+      paidCount,
+    };
+  }, [bills]);
+
   async function handleSave() {
     const trimmed = name.trim();
     if (!trimmed) {
@@ -57,86 +96,218 @@ export default function CenterPage({ variant = 'primary', roleLabel }: CenterPag
     window.location.href = `tel:${account.primaryPhone}`;
   }
 
+  async function handleAvatarAuth() {
+    if (authorizing) return;
+    if (!isWechatEnv()) {
+      toastError('请在微信内打开以授权头像昵称');
+      return;
+    }
+    setAuthorizing(true);
+    try {
+      const config = await fetchClientConfig();
+      if (!isWxAuthorizeEnabled(config)) {
+        toastError('微信授权暂未开启');
+        return;
+      }
+      const result = await authorizePartnerWechat();
+      if (result) {
+        const session = handlePartnerWechatLoginResult(result);
+        if (session) applySession(session);
+        await refresh();
+        toastSuccess('微信授权成功');
+      }
+      // result 为空表示已跳转 OAuth，无需额外处理
+    } catch (e) {
+      toastError(e instanceof Error ? e.message : '微信授权失败');
+    } finally {
+      setAuthorizing(false);
+    }
+  }
+
+  const locationLabel = [account?.companyName].filter(Boolean).join(' · ') || '—';
+  const displayName = account?.wxNickname?.trim() || account?.name || '合伙人';
+  const avatarUrl = account?.wxAvatarUrl?.trim() || '';
+  const badgeLabel = roleLabel || (isPrimary ? '城市合伙人' : '拓店员');
+
   return (
     <div className="page partner-center-page partner-home--flush-top">
       <section className="partner-profile-card">
-        <div className="partner-profile-avatar">
-          <span className="material-symbols-outlined">person</span>
-        </div>
-        <div style={{ flex: 1 }}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-            <h2 className="headline-lg" style={{ fontSize: 20 }}>{account?.name || '合伙人'}</h2>
-            <span className="partner-role-badge">{roleLabel || (isPrimary ? '城市合伙人' : '拓店员')}</span>
+        <button
+          type="button"
+          className="partner-profile-avatar"
+          onClick={() => void handleAvatarAuth()}
+          disabled={authorizing}
+          aria-label={avatarUrl ? '更新微信头像' : '微信授权获取头像'}
+        >
+          {avatarUrl ? (
+            <img src={avatarUrl} alt="" className="partner-profile-avatar-img" referrerPolicy="no-referrer" />
+          ) : (
+            <span className="material-symbols-outlined">person</span>
+          )}
+          {!avatarUrl && (
+            <span className="partner-profile-avatar-hint">授权</span>
+          )}
+        </button>
+        <div className="partner-profile-main">
+          <div className="partner-profile-title-row">
+            <h2 className="partner-profile-name">{displayName}</h2>
+            <span className="partner-role-badge">{badgeLabel}</span>
           </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 4, color: 'var(--color-subtle-gray)' }}>
+          <div className="partner-profile-location">
             <span className="material-symbols-outlined" style={{ fontSize: 16 }}>location_on</span>
-            <span className="body-md">{account?.companyName || '—'}</span>
+            <span className="body-md line-2-clamp">{locationLabel}</span>
           </div>
-          <p className="label-md text-muted" style={{ marginTop: 4 }}>{account?.phone || ''}</p>
-        </div>
-      </section>
-
-      <section className="partner-menu-section">
-        <h3 className="headline-md" style={{ marginBottom: 8 }}>个人信息设置</h3>
-        <div className="partner-menu-card" style={{ padding: '16px' }}>
-          <label className="partner-form-label" htmlFor="center-name">姓名</label>
-          <input
-            id="center-name"
-            className="partner-form-input"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            placeholder="请输入姓名"
-            maxLength={32}
-          />
-          <label className="partner-form-label" style={{ marginTop: 16 }}>手机号</label>
-          <input className="partner-form-input" value={account?.phone ?? ''} readOnly disabled />
-          <p className="label-md text-muted" style={{ marginTop: 4 }}>手机号由管理员维护，如需修改请联系总部</p>
-          <button
-            type="button"
-            className="partner-btn-primary"
-            style={{ width: '100%', marginTop: 16 }}
-            disabled={saving}
-            onClick={() => void handleSave()}
-          >
-            {saving ? '保存中…' : '保存资料'}
-          </button>
-        </div>
-      </section>
-
-      <section className="partner-menu-section">
-        <div className="partner-menu-card">
-          <button type="button" className="partner-menu-item" onClick={() => { if (!contactSupport()) toastError('暂无客服电话'); }}>
-            <div className="partner-menu-item-left">
-              <div className="partner-menu-icon"><span className="material-symbols-outlined">support_agent</span></div>
-              <span className="body-md" style={{ fontSize: 16 }}>联系客服</span>
-            </div>
-            <span className="material-symbols-outlined text-muted">chevron_right</span>
-          </button>
-          <button type="button" className="partner-menu-item" onClick={handleContactPartner}>
-            <div className="partner-menu-item-left">
-              <div className="partner-menu-icon"><span className="material-symbols-outlined">call</span></div>
-              <span className="body-md" style={{ fontSize: 16 }}>{isPrimary ? '联系总部' : '联系合伙人'}</span>
-            </div>
-            <span className="material-symbols-outlined text-muted">chevron_right</span>
-          </button>
-          {isPrimary && (
-            <Link to="/center/staff" className="partner-menu-item">
-              <div className="partner-menu-item-left">
-                <div className="partner-menu-icon"><span className="material-symbols-outlined">group</span></div>
-                <span className="body-md" style={{ fontSize: 16 }}>子账号管理</span>
-              </div>
-              <span className="material-symbols-outlined text-muted">chevron_right</span>
-            </Link>
+          {!isPrimary && (
+            <p className="label-md text-muted" style={{ marginTop: 4 }}>{account?.phone || ''}</p>
           )}
         </div>
       </section>
 
+      {isPrimary && (
+        <>
+          <section className="partner-assets-section">
+            <div className="partner-section-head">
+              <h3 className="headline-md">资产概览</h3>
+              <Link to="/center/settlement" className="label-md text-primary" style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                明细 <span className="material-symbols-outlined" style={{ fontSize: 14 }}>chevron_right</span>
+              </Link>
+            </div>
+
+            {finance.pendingBillCount > 0 && (
+              <Link to="/center/bills" className="partner-bills-banner">
+                <div className="partner-bills-banner-left">
+                  <div className="partner-bills-icon">
+                    <span className="material-symbols-outlined">receipt_long</span>
+                  </div>
+                  <div>
+                    <p className="body-md text-primary" style={{ fontWeight: 600 }}>待确认账单</p>
+                    <p className="label-md text-primary" style={{ opacity: 0.85 }}>
+                      您有 {finance.pendingBillCount} 笔账单待确认
+                    </p>
+                  </div>
+                </div>
+                <span className="material-symbols-outlined text-primary">chevron_right</span>
+              </Link>
+            )}
+
+            <div className="partner-finance-grid">
+              <div className="partner-finance-card partner-finance-card--hero">
+                <p className="partner-finance-hero-label">账户余额 (元)</p>
+                <p className="partner-finance-hero-amount">{fmtMoney(finance.balance)}</p>
+              </div>
+              <Link to="/center/settlement" className="partner-finance-card">
+                <p className="label-md text-muted">待结算</p>
+                <p className="partner-finance-value text-primary">¥ {fmtMoney(finance.pendingTotal)}</p>
+              </Link>
+              <Link to="/center/settlement" className="partner-finance-card">
+                <p className="label-md text-muted" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                  提现记录
+                  <span className="material-symbols-outlined" style={{ fontSize: 14 }}>history</span>
+                </p>
+                <p className="partner-finance-value">{finance.paidCount} 笔</p>
+              </Link>
+            </div>
+          </section>
+
+          <section className="partner-menu-section">
+            <div className="partner-section-head">
+              <h3 className="headline-md">运营管理</h3>
+            </div>
+            <div className="partner-menu-card">
+              <Link to="/center/staff" className="partner-menu-item">
+                <div className="partner-menu-item-left">
+                  <div className="partner-menu-icon">
+                    <span className="material-symbols-outlined">badge</span>
+                  </div>
+                  <span className="body-md" style={{ fontSize: 16 }}>我的员工</span>
+                </div>
+                <div className="partner-menu-item-right">
+                  {staffCount > 0 && <span className="partner-menu-badge">{staffCount}人</span>}
+                  <span className="material-symbols-outlined text-muted">chevron_right</span>
+                </div>
+              </Link>
+              <Link to="/stores?audit=pending" className="partner-menu-item">
+                <div className="partner-menu-item-left">
+                  <div className="partner-menu-icon">
+                    <span className="material-symbols-outlined">storefront</span>
+                  </div>
+                  <span className="body-md" style={{ fontSize: 16 }}>门店审核记录</span>
+                </div>
+                <span className="material-symbols-outlined text-muted">chevron_right</span>
+              </Link>
+              <Link to="/stores" className="partner-menu-item">
+                <div className="partner-menu-item-left">
+                  <div className="partner-menu-icon">
+                    <span className="material-symbols-outlined">description</span>
+                  </div>
+                  <span className="body-md" style={{ fontSize: 16 }}>合同管理</span>
+                </div>
+                <div className="partner-menu-item-right">
+                  <span className="partner-menu-status">待续约</span>
+                  <span className="material-symbols-outlined text-muted">chevron_right</span>
+                </div>
+              </Link>
+            </div>
+          </section>
+        </>
+      )}
+
+      {!isPrimary && (
+        <>
+          <section className="partner-menu-section">
+            <h3 className="headline-md" style={{ marginBottom: 8 }}>个人信息设置</h3>
+            <div className="partner-menu-card" style={{ padding: '16px' }}>
+              <label className="partner-form-label" htmlFor="center-name">姓名</label>
+              <input
+                id="center-name"
+                className="partner-form-input"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="请输入姓名"
+                maxLength={32}
+              />
+              <label className="partner-form-label" style={{ marginTop: 16 }}>手机号</label>
+              <input className="partner-form-input" value={account?.phone ?? ''} readOnly disabled />
+              <p className="label-md text-muted" style={{ marginTop: 4 }}>手机号由管理员维护，如需修改请联系总部</p>
+              <button
+                type="button"
+                className="partner-btn-primary"
+                style={{ width: '100%', marginTop: 16 }}
+                disabled={saving}
+                onClick={() => void handleSave()}
+              >
+                {saving ? '保存中…' : '保存资料'}
+              </button>
+            </div>
+          </section>
+
+          <section className="partner-menu-section">
+            <div className="partner-menu-card">
+              <button type="button" className="partner-menu-item" onClick={() => { if (!contactSupport()) toastError('暂无客服电话'); }}>
+                <div className="partner-menu-item-left">
+                  <div className="partner-menu-icon"><span className="material-symbols-outlined">support_agent</span></div>
+                  <span className="body-md" style={{ fontSize: 16 }}>联系客服</span>
+                </div>
+                <span className="material-symbols-outlined text-muted">chevron_right</span>
+              </button>
+              <button type="button" className="partner-menu-item" onClick={handleContactPartner}>
+                <div className="partner-menu-item-left">
+                  <div className="partner-menu-icon"><span className="material-symbols-outlined">call</span></div>
+                  <span className="body-md" style={{ fontSize: 16 }}>联系合伙人</span>
+                </div>
+                <span className="material-symbols-outlined text-muted">chevron_right</span>
+              </button>
+            </div>
+          </section>
+        </>
+      )}
+
       <button type="button" className="partner-logout-btn" onClick={logout}>
         <span className="material-symbols-outlined">logout</span>
         退出登录
       </button>
 
-      <div style={{ textAlign: 'center', opacity: 0.3, padding: '32px 0' }}>
+      <div className="partner-center-footer">
         <p className="label-md text-muted">传承千年 · 杜康好客</p>
       </div>
     </div>