WuYongJie/furniture-3d-system-Wu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(product-archive): display complete column headers and preserve readable widths

Browse Source
This commit is contained in:
WuYongJie 2026-10-14 11:55:00 +08:00
parent bf2f114762
commit 822df76e19
3 changed files with 40 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
furniture-3d-system/src/app/supply-chain/database/product-archive/ProductArchiveView.tsx
View File

@ -624,11 +624,11 @@ export function ProductArchiveView({ canDownload = false }: { canDownload?: bool
color: #27272a; font-size: 13px; font-weight: 600; text-align: center;
}
.archive-th-field-content {
display: flex; height: 37px; align-items: center; justify-content: center; gap: 2px;
padding: 0 8px;
display: flex; min-height: 37px; align-items: center; justify-content: center; gap: 2px;
padding: 6px 8px;
}
.archive-th-field-label {
overflow: hidden; text-overflow: ellipsis;
min-width: 0; white-space: normal; overflow-wrap: anywhere;
}
.archive-th-resize {
position: absolute; top: 0; right: -6px; z-index: 10;

33
furniture-3d-system/src/app/supply-chain/database/product-archive/archiveColumnWidths.ts Normal file
View File

@ -0,0 +1,33 @@
import type { ArchiveColumn } from './columns'
const MIN_COLUMN_WIDTH = 70
const MAX_COLUMN_WIDTH = 720
// Header padding, filter button, gap, border and resize handle clearance.
const HEADER_CONTROLS_WIDTH = 48
export function getArchiveColumnMinWidth(column: Pick<ArchiveColumn, 'prop' | 'label'>) {
const textWidth = Array.from(column.label).reduce(
(width, character) => width + (/^[\x00-\x7f]$/.test(character) ? 8 : 14),
0,
)
const controlsWidth = column.prop === 'image' ? 24 : HEADER_CONTROLS_WIDTH
return Math.min(MAX_COLUMN_WIDTH, Math.max(MIN_COLUMN_WIDTH, Math.ceil(textWidth + controlsWidth)))
}
export function normalizeArchiveColumnWidth(column: ArchiveColumn, width = column.width) {
const minimum = getArchiveColumnMinWidth(column)
return Math.round(Math.min(MAX_COLUMN_WIDTH, Math.max(minimum, Number.isFinite(width) ? width : minimum)))
}
export function fitArchiveColumnWidths<T extends ArchiveColumn>(groups: { group: string; columns: T[] }[]) {
return groups.map(group => {
let changed = false
const columns = group.columns.map(column => {
const width = normalizeArchiveColumnWidth(column)
if (width === column.width) return column
changed = true
return { ...column, width }
})
return changed ? { ...group, columns } : group
})
}

8
furniture-3d-system/src/app/supply-chain/database/product-archive/useColumnSettings.ts
View File

@ -2,6 +2,7 @@
import { useState, useEffect, useCallback, useMemo } from 'react'
import { ARCHIVE_COLUMNS, type ArchiveColumnGroup } from './columns'
import { fitArchiveColumnWidths, normalizeArchiveColumnWidth } from './archiveColumnWidths'
// 列设置状态：管理分组/字段的显示隐藏 + 顺序，localStorage 持久化
// 对应 caigou useColumnSettings.js
@ -238,7 +239,8 @@ function loadSettings(): ColumnSetting[] {
}
export function useColumnSettings() {
const [settings, setSettings] = useState<ColumnSetting[]>(buildDefault)
const [rawSettings, setSettings] = useState<ColumnSetting[]>(buildDefault)
const settings = useMemo(() => fitArchiveColumnWidths(rawSettings), [rawSettings])
const [hydrated, setHydrated] = useState(false)
// 客户端首次加载后读取 localStorage
@ -265,15 +267,13 @@ export function useColumnSettings() {
}, [settings])
const resizeColumn = useCallback((group: string, prop: string, width: number) => {
const normalizedWidth = Math.round(Math.min(720, Math.max(70, width)))
setSettings((current) =>
current.map((entry) =>
entry.group === group
? {
...entry,
columns: entry.columns.map((column) =>
column.prop === prop ? { ...column, width: normalizedWidth } : column,
column.prop === prop ? { ...column, width: normalizeArchiveColumnWidth(column, width) } : column,
),
}
: entry,