MailUI4Agents/web/src/components/MailList.tsx

import { useEffect } from 'react';
import { useMailStore } from '../stores/mailStore';
import { useSessionStore } from '../stores/sessionStore';
import { useUIStore } from '../stores/uiStore';
import type { Mail } from '../types';
import { ShieldIcon, PaperclipIcon } from './icons';

export default function MailList() {
  const viewMode = useUIStore(s => s.viewMode);
  const cancelCompose = useUIStore(s => s.cancelCompose);

  const inbox = useMailStore(s => s.inbox);
  const sent = useMailStore(s => s.sent);
  const currentMail = useMailStore(s => s.currentMail);
  const selectMail = useMailStore(s => s.selectMail);
  const fetchInbox = useMailStore(s => s.fetchInbox);
  const fetchSent = useMailStore(s => s.fetchSent);
  const clearSession = useSessionStore(s => s.clearSession);

  useEffect(() => {
    if (viewMode === 'sent') fetchSent();
    else if (viewMode === 'inbox') fetchInbox('all');
  }, [viewMode]);

  const isSent = viewMode === 'sent';
  const list = isSent ? sent : inbox;

  const pick = (m: Mail) => {
    clearSession();
    cancelCompose();
    selectMail(m);
  };

  return (
    <div className="w-[320px] shrink-0 border-r border-gray-200 bg-white flex flex-col">
      <div className="px-4 py-3 border-b border-gray-200 flex items-center">
        <h2 className="text-sm font-semibold text-gray-800">{isSent ? '发件箱' : '收件箱'}</h2>
        <span className="ml-2 text-xs text-gray-400">{list.length}</span>
      </div>

      <div className="flex-1 overflow-y-auto p-2 space-y-0.5">
        {list.map(m => (
          <MailItem
            key={m.mail_id}
            mail={m}
            active={currentMail?.mail_id === m.mail_id}
            showTo={isSent}
            onClick={() => pick(m)}
          />
        ))}
        {list.length === 0 && (
          <p className="text-xs text-gray-400 text-center py-6">暂无邮件</p>
        )}
      </div>
    </div>
  );
}

function MailItem({
  mail,
  active,
  showTo,
  onClick
}: {
  mail: Mail;
  active: boolean;
  showTo: boolean;
  onClick: () => void;
}) {
  const isPermission = mail.mail_type === 'permission_request';
  const isUnread = mail.status === 'unread';
  const ccCount = mail.cc_list?.length ?? 0;
  const attachCount = mail.attachments?.length ?? 0;
  const time = new Date(mail.created_at).toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });

  const peer = showTo
    ? `${mail.to_name}${mail.to_workspace ? '@' + mail.to_workspace : ''}`
    : `${mail.from_name}${mail.from_workspace ? '@' + mail.from_workspace : ''}`;

  return (
    <button
      onClick={onClick}
      className={`w-full text-left px-3 py-2.5 rounded-lg border transition-colors ${
        active ? 'bg-blue-50 border-blue-200' : 'border-transparent hover:bg-gray-50'
      }`}
    >
      <div className="flex items-center gap-2">
        <span
          className={`text-xs truncate flex-1 font-mono ${
            isUnread ? 'font-semibold text-gray-900' : 'text-gray-600'
          }`}
        >
          {showTo ? '→ ' : ''}
          {peer}
        </span>
        <span className="text-[10px] text-gray-400 shrink-0">{time}</span>
      </div>

      <div className="flex items-center gap-1.5 mt-0.5">
        {isUnread && <span className="w-1.5 h-1.5 rounded-full bg-blue-500 shrink-0" />}
        {isPermission && (
          <span className="shrink-0 inline-flex items-center gap-0.5 px-1 py-0.5 rounded bg-orange-100 text-orange-700 text-[9px] font-medium">
            <ShieldIcon className="w-2.5 h-2.5" />
            权限
          </span>
        )}
        <span
          className={`text-xs truncate ${
            isUnread ? 'font-medium text-gray-900' : 'text-gray-500'
          }`}
        >
          {mail.subject}
        </span>
      </div>

      <div className="flex items-center gap-2 mt-0.5">
        {mail.session_alias && (
          <span className="text-[10px] text-blue-500 font-mono">.{mail.session_alias}</span>
        )}
        {ccCount > 0 && (
          <span className="text-[10px] text-gray-400">抄送 {ccCount}</span>
        )}
        {attachCount > 0 && (
          <span className="inline-flex items-center gap-0.5 text-[10px] text-gray-400">
            <PaperclipIcon className="w-2.5 h-2.5" />
            {attachCount}
          </span>
        )}
      </div>
    </button>
  );
}