<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard — Claude Design System</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<style>
:root {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F5F5;
  --bg-card: #FAFAFA;
  --text-primary: #0D0D0D;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --accent: #D97757;
  --accent-hover: #C56545;
  --accent-bg: rgba(217,119,87,0.08);
  --border: #E5E5E5;
  --border-light: #F0F0F0;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.08);
  --sidebar-bg: #FAFAFA;
  --sidebar-width: 240px;
  --success: #2E8B57;
  --warning: #D4A017;
}

[data-theme="dark"] {
  --bg-primary: #0D0D0D;
  --bg-secondary: #1A1A1A;
  --bg-card: #141414;
  --text-primary: #F5F5F5;
  --text-secondary: #999999;
  --text-tertiary: #666666;
  --accent: #E8916A;
  --accent-hover: #F0A585;
  --accent-bg: rgba(232,145,106,0.1);
  --border: #2A2A2A;
  --border-light: #1F1F1F;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --sidebar-bg: #0F0F0F;
  --success: #3CB371;
  --warning: #DAA520;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background 0.4s ease, color 0.4s ease;
  display: flex;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: background 0.4s ease;
}
.sidebar-logo {
  padding: 24px 28px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.5px;
  border-bottom: 1px solid var(--border);
}
.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  margin-bottom: 2px;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item:hover { background: var(--bg-secondary); color: var(--text-primary); }
.nav-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 500; }
.nav-section {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 20px 16px 8px;
}

/* ---- Theme Toggle ---- */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 1001;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  padding: 0;
  transition: all 0.2s;
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle:hover { background: var(--border); }

/* ---- Main Content ---- */
.main {
  margin-left: var(--sidebar-width);
  flex: 1;
  padding: 40px 48px;
  min-width: 0;
}

/* ---- Header ---- */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
}
.page-title {
  font-size: 32px;
  font-weight: 200;
  letter-spacing: -1px;
  margin-bottom: 6px;
}
.page-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 400;
}

