feat(web): деталь списка и набора правил по доскам макета
quality / changes (push) Successful in 7s
quality / api (push) Skipped
quality / commitlint (push) Skipped
quality / docker-check (push) Skipped
quality / openapi (push) Successful in 26s
quality / web (push) Successful in 51s
CD / quality (push) Successful in 1m26s
CD / publish (push) Successful in 1m37s
quality / changes (push) Successful in 7s
quality / api (push) Skipped
quality / commitlint (push) Skipped
quality / docker-check (push) Skipped
quality / openapi (push) Successful in 26s
quality / web (push) Successful in 51s
CD / quality (push) Successful in 1m26s
CD / publish (push) Successful in 1m37s
Заголовок деталей — как на досках (20px, действия справа), полоса показателей списка дополнена «Обновлён». Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
5d767e4341
commit
aa475848fd
2 files changed
+20
-25
No files matched your search
@@ -1,11 +1,4 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import {
|
||||
Frame,
|
||||
FrameDescription,
|
||||
FrameHeader,
|
||||
FramePanel,
|
||||
FrameTitle,
|
||||
} from '@/components/reui/frame'
|
||||
import {
|
||||
KpiStatGrid,
|
||||
type KpiStatCard,
|
||||
@@ -33,7 +26,7 @@ interface DetailPanelProps {
|
||||
|
||||
function DetailPanelRoot({ children, className }: DetailPanelProps) {
|
||||
return (
|
||||
<div className={cn('flex flex-col gap-4 md:gap-6', className)}>
|
||||
<div className={cn('flex flex-col gap-5', className)}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
@@ -53,24 +46,16 @@ function DetailPanelHeader({
|
||||
children,
|
||||
}: DetailPanelHeaderProps) {
|
||||
return (
|
||||
<Frame dense spacing="sm" className="w-full">
|
||||
<FrameHeader className="flex-row items-start justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-1 flex-col gap-px">
|
||||
<FrameTitle>{title}</FrameTitle>
|
||||
{description ? (
|
||||
<FrameDescription>{description}</FrameDescription>
|
||||
) : null}
|
||||
<>
|
||||
<header className="flex min-w-0 flex-wrap items-end justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-col gap-0.5">
|
||||
<h1 className="text-xl font-semibold tracking-[-0.01em]">{title}</h1>
|
||||
{description ? <p className="text-muted-foreground text-sm text-pretty">{description}</p> : null}
|
||||
</div>
|
||||
{actions ? (
|
||||
<div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
|
||||
{actions}
|
||||
</div>
|
||||
) : null}
|
||||
</FrameHeader>
|
||||
{children ? (
|
||||
<FramePanel className="flex flex-col gap-4">{children}</FramePanel>
|
||||
) : null}
|
||||
</Frame>
|
||||
{actions ? <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">{actions}</div> : null}
|
||||
</header>
|
||||
{children}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -4,11 +4,13 @@ import { toast } from 'sonner'
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
CircleAlertIcon,
|
||||
ClockIcon,
|
||||
HashIcon,
|
||||
RefreshCwIcon,
|
||||
TagIcon,
|
||||
Trash2,
|
||||
} from 'lucide-react'
|
||||
import { formatDateTime, formatRelativeTime } from '@/lib/format'
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import type { ColumnDef } from '@tanstack/react-table'
|
||||
import type { Filter, FilterFieldConfig } from '@/components/reui/filters'
|
||||
@@ -471,6 +473,14 @@ function ListDetailPage() {
|
||||
),
|
||||
hint: 'materialized',
|
||||
},
|
||||
{
|
||||
id: 'updated',
|
||||
icon: <ClockIcon aria-hidden />,
|
||||
iconClassName: 'text-muted-foreground',
|
||||
label: 'Обновлён',
|
||||
description: formatRelativeTime(detail.refreshed_at ?? detail.updated_at),
|
||||
hint: formatDateTime(detail.refreshed_at ?? detail.updated_at),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
Reference in new issue
Block a user