fix: ExportDate Page

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>

src/components/Export/ExportDefaultsSettingsForm.scss

@@ -232,6 +232,7 @@
       display: inline-flex;
       align-items: center;
       gap: 5px;
+      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, color 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: var(--primary);
+      }
+
+      &: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: 16px;
+      height: 16px;
+      flex: 0 0 16px;
+      border: 1px solid color-mix(in srgb, var(--border-color) 82%, var(--text-tertiary));
+      border-radius: 5px;
+      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: 8px;
+        height: 5px;
+        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;
+      }
     }
   }
 
@@ -568,10 +613,70 @@
       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(--primary) 5%, var(--bg-primary));
+      }
+
+      &:has(input:checked) {
+        border-color: color-mix(in srgb, var(--primary) 55%, var(--border-color));
+        background: color-mix(in srgb, var(--primary) 8%, var(--bg-primary));
+        color: var(--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 {

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>

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);

src/pages/ExportPage.tsx

@@ -9250,7 +9250,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)}
               >
                 关闭