单个好友导出ui优化

electron/services/exportService.ts

@@ -1335,6 +1335,55 @@ class ExportService {
     return this.formatPlainExportContent(content, localType, { exportVoiceAsText: false }, undefined, myWxid, senderWxid, isSend)
   }
 
+  private extractHtmlLinkCard(content: string, localType: number): { title: string; url: string } | null {
+    if (!content) return null
+
+    const normalized = this.normalizeAppMessageContent(content)
+    const isAppMessage = localType === 49 || normalized.includes('<appmsg') || normalized.includes('<msg>')
+    if (!isAppMessage) return null
+
+    const subType = this.extractXmlValue(normalized, 'type')
+    if (subType && subType !== '5' && subType !== '49') return null
+
+    const url = this.normalizeHtmlLinkUrl(this.extractXmlValue(normalized, 'url'))
+    if (!url) return null
+
+    const title = this.extractXmlValue(normalized, 'title') || this.extractXmlValue(normalized, 'des') || url
+    return { title, url }
+  }
+
+  private normalizeHtmlLinkUrl(rawUrl: string): string {
+    const value = (rawUrl || '').trim()
+    if (!value) return ''
+
+    const parseHttpUrl = (candidate: string): string => {
+      try {
+        const parsed = new URL(candidate)
+        if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
+          return parsed.toString()
+        }
+      } catch {
+        return ''
+      }
+      return ''
+    }
+
+    if (value.startsWith('//')) {
+      return parseHttpUrl(`https:${value}`)
+    }
+
+    const direct = parseHttpUrl(value)
+    if (direct) return direct
+
+    const hasScheme = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(value)
+    const isDomainLike = /^[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}(?:[/:?#].*)?$/.test(value)
+    if (!hasScheme && isDomainLike) {
+      return parseHttpUrl(`https://${value}`)
+    }
+
+    return ''
+  }
+
   /**
    * 导出媒体文件到指定目录
    */
@@ -4343,6 +4392,8 @@ class ExportService {
           }
         }
 
