20 Commits

Author SHA1 Message Date
Eamon
69c8029b8b 网关取消删除添加启用和停用功能 & 产品页套餐添加sort 排序和 count_min 最低购买数量字段 2026-04-20 16:32:21 +08:00
Eamon
2377616a07 发布v1.4.0版本 2026-04-18 18:15:03 +08:00
Eamon
9cb7d597cd 添加网关列表权限 2026-04-18 17:58:40 +08:00
Eamon
e5586f06d1 添加网关列表页面 & 添加单价不能低于最低价格校验 2026-04-18 17:41:27 +08:00
Eamon
13be8f3270 搜索框加空格校验 & 发布v1.3.0版本 2026-04-16 14:28:03 +08:00
c850831915 修复套餐编码顺序问题 2026-04-16 10:43:48 +08:00
aa0ab93ba9 修复创建套餐编码格式问题 & 其他样式问题 2026-04-16 10:43:48 +08:00
Eamon
f7de0fa535 发布v1.2.0版本 2026-04-13 11:53:28 +08:00
Eamon
ea8015924e 操作页面跳转添加返回上一级功能 2026-04-11 17:35:40 +08:00
04426ba36d 表格与页面样式调整 2026-04-11 17:12:16 +08:00
Eamon
4307efae98 更新操作按钮为菜单栏 & 调整页面表格顺序 2026-04-11 17:07:03 +08:00
Eamon
ed95f0520d 新增余额明细页面,修复页面useId不更新的问题 2026-04-11 14:57:45 +08:00
Eamon
790180a847 客户查询添加操作功能 2026-04-09 17:08:59 +08:00
Eamon
cc7e26561d 管理员页面操作列添加权限控制 2026-04-08 16:48:16 +08:00
Eamon
8fcf54ae10 添加客户查询页面包括导航权限控制 & 删除多余代码 2026-04-08 16:48:16 +08:00
Eamon
ff645aaaca 修改客户认领和客户管理页面的查询和操作功能并且包含按钮权限 & 产品管理添加启动/禁用和最低价格字段 2026-04-08 16:48:15 +08:00
f6ae0a9463 开发环境新增权限复制功能 2026-04-08 16:47:05 +08:00
30af977543 套餐编码可视化改造 2026-04-08 15:41:32 +08:00
0789462a8d 表格增加序号列,移除 id 列 2026-04-07 17:06:19 +08:00
edc87c6eea 修复构建问题 2026-04-02 14:46:26 +08:00
64 changed files with 4983 additions and 1974 deletions

View File

