feat: 新增频道管理功能,优化整体UI与交互体验
本次提交完成了以下核心变更: 1. 新增完整的频道管理模块,包括频道增删改查API、页面组件与权限配置 2. 为短剧功能添加频道关联字段,支持将短剧绑定到指定频道 3. 全局UI优化:统一使用Panel组件重构页面布局,统一样式规范与交互细节 4. 表格与日志组件优化:新增请求方法颜色标记、耗时高亮、状态码分级展示 5. 登录页、个人中心、布局等页面的视觉升级与交互优化 6. 完善全局TailwindCSS样式与组件样式自定义
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
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';
|
||||
import { NoAccessPage } from '../components/NoAccessPage';
|
||||
import { Panel } from '../components/Panel';
|
||||
import { RequestLogTable } from '../components/RequestLogTable';
|
||||
import type { AppUser, DashboardPageProps, Drama, MetricCardProps, RequestLog } from './interface';
|
||||
|
||||
@@ -23,14 +23,14 @@ const METRIC_COLORS: Record<string, string> = {
|
||||
|
||||
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">
|
||||
<div className={`stat-card animate-slide-up bg-gradient-to-br ${METRIC_COLORS[icon]}`}>
|
||||
<div className="mb-3.5 flex items-center gap-3">
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-white/80 shadow-sm ring-1 ring-black/[0.03]">
|
||||
{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 className="text-[30px] font-bold tracking-tight text-ink">{value}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -45,20 +45,20 @@ function DashboardPage({ profile }: DashboardPageProps) {
|
||||
const hasAnyDataModule = canReadDramas || canReadUsers || canReadLogs;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-5 grid grid-cols-1 gap-4 sm:grid-cols-2 min-[901px]:grid-cols-4">
|
||||
<div className="page-stack">
|
||||
<div className="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="最近请求">
|
||||
<Panel title="最近请求" noPadding>
|
||||
<RequestLogTable data={logs.data.list.slice(0, 8)} loading={logs.loading} />
|
||||
</Card>
|
||||
</Panel>
|
||||
) : null}
|
||||
{!hasAnyDataModule ? <NoAccessPage /> : null}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user