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

mirror of https://github.com/QuantumNous/new-api.git synced 2026-09-06 17:46:23 +00:00

* 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

									
										web/default/src/features/channels/components/channels-columns.tsx
									
Vendored

		+6
		-11
	
												View File
												
				@@ -35,7 +35,6 @@ import {

				  formatTimestampToDate,

				  formatQuota as formatQuotaValue,

				} from '@/lib/format'

				import { getLobeIcon } from '@/lib/lobe-icon'

				import { truncateText } from '@/lib/utils'

				import { Button } from '@/components/ui/button'

				import { Checkbox } from '@/components/ui/checkbox'

				@@ -46,8 +45,9 @@ import {

				  TooltipTrigger,

				} from '@/components/ui/tooltip'

				import { ConfirmDialog } from '@/components/confirm-dialog'

				import { DataTableColumnHeader } from '@/components/data-table/column-header'

				import { DataTableColumnHeader } from '@/components/data-table'

				import { GroupBadge } from '@/components/group-badge'

				import { ProviderBadge } from '@/components/provider-badge'

				import { StatusBadge, StatusBadgeList } from '@/components/status-badge'

				import { TableId } from '@/components/table-id'

				import { TruncatedText } from '@/components/truncated-text'

				@@ -623,7 +623,6 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {

				        const typeNameKey = getChannelTypeLabel(type)

				        const typeName = t(typeNameKey)

				        const iconName = getChannelTypeIcon(type)

				        const icon = getLobeIcon(`${iconName}.Color`, 14)

				        const channel = row.original as Channel

				        const isMultiKey = isMultiKeyChannel(channel)

				        const multiKeyMode = channel.channel_info?.multi_key_mode ?? 'random'

				@@ -657,16 +656,12 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {

				                </Tooltip>

				              </TooltipProvider>

				            )}

				            <StatusBadge

				              autoColor={typeName}

				              size='sm'

				            <ProviderBadge

				              iconKey={iconName}

				              label={typeName}

				              copyable={false}

				              showDot={false}

				              className='gap-1 pl-1'

				            >

				              {icon}

				              <span className='truncate'>{typeName}</span>

				            </StatusBadge>

				            />

				            {isIonet && (

				              <TooltipProvider delay={100}>

				                <Tooltip>