<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BeeImg 图床 - 客户订单管理系统</title>
  <link rel="stylesheet" href="/assets/style.css?v=4">
</head>
<body>
  <!-- 移动端顶栏 -->
  <div class="mobile-header">
    <button class="hamburger" onclick="openSidebar()" aria-label="打开菜单">☰</button>
    <span class="mobile-title">客户订单管理系统</span>
  </div>
  <!-- 侧栏遮罩 -->
  <div class="sidebar-overlay" id="sidebar-overlay" onclick="closeSidebar()"></div>
  <div class="layout">
    <aside class="sidebar" id="sidebar">
      <div class="brand">
        <span class="logo">⚡</span>
        <div class="brand-text">
          <div class="brand-title">客户订单管理系统</div>
          <small class="brand-sub">龙生源 · 假发跨境</small>
        </div>
        <button class="mobile-close" onclick="closeSidebar()" aria-label="关闭菜单">✕</button>
        <button class="sidebar-toggle" id="sidebarToggle" title="折叠/展开">☰</button>
      </div>
      <nav class="nav">
                <div class="nav-group  " data-group="0">
          <a href="/" class="active" >
            <span class="icon">📊</span>
            <span class="label">仪表盘</span>
                      </a>
                  </div>
                <div class="nav-group  " data-group="1">
          <a href="/customers.php" class="" >
            <span class="icon">👥</span>
            <span class="label">客户管理</span>
                      </a>
                  </div>
                <div class="nav-group  " data-group="2">
          <a href="/products.php" class="" >
            <span class="icon">📋</span>
            <span class="label">产品+价格</span>
                      </a>
                  </div>
                <div class="nav-group  " data-group="3">
          <a href="/media.php" class="" >
            <span class="icon">🖼</span>
            <span class="label">素材中心</span>
                      </a>
                  </div>
                <div class="nav-group  " data-group="4">
          <a href="/beeimg.php" class="active" >
            <span class="icon">☁️</span>
            <span class="label">图床上传</span>
                      </a>
                  </div>
                <div class="nav-group  " data-group="5">
          <a href="/quote.php" class="" >
            <span class="icon">✏️</span>
            <span class="label">新建报价</span>
                      </a>
                  </div>
                <div class="nav-group  " data-group="6">
          <a href="/quotes.php" class="" >
            <span class="icon">📑</span>
            <span class="label">报价记录</span>
                      </a>
                  </div>
                <div class="nav-group  " data-group="7">
          <a href="/orders.php" class="" >
            <span class="icon">📃</span>
            <span class="label">订单管理</span>
                      </a>
                  </div>
                <div class="nav-group  " data-group="8">
          <a href="/mes.php" class="" >
            <span class="icon">🔧</span>
            <span class="label">MES 查询</span>
                      </a>
                  </div>
              </nav>
    </aside>
    <main class="main">
      <h1>BeeImg 图床</h1>
<p class="page-sub">上传图片至 BeeImg 图床 / 管理已上传图片 / 删除图片</p>

<div class="stats" style="margin-bottom:16px;">
  <div class="stat"><div class="l">API 地址</div><div class="n" style="font-size:16px;">https://beeimg.com</div></div>
  <div class="stat">
    <div class="l">Token 状态</div>
    <div class="n" style="font-size:16px;">
              <span class="tag green">已配置</span>
          </div>
  </div>
</div>

