From 978a01dd9158c063f8defcb375f7f787e5e3d191 Mon Sep 17 00:00:00 2001 From: kangwenjing <1138819403@qq.com> Date: Wed, 9 Sep 2026 09:51:31 +0800 Subject: [PATCH] =?UTF-8?q?refactor(Expansion):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E8=81=94=E7=B3=BB=E4=BA=BA=E5=88=97=E8=A1=A8=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 将原有的网格布局改为表格布局，适配更多联系人内容展示 2. 增大大屏场景下的侧边栏最大宽度到5xl 3. 优化表头和内容的排版样式，提升可读性 --- .workbuddy/memory/2026-09-09.md | 21 ++++++++++++++++ frontend/src/pages/Expansion.tsx | 41 ++++++++++++++++++++++---------- 2 files changed, 49 insertions(+), 13 deletions(-) create mode 100644 .workbuddy/memory/2026-09-09.md diff --git a/.workbuddy/memory/2026-09-09.md b/.workbuddy/memory/2026-09-09.md new file mode 100644 index 00000000..837594d0 --- /dev/null +++ b/.workbuddy/memory/2026-09-09.md @@ -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` 加在 `` 上。**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 实测。 diff --git a/frontend/src/pages/Expansion.tsx b/frontend/src/pages/Expansion.tsx index 4c9e072a..5adc4fe7 100644 --- a/frontend/src/pages/Expansion.tsx +++ b/frontend/src/pages/Expansion.tsx @@ -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 ? ( -
- {selectedItem.contacts?.map((contact, index) => ( -
-

工作职责

{contact.duty || "无"}

-

人员姓名

{contact.name || "无"}

-

职务

{contact.title || "无"}

-

联系电话

{contact.mobile || "无"}

-

生日

{contact.birthday || "无"}

-

是否加企业微信

{contact.wecomAdded ? getDictLabelByValue(contact.wecomAdded, isOptions) : "无"}

-

特别说明

{contact.specialNote || "无"}

-
- ))} +
+ + + + + + + + + + + + + + {selectedItem.contacts?.map((contact, index) => ( + + + + + + + + + + ))} + +
工作职责人员姓名职务联系电话生日是否加企业微信特别说明
{contact.duty || "无"}{contact.name || "无"}{contact.title || "无"}{contact.mobile || "无"}{contact.birthday || "无"}{contact.wecomAdded ? getDictLabelByValue(contact.wecomAdded, isOptions) : "无"}{contact.specialNote || "无"}
) : (