refactor: polish UI for Export and Contacts pages

src/components/Export/ExportDefaultsSettingsForm.scss

@@ -457,3 +457,125 @@
     }
   }
 }
+
+// UI rebuild polish for the modal variant used by ExportPage.
+.export-defaults-settings-form.layout-split {
+  display: grid;
+  gap: 12px;
+
+  .form-group {
+    grid-template-columns: minmax(180px, 0.85fr) minmax(0, 1.15fr);
+    gap: 14px;
+    align-items: start;
+    padding: 14px;
+    border: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent);
+    border-radius: 14px;
+    background: var(--bg-secondary);
+  }
+
+  .form-group:first-child,
+  .form-group:last-child {
+    padding: 14px;
+  }
+
+  .form-copy {
+    padding-top: 2px;
+  }
+
+  label {
+    margin-bottom: 3px;
+    line-height: 1.35;
+  }
+
+  .form-hint {
+    line-height: 1.45;
+  }
+
+  .form-control {
+    width: 100%;
+    min-width: 0;
+    justify-content: stretch;
+  }
+
+  .select-field,
+  .settings-time-range-field,
+  .log-toggle-line,
+  .media-default-grid,
+  .concurrency-inline-options {
+    max-width: none;
+    width: 100%;
+  }
+
+  .select-trigger,
+  .settings-time-range-trigger {
+    border-radius: 12px;
+    background: var(--bg-primary);
+  }
+
+  .log-toggle-line {
+    border-radius: 12px;
+    background: var(--bg-primary);
+  }
+
+  .concurrency-inline-options {
+    grid-template-columns: repeat(6, minmax(42px, 1fr));
+    gap: 6px;
+  }
+
+  .concurrency-option {
+    min-width: 0;
+    min-height: 36px;
+  }
+
+  .format-setting-group {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .format-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 8px;
+    width: 100%;
+  }
+
+  .format-card {
+    min-height: 74px;
+    padding: 10px 12px;
+    border-radius: 12px;
+    background: var(--bg-primary);
+  }
+
+  .format-label,
+  .format-desc {
+    max-width: 100%;
+    overflow-wrap: anywhere;
+  }
+
+  .media-default-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
+    gap: 8px;
+
+    label {
+      min-height: 36px;
+      padding: 8px 10px;
+      border: 1px solid var(--border-color);
+      border-radius: 12px;
+      background: var(--bg-primary);
+    }
+  }
+}
+
+@media (max-width: 980px) {
+  .export-defaults-settings-form.layout-split {
+    .form-group {
+      grid-template-columns: 1fr;
+      gap: 10px;
+    }
+
+    .format-grid {
+      grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
+    }
+  }
+}

src/pages/ContactsPage.scss

@@ -834,3 +834,192 @@
     transform: rotate(360deg);
   }
 }
