mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-03-24 23:06:51 +00:00
feat(export): simplify concurrency selector
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user