kangwj
/
unis_crm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(Expansion): 优化联系人列表展示样式 

1.  将原有的网格布局改为表格布局，适配更多联系人内容展示
2.  增大大屏场景下的侧边栏最大宽度到5xl
3.  优化表头和内容的排版样式，提升可读性
main
kangwenjing 2026-09-09 09:51:31 +08:00
parent 641acd8c9d
commit 978a01dd91
2 changed files with 49 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
.workbuddy/memory/2026-09-09.md 100644
View File

@ -0,0 +1,21 @@
# 2026-09-09 工作日志
## 商机/渠道详情联系人展示改版(Craft 检查,不动代码)
今日改动只有 `frontend/src/pages/Expansion.tsx`(09:37, 未提交,+28/-13),纯前端展示层:
1. **抽屉加宽**:详情抽屉 `lg:max-w-3xl` → `lg:max-w-5xl`(768→1024px)。该抽屉为 sales/crm/channel 三类型共用的统一详情抽屉,所以加宽会同时影响 CRM/销售详情(视觉影响,无功能影响)。
2. **联系人卡片→表格**:渠道详情(`channelDetailTab==="contacts"`)人员信息从栅格卡片改为 7 列`table`(工作职责/姓名/职务/电话/生日/是否加企微/特别说明),外层 `overflow-x-auto` + `min-w-[52rem]`(832px) + 表头。
### 验证结论(只读)
- tsc 全量 `--noEmit` **通过**(exit 0);vite 实时编译该模块 200、无转换错误。
- 字段映射正确:`ChannelExpansionContact`(auth.ts:692)含 duty/name/mobile/title/birthday/wecomAdded/specialNote,与 7 列一一对应。
- 三层分流确认:sales→salesDetailTab、crm→crmDetailTab(联系人仍为**卡片**,未改)、else(channel)→本表格。故表格只作用于渠道联系人,字段齐全,无空列。
- helper(`getDictLabelByValue`, `isOptions`, `break-anywhere`)均已定义,引用正确。
### 发现的1个视觉缺陷(实测证实,未修复)
- 表格 `table` 用 `border-separate`,但行分隔线 `border-t` 加在 `<tr>` 上。**headless Chrome 实测:在 border-separate 下 tr 边框不渲染**,导致表头下方与数据行之间无任何分隔线,表头也无背景色,多行文本较难读;`first:border-t-0` 也因此失效。
- 修复方向(未动代码):把 border-t/`first:border-t-0` 从 tr 移到每个 `td`(按 index>0 判断),或改用 `divide-y`(collapse 生效)。
### 备注
- 该改动不影响后端接口,无需后端冒烟测试;前端冒烟 = vite 编译 200 + tsc 通过 + headless CSS 实测。

41
frontend/src/pages/Expansion.tsx
View File