+        const linkCard = this.extractHtmlLinkCard(msg.content, msg.localType)
+
         let mediaHtml = ''
         if (mediaItem?.kind === 'image') {
           const mediaPath = this.escapeAttribute(encodeURI(mediaItem.relativePath))
@@ -4357,9 +4408,11 @@ class ExportService {
           mediaHtml = `<video class="message-media video" controls preload="metadata"${posterAttr} src="${this.escapeAttribute(encodeURI(mediaItem.relativePath))}"></video>`
         }
 
-        const textHtml = textContent
-          ? `<div class="message-text">${this.renderTextWithEmoji(textContent).replace(/\r?\n/g, '<br />')}</div>`
-          : ''
+        const textHtml = linkCard
+          ? `<div class="message-text"><a class="message-link-card" href="${this.escapeAttribute(linkCard.url)}" target="_blank" rel="noopener noreferrer">${this.renderTextWithEmoji(linkCard.title).replace(/\r?\n/g, '<br />')}</a></div>`
+          : (textContent
+            ? `<div class="message-text">${this.renderTextWithEmoji(textContent).replace(/\r?\n/g, '<br />')}</div>`
+            : '')
         const senderNameHtml = isGroup
           ? `<div class="sender-name">${this.escapeHtml(senderName)}</div>`
           : ''

src/pages/GroupAnalyticsPage.scss

@@ -802,21 +802,180 @@
     display: flex;
     flex-direction: column;
     gap: 6px;
+    position: relative;
 
-    span {
+    > span {
       font-size: 12px;
       color: var(--text-secondary);
     }
+  }
 
-    select {
-      width: 100%;
-      border: 1px solid var(--border-color);
-      border-radius: 10px;
+  .select-trigger {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 9999px;
+    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: 30;
+    max-height: 280px;
+    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: 13px;
+
+    &:hover {
       background: var(--bg-tertiary);
-      color: var(--text-primary);
-      font-size: 13px;
-      padding: 8px 10px;
+    }
+
+    &.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-secondary);
+    line-height: 1.4;
+  }
+
+  .member-select-trigger-value {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .member-select-dropdown {
+    padding: 8px;
+  }
+
+  .member-select-search {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 7px 9px;
+    margin-bottom: 8px;
+    background: var(--bg-tertiary);
+
+    svg {
+      color: var(--text-tertiary);
+      flex-shrink: 0;
+    }
+
+    input {
+      flex: 1;
+      min-width: 0;
+      border: none;
+      background: transparent;
       outline: none;
+      color: var(--text-primary);
+      font-size: 12px;
+    }
+  }
+
+  .member-select-options {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .member-select-empty {
+    padding: 10px 8px;
+    text-align: center;
+    font-size: 12px;
+    color: var(--text-tertiary);
+  }
+
+  .member-select-option {
+    display: grid;
+    grid-template-columns: 28px 1fr;
+    gap: 8px;
+    align-items: center;
+    padding: 8px 10px;
+
+    .member-option-main {
+      display: block;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--text-primary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .member-option-meta {
+      grid-column: 2 / 3;
+      font-size: 11px;
+      color: var(--text-secondary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &.active {
+      .member-option-main,
+      .member-option-meta {
+        color: var(--primary);
+      }
     }
   }
 
@@ -866,36 +1025,62 @@
     gap: 12px;
   }
 
-  .member-export-switch {
+  .member-export-chip-group {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 13px;
-    color: var(--text-primary);
-
-    input {
-      width: 16px;
-      height: 16px;
-      cursor: pointer;
-    }
+    flex-direction: column;
+    gap: 8px;
   }
 
-  .member-export-checkboxes {
-    display: grid;
-    gap: 10px;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  .chip-group-label {
+    font-size: 12px;
+    color: var(--text-secondary);
+  }
 
-    label {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 13px;
+  .member-export-chip-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .export-filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 14px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    cursor: pointer;
+    user-select: none;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    transition: all 0.2s ease;
+    white-space: nowrap;
+
+    &:hover {
+      background: var(--bg-hover);
+      border-color: var(--text-tertiary);
       color: var(--text-primary);
+      transform: translateY(-1px);
+    }
 
-      input {
-        width: 16px;
-        height: 16px;
-        cursor: pointer;
+    &.active {
+      background: var(--primary-light);
+      border-color: var(--primary);
+      color: var(--primary);
+    }
+
+    &.disabled,
+    &:disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+      transform: none;
+
+      &:hover {
+        background: var(--bg-secondary);
+        border-color: var(--border-color);
+        color: var(--text-secondary);
       }
     }
   }

src/pages/GroupAnalyticsPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Users, BarChart3, Clock, Image, Loader2, RefreshCw, Medal, Search, X, ChevronLeft, Copy, Check, Download } from 'lucide-react'
+import { Users, BarChart3, Clock, Image, Loader2, RefreshCw, Medal, Search, X, ChevronLeft, Copy, Check, Download, ChevronDown } from 'lucide-react'
 import { Avatar } from '../components/Avatar'
 import ReactECharts from 'echarts-for-react'
 import DateRangePicker from '../components/DateRangePicker'
@@ -44,6 +44,12 @@ interface MemberMessageExportOptions {
   displayNamePreference: 'group-nickname' | 'remark' | 'nickname'
 }
 
+interface MemberExportFormatOption {
+  value: MemberExportFormat
+  label: string
+  desc: string
+}
+
 function GroupAnalyticsPage() {
   const location = useLocation()
   const [groups, setGroups] = useState<GroupChatInfo[]>([])
@@ -78,6 +84,13 @@ function GroupAnalyticsPage() {
   // 成员详情弹框
   const [selectedMember, setSelectedMember] = useState<GroupMember | null>(null)
   const [copiedField, setCopiedField] = useState<string | null>(null)
+  const [showMemberSelect, setShowMemberSelect] = useState(false)
+  const [showFormatSelect, setShowFormatSelect] = useState(false)
+  const [showDisplayNameSelect, setShowDisplayNameSelect] = useState(false)
+  const [memberSearchKeyword, setMemberSearchKeyword] = useState('')
+  const memberSelectDropdownRef = useRef<HTMLDivElement>(null)
+  const formatDropdownRef = useRef<HTMLDivElement>(null)
+  const displayNameDropdownRef = useRef<HTMLDivElement>(null)
 
   // 时间范围
   const [startDate, setStartDate] = useState<string>('')
@@ -102,15 +115,50 @@ function GroupAnalyticsPage() {
       .filter(Boolean)
   }, [location.state])
 
-  const memberExportFormatOptions = useMemo<Array<{ value: MemberExportFormat; label: string }>>(() => ([
-    { value: 'excel', label: 'Excel' },
-    { value: 'txt', label: 'TXT' },
-    { value: 'json', label: 'JSON' },
-    { value: 'chatlab', label: 'ChatLab' },
-    { value: 'chatlab-jsonl', label: 'ChatLab JSONL' },
-    { value: 'html', label: 'HTML' },
-    { value: 'weclone', label: 'WeClone CSV' }
+  const memberExportFormatOptions = useMemo<MemberExportFormatOption[]>(() => ([
+    { value: 'excel', label: 'Excel', desc: '电子表格，适合统计分析' },
+    { value: 'txt', label: 'TXT', desc: '纯文本，通用格式' },
+    { value: 'json', label: 'JSON', desc: '详细格式，包含完整消息信息' },
+    { value: 'chatlab', label: 'ChatLab', desc: '标准格式，支持其他软件导入' },
+    { value: 'chatlab-jsonl', label: 'ChatLab JSONL', desc: '流式格式，适合大量消息' },
+    { value: 'html', label: 'HTML', desc: '网页格式，可直接浏览' },
+    { value: 'weclone', label: 'WeClone CSV', desc: 'WeClone 兼容字段格式（CSV）' }
   ]), [])
+  const displayNameOptions = useMemo<Array<{
+    value: MemberMessageExportOptions['displayNamePreference']
+    label: string
+    desc: string
+  }>>(() => ([
+    { value: 'group-nickname', label: '群昵称优先', desc: '仅群聊有效，私聊显示备注/昵称' },
+    { value: 'remark', label: '备注优先', desc: '有备注显示备注，否则显示昵称' },
+    { value: 'nickname', label: '微信昵称', desc: '始终显示微信昵称' }
+  ]), [])
+  const selectedExportMember = useMemo(
+    () => members.find(member => member.username === selectedExportMemberUsername) || null,
+    [members, selectedExportMemberUsername]
+  )
+  const selectedFormatOption = useMemo(
+    () => memberExportFormatOptions.find(option => option.value === memberExportOptions.format) || memberExportFormatOptions[0],
+    [memberExportFormatOptions, memberExportOptions.format]
+  )
+  const selectedDisplayNameOption = useMemo(
+    () => displayNameOptions.find(option => option.value === memberExportOptions.displayNamePreference) || displayNameOptions[0],
+    [displayNameOptions, memberExportOptions.displayNamePreference]
+  )
+  const filteredMemberOptions = useMemo(() => {
+    const keyword = memberSearchKeyword.trim().toLowerCase()
+    if (!keyword) return members
+    return members.filter(member => {
+      const fields = [
+        member.username,
+        member.displayName,
+        member.nickname,
+        member.remark,
+        member.alias
+      ]
+      return fields.some(field => String(field || '').toLowerCase().includes(keyword))
+    })
+  }, [memberSearchKeyword, members])
 
   const loadExportPath = useCallback(async () => {
     try {
@@ -169,6 +217,23 @@ function GroupAnalyticsPage() {
     }
   }, [members, selectedExportMemberUsername])
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (showMemberSelect && memberSelectDropdownRef.current && !memberSelectDropdownRef.current.contains(target)) {
+        setShowMemberSelect(false)
+      }
+      if (showFormatSelect && formatDropdownRef.current && !formatDropdownRef.current.contains(target)) {
+        setShowFormatSelect(false)
+      }
+      if (showDisplayNameSelect && displayNameDropdownRef.current && !displayNameDropdownRef.current.contains(target)) {
+        setShowDisplayNameSelect(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [showDisplayNameSelect, showFormatSelect, showMemberSelect])
+
   useEffect(() => {
     if (preselectAppliedRef.current) return
     if (groups.length === 0 || preselectGroupIds.length === 0) return
@@ -232,6 +297,10 @@ function GroupAnalyticsPage() {
       setSelectedGroup(group)
       setSelectedFunction(null)
       setSelectedExportMemberUsername('')
+      setMemberSearchKeyword('')
+      setShowMemberSelect(false)
+      setShowFormatSelect(false)
+      setShowDisplayNameSelect(false)
     }
   }
 
@@ -718,32 +787,100 @@ function GroupAnalyticsPage() {
                   ) : (
                     <>
                       <div className="member-export-grid">
-                        <label className="member-export-field">
+                        <div className="member-export-field" ref={memberSelectDropdownRef}>
                           <span>导出成员</span>
-                          <select
-                            value={selectedExportMemberUsername}
-                            onChange={e => setSelectedExportMemberUsername(e.target.value)}
+                          <button
+                            type="button"
+                            className={`select-trigger ${showMemberSelect ? 'open' : ''}`}
+                            onClick={() => {
+                              setShowMemberSelect(prev => !prev)
+                              setShowFormatSelect(false)
+                              setShowDisplayNameSelect(false)
+                            }}
                           >
-                            {members.map(member => (
-                              <option key={member.username} value={member.username}>
-                                {member.displayName || member.username}
-                              </option>
-                            ))}
-                          </select>
-                        </label>
-                        <label className="member-export-field">
+                            <div className="member-select-trigger-value">
+                              <Avatar
+                                src={selectedExportMember?.avatarUrl}
+                                name={selectedExportMember?.displayName || selectedExportMember?.username || '?'}
+                                size={24}
+                              />
+                              <span className="select-value">{selectedExportMember?.displayName || selectedExportMember?.username || '请选择成员'}</span>
+                            </div>
+                            <ChevronDown size={16} />
+                          </button>
+                          {showMemberSelect && (
+                            <div className="select-dropdown member-select-dropdown">
+                              <div className="member-select-search">
+                                <Search size={14} />
+                                <input
+                                  type="text"
+                                  value={memberSearchKeyword}
+                                  onChange={e => setMemberSearchKeyword(e.target.value)}
+                                  placeholder="搜索 wxid / 昵称 / 备注 / 微信号"
+                                />
+                              </div>
+                              <div className="member-select-options">
+                                {filteredMemberOptions.length === 0 ? (
+                                  <div className="member-select-empty">无匹配成员</div>
+                                ) : (
+                                  filteredMemberOptions.map(member => (
+                                    <button
+                                      key={member.username}
+                                      type="button"
+                                      className={`select-option member-select-option ${selectedExportMemberUsername === member.username ? 'active' : ''}`}
+                                      onClick={() => {
+                                        setSelectedExportMemberUsername(member.username)
+                                        setShowMemberSelect(false)
+                                      }}
+                                    >
+                                      <Avatar src={member.avatarUrl} name={member.displayName} size={28} />
+                                      <span className="member-option-main">{member.displayName || member.username}</span>
+                                      <span className="member-option-meta">
+                                        wxid: {member.username}
+                                        {member.alias ? ` · 微信号: ${member.alias}` : ''}
+                                        {member.remark ? ` · 备注: ${member.remark}` : ''}
+                                        {member.nickname ? ` · 昵称: ${member.nickname}` : ''}
+                                      </span>
+                                    </button>
+                                  ))
+                                )}
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                        <div className="member-export-field" ref={formatDropdownRef}>
                           <span>导出格式</span>
-                          <select
-                            value={memberExportOptions.format}
-                            onChange={e => handleMemberExportFormatChange(e.target.value as MemberExportFormat)}
+                          <button
+                            type="button"
+                            className={`select-trigger ${showFormatSelect ? 'open' : ''}`}
+                            onClick={() => {
+                              setShowFormatSelect(prev => !prev)
+                              setShowMemberSelect(false)
+                              setShowDisplayNameSelect(false)
+                            }}
                           >
+                            <span className="select-value">{selectedFormatOption.label}</span>
+                            <ChevronDown size={16} />
+                          </button>
+                          {showFormatSelect && (
+                            <div className="select-dropdown">
                             {memberExportFormatOptions.map(option => (
-                              <option key={option.value} value={option.value}>
-                                {option.label}
-                              </option>
+                              <button
+                                key={option.value}
+                                type="button"
+                                className={`select-option ${memberExportOptions.format === option.value ? 'active' : ''}`}
+                                onClick={() => {
+                                  handleMemberExportFormatChange(option.value)
+                                  setShowFormatSelect(false)
+                                }}
+                              >
+                                <span className="option-label">{option.label}</span>
+                                <span className="option-desc">{option.desc}</span>
+                              </button>
                             ))}
-                          </select>
-                        </label>
+                            </div>
+                          )}
+                        </div>
                         <div className="member-export-field member-export-folder">
                           <span>导出目录</span>
                           <div className="member-export-folder-row">
@@ -756,79 +893,105 @@ function GroupAnalyticsPage() {
                       </div>
 
                       <div className="member-export-options">
-                        <label className="member-export-switch">
-                          <span>导出媒体文件</span>
-                          <input
-                            type="checkbox"
-                            checked={memberExportOptions.exportMedia}
-                            onChange={e => setMemberExportOptions(prev => ({ ...prev, exportMedia: e.target.checked }))}
-                          />
-                        </label>
-                        <div className="member-export-checkboxes">
-                          <label>
-                            <input
-                              type="checkbox"
-                              checked={memberExportOptions.exportImages}
-                              disabled={!memberExportOptions.exportMedia}
-                              onChange={e => setMemberExportOptions(prev => ({ ...prev, exportImages: e.target.checked }))}
-                            />
-                            <span>图片</span>
-                          </label>
-                          <label>
-                            <input
-                              type="checkbox"
-                              checked={memberExportOptions.exportVoices}
-                              disabled={!memberExportOptions.exportMedia}
-                              onChange={e => setMemberExportOptions(prev => ({ ...prev, exportVoices: e.target.checked }))}
-                            />
-                            <span>语音</span>
-                          </label>
-                          <label>
-                            <input
-                              type="checkbox"
-                              checked={memberExportOptions.exportVideos}
-                              disabled={!memberExportOptions.exportMedia}
-                              onChange={e => setMemberExportOptions(prev => ({ ...prev, exportVideos: e.target.checked }))}
-                            />
-                            <span>视频</span>
-                          </label>
-                          <label>
-                            <input
-                              type="checkbox"
-                              checked={memberExportOptions.exportEmojis}
-                              disabled={!memberExportOptions.exportMedia}
-                              onChange={e => setMemberExportOptions(prev => ({ ...prev, exportEmojis: e.target.checked }))}
-                            />
-                            <span>表情</span>
-                          </label>
-                          <label>
-                            <input
-                              type="checkbox"
-                              checked={memberExportOptions.exportVoiceAsText}
-                              onChange={e => setMemberExportOptions(prev => ({ ...prev, exportVoiceAsText: e.target.checked }))}
-                            />
-                            <span>语音转文字</span>
-                          </label>
-                          <label>
-                            <input
-                              type="checkbox"
-                              checked={memberExportOptions.exportAvatars}
-                              onChange={e => setMemberExportOptions(prev => ({ ...prev, exportAvatars: e.target.checked }))}
-                            />
-                            <span>导出头像</span>
-                          </label>
-                        </div>
-                        <label className="member-export-field">
-                          <span>显示名称规则</span>
-                          <select
-                            value={memberExportOptions.displayNamePreference}
-                            onChange={e => setMemberExportOptions(prev => ({ ...prev, displayNamePreference: e.target.value as MemberMessageExportOptions['displayNamePreference'] }))}
+                        <div className="member-export-chip-group">
+                          <span className="chip-group-label">媒体导出</span>
+                          <button
+                            type="button"
+                            className={`export-filter-chip ${memberExportOptions.exportMedia ? 'active' : ''}`}
+                            onClick={() => setMemberExportOptions(prev => ({ ...prev, exportMedia: !prev.exportMedia }))}
                           >
-                            <option value="group-nickname">群昵称优先</option>
-                            <option value="remark">备注优先</option>
-                            <option value="nickname">微信昵称</option>
-                          </select>
-                        </label>
+                            导出媒体文件
+                          </button>
+                        </div>
+                        <div className="member-export-chip-group">
+                          <span className="chip-group-label">媒体类型</span>
+                          <div className="member-export-chip-list">
+                            <button
+                              type="button"
+                              className={`export-filter-chip ${memberExportOptions.exportImages ? 'active' : ''} ${!memberExportOptions.exportMedia ? 'disabled' : ''}`}
+                              disabled={!memberExportOptions.exportMedia}
+                              onClick={() => setMemberExportOptions(prev => ({ ...prev, exportImages: !prev.exportImages }))}
+                            >
+                              图片
+                            </button>
+                            <button
+                              type="button"
+                              className={`export-filter-chip ${memberExportOptions.exportVoices ? 'active' : ''} ${!memberExportOptions.exportMedia ? 'disabled' : ''}`}
+                              disabled={!memberExportOptions.exportMedia}
+                              onClick={() => setMemberExportOptions(prev => ({ ...prev, exportVoices: !prev.exportVoices }))}
+                            >
+                              语音
+                            </button>
+                            <button
+                              type="button"
+                              className={`export-filter-chip ${memberExportOptions.exportVideos ? 'active' : ''} ${!memberExportOptions.exportMedia ? 'disabled' : ''}`}
+                              disabled={!memberExportOptions.exportMedia}
+                              onClick={() => setMemberExportOptions(prev => ({ ...prev, exportVideos: !prev.exportVideos }))}
+                            >
+                              视频
+                            </button>
+                            <button
+                              type="button"
+                              className={`export-filter-chip ${memberExportOptions.exportEmojis ? 'active' : ''} ${!memberExportOptions.exportMedia ? 'disabled' : ''}`}
+                              disabled={!memberExportOptions.exportMedia}
+                              onClick={() => setMemberExportOptions(prev => ({ ...prev, exportEmojis: !prev.exportEmojis }))}
+                            >
+                              表情
+                            </button>
+                          </div>
+                        </div>
+                        <div className="member-export-chip-group">
+                          <span className="chip-group-label">附加选项</span>
+                          <div className="member-export-chip-list">
+                            <button
+                              type="button"
+                              className={`export-filter-chip ${memberExportOptions.exportVoiceAsText ? 'active' : ''}`}
+                              onClick={() => setMemberExportOptions(prev => ({ ...prev, exportVoiceAsText: !prev.exportVoiceAsText }))}
+                            >
+                              语音转文字
+                            </button>
+                            <button
+                              type="button"
+                              className={`export-filter-chip ${memberExportOptions.exportAvatars ? 'active' : ''}`}
+                              onClick={() => setMemberExportOptions(prev => ({ ...prev, exportAvatars: !prev.exportAvatars }))}
+                            >
+                              导出头像
+                            </button>
+                          </div>
+                        </div>
+                        <div className="member-export-field" ref={displayNameDropdownRef}>
+                          <span>显示名称规则</span>
+                          <button
+                            type="button"
+                            className={`select-trigger ${showDisplayNameSelect ? 'open' : ''}`}
+                            onClick={() => {
+                              setShowDisplayNameSelect(prev => !prev)
+                              setShowMemberSelect(false)
+                              setShowFormatSelect(false)
+                            }}
+                          >
+                            <span className="select-value">{selectedDisplayNameOption.label}</span>
+                            <ChevronDown size={16} />
+                          </button>
+                          {showDisplayNameSelect && (
+                            <div className="select-dropdown">
+                              {displayNameOptions.map(option => (
+                                <button
+                                  key={option.value}
+                                  type="button"
+                                  className={`select-option ${memberExportOptions.displayNamePreference === option.value ? 'active' : ''}`}
+                                  onClick={() => {
+                                    setMemberExportOptions(prev => ({ ...prev, displayNamePreference: option.value }))
+                                    setShowDisplayNameSelect(false)
+                                  }}
+                                >
+                                  <span className="option-label">{option.label}</span>
+                                  <span className="option-desc">{option.desc}</span>
+                                </button>
+                              ))}
+                            </div>
+                          )}
+                        </div>
                       </div>
 
                       <div className="member-export-actions">