+
+// UI rebuild polish for the contact detail surface.
+.contacts-page {
+  background: var(--bg-primary);
+
+  .contact-detail-panel {
+    background: var(--bg-primary);
+  }
+
+  .contact-detail-scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: color-mix(in srgb, var(--text-tertiary) 55%, transparent);
+      border-radius: 3px;
+    }
+  }
+
+  .contact-detail-hero {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    padding: 22px;
+    border-radius: 16px;
+    background: var(--bg-secondary);
+    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
+  }
+
+  .contact-detail-hero .detail-avatar {
+    width: 84px;
+    height: 84px;
+    border-radius: 16px;
+    background: var(--bg-tertiary);
+    overflow: hidden;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    span {
+      color: var(--text-secondary);
+      font-size: 28px;
+      font-weight: 650;
+    }
+  }
+
+  .contact-detail-heading {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    h2 {
+      margin: 0;
+      color: var(--text-primary);
+      font-size: 24px;
+      line-height: 1.2;
+      font-weight: 650;
+      overflow-wrap: anywhere;
+    }
+
+    p {
+      margin: 0;
+      color: var(--text-secondary);
+      font-size: 13px;
+      line-height: 1.5;
+      overflow-wrap: anywhere;
+    }
+  }
+
+  .detail-type {
+    width: fit-content;
+    border-radius: 999px;
+    padding: 5px 10px;
+  }
+
+  .contact-action-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 10px;
+  }
+
+  .contact-action-row .goto-chat-btn,
+  .contact-action-row .detail-entry-btn {
+    min-height: 44px;
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    border-radius: 12px;
+    padding: 10px 14px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  }
+
+  .contact-action-row .goto-chat-btn {
+    border: 1px solid var(--primary);
+    background: var(--primary);
+    color: var(--on-primary, #fff);
+
+    &:hover {
+      background: var(--primary-hover);
+      border-color: var(--primary-hover);
+    }
+  }
+
+  .contact-action-row .detail-entry-btn {
+    border: 1px solid var(--border-color);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+
+    &:hover {
+      color: var(--primary);
+      border-color: color-mix(in srgb, var(--primary) 40%, var(--border-color));
+      background: color-mix(in srgb, var(--primary) 7%, var(--bg-secondary));
+    }
+  }
+
+  .contact-detail-section {
+    padding: 18px;
+    border-radius: 16px;
+    background: var(--bg-secondary);
+    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
+  }
+
+  .section-title {
+    margin-bottom: 12px;
+    color: var(--text-secondary);
+    font-size: 12px;
+    font-weight: 650;
+  }
+
+  .contact-detail-section .detail-info-list {
+    margin: 0;
+    display: grid;
+    gap: 8px;
+  }
+
+  .contact-detail-section .detail-row {
+    display: grid;
+    grid-template-columns: 76px minmax(0, 1fr);
+    align-items: start;
+    gap: 12px;
+    padding: 12px 14px;
+    border: none;
+    border-radius: 12px;
+    background: var(--bg-primary);
+    font-size: 13px;
+  }
+
+  .contact-detail-section .detail-label {
+    min-width: 0;
+    color: var(--text-tertiary);
+  }
+
+  .contact-detail-section .detail-value {
+    color: var(--text-primary);
+    line-height: 1.55;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+    user-select: text;
+  }
+
+  @media (max-width: 860px) {
+    .contact-detail-hero {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+  }
+}

src/pages/ContactsPage.tsx

@@ -635,6 +635,39 @@ function ContactsPage() {
         return '朋友圈：统计中...'
     }, [selectedContactSupportsSns, selectedContactSnsCount, snsUserPostCountsStatus])
 
