storlead-sasa-platform/ui/smarttrade-platform/src/components/layout/TopBar.vue

<template>
  <header class="top-bar">
    <div class="breadcrumb">
      <span class="breadcrumb-item">领存智贸</span>
      <i class="fas fa-chevron-right breadcrumb-separator"></i>
      <span class="breadcrumb-item active">{{ pageTitle }}</span>
    </div>

    <div class="top-actions">
      <!-- Quick Actions -->
      <div class="action-btn" @click="showQuickActions = !showQuickActions" style="position: relative;">
        <i class="fas fa-plus"></i>
        
        <!-- Quick Actions Menu -->
        <transition name="fade">
          <div v-if="showQuickActions" class="task-menu show" style="top: 100%; right: 0; position: absolute; margin-top: 8px;">
            <div class="task-menu-item" @click.stop="openModal('marketing')">
              <div class="task-menu-icon marketing"><i class="fas fa-paper-plane"></i></div>
              <div class="task-menu-text">
                <h4>创建营销活动</h4>
                <p>多渠道自动触达客户</p>
              </div>
            </div>
          </div>
        </transition>
      </div>

      <!-- Notifications -->
      <div class="action-btn notification-btn" @click="toggleNotifications" :class="{ active: showNotifications }">
        <i class="fas fa-bell"></i>
        <span v-if="unreadCount > 0" class="notification-badge">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
      </div>

      <!-- Help -->
      <div class="action-btn" @click="toggleHelp" :class="{ active: showHelp }">
        <i class="fas fa-question-circle"></i>
      </div>
    </div>

    <!-- Notification Panel -->
    <transition name="slide-fade">
      <div v-if="showNotifications" class="notification-panel">
        <!-- Panel Header -->
        <div class="panel-header">
          <div class="panel-title">
            <i class="fas fa-bell"></i>
            消息中心
            <span class="unread-count">{{ unreadCount }}条未读</span>
          </div>
          <div class="panel-actions">
            <button class="action-text" @click="markAllAsRead">全部已读</button>
            <button class="action-text" @click="showSettings = true">
              <i class="fas fa-cog"></i>
            </button>
          </div>
        </div>

        <!-- Filter Tabs -->
        <div class="panel-tabs">
          <div 
            v-for="tab in notificationTabs" 
            :key="tab.key"
            class="panel-tab"
            :class="{ active: activeTab === tab.key }"
            @click="activeTab = tab.key"
          >
            <i :class="tab.icon"></i>
            {{ tab.label }}
            <span v-if="tab.count > 0" class="tab-count">{{ tab.count }}</span>
          </div>
        </div>

        <!-- Notification List -->
        <div class="notification-list" ref="notificationList">
          <template v-if="filteredNotifications.length > 0">
            <div 
              v-for="notification in filteredNotifications" 
              :key="notification.id"
              class="notification-item"
              :class="{ unread: !notification.read, [notification.type]: true }"
              @click="handleNotificationClick(notification)"
            >
              <div class="notification-icon" :style="{ background: getIconBg(notification.type), color: getIconColor(notification.type) }">
                <i :class="notification.icon"></i>
              </div>
              <div class="notification-content">
                <div class="notification-title">{{ notification.title }}</div>
                <div class="notification-desc">{{ notification.description }}</div>
                <div class="notification-meta">
                  <span class="notification-time">{{ notification.time }}</span>
                  <span v-if="notification.source" class="notification-source">
                    <i :class="notification.sourceIcon"></i>
                    {{ notification.source }}
                  </span>
                </div>
              </div>
              <div class="notification-actions">
                <button v-if="!notification.read" class="mark-read-btn" @click.stop="markAsRead(notification.id)">
                  <i class="fas fa-check"></i>
                </button>
                <button class="more-btn" @click.stop="showNotificationMenu($event, notification)">
                  <i class="fas fa-ellipsis-v"></i>
                </button>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="empty-state">
              <i class="fas fa-inbox"></i>
              <p>暂无消息</p>
            </div>
          </template>
        </div>

        <!-- Panel Footer -->
        <div class="panel-footer">
          <button class="btn btn-secondary btn-sm" @click="viewAllNotifications">
            <i class="fas fa-list"></i> 查看全部消息
          </button>
          <button class="btn btn-primary btn-sm" @click="showNotifications = false">
            关闭
          </button>
        </div>
      </div>
    </transition>

    <!-- Backdrop -->
    <div v-if="showNotifications" class="notification-backdrop" @click="showNotifications = false"></div>

    <!-- Help Panel -->
    <transition name="slide-fade">
      <div v-if="showHelp" class="help-panel">
        <!-- Panel Header -->
        <div class="panel-header">
          <div class="panel-title">
            <i class="fas fa-question-circle"></i>
            帮助中心
          </div>
          <button class="modal-close" @click="showHelp = false">
            <i class="fas fa-times"></i>
          </button>
        </div>

        <!-- Search -->
        <div class="help-search">
          <i class="fas fa-search"></i>
          <input type="text" v-model="helpSearchQuery" placeholder="搜索帮助文档...">
        </div>

        <!-- Quick Links -->
        <div class="help-section">
          <div class="section-title">🚀 快速入门</div>
          <div class="quick-links">
            <div class="quick-link-card" @click="openHelpArticle('quickstart')">
              <div class="quick-link-icon"><i class="fas fa-rocket"></i></div>
              <div class="quick-link-content">
                <div class="quick-link-title">新手指南</div>
                <div class="quick-link-desc">5分钟快速上手</div>
              </div>
            </div>
            <div class="quick-link-card" @click="openHelpArticle('ai-brain')">
              <div class="quick-link-icon"><i class="fas fa-brain"></i></div>
              <div class="quick-link-content">
                <div class="quick-link-title">企业大脑</div>
                <div class="quick-link-desc">AI对话式操作</div>
              </div>
            </div>
            <div class="quick-link-card" @click="openHelpArticle('prospect')">
              <div class="quick-link-icon"><i class="fas fa-crosshairs"></i></div>
              <div class="quick-link-content">
                <div class="quick-link-title">自动寻客</div>
                <div class="quick-link-desc">智能挖掘潜客</div>
              </div>
            </div>
            <div class="quick-link-card" @click="openHelpArticle('marketing')">
              <div class="quick-link-icon"><i class="fas fa-paper-plane"></i></div>
              <div class="quick-link-content">
                <div class="quick-link-title">自动营销</div>
                <div class="quick-link-desc">多渠道触达</div>
              </div>
            </div>
          </div>
        </div>

        <!-- FAQ -->
        <div class="help-section">
          <div class="section-title">❓ 常见问题</div>
          <div class="faq-list">
            <div 
              v-for="(faq, index) in filteredFaqs" 
              :key="index" 
              class="faq-item"
              :class="{ expanded: expandedFaq === index }"
              @click="toggleFaq(index)"
            >
              <div class="faq-question">
                <i class="fas fa-chevron-right"></i>
                {{ faq.question }}
              </div>
              <div class="faq-answer" v-html="faq.answer"></div>
            </div>
          </div>
        </div>

        <!-- Version Info -->
        <div class="help-footer">
          <div class="version-info">
            <span class="version-badge">v2.3.0</span>
            <span>领存智贸 AI CRM</span>
          </div>
          <div class="footer-links">
            <a href="#" @click.prevent="showChangelog">更新日志</a>
          </div>
        </div>
      </div>
    </transition>

    <!-- Help Backdrop -->
    <div v-if="showHelp" class="help-backdrop" @click="showHelp = false"></div>

    <!-- Notification Detail Modal -->
    <transition name="fade">
      <div v-if="selectedNotification" class="modal-overlay" @click.self="selectedNotification = null">
        <div class="modal notification-detail-modal">
          <div class="modal-header">
            <div class="modal-title">
              <div class="title-icon" :style="{ background: getIconBg(selectedNotification.type), color: getIconColor(selectedNotification.type) }">
                <i :class="selectedNotification.icon"></i>
              </div>
              <span>{{ selectedNotification.title }}</span>
            </div>
            <button class="modal-close" @click="selectedNotification = null">
              <i class="fas fa-times"></i>
            </button>
          </div>
          <div class="modal-body">
            <div class="detail-time">
              <i class="fas fa-clock"></i>
              {{ selectedNotification.time }}
            </div>
            <div class="detail-content" v-html="selectedNotification.detail"></div>
            
            <!-- Quick Actions -->
            <div v-if="selectedNotification.actions" class="detail-actions">
              <button 
                v-for="action in selectedNotification.actions" 
                :key="action.label"
                class="btn"
                :class="action.primary ? 'btn-primary' : 'btn-secondary'"
                @click="handleAction(action)"
              >
                <i :class="action.icon"></i>
                {{ action.label }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- AI智能寻客弹窗 -->
    <transition name="fade">
      <div v-if="showProspectModal" class="modal-overlay" @click.self="showProspectModal = false">
        <div class="modal business-modal">
          <div class="modal-header">
            <div class="modal-title">
              <div class="title-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary);">
                <i class="fas fa-search"></i>
              </div>
              <span>创建AI智能寻客任务</span>
            </div>
            <button class="modal-close" @click="showProspectModal = false">
              <i class="fas fa-times"></i>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label><i class="fas fa-tag"></i> 任务名称</label>
              <div class="input-with-icon">
                <i class="fas fa-pen"></i>
                <input type="text" v-model="prospectForm.name" placeholder="例如：中东SSD进口商寻客" class="form-input">
              </div>
              <div class="form-help">
                <i class="fas fa-info-circle"></i>
                <span>给任务起个清晰的名称，方便后续管理</span>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label><i class="fas fa-map-marker-alt"></i> 目标地区</label>
                <select v-model="prospectForm.region" class="form-select">
                  <option value="middle_east">中东地区</option>
                  <option value="europe">欧洲地区</option>
                  <option value="north_america">北美地区</option>
                  <option value="southeast_asia">东南亚地区</option>
                  <option value="south_america">南美地区</option>
                </select>
              </div>
              <div class="form-group">
                <label><i class="fas fa-box"></i> 产品类型</label>
                <select v-model="prospectForm.product" class="form-select">
                  <option value="ssd">固态硬盘 SSD</option>
                  <option value="hdd">机械硬盘 HDD</option>
                  <option value="memory">内存条</option>
                  <option value="flash">闪存卡</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label><i class="fas fa-dollar-sign"></i> 最小年采购额</label>
              <select v-model="prospectForm.minPurchase" class="form-select">
                <option value="50000">$50,000+</option>
                <option value="100000">$100,000+</option>
                <option value="500000">$500,000+</option>
                <option value="1000000">$1,000,000+</option>
              </select>
            </div>
            <div class="form-group">
              <label><i class="fas fa-bullseye"></i> 寻客渠道 <span style="font-weight:400;color:var(--text-muted);">(多选)</span></label>
              <div class="checkbox-group">
                <label class="checkbox-item">
                  <input type="checkbox" v-model="prospectForm.channels" value="linkedin">
                  <span><i class="fab fa-linkedin"></i> LinkedIn</span>
                </label>
                <label class="checkbox-item">
                  <input type="checkbox" v-model="prospectForm.channels" value="email">
                  <span><i class="fas fa-envelope"></i> 企业邮箱</span>
                </label>
                <label class="checkbox-item">
                  <input type="checkbox" v-model="prospectForm.channels" value="website">
                  <span><i class="fas fa-globe"></i> 官网访客</span>
                </label>
                <label class="checkbox-item">
                  <input type="checkbox" v-model="prospectForm.channels" value="trade">
                  <span><i class="fas fa-handshake"></i> 展会数据</span>
                </label>
              </div>
            </div>
            <div class="form-group">
              <label class="toggle-label">
                <input type="checkbox" v-model="prospectForm.autoFollowUp">
                <span class="toggle-switch"></span>
                <span>找到潜客后自动启动营销跟进</span>
              </label>
            </div>
            <div class="form-actions">
              <button class="btn btn-secondary" @click="showProspectModal = false">取消</button>
              <button class="btn btn-primary" @click="createProspectTask">
                <i class="fas fa-rocket"></i> 开始寻客
              </button>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 创建营销活动弹窗 -->
    <transition name="fade">
      <div v-if="showMarketingModal" class="modal-overlay" @click.self="showMarketingModal = false">
        <div class="modal business-modal">
          <div class="modal-header">
            <div class="modal-title">
              <div class="title-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
                <i class="fas fa-paper-plane"></i>
              </div>
              <span>创建营销活动</span>
            </div>
            <button class="modal-close" @click="showMarketingModal = false">
              <i class="fas fa-times"></i>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label><i class="fas fa-tag"></i> 活动名称</label>
              <div class="input-with-icon">
                <i class="fas fa-pen"></i>
                <input type="text" v-model="marketingForm.name" placeholder="例如：中东新客户开发" class="form-input">
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label><i class="fas fa-users"></i> 目标客户群</label>
                <select v-model="marketingForm.targetGroup" class="form-select">
                  <option value="new_prospects">本月新增潜客</option>
                  <option value="high_score">高评分潜客 (80分以上)</option>
                  <option value="uncontacted">未联系潜客</option>
                  <option value="dormant">沉睡客户唤醒</option>
                  <option value="custom">自定义分组</option>
                </select>
              </div>
              <div class="form-group">
                <label><i class="fas fa-stream"></i> 营销序列</label>
                <select v-model="marketingForm.sequence" class="form-select">
                  <option value="new_customer">新客户开发序列</option>
                  <option value="follow_up">跟进培育序列</option>
                  <option value="reactivation">客户唤醒序列</option>
                  <option value="promotion">促销推广序列</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label>营销渠道</label>
              <div class="checkbox-group">
                <label class="checkbox-item">
                  <input type="checkbox" v-model="marketingForm.channels" value="email">
                  <span><i class="fas fa-envelope"></i> 邮件营销</span>
                </label>
                <label class="checkbox-item">
                  <input type="checkbox" v-model="marketingForm.channels" value="linkedin">
                  <span><i class="fab fa-linkedin"></i> LinkedIn</span>
                </label>
                <label class="checkbox-item">
                  <input type="checkbox" v-model="marketingForm.channels" value="whatsapp">
                  <span><i class="fab fa-whatsapp"></i> WhatsApp</span>
                </label>
              </div>
            </div>
            <div class="form-group">
              <label>发送时间</label>
              <div class="radio-group">
                <label class="radio-item">
                  <input type="radio" v-model="marketingForm.schedule" value="immediate">
                  <span>立即开始</span>
                </label>
                <label class="radio-item">
                  <input type="radio" v-model="marketingForm.schedule" value="tomorrow">
                  <span>明天上午10点</span>
                </label>
                <label class="radio-item">
                  <input type="radio" v-model="marketingForm.schedule" value="custom">
                  <span>自定义时间</span>
                </label>
              </div>
            </div>
            <div class="form-group">
              <label class="toggle-label">
                <input type="checkbox" v-model="marketingForm.aiOptimize">
                <span class="toggle-switch"></span>
                <span>启用AI优化（自动选择最佳发送时间和内容）</span>
              </label>
            </div>
            <div class="form-actions">
              <button class="btn btn-secondary" @click="showMarketingModal = false">取消</button>
              <button class="btn btn-primary" @click="createMarketingCampaign">
                <i class="fas fa-paper-plane"></i> 创建活动
              </button>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 生成分析报告弹窗 -->
    <transition name="fade">
      <div v-if="showReportModal" class="modal-overlay" @click.self="showReportModal = false">
        <div class="modal business-modal">
          <div class="modal-header">
            <div class="modal-title">
              <div class="title-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning);">
                <i class="fas fa-chart-bar"></i>
              </div>
              <span>生成分析报告</span>
            </div>
            <button class="modal-close" @click="showReportModal = false">
              <i class="fas fa-times"></i>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label><i class="fas fa-tag"></i> 报告名称</label>
              <div class="input-with-icon">
                <i class="fas fa-pen"></i>
                <input type="text" v-model="reportForm.name" placeholder="例如：2026年3月业务分析报告" class="form-input">
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>报告类型</label>
                <select v-model="reportForm.type" class="form-select">
                  <option value="weekly">周报</option>
                  <option value="monthly">月报</option>
                  <option value="quarterly">季报</option>
                  <option value="custom">自定义时间段</option>
                </select>
              </div>
              <div class="form-group">
                <label>数据范围</label>
                <select v-model="reportForm.scope" class="form-select">
                  <option value="all">全部业务</option>
                  <option value="prospect">寻客数据</option>
                  <option value="marketing">营销数据</option>
                  <option value="sales">销售数据</option>
                  <option value="customer">客户数据</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label><i class="fas fa-layer-group"></i> 分析维度 <span style="font-weight:400;color:var(--text-muted);">(多选)</span></label>
              <div class="checkbox-group">
                <label class="checkbox-item">
                  <input type="checkbox" v-model="reportForm.metrics" value="revenue">
                  <span><i class="fas fa-dollar-sign"></i> 营收分析</span>
                </label>
                <label class="checkbox-item">
                  <input type="checkbox" v-model="reportForm.metrics" value="conversion">
                  <span><i class="fas fa-chart-line"></i> 转化漏斗</span>
                </label>
                <label class="checkbox-item">
                  <input type="checkbox" v-model="reportForm.metrics" value="pipeline">
                  <span><i class="fas fa-tasks"></i> 商机管道</span>
                </label>
                <label class="checkbox-item">
                  <input type="checkbox" v-model="reportForm.metrics" value="customer">
                  <span><i class="fas fa-users"></i> 客户画像</span>
                </label>
                <label class="checkbox-item">
                  <input type="checkbox" v-model="reportForm.metrics" value="marketing">
                  <span><i class="fas fa-paper-plane"></i> 营销效果</span>
                </label>
                <label class="checkbox-item">
                  <input type="checkbox" v-model="reportForm.metrics" value="trend">
                  <span><i class="fas fa-chart-area"></i> 趋势预测</span>
                </label>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label><i class="fas fa-file-alt"></i> 报告格式</label>
                <div class="radio-group">
                  <label class="radio-item">
                    <input type="radio" v-model="reportForm.format" value="pdf">
                    <span><i class="fas fa-file-pdf"></i> PDF</span>
                  </label>
                  <label class="radio-item">
                    <input type="radio" v-model="reportForm.format" value="excel">
                    <span><i class="fas fa-file-excel"></i> Excel</span>
                  </label>
                  <label class="radio-item">
                    <input type="radio" v-model="reportForm.format" value="ppt">
                    <span><i class="fas fa-file-powerpoint"></i> PPT</span>
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="toggle-label">
                <input type="checkbox" v-model="reportForm.includeAI">
                <span class="toggle-switch"></span>
                <span>包含AI洞察和建议</span>
              </label>
            </div>
            <div class="form-group" v-if="reportForm.includeAI">
              <div class="ai-features">
                <div class="ai-feature-item">
                  <i class="fas fa-lightbulb"></i>
                  <span>智能发现业务机会和风险点</span>
                </div>
                <div class="ai-feature-item">
                  <i class="fas fa-chart-line"></i>
                  <span>基于历史数据的趋势预测</span>
                </div>
                <div class="ai-feature-item">
                  <i class="fas fa-bullseye"></i>
                  <span>可执行的优化建议</span>
                </div>
              </div>
            </div>
            <div class="form-actions">
              <button class="btn btn-secondary" @click="showReportModal = false">取消</button>
              <button class="btn btn-primary" @click="generateReport">
                <i class="fas fa-magic"></i> 生成报告
              </button>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </header>

  <AddMarketing ref="addMarketingRef" />

  <div v-if="showSettings" class="modal-overlay" @click.self="showSettings = false">
    <div class="modal create-modal">
      <div class="modal-header">
          <div class="modal-title"><i class="fas fa-bell"></i> 通知设置</div>
          <button class="modal-close" @click="showSettings = false"><i class="fas fa-times"></i></button>
      </div>
      <div class="modal-body">
        <div class="settings-list">
          <div class="settings-item" style="padding-top: 0;">
            <div class="item-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary);">
              <i class="fas fa-envelope"></i>
            </div>
            <div class="item-content">
              <div class="item-title">邮件通知</div>
              <div class="item-desc">重要通知发送到邮箱</div>
            </div>
            <div class="item-action">
              <el-switch v-model="settings.emailNotify" style="--el-switch-on-color: #13ce66;" />
            </div>
          </div>

          <div class="settings-item">
            <div class="item-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
              <i class="fas fa-reply"></i>
            </div>
            <div class="item-content">
              <div class="item-title">客户回复提醒</div>
              <div class="item-desc">客户回复邮件、消息时即时提醒</div>
            </div>
            <div class="item-action">
              <el-switch v-model="settings.replyNotify" style="--el-switch-on-color: #13ce66;" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import AddMarketing from '../addMarketing.vue'
import { getNoReadCount } from '@/api/layout'

const route = useRoute()
const showQuickActions = ref(false)
const showNotifications = ref(false)
const showHelp = ref(false)
const showSettings = ref(false)

// 业务创建弹窗
const showProspectModal = ref(false)
const showMarketingModal = ref(false)
const showReportModal = ref(false)

const settings = ref({
  emailNotify: true,
  replyNotify: true
})

// 寻客表单
const prospectForm = ref({
  name: '',
  region: 'middle_east',
  product: 'ssd',
  minPurchase: '100000',
  channels: ['linkedin', 'email'],
  autoFollowUp: true
})

// 营销表单
const marketingForm = ref({
  name: '',
  targetGroup: 'new_prospects',
  sequence: 'new_customer',
  channels: ['email', 'linkedin'],
  schedule: 'immediate',
  aiOptimize: true
})

// 报告表单
const reportForm = ref({
  name: '',
  type: 'weekly',
  scope: 'all',
  metrics: ['revenue', 'conversion', 'pipeline'],
  format: 'pdf',
  includeAI: true,
  schedule: null
})

const activeTab = ref('all')
const selectedNotification = ref(null)
const notificationList = ref(null)
const helpSearchQuery = ref('')
const expandedFaq = ref(null)

const pageTitle = computed(() => {
  const titles = {
    '/': '企业大脑',
    '/prospect': '自动寻客',
    '/marketing': '自动营销',
    '/customers': '客户池',
    '/opportunities': '商机管理',
    '/orders': '订单跟进',
    '/analysis': '经营分析',
    '/market': '市场情报',
    '/strategy': 'AI策略中心',
    '/risk': '风险风控',
    '/knowledge': '知识库',
    '/settings': '设置'
  }
  return titles[route.path] || '企业大脑'
})

const addMarketingRef = ref()
const openModal = (type) => {
  showQuickActions.value = false
  addMarketingRef.value.open()
  // if (type === 'prospect') {
  //   showProspectModal.value = true
  // } else if (type === 'marketing') {
  //   showMarketingModal.value = true
  // } else if (type === 'analysis') {
  //   showReportModal.value = true
  // }
}

// 创建寻客任务
const createProspectTask = () => {
  if (!prospectForm.value.name.trim()) {
    alert('请输入任务名称')
    return
  }
  console.log('创建寻客任务:', prospectForm.value)
  showProspectModal.value = false
  // 重置表单
  prospectForm.value = {
    name: '',
    region: 'middle_east',
    product: 'ssd',
    minPurchase: '100000',
    channels: ['linkedin', 'email'],
    autoFollowUp: true
  }
  // 可以添加成功提示
  alert('寻客任务已创建，AI开始全网挖掘潜客...')
}

// 创建营销活动
const createMarketingCampaign = () => {
  if (!marketingForm.value.name.trim()) {
    alert('请输入活动名称')
    return
  }
  console.log('创建营销活动:', marketingForm.value)
  showMarketingModal.value = false
  // 重置表单
  marketingForm.value = {
    name: '',
    targetGroup: 'new_prospects',
    sequence: 'new_customer',
    channels: ['email', 'linkedin'],
    schedule: 'immediate',
    aiOptimize: true
  }
  alert('营销活动已创建，系统将自动执行营销序列...')
}

// 生成分析报告
const generateReport = () => {
  if (!reportForm.value.name.trim()) {
    alert('请输入报告名称')
    return
  }
  console.log('生成报告:', reportForm.value)
  showReportModal.value = false
  // 重置表单
  reportForm.value = {
    name: '',
    type: 'weekly',
    scope: 'all',
    metrics: ['revenue', 'conversion', 'pipeline'],
    format: 'pdf',
    includeAI: true,
    schedule: null
  }
  alert('报告生成中，完成后将发送至您的邮箱...')
}

const toggleNotifications = () => {
  showNotifications.value = !showNotifications.value
  if (showNotifications.value) showHelp.value = false
}

const toggleHelp = () => {
  showHelp.value = !showHelp.value
  if (showHelp.value) showNotifications.value = false
}

// Notification data
const notifications = ref([
  // 客户回复
  {
    id: 1,
    type: 'reply',
    icon: 'fas fa-reply',
    title: 'Riyadh Tech 回复了邮件',
    description: '对方对您的产品报价表示感兴趣，希望进一步了解交期和付款方式',
    detail: '<p>客户 Ahmed Al-Rashid 回复了您的报价邮件：</p><blockquote style="border-left:3px solid var(--primary);padding-left:12px;margin:12px 0;color:var(--text-secondary);">您好，我们对贵公司的SSD产品很感兴趣。请问MOQ是多少？交期大概多久？付款方式有哪些？</blockquote><p>建议尽快回复客户，可以提供详细的报价单和公司介绍。</p>',
    time: '5分钟前',
    source: '邮件',
    sourceIcon: 'fas fa-envelope',
    read: false,
    actions: [
      { label: '立即回复', icon: 'fas fa-reply', primary: true },
      { label: '查看邮件', icon: 'fas fa-envelope-open' },
    ]
  },
  {
    id: 2,
    type: 'reply',
    icon: 'fab fa-whatsapp',
    title: 'Dubai Storage WhatsApp 已读',
    description: '您发送的消息已被查看，对方正在输入中...',
    detail: '<p>客户 Mohammed Khan 已读您的 WhatsApp 消息，显示对方正在输入回复。</p><p>消息内容：关于企业级SSD采购的询价</p>',
    time: '15分钟前',
    source: 'WhatsApp',
    sourceIcon: 'fab fa-whatsapp',
    read: false
  },
  {
    id: 3,
    type: 'reply',
    icon: 'fab fa-linkedin',
    title: 'LinkedIn 好友请求被接受',
    description: 'Kuwait Data Systems 的 CIO Faisal 接受了您的好友请求',
    detail: '<p>Faisal Al-Mutairi (CTO @ Kuwait Data Systems) 接受了您的 LinkedIn 连接请求。</p><p>建议：发送个性化感谢消息，介绍公司和产品。</p>',
    time: '1小时前',
    source: 'LinkedIn',
    sourceIcon: 'fab fa-linkedin',
    read: true
  },
  
  // 风险预警
  {
    id: 4,
    type: 'risk',
    icon: 'fas fa-exclamation-triangle',
    title: '⚠️ 高风险预警：客户信用下调',
    description: 'ABC Corp 信用评级从 A 下调至 B，建议提高预付款比例',
    detail: '<p><strong>风险等级：高</strong></p><p>客户 ABC Corp 的信用评级发生变动：</p><ul><li>原评级：A</li><li>新评级：B</li><li>原因：近期财务状况恶化</li></ul><p><strong>建议措施：</strong></p><ul><li>提高预付款比例至 50%</li><li>缩短付款周期</li><li>关注后续订单风险</li></ul>',
    time: '30分钟前',
    source: '风控系统',
    sourceIcon: 'fas fa-shield-alt',
    read: false,
    actions: [
      { label: '查看详情', icon: 'fas fa-info-circle', primary: true },
      { label: '调整付款条件', icon: 'fas fa-edit' }
    ]
  },
  {
    id: 5,
    type: 'risk',
    icon: 'fas fa-gavel',
    title: '欧盟能效新规即将生效',
    description: '2026年7月生效，涉及SSD产品能效认证要求',
    detail: '<p><strong>法规更新提醒</strong></p><p>欧盟委员会发布新的能效认证要求，将于2026年7月1日正式生效。</p><p><strong>影响范围：</strong></p><ul><li>所有出口欧盟的SSD产品</li><li>需要提供能效测试报告</li><li>认证周期约30天</li></ul><p><strong>建议：</strong>提前准备相关认证材料。</p>',
    time: '2小时前',
    source: '市场情报',
    sourceIcon: 'fas fa-globe',
    read: false
  },
  
  // AI情报
  {
    id: 6,
    type: 'ai',
    icon: 'fas fa-robot',
    title: '🤖 AI发现新商机',
    description: '识别到新加坡 Digital Hub 近期频繁访问官网定价页面',
    detail: '<p><strong>AI商机分析报告</strong></p><p>客户行为分析：</p><ul><li>过去7天访问定价页面 12 次</li><li>查看企业级SSD产品详情 8 次</li><li>下载产品手册 2 次</li></ul><p><strong>AI建议：</strong>该客户意向度高，建议尽快主动联系。</p>',
    time: '45分钟前',
    source: 'AI大脑',
    sourceIcon: 'fas fa-brain',
    read: false,
    actions: [
      { label: '立即联系', icon: 'fas fa-phone', primary: true },
      { label: '发送报价', icon: 'fas fa-file-invoice' }
    ]
  },
  {
    id: 7,
    type: 'ai',
    icon: 'fas fa-lightbulb',
    title: '💡 AI策略建议',
    description: '基于近期数据分析，建议调整中东地区邮件发送时间',
    detail: '<p><strong>策略优化建议</strong></p><p>AI分析了过去30天的邮件数据，发现：</p><ul><li>中东客户最佳回复时段：晚上8-10点</li><li>当前发送时段：上午10点</li><li>预计调整后回复率提升：52%</li></ul><p>是否应用此策略？</p>',
    time: '3小时前',
    source: 'AI策略中心',
    sourceIcon: 'fas fa-lightbulb',
    read: true,
    actions: [
      { label: '应用策略', icon: 'fas fa-check', primary: true },
      { label: '查看详情', icon: 'fas fa-chart-bar' }
    ]
  },
  
  // 营销报告
  {
    id: 8,
    type: 'marketing',
    icon: 'fas fa-chart-line',
    title: '📊 周度营销报告已生成',
    description: '本周发送邮件 1,247 封，打开率 42%，回复率 18%',
    detail: '<p><strong>本周营销数据汇总</strong></p><table style="width:100%;border-collapse:collapse;margin:12px 0;"><tr style="border-bottom:1px solid var(--border)"><td style="padding:8px 0;">邮件发送</td><td style="text-align:right;font-weight:600;">1,247 封</td></tr><tr style="border-bottom:1px solid var(--border)"><td style="padding:8px 0;">打开率</td><td style="text-align:right;font-weight:600;color:var(--success)">42% (+8%)</td></tr><tr style="border-bottom:1px solid var(--border)"><td style="padding:8px 0;">回复率</td><td style="text-align:right;font-weight:600;color:var(--success)">18% (+5%)</td></tr><tr><td style="padding:8px 0;">新增商机</td><td style="text-align:right;font-weight:600;">23 个</td></tr></table><p>详细报告已发送至您的邮箱。</p>',
    time: '今天 09:00',
    source: '自动报告',
    sourceIcon: 'fas fa-file-alt',
    read: true,
    actions: [
      { label: '查看完整报告', icon: 'fas fa-file-pdf', primary: true }
    ]
  },
  {
    id: 9,
    type: 'marketing',
    icon: 'fas fa-check-circle',
    title: '✅ 营销活动完成',
    description: '中东潜客开发活动已完成，共触达 156 位客户',
    detail: '<p><strong>活动执行报告</strong></p><p>活动名称：中东潜客开发</p><p>执行时间：2026-03-12 ~ 2026-03-19</p><p><strong>执行结果：</strong></p><ul><li>目标客户：156 位</li><li>邮件送达：152 封 (97%)</li><li>邮件打开：68 封 (45%)</li><li>客户回复：12 封 (8%)</li><li>意向客户：5 位</li></ul>',
    time: '昨天 18:30',
    source: '营销系统',
    sourceIcon: 'fas fa-paper-plane',
    read: true
  },
  
  // 寻客通知
  {
    id: 10,
    type: 'prospect',
    icon: 'fas fa-user-plus',
    title: '🎯 发现 12 个高匹配潜客',
    description: '基于您的历史成交客户，AI 推荐 12 个相似潜客',
    detail: '<p><strong>AI寻客报告</strong></p><p>寻客条件：中东地区 + SSD进口商</p><p><strong>推荐潜客 TOP 3：</strong></p><ol><li>Riyadh Tech Distribution (92分)</li><li>Dubai Storage Solutions (88分)</li><li>Saudi Digital Hub (76分)</li></ol><p>点击查看完整列表。</p>',
    time: '今天 14:30',
    source: '自动寻客',
    sourceIcon: 'fas fa-crosshairs',
    read: false,
    actions: [
      { label: '查看潜客列表', icon: 'fas fa-list', primary: true },
      { label: '发送营销邮件', icon: 'fas fa-paper-plane' }
    ]
  },
  {
    id: 11,
    type: 'prospect',
    icon: 'fas fa-search',
    title: '寻客任务更新',
    description: '欧洲企业级存储寻客任务进度 75%，已发现 45 家目标公司',
    detail: '<p><strong>任务进度更新</strong></p><p>任务名称：欧洲企业级存储寻客</p><p>当前进度：75%</p><p><strong>已发现：</strong></p><ul><li>目标公司：45 家</li><li>关键人信息：28 位</li><li>高匹配度：12 家</li></ul>',
    time: '今天 11:20',
    source: '寻客任务',
    sourceIcon: 'fas fa-tasks',
    read: true
  },
  
  // 系统通知
  {
    id: 12,
    type: 'system',
    icon: 'fas fa-cog',
    title: '系统更新通知',
    description: '领存智贸 AI 已更新至 v2.3，新增策略自进化功能',
    detail: '<p><strong>版本更新 v2.3</strong></p><p><strong>新增功能：</strong></p><ul><li>AI策略自进化 - 自动测试优化营销策略</li><li>智能跟进提醒 - 基于客户行为预测最佳跟进时机</li><li>知识库问答优化 - 支持更多行业知识</li></ul><p><strong>优化：</strong></p><ul><li>邮件生成速度提升 30%</li><li>潜客匹配准确率提升 15%</li></ul>',
    time: '昨天 10:00',
    source: '系统',
    sourceIcon: 'fas fa-server',
    read: true
  }
])

// Computed
const notificationTabs = computed(() => [
  { key: 'all', label: '全部', icon: 'fas fa-inbox', count: notifications.value.filter(n => !n.read).length },
  { key: 'reply', label: '客户回复', icon: 'fas fa-reply', count: notifications.value.filter(n => n.type === 'reply' && !n.read).length },
  { key: 'marketing', label: '营销报告', icon: 'fas fa-chart-line', count: notifications.value.filter(n => n.type === 'marketing' && !n.read).length }
])

const unreadCount = computed(() => notifications.value.filter(n => !n.read).length)

const filteredNotifications = computed(() => {
  if (activeTab.value === 'all') return notifications.value
  return notifications.value.filter(n => n.type === activeTab.value)
})

// Methods
const getIconBg = (type) => {
  const map = {
    reply: 'rgba(99, 102, 241, 0.2)',
    risk: 'rgba(239, 68, 68, 0.2)',
    ai: 'rgba(139, 92, 246, 0.2)',
    marketing: 'rgba(16, 185, 129, 0.2)',
    prospect: 'rgba(245, 158, 11, 0.2)',
    system: 'rgba(148, 163, 184, 0.2)'
  }
  return map[type] || 'rgba(99, 102, 241, 0.2)'
}

const getIconColor = (type) => {
  const map = {
    reply: 'var(--primary)',
    risk: 'var(--danger)',
    ai: 'var(--secondary)',
    marketing: 'var(--success)',
    prospect: 'var(--warning)',
    system: 'var(--text-secondary)'
  }
  return map[type] || 'var(--primary)'
}

const handleNotificationClick = (notification) => {
  if (!notification.read) {
    notification.read = true
  }
  selectedNotification.value = notification
}

const markAsRead = (id) => {
  const notification = notifications.value.find(n => n.id === id)
  if (notification) {
    notification.read = true
  }
}

const markAllAsRead = () => {
  notifications.value.forEach(n => n.read = true)
}

const viewAllNotifications = () => {
  showNotifications.value = false
  // Navigate to notifications page
}

const showNotificationMenu = (event, notification) => {
  // Show context menu
}

const handleAction = (action) => {
  console.log('Action:', action)
  selectedNotification.value = null
}

// Help Center
const faqs = ref([
  {
    question: '如何使用AI企业大脑进行智能寻客？',
    answer: '<p>在"企业大脑"对话框中直接输入您的需求，例如：</p><ul><li>"帮我找中东地区的SSD进口商"</li><li>"寻找年采购额超过100万的潜客"</li><li>"推荐与ABC公司类似的客户"</li></ul><p>AI会自动分析并推荐高匹配度潜客。</p>'
  },
  {
    question: '邮件营销如何设置自动跟进？',
    answer: '<p>创建营销活动时，系统会自动生成SOP序列：</p><ol><li>Day 1: 首次触达邮件</li><li>Day 3: 未打开则重发</li><li>Day 7: 发送跟进内容</li></ol><p>您也可以在"自动营销"中自定义跟进节奏。</p>'
  },
  {
    question: '如何提高邮件打开率和回复率？',
    answer: '<p>AI策略中心已分析出最佳实践：</p><ul><li>发送时间：周二上午10点效果最佳</li><li>标题优化：包含具体数字提升42%</li><li>个性化：根据客户官网内容定制开场</li><li>跟进时机：第3天和第7天是最佳时机</li></ul>'
  },
  {
    question: '如何管理客户信息和跟进记录？',
    answer: '<p>客户池支持完整的客户生命周期管理：</p><ul><li>自动同步邮件、WhatsApp、LinkedIn沟通记录</li><li>客户标签和评分系统</li><li>商机阶段追踪</li><li>订单和付款管理</li></ul>'
  },
  {
    question: 'AI策略中心是如何工作的？',
    answer: '<p>AI策略中心通过分析您的业务数据：</p><ol><li>分析邮件发送和回复数据</li><li>识别最优触达时机和话术</li><li>自动生成策略建议</li><li>支持一键应用策略</li></ol><p>系统会持续学习并优化策略。</p>'
  },
  {
    question: '如何配置邮件和社交媒体账号？',
    answer: '<p>前往"设置" → "账号绑定"：</p><ul><li>邮件：支持Gmail、Outlook、企业邮箱</li><li>WhatsApp：绑定WhatsApp Business账号</li><li>LinkedIn：绑定LinkedIn个人或企业账号</li></ul><p>绑定后系统会自动同步沟通记录。</p>'
  }
])

const filteredFaqs = computed(() => {
  if (!helpSearchQuery.value) return faqs.value
  const query = helpSearchQuery.value.toLowerCase()
  return faqs.value.filter(f => 
    f.question.toLowerCase().includes(query) || 
    f.answer.toLowerCase().includes(query)
  )
})

const toggleFaq = (index) => {
  expandedFaq.value = expandedFaq.value === index ? null : index
}

const openHelpArticle = (article) => {
  console.log('Open article:', article)
  showHelp.value = false
}

const openChat = () => {
  console.log('Open chat support')
  showHelp.value = false
}

const sendFeedback = () => {
  console.log('Send feedback')
  showHelp.value = false
}

const openDocs = () => {
  window.open('https://docs.lingcunai.com', '_blank')
  showHelp.value = false
}

const showChangelog = () => {
  console.log('Show changelog')
}

const showTerms = () => {
  console.log('Show terms')
}

const showPrivacy = () => {
  console.log('Show privacy')
}

onMounted(() => {
  getNoReadCount().then(res => {
    console.log('Unread notifications count:', res)
  })
})
</script>

<style scoped>
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: relative;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.breadcrumb-item {
  color: var(--text-secondary);
}

.breadcrumb-item.active {
  color: var(--text-primary);
}

.breadcrumb-separator {
  color: var(--text-muted);
  font-size: 10px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-btn {
  width: 36px;
  height: 36px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s;
  position: relative;
}

.action-btn:hover {
  background: var(--border);
  color: var(--text-primary);
}

.action-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Notification Badge */
.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Notification Panel */
.notification-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.notification-panel {
  position: absolute;
  top: 100%;
  right: 24px;
  width: 420px;
  max-height: 600px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  margin-top: 8px;
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.2s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* Panel Header */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
}

.panel-title i {
  color: var(--primary);
}

.unread-count {
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary);
  border-radius: 10px;
}

.panel-actions {
  display: flex;
  gap: 8px;
}

.action-text {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.action-text:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Panel Tabs */
.panel-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.panel-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.panel-tab:hover {
  background: var(--bg-hover);
}

.panel-tab.active {
  background: var(--primary);
  color: white;
}

.panel-tab i {
  font-size: 11px;
}

.tab-count {
  font-size: 10px;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.panel-tab:not(.active) .tab-count {
  background: var(--bg-hover);
}

/* Notification List */
.notification-list {
  flex: 1;
  overflow-y: auto;
  max-height: 400px;
}

.notification-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s;
}

.notification-item:hover {
  background: var(--bg-hover);
}

.notification-item.unread {
  background: rgba(99, 102, 241, 0.05);
}

.notification-item.unread:hover {
  background: rgba(99, 102, 241, 0.1);
}

.notification-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--text-muted);
}

