JetSprow/J-Board-Lite
1
0
Fork 0
mirror of https://github.com/JetSprow/J-Board-Lite.git synced 2026-05-01 01:14:10 +05:30
Code Issues Packages Projects Releases Wiki Activity

Polish admin list UI for lite

Browse Source
This commit is contained in:
JetSprow
2026-04-30 20:49:03 +10:00
parent d666f1450f
commit 6ee9cf2857
11 changed files with 244 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/(admin)/admin/commerce/page.tsx
View File

@@ -1,7 +1,6 @@
import type { Metadata } from "next";
import { Gift, Sparkles } from "lucide-react";
import { createCoupon, createPromotionRule } from "@/actions/admin/commerce";
import { DetailItem, DetailList } from "@/components/admin/detail-list";
import { ActiveStatusBadge, StatusBadge } from "@/components/admin/status-badge";
import { PageHeader, PageShell, SectionHeader } from "@/components/shared/page-shell";
import { PendingSubmitButton } from "@/components/shared/pending-submit-button";
@@ -109,51 +108,66 @@ export default async function AdminCommercePage() {
<TabsContent value="manage" className="space-y-6">
<section className="space-y-4">
<SectionHeader title="优惠券" />
<div className="grid gap-4 lg:grid-cols-2">
<div className="surface-card divide-y divide-border/60 overflow-hidden rounded-xl">
{coupons.map((coupon) => (
<article key={coupon.id} className="surface-card rounded-xl p-4">
<div className="flex items-start justify-between gap-4">
<div className="flex items-start gap-3">
<span className="flex size-10 items-center justify-center rounded-[1rem] bg-amber-500/10 text-amber-700 dark:text-amber-300"><Gift className="size-4" /></span>
<div>
<h3 className="font-semibold">{coupon.name}</h3>
<p className="mt-1 font-mono text-sm text-primary">{coupon.code}</p>
<article key={coupon.id} className="grid gap-4 px-4 py-4 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,0.9fr)_auto] lg:items-center">
<div className="flex min-w-0 items-start gap-3">
<span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-amber-500/10 text-amber-700 dark:text-amber-300"><Gift className="size-4" /></span>
<div className="min-w-0">
<div className="flex flex-wrap items-center gap-2">
<h3 className="truncate font-semibold">{coupon.name}</h3>
<ActiveStatusBadge active={coupon.isActive} activeLabel="启用中" inactiveLabel="已停用" />
</div>
<p className="mt-1 truncate font-mono text-sm text-primary">{coupon.code}</p>
</div>
</div>
<div className="flex flex-wrap gap-2">
<StatusBadge tone="warning">
{coupon.discountType === "PERCENT_OFF" ? `${Number(coupon.discountValue)}%` : `¥${Number(coupon.discountValue).toFixed(2)}`}
</StatusBadge>
<StatusBadge>{coupon.thresholdAmount == null ? "无门槛" : `满 ¥${Number(coupon.thresholdAmount).toFixed(2)}`}</StatusBadge>
<StatusBadge>{coupon.isPublic ? "公开展示" : "仅发放"}</StatusBadge>
<StatusBadge>订单 {coupon._count.orders} · 发放 {coupon._count.grants}</StatusBadge>
</div>
<div className="flex justify-start lg:justify-end">
<CommerceToggleButton kind="coupon" id={coupon.id} active={coupon.isActive} />
</div>
<DetailList className="mt-4">
<DetailItem label="优惠">{coupon.discountType === "PERCENT_OFF" ? `${Number(coupon.discountValue)}%` : `¥${Number(coupon.discountValue).toFixed(2)}`}</DetailItem>
<DetailItem label="门槛">{coupon.thresholdAmount == null ? "无门槛" : `满 ¥${Number(coupon.thresholdAmount).toFixed(2)}`}</DetailItem>
<DetailItem label="可见性">{coupon.isPublic ? "公开" : "仅发放"}</DetailItem>
<DetailItem label="使用">订单 {coupon._count.orders} · 发放 {coupon._count.grants}</DetailItem>
</DetailList>
</article>
))}
{coupons.length === 0 && (
<p className="px-4 py-8 text-center text-sm text-muted-foreground">暂无优惠券</p>
)}
</div>
</section>
<section className="space-y-4">
<SectionHeader title="满减规则" />
<div className="grid gap-4 lg:grid-cols-2">
<div className="surface-card divide-y divide-border/60 overflow-hidden rounded-xl">
{promotions.map((rule) => (
<article key={rule.id} className="surface-card rounded-xl p-4">
<div className="flex items-start justify-between gap-4">
<div className="flex items-start gap-3">
<span className="flex size-10 items-center justify-center rounded-[1rem] bg-primary/10 text-primary"><Sparkles className="size-4" /></span>
<div>
<h3 className="font-semibold">{rule.name}</h3>
<p className="mt-1 text-sm text-muted-foreground">满 ¥{Number(rule.thresholdAmount).toFixed(2)} 减 ¥{Number(rule.discountAmount).toFixed(2)}</p>
<article key={rule.id} className="grid gap-4 px-4 py-4 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,0.75fr)_auto] lg:items-center">
<div className="flex min-w-0 items-start gap-3">
<span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary"><Sparkles className="size-4" /></span>
<div className="min-w-0">
<div className="flex flex-wrap items-center gap-2">
<h3 className="truncate font-semibold">{rule.name}</h3>
<ActiveStatusBadge active={rule.isActive} activeLabel="启用中" inactiveLabel="已停用" />
</div>
<p className="mt-1 text-sm text-muted-foreground">满 ¥{Number(rule.thresholdAmount).toFixed(2)} 减 ¥{Number(rule.discountAmount).toFixed(2)}</p>
</div>
<CommerceToggleButton kind="promotion" id={rule.id} active={rule.isActive} />
</div>
<div className="mt-4 flex flex-wrap gap-2">
<ActiveStatusBadge active={rule.isActive} activeLabel="启用中" inactiveLabel="已停用" />
<div className="flex flex-wrap gap-2">
<StatusBadge tone="info">减 ¥{Number(rule.discountAmount).toFixed(2)}</StatusBadge>
<StatusBadge>门槛 ¥{Number(rule.thresholdAmount).toFixed(2)}</StatusBadge>
<StatusBadge>排序 {rule.sortOrder}</StatusBadge>
</div>
<div className="flex justify-start lg:justify-end">
<CommerceToggleButton kind="promotion" id={rule.id} active={rule.isActive} />
</div>
</article>
))}
{promotions.length === 0 && (
<p className="px-4 py-8 text-center text-sm text-muted-foreground">暂无满减规则</p>
)}
</div>
</section>
</TabsContent>