wlw/ai-agent
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor dashboard pages to use new Dashboard components for improved structure and consistency

Browse Source
This commit is contained in:
mlogclub
2026-05-24 09:41:16 +08:00
parent aca50b9511
commit ac45a40171
10 changed files with 393 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/dashboard/agent-run-logs/page.tsx
+37 -43
View File
@@ -4,6 +4,11 @@ import { useCallback, useEffect, useMemo, useState } from "react"
import { RefreshCwIcon, SearchIcon } from "lucide-react" import { RefreshCwIcon, SearchIcon } from "lucide-react"
import { toast } from "sonner" import { toast } from "sonner"
import {
DashboardPage,
DashboardTableShell,
DashboardToolbar,
} from "@/components/dashboard-page"
import { ListPagination } from "@/components/list-pagination" import { ListPagination } from "@/components/list-pagination"
import { OptionCombobox } from "@/components/option-combobox" import { OptionCombobox } from "@/components/option-combobox"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
@@ -67,21 +72,6 @@ function actionBadgeVariant(action: string) {
} }
} }
function hitlBadgeVariant(status: string) {
switch (status) {
case "pending":
return "secondary" as const
case "confirmed":
return "default" as const
case "cancelled":
return "outline" as const
case "expired":
return "destructive" as const
default:
return "secondary" as const
}
}
export default function DashboardAgentRunLogsPage() { export default function DashboardAgentRunLogsPage() {
const [keywordInput, setKeywordInput] = useState("") const [keywordInput, setKeywordInput] = useState("")
const [plannedActionInput, setPlannedActionInput] = useState("all") const [plannedActionInput, setPlannedActionInput] = useState("all")
@@ -174,8 +164,20 @@ export default function DashboardAgentRunLogsPage() {
return ( return (
<> <>
<div className="flex flex-1 flex-col gap-6 p-4 lg:p-6"> <DashboardPage>
<div className="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-[minmax(0,1.6fr)_repeat(5,minmax(0,0.7fr))_auto_auto] xl:items-center"> <DashboardToolbar
actions={
<Button
variant="outline"
onClick={() => void loadData()}
disabled={loading}
className="w-full xl:w-auto"
>
<RefreshCwIcon className={loading ? "animate-spin" : ""} />
刷新
</Button>
}
>
<div className="relative min-w-0"> <div className="relative min-w-0">
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" /> <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
<Input <Input
@@ -240,18 +242,23 @@ export default function DashboardAgentRunLogsPage() {
<SearchIcon /> <SearchIcon />
查询 查询
</Button> </Button>
<Button </DashboardToolbar>
variant="outline"
onClick={() => void loadData()}
disabled={loading}
className="w-full xl:w-auto"
>
<RefreshCwIcon className={loading ? "animate-spin" : ""} />
刷新列表
</Button>
</div>
<div className="overflow-hidden rounded-lg border bg-background"> <DashboardTableShell
pagination={
<ListPagination
page={result.page.page}
total={result.page.total}
limit={limit}
loading={loading}
onPageChange={setPage}
onLimitChange={(nextLimit) => {
setLimit(nextLimit)
setPage(1)
}}
/>
}
>
{!loading && result.results.length === 0 ? ( {!loading && result.results.length === 0 ? (
<div className="py-14 text-center text-sm text-muted-foreground"> <div className="py-14 text-center text-sm text-muted-foreground">
暂无 Agent 运行日志 暂无 Agent 运行日志
@@ -352,21 +359,8 @@ export default function DashboardAgentRunLogsPage() {
</div> </div>
</div> </div>
)} )}
<div className="border-t px-4 py-3"> </DashboardTableShell>
<ListPagination </DashboardPage>
page={result.page.page}
total={result.page.total}
limit={limit}
loading={loading}
onPageChange={setPage}
onLimitChange={(nextLimit) => {
setLimit(nextLimit)
setPage(1)
}}
/>
</div>
</div>
</div>
<AgentRunLogDetailDialog <AgentRunLogDetailDialog
open={detailOpen} open={detailOpen}
logId={activeLogId} logId={activeLogId}
web/app/dashboard/agents/page.tsx
+44 -41
View File
@@ -12,6 +12,11 @@ import {
import { useCallback, useEffect, useState, type KeyboardEvent } from "react"; import { useCallback, useEffect, useState, type KeyboardEvent } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import {
DashboardTableShell,
DashboardTableStateRow,
DashboardToolbar,
} from "@/components/dashboard-page";
import { ListPagination } from "@/components/list-pagination"; import { ListPagination } from "@/components/list-pagination";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@@ -247,14 +252,15 @@ export default function DashboardAgentsPage() {
</div> </div>
<div className="min-w-0 flex-1 p-4 lg:p-6"> <div className="min-w-0 flex-1 p-4 lg:p-6">
<div className="flex h-full flex-col gap-6"> <div className="flex h-full flex-col gap-6">
<div className="flex items-start justify-between gap-4"> <DashboardToolbar
<div className="min-w-0"> actions={
<div className="text-lg font-semibold"> <Button onClick={openCreateDialog}>
{selectedTeam ? selectedTeam.name : "客服档案"} <PlusIcon />
</div> 新建
</div> </Button>
<div className="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-end"> }
<div className="relative min-w-72"> >
<div className="relative w-full sm:w-72">
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" /> <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
<Input <Input
value={displayNameInput} value={displayNameInput}
@@ -271,7 +277,7 @@ export default function DashboardAgentsPage() {
onChange={(event) => setAgentCodeInput(event.target.value)} onChange={(event) => setAgentCodeInput(event.target.value)}
onKeyDown={handleFilterKeyDown} onKeyDown={handleFilterKeyDown}
placeholder="按客服工号筛选" placeholder="按客服工号筛选"
className="w-full xl:w-48" className="w-full sm:w-44"
/> />
<Select <Select
value={statusFilterInput} value={statusFilterInput}
@@ -279,7 +285,7 @@ export default function DashboardAgentsPage() {
setStatusFilterInput(value ?? "all") setStatusFilterInput(value ?? "all")
} }
> >
<SelectTrigger className="w-full xl:w-36"> <SelectTrigger className="w-full sm:w-36">
<SelectValue> <SelectValue>
{serviceStatusOptions.find( {serviceStatusOptions.find(
(item) => item.value === statusFilterInput, (item) => item.value === statusFilterInput,
@@ -302,14 +308,23 @@ export default function DashboardAgentsPage() {
<SearchIcon /> <SearchIcon />
查询 查询
</Button> </Button>
<Button onClick={openCreateDialog}> </DashboardToolbar>
<PlusIcon /> <DashboardTableShell
新建 className="min-h-0"
</Button> pagination={
</div> <ListPagination
</div> page={result.page.page}
<div className="min-h-0 space-y-4"> total={result.page.total}
<div className="overflow-hidden rounded-2xl border bg-background"> limit={limit}
loading={loading}
onPageChange={handlePageChange}
onLimitChange={(nextLimit) => {
setLimit(nextLimit);
setPage(1);
}}
/>
}
>
<Table> <Table>
<TableHeader className="bg-muted/40"> <TableHeader className="bg-muted/40">
<TableRow> <TableRow>
@@ -431,33 +446,21 @@ export default function DashboardAgentsPage() {
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
{!loading && result.results.length === 0 ? ( {loading || result.results.length === 0 ? (
<TableRow> <DashboardTableStateRow
<TableCell colSpan={5}
colSpan={5} loading={loading}
className="py-12 text-center text-muted-foreground" loadingText="正在加载客服档案..."
> emptyText={
{selectedTeam selectedTeam
? "当前客服组下没有匹配的客服档案" ? "当前客服组下没有匹配的客服档案"
: "没有匹配的客服档案"} : "没有匹配的客服档案"
</TableCell> }
</TableRow> />
) : null} ) : null}
</TableBody> </TableBody>
</Table> </Table>
</div> </DashboardTableShell>
<ListPagination
page={result.page.page}
total={result.page.total}
limit={limit}
loading={loading}
onPageChange={handlePageChange}
onLimitChange={(nextLimit) => {
setLimit(nextLimit);
setPage(1);
}}
/>
</div>
</div> </div>
</div> </div>
</div> </div>
web/app/dashboard/ai-agents/page.tsx
+51 -41
View File
@@ -36,6 +36,12 @@ import {
} from "react"; } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import {
DashboardPage,
DashboardTableShell,
DashboardTableStateRow,
DashboardToolbar,
} from "@/components/dashboard-page";
import { ListPagination } from "@/components/list-pagination"; import { ListPagination } from "@/components/list-pagination";
import { OptionCombobox } from "@/components/option-combobox"; import { OptionCombobox } from "@/components/option-combobox";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
@@ -449,16 +455,33 @@ export default function DashboardAIAgentsPage() {
return ( return (
<> <>
<div className="flex flex-1 flex-col gap-6 p-4 lg:p-6"> <DashboardPage>
<div className="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-end"> <DashboardToolbar
actions={
<>
<Button
variant="outline"
onClick={() => void loadData()}
disabled={loading}
>
<RefreshCwIcon className={loading ? "animate-spin" : ""} />
刷新
</Button>
<Button onClick={openCreateDialog}>
<PlusIcon />
新建 AI Agent
</Button>
</>
}
>
<Input <Input
value={nameInput} value={nameInput}
onChange={(event) => setNameInput(event.target.value)} onChange={(event) => setNameInput(event.target.value)}
onKeyDown={handleFilterKeyDown} onKeyDown={handleFilterKeyDown}
placeholder="按名称筛选" placeholder="按名称筛选"
className="w-full xl:w-56" className="w-full sm:w-56"
/> />
<div className="w-full xl:w-52"> <div className="w-full sm:w-52">
<OptionCombobox <OptionCombobox
value={statusInput} value={statusInput}
options={statusOptions} options={statusOptions}
@@ -472,21 +495,22 @@ export default function DashboardAIAgentsPage() {
<SearchIcon /> <SearchIcon />
查询 查询
</Button> </Button>
<Button </DashboardToolbar>
variant="outline"
onClick={() => void loadData()}
disabled={loading}
>
<RefreshCwIcon className={loading ? "animate-spin" : ""} />
刷新列表
</Button>
<Button onClick={openCreateDialog}>
<PlusIcon />
新建 AI Agent
</Button>
</div>
<div className="rounded-xl border bg-card"> <DashboardTableShell
pagination={
<ListPagination
page={result.page.page}
limit={result.page.limit}
total={result.page.total}
onPageChange={(nextPage) => setPage(nextPage)}
onLimitChange={(nextLimit) => {
setLimit(nextLimit);
setPage(1);
}}
/>
}
>
<DndContext <DndContext
sensors={sensors} sensors={sensors}
collisionDetection={closestCenter} collisionDetection={closestCenter}
@@ -507,15 +531,13 @@ export default function DashboardAIAgentsPage() {
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{result.results.length === 0 ? ( {loading || result.results.length === 0 ? (
<TableRow> <DashboardTableStateRow
<TableCell colSpan={9}
colSpan={9} loading={loading}
className="py-12 text-center text-muted-foreground" loadingText="正在加载 AI Agent..."
> emptyText="暂无 AI Agent"
{loading ? "正在加载 AI Agent..." : "暂无 AI Agent"} />
</TableCell>
</TableRow>
) : null} ) : null}
<SortableContext <SortableContext
items={result.results.map((item) => item.id)} items={result.results.map((item) => item.id)}
@@ -536,20 +558,8 @@ export default function DashboardAIAgentsPage() {
</TableBody> </TableBody>
</Table> </Table>
</DndContext> </DndContext>
<div className="border-t px-4 py-3"> </DashboardTableShell>
<ListPagination </DashboardPage>
page={result.page.page}
limit={result.page.limit}
total={result.page.total}
onPageChange={(nextPage) => setPage(nextPage)}
onLimitChange={(nextLimit) => {
setLimit(nextLimit);
setPage(1);
}}
/>
</div>
</div>
</div>
<EditDialog <EditDialog
open={dialogOpen} open={dialogOpen}
web/app/dashboard/ai-configs/page.tsx
+50 -48
View File
@@ -29,6 +29,12 @@ import {
import { useCallback, useEffect, useState, type CSSProperties } from "react"; import { useCallback, useEffect, useState, type CSSProperties } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import {
DashboardPage,
DashboardTableShell,
DashboardTableStateRow,
DashboardToolbar,
} from "@/components/dashboard-page";
import { ListPagination } from "@/components/list-pagination"; import { ListPagination } from "@/components/list-pagination";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@@ -498,9 +504,26 @@ export default function DashboardAIConfigsPage() {
return ( return (
<> <>
<div className="flex flex-1 flex-col gap-6 p-4 lg:p-6"> <DashboardPage>
<div className="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-end"> <DashboardToolbar
<div className="relative min-w-72"> actions={
<>
<Button
variant="outline"
onClick={() => void loadData()}
disabled={loading}
>
<RefreshCwIcon className={loading ? "animate-spin" : ""} />
刷新
</Button>
<Button onClick={openCreateDialog}>
<PlusIcon />
新建
</Button>
</>
}
>
<div className="relative w-full sm:w-72">
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" /> <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
<Input <Input
value={keywordInput} value={keywordInput}
@@ -510,7 +533,7 @@ export default function DashboardAIConfigsPage() {
className="pl-9" className="pl-9"
/> />
</div> </div>
<div className="w-full xl:w-40"> <div className="w-full sm:w-40">
<OptionCombobox <OptionCombobox
value={modelTypeFilterInput} value={modelTypeFilterInput}
options={modelTypeFilterOptions} options={modelTypeFilterOptions}
@@ -520,7 +543,7 @@ export default function DashboardAIConfigsPage() {
onChange={setModelTypeFilterInput} onChange={setModelTypeFilterInput}
/> />
</div> </div>
<div className="w-full xl:w-40"> <div className="w-full sm:w-40">
<OptionCombobox <OptionCombobox
value={providerFilterInput} value={providerFilterInput}
options={providerFilterOptions} options={providerFilterOptions}
@@ -530,7 +553,7 @@ export default function DashboardAIConfigsPage() {
onChange={setProviderFilterInput} onChange={setProviderFilterInput}
/> />
</div> </div>
<div className="w-full xl:w-32"> <div className="w-full sm:w-32">
<OptionCombobox <OptionCombobox
value={statusFilterInput} value={statusFilterInput}
options={listStatusOptions} options={listStatusOptions}
@@ -544,21 +567,19 @@ export default function DashboardAIConfigsPage() {
<SearchIcon /> <SearchIcon />
查询 查询
</Button> </Button>
<Button </DashboardToolbar>
variant="outline"
onClick={() => void loadData()}
disabled={loading}
>
<RefreshCwIcon className={loading ? "animate-spin" : ""} />
刷新列表
</Button>
<Button onClick={openCreateDialog}>
<PlusIcon />
新建
</Button>
</div>
<div className="rounded-2xl border bg-card"> <DashboardTableShell
pagination={
<ListPagination
page={result.page.page}
limit={result.page.limit}
total={result.page.total}
onPageChange={handlePageChange}
onLimitChange={handleLimitChange}
/>
}
>
<DndContext <DndContext
sensors={sensors} sensors={sensors}
collisionDetection={closestCenter} collisionDetection={closestCenter}
@@ -578,24 +599,13 @@ export default function DashboardAIConfigsPage() {
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{loading ? ( {loading || result.results.length === 0 ? (
<TableRow> <DashboardTableStateRow
<TableCell colSpan={8}
colSpan={8} loading={loading}
className="py-10 text-center text-muted-foreground" loadingText="正在加载 AI 配置..."
> emptyText="暂无 AI 配置数据"
正在加载 AI 配置... />
</TableCell>
</TableRow>
) : result.results.length === 0 ? (
<TableRow>
<TableCell
colSpan={8}
className="py-10 text-center text-muted-foreground"
>
暂无 AI 配置数据
</TableCell>
</TableRow>
) : ( ) : (
<SortableContext <SortableContext
items={result.results.map((item) => item.id)} items={result.results.map((item) => item.id)}
@@ -617,16 +627,8 @@ export default function DashboardAIConfigsPage() {
</TableBody> </TableBody>
</Table> </Table>
</DndContext> </DndContext>
</div> </DashboardTableShell>
</DashboardPage>
<ListPagination
page={result.page.page}
limit={result.page.limit}
total={result.page.total}
onPageChange={handlePageChange}
onLimitChange={handleLimitChange}
/>
</div>
<EditDialog <EditDialog
open={dialogOpen} open={dialogOpen}
web/app/dashboard/customers/page.tsx
+41 -32
View File
@@ -12,6 +12,12 @@ import { useCallback, useEffect, useMemo, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { type CustomerFormSavePayload } from "@/components/customer-form"; import { type CustomerFormSavePayload } from "@/components/customer-form";
import {
DashboardPage,
DashboardTableShell,
DashboardTableStateRow,
DashboardToolbar,
} from "@/components/dashboard-page";
import { ListPagination } from "@/components/list-pagination"; import { ListPagination } from "@/components/list-pagination";
import { import {
OptionCombobox, OptionCombobox,
@@ -257,9 +263,16 @@ export default function DashboardCustomersPage() {
return ( return (
<> <>
<div className="flex flex-1 flex-col gap-6 p-4 lg:p-6"> <DashboardPage>
<div className="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-end"> <DashboardToolbar
<div className="relative min-w-72"> actions={
<Button onClick={openCreateDialog}>
<PlusIcon />
新建
</Button>
}
>
<div className="relative w-full sm:w-72">
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" /> <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
<Input <Input
value={keywordInput} value={keywordInput}
@@ -320,13 +333,23 @@ export default function DashboardCustomersPage() {
<SearchIcon /> <SearchIcon />
查询 查询
</Button> </Button>
<Button onClick={openCreateDialog}> </DashboardToolbar>
<PlusIcon />
新建
</Button>
</div>
<div className="overflow-hidden rounded-lg border bg-card"> <DashboardTableShell
pagination={
<ListPagination
page={result.page.page}
total={result.page.total}
limit={result.page.limit}
loading={loading}
onPageChange={handlePageChange}
onLimitChange={(nextLimit) => {
setLimit(nextLimit);
setPage(1);
}}
/>
}
>
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
@@ -341,15 +364,13 @@ export default function DashboardCustomersPage() {
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{result.results.length === 0 && !loading ? ( {loading || result.results.length === 0 ? (
<TableRow> <DashboardTableStateRow
<TableCell colSpan={8}
colSpan={8} loading={loading}
className="py-10 text-center text-muted-foreground" loadingText="正在加载客户数据..."
> emptyText="暂无客户数据"
暂无客户数据 />
</TableCell>
</TableRow>
) : ( ) : (
result.results.map((item) => { result.results.map((item) => {
const actionLoading = actionLoadingId === item.id; const actionLoading = actionLoadingId === item.id;
@@ -441,20 +462,8 @@ export default function DashboardCustomersPage() {
)} )}
</TableBody> </TableBody>
</Table> </Table>
</div> </DashboardTableShell>
</DashboardPage>
<ListPagination
page={result.page.page}
total={result.page.total}
limit={result.page.limit}
loading={loading}
onPageChange={handlePageChange}
onLimitChange={(nextLimit) => {
setLimit(nextLimit);
setPage(1);
}}
/>
</div>
<EditDialog <EditDialog
open={dialogOpen} open={dialogOpen}
web/app/dashboard/notifications/page.tsx
+27 -26
View File
@@ -5,6 +5,11 @@ import { useRouter } from "next/navigation"
import { BellIcon, CheckCheckIcon, RefreshCwIcon } from "lucide-react" import { BellIcon, CheckCheckIcon, RefreshCwIcon } from "lucide-react"
import { toast } from "sonner" import { toast } from "sonner"
import {
DashboardPage,
DashboardTableShell,
DashboardToolbar,
} from "@/components/dashboard-page"
import { ListPagination } from "@/components/list-pagination" import { ListPagination } from "@/components/list-pagination"
import { useNotifications } from "@/components/notification-provider" import { useNotifications } from "@/components/notification-provider"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
@@ -104,15 +109,10 @@ export default function DashboardNotificationsPage() {
} }
return ( return (
<div className="flex flex-col gap-4 p-4 md:p-6"> <DashboardPage>
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> <DashboardToolbar
<div> actions={
<h1 className="text-xl font-semibold">通知中心</h1> <>
<p className="text-sm text-muted-foreground">
查看工单、会话等业务流转提醒
</p>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button variant="outline" onClick={() => void loadData()} disabled={loading}> <Button variant="outline" onClick={() => void loadData()} disabled={loading}>
<RefreshCwIcon className={cn(loading && "animate-spin")} /> <RefreshCwIcon className={cn(loading && "animate-spin")} />
刷新 刷新
@@ -125,10 +125,9 @@ export default function DashboardNotificationsPage() {
<CheckCheckIcon /> <CheckCheckIcon />
全部已读 全部已读
</Button> </Button>
</div> </>
</div> }
>
<div className="flex flex-wrap gap-2">
{readStatusOptions.map((option) => ( {readStatusOptions.map((option) => (
<Button <Button
key={option.value} key={option.value}
@@ -138,9 +137,20 @@ export default function DashboardNotificationsPage() {
{option.label} {option.label}
</Button> </Button>
))} ))}
</div> </DashboardToolbar>
<div className="overflow-hidden rounded-lg border bg-background"> <DashboardTableShell
pagination={
<ListPagination
page={result.page.page}
limit={result.page.limit}
total={result.page.total}
loading={loading}
onPageChange={handlePageChange}
onLimitChange={handleLimitChange}
/>
}
>
{result.results.length > 0 ? ( {result.results.length > 0 ? (
<div className="divide-y"> <div className="divide-y">
{result.results.map((item) => { {result.results.map((item) => {
@@ -172,16 +182,7 @@ export default function DashboardNotificationsPage() {
{loading ? "正在加载通知" : "暂无通知"} {loading ? "正在加载通知" : "暂无通知"}
</div> </div>
)} )}
</div> </DashboardTableShell>
</DashboardPage>
<ListPagination
page={result.page.page}
limit={result.page.limit}
total={result.page.total}
loading={loading}
onPageChange={handlePageChange}
onLimitChange={handleLimitChange}
/>
</div>
) )
} }
web/app/dashboard/skill-definition/page.tsx
+49 -38
View File
@@ -13,6 +13,12 @@ import {
} from "lucide-react" } from "lucide-react"
import { toast } from "sonner" import { toast } from "sonner"
import {
DashboardPage,
DashboardTableShell,
DashboardTableStateRow,
DashboardToolbar,
} from "@/components/dashboard-page"
import { ListPagination } from "@/components/list-pagination" import { ListPagination } from "@/components/list-pagination"
import { OptionCombobox } from "@/components/option-combobox" import { OptionCombobox } from "@/components/option-combobox"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
@@ -362,9 +368,22 @@ export default function DashboardSkillsPage() {
return ( return (
<> <>
<div className="flex flex-1 flex-col gap-6 p-4 lg:p-6"> <DashboardPage>
<div className="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-end"> <DashboardToolbar
<div className="relative min-w-72"> actions={
<>
<Button variant="outline" onClick={() => void loadData()} disabled={loading}>
<RefreshCwIcon className={loading ? "animate-spin" : ""} />
刷新
</Button>
<Button onClick={openCreateDialog}>
<PlusIcon />
新建
</Button>
</>
}
>
<div className="relative w-full sm:w-72">
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" /> <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
<Input <Input
value={nameInput} value={nameInput}
@@ -379,9 +398,9 @@ export default function DashboardSkillsPage() {
onChange={(event) => setCodeInput(event.target.value)} onChange={(event) => setCodeInput(event.target.value)}
onKeyDown={handleFilterKeyDown} onKeyDown={handleFilterKeyDown}
placeholder="按编码筛选" placeholder="按编码筛选"
className="w-full xl:w-56" className="w-full sm:w-56"
/> />
<div className="w-full xl:w-36"> <div className="w-full sm:w-36">
<OptionCombobox <OptionCombobox
value={statusFilterInput} value={statusFilterInput}
options={statusFilterOptions} options={statusFilterOptions}
@@ -395,18 +414,23 @@ export default function DashboardSkillsPage() {
<SearchIcon /> <SearchIcon />
查询 查询
</Button> </Button>
<Button variant="outline" onClick={() => void loadData()} disabled={loading}> </DashboardToolbar>
<RefreshCwIcon className={loading ? "animate-spin" : ""} />
刷新列表
</Button>
<Button onClick={openCreateDialog}>
<PlusIcon />
新建
</Button>
</div>
<div className="space-y-4"> <DashboardTableShell
<div className="overflow-hidden rounded-2xl border bg-background"> pagination={
<ListPagination
page={result.page.page}
total={result.page.total}
limit={limit}
loading={loading}
onPageChange={handlePageChange}
onLimitChange={(nextLimit) => {
setLimit(nextLimit)
setPage(1)
}}
/>
}
>
<Table> <Table>
<TableHeader className="bg-muted/40"> <TableHeader className="bg-muted/40">
<TableRow> <TableRow>
@@ -417,12 +441,13 @@ export default function DashboardSkillsPage() {
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{!loading && result.results.length === 0 ? ( {loading || result.results.length === 0 ? (
<TableRow> <DashboardTableStateRow
<TableCell colSpan={4} className="py-12 text-center text-muted-foreground"> colSpan={4}
没有匹配的 Skill loading={loading}
</TableCell> loadingText="正在加载 Skill..."
</TableRow> emptyText="没有匹配的 Skill"
/>
) : null} ) : null}
{result.results.map((item) => ( {result.results.map((item) => (
<SkillRow <SkillRow
@@ -438,22 +463,8 @@ export default function DashboardSkillsPage() {
))} ))}
</TableBody> </TableBody>
</Table> </Table>
<div className="border-t px-4 py-3"> </DashboardTableShell>
<ListPagination </DashboardPage>
page={result.page.page}
total={result.page.total}
limit={limit}
loading={loading}
onPageChange={handlePageChange}
onLimitChange={(nextLimit) => {
setLimit(nextLimit)
setPage(1)
}}
/>
</div>
</div>
</div>
</div>
<EditDialog <EditDialog
open={dialogOpen} open={dialogOpen}
web/app/dashboard/tickets/page.tsx
+55 -49
View File
@@ -5,6 +5,12 @@ import { useSearchParams } from "next/navigation"
import { useCallback, useEffect, useMemo, useRef, useState } from "react" import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import { toast } from "sonner" import { toast } from "sonner"
import {
DashboardPage,
DashboardTableShell,
DashboardTableStateRow,
DashboardToolbar,
} from "@/components/dashboard-page"
import { OptionCombobox, type ComboboxOption } from "@/components/option-combobox" import { OptionCombobox, type ComboboxOption } from "@/components/option-combobox"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
@@ -244,48 +250,47 @@ export default function TicketsPage() {
} }
return ( return (
<div className="flex flex-col gap-4 p-6"> <DashboardPage>
<div className="flex flex-wrap items-center justify-between gap-3"> <div className="flex flex-wrap gap-2">
<div className=""> {quickViews.map((view) => (
<div className="flex flex-wrap gap-2"> <button
{quickViews.map((view) => ( key={view.key}
<button type="button"
key={view.key} className={cn(
type="button" "inline-flex min-w-0 items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition",
className={cn( quickView === view.key
"inline-flex min-w-0 items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition", ? "border-primary bg-primary text-primary-foreground"
quickView === view.key : "border-border bg-background hover:bg-muted",
? "border-primary bg-primary text-primary-foreground" )}
: "border-border bg-background hover:bg-muted", onClick={() => setQuickView(view.key)}
)} >
onClick={() => setQuickView(view.key)} <span className="truncate font-medium">{view.label}</span>
> <span
<span className="truncate font-medium">{view.label}</span> className={cn(
<span "rounded-full px-1.5 py-0.5 text-[11px] font-semibold tabular-nums",
className={cn( quickView === view.key ? "bg-primary-foreground/20" : "bg-muted text-muted-foreground",
"rounded-full px-1.5 py-0.5 text-[11px] font-semibold tabular-nums", )}
quickView === view.key ? "bg-primary-foreground/20" : "bg-muted text-muted-foreground", >
)} {view.count}
> </span>
{view.count} </button>
</span> ))}
</button>
))}
</div>
</div>
<div className="flex items-center gap-2">
<Button type="button" variant="outline" onClick={() => void loadData()} disabled={loading}>
<RefreshCcwIcon className={cn("size-4", loading ? "animate-spin" : "")} />
刷新
</Button>
<Button type="button" onClick={() => setCreateOpen(true)}>
<PlusIcon className="size-4" />
新建工单
</Button>
</div>
</div> </div>
<div className="flex flex-wrap items-center gap-2"> <DashboardToolbar
actions={
<>
<Button type="button" variant="outline" onClick={() => void loadData()} disabled={loading}>
<RefreshCcwIcon className={cn("size-4", loading ? "animate-spin" : "")} />
刷新
</Button>
<Button type="button" onClick={() => setCreateOpen(true)}>
<PlusIcon className="size-4" />
新建工单
</Button>
</>
}
>
<Input <Input
className="w-full sm:w-72" className="w-full sm:w-72"
placeholder="搜索编号、标题或描述" placeholder="搜索编号、标题或描述"
@@ -333,9 +338,9 @@ export default function TicketsPage() {
<SearchIcon className="size-4" /> <SearchIcon className="size-4" />
查询 查询
</Button> </Button>
</div> </DashboardToolbar>
<div className="overflow-hidden rounded-lg border border-border"> <DashboardTableShell>
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
@@ -348,11 +353,12 @@ export default function TicketsPage() {
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{tickets.length === 0 ? ( {tickets.length === 0 ? (
<TableRow> <DashboardTableStateRow
<TableCell colSpan={5} className="py-12 text-center text-sm text-muted-foreground"> colSpan={5}
{loading ? "加载中..." : "暂无工单"} loading={loading}
</TableCell> loadingText="正在加载工单..."
</TableRow> emptyText="暂无工单"
/>
) : ( ) : (
tickets.map((ticket) => ( tickets.map((ticket) => (
<TableRow key={ticket.id}> <TableRow key={ticket.id}>
@@ -408,7 +414,7 @@ export default function TicketsPage() {
)} )}
</TableBody> </TableBody>
</Table> </Table>
</div> </DashboardTableShell>
<EditDialog <EditDialog
open={createOpen} open={createOpen}
@@ -428,6 +434,6 @@ export default function TicketsPage() {
}} }}
onChanged={loadData} onChanged={loadData}
/> />
</div> </DashboardPage>
) )
} }
web/app/dashboard/users/page.tsx
+39 -29
View File
@@ -5,13 +5,19 @@ import {
KeyRoundIcon, KeyRoundIcon,
MoreHorizontalIcon, MoreHorizontalIcon,
PlusIcon, PlusIcon,
RefreshCwIcon,
SearchIcon, SearchIcon,
ShieldIcon, ShieldIcon,
UserRoundIcon, UserRoundIcon,
} from "lucide-react" } from "lucide-react"
import { toast } from "sonner" import { toast } from "sonner"
import {
DashboardPage,
DashboardTableShell,
DashboardTableStateRow,
DashboardToolbar,
} from "@/components/dashboard-page"
import { ListPagination } from "@/components/list-pagination"
import { import {
assignUserRoles, assignUserRoles,
createUser, createUser,
@@ -45,7 +51,6 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu" } from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import { ListPagination } from "@/components/list-pagination"
import { import {
Table, Table,
TableBody, TableBody,
@@ -294,13 +299,16 @@ export default function DashboardUsersPage() {
return ( return (
<> <>
<div className="flex flex-1 flex-col gap-6 p-4 lg:p-6"> <DashboardPage>
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-end"> <DashboardToolbar
<Button onClick={() => setCreatingOpen(true)} disabled={loading}> actions={
<PlusIcon /> <Button onClick={() => setCreatingOpen(true)} disabled={loading}>
添加用户 <PlusIcon />
</Button> 添加用户
<div className="relative min-w-72"> </Button>
}
>
<div className="relative w-full sm:w-72">
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" /> <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
<Input <Input
value={keywordInput} value={keywordInput}
@@ -313,9 +321,19 @@ export default function DashboardUsersPage() {
<Button variant="outline" onClick={applyFilters} disabled={loading}> <Button variant="outline" onClick={applyFilters} disabled={loading}>
查询 查询
</Button> </Button>
</div> </DashboardToolbar>
<div className="space-y-4"> <DashboardTableShell
<div className="overflow-hidden rounded-2xl border bg-background"> pagination={
<ListPagination
page={result.page.page}
total={result.page.total}
limit={result.page.limit}
loading={loading}
onPageChange={handlePageChange}
onLimitChange={handleLimitChange}
/>
}
>
<Table> <Table>
<TableHeader className="bg-muted/40"> <TableHeader className="bg-muted/40">
<TableRow> <TableRow>
@@ -428,26 +446,18 @@ export default function DashboardUsersPage() {
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
{!loading && result.results.length === 0 ? ( {loading || result.results.length === 0 ? (
<TableRow> <DashboardTableStateRow
<TableCell colSpan={6} className="py-12 text-center text-muted-foreground"> colSpan={6}
没有匹配的用户数据 loading={loading}
</TableCell> loadingText="正在加载用户数据..."
</TableRow> emptyText="没有匹配的用户数据"
/>
) : null} ) : null}
</TableBody> </TableBody>
</Table> </Table>
</div> </DashboardTableShell>
<ListPagination </DashboardPage>
page={result.page.page}
total={result.page.total}
limit={result.page.limit}
loading={loading}
onPageChange={handlePageChange}
onLimitChange={handleLimitChange}
/>
</div>
</div>
<CreateUserDrawer <CreateUserDrawer
open={creatingOpen} open={creatingOpen}
saving={savingCreate} saving={savingCreate}
web/components/dashboard-page.tsx
-26
View File
@@ -17,32 +17,6 @@ export function DashboardPage({
) )
} }
export function DashboardPageHeader({
title,
description,
actions,
}: {
title: string
description?: ReactNode
actions?: ReactNode
}) {
return (
<div className="flex flex-col gap-3 border-b pb-4 lg:flex-row lg:items-start lg:justify-between">
<div className="min-w-0 space-y-1">
<h1 className="truncate text-xl font-semibold tracking-tight">{title}</h1>
{description ? (
<div className="text-sm leading-6 text-muted-foreground">
{description}
</div>
) : null}
</div>
{actions ? (
<div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>
) : null}
</div>
)
}
export function DashboardToolbar({ export function DashboardToolbar({
className, className,
actions, actions,