onionanime/cyh-tk-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 优化后台整体UI风格与组件样式

Browse Source 
1.  新增并配置全局颜色、阴影、圆角等主题变量
2.  统一各页面卡片、表单、按钮等组件的样式规范
3.  优化登录页、个人中心、仪表盘等页面的布局与视觉效果
4.  添加全局滚动条样式与元素过渡动画
This commit is contained in:
zhxiao1124
2026-07-02 18:05:46 +08:00
parent 96eaa810f3
commit 718d1c7aac
12 changed files with 242 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/Dashboard/index.tsx
View File

@@ -1,4 +1,5 @@
import { Card } from '@arco-design/web-react';
import { IconPlayCircle, IconUser, IconFile, IconCheckCircle } from '@arco-design/web-react/icon';
import { dramaApi, logApi, userApi } from '../api';
import { usePageData } from '../hooks/usePageData';
import { hasPermissions } from '../utils/permission';
@@ -6,8 +7,32 @@ import { NoAccessPage } from '../components/NoAccessPage';
import { RequestLogTable } from '../components/RequestLogTable';
import type { AppUser, DashboardPageProps, Drama, MetricCardProps, RequestLog } from './interface';
function MetricCard({ label, value }: MetricCardProps) {
return <Card><div className="mb-2 text-muted">{label}</div><div className="text-[28px] font-bold">{value}</div></Card>;
const METRIC_ICONS: Record<string, React.ReactNode> = {
dramas: <IconPlayCircle className="text-2xl text-brand" />,
users: <IconUser className="text-2xl text-success" />,
logs: <IconFile className="text-2xl text-warning" />,
status: <IconCheckCircle className="text-2xl text-success" />,
};
const METRIC_COLORS: Record<string, string> = {
dramas: 'from-brand/5 to-brand/10',
users: 'from-success/5 to-success/10',
logs: 'from-warning/5 to-warning/10',
status: 'from-success/5 to-success/10',
};
function MetricCard({ label, value, icon }: MetricCardProps & { icon: string }) {
return (
<div className={`stat-card bg-gradient-to-br ${METRIC_COLORS[icon]}`}>
<div className="mb-3 flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/80 shadow-sm">
{METRIC_ICONS[icon]}
</div>
<span className="text-[13px] font-medium text-muted">{label}</span>
</div>
<div className="text-[28px] font-bold tracking-tight text-ink">{value}</div>
</div>
);
}
function DashboardPage({ profile }: DashboardPageProps) {
@@ -21,11 +46,11 @@ function DashboardPage({ profile }: DashboardPageProps) {
return (
<>
<div className="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2 min-[901px]:grid-cols-4">
{canReadDramas && <MetricCard label="短剧管理" value={dramas.data.pagination.total} />}
{canReadUsers && <MetricCard label="用户管理" value={users.data.pagination.total} />}
{canReadLogs && <MetricCard label="请求日志" value={logs.data.pagination.total} />}
<MetricCard label="接口状态" value="运行中" />
<div className="mb-5 grid grid-cols-1 gap-4 sm:grid-cols-2 min-[901px]:grid-cols-4">
{canReadDramas && <MetricCard label="短剧管理" value={dramas.data.pagination.total} icon="dramas" />}
{canReadUsers && <MetricCard label="用户管理" value={users.data.pagination.total} icon="users" />}
{canReadLogs && <MetricCard label="请求日志" value={logs.data.pagination.total} icon="logs" />}
<MetricCard label="接口状态" value="运行中" icon="status" />
</div>
{canReadLogs ? (
<Card className="section-card" title="最近请求">