调整首页页面布局
This commit is contained in:
Eamon
@@ -28,7 +28,11 @@ export async function listResourceShort(params: ResourceListParams) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function updateResource(data: { id: number; active?: boolean; checkip?: boolean}) {
|
export async function updateResource(data: {
|
||||||
|
id: number
|
||||||
|
active?: boolean
|
||||||
|
checkip?: boolean
|
||||||
|
}) {
|
||||||
return callByUser<Resources>("/api/admin/resource/update", data)
|
return callByUser<Resources>("/api/admin/resource/update", data)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,514 +1,438 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { format, subDays } from "date-fns"
|
||||||
|
import {
|
||||||
|
Activity,
|
||||||
|
ArrowDownRight,
|
||||||
|
ArrowUpRight,
|
||||||
|
BarChart3,
|
||||||
|
Calendar,
|
||||||
|
DoorOpenIcon,
|
||||||
|
Server,
|
||||||
|
TrendingUp,
|
||||||
|
UserPlus,
|
||||||
|
Users,
|
||||||
|
} from "lucide-react"
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
|
import { useMemo, useState } from "react"
|
||||||
|
import {
|
||||||
|
SimpleBarChart,
|
||||||
|
SimpleHorizontalBarChart,
|
||||||
|
SimpleLineChart,
|
||||||
|
} from "@/components/charts"
|
||||||
|
import { Page } from "@/components/page"
|
||||||
|
|
||||||
export type DashboardPageProps = {}
|
type TimeRange = "today" | "7d" | "30d" | "90d" | "custom"
|
||||||
|
|
||||||
|
const timeRangeLabels: Record<TimeRange, string> = {
|
||||||
|
today: "今日",
|
||||||
|
"7d": "近7天",
|
||||||
|
"30d": "近30天",
|
||||||
|
"90d": "近90天",
|
||||||
|
custom: "自定义",
|
||||||
|
}
|
||||||
|
|
||||||
|
function mulberry32(seed: number) {
|
||||||
|
let t = seed
|
||||||
|
return () => {
|
||||||
|
t |= 0
|
||||||
|
t = (t + 0x6d2b79f5) | 0
|
||||||
|
let n = Math.imul(t ^ (t >>> 15), 1 | t)
|
||||||
|
n = (n + Math.imul(n ^ (n >>> 7), 61 | n)) ^ n
|
||||||
|
return ((n ^ (n >>> 14)) >>> 0) / 4294967296
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DashboardPage() {
|
||||||
|
const [timeRange, setTimeRange] = useState<TimeRange>("7d")
|
||||||
|
const [showCustomPicker, setShowCustomPicker] = useState(false)
|
||||||
|
const [startDate, setStartDate] = useState("")
|
||||||
|
const [endDate, setEndDate] = useState("")
|
||||||
|
|
||||||
|
const chartData = useMemo(() => {
|
||||||
|
const days = 14
|
||||||
|
const seed = 42
|
||||||
|
const rng = mulberry32(seed)
|
||||||
|
const proxyData = []
|
||||||
|
const tradeData = []
|
||||||
|
const customerData = []
|
||||||
|
const extractData = []
|
||||||
|
|
||||||
|
for (let i = days - 1; i >= 0; i--) {
|
||||||
|
const date = subDays(new Date(), i)
|
||||||
|
const dateStr = format(date, "MM-dd")
|
||||||
|
proxyData.push({
|
||||||
|
date: dateStr,
|
||||||
|
value: Math.floor(rng() * 50) + 80,
|
||||||
|
})
|
||||||
|
tradeData.push({
|
||||||
|
date: dateStr,
|
||||||
|
value: Math.floor(rng() * 3000) + 5000,
|
||||||
|
})
|
||||||
|
customerData.push({
|
||||||
|
date: dateStr,
|
||||||
|
value: Math.floor(rng() * 20) + 5,
|
||||||
|
})
|
||||||
|
extractData.push({
|
||||||
|
date: dateStr,
|
||||||
|
value: Math.floor(rng() * 800) + 1200,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const userData = [
|
||||||
|
{ name: "张三", activity: 287 },
|
||||||
|
{ name: "李四", activity: 245 },
|
||||||
|
{ name: "王五", activity: 198 },
|
||||||
|
{ name: "赵六", activity: 156 },
|
||||||
|
{ name: "孙七", activity: 132 },
|
||||||
|
{ name: "周八", activity: 98 },
|
||||||
|
{ name: "吴九", activity: 76 },
|
||||||
|
]
|
||||||
|
|
||||||
|
return { proxyData, tradeData, customerData, extractData, userData }
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// 处理自定义日期按钮点击
|
||||||
|
const handleCustomClick = () => {
|
||||||
|
setShowCustomPicker(true)
|
||||||
|
setTimeRange("custom")
|
||||||
|
// 清空之前的日期
|
||||||
|
setStartDate("")
|
||||||
|
setEndDate("")
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理日期确认
|
||||||
|
const handleDateConfirm = () => {
|
||||||
|
if (startDate && endDate) {
|
||||||
|
console.log("自定义日期范围:", startDate, "~", endDate)
|
||||||
|
setShowCustomPicker(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理取消
|
||||||
|
const handleCancel = () => {
|
||||||
|
setShowCustomPicker(false)
|
||||||
|
setTimeRange("7d")
|
||||||
|
}
|
||||||
|
|
||||||
export default function DashboardPage(props: DashboardPageProps) {
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-5">
|
<Page className="overflow-auto">
|
||||||
{/* 欢迎区域 - 全宽 */}
|
{/* 欢迎栏 */}
|
||||||
<div className="bg-white border border-gray-200 rounded-md">
|
<div className="bg-card rounded-lg border p-2 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||||
<div className="flex items-center justify-between p-5">
|
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-xl font-bold text-gray-800">
|
<h1 className="text-lg font-bold">IP代理管理控制台</h1>
|
||||||
IP代理管理控制台
|
<p className="text-sm text-muted-foreground mt-1">上次更新: --</p>
|
||||||
</h1>
|
|
||||||
<p className="text-gray-500 mt-1">上次更新: -</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex space-x-3">
|
<div className="flex gap-2 flex-wrap">
|
||||||
<button className="px-4 py-2 bg-gray-100 text-gray-700 border border-gray-200 rounded-md hover:bg-gray-200 transition-colors text-sm font-medium">
|
|
||||||
查看使用报告
|
|
||||||
</button>
|
|
||||||
<button className="px-4 py-2 bg-blue-600 text-white border border-blue-700 rounded-md hover:bg-blue-700 transition-colors text-sm font-medium">
|
|
||||||
添加新代理
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 主体内容 - 双栏布局 */}
|
|
||||||
<div className="flex flex-col lg:flex-row space-y-5 lg:space-y-0 lg:space-x-5">
|
|
||||||
{/* 左侧栏 - 占比较大 */}
|
|
||||||
<div className="w-full lg:w-8/12 space-y-5">
|
|
||||||
{/* 代理资源统计卡片组 */}
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-5">
|
|
||||||
<DataCard
|
|
||||||
title="在线代理"
|
|
||||||
value="14,283"
|
|
||||||
change="+12.5%"
|
|
||||||
isIncrease={true}
|
|
||||||
icon={
|
|
||||||
<svg
|
|
||||||
className="h-6 w-6"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M5 12h14M12 5l7 7-7 7"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<DataCard
|
|
||||||
title="总请求数"
|
|
||||||
value="851,492"
|
|
||||||
change="+8.2%"
|
|
||||||
isIncrease={true}
|
|
||||||
icon={
|
|
||||||
<svg
|
|
||||||
className="h-6 w-6"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<DataCard
|
|
||||||
title="成功率"
|
|
||||||
value="98.5%"
|
|
||||||
change="+2.4%"
|
|
||||||
isIncrease={true}
|
|
||||||
icon={
|
|
||||||
<svg
|
|
||||||
className="h-6 w-6"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<DataCard
|
|
||||||
title="平均响应时间"
|
|
||||||
value="0.82s"
|
|
||||||
change="-12.3%"
|
|
||||||
isIncrease={true}
|
|
||||||
icon={
|
|
||||||
<svg
|
|
||||||
className="h-6 w-6"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 代理使用图表 */}
|
|
||||||
<div className="bg-white border border-gray-200 rounded-md">
|
|
||||||
<div className="flex justify-between items-center p-5 border-b border-gray-200">
|
|
||||||
<h2 className="font-bold text-gray-800">代理使用趋势</h2>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<select className="text-sm border border-gray-200 rounded-md px-3 py-1 bg-white">
|
|
||||||
<option>今日</option>
|
|
||||||
<option>本周</option>
|
|
||||||
<option>本月</option>
|
|
||||||
<option>全年</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="h-80 bg-white p-5 flex items-center justify-center text-gray-400 border-b border-gray-200">
|
|
||||||
请求量与响应时间统计图表
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between p-5 text-sm">
|
|
||||||
<div className="text-gray-500">
|
|
||||||
<span className="inline-block w-3 h-3 rounded-full bg-blue-500 mr-1"></span>
|
|
||||||
请求数量
|
|
||||||
</div>
|
|
||||||
<div className="text-gray-500">
|
|
||||||
<span className="inline-block w-3 h-3 rounded-full bg-green-500 mr-1"></span>
|
|
||||||
成功率
|
|
||||||
</div>
|
|
||||||
<div className="text-gray-500">
|
|
||||||
<span className="inline-block w-3 h-3 rounded-full bg-orange-500 mr-1"></span>
|
|
||||||
响应时间
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* IP代理列表 */}
|
|
||||||
<div className="bg-white border border-gray-200 rounded-md">
|
|
||||||
<div className="p-5 border-b border-gray-200">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<h2 className="font-bold text-gray-800">活跃代理IP</h2>
|
|
||||||
<Link
|
<Link
|
||||||
href="/proxies"
|
href="/cust"
|
||||||
className="text-blue-600 text-sm hover:underline"
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md border text-sm text-muted-foreground hover:bg-accent transition-colors"
|
||||||
>
|
>
|
||||||
查看全部
|
<Users className="h-4 w-4" />
|
||||||
|
客户管理
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/trade"
|
||||||
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md border text-sm text-muted-foreground hover:bg-accent transition-colors"
|
||||||
|
>
|
||||||
|
<Activity className="h-4 w-4" />
|
||||||
|
交易明细
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/gateway"
|
||||||
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md border text-sm text-muted-foreground hover:bg-accent transition-colors"
|
||||||
|
>
|
||||||
|
<DoorOpenIcon className="h-4 w-4" />
|
||||||
|
网关列表
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<table className="w-full">
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||||
<thead>
|
{/* 指标卡片 */}
|
||||||
<tr className="bg-gray-50 text-left text-xs text-gray-500 uppercase tracking-wider border-b border-gray-200">
|
<div className="lg:col-span-2 space-y-4">
|
||||||
<th className="px-5 py-3">IP地址</th>
|
<div className="space-y-3">
|
||||||
<th className="px-5 py-3">位置</th>
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
|
||||||
<th className="px-5 py-3">状态</th>
|
<StatCard
|
||||||
<th className="px-5 py-3">请求次数</th>
|
title="待认领客户数量"
|
||||||
<th className="px-5 py-3">成功率</th>
|
value="--"
|
||||||
<th className="px-5 py-3">操作</th>
|
change="--"
|
||||||
</tr>
|
trend="up"
|
||||||
</thead>
|
icon={Users}
|
||||||
<tbody className="divide-y divide-gray-200">
|
iconColor="text-cyan-600"
|
||||||
{[1, 2, 3, 4, 5].map(item => (
|
iconBg="bg-cyan-50 border-cyan-100"
|
||||||
<ContentRow
|
|
||||||
key={item}
|
|
||||||
ip={`192.168.${item}.${item * 10}`}
|
|
||||||
location={item % 2 === 0 ? "中国" : "美国"}
|
|
||||||
status={
|
|
||||||
item % 3 === 0
|
|
||||||
? "error"
|
|
||||||
: item % 2 === 0
|
|
||||||
? "warning"
|
|
||||||
: "active"
|
|
||||||
}
|
|
||||||
requests={1}
|
|
||||||
successRate={`2%`}
|
|
||||||
/>
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="活跃代理数"
|
||||||
|
value="--"
|
||||||
|
change="--"
|
||||||
|
trend="up"
|
||||||
|
icon={Server}
|
||||||
|
iconColor="text-blue-600"
|
||||||
|
iconBg="bg-blue-50 border-blue-100"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="今日交易额"
|
||||||
|
value="--"
|
||||||
|
change="--"
|
||||||
|
trend="up"
|
||||||
|
icon={TrendingUp}
|
||||||
|
iconColor="text-amber-600"
|
||||||
|
iconBg="bg-amber-50 border-amber-100"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="今日提取数量"
|
||||||
|
value="--"
|
||||||
|
change="--"
|
||||||
|
trend="up"
|
||||||
|
icon={BarChart3}
|
||||||
|
iconColor="text-rose-600"
|
||||||
|
iconBg="bg-rose-50 border-rose-100"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="今日新增客户"
|
||||||
|
value="--"
|
||||||
|
change="--"
|
||||||
|
trend="up"
|
||||||
|
icon={UserPlus}
|
||||||
|
iconColor="text-blue-600"
|
||||||
|
iconBg="bg-blue-50 border-blue-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 时间筛选栏 */}
|
||||||
|
<div className="flex flex-col sm:flex-row sm:items-center justify-end gap-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-muted-foreground">数据周期</span>
|
||||||
|
<div className="h-4 w-px bg-border" />
|
||||||
|
<div className="flex rounded-md border overflow-hidden">
|
||||||
|
{(Object.keys(timeRangeLabels) as TimeRange[]).map(key => (
|
||||||
|
<button
|
||||||
|
key={key}
|
||||||
|
onClick={() => {
|
||||||
|
if (key === "custom") {
|
||||||
|
handleCustomClick()
|
||||||
|
} else {
|
||||||
|
setTimeRange(key)
|
||||||
|
setShowCustomPicker(false)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={`px-3 py-1.5 text-xs font-medium transition-colors ${
|
||||||
|
timeRange === key && !showCustomPicker
|
||||||
|
? "bg-primary text-primary-foreground"
|
||||||
|
: "text-muted-foreground hover:bg-accent"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{timeRangeLabels[key]}
|
||||||
|
</button>
|
||||||
))}
|
))}
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div className="p-3 bg-gray-50 border-t border-gray-200 flex justify-end">
|
|
||||||
<button className="px-3 py-1 bg-white border border-gray-200 rounded-md text-sm mr-2">
|
|
||||||
上一页
|
|
||||||
</button>
|
|
||||||
<button className="px-3 py-1 bg-blue-600 text-white rounded-md text-sm">
|
|
||||||
下一页
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 右侧栏 - 占比较小 */}
|
|
||||||
<div className="w-full lg:w-4/12 space-y-5">
|
|
||||||
{/* 代理资源分布 */}
|
|
||||||
<div className="bg-white border border-gray-200 rounded-md">
|
|
||||||
<div className="p-5 border-b border-gray-200">
|
|
||||||
<h2 className="font-bold text-gray-800">资源分布</h2>
|
|
||||||
</div>
|
|
||||||
<div className="h-64 bg-white p-5 flex items-center justify-center text-gray-400">
|
|
||||||
IP地区分布饼图
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-2 gap-3 p-5 border-t border-gray-200">
|
|
||||||
<div className="flex justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
|
|
||||||
<span className="text-xs text-gray-600">中国</span>
|
|
||||||
<span className="text-xs font-medium">42%</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
|
|
||||||
<span className="text-xs text-gray-600">美国</span>
|
|
||||||
<span className="text-xs font-medium">28%</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
|
|
||||||
<span className="text-xs text-gray-600">欧洲</span>
|
|
||||||
<span className="text-xs font-medium">16%</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
|
|
||||||
<span className="text-xs text-gray-600">其他</span>
|
|
||||||
<span className="text-xs font-medium">14%</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 系统告警 */}
|
|
||||||
<div className="bg-white border border-gray-200 rounded-md">
|
|
||||||
<div className="p-5 border-b border-gray-200">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<h2 className="font-bold text-gray-800">告警通知</h2>
|
|
||||||
<span className="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">
|
|
||||||
3 个新告警
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="p-3 space-y-3">
|
|
||||||
<AlertItem
|
|
||||||
title="IP不足告警"
|
|
||||||
severity="high"
|
|
||||||
time="10分钟前"
|
|
||||||
message="特定地区(美国加州)代理IP资源不足，影响用户请求。"
|
|
||||||
/>
|
|
||||||
<AlertItem
|
|
||||||
title="响应延迟"
|
|
||||||
severity="medium"
|
|
||||||
time="30分钟前"
|
|
||||||
message="欧洲区域代理响应时间超过阈值(1.5s)，请检查网络状况。"
|
|
||||||
/>
|
|
||||||
<AlertItem
|
|
||||||
title="异常请求"
|
|
||||||
severity="low"
|
|
||||||
time="2小时前"
|
|
||||||
message="检测到异常请求模式，可能存在爬虫攻击行为。"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="p-4 border-t border-gray-200">
|
|
||||||
<button className="w-full py-2 bg-gray-100 text-gray-600 border border-gray-200 rounded-md text-sm hover:bg-gray-200 transition-colors">
|
|
||||||
查看全部告警
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 系统状态 */}
|
{/* 点击自定义时显示 */}
|
||||||
<div className="bg-white border border-gray-200 rounded-md">
|
{showCustomPicker && (
|
||||||
<div className="p-5 border-b border-gray-200">
|
<div className="flex gap-2 items-center p-1 rounded-md">
|
||||||
<div className="flex justify-between items-center">
|
<input
|
||||||
<h2 className="font-bold text-gray-800">系统状态</h2>
|
type="date"
|
||||||
<span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full font-medium">
|
className="px-2 py-1 border rounded text-sm bg-background"
|
||||||
运行正常
|
value={startDate}
|
||||||
</span>
|
onChange={(e) => setStartDate(e.target.value)}
|
||||||
</div>
|
/>
|
||||||
</div>
|
<span className="text-muted-foreground">~</span>
|
||||||
<div className="p-3 space-y-3">
|
<input
|
||||||
<StatusBar title="代理服务器负载" value={28} status="normal" />
|
type="date"
|
||||||
<StatusBar title="带宽使用率" value={65} status="normal" />
|
className="px-2 py-1 border rounded text-sm bg-background"
|
||||||
<StatusBar title="存储空间" value={82} status="warning" />
|
value={endDate}
|
||||||
<StatusBar title="API请求队列" value={45} status="normal" />
|
onChange={(e) => setEndDate(e.target.value)}
|
||||||
</div>
|
/>
|
||||||
<div className="p-4 border-t border-gray-200">
|
<button
|
||||||
<Link
|
onClick={handleDateConfirm}
|
||||||
href="/system/status"
|
disabled={!startDate || !endDate}
|
||||||
className="block w-full py-2 text-center bg-gray-100 text-gray-600 border border-gray-200 rounded-md text-sm hover:bg-gray-200 transition-colors"
|
className="px-3 py-1 bg-primary text-primary-foreground rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
>
|
>
|
||||||
查看详细状态
|
确定
|
||||||
</Link>
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleCancel}
|
||||||
|
className="px-3 py-1 border rounded text-sm hover:bg-accent"
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 图表区域 */}
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||||
|
{/* 每日活跃代理 */}
|
||||||
|
<div className="bg-card rounded-lg border p-4">
|
||||||
|
<h3 className="font-semibold text-sm mb-4">每日活跃代理</h3>
|
||||||
|
<SimpleLineChart
|
||||||
|
data={chartData.proxyData}
|
||||||
|
dataKey="value"
|
||||||
|
xAxisKey="date"
|
||||||
|
stroke="#3b82f6"
|
||||||
|
height={250}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 每日交易额 */}
|
||||||
|
<div className="bg-card rounded-lg border p-4">
|
||||||
|
<h3 className="font-semibold text-sm mb-4">每日交易额</h3>
|
||||||
|
<SimpleBarChart
|
||||||
|
data={chartData.tradeData}
|
||||||
|
dataKey="value"
|
||||||
|
xAxisKey="date"
|
||||||
|
fill="#f59e0b"
|
||||||
|
height={250}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 每日新增客户 */}
|
||||||
|
<div className="bg-card rounded-lg border p-4">
|
||||||
|
<h3 className="font-semibold text-sm mb-4">每日新增客户</h3>
|
||||||
|
<SimpleLineChart
|
||||||
|
data={chartData.customerData}
|
||||||
|
dataKey="value"
|
||||||
|
xAxisKey="date"
|
||||||
|
stroke="#10b981"
|
||||||
|
height={250}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 每日提取量 */}
|
||||||
|
<div className="bg-card rounded-lg border p-4">
|
||||||
|
<h3 className="font-semibold text-sm mb-4">每日提取量</h3>
|
||||||
|
<SimpleBarChart
|
||||||
|
data={chartData.extractData}
|
||||||
|
dataKey="value"
|
||||||
|
xAxisKey="date"
|
||||||
|
fill="#ef4444"
|
||||||
|
height={250}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/*套餐统计 */}
|
||||||
|
<div className="lg:col-span-1 space-y-4">
|
||||||
|
<div className="bg-card rounded-lg border">
|
||||||
|
<div className="p-5 border-b">
|
||||||
|
<h2 className="font-semibold">套餐统计</h2>
|
||||||
|
</div>
|
||||||
|
<div className="p-5">
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<ResourceItem
|
||||||
|
label="长效套餐"
|
||||||
|
active="--"
|
||||||
|
total="--"
|
||||||
|
color="bg-blue-500"
|
||||||
|
/>
|
||||||
|
<ResourceItem
|
||||||
|
label="短效套餐"
|
||||||
|
active="--"
|
||||||
|
total="--"
|
||||||
|
color="bg-emerald-500"
|
||||||
|
/>
|
||||||
|
<div className="pt-3 border-t flex justify-between text-sm">
|
||||||
|
<span className="text-muted-foreground">总可用IP</span>
|
||||||
|
<span className="font-semibold">--</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* 最近活跃用户 */}
|
||||||
|
<div className="bg-card rounded-lg border">
|
||||||
|
<div className="p-5 border-b">
|
||||||
|
<h2 className="font-semibold">最近活跃用户</h2>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="p-4">
|
||||||
|
<SimpleHorizontalBarChart
|
||||||
|
data={chartData.userData}
|
||||||
|
dataKey="activity"
|
||||||
|
labelKey="name"
|
||||||
|
fill="#6366f1"
|
||||||
|
width={300}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Page>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 数据卡片组件 - 显示关键指标
|
function StatCard({
|
||||||
function DataCard({
|
|
||||||
title,
|
title,
|
||||||
value,
|
value,
|
||||||
change,
|
change,
|
||||||
isIncrease,
|
trend,
|
||||||
icon,
|
icon: Icon,
|
||||||
|
iconColor,
|
||||||
|
iconBg,
|
||||||
}: {
|
}: {
|
||||||
title: string
|
title: string
|
||||||
value: string
|
value: string
|
||||||
change: string
|
change: string
|
||||||
isIncrease: boolean
|
trend: "up" | "down"
|
||||||
icon: React.ReactNode
|
icon: React.ComponentType<{ className?: string }>
|
||||||
|
iconColor: string
|
||||||
|
iconBg: string
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="bg-white border border-gray-200 rounded-md p-5">
|
<div className="bg-card rounded-lg border p-4">
|
||||||
<div className="flex justify-between items-center">
|
<div className="flex items-start justify-between">
|
||||||
<div>
|
<div className="flex-1 min-w-0">
|
||||||
<h3 className="text-sm text-gray-500">{title}</h3>
|
<p className="text-xs text-muted-foreground truncate">{title}</p>
|
||||||
<p className="text-xl font-bold mt-1 text-gray-800">{value}</p>
|
<p className="text-xl font-bold mt-1 truncate">{value}</p>
|
||||||
<div className="flex items-center mt-2">
|
<div className="flex items-center gap-1 mt-1.5">
|
||||||
|
{trend === "up" ? (
|
||||||
|
<ArrowUpRight className="h-3 w-3 text-green-600 shrink-0" />
|
||||||
|
) : (
|
||||||
|
<ArrowDownRight className="h-3 w-3 text-red-600 shrink-0" />
|
||||||
|
)}
|
||||||
<span
|
<span
|
||||||
className={`text-xs font-medium ${isIncrease ? "text-green-600" : "text-red-600"}`}
|
className={`text-xs font-medium ${trend === "up" ? "text-green-600" : "text-red-600"}`}
|
||||||
>
|
>
|
||||||
{change}
|
{change}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-gray-400 ml-1">相比上周期</span>
|
<span className="text-xs text-muted-foreground">较昨日</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div className={`p-2 rounded-md border shrink-0 ${iconBg}`}>
|
||||||
className={`p-3 rounded-md ${isIncrease ? "bg-blue-50 text-blue-600" : "bg-orange-50 text-orange-500"} border ${isIncrease ? "border-blue-100" : "border-orange-100"}`}
|
<Icon className={`h-5 w-5 ${iconColor}`} />
|
||||||
>
|
|
||||||
{icon}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 代理IP内容行组件
|
function ResourceItem({
|
||||||
function ContentRow({
|
label,
|
||||||
ip,
|
active,
|
||||||
location,
|
total,
|
||||||
status,
|
color,
|
||||||
requests,
|
|
||||||
successRate,
|
|
||||||
}: {
|
}: {
|
||||||
ip: string
|
label: string
|
||||||
location: string
|
active: string
|
||||||
status: "active" | "warning" | "error"
|
total: string
|
||||||
requests: number
|
color: string
|
||||||
successRate: string
|
|
||||||
}) {
|
}) {
|
||||||
const statusConfig = {
|
|
||||||
active: {
|
|
||||||
color: "bg-green-100 text-green-800 border-green-200",
|
|
||||||
label: "在线",
|
|
||||||
},
|
|
||||||
warning: {
|
|
||||||
color: "bg-yellow-100 text-yellow-800 border-yellow-200",
|
|
||||||
label: "不稳定",
|
|
||||||
},
|
|
||||||
error: { color: "bg-red-100 text-red-800 border-red-200", label: "离线" },
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr className="hover:bg-gray-50">
|
<div>
|
||||||
<td className="px-5 py-4">
|
<div className="flex justify-between text-sm mb-1.5">
|
||||||
<div className="font-mono text-sm">{ip}</div>
|
<span className="text-muted-foreground">{label}</span>
|
||||||
</td>
|
<span className="font-medium">
|
||||||
<td className="px-5 py-4">
|
{active} / {total}
|
||||||
<div className="text-sm text-gray-700">{location}</div>
|
|
||||||
</td>
|
|
||||||
<td className="px-5 py-4">
|
|
||||||
<span
|
|
||||||
className={`px-2 py-1 text-xs rounded-md ${statusConfig[status].color} border`}
|
|
||||||
>
|
|
||||||
{statusConfig[status].label}
|
|
||||||
</span>
|
</span>
|
||||||
</td>
|
|
||||||
<td className="px-5 py-4 text-sm text-gray-700">
|
|
||||||
{requests.toLocaleString()}
|
|
||||||
</td>
|
|
||||||
<td className="px-5 py-4 text-sm text-gray-700">{successRate}</td>
|
|
||||||
<td className="px-5 py-4">
|
|
||||||
<div className="flex space-x-2">
|
|
||||||
<button className="p-1 border border-gray-200 rounded-md hover:bg-gray-50">
|
|
||||||
<svg
|
|
||||||
className="h-4 w-4 text-gray-500"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button className="p-1 border border-gray-200 rounded-md hover:bg-gray-50">
|
|
||||||
<svg
|
|
||||||
className="h-4 w-4 text-gray-500"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button className="p-1 border border-red-200 rounded-md hover:bg-red-50">
|
|
||||||
<svg
|
|
||||||
className="h-4 w-4 text-red-500"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M6 18L18 6M6 6l12 12"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 告警通知组件
|
|
||||||
function AlertItem({
|
|
||||||
title,
|
|
||||||
severity,
|
|
||||||
time,
|
|
||||||
message,
|
|
||||||
}: {
|
|
||||||
title: string
|
|
||||||
severity: "high" | "medium" | "low"
|
|
||||||
time: string
|
|
||||||
message: string
|
|
||||||
}) {
|
|
||||||
const severityConfig = {
|
|
||||||
high: { color: "bg-red-50 border-red-200", dot: "bg-red-500" },
|
|
||||||
medium: { color: "bg-yellow-50 border-yellow-200", dot: "bg-yellow-500" },
|
|
||||||
low: { color: "bg-blue-50 border-blue-200", dot: "bg-blue-500" },
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`p-3 rounded-md ${severityConfig[severity].color} border`}>
|
|
||||||
<div className="flex justify-between items-start">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<span
|
|
||||||
className={`h-2 w-2 rounded-full ${severityConfig[severity].dot} mr-2`}
|
|
||||||
></span>
|
|
||||||
<span className="font-medium text-gray-800 text-sm">{title}</span>
|
|
||||||
</div>
|
|
||||||
<span className="text-xs text-gray-500">{time}</span>
|
|
||||||
</div>
|
|
||||||
<p className="mt-2 text-xs text-gray-600">{message}</p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 系统状态条组件
|
|
||||||
function StatusBar({
|
|
||||||
title,
|
|
||||||
value,
|
|
||||||
status,
|
|
||||||
}: {
|
|
||||||
title: string
|
|
||||||
value: number
|
|
||||||
status: "normal" | "warning" | "error"
|
|
||||||
}) {
|
|
||||||
const statusConfig = {
|
|
||||||
normal: { color: "bg-green-500", bgColor: "bg-green-100" },
|
|
||||||
warning: { color: "bg-yellow-500", bgColor: "bg-yellow-100" },
|
|
||||||
error: { color: "bg-red-500", bgColor: "bg-red-100" },
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-3 border border-gray-200 rounded-md">
|
|
||||||
<div className="flex justify-between mb-2">
|
|
||||||
<span className="text-sm text-gray-700">{title}</span>
|
|
||||||
<span className="text-sm font-medium">{value}%</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="w-full h-2 bg-muted rounded-full overflow-hidden">
|
||||||
<div
|
<div
|
||||||
className={`w-full h-2 ${statusConfig[status].bgColor} rounded-full`}
|
className={`h-full ${color} rounded-full transition-all`}
|
||||||
>
|
style={{ width: "0%" }}
|
||||||
<div
|
/>
|
||||||
className={`h-2 ${statusConfig[status].color} rounded-full`}
|
|
||||||
style={{ width: `${value}%` }}
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -164,7 +164,7 @@ const menuSections: { title: string; items: NavItemProps[] }[] = [
|
|||||||
title: "概览",
|
title: "概览",
|
||||||
items: [
|
items: [
|
||||||
{ href: "/", icon: Home, label: "首页" },
|
{ href: "/", icon: Home, label: "首页" },
|
||||||
{ href: "/statistics", icon: BarChart3, label: "数据统计" },
|
// { href: "/statistics", icon: BarChart3, label: "数据统计" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -238,13 +238,13 @@ export default function BalancePage() {
|
|||||||
header: "创建时间",
|
header: "创建时间",
|
||||||
accessorKey: "created_at",
|
accessorKey: "created_at",
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
const createdAt = row.original.created_at;
|
const createdAt = row.original.created_at
|
||||||
if (!createdAt) return <span>-</span>;
|
if (!createdAt) return <span>-</span>
|
||||||
|
|
||||||
const date = new Date(createdAt);
|
const date = new Date(createdAt)
|
||||||
if (isNaN(date.getTime())) return <span>-</span>;
|
if (isNaN(date.getTime())) return <span>-</span>
|
||||||
|
|
||||||
return format(date, "yyyy-MM-dd HH:mm:ss");
|
return format(date, "yyyy-MM-dd HH:mm:ss")
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
|
|||||||
@@ -25,42 +25,47 @@ import {
|
|||||||
SelectValue,
|
SelectValue,
|
||||||
} from "@/components/ui/select"
|
} from "@/components/ui/select"
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z
|
||||||
|
.object({
|
||||||
name: z.string().min(1, "请输入优惠券名称"),
|
name: z.string().min(1, "请输入优惠券名称"),
|
||||||
amount: z.string()
|
amount: z
|
||||||
|
.string()
|
||||||
.min(1, "请输入优惠券金额")
|
.min(1, "请输入优惠券金额")
|
||||||
.regex(/^\d+(\.\d+)?$/, "请输入有效的金额数字")
|
.regex(/^\d+(\.\d+)?$/, "请输入有效的金额数字")
|
||||||
.refine(val => Number(val) > 0, "优惠券金额必须大于0"),
|
.refine(val => Number(val) > 0, "优惠券金额必须大于0"),
|
||||||
count: z.string()
|
count: z
|
||||||
|
.string()
|
||||||
.min(1, "请输入优惠券数量")
|
.min(1, "请输入优惠券数量")
|
||||||
.regex(/^\d+$/, "请输入正整数")
|
.regex(/^\d+$/, "请输入正整数")
|
||||||
.refine(val => Number(val) >= 1, "优惠券数量至少为1"),
|
.refine(val => Number(val) >= 1, "优惠券数量至少为1"),
|
||||||
min_amount: z.string()
|
min_amount: z
|
||||||
|
.string()
|
||||||
.min(1, "请输入最低消费金额")
|
.min(1, "请输入最低消费金额")
|
||||||
.regex(/^\d+(\.\d+)?$/, "请输入有效的金额数字")
|
.regex(/^\d+(\.\d+)?$/, "请输入有效的金额数字")
|
||||||
.refine(val => Number(val) >= 0, "最低消费金额不能为负数"),
|
.refine(val => Number(val) >= 0, "最低消费金额不能为负数"),
|
||||||
expire_at: z.string().optional(),
|
expire_at: z.string().optional(),
|
||||||
expire_type: z.string().min(1, "请选择过期类型"),
|
expire_type: z.string().min(1, "请选择过期类型"),
|
||||||
expire_in: z.string().optional(),
|
expire_in: z.string().optional(),
|
||||||
status:z.string().optional()
|
status: z.string().optional(),
|
||||||
}).superRefine((data, ctx) => {
|
})
|
||||||
const expireType = Number(data.expire_type);
|
.superRefine((data, ctx) => {
|
||||||
if (!data.expire_type) return;
|
const expireType = Number(data.expire_type)
|
||||||
|
if (!data.expire_type) return
|
||||||
if (expireType === 1 && !data.expire_at) {
|
if (expireType === 1 && !data.expire_at) {
|
||||||
ctx.addIssue({
|
ctx.addIssue({
|
||||||
code: z.ZodIssueCode.custom,
|
code: z.ZodIssueCode.custom,
|
||||||
message: "请选择过期时间",
|
message: "请选择过期时间",
|
||||||
path: ["expire_at"]
|
path: ["expire_at"],
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
if (expireType === 2 && !data.expire_in) {
|
if (expireType === 2 && !data.expire_in) {
|
||||||
ctx.addIssue({
|
ctx.addIssue({
|
||||||
code: z.ZodIssueCode.custom,
|
code: z.ZodIssueCode.custom,
|
||||||
message: "请输入过期时长天数",
|
message: "请输入过期时长天数",
|
||||||
path: ["expire_in"]
|
path: ["expire_in"],
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
export function CreateDiscount(props: { onSuccess?: () => void }) {
|
export function CreateDiscount(props: { onSuccess?: () => void }) {
|
||||||
const [open, setOpen] = useState(false)
|
const [open, setOpen] = useState(false)
|
||||||
@@ -90,7 +95,7 @@ export function CreateDiscount(props: { onSuccess?: () => void }) {
|
|||||||
name: data.name,
|
name: data.name,
|
||||||
amount: Number(data.amount),
|
amount: Number(data.amount),
|
||||||
count: Number(data?.count),
|
count: Number(data?.count),
|
||||||
status:Number(data.status),
|
status: Number(data.status),
|
||||||
min_amount: Number(data?.min_amount),
|
min_amount: Number(data?.min_amount),
|
||||||
expire_at: data?.expire_at ? new Date(data.expire_at) : undefined,
|
expire_at: data?.expire_at ? new Date(data.expire_at) : undefined,
|
||||||
expire_in: expireType === 2 ? Number(data.expire_in) : undefined,
|
expire_in: expireType === 2 ? Number(data.expire_in) : undefined,
|
||||||
@@ -258,7 +263,9 @@ export function CreateDiscount(props: { onSuccess?: () => void }) {
|
|||||||
name="expire_in"
|
name="expire_in"
|
||||||
render={({ field, fieldState }) => (
|
render={({ field, fieldState }) => (
|
||||||
<div className="flex items-start gap-4">
|
<div className="flex items-start gap-4">
|
||||||
<FieldLabel className="w-28 pt-2">过期时长（天）:</FieldLabel>
|
<FieldLabel className="w-28 pt-2">
|
||||||
|
过期时长（天）:
|
||||||
|
</FieldLabel>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<Input
|
<Input
|
||||||
type="number"
|
type="number"
|
||||||
|
|||||||
@@ -25,42 +25,47 @@ import {
|
|||||||
} from "@/components/ui/select"
|
} from "@/components/ui/select"
|
||||||
import type { Coupon } from "@/models/coupon"
|
import type { Coupon } from "@/models/coupon"
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z
|
||||||
|
.object({
|
||||||
name: z.string().min(1, "请输入优惠券名称"),
|
name: z.string().min(1, "请输入优惠券名称"),
|
||||||
amount: z.string()
|
amount: z
|
||||||
|
.string()
|
||||||
.min(1, "请输入优惠券金额")
|
.min(1, "请输入优惠券金额")
|
||||||
.regex(/^\d+(\.\d+)?$/, "请输入有效的金额数字")
|
.regex(/^\d+(\.\d+)?$/, "请输入有效的金额数字")
|
||||||
.refine(val => Number(val) > 0, "优惠券金额必须大于0"),
|
.refine(val => Number(val) > 0, "优惠券金额必须大于0"),
|
||||||
count: z.string()
|
count: z
|
||||||
|
.string()
|
||||||
.min(1, "请输入优惠券数量")
|
.min(1, "请输入优惠券数量")
|
||||||
.regex(/^\d+$/, "请输入正整数")
|
.regex(/^\d+$/, "请输入正整数")
|
||||||
.refine(val => Number(val) >= 1, "优惠券数量至少为1"),
|
.refine(val => Number(val) >= 1, "优惠券数量至少为1"),
|
||||||
min_amount: z.string()
|
min_amount: z
|
||||||
|
.string()
|
||||||
.min(1, "请输入最低消费金额")
|
.min(1, "请输入最低消费金额")
|
||||||
.regex(/^\d+(\.\d+)?$/, "请输入有效的金额数字")
|
.regex(/^\d+(\.\d+)?$/, "请输入有效的金额数字")
|
||||||
.refine(val => Number(val) >= 0, "最低消费金额不能为负数"),
|
.refine(val => Number(val) >= 0, "最低消费金额不能为负数"),
|
||||||
expire_at: z.string().optional(),
|
expire_at: z.string().optional(),
|
||||||
expire_type: z.string().min(1, "请选择过期类型"),
|
expire_type: z.string().min(1, "请选择过期类型"),
|
||||||
expire_in: z.string().optional(),
|
expire_in: z.string().optional(),
|
||||||
status:z.string().optional()
|
status: z.string().optional(),
|
||||||
}).superRefine((data, ctx) => {
|
})
|
||||||
const expireType = Number(data.expire_type);
|
.superRefine((data, ctx) => {
|
||||||
if (!data.expire_type) return;
|
const expireType = Number(data.expire_type)
|
||||||
|
if (!data.expire_type) return
|
||||||
if (expireType === 1 && !data.expire_at) {
|
if (expireType === 1 && !data.expire_at) {
|
||||||
ctx.addIssue({
|
ctx.addIssue({
|
||||||
code: z.ZodIssueCode.custom,
|
code: z.ZodIssueCode.custom,
|
||||||
message: "请选择过期时间",
|
message: "请选择过期时间",
|
||||||
path: ["expire_at"]
|
path: ["expire_at"],
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
if (expireType === 2 && !data.expire_in) {
|
if (expireType === 2 && !data.expire_in) {
|
||||||
ctx.addIssue({
|
ctx.addIssue({
|
||||||
code: z.ZodIssueCode.custom,
|
code: z.ZodIssueCode.custom,
|
||||||
message: "请输入过期时长天数",
|
message: "请输入过期时长天数",
|
||||||
path: ["expire_in"]
|
path: ["expire_in"],
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
export function UpdateCoupon(props: {
|
export function UpdateCoupon(props: {
|
||||||
coupon: Coupon
|
coupon: Coupon
|
||||||
@@ -119,7 +124,7 @@ export function UpdateCoupon(props: {
|
|||||||
reset({
|
reset({
|
||||||
name: props.coupon.name,
|
name: props.coupon.name,
|
||||||
count: String(props.coupon.count),
|
count: String(props.coupon.count),
|
||||||
amount: String(props.coupon.amount ),
|
amount: String(props.coupon.amount),
|
||||||
min_amount: String(props.coupon.min_amount),
|
min_amount: String(props.coupon.min_amount),
|
||||||
expire_at: props.coupon.expire_at
|
expire_at: props.coupon.expire_at
|
||||||
? new Date(props.coupon.expire_at).toISOString().split("T")[0]
|
? new Date(props.coupon.expire_at).toISOString().split("T")[0]
|
||||||
@@ -271,7 +276,9 @@ export function UpdateCoupon(props: {
|
|||||||
name="expire_in"
|
name="expire_in"
|
||||||
render={({ field, fieldState }) => (
|
render={({ field, fieldState }) => (
|
||||||
<div className="flex items-start gap-4">
|
<div className="flex items-start gap-4">
|
||||||
<FieldLabel className="w-28 pt-2">过期时长（天）:</FieldLabel>
|
<FieldLabel className="w-28 pt-2">
|
||||||
|
过期时长（天）:
|
||||||
|
</FieldLabel>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<Input
|
<Input
|
||||||
type="number"
|
type="number"
|
||||||
|
|||||||
175
src/components/charts/SimpleBarChart.tsx
Normal file
175
src/components/charts/SimpleBarChart.tsx
Normal file
@@ -0,0 +1,175 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useMemo, useState } from "react"
|
||||||
|
|
||||||
|
interface SimpleBarChartProps {
|
||||||
|
data: Record<string, string | number>[]
|
||||||
|
dataKey: string
|
||||||
|
xAxisKey: string
|
||||||
|
fill?: string
|
||||||
|
height?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SimpleBarChart({
|
||||||
|
data,
|
||||||
|
dataKey,
|
||||||
|
xAxisKey,
|
||||||
|
fill = "#f59e0b",
|
||||||
|
height = 250,
|
||||||
|
}: SimpleBarChartProps) {
|
||||||
|
const [tooltip, setTooltip] = useState<{
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
label: string
|
||||||
|
value: number
|
||||||
|
} | null>(null)
|
||||||
|
|
||||||
|
const padding = { top: 20, right: 20, bottom: 40, left: 50 }
|
||||||
|
const chartWidth = 600
|
||||||
|
const chartHeight = height
|
||||||
|
const innerWidth = chartWidth - padding.left - padding.right
|
||||||
|
const innerHeight = chartHeight - padding.top - padding.bottom
|
||||||
|
|
||||||
|
const { bars, xLabels, yLabels } = useMemo(() => {
|
||||||
|
if (data.length === 0) return { bars: [], xLabels: [], yLabels: [] }
|
||||||
|
|
||||||
|
const values = data.map(d => Number(d[dataKey]) || 0)
|
||||||
|
const maxVal = Math.max(...values, 1)
|
||||||
|
const yMax = Math.ceil(maxVal * 1.2)
|
||||||
|
|
||||||
|
const barCount = data.length
|
||||||
|
const barGap = barCount > 1 ? (innerWidth * 0.1) / (barCount - 1) : 0
|
||||||
|
const totalGap = barGap * (barCount - 1)
|
||||||
|
const barWidth = Math.min((innerWidth - totalGap) / barCount, 50)
|
||||||
|
|
||||||
|
const startX =
|
||||||
|
padding.left + (innerWidth - (barWidth * barCount + totalGap)) / 2
|
||||||
|
|
||||||
|
const brs = data.map((d, i) => {
|
||||||
|
const val = Number(d[dataKey]) || 0
|
||||||
|
const barHeight = (val / yMax) * innerHeight
|
||||||
|
return {
|
||||||
|
x: startX + i * (barWidth + barGap),
|
||||||
|
y: padding.top + innerHeight - barHeight,
|
||||||
|
width: barWidth,
|
||||||
|
height: barHeight,
|
||||||
|
label: String(d[xAxisKey] ?? ""),
|
||||||
|
value: val,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const xLbls = brs.map(b => ({
|
||||||
|
x: b.x + b.width / 2,
|
||||||
|
label: b.label,
|
||||||
|
}))
|
||||||
|
|
||||||
|
const yTickCount = 5
|
||||||
|
const yLbls = Array.from({ length: yTickCount + 1 }, (_, i) => {
|
||||||
|
const val = Math.round((yMax / yTickCount) * i)
|
||||||
|
return {
|
||||||
|
y: padding.top + innerHeight - (val / yMax) * innerHeight,
|
||||||
|
label: String(val),
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return { bars: brs, xLabels: xLbls, yLabels: yLbls }
|
||||||
|
}, [data, dataKey, xAxisKey, innerWidth, innerHeight])
|
||||||
|
|
||||||
|
if (data.length === 0) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="flex items-center justify-center text-muted-foreground text-sm"
|
||||||
|
style={{ height }}
|
||||||
|
>
|
||||||
|
暂无数据
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative" style={{ height }}>
|
||||||
|
<svg
|
||||||
|
viewBox={`0 0 ${chartWidth} ${chartHeight}`}
|
||||||
|
className="w-full h-full"
|
||||||
|
preserveAspectRatio="xMidYMid meet"
|
||||||
|
>
|
||||||
|
{yLabels.map(yl => (
|
||||||
|
<g key={yl.label}>
|
||||||
|
<line
|
||||||
|
x1={padding.left}
|
||||||
|
y1={yl.y}
|
||||||
|
x2={padding.left + innerWidth}
|
||||||
|
y2={yl.y}
|
||||||
|
stroke="hsl(var(--border))"
|
||||||
|
strokeDasharray="4 4"
|
||||||
|
strokeWidth={0.5}
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
x={padding.left - 8}
|
||||||
|
y={yl.y + 4}
|
||||||
|
textAnchor="end"
|
||||||
|
className="fill-muted-foreground"
|
||||||
|
fontSize={11}
|
||||||
|
>
|
||||||
|
{yl.label}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{bars.map((bar, i) => (
|
||||||
|
<rect
|
||||||
|
key={i}
|
||||||
|
x={bar.x}
|
||||||
|
y={bar.y}
|
||||||
|
width={bar.width}
|
||||||
|
height={bar.height}
|
||||||
|
rx={3}
|
||||||
|
fill={fill}
|
||||||
|
role="button"
|
||||||
|
aria-label={`${bar.label}: ${bar.value}`}
|
||||||
|
className="cursor-pointer opacity-90 hover:opacity-100 transition-opacity"
|
||||||
|
onMouseEnter={() =>
|
||||||
|
setTooltip({
|
||||||
|
x: bar.x + bar.width / 2,
|
||||||
|
y: bar.y,
|
||||||
|
label: bar.label,
|
||||||
|
value: bar.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onMouseLeave={() => setTooltip(null)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{xLabels.map((xl, i) =>
|
||||||
|
i % Math.ceil(xLabels.length / 10) === 0 ||
|
||||||
|
i === xLabels.length - 1 ? (
|
||||||
|
<text
|
||||||
|
key={i}
|
||||||
|
x={xl.x}
|
||||||
|
y={padding.top + innerHeight + 20}
|
||||||
|
textAnchor="middle"
|
||||||
|
className="fill-muted-foreground"
|
||||||
|
fontSize={11}
|
||||||
|
>
|
||||||
|
{xl.label}
|
||||||
|
</text>
|
||||||
|
) : null,
|
||||||
|
)}
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{tooltip && (
|
||||||
|
<div
|
||||||
|
className="absolute pointer-events-none bg-popover border rounded-md px-2 py-1 text-xs shadow-sm z-10"
|
||||||
|
style={{
|
||||||
|
left: `${((tooltip.x / chartWidth) * 100).toFixed(1)}%`,
|
||||||
|
top: tooltip.y - 30,
|
||||||
|
transform: "translate(-50%, -100%)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="text-muted-foreground">{tooltip.label}</div>
|
||||||
|
<div className="font-semibold">{tooltip.value}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
101
src/components/charts/SimpleHorizontalBarChart.tsx
Normal file
101
src/components/charts/SimpleHorizontalBarChart.tsx
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useMemo } from "react"
|
||||||
|
|
||||||
|
interface SimpleHorizontalBarChartProps {
|
||||||
|
data: Record<string, string | number>[]
|
||||||
|
dataKey: string
|
||||||
|
labelKey: string
|
||||||
|
fill?: string
|
||||||
|
width?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SimpleHorizontalBarChart({
|
||||||
|
data,
|
||||||
|
dataKey,
|
||||||
|
labelKey,
|
||||||
|
fill = "#6366f1",
|
||||||
|
width = 300,
|
||||||
|
}: SimpleHorizontalBarChartProps) {
|
||||||
|
const chartWidth = width
|
||||||
|
const chartHeight = Math.max(data.length * 40 + 20, 120)
|
||||||
|
const padding = { top: 10, right: 10, bottom: 10, left: 80 }
|
||||||
|
const innerWidth = chartWidth - padding.left - padding.right
|
||||||
|
|
||||||
|
const bars = useMemo(() => {
|
||||||
|
if (data.length === 0) return []
|
||||||
|
|
||||||
|
const values = data.map(d => Number(d[dataKey]) || 0)
|
||||||
|
const maxVal = Math.max(...values, 1)
|
||||||
|
|
||||||
|
return data.map((d, i) => {
|
||||||
|
const val = Number(d[dataKey]) || 0
|
||||||
|
const barWidth = (val / maxVal) * innerWidth * 0.9
|
||||||
|
const y =
|
||||||
|
padding.top +
|
||||||
|
(i * (chartHeight - padding.top - padding.bottom)) / data.length
|
||||||
|
return {
|
||||||
|
x: padding.left,
|
||||||
|
y,
|
||||||
|
width: barWidth,
|
||||||
|
height: Math.min(
|
||||||
|
24,
|
||||||
|
(chartHeight - padding.top - padding.bottom) / data.length - 4,
|
||||||
|
),
|
||||||
|
label: String(d[labelKey] ?? ""),
|
||||||
|
value: val,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, [data, dataKey, labelKey, innerWidth, chartHeight])
|
||||||
|
|
||||||
|
if (data.length === 0) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="flex items-center justify-center text-muted-foreground text-sm"
|
||||||
|
style={{ height: 120 }}
|
||||||
|
>
|
||||||
|
暂无数据
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
viewBox={`0 0 ${chartWidth} ${chartHeight}`}
|
||||||
|
className="w-full"
|
||||||
|
preserveAspectRatio="xMidYMid meet"
|
||||||
|
style={{ height: chartHeight }}
|
||||||
|
>
|
||||||
|
{bars.map((bar, i) => (
|
||||||
|
<g key={i}>
|
||||||
|
<text
|
||||||
|
x={padding.left - 8}
|
||||||
|
y={bar.y + bar.height / 2 + 4}
|
||||||
|
textAnchor="end"
|
||||||
|
className="fill-muted-foreground"
|
||||||
|
fontSize={12}
|
||||||
|
>
|
||||||
|
{bar.label.length > 6 ? `${bar.label.slice(0, 6)}...` : bar.label}
|
||||||
|
</text>
|
||||||
|
<rect
|
||||||
|
x={bar.x}
|
||||||
|
y={bar.y}
|
||||||
|
width={bar.width}
|
||||||
|
height={bar.height}
|
||||||
|
rx={4}
|
||||||
|
fill={fill}
|
||||||
|
opacity={0.8}
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
x={bar.x + bar.width + 6}
|
||||||
|
y={bar.y + bar.height / 2 + 4}
|
||||||
|
className="fill-muted-foreground"
|
||||||
|
fontSize={11}
|
||||||
|
>
|
||||||
|
{bar.value}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
))}
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
193
src/components/charts/SimpleLineChart.tsx
Normal file
193
src/components/charts/SimpleLineChart.tsx
Normal file
@@ -0,0 +1,193 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useMemo, useState } from "react"
|
||||||
|
|
||||||
|
interface SimpleLineChartProps {
|
||||||
|
data: Record<string, string | number>[]
|
||||||
|
dataKey: string
|
||||||
|
xAxisKey: string
|
||||||
|
stroke?: string
|
||||||
|
height?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SimpleLineChart({
|
||||||
|
data,
|
||||||
|
dataKey,
|
||||||
|
xAxisKey,
|
||||||
|
stroke = "#3b82f6",
|
||||||
|
height = 250,
|
||||||
|
}: SimpleLineChartProps) {
|
||||||
|
const [tooltip, setTooltip] = useState<{
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
label: string
|
||||||
|
value: number
|
||||||
|
} | null>(null)
|
||||||
|
|
||||||
|
const padding = { top: 20, right: 20, bottom: 40, left: 50 }
|
||||||
|
const chartWidth = 600
|
||||||
|
const chartHeight = height
|
||||||
|
const innerWidth = chartWidth - padding.left - padding.right
|
||||||
|
const innerHeight = chartHeight - padding.top - padding.bottom
|
||||||
|
|
||||||
|
const { points, xLabels, yLabels } = useMemo(() => {
|
||||||
|
if (data.length === 0) return { points: [], xLabels: [], yLabels: [] }
|
||||||
|
|
||||||
|
const values = data.map(d => Number(d[dataKey]) || 0)
|
||||||
|
const maxVal = Math.max(...values, 1)
|
||||||
|
const yMax = Math.ceil(maxVal * 1.2)
|
||||||
|
|
||||||
|
const step = innerWidth / Math.max(data.length - 1, 1)
|
||||||
|
|
||||||
|
const pts = data.map((d, i) => ({
|
||||||
|
x: padding.left + i * step,
|
||||||
|
y: padding.top + innerHeight - (Number(d[dataKey]) / yMax) * innerHeight,
|
||||||
|
}))
|
||||||
|
|
||||||
|
const xLbls = data.map((d, i) => ({
|
||||||
|
x: padding.left + i * step,
|
||||||
|
label: String(d[xAxisKey] ?? ""),
|
||||||
|
}))
|
||||||
|
|
||||||
|
const yTickCount = 5
|
||||||
|
const yLbls = Array.from({ length: yTickCount + 1 }, (_, i) => {
|
||||||
|
const val = Math.round((yMax / yTickCount) * i)
|
||||||
|
return {
|
||||||
|
y: padding.top + innerHeight - (val / yMax) * innerHeight,
|
||||||
|
label: String(val),
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return { points: pts, xLabels: xLbls, yLabels: yLbls }
|
||||||
|
}, [data, dataKey, xAxisKey, innerWidth, innerHeight])
|
||||||
|
|
||||||
|
if (data.length === 0) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="flex items-center justify-center text-muted-foreground text-sm"
|
||||||
|
style={{ height }}
|
||||||
|
>
|
||||||
|
暂无数据
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const linePath = points
|
||||||
|
.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`)
|
||||||
|
.join(" ")
|
||||||
|
const areaPath =
|
||||||
|
points.length > 0
|
||||||
|
? `${linePath} L ${points[points.length - 1].x} ${padding.top + innerHeight} L ${points[0].x} ${padding.top + innerHeight} Z`
|
||||||
|
: ""
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative" style={{ height }}>
|
||||||
|
<svg
|
||||||
|
viewBox={`0 0 ${chartWidth} ${chartHeight}`}
|
||||||
|
className="w-full h-full"
|
||||||
|
preserveAspectRatio="xMidYMid meet"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id={`area-${stroke.replace("#", "")}`}
|
||||||
|
x1="0"
|
||||||
|
y1="0"
|
||||||
|
x2="0"
|
||||||
|
y2="1"
|
||||||
|
>
|
||||||
|
<stop offset="0%" stopColor={stroke} stopOpacity={0.2} />
|
||||||
|
<stop offset="100%" stopColor={stroke} stopOpacity={0} />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
{yLabels.map(yl => (
|
||||||
|
<g key={yl.label}>
|
||||||
|
<line
|
||||||
|
x1={padding.left}
|
||||||
|
y1={yl.y}
|
||||||
|
x2={padding.left + innerWidth}
|
||||||
|
y2={yl.y}
|
||||||
|
stroke="hsl(var(--border))"
|
||||||
|
strokeDasharray="4 4"
|
||||||
|
strokeWidth={0.5}
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
x={padding.left - 8}
|
||||||
|
y={yl.y + 4}
|
||||||
|
textAnchor="end"
|
||||||
|
className="fill-muted-foreground"
|
||||||
|
fontSize={11}
|
||||||
|
>
|
||||||
|
{yl.label}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<path d={areaPath} fill={`url(#area-${stroke.replace("#", "")})`} />
|
||||||
|
|
||||||
|
<path
|
||||||
|
d={linePath}
|
||||||
|
fill="none"
|
||||||
|
stroke={stroke}
|
||||||
|
strokeWidth={2}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{points.map((p, i) => (
|
||||||
|
<circle
|
||||||
|
key={i}
|
||||||
|
cx={p.x}
|
||||||
|
cy={p.y}
|
||||||
|
r={3}
|
||||||
|
fill="#fff"
|
||||||
|
stroke={stroke}
|
||||||
|
strokeWidth={2}
|
||||||
|
role="button"
|
||||||
|
aria-label={`${String(data[i]?.[xAxisKey] ?? "")}: ${Number(data[i]?.[dataKey]) || 0}`}
|
||||||
|
className="cursor-pointer"
|
||||||
|
onMouseEnter={() =>
|
||||||
|
setTooltip({
|
||||||
|
x: p.x,
|
||||||
|
y: p.y,
|
||||||
|
label: String(data[i]?.[xAxisKey] ?? ""),
|
||||||
|
value: Number(data[i]?.[dataKey]) || 0,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onMouseLeave={() => setTooltip(null)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{xLabels.map((xl, i) =>
|
||||||
|
i % Math.ceil(xLabels.length / 7) === 0 ||
|
||||||
|
i === xLabels.length - 1 ? (
|
||||||
|
<text
|
||||||
|
key={i}
|
||||||
|
x={xl.x}
|
||||||
|
y={padding.top + innerHeight + 20}
|
||||||
|
textAnchor="middle"
|
||||||
|
className="fill-muted-foreground"
|
||||||
|
fontSize={11}
|
||||||
|
>
|
||||||
|
{xl.label}
|
||||||
|
</text>
|
||||||
|
) : null,
|
||||||
|
)}
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{tooltip && (
|
||||||
|
<div
|
||||||
|
className="absolute pointer-events-none bg-popover border rounded-md px-2 py-1 text-xs shadow-sm"
|
||||||
|
style={{
|
||||||
|
left: `${((tooltip.x / chartWidth) * 100).toFixed(1)}%`,
|
||||||
|
top: tooltip.y - 30,
|
||||||
|
transform: "translate(-50%, -100%)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="text-muted-foreground">{tooltip.label}</div>
|
||||||
|
<div className="font-semibold">{tooltip.value}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
3
src/components/charts/index.ts
Normal file
3
src/components/charts/index.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export { SimpleBarChart } from "./SimpleBarChart"
|
||||||
|
export { SimpleHorizontalBarChart } from "./SimpleHorizontalBarChart"
|
||||||
|
export { SimpleLineChart } from "./SimpleLineChart"
|
||||||
@@ -10,7 +10,7 @@ type ResourceBase = {
|
|||||||
updated_at: Date
|
updated_at: Date
|
||||||
deleted_at: Date | null
|
deleted_at: Date | null
|
||||||
user: User
|
user: User
|
||||||
checkip:boolean
|
checkip: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
type ResourceShort = {
|
type ResourceShort = {
|
||||||
|
|||||||
Reference in New Issue
Block a user