Merge pull request #989 from Jasonzhu1207/main

fix: ExportDate Page
2026-05-20 23:26:47 +00:00 · 2026-05-20 21:41:17 +08:00
parent 75136ad834 9ca6581643
commit 95a9d04afe
5 changed files with 290 additions and 59 deletions
--- a/src/components/Export/ExportDateRangeDialog.tsx
+++ b/src/components/Export/ExportDateRangeDialog.tsx
@@ -551,7 +551,13 @@ export function ExportDateRangeDialog({
  if (!open) return null

  return createPortal(
-    <div className="export-date-range-dialog-overlay" onClick={onClose}>
+    <div
+      className="export-date-range-dialog-overlay"
+      onClick={(event) => {
+        event.stopPropagation()
+        onClose()
+      }}
+    >
      <div className="export-date-range-dialog" role="dialog" aria-modal="true" onClick={(event) => event.stopPropagation()}>
        <div className="export-date-range-dialog-header">
          <h4>{title}</h4>
--- a/src/components/Export/ExportDefaultsSettingsForm.scss
+++ b/src/components/Export/ExportDefaultsSettingsForm.scss
@@ -231,7 +231,8 @@
    label {
      display: inline-flex;
      align-items: center;
-      gap: 5px;
+      gap: 6px;
+      position: relative;
      margin-bottom: 0;
      font-size: 13px;
      line-height: 1;
@@ -239,11 +240,55 @@
      color: var(--text-primary);
      cursor: pointer;
      white-space: nowrap;
+      transition: border-color 0.16s ease, background 0.16s ease;
    }

    input[type='checkbox'] {
      margin: 0;
-      accent-color: var(--primary);
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      opacity: 0;
+      pointer-events: none;
+
+      &:checked + .media-default-check {
+        border-color: var(--primary);
+        background: color-mix(in srgb, var(--primary) 88%, #fff);
+      }
+
+      &:checked + .media-default-check::after {
+        opacity: 1;
+        transform: rotate(-45deg) scale(1);
+      }
+
+      &:focus-visible + .media-default-check {
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
+      }
+    }
+
+    .media-default-check {
+      width: 14px;
+      height: 14px;
+      flex: 0 0 14px;
+      border: 1px solid color-mix(in srgb, var(--border-color) 82%, var(--text-tertiary));
+      border-radius: 4px;
+      background: var(--bg-primary);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
+
+      &::after {
+        content: '';
+        width: 7px;
+        height: 4px;
+        border-left: 2px solid #fff;
+        border-bottom: 2px solid #fff;
+        opacity: 0;
+        transform: rotate(-45deg) scale(0.72);
+        transform-origin: center;
+        transition: opacity 0.16s ease, transform 0.16s ease;
+      }
    }
  }

@@ -563,15 +608,69 @@
    gap: 8px;

    label {
-      min-height: 36px;
-      padding: 8px 10px;
+      min-height: 34px;
+      padding: 7px 10px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-primary);
+
+      &:hover {
+        border-color: color-mix(in srgb, var(--primary) 38%, var(--border-color));
+        background: color-mix(in srgb, var(--text-tertiary) 4%, var(--bg-primary));
+      }
    }
  }
 }

