refactor(Expansion): 优化联系人列表展示样式
1. 将原有的网格布局改为表格布局，适配更多联系人内容展示 2. 增大大屏场景下的侧边栏最大宽度到5xl 3. 优化表头和内容的排版样式，提升可读性main
kangwenjing
parent
641acd8c9d
commit
978a01dd91
|
|
@ -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 实测。
|
||||||
|
|
@ -5194,7 +5194,7 @@ export default function Expansion() {
|
||||||
animate={{ x: 0, y: 0 }}
|
animate={{ x: 0, y: 0 }}
|
||||||
exit={{ x: "100%", y: 0 }}
|
exit={{ x: "100%", y: 0 }}
|
||||||
transition={{ type: "spring", damping: 25, stiffness: 200 }}
|
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" : ""
|
hasForegroundModal ? "pointer-events-none opacity-20" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|
@ -5517,18 +5517,33 @@ export default function Expansion() {
|
||||||
|
|
||||||
{channelDetailTab === "contacts" ? (
|
{channelDetailTab === "contacts" ? (
|
||||||
(selectedItem.contacts?.length ?? 0) > 0 ? (
|
(selectedItem.contacts?.length ?? 0) > 0 ? (
|
||||||
<div className="space-y-3">
|
<div className="overflow-x-auto rounded-xl border border-slate-100 bg-slate-50/50 dark:border-slate-800 dark:bg-slate-800/20">
|
||||||
{selectedItem.contacts?.map((contact, index) => (
|
<table className="w-full min-w-[52rem] border-separate border-spacing-0 text-sm">
|
||||||
<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">
|
<thead>
|
||||||
<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>
|
<tr className="text-left text-xs text-slate-500 dark:text-slate-400">
|
||||||
<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>
|
<th className="whitespace-nowrap px-3 py-2 font-medium">工作职责</th>
|
||||||
<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>
|
<th className="whitespace-nowrap px-3 py-2 font-medium">人员姓名</th>
|
||||||
<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>
|
<th className="whitespace-nowrap px-3 py-2 font-medium">职务</th>
|
||||||
<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>
|
<th className="whitespace-nowrap px-3 py-2 font-medium">联系电话</th>
|
||||||
<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>
|
<th className="whitespace-nowrap px-3 py-2 font-medium">生日</th>
|
||||||
<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>
|
<th className="whitespace-nowrap px-3 py-2 font-medium">是否加企业微信</th>
|
||||||
</div>
|
<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>
|
||||||
) : (
|
) : (
|
||||||
<div className="crm-empty-panel">
|
<div className="crm-empty-panel">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue