feat(export): simplify concurrency selector

This commit is contained in:
aits2026
2026-03-06 13:59:17 +08:00
parent 56d7ad6999
commit d2ec9c680d
2 changed files with 55 additions and 42 deletions

View File

@@ -225,6 +225,37 @@
color: var(--text-secondary); color: var(--text-secondary);
} }
.concurrency-inline-options {
width: 100%;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 6px;
margin-bottom: 10px;
}
.concurrency-option {
border: 1px solid var(--border-color);
border-radius: 10px;
min-height: 38px;
padding: 0;
background: var(--bg-primary);
color: var(--text-primary);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
&:hover {
border-color: var(--text-tertiary);
}
&.active {
border-color: var(--primary);
background: rgba(var(--primary-rgb), 0.08);
color: var(--primary);
}
}
.switch { .switch {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@@ -323,6 +354,11 @@
margin-bottom: 0; margin-bottom: 0;
} }
.concurrency-inline-options {
max-width: 360px;
margin-bottom: 0;
}
.format-grid { .format-grid {
max-width: 360px; max-width: 360px;
margin-bottom: 0; margin-bottom: 0;
@@ -344,6 +380,7 @@
.select-field, .select-field,
.settings-time-range-field, .settings-time-range-field,
.log-toggle-line, .log-toggle-line,
.concurrency-inline-options,
.format-grid { .format-grid {
max-width: none; max-width: none;
} }

View File

@@ -55,10 +55,8 @@ export function ExportDefaultsSettingsForm({
layout = 'stacked' layout = 'stacked'
}: ExportDefaultsSettingsFormProps) { }: ExportDefaultsSettingsFormProps) {
const [showExportExcelColumnsSelect, setShowExportExcelColumnsSelect] = useState(false) const [showExportExcelColumnsSelect, setShowExportExcelColumnsSelect] = useState(false)
const [showExportConcurrencySelect, setShowExportConcurrencySelect] = useState(false)
const [isExportDateRangeDialogOpen, setIsExportDateRangeDialogOpen] = useState(false) const [isExportDateRangeDialogOpen, setIsExportDateRangeDialogOpen] = useState(false)
const exportExcelColumnsDropdownRef = useRef<HTMLDivElement>(null) const exportExcelColumnsDropdownRef = useRef<HTMLDivElement>(null)
const exportConcurrencyDropdownRef = useRef<HTMLDivElement>(null)
const [exportDefaultFormat, setExportDefaultFormat] = useState('excel') const [exportDefaultFormat, setExportDefaultFormat] = useState('excel')
const [exportDefaultDateRange, setExportDefaultDateRange] = useState<ExportDateRangeSelection>(() => createDefaultExportDateRangeSelection()) const [exportDefaultDateRange, setExportDefaultDateRange] = useState<ExportDateRangeSelection>(() => createDefaultExportDateRangeSelection())
@@ -100,19 +98,15 @@ export function ExportDefaultsSettingsForm({
if (showExportExcelColumnsSelect && exportExcelColumnsDropdownRef.current && !exportExcelColumnsDropdownRef.current.contains(target)) { if (showExportExcelColumnsSelect && exportExcelColumnsDropdownRef.current && !exportExcelColumnsDropdownRef.current.contains(target)) {
setShowExportExcelColumnsSelect(false) setShowExportExcelColumnsSelect(false)
} }
if (showExportConcurrencySelect && exportConcurrencyDropdownRef.current && !exportConcurrencyDropdownRef.current.contains(target)) {
setShowExportConcurrencySelect(false)
}
} }
document.addEventListener('mousedown', handleClickOutside) document.addEventListener('mousedown', handleClickOutside)
return () => document.removeEventListener('mousedown', handleClickOutside) return () => document.removeEventListener('mousedown', handleClickOutside)
}, [showExportExcelColumnsSelect, showExportConcurrencySelect]) }, [showExportExcelColumnsSelect])
const exportExcelColumnsValue = exportDefaultExcelCompactColumns ? 'compact' : 'full' const exportExcelColumnsValue = exportDefaultExcelCompactColumns ? 'compact' : 'full'
const exportDateRangeLabel = useMemo(() => getExportDateRangeLabel(exportDefaultDateRange), [exportDefaultDateRange]) const exportDateRangeLabel = useMemo(() => getExportDateRangeLabel(exportDefaultDateRange), [exportDefaultDateRange])
const exportExcelColumnsLabel = useMemo(() => getOptionLabel(exportExcelColumnOptions, exportExcelColumnsValue), [exportExcelColumnsValue]) const exportExcelColumnsLabel = useMemo(() => getOptionLabel(exportExcelColumnOptions, exportExcelColumnsValue), [exportExcelColumnsValue])
const exportConcurrencyLabel = String(exportDefaultConcurrency)
const notify = (text: string, success = true) => { const notify = (text: string, success = true) => {
onNotify?.(text, success) onNotify?.(text, success)
@@ -126,39 +120,23 @@ export function ExportDefaultsSettingsForm({
<span className="form-hint">1~6</span> <span className="form-hint">1~6</span>
</div> </div>
<div className="form-control"> <div className="form-control">
<div className="select-field" ref={exportConcurrencyDropdownRef}> <div className="concurrency-inline-options" role="radiogroup" aria-label="导出并发数">
<button {exportConcurrencyOptions.map((option) => (
type="button" <button
className={`select-trigger ${showExportConcurrencySelect ? 'open' : ''}`} key={option}
onClick={() => { type="button"
setShowExportConcurrencySelect(!showExportConcurrencySelect) className={`concurrency-option ${exportDefaultConcurrency === option ? 'active' : ''}`}
setIsExportDateRangeDialogOpen(false) aria-pressed={exportDefaultConcurrency === option}
setShowExportExcelColumnsSelect(false) onClick={async () => {
}} setExportDefaultConcurrency(option)
> await configService.setExportDefaultConcurrency(option)
<span className="select-value">{exportConcurrencyLabel}</span> onDefaultsChanged?.({ concurrency: option })
<ChevronDown size={16} /> notify(`已将导出并发数设为 ${option}`, true)
</button> }}
{showExportConcurrencySelect && ( >
<div className="select-dropdown"> {option}
{exportConcurrencyOptions.map((option) => ( </button>
<button ))}
key={option}
type="button"
className={`select-option ${exportDefaultConcurrency === option ? 'active' : ''}`}
onClick={async () => {
setExportDefaultConcurrency(option)
await configService.setExportDefaultConcurrency(option)
onDefaultsChanged?.({ concurrency: option })
notify(`已将导出并发数设为 ${option}`, true)
setShowExportConcurrencySelect(false)
}}
>
<span className="option-label">{option}</span>
</button>
))}
</div>
)}
</div> </div>
</div> </div>
</div> </div>
@@ -202,7 +180,6 @@ export function ExportDefaultsSettingsForm({
className={`settings-time-range-trigger ${isExportDateRangeDialogOpen ? 'open' : ''}`} className={`settings-time-range-trigger ${isExportDateRangeDialogOpen ? 'open' : ''}`}
onClick={() => { onClick={() => {
setShowExportExcelColumnsSelect(false) setShowExportExcelColumnsSelect(false)
setShowExportConcurrencySelect(false)
setIsExportDateRangeDialogOpen(true) setIsExportDateRangeDialogOpen(true)
}} }}
> >
@@ -267,7 +244,6 @@ export function ExportDefaultsSettingsForm({
onClick={() => { onClick={() => {
setShowExportExcelColumnsSelect(!showExportExcelColumnsSelect) setShowExportExcelColumnsSelect(!showExportExcelColumnsSelect)
setIsExportDateRangeDialogOpen(false) setIsExportDateRangeDialogOpen(false)
setShowExportConcurrencySelect(false)
}} }}
> >
<span className="select-value">{exportExcelColumnsLabel}</span> <span className="select-value">{exportExcelColumnsLabel}</span>