HoshinoSuzumi/helios-evcs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: format code

Browse Source
This commit is contained in:
Timothy Yin
2026-03-11 00:18:12 +08:00
parent a3b9134299
commit 4d0c429d5f
12 changed files with 334 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
apps/web/app/dashboard/charge-points/[id]/page.tsx
View File

@@ -17,7 +17,7 @@ import {
TextField,
} from "@heroui/react";
import { ArrowLeft, Pencil, PlugConnection } from "@gravity-ui/icons";
import { api, type ChargePointDetail, type PaginatedTransactions } from "@/lib/api";
import { api } from "@/lib/api";
import { useSession } from "@/lib/auth-client";
// ── Status maps ────────────────────────────────────────────────────────────
@@ -116,8 +116,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
const txQuery = useQuery({
queryKey: ["chargePointTransactions", id, txPage],
queryFn: () =>
api.transactions.list({ page: txPage, limit: TX_LIMIT, chargePointId: id }),
queryFn: () => api.transactions.list({ page: txPage, limit: TX_LIMIT, chargePointId: id }),
refetchInterval: 3_000,
});
@@ -240,104 +239,104 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
<div className="grid gap-4 md:grid-cols-2">
{/* Device info — admin only */}
{isAdmin && (
<div className="rounded-xl border border-border bg-surface p-4">
<h2 className="mb-3 text-sm font-semibold text-foreground">设备信息</h2>
<dl className="divide-y divide-border">
{[
{ label: "品牌", value: cp.chargePointVendor },
{ label: "型号", value: cp.chargePointModel },
{ label: "序列号", value: cp.chargePointSerialNumber },
{ label: "固件版本", value: cp.firmwareVersion },
{ label: "电表型号", value: cp.meterType },
{ label: "电表序列号", value: cp.meterSerialNumber },
{ label: "ICCID", value: cp.iccid },
{ label: "IMSI", value: cp.imsi },
].map(({ label, value }) => (
<div key={label} className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">{label}</dt>
<dd className="truncate text-sm text-foreground">
{value ?? <span className="text-muted">—</span>}
</dd>
</div>
))}
</dl>
</div>
<div className="rounded-xl border border-border bg-surface p-4">
<h2 className="mb-3 text-sm font-semibold text-foreground">设备信息</h2>
<dl className="divide-y divide-border">
{[
{ label: "品牌", value: cp.chargePointVendor },
{ label: "型号", value: cp.chargePointModel },
{ label: "序列号", value: cp.chargePointSerialNumber },
{ label: "固件版本", value: cp.firmwareVersion },
{ label: "电表型号", value: cp.meterType },
{ label: "电表序列号", value: cp.meterSerialNumber },
{ label: "ICCID", value: cp.iccid },
{ label: "IMSI", value: cp.imsi },
].map(({ label, value }) => (
<div key={label} className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">{label}</dt>
<dd className="truncate text-sm text-foreground">
{value ?? <span className="text-muted">—</span>}
</dd>
</div>
))}
</dl>
</div>
)}
{/* Operation info — admin only */}
{isAdmin && (
<div className="rounded-xl border border-border bg-surface p-4">
<h2 className="mb-3 text-sm font-semibold text-foreground">运行配置</h2>
<dl className="divide-y divide-border">
<div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">注册状态</dt>
<dd>
<Chip
color={registrationColorMap[cp.registrationStatus] ?? "warning"}
size="sm"
variant="soft"
>
{cp.registrationStatus}
</Chip>
</dd>
</div>
<div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">电价</dt>
<dd className="text-sm text-foreground">
{cp.feePerKwh > 0 ? (
<span>
{cp.feePerKwh} 分/kWh
<span className="ml-1 text-xs text-muted">
(¥{(cp.feePerKwh / 100).toFixed(2)}/kWh)
<div className="rounded-xl border border-border bg-surface p-4">
<h2 className="mb-3 text-sm font-semibold text-foreground">运行配置</h2>
<dl className="divide-y divide-border">
<div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">注册状态</dt>
<dd>
<Chip
color={registrationColorMap[cp.registrationStatus] ?? "warning"}
size="sm"
variant="soft"
>
{cp.registrationStatus}
</Chip>
</dd>
</div>
<div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">电价</dt>
<dd className="text-sm text-foreground">
{cp.feePerKwh > 0 ? (
<span>
{cp.feePerKwh} 分/kWh
<span className="ml-1 text-xs text-muted">
(¥{(cp.feePerKwh / 100).toFixed(2)}/kWh)
</span>
</span>
</span>
) : (
"免费"
)}
</dd>
</div>
<div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">心跳间隔</dt>
<dd className="text-sm text-foreground">
{cp.heartbeatInterval != null ? (
`${cp.heartbeatInterval} 秒`
) : (
<span className="text-muted">—</span>
)}
</dd>
</div>
<div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">最后心跳</dt>
<dd className="text-right text-sm text-foreground">
{cp.lastHeartbeatAt ? (
<span title={new Date(cp.lastHeartbeatAt).toLocaleString("zh-CN")}>
{relativeTime(cp.lastHeartbeatAt)}
</span>
) : (
<span className="text-muted">—</span>
)}
</dd>
</div>
<div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">最后启动通知</dt>
<dd className="text-right text-sm text-foreground">
{cp.lastBootNotificationAt ? (
<span title={new Date(cp.lastBootNotificationAt).toLocaleString("zh-CN")}>
{relativeTime(cp.lastBootNotificationAt)}
</span>
) : (
<span className="text-muted">—</span>
)}
</dd>
</div>
<div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">注册时间</dt>
<dd className="text-sm text-foreground">
{new Date(cp.createdAt).toLocaleDateString("zh-CN")}
</dd>
</div>
</dl>
</div>
) : (
"免费"
)}
</dd>
</div>
<div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">心跳间隔</dt>
<dd className="text-sm text-foreground">
{cp.heartbeatInterval != null ? (
`${cp.heartbeatInterval} 秒`
) : (
<span className="text-muted">—</span>
)}
</dd>
</div>
<div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">最后心跳</dt>
<dd className="text-right text-sm text-foreground">
{cp.lastHeartbeatAt ? (
<span title={new Date(cp.lastHeartbeatAt).toLocaleString("zh-CN")}>
{relativeTime(cp.lastHeartbeatAt)}
</span>
) : (
<span className="text-muted">—</span>
)}
</dd>
</div>
<div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">最后启动通知</dt>
<dd className="text-right text-sm text-foreground">
{cp.lastBootNotificationAt ? (
<span title={new Date(cp.lastBootNotificationAt).toLocaleString("zh-CN")}>
{relativeTime(cp.lastBootNotificationAt)}
</span>
) : (
<span className="text-muted">—</span>
)}
</dd>
</div>
<div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">注册时间</dt>
<dd className="text-sm text-foreground">
{new Date(cp.createdAt).toLocaleDateString("zh-CN")}
</dd>
</div>
</dl>
</div>
)}
{/* Fee info — user only */}
@@ -362,7 +361,9 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
<dt className="shrink-0 text-sm text-muted">充电桥状态</dt>
<dd>
<div className="flex items-center gap-1.5">
<span className={`size-2 rounded-full ${isOnline ? "bg-success animate-pulse" : "bg-muted"}`} />
<span
className={`size-2 rounded-full ${isOnline ? "bg-success animate-pulse" : "bg-muted"}`}
/>
<span className="text-sm text-foreground">{isOnline ? "在线" : "离线"}</span>
</div>
</dd>