/* ---- Stat Cards ---- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  transition: border-color 0.25s;
}
.stat-card:hover { border-color: var(--accent); }
.stat-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.stat-card-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.stat-card-icon { color: var(--accent); width: 20px; height: 20px; }
.stat-card-icon svg { width: 20px; height: 20px; }
.stat-card-value {
  font-size: 36px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -1.5px;
}
.stat-card-change {
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
}
.stat-card-change.up { color: var(--success); }
.stat-card-change.down { color: var(--warning); }

/* ---- Chart Placeholder ---- */
.chart-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
}
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.panel-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.3px;
}
.panel-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 400;
  margin-top: 2px;
}
.chart-placeholder {
  height: 240px;
  background: var(--bg-secondary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 14px;
}

/* ---- Activity List ---- */
.activity-list { list-style: none; }
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 5px;
  flex-shrink: 0;
}
.activity-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.activity-time {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ---- Table ---- */
.table-wrap {
  overflow-x: auto;
}
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table th {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-align: left;
  padding: 12px 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td {
  padding: 16px 20px;
  font-size: 14px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}
.table tr:last-child td { border-bottom: none; }
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 12px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}
.badge-success { background: rgba(46,139,87,0.1); color: var(--success); }
.badge-warning { background: rgba(212,160,23,0.1); color: var(--warning); }

@media (max-width: 768px) {
  .sidebar { display: none; }
  .main { margin-left: 0; padding: 24px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .chart-section { grid-template-columns: 1fr; }
  .page-title { font-size: 24px; }
}
</style>
</head>
<body>

<button class="theme-toggle" id="themeToggle" onclick="toggleTheme()" title="切换暗色模式">
  <i data-lucide="moon" id="themeIcon"></i>
</button>

<aside class="sidebar">
  <div class="sidebar-logo">NOVA</div>
  <nav class="sidebar-nav">
    <a class="nav-item active">
      <i data-lucide="layout-dashboard"></i> 仪表盘
    </a>
    <a class="nav-item">
      <i data-lucide="file-text"></i> 项目
    </a>
    <a class="nav-item">
      <i data-lucide="users"></i> 团队
    </a>
    <div class="nav-section">分析</div>
    <a class="nav-item">
      <i data-lucide="bar-chart-3"></i> 数据报告
    </a>
    <a class="nav-item">
      <i data-lucide="activity"></i> 性能监控
    </a>
    <div class="nav-section">管理</div>
    <a class="nav-item">
      <i data-lucide="settings"></i> 设置
    </a>
    <a class="nav-item">
      <i data-lucide="help-circle"></i> 帮助中心
    </a>
  </nav>
</aside>

<main class="main">
  <!-- Header -->
  <header class="page-header">
    <div>
      <h1 class="page-title">仪表盘</h1>
      <p class="page-subtitle">欢迎回来，以下是今日数据概览</p>
    </div>
    <div style="display:flex; gap:10px;">
      <a href="#" class="btn-ghost" style="text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:8px;font-size:13px;">
        <i data-lucide="download" style="width:14px;height:14px;"></i> 导出报表
      </a>
    </div>
  </header>

  <!-- Stats Row -->
  <div class="stats-row">
    <div class="stat-card">
      <div class="stat-card-header">
        <span class="stat-card-label">总收入</span>
        <i data-lucide="dollar-sign" class="stat-card-icon"></i>
      </div>
      <div class="stat-card-value">&yen;128,430</div>
      <div class="stat-card-change up">&uarr; 12.5% vs 上月</div>
    </div>
    <div class="stat-card">
      <div class="stat-card-header">
        <span class="stat-card-label">活跃用户</span>
        <i data-lucide="users" class="stat-card-icon"></i>
      </div>
      <div class="stat-card-value">2,847</div>
      <div class="stat-card-change up">&uarr; 8.2% vs 上月</div>
    </div>
    <div class="stat-card">
      <div class="stat-card-header">
        <span class="stat-card-label">转化率</span>
        <i data-lucide="percent" class="stat-card-icon"></i>
      </div>
      <div class="stat-card-value">3.24<span style="font-size:18px;font-weight:300;">%</span></div>
      <div class="stat-card-change down">&darr; 0.5% vs 上月</div>
    </div>
    <div class="stat-card">
      <div class="stat-card-header">
        <span class="stat-card-label">平均响应</span>
        <i data-lucide="clock" class="stat-card-icon"></i>
      </div>
      <div class="stat-card-value">48<span style="font-size:18px;font-weight:300;">ms</span></div>
      <div class="stat-card-change up">&uarr; 15ms 更快</div>
    </div>
  </div>

  <!-- Chart + Activity -->
  <div class="chart-section">
    <div class="panel">
      <div class="panel-header">
        <div>
          <div class="panel-title">收入趋势</div>
          <div class="panel-subtitle">最近 30 天每日收入</div>
        </div>
      </div>
      <div class="chart-placeholder">
        <span style="display:flex;align-items:center;gap:8px;">
          <i data-lucide="bar-chart-3" style="width:20px;height:20px;"></i>
          图表数据区域
        </span>
      </div>
    </div>

    <div class="panel">
      <div class="panel-header">
        <div>
          <div class="panel-title">最近活动</div>
          <div class="panel-subtitle">团队实时动态</div>
        </div>
      </div>
      <ul class="activity-list">
        <li class="activity-item">
          <span class="activity-dot"></span>
          <div>
            <div class="activity-text"><strong style="font-weight:500;">张明</strong> 发布了新版本 v2.3.1</div>
            <div class="activity-time">3 分钟前</div>
          </div>
        </li>
        <li class="activity-item">
          <span class="activity-dot"></span>
          <div>
            <div class="activity-text"><strong style="font-weight:500;">李婷</strong> 创建了新项目 "Dashboard Pro"</div>
            <div class="activity-time">18 分钟前</div>
          </div>
        </li>
        <li class="activity-item">
          <span class="activity-dot"></span>
          <div>
            <div class="activity-text"><strong style="font-weight:500;">王浩</strong> 完成了一笔 &yen;4,800 订单</div>
            <div class="activity-time">42 分钟前</div>
          </div>
        </li>
        <li class="activity-item">
          <span class="activity-dot"></span>
          <div>
            <div class="activity-text"><strong style="font-weight:500;">系统</strong> 自动备份完成</div>
            <div class="activity-time">1 小时前</div>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <!-- Table -->
  <div class="panel">
    <div class="panel-header">
      <div>
        <div class="panel-title">最近订单</div>
        <div class="panel-subtitle">共 248 条记录</div>
      </div>
      <span style="font-size:13px;color:var(--accent);cursor:pointer;font-weight:500;">查看全部 &rarr;</span>
    </div>
    <div class="table-wrap">
    <table class="table">
      <thead>
        <tr>
          <th>订单编号</th>
          <th>客户</th>
          <th>产品</th>
          <th>金额</th>
          <th>状态</th>
          <th>日期</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="color:var(--accent);font-weight:500;">#ORD-2401</td>
          <td>陈思远</td>
          <td>Pro Plan · 年度</td>
          <td>&yen;8,880</td>
          <td><span class="badge badge-success">已完成</span></td>
          <td style="color:var(--text-secondary);">2026-07-01</td>
        </tr>
        <tr>
          <td style="color:var(--accent);font-weight:500;">#ORD-2402</td>
          <td>赵雨晴</td>
          <td>Starter Plan · 月度</td>
          <td>&yen;299</td>
          <td><span class="badge badge-success">已完成</span></td>
          <td style="color:var(--text-secondary);">2026-06-30</td>
        </tr>
        <tr>
          <td style="color:var(--accent);font-weight:500;">#ORD-2403</td>
          <td>周明辉</td>
          <td>Enterprise Plan</td>
          <td>&yen;48,000</td>
          <td><span class="badge badge-warning">处理中</span></td>
          <td style="color:var(--text-secondary);">2026-06-29</td>
        </tr>
        <tr>
          <td style="color:var(--accent);font-weight:500;">#ORD-2404</td>
          <td>林小雅</td>
          <td>Pro Plan · 年度</td>
          <td>&yen;8,880</td>
          <td><span class="badge badge-success">已完成</span></td>
          <td style="color:var(--text-secondary);">2026-06-28</td>
        </tr>
        <tr>
          <td style="color:var(--accent);font-weight:500;">#ORD-2405</td>
          <td>吴天翊</td>
          <td>Starter Plan · 月度</td>
          <td>&yen;299</td>
          <td><span class="badge badge-warning">待支付</span></td>
          <td style="color:var(--text-secondary);">2026-06-27</td>
        </tr>
      </tbody>
    </table>
    </div>
  </div>
</main>

<style>
.btn-ghost { background:transparent; color:var(--text-primary); border:1px solid var(--border); font-family:inherit; cursor:pointer; transition:all 0.2s; }
.btn-ghost:hover { border-color: var(--text-primary); }
</style>

<script>
let isDark = false;
function toggleTheme() {
  isDark = !isDark;
  document.documentElement.setAttribute('data-theme', isDark ? 'dark' : '');
  document.getElementById('themeIcon').setAttribute('data-lucide', isDark ? 'sun' : 'moon');
  lucide.createIcons({ icons: { sun: lucide.icons.Sun, moon: lucide.icons.Moon }, attrs: { 'stroke-width': 1.5 } });
  try { localStorage.setItem('theme-dash', isDark ? 'dark' : 'light'); } catch(e) {}
}
(function() {
  try {
    if (localStorage.getItem('theme-dash') === 'dark') {
      isDark = true;
      document.documentElement.setAttribute('data-theme', 'dark');
      document.getElementById('themeIcon').setAttribute('data-lucide', 'sun');
    }
  } catch(e) {}
  lucide.createIcons({ attrs: { 'stroke-width': 1.5 } });
})();
</script>
</body>
</html>