<div class="grid2" style="gap:16px;">
  <!-- 左：配置 -->
  <div class="card">
    <h2>⚙️ 配置</h2>
    <form method="post">
      <div style="margin-bottom:12px;">
        <label>API 地址</label>
        <input name="base_url" value="https://beeimg.com" placeholder="https://beeimg.com">
      </div>
      <div style="margin-bottom:12px;">
        <label>Bearer Token</label>
        <input name="token" value="6468|95TAEca42s43Aun9ucQgmVNnVbbFnNebqrmTbOZU3f95a7dd" placeholder="从 BeeImg 后台获取" style="font-family:monospace;">
        <div class="muted" style="font-size:11px;margin-top:4px;">用户 → Tokens → 创建 Token</div>
      </div>
      <button type="submit" name="save_beeimg" class="btn primary">保存配置</button>
    </form>
  </div>

  <!-- 右：快速上传 -->
  <div class="card">
    <h2>📤 快速上传</h2>
        <div style="border:2px dashed var(--border-subtle);border-radius:16px;padding:32px 16px;text-align:center;cursor:pointer;" id="dropZone" onclick="document.getElementById('beeimgFile').click()">
      <div style="font-size:48px;margin-bottom:8px;">📁</div>
      <div style="color:var(--text-secondary);">点击选择图片文件</div>
      <div class="muted" style="font-size:12px;margin-top:4px;">JPG/PNG/GIF ≤ 10MB</div>
      <input type="file" id="beeimgFile" accept="image/*" style="display:none" onchange="beeimgUpload(this)">
    </div>
    <div id="beeimgResult" style="margin-top:12px;display:none;">
      <div style="font-size:13px;color:var(--success);margin-bottom:8px;">✅ 上传成功</div>
      <div style="display:flex;gap:8px;align-items:center;">
        <img id="beeimgPreview" style="width:60px;height:60px;object-fit:cover;border-radius:8px;border:1px solid var(--border-subtle);" alt="">
        <div style="flex:1;min-width:0;">
          <div style="font-size:11px;color:var(--text-secondary);">Image ID：<span id="beeimgId"></span></div>
          <div id="beeimgUrl" style="font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></div>
        </div>
        <button class="btn ghost sm" onclick="copyBeeImgUrl()">📋 复制</button>
      </div>
    </div>
  </div>
</div>

<div class="card" style="margin-top:16px;">
  <h2>📸 已上传图片</h2>
  <div id="beeimgListArea">
    <div class="muted" style="padding:20px;text-align:center;">加载中...</div>
  </div>
</div>

<script>
// 上传
async function beeimgUpload(input) {
  const file = input.files[0];
  if (!file) return;
  if (file.size > 10*1024*1024) { alert('文件超过 10MB'); return; }
  document.getElementById('beeimgResult').style.display = 'none';
  document.getElementById('dropZone').innerHTML = '<div class="muted">⏳ 上传中...</div>';
  const fd = new FormData();
  fd.append('file', file);
  try {
    const r = await fetch('/beeimg.php?action=upload', { method: 'POST', body: fd });
    const d = await r.json();
    if (!d.ok) { alert('上传失败：' + (d.error||'')); document.getElementById('dropZone').innerHTML = '点击重新上传'; return; }
    document.getElementById('dropZone').innerHTML = '<div style="font-size:48px;margin-bottom:8px;">📁</div><div style="color:var(--text-secondary);">点击选择图片文件</div><div class="muted" style="font-size:12px;margin-top:4px;">JPG/PNG/GIF ≤ 10MB</div>';
    document.getElementById('beeimgPreview').src = d.url;
    document.getElementById('beeimgId').textContent = d.id;
    document.getElementById('beeimgUrl').textContent = d.url;
    document.getElementById('beeimgResult').style.display = 'block';
    loadBeeImgList();
  } catch(e) { alert('网络错误：' + e.message); document.getElementById('dropZone').innerHTML = '点击重新上传'; }
}

// 复制 URL
function copyBeeImgUrl() {
  const url = document.getElementById('beeimgUrl').textContent;
  navigator.clipboard.writeText(url).then(() => alert('已复制'));
}