@ -5194,7 +5194,7 @@ export default function Expansion() {
animate={{ x: 0, y: 0 }}
exit={{ x: "100%", y: 0 }}
transition={{ type: "spring", damping: 25, stiffness: 200 }}
className={`fixed inset-x-0 bottom-0 z-50 flex h-[88dvh] w-full flex-col overflow-hidden rounded-t-3xl border border-slate-200 bg-white shadow-2xl transition-opacity dark:border-slate-800 dark:bg-slate-900 sm:inset-y-0 sm:right-0 sm:left-auto sm:h-full sm:max-w-2xl lg:max-w-3xl sm:rounded-none sm:rounded-l-3xl sm:border-l ${
className={`fixed inset-x-0 bottom-0 z-50 flex h-[88dvh] w-full flex-col overflow-hidden rounded-t-3xl border border-slate-200 bg-white shadow-2xl transition-opacity dark:border-slate-800 dark:bg-slate-900 sm:inset-y-0 sm:right-0 sm:left-auto sm:h-full sm:max-w-2xl lg:max-w-5xl sm:rounded-none sm:rounded-l-3xl sm:border-l ${
hasForegroundModal ? "pointer-events-none opacity-20" : ""
}`}
>
@ -5517,18 +5517,33 @@ export default function Expansion() {
{channelDetailTab === "contacts" ? (
(selectedItem.contacts?.length ?? 0) > 0 ? (
<div className="space-y-3">
{selectedItem.contacts?.map((contact, index) => (
<div key={`${contact.name || "contact"}-${index}`} className="grid grid-cols-1 gap-3 rounded-xl border border-slate-100 bg-slate-50/50 p-4 text-sm dark:border-slate-800 dark:bg-slate-800/20 sm:grid-cols-3">
<div><p className="mb-1 text-slate-500 dark:text-slate-400">工作职责</p><p className="break-anywhere font-medium text-slate-900 dark:text-white">{contact.duty || "无"}</p></div>
<div><p className="mb-1 text-slate-500 dark:text-slate-400">人员姓名</p><p className="break-anywhere font-medium text-slate-900 dark:text-white">{contact.name || "无"}</p></div>
<div><p className="mb-1 text-slate-500 dark:text-slate-400">职务</p><p className="break-anywhere font-medium text-slate-900 dark:text-white">{contact.title || "无"}</p></div>
<div><p className="mb-1 text-slate-500 dark:text-slate-400">联系电话</p><p className="break-anywhere font-medium text-slate-900 dark:text-white">{contact.mobile || "无"}</p></div>
<div><p className="mb-1 text-slate-500 dark:text-slate-400">生日</p><p className="break-anywhere font-medium text-slate-900 dark:text-white">{contact.birthday || "无"}</p></div>
<div><p className="mb-1 text-slate-500 dark:text-slate-400">是否加企业微信</p><p className="break-anywhere font-medium text-slate-900 dark:text-white">{contact.wecomAdded ? getDictLabelByValue(contact.wecomAdded, isOptions) : "无"}</p></div>
<div className="sm:col-span-3"><p className="mb-1 text-slate-500 dark:text-slate-400">特别说明</p><p className="break-anywhere font-medium text-slate-900 dark:text-white">{contact.specialNote || "无"}</p></div>
</div>
))}
<div className="overflow-x-auto rounded-xl border border-slate-100 bg-slate-50/50 dark:border-slate-800 dark:bg-slate-800/20">
<table className="w-full min-w-[52rem] border-separate border-spacing-0 text-sm">
<thead>
<tr className="text-left text-xs text-slate-500 dark:text-slate-400">
<th className="whitespace-nowrap px-3 py-2 font-medium">工作职责</th>
<th className="whitespace-nowrap px-3 py-2 font-medium">人员姓名</th>
<th className="whitespace-nowrap px-3 py-2 font-medium">职务</th>
<th className="whitespace-nowrap px-3 py-2 font-medium">联系电话</th>
<th className="whitespace-nowrap px-3 py-2 font-medium">生日</th>
<th className="whitespace-nowrap px-3 py-2 font-medium">是否加企业微信</th>
<th className="whitespace-nowrap px-3 py-2 font-medium">特别说明</th>
</tr>
</thead>
<tbody>
{selectedItem.contacts?.map((contact, index) => (
<tr key={`${contact.name || "contact"}-${index}`} className="border-t border-slate-100 align-top first:border-t-0 dark:border-slate-800">
<td className="break-anywhere px-3 py-2 font-medium text-slate-900 dark:text-white">{contact.duty || "无"}</td>
<td className="break-anywhere px-3 py-2 font-medium text-slate-900 dark:text-white">{contact.name || "无"}</td>
<td className="break-anywhere px-3 py-2 text-slate-700 dark:text-slate-300">{contact.title || "无"}</td>
<td className="break-anywhere px-3 py-2 text-slate-700 dark:text-slate-300">{contact.mobile || "无"}</td>
<td className="break-anywhere px-3 py-2 text-slate-700 dark:text-slate-300">{contact.birthday || "无"}</td>
<td className="break-anywhere px-3 py-2 text-slate-700 dark:text-slate-300">{contact.wecomAdded ? getDictLabelByValue(contact.wecomAdded, isOptions) : "无"}</td>
<td className="break-anywhere px-3 py-2 text-slate-700 dark:text-slate-300">{contact.specialNote || "无"}</td>
</tr>
))}
</tbody>
</table>
</div>
) : (
<div className="crm-empty-panel">