feat: 提交

src/renderer/src/App.tsx

@@ -317,7 +317,7 @@ function App(): React.ReactElement {
       usernames.length ? 55 : 90
     )
     let loadedCount = 0
-    const chunkSize = 32
+    const chunkSize = 128
     for (let index = 0; index < usernames.length; index += chunkSize) {
       if (runId !== contactAvatarHydrationRunRef.current) return
       const chunk = usernames.slice(index, index + chunkSize)
@@ -348,7 +348,7 @@ function App(): React.ReactElement {
       } catch (error) {
         console.warn('[Contacts] avatar hydrate failed:', error)
       }
-      await new Promise((resolve) => window.setTimeout(resolve, 50))
+      await new Promise((resolve) => window.setTimeout(resolve, 20))
     }
     if (usernames.length) onProgress?.('头像加载完成', 90)
   }

src/renderer/src/assets/main.css

@@ -6239,6 +6239,15 @@ body {
   .settings-page-header {
     padding: 20px 24px;
   }
+  .settings-recall-grid {
+    grid-template-columns: 1fr;
+  }
+  .settings-recall-notice {
+    padding-top: 10px;
+    padding-left: 0;
+    border-top: 2px solid #e5b45f;
+    border-left: 0;
+  }
   .settings-account-overview {
     grid-template-columns: minmax(0, 1fr) auto;
     gap: 18px;
@@ -7788,6 +7797,55 @@ body {
   height: 18px;
   accent-color: var(--wxex-brand);
 }
+.settings-recall-card {
+  padding: 18px 20px;
+}
+.settings-recall-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
+  gap: 18px;
+  align-items: center;
+}
+.settings-recall-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  min-width: 0;
+  cursor: pointer;
+}
+.settings-recall-option span {
+  display: grid;
+  gap: 4px;
+}
+.settings-recall-option b {
+  color: var(--wxex-text-primary);
+  font: 700 13px/19px var(--wxex-font);
+}
+.settings-recall-option small {
+  color: var(--wxex-text-secondary);
+  font: 12px/18px var(--wxex-font);
+}
+.settings-recall-option input {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  accent-color: var(--wxex-brand);
+}
+.settings-recall-notice {
+  display: grid;
+  gap: 3px;
+  padding-left: 14px;
+  border-left: 2px solid #e5b45f;
+  color: #765326;
+  font: 12px/18px var(--wxex-font);
+}
+.settings-recall-notice strong {
+  font-weight: 700;
+}
+.settings-recall-notice span {
+  color: #8a6a3e;
+}
 .api-upload-test-row {
   display: flex;
   align-items: center;

src/renderer/src/features/settings/pages/AccountDatabasePage.tsx

@@ -27,11 +27,14 @@ export function AccountDatabasePage({
 }): React.ReactElement {
   const controller = useAccountDatabaseController({ dbKey, dbReady, selfInfo, onNotice })
   const [autoLogin, setAutoLogin] = useState(false)
+  const [recallProtectionEnabled, setRecallProtectionEnabled] = useState(false)
 
   useEffect(() => {
     let active = true
     void window.api.getSettings().then((result) => {
-      if (active) setAutoLogin(result.settings.autoLogin)
+      if (!active) return
+      setAutoLogin(result.settings.autoLogin)
+      setRecallProtectionEnabled(result.settings.recallProtectionEnabled)
     })
     return () => {
       active = false
@@ -46,6 +49,12 @@ export function AccountDatabasePage({
     setAutoLogin(result.settings.autoLogin)
     onNotice(checked ? '已开启启动时自动连接' : '已关闭启动时自动连接')
   }
+
+  const changeRecallProtection = async (checked: boolean): Promise<void> => {
+    const result = await window.api.setSettings({ recallProtectionEnabled: checked })
+    setRecallProtectionEnabled(result.settings.recallProtectionEnabled)
+    onNotice(checked ? '已开启防撤回' : '已关闭防撤回')
+  }
   return (
     <div className="settings-page">
       <header className="settings-page-header">
@@ -93,6 +102,26 @@ export function AccountDatabasePage({
               />
             </label>
           </section>
+          <h2 className="settings-section-heading">数据读取</h2>
+          <section className="settings-card settings-recall-card">
+            <div className="settings-recall-grid">
+              <label className="settings-recall-option">
+                <span>
+                  <b>开启防撤回</b>
+                  <small>尽量保留已撤回的聊天内容，方便后续查看。</small>
+                </span>
+                <input
+                  type="checkbox"
+                  checked={recallProtectionEnabled}
+                  onChange={(event) => void changeRecallProtection(event.target.checked)}
+                />
+              </label>
+              <aside className="settings-recall-notice">
+                <strong>性能提示</strong>
+                <span>开启后会为消息表增加监听，数据库较大或磁盘较慢时可能让加载变慢。</span>
+              </aside>
+            </div>
+          </section>
         </div>
       </div>
     </div>