feat: mention

ILoveScratch2 · ILoveScratch2 · commit 0733d3b2d154 · 2026-03-21T22:04:48.000+08:00
diff --git a/lib/models/user_profile.dart b/lib/models/user_profile.dart
@@ -181,4 +181,14 @@ def hello():
       avatar: null,
     );
   }
+  static UserProfile? findByUsername(String username) {
+    const knownUids = ['1', '2', '3', '4', '5'];
+    for (final uid in knownUids) {
+      final profile = getDemoProfile(uid);
+      if (profile.username.toLowerCase() == username.toLowerCase()) {
+        return profile;
+      }
+    }
+    return null;
+  }
 }
diff --git a/lib/screens/chat_detail_screen.dart b/lib/screens/chat_detail_screen.dart
@@ -10,6 +10,7 @@ import '../widgets/message_bubble.dart';
 import '../widgets/chat_input_bar.dart';
 import '../routes/app_routes.dart';
 import '../l10n/app_localizations.dart';
+import '../widgets/mention_text_field.dart';
 import 'chat_room_settings_screen.dart';
 
 
@@ -30,6 +31,7 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
   final ScrollController _scrollController = ScrollController();
   final List<ChatMessage> _messages = [];
   ChatRoom? _currentRoom;
+  List<MentionUser> _mentionUsers = [];
   bool _isInitialized = false;
 
   @override
@@ -57,6 +59,9 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
     final allRooms = ChatDemoData.getDemoChatRooms();
     final allContacts = ChatDemoData.getDemoContacts();
     final l10n = AppLocalizations.of(context)!;
+    _mentionUsers = allContacts
+        .map((c) => MentionUser(id: c.id, username: c.name, avatarUrl: c.avatar))
+        .toList();
     _currentRoom = allRooms.firstWhere(
       (room) => room.id == widget.roomId,
       orElse: () {
@@ -397,6 +402,7 @@ void main() {
               controller: _messageController,
               onSend: _sendMessage,
               onFilePicked: _sendMediaMessage,
+              mentionUsers: _mentionUsers,
             ),
           ],
         ),
diff --git a/lib/screens/forum_post_compose_screen.dart b/lib/screens/forum_post_compose_screen.dart
@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
 import '../l10n/app_localizations.dart';
+import '../models/chat_model.dart';
 import '../models/user_profile.dart';
 import '../widgets/account/profile_picture.dart';
