Merge pull request #521 from BeiChen-CN/main

feat: 支持自定义引用消息样式
2026-03-25 15:25:50 +00:00 · 2026-03-21 23:00:23 +08:00
parent 1cef17174b f8e99a34c7
commit 1201ea33db
6 changed files with 276 additions and 27 deletions
--- a/electron/services/config.ts
+++ b/electron/services/config.ts
@@ -53,6 +53,7 @@ interface ConfigSchema {
  notificationFilterList: string[]
  messagePushEnabled: boolean
  windowCloseBehavior: 'ask' | 'tray' | 'quit'
+  quoteLayout: 'quote-top' | 'quote-bottom'
  wordCloudExcludeWords: string[]
 }

@@ -120,6 +121,7 @@ export class ConfigService {
      notificationFilterList: [],
      messagePushEnabled: false,
      windowCloseBehavior: 'ask',
+      quoteLayout: 'quote-top',
      wordCloudExcludeWords: []
    }

--- a/src/pages/ChatPage.scss
+++ b/src/pages/ChatPage.scss
@@ -2420,7 +2420,6 @@
  background: rgba(0, 0, 0, 0.04);
  border-left: 2px solid var(--primary);
  padding: 6px 10px;
-  margin-bottom: 8px;
  border-radius: 4px;
  font-size: 13px;

@@ -2482,6 +2481,14 @@

 .bubble-content {
  -webkit-app-region: no-drag;
+
+  &.quote-layout-top .quoted-message {
+    margin-bottom: 8px;
+  }
+
+  &.quote-layout-bottom .quoted-message {
+    margin-top: 8px;
+  }
 }

 // 时间分隔
--- a/src/pages/ChatPage.tsx
+++ b/src/pages/ChatPage.tsx
@@ -52,6 +52,8 @@ interface GlobalMsgPrefixCacheEntry {
  completed: boolean
 }

+type QuoteLayout = configService.QuoteLayout
+
 const GLOBAL_MSG_PER_SESSION_LIMIT = 10
 const GLOBAL_MSG_SEED_LIMIT = 120
 const GLOBAL_MSG_BACKFILL_CONCURRENCY = 3
