✨ feat: impl accounts and channels
This commit is contained in:
@@ -0,0 +1,470 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import {
|
||||
BanknoteIcon,
|
||||
CreditCardIcon,
|
||||
LandmarkIcon,
|
||||
Layers2Icon,
|
||||
Loader2Icon,
|
||||
MoreHorizontalIcon,
|
||||
PowerIcon,
|
||||
PowerOffIcon,
|
||||
PencilIcon,
|
||||
PlusIcon,
|
||||
SearchIcon,
|
||||
Trash2Icon,
|
||||
WalletCardsIcon,
|
||||
} from "lucide-react"
|
||||
import {
|
||||
deleteAccountAction,
|
||||
toggleAccountActiveAction,
|
||||
type AccountWithChannels,
|
||||
} from "@/lib/actions/account"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip"
|
||||
import { AccountDialog } from "./account-dialog"
|
||||
|
||||
const typeLabels = {
|
||||
BANK: "银行账户",
|
||||
E_WALLET: "电子钱包",
|
||||
CASH: "现金",
|
||||
} as const
|
||||
const balanceLabels = {
|
||||
ASSET: "资产类",
|
||||
LIABILITY: "负债类",
|
||||
EQUITY: "权益类",
|
||||
} as const
|
||||
const typeIcon = (type: AccountWithChannels["accountType"]) =>
|
||||
type === "BANK" ? (
|
||||
<LandmarkIcon className="size-4" />
|
||||
) : type === "E_WALLET" ? (
|
||||
<WalletCardsIcon className="size-4" />
|
||||
) : (
|
||||
<BanknoteIcon className="size-4" />
|
||||
)
|
||||
|
||||
export function AccountsView({
|
||||
initialAccounts,
|
||||
}: {
|
||||
initialAccounts: AccountWithChannels[]
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const [accountsList, setAccountsList] = React.useState(initialAccounts)
|
||||
const [searchQuery, setSearchQuery] = React.useState("")
|
||||
const [typeFilter, setTypeFilter] = React.useState("ALL")
|
||||
const [balanceFilter, setBalanceFilter] = React.useState("ALL")
|
||||
const [dialogOpen, setDialogOpen] = React.useState(false)
|
||||
const [editingAccount, setEditingAccount] =
|
||||
React.useState<AccountWithChannels | null>(null)
|
||||
const [deletingAccount, setDeletingAccount] =
|
||||
React.useState<AccountWithChannels | null>(null)
|
||||
const [isDeleting, setIsDeleting] = React.useState(false)
|
||||
const [togglingId, setTogglingId] = React.useState<string | null>(null)
|
||||
const filteredAccounts = React.useMemo(() => {
|
||||
const query = searchQuery.trim().toLowerCase()
|
||||
return accountsList.filter((account) => {
|
||||
const text = [
|
||||
account.name,
|
||||
account.issuerName,
|
||||
account.platform,
|
||||
account.accountNumber,
|
||||
account.accountId,
|
||||
account.primaryCurrency,
|
||||
account.remark,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")
|
||||
.toLowerCase()
|
||||
return (
|
||||
(!query || text.includes(query)) &&
|
||||
(typeFilter === "ALL" || account.accountType === typeFilter) &&
|
||||
(balanceFilter === "ALL" || account.balanceType === balanceFilter)
|
||||
)
|
||||
})
|
||||
}, [accountsList, balanceFilter, searchQuery, typeFilter])
|
||||
const groups = (
|
||||
Object.keys(balanceLabels) as Array<keyof typeof balanceLabels>
|
||||
)
|
||||
.map((balanceType) => ({
|
||||
balanceType,
|
||||
accounts: filteredAccounts.filter(
|
||||
(account) => account.balanceType === balanceType
|
||||
),
|
||||
}))
|
||||
.filter((group) => group.accounts.length)
|
||||
const clearFilters = () => {
|
||||
setSearchQuery("")
|
||||
setTypeFilter("ALL")
|
||||
setBalanceFilter("ALL")
|
||||
}
|
||||
const hasFilters =
|
||||
Boolean(searchQuery) || typeFilter !== "ALL" || balanceFilter !== "ALL"
|
||||
const openCreate = () => {
|
||||
setEditingAccount(null)
|
||||
setDialogOpen(true)
|
||||
}
|
||||
const toggleActive = async (
|
||||
account: AccountWithChannels,
|
||||
checked: boolean
|
||||
) => {
|
||||
setTogglingId(account.id)
|
||||
setAccountsList((items) =>
|
||||
items.map((item) =>
|
||||
item.id === account.id ? { ...item, isActive: checked } : item
|
||||
)
|
||||
)
|
||||
try {
|
||||
const result = await toggleAccountActiveAction(account.id, checked)
|
||||
if (!result.success)
|
||||
setAccountsList((items) =>
|
||||
items.map((item) =>
|
||||
item.id === account.id ? { ...item, isActive: !checked } : item
|
||||
)
|
||||
)
|
||||
else router.refresh()
|
||||
} catch {
|
||||
setAccountsList((items) =>
|
||||
items.map((item) =>
|
||||
item.id === account.id ? { ...item, isActive: !checked } : item
|
||||
)
|
||||
)
|
||||
} finally {
|
||||
setTogglingId(null)
|
||||
}
|
||||
}
|
||||
const confirmDelete = async () => {
|
||||
if (!deletingAccount) return
|
||||
setIsDeleting(true)
|
||||
try {
|
||||
const result = await deleteAccountAction(deletingAccount.id)
|
||||
if (result.success) {
|
||||
setAccountsList((items) =>
|
||||
items.filter((item) => item.id !== deletingAccount.id)
|
||||
)
|
||||
setDeletingAccount(null)
|
||||
router.refresh()
|
||||
}
|
||||
} finally {
|
||||
setIsDeleting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<main className="flex min-w-0 flex-1 flex-col gap-4 p-4 md:p-6 lg:p-8">
|
||||
<div className="flex flex-col gap-4 border-b border-border/70 pb-5 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<p className="mb-1 text-xs font-medium text-muted-foreground">
|
||||
资金管理
|
||||
</p>
|
||||
<h1 className="font-heading text-2xl font-semibold tracking-tight">
|
||||
资金账户
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
按资产归属管理账户主体与结算币种。
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={openCreate} className="w-full sm:w-auto">
|
||||
<PlusIcon data-icon="inline-start" />
|
||||
新建账户
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 md:flex-row md:items-center">
|
||||
<div className="relative min-w-0 flex-1 md:max-w-md">
|
||||
<SearchIcon className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(event) => setSearchQuery(event.target.value)}
|
||||
placeholder="搜索账户、机构、账号或币种"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 sm:flex">
|
||||
<Select
|
||||
value={typeFilter}
|
||||
onValueChange={(value) => setTypeFilter(value ?? "ALL")}
|
||||
>
|
||||
<SelectTrigger className="w-full sm:w-32">
|
||||
<SelectValue>
|
||||
{typeFilter === "ALL"
|
||||
? "全部类型"
|
||||
: typeLabels[typeFilter as keyof typeof typeLabels]}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="ALL">全部类型</SelectItem>
|
||||
<SelectItem value="BANK">银行账户</SelectItem>
|
||||
<SelectItem value="E_WALLET">电子钱包</SelectItem>
|
||||
<SelectItem value="CASH">现金</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select
|
||||
value={balanceFilter}
|
||||
onValueChange={(value) => setBalanceFilter(value ?? "ALL")}
|
||||
>
|
||||
<SelectTrigger className="w-full sm:w-32">
|
||||
<SelectValue>
|
||||
{balanceFilter === "ALL"
|
||||
? "全部分类"
|
||||
: balanceLabels[
|
||||
balanceFilter as keyof typeof balanceLabels
|
||||
]}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="ALL">全部分类</SelectItem>
|
||||
<SelectItem value="ASSET">资产类</SelectItem>
|
||||
<SelectItem value="LIABILITY">负债类</SelectItem>
|
||||
<SelectItem value="EQUITY">权益类</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{hasFilters && (
|
||||
<Button variant="ghost" size="sm" onClick={clearFilters}>
|
||||
清除筛选
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{groups.length ? (
|
||||
<div className="flex flex-col gap-6">
|
||||
{groups.map(({ balanceType, accounts }) => (
|
||||
<section
|
||||
key={balanceType}
|
||||
aria-labelledby={`account-group-${balanceType}`}
|
||||
>
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<h2
|
||||
id={`account-group-${balanceType}`}
|
||||
className="text-sm font-semibold"
|
||||
>
|
||||
{balanceLabels[balanceType]}
|
||||
</h2>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{accounts.length} 个账户
|
||||
</span>
|
||||
</div>
|
||||
<div className="overflow-hidden rounded-lg border border-border/70 bg-card">
|
||||
<div className="hidden grid-cols-[minmax(220px,1.6fr)_110px_110px_64px] gap-3 border-b bg-muted/30 px-4 py-2.5 text-[11px] font-medium text-muted-foreground md:grid">
|
||||
<span>账户名称</span>
|
||||
<span>账户类型</span>
|
||||
<span>关联渠道</span>
|
||||
<span />
|
||||
</div>
|
||||
{accounts.map((account) => {
|
||||
const actionMenu = (
|
||||
<DropdownMenu>
|
||||
<Tooltip>
|
||||
<TooltipTrigger
|
||||
render={
|
||||
<DropdownMenuTrigger
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
aria-label="打开账户操作"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<MoreHorizontalIcon />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>更多操作</TooltipContent>
|
||||
</Tooltip>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
disabled={togglingId === account.id}
|
||||
onClick={() =>
|
||||
toggleActive(account, !account.isActive)
|
||||
}
|
||||
>
|
||||
{account.isActive ? (
|
||||
<PowerOffIcon data-icon="inline-start" />
|
||||
) : (
|
||||
<PowerIcon data-icon="inline-start" />
|
||||
)}
|
||||
{account.isActive ? "停用账户" : "启用账户"}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setEditingAccount(account)
|
||||
setDialogOpen(true)
|
||||
}}
|
||||
>
|
||||
<PencilIcon data-icon="inline-start" />
|
||||
编辑账户
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
onClick={() => setDeletingAccount(account)}
|
||||
>
|
||||
<Trash2Icon data-icon="inline-start" />
|
||||
删除账户
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={account.id}
|
||||
className={`grid gap-3 border-b border-border/60 px-4 py-3 last:border-b-0 md:grid-cols-[minmax(220px,1.6fr)_110px_110px_64px] md:items-center ${!account.isActive ? "opacity-60" : ""}`}
|
||||
>
|
||||
<div className="flex min-w-0 items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
|
||||
{typeIcon(account.accountType)}
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<p className="truncate text-sm font-medium">
|
||||
{account.name}
|
||||
</p>
|
||||
{!account.isActive && (
|
||||
<Badge variant="secondary">已停用</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="truncate text-xs text-muted-foreground">
|
||||
{account.issuerName ||
|
||||
account.platform ||
|
||||
account.location ||
|
||||
account.remark ||
|
||||
""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="shrink-0 md:hidden">{actionMenu}</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs md:block">
|
||||
<span className="text-muted-foreground md:hidden">
|
||||
类型
|
||||
</span>
|
||||
{typeLabels[account.accountType]}
|
||||
</div>
|
||||
<div className="flex justify-between text-xs md:block">
|
||||
<span className="text-muted-foreground md:hidden">
|
||||
关联渠道
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<CreditCardIcon className="size-3.5 text-muted-foreground" />
|
||||
{account.channelCount} 个
|
||||
</span>
|
||||
</div>
|
||||
<div className="hidden md:flex md:justify-end">
|
||||
{actionMenu}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex min-h-56 flex-col items-center justify-center rounded-lg border border-dashed border-border px-6 py-10 text-center">
|
||||
<Layers2Icon className="size-6 text-muted-foreground" />
|
||||
<h2 className="mt-3 text-sm font-semibold">
|
||||
{hasFilters ? "没有符合条件的账户" : "还没有资金账户"}
|
||||
</h2>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{hasFilters
|
||||
? "调整关键词或筛选条件后再试。"
|
||||
: "创建账户后即可关联支付渠道。"}
|
||||
</p>
|
||||
<div className="mt-4 flex gap-2">
|
||||
{hasFilters && (
|
||||
<Button variant="outline" size="sm" onClick={clearFilters}>
|
||||
清除筛选
|
||||
</Button>
|
||||
)}
|
||||
<Button size="sm" onClick={openCreate}>
|
||||
<PlusIcon data-icon="inline-start" />
|
||||
新建账户
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<AccountDialog
|
||||
key={`${dialogOpen}-${editingAccount?.id ?? "new"}`}
|
||||
open={dialogOpen}
|
||||
onOpenChange={setDialogOpen}
|
||||
account={editingAccount}
|
||||
onSuccess={() => router.refresh()}
|
||||
/>
|
||||
<Dialog
|
||||
open={Boolean(deletingAccount)}
|
||||
onOpenChange={(open) => !open && setDeletingAccount(null)}
|
||||
>
|
||||
<DialogContent className="sm:max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>确认删除账户</DialogTitle>
|
||||
<DialogDescription>
|
||||
将删除「{deletingAccount?.name}
|
||||
」。删除后不可恢复，历史关联记录会保留。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setDeletingAccount(null)}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={confirmDelete}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{isDeleting && (
|
||||
<Loader2Icon
|
||||
data-icon="inline-start"
|
||||
className="animate-spin"
|
||||
/>
|
||||
)}
|
||||
确认删除
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</main>
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user