diff --git a/src/components/Export/ExportDefaultsSettingsForm.scss b/src/components/Export/ExportDefaultsSettingsForm.scss index 24f4621..ad9e77e 100644 --- a/src/components/Export/ExportDefaultsSettingsForm.scss +++ b/src/components/Export/ExportDefaultsSettingsForm.scss @@ -227,4 +227,72 @@ transition: transform 0.2s ease; } } + + &.layout-split { + .form-group { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); + gap: 18px; + align-items: center; + padding: 14px 0; + margin-bottom: 0; + border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent); + } + + .form-group:last-child { + border-bottom: none; + padding-bottom: 0; + } + + .form-group:first-child { + padding-top: 0; + } + + .form-copy { + min-width: 0; + } + + .form-control { + min-width: 0; + display: flex; + justify-content: flex-end; + } + + .form-hint { + margin-bottom: 0; + line-height: 1.5; + } + + .select-field, + .settings-time-range-field { + width: 100%; + max-width: 360px; + margin-bottom: 0; + } + + .log-toggle-line { + width: 100%; + max-width: 360px; + margin-bottom: 0; + } + } +} + +@media (max-width: 760px) { + .export-defaults-settings-form.layout-split { + .form-group { + grid-template-columns: 1fr; + gap: 10px; + } + + .form-control { + justify-content: flex-start; + } + + .select-field, + .settings-time-range-field, + .log-toggle-line { + max-width: none; + } + } } diff --git a/src/components/Export/ExportDefaultsSettingsForm.tsx b/src/components/Export/ExportDefaultsSettingsForm.tsx index b164ad5..9962be3 100644 --- a/src/components/Export/ExportDefaultsSettingsForm.tsx +++ b/src/components/Export/ExportDefaultsSettingsForm.tsx @@ -23,6 +23,7 @@ export interface ExportDefaultsSettingsPatch { interface ExportDefaultsSettingsFormProps { onNotify?: (text: string, success: boolean) => void onDefaultsChanged?: (patch: ExportDefaultsSettingsPatch) => void + layout?: 'stacked' | 'split' } const exportFormatOptions = [ @@ -50,7 +51,8 @@ const getOptionLabel = (options: ReadonlyArray<{ value: string; label: string }> export function ExportDefaultsSettingsForm({ onNotify, - onDefaultsChanged + onDefaultsChanged, + layout = 'stacked' }: ExportDefaultsSettingsFormProps) { const [showExportFormatSelect, setShowExportFormatSelect] = useState(false) const [showExportExcelColumnsSelect, setShowExportExcelColumnsSelect] = useState(false) @@ -123,65 +125,73 @@ export function ExportDefaultsSettingsForm({ } return ( -
+
- - 导出页面默认选中的格式 -
- - {showExportFormatSelect && ( -
- {exportFormatOptions.map((option) => ( - - ))} -
- )} +
+ + 导出页面默认选中的格式 +
+
+
+ + {showExportFormatSelect && ( +
+ {exportFormatOptions.map((option) => ( + + ))} +
+ )} +
- - 控制导出页面的默认时间选择 -
- +
+ + 控制导出页面的默认时间选择 +
+
+
+ +
@@ -199,132 +209,148 @@ export function ExportDefaultsSettingsForm({ />
- - 控制图片/语音/表情的默认导出开关 -
- {exportDefaultMedia ? '已开启' : '已关闭'} -
+ +
+
+ + 导出时默认将语音转写为文字 +
+
+
+ {exportDefaultVoiceAsText ? '已开启' : '已关闭'} + +
+
+
+ +
+
+ + 控制 Excel 导出的列字段 +
+
+
+ + {showExportExcelColumnsSelect && ( +
+ {exportExcelColumnOptions.map((option) => ( + + ))} +
+ )} +
- - 导出时默认将语音转写为文字 -
- {exportDefaultVoiceAsText ? '已开启' : '已关闭'} -
diff --git a/src/pages/ExportPage.tsx b/src/pages/ExportPage.tsx index 65c03df..742c90a 100644 --- a/src/pages/ExportPage.tsx +++ b/src/pages/ExportPage.tsx @@ -5294,7 +5294,7 @@ function ExportPage() {
- +