Merge pull request #521 from BeiChen-CN/main

feat: 支持自定义引用消息样式

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: []
     }
 

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;
+  }
 }
 
 // 时间分隔

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">
+          renderBubbleWithQuote(
-            <div className="quoted-message">
+            renderQuotedMessageBlock(renderReferContent()),
-              {displayQuotedSenderName && <span className="quoted-sender">{displayQuotedSenderName}</span>}
-              <span className="quoted-text">{renderReferContent()}</span>
-            </div>
             <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">
+          renderBubbleWithQuote(
-            <div className="quoted-message">
+            renderQuotedMessageBlock(renderTextWithEmoji(cleanMessageContent(referContent))),
-              {displayQuotedSenderName && <span className="quoted-sender">{displayQuotedSenderName}</span>}
-              <span className="quoted-text">{renderTextWithEmoji(cleanMessageContent(referContent))}</span>
-            </div>
             <div className="message-text">{renderTextWithEmoji(cleanMessageContent(replyText))}</div>
-          </div>
+          )
         )
       }
 
@@ -9338,13 +9372,10 @@ function MessageBubble({
         }
 
         return (
-          <div className="bubble-content">
+          renderBubbleWithQuote(
-            <div className="quoted-message">
+            renderQuotedMessageBlock(renderReferContent2()),
-              {displayQuotedSenderName && <span className="quoted-sender">{displayQuotedSenderName}</span>}
-              <span className="quoted-text">{renderReferContent2()}</span>
-            </div>
             <div className="message-text">{renderTextWithEmoji(cleanMessageContent(replyText))}</div>
-          </div>
+          )
         )
       }
 
@@ -9623,14 +9654,9 @@ function MessageBubble({
 
     // 带引用的消息
     if (hasQuote) {
-      return (
+      return renderBubbleWithQuote(
-        <div className="bubble-content">
+        renderQuotedMessageBlock(renderTextWithEmoji(cleanMessageContent(quotedContent))),
-          <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>
       )
     }
 

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

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">

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)