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 type { ReactNode } from 'react'
|
||||||
import {
|
|
||||||
Frame,
|
|
||||||
FrameDescription,
|
|
||||||
FrameHeader,
|
|
||||||
FramePanel,
|
|
||||||
FrameTitle,
|
|
||||||
} from '@/components/reui/frame'
|
|
||||||
import {
|
import {
|
||||||
KpiStatGrid,
|
KpiStatGrid,
|
||||||
type KpiStatCard,
|
type KpiStatCard,
|
||||||
@@ -33,7 +26,7 @@ interface DetailPanelProps {
|
|||||||
|
|
||||||
function DetailPanelRoot({ children, className }: DetailPanelProps) {
|
function DetailPanelRoot({ children, className }: DetailPanelProps) {
|
||||||
return (
|
return (
|
||||||
<div className={cn('flex flex-col gap-4 md:gap-6', className)}>
|
<div className={cn('flex flex-col gap-5', className)}>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@@ -53,24 +46,16 @@ function DetailPanelHeader({
|
|||||||
children,
|
children,
|
||||||
}: DetailPanelHeaderProps) {
|
}: DetailPanelHeaderProps) {
|
||||||
return (
|
return (
|
||||||
<Frame dense spacing="sm" className="w-full">
|
<>
|
||||||
<FrameHeader className="flex-row items-start justify-between gap-3">
|
<header className="flex min-w-0 flex-wrap items-end justify-between gap-3">
|
||||||
<div className="flex min-w-0 flex-1 flex-col gap-px">
|
<div className="flex min-w-0 flex-col gap-0.5">
|
||||||
<FrameTitle>{title}</FrameTitle>
|
<h1 className="text-xl font-semibold tracking-[-0.01em]">{title}</h1>
|
||||||
{description ? (
|
{description ? <p className="text-muted-foreground text-sm text-pretty">{description}</p> : null}
|
||||||
<FrameDescription>{description}</FrameDescription>
|
|
||||||
) : null}
|
|
||||||
</div>
|
</div>
|
||||||
{actions ? (
|
{actions ? <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">{actions}</div> : null}
|
||||||
<div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
|
</header>
|
||||||
{actions}
|
{children}
|
||||||
</div>
|
</>
|
||||||
) : null}
|
|
||||||
</FrameHeader>
|
|
||||||
{children ? (
|
|
||||||
<FramePanel className="flex flex-col gap-4">{children}</FramePanel>
|
|
||||||
) : null}
|
|
||||||
</Frame>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -4,11 +4,13 @@ import { toast } from 'sonner'
|
|||||||
import {
|
import {
|
||||||
ArrowLeftIcon,
|
ArrowLeftIcon,
|
||||||
CircleAlertIcon,
|
CircleAlertIcon,
|
||||||
|
ClockIcon,
|
||||||
HashIcon,
|
HashIcon,
|
||||||
RefreshCwIcon,
|
RefreshCwIcon,
|
||||||
TagIcon,
|
TagIcon,
|
||||||
Trash2,
|
Trash2,
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
|
import { formatDateTime, formatRelativeTime } from '@/lib/format'
|
||||||
import { useCallback, useMemo, useState } from 'react'
|
import { useCallback, useMemo, useState } from 'react'
|
||||||
import type { ColumnDef } from '@tanstack/react-table'
|
import type { ColumnDef } from '@tanstack/react-table'
|
||||||
import type { Filter, FilterFieldConfig } from '@/components/reui/filters'
|
import type { Filter, FilterFieldConfig } from '@/components/reui/filters'
|
||||||
@@ -471,6 +473,14 @@ function ListDetailPage() {
|
|||||||
),
|
),
|
||||||
hint: 'materialized',
|
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