收紧邀请管理和用户列表样式

This commit is contained in:
WuYongJie 2026-05-30 14:59:22 +08:00
parent 7e9dee3817
commit 2e926451a4
3 changed files with 23 additions and 14 deletions

View File

@ -160,7 +160,7 @@ export default function InvitationsTab({ showToast }: InvitationsTabProps) {
<div>
<h2 className={cn('text-xl font-semibold', textTitle)}>邀请管理</h2>
<p className={cn('text-sm mt-1', textDesc)}>
创建和管理邀请链接,用户可以通过邀请链接注册账号
创建和管理邀请链接,成员通过邀请链接加入团队。
</p>
</div>
<button
@ -184,13 +184,13 @@ export default function InvitationsTab({ showToast }: InvitationsTabProps) {
<table className="w-full">
<thead>
<tr className={cn('border-b', borderColor)}>
<th className={cn('px-4 py-3 text-left text-xs font-medium uppercase', textDesc)}>邀请码</th>
<th className={cn('px-4 py-3 text-left text-xs font-medium uppercase', textDesc)}>邀请链接</th>
<th className={cn('px-4 py-3 text-left text-xs font-medium uppercase', textDesc)}>使用次数</th>
<th className={cn('px-4 py-3 text-left text-xs font-medium uppercase', textDesc)}>过期时间</th>
<th className={cn('px-4 py-3 text-left text-xs font-medium uppercase', textDesc)}>状态</th>
<th className={cn('px-4 py-3 text-left text-xs font-medium uppercase', textDesc)}>创建时间</th>
<th className={cn('px-4 py-3 text-left text-xs font-medium uppercase', textDesc)}>操作</th>
<th className={cn('px-4 py-3 text-left text-xs font-medium', textDesc)}>邀请码</th>
<th className={cn('px-4 py-3 text-left text-xs font-medium', textDesc)}>邀请链接</th>
<th className={cn('px-4 py-3 text-left text-xs font-medium', textDesc)}>使用次数</th>
<th className={cn('px-4 py-3 text-left text-xs font-medium', textDesc)}>过期时间</th>
<th className={cn('px-4 py-3 text-left text-xs font-medium', textDesc)}>状态</th>
<th className={cn('px-4 py-3 text-left text-xs font-medium', textDesc)}>创建时间</th>
<th className={cn('px-4 py-3 text-left text-xs font-medium', textDesc)}>操作</th>
</tr>
</thead>
<tbody className={cn('divide-y', divideColor)}>
@ -231,7 +231,7 @@ export default function InvitationsTab({ showToast }: InvitationsTabProps) {
</td>
<td className="px-4 py-3 text-sm">
<span
className={cn('px-2 py-1 rounded-full text-xs font-medium', isValid ? badgeSuccess : badgeDanger)}
className={cn('px-2 py-1 rounded-md text-xs font-medium', isValid ? badgeSuccess : badgeDanger)}
>
{!invitation.isActive
? '已禁用'
@ -261,7 +261,6 @@ export default function InvitationsTab({ showToast }: InvitationsTabProps) {
className={cn(
styles.buttonStyles.danger,
styles.buttonModifiers.compactXs,
'bg-red-500 hover:bg-red-600 text-white' // 显式添加背景色和文字色
)}
>
删除

View File

@ -436,8 +436,16 @@ export default function UsersTab({
const renderUserRow = useCallback(
(user: User, isManager = false) => (
<div key={user.id} className={cn(styles.cardStyles.hover, 'group flex items-start gap-3 cursor-pointer')}>
<div className="flex-1 space-y-1">
<div
key={user.id}
className={cn(
'group flex items-start gap-3 rounded-md border px-3 py-2.5 transition-colors duration-150',
theme === 'dark'
? 'border-slate-800 bg-slate-900/30 hover:bg-slate-800/50'
: 'border-slate-200 bg-white hover:bg-slate-50',
)}
>
<div className="min-w-0 flex-1 space-y-1">
<div className="flex flex-wrap items-center gap-2">
<span
className={cn(
@ -466,7 +474,7 @@ export default function UsersTab({
{renderActionButtons(user)}
</div>
),
[renderActionButtons, renderStatusBadges, styles.cardStyles.hover, textDesc, textNormal, textSuperAdmin],
[renderActionButtons, renderStatusBadges, textDesc, textNormal, textSuperAdmin, theme],
)
const showSearchResults = Boolean(searchTerm.trim())

View File

@ -1032,6 +1032,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
- 已推进:`app/admin/_components/CategoriesTab.tsx` 的分类管理页头部、左侧列表、字段启用编辑态、排序/重命名工具按钮和可添加字段列表已完成第二轮工作台化收口。
- 已推进:`app/admin/_components/AppearanceSettingsPanel.tsx` 的外观设置页已完成第一轮工作台化收口,文档中过期的 `Appearance Studio`、浮动光球和动态背景证据已修正。
- 已推进:`app/admin/_components/DepartmentsTab.tsx` 的部门管理页头部和组织树操作按钮已完成第一轮工作台化收口。
- 已推进:`app/admin/_components/InvitationsTab.tsx` 的邀请管理说明改为“成员通过邀请链接加入团队”,与私有化账号入口一致;表头和状态标签也从展示化样式收为普通后台表格样式。
### P2-07 管理后台列表和组织树装饰过重
@ -1041,7 +1042,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
证据:
- `app/admin/_components/UsersTab.tsx:423`:用户行使用 hover 卡片样式。
- `app/admin/_components/UsersTab.tsx`:用户行已从 hover 卡片样式收为普通紧凑列表行,减少“卡片套卡片”的管理页噪音。
- `app/admin/_components/UsersTab.tsx:437`:最高权限徽章使用紫粉渐变、阴影和 hover 放大。
- `app/admin/_components/UsersTab.tsx:442`:管理员徽章使用紫蓝渐变、阴影和 hover 放大。
- `app/admin/_components/UsersTab.tsx:513`:用户列表外层又包卡片,形成卡片套列表。
@ -1052,6 +1053,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
- 用户管理优先改成表格或紧凑列表:用户名、邮箱、部门、角色、状态、素材数、操作列对齐。
- 权限标签改成浅底纯色小标签,不用渐变、阴影和缩放。
- 组织树用缩进、左边线和折叠图标表达层级,不用渐变卡片表达层级。
- 已推进:`app/admin/_components/UsersTab.tsx` 的用户行已从独立小卡片收成紧凑列表行,保留原有权限、状态和操作按钮逻辑。
- 已推进:`app/admin/_components/users/DepartmentHierarchy.tsx` 已移除组织树里的紫色渐变、hover 放大和强阴影;部门节点改成中性树形行,管理员姓名标识改为中性徽章。
- 已推进:`app/admin/_components/MaterialsTab.tsx` 的目标用户选择弹窗已从玻璃感浮层收敛为普通后台弹窗,角色标签和选中标识改为中性小标签。
- 验证:`npm run type-check` 通过;浏览器已打开 `http://localhost:3004/admin` 用户管理页,控制台无新增错误,页面未观察到明显重叠。