添加客户查询页面包括导航权限控制 & 删除多余代码
This commit is contained in:
Eamon
@@ -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)
|
||||
@@ -119,7 +92,6 @@ export default function Appbar(props: { admin: Admin }) {
|
||||
}
|
||||
|
||||
const breadcrumbs = generateBreadcrumbs()
|
||||
const unreadCount = notifications.filter(n => !n.read).length
|
||||
const doLogout = async () => {
|
||||
const resp = await logout()
|
||||
if (resp.success) {
|
||||
@@ -153,88 +125,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
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
KeyRound,
|
||||
type LucideIcon,
|
||||
Package,
|
||||
ScanSearch,
|
||||
Shield,
|
||||
ShoppingBag,
|
||||
SquarePercent,
|
||||
@@ -46,6 +47,7 @@ import {
|
||||
ScopeResourceRead,
|
||||
ScopeTradeRead,
|
||||
ScopeUserRead,
|
||||
ScopeUserReadNotBind,
|
||||
ScopeUserReadOne,
|
||||
} from "@/lib/scopes"
|
||||
|
||||
@@ -169,6 +171,12 @@ const menuSections: { title: string; items: NavItemProps[] }[] = [
|
||||
href: "/user",
|
||||
icon: Users,
|
||||
label: "客户认领",
|
||||
requiredScope: ScopeUserReadNotBind,
|
||||
},
|
||||
{
|
||||
href: "/userQuery",
|
||||
icon: ScanSearch,
|
||||
label: "客户查询",
|
||||
requiredScope: ScopeUserReadOne,
|
||||
},
|
||||
{
|
||||
|
||||
313
src/app/(root)/userQuery/page.tsx
Normal file
313
src/app/(root)/userQuery/page.tsx
Normal file
@@ -0,0 +1,313 @@
|
||||
"use client"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { format } from "date-fns"
|
||||
import { Suspense, useCallback, useEffect, useState } from "react"
|
||||
import { Controller, useForm } from "react-hook-form"
|
||||
import { toast } from "sonner"
|
||||
import { z } from "zod"
|
||||
import { getPageUser } from "@/actions/user"
|
||||
import { DeductionDialog } from "@/app/(root)/cust/deduction"
|
||||
import { DepositDialog } from "@/app/(root)/cust/deposit"
|
||||
import { UpdateDialog } from "@/app/(root)/cust/update"
|
||||
import { Auth } from "@/components/auth"
|
||||
import { DataTable } from "@/components/data-table"
|
||||
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 {
|
||||
ScopeUserWriteBalance,
|
||||
ScopeUserWriteBalanceDec,
|
||||
ScopeUserWriteBalanceInc,
|
||||
} from "@/lib/scopes"
|
||||
import type { Cust } from "@/models/cust"
|
||||
import type { User } from "@/models/user"
|
||||
|
||||
interface UserQueryParams {
|
||||
account?: string
|
||||
name?: string
|
||||
}
|
||||
|
||||
const filterSchema = z.object({
|
||||
account: 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 [depositDialog, setDepositDialog] = useState(false)
|
||||
const [deposit, setDeposit] = useState<Cust | null>(null)
|
||||
|
||||
const [deductionDialog, setDeductionDialog] = useState(false)
|
||||
const [deduction, setDeduction] = useState<Cust | null>(null)
|
||||
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
|
||||
const [currentEditUser, setCurrentEditUser] = useState<Cust | null>(null)
|
||||
const [currentFilters, setCurrentFilters] = useState<UserQueryParams>({})
|
||||
|
||||
const { control, handleSubmit, reset } = useForm<FormValues>({
|
||||
resolver: zodResolver(filterSchema),
|
||||
defaultValues: {
|
||||
account: "",
|
||||
name: "",
|
||||
},
|
||||
})
|
||||
|
||||
const fetchUsers = useCallback(async (filters: UserQueryParams = {}) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await getPageUser(filters)
|
||||
console.log(res, "res")
|
||||
|
||||
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)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers()
|
||||
}, [fetchUsers])
|
||||
|
||||
const onFilter = handleSubmit((data: FormValues) => {
|
||||
const params: UserQueryParams = {}
|
||||
if (data.account?.trim()) params.account = data.account.trim()
|
||||
if (data.name?.trim()) params.name = data.name.trim()
|
||||
setCurrentFilters(params)
|
||||
fetchUsers(params)
|
||||
})
|
||||
|
||||
const refreshTable = useCallback(() => {
|
||||
fetchUsers(currentFilters)
|
||||
}, [fetchUsers, currentFilters])
|
||||
|
||||
const handleReset = () => {
|
||||
reset()
|
||||
setCurrentFilters({})
|
||||
fetchUsers()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<form onSubmit={onFilter} className="bg-white p-4">
|
||||
<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"
|
||||
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">
|
||||
<Button type="submit">筛选</Button>
|
||||
<Button type="button" variant="outline" onClick={handleReset}>
|
||||
重置
|
||||
</Button>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
|
||||
<Suspense>
|
||||
<DataTable<User>
|
||||
data={userList || []}
|
||||
status={loading ? "load" : "done"}
|
||||
columns={[
|
||||
{ header: "账号", accessorKey: "username" },
|
||||
{ header: "手机", accessorKey: "phone" },
|
||||
{ header: "邮箱", accessorKey: "email" },
|
||||
{ header: "姓名", accessorKey: "name" },
|
||||
{
|
||||
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: "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: "id_no",
|
||||
cell: ({ row }) => {
|
||||
const idNo = row.original.id_no
|
||||
return idNo ? `${idNo.slice(0, 6)}****${idNo.slice(-4)}` : ""
|
||||
},
|
||||
},
|
||||
{
|
||||
header: "客户来源",
|
||||
accessorKey: "source",
|
||||
cell: ({ row }) => {
|
||||
const sourceMap: Record<number, string> = {
|
||||
0: "官网注册",
|
||||
1: "管理员添加",
|
||||
2: "代理商注册",
|
||||
3: "代理商添加",
|
||||
}
|
||||
return sourceMap[row.original.source] ?? "未知"
|
||||
},
|
||||
},
|
||||
{
|
||||
header: "账号状态",
|
||||
accessorKey: "status",
|
||||
cell: ({ row }) => (row.original.status === 1 ? "正常" : "禁用"),
|
||||
},
|
||||
{ header: "联系方式", accessorKey: "contact_wechat" },
|
||||
{
|
||||
header: "客户经理",
|
||||
cell: ({ row }) => row.original.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 }) => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Auth scope={ScopeUserWriteBalanceInc}>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setDeposit(row.original)
|
||||
setDepositDialog(true)
|
||||
}}
|
||||
>
|
||||
充值
|
||||
</Button>
|
||||
</Auth>
|
||||
<Auth scope={ScopeUserWriteBalanceDec}>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setDeduction(row.original)
|
||||
setDeductionDialog(true)
|
||||
}}
|
||||
>
|
||||
扣款
|
||||
</Button>
|
||||
</Auth>
|
||||
<Auth scope={ScopeUserWriteBalance}>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setCurrentEditUser(row.original)
|
||||
setIsEditDialogOpen(true)
|
||||
}}
|
||||
>
|
||||
修改
|
||||
</Button>
|
||||
</Auth>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Suspense>
|
||||
|
||||
<UpdateDialog
|
||||
open={isEditDialogOpen}
|
||||
onOpenChange={setIsEditDialogOpen}
|
||||
currentUser={currentEditUser}
|
||||
onSuccess={refreshTable}
|
||||
/>
|
||||
|
||||
<DepositDialog
|
||||
open={depositDialog}
|
||||
onOpenChange={setDepositDialog}
|
||||
currentUser={deposit}
|
||||
onSuccess={refreshTable}
|
||||
/>
|
||||
|
||||
<DeductionDialog
|
||||
open={deductionDialog}
|
||||
onOpenChange={setDeductionDialog}
|
||||
currentUser={deduction}
|
||||
onSuccess={refreshTable}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -38,6 +38,7 @@ export const ScopeUser = "user"
|
||||
export const ScopeUserRead = "user:read" // 读取用户列表
|
||||
export const ScopeUserWrite = "user:write" // 添加用户
|
||||
export const ScopeUserWriteBalance = "user:write:balance" // 修改
|
||||
export const ScopeUserReadNotBind = "user:read:not-bind" //客户认领
|
||||
export const ScopeUserReadOne = "user:read:one" // 读取单个用户
|
||||
export const ScopeUserWriteBind = "user:write:bind" // 认领用户
|
||||
export const ScopeUserWriteBalanceInc = "user:write:balance:inc" //充值
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { Admin } from "./admin"
|
||||
import type { ProductDiscount } from "./product_discount"
|
||||
|
||||
export type Cust = {
|
||||
id: number
|
||||
admin_id?: number
|
||||
@@ -28,7 +28,3 @@ export type Cust = {
|
||||
updated_at: Date
|
||||
discount: ProductDiscount
|
||||
}
|
||||
export type Admin = {
|
||||
name: string
|
||||
password: string
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user