Northern_Lights/NapCatQQ
0
0
Fork 0
mirror of https://github.com/NapNeko/NapCatQQ.git synced 2026-03-01 16:20:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor UI styles for improved consistency and clarity

Browse Source 
Unified card backgrounds, borders, and shadows across components for a more consistent look. Enhanced table, tab, and button styles for clarity and accessibility. Improved layout and modal structure in OneBot API debug, added modal for struct display, and optimized WebSocket debug connection logic. Updated file manager, logs, network, and terminal pages for visual consistency. Refactored interface definitions for stricter typing and readability.
This commit is contained in:
手瓜一十雪
2025-12-22 10:38:23 +08:00
parent 872a3e0100
commit 8697061a90
19 changed files with 380 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/napcat-webui-frontend/src/components/qq_info_card.tsx
View File

@@ -8,15 +8,15 @@ import { SelfInfo } from '@/types/user';
import PageLoading from './page_loading';
export interface QQInfoCardProps {
data?: SelfInfo
error?: Error
loading?: boolean
data?: SelfInfo;
error?: Error;
loading?: boolean;
}
const QQInfoCard: React.FC<QQInfoCardProps> = ({ data, error, loading }) => {
return (
<Card
className='relative bg-primary-100 bg-opacity-60 overflow-hidden flex-shrink-0 shadow-md shadow-primary-300 dark:shadow-primary-50'
className='relative bg-white/60 dark:bg-black/40 backdrop-blur-xl border border-white/40 dark:border-white/10 overflow-hidden flex-shrink-0 shadow-sm'
shadow='none'
radius='lg'
>
@@ -31,28 +31,32 @@ const QQInfoCard: React.FC<QQInfoCardProps> = ({ data, error, loading }) => {
</CardBody>
)
: (
<CardBody className='flex-row items-center gap-2 overflow-hidden relative'>
<div className='absolute right-0 bottom-0 text-5xl text-primary-400'>
<CardBody className='flex-row items-center gap-4 overflow-hidden relative p-4'>
<div className='absolute right-[-10px] bottom-[-10px] text-7xl text-default-400/10 rotate-12 pointer-events-none'>
<BsTencentQq />
</div>
<div className='relative flex-shrink-0 z-10'>
<Image
src={
data?.avatarUrl ??
`https://q1.qlogo.cn/g?b=qq&nk=${data?.uin}&s=1`
}
className='shadow-md rounded-full w-12 aspect-square'
data?.avatarUrl ??
`https://q1.qlogo.cn/g?b=qq&nk=${data?.uin}&s=1`
}
className='shadow-sm rounded-full w-14 aspect-square ring-2 ring-white/50 dark:ring-white/10'
/>
<div
className={clsx(
'w-4 h-4 rounded-full absolute right-0.5 bottom-0 border-2 border-primary-100 z-10',
data?.online ? 'bg-green-500' : 'bg-gray-500'
'w-3.5 h-3.5 rounded-full absolute right-0.5 bottom-0.5 border-2 border-white dark:border-zinc-900 z-10',
data?.online ? 'bg-success-500' : 'bg-default-400'
)}
/>
</div>
<div className='flex-col justify-center'>
<div className='text-lg truncate'>{data?.nick}</div>
<div className='text-primary-500 text-sm'>{data?.uin}</div>
<div className='flex-col justify-center z-10'>
<div className='text-xl font-bold text-default-800 dark:text-gray-100 truncate mb-0.5'>
{data?.nick || '未知用户'}
</div>
<div className='text-default-500 font-mono text-xs tracking-wider opacity-80'>
{data?.uin || 'Unknown'}
</div>
</div>
</CardBody>
)}