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

用户实机截图反馈这块"图标和间距有问题"。对照 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>

css/base.css

@@ -9882,24 +9882,46 @@ div.toast.show {
   color: #3a8aec;
 }
 
-.group-member-strip {
+/* 群聊设置页的成员预览网格（参考 docs/images/群聊设置.png）。这里必须用比
-  display: flex;
+   ".group-settings section > div" 更高的特异性覆盖那套列表项样式（flex + min-height +
-  align-items: flex-start;
+   border-bottom + padding），否则网格容器会被当成一行普通设置项渲染，出现整行下划线；
-  padding: 1rem;
+   同理成员格子刻意放在 grid 容器内部，避免成为 section 的直接子元素而命中同一套样式。 */
+.group-settings section > .group-member-section-title {
+  min-height: 2.8rem;
+  padding: 0.75rem 1rem 0.35rem;
+  border-bottom: 0;
+  gap: 0.5rem;
 }
 
-.group-member-strip > div {
+.group-member-section-title > strong {
-  display: flex;
+  color: #30353c;
-  gap: 0.8rem;
+  font-size: 1rem;
-  overflow-x: auto;
-  flex: 1 1 auto;
 }
 
-.group-member-strip button {
+.group-member-section-title > small {
+  margin-left: auto;
+  color: #949ba4;
+}
+
+.group-settings section > .group-member-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  align-items: start;
+  gap: 0.9rem 0.4rem;
+  min-height: 0;
+  padding: 0.25rem 1rem 1rem;
+  border-bottom: 0;
+}
+
+/* 全局 button 规则（css/base.css 约 1999 行）写死了 height: 2.2rem 和同值的 line-height，
+   不显式覆盖的话这里的格子会被压到 29px 高——头像溢出、下面的名字被压成 0 高度直接看不见。 */
+.group-member-grid > button {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  width: 3.2rem;
+  gap: 0.35rem;
-  min-width: 3.2rem;
+  width: 100%;
+  min-width: 0;
   height: auto;
   min-height: 0;
   margin: 0;
@@ -9908,19 +9930,34 @@ div.toast.show {
   box-shadow: none;
   color: #68707a;
   background: transparent;
-  flex-direction: column;
+  line-height: 1.3;
   text-transform: none;
 }
 
-.group-member-strip button > small {
+.group-member-grid > button > small {
   width: 100%;
-  margin-top: 0.3rem;
   overflow: hidden;
+  color: #68707a;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+/* "添加"格：跟成员头像同样尺寸的浅色方块，视觉上与真实成员头像区分开 */
+.group-member-tile-action {
+  display: grid;
+  place-items: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.45rem;
+  color: #98a0aa;
+  background: #f0f2f5;
+}
+
+.group-member-tile-action > .material-icons {
+  font-size: 1.5rem;
+}
+
 .group-profile {
   width: min(100%, 50rem);
   margin: 0 auto;

src/views/group-management-view.jsx

@@ -368,13 +368,23 @@ function GroupSettings({topic, myUserId, tinode, onToast}) {
         <span><strong>{group.name}</strong><small>{group.description || '群主很懒，还没有群简介'}</small></span>
         <Icon>chevron_right</Icon>
       </button>
-      <section className="group-member-strip">
+      {/* 参考图 docs/images/群聊设置.png：一行"群成员"标题（右侧带人数），下面是等宽网格，最后一格
-        <div>{members.map(item => <button type="button" key={item.user_id} onClick={() => navigateToProfile(item.user_id)}>
+          是"添加"。这里刻意不把标题行右侧做成可点链接、也没有参考图里那个"删除"格——本分支没有
-          <Avatar item={item} /><small>{item.group_nickname || item.display_name}</small>
+          通用的群成员列表页，也没有移除成员的页面，与其跳到语义不对的页面或放一个点了没用的格子，
-        </button>)}</div>
+          不如先只展示信息，缺口另行记录。 */}
-        <button type="button" aria-label="邀请成员" onClick={() => onToast('请通过转发/分享群二维码邀请成员')}><Icon>person_add_alt</Icon></button>
+      <section className="group-member-section">
+        <div className="group-member-section-title">
+          <strong>群成员</strong><small>共 {group.member_count} 位成员</small>
+        </div>
+        <div className="group-member-grid">
+          {members.slice(0, 9).map(item => <button type="button" key={item.user_id} onClick={() => navigateToProfile(item.user_id)}>
+            <Avatar item={item} icon="person" /><small>{item.group_nickname || item.display_name}</small>
+          </button>)}
+          <button type="button" onClick={() => onToast('请通过转发/分享群二维码邀请成员')}>
+            <span className="group-member-tile-action"><Icon>add</Icon></span><small>添加</small>
+          </button>
+        </div>
       </section>
-      <p className="group-inline-hint">共 {group.member_count} 位成员</p>
       <section>{links.map(item => <button type="button" key={item[0]} onClick={() => navigate(item[0], topic)}>
         <span>{item[1]}</span><small>{item[2]}</small><Icon>chevron_right</Icon>
       </button>)}</section>

umd/index.dev.js

@@ -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))
+          }, item.user_id, true)), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("button", {
-        }, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("button", {
+            type: "button",
-          type: "button",
+            onClick: () => onToast('请通过转发/分享群二维码邀请成员'),
-          "aria-label": "邀请成员",
+            children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("span", {
-          onClick: () => onToast('请通过转发/分享群二维码邀请成员'),
+              className: "group-member-tile-action",
-          children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)(Icon, {
+              children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)(Icon, {
-            children: "person_add_alt"
+                children: "add"
-          }, void 0, false)
+              }, void 0, false)
-        }, void 0, false)]
+            }, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("small", {
-      }, void 0, true), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("p", {
+              children: "添加"
-        className: "group-inline-hint",
+            }, void 0, false)]
-        children: ["共 ", group.member_count, " 位成员"]
+          }, 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",