ext/new-api
2
0
Fork 0
mirror of https://github.com/QuantumNous/new-api.git synced 2026-09-06 17:46:23 +00:00
Code Activity

perf(web): improve frontend table rendering and pinned columns/UI table (#5405)

Browse Source 
* refactor(web): centralize data table implementation

- route all TanStack table setup through a shared data-table hook to remove repeated state and row model wiring.
- move table rendering, static table wrappers, empty states, and primitive exports behind the data-table module.
- update feature tables and configuration editors to share the same table UX while preserving their existing workflows.

* refactor(web): trim data table public API

- remove unused data-table exports and dead static table helper types.
- keep internal table header, skeleton, empty state, and faceted filter helpers private to the data-table module.
- route feature imports through the data-table barrel to avoid subpath coupling.

* refactor(web): unify table rendering components

- centralize static table headers, bodies, empty states, and shared class names behind the data-table package.
- migrate settings, pricing, channel, key, subscription, and model tables to the shared table APIs.
- remove data-table exports for low-level table primitives so feature code uses one supported abstraction.

* perf(web): keep list tables fixed within page content

- make shared data table pages fill available height and scroll row data inside the table body.
- add a fixed content layout mode so selected list pages avoid page-level scrolling.
- apply the fixed table behavior to keys, logs, channels, models, users, redemptions, and subscriptions.

* perf(web): refine table pagination controls

- show total row counts instead of redundant page range text.
- tighten visible page buttons so pagination fits constrained table widths.
- align pagination controls and tune text hierarchy for clearer scanning.

* perf(web): stabilize model pricing table columns

- keep model pricing columns at fixed widths so headers do not collapse in narrow layouts.
- truncate long model names and pricing summaries within their cells instead of squeezing adjacent columns.

* refactor(web): simplify data table rendering internals

- split table body rendering into focused helpers for loading, empty, and row states.
- extract static table row and cell class resolution to reduce branching in the main component.
- reuse a single pagination page-size option list to avoid duplicated constants.

* perf(pricing): reduce dynamic pricing table render work

- reuse dynamic pricing field metadata instead of rebuilding it inside table columns.
- precompute formatted dynamic prices per tier and group to avoid repeated entry mapping for each cell.
- simplify select option construction in related dialogs while preserving the same choices.

* refactor(web): streamline pricing table rendering

- reuse translated endpoint select options between trigger data and menu items.
- precompute dynamic pricing maps per group so table cells only resolve formatted values.
- add local dynamic pricing type aliases to keep helper signatures readable.

* refactor(web): merge pricing table imports

* refactor(web): merge upstream ratio table imports

* refactor(web): merge channel selector table imports

* refactor(web): simplify tiered pricing select items

* refactor(web): reuse model ratio row state

* refactor(web): rely on table view row defaults

* refactor(web): reuse pagination state values

* refactor(web): hoist pagination size select items

* refactor(web): clarify static table body rows

* refactor(web): extract table page pagination rendering

* fix(web): remove direct hast type dependency

- rely on Shiki transformer contextual typing for line nodes.
- allow frontend typecheck to pass without an undeclared hast package.

* refactor(web): trim data table hook return API

- return only the TanStack table instance from useDataTable.
- keep internal state handling private because callers do not consume it directly.

* refactor(web): keep static table empty row private

- stop exporting the internal StaticDataTableEmptyRow helper.
- keep the public static table API focused on the table component and column type.

* refactor(web): hide data table view props from barrel

* refactor(web): remove stale long text lint override

* fix(web): keep pinned table columns opaque

- apply pinned column background classes after custom column classes.
- use an opaque hover background so scrolled content cannot show through fixed cells.

* refactor(data-table): organize shared table components

- group table primitives, page composition, toolbar controls, static tables, and hooks by responsibility.
- split shared view types, row rendering, header rendering, and pinned-column styling out of the main table view.
- keep the public data-table barrel stable while documenting the new ownership boundaries.

* fix(web): stabilize split table column sizing

- derive default colgroup widths from visible columns when split headers or header sizing are enabled.
- apply a fixed table layout with computed minimum width so header and body columns stay aligned.
- keep split-header containers from leaking horizontal overflow and avoid extra pinned-column borders.

* fix(web): set stable table utility column widths

- assign fixed widths to selection columns so shared colgroup sizing keeps checkbox cells compact.
- size id columns in redemption and user tables to keep split headers aligned with body rows.

* fix(web): align model metadata icon cells

- render compact provider avatars in the metadata icon column instead of wide wordmarks.
- position icons in a fixed-size wrapper so they line up with the existing icon header alignment.

* fix(status-badge): hide status dot by default

* fix(web): prevent user invite info overlap

- give the invite info and created-at columns explicit widths so table sizing reserves enough space.
- allow invite badges to wrap within the cell instead of spilling into adjacent columns.

* perf(data-table): cache pinned column class resolution

- reuse the pinned column lookup while table props stay stable to reduce repeated per-render work.
- share the resolved column class handler across unified and split-header table layouts.
- localize page-number screen reader labels so pagination remains accessible in every locale.

* refactor(data-table): tighten static table modes

- make StaticDataTable distinguish data-driven and children-only usage through explicit prop shapes.
- remove unsupported columns-without-data fallback after confirming no repository callers rely on it.
- default manual table modes away from unused local row models to reduce repeated table work.

* fix(data-table): make pinned edit column opaque

- use an opaque muted background for the active action column so sticky cells do not reveal scrolled content underneath.

* fix(data-table): prevent narrow column overlap

- apply stable header sizing to remaining desktop data table pages so constrained layouts scroll instead of compressing cells.
- add explicit widths for key, quota, badge, and timestamp columns that contain fixed-format content.
- constrain masked values and timestamp cells with truncation to keep content inside its assigned column.

* fix(table): align table cell content with headers

- remove extra inline padding from masked table text buttons so values start at the cell edge.
- tag status badges and offset leading badges inside table cells to match header text alignment.

* fix(table): prevent admin list column overflow

- widen redemption and subscription table columns so masked codes, timestamps, and localized headers fit.
- localize subscription ID headers and add Received amount translations across supported locales.

* fix(provider-badge): unify provider icon spacing

- add a shared provider badge component for icon and status label layout.
- reuse it in channel type and model vendor columns so OpenAI icons align consistently.
This commit is contained in:
QuentinHsu
2026-06-11 02:36:41 +08:00
committed by GitHub
parent 59a93cf5c7
commit 6f415428d3
97 changed files with 3963 additions and 3312 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/system-settings/content/uptime-kuma-section.tsx
Vendored
+72 -82
View File
@@ -45,14 +45,7 @@ import {
FormMessage,
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table'
import { StaticDataTable } from '@/components/data-table'
import { Dialog } from '@/components/dialog'
import { SettingsSwitchField } from '../components/settings-form-layout'
import { SettingsSection } from '../components/settings-section'
@@ -278,80 +271,77 @@ export function UptimeKumaSection({ enabled, data }: UptimeKumaSectionProps) {
/>
</div>
<div className='rounded-md border'>
<Table>
<TableHeader>
<TableRow>
<TableHead className='w-12'>
<Checkbox
checked={
selectedIds.length === groups.length && groups.length > 0
}
onCheckedChange={toggleSelectAll}
/>
</TableHead>
<TableHead>{t('Category Name')}</TableHead>
<TableHead>{t('Uptime Kuma URL')}</TableHead>
<TableHead>{t('Status Page Slug')}</TableHead>
<TableHead className='w-32'>{t('Actions')}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{groups.length === 0 ? (
<TableRow>
<TableCell colSpan={5} className='h-24 text-center'>
{t(
'No Uptime Kuma groups yet. Click "Add Group" to create one.'
)}
</TableCell>
</TableRow>
) : (
groups.map((group) => (
<TableRow key={group.id}>
<TableCell>
<Checkbox
checked={selectedIds.includes(group.id)}
onCheckedChange={(checked) =>
toggleSelectOne(group.id, checked as boolean)
}
/>
</TableCell>
<TableCell className='font-medium'>
{group.categoryName}
</TableCell>
<TableCell
className='text-primary max-w-xs truncate font-mono text-sm'
title={group.url}
>
{group.url}
</TableCell>
<TableCell className='text-muted-foreground font-mono text-sm'>
{group.slug}
</TableCell>
<TableCell>
<div className='flex gap-2'>
<Button
onClick={() => handleEdit(group)}
size='sm'
variant='ghost'
>
<Edit className='h-4 w-4' />
</Button>
<Button
onClick={() => handleDelete(group)}
size='sm'
variant='ghost'
>
<Trash2 className='h-4 w-4' />
</Button>
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
<StaticDataTable
data={groups}
getRowKey={(group) => group.id}
emptyContent={t(
'No Uptime Kuma groups yet. Click "Add Group" to create one.'
)}
columns={[
{
id: 'select',
header: (
<Checkbox
checked={
selectedIds.length === groups.length && groups.length > 0
}
onCheckedChange={toggleSelectAll}
/>
),
className: 'w-12',
cell: (group) => (
<Checkbox
checked={selectedIds.includes(group.id)}
onCheckedChange={(checked) =>
toggleSelectOne(group.id, checked as boolean)
}
/>
),
},
{
id: 'category',
header: t('Category Name'),
cellClassName: 'font-medium',
cell: (group) => group.categoryName,
},
{
id: 'url',
header: t('Uptime Kuma URL'),
cellClassName:
'text-primary max-w-xs truncate font-mono text-sm',
cell: (group) => group.url,
},
{
id: 'slug',
header: t('Status Page Slug'),
cellClassName: 'text-muted-foreground font-mono text-sm',
cell: (group) => group.slug,
},
{
id: 'actions',
header: t('Actions'),
className: 'w-32',
cell: (group) => (
<div className='flex gap-2'>
<Button
onClick={() => handleEdit(group)}
size='sm'
variant='ghost'
>
<Edit className='h-4 w-4' />
</Button>
<Button
onClick={() => handleDelete(group)}
size='sm'
variant='ghost'
>
<Trash2 className='h-4 w-4' />
</Button>
</div>
),
},
]}
/>
</div>
<Dialog