// 加载列表
async function loadBeeImgList() {
  const area = document.getElementById('beeimgListArea');
  area.innerHTML = '<div class="muted" style="padding:20px;text-align:center;">⏳ 加载中...</div>';
  try {
    const r = await fetch('/beeimg.php?action=list&per_page=60');
    const d = await r.json();
    if (!d.ok) { area.innerHTML = '<div class="empty">加载失败：' + d.error + '</div>'; return; }
    const items = d.data?.data || [];
    if (items.length === 0) { area.innerHTML = '<div class="empty">暂无图片</div>'; return; }
    let html = '<div class="dim-grid" style="grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));">';
    items.forEach(p => {
      const url = p.public_url || p.thumbnail_url || '';
      html += '<div class="dim-card" style="grid-template-columns:1fr;align-items:stretch;padding:8px;position:relative;">' +
        '<img src="' + url + '" style="width:100%;height:120px;object-fit:cover;border-radius:8px;" alt="" onclick="window.open(\'' + url + '\')">' +
        '<div style="font-size:11px;color:var(--text-secondary);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin-top:6px;">' + (p.name || '') + '</div>' +
        '<div class="muted" style="font-size:10px;">#' + p.id + '</div>' +
        '<button class="btn danger sm" onclick="beeimgDelete(' + p.id + ')" style="position:absolute;top:12px;right:12px;padding:2px 6px;min-height:0;font-size:11px;opacity:.7;border-radius:6px;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=.7">删</button>' +
        '</div>';
    });
    html += '</div>';
    area.innerHTML = html;
  } catch(e) { area.innerHTML = '<div class="empty">网络错误：' + e.message + '</div>'; }
}

// 删除
async function beeimgDelete(id) {
  if (!confirm('删除图片 #' + id + '？')) return;
  try {
    const r = await fetch('/beeimg.php?action=delete', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ids: [id] })
    });
    const d = await r.json();
    if (d.ok) { loadBeeImgList(); if (typeof toast === 'function') toast('✓ 已删除'); }
    else alert('删除失败：' + (d.error||''));
  } catch(e) { alert('网络错误：' + e.message); }
}

loadBeeImgList();
</script>
    </main>
  </div>
  <div class="toast" id="toast"></div>
  <!-- 移动端底部导航（仅手机可见） -->
  <nav class="mobile-tabbar" id="mobile-tabbar">
        <a class="tab-item " href="/">
      <span class="tab-icon">📊</span>
      <span class="tab-label">仪表盘</span>
    </a>
        <a class="tab-item " href="/customers.php">
      <span class="tab-icon">👥</span>
      <span class="tab-label">客户管理</span>
    </a>
        <a class="tab-item " href="/products.php">
      <span class="tab-icon">📋</span>
      <span class="tab-label">产品+价格</span>
    </a>
        <a class="tab-item " href="/media.php">
      <span class="tab-icon">🖼</span>
      <span class="tab-label">素材中心</span>
    </a>
        <a class="tab-item active" href="/beeimg.php">
      <span class="tab-icon">☁️</span>
      <span class="tab-label">图床上传</span>
    </a>
      </nav>
  <script src="/assets/app.js?v=5"></script>
  <script>
  // 折叠/展开一级菜单
  function toggleNavGroup(a, idx) {
    if (a.getAttribute('href') !== 'javascript:void(0)') return true;
    var group = a.parentNode;
    group.classList.toggle('open');
    return false;
  }
  // 侧边栏整体折叠（图标模式）
  document.getElementById('sidebarToggle').addEventListener('click', function () {
    document.getElementById('sidebar').classList.toggle('collapsed');
  });
  // 移动端侧栏开关
  function openSidebar() {
    document.getElementById('sidebar').classList.add('open');
    if (!/768/.test(window.matchMedia('(max-width:768px)').matches)) return;
    document.getElementById('sidebar-overlay').classList.add('show');
    document.body.classList.add('no-scroll');
  }
  function closeSidebar() {
    document.getElementById('sidebar').classList.remove('open');
    document.getElementById('sidebar-overlay').classList.remove('show');
    document.body.classList.remove('no-scroll');
  }
  document.getElementById('sidebar-overlay').addEventListener('click', closeSidebar);
  // Flash 消息
  <br />
<b>Warning</b>:  session_start(): Session cannot be started after headers have already been sent in <b>/www/wwwroot/dd.qianxng.cn/functions.php</b> on line <b>31</b><br />
  </script>
</body>
</html>