diff --git a/src/pages/SettingsPage.scss b/src/pages/SettingsPage.scss index c6bb34b..e5a4bed 100644 --- a/src/pages/SettingsPage.scss +++ b/src/pages/SettingsPage.scss @@ -221,6 +221,100 @@ } } + .select-field { + position: relative; + margin-bottom: 10px; + } + + .select-trigger { + width: 100%; + padding: 10px 16px; + border: 1px solid var(--border-color); + border-radius: 9999px; + font-size: 14px; + background: var(--bg-primary); + color: var(--text-primary); + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + cursor: pointer; + transition: all 0.2s; + + &:hover { + border-color: var(--text-tertiary); + } + + &.open { + border-color: var(--primary); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); + } + } + + .select-value { + flex: 1; + min-width: 0; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .select-dropdown { + position: absolute; + top: calc(100% + 6px); + left: 0; + right: 0; + background: color-mix(in srgb, var(--bg-primary) 85%, var(--bg-secondary)); + border: 1px solid var(--border-color); + border-radius: 12px; + padding: 6px; + box-shadow: var(--shadow-md); + z-index: 20; + max-height: 320px; + overflow-y: auto; + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); + } + + .select-option { + width: 100%; + text-align: left; + display: flex; + flex-direction: column; + gap: 4px; + padding: 10px 12px; + border: none; + border-radius: 10px; + background: transparent; + cursor: pointer; + transition: all 0.15s; + color: var(--text-primary); + font-size: 14px; + + &:hover { + background: var(--bg-tertiary); + } + + &.active { + background: color-mix(in srgb, var(--primary) 12%, transparent); + color: var(--primary); + } + } + + .option-label { + font-weight: 500; + } + + .option-desc { + font-size: 12px; + color: var(--text-tertiary); + } + + .select-option.active .option-desc { + color: var(--primary); + } + .input-with-toggle { position: relative; display: flex; @@ -1096,13 +1190,15 @@ left: 0; right: 0; margin-top: 4px; - background: var(--bg-secondary); + background: color-mix(in srgb, var(--bg-primary) 85%, var(--bg-secondary)); border: 1px solid var(--border-primary); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 100; max-height: 200px; overflow-y: auto; + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); } .wxid-option { @@ -1216,4 +1312,4 @@ border-top: 1px solid var(--border-primary); display: flex; justify-content: flex-end; -} \ No newline at end of file +} diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx index 6fbe196..999dc5f 100644 --- a/src/pages/SettingsPage.tsx +++ b/src/pages/SettingsPage.tsx @@ -41,6 +41,12 @@ function SettingsPage() { const [wxidOptions, setWxidOptions] = useState([]) const [showWxidSelect, setShowWxidSelect] = useState(false) const wxidDropdownRef = useRef(null) + const [showExportFormatSelect, setShowExportFormatSelect] = useState(false) + const [showExportDateRangeSelect, setShowExportDateRangeSelect] = useState(false) + const [showExportExcelColumnsSelect, setShowExportExcelColumnsSelect] = useState(false) + const exportFormatDropdownRef = useRef(null) + const exportDateRangeDropdownRef = useRef(null) + const exportExcelColumnsDropdownRef = useRef(null) const [cachePath, setCachePath] = useState('') const [logEnabled, setLogEnabled] = useState(false) const [whisperModelName, setWhisperModelName] = useState('base') @@ -85,13 +91,23 @@ function SettingsPage() { // 点击外部关闭下拉框 useEffect(() => { const handleClickOutside = (e: MouseEvent) => { - if (showWxidSelect && wxidDropdownRef.current && !wxidDropdownRef.current.contains(e.target as Node)) { + const target = e.target as Node + if (showWxidSelect && wxidDropdownRef.current && !wxidDropdownRef.current.contains(target)) { setShowWxidSelect(false) } + if (showExportFormatSelect && exportFormatDropdownRef.current && !exportFormatDropdownRef.current.contains(target)) { + setShowExportFormatSelect(false) + } + if (showExportDateRangeSelect && exportDateRangeDropdownRef.current && !exportDateRangeDropdownRef.current.contains(target)) { + setShowExportDateRangeSelect(false) + } + if (showExportExcelColumnsSelect && exportExcelColumnsDropdownRef.current && !exportExcelColumnsDropdownRef.current.contains(target)) { + setShowExportExcelColumnsSelect(false) + } } document.addEventListener('mousedown', handleClickOutside) return () => document.removeEventListener('mousedown', handleClickOutside) - }, [showWxidSelect]) + }, [showWxidSelect, showExportFormatSelect, showExportDateRangeSelect, showExportExcelColumnsSelect]) useEffect(() => { const removeDb = window.electronAPI.key.onDbKeyStatus((payload) => { @@ -863,48 +879,114 @@ function SettingsPage() { ) - const renderExportTab = () => ( + const exportFormatOptions = [ + { value: 'excel', label: 'Excel', desc: '电子表格,适合统计分析' }, + { value: 'chatlab', label: 'ChatLab', desc: '标准格式,支持其他软件导入' }, + { value: 'chatlab-jsonl', label: 'ChatLab JSONL', desc: '流式格式,适合大量消息' }, + { value: 'json', label: 'JSON', desc: '详细格式,包含完整消息信息' }, + { value: 'html', label: 'HTML', desc: '网页格式,可直接浏览' }, + { value: 'txt', label: 'TXT', desc: '纯文本,通用格式' }, + { value: 'sql', label: 'PostgreSQL', desc: '数据库脚本,便于导入到数据库' } + ] + const exportDateRangeOptions = [ + { value: 'today', label: '今天' }, + { value: '7d', label: '最近7天' }, + { value: '30d', label: '最近30天' }, + { value: '90d', label: '最近90天' }, + { value: 'all', label: '全部时间' } + ] + const exportExcelColumnOptions = [ + { value: 'compact', label: '精简列', desc: '序号、时间、发送者身份、消息类型、内容' }, + { value: 'full', label: '完整列', desc: '含发送者昵称/微信ID/备注' } + ] + + const getOptionLabel = (options: { value: string; label: string }[], value: string) => { + return options.find((option) => option.value === value)?.label ?? value + } + + const renderExportTab = () => { + const exportExcelColumnsValue = exportDefaultExcelCompactColumns ? 'compact' : 'full' + const exportFormatLabel = getOptionLabel(exportFormatOptions, exportDefaultFormat) + const exportDateRangeLabel = getOptionLabel(exportDateRangeOptions, exportDefaultDateRange) + const exportExcelColumnsLabel = getOptionLabel(exportExcelColumnOptions, exportExcelColumnsValue) + + return (
导出页面默认选中的格式 - +
+ + {showExportFormatSelect && ( +
+ {exportFormatOptions.map((option) => ( + + ))} +
+ )} +
控制导出页面的默认时间选择 - +
+ + {showExportDateRangeSelect && ( +
+ {exportDateRangeOptions.map((option) => ( + + ))} +
+ )} +
@@ -956,21 +1038,45 @@ function SettingsPage() {
控制 Excel 导出的列字段 - +
+ + {showExportExcelColumnsSelect && ( +
+ {exportExcelColumnOptions.map((option) => ( + + ))} +
+ )} +
- ) + ) + } const renderCacheTab = () => (

管理应用缓存数据