From b9d88160a2633c603f3aef4a264bc7d1ba67fe42 Mon Sep 17 00:00:00 2001 From: wong <106998207@qq.com> Date: Sat, 30 Aug 2025 17:07:53 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=A6=E5=AE=A2=E5=AE=9D=E5=8F=B3=E8=BE=B9?= =?UTF-8?q?=E6=A0=8F=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Person/Person.module.scss | 30 +++- .../ChatWindow/components/Person/index.tsx | 157 ++++++++++-------- .../pc/ckbox/components/ChatWindow/index.tsx | 2 +- Cunkebao/src/store/module/ckchat.data.ts | 2 +- Cunkebao/src/store/module/ckchat.ts | 5 +- 5 files changed, 115 insertions(+), 81 deletions(-) diff --git a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/Person/Person.module.scss b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/Person/Person.module.scss index 7d96cc69..10fb299b 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/Person/Person.module.scss +++ b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/Person/Person.module.scss @@ -18,7 +18,7 @@ .closeButton { color: #8c8c8c; - + &:hover { color: #262626; background: #f5f5f5; @@ -44,7 +44,7 @@ font-size: 18px; font-weight: 600; color: #262626; - max-width: 200px; + max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -52,12 +52,12 @@ .profileRemark { margin-bottom: 12px; - + .remarkText { color: #8c8c8c; font-size: 14px; cursor: pointer; - + &:hover { color: #1890ff; } @@ -107,7 +107,7 @@ display: flex; align-items: center; margin-bottom: 12px; - + &:last-child { margin-bottom: 0; } @@ -131,6 +131,20 @@ font-size: 14px; flex: 1; word-break: break-all; + + // 备注编辑区域样式 + :global(.ant-input) { + font-size: 14px; + } + + :global(.ant-btn) { + font-size: 12px; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + } } } @@ -169,7 +183,7 @@ @media (max-width: 768px) { .profileSider { width: 280px !important; - + .profileContainer { padding: 12px; } @@ -189,7 +203,7 @@ .infoItem { margin-bottom: 10px; - + .infoLabel { width: 50px; font-size: 13px; @@ -201,4 +215,4 @@ } } } -} \ No newline at end of file +} diff --git a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/Person/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/Person/index.tsx index da0dea8b..776f7bfe 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/Person/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/Person/index.tsx @@ -43,14 +43,33 @@ const Person: React.FC = ({ const [messageApi, contextHolder] = message.useMessage(); const [isEditingRemark, setIsEditingRemark] = useState(false); const [remarkValue, setRemarkValue] = useState(contract.conRemark || ""); + const [selectedTags, setSelectedTags] = useState(contract.labels || []); + const [allAvailableTags, setAllAvailableTags] = useState([]); - const kfSelectedUser = useCkChatStore(state => state.kfSelectedUser()); + const kfSelectedUser = useCkChatStore(state => state.kfSelectedUser(contract.wechatAccountId || 0)); - // 当contract变化时更新备注值 + // 获取所有可用标签 + useEffect(() => { + const fetchAvailableTags = async () => { + try { + // 从kfSelectedUser.labels和contract.labels合并获取所有标签 + const kfTags = kfSelectedUser?.labels || []; + const contractTags = contract.labels || []; + const allTags = [...new Set([...kfTags, ...contractTags])]; + setAllAvailableTags(allTags); + } catch (error) { + console.error('获取标签失败:', error); + } + }; + fetchAvailableTags(); + }, [kfSelectedUser, contract.labels]); + + // 当contract变化时更新备注值和标签 useEffect(() => { setRemarkValue(contract.conRemark || ""); setIsEditingRemark(false); - }, [contract.conRemark]); + setSelectedTags(contract.labels || []); + }, [contract.conRemark, contract.labels]); // 处理备注保存 const handleSaveRemark = () => { @@ -67,6 +86,18 @@ const Person: React.FC = ({ setIsEditingRemark(false); }; + // 处理标签点击切换 + const handleTagToggle = (tagName: string) => { + const newSelectedTags = selectedTags.includes(tagName) + ? selectedTags.filter(tag => tag !== tagName) + : [...selectedTags, tagName]; + + setSelectedTags(newSelectedTags); + + // 这里应该调用API保存标签到后端 + messageApi.success(`标签"${tagName}"${selectedTags.includes(tagName) ? '已取消' : '已选中'}`); + }; + // 模拟联系人详细信息 const contractInfo = { name: contract.name, @@ -80,10 +111,10 @@ const Person: React.FC = ({ department: contract.department || "-", position: contract.position || "-", company: contract.company || "-", - location: contract.location || "-", + region: contract.region || "-", joinDate: contract.joinDate || "-", status: "在线", - tags: contract.labels, + tags: selectedTags, bio: contract.bio || "-", }; @@ -123,8 +154,36 @@ const Person: React.FC = ({ -
- {JSON.stringify(kfSelectedUser)} + + +
+ + {contractInfo.status} +
+
+ + + {/* 详细信息卡片 */} + +
+ + 微信号: + {contractInfo.alias || contractInfo.wechatId} +
+
+ + 电话: + {contractInfo.phone} +
+
+ + 地区: + {contractInfo.region} +
+
+ + 备注: +
{isEditingRemark ? (
= ({ gap: "8px", }} > - + {contractInfo.conRemark || "点击添加备注"}
)}
- -
- - {contractInfo.status} -
-
- - - {/* 详细信息卡片 */} - -
- - 微信号: - {contractInfo.wechatId} -
-
- - 昵称: - {contractInfo.alias} -
-
- - 电话: - {contractInfo.phone} -
-
- - 邮箱: - {contractInfo.email} -
-
- - 部门: - - {contractInfo.department} - -
-
- - 职位: - {contractInfo.position} -
-
- - 公司: - {contractInfo.company} -
-
- - 地区: - {contractInfo.location} -
-
- - 入职时间: - {contractInfo.joinDate}
{/* 标签 */}
- {contractInfo.tags?.map((tag, index) => ( - - {tag} - - ))} + {/* 渲染所有可用标签，选中的排在前面 */} + {[...new Set([...selectedTags, ...allAvailableTags])].map((tag, index) => { + const isSelected = selectedTags.includes(tag); + return ( + handleTagToggle(tag)} + > + {tag} + + ); + })} + {allAvailableTags.length === 0 && ( + 暂无可用标签 + )}
diff --git a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx index 037edf5f..b693b6b8 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx @@ -68,7 +68,7 @@ const ChatWindow: React.FC = ({ >({}); const messagesEndRef = useRef(null); - const kfSelectedUser = useCkChatStore(state => state.kfSelectedUser()); + const kfSelectedUser = useCkChatStore(state => state.kfSelectedUser(contract.wechatAccountId || 0)); useEffect(() => { clearUnreadCount([contract.id]).then(() => { setLoading(true); diff --git a/Cunkebao/src/store/module/ckchat.data.ts b/Cunkebao/src/store/module/ckchat.data.ts index 7280ee7e..87d48c4a 100644 --- a/Cunkebao/src/store/module/ckchat.data.ts +++ b/Cunkebao/src/store/module/ckchat.data.ts @@ -31,7 +31,7 @@ export interface CkChatState { chatSessions: any[]; kfUserList: KfUserListData[]; kfSelected: number; - kfSelectedUser: () => KfUserListData | undefined; + kfSelectedUser: (kfId: number) => KfUserListData | undefined; newContractList: { groupName: string; contacts: any[] }[]; asyncKfSelected: (data: number) => void; getkfUserList: () => KfUserListData[]; diff --git a/Cunkebao/src/store/module/ckchat.ts b/Cunkebao/src/store/module/ckchat.ts index 591a2bf1..edcee848 100644 --- a/Cunkebao/src/store/module/ckchat.ts +++ b/Cunkebao/src/store/module/ckchat.ts @@ -16,9 +16,10 @@ export const useCkChatStore = createPersistStore( kfUserList: [], //客服列表 kfSelected: 0, newContractList: [], //联系人分组 - kfSelectedUser: () => { + kfSelectedUser: (kfId:number) => { const state = useCkChatStore.getState(); - return state.kfUserList.find(item => item.id === state.kfSelected); + + return state.kfUserList.find(item => item.id === (kfId)); }, asyncKfSelected: (data: number) => { set({ kfSelected: data });