.notification-source {
  display: flex;
  align-items: center;
  gap: 4px;
}

.notification-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.notification-item:hover .notification-actions {
  opacity: 1;
}

.mark-read-btn,
.more-btn {
  width: 28px;
  height: 28px;
  background: var(--bg-hover);
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.mark-read-btn:hover {
  background: var(--success);
  color: white;
}

.more-btn:hover {
  background: var(--border);
  color: var(--text-primary);
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: var(--text-muted);
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.empty-state p {
  font-size: 14px;
}

/* Panel Footer */
.panel-footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

/* Task Menu */
.task-menu {
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  z-index: 100;
}

.task-menu.show {
  display: block;
}

.task-menu-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
}

.task-menu-item:hover {
  background: var(--bg-hover);
}

.task-menu-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.task-menu-icon.prospect {
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary);
}

.task-menu-icon.marketing {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.task-menu-icon.analysis {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
}

.task-menu-text h4 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.task-menu-text p {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

.modal {
  background: var(--bg-card);
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  overflow: hidden;
}

.notification-detail-modal {
  max-width: 550px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
}

.title-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.modal-close {
  width: 32px;
  height: 32px;
  background: var(--bg-hover);
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: var(--border);
  color: var(--text-primary);
}

.modal-body {
  padding: 20px;
}

.detail-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.detail-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.detail-content p {
  margin-bottom: 12px;
}

.detail-content ul,
.detail-content ol {
  margin: 12px 0;
  padding-left: 24px;
}

.detail-content li {
  margin-bottom: 6px;
}

.detail-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* Help Panel */
.help-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.help-panel {
  position: absolute;
  top: 100%;
  right: 24px;
  width: 420px;
  max-height: calc(100vh - 80px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  margin-top: 8px;
  overflow-y: auto;
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.2s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* Panel Header */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
}

.panel-title i {
  color: var(--primary);
}

.modal-close {
  width: 28px;
  height: 28px;
  background: var(--bg-hover);
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: var(--border);
  color: var(--text-primary);
}

/* Help Search */
.help-search {
  padding: 12px 16px;
  position: relative;
  border-bottom: 1px solid var(--border);
}

.help-search i {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 12px;
}

.help-search input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
}

.help-search input:focus {
  outline: none;
  border-color: var(--primary);
}

/* Help Section */
.help-section {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.help-section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

/* Quick Links */
.quick-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.quick-link-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--bg-hover);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.quick-link-card:hover {
  background: var(--border);
  transform: translateY(-1px);
}

.quick-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 14px;
}

.quick-link-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
}