@@ -1,11 +1,11 @@
{
"name": "lanhu-admin",
"version": "1.0.2",
"version": "1.5.0",
"private": true,
"scripts": {
"dev": "next dev -H 0.0.0.0 --turbopack",
"dev": "next dev -H 0.0.0.0 -p 3001 --turbopack",
"build": "next build --turbopack",
"lint": "eslint --fix"
"lint": "biome check --write"
},
"dependencies": {
"@hookform/resolvers": "^4.1.3",

View File

@@ -9,8 +9,8 @@ if ($confrim -ne "y") {
exit 0
}
docker build -t 43.226.58.254:53000/lanhu/admin:latest .
docker build -t 43.226.58.254:53000/lanhu/admin:$($args[0]) .
docker build -t repo.lanhuip.com:8554/lanhu/admin:latest .
docker build -t repo.lanhuip.com:8554/lanhu/admin:$($args[0]) .
docker push 43.226.58.254:53000/lanhu/admin:latest
docker push 43.226.58.254:53000/lanhu/admin:$($args[0])
docker push repo.lanhuip.com:8554/lanhu/admin:latest
docker push repo.lanhuip.com:8554/lanhu/admin:$($args[0])

32
src/actions/balance.ts Normal file
View File

@@ -0,0 +1,32 @@
import type { PageRecord } from "@/lib/api"
import type { Balance } from "@/models/balance"
import { callByUser } from "./base"
export async function getPageBalance(params: {
page: number
size: number
user_phone?: string
bill_no?: string
created_at_start?: Date
created_at_end?: Date
}) {
return callByUser<PageRecord<Balance>>(
"/api/admin/balance-activity/page",
params,
)
}
export async function getBalance(params: {
page: number
size: number
user_id: number
user_phone?: string
bill_no?: string
created_at_start?: Date
created_at_end?: Date
}) {
return callByUser<PageRecord<Balance>>(
"/api/admin/balance-activity/page/of-user",
params,
)
}

View File

@@ -16,3 +16,19 @@ export async function getPageBatch(params: {
}) {
return callByUser<PageRecord<Batch>>("/api/admin/batch/page", params)
}
export async function getBatch(params: {
page: number
size: number
user_id: number
user_phone?: string
resource_no?: string
batch_no?: string
prov?: string
city?: string
isp?: string
created_at_start?: Date
created_at_end?: Date
}) {
return callByUser<PageRecord<Batch>>("/api/admin/batch/page/of-user", params)
}

View File

@@ -26,3 +26,19 @@ export async function getSkuList(params: { product_code?: ProductCode }) {
}
return callByUser<ProductSku[]>("/api/admin/product/sku/all", requestParams)
}
export async function getBill(params: {
page: number
size: number
user_id: number
bill_no?: string
user_phone?: string
trade_inner_no?: string
resource_no?: string
sku_code?: string
product_code?: string
created_at_start?: Date
created_at_end?: Date
}) {
return callByUser<PageRecord<Billing>>("/api/admin/bill/page/of-user", params)
}

View File

@@ -16,3 +16,21 @@ export async function getPageChannel(params: {
}) {
return callByUser<PageRecord<Channel>>("/api/admin/channel/page", params)
}
export async function getChannel(params: {
page: number
size: number
user_id: number
batch_no?: string
user_phone?: string
resource_no?: string
proxy_port?: number
proxy_host?: string
node_ip?: string
expired_at_start?: Date
expired_at_end?: Date
}) {
return callByUser<PageRecord<Channel>>(
"/api/admin/channel/page/of-user",
params,
)
}

View File

@@ -1,9 +1,9 @@
import type { PageRecord } from "@/lib/api"
import type { Cust } from "@/models/cust"
import type { User } from "@/models/user"
import { callByUser } from "./base"
export async function getPageCusts(params: { page: number; size: number }) {
return callByUser<PageRecord<Cust>>("/api/admin/user/page", params)
return callByUser<PageRecord<User>>("/api/admin/user/page", params)
}
export async function updateCust(data: {
id: number
@@ -16,7 +16,7 @@ export async function updateCust(data: {
contact_qq?: string
contact_wechat?: string
}) {
return callByUser<PageRecord<Cust>>("/api/admin/user/update", data)
return callByUser<PageRecord<User>>("/api/admin/user/update", data)
}
export async function createCust(data: {
@@ -32,9 +32,22 @@ export async function createCust(data: {
contact_qq?: string
contact_wechat?: string
}) {
return callByUser<PageRecord<Cust>>("/api/admin/user/create", data)
return callByUser<PageRecord<User>>("/api/admin/user/create", data)
}
export async function getBalance(params: { user_id: number; balance: string }) {
return callByUser<PageRecord<Cust>>("/api/admin/user/update/balance", params)
export async function getDeposit(params: { user_id: number; amount: string }) {
return callByUser<PageRecord<User>>(
"/api/admin/user/update/balance-inc",
params,
)
}
export async function getDeduction(params: {
user_id: number
amount: string
}) {
return callByUser<PageRecord<User>>(
"/api/admin/user/update/balance-dec",
params,
)
}

26
src/actions/gateway.ts Normal file
View File

@@ -0,0 +1,26 @@
"use server"
import type { PageRecord } from "@/lib/api"
import type { Gateway } from "@/models/gateway"
import { callByUser } from "./base"
export async function getGatewayPage(params: { page: number; size: number }) {
return callByUser<PageRecord<Gateway>>("/api/admin/proxy/page", params)
}
export async function createGateway(data: {
mac: string
ip: string
host?: string
type: number
status: number
}) {
return callByUser<Gateway>("/api/admin/proxy/create", data)
}
export async function deletegateway(id: number) {
return callByUser<Gateway>("/api/admin/proxy/remove", {
id,
})
}

View File

@@ -26,6 +26,7 @@ export async function createProductSku(data: {
name: string
price: string
discount_id?: number
price_min?: string
}) {
return callByUser<ProductSku>("/api/admin/product/sku/create", {
product_id: data.product_id,
@@ -33,6 +34,7 @@ export async function createProductSku(data: {
name: data.name,
price: data.price,
discount_id: data.discount_id,
price_min: data.price_min,
})
}
@@ -42,6 +44,8 @@ export async function updateProductSku(data: {
name?: string
price?: string
discount_id?: number | null
price_min?: string
count_min?: number | null
}) {
return callByUser<ProductSku>("/api/admin/product/sku/update", {
id: data.id,
@@ -49,6 +53,8 @@ export async function updateProductSku(data: {
name: data.name,
price: data.price,
discount_id: data.discount_id,
price_min: data.price_min,
count_min: data.count_min,
})
}
@@ -65,3 +71,6 @@ export async function batchUpdateProductSkuDiscount(data: {
discount_id: data.discount_id,
})
}
export async function activeProductSku(data: { id: number; status: number }) {
return callByUser<ProductSku>("/api/admin/product/sku/update/status", data)
}

View File

@@ -31,3 +31,39 @@ export async function listResourceShort(params: ResourceListParams) {
export async function updateResource(data: { id: number; active?: boolean }) {
return callByUser<Resources>("/api/admin/resource/update", data)
}
export async function ResourceLong(params: {
page: number
size: number
user_id: number
user_phone?: string
resource_no?: string
active?: boolean
mode?: number
created_at_start?: Date
created_at_end?: Date
expired?: boolean
}) {
return callByUser<PageRecord<Resources>>(
"/api/admin/resource/long/page/of-user",
params,
)
}
export async function ResourceShort(params: {
page: number
size: number
user_id: number
user_phone?: string
resource_no?: string
active?: boolean
mode?: number
created_at_start?: Date
created_at_end?: Date
expired?: boolean
}) {
return callByUser<PageRecord<Resources>>(
"/api/admin/resource/short/page/of-user",
params,
)
}

View File

@@ -15,3 +15,18 @@ export async function getPageTrade(params: {
}) {
return callByUser<PageRecord<Trade>>("/api/admin/trade/page", params)
}
export async function getTrade(params: {
page: number
size: number
user_id: number
user_phone?: string
inner_no?: string
method?: number
platform?: number
status?: number
created_at_start?: Date
created_at_end?: Date
}) {
return callByUser<PageRecord<Trade>>("/api/admin/trade/page/of-user", params)
}

View File

@@ -6,6 +6,10 @@ export async function getPageUsers(params: { page: number; size: number }) {
return callByUser<PageRecord<User>>("/api/admin/user/page", params)
}
export async function getPageUserPage(params: { page: number; size: number }) {
return callByUser<PageRecord<User>>("/api/admin/user/page/not-bind", params)
}
export async function bindAdmin(params: {
id: number
account?: string
@@ -14,11 +18,11 @@ export async function bindAdmin(params: {
enabled?: boolean
assigned?: boolean
}) {
return callByUser("/api/admin/user/bind", {
return callByUser("/api/admin/user/update/bind", {
user_id: params.id,
})
}
export async function getPageUser(params: object) {
export async function getPageUser(params: { phone?: string; name?: string }) {
return callByUser<User>("/api/admin/user/get", params)
}

View File

@@ -1,8 +1,10 @@
"use client"
import { Lock } from "lucide-react"
import { Suspense, useState } from "react"
import { toast } from "sonner"
import { deleteAdmin, getPageAdmin, updateAdmin } from "@/actions/admin"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import {
AlertDialog,
AlertDialogAction,
@@ -21,6 +23,11 @@ import {
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/hover-card"
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip"
import { type Admin, AdminStatus } from "@/models/admin"
import type { Role } from "@/models/role"
import { AssignRoles } from "./assign-roles"
@@ -31,7 +38,7 @@ export default function AdminPage() {
const table = useDataTable((page, size) => getPageAdmin({ page, size }))
return (
<div className="flex flex-col gap-3">
<Page>
{/* 操作栏 */}
<div className="flex justify-between items-stretch">
<div className="flex gap-3">
@@ -47,15 +54,15 @@ export default function AdminPage() {
{ header: "用户名", accessorKey: "username" },
{
header: "姓名",
accessorFn: row => row.name ?? "-",
accessorFn: row => row.name ?? "",
},
{
header: "手机号",
accessorFn: row => row.phone ?? "-",
accessorFn: row => row.phone ?? "",
},
{
header: "邮箱",
accessorFn: row => row.email ?? "-",
accessorFn: row => row.email ?? "",
},
{
header: "状态",
@@ -81,25 +88,48 @@ export default function AdminPage() {
id: "action",
meta: { pin: "right" },
header: "操作",
cell: ({ row }) => (
<div className="flex gap-2">
<UpdateAdmin admin={row.original} onSuccess={table.refresh} />
<AssignRoles admin={row.original} onSuccess={table.refresh} />
<ToggleStatusButton
admin={row.original}
onSuccess={table.refresh}
/>
<DeleteButton
admin={row.original}
onSuccess={table.refresh}
/>
</div>
),
cell: ({ row }) => {
const admin = row.original
if (admin.lock === true) {
return (
<Tooltip>
<TooltipTrigger asChild>
<div className="flex justify-center items-center">
<Lock className="h-4 w-4 text-muted-foreground" />
</div>
</TooltipTrigger>
<TooltipContent>
<p></p>
</TooltipContent>
</Tooltip>
)
}
return (
<div className="flex gap-2">
<UpdateAdmin
admin={row.original}
onSuccess={table.refresh}
/>
<AssignRoles
admin={row.original}
onSuccess={table.refresh}
/>
<ToggleStatusButton
admin={row.original}
onSuccess={table.refresh}
/>
<DeleteButton
admin={row.original}
onSuccess={table.refresh}
/>
</div>
)
},
},
]}
/>
</Suspense>
</div>
</Page>
)
}

View File

@@ -1,12 +1,9 @@
"use client"
import {
BadgeQuestionMarkIcon,
BellIcon,
ChevronDownIcon,
ChevronRightIcon,
InboxIcon,
LogOutIcon,
SearchIcon,
SettingsIcon,
UserIcon,
} from "lucide-react"
@@ -16,36 +13,12 @@ import { usePathname, useRouter } from "next/navigation"
import { useEffect, useRef, useState } from "react"
import { logout } from "@/actions/auth"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import type { Admin } from "@/models/admin"
export default function Appbar(props: { admin: Admin }) {
const router = useRouter()
const [showDropdown, setShowDropdown] = useState(false)
const [showNotifications, setShowNotifications] = useState(false)
const [notifications] = useState([
{
id: 1,
title: "系统通知",
content: "您有新的待审核内容",
time: "10分钟前",
read: false,
},
{
id: 2,
title: "安全提醒",
content: "您的账号于昨天登录了新设备",
time: "1小时前",
read: true,
},
{
id: 3,
title: "系统更新",
content: "系统将在今晚进行例行维护",
time: "2小时前",
read: true,
},
])
const pathname = usePathname()
const dropdownRef = useRef<HTMLDivElement>(null)
@@ -72,14 +45,15 @@ export default function Appbar(props: { admin: Admin }) {
return () => document.removeEventListener("mousedown", handleClickOutside)
}, [])
// 根据路径生成面包屑
const generateBreadcrumbs = () => {
const paths = pathname.split("/").filter(Boolean)
const hiddenSegments = ["client"]
const filteredPaths = paths.filter(path => !hiddenSegments.includes(path))
const breadcrumbs = [
{ path: "/", label: "首页" },
...paths.map((path, index) => {
const url = `/${paths.slice(0, index + 1).join("/")}`
...filteredPaths.map((path, index) => {
const originalIndex = paths.findIndex(p => p === path)
const url = `/${paths.slice(0, originalIndex + 1).join("/")}`
const label = getBreadcrumbLabel(path)
return { path: url, label }
}),
@@ -94,7 +68,7 @@ export default function Appbar(props: { admin: Admin }) {
content: "内容管理",
articles: "文章管理",
media: "媒体库",
user: "用户管理",
user: "客户认领",
roles: "角色权限",
settings: "系统设置",
logs: "系统日志",
@@ -113,13 +87,14 @@ export default function Appbar(props: { admin: Admin }) {
permissions: "权限列表",
discount: "折扣管理",
statistics: "数据统计",
balance: "余额明细",
gateway: "网关列表",
}
return labels[path] || path
}
const breadcrumbs = generateBreadcrumbs()
const unreadCount = notifications.filter(n => !n.read).length
const doLogout = async () => {
const resp = await logout()
if (resp.success) {
@@ -129,7 +104,7 @@ export default function Appbar(props: { admin: Admin }) {
}
return (
<header className="bg-white h-16 border-b border-gray-200 flex items-center justify-between px-6">
<header className="bg-white flex-none basis-16 border-b border-gray-200 flex items-center justify-between px-6">
{/* 面包屑导航 */}
<div className="flex items-center text-sm">
{breadcrumbs.map((crumb, index) => (
@@ -153,88 +128,6 @@ export default function Appbar(props: { admin: Admin }) {
{/* 右侧用户信息和工具栏 */}
<div className="flex items-center space-x-4">
{/* 搜索框 */}
<div className="hidden md:block relative">
<div className="relative">
<SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
<Input
type="text"
placeholder="搜索..."
className="pl-10 pr-4 py-2 bg-gray-100 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-56"
/>
</div>
</div>
{/* 通知图标 */}
<div className="relative" ref={notificationRef}>
<Button
onClick={() => setShowNotifications(!showNotifications)}
className="relative p-2 rounded-full text-gray-600 bg-gray-100 hover:bg-gray-100 hover:text-gray-800 transition-colors"
aria-label="通知"
>
<BellIcon />
{unreadCount > 0 && (
<span className="absolute top-1 right-1 h-4 w-4 text-xs flex items-center justify-center rounded-full bg-red-500 text-white">
{unreadCount}
</span>
)}
</Button>
{/* 通知下拉面板 */}
{showNotifications && (
<div className="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg py-1 z-20 border border-gray-200">
<div className="px-4 py-2 border-b border-gray-100 flex justify-between items-center">
<h3 className="font-medium text-gray-800"></h3>
<Button className="text-xs text-blue-600 hover:text-blue-800">
</Button>
</div>
<div className="max-h-72 overflow-y-auto">
{notifications.length > 0 ? (
notifications.map(notification => (
<div
key={notification.id}
className={`px-4 py-3 border-b border-gray-100 hover:bg-gray-50 ${
notification.read ? "bg-white" : "bg-blue-50"
}`}
>
<div className="flex justify-between items-start">
<h4 className="text-sm font-medium text-gray-800">
{notification.title}
</h4>
<span className="text-xs text-gray-500">
{notification.time}
</span>
</div>
<p className="text-xs text-gray-600 mt-1">
{notification.content}
</p>
</div>
))
) : (
<div className="py-8 px-4 text-center">
<InboxIcon size={18} />
<p className="mt-2 text-sm text-gray-500"></p>
</div>
)}
</div>
<div className="border-t border-gray-100 p-2 text-center">
<Link
href="/notifications"
className="text-xs text-blue-600 hover:text-blue-800"
>
</Link>
</div>
</div>
)}
</div>
{/* 分隔线 */}
<div className="hidden md:block h-8 w-px bg-gray-200"></div>
{/* 用户下拉菜单 */}
<div className="relative" ref={dropdownRef}>
<Button

View File

@@ -0,0 +1,230 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import { Suspense, useCallback, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import z from "zod"
import { getPageBalance } from "@/actions/balance"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Button } from "@/components/ui/button"
import {
Field,
FieldError,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import type { Balance } from "@/models/balance"
type FilterValues = {
user_phone?: string
bill_no?: string
admin_id?: string
created_at_start?: Date
created_at_end?: Date
}
const filterSchema = z
.object({
phone: z.string().optional(),
bill_no: z.string().optional(),
admin_id: z.string().optional(),
created_at_start: z.string().optional(),
created_at_end: z.string().optional(),
})
.superRefine((data, ctx) => {
if (data.created_at_start && data.created_at_end) {
const start = new Date(data.created_at_start)
const end = new Date(data.created_at_end)
if (end < start) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "结束时间不能早于开始时间",
path: ["created_at_end"],
})
}
}
})
type FormValues = z.infer<typeof filterSchema>
export default function BalancePage() {
const [filters, setFilters] = useState<FilterValues>({})
const { control, handleSubmit, reset } = useForm<FormValues>({
resolver: zodResolver(filterSchema),
defaultValues: {
phone: "",
bill_no: "",
admin_id: "",
created_at_start: "",
created_at_end: "",
},
})
const fetchUsers = useCallback(
(page: number, size: number) => getPageBalance({ page, size, ...filters }),
[filters],
)
const table = useDataTable<Balance>(fetchUsers)
const onFilter = handleSubmit(data => {
const result: FilterValues = {}
if (data.phone?.trim()) result.user_phone = data.phone.trim()
if (data.bill_no?.trim()) result.bill_no = data.bill_no.trim()
if (data.created_at_start)
result.created_at_start = new Date(data.created_at_start)
if (data.created_at_end)
result.created_at_end = new Date(data.created_at_end)
setFilters(result)
table.pagination.onPageChange(1)
})
return (
<Page>
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
<div className="flex flex-wrap items-end gap-4">
<Controller
name="phone"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入会员号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="bill_no"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入账单号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="created_at_start"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input type="date" {...field} />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="created_at_end"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input type="date" {...field} />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
</div>
<FieldGroup className="flex-row justify-start mt-4 gap-2">
<Button type="submit"></Button>
<Button
type="button"
variant="outline"
onClick={() => {
reset()
setFilters({})
table.pagination.onPageChange(1)
}}
>
</Button>
</FieldGroup>
</form>
<Suspense>
<DataTable<Balance>
{...table}
columns={[
{
header: "会员号",
accessorFn: row => row.user?.phone || "",
},
{
header: "账单号",
accessorFn: row => row.bill?.bill_no || "",
},
{
header: "管理员",
accessorKey: "admin_id",
accessorFn: row => row.admin?.name || "",
},
{
header: "变动金额",
accessorKey: "amount",
cell: ({ row }) => {
const amount = row.original.amount
const isPositive = Number(amount) > 0
return (
<div className="flex items-center gap-1">
<span
className={`font-semibold ${
isPositive ? "text-green-600" : "text-red-600"
}`}
>
{isPositive ? "+" : ""}
{Number(amount).toFixed(2)}
</span>
</div>
)
},
},
{
header: "余额变化",
accessorKey: "balance_prev",
cell: ({ row }) => (
<div className="flex items-center gap-2">
<span className="text-muted-foreground text-sm">
¥{Number(row.original.balance_prev).toFixed(2)}
</span>
<span className="text-muted-foreground"></span>
<span className="font-medium text-foreground">
¥{Number(row.original.balance_curr).toFixed(2)}
</span>
</div>
),
},
{
header: "备注",
accessorKey: "remark",
},
{
header: "创建时间",
accessorKey: "created_at",
cell: ({ row }) =>
format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
},
]}
/>
</Suspense>
</Page>
)
}

View File

@@ -6,6 +6,7 @@ import { Controller, useForm } from "react-hook-form"
import { z } from "zod"
import { getPageBatch } from "@/actions/batch"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Button } from "@/components/ui/button"
import {
Field,
@@ -24,7 +25,7 @@ import {
import type { Batch } from "@/models/batch"
type APIFilterParams = {
phone?: string
user_phone?: string
batch_no?: string
resource_no?: string
prov?: string
@@ -84,7 +85,7 @@ export default function BatchPage() {
const onFilter = handleSubmit(data => {
const result: APIFilterParams = {}
if (data.user_phone?.trim()) result.phone = data.user_phone.trim()
if (data.user_phone?.trim()) result.user_phone = data.user_phone.trim()
if (data.batch_no?.trim()) result.batch_no = data.batch_no.trim()
if (data.resource_no?.trim()) result.resource_no = data.resource_no.trim()
if (data.prov?.trim()) result.prov = data.prov.trim()
@@ -100,9 +101,9 @@ export default function BatchPage() {
})
return (
<div className="space-y-3">
{/* 筛选表单 */}
<form onSubmit={onFilter} className="bg-white p-4 rounded-lg">
<Page>
{/* 搜索表单 */}
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
<div className="flex flex-wrap items-end gap-4">
<Controller
name="batch_no"
@@ -231,7 +232,7 @@ export default function BatchPage() {
</div>
<FieldGroup className="flex-row justify-start mt-4 gap-2">
<Button type="submit"></Button>
<Button type="submit"></Button>
<Button
type="button"
variant="outline"
@@ -250,16 +251,15 @@ export default function BatchPage() {
<DataTable<Batch>
{...table}
columns={[
{ header: "ID", accessorKey: "id" },
{
header: "会员号",
accessorFn: row => row.user?.phone || "-",
accessorFn: row => row.user?.phone || "",
},
{ header: "套餐号", accessorKey: "resource.resource_no" },
{ header: "批次号", accessorKey: "batch_no" },
{ header: "省份", accessorKey: "prov" },
{ header: "城市", accessorKey: "city" },
{ header: "提取IP", accessorKey: "ip" },
{ header: "用户IP", accessorKey: "ip" },
{ header: "运营商", accessorKey: "isp" },
{ header: "提取数量", accessorKey: "count" },
{
@@ -271,6 +271,6 @@ export default function BatchPage() {
]}
/>
</Suspense>
</div>
</Page>
)
}

View File

@@ -8,6 +8,7 @@ import { toast } from "sonner"
import { z } from "zod"
import { getPageBill, getSkuList } from "@/actions/bill"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Button } from "@/components/ui/button"
import {
Field,
@@ -150,8 +151,8 @@ export default function BillingPage() {
})
return (
<div className="space-y-3">
<form onSubmit={onFilter} className="bg-white p-4">
<Page>
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
<div className="flex flex-wrap items-end gap-4">
<Controller
name="phone"
@@ -181,6 +182,20 @@ export default function BillingPage() {
</Field>
)}
/>
<Controller
name="bill_no"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入账单号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="inner_no"
control={control}
@@ -262,20 +277,6 @@ export default function BillingPage() {
</Field>
)}
/>
<Controller
name="bill_no"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入账单号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="created_at_start"
control={control}
@@ -308,7 +309,7 @@ export default function BillingPage() {
</div>
<FieldGroup className="flex-row justify-start mt-4 gap-2">
<Button type="submit"></Button>
<Button type="submit"></Button>
<Button
type="button"
variant="outline"
@@ -328,9 +329,14 @@ export default function BillingPage() {
<DataTable<Billing>
{...table}
columns={[
{ header: "ID", accessorKey: "id" },
{ header: "会员号", accessorFn: row => row.user?.phone || "-" },
{
header: "创建时间",
accessorKey: "created_at",
cell: ({ row }) =>
format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
},
{ header: "套餐号", accessorKey: "resource.resource_no" },
{ header: "会员号", accessorFn: row => row.user?.phone || "" },
{
header: "账单详情",
accessorKey: "info",
@@ -446,15 +452,9 @@ export default function BillingPage() {
)
},
},
{
header: "创建时间",
accessorKey: "created_at",
cell: ({ row }) =>
format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
},
]}
/>
</Suspense>
</div>
</Page>
)
}

View File

@@ -6,6 +6,7 @@ import { Controller, useForm } from "react-hook-form"
import { z } from "zod"
import { getPageChannel } from "@/actions/channel"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
@@ -101,8 +102,8 @@ export default function ChannelPage() {
})
return (
<div className="space-y-3">
<form onSubmit={onFilter} className="bg-white p-4 rounded-lg">
<Page>
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
<div className="flex flex-wrap items-end gap-4">
<Controller
name="batch_no"
@@ -219,7 +220,7 @@ export default function ChannelPage() {
</div>
<FieldGroup className="flex-row justify-start mt-4 gap-2">
<Button type="submit"></Button>
<Button type="submit"></Button>
<Button
type="button"
variant="outline"
@@ -238,7 +239,6 @@ export default function ChannelPage() {
<DataTable<Channel>
{...table}
columns={[
{ header: "ID", accessorKey: "id" },
{
header: "会员号",
accessorFn: row => row.user?.phone || "-",
@@ -323,6 +323,6 @@ export default function ChannelPage() {
]}
/>
</Suspense>
</div>
</Page>
)
}

View File

@@ -0,0 +1,225 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import { useRouter, useSearchParams } from "next/navigation"
import { Suspense, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import z from "zod"
import { getBalance } from "@/actions/balance"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Button } from "@/components/ui/button"
import {
Field,
FieldError,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import type { Balance } from "@/models/balance"
type FilterValues = {
user_phone?: string
bill_no?: string
created_at_start?: Date
created_at_end?: Date
}
const filterSchema = z
.object({
phone: z.string().optional(),
bill_no: z.string().optional(),
admin_id: z.string().optional(),
created_at_start: z.string().optional(),
created_at_end: z.string().optional(),
})
.superRefine((data, ctx) => {
if (data.created_at_start && data.created_at_end) {
const start = new Date(data.created_at_start)
const end = new Date(data.created_at_end)
if (end < start) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "结束时间不能早于开始时间",
path: ["created_at_end"],
})
}
}
})
type FormValues = z.infer<typeof filterSchema>
export default function BalancePage() {
const searchParams = useSearchParams()
const router = useRouter()
const userId = searchParams.get("userId")
const userPhone = searchParams.get("phone")
const [filters, setFilters] = useState<FilterValues>({})
const { control, handleSubmit, reset } = useForm<FormValues>({
resolver: zodResolver(filterSchema),
defaultValues: {
phone: "",
bill_no: "",
admin_id: "",
created_at_start: "",
created_at_end: "",
},
})
const table = useDataTable<Balance>((page, size) =>
getBalance({ page, size, user_id: Number(userId), ...filters }),
)
const onFilter = handleSubmit(data => {
const result: FilterValues = {}
if (data.phone?.trim()) result.user_phone = data.phone.trim()
if (data.bill_no?.trim()) result.bill_no = data.bill_no.trim()
if (data.created_at_start)
result.created_at_start = new Date(data.created_at_start)
if (data.created_at_end)
result.created_at_end = new Date(data.created_at_end)
setFilters(result)
table.pagination.onPageChange(1)
})
return (
<Page>
<div>
<Button
onClick={() => {
router.back()
}}
className="gap-2"
>
</Button>
<span className="ml-2 text-gray-600">: {userPhone}</span>
</div>
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
<div className="flex flex-wrap items-end gap-4">
<Controller
name="bill_no"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入账单号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="created_at_start"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input type="date" {...field} />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="created_at_end"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input type="date" {...field} />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
</div>
<FieldGroup className="flex-row justify-start mt-4 gap-2">
<Button type="submit"></Button>
<Button
type="button"
variant="outline"
onClick={() => {
reset()
setFilters({})
table.pagination.onPageChange(1)
}}
>
</Button>
</FieldGroup>
</form>
<Suspense>
<DataTable<Balance>
{...table}
columns={[
{
header: "账单号",
accessorFn: row => row.bill?.bill_no || "",
},
{
header: "管理员",
accessorKey: "admin_id",
accessorFn: row => row.admin?.name || "",
},
{
header: "变动金额",
accessorKey: "amount",
cell: ({ row }) => {
const amount = row.original.amount
const isPositive = Number(amount) > 0
return (
<div className="flex items-center gap-1">
<span
className={`font-semibold ${
isPositive ? "text-green-600" : "text-red-600"
}`}
>
{isPositive ? "+" : ""}
{Number(amount).toFixed(2)}
</span>
</div>
)
},
},
{
header: "余额变化",
accessorKey: "balance_prev",
cell: ({ row }) => (
<div className="flex items-center gap-2">
<span className="text-muted-foreground text-sm">
¥{Number(row.original.balance_prev).toFixed(2)}
</span>
<span className="text-muted-foreground"></span>
<span className="font-medium text-foreground">
¥{Number(row.original.balance_curr).toFixed(2)}
</span>
</div>
),
},
{
header: "备注",
accessorKey: "remark",
},
{
header: "创建时间",
accessorKey: "created_at",
cell: ({ row }) =>
format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
},
]}
/>
</Suspense>
</Page>
)
}

View File

@@ -0,0 +1,271 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import { useRouter, useSearchParams } from "next/navigation"
import { Suspense, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"
import { getBatch } from "@/actions/batch"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Button } from "@/components/ui/button"
import {
Field,
FieldError,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import type { Batch } from "@/models/batch"
type APIFilterParams = {
phone?: string
batch_no?: string
resource_no?: string
prov?: string
city?: string
isp?: string
created_at_start?: Date
created_at_end?: Date
}
const filterSchema = z
.object({
user_phone: z.string().optional(),
resource_no: z.string().optional(),
batch_no: z.string().optional(),
prov: z.string().optional(),
city: z.string().optional(),
isp: z.string().optional(),
created_at_start: z.string().optional(),
created_at_end: z.string().optional(),
})
.superRefine((data, ctx) => {
if (data.created_at_start && data.created_at_end) {
const start = new Date(data.created_at_start)
const end = new Date(data.created_at_end)
if (end < start) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "结束时间不能早于开始时间",
path: ["created_at_end"],
})
}
}
})
type FilterSchema = z.infer<typeof filterSchema>
export default function BatchPage() {
const searchParams = useSearchParams()
const router = useRouter()
const userId = searchParams.get("userId")
const userPhone = searchParams.get("phone")
const [filters, setFilters] = useState<APIFilterParams>({})
const { control, handleSubmit, reset } = useForm<FilterSchema>({
resolver: zodResolver(filterSchema),
defaultValues: {
resource_no: "",
batch_no: "",
prov: "",
city: "",
isp: "all",
created_at_start: "",
created_at_end: "",
},
})
const table = useDataTable<Batch>((page, size) =>
getBatch({ page, size, user_id: Number(userId), ...filters }),
)
const onFilter = handleSubmit(data => {
const result: APIFilterParams = {}
if (data.user_phone?.trim()) result.phone = data.user_phone.trim()
if (data.batch_no?.trim()) result.batch_no = data.batch_no.trim()
if (data.resource_no?.trim()) result.resource_no = data.resource_no.trim()
if (data.prov?.trim()) result.prov = data.prov.trim()
if (data.city?.trim()) result.city = data.city.trim()
if (data.isp && data.isp !== "all") result.isp = data.isp
if (data.created_at_start)
result.created_at_start = new Date(data.created_at_start)
if (data.created_at_end)
result.created_at_end = new Date(data.created_at_end)
setFilters(result)
table.pagination.onPageChange(1)
})
return (
<Page>
<div>
<Button
onClick={() => {
router.back()
}}
className="gap-2"
>
</Button>
<span className="ml-2 text-gray-600">: {userPhone}</span>
</div>
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
<div className="flex flex-wrap items-end gap-4">
<Controller
name="batch_no"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入批次号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="resource_no"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入套餐号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="prov"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-32 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入省份" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="city"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-32 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入城市" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="isp"
control={control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid} className="w-32">
<FieldLabel></FieldLabel>
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger>
<SelectValue placeholder="全部" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all"></SelectItem>
<SelectItem value="1"></SelectItem>
<SelectItem value="2"></SelectItem>
<SelectItem value="3"></SelectItem>
</SelectContent>
</Select>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="created_at_start"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input type="date" {...field} />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="created_at_end"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input type="date" {...field} />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
</div>
<FieldGroup className="flex-row justify-start mt-4 gap-2">
<Button type="submit"></Button>
<Button
type="button"
variant="outline"
onClick={() => {
reset()
setFilters({})
table.pagination.onPageChange(1)
}}
>
</Button>
</FieldGroup>
</form>
<Suspense fallback={<div>Loading...</div>}>
<DataTable<Batch>
{...table}
columns={[
{
header: "会员号",
accessorFn: row => row.user?.phone || "",
},
{ header: "套餐号", accessorKey: "resource.resource_no" },
{ header: "批次号", accessorKey: "batch_no" },
{ header: "省份", accessorKey: "prov" },
{ header: "城市", accessorKey: "city" },
{ header: "提取IP", accessorKey: "ip" },
{ header: "运营商", accessorKey: "isp" },
{ header: "提取数量", accessorKey: "count" },
{
header: "提取时间",
accessorKey: "time",
cell: ({ row }) =>
format(new Date(row.original.time), "yyyy-MM-dd HH:mm"),
},
]}
/>
</Suspense>
</Page>
)
}

View File

@@ -0,0 +1,461 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import { CreditCard, Wallet } from "lucide-react"
import { useRouter, useSearchParams } from "next/navigation"
import { Suspense, useEffect, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"
import { getBill, getSkuList } from "@/actions/bill"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Button } from "@/components/ui/button"
import {
Field,
FieldError,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { ProductCode } from "@/lib/base"
import type { Billing } from "@/models/billing"
type FilterValues = {
bill_no?: string
user_phone?: string
trade_inner_no?: string
resource_no?: string
sku_code?: string
product_code?: string
created_at_start?: Date
created_at_end?: Date
}
type SkuOption = {
resource_code: string
resource_name: string
}
const filterSchema = z
.object({
phone: z
.string()
.optional()
.transform(val => val?.trim()),
bill_no: z
.string()
.optional()
.transform(val => val?.trim()),
resource_no: z.string().optional(),
inner_no: z.string().optional(),
created_at_start: z.string().optional(),
created_at_end: z.string().optional(),
product_code: z.string().optional(),
sku_code: z.string().optional(),
})
.superRefine((data, ctx) => {
if (data.created_at_start && data.created_at_end) {
const start = new Date(data.created_at_start)
const end = new Date(data.created_at_end)
if (end < start) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "结束时间不能早于开始时间",
path: ["created_at_end"],
})
}
}
})
type FilterSchema = z.infer<typeof filterSchema>
export default function BillingPage() {
const router = useRouter()
const searchParams = useSearchParams()
const userId = searchParams.get("userId")
const userPhone = searchParams.get("phone")
const [filters, setFilters] = useState<FilterValues>({})
const [skuOptions, setSkuOptions] = useState<SkuOption[]>([])
const [loading, setLoading] = useState(true)
const [skuProductCode, setSkuProductCode] = useState<ProductCode>(
ProductCode.All,
)
const { control, handleSubmit, reset } = useForm<FilterSchema>({
resolver: zodResolver(filterSchema),
defaultValues: {
bill_no: "",
inner_no: "",
created_at_start: "",
created_at_end: "",
phone: "",
resource_no: "",
sku_code: "all",
product_code: "",
},
})
useEffect(() => {
setLoading(true)
getSkuList({
product_code: skuProductCode,
})
.then(resp => {
if (!resp.success) {
throw new Error(resp.message)
}
setSkuOptions(
resp.data.map(sku => ({
resource_code: sku.code,
resource_name: sku.name,
})),
)
})
.catch(e => {
console.error("获取套餐类型失败:", e)
toast.error(
`获取套餐类型失败:${e instanceof Error ? e.message : String(e)}`,
)
setSkuOptions([])
})
.finally(() => {
setLoading(false)
})
}, [skuProductCode])
const table = useDataTable<Billing>((page, size) =>
getBill({ page, size, user_id: Number(userId), ...filters }),
)
const onFilter = handleSubmit(data => {
const result: FilterValues = {}
if (data.phone?.trim()) result.user_phone = data.phone.trim()
if (data.inner_no?.trim()) result.trade_inner_no = data.inner_no.trim()
if (data.bill_no?.trim()) result.bill_no = data.bill_no.trim()
if (data.resource_no?.trim()) result.resource_no = data.resource_no.trim()
if (data.product_code && data.product_code !== ProductCode.All) {
result.product_code = data.product_code
}
if (data.sku_code && data.sku_code !== "all") {
result.sku_code = data.sku_code
}
if (data.created_at_start)
result.created_at_start = new Date(data.created_at_start)
if (data.created_at_end)
result.created_at_end = new Date(data.created_at_end)
setFilters(result)
table.pagination.onPageChange(1)
})
return (
<Page>
<div>
<Button
onClick={() => {
router.back()
}}
className="gap-2"
>
</Button>
<span className="ml-2 text-gray-600">: {userPhone}</span>
</div>
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
<div className="flex flex-wrap items-end gap-4">
<Controller
name="resource_no"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入套餐号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="bill_no"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入账单号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="inner_no"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入订单号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="product_code"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-32 flex-none"
>
<FieldLabel></FieldLabel>
<Select
value={skuProductCode}
onValueChange={value => {
setSkuProductCode(value as ProductCode)
field.onChange(value)
}}
>
<SelectTrigger>
<SelectValue
placeholder={"请选择"}
defaultValue={
skuProductCode === ProductCode.All ? "全部" : ""
}
/>
</SelectTrigger>
<SelectContent>
<SelectItem value={ProductCode.All}></SelectItem>
<SelectItem value={ProductCode.Short}></SelectItem>
<SelectItem value={ProductCode.Long}></SelectItem>
</SelectContent>
</Select>
</Field>
)}
/>
<Controller
name="sku_code"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-32 flex-none"
>
<FieldLabel></FieldLabel>
<Select
value={loading ? undefined : field.value || "all"}
onValueChange={field.onChange}
>
<SelectTrigger>
<SelectValue placeholder={loading ? "加载中..." : "全部"} />
</SelectTrigger>
<SelectContent>
<SelectItem value="all"></SelectItem>
{skuOptions.map(option => (
<SelectItem
key={option.resource_code}
value={option.resource_code}
>
{option.resource_name || option.resource_code}
</SelectItem>
))}
</SelectContent>
</Select>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="created_at_start"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input type="date" {...field} />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="created_at_end"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input type="date" {...field} />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
</div>
<FieldGroup className="flex-row justify-start mt-4 gap-2">
<Button type="submit"></Button>
<Button
type="button"
variant="outline"
onClick={() => {
reset()
setSkuProductCode(ProductCode.All)
setFilters({})
table.pagination.onPageChange(1)
}}
>
</Button>
</FieldGroup>
</form>
<Suspense>
<DataTable<Billing>
{...table}
columns={[
{
header: "创建时间",
accessorKey: "created_at",
cell: ({ row }) =>
format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
},
{ header: "套餐号", accessorKey: "resource.resource_no" },
{
header: "账单详情",
accessorKey: "info",
cell: ({ row }) => {
const bill = row.original
return (
<div className="flex items-center gap-2">
<div className="shrink-0">
{bill.type === 1 && (
<div className="flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md">
<CreditCard size={16} />
<span></span>
</div>
)}
{bill.type === 2 && (
<div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
<CreditCard size={16} />
<span>退</span>
</div>
)}
{bill.type === 3 && (
<div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
<CreditCard size={16} />
<span></span>
</div>
)}
</div>
<div className="text-sm">{bill.info}</div>
</div>
)
},
},
{
header: "应付金额",
accessorKey: "amount",
cell: ({ row }) => {
const amount =
typeof row.original.amount === "string"
? parseFloat(row.original.amount)
: row.original.amount || 0
return (
<div className="flex gap-1">
<span
className={
amount > 0 ? "text-green-500" : "text-orange-500"
}
>
{amount.toFixed(2)}
</span>
</div>
)
},
},
{
header: "实付金额",
accessorKey: "actual",
cell: ({ row }) => {
const actual =
typeof row.original.actual === "string"
? parseFloat(row.original.actual)
: row.original.actual || 0
return (
<div className="flex gap-1">
<span
className={
actual > 0 ? "text-green-500" : "text-orange-500"
}
>
{actual.toFixed(2)}
</span>
</div>
)
},
},
{ header: "账单号", accessorKey: "bill_no" },
{
header: "订单号",
accessorKey: "trade.inner_no",
cell: ({ row }) => {
const bill = row.original
return (
<div className="flex items-center gap-2">
<div className="shrink-0 w-20">
{bill.trade?.acquirer === 1 && (
<div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
<CreditCard size={16} />
<span></span>
</div>
)}
{bill.trade?.acquirer === 2 && (
<div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
<CreditCard size={16} />
<span></span>
</div>
)}
{bill.trade?.acquirer === 3 && (
<div className="flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md">
<CreditCard size={16} />
<span></span>
</div>
)}
{!bill.trade?.acquirer && (
<div className="flex gap-2 items-center bg-red-50 w-full px-2 py-1 rounded-md">
<Wallet size={16} />
<span></span>
</div>
)}
</div>
<div className="text-sm">{bill.trade?.inner_no}</div>
</div>
)
},
},
]}
/>
</Suspense>
</Page>
)
}

View File

@@ -0,0 +1,329 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import { useRouter, useSearchParams } from "next/navigation"
import { Suspense, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"
import { getChannel } from "@/actions/channel"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
Field,
FieldError,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import type { Channel } from "@/models/channel"
type FilterValues = {
batch_no?: string
user_phone?: string
resource_no?: string
proxy_host?: string
proxy_port?: number
node_ip?: string
expired_at_start?: Date
expired_at_end?: Date
}
const filterSchema = z
.object({
batch_no: z.string().optional(),
user_phone: z.string().optional(),
resource_no: z.string().optional(),
proxy_host: z.string().optional(),
proxy_port: z.string().optional(),
node_ip: z.string().optional(),
expired_at_start: z.string().optional(),
expired_at_end: z.string().optional(),
})
.superRefine((data, ctx) => {
if (data.expired_at_start && data.expired_at_end) {
const start = new Date(data.expired_at_start)
const end = new Date(data.expired_at_end)
if (end < start) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "结束时间不能早于开始时间",
path: ["expired_at_end"],
})
}
}
})
type FilterSchema = z.infer<typeof filterSchema>
const ispMap: Record<number, string> = {
1: "电信",
2: "联通",
3: "移动",
}
export default function ChannelPage() {
const router = useRouter()
const searchParams = useSearchParams()
const userId = searchParams.get("userId")
const userPhone = searchParams.get("phone")
const [filters, setFilters] = useState<FilterValues>({})
const { control, handleSubmit, reset } = useForm<FilterSchema>({
resolver: zodResolver(filterSchema),
defaultValues: {
batch_no: "",
user_phone: "",
resource_no: "",
proxy_port: "",
proxy_host: "",
node_ip: "",
expired_at_start: "",
expired_at_end: "",
},
})
const table = useDataTable<Channel>((page, size) =>
getChannel({ page, size, user_id: Number(userId), ...filters }),
)
const onFilter = handleSubmit(data => {
const result: FilterValues = {}
if (data.batch_no?.trim()) result.batch_no = data.batch_no.trim()
if (data.user_phone?.trim()) result.user_phone = data.user_phone.trim()
if (data.resource_no?.trim()) result.resource_no = data.resource_no.trim()
if (data.proxy_host?.trim()) result.proxy_host = data.proxy_host.trim()
if (data.proxy_port?.trim())
result.proxy_port = Number(data.proxy_port.trim())
if (data.node_ip?.trim()) result.node_ip = data.node_ip.trim()
if (data.expired_at_start)
result.expired_at_start = new Date(data.expired_at_start)
if (data.expired_at_end)
result.expired_at_end = new Date(data.expired_at_end)
setFilters(result)
table.pagination.onPageChange(1)
})
return (
<Page>
<div>
<Button
onClick={() => {
router.back()
}}
className="gap-2"
>
</Button>
<span className="ml-2 text-gray-600">: {userPhone}</span>
</div>
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
<div className="flex flex-wrap items-end gap-4">
<Controller
name="batch_no"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入批次号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="resource_no"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入套餐号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="proxy_host"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel>IP</FieldLabel>
<Input {...field} placeholder="请输入代理IP" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="proxy_port"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-32 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入代理端口" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="node_ip"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入节点" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="expired_at_start"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input type="date" {...field} />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="expired_at_end"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input type="date" {...field} />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
</div>
<FieldGroup className="flex-row justify-start mt-4 gap-2">
<Button type="submit"></Button>
<Button
type="button"
variant="outline"
onClick={() => {
reset()
setFilters({})
table.pagination.onPageChange(1)
}}
>
</Button>
</FieldGroup>
</form>
<Suspense>
<DataTable<Channel>
{...table}
columns={[
{
header: "会员号",
accessorFn: row => row.user?.phone || "",
},
{ header: "套餐号", accessorKey: "resource.resource_no" },
{ header: "批次号", accessorKey: "batch_no" },
{
header: "节点",
accessorFn: row => row.ip || row.edge_ref || row.edge_id,
},
{
header: "自动配置",
cell: ({ row }) => {
const prov = row.original.filter_prov
const city = row.original.filter_city
const isp = row.original.filter_isp
const parts = []
if (prov && prov !== "all") parts.push(prov)
if (city && city !== "all") parts.push(city)
if (isp && isp !== "all") {
parts.push(ispMap[Number(isp)] || isp)
}
return (
<div className="text-sm">
{parts.length > 0 ? parts.join(" / ") : "不限"}
</div>
)
},
},
{
header: "网关地址",
accessorKey: "host",
cell: ({ row }) => {
return (
<span>
{row.original.host}:{row.original.port}
</span>
)
},
},
{
header: "认证方式",
cell: ({ row }) => {
const channel = row.original
const hasWhitelist =
channel.whitelists && channel.whitelists.trim() !== ""
const hasAuth = channel.username && channel.password
return (
<div className="flex flex-col gap-1 min-w-0">
{hasWhitelist ? (
<div className="flex flex-col">
<span></span>
<div className="flex flex-wrap gap-1 max-w-50">
{channel.whitelists.split(",").map(ip => (
<Badge key={ip.trim()} variant="secondary">
{ip.trim()}
</Badge>
))}
</div>
</div>
) : hasAuth ? (
<div className="flex flex-col">
<span></span>
<Badge variant="secondary">
{channel.username}:{channel.password}
</Badge>
</div>
) : (
<span className="text-sm text-gray-400"></span>
)}
</div>
)
},
},
{
header: "过期时间",
accessorKey: "expired_at",
cell: ({ row }) =>
format(new Date(row.original.expired_at), "yyyy-MM-dd HH:mm"),
},
]}
/>
</Suspense>
</Page>
)
}

View File

@@ -0,0 +1,339 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import { useRouter } from "next/navigation"
import { Suspense, useCallback, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"
import { getPageUser } from "@/actions/user"
import { UpdateDialog } from "@/app/(root)/cust/update"
import { Auth } from "@/components/auth"
import { DataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
Field,
FieldError,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
ScopeBalanceActivityReadOfUser,
ScopeBatchReadOfUser,
ScopeBillReadOfUser,
ScopeChannelReadOfUser,
ScopeResourceRead,
ScopeTradeReadOfUser,
ScopeUserWrite,
ScopeUserWriteBalance,
} from "@/lib/scopes"
import type { User } from "@/models/user"
import { AddUserDialog } from "../../cust/create"
interface UserQueryParams {
account?: string
name?: string
}
const filterSchema = z.object({
phone: z.string().optional(),
name: z.string().optional(),
})
type FormValues = z.infer<typeof filterSchema>
export default function UserQueryPage() {
const [userList, setUserList] = useState<User[]>([])
const [loading, setLoading] = useState(false)
const [currentFilters, setCurrentFilters] = useState<UserQueryParams>({})
const router = useRouter()
const { control, handleSubmit, reset } = useForm<FormValues>({
resolver: zodResolver(filterSchema),
defaultValues: {
phone: "",
name: "",
},
})
const fetchUsers = useCallback(async (filters: UserQueryParams = {}) => {
setLoading(true)
try {
const res = await getPageUser(filters)
if (res.success) {
const data = Array.isArray(res.data) ? res.data : [res.data]
setUserList(data)
} else {
toast.error(res.message || "获取用户失败")
setUserList([])
}
} catch (error) {
const message = error instanceof Error ? error.message : error
toast.error(`获取用户失败: ${message}`)
} finally {
setLoading(false)
}
}, [])
const onFilter = handleSubmit((data: FormValues) => {
const params: UserQueryParams = {}
if (data.phone?.trim()) params.account = data.phone.trim()
if (data.name?.trim()) params.name = data.name.trim()
if (Object.keys(params).length === 0) {
toast.info("请至少输入一个搜索条件")
return
}
setCurrentFilters(params)
fetchUsers(params)
})
const refreshTable = useCallback(() => {
if (Object.keys(currentFilters).length > 0) {
fetchUsers(currentFilters)
}
}, [fetchUsers, currentFilters])
const handleReset = () => {
reset()
setCurrentFilters({})
setUserList([])
}
return (
<Page>
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
<div className="flex flex-wrap items-end gap-4">
<Controller
name="phone"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入手机号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="name"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入姓名" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
</div>
<FieldGroup className="flex-row justify-start mt-4 gap-2">
<Auth scope={ScopeUserWrite}>
<AddUserDialog onSuccess={refreshTable} />
</Auth>
<Button type="button" variant="outline" onClick={handleReset}>
</Button>
<Button type="submit"></Button>
</FieldGroup>
</form>
<Suspense>
<DataTable<User>
data={userList || []}
status={loading ? "load" : "done"}
columns={[
{ header: "手机", accessorKey: "phone" },
{
header: "创建时间",
accessorKey: "created_at",
cell: ({ row }) =>
format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
},
{
header: "客户来源",
accessorKey: "source",
cell: ({ row }) => {
const sourceMap: Record<number, string> = {
0: "官网注册",
1: "管理员添加",
2: "代理商注册",
3: "代理商添加",
}
return sourceMap[row.original.source] ?? "官网注册"
},
},
{
header: "余额",
accessorKey: "balance",
cell: ({ row }) => {
const balance = Number(row.original.balance) || 0
return (
<span
className={
balance > 0 ? "text-green-500" : "text-orange-500"
}
>
{balance.toFixed(2)}
</span>
)
},
},
{ header: "账号", accessorKey: "username" },
{
header: "账号状态",
accessorKey: "status",
cell: ({ row }) => (row.original.status === 1 ? "正常" : "禁用"),
},
{
header: "客户经理",
cell: ({ row }) => row.original.admin?.name || "",
},
{ header: "姓名", accessorKey: "name" },
{
header: "实名状态",
accessorKey: "id_type",
cell: ({ row }) => (
<Badge
variant={row.original.id_type === 1 ? "default" : "secondary"}
className={
row.original.id_type === 1
? "bg-green-100 text-green-800"
: "bg-gray-100 text-gray-800"
}
>
{row.original.id_type === 1 ? "已认证" : "未认证"}
</Badge>
),
},
{
header: "最后登录时间",
accessorKey: "last_login",
cell: ({ row }) =>
row.original.last_login
? format(
new Date(row.original.last_login),
"yyyy-MM-dd HH:mm",
)
: "",
},
{
header: "最后登录IP",
accessorKey: "last_login_ip",
cell: ({ row }) => row.original.last_login_ip || "",
},
{ header: "联系方式", accessorKey: "contact_wechat" },
{
id: "action",
meta: { pin: "right" },
header: "操作",
cell: ({ row }) => {
return (
<div className="flex flex-wrap gap-2 w-75">
<Auth scope={ScopeUserWriteBalance}>
<UpdateDialog
user={row.original}
onSuccess={refreshTable}
/>
</Auth>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="outline">
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-8">
<Auth scope={ScopeTradeReadOfUser}>
<DropdownMenuItem
onClick={() => {
router.push(
`/client/trade?userId=${row.original.id}`,
)
}}
>
</DropdownMenuItem>
</Auth>
<Auth scope={ScopeBillReadOfUser}>
<DropdownMenuItem
onClick={() => {
router.push(
`/client/billing?userId=${row.original.id}`,
)
}}
>
</DropdownMenuItem>
</Auth>
<Auth scope={ScopeResourceRead}>
<DropdownMenuItem
onClick={() => {
router.push(
`/client/resources?userId=${row.original.id}`,
)
}}
>
</DropdownMenuItem>
</Auth>
<Auth scope={ScopeBatchReadOfUser}>
<DropdownMenuItem
onClick={() => {
router.push(
`/client/batch?userId=${row.original.id}`,
)
}}
>
</DropdownMenuItem>
</Auth>
<Auth scope={ScopeChannelReadOfUser}>
<DropdownMenuItem
onClick={() => {
router.push(
`/client/channel?userId=${row.original.id}`,
)
}}
>
IP管理
</DropdownMenuItem>
</Auth>
<Auth scope={ScopeBalanceActivityReadOfUser}>
<DropdownMenuItem
onClick={() => {
router.push(
`/client/balance?userId=${row.original.id}&phone=${row.original.phone}`,
)
}}
>
</DropdownMenuItem>
</Auth>
</DropdownMenuContent>
</DropdownMenu>
</div>
)
},
},
]}
/>
</Suspense>
</Page>
)
}

View File

@@ -0,0 +1,583 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { format, isBefore, isSameDay } from "date-fns"
import { Box, Loader2, Timer } from "lucide-react"
import { useRouter, useSearchParams } from "next/navigation"
import { Suspense, useCallback, useMemo, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"
import {
ResourceLong,
ResourceShort,
updateResource,
} from "@/actions/resources"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
Field,
FieldError,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import type { Resources } from "@/models/resources"
const filterSchema = z
.object({
user_phone: z.string().optional(),
resource_no: z.string().optional(),
status: z.string().optional(),
type: z.string().optional(),
created_at_start: z.string().optional(),
created_at_end: z.string().optional(),
expired: z.string().optional(),
})
.superRefine((data, ctx) => {
if (data.created_at_start && data.created_at_end) {
const start = new Date(data.created_at_start)
const end = new Date(data.created_at_end)
if (end < start) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "结束时间不能早于开始时间",
path: ["created_at_end"],
})
}
}
})
type FormValues = z.infer<typeof filterSchema>
interface FilterParams {
user_phone?: string
resource_no?: string
active?: boolean
mode?: number
created_at_start?: Date
created_at_end?: Date
expired?: boolean
}
// 获取资源类型
function getResourceType(resource: Resources): number {
if ("short" in resource && resource.short) {
return resource.short.type
}
if ("long" in resource && resource.long) {
return resource.long.type
}
return resource.type
}
// 获取资源详情对象
function getResourceDetail(resource: Resources) {
if ("short" in resource && resource.short) {
return resource.short
}
if ("long" in resource && resource.long) {
return resource.long
}
return null
}
// 获取过期时间
function getExpireAt(resource: Resources): Date | null | undefined {
if ("short" in resource && resource.short) {
return resource.short.expire_at
}
if ("long" in resource && resource.long) {
return resource.long.expire_at
}
return undefined
}
function getName(resource: Resources): string | null | undefined {
if ("short" in resource && resource.short) {
return resource.short.sku?.name
}
if ("long" in resource && resource.long) {
return resource.long.sku?.name
}
return undefined
}
// 获取最近使用时间
function getLastAt(resource: Resources): Date | null | undefined {
if ("short" in resource && resource.short) {
return resource.short.last_at
}
if ("long" in resource && resource.long) {
return resource.long.last_at
}
return undefined
}
// 资源类型徽章
function ResourceTypeBadge({ resource }: { resource: Resources }) {
const type = getResourceType(resource)
if (type === 1) {
return (
<div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
<Timer size={20} />
<span></span>
</div>
)
}
if (type === 2) {
return (
<div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
<Box size={20} />
<span></span>
</div>
)
}
return null
}
// 过期徽章
function ExpireBadge({ expireAt }: { expireAt: Date | null | undefined }) {
if (!expireAt) return null
if (isBefore(expireAt, new Date())) {
return <Badge variant="destructive"></Badge>
}
return null
}
// 格式化日期
function formatDateTime(date: Date | null | undefined) {
if (!date) return "-"
return format(date, "yyyy-MM-dd HH:mm")
}
// 计算今日使用量
function getTodayUsage(lastAt: Date | null | undefined, daily: number) {
if (lastAt && isSameDay(lastAt, new Date())) {
return daily
}
return 0
}
export default function ResourcesPage() {
const searchParams = useSearchParams()
const router = useRouter()
const userPhone = searchParams.get("phone")
return (
<Page>
<div>
<Button
onClick={() => {
router.back()
}}
className="gap-2"
>
</Button>
<span className="ml-2 text-gray-600">: {userPhone}</span>
</div>
<Tabs defaultValue="short">
<TabsList className="bg-card p-1.5 rounded-lg">
<TabsTrigger
value="short"
className="w-30 h-9 data-[state=active]:bg-primary-muted text-base rounded-md"
>
</TabsTrigger>
<TabsTrigger
value="long"
className="w-30 h-9 data-[state=active]:bg-primary-muted text-base rounded-md"
>
</TabsTrigger>
</TabsList>
<TabsContent value="short" className="flex flex-col gap-4">
<ResourceList resourceType="short" />
</TabsContent>
<TabsContent value="long" className="flex flex-col gap-4">
<ResourceList resourceType="long" />
</TabsContent>
</Tabs>
</Page>
)
}
interface ResourceListProps {
resourceType: "long" | "short"
}
function ResourceList({ resourceType }: ResourceListProps) {
const searchParams = useSearchParams()
const userId = searchParams.get("userId")
const [filters, setFilters] = useState<FilterParams>({})
const isLong = resourceType === "long"
const listFn = isLong ? ResourceLong : ResourceShort
const [updatingId, setUpdatingId] = useState<number | null>(null)
const { control, handleSubmit, reset } = useForm<FormValues>({
resolver: zodResolver(filterSchema),
defaultValues: {
user_phone: "",
resource_no: "",
status: "all",
type: "all",
created_at_start: "",
created_at_end: "",
expired: "all",
},
})
const fetchResources = useCallback(
(page: number, size: number) => {
return listFn({ page, size, user_id: Number(userId), ...filters })
},
[listFn, filters, userId],
)
const table = useDataTable<Resources>(fetchResources)
const refreshTable = useCallback(() => {
setFilters(prev => ({ ...prev }))
}, [])
const handleStatusChange = useCallback(
async (resource: Resources, newStatusValue: string) => {
const newActive = newStatusValue === "0"
if (newActive === resource.active) return
setUpdatingId(resource.id)
try {
await updateResource({
id: resource.id,
active: newActive,
})
toast.success("更新成功", {
description: `资源状态已更新为${newActive ? "启用" : "禁用"}`,
})
refreshTable()
} catch (error) {
console.error("更新状态失败:", error)
toast.error("更新失败", {
description: error instanceof Error ? error.message : "请稍后重试",
})
} finally {
setUpdatingId(null)
}
},
[refreshTable],
)
const onFilter = handleSubmit(data => {
const result: FilterParams = {}
if (data.user_phone?.trim()) result.user_phone = data.user_phone.trim()
if (data.resource_no?.trim()) result.resource_no = data.resource_no.trim()
if (data.status && data.status !== "all") {
result.active = data.status === "0"
}
if (data.type && data.type !== "all") {
result.mode = Number(data.type)
}
if (data.expired && data.expired !== "all") {
result.expired = data.expired === "1"
}
if (data.created_at_start)
result.created_at_start = new Date(data.created_at_start)
if (data.created_at_end)
result.created_at_end = new Date(data.created_at_end)
setFilters(result)
table.pagination.onPageChange(1)
})
const columns = useMemo(
() => [
{
header: "会员号",
accessorFn: (row: Resources) => row.user?.phone || "-",
},
{
header: "套餐",
cell: ({ row }: { row: { original: Resources } }) => {
const resourceNo = row.original.resource_no
const name = getName(row.original)
const expireAt = getExpireAt(row.original)
return (
<div className="flex flex-col gap-1">
<div>{name}</div>
<div className="flex items-center gap-2">
<span className="text-xs text-gray-500">{resourceNo}</span>
<ExpireBadge expireAt={expireAt} />
</div>
</div>
)
},
},
{
header: "类型",
cell: ({ row }: { row: { original: Resources } }) => {
return <ResourceTypeBadge resource={row.original} />
},
},
{
header: "IP时效",
cell: ({ row }: { row: { original: Resources } }) => {
const detail = getResourceDetail(row.original)
const live = detail?.live
if (live === undefined) return "-"
return <span>{isLong ? `${live}小时` : `${live}分钟`}</span>
},
},
{
header: "使用情况",
cell: ({ row }: { row: { original: Resources } }) => {
const detail = getResourceDetail(row.original)
const type = getResourceType(row.original)
if (!detail) return <span>-</span>
if (type === 1) {
// 包时
const todayUsage = getTodayUsage(detail.last_at, detail.daily || 0)
return (
<div className="flex gap-1">
<span>
{todayUsage}/{detail.quota}
</span>
</div>
)
} else {
// 包量
if (isLong) {
return (
<div className="flex gap-1">
{detail.used < detail.quota ? (
<span className="text-green-500"></span>
) : (
<span className="text-red-500"></span>
)}
<span>|</span>
<span>
{detail.used}/{detail.quota}
</span>
</div>
)
} else {
return (
<div className="flex gap-1">
<span>
{detail.used}/{detail.quota}
</span>
</div>
)
}
}
},
},
{
header: "最近使用时间",
cell: ({ row }: { row: { original: Resources } }) => {
const lastAt = getLastAt(row.original)
return lastAt ? formatDateTime(lastAt) : "暂未使用"
},
},
{
header: "开通时间",
cell: ({ row }: { row: { original: Resources } }) => {
return formatDateTime(row.original.created_at)
},
},
...(!isLong
? [
{
header: "到期时间",
cell: ({ row }: { row: { original: Resources } }) => {
return formatDateTime(getExpireAt(row.original))
},
},
]
: []),
{
id: "action",
meta: { pin: "right" },
header: "状态",
cell: ({ row }: { row: { original: Resources } }) => {
const resource = row.original
const isLoading = updatingId === resource.id
const currentActive = resource.active
return (
<div className="flex items-center gap-2">
<Select
value={currentActive ? "0" : "1"}
onValueChange={val => handleStatusChange(resource, val)}
disabled={isLoading}
>
<SelectTrigger className="min-w-20">
<SelectValue placeholder="状态" />
</SelectTrigger>
<SelectContent className="min-w-(--radix-select-trigger-width)">
<SelectItem value="0"></SelectItem>
<SelectItem value="1"></SelectItem>
</SelectContent>
</Select>
{isLoading && (
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
)}
</div>
)
},
},
],
[isLong, updatingId, handleStatusChange],
)
return (
<div className="space-y-3">
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
<div className="flex flex-wrap items-end gap-4">
<Controller
name="user_phone"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入会员号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="resource_no"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入套餐号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="status"
control={control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid} className="w-32">
<FieldLabel></FieldLabel>
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger>
<SelectValue placeholder="全部" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all"></SelectItem>
<SelectItem value="0"></SelectItem>
<SelectItem value="1"></SelectItem>
</SelectContent>
</Select>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="type"
control={control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid} className="w-32">
<FieldLabel></FieldLabel>
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger>
<SelectValue placeholder="全部" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all"></SelectItem>
<SelectItem value="1"></SelectItem>
<SelectItem value="2"></SelectItem>
</SelectContent>
</Select>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="expired"
control={control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid} className="w-32">
<FieldLabel></FieldLabel>
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger>
<SelectValue placeholder="全部" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all"></SelectItem>
<SelectItem value="0"></SelectItem>
<SelectItem value="1"></SelectItem>
</SelectContent>
</Select>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="created_at_start"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input type="date" {...field} />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="created_at_end"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input type="date" {...field} />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
</div>
<FieldGroup className="flex-row justify-start mt-4 gap-2">
<Button type="submit"></Button>
<Button
type="button"
variant="outline"
onClick={() => {
reset()
setFilters({})
table.pagination.onPageChange(1)
}}
>
</Button>
</FieldGroup>
</form>
<Suspense fallback={<div className="text-center p-4">...</div>}>
<DataTable<Resources> {...table} columns={columns} />
</Suspense>
</div>
)
}

View File

@@ -0,0 +1,363 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import { CheckCircle, Clock, XCircle } from "lucide-react"
import { useRouter, useSearchParams } from "next/navigation"
import { Suspense, useCallback, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"
import { getTrade } from "@/actions/trade"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Button } from "@/components/ui/button"
import {
Field,
FieldError,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import type { Trade } from "@/models/trade"
type FilterValues = {
inner_no?: string
method?: number
platform?: number
status?: number
created_at_start?: Date
created_at_end?: Date
}
const filterSchema = z
.object({
inner_no: z
.string()
.optional()
.transform(val => val?.trim()),
method: z.string().optional(),
platform: z.string().optional(),
status: z.string().optional(),
created_at_start: z.string().optional(),
created_at_end: z.string().optional(),
})
.superRefine((data, ctx) => {
if (data.created_at_start && data.created_at_end) {
const start = new Date(data.created_at_start)
const end = new Date(data.created_at_end)
if (end < start) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "结束时间不能早于开始时间",
path: ["created_at_end"],
})
}
}
})
type FilterSchema = z.infer<typeof filterSchema>
export default function TradePage() {
const router = useRouter()
const searchParams = useSearchParams()
const userId = searchParams.get("userId")
const userPhone = searchParams.get("phone")
const [filters, setFilters] = useState<FilterValues>({})
const { control, handleSubmit, reset } = useForm<FilterSchema>({
resolver: zodResolver(filterSchema),
defaultValues: {
inner_no: "",
method: "all",
platform: "all",
status: "all",
created_at_start: "",
created_at_end: "",
},
})
const fetchTrades = useCallback(
async (page: number, size: number) => {
return getTrade({ page, size, user_id: Number(userId), ...filters })
},
[filters, userId],
)
const table = useDataTable<Trade>(fetchTrades)
const onFilter = handleSubmit(data => {
const result: FilterValues = {}
if (data.inner_no?.trim()) result.inner_no = data.inner_no.trim()
if (data.method && data.method !== "all")
result.method = Number(data.method)
if (data.platform && data.platform !== "all")
result.platform = Number(data.platform)
if (data.status && data.status !== "all")
result.status = Number(data.status)
if (data.created_at_start)
result.created_at_start = new Date(data.created_at_start)
if (data.created_at_end)
result.created_at_end = new Date(data.created_at_end)
setFilters(result)
table.pagination.onPageChange(1)
})
return (
<Page>
<div>
<Button
onClick={() => {
router.back()
}}
className="gap-2"
>
</Button>
<span className="ml-2 text-gray-600">: {userPhone}</span>
</div>
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
<div className="flex flex-wrap items-end gap-4">
<Controller
name="inner_no"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入订单号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="method"
control={control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid} className="w-24">
<FieldLabel></FieldLabel>
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger>
<SelectValue placeholder="全部" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all"></SelectItem>
<SelectItem value="1"></SelectItem>
<SelectItem value="2"></SelectItem>
<SelectItem value="3"></SelectItem>
<SelectItem value="4"></SelectItem>
<SelectItem value="5"></SelectItem>
</SelectContent>
</Select>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="platform"
control={control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid} className="w-24">
<FieldLabel></FieldLabel>
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger>
<SelectValue placeholder="全部" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all"></SelectItem>
<SelectItem value="1"></SelectItem>
<SelectItem value="2"></SelectItem>
</SelectContent>
</Select>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="status"
control={control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid} className="w-24">
<FieldLabel></FieldLabel>
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger>
<SelectValue placeholder="全部" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all"></SelectItem>
<SelectItem value="0"></SelectItem>
<SelectItem value="1"></SelectItem>
<SelectItem value="2"></SelectItem>
</SelectContent>
</Select>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="created_at_start"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input type="date" {...field} />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="created_at_end"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input type="date" {...field} />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
</div>
<FieldGroup className="flex-row justify-start mt-4 gap-2">
<Button type="submit"></Button>
<Button
type="button"
variant="outline"
onClick={() => {
reset()
setFilters({})
table.pagination.onPageChange(1)
}}
>
</Button>
</FieldGroup>
</form>
<Suspense>
<DataTable<Trade>
{...table}
columns={[
{
header: "创建时间",
accessorKey: "created_at",
cell: ({ row }) =>
format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
},
{
header: "订单号",
accessorKey: "inner_no",
},
{ header: "购买套餐", accessorKey: "subject" },
{
header: "支付金额",
accessorKey: "payment",
cell: ({ row }) => {
const payment =
typeof row.original.payment === "string"
? parseFloat(row.original.payment)
: row.original.payment || 0
return (
<div className="flex gap-1">
<span
className={
payment > 0 ? "text-green-500" : "text-orange-500"
}
>
{payment.toFixed(2)}
</span>
</div>
)
},
},
{
header: "支付状态",
accessorKey: "status",
cell: ({ row }) => {
const status = row.original.status
switch (status) {
case 0:
return (
<div className="flex items-center gap-2 text-yellow-600">
<Clock className="h-4 w-4" />
<span></span>
</div>
)
case 1:
return (
<div className="flex items-center gap-2 text-green-600">
<CheckCircle className="h-4 w-4" />
<span></span>
</div>
)
case 2:
return (
<div className="flex items-center gap-2 text-gray-500">
<XCircle className="h-4 w-4" />
<span></span>
</div>
)
default:
return <span className="text-gray-400">-</span>
}
},
},
{
header: "支付平台",
accessorKey: "platform",
cell: ({ row }) => {
const platform = row.original.platform
if (!platform) return <span>-</span>
return platform === 1
? "电脑网站"
: platform === 2
? "手机网站"
: "-"
},
},
{
header: "支付渠道",
accessorKey: "method",
cell: ({ row }) => {
const methodMap: Record<number, string> = {
1: "支付宝",
2: "微信",
3: "商福通",
4: "商福通渠道支付宝",
5: "商福通渠道微信",
}
return (
<div>
{methodMap[row.original.method as number] || "未知"}
</div>
)
},
},
{
header: "渠道订单号",
accessorKey: "outer_no",
},
]}
/>
</Suspense>
</Page>
)
}

View File

@@ -4,6 +4,7 @@ import { Suspense, useState } from "react"
import { toast } from "sonner"
import { deleteCoupon, getPagCoupon } from "@/actions/coupon"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import {
AlertDialog,
AlertDialogAction,
@@ -24,7 +25,7 @@ export default function CouponPage() {
const table = useDataTable((page, size) => getPagCoupon({ page, size }))
return (
<div className="flex flex-col gap-3">
<Page>
<div className="flex justify-between items-stretch">
<div className="flex gap-3">
<CreateDiscount onSuccess={table.refresh} />
@@ -35,7 +36,6 @@ export default function CouponPage() {
<DataTable<Coupon>
{...table}
columns={[
{ header: "ID", accessorKey: "id" },
{ header: "所属用户", accessorKey: "user_id" },
{ header: "代码", accessorKey: "code" },
{ header: "备注", accessorKey: "remark" },
@@ -93,7 +93,7 @@ export default function CouponPage() {
]}
/>
</Suspense>
</div>
</Page>
)
}

View File

@@ -14,6 +14,7 @@ import {
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import {
Field,
@@ -72,16 +73,11 @@ const addUserSchema = z
export type AddUserFormValues = z.infer<typeof addUserSchema>
interface AddUserDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
onSuccess?: () => void
}
export function AddUserDialog({
open,
onOpenChange,
onSuccess,
}: AddUserDialogProps) {
export function AddUserDialog({ onSuccess }: AddUserDialogProps) {
const [open, setOpen] = useState(false)
const [isAdding, setIsAdding] = useState(false)
const [discountList, setDiscountList] = useState<ProductDiscount[]>([])
const [isLoadingDiscount, setIsLoadingDiscount] = useState(false)
@@ -176,7 +172,7 @@ export function AddUserDialog({
const result = await createCust(payload)
if (result?.success) {
toast.success("添加用户成功")
onOpenChange(false)
setOpen(false)
resetAddForm()
onSuccess?.()
} else {
@@ -194,11 +190,14 @@ export function AddUserDialog({
if (!open) {
resetAddForm()
}
onOpenChange(open)
setOpen(open)
}
return (
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogTrigger asChild>
<Button type="button"></Button>
</DialogTrigger>
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle></DialogTitle>
@@ -270,17 +269,6 @@ export function AddUserDialog({
</div>
<div className="grid grid-cols-2 gap-4">
<Controller
name="name"
control={control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入真实姓名" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="email"
control={control}
@@ -292,9 +280,6 @@ export function AddUserDialog({
</Field>
)}
/>
</div>
<div className="grid grid-cols-2 gap-4">
<Controller
name="status"
control={control}
@@ -410,7 +395,7 @@ export function AddUserDialog({
<Button
type="button"
variant="outline"
onClick={() => onOpenChange(false)}
onClick={() => setOpen(false)}
>
</Button>

View File

@@ -0,0 +1,144 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useState } from "react"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"
import { getDeduction } from "@/actions/cust"
import { Button } from "@/components/ui/button"
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import type { User } from "@/models/user"
const Schema = z.object({
deduction: z
.string()
.min(1, "请输入扣款金额")
.refine(val => !Number.isNaN(Number(val)), "请输入有效的数字")
.refine(val => Number(val) >= 0, "金额不能为负数"),
})
type FormValues = z.infer<typeof Schema>
interface UpdateDeductionDialogProps {
user: User
onSuccess: () => void
}
export function DeductionDialog({
user,
onSuccess,
}: UpdateDeductionDialogProps) {
const [open, setOpen] = useState(false)
const [isLoading, setIsLoading] = useState(false)
const {
register,
handleSubmit,
reset,
setValue,
formState: { errors },
} = useForm<FormValues>({
resolver: zodResolver(Schema),
defaultValues: {
deduction: "",
},
})
const onSubmit = async (data: FormValues) => {
setIsLoading(true)
try {
const result = await getDeduction({
user_id: user.id,
amount: data.deduction,
})
if (result.success) {
toast.success("扣款成功")
setOpen(false)
reset()
onSuccess()
} else {
toast.error(result.message || "扣款失败")
}
} catch (error) {
const message = error instanceof Error ? error.message : error
toast.error(`网络错误,请稍后重试: ${message}`)
} finally {
setIsLoading(false)
}
}
const handleOpenChange = (open: boolean) => {
if (!open) {
reset()
}
setOpen(open)
}
return (
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogTrigger asChild>
<Button size="sm"></Button>
</DialogTrigger>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle></DialogTitle>
<DialogDescription>
{user.name || user.username}
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="grid gap-4 py-4">
<Field data-invalid={!!errors.deduction}>
<FieldLabel></FieldLabel>
<Input
type="text"
placeholder="请输入扣款金额"
{...register("deduction")}
onInput={(e: React.ChangeEvent<HTMLInputElement>) => {
let value = e.target.value
value = value.replace(/[^\d.]/g, "")
const dotCount = (value.match(/\./g) || []).length
if (dotCount > 1) {
value = value.slice(0, value.lastIndexOf("."))
}
if (value.includes(".")) {
const [int, dec] = value.split(".")
value = `${int}.${dec.slice(0, 2)}`
}
setValue("deduction", value)
}}
/>
<FieldError>{errors.deduction?.message}</FieldError>
</Field>
</div>
<DialogFooter>
<Button
type="button"
variant="outline"
onClick={() => handleOpenChange(false)}
>
</Button>
<Button type="submit" disabled={isLoading}>
{isLoading ? "保存中" : "保存"}
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
)
}

View File

@@ -1,11 +1,11 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useEffect, useState } from "react"
import { useState } from "react"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"
import { getBalance } from "@/actions/cust"
import { getDeposit } from "@/actions/cust"
import { Button } from "@/components/ui/button"
import {
Dialog,
@@ -14,34 +14,29 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import type { Cust } from "@/models/cust"
import type { User } from "@/models/user"
const balanceSchema = z.object({
balance: z
const Schema = z.object({
deposit: z
.string()
.min(1, "请输入余额")
.refine(val => !Number.isNaN(Number(val)), "请输入有效的数字")
.refine(val => Number(val) >= 0, "余额不能为负数"),
})
type BalanceFormValues = z.infer<typeof balanceSchema>
type FormValues = z.infer<typeof Schema>
interface UpdateBalanceDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
currentUser: Cust | null
interface UpdateDepositDialogProps {
user: User
onSuccess: () => void
}
export function BalanceDialog({
open,
onOpenChange,
currentUser,
onSuccess,
}: UpdateBalanceDialogProps) {
export function DepositDialog({ user, onSuccess }: UpdateDepositDialogProps) {
const [open, setOpen] = useState(false)
const [isLoading, setIsLoading] = useState(false)
const {
@@ -50,37 +45,28 @@ export function BalanceDialog({
reset,
setValue,
formState: { errors },
} = useForm<BalanceFormValues>({
resolver: zodResolver(balanceSchema),
} = useForm<FormValues>({
resolver: zodResolver(Schema),
defaultValues: {
balance: "",
deposit: "",
},
})
useEffect(() => {
if (open && currentUser) {
const currentBalance = currentUser.balance?.toString() || "0"
const formattedBalance = Number(currentBalance).toFixed(2)
setValue("balance", formattedBalance)
}
}, [open, currentUser, setValue])
const onSubmit = async (data: BalanceFormValues) => {
if (!currentUser) return
const onSubmit = async (data: FormValues) => {
setIsLoading(true)
try {
const result = await getBalance({
user_id: currentUser.id,
balance: data.balance,
const result = await getDeposit({
user_id: user.id,
amount: data.deposit,
})
if (result.success) {
toast.success("修改余额成功")
onOpenChange(false)
toast.success("充值成功")
setOpen(false)
reset()
onSuccess()
} else {
toast.error(result.message || "修改余额失败")
toast.error(result.message || "充值失败")
}
} catch (error) {
const message = error instanceof Error ? error.message : error
@@ -94,52 +80,45 @@ export function BalanceDialog({
if (!open) {
reset()
}
onOpenChange(open)
setOpen(open)
}
return (
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogTrigger asChild>
<Button size="sm"></Button>
</DialogTrigger>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle></DialogTitle>
<DialogTitle></DialogTitle>
<DialogDescription>
{currentUser?.name || currentUser?.username}
{user?.name || user?.username}
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="grid gap-4 py-4">
<Field data-invalid={!!errors.balance}>
<FieldLabel></FieldLabel>
<Field data-invalid={!!errors.deposit}>
<FieldLabel></FieldLabel>
<Input
type="number"
step="0.01"
min="0"
placeholder="请输入余额"
{...register("balance", {
setValueAs: value => {
if (!value) return ""
const num = Number(value)
if (Number.isNaN(num)) return value
return num.toFixed(2)
},
})}
type="text"
placeholder="请输入充值金额"
{...register("deposit")}
onInput={(e: React.ChangeEvent<HTMLInputElement>) => {
let value = e.target.value
if (value.startsWith("-")) {
value = value.replace("-", "")
value = value.replace(/[^\d.]/g, "")
const dotCount = (value.match(/\./g) || []).length
if (dotCount > 1) {
value = value.slice(0, value.lastIndexOf("."))
}
if (value.includes(".")) {
const parts = value.split(".")
if (parts[1] && parts[1].length > 2) {
value = `${parts[0]}.${parts[1].slice(0, 2)}`
}
const [int, dec] = value.split(".")
value = `${int}.${dec.slice(0, 2)}`
}
setValue("balance", value)
setValue("deposit", value)
}}
/>
<FieldError>{errors.balance?.message}</FieldError>
<FieldError>{errors.deposit?.message}</FieldError>
</Field>
</div>

View File

@@ -2,13 +2,22 @@
import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import { useRouter } from "next/navigation"
import { Suspense, useCallback, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"
import { getPageCusts } from "@/actions/cust"
import { Auth } from "@/components/auth"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
Field,
FieldError,
@@ -23,9 +32,22 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import type { Cust } from "@/models/cust"
import { BalanceDialog } from "./balanceDialog"
import {
ScopeBalanceActivityReadOfUser,
ScopeBatchReadOfUser,
ScopeBillReadOfUser,
ScopeChannelReadOfUser,
ScopeResourceRead,
ScopeTradeReadOfUser,
ScopeUserWrite,
ScopeUserWriteBalance,
ScopeUserWriteBalanceDec,
ScopeUserWriteBalanceInc,
} from "@/lib/scopes"
import type { User } from "@/models/user"
import { AddUserDialog } from "./create"
import { DeductionDialog } from "./deduction"
import { DepositDialog } from "./deposit"
import { UpdateDialog } from "./update"
type FilterValues = {
@@ -63,13 +85,9 @@ const filterSchema = z
type FormValues = z.infer<typeof filterSchema>
export default function UserPage() {
export default function CustPage() {
const [filters, setFilters] = useState<FilterValues>({})
const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
const [currentEditUser, setCurrentEditUser] = useState<Cust | null>(null)
const [balanceDialog, setBalanceDialog] = useState(false)
const [balance, setBalance] = useState<Cust | null>(null)
const router = useRouter()
const { control, handleSubmit, reset } = useForm<FormValues>({
resolver: zodResolver(filterSchema),
defaultValues: {
@@ -87,12 +105,12 @@ export default function UserPage() {
[filters],
)
const table = useDataTable<Cust>(fetchUsers)
const table = useDataTable<User>(fetchUsers)
const onFilter = handleSubmit(data => {
const result: FilterValues = {}
if (data.account) result.account = data.account
if (data.name) result.name = data.name
if (data.account?.trim()) result.account = data.account.trim()
if (data.name?.trim()) result.name = data.name.trim()
if (data.identified && data.identified !== "all")
result.identified = data.identified === "1"
if (data.enabled && data.enabled !== "all")
@@ -106,8 +124,8 @@ export default function UserPage() {
}, [table])
return (
<div className="space-y-3">
<form onSubmit={onFilter} className="bg-white p-4">
<Page>
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
<div className="flex flex-wrap items-end gap-4">
<Controller
name="account"
@@ -180,6 +198,7 @@ export default function UserPage() {
</Field>
)}
/>
<Controller
name="created_at_start"
control={control}
@@ -212,7 +231,9 @@ export default function UserPage() {
</div>
<FieldGroup className="flex-row justify-start mt-4 gap-2">
<Button type="submit"></Button>
<Auth scope={ScopeUserWrite}>
<AddUserDialog onSuccess={refreshTable} />
</Auth>
<Button
type="button"
variant="outline"
@@ -224,21 +245,23 @@ export default function UserPage() {
>
</Button>
<Button type="button" onClick={() => setIsAddDialogOpen(true)}>
</Button>
<Button type="submit"></Button>
</FieldGroup>
</form>
<Suspense>
<DataTable<Cust>
<DataTable<User>
{...table}
classNames={{ root: "flex-auto overflow-hidden" }}
columns={[
{ header: "ID", accessorKey: "id" },
{ header: "账号", accessorKey: "username" },
{ header: "手机", accessorKey: "phone" },
{ header: "邮箱", accessorKey: "email" },
{ header: "姓名", accessorKey: "name" },
{
header: "创建时间",
accessorKey: "created_at",
cell: ({ row }) =>
format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
},
// { header: "邮箱", accessorKey: "email" },
{
header: "客户来源",
accessorKey: "source",
@@ -268,7 +291,22 @@ export default function UserPage() {
)
},
},
{ header: "折扣", accessorKey: "discount.name" },
{ header: "账号", accessorKey: "username" },
{
header: "账号状态",
accessorKey: "status",
cell: ({ row }) => (row.original.status === 1 ? "正常" : "禁用"),
},
{ header: "客户经理", accessorKey: "admin.name" },
{ header: "姓名", accessorKey: "name" },
{
header: "身份证号",
accessorKey: "id_no",
cell: ({ row }) => {
const idNo = row.original.id_no
return idNo ? `${idNo.slice(0, 6)}****${idNo.slice(-4)}` : ""
},
},
{
header: "实名状态",
accessorKey: "id_type",
@@ -286,18 +324,22 @@ export default function UserPage() {
),
},
{
header: "身份证号",
accessorKey: "id_no",
cell: ({ row }) => {
const idNo = row.original.id_no
return idNo ? `${idNo.slice(0, 6)}****${idNo.slice(-4)}` : "-"
},
header: "最后登录时间",
accessorKey: "last_login",
cell: ({ row }) =>
row.original.last_login
? format(
new Date(row.original.last_login),
"yyyy-MM-dd HH:mm",
)
: "",
},
{
header: "账号状态",
accessorKey: "status",
cell: ({ row }) => (row.original.status === 1 ? "正常" : "禁用"),
header: "最后登录IP",
accessorKey: "last_login_ip",
cell: ({ row }) => row.original.last_login_ip || "",
},
{ header: "折扣", accessorKey: "discount.name" },
{
header: "联系方式",
cell: ({ row }) => {
@@ -314,55 +356,114 @@ export default function UserPage() {
)
},
},
{ header: "客户经理", accessorKey: "admin.name" },
{
header: "最后登录时间",
accessorKey: "last_login",
cell: ({ row }) =>
row.original.last_login
? format(
new Date(row.original.last_login),
"yyyy-MM-dd HH:mm",
)
: "-",
},
{
header: "最后登录IP",
accessorKey: "last_login_ip",
cell: ({ row }) => row.original.last_login_ip || "-",
},
{
header: "创建时间",
accessorKey: "created_at",
cell: ({ row }) =>
format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
},
{
id: "action",
meta: { pin: "right" },
header: "操作",
cell: ({ row }) => {
const user = row.original
return (
<div className="flex gap-2">
<Button
size="sm"
variant="outline"
onClick={() => {
setBalance(row.original)
setBalanceDialog(true)
}}
>
</Button>
<Button
size="sm"
onClick={() => {
setCurrentEditUser(row.original)
setIsEditDialogOpen(true)
}}
>
</Button>
<Auth scope={ScopeUserWriteBalanceInc}>
<DepositDialog
user={row.original}
onSuccess={refreshTable}
/>
</Auth>
<Auth scope={ScopeUserWriteBalanceDec}>
<DeductionDialog
user={row.original}
onSuccess={refreshTable}
/>
</Auth>
<Auth scope={ScopeUserWriteBalance}>
<UpdateDialog
user={row.original}
onSuccess={refreshTable}
/>
</Auth>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="outline">
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-8">
<Auth scope={ScopeTradeReadOfUser}>
<DropdownMenuItem
onClick={() =>
router.push(
`/client/trade?userId=${user.id}&phone=${user.phone}`,
)
}
>
</DropdownMenuItem>
</Auth>
<Auth scope={ScopeBillReadOfUser}>
<DropdownMenuItem
onClick={() =>
router.push(
`/client/billing?userId=${user.id}&phone=${user.phone}`,
)
}
>
</DropdownMenuItem>
</Auth>
<Auth scope={ScopeResourceRead}>
<DropdownMenuItem
onClick={() =>
router.push(
`/client/resources?userId=${user.id}&phone=${user.phone}`,
)
}
>
</DropdownMenuItem>
</Auth>
<Auth scope={ScopeBatchReadOfUser}>
<DropdownMenuItem
onClick={() =>
router.push(
`/client/batch?userId=${user.id}&phone=${user.phone}`,
)
}
>
</DropdownMenuItem>
</Auth>
<Auth scope={ScopeChannelReadOfUser}>
<DropdownMenuItem
onClick={() =>
router.push(
`/client/channel?userId=${user.id}&phone=${user.phone}`,
)
}
>
IP管理
</DropdownMenuItem>
</Auth>
<Auth scope={ScopeBalanceActivityReadOfUser}>
<DropdownMenuItem
onClick={() =>
router.push(
`/client/balance?userId=${user.id}&phone=${user.phone}`,
)
}
>
</DropdownMenuItem>
</Auth>
</DropdownMenuContent>
</DropdownMenu>
</div>
)
},
@@ -370,26 +471,6 @@ export default function UserPage() {
]}
/>
</Suspense>
<AddUserDialog
open={isAddDialogOpen}
onOpenChange={setIsAddDialogOpen}
onSuccess={refreshTable}
/>
<UpdateDialog
open={isEditDialogOpen}
onOpenChange={setIsEditDialogOpen}
currentUser={currentEditUser}
onSuccess={refreshTable}
/>
<BalanceDialog
open={balanceDialog}
onOpenChange={setBalanceDialog}
currentUser={balance}
onSuccess={refreshTable}
/>
</div>
</Page>
)
}

View File

@@ -14,6 +14,7 @@ import {
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import {
Field,
@@ -30,8 +31,8 @@ import {
SelectValue,
} from "@/components/ui/select"
import type { Admin } from "@/models/admin"
import type { Cust } from "@/models/cust"
import type { ProductDiscount } from "@/models/product_discount"
import type { User } from "@/models/user"
// 表单验证规则
const editUserSchema = z
@@ -67,18 +68,12 @@ const editUserSchema = z
export type EditUserFormValues = z.infer<typeof editUserSchema>
interface EditUserDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
currentUser: Cust | null
user: User
onSuccess: () => void
}
export function UpdateDialog({
open,
onOpenChange,
currentUser,
onSuccess,
}: EditUserDialogProps) {
export function UpdateDialog({ user, onSuccess }: EditUserDialogProps) {
const [open, setOpen] = useState(false)
const [admins, setAdmins] = useState<Admin[]>([])
const [discounts, setDiscounts] = useState<ProductDiscount[]>([])
const [isSubmitting, setIsSubmitting] = useState(false)
@@ -133,24 +128,21 @@ export function UpdateDialog({
}, [open])
useEffect(() => {
if (currentUser) {
if (open) {
reset({
id: currentUser.id,
username: currentUser.username,
email: currentUser.email || "",
id: user.id,
username: user.username,
email: user.email || "",
password: "",
confirmPassword: "",
admin_id: currentUser.admin_id ? String(currentUser.admin_id) : "",
discount_id: currentUser.discount_id
? String(currentUser.discount_id)
: "",
status:
currentUser.status !== undefined ? String(currentUser.status) : "",
contact_qq: currentUser.contact_qq || "",
contact_wechat: currentUser.contact_wechat || "",
admin_id: user.admin_id ? String(user.admin_id) : "",
discount_id: user.discount_id ? String(user.discount_id) : "",
status: user.status !== undefined ? String(user.status) : "",
contact_qq: user.contact_qq || "",
contact_wechat: user.contact_wechat || "",
})
}
}, [currentUser, reset])
}, [open, user, reset])
const onSubmit = async (data: EditUserFormValues) => {
setIsSubmitting(true)
@@ -194,7 +186,7 @@ export function UpdateDialog({
const result = await updateCust(updateData)
if (result?.success) {
toast.success("修改成功")
onOpenChange(false)
setOpen(false)
onSuccess()
} else {
toast.error(result?.message || "修改失败")
@@ -213,11 +205,14 @@ export function UpdateDialog({
if (!open) {
reset()
}
onOpenChange(open)
setOpen(open)
}
return (
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogTrigger asChild>
<Button size="sm"></Button>
</DialogTrigger>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle></DialogTitle>

View File

@@ -7,6 +7,7 @@ import {
getPageProductDiscount,
} from "@/actions/product_discount"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import {
AlertDialog,
AlertDialogAction,
@@ -29,7 +30,7 @@ export default function DiscountPage() {
)
return (
<div className="flex flex-col gap-3">
<Page>
{/* 操作栏 */}
<div className="flex justify-between items-stretch">
<div className="flex gap-3">
@@ -76,7 +77,7 @@ export default function DiscountPage() {
]}
/>
</Suspense>
</div>
</Page>
)
}

View File

@@ -0,0 +1,245 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useState } from "react"
import { Controller, useForm } from "react-hook-form"
import z from "zod"
import { Button } from "@/components/ui/button"
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import {
Field,
FieldError,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { toast } from "sonner"
import { createGateway } from "@/actions/gateway"
const schema = z.object({
mac: z.string().regex(/^([0-9A-Fa-f]{2}[:-]){5}[0-9A-Fa-f]{2}$/, {
message: "MAC地址格式不正确请使用如 00:11:22:AA:BB:CC 或 00-11-22-AA-BB-CC 的格式"
}),
ip: z.string().regex(/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/, {
message: "IP地址格式不正确请使用如 192.168.1.1 的格式"
}),
host: z.string().regex(/^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/, {
message: "域名格式不正确,请使用如 example.com 的格式"
}).or(z.literal("")),
type: z.string().optional(),
status: z.string().optional(),
})
export default function CreatePage(props: { onSuccess?: () => void }) {
const [open, setOpen] = useState(false)
const [isLoading, setIsLoading] = useState(false)
const form = useForm({
resolver: zodResolver(schema),
defaultValues: {
mac: "",
ip: "",
host: "",
type: "1",
status: "0",
},
})
const onSubmit = async (data: z.infer<typeof schema>) => {
setIsLoading(true)
try {
const payload = {
mac: data.mac.trim(),
ip: data.ip.trim(),
host: data?.host.trim(),
type: data.type ? Number(data.type) : 0,
status: data.status ? Number(data.status) : 0,
}
const res = await createGateway(payload)
if (res.success) {
toast.success("添加网关成功")
setOpen(false)
props.onSuccess?.()
form.reset()
}else {
toast.error(res.message || "添加失败")
}
} catch (error) {
console.error("添加网关失败:", error)
const message = error instanceof Error ? error.message : error
toast.error(`添加失败: ${message}`)
} finally {
setIsLoading(false)
}
}
const handleCancel = () => {
setOpen(false)
form.reset()
}
const statusOptions = [
{ value: "0", label: "离线" },
{ value: "1", label: "在线" },
]
const typeOptions = [
{ value: "1", label: "自有" },
{ value: "2", label: "白银" },
]
return (
<Dialog
open={open}
onOpenChange={newOpen => {
setOpen(newOpen)
if (!newOpen) {
form.reset()
}
}}
>
<DialogTrigger asChild>
<Button></Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle></DialogTitle>
</DialogHeader>
<form
id="gateway-create"
onSubmit={form.handleSubmit(onSubmit)}
>
<FieldGroup>
<Controller
control={form.control}
name="mac"
render={({ field, fieldState }) => (
<Field>
<FieldLabel htmlFor="gateway-create-mac">MAC地址:</FieldLabel>
<Input
id="gateway-create-mac"
placeholder="请输入MAC地址00:11:22:33:44:55"
{...field}
aria-invalid={fieldState.invalid}
/>
{fieldState.invalid && fieldState.error && (
<FieldError errors={[fieldState.error]} />
)}
</Field>
)}
/>
<Controller
control={form.control}
name="ip"
render={({ field, fieldState }) => (
<Field>
<FieldLabel htmlFor="gateway-create-ip">IP地址:</FieldLabel>
<Input
id="gateway-create-ip"
placeholder="请输入IP地址192.168.1.1"
{...field}
aria-invalid={fieldState.invalid}
/>
{fieldState.invalid && fieldState.error && (
<FieldError errors={[fieldState.error]} />
)}
</Field>
)}
/>
<Controller
control={form.control}
name="host"
render={({ field, fieldState }) => (
<Field>
<FieldLabel htmlFor="gateway-create-host">:</FieldLabel>
<Input
id="gateway-create-host"
placeholder="请输入域名example.com"
{...field}
aria-invalid={fieldState.invalid}
/>
{fieldState.invalid && fieldState.error && (
<FieldError errors={[fieldState.error]} />
)}
</Field>
)}
/>
<Controller
control={form.control}
name="type"
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel></FieldLabel>
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger className="w-full h-9">
<SelectValue placeholder="请选择网关类型" />
</SelectTrigger>
<SelectContent>
{typeOptions.map(option => (
<SelectItem key={option.value} value={option.value}>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
{fieldState.invalid && fieldState.error && (
<FieldError>{fieldState.error?.message}</FieldError>
)}
</Field>
)}
/>
<Controller
control={form.control}
name="status"
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel></FieldLabel>
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger className="w-full h-9">
<SelectValue placeholder="请选择网关状态" />
</SelectTrigger>
<SelectContent>
{statusOptions.map(option => (
<SelectItem key={option.value} value={option.value}>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
{fieldState.invalid && fieldState.error && (
<FieldError>{fieldState.error?.message}</FieldError>
)}
</Field>
)}
/>
</FieldGroup>
</form>
<DialogFooter className="gap-2">
<Button variant="ghost" onClick={handleCancel} disabled={isLoading}>
</Button>
<Button type="submit" form="gateway-create" disabled={isLoading}>
{isLoading ? "添加中..." : "添加"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}

View File

@@ -0,0 +1,77 @@
"use client"
import { format } from "date-fns"
import { Suspense, useState } from "react"
import { toast } from "sonner"
import { getGatewayPage } from "@/actions/gateway"
import { Auth } from "@/components/auth"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Button } from "@/components/ui/button"
import { ScopeProxyWrite } from "@/lib/scopes"
import type { Gateway } from "@/models/gateway"
import CreatePage from "./create"
export default function GatewayPage() {
const [loading, setLoading] = useState(false)
const table = useDataTable((page, size) => getGatewayPage({ page, size }))
return (
<Page>
<Auth scope={ScopeProxyWrite}>
<div className="flex justify-between items-stretch">
<div className="flex gap-3">
<CreatePage onSuccess={table.refresh} />
</div>
</div>
</Auth>
<Suspense>
<DataTable<Gateway>
{...table}
status={loading ? "load" : "done"}
columns={[
{
header: "域名",
accessorKey: "host",
},
{ header: "IP地址", accessorKey: "ip" },
{
header: "MAC地址",
accessorKey: "mac",
},
{
header: "类型",
accessorKey: "type",
cell: ({ row }) => (row.original.type === 1 ? "自有" : "白银"),
},
{
header: "状态",
accessorKey: "status",
cell: ({ row }) => (row.original.status === 0 ? "离线" : "在线"),
},
{
header: "创建时间",
accessorKey: "created_at",
cell: ({ row }) =>
format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
},
{
id: "action",
meta: { pin: "right" },
header: "操作",
cell: ({ row }) => (
<div className="flex gap-2">
<Button className="bg-green-600/60 hover:bg-green-600/60 active:bg-green-600/60">
</Button>
<Button></Button>
</div>
),
},
]}
/>
</Suspense>
</Page>
)
}

View File

@@ -20,7 +20,7 @@ async function Layout(props: { children: ReactNode }) {
const profile = await getProfile()
if (!profile.success) throw new Error("页面渲染失败:无法获取账号信息")
return (
<div className="flex h-screen bg-gray-100">
<div className="flex h-screen overflow-hidden bg-gray-100">
<SetScopes admin={profile.data} />
{/* 侧边栏 */}
@@ -32,7 +32,7 @@ async function Layout(props: { children: ReactNode }) {
<Appbar admin={profile.data} />
{/* 内容区域 */}
<main className="flex-1 overflow-auto p-6">{props.children}</main>
<main className="flex-auto overflow-hidden">{props.children}</main>
</div>
</div>
)

View File

@@ -4,15 +4,18 @@ import {
BarChart3,
ChevronsLeft,
ChevronsRight,
CircleDollarSign,
ClipboardList,
Code,
ComputerIcon,
ContactRound,
DollarSign,
DoorClosedIcon,
FolderCode,
Home,
KeyRound,
type LucideIcon,
Package,
ScanSearch,
Shield,
ShoppingBag,
SquarePercent,
@@ -36,6 +39,7 @@ import {
import {
ScopeAdminRead,
ScopeAdminRoleRead,
ScopeBalanceActivity,
ScopeBatchRead,
ScopeBillRead,
ScopeChannelRead,
@@ -43,9 +47,11 @@ import {
ScopeDiscountRead,
ScopePermissionRead,
ScopeProductRead,
ScopeProxyRead,
ScopeResourceRead,
ScopeTradeRead,
ScopeUserRead,
ScopeUserReadNotBind,
ScopeUserReadOne,
} from "@/lib/scopes"
@@ -98,8 +104,6 @@ interface NavItemProps {
}
function NavItem({ href, icon: Icon, label, requiredScope }: NavItemProps) {
// console.log(requiredScope, "requiredScope")
const { collapsed, isActive } = useNavigation()
const active = isActive(href)
@@ -169,6 +173,12 @@ const menuSections: { title: string; items: NavItemProps[] }[] = [
href: "/user",
icon: Users,
label: "客户认领",
requiredScope: ScopeUserReadNotBind,
},
{
href: "/client/cust",
icon: ScanSearch,
label: "客户查询",
requiredScope: ScopeUserReadOne,
},
{
@@ -183,6 +193,12 @@ const menuSections: { title: string; items: NavItemProps[] }[] = [
label: "交易明细",
requiredScope: ScopeTradeRead,
},
{
href: "/balance",
icon: CircleDollarSign,
label: "余额明细",
requiredScope: ScopeBalanceActivity,
},
{
href: "/billing",
icon: DollarSign,
@@ -226,7 +242,7 @@ const menuSections: { title: string; items: NavItemProps[] }[] = [
},
{
href: "/channel",
icon: Code,
icon: FolderCode,
label: "IP管理",
requiredScope: ScopeChannelRead,
},
@@ -235,6 +251,12 @@ const menuSections: { title: string; items: NavItemProps[] }[] = [
{
title: "系统",
items: [
{
href: "/gateway",
icon: DoorClosedIcon,
label: "网关列表",
requiredScope:ScopeProxyRead
},
{
href: "/admin",
icon: Shield,
@@ -261,9 +283,11 @@ const menuSections: { title: string; items: NavItemProps[] }[] = [
export default function Navigation() {
const [collapsed, setCollapsed] = useState(false)
const pathname = usePathname()
const isActive = (path: string) => {
return path === "/" ? pathname === path : pathname.startsWith(path)
if (path === "/") {
return pathname === path
}
return pathname === path || pathname.startsWith(path + "/")
}
const contextValue: NavigationContextType = {
@@ -277,12 +301,12 @@ export default function Navigation() {
<NavigationContext.Provider value={contextValue}>
<aside
className={twJoin(
"bg-background border-r border-border transition-all duration-300 ease-in-out flex flex-col",
"bg-background border-r border-border transition-all duration-300 ease-in-out flex flex-col h-full",
collapsed ? "w-16" : "w-64",
)}
>
{/* Logo */}
<div className="h-16 flex items-center justify-center border-b border-border">
{/*Logo 区域 */}
<div className="h-16 flex items-center justify-center border-b border-border p-4 shrink-0">
{!collapsed ? (
<span className="text-xl font-bold tracking-wide text-foreground">
@@ -294,7 +318,7 @@ export default function Navigation() {
)}
</div>
{/* Navigation Menu */}
<ScrollArea className="flex-1 py-3">
<ScrollArea className="flex-1 py-3 overflow-hidden">
<nav className="space-y-3">
{menuSections.map((section, idx) => (
<div key={section.title}>
@@ -309,8 +333,7 @@ export default function Navigation() {
</nav>
</ScrollArea>
{/* Toggle Button */}
<div className="p-4 border-t border-border mt-auto">
<div className="p-4 border-t border-border mt-auto shrink-0">
<Button
variant="ghost"
onClick={() => setCollapsed(!collapsed)}

View File

@@ -5,9 +5,12 @@ import {
type Row,
useReactTable,
} from "@tanstack/react-table"
import { Copy } from "lucide-react"
import { Suspense, useCallback, useEffect, useState } from "react"
import { toast } from "sonner"
import { getAllPermissions } from "@/actions/permission"
import { Page } from "@/components/page"
import { Button } from "@/components/ui/button"
import {
Table,
TableBody,
@@ -25,11 +28,41 @@ type Node = {
children: Node[]
}
function toConstName(name: string): string {
return (
"Scope" +
name
.split(/[:_]/)
.map(s => s.charAt(0).toUpperCase() + s.slice(1))
.join("")
)
}
function generateScopeCode(roots: Node[]): string {
function generateNode(node: Node, isRoot: boolean): string[] {
const lines: string[] = []
if (isRoot) {
lines.push(`// ${node.description}`)
}
const constName = toConstName(node.name)
const comment = isRoot ? "" : ` // ${node.description}`
lines.push(`export const ${constName} = "${node.name}"${comment}`)
for (const child of node.children) {
lines.push(...generateNode(child, false))
}
return lines
}
return roots.map(root => generateNode(root, true).join("\n")).join("\n\n")
}
export default function PermissionsPage() {
return (
<Suspense>
<PermissionTable />
</Suspense>
<Page>
<Suspense>
<PermissionTable />
</Suspense>
</Page>
)
}
@@ -95,11 +128,29 @@ function PermissionTable() {
refresh()
}, [refresh])
const handleCopy = useCallback(async () => {
try {
const code = generateScopeCode(data)
await navigator.clipboard.writeText(code)
toast.success("已复制权限代码到剪贴板")
} catch (e) {
toast.error(e instanceof Error ? e.message : "复制失败")
}
}, [data])
return (
<div className="bg-background rounded-lg">
<div className="flex flex-col gap-3 overflow-auto">
{process.env.NODE_ENV === "development" && (
<div>
<Button variant="outline" size="sm" onClick={handleCopy}>
<Copy className="mr-2 h-4 w-4" />
</Button>
</div>
)}
<Table>
<TableHeader>
<TableRow className="h-10">
<TableRow className="h-10 sticky top-0 bg-background">
<TableHead></TableHead>
<TableHead></TableHead>
</TableRow>

View File

@@ -5,6 +5,7 @@ import { toast } from "sonner"
import z from "zod"
import { createProductSku } from "@/actions/product"
import { getAllProductDiscount } from "@/actions/product_discount"
import { ProductCodeField } from "@/components/products"
import { Button } from "@/components/ui/button"
import {
Dialog,
@@ -20,6 +21,7 @@ import {
FieldError,
FieldGroup,
FieldLabel,
FieldSeparator,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
@@ -30,22 +32,44 @@ import {
SelectValue,
} from "@/components/ui/select"
import type { ProductDiscount } from "@/models/product_discount"
import type { SelectedProduct } from "./type"
const schema = z.object({
code: z.string().min(1, "请输入套餐编码"),
name: z.string().min(1, "请输入套餐名称"),
price: z
.string()
.min(1, "请输入单价")
.refine(
v => !Number.isNaN(Number(v)) && Number(v) > 0,
"请输入有效的正数单价",
),
discount_id: z.string().optional(),
})
const schema = z
.object({
code: z.string().min(1, "请输入套餐编码"),
name: z.string().min(1, "请输入套餐名称"),
price: z
.string()
.min(1, "请输入单价")
.refine(
v => !Number.isNaN(Number(v)) && Number(v) > 0,
"请输入有效的正数单价",
),
discount_id: z.string().optional(),
count_min: z.string().min(1, "请输入最低购买数量"),
price_min: z
.string()
.min(1, "请输入最低价格")
.refine(
v => !Number.isNaN(Number(v)) && Number(v) > 0,
"请输入有效的正数价格",
),
})
.refine(
data => {
const price = Number(data.price)
const priceMin = Number(data.price_min)
if (isNaN(price) || isNaN(priceMin)) return true
return price >= priceMin
},
{
message: "单价不能低于最低价格",
path: ["price"],
},
)
export function CreateProductSku(props: {
productId: number
product?: SelectedProduct
onSuccess?: () => void
}) {
const [open, setOpen] = useState(false)
@@ -58,6 +82,7 @@ export function CreateProductSku(props: {
name: "",
price: "",
discount_id: "",
price_min: "",
},
})
@@ -74,9 +99,11 @@ export function CreateProductSku(props: {
}, [open])
const onSubmit = async (data: z.infer<typeof schema>) => {
if (!props.product) return
try {
const resp = await createProductSku({
product_id: props.productId,
product_id: props.product.id,
code: data.code,
name: data.name,
price: data.price,
@@ -84,7 +111,9 @@ export function CreateProductSku(props: {
data.discount_id && data.discount_id !== ""
? Number(data.discount_id)
: undefined,
price_min: data.price_min,
})
if (resp.success) {
form.reset()
toast.success("套餐创建成功")
@@ -109,7 +138,7 @@ export function CreateProductSku(props: {
return (
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogTrigger asChild>
<Button disabled={!props.productId}></Button>
<Button disabled={!props.product}></Button>
</DialogTrigger>
<DialogContent>
@@ -119,25 +148,6 @@ export function CreateProductSku(props: {
<form id="sku-create" onSubmit={form.handleSubmit(onSubmit)}>
<FieldGroup>
<Controller
control={form.control}
name="code"
render={({ field, fieldState }) => (
<Field>
<FieldLabel htmlFor="sku-create-code"></FieldLabel>
<Input
id="sku-create-code"
placeholder="请输入套餐编码"
{...field}
aria-invalid={fieldState.invalid}
/>
{fieldState.invalid && (
<FieldError errors={[fieldState.error]} />
)}
</Field>
)}
/>
<Controller
control={form.control}
name="name"
@@ -162,9 +172,9 @@ export function CreateProductSku(props: {
name="price"
render={({ field, fieldState }) => (
<Field>
<FieldLabel htmlFor="sku-create-price"></FieldLabel>
<FieldLabel htmlFor="sku-update-price"></FieldLabel>
<Input
id="sku-create-price"
id="sku-update-price"
placeholder="请输入单价"
{...field}
aria-invalid={fieldState.invalid}
@@ -175,7 +185,44 @@ export function CreateProductSku(props: {
</Field>
)}
/>
<Controller
control={form.control}
name="price_min"
render={({ field, fieldState }) => (
<Field>
<FieldLabel htmlFor="sku-create-price"></FieldLabel>
<Input
id="sku-create-price"
placeholder="请输入最低价格"
{...field}
aria-invalid={fieldState.invalid}
/>
{fieldState.invalid && (
<FieldError errors={[fieldState.error]} />
)}
</Field>
)}
/>
<Controller
control={form.control}
name="count_min"
render={({ field, fieldState }) => (
<Field>
<FieldLabel htmlFor="sku-create-price">
</FieldLabel>
<Input
id="sku-create-price"
placeholder="请输入最低购买数量"
{...field}
aria-invalid={fieldState.invalid}
/>
{fieldState.invalid && (
<FieldError errors={[fieldState.error]} />
)}
</Field>
)}
/>
<Controller
control={form.control}
name="discount_id"
@@ -203,6 +250,16 @@ export function CreateProductSku(props: {
</Field>
)}
/>
<FieldSeparator />
{props.product && (
<ProductCodeField
control={form.control}
name="code"
code={props.product.code}
/>
)}
</FieldGroup>
</form>

View File

@@ -1,48 +1,44 @@
"use client"
import { format } from "date-fns"
import { Loader2 } from "lucide-react"
import { Suspense, useCallback, useEffect, useMemo, useState } from "react"
import { toast } from "sonner"
import {
deleteProductSku,
activeProductSku,
getAllProduct,
getPageProductSku,
} from "@/actions/product"
import { DataTable, useDataTable } from "@/components/data-table"
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Page } from "@/components/page"
import { SkuCodeBadge } from "@/components/products/format"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import type { ProductCode } from "@/lib/base"
import { cn } from "@/lib/utils"
import type { Product } from "@/models/product"
import type { ProductSku } from "@/models/product_sku"
import { BatchUpdateDiscount } from "./batch-discount"
import { CreateProductSku } from "./create"
import type { SelectedProduct } from "./type"
import { UpdateProductSku } from "./update"
export default function ProductPage() {
const [selected, setSelected] = useState<number | undefined>(undefined)
const [selected, setSelected] = useState<SelectedProduct | undefined>(
undefined,
)
return (
<div className="size-full flex gap-6 items-stretch">
<Page className="flex-row items-stretch">
<Products selected={selected} onSelect={setSelected} />
<ProductSkus selected={selected} />
</div>
</Page>
)
}
function Products(props: {
selected?: number
onSelect?: (id: number) => void
selected?: SelectedProduct
onSelect?: (id: SelectedProduct) => void
}) {
const [list, setList] = useState<Product[]>([])
@@ -54,7 +50,7 @@ function Products(props: {
}, [])
const selected = useMemo(() => {
return list.find(item => item.id === props.selected)
return list.find(item => item.id === props.selected?.id)
}, [list, props.selected])
useEffect(() => {
@@ -62,7 +58,7 @@ function Products(props: {
}, [refresh])
return (
<section className="flex-none basis-64 bg-background rounded-lg">
<section className="flex-none basis-50 bg-background rounded-lg">
<header className="pl-3 pr-1 h-10 border-b flex items-center justify-between">
<h3 className="text-sm"></h3>
</header>
@@ -75,7 +71,7 @@ function Products(props: {
"size-full box-border p-2 rounded-md flex justify-between items-center select-none",
selected?.id === item.id && "bg-primary/20",
)}
onClick={() => props.onSelect?.(item.id)}
onClick={() => props.onSelect?.({ id: item.id, code: item.code })}
>
<div>
<p>{item.name}</p>
@@ -90,10 +86,15 @@ function Products(props: {
)
}
function ProductSkus(props: { selected?: number }) {
function ProductSkus(props: {
selected?: {
id: number
code: ProductCode
}
}) {
const action = useCallback(
(page: number, size: number) =>
getPageProductSku({ page, size, product_id: props.selected }),
getPageProductSku({ page, size, product_id: props.selected?.id }),
[props.selected],
)
@@ -102,12 +103,9 @@ function ProductSkus(props: { selected?: number }) {
return (
<div className="flex-auto overflow-hidden flex flex-col items-stretch gap-3">
<div className="flex gap-3">
<CreateProductSku
productId={props.selected ?? 0}
onSuccess={table.refresh}
/>
<CreateProductSku product={props.selected} onSuccess={table.refresh} />
<BatchUpdateDiscount
productId={props.selected ?? 0}
productId={props.selected?.id ?? 0}
onSuccess={table.refresh}
/>
</div>
@@ -118,19 +116,32 @@ function ProductSkus(props: { selected?: number }) {
}}
{...table}
columns={[
{ header: "套餐编码", accessorKey: "code" },
{
header: "套餐编码",
cell: ({ row }) =>
row.original.product ? (
<SkuCodeBadge
productCode={row.original.product.code}
skuCode={row.original.code}
/>
) : (
row.original.code
),
},
{ header: "套餐名称", accessorKey: "name" },
{ header: "单价", accessorFn: row => Number(row.price).toFixed(2) },
{ header: "单价", accessorFn: row => Number(row.price) },
{ header: "折扣", accessorFn: row => row.discount?.name ?? "—" },
{
header: "最终价格",
header: "折后价",
accessorFn: row => {
const value = row.discount
? (Number(row.price) * Number(row.discount.discount)) / 100
: Number(row.price)
return Number(value.toFixed(2))
return Number(value)
},
},
{ header: "最低价格", accessorKey: "price_min" },
{ header: "最低购买数量", accessorKey: "count_min" },
{
header: "创建时间",
accessorFn: row => format(row.created_at, "yyyy-MM-dd HH:mm"),
@@ -149,7 +160,7 @@ function ProductSkus(props: { selected?: number }) {
sku={row.original}
onSuccess={table.refresh}
/>
<DeleteButton sku={row.original} onSuccess={table.refresh} />
<ActiveButton sku={row.original} onSuccess={table.refresh} />
</div>
),
},
@@ -160,18 +171,22 @@ function ProductSkus(props: { selected?: number }) {
)
}
function DeleteButton(props: { sku: ProductSku; onSuccess?: () => void }) {
function ActiveButton(props: { sku: ProductSku; onSuccess?: () => void }) {
const [loading, setLoading] = useState(false)
const handleConfirm = async () => {
setLoading(true)
try {
const resp = await deleteProductSku(props.sku.id)
const newStatus = props.sku.status === 1 ? 0 : 1
const resp = await activeProductSku({
id: props.sku.id,
status: newStatus,
})
if (resp.success) {
toast.success("删除成功")
toast.success(newStatus === 1 ? "已启用" : "已禁用")
props.onSuccess?.()
} else {
toast.error(resp.message ?? "删除失败")
toast.error(resp.message ?? "操作失败")
}
} catch (error) {
const message = error instanceof Error ? error.message : error
@@ -182,26 +197,17 @@ function DeleteButton(props: { sku: ProductSku; onSuccess?: () => void }) {
}
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button size="sm" variant="destructive" disabled={loading}>
</Button>
</AlertDialogTrigger>
<AlertDialogContent size="sm">
<AlertDialogHeader>
<AlertDialogTitle></AlertDialogTitle>
<AlertDialogDescription>
{props.sku.name}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel></AlertDialogCancel>
<AlertDialogAction variant="destructive" onClick={handleConfirm}>
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<Button
size="sm"
variant={props.sku?.status === 1 ? "outline" : "default"}
onClick={handleConfirm}
disabled={loading}
>
{loading ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<>{props.sku?.status === 1 ? "禁用" : "启用"}</>
)}
</Button>
)
}

View File

@@ -0,0 +1,6 @@
import type { ProductCode } from "@/lib/base"
export type SelectedProduct = {
id: number
code: ProductCode
}

View File

@@ -5,6 +5,7 @@ import { toast } from "sonner"
import z from "zod"
import { updateProductSku } from "@/actions/product"
import { getAllProductDiscount } from "@/actions/product_discount"
import { ProductCodeField } from "@/components/products"
import { Button } from "@/components/ui/button"
import {
Dialog,
@@ -20,6 +21,7 @@ import {
FieldError,
FieldGroup,
FieldLabel,
FieldSeparator,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
@@ -32,18 +34,48 @@ import {
import type { ProductDiscount } from "@/models/product_discount"
import type { ProductSku } from "@/models/product_sku"
const schema = z.object({
code: z.string().min(1, "请输入套餐编码"),
name: z.string().min(1, "请输入套餐名称"),
price: z
.string()
.min(1, "请输入单价")
.refine(
v => !Number.isNaN(Number(v)) && Number(v) > 0,
"请输入有效的正数单价",
),
discount_id: z.string().optional(),
})
const schema = z
.object({
code: z.string().min(1, "请输入套餐编码"),
name: z.string().min(1, "请输入套餐名称"),
price: z
.string()
.min(1, "请输入单价")
.refine(
v => !Number.isNaN(Number(v)) && Number(v) > 0,
"请输入有效的正数单价",
),
discount_id: z.string().optional(),
count_min: z
.string()
.min(1, "请输入最低购买数量")
.refine(
v =>
!Number.isNaN(Number(v)) &&
Number.isInteger(Number(v)) &&
Number(v) > 0,
"请输入有效的正整数",
),
price_min: z
.string()
.min(1, "请输入最低价格")
.refine(
v => !Number.isNaN(Number(v)) && Number(v) > 0,
"请输入有效的正数价格",
),
})
.refine(
data => {
const price = Number(data.price)
const priceMin = Number(data.price_min)
if (isNaN(price) || isNaN(priceMin)) return true
return price >= priceMin
},
{
message: "单价不能低于最低价格",
path: ["price"],
},
)
export function UpdateProductSku(props: {
sku: ProductSku
@@ -59,6 +91,8 @@ export function UpdateProductSku(props: {
name: props.sku.name,
price: props.sku.price,
discount_id: props.sku.discount ? String(props.sku.discount.id) : "",
price_min: props.sku.price_min ?? "",
count_min: String(props.sku.count_min),
},
})
@@ -83,7 +117,11 @@ export function UpdateProductSku(props: {
data.discount_id && data.discount_id !== ""
? Number(data.discount_id)
: null,
price_min: data.price_min,
count_min: Number(data.count_min),
})
console.log(resp, "resp")
if (resp.success) {
toast.success("套餐修改成功")
props.onSuccess?.()
@@ -104,6 +142,8 @@ export function UpdateProductSku(props: {
name: props.sku.name,
price: props.sku.price,
discount_id: props.sku.discount ? String(props.sku.discount.id) : "",
price_min: props.sku.price_min ?? "",
count_min: props.sku.count_min ? String(props.sku.count_min) : "",
})
}
setOpen(value)
@@ -124,25 +164,6 @@ export function UpdateProductSku(props: {
<form id="sku-update" onSubmit={form.handleSubmit(onSubmit)}>
<FieldGroup>
<Controller
control={form.control}
name="code"
render={({ field, fieldState }) => (
<Field>
<FieldLabel htmlFor="sku-update-code"></FieldLabel>
<Input
id="sku-update-code"
placeholder="请输入套餐编码"
{...field}
aria-invalid={fieldState.invalid}
/>
{fieldState.invalid && (
<FieldError errors={[fieldState.error]} />
)}
</Field>
)}
/>
<Controller
control={form.control}
name="name"
@@ -180,7 +201,46 @@ export function UpdateProductSku(props: {
</Field>
)}
/>
<Controller
control={form.control}
name="price_min"
render={({ field, fieldState }) => (
<Field>
<FieldLabel htmlFor="sku-update-price-min">
</FieldLabel>
<Input
id="sku-update-price-min"
placeholder="请输入最低价格"
{...field}
aria-invalid={fieldState.invalid}
/>
{fieldState.invalid && (
<FieldError errors={[fieldState.error]} />
)}
</Field>
)}
/>
<Controller
control={form.control}
name="count_min"
render={({ field, fieldState }) => (
<Field>
<FieldLabel htmlFor="sku-update-count-min">
</FieldLabel>
<Input
id="sku-update-count-min"
placeholder="请输入最低购买数量"
{...field}
aria-invalid={fieldState.invalid}
/>
{fieldState.invalid && (
<FieldError errors={[fieldState.error]} />
)}
</Field>
)}
/>
<Controller
control={form.control}
name="discount_id"
@@ -208,6 +268,16 @@ export function UpdateProductSku(props: {
</Field>
)}
/>
<FieldSeparator />
{props.sku.product && (
<ProductCodeField
control={form.control}
name="code"
code={props.sku.product.code}
/>
)}
</FieldGroup>
</form>

View File

@@ -1,625 +0,0 @@
"use client"
import Link from "next/link"
import { useEffect, useState } from "react"
// 定义节点数据接口
interface ProxyNode {
id: string
ipAddress: string
location: {
country: string
region: string
}
type: string
status: "online" | "offline" | "warning"
responseTime: number
lastCheckTime: string
pool: string
isStatic: boolean
}
export type ProxyNodesPageProps = {}
export default function ProxyNodesPage(props: ProxyNodesPageProps) {
const [loading, setLoading] = useState<boolean>(true)
const [nodes, setNodes] = useState<ProxyNode[]>([])
const [searchTerm, setSearchTerm] = useState<string>("")
const [filterStatus, setFilterStatus] = useState<string>("all")
const [filterType, setFilterType] = useState<string>("all")
const [filterPool, setFilterPool] = useState<string>("all")
// 模拟数据加载
useEffect(() => {
setTimeout(() => {
setNodes([
{
id: "ip-1",
ipAddress: "203.45.167.82",
location: { country: "美国", region: "纽约" },
type: "数据中心",
status: "online",
responseTime: 126,
lastCheckTime: "2024-05-10 15:30:22",
pool: "北美专用池",
isStatic: true,
},
{
id: "ip-2",
ipAddress: "185.72.193.54",
location: { country: "德国", region: "法兰克福" },
type: "住宅",
status: "online",
responseTime: 158,
lastCheckTime: "2024-05-10 15:28:45",
pool: "欧洲高速池",
isStatic: false,
},
{
id: "ip-3",
ipAddress: "118.96.244.105",
location: { country: "新加坡", region: "中心区" },
type: "移动",
status: "warning",
responseTime: 312,
lastCheckTime: "2024-05-10 15:25:12",
pool: "亚太地区池",
isStatic: false,
},
{
id: "ip-4",
ipAddress: "45.178.29.6",
location: { country: "加拿大", region: "多伦多" },
type: "数据中心",
status: "online",
responseTime: 143,
lastCheckTime: "2024-05-10 15:23:08",
pool: "北美专用池",
isStatic: false,
},
{
id: "ip-5",
ipAddress: "79.114.83.201",
location: { country: "英国", region: "伦敦" },
type: "住宅",
status: "offline",
responseTime: 0,
lastCheckTime: "2024-05-10 15:18:33",
pool: "欧洲高速池",
isStatic: false,
},
{
id: "ip-6",
ipAddress: "164.83.219.47",
location: { country: "日本", region: "东京" },
type: "住宅",
status: "online",
responseTime: 87,
lastCheckTime: "2024-05-10 15:15:21",
pool: "亚太地区池",
isStatic: true,
},
{
id: "ip-7",
ipAddress: "221.67.93.143",
location: { country: "中国", region: "上海" },
type: "移动",
status: "online",
responseTime: 104,
lastCheckTime: "2024-05-10 15:10:46",
pool: "亚太地区池",
isStatic: false,
},
{
id: "ip-8",
ipAddress: "37.209.148.72",
location: { country: "法国", region: "巴黎" },
type: "数据中心",
status: "warning",
responseTime: 276,
lastCheckTime: "2024-05-10 15:05:19",
pool: "欧洲高速池",
isStatic: false,
},
])
setLoading(false)
}, 800)
}, [])
// 过滤节点数据
const filteredNodes = nodes.filter(node => {
return (
(searchTerm === "" ||
node.ipAddress.includes(searchTerm) ||
node.location.country.includes(searchTerm) ||
node.pool.includes(searchTerm)) &&
(filterStatus === "all" ||
(filterStatus === "online" && node.status === "online") ||
(filterStatus === "offline" && node.status === "offline") ||
(filterStatus === "warning" && node.status === "warning")) &&
(filterType === "all" || node.type === filterType) &&
(filterPool === "all" || node.pool === filterPool)
)
})
return (
<div className="space-y-5">
{/* 概览区域 - 使用色块和留白风格 */}
<div className="border border-gray-200 rounded-lg overflow-hidden">
{/* 标题区域 - 简洁风格 */}
<div className="bg-white px-5 py-4">
<div className="flex justify-between items-center">
<h1 className="text-lg font-bold text-gray-900"></h1>
<div className="flex gap-2">
<button className="bg-gray-50 border border-gray-200 text-gray-700 px-3 py-1.5 rounded-md text-sm font-medium flex items-center hover:bg-gray-100">
<svg
className="w-4 h-4 mr-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
/>
</svg>
</button>
<button className="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded-md text-sm font-medium flex items-center">
<svg
className="w-4 h-4 mr-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/>
</svg>
</button>
</div>
</div>
<p className="mt-1 text-sm text-gray-500">
IP资源
</p>
</div>
{/* 统计信息区域 - 色块风格 */}
<div className="grid grid-cols-4 gap-px bg-gray-100">
{/* 总IP数量 */}
<div className="bg-white p-4">
<div className="flex items-center">
<div className="w-10 h-10 flex items-center justify-center bg-blue-50 rounded-md">
<svg
className="h-5 w-5 text-blue-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9"
/>
</svg>
</div>
<div className="ml-3">
<p className="text-xs font-medium text-gray-500">IP数量</p>
<div className="text-lg font-semibold text-gray-900">
152,487
</div>
</div>
</div>
</div>
{/* 在线IP */}
<div className="bg-white p-4">
<div className="flex items-center">
<div className="w-10 h-10 flex items-center justify-center bg-green-50 rounded-md">
<svg
className="h-5 w-5 text-green-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div className="ml-3">
<div className="flex items-center">
<p className="text-xs font-medium text-gray-500">线IP</p>
<span className="ml-2 text-xs font-medium text-green-600">
91%
</span>
</div>
<div className="text-lg font-semibold text-gray-900">
138,954
</div>
</div>
</div>
</div>
{/* IP池分布 */}
<div className="bg-white p-4">
<div className="flex items-center">
<div className="w-10 h-10 flex items-center justify-center bg-indigo-50 rounded-md">
<svg
className="h-5 w-5 text-indigo-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
/>
</svg>
</div>
<div className="ml-3">
<div className="flex items-center">
<p className="text-xs font-medium text-gray-500">IP池分布</p>
<span className="ml-2 text-xs font-medium text-gray-500">
5
</span>
</div>
<div className="text-lg font-semibold text-gray-900">12</div>
</div>
</div>
</div>
{/* 异常IP */}
<div className="bg-white p-4">
<div className="flex items-center">
<div className="w-10 h-10 flex items-center justify-center bg-red-50 rounded-md">
<svg
className="h-5 w-5 text-red-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
</div>
<div className="ml-3">
<div className="flex items-center">
<p className="text-xs font-medium text-gray-500">IP</p>
<span className="ml-2 text-xs font-medium text-red-600">
</span>
</div>
<div className="text-lg font-semibold text-gray-900">1,205</div>
</div>
</div>
</div>
</div>
</div>
{/* 数据展示 */}
<div className="border border-gray-200 rounded-lg overflow-hidden">
{/* 筛选搜索区域 */}
<div className="bg-white p-4 border-b border-gray-200">
<div className="grid grid-cols-1 gap-4 md:grid-cols-12">
{/* 搜索框 */}
<div className="relative md:col-span-5">
<input
type="text"
placeholder="搜索IP地址、地区或标签..."
className="w-full px-3 py-2 bg-gray-50 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
/>
<svg
className="absolute right-3 top-2.5 h-4 w-4 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</div>
{/* 筛选区域 */}
<div className="flex space-x-3 md:col-span-7">
<select
className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white text-gray-700 flex-1"
value={filterStatus}
onChange={e => setFilterStatus(e.target.value)}
>
<option value="all"></option>
<option value="online">线</option>
<option value="offline">线</option>
<option value="warning"></option>
</select>
<select
className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white text-gray-700 flex-1"
value={filterType}
onChange={e => setFilterType(e.target.value)}
>
<option value="all"></option>
<option value="数据中心"></option>
<option value="住宅"></option>
<option value="移动"></option>
</select>
<select
className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white text-gray-700 flex-1"
value={filterPool}
onChange={e => setFilterPool(e.target.value)}
>
<option value="all"></option>
<option value="北美专用池"></option>
<option value="欧洲高速池"></option>
<option value="亚太地区池"></option>
</select>
</div>
</div>
</div>
{/* IP表格区域 */}
{loading ? (
<div className="p-12 flex justify-center items-center bg-white">
<svg
className="animate-spin h-6 w-6 text-blue-600"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</div>
) : (
<div className="overflow-x-auto bg-white">
<table className="min-w-full">
<thead>
<tr>
<th
scope="col"
className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
>
IP地址
</th>
<th
scope="col"
className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
>
</th>
<th
scope="col"
className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
>
</th>
<th
scope="col"
className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
>
</th>
<th
scope="col"
className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
>
</th>
<th
scope="col"
className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
>
</th>
<th
scope="col"
className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200 bg-gray-50"
>
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
{filteredNodes.map((node, index) => (
<tr
key={node.id}
className={index % 2 === 0 ? "bg-white" : "bg-gray-50"}
>
<td className="px-4 py-3 whitespace-nowrap text-sm">
<div className="flex items-center">
<span
className={`w-2 h-2 rounded-full mr-2 ${
node.status === "online"
? "bg-green-500"
: node.status === "offline"
? "bg-red-500"
: "bg-yellow-500"
}`}
></span>
<span className="font-medium text-gray-900">
{node.ipAddress}
</span>
{node.isStatic && (
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
</span>
)}
</div>
</td>
<td className="px-4 py-3 whitespace-nowrap text-sm">
<div className="text-gray-900">
{node.location.country}
</div>
<div className="text-xs text-gray-500">
{node.location.region}
</div>
</td>
<td className="px-4 py-3 whitespace-nowrap">
<span
className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
node.type === "数据中心"
? "bg-purple-100 text-purple-800"
: node.type === "住宅"
? "bg-blue-100 text-blue-800"
: "bg-indigo-100 text-indigo-800"
}`}
>
{node.type}
</span>
</td>
<td className="px-4 py-3 whitespace-nowrap text-sm">
<span
className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
node.status === "online"
? "bg-green-100 text-green-800"
: node.status === "offline"
? "bg-red-100 text-red-800"
: "bg-yellow-100 text-yellow-800"
}`}
>
{node.status === "online"
? "在线"
: node.status === "offline"
? "离线"
: "异常"}
</span>
</td>
<td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
{node.responseTime > 0 ? (
<div className="flex items-center">
<span
className={`font-medium ${
node.responseTime < 150
? "text-green-600"
: node.responseTime < 250
? "text-yellow-600"
: "text-red-600"
}`}
>
{node.responseTime} ms
</span>
</div>
) : (
<span className="text-gray-400">-</span>
)}
</td>
<td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
{node.pool}
</td>
<td className="px-4 py-3 whitespace-nowrap text-right text-sm font-medium space-x-2">
<Link
href={`/proxy/nodes/${node.id}`}
className="text-blue-600 hover:text-blue-900"
>
</Link>
<button className="text-gray-600 hover:text-gray-900">
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
{/* 分页控制 */}
<div className="bg-gray-50 px-5 py-3 border-t border-gray-200">
<div className="flex items-center justify-between">
<div className="text-sm text-gray-700">
<span className="font-medium">1</span> {" "}
<span className="font-medium">8</span> {" "}
<span className="font-medium">152,487</span>
</div>
<div>
<nav className="relative z-0 inline-flex -space-x-px">
<button className="relative inline-flex items-center px-2 py-1.5 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg
className="h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clipRule="evenodd"
/>
</svg>
</button>
<button className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium hover:bg-gray-50 text-blue-600 bg-blue-50 border-blue-300">
1
</button>
<button className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
2
</button>
<button className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
3
</button>
<span className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700">
...
</span>
<button className="relative inline-flex items-center px-3 py-1.5 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
152
</button>
<button className="relative inline-flex items-center px-2 py-1.5 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg
className="h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clipRule="evenodd"
/>
</svg>
</button>
</nav>
</div>
</div>
</div>
</div>
</div>
)
}

View File

@@ -1,527 +0,0 @@
"use client"
import Link from "next/link"
import { useEffect, useState } from "react"
export type ProxyPoolsPageProps = {}
// 定义IP池接口
interface ProxyPool {
id: string
name: string
description: string
ips: number
activeIps: number
region: string
type: string
createdAt: string
status: "active" | "inactive" | "maintenance"
}
export default function ProxyPoolsPage(props: ProxyPoolsPageProps) {
const [pools, setPools] = useState<ProxyPool[]>([])
const [loading, setLoading] = useState<boolean>(true)
const [searchTerm, setSearchTerm] = useState<string>("")
const [filterStatus, setFilterStatus] = useState<string>("all")
const [filterRegion, setFilterRegion] = useState<string>("all")
// 模拟数据加载
useEffect(() => {
// 实际项目中替换为API调用
setTimeout(() => {
setPools([
{
id: "pool-1",
name: "全球通用池",
description: "包含全球多个地区的高质量IP",
ips: 5000,
activeIps: 4328,
region: "全球",
type: "住宅IP",
createdAt: "2023-10-15",
status: "active",
},
{
id: "pool-2",
name: "北美专用池",
description: "美国和加拿大地区专用IP池",
ips: 3200,
activeIps: 2950,
region: "北美",
type: "数据中心IP",
createdAt: "2023-11-02",
status: "active",
},
{
id: "pool-3",
name: "欧洲高速池",
description: "欧洲地区高速稳定IP",
ips: 2800,
activeIps: 2180,
region: "欧洲",
type: "住宅IP",
createdAt: "2023-09-28",
status: "active",
},
{
id: "pool-4",
name: "亚太地区池",
description: "亚洲和太平洋地区IP",
ips: 4200,
activeIps: 3890,
region: "亚太",
type: "移动IP",
createdAt: "2023-12-05",
status: "maintenance",
},
{
id: "pool-5",
name: "电商专用池",
description: "适用于电商平台的IP池",
ips: 1500,
activeIps: 1200,
region: "全球",
type: "住宅IP",
createdAt: "2024-01-10",
status: "inactive",
},
])
setLoading(false)
}, 800)
}, [])
// 过滤IP池
const filteredPools = pools.filter(pool => {
return (
(searchTerm === "" ||
pool.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
pool.description.toLowerCase().includes(searchTerm.toLowerCase())) &&
(filterStatus === "all" || pool.status === filterStatus) &&
(filterRegion === "all" || pool.region === filterRegion)
)
})
// 获取状态颜色和文本
const getStatusInfo = (status: string) => {
switch (status) {
case "active":
return { color: "bg-green-100 text-green-800", text: "运行中" }
case "inactive":
return { color: "bg-gray-100 text-gray-800", text: "未启用" }
case "maintenance":
return { color: "bg-yellow-100 text-yellow-800", text: "维护中" }
default:
return { color: "bg-gray-100 text-gray-800", text: "未知" }
}
}
return (
<div className="space-y-6">
{/* 页面标题 */}
<div className="flex justify-between items-center">
<div>
<h1 className="text-2xl font-bold text-gray-900">IP池管理</h1>
<p className="mt-1 text-sm text-gray-500">IP池</p>
</div>
<button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
<svg
className="w-4 h-4 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/>
</svg>
IP池
</button>
</div>
{/* 筛选和搜索工具栏 */}
<div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
<div className="relative">
<input
type="text"
placeholder="搜索IP池..."
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
value={searchTerm}
onChange={e => setSearchTerm(e.target.value)}
/>
<svg
className="absolute right-3 top-2.5 h-5 w-5 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</div>
<div className="flex space-x-4">
<div className="w-full">
<label className="block text-sm font-medium text-gray-700 mb-1">
</label>
<select
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
value={filterStatus}
onChange={e => setFilterStatus(e.target.value)}
>
<option value="all"></option>
<option value="active"></option>
<option value="inactive"></option>
<option value="maintenance"></option>
</select>
</div>
</div>
<div className="w-full">
<label className="block text-sm font-medium text-gray-700 mb-1">
</label>
<select
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
value={filterRegion}
onChange={e => setFilterRegion(e.target.value)}
>
<option value="all"></option>
<option value="全球"></option>
<option value="北美"></option>
<option value="欧洲"></option>
<option value="亚太"></option>
</select>
</div>
</div>
</div>
{/* IP池列表 */}
<div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
{loading ? (
<div className="p-8 flex justify-center">
<svg
className="animate-spin h-8 w-8 text-blue-600"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</div>
) : filteredPools.length === 0 ? (
<div className="p-8 text-center">
<svg
className="mx-auto h-12 w-12 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p className="mt-4 text-gray-500 text-lg">IP池</p>
</div>
) : (
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
IP池名称
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
IP概况
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
IP类型
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
</th>
<th
scope="col"
className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
>
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{filteredPools.map(pool => {
const statusInfo = getStatusInfo(pool.status)
return (
<tr key={pool.id} className="hover:bg-gray-50">
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
<div>
<div className="text-sm font-medium text-gray-900">
{pool.name}
</div>
<div className="text-sm text-gray-500 max-w-xs truncate">
{pool.description}
</div>
</div>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">
IP: {pool.ips.toLocaleString()}
</div>
<div className="text-sm text-gray-500">
IP: {pool.activeIps.toLocaleString()}
</div>
<div className="w-full bg-gray-200 rounded-full h-1.5 mt-1.5">
<div
className="bg-blue-600 h-1.5 rounded-full"
style={{
width: `${(pool.activeIps / pool.ips) * 100}%`,
}}
></div>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">
{pool.region}
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">{pool.type}</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span
className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusInfo.color}`}
>
{statusInfo.text}
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{pool.createdAt}
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<Link
href={`/proxy/pools/${pool.id}`}
className="text-blue-600 hover:text-blue-900 mr-4"
>
</Link>
<Link
href={`/proxy/pools/${pool.id}/edit`}
className="text-indigo-600 hover:text-indigo-900 mr-4"
>
</Link>
<button className="text-red-600 hover:text-red-900">
</button>
</td>
</tr>
)
})}
</tbody>
</table>
</div>
)}
</div>
{/* 数据卡片概览 */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div className="flex items-center">
<div className="p-3 rounded-full bg-blue-100 text-blue-600">
<svg
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
/>
</svg>
</div>
<div className="ml-4">
<h3 className="text-lg font-medium text-gray-900">IP池</h3>
<div className="mt-1 text-3xl font-semibold">{pools.length}</div>
</div>
</div>
<div className="mt-4">
<div className="flex justify-between text-sm">
<span className="text-gray-500">IP池</span>
<span className="font-medium text-gray-900">
{pools.filter(p => p.status === "active").length}
</span>
</div>
</div>
</div>
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div className="flex items-center">
<div className="p-3 rounded-full bg-green-100 text-green-600">
<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>
</div>
<div className="ml-4">
<h3 className="text-lg font-medium text-gray-900">IP数量</h3>
<div className="mt-1 text-3xl font-semibold">
{pools
.reduce((sum, pool) => sum + pool.ips, 0)
.toLocaleString()}
</div>
</div>
</div>
<div className="mt-4">
<div className="flex justify-between text-sm">
<span className="text-gray-500">IP</span>
<span className="font-medium text-gray-900">
{pools
.reduce((sum, pool) => sum + pool.activeIps, 0)
.toLocaleString()}
</span>
</div>
</div>
</div>
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div className="flex items-center">
<div className="p-3 rounded-full bg-purple-100 text-purple-600">
<svg
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div className="ml-4">
<h3 className="text-lg font-medium text-gray-900">IP利用率</h3>
<div className="mt-1 text-3xl font-semibold">
{Math.round(
(pools.reduce((sum, pool) => sum + pool.activeIps, 0) /
pools.reduce((sum, pool) => sum + pool.ips, 0)) *
100,
)}
%
</div>
</div>
</div>
<div className="mt-4">
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className="bg-purple-600 h-2 rounded-full"
style={{
width: `${
(pools.reduce((sum, pool) => sum + pool.activeIps, 0) /
pools.reduce((sum, pool) => sum + pool.ips, 0)) *
100
}%`,
}}
></div>
</div>
</div>
</div>
</div>
{/* 操作指南 */}
<div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
<div className="flex">
<div className="flex-shrink-0">
<svg
className="h-5 w-5 text-blue-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-blue-700">
IP池是管理IP资源的基础单位IP池访
</p>
<p className="mt-3 text-sm md:mt-0 md:ml-6">
<a
href="/help/proxy-pools"
className="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600"
>
<span aria-hidden="true">&rarr;</span>
</a>
</p>
</div>
</div>
</div>
</div>
)
}

View File

@@ -1,5 +0,0 @@
export type ProxySourcesPageProps = {}
export default function ProxySourcesPage(props: ProxySourcesPageProps) {
return <div></div>
}

View File

@@ -12,6 +12,7 @@ import {
updateResource,
} from "@/actions/resources"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
@@ -169,30 +170,28 @@ function getTodayUsage(lastAt: Date | null | undefined, daily: number) {
export default function ResourcesPage() {
return (
<div>
<Tabs defaultValue="short">
<TabsList className="bg-card p-1.5 rounded-lg">
<TabsTrigger
value="short"
className="w-30 h-9 data-[state=active]:bg-primary-muted text-base rounded-md"
>
<Page>
<Tabs defaultValue="short" className="overflow-hidden">
<TabsList className="bg-card">
<TabsTrigger value="short" className="h-10 px-4 shadow-none">
</TabsTrigger>
<TabsTrigger
value="long"
className="w-30 h-9 data-[state=active]:bg-primary-muted text-base rounded-md"
>
<TabsTrigger value="long" className="h-10 px-4 shadow-none">
</TabsTrigger>
</TabsList>
<TabsContent value="short" className="flex flex-col gap-4">
<TabsContent
value="short"
className="flex flex-col gap-4 overflow-hidden"
>
<ResourceList resourceType="short" />
</TabsContent>
<TabsContent value="long" className="flex flex-col gap-4">
<ResourceList resourceType="long" />
</TabsContent>
</Tabs>
</div>
</Page>
)
}
@@ -226,7 +225,7 @@ function ResourceList({ resourceType }: ResourceListProps) {
)
const table = useDataTable<Resources>(fetchResources)
console.log(table, "我的套餐的table")
const refreshTable = useCallback(() => {
setFilters(prev => ({ ...prev }))
}, [])
@@ -281,10 +280,9 @@ function ResourceList({ resourceType }: ResourceListProps) {
const columns = useMemo(
() => [
{ header: "ID", accessorKey: "id" },
{
header: "会员号",
accessorFn: (row: Resources) => row.user?.phone || "-",
accessorFn: (row: Resources) => row.user?.phone || "",
},
{
header: "套餐",
@@ -422,8 +420,8 @@ function ResourceList({ resourceType }: ResourceListProps) {
)
return (
<div className="space-y-3">
<form onSubmit={onFilter} className="bg-white p-4 rounded-lg">
<div className="flex flex-col gap-3 overflow-hidden">
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg flex-none">
<div className="flex flex-wrap items-end gap-4">
<Controller
name="user_phone"
@@ -543,7 +541,7 @@ function ResourceList({ resourceType }: ResourceListProps) {
/>
</div>
<FieldGroup className="flex-row justify-start mt-4 gap-2">
<Button type="submit"></Button>
<Button type="submit"></Button>
<Button
type="button"
variant="outline"
@@ -559,7 +557,13 @@ function ResourceList({ resourceType }: ResourceListProps) {
</form>
<Suspense fallback={<div className="text-center p-4">...</div>}>
<DataTable<Resources> {...table} columns={columns} />
<DataTable<Resources>
{...table}
columns={columns}
classNames={{
root: "flex-auto overflow-hidden",
}}
/>
</Suspense>
</div>
)

View File

@@ -3,6 +3,7 @@ import { Suspense, useState } from "react"
import { toast } from "sonner"
import { deleteRole, getPageRole, updateRole } from "@/actions/role"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import {
AlertDialog,
AlertDialogAction,
@@ -31,7 +32,7 @@ export default function RolesPage() {
const table = useDataTable((page, size) => getPageRole({ page, size }))
return (
<div className="flex flex-col gap-3">
<Page>
{/* 操作栏 */}
<div className="flex justify-between items-stretch">
<div className="flex gap-3">
@@ -78,7 +79,7 @@ export default function RolesPage() {
]}
/>
</Suspense>
</div>
</Page>
)
}

View File

@@ -2,11 +2,12 @@
import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import { CheckCircle, Clock, XCircle } from "lucide-react"
import { Suspense, useState } from "react"
import { Suspense, useCallback, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"
import { getPageTrade } from "@/actions/trade"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Button } from "@/components/ui/button"
import {
Field,
@@ -82,9 +83,14 @@ export default function TradePage() {
},
})
const table = useDataTable<Trade>((page, size) =>
getPageTrade({ page, size, ...filters }),
const fetchTrades = useCallback(
(page: number, size: number) => {
return getPageTrade({ page, size, ...filters })
},
[filters],
)
const table = useDataTable<Trade>(fetchTrades)
const onFilter = handleSubmit(data => {
const result: FilterValues = {}
@@ -106,9 +112,9 @@ export default function TradePage() {
})
return (
<div className="space-y-3">
<Page>
{/* 筛选表单 */}
<form onSubmit={onFilter} className="bg-white p-4">
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
<div className="flex flex-wrap items-end gap-4">
<Controller
name="user_phone"
@@ -239,7 +245,7 @@ export default function TradePage() {
</div>
<FieldGroup className="flex-row justify-start mt-4 gap-2">
<Button type="submit"></Button>
<Button type="submit"></Button>
<Button
type="button"
variant="outline"
@@ -258,37 +264,15 @@ export default function TradePage() {
<DataTable<Trade>
{...table}
columns={[
{ header: "ID", accessorKey: "id" },
{
header: "会员号",
accessorFn: row => row.user?.phone || "-",
},
{
header: "订单号",
accessorKey: "inner_no",
},
{
header: "渠道订单号",
accessorKey: "outer_no",
},
{
header: "支付渠道",
accessorKey: "method",
cell: ({ row }) => {
const methodMap: Record<number, string> = {
1: "支付宝",
2: "微信",
3: "商福通",
4: "商福通渠道支付宝",
5: "商福通渠道微信",
}
return (
<div>
{methodMap[row.original.method as number] || "未知"}
</div>
)
},
header: "创建时间",
accessorKey: "created_at",
cell: ({ row }) =>
format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
},
{ header: "会员号", accessorFn: row => row.user?.phone || "" },
{ header: "订单号", accessorKey: "inner_no" },
{ header: "购买套餐", accessorKey: "subject" },
{
header: "支付金额",
accessorKey: "payment",
@@ -310,25 +294,6 @@ export default function TradePage() {
)
},
},
{
header: "支付平台",
accessorKey: "platform",
cell: ({ row }) => {
const platform = row.original.platform
if (!platform) return <span>-</span>
return (
<div className="flex items-center gap-2">
{platform === 1 ? (
<span></span>
) : platform === 2 ? (
<span></span>
) : (
<span>-</span>
)}
</div>
)
},
},
{
header: "支付状态",
accessorKey: "status",
@@ -362,16 +327,47 @@ export default function TradePage() {
}
},
},
{ header: "购买套餐", accessorKey: "subject" },
{
header: "创建时间",
accessorKey: "created_at",
cell: ({ row }) =>
format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
header: "支付平台",
accessorKey: "platform",
cell: ({ row }) => {
const platform = row.original.platform
if (!platform) return <span>-</span>
return (
<div className="flex items-center gap-2">
{platform === 1 ? (
<span></span>
) : platform === 2 ? (
<span></span>
) : (
<span>-</span>
)}
</div>
)
},
},
{
header: "支付渠道",
accessorKey: "method",
cell: ({ row }) => {
const methodMap: Record<number, string> = {
1: "支付宝",
2: "微信",
3: "商福通",
4: "商福通渠道支付宝",
5: "商福通渠道微信",
}
return (
<div>
{methodMap[row.original.method as number] || "未知"}
</div>
)
},
},
{ header: "渠道订单号", accessorKey: "outer_no" },
]}
/>
</Suspense>
</div>
</Page>
)
}

View File

@@ -3,10 +3,11 @@ import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import { Suspense, useCallback, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"
import { bindAdmin, getPageUser } from "@/actions/user"
import { DataTable } from "@/components/data-table"
import { bindAdmin, getPageUserPage } from "@/actions/user"
import { Auth } from "@/components/auth"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
@@ -16,113 +17,63 @@ import {
FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { useFetch } from "@/hooks/data"
import { ScopeUserWriteBind } from "@/lib/scopes"
import type { User } from "@/models/user"
interface UserQueryParams {
account?: string
name?: string
interface FilterValues {
phone?: string
}
const filterSchema = z.object({
account: z.string().optional(),
name: z.string().optional(),
phone: z.string().optional(),
})
type FormValues = z.infer<typeof filterSchema>
export default function UserPage() {
const [userList, setUserList] = useState<User[]>([])
const [filters, setFilters] = useState<FilterValues>({})
const [loading, setLoading] = useState(false)
const { control, handleSubmit, reset } = useForm<FormValues>({
resolver: zodResolver(filterSchema),
defaultValues: {
account: "",
name: "",
phone: "",
},
})
const fetchUsers = useCallback(async (filters: UserQueryParams = {}) => {
setLoading(true)
try {
const res = await getPageUser(filters)
if (res.success) {
const req = [{ ...res.data }]
setUserList(req)
} else {
toast.error(res.message || "获取用户失败")
setUserList([])
}
} catch (error) {
const message = error instanceof Error ? error.message : error
toast.error(`获取管理员失败: ${message}`)
} finally {
setLoading(false)
}
}, [])
const bind = useCallback(
async (id: number) => {
try {
const res = await bindAdmin({ id })
if (res.success) {
toast.success("用户已认领")
fetchUsers()
} else {
toast.error(res.message || "认领失败")
}
} catch (error) {
const message = error instanceof Error ? error.message : error
toast.error(`认领请求失败: ${message}`)
}
},
[fetchUsers],
const fetchUsers = useCallback(
(page: number, size: number) => getPageUserPage({ page, size, ...filters }),
[filters],
)
const onFilter = handleSubmit((data: FormValues) => {
const params: UserQueryParams = {}
const table = useDataTable<User>(fetchUsers)
const bind = useFetch(table, (id: number) => bindAdmin({ id }), {
done: "用户已认领",
fail: "用户认领失败",
})
if (data.account?.trim()) params.account = data.account.trim()
if (data.name?.trim()) params.name = data.name.trim()
const hasValidFilter = Object.keys(params).length > 0
if (hasValidFilter) {
fetchUsers(params)
} else {
setUserList([])
setLoading(false)
toast.info("请输入筛选条件后再查询")
}
const onFilter = handleSubmit(data => {
const result: FilterValues = {}
if (data.phone?.trim()) result.phone = data.phone.trim()
setFilters(result)
table.pagination.onPageChange(1)
})
return (
<div className="space-y-3">
<form onSubmit={onFilter} className="bg-white p-4">
<Page>
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
<div className="flex flex-wrap items-end gap-4">
<Controller
name="account"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-80 flex-none"
>
<FieldLabel>//</FieldLabel>
<Input {...field} placeholder="请输入账号/手机号/邮箱" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<Controller
name="name"
name="phone"
control={control}
render={({ field, fieldState }) => (
<Field
data-invalid={fieldState.invalid}
className="w-40 flex-none"
>
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入姓名" />
<FieldLabel></FieldLabel>
<Input {...field} placeholder="请输入手机号" />
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
@@ -130,13 +81,13 @@ export default function UserPage() {
</div>
<FieldGroup className="flex-row justify-start mt-4 gap-2">
<Button type="submit"></Button>
<Button type="submit"></Button>
<Button
type="button"
variant="outline"
onClick={() => {
reset()
setUserList([])
setFilters({})
setLoading(false)
}}
>
@@ -147,10 +98,9 @@ export default function UserPage() {
<Suspense>
<DataTable<User>
data={userList || []}
{...table}
status={loading ? "load" : "done"}
columns={[
{ header: "ID", accessorKey: "id" },
{ header: "账号", accessorKey: "username" },
{ header: "手机", accessorKey: "phone" },
{ header: "邮箱", accessorKey: "email" },
@@ -187,14 +137,6 @@ export default function UserPage() {
</Badge>
),
},
{
header: "身份证号",
accessorKey: "id_no",
cell: ({ row }) => {
const idNo = row.original.id_no
return idNo ? `${idNo.slice(0, 6)}****${idNo.slice(-4)}` : "-"
},
},
{
header: "客户来源",
accessorKey: "source",
@@ -214,10 +156,6 @@ export default function UserPage() {
cell: ({ row }) => (row.original.status === 1 ? "正常" : "禁用"),
},
{ header: "联系方式", accessorKey: "contact_wechat" },
{
header: "客户经理",
cell: ({ row }) => row.original.admin?.name || "-",
},
{
header: "最后登录时间",
accessorKey: "last_login",
@@ -227,12 +165,12 @@ export default function UserPage() {
new Date(row.original.last_login),
"yyyy-MM-dd HH:mm",
)
: "-",
: "",
},
{
header: "最后登录IP",
accessorKey: "last_login_ip",
cell: ({ row }) => row.original.last_login_ip || "-",
cell: ({ row }) => row.original.last_login_ip || "",
},
{
header: "创建时间",
@@ -245,18 +183,20 @@ export default function UserPage() {
meta: { pin: "right" },
header: "操作",
cell: ctx => (
<Button
size="sm"
onClick={() => bind(ctx.row.original.id)}
disabled={!!ctx.row.original.admin_id}
>
{ctx.row.original.admin_id ? "已认领" : "认领"}
</Button>
<Auth scope={ScopeUserWriteBind}>
<Button
size="sm"
onClick={() => bind(ctx.row.original.id)}
disabled={!!ctx.row.original.admin_id}
>
{ctx.row.original.admin_id ? "已认领" : "认领"}
</Button>
</Auth>
),
},
]}
/>
</Suspense>
</div>
</Page>
)
}

View File

@@ -1,4 +1,5 @@
import {
type AccessorKeyColumnDef,
type Column,
type ColumnDef,
flexRender,
@@ -9,11 +10,11 @@ import { Loader } from "lucide-react"
import type { CSSProperties } from "react"
import { Pagination, type PaginationProps } from "@/components/ui/pagination"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
Table as TableRoot,
TableRow,
} from "@/components/ui/table"
import { cn } from "@/lib/utils"
@@ -28,6 +29,7 @@ export type DataTableProps<T> = {
headRow?: string
dataRow?: string
}
serial?: boolean
}
export function DataTable<T extends Record<string, unknown>>(
@@ -35,7 +37,14 @@ export function DataTable<T extends Record<string, unknown>>(
) {
const table = useReactTable({
data: props.data,
columns: props.columns,
columns: [
{
id: "serial",
header: "#",
cell: ({ row }) => row.index + 1,
},
...props.columns,
],
getCoreRowModel: getCoreRowModel(),
manualPagination: true,
rowCount: props.pagination?.total,
@@ -50,47 +59,51 @@ export function DataTable<T extends Record<string, unknown>>(
columnPinning: {
left: props.columns
.map(column =>
column.meta?.pin === "left"
? column.id || column.accessorKey
(column.meta as Record<string, unknown>)?.pin === "left"
? column.id || (column as AccessorKeyColumnDef<T>).accessorKey
: undefined,
)
.filter(Boolean),
.filter(Boolean) as string[],
right: props.columns
.map(column =>
column.meta?.pin === "right"
? column.id || column.accessorKey
(column.meta as Record<string, unknown>)?.pin === "right"
? column.id || (column as AccessorKeyColumnDef<T>).accessorKey
: undefined,
)
.filter(Boolean),
.filter(Boolean) as string[],
},
},
})
const pinStyle = (column: Column<T>) => {
const pinStyle = (column: Column<T>, header?: boolean) => {
const pinned = column.getIsPinned()
if (!pinned) return {}
return {
position: pinned ? ("sticky" as const) : undefined,
backgroundColor: "white",
zIndex: 1,
...{
left: {
left: column.getStart(pinned),
boxShadow: "inset 1px 0 var(--border)",
},
right: {
right: column.getAfter(pinned),
boxShadow: "inset 1px 0 var(--border)",
},
}[pinned],
} as CSSProperties
left: {
left: column.getStart(pinned),
boxShadow: header
? "inset -1px -1px var(--border)"
: "inset -1px 0 var(--border)",
} as CSSProperties,
right: {
right: column.getAfter(pinned),
boxShadow: header
? "inset 1px -1px var(--border)"
: "inset 1px 0 var(--border)",
} as CSSProperties,
}[pinned]
}
return (
<div className={cn("flex flex-col gap-3", props.classNames?.root)}>
<div
className={cn(
"flex-auto flex flex-col gap-3 overflow-hidden",
props.classNames?.root,
)}
>
{/* 数据表 */}
<div className="rounded-md relative bg-card">
<TableRoot>
<div className="flex-auto overflow-hidden relative">
<Table className="max-w-full max-h-full">
<TableHeader>
{table.getHeaderGroups().map(group => (
<TableRow key={group.id}>
@@ -98,7 +111,8 @@ export function DataTable<T extends Record<string, unknown>>(
<TableHead
key={header.id}
colSpan={header.colSpan}
style={pinStyle(header.column)}
className="sticky top-0 bg-card z-20 shadow-[inset_0_-1px_var(--border)]"
style={pinStyle(header.column, true)}
>
{header.isPlaceholder
? null
@@ -138,7 +152,11 @@ export function DataTable<T extends Record<string, unknown>>(
className={cn("h-14", props.classNames?.dataRow)}
>
{row.getVisibleCells().map(cell => (
<TableCell key={cell.id} style={pinStyle(cell.column)}>
<TableCell
key={cell.id}
className="sticky bg-card z-10"
style={pinStyle(cell.column)}
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
@@ -149,9 +167,9 @@ export function DataTable<T extends Record<string, unknown>>(
))
)}
</TableBody>
</TableRoot>
</Table>
{props.status === "load" && (
<div className="absolute inset-0 bg-white/10 backdrop-blur-xs flex items-center justify-center gap-2 transition">
<div className="absolute inset-0 bg-white/10 backdrop-blur-xs flex items-center justify-center gap-2 transition z-50">
<Loader className="animate-spin" />
<span></span>
</div>
@@ -159,7 +177,9 @@ export function DataTable<T extends Record<string, unknown>>(
</div>
{/* 分页器 */}
{props.pagination && <Pagination {...props.pagination} />}
{props.pagination && (
<Pagination {...props.pagination} className="flex-none self-center" />
)}
</div>
)
}

View File

@@ -1,5 +1,10 @@
import type { ReactNode } from "react"
import { cn } from "@/lib/utils"
export function Page(props: { children: ReactNode }) {
return <div className="flex flex-col">{props.children}</div>
export function Page(props: { className?: string; children: ReactNode }) {
return (
<div className={cn("h-full flex flex-col p-6 gap-4", props.className)}>
{props.children}
</div>
)
}

View File

@@ -0,0 +1,62 @@
import type { ReactNode } from "react"
import { Badge } from "@/components/ui/badge"
import { ProductCode } from "@/lib/base"
interface SkuCodeBadgeProps {
productCode: ProductCode
skuCode: string
}
export function SkuCodeBadge({
productCode,
skuCode,
}: SkuCodeBadgeProps): ReactNode {
switch (productCode) {
case ProductCode.Short:
case ProductCode.Long:
return <ParsedSkuCodeBadge skuCode={skuCode} />
default:
return <Badge variant="outline">{skuCode}</Badge>
}
}
function ParsedSkuCodeBadge({ skuCode }: { skuCode: string }): ReactNode {
const params = new URLSearchParams(skuCode)
const modeStr = params.get("mode")
let mode: string | undefined
let modeClass: string | undefined
switch (modeStr) {
case "time":
mode = "包时"
modeClass = "bg-green-50"
break
case "quota":
mode = "包量"
modeClass = "bg-blue-50"
break
}
const live = params.get("live")
const expire = params.get("expire")
if (!mode || !live || !expire) {
return (
<Badge variant="secondary" className="bg-red-50">
{skuCode}
</Badge>
)
}
return (
<div className="flex flex-wrap gap-1">
<Badge variant="secondary" className={modeClass}>
{mode}
</Badge>
<Badge variant="secondary">{live} </Badge>
{expire !== "0" && (
<Badge variant="secondary">{expire} </Badge>
)}
</div>
)
}

View File

@@ -0,0 +1,198 @@
import type { ChangeEvent } from "react"
import {
type Control,
type Path,
type UseControllerReturn,
useController,
} from "react-hook-form"
import { ProductCode } from "@/lib/base"
import {
Field,
FieldError,
FieldGroup,
FieldLabel,
FieldLegend,
} from "../ui/field"
import { Input } from "../ui/input"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "../ui/select"
export function ProductCodeField<
T extends {
code: string
},
>(props: { control: Control<T>; name: Path<T>; code: ProductCode }) {
const rt = useController(props)
switch (props.code) {
case ProductCode.Short:
return <ProductShortCode {...rt} />
case ProductCode.Long:
return <ProductLongCode {...rt} />
}
return null
}
function ProductShortCode<T extends { code: string }>(
props: UseControllerReturn<T>,
) {
const { field, fieldState } = props
const params = new URLSearchParams(field.value)
const mode = params.get("mode") || "quota"
const live = params.get("live") || "0"
const expire = params.get("expire") || "0"
const setParams = (data: {
mode?: string
live?: string
expire?: string
}) => {
const newParams = new URLSearchParams()
newParams.set("mode", data.mode || mode)
newParams.set("live", data.live || live)
newParams.set("expire", data.expire || expire)
console.log(newParams.toString())
field.onChange(newParams.toString())
}
const onModeChange = (value: string) => {
setParams({ mode: value })
}
const onLiveChange = (e: ChangeEvent<HTMLInputElement>) => {
let value = e.target.value || "0"
if (value.length > 1 && value[0] === "0") {
value = value.substring(1, value.length)
}
if (!/^([0-9]+)$/.test(value)) return
setParams({ live: value })
}
const onExpireChange = (e: ChangeEvent<HTMLInputElement>) => {
let value = e.target.value || "0"
if (value.length > 1 && value[0] === "0") {
value = value.substring(1, value.length)
}
if (!/^([0-9]+)$/.test(value)) return
setParams({ expire: value })
}
return (
<FieldLegend>
<FieldLegend></FieldLegend>
<FieldGroup>
<Field>
<FieldLabel></FieldLabel>
<Select defaultValue={mode} onValueChange={onModeChange}>
<SelectTrigger>
<SelectValue placeholder="请选择套餐类型" />
</SelectTrigger>
<SelectContent>
<SelectItem value="time"></SelectItem>
<SelectItem value="quota"></SelectItem>
</SelectContent>
</Select>
</Field>
<Field>
<FieldLabel></FieldLabel>
<Input type="number" value={live} onChange={onLiveChange} />
</Field>
{params.get("mode") === "time" && (
<Field>
<FieldLabel></FieldLabel>
<Input type="number" value={expire} onChange={onExpireChange} />
</Field>
)}
{fieldState.error && <FieldError errors={[fieldState.error]} />}
</FieldGroup>
</FieldLegend>
)
}
function ProductLongCode<T extends { code: string }>(
props: UseControllerReturn<T>,
) {
const { field, fieldState } = props
const params = new URLSearchParams(field.value)
const mode = params.get("mode") || "quota"
const live = params.get("live") || "0"
const expire = params.get("expire") || "0"
const setParams = (data: {
mode?: string
live?: string
expire?: string
}) => {
const newParams = new URLSearchParams()
newParams.set("mode", data.mode || mode)
newParams.set("live", data.live || live)
newParams.set("expire", data.expire || expire)
console.log(newParams.toString())
field.onChange(newParams.toString())
}
const onModeChange = (value: string) => {
if (value === "quota") {
setParams({ mode: value, expire: "0" })
} else {
setParams({ mode: value })
}
}
const onLiveChange = (e: ChangeEvent<HTMLInputElement>) => {
let value = e.target.value || "0"
if (value.length > 1 && value[0] === "0") {
value = value.substring(1, value.length)
}
if (!/^([0-9]+)$/.test(value)) return
setParams({ live: value })
}
const onExpireChange = (e: ChangeEvent<HTMLInputElement>) => {
let value = e.target.value || "0"
if (value.length > 1 && value[0] === "0") {
value = value.substring(1, value.length)
}
if (!/^([0-9]+)$/.test(value)) return
setParams({ expire: value })
}
return (
<FieldLegend>
<FieldLegend></FieldLegend>
<FieldGroup>
<Field>
<FieldLabel></FieldLabel>
<Select defaultValue={mode} onValueChange={onModeChange}>
<SelectTrigger>
<SelectValue placeholder="请选择套餐类型" />
</SelectTrigger>
<SelectContent>
<SelectItem value="time"></SelectItem>
<SelectItem value="quota"></SelectItem>
</SelectContent>
</Select>
</Field>
<Field>
<FieldLabel></FieldLabel>
<Input type="number" value={live} onChange={onLiveChange} />
</Field>
{params.get("mode") === "time" && (
<Field>
<FieldLabel></FieldLabel>
<Input type="number" value={expire} onChange={onExpireChange} />
</Field>
)}
{fieldState.error && <FieldError errors={[fieldState.error]} />}
</FieldGroup>
</FieldLegend>
)
}

View File

@@ -0,0 +1,257 @@
"use client"
import * as React from "react"
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
function DropdownMenu({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
}
function DropdownMenuPortal({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
return (
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
)
}
function DropdownMenuTrigger({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
return (
<DropdownMenuPrimitive.Trigger
data-slot="dropdown-menu-trigger"
{...props}
/>
)
}
function DropdownMenuContent({
className,
sideOffset = 4,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
return (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
data-slot="dropdown-menu-content"
sideOffset={sideOffset}
className={cn(
"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
className
)}
{...props}
/>
</DropdownMenuPrimitive.Portal>
)
}
function DropdownMenuGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
return (
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
)
}
function DropdownMenuItem({
className,
inset,
variant = "default",
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean
variant?: "default" | "destructive"
}) {
return (
<DropdownMenuPrimitive.Item
data-slot="dropdown-menu-item"
data-inset={inset}
data-variant={variant}
className={cn(
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
className
)}
{...props}
/>
)
}
function DropdownMenuCheckboxItem({
className,
children,
checked,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
return (
<DropdownMenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item"
className={cn(
"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
checked={checked}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
)
}
function DropdownMenuRadioGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
return (
<DropdownMenuPrimitive.RadioGroup
data-slot="dropdown-menu-radio-group"
{...props}
/>
)
}
function DropdownMenuRadioItem({
className,
children,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
return (
<DropdownMenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item"
className={cn(
"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<CircleIcon className="size-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
)
}
function DropdownMenuLabel({
className,
inset,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean
}) {
return (
<DropdownMenuPrimitive.Label
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn(
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
className
)}
{...props}
/>
)
}
function DropdownMenuSeparator({
className,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
return (
<DropdownMenuPrimitive.Separator
data-slot="dropdown-menu-separator"
className={cn("-mx-1 my-1 h-px bg-border", className)}
{...props}
/>
)
}
function DropdownMenuShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return (
<span
data-slot="dropdown-menu-shortcut"
className={cn(
"ml-auto text-xs tracking-widest text-muted-foreground",
className
)}
{...props}
/>
)
}
function DropdownMenuSub({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
}
function DropdownMenuSubTrigger({
className,
inset,
children,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean
}) {
return (
<DropdownMenuPrimitive.SubTrigger
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn(
"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
className
)}
{...props}
>
{children}
<ChevronRightIcon className="ml-auto size-4" />
</DropdownMenuPrimitive.SubTrigger>
)
}
function DropdownMenuSubContent({
className,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
return (
<DropdownMenuPrimitive.SubContent
data-slot="dropdown-menu-sub-content"
className={cn(
"z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
className
)}
{...props}
/>
)
}
export {
DropdownMenu,
DropdownMenuPortal,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
}

View File

@@ -8,11 +8,11 @@ function Table({ className, ...props }: React.ComponentProps<"table">) {
return (
<div
data-slot="table-container"
className="relative w-full overflow-x-auto"
className={cn("bg-card rounded-lg relative overflow-auto", className)}
>
<table
data-slot="table"
className={cn("w-full caption-bottom text-sm", className)}
className="w-full caption-bottom text-sm"
{...props}
/>
</div>
@@ -23,7 +23,7 @@ function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
return (
<thead
data-slot="table-header"
className={cn("[&_tr]:border-b", className)}
className={cn("[&_tr]:border-b-0", className)}
{...props}
/>
)

View File

@@ -1,34 +1,56 @@
"use client"
import * as TabsPrimitive from "@radix-ui/react-tabs"
import { cva, type VariantProps } from "class-variance-authority"
import { Tabs as TabsPrimitive } from "radix-ui"
import type * as React from "react"
import { cn } from "@/lib/utils"
function Tabs({
className,
orientation = "horizontal",
...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
return (
<TabsPrimitive.Root
data-slot="tabs"
className={cn("flex flex-col gap-2", className)}
data-orientation={orientation}
orientation={orientation}
className={cn(
"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
className,
)}
{...props}
/>
)
}
const tabsListVariants = cva(
"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
{
variants: {
variant: {
default: "bg-muted",
line: "gap-1 bg-transparent",
},
},
defaultVariants: {
variant: "default",
},
},
)
function TabsList({
className,
variant = "default",
...props
}: React.ComponentProps<typeof TabsPrimitive.List>) {
}: React.ComponentProps<typeof TabsPrimitive.List> &
VariantProps<typeof tabsListVariants>) {
return (
<TabsPrimitive.List
data-slot="tabs-list"
className={cn(
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
className,
)}
data-variant={variant}
className={cn(tabsListVariants({ variant }), className)}
{...props}
/>
)
@@ -42,7 +64,10 @@ function TabsTrigger({
<TabsPrimitive.Trigger
data-slot="tabs-trigger"
className={cn(
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
"data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:-bottom-1.25 group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
className,
)}
{...props}
@@ -63,4 +88,4 @@ function TabsContent({
)
}
export { Tabs, TabsList, TabsTrigger, TabsContent }
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

View File

@@ -22,6 +22,7 @@ export const ScopeProductWrite = "product:write" // 写入产品
export const ScopeProductSku = "product_sku"
export const ScopeProductSkuRead = "product_sku:read" // 读取产品套餐列表
export const ScopeProductSkuWrite = "product_sku:write" // 写入产品套餐
export const ScopeProductSkuWriteStatus = "product_sku:write:status" // 更改产品套餐状态
// 折扣
export const ScopeDiscount = "discount"
@@ -32,14 +33,23 @@ export const ScopeDiscountWrite = "discount:write" // 写入折扣
export const ScopeResource = "resource"
export const ScopeResourceRead = "resource:read" // 读取用户套餐列表
export const ScopeResourceWrite = "resource:write" // 写入用户套餐
export const ScopeResourceShort = "resource:short" // 短效动态套餐
export const ScopeResourceShortRead = "resource:short:read" // 读取用户短效动态套餐列表
export const ScopeResourceShortReadOfUser = "resource:short:read:of_user" // 读取指定用户的短效动态套餐列表
export const ScopeResourceLong = "resource:long" // 长效动态套餐
export const ScopeResourceLongRead = "resource:long:read" // 读取用户长效动态套餐列表
export const ScopeResourceLongReadOfUser = "resource:long:read:of_user" // 读取指定用户的长效动态套餐列表
// 用户
export const ScopeUser = "user"
export const ScopeUserRead = "user:read" // 读取用户列表
export const ScopeUserReadOne = "user:read:one" // 读取单个用户
export const ScopeUserReadNotBind = "user:read:not_bind" // 读取未绑定管理员的用户列表
export const ScopeUserWrite = "user:write" // 写入用户
export const ScopeUserWriteBalance = "user:write:balance" // 写入用户余额
export const ScopeUserReadOne = "user:read:one" // 读取单个用户
export const ScopeUserWriteBind = "user:write:bind" // 认领用户
export const ScopeUserWriteBalanceInc = "user:write:balance:inc" // 增加用户余额
export const ScopeUserWriteBalanceDec = "user:write:balance:dec" // 减少用户余额
export const ScopeUserWriteBind = "user:write:bind" // 用户认领
// 优惠券
export const ScopeCoupon = "coupon"
@@ -49,19 +59,34 @@ export const ScopeCouponWrite = "coupon:write" // 写入优惠券
// 批次
export const ScopeBatch = "batch"
export const ScopeBatchRead = "batch:read" // 读取批次列表
export const ScopeBatchReadOfUser = "batch:read:of_user" // 读取指定用户的批次列表
export const ScopeBatchWrite = "batch:write" // 写入批次
// IP
export const ScopeChannel = "channel"
export const ScopeChannelRead = "channel:read" // 读取 IP 列表
export const ScopeChannelReadOfUser = "channel:read:of_user" // 读取指定用户的 IP 列表
export const ScopeChannelWrite = "channel:write" // 写入 IP
// 交易
export const ScopeTrade = "trade"
export const ScopeTradeRead = "trade:read" // 读取交易列表
export const ScopeTradeReadOfUser = "trade:read:of_user" // 读取指定用户的交易列表
export const ScopeTradeWrite = "trade:write" // 写入交易
// 账单
export const ScopeBill = "bill"
export const ScopeBillRead = "bill:read" // 读取账单列表
export const ScopeBillReadOfUser = "bill:read:of_user" // 读取指定用户的账单列表
export const ScopeBillWrite = "bill:write" // 写入账单
// 余额变动
export const ScopeBalanceActivity = "balance_activity"
export const ScopeBalanceActivityRead = "balance_activity:read" // 读取余额变动列表
export const ScopeBalanceActivityReadOfUser = "balance_activity:read:of_user" // 读取指定用户的余额变动列表
// 代理
export const ScopeProxy = "proxy"
export const ScopeProxyRead = "proxy:read" // 读取代理列表
export const ScopeProxyWrite = "proxy:write" // 写入代理
export const ScopeProxyWriteStatus = "proxy:write:status" // 更改代理状态

View File

@@ -19,7 +19,7 @@ export type Admin = {
phone?: string
email?: string
status: AdminStatus
lock: boolean
lastLogin?: Date
lastLoginIp?: string
lastLoginUa?: string

18
src/models/balance.ts Normal file
View File

@@ -0,0 +1,18 @@
import type { Admin } from "./admin"
import type { Billing } from "./billing"
import type { User } from "./user"
export type Balance = {
id: number
user_id: string
bill_id: string
admin_id: string
amount: number
balance_prev: number
balance_curr: number
remark: string
created_at: Date
user?: User
admin?: Admin
bill?: Billing
}

View File

@@ -1,34 +0,0 @@
import type { ProductDiscount } from "./product_discount"
export type Cust = {
id: number
admin_id?: number
phone: string
admin?: Admin
password: string
source: number
discount_id: string
has_password: boolean
username: string
email: string
name: string
avatar: string
status: number
balance: number
id_type: number
id_no: string
id_token: string
contact_qq: string
contact_wechat: string
last_login: Date
last_login_host: string
last_login_agent: string
last_login_ip: string
created_at: Date
updated_at: Date
discount: ProductDiscount
}
export type Admin = {
name: string
password: string
}

11
src/models/gateway.ts Normal file
View File

@@ -0,0 +1,11 @@
export type Gateway = {
id: number
version: string
mac: string
ip: string
host: string
type: number
status: number
meta: string
created_at: Date
}

View File

@@ -1,8 +1,9 @@
import type { ProductCode } from "@/lib/base"
import type { Model } from "./base/model"
import type { ProductSku } from "./product_sku"
export type Product = Model & {
code: string
code: ProductCode
name: string
description?: string
sort: number

View File

@@ -7,7 +7,10 @@ export type ProductSku = Model & {
code: string
name: string
price: string
status: number
product?: Product
price_min?: string
discount?: ProductDiscount
sort: number
count_min: number
}

View File

@@ -10,6 +10,7 @@ export type Trade = {
type: number
subject: string
status: number
user_id: string
created_at: Date
canceled_at: Date
updated_at: Date

View File

@@ -1,9 +1,9 @@
import type { Admin } from "./admin"
import type { ProductDiscount } from "./product_discount"
export type User = {
id: number
admin_id?: number
admin?: Admin
phone: string
source: number
has_password: boolean
@@ -24,4 +24,8 @@ export type User = {
last_login_ip: string
created_at: Date
updated_at: Date
password: string
discount_id: string
discount: ProductDiscount
admin?: Admin
}