storlead-sasa-platform/ui/smarttrade-platform/src/components/email/email.vue

<template>
    <div v-if="showEmailModal" class="modal-overlay" @click.self="showEmailModal = false">
      <div class="modal settings-modal extra-wide">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-envelope"></i> 企业邮箱管理中心</div>
          <button class="modal-close" @click="showEmailModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <!-- 邮箱统计概览 -->
          <div class="email-overview">
            <div class="overview-card">
              <div class="overview-icon email"><i class="fas fa-envelope"></i></div>
              <div class="overview-info">
                <div class="overview-value">{{ emailList.length }}</div>
                <div class="overview-label">邮箱账号</div>
              </div>
            </div>
            <div class="overview-card">
              <div class="overview-icon"><i class="fas fa-paper-plane"></i></div>
              <div class="overview-info">
                <div class="overview-value">{{ emailAccounts.reduce((sum, a) => sum + a.sendToday, 0) }}</div>
                <div class="overview-label">今日发送</div>
              </div>
            </div>
            <div class="overview-card">
              <div class="overview-icon"><i class="fas fa-reply"></i></div>
              <div class="overview-info">
                <div class="overview-value">{{ Math.round(emailAccounts.reduce((sum, a) => sum + a.replyRate, 0) / emailAccounts.length) }}%</div>
                <div class="overview-label">平均回复率</div>
              </div>
            </div>
            <!-- <div class="overview-card">
              <div class="overview-icon"><i class="fas fa-shield-alt"></i></div>
              <div class="overview-info">
                <div class="overview-value">3/3</div>
                <div class="overview-label">安全认证</div>
              </div>
            </div> -->
          </div>

          <!-- 标签页导航 -->
          <div class="email-tabs">
            <button class="email-tab" :class="tabTyps === 'email' ? 'active' : ''" @click="tabTyps = 'email'"><i class="fas fa-envelope"></i> 邮箱账号</button>
            <button class="email-tab" :class="tabTyps === 'stats' ? 'active' : ''" @click="tabTyps = 'stats'"><i class="fas fa-chart-bar"></i> 发送统计</button>
          </div>
          
          <div class="email-accounts-list" v-if="tabTyps == 'email'">
            <div v-for="account in emailList" :key="account.id" class="email-account-item" :class="{selected: selectedEmailAccount?.id === account.id}" @click="getDetails(account)">
              <div class="account-icon"><i class="fas fa-envelope"></i></div>
              <div class="account-info">
                <div class="account-email">{{ account.emailAddress }}</div>
                <div class="account-name">销售邮箱</div>
                <div class="account-stats">
                  <span><i class="fas fa-paper-plane"></i> 总发送： 45</span>
                  <span><i class="fas fa-reply"></i> 回复率： 32%</span>
                  <span><i class="fas fa-sync"></i>  2026-03-24 09:00</span>
                </div>
              </div>
              <!-- <div class="account-auth">
                <span class="auth-badge" :class="account.SPF ? 'active' : ''"><i class="fas fa-check"></i> SPF</span>
                <span class="auth-badge" :class="account.DKIM ? 'active' : ''"><i class="fas fa-check"></i> DKIM</span>
                <span class="auth-badge" :class="account.DMARC ? 'active' : ''"><i class="fas fa-check"></i> DMARC</span>
              </div> -->
            </div>
          </div>

          <!-- 发送统计标签页 -->
          <div class="email-tab-content" v-if="tabTyps == 'stats'">
            <div class="stats-overview">
              <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-paper-plane"></i></div>
                <div class="stat-info">
                  <div class="stat-value">{{ emailAccounts.reduce((sum, a) => sum + a.sendToday, 0) }}</div>
                  <div class="stat-label">今日发送</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-envelope-open"></i></div>
                <div class="stat-info">
                  <div class="stat-value">{{ emailAccounts.reduce((sum, a) => sum + a.sendToday * 0.45, 0).toFixed(0) }}</div>
                  <div class="stat-label">今日打开</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-reply"></i></div>
                <div class="stat-info">
                  <div class="stat-value">{{ emailAccounts.reduce((sum, a) => sum + a.sendToday * a.replyRate / 100, 0).toFixed(0) }}</div>
                  <div class="stat-label">今日回复</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-mouse-pointer"></i></div>
                <div class="stat-info">
                  <div class="stat-value">{{ emailAccounts.reduce((sum, a) => sum + a.sendToday * 0.15, 0).toFixed(0) }}</div>
                  <div class="stat-label">今日拒收</div>
                </div>
              </div>
            </div>
            <div class="chart-section">
              <h5><i class="fas fa-chart-line"></i> 最近7天发送趋势</h5>
              <div class="simple-chart">
                <div class="chart-bar" style="height: 45%"><span>周一</span></div>
                <div class="chart-bar" style="height: 62%"><span>周二</span></div>
                <div class="chart-bar" style="height: 58%"><span>周三</span></div>
                <div class="chart-bar" style="height: 75%"><span>周四</span></div>
                <div class="chart-bar" style="height: 82%"><span>周五</span></div>
                <div class="chart-bar" style="height: 40%"><span>周六</span></div>
                <div class="chart-bar" style="height: 35%"><span>周日</span></div>
              </div>
            </div>
            <div class="top-performers">
              <h5><i class="fas fa-trophy"></i> 热门模板</h5>
              <div class="template-list">
                <div class="template-item">
                  <span class="template-name">产品介绍邮件</span>
                  <span class="template-stats">发送 1,234 · 打开率 52%</span>
                </div>
                <div class="template-item">
                  <span class="template-name">节日祝福</span>
                  <span class="template-stats">发送 856 · 打开率 68%</span>
                </div>
                <div class="template-item">
                  <span class="template-name">跟进邮件</span>
                  <span class="template-stats">发送 654 · 打开率 45%</span>
                </div>
              </div>
            </div>
          </div>

          <button class="btn btn-primary add-account-btn" @click="addEmail()">
            <i class="fas fa-plus"></i> 添加邮箱账号
          </button>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showEmailModal = false">关闭</button>
        </div>
      </div>
    </div>

    <AddEmailModal ref="addEmailRef" />

    <!-- 邮箱账号详情弹窗 -->
    <div v-if="showEmailDetailModal" class="modal-overlay" @click.self="showEmailDetailModal = false">
      <div class="modal settings-modal extra-wide">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-envelope"></i> {{ selectedEmailAccount?.emailAddress }} - 详细配置
          </div>
          <button class="modal-close" @click="showEmailDetailModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body" v-if="selectedEmailAccount">
          <!-- 服务器配置 -->
          <div class="detail-section">
            <h5><i class="fas fa-server"></i> SMTP / IMAP 服务器配置</h5>
            <div class="config-grid-2col">
              <div class="config-card">
                <div class="config-card-header">
                  <i class="fas fa-upload"></i> SMTP (发送)
                </div>
                <div class="config-card-body">
                  <div class="config-row">
                    <span class="config-label">服务器地址</span>
                    <span class="config-value">{{ portData.smtpServer }}</span>
                  </div>
                  <div class="config-row">
                    <span class="config-label">端口</span>
                    <span class="config-value">{{ portData.smtpPortSsl }}</span>
                  </div>
                  <div class="config-row">
                    <span class="config-label">加密方式</span>
                    <span class="config-value">TLS</span>
                  </div>
                  <div class="config-row">
                    <span class="config-label">认证方式</span>
                    <span class="config-value">OAuth 2.0 / SMTPAuth</span>
                  </div>
                </div>
              </div>
              <div class="config-card">
                <div class="config-card-header">
                  <i class="fas fa-download"></i> IMAP / POP3 (接收)
                </div>
                <div class="config-card-body">
                  <div class="config-row">
                    <span class="config-label">服务器地址</span>
                    <span class="config-value">{{ portData.imapServer }}</span>
                  </div>
                  <div class="config-row">
                    <span class="config-label">端口</span>
                    <span class="config-value">{{ portData.imapPortSsl }}</span>
                  </div>
                  <div class="config-row">
                    <span class="config-label">加密方式</span>
                    <span class="config-value">SSL</span>
                  </div>
                  <div class="config-row">
                    <span class="config-label">同步文件夹</span>
                    <span class="config-value">INBOX, Sent, Drafts</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 安全认证 -->
          <!-- <div class="detail-section">
            <h5><i class="fas fa-shield-alt"></i> 邮件安全认证状态</h5>
            <div class="auth-grid">
              <div class="auth-card" :class="selectedEmailAccount.SPF ? 'pass' : 'fail'">
                <div class="auth-icon"><i class="fas fa-shield-alt"></i></div>
                <div class="auth-info">
                  <div class="auth-name">SPF</div>
                  <div class="auth-desc">发件人策略框架</div>
                </div>
                <div class="auth-status">{{ selectedEmailAccount.SPF ? '已配置' : '未配置' }}</div>
              </div>
              <div class="auth-card" :class="selectedEmailAccount.DKIM ? 'pass' : 'fail'">
                <div class="auth-icon"><i class="fas fa-key"></i></div>
                <div class="auth-info">
                  <div class="auth-name">DKIM</div>
                  <div class="auth-desc">域名密钥识别邮件</div>
                </div>
                <div class="auth-status">{{ selectedEmailAccount.DKIM ? '已配置' : '未配置' }}</div>
              </div>
              <div class="auth-card" :class="selectedEmailAccount.DMARC ? 'pass' : 'fail'">
                <div class="auth-icon"><i class="fas fa-lock"></i></div>
                <div class="auth-info">
                  <div class="auth-name">DMARC</div>
                  <div class="auth-desc">基于域的消息认证</div>
                </div>
                <div class="auth-status">{{ selectedEmailAccount.DMARC ? '已配置' : '未配置' }}</div>
              </div>
            </div>
          </div> -->

          <!-- 邮件签名 -->
          <!-- <div class="detail-section">
            <h5><i class="fas fa-pen"></i> 邮件签名</h5>
            <div class="signature-preview">
              <div class="signature-label">预览效果：</div>
              <div class="signature-content">
                <pre>{{ selectedEmailAccount.signature }}</pre>
              </div>
            </div>
            <textarea class="form-textarea signature-textarea" rows="6">{{ selectedEmailAccount.signature }}</textarea>
          </div> -->
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showEmailDetailModal = false">关闭</button>
        </div>
      </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    import AddEmailModal from './addEmail.vue'
    import { getMailsPort } from '@/api/emails'

    const showEmailModal = ref(false)
    // 企业邮箱列表
    const emailAccounts = ref([
        { id: 1, email: 'sales@company.com', name: '销售邮箱', signature: 'Best regards,\nZhang Manager\nSales Director', forward: true, autoReply: false, autoReplyContent: '', forwardTo: 'manager@company.com', lastSync: '2026-03-24 09:00', sendToday: 45, replyRate: 32, monthlyLimit: 5000, monthlyUsed: 1280,SPF: true, DKIM: true, DMARC: true, smtp: { host: 'smtp.company.com', port: 587, encryption: 'TLS' }, imap: { host: 'imap.company.com', port: 993, encryption: 'SSL' } },
        { id: 2, email: 'marketing@company.com', name: '市场邮箱', signature: 'Thanks,\nMarketing Team', forward: true, autoReply: true, autoReplyContent: '感谢您的邮件，我们将在工作时间内尽快回复。', forwardTo: 'sales@company.com', lastSync: '2026-03-24 08:30', sendToday: 128, replyRate: 18, monthlyLimit: 10000, monthlyUsed: 3560,SPF: true, DKIM: true, DMARC: true, smtp: { host: 'smtp.company.com', port: 587, encryption: 'TLS' }, imap: { host: 'imap.company.com', port: 993, encryption: 'SSL' } }
    ])

    const emailList = ref([])
    const open = (list) => {
        showEmailModal.value = true
        emailList.value = list || []
    }

    const tabTyps = ref('email')

    const selectedEmailAccount = ref()

    const addEmailRef = ref()
    const addEmail = () => {
        addEmailRef.value.open()
    }

    const showEmailDetailModal = ref(false)
    const portData = ref()
    const getDetails = (data) => {
      selectedEmailAccount.value = data
      getMailsPort(data.emailAddress).then(res => {
          if(res.success && res.result) {
              portData.value = res.result
          }
      })
      showEmailDetailModal.value = true
    }

    defineExpose({
        open
    })
</script>

<style scoped>
  @import '../../assets/styles/settings.css';
</style>