.quick-link-desc {
  font-size: 10px;
  color: var(--text-muted);
}

/* FAQ List */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  background: var(--bg-hover);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.faq-question {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s;
}

.faq-question i {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.faq-item.expanded .faq-question i {
  transform: rotate(90deg);
}

.faq-item:hover .faq-question {
  background: var(--border);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.faq-item.expanded .faq-answer {
  max-height: 300px;
  padding: 0 12px 12px;
}

.faq-answer p {
  margin-bottom: 8px;
}

.faq-answer ul,
.faq-answer ol {
  margin: 8px 0;
  padding-left: 16px;
}

.faq-answer li {
  margin-bottom: 4px;
}

/* Support Options */
.support-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.support-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-hover);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.support-item:hover {
  background: var(--border);
}

.support-item i {
  font-size: 18px;
  color: var(--primary);
  width: 24px;
  text-align: center;
}

.support-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
}

.support-desc {
  font-size: 10px;
  color: var(--text-muted);
}

/* Help Footer */
.help-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-hover);
}

.version-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.version-badge {
  padding: 2px 8px;
  background: var(--primary);
  color: white;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}

.footer-links {
  display: flex;
  gap: 16px;
}

.footer-links a {
  font-size: 11px;
  color: var(--text-secondary);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--primary);
}

