修复通讯录顶部入口箭头图标错位、群管理员列表移除后读到服务端过期缓存
- .people-entry-list > button 是4列grid,最后一列专留给箭头图标,但"新朋友"未处理申请数为0/ "群组"/"文件助手"/"系统消息"这几个入口没有badge时,JSX只渲染3个真实子元素,grid自动布局 把箭头挤进第3列——实测空出623px空白,图标紧贴文字,完全不是贴右对齐效果。改成显式 grid-column:4 钉住箭头位置,不再依赖前面到底渲染了几个兄弟节点。 - AdminList移除管理员后紧接着的load()重新查询命中了服务端对这个查询形状的过期缓存,界面上 刚移除的管理员会短暂"复活"。改成移除成功后直接用已确认生效的结果本地更新state+patch共享 缓存,不再指望立即重新查询能反映刚发生的变更(这个缓存问题本身是后端"新增7"已记录的问题, 重新查询本身没有办法绕过,前端这次做的是不依赖它)。 均已用真实DOM结构/computed style确认修复生效。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
7db687602b
commit
8b51fd3eb8
@@ -9157,6 +9157,16 @@ div.toast.show {
|
|||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* The 4th column is reserved for the trailing chevron, but the <em> badge before it only renders
|
||||||
|
when item.badge is truthy (most of these rows never have one) -- grid auto-placement fills
|
||||||
|
columns left-to-right in DOM order regardless, so with no badge the chevron auto-lands in
|
||||||
|
column 3 instead of 4, leaving column 4 empty and the icon sitting well short of the row's
|
||||||
|
right edge. Pinned to column 4 explicitly so its position doesn't depend on how many siblings
|
||||||
|
happened to render before it. */
|
||||||
|
.people-entry-list > button > .material-icons:last-child {
|
||||||
|
grid-column: 4;
|
||||||
|
}
|
||||||
|
|
||||||
.people-entry-list em {
|
.people-entry-list em {
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -725,8 +725,18 @@ function AdminList({topic, onToast}) {
|
|||||||
}, [topic]);
|
}, [topic]);
|
||||||
React.useEffect(() => { load(); }, [load]);
|
React.useEffect(() => { load(); }, [load]);
|
||||||
const remove = userId => {
|
const remove = userId => {
|
||||||
deleteGroupAdmin(topic, userId).then(() => { setToast('管理员已移除'); load(); })
|
// deleteGroupAdmin succeeding doesn't mean a follow-up load() will show it -- getGroupMembers
|
||||||
.catch(err => onToast(err.message || '操作失败'));
|
// is backed by a server-side cache that this exact query shape can keep serving stale for a
|
||||||
|
// while (confirmed live: an unfiltered re-query right after removal still showed the removed
|
||||||
|
// admin, while a query with different params the session hadn't used yet returned correctly).
|
||||||
|
// Patch the already-known-correct result into local state and the shared cache directly
|
||||||
|
// instead of trusting a re-fetch to reflect what was just confirmed to have happened.
|
||||||
|
deleteGroupAdmin(topic, userId).then(() => {
|
||||||
|
setToast('管理员已移除');
|
||||||
|
setAdmins(prev => prev ? prev.filter(a => a.user_id !== userId) : prev);
|
||||||
|
const cached = readCachedData('group-members:' + topic);
|
||||||
|
if (cached) writeCachedData('group-members:' + topic, cached.map(m => m.user_id === userId ? {...m, role: 'member'} : m));
|
||||||
|
}).catch(err => onToast(err.message || '操作失败'));
|
||||||
};
|
};
|
||||||
return <div className="group-page">
|
return <div className="group-page">
|
||||||
<Header title="设置群管理员" back="group-governance" backTopic={topic} right="添加" onRight={() => navigate('group-admin-add', topic)} />
|
<Header title="设置群管理员" back="group-governance" backTopic={topic} right="添加" onRight={() => navigate('group-admin-add', topic)} />
|
||||||
|
|||||||
+6
-1
@@ -12075,7 +12075,12 @@ function AdminList({
|
|||||||
const remove = userId => {
|
const remove = userId => {
|
||||||
(0,_lib_im_api_js__WEBPACK_IMPORTED_MODULE_4__.deleteGroupAdmin)(topic, userId).then(() => {
|
(0,_lib_im_api_js__WEBPACK_IMPORTED_MODULE_4__.deleteGroupAdmin)(topic, userId).then(() => {
|
||||||
setToast('管理员已移除');
|
setToast('管理员已移除');
|
||||||
load();
|
setAdmins(prev => prev ? prev.filter(a => a.user_id !== userId) : prev);
|
||||||
|
const cached = (0,_lib_use_cached_data_js__WEBPACK_IMPORTED_MODULE_5__.readCachedData)('group-members:' + topic);
|
||||||
|
if (cached) (0,_lib_use_cached_data_js__WEBPACK_IMPORTED_MODULE_5__.writeCachedData)('group-members:' + topic, cached.map(m => m.user_id === userId ? {
|
||||||
|
...m,
|
||||||
|
role: 'member'
|
||||||
|
} : m));
|
||||||
}).catch(err => onToast(err.message || '操作失败'));
|
}).catch(err => onToast(err.message || '操作失败'));
|
||||||
};
|
};
|
||||||
return (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("div", {
|
return (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxDEV)("div", {
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user