+import '../widgets/mention_text_field.dart';
 
 class ForumPostComposeSheet extends StatefulWidget {
   final String forumId;
@@ -41,6 +43,7 @@ class _ForumPostComposeSheetState extends State<ForumPostComposeSheet> {
   final _titleController = TextEditingController();
   final _contentController = TextEditingController();
   final _formKey = GlobalKey<FormState>();
+  late final List<MentionUser> _mentionUsers;
 
   final _currentUser = UserProfileDemoData.getDemoProfile('1');
 
@@ -50,6 +53,9 @@ class _ForumPostComposeSheetState extends State<ForumPostComposeSheet> {
     if (widget.initialContent != null) {
       _contentController.text = widget.initialContent!;
     }
+    _mentionUsers = ChatDemoData.getDemoContacts()
+        .map((c) => MentionUser(id: c.id, username: c.name, avatarUrl: c.avatar))
+        .toList();
   }
 
   @override
@@ -155,8 +161,9 @@ class _ForumPostComposeSheetState extends State<ForumPostComposeSheet> {
                             if (!widget.isReply)
                               const SizedBox(height: 4),
                             // Content field
-                            TextFormField(
+                            MentionTextField(
                               controller: _contentController,
+                              mentionUsers: _mentionUsers,
                               style: Theme.of(context).textTheme.bodyLarge,
                               maxLines: null,
                               minLines: 6,
@@ -169,12 +176,6 @@ class _ForumPostComposeSheetState extends State<ForumPostComposeSheet> {
                                   vertical: 8,
                                 ),
                               ),
-                              validator: (value) {
-                                if (value == null || value.isEmpty) {
-                                  return l10n.forumPostContentRequired;
-                                }
-                                return null;
-                              },
                             ),
                           ],
                         ),
@@ -306,16 +307,21 @@ class _ForumPostComposeSheetState extends State<ForumPostComposeSheet> {
   }
 
   void _submit() {
-    if (_formKey.currentState!.validate()) {
-      final l10n = AppLocalizations.of(context)!;
+    final l10n = AppLocalizations.of(context)!;
+    if (!_formKey.currentState!.validate()) return;
+    if (_contentController.text.trim().isEmpty) {
       ScaffoldMessenger.of(context).showSnackBar(
-        SnackBar(
-          content: Text(
-            widget.isReply ? l10n.forumCommentSuccess : l10n.forumPostSuccess,
-          ),
-        ),
+        SnackBar(content: Text(l10n.forumPostContentRequired)),
       );
-      Navigator.pop(context, true);
+      return;
     }
+    ScaffoldMessenger.of(context).showSnackBar(
+      SnackBar(
+        content: Text(
+          widget.isReply ? l10n.forumCommentSuccess : l10n.forumPostSuccess,
+        ),
+      ),
+    );
+    Navigator.pop(context, true);
   }
 }
diff --git a/lib/widgets/chat_input_bar.dart b/lib/widgets/chat_input_bar.dart
@@ -7,17 +7,20 @@ import 'package:file_picker/file_picker.dart';
 import 'package:mime/mime.dart';
 import '../l10n/app_localizations.dart';
 import '../models/message_model.dart';
+import 'mention_text_field.dart';
 
 class ChatInputBar extends StatefulWidget {
   final TextEditingController controller;
   final VoidCallback onSend;
   final Function(PlatformFile file, MessageType type)? onFilePicked;
+  final List<MentionUser> mentionUsers;
 
   const ChatInputBar({
     super.key,
     required this.controller,
     required this.onSend,
     this.onFilePicked,
+    this.mentionUsers = const [],
   });
 
   @override
@@ -120,8 +123,9 @@ class _ChatInputBarState extends State<ChatInputBar> {
                   ],
                 ),
                 Expanded(
-                  child: TextField(
+                  child: MentionTextField(
                     controller: widget.controller,
+                    mentionUsers: widget.mentionUsers,
                     maxLines: 5,
                     minLines: 1,
                     keyboardType: TextInputType.multiline,
diff --git a/lib/widgets/markdown_renderer.dart b/lib/widgets/markdown_renderer.dart
@@ -9,6 +9,8 @@ import 'package:flutter_math_fork/flutter_math.dart';
 import 'package:markdown/markdown.dart' as md;
 import 'package:photo_view/photo_view.dart';
 import '../l10n/app_localizations.dart';
+import '../models/user_profile.dart';
+import 'account/profile_picture.dart';
 
 /// Markdown Renderer
 class MarkdownRenderer extends StatelessWidget {
@@ -118,6 +120,8 @@ class MarkdownRenderer extends StatelessWidget {
         'code': CustomCodeBuilder(),
         // LaTeX 支持
         'latex': LatexBuilder(),
+        // @mention 支持
+        'mention': MentionChipBuilder(),
       },
       // 自定义图片
       imageBuilder: (uri, title, alt) {
@@ -140,6 +144,7 @@ class MarkdownRenderer extends StatelessWidget {
       extensionSet: md.ExtensionSet(
         md.ExtensionSet.gitHubFlavored.blockSyntaxes,
         [
+          MentionInlineSyntax(),
           md.EmojiSyntax(),
           ...md.ExtensionSet.gitHubFlavored.inlineSyntaxes,
           LatexSyntax(),
@@ -274,6 +279,77 @@ class _CodeBlockWidget extends StatelessWidget {
   }
 }
 
+// @mention
+class MentionInlineSyntax extends md.InlineSyntax {
+  MentionInlineSyntax() : super(r'@([A-Za-z0-9_]+)(?=\s|$)');
+
+  @override
+  bool onMatch(md.InlineParser parser, Match match) {
+    final username = match[1]!;
+    if (UserProfileDemoData.findByUsername(username) == null) {
+      parser.addNode(md.Text('@$username'));
+      return true;
+    }
+    final element = md.Element.text('mention', '@$username');
+    element.attributes['username'] = username;
+    parser.addNode(element);
+    return true;
+  }
+}
+
+class MentionChipBuilder extends MarkdownElementBuilder {
+  @override
+  Widget? visitElementAfter(md.Element element, TextStyle? preferredStyle) {
+    final username = element.attributes['username'] ??
+        element.textContent.replaceFirst('@', '');
+    final profile = UserProfileDemoData.findByUsername(username);
+    return _MentionChipWidget(username: username, profile: profile);
+  }
+}
+
+class _MentionChipWidget extends StatelessWidget {
+  final String username;
+  final UserProfile? profile;
+
+  const _MentionChipWidget({required this.username, this.profile});
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final avatarUrl = profile?.avatar;
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 1),
+      padding: const EdgeInsets.fromLTRB(4, 2, 6, 2),
+      decoration: BoxDecoration(
+        color: colorScheme.primaryContainer,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          _buildAvatar(avatarUrl, colorScheme),
+          const SizedBox(width: 4),
+          Text(
+            '@$username',
+            style: TextStyle(
+              fontSize: 13,
+              fontWeight: FontWeight.w500,
+              color: colorScheme.onPrimaryContainer,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildAvatar(String? avatarUrl, ColorScheme colorScheme) {
+    return ProfilePictureWidget(
+      avatarUrl: avatarUrl,
+      radius: 8,
+    );
+  }
+}
+
 /// LaTeX 语法解析器
 class LatexSyntax extends md.InlineSyntax {
   LatexSyntax() : super(r'\$\$(.+?)\$\$|\$(.+?)\$');
diff --git a/lib/widgets/mention_text_field.dart b/lib/widgets/mention_text_field.dart
