Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-24 18:02:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve admin panel design (#14464)

Browse Source
This commit is contained in:
DarkSky
2026-02-17 17:40:29 +08:00
committed by GitHub
parent 850e646ab9
commit 8f833388eb
86 changed files with 2633 additions and 1431 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
packages/frontend/admin/src/modules/accounts/components/user-table.tsx
View File

@@ -9,34 +9,34 @@ interface UserTableProps {
*/
export const UserTable: React.FC<UserTableProps> = ({ users }) => {
return (
<div className="max-h-[300px] overflow-y-auto border rounded-md">
<div className="max-h-[300px] overflow-y-auto rounded-xl border border-border/60 bg-card shadow-sm">
<table className="w-full border-collapse">
<thead className="bg-white sticky top-0">
<thead className="sticky top-0 bg-muted/40">
<tr>
<th className="py-2 px-4 border-b text-left text-xs font-medium text-gray-500 tracking-wider ">
<th className="border-b border-border px-4 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground">
Name
</th>
<th className="py-2 px-4 border-b text-left text-xs font-medium text-gray-500 tracking-wider">
<th className="border-b border-border px-4 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground">
Email
</th>
<th className="py-2 px-4 border-b text-left text-xs font-medium text-gray-500 tracking-wider">
<th className="border-b border-border px-4 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground">
Password
</th>
<th className="py-2 px-4 border-b text-left text-xs font-medium text-gray-500 tracking-wider">
<th className="border-b border-border px-4 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground">
Status
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
<tbody className="divide-y divide-border">
{users.map((user, index) => (
<tr
key={`${user.email}-${index}`}
className={`${user.valid === false ? 'bg-red-50' : ''}
${user.importStatus === ImportStatus.Failed ? 'bg-red-50' : ''}
${user.importStatus === ImportStatus.Success ? 'bg-green-50' : ''}
${user.importStatus === ImportStatus.Processing ? 'bg-yellow-50' : ''}`}
className={`${user.valid === false ? 'bg-destructive/10' : ''}
${user.importStatus === ImportStatus.Failed ? 'bg-destructive/10' : ''}
${user.importStatus === ImportStatus.Success ? 'bg-[var(--affine-v2-layer-background-success)]' : ''}
${user.importStatus === ImportStatus.Processing ? 'bg-[var(--affine-v2-layer-background-warning)]' : ''}`}
>
<td className="py-2 px-4 text-sm text-gray-900 truncate max-w-[150px]">
<td className="max-w-[150px] truncate px-4 py-2 text-sm text-foreground">
{user.name || '-'}
</td>
<td
@@ -44,8 +44,8 @@ export const UserTable: React.FC<UserTableProps> = ({ users }) => {
user.valid === false &&
(user.error?.toLowerCase().includes('email') ||
!user.error?.toLowerCase().includes('password'))
? 'text-red-500'
: 'text-gray-900'
? 'text-destructive'
: 'text-foreground'
}`}
>
{user.email}
@@ -54,36 +54,36 @@ export const UserTable: React.FC<UserTableProps> = ({ users }) => {
className={`py-2 px-4 text-sm truncate max-w-[150px] ${
user.valid === false &&
user.error?.toLowerCase().includes('password')
? 'text-red-500'
: 'text-gray-900'
? 'text-destructive'
: 'text-foreground'
}`}
>
{user.password || '-'}
</td>
<td className="py-2 px-4 text-sm">
{user.importStatus === ImportStatus.Success ? (
<span className="text-gray-900">
<span className="h-2 w-2 bg-gray-900 rounded-full inline-block mr-2" />
<span className="text-foreground">
<span className="mr-2 inline-block h-2 w-2 rounded-full bg-[var(--affine-v2-status-success)]" />
Success
</span>
) : user.importStatus === ImportStatus.Failed ? (
<span className="text-red-500" title={user.importError}>
<span className="h-2 w-2 bg-red-500 rounded-full inline-block mr-2" />
<span className="text-destructive" title={user.importError}>
<span className="mr-2 inline-block h-2 w-2 rounded-full bg-destructive" />
Failed ({user.importError})
</span>
) : user.importStatus === ImportStatus.Processing ? (
<span className="text-yellow-500">
<span className="h-2 w-2 bg-yellow-500 rounded-full inline-block mr-2" />
<span className="text-primary">
<span className="mr-2 inline-block h-2 w-2 rounded-full bg-primary" />
Processing...
</span>
) : user.valid === false ? (
<span className="text-red-500" title={user.error}>
<span className="h-2 w-2 bg-red-500 rounded-full inline-block mr-2" />
<span className="text-destructive" title={user.error}>
<span className="mr-2 inline-block h-2 w-2 rounded-full bg-destructive" />
Invalid ({user.error})
</span>
) : (
<span className="text-gray-900">
<span className="h-2 w-2 bg-gray-900 rounded-full inline-block mr-2" />
<span className="text-foreground">
<span className="mr-2 inline-block h-2 w-2 rounded-full bg-foreground" />
Valid
</span>
)}