/* Business Modal Styles - Optimized */
.business-modal {
  max-width: 520px;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.business-modal .modal-header {
  background: linear-gradient(135deg, var(--bg-hover) 0%, var(--bg-card) 100%);
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--border);
}

.business-modal .modal-header .title-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.business-modal .modal-header span {
  font-size: 18px;
  font-weight: 600;
}

.business-modal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 24px;
}

/* Form Styles - Enhanced */
.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-group label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
  margin-left: 10px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.2s ease;
}

.form-input:hover {
  border-color: var(--text-secondary);
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.1);
  background: var(--bg-card);
}

.form-input::placeholder {
  color: var(--text-muted);
  font-size: 13px;
}

.form-select {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.form-select:hover {
  border-color: var(--text-secondary);
}

.form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  background: var(--bg-card);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Checkbox & Radio Styles - Modern */
.checkbox-group,
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.checkbox-item,
.radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.checkbox-item::before,
.radio-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.checkbox-item:hover,
.radio-item:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.checkbox-item input,
.radio-item input {
  display: none;
}

.checkbox-item span,
.radio-item span {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.checkbox-item:has(input:checked),
.radio-item:has(input:checked) {
  background: var(--bg-card);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
}

.checkbox-item:has(input:checked)::before,
.radio-item:has(input:checked)::before {
  opacity: 0.08;
}

/* Toggle Switch - Enhanced */
.toggle-label {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  padding: 16px;
  background: var(--bg-dark);
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.toggle-label:hover {
  border-color: var(--primary);
  background: var(--bg-hover);
}

.toggle-label input {
  display: none;
}

.toggle-switch {
  width: 48px;
  height: 26px;
  background: var(--border);
  border-radius: 13px;
  position: relative;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-label input:checked + .toggle-switch {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

.toggle-label input:checked + .toggle-switch::after {
  left: 25px;
}

/* Form Actions - Enhanced */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.form-actions .btn {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.form-actions .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  border: none;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}

.form-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.form-actions .btn-secondary {
  background: var(--bg-hover);
  border: 1px solid var(--border);
}

.form-actions .btn-secondary:hover {
  background: var(--border);
  border-color: var(--text-secondary);
}

/* AI Features Section - Enhanced */
.ai-features {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  padding: 18px;
  margin-top: 4px;
}

.ai-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}

.ai-feature-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.ai-feature-item i {
  color: var(--primary);
  width: 20px;
  font-size: 14px;
}

/* Section Divider */
.form-section {
  position: relative;
  margin: 28px 0;
}

.form-section::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--border) 80%, transparent 100%);
}

.form-section-title {
  position: relative;
  display: inline-block;
  padding: 0 16px;
  background: var(--bg-card);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Help Text */
.form-help {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-help i {
  font-size: 11px;
}

/* Input with Icon */
.input-with-icon {
  position: relative;
}

.input-with-icon .form-input {
  padding-left: 44px;
}

.input-with-icon i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
}

.settings-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  cursor: pointer;
}

.item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.item-content {
  flex: 1;
  min-width: 0;
}

.item-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.item-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

.item-action {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 640px) {
  .business-modal {
    max-width: 100%;
    margin: 16px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .checkbox-group,
  .radio-group {
    flex-direction: column;
  }
  
  .checkbox-item,
  .radio-item {
    width: 100%;
  }
}
</style>