✨ feat: impl accounts and channels
This commit is contained in:
@@ -0,0 +1,486 @@
|
||||
"use client"
|
||||
import * as React from "react"
|
||||
import Image from "next/image"
|
||||
import { CircleAlertIcon, Loader2Icon } from "lucide-react"
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
Field,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
FieldLegend,
|
||||
FieldSet,
|
||||
} from "@/components/ui/field"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxContent,
|
||||
ComboboxEmpty,
|
||||
ComboboxInput,
|
||||
ComboboxItem,
|
||||
ComboboxList,
|
||||
} from "@/components/ui/combobox"
|
||||
import {
|
||||
CARD_BRANDS,
|
||||
CARD_BRAND_LABELS,
|
||||
detectCardBrand,
|
||||
getCardBrandLogoUrl,
|
||||
normalizeCardBrand,
|
||||
type CardBrand,
|
||||
} from "@/lib/payment/card-brand"
|
||||
import {
|
||||
createChannelAction,
|
||||
updateChannelAction,
|
||||
type ChannelInput,
|
||||
type ChannelWithAccountNames,
|
||||
} from "@/lib/actions/channel"
|
||||
import { type AccountWithChannels } from "@/lib/actions/account"
|
||||
type ChannelType = "PAYMENT_CARD" | "E_WALLET" | "CASH" | "TRANSFER"
|
||||
const channelLabels = {
|
||||
PAYMENT_CARD: "支付卡",
|
||||
E_WALLET: "电子钱包",
|
||||
CASH: "现金",
|
||||
TRANSFER: "转账",
|
||||
} as const
|
||||
export function ChannelDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
channel,
|
||||
accounts,
|
||||
onSuccess,
|
||||
}: {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
channel?: ChannelWithAccountNames | null
|
||||
accounts: AccountWithChannels[]
|
||||
onSuccess: () => void
|
||||
}) {
|
||||
const editing = Boolean(channel)
|
||||
const [channelType, setChannelType] = React.useState<ChannelType>(
|
||||
channel?.channelType || "PAYMENT_CARD"
|
||||
)
|
||||
const [selectedAccounts, setSelectedAccounts] = React.useState<string[]>(
|
||||
channel
|
||||
? Array.isArray(channel.refAccounts)
|
||||
? channel.refAccounts
|
||||
: []
|
||||
: accounts.length
|
||||
? [accounts[0].id]
|
||||
: []
|
||||
)
|
||||
const [desc, setDesc] = React.useState(channel?.desc || "")
|
||||
const [region, setRegion] = React.useState(channel?.region || "")
|
||||
const [issuerName, setIssuerName] = React.useState(channel?.issuerName || "")
|
||||
const [cardType, setCardType] = React.useState<"CREDIT" | "DEBIT" | "NONE">(
|
||||
channel?.cardType || "CREDIT"
|
||||
)
|
||||
const [cardBrand, setCardBrand] = React.useState(channel?.cardBrand || "")
|
||||
const [cardNumberFull, setCardNumberFull] = React.useState(
|
||||
channel?.cardNumberFull || ""
|
||||
)
|
||||
const [cardNumberSuffix, setCardNumberSuffix] = React.useState(
|
||||
channel?.cardNumberFull ? "" : channel?.cardNumberSuffix || ""
|
||||
)
|
||||
const [platform, setPlatform] = React.useState(channel?.platform || "")
|
||||
const [platformAccountId, setPlatformAccountId] = React.useState(
|
||||
channel?.platformAccountId || ""
|
||||
)
|
||||
const [subChannel, setSubChannel] = React.useState(channel?.subChannel || "")
|
||||
const [subChannelType, setSubChannelType] = React.useState<
|
||||
"CREDIT" | "DEBIT" | "NONE"
|
||||
>(channel?.subChannelType || "DEBIT")
|
||||
const [isPending, setIsPending] = React.useState(false)
|
||||
const [errorMessage, setErrorMessage] = React.useState<string | null>(null)
|
||||
const cardBrandRequest = React.useRef(0)
|
||||
const submit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault()
|
||||
setErrorMessage(null)
|
||||
if (!selectedAccounts.length) {
|
||||
setErrorMessage("请至少关联一个资金账户")
|
||||
return
|
||||
}
|
||||
const full = cardNumberFull.trim()
|
||||
const payload: ChannelInput = {
|
||||
channelType,
|
||||
refAccounts: selectedAccounts,
|
||||
desc: desc.trim() || null,
|
||||
region: region.trim().toUpperCase() || null,
|
||||
issuerName:
|
||||
channelType === "PAYMENT_CARD" ? issuerName.trim() || null : null,
|
||||
cardType:
|
||||
channelType === "PAYMENT_CARD" && cardType !== "NONE" ? cardType : null,
|
||||
cardNumberFull: channelType === "PAYMENT_CARD" ? full || null : null,
|
||||
cardNumberSuffix:
|
||||
channelType === "PAYMENT_CARD" && !full
|
||||
? cardNumberSuffix.trim() || null
|
||||
: null,
|
||||
cardBrand:
|
||||
channelType === "PAYMENT_CARD" ? normalizeCardBrand(cardBrand) : null,
|
||||
platform: channelType === "E_WALLET" ? platform.trim() || null : null,
|
||||
platformAccountId:
|
||||
channelType === "E_WALLET" ? platformAccountId.trim() || null : null,
|
||||
subChannel: channelType === "E_WALLET" ? subChannel.trim() || null : null,
|
||||
subChannelType:
|
||||
channelType === "E_WALLET" && subChannelType !== "NONE"
|
||||
? subChannelType
|
||||
: null,
|
||||
}
|
||||
setIsPending(true)
|
||||
try {
|
||||
const result =
|
||||
editing && channel
|
||||
? await updateChannelAction(channel.id, payload)
|
||||
: await createChannelAction(payload)
|
||||
if (!result.success) {
|
||||
setErrorMessage(result.error || "保存失败，请检查输入")
|
||||
return
|
||||
}
|
||||
onOpenChange(false)
|
||||
onSuccess()
|
||||
} catch {
|
||||
setErrorMessage("网络异常，提交失败")
|
||||
} finally {
|
||||
setIsPending(false)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editing ? "编辑支付渠道" : "新建支付渠道"}</DialogTitle>
|
||||
<DialogDescription className="text-xs">
|
||||
配置渠道信息，并指定实际结算的资金账户。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form id="channel-form" onSubmit={submit}>
|
||||
<FieldGroup>
|
||||
{errorMessage && (
|
||||
<Alert variant="destructive">
|
||||
<CircleAlertIcon />
|
||||
<AlertTitle>无法保存渠道</AlertTitle>
|
||||
<AlertDescription>{errorMessage}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="desc">描述</FieldLabel>
|
||||
<Input
|
||||
id="desc"
|
||||
value={desc}
|
||||
onChange={(event) => setDesc(event.target.value)}
|
||||
placeholder="例如：日常主用渠道"
|
||||
disabled={isPending}
|
||||
/>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="channelType">类型</FieldLabel>
|
||||
<Select
|
||||
value={channelType}
|
||||
onValueChange={(value) =>
|
||||
value && setChannelType(value as ChannelType)
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="channelType">
|
||||
<SelectValue>{channelLabels[channelType]}</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="PAYMENT_CARD">支付卡</SelectItem>
|
||||
<SelectItem value="E_WALLET">电子钱包</SelectItem>
|
||||
<SelectItem value="CASH">现金</SelectItem>
|
||||
<SelectItem value="TRANSFER">转账</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<FieldSet>
|
||||
<div className="flex items-center justify-between">
|
||||
<FieldLegend variant="label">归属账户</FieldLegend>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
已选 {selectedAccounts.length} 个
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{accounts.length ? (
|
||||
accounts.map((account) => (
|
||||
<label
|
||||
key={account.id}
|
||||
className="flex cursor-pointer items-center gap-2 rounded-md border border-border/70 px-3 py-2 text-xs hover:bg-muted/50"
|
||||
>
|
||||
<Checkbox
|
||||
checked={selectedAccounts.includes(account.id)}
|
||||
onCheckedChange={(checked) =>
|
||||
setSelectedAccounts((items) =>
|
||||
checked
|
||||
? [...items, account.id]
|
||||
: items.filter((id) => id !== account.id)
|
||||
)
|
||||
}
|
||||
disabled={isPending}
|
||||
/>
|
||||
<span className="min-w-0 flex-1 truncate">
|
||||
{account.name}
|
||||
</span>
|
||||
<span className="font-mono text-muted-foreground">
|
||||
{account.primaryCurrency || "通用"}
|
||||
</span>
|
||||
</label>
|
||||
))
|
||||
) : (
|
||||
<p className="border border-dashed border-border p-3 text-center text-xs text-muted-foreground">
|
||||
暂无资金账户，请先创建账户。
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</FieldSet>
|
||||
<FieldGroup>
|
||||
{channelType === "PAYMENT_CARD" && (
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<Field>
|
||||
<FieldLabel htmlFor="issuerName">发卡机构</FieldLabel>
|
||||
<Input
|
||||
id="issuerName"
|
||||
value={issuerName}
|
||||
onChange={(event) => setIssuerName(event.target.value)}
|
||||
placeholder="例如：汇丰银行"
|
||||
disabled={isPending}
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="cardBrand">卡组织</FieldLabel>
|
||||
<Combobox
|
||||
items={CARD_BRANDS}
|
||||
value={normalizeCardBrand(cardBrand)}
|
||||
onValueChange={(value) => {
|
||||
cardBrandRequest.current += 1
|
||||
setCardBrand((value as CardBrand | null) || "")
|
||||
}}
|
||||
autoHighlight
|
||||
>
|
||||
<ComboboxInput
|
||||
id="cardBrand"
|
||||
placeholder="选择卡组织"
|
||||
disabled={isPending}
|
||||
/>
|
||||
<ComboboxContent>
|
||||
<ComboboxEmpty>没有匹配的卡组织</ComboboxEmpty>
|
||||
<ComboboxList>
|
||||
{(brand: CardBrand) => (
|
||||
<ComboboxItem key={brand} value={brand}>
|
||||
<Image
|
||||
src={getCardBrandLogoUrl(brand) || ""}
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="size-5 object-contain"
|
||||
/>
|
||||
{CARD_BRAND_LABELS[brand]}
|
||||
</ComboboxItem>
|
||||
)}
|
||||
</ComboboxList>
|
||||
</ComboboxContent>
|
||||
</Combobox>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="cardType">卡片类型</FieldLabel>
|
||||
<Select
|
||||
value={cardType}
|
||||
onValueChange={(value) =>
|
||||
value && setCardType(value as typeof cardType)
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="cardType">
|
||||
<SelectValue>
|
||||
{cardType === "CREDIT"
|
||||
? "信用卡"
|
||||
: cardType === "DEBIT"
|
||||
? "借记卡"
|
||||
: "未指定"}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="CREDIT">信用卡</SelectItem>
|
||||
<SelectItem value="DEBIT">借记卡</SelectItem>
|
||||
<SelectItem value="NONE">未指定</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="region">地区代码</FieldLabel>
|
||||
<Input
|
||||
id="region"
|
||||
value={region}
|
||||
onChange={(event) => setRegion(event.target.value)}
|
||||
placeholder="例如：HK"
|
||||
disabled={isPending}
|
||||
/>
|
||||
</Field>
|
||||
{!cardNumberSuffix && (
|
||||
<Field>
|
||||
<FieldLabel htmlFor="cardNumberFull">完整卡号</FieldLabel>
|
||||
<Input
|
||||
id="cardNumberFull"
|
||||
value={cardNumberFull}
|
||||
className="font-mono"
|
||||
onChange={(event) => {
|
||||
const value = event.target.value
|
||||
const request = ++cardBrandRequest.current
|
||||
setCardNumberFull(value)
|
||||
if (value) setCardNumberSuffix("")
|
||||
if (!value) return
|
||||
void detectCardBrand(value).then((brand) => {
|
||||
if (request === cardBrandRequest.current && brand)
|
||||
setCardBrand(brand)
|
||||
})
|
||||
}}
|
||||
placeholder="可留空"
|
||||
disabled={isPending}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
{!cardNumberFull && (
|
||||
<Field>
|
||||
<FieldLabel htmlFor="cardNumberSuffix">
|
||||
卡号末尾四位
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id="cardNumberSuffix"
|
||||
value={cardNumberSuffix}
|
||||
className="font-mono"
|
||||
onChange={(event) => {
|
||||
const value = event.target.value
|
||||
setCardNumberSuffix(value)
|
||||
if (value) setCardNumberFull("")
|
||||
}}
|
||||
placeholder="例如：8888"
|
||||
disabled={isPending}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{channelType === "E_WALLET" && (
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<Field>
|
||||
<FieldLabel htmlFor="platform">平台名称</FieldLabel>
|
||||
<Input
|
||||
id="platform"
|
||||
value={platform}
|
||||
onChange={(event) => setPlatform(event.target.value)}
|
||||
placeholder="例如：支付宝"
|
||||
disabled={isPending}
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="platformAccountId">
|
||||
平台账号
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id="platformAccountId"
|
||||
value={platformAccountId}
|
||||
onChange={(event) =>
|
||||
setPlatformAccountId(event.target.value)
|
||||
}
|
||||
placeholder="手机号或邮箱"
|
||||
disabled={isPending}
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="subChannel">子渠道名称</FieldLabel>
|
||||
<Input
|
||||
id="subChannel"
|
||||
value={subChannel}
|
||||
onChange={(event) => setSubChannel(event.target.value)}
|
||||
placeholder="例如：余额"
|
||||
disabled={isPending}
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="subChannelType">子渠道类型</FieldLabel>
|
||||
<Select
|
||||
value={subChannelType}
|
||||
onValueChange={(value) =>
|
||||
value &&
|
||||
setSubChannelType(value as typeof subChannelType)
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="subChannelType">
|
||||
<SelectValue>
|
||||
{subChannelType === "CREDIT"
|
||||
? "信用消费"
|
||||
: subChannelType === "DEBIT"
|
||||
? "借记储值"
|
||||
: "未指定"}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="DEBIT">借记储值</SelectItem>
|
||||
<SelectItem value="CREDIT">信用消费</SelectItem>
|
||||
<SelectItem value="NONE">未指定</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="walletRegion">地区代码</FieldLabel>
|
||||
<Input
|
||||
id="walletRegion"
|
||||
value={region}
|
||||
onChange={(event) => setRegion(event.target.value)}
|
||||
placeholder="例如：HK"
|
||||
disabled={isPending}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
)}
|
||||
{(channelType === "CASH" || channelType === "TRANSFER") && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
此类型无需额外信息。
|
||||
</p>
|
||||
)}
|
||||
</FieldGroup>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={isPending}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button form="channel-form" type="submit" disabled={isPending}>
|
||||
{isPending && (
|
||||
<Loader2Icon data-icon="inline-start" className="animate-spin" />
|
||||
)}
|
||||
{editing ? "保存修改" : "创建渠道"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,571 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import Image from "next/image"
|
||||
import { useRouter } from "next/navigation"
|
||||
import {
|
||||
ArrowRightLeftIcon,
|
||||
BanknoteIcon,
|
||||
CreditCardIcon,
|
||||
CopyIcon,
|
||||
EyeIcon,
|
||||
EyeOffIcon,
|
||||
Loader2Icon,
|
||||
MoreHorizontalIcon,
|
||||
PencilIcon,
|
||||
PowerIcon,
|
||||
PowerOffIcon,
|
||||
PlusIcon,
|
||||
SearchIcon,
|
||||
Trash2Icon,
|
||||
WalletCardsIcon,
|
||||
} from "lucide-react"
|
||||
import {
|
||||
type ChannelWithAccountNames,
|
||||
deleteChannelAction,
|
||||
toggleChannelActiveAction,
|
||||
} from "@/lib/actions/channel"
|
||||
import { 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 { ChannelDialog } from "./channel-dialog"
|
||||
import {
|
||||
CARD_BRAND_LABELS,
|
||||
getCardBrandLogoUrl,
|
||||
normalizeCardBrand,
|
||||
} from "@/lib/payment/card-brand"
|
||||
|
||||
interface ChannelsViewProps {
|
||||
initialChannels: ChannelWithAccountNames[]
|
||||
initialAccounts: AccountWithChannels[]
|
||||
}
|
||||
|
||||
const channelTypeLabels = {
|
||||
PAYMENT_CARD: "支付卡",
|
||||
E_WALLET: "电子钱包",
|
||||
CASH: "现金",
|
||||
TRANSFER: "转账",
|
||||
} as const
|
||||
const channelIcon = (type: ChannelWithAccountNames["channelType"]) =>
|
||||
type === "PAYMENT_CARD" ? (
|
||||
<CreditCardIcon className="size-4" />
|
||||
) : type === "E_WALLET" ? (
|
||||
<WalletCardsIcon className="size-4" />
|
||||
) : type === "CASH" ? (
|
||||
<BanknoteIcon className="size-4" />
|
||||
) : (
|
||||
<ArrowRightLeftIcon className="size-4" />
|
||||
)
|
||||
|
||||
function paymentCardIcon(channel: ChannelWithAccountNames) {
|
||||
const brand = normalizeCardBrand(channel.cardBrand)
|
||||
const logoUrl = getCardBrandLogoUrl(channel.cardBrand)
|
||||
|
||||
return logoUrl && brand ? (
|
||||
<Image
|
||||
src={logoUrl}
|
||||
alt={CARD_BRAND_LABELS[brand]}
|
||||
width={24}
|
||||
height={24}
|
||||
className="size-6 object-contain"
|
||||
/>
|
||||
) : (
|
||||
channelIcon(channel.channelType)
|
||||
)
|
||||
}
|
||||
|
||||
function channelName(channel: ChannelWithAccountNames) {
|
||||
if (channel.channelType === "PAYMENT_CARD")
|
||||
return channel.issuerName || "支付卡"
|
||||
if (channel.channelType === "E_WALLET") return channel.platform || "电子钱包"
|
||||
return channel.channelType === "CASH" ? "现金渠道" : "转账渠道"
|
||||
}
|
||||
|
||||
function formatCardNumber(cardNumber: string) {
|
||||
return cardNumber
|
||||
.replace(/\D/g, "")
|
||||
.replace(/(.{4})/g, "$1 ")
|
||||
.trim()
|
||||
}
|
||||
|
||||
export function ChannelsView({
|
||||
initialChannels,
|
||||
initialAccounts,
|
||||
}: ChannelsViewProps) {
|
||||
const router = useRouter()
|
||||
const [channelsList, setChannelsList] = React.useState(initialChannels)
|
||||
const [searchQuery, setSearchQuery] = React.useState("")
|
||||
const [typeFilter, setTypeFilter] = React.useState("ALL")
|
||||
const [dialogOpen, setDialogOpen] = React.useState(false)
|
||||
const [editingChannel, setEditingChannel] =
|
||||
React.useState<ChannelWithAccountNames | null>(null)
|
||||
const [deletingChannel, setDeletingChannel] =
|
||||
React.useState<ChannelWithAccountNames | null>(null)
|
||||
const [isDeleting, setIsDeleting] = React.useState(false)
|
||||
const [togglingId, setTogglingId] = React.useState<string | null>(null)
|
||||
const [visibleCardIds, setVisibleCardIds] = React.useState<Set<string>>(
|
||||
() => new Set()
|
||||
)
|
||||
const [copyStatus, setCopyStatus] = React.useState<{
|
||||
channelId: string
|
||||
message: string
|
||||
} | null>(null)
|
||||
|
||||
const filteredChannels = React.useMemo(() => {
|
||||
const query = searchQuery.trim().toLowerCase()
|
||||
return channelsList.filter((item) => {
|
||||
const searchable = [
|
||||
channelName(item),
|
||||
item.issuerName,
|
||||
item.cardBrand,
|
||||
item.cardNumberSuffix,
|
||||
item.platform,
|
||||
item.platformAccountId,
|
||||
item.region,
|
||||
item.subChannel,
|
||||
item.desc,
|
||||
...(item.linkedAccounts || []).map((account) => account.name),
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")
|
||||
.toLowerCase()
|
||||
return (
|
||||
(!query || searchable.includes(query)) &&
|
||||
(typeFilter === "ALL" || item.channelType === typeFilter)
|
||||
)
|
||||
})
|
||||
}, [channelsList, searchQuery, typeFilter])
|
||||
|
||||
const openCreate = () => {
|
||||
setEditingChannel(null)
|
||||
setDialogOpen(true)
|
||||
}
|
||||
const confirmDelete = async () => {
|
||||
if (!deletingChannel) return
|
||||
setIsDeleting(true)
|
||||
try {
|
||||
const result = await deleteChannelAction(deletingChannel.id)
|
||||
if (result.success) {
|
||||
setChannelsList((items) =>
|
||||
items.filter((item) => item.id !== deletingChannel.id)
|
||||
)
|
||||
setDeletingChannel(null)
|
||||
router.refresh()
|
||||
}
|
||||
} finally {
|
||||
setIsDeleting(false)
|
||||
}
|
||||
}
|
||||
const toggleActive = async (
|
||||
channel: ChannelWithAccountNames,
|
||||
isActive: boolean
|
||||
) => {
|
||||
setTogglingId(channel.id)
|
||||
setChannelsList((items) =>
|
||||
items.map((item) =>
|
||||
item.id === channel.id ? { ...item, isActive } : item
|
||||
)
|
||||
)
|
||||
try {
|
||||
const result = await toggleChannelActiveAction(channel.id, isActive)
|
||||
if (!result.success)
|
||||
setChannelsList((items) =>
|
||||
items.map((item) =>
|
||||
item.id === channel.id ? { ...item, isActive: !isActive } : item
|
||||
)
|
||||
)
|
||||
else router.refresh()
|
||||
} catch {
|
||||
setChannelsList((items) =>
|
||||
items.map((item) =>
|
||||
item.id === channel.id ? { ...item, isActive: !isActive } : item
|
||||
)
|
||||
)
|
||||
} finally {
|
||||
setTogglingId(null)
|
||||
}
|
||||
}
|
||||
const hasFilters = Boolean(searchQuery) || typeFilter !== "ALL"
|
||||
const clearFilters = () => {
|
||||
setSearchQuery("")
|
||||
setTypeFilter("ALL")
|
||||
}
|
||||
const toggleCardVisibility = (channelId: string) => {
|
||||
setVisibleCardIds((ids) => {
|
||||
const nextIds = new Set(ids)
|
||||
if (nextIds.has(channelId)) nextIds.delete(channelId)
|
||||
else nextIds.add(channelId)
|
||||
return nextIds
|
||||
})
|
||||
}
|
||||
const copyCardNumber = async (channel: ChannelWithAccountNames) => {
|
||||
if (!channel.cardNumberFull) return
|
||||
try {
|
||||
await navigator.clipboard.writeText(channel.cardNumberFull)
|
||||
setCopyStatus({ channelId: channel.id, message: "已复制" })
|
||||
} catch {
|
||||
setCopyStatus({ channelId: channel.id, message: "复制失败" })
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
<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>
|
||||
<Select
|
||||
value={typeFilter}
|
||||
onValueChange={(value) => setTypeFilter(value ?? "ALL")}
|
||||
>
|
||||
<SelectTrigger className="w-full md:w-36">
|
||||
<SelectValue>
|
||||
{typeFilter === "ALL"
|
||||
? "全部类型"
|
||||
: channelTypeLabels[
|
||||
typeFilter as keyof typeof channelTypeLabels
|
||||
]}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="ALL">全部类型</SelectItem>
|
||||
<SelectItem value="PAYMENT_CARD">支付卡</SelectItem>
|
||||
<SelectItem value="E_WALLET">电子钱包</SelectItem>
|
||||
<SelectItem value="CASH">现金</SelectItem>
|
||||
<SelectItem value="TRANSFER">转账</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{hasFilters && (
|
||||
<Button variant="ghost" size="sm" onClick={clearFilters}>
|
||||
清除筛选
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{filteredChannels.length > 0 ? (
|
||||
<div className="overflow-hidden rounded-lg border border-border/70 bg-card">
|
||||
<div className="hidden grid-cols-[minmax(220px,1.5fr)_minmax(180px,1fr)_110px_minmax(180px,1fr)_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>归属账户</span>
|
||||
<span />
|
||||
</div>
|
||||
{filteredChannels.map((channel) => {
|
||||
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 === channel.id}
|
||||
onClick={() => toggleActive(channel, !channel.isActive)}
|
||||
>
|
||||
{channel.isActive ? (
|
||||
<PowerOffIcon data-icon="inline-start" />
|
||||
) : (
|
||||
<PowerIcon data-icon="inline-start" />
|
||||
)}
|
||||
{channel.isActive ? "停用渠道" : "启用渠道"}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setEditingChannel(channel)
|
||||
setDialogOpen(true)
|
||||
}}
|
||||
>
|
||||
<PencilIcon data-icon="inline-start" />
|
||||
编辑渠道
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
onClick={() => setDeletingChannel(channel)}
|
||||
>
|
||||
<Trash2Icon data-icon="inline-start" />
|
||||
删除渠道
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={channel.id}
|
||||
className={`grid gap-3 border-b border-border/60 px-4 py-3 last:border-b-0 md:grid-cols-[minmax(220px,1.5fr)_minmax(180px,1fr)_110px_minmax(180px,1fr)_64px] md:items-center ${!channel.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">
|
||||
{channel.channelType === "PAYMENT_CARD"
|
||||
? paymentCardIcon(channel)
|
||||
: channelIcon(channel.channelType)}
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<p className="truncate text-sm font-medium">
|
||||
{channel.desc ||
|
||||
channel.platformAccountId ||
|
||||
channel.subChannel ||
|
||||
""}
|
||||
</p>
|
||||
{!channel.isActive && (
|
||||
<Badge variant="secondary">已停用</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex min-w-0 items-center gap-2 text-xs">
|
||||
<p className="min-w-0 truncate text-muted-foreground">
|
||||
{channelName(channel)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="shrink-0 md:hidden">{actionMenu}</div>
|
||||
</div>
|
||||
<div className="flex min-w-0 items-center justify-between gap-2 text-xs md:block">
|
||||
<span className="text-muted-foreground md:hidden">
|
||||
标识
|
||||
</span>
|
||||
<span className="min-w-0 truncate">
|
||||
{channel.channelType === "PAYMENT_CARD" &&
|
||||
(channel.cardNumberSuffix || channel.cardNumberFull) ? (
|
||||
<span className="flex min-w-0 items-center gap-1.5 text-sm">
|
||||
<span className="font-mono whitespace-nowrap text-muted-foreground">
|
||||
{visibleCardIds.has(channel.id) &&
|
||||
channel.cardNumberFull
|
||||
? formatCardNumber(channel.cardNumberFull)
|
||||
: `•••• ${
|
||||
channel.cardNumberSuffix ||
|
||||
formatCardNumber(
|
||||
channel.cardNumberFull || ""
|
||||
).slice(-4)
|
||||
}`}
|
||||
</span>
|
||||
{channel.cardNumberFull && (
|
||||
<>
|
||||
<Tooltip>
|
||||
<TooltipTrigger
|
||||
render={
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
aria-label={
|
||||
visibleCardIds.has(channel.id)
|
||||
? "隐藏完整卡号"
|
||||
: "显示完整卡号"
|
||||
}
|
||||
onClick={() =>
|
||||
toggleCardVisibility(channel.id)
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{visibleCardIds.has(channel.id) ? (
|
||||
<EyeOffIcon />
|
||||
) : (
|
||||
<EyeIcon />
|
||||
)}
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{visibleCardIds.has(channel.id)
|
||||
? "隐藏完整卡号"
|
||||
: "显示完整卡号"}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger
|
||||
render={
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
aria-label="复制卡号"
|
||||
onClick={() => copyCardNumber(channel)}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<CopyIcon />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>复制卡号</TooltipContent>
|
||||
</Tooltip>
|
||||
{copyStatus?.channelId === channel.id && (
|
||||
<span className="text-[11px] whitespace-nowrap text-muted-foreground">
|
||||
{copyStatus.message}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
) : channel.channelType === "E_WALLET" ? (
|
||||
channel.platformAccountId || ""
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs md:block">
|
||||
<span className="text-muted-foreground md:hidden">类型</span>
|
||||
<span>{channelTypeLabels[channel.channelType]}</span>
|
||||
</div>
|
||||
<div className="flex min-w-0 items-center justify-between gap-2 text-xs md:block">
|
||||
<span className="text-muted-foreground md:hidden">
|
||||
归属账户
|
||||
</span>
|
||||
<span className="truncate">
|
||||
{channel.linkedAccounts?.length ? (
|
||||
channel.linkedAccounts
|
||||
.map((account) => account.name)
|
||||
.join("、")
|
||||
) : (
|
||||
<span className="text-destructive">未关联</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="hidden md:flex md:justify-end">
|
||||
{actionMenu}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</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">
|
||||
<CreditCardIcon 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>
|
||||
)}
|
||||
<ChannelDialog
|
||||
key={`${dialogOpen}-${editingChannel?.id ?? "new"}`}
|
||||
open={dialogOpen}
|
||||
onOpenChange={setDialogOpen}
|
||||
channel={editingChannel}
|
||||
accounts={initialAccounts}
|
||||
onSuccess={() => router.refresh()}
|
||||
/>
|
||||
<Dialog
|
||||
open={Boolean(deletingChannel)}
|
||||
onOpenChange={(open) => !open && setDeletingChannel(null)}
|
||||
>
|
||||
<DialogContent className="sm:max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>确认删除渠道</DialogTitle>
|
||||
<DialogDescription>
|
||||
将删除「{deletingChannel ? channelName(deletingChannel) : ""}
|
||||
」。历史流水仍会保留，之后不能再选择此渠道。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setDeletingChannel(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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { redirect } from "next/navigation"
|
||||
import { auth } from "@/lib/auth"
|
||||
import { getChannelsAction } from "@/lib/actions/channel"
|
||||
import { getAccountsAction } from "@/lib/actions/account"
|
||||
import { AppSidebar } from "@/components/app-sidebar"
|
||||
import { AppHeader } from "@/components/app-header"
|
||||
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
|
||||
import { ChannelsView } from "./channels-view"
|
||||
|
||||
export default async function ChannelsPage() {
|
||||
const session = await auth()
|
||||
|
||||
if (!session?.user) {
|
||||
redirect("/login")
|
||||
}
|
||||
|
||||
const user = session.user
|
||||
const userName = user.name || "Fluxent 用户"
|
||||
const userEmail = user.email || ""
|
||||
const userAvatar = user.image || null
|
||||
|
||||
const [channelsRes, accountsRes] = await Promise.all([
|
||||
getChannelsAction(),
|
||||
getAccountsAction(),
|
||||
])
|
||||
|
||||
const initialChannels =
|
||||
channelsRes.success && channelsRes.data ? channelsRes.data : []
|
||||
const initialAccounts =
|
||||
accountsRes.success && accountsRes.data ? accountsRes.data : []
|
||||
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<AppSidebar
|
||||
user={{
|
||||
name: userName,
|
||||
email: userEmail,
|
||||
avatar: userAvatar,
|
||||
}}
|
||||
/>
|
||||
<SidebarInset>
|
||||
<AppHeader title="支付渠道" />
|
||||
|
||||
<ChannelsView
|
||||
key={JSON.stringify([initialChannels, initialAccounts])}
|
||||
initialChannels={initialChannels}
|
||||
initialAccounts={initialAccounts}
|
||||
/>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user