71
apps/web/app/dashboard/id-tags/page.tsx
View File

@@ -337,7 +337,12 @@ export default function IdTagsPage() {
const [deletingTag, setDeletingTag] = useState<string | null>(null);
const [claiming, setClaiming] = useState(false);
const { data: idTagsData, isPending: loading, isFetching: refreshing, refetch } = useQuery({
const {
data: idTagsData,
isPending: loading,
isFetching: refreshing,
refetch,
} = useQuery({
queryKey: ["idTags"],
queryFn: async () => {
const [tagList, userList] = await Promise.all([
@@ -435,38 +440,38 @@ export default function IdTagsPage() {
<ArrowRotateRight className={`size-4 ${refreshing ? "animate-spin" : ""}`} />
</Button>
<Modal>
<Button size="sm" variant="secondary" onPress={openCreate}>
<Plus className="size-4" />
新增储值卡
</Button>
<Modal.Backdrop>
<Modal.Container scroll="outside">
<Modal.Dialog className="sm:max-w-105">
<Modal.CloseTrigger />
<Modal.Header>
<Modal.Heading>新增储值卡</Modal.Heading>
</Modal.Header>
<Modal.Body className="space-y-3">
<TagFormBody
form={form}
setForm={setForm}
isEdit={false}
users={users}
tags={tags}
/>
</Modal.Body>
<Modal.Footer className="flex justify-end gap-2">
<Button slot="close" variant="ghost">
取消
</Button>
<Button isDisabled={saving} slot="close" onPress={handleSave}>
{saving ? <Spinner size="sm" /> : "创建"}
</Button>
</Modal.Footer>
</Modal.Dialog>
</Modal.Container>
</Modal.Backdrop>
</Modal>
<Button size="sm" variant="secondary" onPress={openCreate}>
<Plus className="size-4" />
新增储值卡
</Button>
<Modal.Backdrop>
<Modal.Container scroll="outside">
<Modal.Dialog className="sm:max-w-105">
<Modal.CloseTrigger />
<Modal.Header>
<Modal.Heading>新增储值卡</Modal.Heading>
</Modal.Header>
<Modal.Body className="space-y-3">
<TagFormBody
form={form}
setForm={setForm}
isEdit={false}
users={users}
tags={tags}
/>
</Modal.Body>
<Modal.Footer className="flex justify-end gap-2">
<Button slot="close" variant="ghost">
取消
</Button>
<Button isDisabled={saving} slot="close" onPress={handleSave}>
{saving ? <Spinner size="sm" /> : "创建"}
</Button>
</Modal.Footer>
</Modal.Dialog>
</Modal.Container>
</Modal.Backdrop>
</Modal>
</div>
) : (
<Button size="sm" variant="secondary" isDisabled={claiming} onPress={handleClaim}>

12
apps/web/app/dashboard/layout.tsx
View File

@@ -1,6 +1,6 @@
import { ReactNode } from 'react'
import Sidebar from '@/components/sidebar'
import { ReactQueryProvider } from '@/components/query-provider'
import { ReactNode } from "react";
import Sidebar from "@/components/sidebar";
import { ReactQueryProvider } from "@/components/query-provider";
export default function DashboardLayout({ children }: { children: ReactNode }) {
return (
@@ -11,12 +11,10 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
<div className="flex min-w-0 flex-1 flex-col">
<main className="flex-1 overflow-y-auto pt-14 lg:pt-0">
<div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<ReactQueryProvider>
{children}
</ReactQueryProvider>
<ReactQueryProvider>{children}</ReactQueryProvider>
</div>
</main>
</div>
</div>
)
);
}

13
apps/web/app/dashboard/page.tsx
View File

@@ -118,9 +118,7 @@ function RecentTransactions({ txns }: { txns: Transaction[] }) {
<span
className={`flex size-7 shrink-0 items-center justify-center rounded-full ${active ? "bg-warning-soft" : "bg-success/10"}`}
>
<Thunderbolt
className={`size-3.5 ${active ? "text-warning" : "text-success"}`}
/>
<Thunderbolt className={`size-3.5 ${active ? "text-warning" : "text-success"}`} />
</span>
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium text-foreground">
@@ -174,9 +172,7 @@ function ChargePointStatus({ cps }: { cps: ChargePoint[] }) {
{chargingCount > 0 && (
<p className="text-xs font-medium text-warning">{chargingCount} 充电中</p>
)}
<p className="text-xs text-muted">
{online ? `${availableCount} 可用` : "离线"}
</p>
<p className="text-xs text-muted">{online ? `${availableCount} 可用` : "离线"}</p>
</div>
</li>
);
@@ -283,9 +279,7 @@ export default function DashboardPage() {
footer={
<>
<StatusDot color="success" />
<span className="font-medium text-success">
{s?.onlineChargePoints ?? 0} 在线
</span>
<span className="font-medium text-success">{s?.onlineChargePoints ?? 0} 在线</span>
<span className="text-border">·</span>
<span>{offlineCount} 离线</span>
</>
@@ -383,4 +377,3 @@ export default function DashboardPage() {
</div>
);
}

36
apps/web/app/dashboard/settings/page.tsx
View File

@@ -223,27 +223,35 @@ export default function SettingsPage() {
placeholder="对外显示的名称"
value={profileName}
onChange={(e) => setProfileName(e.target.value)}
onKeyDown={(e) => { if (e.key === "Enter") void handleSaveProfile(); }}
onKeyDown={(e) => {
if (e.key === "Enter") void handleSaveProfile();
}}
/>
</TextField>
{profileError && (
<Alert status="danger">
<Alert.Indicator />
<Alert.Content><Alert.Description>{profileError}</Alert.Description></Alert.Content>
<Alert.Content>
<Alert.Description>{profileError}</Alert.Description>
</Alert.Content>
<CloseButton onPress={() => setProfileError("")} />
</Alert>
)}
{profileSuccess && (
<Alert status="success">
<Alert.Indicator />
<Alert.Content><Alert.Description>{profileSuccess}</Alert.Description></Alert.Content>
<Alert.Content>
<Alert.Description>{profileSuccess}</Alert.Description>
</Alert.Content>
<CloseButton onPress={() => setProfileSuccess("")} />
</Alert>
)}
<div className="flex justify-end">
<Button
size="sm"
isDisabled={savingProfile || !profileName.trim() || profileName === session?.user.name}
isDisabled={
savingProfile || !profileName.trim() || profileName === session?.user.name
}
onPress={handleSaveProfile}
>
{savingProfile ? <Spinner size="sm" color="current" /> : "保存"}
@@ -292,20 +300,26 @@ export default function SettingsPage() {
placeholder="再次输入新密码"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
onKeyDown={(e) => { if (e.key === "Enter") void handleChangePassword(); }}
onKeyDown={(e) => {
if (e.key === "Enter") void handleChangePassword();
}}
/>
</TextField>
{pwError && (
<Alert status="danger">
<Alert.Indicator />
<Alert.Content><Alert.Description>{pwError}</Alert.Description></Alert.Content>
<Alert.Content>
<Alert.Description>{pwError}</Alert.Description>
</Alert.Content>
<CloseButton onPress={() => setPwError("")} />
</Alert>
)}
{pwSuccess && (
<Alert status="success">
<Alert.Indicator />
<Alert.Content><Alert.Description>{pwSuccess}</Alert.Description></Alert.Content>
<Alert.Content>
<Alert.Description>{pwSuccess}</Alert.Description>
</Alert.Content>
<CloseButton onPress={() => setPwSuccess("")} />
</Alert>
)}
@@ -369,7 +383,9 @@ export default function SettingsPage() {
<div className="border-b border-border px-5 py-3">
<Alert status="danger">
<Alert.Indicator />
<Alert.Content><Alert.Description>{error}</Alert.Description></Alert.Content>
<Alert.Content>
<Alert.Description>{error}</Alert.Description>
</Alert.Content>
<CloseButton onPress={() => setError("")} />
</Alert>
</div>
@@ -378,7 +394,9 @@ export default function SettingsPage() {
<div className="border-b border-border px-5 py-3">
<Alert status="success">
<Alert.Indicator />
<Alert.Content><Alert.Description>{success}</Alert.Description></Alert.Content>
<Alert.Content>
<Alert.Description>{success}</Alert.Description>
</Alert.Content>
<CloseButton onPress={() => setSuccess("")} />
</Alert>
</div>

103
apps/web/app/dashboard/transactions/page.tsx
View File

@@ -4,7 +4,7 @@ import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Button, Chip, Modal, Pagination, Spinner, Table } from "@heroui/react";
import { TrashBin } from "@gravity-ui/icons";
import { api, type PaginatedTransactions } from "@/lib/api";
import { api } from "@/lib/api";
import { useSession } from "@/lib/auth-client";
const LIMIT = 15;
@@ -27,7 +27,11 @@ export default function TransactionsPage() {
const [stoppingId, setStoppingId] = useState<number | null>(null);
const [deletingId, setDeletingId] = useState<number | null>(null);
const { data, isPending: loading, refetch } = useQuery({
const {
data,
isPending: loading,
refetch,
} = useQuery({
queryKey: ["transactions", page, status],
queryFn: () =>
api.transactions.list({
@@ -197,53 +201,54 @@ export default function TransactionsPage() {
</Modal>
)}
{isAdmin && (
<Modal>
<Button
isIconOnly
size="sm"
variant="tertiary"
isDisabled={deletingId === tx.id}
>
{deletingId === tx.id ? (
<Spinner size="sm" />
) : (
<TrashBin className="size-4" />
)}
</Button>
<Modal.Backdrop>
<Modal.Container scroll="outside">
<Modal.Dialog className="sm:max-w-96">
<Modal.CloseTrigger />
<Modal.Header>
<Modal.Heading>确认删除记录</Modal.Heading>
</Modal.Header>
<Modal.Body>
<p className="text-sm text-muted">
将永久删除充电记录{" "}
<span className="font-mono font-medium text-foreground">
#{tx.id}
</span>
（储值卡：<span className="font-mono">{tx.idTag}</span>）。
{!tx.stopTimestamp && "该记录仍进行中，删除同时将重置接口状态。"}
</p>
</Modal.Body>
<Modal.Footer className="flex justify-end gap-2">
<Button slot="close" variant="ghost">
取消
</Button>
<Button
slot="close"
variant="danger"
isDisabled={deletingId === tx.id}
onPress={() => handleDelete(tx.id)}
>
{deletingId === tx.id ? <Spinner size="sm" /> : "确认删除"}
</Button>
</Modal.Footer>
</Modal.Dialog>
</Modal.Container>
</Modal.Backdrop>
</Modal>
<Modal>
<Button
isIconOnly
size="sm"
variant="tertiary"
isDisabled={deletingId === tx.id}
>
{deletingId === tx.id ? (
<Spinner size="sm" />
) : (
<TrashBin className="size-4" />
)}
</Button>
<Modal.Backdrop>
<Modal.Container scroll="outside">
<Modal.Dialog className="sm:max-w-96">
<Modal.CloseTrigger />
<Modal.Header>
<Modal.Heading>确认删除记录</Modal.Heading>
</Modal.Header>
<Modal.Body>
<p className="text-sm text-muted">
将永久删除充电记录{" "}
<span className="font-mono font-medium text-foreground">
#{tx.id}
</span>
（储值卡：<span className="font-mono">{tx.idTag}</span>）。
{!tx.stopTimestamp &&
"该记录仍进行中，删除同时将重置接口状态。"}
</p>
</Modal.Body>
<Modal.Footer className="flex justify-end gap-2">
<Button slot="close" variant="ghost">
取消
</Button>
<Button
slot="close"
variant="danger"
isDisabled={deletingId === tx.id}
onPress={() => handleDelete(tx.id)}
>
{deletingId === tx.id ? <Spinner size="sm" /> : "确认删除"}
</Button>
</Modal.Footer>
</Modal.Dialog>
</Modal.Container>
</Modal.Backdrop>
</Modal>
)}
</div>
</Table.Cell>

7
apps/web/app/layout.tsx
View File

@@ -5,12 +5,12 @@ import "./globals.css";
const fontSaira = Saira({
variable: "--font-saira",
subsets: ["latin"],
})
});
const fontNotoSans = Noto_Sans({
variable: "--font-noto-sans",
subsets: ["latin"],
})
});
const fontMono = Geist_Mono({
variable: "--font-geist-mono",
@@ -19,7 +19,8 @@ const fontMono = Geist_Mono({
export const metadata: Metadata = {
title: "Helios EVCS",
description: "A modern EV charging station management system built with Next.js, Drizzle ORM, and OCPP.",
description:
"A modern EV charging station management system built with Next.js, Drizzle ORM, and OCPP.",
};
export default function RootLayout({

2
apps/web/app/login/page.tsx
View File

@@ -141,7 +141,7 @@ export default function LoginPage() {
</Card.Content>
</Card>
<p className="mt-6 text-xs text-muted/60">OCPP 1.6-J Protocol • v0.1.0</p>
<p className="mt-6 text-xs text-muted/60">Helios EVCS</p>
</div>
);
}

4
apps/web/app/page.tsx
View File

@@ -1,5 +1,5 @@
import { redirect } from 'next/navigation'
import { redirect } from "next/navigation";
export default function Home() {
redirect('/dashboard')
redirect("/dashboard");
}

24
apps/web/components/sidebar-footer.tsx
View File

@@ -1,18 +1,18 @@
'use client'
"use client";
import { useRouter } from 'next/navigation'
import { ArrowRightFromSquare, PersonFill } from '@gravity-ui/icons'
import { signOut, useSession } from '@/lib/auth-client'
import { useRouter } from "next/navigation";
import { ArrowRightFromSquare, PersonFill } from "@gravity-ui/icons";
import { signOut, useSession } from "@/lib/auth-client";
export default function SidebarFooter() {
const router = useRouter()
const { data: session } = useSession()
const router = useRouter();
const { data: session } = useSession();
const handleSignOut = async () => {
await signOut({ fetchOptions: { credentials: 'include' } })
router.push('/login')
router.refresh()
}
await signOut({ fetchOptions: { credentials: "include" } });
router.push("/login");
router.refresh();
};
return (
<div className="border-t border-border p-3">
@@ -27,7 +27,7 @@ export default function SidebarFooter() {
{session.user.name || session.user.email}
</p>
<p className="truncate text-xs leading-tight text-muted capitalize">
{session.user.role ?? 'user'}
{session.user.role ?? "user"}
</p>
</div>
</div>
@@ -44,5 +44,5 @@ export default function SidebarFooter() {
<p className="mt-2 px-2 text-[11px] text-muted/60">Helios EVCS</p>
</div>
)
);
}

140
apps/web/components/sidebar.tsx
View File

@@ -1,25 +1,40 @@
'use client'
"use client";
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useState } from 'react'
import { CreditCard, Gear, ListCheck, Person, PlugConnection, Thunderbolt, Xmark, Bars } from '@gravity-ui/icons'
import SidebarFooter from '@/components/sidebar-footer'
import { useSession } from '@/lib/auth-client'
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import {
CreditCard,
Gear,
ListCheck,
Person,
PlugConnection,
Thunderbolt,
Xmark,
Bars,
} from "@gravity-ui/icons";
import SidebarFooter from "@/components/sidebar-footer";
import { useSession } from "@/lib/auth-client";
const navItems = [
{ href: '/dashboard', label: '概览', icon: Thunderbolt, exact: true, adminOnly: false },
{ href: '/dashboard/charge-points', label: '充电桩', icon: PlugConnection, adminOnly: false },
{ href: '/dashboard/transactions', label: '充电记录', icon: ListCheck, adminOnly: false },
{ href: '/dashboard/id-tags', label: '储值卡', icon: CreditCard, adminOnly: false },
{ href: '/dashboard/users', label: '用户管理', icon: Person, adminOnly: true },
]
{ href: "/dashboard", label: "概览", icon: Thunderbolt, exact: true, adminOnly: false },
{ href: "/dashboard/charge-points", label: "充电桩", icon: PlugConnection, adminOnly: false },
{ href: "/dashboard/transactions", label: "充电记录", icon: ListCheck, adminOnly: false },
{ href: "/dashboard/id-tags", label: "储值卡", icon: CreditCard, adminOnly: false },
{ href: "/dashboard/users", label: "用户管理", icon: Person, adminOnly: true },
];
const settingsItems = [
{ href: '/dashboard/settings', label: '账号设置', icon: Gear },
]
const settingsItems = [{ href: "/dashboard/settings", label: "账号设置", icon: Gear }];
function NavContent({ pathname, isAdmin, onNavigate }: { pathname: string; isAdmin: boolean; onNavigate?: () => void }) {
function NavContent({
pathname,
isAdmin,
onNavigate,
}: {
pathname: string;
isAdmin: boolean;
onNavigate?: () => void;
}) {
return (
<>
{/* Logo */}
@@ -37,70 +52,68 @@ function NavContent({ pathname, isAdmin, onNavigate }: { pathname: string; isAdm
<p className="mb-1 px-2 text-[11px] font-semibold uppercase tracking-widest text-muted">
管理
</p>
{navItems.filter((item) => !item.adminOnly || isAdmin).map((item) => {
const isActive = item.exact
? pathname === item.href
: pathname === item.href || pathname.startsWith(item.href + '/')
const Icon = item.icon
return (
<Link
key={item.href}
href={item.href}
onClick={onNavigate}
className={[
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
isActive
? 'bg-accent/10 text-accent'
: 'text-muted hover:bg-surface-tertiary hover:text-foreground',
].join(' ')}
>
<Icon className="size-4 shrink-0" />
<span>{item.label}</span>
{isActive && (
<span className="ml-auto h-1.5 w-1.5 rounded-full bg-accent" />
)}
</Link>
)
})}
{navItems
.filter((item) => !item.adminOnly || isAdmin)
.map((item) => {
const isActive = item.exact
? pathname === item.href
: pathname === item.href || pathname.startsWith(item.href + "/");
const Icon = item.icon;
return (
<Link
key={item.href}
href={item.href}
onClick={onNavigate}
className={[
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
isActive
? "bg-accent/10 text-accent"
: "text-muted hover:bg-surface-tertiary hover:text-foreground",
].join(" ")}
>
<Icon className="size-4 shrink-0" />
<span>{item.label}</span>
{isActive && <span className="ml-auto h-1.5 w-1.5 rounded-full bg-accent" />}
</Link>
);
})}
<p className="mb-1 mt-3 px-2 text-[11px] font-semibold uppercase tracking-widest text-muted">
设置
</p>
{settingsItems.map((item) => {
const isActive = pathname === item.href || pathname.startsWith(item.href + '/')
const Icon = item.icon
const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
const Icon = item.icon;
return (
<Link
key={item.href}
href={item.href}
onClick={onNavigate}
className={[
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
isActive
? 'bg-accent/10 text-accent'
: 'text-muted hover:bg-surface-tertiary hover:text-foreground',
].join(' ')}
? "bg-accent/10 text-accent"
: "text-muted hover:bg-surface-tertiary hover:text-foreground",
].join(" ")}
>
<Icon className="size-4 shrink-0" />
<span>{item.label}</span>
{isActive && (
<span className="ml-auto h-1.5 w-1.5 rounded-full bg-accent" />
)}
{isActive && <span className="ml-auto h-1.5 w-1.5 rounded-full bg-accent" />}
</Link>
)
);
})}
</nav>
{/* Footer */}
<SidebarFooter />
</>
)
);
}
export default function Sidebar() {
const pathname = usePathname()
const [open, setOpen] = useState(false)
const { data: sessionData } = useSession()
const isAdmin = sessionData?.user?.role === "admin"
const pathname = usePathname();
const [open, setOpen] = useState(false);
const { data: sessionData } = useSession();
const isAdmin = sessionData?.user?.role === "admin";
return (
<>
@@ -124,18 +137,15 @@ export default function Sidebar() {
{/* Mobile drawer overlay */}
{open && (
<div
className="fixed inset-0 z-40 bg-black/50 lg:hidden"
onClick={() => setOpen(false)}
/>
<div className="fixed inset-0 z-40 bg-black/50 lg:hidden" onClick={() => setOpen(false)} />
)}
{/* Mobile drawer */}
<aside
className={[
'fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-border bg-surface-secondary transition-transform duration-300 lg:hidden',
open ? 'translate-x-0' : '-translate-x-full',
].join(' ')}
"fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-border bg-surface-secondary transition-transform duration-300 lg:hidden",
open ? "translate-x-0" : "-translate-x-full",
].join(" ")}
>
<button
type="button"
@@ -153,5 +163,5 @@ export default function Sidebar() {
<NavContent pathname={pathname} isAdmin={isAdmin} />
</aside>
</>
)
);
}

22
apps/web/lib/api.ts
View File

@@ -156,12 +156,15 @@ export const api = {
method: "POST",
body: JSON.stringify(data),
}),
update: (id: string, data: {
feePerKwh?: number;
registrationStatus?: "Accepted" | "Pending" | "Rejected";
chargePointVendor?: string;
chargePointModel?: string;
}) =>
update: (
id: string,
data: {
feePerKwh?: number;
registrationStatus?: "Accepted" | "Pending" | "Rejected";
chargePointVendor?: string;
chargePointModel?: string;
},
) =>
apiFetch<ChargePoint>(`/api/charge-points/${id}`, {
method: "PATCH",
body: JSON.stringify(data),
@@ -170,7 +173,12 @@ export const api = {
apiFetch<{ success: true }>(`/api/charge-points/${id}`, { method: "DELETE" }),
},
transactions: {
list: (params?: { page?: number; limit?: number; status?: "active" | "completed"; chargePointId?: string }) => {
list: (params?: {
page?: number;
limit?: number;
status?: "active" | "completed";
chargePointId?: string;
}) => {
const q = new URLSearchParams();
if (params?.page) q.set("page", String(params.page));
if (params?.limit) q.set("limit", String(params.limit));