From ac476c1889d27960a23a9298f8bf39facdcd046d Mon Sep 17 00:00:00 2001
From: jqb <jqb@9artedu.com>
Date: Thu, 13 Aug 2026 17:37:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(sidebar):=20=E6=B7=BB=E5=8A=A0=E5=AD=A6?=
 =?UTF-8?q?=E5=91=98=E8=81=94=E7=B3=BB=E6=96=B9=E5=BC=8F=E7=BB=91=E5=AE=9A?=
 =?UTF-8?q?=E5=8F=8A=E6=98=BE=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 contactInfo 状态管理学员手机号和微信号
- 初始化时加载并设置学员联系方式
- 绑定成功后更新 contactInfo 状态
- 根据绑定状态动态调整绑定按钮样式和文字
- 已绑定时展示联系方式及提示信息，支持手机号遮挡显示
- 修改绑定弹窗标题文字根据是否绑定变化
---
 frontend/sidebar/src/SummaryApp.tsx | 55 +++++++++++++++++++++++++++--
 1 file changed, 52 insertions(+), 3 deletions(-)

diff --git a/frontend/sidebar/src/SummaryApp.tsx b/frontend/sidebar/src/SummaryApp.tsx
index 1a1d87c..c0b6b0a 100644
--- a/frontend/sidebar/src/SummaryApp.tsx
+++ b/frontend/sidebar/src/SummaryApp.tsx
@@ -76,6 +76,7 @@ function SummaryApp() {
   const [bindPhone, setBindPhone] = useState('')
   const [bindWechatId, setBindWechatId] = useState('')
   const [bindSaving, setBindSaving] = useState(false)
+  const [contactInfo, setContactInfo] = useState<{ phone: string; wechatId: string } | null>(null)
 
   useEffect(() => {
     const init = async () => {
@@ -240,6 +241,7 @@ function SummaryApp() {
       return
     }
     setCustomerId(customerId)
+    loadContactInfo(customerId)
 
     try {
       const res = await fetch(
@@ -272,6 +274,18 @@ function SummaryApp() {
     }
   }
 
+  const loadContactInfo = async (cid: string) => {
+    try {
+      const res = await noCacheFetch(`/api/v1/archive/customer/contact?customerId=${encodeURIComponent(cid)}`)
+      const data = await res.json()
+      if (data.code === 0 && data.data) {
+        setContactInfo({ phone: data.data.phone || '', wechatId: data.data.wechatId || '' })
+      }
+    } catch (e) {
+      console.error('加载绑定状态失败:', e)
+    }
+  }
+
   const loadRecentChat = async (customerId: string, staffId: string) => {
     try {
       const res = await noCacheFetch(
@@ -323,6 +337,7 @@ function SummaryApp() {
       if (data.code === 0) {
         Toast.show({ content: '绑定成功', icon: 'success' })
         setBindVisible(false)
+        setContactInfo({ phone, wechatId })
       } else {
         Toast.show({ content: data.message || '绑定失败', icon: 'fail' })
       }
@@ -439,6 +454,9 @@ function SummaryApp() {
     )
   }
 
+  const isBound = !!(contactInfo && (contactInfo.phone || contactInfo.wechatId))
+  const maskPhone = (p: string) => (p && p.length === 11 ? `${p.slice(0, 3)}****${p.slice(7)}` : p)
+
   if (loading) {
     return (
       <div style={{ padding: 60, textAlign: 'center' }}>
@@ -501,7 +519,17 @@ function SummaryApp() {
         </div>
         <button
           onClick={openBindPopup}
-          style={{
+          style={isBound ? {
+            padding: '7px 14px',
+            background: '#f6ffed',
+            color: '#389e0d',
+            border: '1px solid #b7eb8f',
+            borderRadius: 16,
+            fontSize: 13,
+            fontWeight: 500,
+            cursor: 'pointer',
+            flexShrink: 0
+          } : {
             padding: '7px 14px',
             background: '#e6f4ff',
             color: '#1677ff',
@@ -513,10 +541,31 @@ function SummaryApp() {
             flexShrink: 0
           }}
         >
-          绑定联系方式
+          {isBound ? '✓ 已绑定 · 修改' : '绑定联系方式'}
         </button>
       </div>
 
+      {isBound && contactInfo && (
+        <div style={{
+          background: '#f6ffed',
+          border: '1px solid #b7eb8f',
+          borderRadius: 12,
+          padding: '10px 14px',
+          marginBottom: 14,
+          boxShadow: '0 1px 4px rgba(0,0,0,0.06)',
+          fontSize: 13,
+          color: '#389e0d',
+          lineHeight: 1.6
+        }}>
+          ✅ 该学员已绑定联系方式，如需修改请点击右上角按钮
+          <span style={{ color: '#666', fontSize: 12, marginLeft: 6 }}>
+            {contactInfo.phone && `手机：${maskPhone(contactInfo.phone)}`}
+            {contactInfo.phone && contactInfo.wechatId && ' / '}
+            {contactInfo.wechatId && `微信：${contactInfo.wechatId}`}
+          </span>
+        </div>
+      )}
+
       {/* 立即总结（实时流式） */}
       <div style={{
         background: '#fff',
@@ -623,7 +672,7 @@ function SummaryApp() {
         bodyStyle={{ borderTopLeftRadius: 12, borderTopRightRadius: 12, padding: '20px 16px 32px' }}
       >
         <div style={{ fontSize: 16, fontWeight: 600, color: '#333', marginBottom: 4 }}>
-          绑定联系方式
+          {isBound ? '修改联系方式' : '绑定联系方式'}
         </div>
         <div style={{ fontSize: 12, color: '#999', marginBottom: 20 }}>
           绑定后运营可通过手机号或微信号查询该学员的每日总结