+    const selectedContactTitle = useMemo(() => {
+        if (!selectedContact) return ''
+        return selectedContact.displayName || selectedContact.remark || selectedContact.nickname || selectedContact.username
+    }, [selectedContact])
+
+    const selectedContactSubtitle = useMemo(() => {
+        if (!selectedContact) return ''
+        const parts = [
+            selectedContact.remark && selectedContact.remark !== selectedContactTitle ? `备注 ${selectedContact.remark}` : '',
+            selectedContact.alias ? `微信号 ${selectedContact.alias}` : '',
+            selectedContact.region || ''
+        ].filter(Boolean)
+        return parts.join(' · ')
+    }, [selectedContact, selectedContactTitle])
+
+    const selectedContactDetailRows = useMemo(() => {
+        if (!selectedContact) return []
+        return [
+            { key: 'username', label: '用户名', value: selectedContact.username },
+            { key: 'nickname', label: '昵称', value: selectedContact.nickname || selectedContact.displayName },
+            selectedContact.remark ? { key: 'remark', label: '备注', value: selectedContact.remark } : null,
+            selectedContact.alias ? { key: 'alias', label: '微信号', value: selectedContact.alias } : null,
+            selectedContact.labels && selectedContact.labels.length > 0
+                ? { key: 'labels', label: '标签', value: selectedContact.labels.join('、') }
+                : null,
+            selectedContact.detailDescription
+                ? { key: 'signature', label: '个性签名', value: selectedContact.detailDescription }
+                : null,
+            selectedContact.region ? { key: 'region', label: '地区', value: selectedContact.region } : null,
+            { key: 'type', label: '类型', value: getContactTypeName(selectedContact.type) }
+        ].filter((row): row is { key: string; label: string; value: string } => Boolean(row && row.value))
+    }, [selectedContact])
+
     const openSelectedContactSnsTimeline = useCallback(() => {
         if (!selectedContact || !selectedContactSupportsSns) return
         if (snsUserPostCountsStatus === 'idle') {
@@ -1090,12 +1123,9 @@ function ContactsPage() {
                     </div>
                 </div>
             ) : selectedContact ? (
-                <div className="settings-panel">
-                    <div className="panel-header">
-                        <h2>联系人详情</h2>
-                    </div>
-                    <div className="settings-content">
-                        <div className="detail-profile">
+                <div className="settings-panel contact-detail-panel">
+                    <div className="contact-detail-scroll">
+                        <section className="contact-detail-hero">
                             <div className="detail-avatar">
                                 {selectedContact.avatarUrl ? (
                                     <img src={selectedContact.avatarUrl} alt="" />
@@ -1103,53 +1133,50 @@ function ContactsPage() {
                                     <span>{getAvatarLetter(selectedContact.displayName)}</span>
                                 )}
                             </div>
-                            <div className="detail-name">{selectedContact.displayName}</div>
-                            <div className={`contact-type ${selectedContact.type}`}>
-                                {getContactTypeIcon(selectedContact.type)}
-                                <span>{getContactTypeName(selectedContact.type)}</span>
-                            </div>
-                        </div>
-
-                        <div className="detail-info-list">
-                            <div className="detail-row"><span className="detail-label">用户名</span><span className="detail-value">{selectedContact.username}</span></div>
-                            <div className="detail-row"><span className="detail-label">昵称</span><span className="detail-value">{selectedContact.nickname || selectedContact.displayName}</span></div>
-                            {selectedContact.remark && <div className="detail-row"><span className="detail-label">备注</span><span className="detail-value">{selectedContact.remark}</span></div>}
-                            {selectedContact.alias && <div className="detail-row"><span className="detail-label">微信号</span><span className="detail-value">{selectedContact.alias}</span></div>}
-                            {selectedContact.labels && selectedContact.labels.length > 0 && (
-                                <div className="detail-row"><span className="detail-label">标签</span><span className="detail-value">{selectedContact.labels.join('、')}</span></div>
-                            )}
-                            {selectedContact.detailDescription && (
-                                <div className="detail-row"><span className="detail-label">个性签名</span><span className="detail-value">{selectedContact.detailDescription}</span></div>
-                            )}
-                            {selectedContact.region && (
-                                <div className="detail-row"><span className="detail-label">地区</span><span className="detail-value">{selectedContact.region}</span></div>
-                            )}
-                            <div className="detail-row"><span className="detail-label">类型</span><span className="detail-value">{getContactTypeName(selectedContact.type)}</span></div>
-                            {selectedContactSupportsSns && (
-                                <div className="detail-row">
-                                    <span className="detail-label">朋友圈</span>
-                                    <button
-                                        type="button"
-                                        className="detail-entry-btn"
-                                        onClick={openSelectedContactSnsTimeline}
-                                    >
-                                        <Aperture size={14} />
-                                        <span>{selectedContactSnsEntryLabel}</span>
-                                    </button>
+                            <div className="contact-detail-heading">
+                                <div className={`contact-type detail-type ${selectedContact.type}`}>
+                                    {getContactTypeIcon(selectedContact.type)}
+                                    <span>{getContactTypeName(selectedContact.type)}</span>
                                 </div>
-                            )}
-                        </div>
+                                <h2>{selectedContactTitle}</h2>
+                                {selectedContactSubtitle && <p>{selectedContactSubtitle}</p>}
+                            </div>
+                        </section>
 
-                        <button
-                            className="goto-chat-btn"
-                            onClick={() => {
-                                setCurrentSession(selectedContact.username)
-                                navigate('/chat')
-                            }}
-                        >
-                            <MessageCircle size={18} />
-                            <span>查看聊天记录</span>
-                        </button>
+                        <section className="contact-action-row" aria-label="联系人操作">
+                            <button
+                                className="goto-chat-btn"
+                                onClick={() => {
+                                    setCurrentSession(selectedContact.username)
+                                    navigate('/chat')
+                                }}
+                            >
+                                <MessageCircle size={18} />
+                                <span>查看聊天记录</span>
+                            </button>
+                            {selectedContactSupportsSns && (
+                                <button
+                                    type="button"
+                                    className="detail-entry-btn"
+                                    onClick={openSelectedContactSnsTimeline}
+                                >
+                                    <Aperture size={18} />
+                                    <span>{selectedContactSnsEntryLabel}</span>
+                                </button>
+                            )}
+                        </section>
+
+                        <section className="contact-detail-section">
+                            <div className="section-title">基础资料</div>
+                            <div className="detail-info-list">
+                                {selectedContactDetailRows.map(row => (
+                                    <div className="detail-row" key={row.key}>
+                                        <span className="detail-label">{row.label}</span>
+                                        <span className="detail-value">{row.value}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </section>
                     </div>
                 </div>
             ) : (

src/pages/ExportPage.scss

@@ -1157,6 +1157,29 @@
   padding: 0 16px 16px;
 }
 
+.export-defaults-modal {
+  width: min(760px, calc(100vw - 40px));
+  max-height: min(82vh, 820px);
+  border-radius: 16px;
+  background: var(--bg-primary);
+  border-color: color-mix(in srgb, var(--border-color) 80%, transparent);
+  box-shadow: var(--shadow-md);
+}
+
+.export-defaults-modal-header {
+  padding: 16px 18px 12px;
+}
+
+.export-defaults-modal-body {
+  padding: 14px 18px 16px;
+  overflow-x: hidden;
+}
+
+.export-defaults-modal-actions {
+  padding: 0 18px 16px;
+  background: var(--bg-primary);
+}
+
 .task-center-card-label {
   line-height: 1;
   white-space: nowrap;

src/pages/GroupAnalyticsPage.scss

@@ -1955,3 +1955,276 @@
     opacity: 0.92;
   }
 }
+
+// UI rebuild polish: align group analysis with the shared ChatGPT-style tokens.
+.group-analytics-shell {
+  gap: 14px;
+  background: transparent;
+}
+
+.group-analytics-page {
+  gap: 14px;
+}
+
+.group-sidebar,
+.detail-area {
+  border-radius: 16px;
+  background: var(--bg-secondary);
+  border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
+  box-shadow: var(--shadow-sm);
+}
+
+.group-sidebar {
+  .sidebar-header {
+    min-height: 58px;
+    padding: 14px;
+  }
+
+  .search-box {
+    border-radius: 12px;
+    border: 1px solid transparent;
+    background: var(--bg-primary);
+
+    &:focus-within {
+      border-color: color-mix(in srgb, var(--primary) 40%, var(--border-color));
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
+    }
+  }
+
+  .refresh-btn {
+    border-radius: 10px;
+    background: var(--bg-primary);
+  }
+}
+
+.group-item {
+  margin: 0 8px 4px;
+  border-bottom: none;
+  border-radius: 12px;
+
+  &.active {
+    background: color-mix(in srgb, var(--primary) 12%, var(--bg-secondary));
+    color: var(--text-primary);
+  }
+
+  .group-avatar {
+    border-radius: 10px;
+  }
+}
+
+.detail-drag-region {
+  height: 14px;
+}
+
+.function-menu {
+  padding: 18px 22px 24px;
+
+  .selected-group-info {
+    border-radius: 16px;
+    border-color: color-mix(in srgb, var(--border-color) 70%, transparent);
+    background: var(--bg-primary);
+    box-shadow: none;
+  }
+
+  .function-grid {
+    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+    gap: 14px;
+  }
+
+  .function-card {
+    min-height: 136px;
+    border-radius: 16px;
+    border-color: color-mix(in srgb, var(--border-color) 76%, transparent);
+    background: var(--bg-primary);
+    box-shadow: none;
+    transform: none;
+
+    &:hover {
+      transform: none;
+      border-color: color-mix(in srgb, var(--primary) 35%, var(--border-color));
+      background: color-mix(in srgb, var(--primary) 5%, var(--bg-primary));
+      box-shadow: var(--shadow-sm);
+    }
+  }
+}
+
+.function-content {
+  .content-header {
+    padding: 16px 22px 12px;
+    background: var(--bg-secondary);
+    border-bottom-color: color-mix(in srgb, var(--border-color) 70%, transparent);
+
+    .back-btn,
+    .refresh-btn,
+    .export-btn {
+      border-radius: 10px;
+      background: var(--bg-primary);
+    }
+  }
+
+  .content-body {
+    padding: 18px 22px 22px;
+  }
+}
+
+.members-grid {
+  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
+  gap: 10px;
+
+  .member-card {
+    border-radius: 12px;
+    background: var(--bg-primary);
+    border: 1px solid transparent;
+
+    &:hover {
+      background: color-mix(in srgb, var(--primary) 5%, var(--bg-primary));
+      border-color: color-mix(in srgb, var(--primary) 28%, var(--border-color));
+    }
+  }
+}
+
+.member-export-panel,
+.member-messages-panel,
+.member-analytics-panel {
+  .select-trigger {
+    border-radius: 12px;
+    background: var(--bg-primary);
+  }
+
+  .member-export-options,
+  .member-message-item,
+  .member-message-summary-card {
+    border-radius: 12px;
+    background: var(--bg-primary);
+    box-shadow: none;
+  }
+}
+
+.rankings-list {
+  .ranking-item {
+    border-radius: 12px;
+    background: var(--bg-primary);
+    border: 1px solid transparent;
+
+    &:hover {
+      border-color: var(--border-color);
+      background: color-mix(in srgb, var(--primary) 4%, var(--bg-primary));
+    }
+  }
+}
+
+.media-stats {
+  .media-layout .media-legend,
+  .stat-card,
+  .charts-grid .chart-card {
+    border-radius: 12px;
+    border: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
+    background: var(--bg-primary);
+    box-shadow: none;
+  }
+}
+
+.member-modal-overlay {
+  background: rgba(0, 0, 0, 0.42);
+  backdrop-filter: blur(8px);
+}
+
+.member-modal,
+.member-export-modal,
+.member-result-modal {
+  border-radius: 16px;
+  border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
+  background: color-mix(in srgb, var(--bg-primary) 96%, transparent);
+  box-shadow: var(--shadow-md);
+}
+
+.member-modal {
+  width: min(380px, calc(100vw - 32px));
+  padding: 28px 32px 32px;
+
+  .member-display-name {
+    margin-bottom: 20px;
+  }
+
+  .detail-row {
+    border-radius: 12px;
+    background: var(--bg-secondary);
+  }
+
+  .member-modal-actions {
+    margin-top: 18px;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 8px;
+  }
+
+  .member-modal-primary-btn,
+  .member-modal-secondary-btn {
+    width: 100%;
+    min-width: 0;
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 7px;
+    padding: 10px 12px;
+    border-radius: 12px;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.25;
+    cursor: pointer;
+    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+
+    span {
+      min-width: 0;
+      white-space: normal;
+      text-align: center;
+    }
+
+    svg {
+      flex-shrink: 0;
+    }
+  }
+
+  .member-modal-primary-btn {
+    border: 1px solid var(--primary);
+    background: var(--primary);
+    color: var(--on-primary, #fff);
+
+    &:hover {
+      background: var(--primary-hover);
+      border-color: var(--primary-hover);
+      opacity: 1;
+    }
+  }
+
+  .member-modal-secondary-btn {
+    border: 1px solid var(--border-color);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+
+    &:hover {
+      border-color: color-mix(in srgb, var(--primary) 40%, var(--border-color));
+      background: color-mix(in srgb, var(--primary) 8%, var(--bg-secondary));
+      color: var(--primary);
+    }
+  }
+}
+
+[data-mode="dark"] {
+  .member-modal,
+  .member-export-modal,
+  .member-result-modal {
+    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
+    border-color: color-mix(in srgb, var(--border-color) 85%, transparent);
+  }
+
+  .members-grid .member-card,
+  .rankings-list .ranking-item,
+  .member-export-panel .member-message-item,
+  .media-stats .media-layout .media-legend,
+  .media-stats .stat-card,
+  .media-stats .charts-grid .chart-card {
+    background: var(--bg-secondary);
+  }
+}