+.select-dropdown-floating {
+  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);
+  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: background 0.15s ease, color 0.15s ease;
+    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);
+  }
+}
+
@media (max-width: 980px) {
  .export-defaults-settings-form.layout-split {
    .form-group {
--- a/src/components/Export/ExportDefaultsSettingsForm.tsx
+++ b/src/components/Export/ExportDefaultsSettingsForm.tsx
@@ -1,4 +1,6 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { CSSProperties } from 'react'
+import { createPortal } from 'react-dom'
 import { ChevronDown } from 'lucide-react'
 import * as configService from '../../services/config'
 import { ExportDateRangeDialog } from './ExportDateRangeDialog'
@@ -56,6 +58,48 @@ const getOptionLabel = (options: ReadonlyArray<{ value: string; label: string }>
  return options.find((option) => option.value === value)?.label ?? value
 }

+interface SelectDropdownPlacement {
+  left: number
+  width: number
+  maxHeight: number
+  top?: number
+  bottom?: number
+}
+
+const resolveSelectDropdownPlacement = (anchor: HTMLElement | null): SelectDropdownPlacement | null => {
+  if (!anchor || typeof window === 'undefined') return null
+
+  const rect = anchor.getBoundingClientRect()
+  const viewportWidth = window.innerWidth || document.documentElement.clientWidth
+  const viewportHeight = window.innerHeight || document.documentElement.clientHeight
+  const viewportMargin = 12
+  const dropdownGap = 6
+  const minDropdownHeight = 128
+  const availableWidth = Math.max(160, viewportWidth - viewportMargin * 2)
+  const width = Math.min(Math.max(rect.width, 220), availableWidth)
+  const left = Math.max(viewportMargin, Math.min(rect.left, viewportWidth - width - viewportMargin))
+  const spaceBelow = Math.max(0, viewportHeight - rect.bottom - viewportMargin - dropdownGap)
+  const spaceAbove = Math.max(0, rect.top - viewportMargin - dropdownGap)
+  const shouldOpenAbove = spaceBelow < minDropdownHeight && spaceAbove > spaceBelow
+  const availableHeight = shouldOpenAbove ? spaceAbove : spaceBelow
+  const maxHeight = Math.max(96, Math.min(320, availableHeight))
+
+  return shouldOpenAbove
+    ? { left, width, maxHeight, bottom: viewportHeight - rect.top + dropdownGap }
+    : { left, width, maxHeight, top: rect.bottom + dropdownGap }
+}
+
+const getSelectDropdownStyle = (placement: SelectDropdownPlacement): CSSProperties => ({
+  position: 'fixed',
+  top: placement.top,
+  bottom: placement.bottom,
+  left: placement.left,
+  right: 'auto',
+  width: placement.width,
+  maxHeight: placement.maxHeight,
+  zIndex: 9300
+})
+
 export function ExportDefaultsSettingsForm({
  onNotify,
  onDefaultsChanged,
@@ -66,6 +110,10 @@ export function ExportDefaultsSettingsForm({
  const [isExportDateRangeDialogOpen, setIsExportDateRangeDialogOpen] = useState(false)
  const exportExcelColumnsDropdownRef = useRef<HTMLDivElement>(null)
  const exportFileNamingModeDropdownRef = useRef<HTMLDivElement>(null)
+  const exportExcelColumnsMenuRef = useRef<HTMLDivElement>(null)
+  const exportFileNamingModeMenuRef = useRef<HTMLDivElement>(null)
+  const [exportExcelColumnsPlacement, setExportExcelColumnsPlacement] = useState<SelectDropdownPlacement | null>(null)
+  const [exportFileNamingModePlacement, setExportFileNamingModePlacement] = useState<SelectDropdownPlacement | null>(null)

  const [exportDefaultFormat, setExportDefaultFormat] = useState('excel')
  const [exportDefaultAvatars, setExportDefaultAvatars] = useState(true)
@@ -122,10 +170,20 @@ export function ExportDefaultsSettingsForm({
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      const target = e.target as Node
-      if (showExportExcelColumnsSelect && exportExcelColumnsDropdownRef.current && !exportExcelColumnsDropdownRef.current.contains(target)) {
+      if (
+        showExportExcelColumnsSelect &&
+        exportExcelColumnsDropdownRef.current &&
+        !exportExcelColumnsDropdownRef.current.contains(target) &&
+        !exportExcelColumnsMenuRef.current?.contains(target)
+      ) {
        setShowExportExcelColumnsSelect(false)
      }
-      if (showExportFileNamingModeSelect && exportFileNamingModeDropdownRef.current && !exportFileNamingModeDropdownRef.current.contains(target)) {
+      if (
+        showExportFileNamingModeSelect &&
+        exportFileNamingModeDropdownRef.current &&
+        !exportFileNamingModeDropdownRef.current.contains(target) &&
+        !exportFileNamingModeMenuRef.current?.contains(target)
+      ) {
        setShowExportFileNamingModeSelect(false)
      }
    }
@@ -134,6 +192,30 @@ export function ExportDefaultsSettingsForm({
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [showExportExcelColumnsSelect, showExportFileNamingModeSelect])

+  const updateSelectDropdownPlacements = useCallback(() => {
+    if (showExportExcelColumnsSelect) {
+      setExportExcelColumnsPlacement(resolveSelectDropdownPlacement(exportExcelColumnsDropdownRef.current))
+    }
+    if (showExportFileNamingModeSelect) {
+      setExportFileNamingModePlacement(resolveSelectDropdownPlacement(exportFileNamingModeDropdownRef.current))
+    }
+  }, [showExportExcelColumnsSelect, showExportFileNamingModeSelect])
+
+  useEffect(() => {
+    if (!showExportExcelColumnsSelect) setExportExcelColumnsPlacement(null)
+    if (!showExportFileNamingModeSelect) setExportFileNamingModePlacement(null)
+    if (!showExportExcelColumnsSelect && !showExportFileNamingModeSelect) return
+
+    updateSelectDropdownPlacements()
+    window.addEventListener('resize', updateSelectDropdownPlacements)
+    document.addEventListener('scroll', updateSelectDropdownPlacements, true)
+
+    return () => {
+      window.removeEventListener('resize', updateSelectDropdownPlacements)
+      document.removeEventListener('scroll', updateSelectDropdownPlacements, true)
+    }
+  }, [showExportExcelColumnsSelect, showExportFileNamingModeSelect, updateSelectDropdownPlacements])
+
  const exportExcelColumnsValue = exportDefaultExcelCompactColumns ? 'compact' : 'full'
  const exportDateRangeLabel = useMemo(() => getExportDateRangeLabel(exportDefaultDateRange), [exportDefaultDateRange])
  const exportExcelColumnsLabel = useMemo(() => getOptionLabel(exportExcelColumnOptions, exportExcelColumnsValue), [exportExcelColumnsValue])
@@ -143,6 +225,73 @@ export function ExportDefaultsSettingsForm({
    onNotify?.(text, success)
  }

+  const fileNamingModeDropdown = showExportFileNamingModeSelect && exportFileNamingModePlacement
+    ? createPortal(
+      <div
+        ref={exportFileNamingModeMenuRef}
+        className="select-dropdown select-dropdown-floating"
+        role="listbox"
+        style={getSelectDropdownStyle(exportFileNamingModePlacement)}
+        onClick={(event) => event.stopPropagation()}
+      >
+        {exportFileNamingModeOptions.map((option) => (
+          <button
+            key={option.value}
+            type="button"
+            role="option"
+            aria-selected={exportDefaultFileNamingMode === option.value}
+            className={`select-option ${exportDefaultFileNamingMode === option.value ? 'active' : ''}`}
+            onClick={async () => {
+              setExportDefaultFileNamingMode(option.value)
+              await configService.setExportDefaultFileNamingMode(option.value)
+              onDefaultsChanged?.({ fileNamingMode: option.value })
+              notify('已更新导出文件命名方式', true)
+              setShowExportFileNamingModeSelect(false)
+            }}
+          >
+            <span className="option-label">{option.label}</span>
+            <span className="option-desc">{option.desc}</span>
+          </button>
+        ))}
+      </div>,
+      document.body
+    )
+    : null
+
+  const excelColumnsDropdown = showExportExcelColumnsSelect && exportExcelColumnsPlacement
+    ? createPortal(
+      <div
+        ref={exportExcelColumnsMenuRef}
+        className="select-dropdown select-dropdown-floating"
+        role="listbox"
+        style={getSelectDropdownStyle(exportExcelColumnsPlacement)}
+        onClick={(event) => event.stopPropagation()}
+      >
+        {exportExcelColumnOptions.map((option) => (
+          <button
+            key={option.value}
+            type="button"
+            role="option"
+            aria-selected={exportExcelColumnsValue === option.value}
+            className={`select-option ${exportExcelColumnsValue === option.value ? 'active' : ''}`}
+            onClick={async () => {
+              const compact = option.value === 'compact'
+              setExportDefaultExcelCompactColumns(compact)
+              await configService.setExportDefaultExcelCompactColumns(compact)
+              onDefaultsChanged?.({ excelCompactColumns: compact })
+              notify(compact ? '已启用精简列' : '已启用完整列', true)
+              setShowExportExcelColumnsSelect(false)
+            }}
+          >
+            <span className="option-label">{option.label}</span>
+            <span className="option-desc">{option.desc}</span>
+          </button>
+        ))}
+      </div>,
+      document.body
+    )
+    : null
+
  return (
    <div className={`export-defaults-settings-form ${layout === 'split' ? 'layout-split' : 'layout-stacked'}`}>
      <div className="form-group">
@@ -273,6 +422,8 @@ export function ExportDefaultsSettingsForm({
            <button
              type="button"
              className={`select-trigger ${showExportFileNamingModeSelect ? 'open' : ''}`}
+              aria-haspopup="listbox"
+              aria-expanded={showExportFileNamingModeSelect}
              onClick={() => {
                setShowExportFileNamingModeSelect(!showExportFileNamingModeSelect)
                setShowExportExcelColumnsSelect(false)
@@ -282,27 +433,7 @@ export function ExportDefaultsSettingsForm({
              <span className="select-value">{exportFileNamingModeLabel}</span>
              <ChevronDown size={16} />
            </button>
-            {showExportFileNamingModeSelect && (
-              <div className="select-dropdown">
-                {exportFileNamingModeOptions.map((option) => (
-                  <button
-                    key={option.value}
-                    type="button"
-                    className={`select-option ${exportDefaultFileNamingMode === option.value ? 'active' : ''}`}
-                    onClick={async () => {
-                      setExportDefaultFileNamingMode(option.value)
-                      await configService.setExportDefaultFileNamingMode(option.value)
-                      onDefaultsChanged?.({ fileNamingMode: option.value })
-                      notify('已更新导出文件命名方式', true)
-                      setShowExportFileNamingModeSelect(false)
-                    }}
-                  >
-                    <span className="option-label">{option.label}</span>
-                    <span className="option-desc">{option.desc}</span>
-                  </button>
-                ))}
-              </div>
-            )}
+            {fileNamingModeDropdown}
          </div>
        </div>
      </div>
@@ -317,6 +448,8 @@ export function ExportDefaultsSettingsForm({
            <button
              type="button"
              className={`select-trigger ${showExportExcelColumnsSelect ? 'open' : ''}`}
+              aria-haspopup="listbox"
+              aria-expanded={showExportExcelColumnsSelect}
              onClick={() => {
                setShowExportExcelColumnsSelect(!showExportExcelColumnsSelect)
                setShowExportFileNamingModeSelect(false)
@@ -326,28 +459,7 @@ export function ExportDefaultsSettingsForm({
              <span className="select-value">{exportExcelColumnsLabel}</span>
              <ChevronDown size={16} />
            </button>
-            {showExportExcelColumnsSelect && (
-              <div className="select-dropdown">
-                {exportExcelColumnOptions.map((option) => (
-                  <button
-                    key={option.value}
-                    type="button"
-                    className={`select-option ${exportExcelColumnsValue === option.value ? 'active' : ''}`}
-                    onClick={async () => {
-                      const compact = option.value === 'compact'
-                      setExportDefaultExcelCompactColumns(compact)
-                      await configService.setExportDefaultExcelCompactColumns(compact)
-                      onDefaultsChanged?.({ excelCompactColumns: compact })
-                      notify(compact ? '已启用精简列' : '已启用完整列', true)
-                      setShowExportExcelColumnsSelect(false)
-                    }}
-                  >
-                    <span className="option-label">{option.label}</span>
-                    <span className="option-desc">{option.desc}</span>
-                  </button>
-                ))}
-              </div>
-            )}
+            {excelColumnsDropdown}
          </div>
        </div>
      </div>
@@ -371,7 +483,8 @@ export function ExportDefaultsSettingsForm({
                  notify(`已${e.target.checked ? '开启' : '关闭'}默认导出图片`, true)
                }}
              />
-              图片
+              <span className="media-default-check" aria-hidden="true" />
+              <span>图片</span>
            </label>
            <label>
              <input
@@ -385,7 +498,8 @@ export function ExportDefaultsSettingsForm({
                  notify(`已${e.target.checked ? '开启' : '关闭'}默认导出语音`, true)
                }}
              />
-              语音
+              <span className="media-default-check" aria-hidden="true" />
+              <span>语音</span>
            </label>
            <label>
              <input
@@ -399,7 +513,8 @@ export function ExportDefaultsSettingsForm({
                  notify(`已${e.target.checked ? '开启' : '关闭'}默认导出视频`, true)
                }}
              />
-              视频
+              <span className="media-default-check" aria-hidden="true" />
+              <span>视频</span>
            </label>
            <label>
              <input
@@ -413,7 +528,8 @@ export function ExportDefaultsSettingsForm({
                  notify(`已${e.target.checked ? '开启' : '关闭'}默认导出表情包`, true)
                }}
              />
-              表情包
+              <span className="media-default-check" aria-hidden="true" />
+              <span>表情包</span>
            </label>
            <label>
              <input
@@ -427,7 +543,8 @@ export function ExportDefaultsSettingsForm({
                  notify(`已${e.target.checked ? '开启' : '关闭'}默认导出文件`, true)
                }}
              />
-              文件
+              <span className="media-default-check" aria-hidden="true" />
+              <span>文件</span>
            </label>
          </div>
        </div>
--- a/src/pages/ExportPage.scss
+++ b/src/pages/ExportPage.scss
@@ -1177,10 +1177,18 @@
 }

 .export-defaults-modal-actions {
-  padding: 0 18px 16px;
+  padding: 12px 18px 16px;
+  border-top: 1px solid color-mix(in srgb, var(--border-color) 64%, transparent);
  background: var(--bg-primary);
 }

+.export-defaults-close-action {
+  min-width: 96px;
+  min-height: 38px;
+  justify-content: center;
+  border-radius: 8px;
+}
+
 .task-center-card-label {
  line-height: 1;
  white-space: nowrap;
@@ -5753,7 +5761,8 @@
  line-height: 1.6;
 }

-.close-icon-btn {
+.automation-modal .close-icon-btn,
+.automation-editor-modal .close-icon-btn {
  border: none;
  background: color-mix(in srgb, var(--text-tertiary) 8%, transparent);
  color: var(--text-secondary);
--- a/src/pages/ExportPage.tsx
+++ b/src/pages/ExportPage.tsx
@@ -9267,7 +9267,7 @@ function ExportPage() {
            <div className="export-defaults-modal-actions">
              <button
                type="button"
-                className="secondary-btn"
+                className="secondary-btn export-defaults-close-action"
                onClick={() => setIsExportDefaultsModalOpen(false)}
              >
                关闭