编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>巨量本地推系统 - 多端口企业级SaaS平台</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.5.0/dist/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@3.4.0/dist/vue.global.prod.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-plus@2.5.0/dist/index.full.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; background: #f5f7fa; color: #333; }
    .login-container { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .login-box { width: 420px; padding: 40px; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
    .login-title { text-align: center; font-size: 28px; font-weight: 600; margin-bottom: 10px; color: #333; }
    .login-subtitle { text-align: center; color: #999; margin-bottom: 30px; font-size: 14px; }
    .form-item { margin-bottom: 20px; }
    .form-item label { display: block; margin-bottom: 8px; color: #666; font-size: 14px; }
    .form-item input { width: 100%; padding: 12px 15px; border: 1px solid #dcdfe6; border-radius: 8px; font-size: 14px; transition: border-color 0.3s; }
    .form-item input:focus { outline: none; border-color: #667eea; }
    .login-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: opacity 0.3s; }
    .login-btn:hover { opacity: 0.9; }
    .login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
    .port-info { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; font-size: 12px; color: #999; }
    .port-info .ports { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .port-info .port-tag { background: #f5f7fa; padding: 4px 8px; border-radius: 4px; font-size: 11px; }
    .layout { display: flex; height: 100vh; }
    .sidebar { width: 220px; background: #304156; color: #fff; transition: width 0.3s; overflow: hidden; }
    .sidebar.collapsed { width: 64px; }
    .sidebar-logo { height: 60px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; background: rgba(0,0,0,0.2); }
    .sidebar-menu { border: none !important; height: calc(100vh - 60px); overflow-y: auto; }
    .menu-item { display: flex; align-items: center; padding: 12px 20px; cursor: pointer; transition: background 0.3s; color: #bfcbd9; }
    .menu-item:hover { background: #263445; color: #fff; }
    .menu-item.active { background: #263445; color: #409EFF; border-right: 3px solid #409EFF; }
    .menu-item .icon { width: 24px; margin-right: 12px; font-size: 18px; }
    .menu-item .text { font-size: 14px; white-space: nowrap; }
    .main-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .header { height: 60px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
    .header-left { display: flex; align-items: center; }
    .collapse-btn { font-size: 20px; cursor: pointer; margin-right: 20px; color: #666; }
    .header-right { display: flex; align-items: center; gap: 20px; }
    .user-info { display: flex; align-items: center; gap: 10px; cursor: pointer; }
    .port-badge { padding: 4px 10px; background: #409EFF; color: #fff; border-radius: 12px; font-size: 12px; }
    .main-content { flex: 1; overflow-y: auto; padding: 20px; }
    .page-title { font-size: 20px; font-weight: 600; margin-bottom: 20px; }
    .stat-row { display: flex; gap: 20px; margin-bottom: 20px; }
    .stat-card { flex: 1; padding: 24px; border-radius: 12px; color: #fff; }
    .stat-card.primary { background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%); }
    .stat-card.success { background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%); }
    .stat-card.warning { background: linear-gradient(135deg, #E6A23C 0%, #ebb563 100%); }
    .stat-card.danger { background: linear-gradient(135deg, #F56C6C 0%, #f78989 100%); }
    .stat-value { font-size: 28px; font-weight: 600; margin-bottom: 5px; }
    .stat-label { font-size: 14px; opacity: 0.9; }
    .card { background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
    .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
    .card-title { font-size: 16px; font-weight: 500; }
    .data-table { width: 100%; border-collapse: collapse; }
    .data-table th, .data-table td { padding: 12px; text-align: left; border-bottom: 1px solid #eee; }
    .data-table th { background: #fafafa; font-weight: 500; color: #666; font-size: 14px; }
    .data-table td { font-size: 14px; color: #333; }
    .data-table tr:hover { background: #f5f7fa; }
    .tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
    .tag-success { background: #f0f9eb; color: #67C23A; }
    .tag-warning { background: #fdf6ec; color: #E6A23C; }
    .tag-danger { background: #fef0f0; color: #F56C6C; }
    .tag-info { background: #f4f4f5; color: #909399; }
    .btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.3s; }
    .btn-primary { background: #409EFF; color: #fff; }
    .btn-primary:hover { background: #66b1ff; }
    .btn-success { background: #67C23A; color: #fff; }
    .btn-danger { background: #F56C6C; color: #fff; }
    .btn-warning { background: #E6A23C; color: #fff; }
    .btn-default { background: #f5f7fa; color: #666; }
    .search-bar { display: flex; gap: 15px; margin-bottom: 20px; padding: 15px; background: #f5f7fa; border-radius: 8px; }
    .search-item { display: flex; align-items: center; }
    .search-item label { margin-right: 8px; color: #666; font-size: 14px; }
    .search-item select, .search-item input { padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 14px; }
    .chart-container { height: 300px; }
    .quick-actions { display: flex; gap: 20px; }
    .action-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 30px; background: #f5f7fa; border-radius: 8px; cursor: pointer; transition: all 0.3s; }
    .action-item:hover { background: #ecf5ff; color: #409EFF; }
    .action-item .icon { font-size: 32px; margin-bottom: 10px; }
    .action-item .label { font-size: 14px; }
    .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
    .modal { background: #fff; border-radius: 12px; padding: 30px; min-width: 500px; max-width: 800px; max-height: 80vh; overflow-y: auto; }
    .modal-header { font-size: 18px; font-weight: 600; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
    .modal-footer { margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 10px; }
    .form-row { display: flex; gap: 20px; margin-bottom: 15px; }
    .form-group { flex: 1; }
    .form-group label { display: block; margin-bottom: 6px; color: #666; font-size: 14px; }
    .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 14px; }
    .pagination { display: flex; justify-content: flex-end; margin-top: 20px; gap: 10px; }
    .empty-state { text-align: center; padding: 60px 20px; color: #999; }
    .description-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .description-item { padding: 10px 0; }
    .description-item .label { color: #999; font-size: 14px; margin-bottom: 4px; }
    .description-item .value { color: #333; font-size: 14px; font-weight: 500; }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .alert-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: #fff; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
    .alert-item .content { flex: 1; }
    .alert-item .title { font-weight: 500; margin-bottom: 5px; }
    .alert-item .desc { font-size: 13px; color: #999; }
    .timeline { padding: 10px 0; }
    .timeline-item { display: flex; padding: 10px 0; border-left: 2px solid #eee; margin-left: 10px; padding-left: 20px; position: relative; }
    .timeline-item::before { content: ''; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: #409EFF; }
    .timeline-item .time { font-size: 12px; color: #999; margin-bottom: 4px; }
    .timeline-item .event { font-size: 14px; color: #333; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .info-card { background: #fff; border-radius: 12px; padding: 20px; text-align: center; }
    .info-card .value { font-size: 32px; font-weight: 600; color: #333; margin-bottom: 8px; }
    .info-card .label { font-size: 14px; color: #999; }
  </style>
</head>
<body>
  <div id="app">
    <!-- 登录页面 -->
    <div v-if="!isLoggedIn" class="login-container">
      <div class="login-box">
        <h1 class="login-title">巨量本地推系统</h1>
        <p class="login-subtitle">多端口企业级SaaS管理平台</p>
        <div class="form-item">
          <label>用户名</label>
          <input type="text" v-model="loginForm.username" placeholder="请输入用户名" @keyup.enter="handleLogin">
        </div>
        <div class="form-item">
          <label>密码</label>
          <input type="password" v-model="loginForm.password" placeholder="请输入密码" @keyup.enter="handleLogin">
        </div>
        <button class="login-btn" @click="handleLogin" :disabled="logging">
          {{ logging ? '登录中...' : '登 录' }}
        </button>
        <div class="port-info">
          <strong>端口分配：</strong>
          <div class="ports">
            <span class="port-tag">BOSS:8001</span>
            <span class="port-tag">投手:8002</span>
            <span class="port-tag">剪辑师:8003</span>
            <span class="port-tag">财务:8004</span>
            <span class="port-tag">客服:8005</span>
            <span class="port-tag">客户端:8006</span>
            <span class="port-tag">系统后台:8007</span>
          </div>
          <div style="margin-top: 15px;">
            <strong>演示账户：</strong>
            <p style="margin-top: 5px;">BOSS: admin / admin123</p>
            <p>投手: touzhu / touzhu123</p>
            <p>剪辑师: editor / editor123</p>
            <p>财务: finance / finance123</p>
            <p>客服: service / service123</p>
            <p>客户端: client / client123</p>
            <p>系统后台: system / system123</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 主应用 -->
    <div v-else class="layout">
      <!-- 侧边栏 -->
      <div class="sidebar" :class="{ collapsed: sidebarCollapsed }">
        <div class="sidebar-logo">
          <span v-if="!sidebarCollapsed">巨量本地推</span>
          <span v-else>巨</span>
        </div>
        <div class="sidebar-menu">
          <template v-for="menu in currentMenus" :key="menu.id">
            <div v-if="menu.children" class="menu-item" :class="{ active: activeMenu === menu.id }" @click="activeMenu = menu.id">
              <span class="icon">{{ menu.icon }}</span>
              <span v-if="!sidebarCollapsed" class="text">{{ menu.name }}</span>
            </div>
            <div v-else class="menu-item" :class="{ active: activeMenu === menu.id }" @click="activeMenu = menu.id">
              <span class="icon">{{ menu.icon }}</span>
              <span v-if="!sidebarCollapsed" class="text">{{ menu.name }}</span>
            </div>
          </template>
        </div>
      </div>

      <!-- 主内容 -->
      <div class="main-container">
        <div class="header">
          <div class="header-left">
            <span class="collapse-btn" @click="sidebarCollapsed = !sidebarCollapsed">☰</span>
            <span style="color: #666; font-size: 14px;">{{ currentPortName }}</span>
          </div>
          <div class="header-right">
            <div class="user-info" @click="handleLogout">
              <span style="font-size: 14px;">{{ userInfo.real_name }}</span>
              <span class="port-badge">{{ userInfo.port_name }}</span>
            </div>
          </div>
        </div>

        <div class="main-content">
          <!-- BOSS端内容 -->
          <template v-if="userInfo.port === 8001">
            <!-- 控制台 -->
            <div v-if="activeMenu === 'dashboard'">
              <h2 class="page-title">控制台</h2>
              <div class="stat-row">
                <div class="stat-card primary"><div class="stat-value">{{ bossStats.customers }}</div><div class="stat-label">客户总数</div></div>
                <div class="stat-card success"><div class="stat-value">¥{{ (bossStats.balance/10000).toFixed(1) }}万</div><div class="stat-label">账户总余额</div></div>
                <div class="stat-card warning"><div class="stat-value">{{ bossStats.campaigns }}</div><div class="stat-label">活跃计划</div></div>
                <div class="stat-card danger"><div class="stat-value">{{ bossStats.alerts }}</div><div class="stat-label">待处理预警</div></div>
              </div>
              <div class="grid-2">
                <div class="card">
                  <div class="card-header"><span class="card-title">投放效果趋势</span></div>
                  <div id="bossTrendChart" class="chart-container"></div>
                </div>
                <div class="card">
                  <div class="card-header"><span class="card-title">达标情况</span></div>
                  <div id="bossPieChart" class="chart-container"></div>
                </div>
              </div>
              <div class="card">
                <div class="card-header"><span class="card-title">待处理事项</span></div>
                <table class="data-table">
                  <thead><tr><th>类型</th><th>内容</th><th>客户</th><th>时间</th><th>操作</th></tr></thead>
                  <tbody>
                    <tr v-for="task in pendingTasks" :key="task.id">
                      <td><span :class="'tag tag-' + task.typeColor">{{ task.type }}</span></td>
                      <td>{{ task.content }}</td>
                      <td>{{ task.customer }}</td>
                      <td>{{ task.time }}</td>
                      <td><button class="btn btn-primary" style="padding: 4px 12px; font-size: 12px;" @click="task.done = true">处理</button></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 客户管理 -->
            <div v-if="activeMenu === 'customers'">
              <h2 class="page-title">客户档案管理</h2>
              <div class="search-bar">
                <div class="search-item"><label>状态：</label><select v-model="customerSearch.status"><option value="">全部</option><option value="in_progress">合作中</option><option value="testing">测试中</option><option value="pending_renew">待续费</option></select></div>
                <div class="search-item"><label>关键词：</label><input type="text" v-model="customerSearch.keyword" placeholder="客户名称/编码"></div>
                <button class="btn btn-primary" @click="loadCustomers">搜索</button>
                <button class="btn btn-default" @click="showModal('customer')">新建客户</button>
              </div>
              <div class="card">
                <table class="data-table">
                  <thead><tr><th>客户编码</th><th>客户名称</th><th>联系人</th><th>状态</th><th>月度预算</th><th>创建时间</th><th>操作</th></tr></thead>
                  <tbody>
                    <tr v-for="c in customers" :key="c.id">
                      <td>{{ c.code }}</td>
                      <td>{{ c.name }}</td>
                      <td>{{ c.contact }}</td>
                      <td><span :class="'tag tag-' + (c.status === '合作中' ? 'success' : c.status === '测试中' ? 'warning' : 'info')">{{ c.status }}</span></td>
                      <td>¥{{ c.budget?.toLocaleString() }}</td>
                      <td>{{ c.created }}</td>
                      <td><button class="btn btn-primary" style="padding: 4px 12px; font-size: 12px;" @click="viewCustomer(c)">详情</button></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 巨量账户 -->
            <div v-if="activeMenu === 'accounts'">
              <h2 class="page-title">巨量账户管理</h2>
              <div class="search-bar">
                <div class="search-item"><label>状态：</label><select><option value="">全部</option><option>在用</option><option>停用</option></select></div>
                <button class="btn btn-primary">搜索</button>
              </div>
              <div class="card">
                <table class="data-table">
                  <thead><tr><th>账户ID</th><th>账户名称</th><th>所属客户</th><th>状态</th><th>余额</th><th>日均消耗</th><th>授权状态</th><th>操作</th></tr></thead>
                  <tbody>
                    <tr v-for="acc in accounts" :key="acc.id">
                      <td>{{ acc.id }}</td>
                      <td>{{ acc.name }}</td>
                      <td>{{ acc.customer }}</td>
                      <td><span :class="'tag tag-' + (acc.status === '在用' ? 'success' : 'info')">{{ acc.status }}</span></td>
                      <td :style="{ color: acc.balance < 10000 ? '#F56C6C' : '#333' }">¥{{ acc.balance?.toLocaleString() }}</td>
                      <td>¥{{ acc.daily?.toLocaleString() }}</td>
                      <td><span :class="'tag tag-' + (acc.auth ? 'success' : 'danger')">{{ acc.auth ? '已授权' : '未授权' }}</span></td>
                      <td><button class="btn btn-primary" style="padding: 4px 12px; font-size: 12px;">详情</button></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 投放计划 -->
            <div v-if="activeMenu === 'campaigns'">
              <h2 class="page-title">投放计划管理</h2>
              <div class="stat-row">
                <div class="stat-card primary"><div class="stat-value">{{ campaignStats.total }}</div><div class="stat-label">计划总数</div></div>
                <div class="stat-card success"><div class="stat-value">{{ campaignStats.active }}</div><div class="stat-label">投放中</div></div>
                <div class="stat-card warning"><div class="stat-value">{{ campaignStats.leads }}</div><div class="stat-label">总线索量</div></div>
                <div class="stat-card danger"><div class="stat-value">{{ campaignStats.invalidRate }}%</div><div class="stat-label">平均无效率</div></div>
              </div>
              <div class="card">
                <table class="data-table">
                  <thead><tr><th>计划ID</th><th>计划名称</th><th>日预算</th><th>状态</th><th>播放量</th><th>线索量</th><th>无效线索</th><th>无效率</th><th>操作</th></tr></thead>
                  <tbody>
                    <tr v-for="cp in campaigns" :key="cp.id">
<td>{{ cp.id }}</td>
                      <td>{{ cp.name }}</td>
                      <td>¥{{ cp.budget?.toLocaleString() }}</td>
                      <td><span :class="'tag tag-' + (cp.active ? 'success' : 'info')">{{ cp.active ? '投放中' : '已暂停' }}</span></td>
                      <td>{{ cp.plays?.toLocaleString() }}</td>
                      <td>{{ cp.leads }}</td>
                      <td>{{ cp.invalid }}</td>
                      <td><span :style="{ color: cp.invalidRate > 15 ? '#F56C6C' : '#67C23A' }">{{ cp.invalidRate }}%</span></td>
                      <td><button class="btn btn-primary" style="padding: 4px 12px; font-size: 12px;">{{ cp.active ? '暂停' : '启动' }}</button></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 素材库 -->
            <div v-if="activeMenu === 'materials'">
              <h2 class="page-title">素材库管理</h2>
              <div class="grid-2">
                <div class="card">
                  <div class="card-header"><span class="card-title">成品素材库</span></div>
                  <table class="data-table">
                    <thead><tr><th>素材名称</th><th>类型</th><th>有效线索</th><th>无效线索</th><th>无效率</th></tr></thead>
                    <tbody>
                      <tr v-for="m in materials" :key="m.id">
                        <td>{{ m.name }}</td>
                        <td><span class="tag tag-info">成品</span></td>
                        <td>{{ m.valid }}</td>
                        <td>{{ m.invalid }}</td>
                        <td :style="{ color: m.rate > 15 ? '#F56C6C' : '#67C23A' }">{{ m.rate }}%</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="card">
                  <div class="card-header"><span class="card-title">原始素材库</span></div>
                  <table class="data-table">
                    <thead><tr><th>素材名称</th><th>上传时间</th><th>大小</th><th>操作</th></tr></thead>
                    <tbody>
                      <tr v-for="m in originalMaterials" :key="m.id">
                        <td>{{ m.name }}</td>
                        <td>{{ m.time }}</td>
                        <td>{{ m.size }}</td>
                        <td><button class="btn btn-primary" style="padding: 4px 12px; font-size: 12px;">查看</button></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <!-- 剪辑工单 -->
            <div v-if="activeMenu === 'workorders'">
              <h2 class="page-title">剪辑工单管理</h2>
              <div class="card">
                <table class="data-table">
                  <thead><tr><th>工单编号</th><th>客户</th><th>服务类型</th><th>优先级</th><th>状态</th><th>处理人</th><th>创建时间</th><th>操作</th></tr></thead>
                  <tbody>
                    <tr v-for="wo in workOrders" :key="wo.id">
                      <td>{{ wo.code }}</td>
                      <td>{{ wo.customer }}</td>
                      <td>{{ wo.type }}</td>
                      <td><span :class="'tag tag-' + (wo.priority === '紧急' ? 'danger' : wo.priority === '高' ? 'warning' : 'info')">{{ wo.priority }}</span></td>
                      <td><span :class="'tag tag-' + (wo.status === '已完成' ? 'success' : wo.status === '进行中' ? 'warning' : 'info')">{{ wo.status }}</span></td>
                      <td>{{ wo.handler }}</td>
                      <td>{{ wo.created }}</td>
                      <td><button v-if="wo.status === '待审核'" class="btn btn-success" style="padding: 4px 12px; font-size: 12px;" @click="wo.status = '已完成'">通过</button></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 监控预警 -->
            <div v-if="activeMenu === 'alerts'">
              <h2 class="page-title">监控预警</h2>
              <div class="stat-row">
                <div class="stat-card warning"><div class="stat-value">{{ alertStats.plays }}</div><div class="stat-label">播放量预警</div></div>
                <div class="stat-card danger"><div class="stat-value">{{ alertStats.invalid }}</div><div class="stat-label">无效线索预警</div></div>
                <div class="stat-card danger"><div class="stat-value">{{ alertStats.interrupt }}</div><div class="stat-label">投放中断</div></div>
              </div>
              <div class="grid-2">
                <div class="card">
                  <div class="card-header"><span class="card-title">无效线索预警</span></div>
                  <div v-for="a in invalidAlerts" :key="a.id" class="alert-item">
                    <div class="content"><div class="title">{{ a.campaign }}</div><div class="desc">{{ a.customer }} - 无效率{{ a.rate }}%</div></div>
                    <button class="btn btn-primary" style="padding: 6px 12px; font-size: 12px;">处理</button>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header"><span class="card-title">投放中断预警</span></div>
                  <div v-for="a in interruptAlerts" :key="a.id" class="alert-item">
                    <div class="content"><div class="title">{{ a.campaign }}</div><div class="desc">{{ a.reason }}</div></div>
                    <button class="btn btn-primary" style="padding: 6px 12px; font-size: 12px;">查看</button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 分析看板 -->
            <div v-if="activeMenu === 'analytics'">
              <h2 class="page-title">投手分析看板</h2>
              <div id="analyticsChart" class="chart-container" style="height: 350px;"></div>
              <div class="card" style="margin-top: 20px;">
                <table class="data-table">
                  <thead><tr><th>计划</th><th>客户</th><th>日预算</th><th>线索量</th><th>无效率</th><th>健康状态</th></tr></thead>
                  <tbody>
                    <tr v-for="c in campaignData" :key="c.id">
                      <td>{{ c.name }}</td>
                      <td>{{ c.customer }}</td>
                      <td>¥{{ c.budget?.toLocaleString() }}</td>
                      <td>{{ c.leads }}</td>
                      <td>{{ c.invalidRate }}%</td>
                      <td><span :class="'tag tag-' + (c.health === '健康' ? 'success' : c.health === '警告' ? 'warning' : 'danger')">{{ c.health }}</span></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 模板库 -->
            <div v-if="activeMenu === 'templates'">
              <h2 class="page-title">模板库管理</h2>
              <div class="grid-2">
                <div class="card">
                  <div class="card-header"><span class="card-title">脚本文案模板</span><button class="btn btn-primary" style="padding: 6px 12px; font-size: 12px;">新建模板</button></div>
                  <table class="data-table">
                    <thead><tr><th>模板名称</th><th>分类</th><th>使用次数</th><th>效果等级</th></tr></thead>
                    <tbody>
                      <tr v-for="t in scriptTemplates" :key="t.id">
                        <td>{{ t.name }}</td>
                        <td>{{ t.category }}</td>
                        <td>{{ t.uses }}</td>
                        <td><span :class="'tag tag-' + (t.level === 'TOP' ? 'success' : 'info')">{{ t.level }}</span></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="card">
                  <div class="card-header"><span class="card-title">卡片模板</span></div>
                  <table class="data-table">
                    <thead><tr><th>模板名称</th><th>分类</th><th>使用次数</th></tr></thead>
                    <tbody>
                      <tr v-for="t in cardTemplates" :key="t.id">
                        <td>{{ t.name }}</td>
                        <td>{{ t.category }}</td>
                        <td>{{ t.uses }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <!-- 报表管理 -->
            <div v-if="activeMenu === 'reports'">
              <h2 class="page-title">报表管理</h2>
              <div class="grid-3">
                <div class="info-card"><div class="value">¥{{ (reportStats.balance/10000).toFixed(1) }}万</div><div class="label">账户总余额</div></div>
                <div class="info-card"><div class="value">¥{{ (reportStats.consumption/10000).toFixed(1) }}万</div><div class="label">本月消耗</div></div>
                <div class="info-card"><div class="value">{{ reportStats.leads }}</div><div class="label">总线索量</div></div>
              </div>
              <div class="card" style="margin-top: 20px;">
                <div class="card-header"><span class="card-title">账户余额汇总</span><button class="btn btn-primary" style="padding: 6px 12px; font-size: 12px;">导出Excel</button></div>
                <table class="data-table">
                  <thead><tr><th>账户</th><th>客户</th><th>余额</th><th>日均消耗</th><th>剩余天数</th><th>预警状态</th></tr></thead>
                  <tbody>
                    <tr v-for="r in reportData" :key="r.id">
                      <td>{{ r.name }}</td>
                      <td>{{ r.customer }}</td>
                      <td>¥{{ r.balance?.toLocaleString() }}</td>
                      <td>¥{{ r.daily?.toLocaleString() }}</td>
                      <td>{{ r.days }}天</td>
                      <td><span :class="'tag tag-' + (r.warning ? 'danger' : 'success')">{{ r.warning ? '余额不足' : '正常' }}</span></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 系统配置 -->
            <div v-if="activeMenu === 'settings'">
              <h2 class="page-title">系统配置</h2>
              <div class="grid-2">
                <div class="card">
                  <div class="card-header"><span class="card-title">角色权限配置</span></div>
                  <table class="data-table">
                    <thead><tr><th>角色</th><th>名称</th><th>描述</th></tr></thead>
                    <tbody>
                      <tr><td>boss</td><td>BOSS（超级管理员）</td><td>全系统最高权限</td></tr>
                      <tr><td>touhou</td><td>投手/投放运营</td><td>仅可操作负责客户</td></tr>
                      <tr><td>editor</td><td>剪辑师</td><td>处理工单系统</td></tr>
                      <tr><td>finance</td><td>财务</td><td>财务数据查看</td></tr>
                      <tr><td>service</td><td>客服</td><td>客户服务跟进</td></tr>
                      <tr><td>client</td><td>客户</td><td>H5只读看板</td></tr>
                    </tbody>
                  </table>
                </div>
                <div class="card">
                  <div class="card-header"><span class="card-title">用户管理</span><button class="btn btn-primary" style="padding: 6px 12px; font-size: 12px;">新建用户</button></div>
                  <table class="data-table">
                    <thead><tr><th>用户名</th><th>姓名</th><th>角色</th><th>状态</th></tr></thead>
                    <tbody>
                      <tr><td>admin</td><td>系统管理员</td><td>BOSS</td><td><span class="tag tag-success">启用</span></td></tr>
                      <tr><td>touhou01</td><td>投手张三</td><td>投手</td><td><span class="tag tag-success">启用</span></td></tr>
                      <tr><td>editor01</td><td>剪辑师李四</td><td>剪辑师</td><td><span class="tag tag-success">启用</span></td></tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </template>

          <!-- 投手端内容 -->
          <template v-if="userInfo.port === 8002">
            <div v-if="activeMenu === 'dashboard'">
              <h2 class="page-title">投手工作台</h2>
              <div class="stat-row">
                <div class="stat-card primary"><div class="stat-value">{{ touhouStats.customers }}</div><div class="stat-label">负责客户</div></div>
                <div class="stat-card success"><div class="stat-value">{{ touhouStats.campaigns }}</div><div class="stat-label">活跃计划</div></div>
                <div class="stat-card warning"><div class="stat-value">{{ touhouStats.leads }}</div><div class="stat-label">今日线索</div></div>
                <div class="stat-card danger"><div class="stat-value">{{ touhouStats.alerts }}</div><div class="stat-label">待处理预警</div></div>
              </div>
              <div class="card">
                <div class="card-header"><span class="card-title">快捷操作</span></div>
                <div class="quick-actions">
                  <div class="action-item" @click="activeMenu = 'campaigns'"><div class="icon">📊</div><div class="label">极速搭建</div></div>
                  <div class="action-item" @click="activeMenu = 'workorders'"><div class="icon">📋</div><div class="label">发起工单</div></div>
                  <div class="action-item" @click="activeMenu = 'materials'"><div class="icon">📁</div><div class="label">上传素材</div></div>
                  <div class="action-item" @click="activeMenu = 'analytics'"><div class="icon">📈</div><div class="label">查看分析</div></div>
                </div>
              </div>
              <div class="card">
                <div class="card-header"><span class="card-title">待处理事项</span></div>
                <div v-for="t in touhouTasks" :key="t.id" class="alert-item">
                  <div class="content"><div class="title"><span :class="'tag tag-' + t.typeColor">{{ t.type }}</span> {{ t.content }}</div><div class="desc">{{ t.customer }} · {{ t.time }}</div></div>
                  <button class="btn btn-primary" style="padding: 6px 12px; font-size: 12px;">处理</button>
                </div>
              </div>
            </div>

            <div v-if="activeMenu === 'campaigns'">
              <h2 class="page-title">投放计划</h2>
              <div class="card">
                <table class="data-table">
                  <thead><tr><th>计划ID</th><th>计划名称</th><th>模式</th><th>日预算</th><th>状态</th><th>线索量</th><th>无效率</th><th>操作</th></tr></thead>
                  <tbody>
                    <tr v-for="c in touhouCampaigns" :key="c.id">
                      <td>{{ c.id }}</td>
                      <td>{{ c.name }}</td>
                      <td>{{ c.mode }}</td>
                      <td>¥{{ c.budget?.toLocaleString() }}</td>
                      <td><span :class="'tag tag-' + (c.active ? 'success' : 'info')">{{ c.active ? '投放中' : '已暂停' }}</span></td>
                      <td>{{ c.leads }}</td>
                      <td :style="{ color: c.rate > 15 ? '#F56C6C' : '#67C23A' }">{{ c.rate }}%</td>
                      <td><button class="btn btn-primary" style="padding: 4px 12px; font-size: 12px;">{{ c.active ? '暂停' : '启动' }}</button></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div v-if="activeMenu === 'workorders'">
              <h2 class="page-title">剪辑工单</h2>
              <div class="card">
                <table class="data-table">
                  <thead><tr><th>工单编号</th><th>客户</th><th>服务类型</th><th>优先级</th><th>状态</th><th>创建时间</th></tr></thead>
                  <tbody>
                    <tr v-for="wo in touhouWorkOrders" :key="wo.id">
                      <td>{{ wo.code }}</td>
                      <td>{{ wo.customer }}</td>
                      <td>{{ wo.type }}</td>
                      <td><span :class="'tag tag-' + (wo.priority === '紧急' ? 'danger' : 'info')">{{ wo.priority }}</span></td>
                      <td><span :class="'tag tag-' + (wo.status === '已完成' ? 'success' : 'info')">{{ wo.status }}</span></td>
                      <td>{{ wo.created }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div v-if="activeMenu === 'materials'">
              <h2 class="page-title">素材库</h2>
              <div class="card">
                <table class="data-table">
                  <thead><tr><th>素材名称</th><th>类型</th><th>有效线索</th><th>无效线索</th><th>无效率</th></tr></thead>
                  <tbody>
                    <tr v-for="m in touhouMaterials" :key="m.id">
                      <td>{{ m.name }}</td>
                      <td><span class="tag tag-info">{{ m.type }}</span></td>
                      <td>{{ m.valid }}</td>
                      <td>{{ m.invalid }}</td>
                      <td :style="{ color: m.rate > 15 ? '#F56C6C' : '#67C23A' }">{{ m.rate }}%</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div v-if="activeMenu === 'alerts'">
              <h2 class="page-title">监控预警</h2>
              <div class="card">
                <div class="card-header"><span class="card-title">无效线索预警</span></div>
                <div v-for="a in touhouAlerts" :key="a.id" class="alert-item">
                  <div class="content"><div class="title">{{ a.campaign }}</div><div class="desc">无效率{{ a.rate }}%，超过阈值{{ a.threshold }}%</div></div>
                  <button class="btn btn-primary" style="padding: 6px 12px; font-size: 12px;">处理</button>
                </div>
              </div>
            </div>

            <div v-if="activeMenu === 'analytics'">
              <h2 class="page-title">智能分析</h2>
              <div id="touhouChart" class="chart-container"></div>
            </div>
          </template>

          <!-- 剪辑师端内容 -->
          <template v-if="userInfo.port === 8003">
            <div v-if="activeMenu === 'dashboard'">
              <h2 class="page-title">剪辑师工作台</h2>
              <div class="stat-row">
                <div class="stat-card primary"><div class="stat-value">{{ editorStats.pending }}</div><div class="stat-label">待接工单</div></div>
                <div class="stat-card warning"><div class="stat-value">{{ editorStats.processing }}</div><div class="stat-label">进行中</div></div>
                <div class="stat-card success"><div class="stat-value">{{ editorStats.completed }}</div><div class="stat-label">已完成</div></div>
                <div class="stat-card danger"><div class="stat-value">{{ editorStats.rejected }}</div><div class="stat-label">被驳回</div></div>
              </div>
              <div class="card">
                <div class="card-header">
                  <span class="card-title">我的工单</span>
                  <div>
                    <span style="margin-right: 15px; color: #67C23A;">● 工作中</span>
                    <button class="btn btn-danger" style="padding: 6px 12px; font-size: 12px;" @click="editorWorking = !editorWorking">
                      {{ editorWorking ? '休息中' : '工作中' }}
                    </button>
                  </div>
                </div>
                <table class="data-table">
                  <thead><tr><th>工单编号</th><th>客户</th><th>服务类型</th><th>优先级</th><th>状态</th><th>发起人</th><th>创建时间</th><th>操作</th></tr></thead>
                  <tbody>
                    <tr v-for="wo in editorWorkOrders" :key="wo.id">
                      <td>{{ wo.code }}</td>
                      <td>{{ wo.customer }}</td>
                      <td>{{ wo.type }}</td>
                      <td><span :class="'tag tag-' + (wo.priority === '紧急' ? 'danger' : wo.priority === '高' ? 'warning' : 'info')">{{ wo.priority }}</span></td>
                      <td><span :class="'tag tag-' + (wo.status === '已完成' ? 'success' : wo.status === '进行中' ? 'warning' : 'info')">{{ wo.status }}</span></td>
                      <td>{{ wo.creator }}</td>
                      <td>{{ wo.created }}</td>
                      <td>
                        <button v-if="wo.status === '待接单'" class="btn btn-success" style="padding: 4px 12px; font-size: 12px;" @click="wo.status = '进行中'">接单</button>
                        <button v-if="wo.status === '进行中'" class="btn btn-primary" style="padding: 4px 12px; font-size: 12px;">提交</button>
                        <button v-else class="btn btn-default" style="padding: 4px 12px; font-size: 12px;">查看</button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </template>

          <!-- 财务端内容 -->
          <template v-if="userInfo.port === 8004">
            <div v-if="activeMenu === 'dashboard'">
              <h2 class="page-title">财务工作台</h2>
              <div class="stat-row">
                <div class="stat-card primary"><div class="stat-value">¥{{ (financeStats.balance/10000).toFixed(1) }}万</div><div class="stat-label">账户总余额</div></div>
                <div class="stat-card warning"><div class="stat-value">¥{{ (financeStats.consumption/10000).toFixed(1) }}万</div><div class="stat-label">本月消耗</div></div>
                <div class="stat-card danger"><div class="stat-value">{{ financeStats.warnings }}</div><div class="stat-label">余额预警</div></div>
              </div>
              <div class="card">
                <div class="card-header"><span class="card-title">账户余额概览</span></div>
                <table class="data-table">
                  <thead><tr><th>账户</th><th>客户</th><th>余额</th><th>日均消耗</th><th>剩余天数</th><th>预警状态</th></tr></thead>
                  <tbody>
                    <tr v-for="a in financeAccounts" :key="a.id">
                      <td>{{ a.name }}</td>
                      <td>{{ a.customer }}</td>
                      <td :style="{ color: a.warning ? '#F56C6C' : '#333' }">¥{{ a.balance?.toLocaleString() }}</td>
                      <td>¥{{ a.daily?.toLocaleString() }}</td>
                      <td>{{ a.days }}天</td>
                      <td><span :class="'tag tag-' + (a.warning ? 'danger' : 'success')">{{ a.warning ? '不足' : '正常' }}</span></td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div id="financeChart" class="chart-container" style="margin-top: 20px;"></div>
            </div>

            <div v-if="activeMenu === 'reports'">
              <h2 class="page-title">财务报表</h2>
              <div class="card">
                <div class="card-header"><span class="card-title">预算执行情况</span><button class="btn btn-primary" style="padding: 6px 12px; font-size: 12px;">导出Excel</button></div>
                <table class="data-table">
                  <thead><tr><th>客户</th><th>月度预算</th><th>已消耗</th><th>执行率</th><th>状态</th></tr></thead>
                  <tbody>
                    <tr v-for="r in financeReports" :key="r.id">
                      <td>{{ r.customer }}</td>
                      <td>¥{{ r.budget?.toLocaleString() }}</td>
                      <td>¥{{ r.consumption?.toLocaleString() }}</td>
                      <td>{{ r.rate }}%</td>
                      <td><span :class="'tag tag-' + (r.exceeded ? 'danger' : 'success')">{{ r.exceeded ? '超预算' : '正常' }}</span></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </template>

          <!-- 客服端内容 -->
          <template v-if="userInfo.port === 8005">
            <div v-if="activeMenu === 'dashboard'">
              <h2 class="page-title">客服工作台</h2>
              <div class="stat-row">
                <div class="stat-card primary"><div class="stat-value">{{ serviceStats.customers }}</div><div class="stat-label">服务客户数</div></div>
                <div class="stat-card warning"><div class="stat-value">{{ serviceStats.alerts }}</div><div class="stat-label">待跟进预警</div></div>
                <div class="stat-card danger"><div class="stat-value">{{ serviceStats.authIssues }}</div><div class="stat-label">授权异常</div></div>
              </div>
              <div class="card">
                <div class="card-header"><span class="card-title">客户状态总览</span></div>
                <table class="data-table">
                  <thead><tr><th>客户名称</th><th>联系人</th><th>状态</th><th>账户状态</th><th>操作</th></tr></thead>
                  <tbody>
                    <tr v-for="c in serviceCustomers" :key="c.id">
                      <td>{{ c.name }}</td>
                      <td>{{ c.contact }}</td>
                      <td><span :class="'tag tag-' + (c.active ? 'success' : 'warning')">{{ c.active ? '正常' : '需关注' }}</span></td>
                      <td>{{ c.accountStatus }}</td>
                      <td><button class="btn btn-primary" style="padding: 4px 12px; font-size: 12px;">跟进</button></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div v-if="activeMenu === 'alerts'">
              <h2 class="page-title">预警查看</h2>
              <div class="grid-2">
                <div class="card">
                  <div class="card-header"><span class="card-title">账户掉量预警</span></div>
                  <div v-for="a in serviceDropAlerts" :key="a.id" class="alert-item">
                    <div class="content"><div class="title">{{ a.account }}</div><div class="desc">掉量{{ (a.rate*100).toFixed(0) }}%</div></div>
                    <button class="btn btn-primary" style="padding: 6px 12px; font-size: 12px;">跟进</button>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header"><span class="card-title">授权异常</span></div>
                  <div v-for="a in serviceAuthAlerts" :key="a.id" class="alert-item">
                    <div class="content"><div class="title">{{ a.account }}</div><div class="desc">授权已失效</div></div>
                    <button class="btn btn-primary" style="padding: 6px 12px; font-size: 12px;">跟进</button>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <!-- 客户端内容 -->
          <template v-if="userInfo.port === 8006">
            <div v-if="activeMenu === 'dashboard'">
              <h2 class="page-title">数据看板</h2>
              <div class="stat-row">
                <div class="stat-card primary"><div class="stat-value">{{ clientStats.leads }}</div><div class="stat-label">总线索量</div></div>
                <div class="stat-card success"><div class="stat-value">{{ clientStats.valid }}</div><div class="stat-label">有效线索</div></div>
                <div class="stat-card warning"><div class="stat-value">¥{{ (clientStats.consumption/10000).toFixed(1) }}万</div><div class="stat-label">总消耗</div></div>
                <div class="stat-card danger"><div class="stat-value">¥{{ (clientStats.balance/10000).toFixed(1) }}万</div><div class="stat-label">账户余额</div></div>
              </div>
              <div id="clientChart" class="chart-container" style="height: 350px;"></div>
            </div>
          </template>

          <!-- 系统后台内容 -->
          <template v-if="userInfo.port === 8007">
            <div v-if="activeMenu === 'dashboard'">
              <h2 class="page-title">系统监控中心</h2>
              <div class="stat-row">
                <div class="stat-card success"><div class="stat-value">{{ systemStats.engines }}/{{ systemStats.total }}</div><div class="stat-label">运行引擎</div></div>
                <div class="stat-card warning"><div class="stat-value">{{ systemStats.alerts }}</div><div class="stat-label">待处理预警</div></div>
                <div class="stat-card primary"><div class="stat-value">{{ systemStats.uptime }}</div><div class="stat-label">系统可用率</div></div>
              </div>
              <div class="grid-2">
                <div class="card">
                  <div class="card-header"><span class="card-title">引擎状态</span></div>
                  <table class="data-table">
                    <thead><tr><th>引擎</th><th>状态</th><th>最后检查</th></tr></thead>
                    <tbody>
                      <tr v-for="e in engines" :key="e.id">
                        <td>{{ e.name }}</td>
                        <td><span class="tag tag-success">运行中</span></td>
                        <td>{{ e.lastCheck }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="card">
                  <div class="card-header"><span class="card-title">Token状态</span></div>
                  <table class="data-table">
                    <thead><tr><th>账户</th><th>有效</th><th>剩余(小时)</th></tr></thead>
                    <tbody>
                      <tr v-for="t in tokens" :key="t.id">
                        <td>{{ t.name }}</td>
                        <td><span :class="'tag tag-' + (t.valid ? 'success' : 'danger')">{{ t.valid ? '有效' : '失效' }}</span></td>
                        <td>{{ t.hours }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div id="systemChart" class="chart-container" style="margin-top: 20px;"></div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>

  <script>
    const { createApp, ref, reactive, computed, onMounted, nextTick } = Vue;

    createApp({
      setup() {
        // 登录状态
        const isLoggedIn = ref(false);
        const logging = ref(false);
        const loginForm = reactive({ username: '', password: '' });
        const userInfo = reactive({ port: 8001, real_name: '', port_name: '' });
        const sidebarCollapsed = ref(false);
        const activeMenu = ref('dashboard');

        // BOSS端数据
        const bossStats = reactive({ customers: 45, balance: 2560000, campaigns: 128, alerts: 8 });
        const pendingTasks = ref([
          { id: 1, type: '预警', typeColor: 'danger', content: '计划A无效线索超标', customer: '客户A', time: '5分钟前', done: false },
          { id: 2, type: '审批', typeColor: 'warning', content: '测试客户B申请转正式', customer: '客户B', time: '10分钟前', done: false },
          { id: 3, type: '工单', typeColor: 'info', content: '工单WO202404001待审核', customer: '客户C', time: '15分钟前', done: false }
        ]);
        const customers = ref([
          { id: 1, code: 'C20240001', name: '家政服务公司A', contact: '张经理', status: '合作中', budget: 50000, created: '2024-01-15' },
          { id: 2, code: 'C20240002', name: '保洁服务公司B', contact: '李经理', status: '测试中', budget: 20000, created: '2024-02-20' },
          { id: 3, code: 'C20240003', name: '养老服务公司C', contact: '王经理', status: '待续费', budget: 80000, created: '2024-01-10' },
          { id: 4, code: 'C20240004', name: '维修服务公司D', contact: '赵经理', status: '合作中', budget: 30000, created: '2024-03-05' },
        ]);
        const customerSearch = reactive({ status: '', keyword: '' });
        const accounts = ref([
          { id: '18675892', name: '家政服务-账户A', customer: '家政服务公司A', status: '在用', balance: 156000, daily: 5200, auth: true },
          { id: '18675893', name: '保洁服务-账户A', customer: '保洁服务公司B', status: '在用', balance: 8500, daily: 2800, auth: true },
          { id: '18675894', name: '养老服务-账户A', customer: '养老服务公司C', status: '停用', balance: 320000, daily: 0, auth: false },
        ]);
        const campaigns = ref([
          { id: 'CM202404001', name: '春季大促-简单投', budget: 5000, active: true, plays: 125000, leads: 456, invalid: 68, invalidRate: 14.9 },
          { id: 'CM202404002', name: '通投-定向本地', budget: 3000, active: true, plays: 89000, leads: 312, invalid: 58, invalidRate: 18.6 },
          { id: 'CM202404003', name: '搜索-关键词投放', budget: 2000, active: false, plays: 45000, leads: 189, invalid: 22, invalidRate: 11.6 },
        ]);
        const campaignStats = reactive({ total: 128, active: 86, leads: 15680, invalidRate: 12.5 });
        const materials = ref([
          { id: 1, name: '家政服务-主推视频', valid: 1256, invalid: 186, rate: 12.9 },
          { id: 2, name: '保洁服务-促销视频', valid: 892, invalid: 156, rate: 14.9 },
          { id: 3, name: '养老服务-宣传视频', valid: 567, invalid: 45, rate: 7.4 },
        ]);
        const originalMaterials = ref([
          { id: 1, name: '原始素材-001.mp4', time: '2024-04-20', size: '256MB' },
          { id: 2, name: '原始素材-002.mp4', time: '2024-04-19', size: '128MB' },
        ]);
        const workOrders = ref([
          { id: 1, code: 'WO202404001', customer: '家政服务A', type: '短视频制作', priority: '紧急', status: '待审核', handler: '剪辑师李四', created: '2024-04-20 10:30' },
          { id: 2, code: 'WO202404002', customer: '保洁服务B', type: '视频剪辑', priority: '高', status: '进行中', handler: '剪辑师王五', created: '2024-04-20 09:15' },
          { id: 3, code: 'WO202404003', customer: '养老服务C', type: '视频制作', priority: '普通', status: '已完成', handler: '剪辑师李四', created: '2024-04-19 14:20' },
        ]);
        const alertStats = reactive({ plays: 5, invalid: 8, interrupt: 3 });
        const invalidAlerts = ref([
          { id: 1, campaign: '计划A-通投', customer: '客户A', rate: 22.5 },
          { id: 2, campaign: '计划B-搜索', customer: '客户B', rate: 19.8 },
        ]);
        const interruptAlerts = ref([
          { id: 1, campaign: '计划C-简单投', reason: '预算耗尽' },
          { id: 2, campaign: '计划D-通投', reason: '账户余额不足' },
        ]);
        const campaignData = ref([
          { id: 1, name: '春季大促', customer: '客户A', budget: 5000, leads: 456, invalidRate: 14.9, health: '健康' },
          { id: 2, name: '定向投放', customer: '客户B', budget: 3000, leads: 312, invalidRate: 18.6, health: '警告' },
          { id: 3, name: '关键词搜索', customer: '客户C', budget: 2000, leads: 189, invalidRate: 11.6, health: '健康' },
        ]);
        const scriptTemplates = ref([
          { id: 1, name: '家政服务-开场模板', category: '家政', uses: 1256, level: 'TOP' },
          { id: 2, name: '保洁服务-促销模板', category: '保洁', uses: 892, level: 'S' },
          { id: 3, name: '养老服务-宣传模板', category: '养老', uses: 567, level: 'A' },
        ]);
        const cardTemplates = ref([
          { id: 1, name: '通用卡片模板', category: '通用', uses: 2345 },
          { id: 2, name: '促销卡片模板', category: '促销', uses: 1567 },
        ]);
        const reportStats = reactive({ balance: 2560000, consumption: 186000, leads: 15680 });
        const reportData = ref([
          { id: 1, name: '账户A', customer: '客户A', balance: 156000, daily: 5200, days: 30, warning: false },
          { id: 2, name: '账户B', customer: '客户B', balance: 8500, daily: 2800, days: 3, warning: true },
          { id: 3, name: '账户C', customer: '客户C', balance: 320000, daily: 0, days: 999, warning: false },
        ]);

        // 投手端数据
        const touhouStats = reactive({ customers: 12, campaigns: 28, leads: 156, alerts: 5 });
        const touhouTasks = ref([
          { id: 1, type: '无效线索', typeColor: 'danger', content: '计划无效线索超标20%', customer: '客户A', time: '10分钟前' },
          { id: 2, type: '私信转化', typeColor: 'warning', content: '计划私信转化率不达标', customer: '客户B', time: '30分钟前' },
        ]);
        const touhouCampaigns = ref([
          { id: 'CM202404001', name: '春季大促-简单投', mode: '简单投', budget: 5000, active: true, leads: 456, rate: 14.9 },
          { id: 'CM202404002', name: '定向投放-通投', mode: '通投', budget: 3000, active: true, leads: 312, rate: 18.6 },
        ]);
        const touhouWorkOrders = ref([
          { id: 1, code: 'WO202404001', customer: '客户A', type: '短视频制作', priority: '紧急', status: '待审核', created: '2024-04-20 10:30' },
        ]);
        const touhouMaterials = ref([
          { id: 1, name: '成品素材-001', type: '成品', valid: 456, invalid: 68, rate: 13.0 },
        ]);
        const touhouAlerts = ref([
          { id: 1, campaign: '计划A-通投', rate: 22.5, threshold: 15 },
        ]);

        // 剪辑师端数据
        const editorStats = reactive({ pending: 5, processing: 3, completed: 156, rejected: 8 });
        const editorWorking = ref(true);
        const editorWorkOrders = ref([
          { id: 1, code: 'WO202404001', customer: '家政服务A', type: '短视频制作', priority: '紧急', status: '待接单', creator: '投手张三', created: '2024-04-20 10:30' },
          { id: 2, code: 'WO202404002', customer: '保洁服务B', type: '视频剪辑', priority: '高', status: '进行中', creator: '投手李四', created: '2024-04-20 09:15' },
          { id: 3, code: 'WO202404003', customer: '养老服务C', type: '视频制作', priority: '普通', status: '已完成', creator: '投手张三', created: '2024-04-19 14:20' },
        ]);

        // 财务端数据
        const financeStats = reactive({ balance: 1860000, consumption: 186000, warnings: 3 });
        const financeAccounts = ref([
          { id: 1, name: '账户A', customer: '客户A', balance: 156000, daily: 5200, days: 30, warning: false },
          { id: 2, name: '账户B', customer: '客户B', balance: 8500, daily: 2800, days: 3, warning: true },
          { id: 3, name: '账户C', customer: '客户C', balance: 320000, daily: 0, days: 999, warning: false },
        ]);
        const financeReports = ref([
          { id: 1, customer: '客户A', budget: 50000, consumption: 42000, rate: 84, exceeded: false },
          { id: 2, customer: '客户B', budget: 30000, consumption: 32500, rate: 108, exceeded: true },
        ]);

        // 客服端数据
        const serviceStats = reactive({ customers: 45, alerts: 8, authIssues: 2 });
        const serviceCustomers = ref([
          { id: 1, name: '家政服务公司A', contact: '张经理', active: true, accountStatus: '正常' },
          { id: 2, name: '保洁服务公司B', contact: '李经理', active: false, accountStatus: '需续费' },
        ]);
        const serviceDropAlerts = ref([
          { id: 1, account: '账户A', rate: 0.35 },
        ]);
        const serviceAuthAlerts = ref([
          { id: 1, account: '账户B' },
        ]);

        // 客户端数据
        const clientStats = reactive({ leads: 15680, valid: 13560, consumption: 186000, balance: 320000 });

        // 系统后台数据
        const systemStats = reactive({ engines: 7, total: 7, alerts: 2, uptime: '99.9%' });
        const engines = ref([
          { id: 1, name: '预算管控引擎', lastCheck: '刚刚' },
          { id: 2, name: '盯盘引擎', lastCheck: '刚刚' },
          { id: 3, name: '评论监控', lastCheck: '刚刚' },
          { id: 4, name: '线索监控', lastCheck: '刚刚' },
          { id: 5, name: '私信监控', lastCheck: '刚刚' },
          { id: 6, name: '智能分析引擎', lastCheck: '刚刚' },
          { id: 7, name: 'Token刷新', lastCheck: '刚刚' },
        ]);
        const tokens = ref([
          { id: 1, name: '账户A', valid: true, hours: 18 },
          { id: 2, name: '账户B', valid: true, hours: 22 },
          { id: 3, name: '账户C', valid: false, hours: 0 },
        ]);

        // 菜单配置
        const bossMenus = [
          { id: 'dashboard', name: '控制台', icon: '🏠' },
          { id: 'customers', name: '客户管理', icon: '👥' },
          { id: 'accounts', name: '巨量账户', icon: '💰' },
          { id: 'campaigns', name: '投放计划', icon: '📊' },
          { id: 'materials', name: '素材库', icon: '📁' },
          { id: 'workorders', name: '剪辑工单', icon: '📋' },
          { id: 'alerts', name: '监控预警', icon: '🔔' },
          { id: 'analytics', name: '分析看板', icon: '📈' },
          { id: 'templates', name: '模板库', icon: '📝' },
          { id: 'reports', name: '报表管理', icon: '📑' },
          { id: 'settings', name: '系统配置', icon: '⚙️' },
        ];
        const touhouMenus = [
          { id: 'dashboard', name: '工作台', icon: '🏠' },
          { id: 'campaigns', name: '投放计划', icon: '📊' },
          { id: 'workorders', name: '剪辑工单', icon: '📋' },
          { id: 'materials', name: '素材库', icon: '📁' },
          { id: 'alerts', name: '监控预警', icon: '🔔' },
          { id: 'analytics', name: '智能分析', icon: '📈' },
        ];
        const editorMenus = [
          { id: 'dashboard', name: '工作台', icon: '🏠' },
        ];
        const financeMenus = [
          { id: 'dashboard', name: '工作台', icon: '🏠' },
          { id: 'reports', name: '财务报表', icon: '📑' },
        ];
        const serviceMenus = [
          { id: 'dashboard', name: '工作台', icon: '🏠' },
          { id: 'alerts', name: '预警查看', icon: '🔔' },
        ];
        const clientMenus = [
          { id: 'dashboard', name: '数据看板', icon: '📊' },
        ];
        const systemMenus = [
          { id: 'dashboard', name: '系统监控', icon: '🖥️' },
        ];

        const currentMenus = computed(() => {
          const menus = {
            8001: bossMenus, 8002: touhouMenus, 8003: editorMenus,
            8004: financeMenus, 8005: serviceMenus, 8006: clientMenus, 8007: systemMenus
          };
          return menus[userInfo.port] || [];
        });

        const currentPortName = computed(() => {
          const names = {
            8001: 'BOSS端', 8002: '投手端', 8003: '剪辑师端',
            8004: '财务端', 8005: '客服端', 8006: '客户端', 8007: '系统后台'
          };
          return names[userInfo.port] || '';
        });

        // 方法
        const handleLogin = () => {
          logging.value = true;
          setTimeout(() => {
            const accounts = {
              'admin': { port: 8001, real_name: '系统管理员', port_name: 'BOSS' },
              'touzhu': { port: 8002, real_name: '投手张三', port_name: '投手' },
              'editor': { port: 8003, real_name: '剪辑师李四', port_name: '剪辑师' },
              'finance': { port: 8004, real_name: '财务王五', port_name: '财务' },
              'service': { port: 8005, real_name: '客服赵六', port_name: '客服' },
              'client': { port: 8006, real_name: '商家客户', port_name: '客户端' },
              'system': { port: 8007, real_name: '系统管理员', port_name: '系统后台' }
            };
            const passwords = {
              'admin': 'admin123', 'touzhu': 'touzhu123', 'editor': 'editor123',
              'finance': 'finance123', 'service': 'service123', 'client': 'client123', 'system': 'system123'
            };
            const acc = accounts[loginForm.username];
            if (acc && passwords[loginForm.username] === loginForm.password) {
              Object.assign(userInfo, acc);
              isLoggedIn.value = true;
              activeMenu.value = 'dashboard';
              setTimeout(() => initCharts(), 200);
            } else {
              alert('用户名或密码错误');
            }
            logging.value = false;
          }, 500);
        };

        const handleLogout = () => {
          isLoggedIn.value = false;
          loginForm.username = '';
          loginForm.password = '';
        };

        const loadCustomers = () => {
          console.log('搜索客户', customerSearch);
        };

        const showModal = (type) => {
          console.log('打开弹窗', type);
        };

        const viewCustomer = (c) => {
          console.log('查看客户', c);
        };

        // 图表初始化
        const initCharts = () => {
          nextTick(() => {
            // BOSS趋势图
            const trendChart = echarts.init(document.getElementById('bossTrendChart'));
            trendChart.setOption({
              tooltip: { trigger: 'axis' },
              legend: { data: ['消耗', '线索量'] },
              xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
              yAxis: [{ type: 'value', name: '消耗(元)' }, { type: 'value', name: '线索量' }],
              series: [
                { name: '消耗', type: 'bar', data: [12000, 15000, 18000, 22000, 19000, 25000, 28000] },
                { name: '线索量', type: 'line', yAxisIndex: 1, data: [120, 150, 180, 220, 190, 250, 280] }
              ]
            });

            // BOSS饼图
            const pieChart = echarts.init(document.getElementById('bossPieChart'));
            pieChart.setOption({
              tooltip: { trigger: 'item' },
              series: [{
                type: 'pie', radius: ['40%', '70%'],
                data: [{ value: 78, name: '达标计划' }, { value: 22, name: '未达标' }],
                label: { formatter: '{b}: {c}%' }
              }]
            });

            // 分析看板图
            if (document.getElementById('analyticsChart')) {
              const analyticsChart = echarts.init(document.getElementById('analyticsChart'));
              analyticsChart.setOption({
                tooltip: { trigger: 'axis' },
                xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
                yAxis: { type: 'value' },
                series: [{ type: 'bar', data: [75, 72, 78, 80, 85, 82, 88] }]
              });
            }

            // 投手分析图
            if (document.getElementById('touhouChart')) {
              const touhouChart = echarts.init(document.getElementById('touhouChart'));
              touhouChart.setOption({
                tooltip: { trigger: 'item' },
                series: [{ type: 'pie', radius: '60%', data: [{ value: 75, name: '健康' }, { value: 25, name: '异常' }] }]
              });
            }

            // 财务图
            if (document.getElementById('financeChart')) {
              const financeChart = echarts.init(document.getElementById('financeChart'));
              financeChart.setOption({
                tooltip: { trigger: 'axis' },
                xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
                yAxis: { type: 'value', name: '消耗(元)' },
                series: [
                  { name: '预算', type: 'bar', data: [50000, 50000, 50000, 50000, 50000, 50000] },
                  { name: '实际消耗', type: 'bar', data: [42000, 48000, 51000, 45000, 52000, 49000] }
                ]
              });
            }

            // 客户端图
            if (document.getElementById('clientChart')) {
              const clientChart = echarts.init(document.getElementById('clientChart'));
              clientChart.setOption({
                tooltip: { trigger: 'axis' },
                xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
                yAxis: [{ type: 'value', name: '线索' }, { type: 'value', name: '消耗' }],
                series: [
                  { name: '线索量', type: 'bar', data: [120, 150, 180, 200, 170, 220, 250] },
                  { name: '消耗', type: 'line', yAxisIndex: 1, data: [1200, 1500, 1800, 2000, 1700, 2200, 2500] }
                ]
              });
            }

            // 系统后台图
            if (document.getElementById('systemChart')) {
              const systemChart = echarts.init(document.getElementById('systemChart'));
              systemChart.setOption({
                series: [{
                  type: 'gauge', startAngle: 180, endAngle: 0, min: 0, max: 100,
                  axisLine: { lineStyle: { width: 6, color: [[0.9, '#67C23A'], [1, '#F56C6C']] } },
                  pointer: { width: 5 },
                  axisTick: { distance: -20 },
                  splitLine: { distance: -20 },
                  axisLabel: { distance: -50 },
                  detail: { valueAnimation: true, formatter: '{value}%', fontSize: 24 },
                  data: [{ value: 99.9 }]
                }]
              });
            }
          });
        };

        onMounted(() => {
          if (isLoggedIn.value) {
            initCharts();
          }
        });

        return {
          isLoggedIn, logging, loginForm, userInfo, sidebarCollapsed, activeMenu,
          currentMenus, currentPortName,
          bossStats, pendingTasks, customers, customerSearch, accounts, campaigns, campaignStats,
          materials, originalMaterials, workOrders, alertStats, invalidAlerts, interruptAlerts,
          campaignData, scriptTemplates, cardTemplates, reportStats, reportData,
          touhouStats, touhouTasks, touhouCampaigns, touhouWorkOrders, touhouMaterials, touhouAlerts,
          editorStats, editorWorking, editorWorkOrders,
          financeStats, financeAccounts, financeReports,
          serviceStats, serviceCustomers, serviceDropAlerts, serviceAuthAlerts,
          clientStats, systemStats, engines, tokens,
          handleLogin, handleLogout, loadCustomers, showModal, viewCustomer
        };
      }
    }).mount('#app');
  </script>
</body>
</html>