@@ -7556,6 +7558,7 @@ function MessageBubble({
  const [senderAvatarUrl, setSenderAvatarUrl] = useState<string | undefined>(undefined)
  const [senderName, setSenderName] = useState<string | undefined>(undefined)
  const [quotedSenderName, setQuotedSenderName] = useState<string | undefined>(undefined)
+  const [quoteLayout, setQuoteLayout] = useState<QuoteLayout>('quote-top')
  const senderProfileRequestSeqRef = useRef(0)
  const [emojiError, setEmojiError] = useState(false)
  const [emojiLoading, setEmojiLoading] = useState(false)
@@ -8549,6 +8552,18 @@ function MessageBubble({
    myWxid
  ])

+  useEffect(() => {
+    let cancelled = false
+    void configService.getQuoteLayout().then((layout) => {
+      if (!cancelled) setQuoteLayout(layout)
+    }).catch(() => {
+      if (!cancelled) setQuoteLayout('quote-top')
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
  const locationMessageMeta = useMemo(() => {
    if (message.localType !== 48) return null
    const raw = message.rawContent || ''
@@ -8584,6 +8599,31 @@ function MessageBubble({
  // 是否有引用消息
  const hasQuote = quotedContent.length > 0
  const displayQuotedSenderName = quotedSenderName || quotedSenderFallbackName
+  const renderBubbleWithQuote = useCallback((quotedNode: React.ReactNode, messageNode: React.ReactNode) => {
+    const quoteFirst = quoteLayout !== 'quote-bottom'
+    return (
+      <div className={`bubble-content ${quoteFirst ? 'quote-layout-top' : 'quote-layout-bottom'}`}>
+        {quoteFirst ? (
+          <>
+            {quotedNode}
+            {messageNode}
+          </>
+        ) : (
+          <>
+            {messageNode}
+            {quotedNode}
+          </>
+        )}
+      </div>
+    )
+  }, [quoteLayout])
+
+  const renderQuotedMessageBlock = useCallback((contentNode: React.ReactNode) => (
+    <div className="quoted-message">
+      {displayQuotedSenderName && <span className="quoted-sender">{displayQuotedSenderName}</span>}
+      <span className="quoted-text">{contentNode}</span>
+    </div>
+  ), [displayQuotedSenderName])

  const handlePlayVideo = useCallback(async () => {
    if (!videoInfo?.videoUrl) return
@@ -9023,13 +9063,10 @@ function MessageBubble({
        }

        return (
-          <div className="bubble-content">
-            <div className="quoted-message">
-              {displayQuotedSenderName && <span className="quoted-sender">{displayQuotedSenderName}</span>}
-              <span className="quoted-text">{renderReferContent()}</span>
-            </div>
+          renderBubbleWithQuote(
+            renderQuotedMessageBlock(renderReferContent()),
            <div className="message-text">{renderTextWithEmoji(cleanMessageContent(replyText))}</div>
-          </div>
+          )
        )
      }

@@ -9122,13 +9159,10 @@ function MessageBubble({
        const replyText = message.linkTitle || q('title') || cleanedParsedContent || ''
        const referContent = message.quotedContent || q('refermsg > content') || ''
        return (
-          <div className="bubble-content">
-            <div className="quoted-message">
-              {displayQuotedSenderName && <span className="quoted-sender">{displayQuotedSenderName}</span>}
-              <span className="quoted-text">{renderTextWithEmoji(cleanMessageContent(referContent))}</span>
-            </div>
+          renderBubbleWithQuote(
+            renderQuotedMessageBlock(renderTextWithEmoji(cleanMessageContent(referContent))),
            <div className="message-text">{renderTextWithEmoji(cleanMessageContent(replyText))}</div>
-          </div>
+          )
        )
      }

@@ -9338,13 +9372,10 @@ function MessageBubble({
        }

        return (
-          <div className="bubble-content">
-            <div className="quoted-message">
-              {displayQuotedSenderName && <span className="quoted-sender">{displayQuotedSenderName}</span>}
-              <span className="quoted-text">{renderReferContent2()}</span>
-            </div>
+          renderBubbleWithQuote(
+            renderQuotedMessageBlock(renderReferContent2()),
            <div className="message-text">{renderTextWithEmoji(cleanMessageContent(replyText))}</div>
-          </div>
+          )
        )
      }

@@ -9623,14 +9654,9 @@ function MessageBubble({

    // 带引用的消息
    if (hasQuote) {
-      return (
-        <div className="bubble-content">
-          <div className="quoted-message">
-            {displayQuotedSenderName && <span className="quoted-sender">{displayQuotedSenderName}</span>}
-            <span className="quoted-text">{renderTextWithEmoji(cleanMessageContent(quotedContent))}</span>
-          </div>
-          <div className="message-text">{renderTextWithEmoji(cleanedParsedContent)}</div>
-        </div>
+      return renderBubbleWithQuote(
+        renderQuotedMessageBlock(renderTextWithEmoji(cleanMessageContent(quotedContent))),
+        <div className="message-text">{renderTextWithEmoji(cleanedParsedContent)}</div>
      )
    }

--- a/src/pages/SettingsPage.scss
+++ b/src/pages/SettingsPage.scss
@@ -1145,6 +1145,134 @@
  }
 }

+.quote-layout-picker {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 12px;
+  margin-top: 10px;
+}
+
+.quote-layout-card {
+  position: relative;
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  padding: 14px;
+  background: var(--bg-primary);
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
+
+  &:hover {
+    border-color: color-mix(in srgb, var(--primary) 35%, var(--border-color));
+    transform: translateY(-1px);
+  }
+
+  &.active {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
+    background: color-mix(in srgb, var(--bg-primary) 92%, var(--primary) 8%);
+  }
+}
+
+.quote-layout-card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.quote-layout-card-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.quote-layout-card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.quote-layout-card-desc {
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.quote-layout-card-check {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 1px solid var(--border-color);
+  color: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+
+  &.active {
+    border-color: var(--primary);
+    background: var(--primary);
+    color: #fff;
+  }
+}
+
+.quote-layout-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-primary));
+  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
+  min-height: 112px;
+
+  &.quote-bottom {
+    .quote-layout-preview-message {
+      order: 1;
+    }
+
+    .quote-layout-preview-quote {
+      order: 2;
+    }
+  }
+}
+
+.quote-layout-preview-quote {
+  padding: 8px 10px;
+  border-left: 2px solid var(--primary);
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.04);
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.quote-layout-preview-sender {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--primary);
+}
+
+.quote-layout-preview-text {
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+
+.quote-layout-preview-message {
+  align-self: flex-start;
+  max-width: 88%;
+  padding: 9px 12px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--primary) 14%, var(--bg-primary));
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
 .theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -118,6 +118,7 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
  const [notificationFilterMode, setNotificationFilterMode] = useState<'all' | 'whitelist' | 'blacklist'>('all')
  const [notificationFilterList, setNotificationFilterList] = useState<string[]>([])
  const [windowCloseBehavior, setWindowCloseBehavior] = useState<configService.WindowCloseBehavior>('ask')
+  const [quoteLayout, setQuoteLayout] = useState<configService.QuoteLayout>('quote-top')
  const [filterSearchKeyword, setFilterSearchKeyword] = useState('')
  const [filterModeDropdownOpen, setFilterModeDropdownOpen] = useState(false)
  const [positionDropdownOpen, setPositionDropdownOpen] = useState(false)
@@ -314,6 +315,7 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
      const savedNotificationFilterList = await configService.getNotificationFilterList()
      const savedMessagePushEnabled = await configService.getMessagePushEnabled()
      const savedWindowCloseBehavior = await configService.getWindowCloseBehavior()
+      const savedQuoteLayout = await configService.getQuoteLayout()

      const savedAuthEnabled = await window.electronAPI.auth.verifyEnabled()
      const savedAuthUseHello = await configService.getAuthUseHello()
@@ -351,6 +353,7 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
      setNotificationFilterList(savedNotificationFilterList)
      setMessagePushEnabled(savedMessagePushEnabled)
      setWindowCloseBehavior(savedWindowCloseBehavior)
+      setQuoteLayout(savedQuoteLayout)

      const savedExcludeWords = await configService.getWordCloudExcludeWords()
      setWordCloudExcludeWords(savedExcludeWords)
@@ -1058,6 +1061,77 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
        ))}
      </div>

+      <div className="form-group">
+        <label>引用样式</label>
+        <span className="form-hint">选择聊天中引用消息与正文的上下顺序，右侧预览会同步展示布局差异。</span>
+        <div className="quote-layout-picker" role="radiogroup" aria-label="引用样式选择">
+          {[
+            {
+              value: 'quote-top' as const,
+              label: '引用在上',
+              description: '更接近当前 WeFlow 风格',
+              successMessage: '已切换为引用在上样式'
+            },
+            {
+              value: 'quote-bottom' as const,
+              label: '正文在上',
+              description: '更接近微信 / 密语风格',
+              successMessage: '已切换为正文在上样式'
+            }
+          ].map(option => {
+            const selected = quoteLayout === option.value
+            const quotePreview = (
+              <div className="quote-layout-preview-quote">
+                <span className="quote-layout-preview-sender">张三</span>
+                <span className="quote-layout-preview-text">这是一条被引用的消息</span>
+              </div>
+            )
+            const messagePreview = (
+              <div className="quote-layout-preview-message">这是当前发送的回复内容</div>
+            )
+
+            return (
+              <button
+                key={option.value}
+                type="button"
+                className={`quote-layout-card ${selected ? 'active' : ''}`}
+                onClick={async () => {
+                  if (selected) return
+                  setQuoteLayout(option.value)
+                  await configService.setQuoteLayout(option.value)
+                  showMessage(option.successMessage, true)
+                }}
+                role="radio"
+                aria-checked={selected}
+              >
+                <div className="quote-layout-card-header">
+                  <div className="quote-layout-card-title-group">
+                    <span className="quote-layout-card-title">{option.label}</span>
+                    <span className="quote-layout-card-desc">{option.description}</span>
+                  </div>
+                  <span className={`quote-layout-card-check ${selected ? 'active' : ''}`}>
+                    <Check size={14} />
+                  </span>
+                </div>
+                <div className={`quote-layout-preview ${option.value}`}>
+                  {option.value === 'quote-bottom' ? (
+                    <>
+                      {messagePreview}
+                      {quotePreview}
+                    </>
+                  ) : (
+                    <>
+                      {quotePreview}
+                      {messagePreview}
+                    </>
+                  )}
+                </div>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
      <div className="divider" />

      <div className="form-group">
--- a/src/services/config.ts
+++ b/src/services/config.ts
@@ -66,6 +66,7 @@ export const CONFIG_KEYS = {
  NOTIFICATION_FILTER_LIST: 'notificationFilterList',
  MESSAGE_PUSH_ENABLED: 'messagePushEnabled',
  WINDOW_CLOSE_BEHAVIOR: 'windowCloseBehavior',
+  QUOTE_LAYOUT: 'quoteLayout',

  // 词云
  WORD_CLOUD_EXCLUDE_WORDS: 'wordCloudExcludeWords',
@@ -90,6 +91,7 @@ export interface ExportDefaultMediaConfig {
 }

 export type WindowCloseBehavior = 'ask' | 'tray' | 'quit'
+export type QuoteLayout = 'quote-top' | 'quote-bottom'

 const DEFAULT_EXPORT_MEDIA_CONFIG: ExportDefaultMediaConfig = {
  images: true,
@@ -1409,6 +1411,16 @@ export async function setWindowCloseBehavior(behavior: WindowCloseBehavior): Pro
  await config.set(CONFIG_KEYS.WINDOW_CLOSE_BEHAVIOR, behavior)
 }

+export async function getQuoteLayout(): Promise<QuoteLayout> {
+  const value = await config.get(CONFIG_KEYS.QUOTE_LAYOUT)
+  if (value === 'quote-bottom') return value
+  return 'quote-top'
+}
+
+export async function setQuoteLayout(layout: QuoteLayout): Promise<void> {
+  await config.set(CONFIG_KEYS.QUOTE_LAYOUT, layout)
+}
+
 // 获取词云排除词列表
 export async function getWordCloudExcludeWords(): Promise<string[]> {
  const value = await config.get(CONFIG_KEYS.WORD_CLOUD_EXCLUDE_WORDS)