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="noReadCount > 0" class="notification-badge">{{ noReadCount > 99 ? '99+' : noReadCount }}</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" v-if="noReadCount > 0">{{ noReadCount }}条未读</span>
          </div>
          <div class="panel-actions">
            <button class="action-text" @click="markAllAsRead">全部已读</button>
            <!-- <button class="action-text" @click="openSettings">
              <i class="fas fa-cog"></i>
            </button> -->
          </div>
        </div>

        <!-- Filter Tabs -->
        <div class="panel-tabs">
          <div 
            v-for="tab in notificationTabs" 
            :key="tab.messageType"
            class="panel-tab"
            :class="{ active: activeTab === tab.messageType }"
            @click="activeTab = tab.messageType"
          >
            {{ tab.messageTypeName }}
            <span v-if="tab.stateNumber > 0" class="tab-count">{{ tab.stateNumber > 99 ? '99+' : tab.stateNumber }}</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.isRead }"
              @click="handleNotificationClick(notification)"
            >
              <div class="notification-icon" :style="{ background: getIconBg('reply'), color: getIconColor('reply') }">
                <i class="fas fa-reply"></i>
              </div>
              <div class="notification-content">
                <div class="notification-title">{{ notification.title }}</div>
                <div class="notification-desc">{{ notification.content }}</div>
                <div class="notification-meta">
                  <span class="notification-time">{{ notification.time }}</span>
                </div>
              </div>
              <div class="notification-actions">
                <button v-if="!notification.isRead" class="mark-read-btn" @click.stop="markAsRead(notification)">
                  <i class="fas fa-check"></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">
          <div></div>
          <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('reply'), color: getIconColor('reply') }">
                <i class="fas fa-reply"></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.content"></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" @refresh="handleMarketingRefresh" />

  <div v-if="showSettings" class="modal-overlay" @click.self="showSettings = false">
    <div class="modal create-modal" style="max-width: 800px;">
      <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" v-for="item in settingsData">
            <!-- <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">{{ item.templateServiceName }}</div>
              <div class="item-desc">{{ item.eventName }}</div>
            </div>
            <div class="item-action">
              <div>
                <span>企微消息：</span>
                <el-switch v-model="item.wecom" @change="changeSetting(item, 'wecom')" />
              </div>
              <div>
                <span>站内信：</span>
                <el-switch v-model="item.site" @change="changeSetting(item, 'site')" />
              </div>
              <div>
                <span>邮件：</span>
                <el-switch v-model="item.mail" @change="changeSetting(item, 'mail')" />
              </div>
            </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">
              <div>
                <span>企微消息：</span>
                <el-switch v-model="settings.replyNotify" />
              </div>
              <div>
                <span>站内信：</span>
                <el-switch v-model="settings.replyNotify" />
              </div>
              <div>
                <span>邮件：</span>
                <el-switch v-model="settings.replyNotify" />
              </div>
            </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, getMessageList, updateRead, updateReadAll, listPageBuUserSet } from '@/api/layout'
import moment from 'moment'

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 handleMarketingRefresh = () => {
  window.dispatchEvent(new CustomEvent('marketing:refresh'))
}

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('报告生成中，完成后将发送至您的邮箱...')
}

// Notification data
const notifications = ref([])
const toggleNotifications = () => {
  showNotifications.value = !showNotifications.value
  if (showNotifications.value){
    showHelp.value = false
    let params = {
      pageIndex: 1,
      pageSize: 10000,
      appId: import.meta.env.VITE_API_APP_ID
    }
    getMessageList(params).then(res => {
      notifications.value = (res.result.records || []).map(item => {
          // 判断创建时间是不是今天
          let date = moment(item.createTime).format("YYYY-MM-DD HH:mm:ss")
          if(date.slice(0, 10) == moment().format("YYYY-MM-DD")){
              item.time = "今天 " + date.slice(11, 16)
          }else{
              item.time = moment(item.createTime).format("MM月DD日 HH:mm")
          }
          return item
      })
    }).catch(err => {
      console.error('获取消息列表失败:', err)
    })
  }
}

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

// Computed
const notificationTabs = ref([])

const filteredNotifications = computed(() => {
  if (activeTab.value === 'all') return notifications.value
  return notifications.value.filter(n => n.messageType === 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) => {
  setRead(notification)
  selectedNotification.value = notification
  // if(notification.callbackUrl){
  //     window.open(item.callbackUrl, '_blank')
  // }
}

const markAsRead = (notification) => {
  setRead(notification)
}

const setRead = (item) => {
  if(!item.isRead){
      updateRead({ messageLogIds: [item.id], appId: import.meta.env.VITE_API_APP_ID }).then(res => {
        item.isRead = 1
        getCount()
        // item.stateNumber --
      }).catch(err => {
        ElMessage.error(err.msg);
      })
  }
}

const markAllAsRead = () => {
  if(notifications.value.length == 0){
      ElMessage.error('列表暂无数据');
      return
  }
  updateReadAll({ appId: import.meta.env.VITE_API_APP_ID }).then(res => {
      if(res.success){
          ElMessage.success('操作成功');
          notifications.value.map(item => item.isRead = 1)
          getCount()
      }else{
          ElMessage.error(res.msg);
      }
  })
}

const settingsData = ref([])
const openSettings = () => {
  listPageBuUserSet({ pageIndex: 1, pageSize: 9999, appId: import.meta.env.VITE_API_APP_ID }).then(res => {
    settingsData.value = res.result.records.map(item => {
      item.wecom = handleData('wecom', item)
      item.site = handleData('site', item)
      item.mail = handleData('mail', item)
      return item
    })
  })
  showSettings.value = true
}
const handleData = (type, column) => {
  let enabled = true
	let templateData = null
	if(column.userDetails && column.userDetails.length > 0) {
		templateData = column.userDetails.find(item => item.templateEventId == column.id && item.templateDetailType == type)
      //找到对应的配置就按照对应的配置显示
      if(templateData) {
          enabled = templateData?.enabled
      }
  }
  return enabled
}
const changeSetting = (item, type) => {
  let params = {
    appId: import.meta.env.VITE_API_APP_ID,
    templateDetailType: type,
    templateEventId: item.id,
    enabled: item[type]
  }
  setMessageConfig(params).then(res => {
    ElMessage.success((item[type] ? '启用' : '禁用') + '成功')
  }).catch(err => {
    ElMessage.error(err.msg)
  })
}

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')
}

const noReadCount = ref(0)
const getCount = () => {
  getNoReadCount().then(res => {
    let countList = (res.result || []).map(item => item.stateNumber)
    noReadCount.value = eval(countList.join("+"))
    notificationTabs.value = [
      { messageType: 'all', messageTypeName: '全部', stateNumber: noReadCount.value },
      ...res.result
    ]
  })
}
onMounted(() => {
  getCount()
})
</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;
  margin-bottom: 0;
}

.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;
}

.settings-item:first-child{
  padding-top: 0;
}

.settings-item .el-switch{
  --el-switch-on-color: #13ce66;
}

.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>