pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

群聊设置：重做成员预览区，修掉错位间距、多余横线和被压扁的名字

Browse Source 
用户实机截图反馈这块"图标和间距有问题"。对照 docs/images/群聊设置.png 逐项查证，实际有四个独立
缺陷叠在一起：

1. 多余横线：成员容器 div 和邀请按钮都是 section 的直接子元素，命中了通用列表项样式
   （.group-settings section > button/div 带 border-bottom + min-height + padding），
   于是这一块被当成两个普通设置行渲染，凭空多出两截下划线。
2. 间距错位：原来是 flex 布局，成员列表 flex:1 占满剩余宽度，把邀请按钮一路挤到最右，两者之间
   出现一大片空白；参考图是等宽网格。
3. 名字看不见：全局 button 规则（base.css:1999）写死 height/line-height 2.2rem，成员格子没有
   覆盖它，整个格子被压到 29px 高——48px 的头像直接溢出，名字被压成 0 高度，实测
   getBoundingClientRect().height 为 0。
4. 图标撞车：成员头像的兜底图标沿用了 Avatar 的默认值 group（双人图标），跟上方群头像长得一模
   一样，分不清哪个是群哪个是人；改传 icon="person"。

改成参考图的结构：一行"群成员"标题（右侧显示人数）+ 5 列等宽网格，最后一格是与头像同尺寸、
同圆角的浅色"添加"块。新样式用 .group-settings section > .group-member-* 提高特异性，明确压过
那套列表项规则，并显式写 height:auto 覆盖全局 button 高度。

刻意没做的两点，都是因为本分支没有对应页面，不想做点了没反应或跳错地方的入口：参考图里"查看
15465群成员"那个可点链接（没有通用群成员列表页，这里只展示人数文字），以及"删除"格（没有移除
成员的页面）。这两个缺口需要单独补页面，不在这次范围内。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Your Name
2026-09-03 17:43:22 +08:00
co-authored by Claude Opus 5
parent 8225848493
commit f7bc98811e
5 changed files with 95 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
umd/index.dev.js
+25 -15
View File
@@ -11064,28 +11064,38 @@ function GroupSettings({
children: "chevron_right"
}, void 0, false)]
}, void 0, true), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("section", {
className: "group-member-strip",
className: "group-member-section",
children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("div", {
children: members.map(item => (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("button", {
className: "group-member-section-title",
children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("strong", {
children: "群成员"
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("small", {
children: ["共 ", group.member_count, " 位成员"]
}, void 0, true)]
}, void 0, true), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("div", {
className: "group-member-grid",
children: [members.slice(0, 9).map(item => (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("button", {
type: "button",
onClick: () => navigateToProfile(item.user_id),
children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)(Avatar, {
item: item
item: item,
icon: "person"
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("small", {
children: item.group_nickname || item.display_name
}, void 0, false)]
}, item.user_id, true))
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("button", {
type: "button",
"aria-label": "邀请成员",
onClick: () => onToast('请通过转发/分享群二维码邀请成员'),
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)(Icon, {
children: "person_add_alt"
}, void 0, false)
}, void 0, false)]
}, void 0, true), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("p", {
className: "group-inline-hint",
children: ["共 ", group.member_count, " 位成员"]
}, item.user_id, true)), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("button", {
type: "button",
onClick: () => onToast('请通过转发/分享群二维码邀请成员'),
children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("span", {
className: "group-member-tile-action",
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)(Icon, {
children: "add"
}, void 0, false)
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("small", {
children: "添加"
}, void 0, false)]
}, void 0, true)]
}, void 0, true)]
}, void 0, true), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("section", {
children: links.map(item => (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("button", {
type: "button",