tboss_oa_module/lib/shared/widgets/message_item.dart

import 'package:flutter/material.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import '../../core/theme/app_colors.dart';

/// Pencil Component/MessageItem — 消息列表项组件
///
/// 布局：左侧圆形图标(40x40)，中间三行文字，右侧未读红点。
/// 卡片圆角8，背景bgCard，padding 12，gap 12，高度88。
/// 左滑显示"置顶""已读""删除"操作。
class MessageItem extends StatelessWidget {
  final IconData icon;
  final String title;
  final String time;
  final String sender;
  final String summary;
  final bool unread;
  final VoidCallback? onTap;
  final Color? iconColor;
  final Color? iconBackground;
  final VoidCallback? onPin;
  final VoidCallback? onToggleRead;
  final VoidCallback? onDelete;
  final String swipeGroupTag;

  const MessageItem({
    super.key,
    required this.icon,
    required this.title,
    required this.time,
    required this.sender,
    required this.summary,
    this.unread = false,
    this.onTap,
    this.iconColor,
    this.iconBackground,
    this.onPin,
    this.onToggleRead,
    this.onDelete,
    this.swipeGroupTag = 'messages',
  });

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final card = GestureDetector(
      onTap: onTap,
      child: Container(
        height: 88,
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: AppColors.bgCard,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          children: [
            // 左侧圆形图标
            Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(
                color: iconBackground ?? AppColors.primaryLight,
                shape: BoxShape.circle,
              ),
              child: Icon(
                icon,
                color: iconColor ?? AppColors.primary,
                size: 22,
              ),
            ),
            const SizedBox(width: 12),
            // 中间文字区域
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 第一行：标题 + 时间
                  Row(
                    children: [
                      Expanded(
                        child: Text(
                          title,
                          style: const TextStyle(
                            fontSize: AppFontSizes.body,
                            fontWeight: FontWeight.w600,
                            color: AppColors.textPrimary,
                          ),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      const SizedBox(width: 4),
                      Text(
                        time,
                        style: const TextStyle(
                          fontSize: AppFontSizes.caption,
                          color: AppColors.textPlaceholder,
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 2),
                  // 第二行：发送人
                  Text(
                    sender,
                    style: const TextStyle(
                      fontSize: AppFontSizes.caption,
                      color: AppColors.textSecondary,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                  const SizedBox(height: 2),
                  // 第三行：摘要
                  Text(
                    summary,
                    style: const TextStyle(
                      fontSize: AppFontSizes.caption,
                      color: AppColors.textPlaceholder,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
            ),
            const SizedBox(width: 12),
            // 右侧未读红点
            if (unread)
              Container(
                width: 8,
                height: 8,
                decoration: const BoxDecoration(
                  color: AppColors.danger,
                  shape: BoxShape.circle,
                ),
              )
            else
              const SizedBox(width: 8),
          ],
        ),
      ),
    );

    // 没有操作时直接返回卡片，不包裹 SwipeCell
    if (onPin == null && onToggleRead == null && onDelete == null) {
      return card;
    }

    return TDSwipeCell(
      groupTag: swipeGroupTag,
      right: TDSwipeCellPanel(
        extentRatio: 210 / screenWidth,
        children: [
          if (onPin != null)
            TDSwipeCellAction(
              label: '',
              backgroundColor: Colors.transparent,
              builder: (_) =>
                  _swipeCircle(Icons.push_pin, '置顶', AppColors.primary),
              onPressed: (_) => onPin?.call(),
            ),
          if (onToggleRead != null)
            TDSwipeCellAction(
              label: '',
              backgroundColor: Colors.transparent,
              builder: (_) => _swipeCircle(
                unread ? Icons.done_all : Icons.markunread,
                unread ? '已读' : '未读',
                AppColors.textSecondary,
              ),
              onPressed: (_) => onToggleRead?.call(),
            ),
          if (onDelete != null)
            TDSwipeCellAction(
              label: '',
              backgroundColor: Colors.transparent,
              builder: (_) =>
                  _swipeCircle(Icons.delete_outline, '删除', AppColors.danger),
              onPressed: (_) => onDelete?.call(),
            ),
        ],
      ),
      cell: card,
    );
  }

  Widget _swipeCircle(IconData icon, String label, Color color) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 6),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 40,
            height: 40,
            decoration: BoxDecoration(color: color, shape: BoxShape.circle),
            child: Icon(icon, color: Colors.white, size: 20),
          ),
          const SizedBox(height: 4),
          Text(
            label,
            style: TextStyle(color: color, fontSize: 11),
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    );
  }
}