糖果代码库GitCandy

master 
节点在线、应用在线、配置在线使用令牌查询
大石头 authored at 2021-12-16 19:49:30
11.81 KiB
History Raw
Stardust
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>发布部署 - 星尘分布式服务平台</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
  <style>
    html, body { height: 100%; margin: 0; }
    .layout { display: flex; height: 100vh; overflow: hidden; }

    .sidebar { width: 220px; min-width: 220px; background: #1a1f36; color: #c8cde4; display: flex; flex-direction: column; }
    .sidebar-brand { padding: 20px 16px 16px; border-bottom: 1px solid #2d3461; }
    .sidebar-brand a { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; }
    .sidebar-brand small { display: block; color: #8892b0; font-size: .75rem; margin-top: 2px; }
    .sidebar-nav { padding: 12px 0; flex: 1; overflow-y: auto; }
    .sidebar-nav .nav-section { padding: 8px 16px 4px; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #8892b0; }
    .sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 16px; color: #c8cde4; text-decoration: none; font-size: .9rem; transition: background .15s; }
    .sidebar-nav a:hover { background: #2d3461; color: #fff; }
    .sidebar-nav a.active { background: #3b4cca; color: #fff; }
    .sidebar-nav a i { font-size: 1rem; width: 18px; text-align: center; }

    .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .topbar { background: #fff; border-bottom: 1px solid #e9ecef; padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .topbar h6 { margin: 0; font-weight: 600; color: #1a1f36; }
    .content { flex: 1; overflow-y: auto; padding: 24px; background: #f0f2f5; }

    .deploy-card { background: #fff; border-radius: 10px; border: none; }
    .deploy-step { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f3f5; }
    .deploy-step:last-child { border-bottom: none; }
    .step-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .85rem; }
  </style>
</head>
<body>

<div class="layout">
  <nav class="sidebar">
    <div class="sidebar-brand">
      <a href="index.html"><i class="bi bi-stars me-1"></i>星尘平台</a>
      <small>Stardust v3.7</small>
    </div>
    <div class="sidebar-nav">
      <div class="nav-section">主导航</div>
      <a href="dashboard.html"><i class="bi bi-speedometer2"></i>仪表盘</a>
      <a href="project-workspace.html"><i class="bi bi-grid-1x2-fill"></i>项目工作台</a>
      <a href="projects.html"><i class="bi bi-collection-fill"></i>项目管理</a>
      <div class="nav-section">运维管理</div>
      <a href="nodes.html"><i class="bi bi-hdd-network-fill"></i>节点管理</a>
      <a href="monitor.html"><i class="bi bi-activity"></i>监控中心</a>
      <a href="deploy.html" class="active"><i class="bi bi-rocket-takeoff-fill"></i>发布部署</a>
      <div class="nav-section">配置</div>
      <a href="#"><i class="bi bi-sliders2-vertical"></i>配置中心</a>
      <a href="#"><i class="bi bi-shield-lock-fill"></i>注册中心</a>
    </div>
  </nav>

  <div class="main">
    <div class="topbar">
      <h6><i class="bi bi-rocket-takeoff-fill me-2" style="color:#7c3aed;"></i>发布部署</h6>
      <div class="d-flex align-items-center gap-2">
        <button class="btn btn-primary btn-sm"><i class="bi bi-plus-lg me-1"></i>新建发布</button>
        <span class="text-muted" style="font-size:.85rem;">admin</span>
        <i class="bi bi-bell text-muted"></i>
      </div>
    </div>

    <div class="content">
      <!-- Summary -->
      <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
          <div class="card border-0 rounded-3 text-center py-3">
            <div class="fs-2 fw-bold text-primary">12</div>
            <div class="text-muted small">应用总数</div>
          </div>
        </div>
        <div class="col-6 col-md-3">
          <div class="card border-0 rounded-3 text-center py-3">
            <div class="fs-2 fw-bold text-success">8</div>
            <div class="text-muted small">今日发布</div>
          </div>
        </div>
        <div class="col-6 col-md-3">
          <div class="card border-0 rounded-3 text-center py-3">
            <div class="fs-2 fw-bold text-warning">2</div>
            <div class="text-muted small">进行中</div>
          </div>
        </div>
        <div class="col-6 col-md-3">
          <div class="card border-0 rounded-3 text-center py-3">
            <div class="fs-2 fw-bold text-danger">1</div>
            <div class="text-muted small">发布失败</div>
          </div>
        </div>
      </div>

      <div class="row g-3">
        <!-- Deploy list -->
        <div class="col-lg-7">
          <div class="card border-0 rounded-3">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="fw-semibold mb-0">发布记录</h6>
                <div class="d-flex gap-2">
                  <select class="form-select form-select-sm" style="width:130px;">
                    <option>全部状态</option>
                    <option>成功</option>
                    <option>进行中</option>
                    <option>失败</option>
                  </select>
                </div>
              </div>
              <table class="table table-hover align-middle mb-0" style="font-size:.875rem;">
                <thead class="table-light">
                  <tr>
                    <th>应用</th>
                    <th>版本</th>
                    <th>目标节点</th>
                    <th>发布时间</th>
                    <th>状态</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><strong>OrderService</strong></td>
                    <td><code>v2.3.1</code></td>
                    <td>node-01, node-02</td>
                    <td class="text-muted">14:32</td>
                    <td><span class="badge bg-success">成功</span></td>
                    <td><button class="btn btn-sm btn-outline-secondary"><i class="bi bi-eye"></i></button></td>
                  </tr>
                  <tr>
                    <td><strong>UserService</strong></td>
                    <td><code>v1.8.0</code></td>
                    <td>node-03</td>
                    <td class="text-muted">14:15</td>
                    <td>
                      <span class="badge bg-primary">
                        <span class="spinner-border spinner-border-sm me-1" style="width:.6rem;height:.6rem;"></span>
                        发布中
                      </span>
                    </td>
                    <td><button class="btn btn-sm btn-outline-secondary"><i class="bi bi-eye"></i></button></td>
                  </tr>
                  <tr>
                    <td><strong>GatewayService</strong></td>
                    <td><code>v3.1.0</code></td>
                    <td>node-05</td>
                    <td class="text-muted">13:50</td>
                    <td><span class="badge bg-danger">失败</span></td>
                    <td><button class="btn btn-sm btn-outline-secondary"><i class="bi bi-eye"></i></button></td>
                  </tr>
                  <tr>
                    <td><strong>PaymentService</strong></td>
                    <td><code>v2.0.5</code></td>
                    <td>node-01, node-04</td>
                    <td class="text-muted">12:40</td>
                    <td><span class="badge bg-success">成功</span></td>
                    <td><button class="btn btn-sm btn-outline-secondary"><i class="bi bi-eye"></i></button></td>
                  </tr>
                  <tr>
                    <td><strong>NotifyService</strong></td>
                    <td><code>v1.2.3</code></td>
                    <td>node-06</td>
                    <td class="text-muted">11:20</td>
                    <td>
                      <span class="badge bg-primary">
                        <span class="spinner-border spinner-border-sm me-1" style="width:.6rem;height:.6rem;"></span>
                        发布中
                      </span>
                    </td>
                    <td><button class="btn btn-sm btn-outline-secondary"><i class="bi bi-eye"></i></button></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- Deploy detail / steps -->
        <div class="col-lg-5">
          <div class="card border-0 rounded-3 h-100">
            <div class="card-body">
              <h6 class="fw-semibold mb-1">OrderService v2.3.1 部署详情</h6>
              <p class="text-muted mb-3" style="font-size:.82rem;">node-01 · 完成于 14:32:10</p>
              <div class="deploy-step">
                <div class="step-icon bg-success text-white"><i class="bi bi-check-lg"></i></div>
                <div>
                  <div class="fw-semibold" style="font-size:.875rem;">拉取应用包</div>
                  <div class="text-muted" style="font-size:.8rem;">从 MinIO 下载 OrderService-2.3.1.zip（12.4 MB）</div>
                  <div class="text-muted" style="font-size:.78rem;">耗时 3.2s</div>
                </div>
              </div>
              <div class="deploy-step">
                <div class="step-icon bg-success text-white"><i class="bi bi-check-lg"></i></div>
                <div>
                  <div class="fw-semibold" style="font-size:.875rem;">停止旧版本</div>
                  <div class="text-muted" style="font-size:.8rem;">优雅停止 OrderService v2.3.0</div>
                  <div class="text-muted" style="font-size:.78rem;">耗时 1.8s</div>
                </div>
              </div>
              <div class="deploy-step">
                <div class="step-icon bg-success text-white"><i class="bi bi-check-lg"></i></div>
                <div>
                  <div class="fw-semibold" style="font-size:.875rem;">解压 &amp; 替换文件</div>
                  <div class="text-muted" style="font-size:.8rem;">解压并覆盖到 /app/OrderService/</div>
                  <div class="text-muted" style="font-size:.78rem;">耗时 0.9s</div>
                </div>
              </div>
              <div class="deploy-step">
                <div class="step-icon bg-success text-white"><i class="bi bi-check-lg"></i></div>
                <div>
                  <div class="fw-semibold" style="font-size:.875rem;">启动新版本</div>
                  <div class="text-muted" style="font-size:.8rem;">启动 OrderService v2.3.1</div>
                  <div class="text-muted" style="font-size:.78rem;">耗时 4.5s</div>
                </div>
              </div>
              <div class="deploy-step">
                <div class="step-icon bg-success text-white"><i class="bi bi-check-lg"></i></div>
                <div>
                  <div class="fw-semibold" style="font-size:.875rem;">健康检查</div>
                  <div class="text-muted" style="font-size:.8rem;">GET /health → 200 OK</div>
                  <div class="text-muted" style="font-size:.78rem;">耗时 0.3s</div>
                </div>
              </div>
              <div class="mt-3 p-2 rounded" style="background:#f0fdf4;font-size:.82rem;">
                <i class="bi bi-check-circle-fill text-success me-1"></i>
                部署成功，总耗时 <strong>10.7s</strong>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
English (United States)

© 2002-2026 新生命开发团队