Compressor/3d/static/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 部件查看与配色</title>
<style>
  :root {
    --bg: #14161a;
    --panel: #1d2128;
    --panel-2: #242a33;
    --border: #333a45;
    --text: #d6dbe2;
    --text-dim: #8b93a1;
    --accent: #4da3ff;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--bg); color: var(--text);
    overflow: hidden; font-size: 13px;
  }
  #app { display: flex; flex-direction: column; height: 100vh; }

  /* ---------- top bar (固定 60px) ---------- */
  header {
    display: flex; align-items: center; gap: 14px;
    height: 48px; padding: 0 16px; background: var(--panel);
    border-bottom: 1px solid var(--border); flex: 0 0 auto;
  }
  header h1 { font-size: 15px; font-weight: 600; }
  .spacer { flex: 1; }
  .tool label { color: var(--text-dim); margin-right: 6px; }
  select {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 4px 8px; font-size: 13px;
  }
  #saveStatus { color: var(--text-dim); font-size: 12px; }

  /* ---------- view angle buttons ---------- */
  .view-group { display: flex; gap: 6px; align-items: center; }
  .view-btn {
    background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer;
  }
  .view-btn:hover { border-color: var(--accent); color: #fff; }
  .view-btn.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

  /* ---------- 时序切换进度 ---------- */
  #cycleProgress {
    display: none; background: #2b5fa8; color: #fff; border-radius: 999px;
    padding: 3px 12px; font-size: 12px; font-weight: 600; letter-spacing: .3px;
    white-space: nowrap;
  }

  /* ---------- main area ---------- */
  main { flex: 1; display: flex; min-height: 0; }
  #viewport { flex: 1; position: relative; min-width: 0; background: #0f1115; }
  #viewport canvas { display: block; }

  /* ---------- 悬浮卡片（黑底 30% 透明） ---------- */
  .glass {
    background: rgba(0, 0, 0, .7);
    border: 1px solid var(--border);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  #dataPanel {
    position: absolute; left: 20px; top: 20px; bottom: 20px; width: 300px;
    z-index: 8; display: flex; flex-direction: column; overflow: hidden;
    padding: 12px 14px;
  }
  #dataPanel h3, .card h3 {
    font-size: 12px; color: var(--text-dim); font-weight: 600; letter-spacing: .5px;
  }
  #dataPanel .placeholder {
    margin-top: 10px; color: var(--text-dim); font-size: 12px; opacity: .8;
  }
  #extPanel {
    position: absolute; right: 20px; top: 20px; bottom: 20px; width: 300px;
    z-index: 8; display: flex; flex-direction: column; gap: 12px;
    overflow-y: auto; pointer-events: none;
  }
  .card {
    pointer-events: auto;
    padding: 12px 14px; flex: 0 0 auto;
  }
  .card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
  }
  .text-btn {
    background: none; border: none; color: var(--accent);
    font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 6px;
  }
  .text-btn:hover { background: rgba(77,163,255,.15); }

  /* ---------- 部件状态控制 ---------- */
  .preset-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .preset-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--panel-2); border: 1px solid var(--border);
    color: var(--text); border-radius: 6px; padding: 6px 4px;
    font-size: 12px; cursor: pointer; white-space: nowrap;
  }
  .preset-btn:hover { border-color: var(--accent); }
  .preset-btn .dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
  .part-detail { margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--text); }
  .part-detail .dline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .part-detail .dim { color: var(--text-dim); white-space: normal; }
  .card-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }

  /* ---------- 场景位置 ---------- */
  #camInfo {
    color: var(--text-dim); font-size: 12px; line-height: 1.6;
    white-space: pre; font-variant-numeric: tabular-nums;
  }

  /* ---------- 视口浮层 ---------- */
  #hint {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px;
    color: var(--text-dim); font-size: 12px;
    background: rgba(0,0,0,.45); padding: 5px 10px; border-radius: 6px; pointer-events: none;
    z-index: 4;
  }
  #tooltip {
    position: absolute; display: none; pointer-events: none;
    background: rgba(0,0,0,.75); color: #fff; padding: 4px 8px;
    border-radius: 5px; font-size: 12px; white-space: nowrap; z-index: 20;
  }
  #loading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); font-size: 14px; z-index: 5;
  }

  /* ---------- 部件查询弹窗（白底黑字） ---------- */
  #partModal {
    position: fixed; inset: 0; z-index: 50; display: none;
    background: rgba(0,0,0,.55); align-items: center; justify-content: center;
  }
  #partModal.show { display: flex; }
  .modal {
    width: min(880px, 92vw); max-height: 84vh; background: #fff; color: #1a1a1a;
    border-radius: 12px; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
  }
  .modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid #e7e9ec;
  }
  .modal-head h3 { font-size: 14px; color: #111; font-weight: 600; }
  .modal-close {
    background: none; border: none; font-size: 22px; line-height: 1;
    cursor: pointer; color: #888; padding: 0 4px;
  }
  .modal-close:hover { color: #222; }
  .modal .search { margin: 12px 16px 8px; position: relative; }
  .modal .search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); }
  .modal .search input {
    width: 100%; background: #f3f4f6; border: 1px solid #d9dce1; color: #111;
    border-radius: 8px; padding: 7px 10px 7px 30px; font-size: 13px;
  }
  .modal .search input:focus { outline: none; border-color: var(--accent); background: #fff; }

  .part-table { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0 8px 8px; }
  .part-row {
    display: grid;
    grid-template-columns: 1fr 74px 74px 156px 104px 64px;
    gap: 8px; align-items: center; padding: 6px 8px;
    border-radius: 6px; cursor: pointer; border-bottom: 1px solid #f1f2f4;
    color: #222; font-size: 12px;
  }
  .part-row.head {
    color: #6b7280; font-weight: 600; cursor: default; background: #fafbfc;
    position: sticky; top: 0; z-index: 1;
  }
  .part-row:not(.head):hover { background: #f2f7ff; }
  .part-row.selected { background: #e3efff; }
  .part-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .part-row .vtx, .part-row .tri, .part-row .size {
    font-variant-numeric: tabular-nums; color: #555;
  }
  .part-row .color { display: flex; align-items: center; gap: 5px; color: #555; }
  .part-row .swatch {
    width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto;
    border: 1px solid rgba(0,0,0,.25); display: inline-block;
  }
  .part-row .tag {
    font-size: 10px; border-radius: 4px; padding: 1px 7px; color: #fff; white-space: nowrap;
  }
  .part-row .status { color: #888; }
  #partList { flex: 1; overflow-y: auto; }
  #partList::-webkit-scrollbar { width: 8px; }
  #partList::-webkit-scrollbar-thumb { background: #cfd4db; border-radius: 4px; }
  #partListNote { display: none; padding: 12px; text-align: center; color: #8b93a1; font-size: 12px; }
</style>
</head>
<body>
<div id="app">
  <header>
    <h1>3D 部件查看与配色</h1>
    <div class="tool">
      <label>模型</label>
      <select id="modelSelect"></select>
    </div>
    <span id="partCount" class="tool" style="color:var(--text-dim)"></span>
    <div class="spacer"></div>
    <span id="cycleProgress"></span>
    <div class="view-group" id="viewBtns"></div>
    <button class="view-btn" id="rotModeBtn" title="切换 轨道旋转 / 自由旋转">自由旋转</button>
    <span id="saveStatus"></span>
  </header>

  <main>
    <div id="viewport">
      <div id="loading">模型加载中…</div>
      <div id="tooltip"></div>
      <div id="hint">左键拖动=旋转 · 滚轮=缩放 · 右键拖动=平移 · 点击部件=选中</div>

      <!-- 左：数据区域（占位，固定撑满视口高度） -->
      <div id="dataPanel" class="glass">
        <h3>数据区域</h3>
        <div class="placeholder">内容待定…</div>
      </div>

      <!-- 右：扩展区域（高度撑满，内容随卡片） -->
      <div id="extPanel">
        <section class="card glass">
          <div class="card-head">
            <h3>部件状态控制</h3>
            <button class="text-btn" id="resetAll" title="全部恢复默认颜色">全部恢复</button>
          </div>
          <div class="preset-row" id="presetRow"></div>
          <div class="part-detail" id="partDetail"></div>
          <div class="card-foot">
            <button class="text-btn" id="openParts">打开查询部件…</button>
          </div>
        </section>

        <section class="card glass">
          <div class="card-head"><h3>场景位置</h3></div>
          <div id="camInfo"></div>
        </section>
      </div>
    </div>
  </main>
</div>

<!-- 部件查询弹窗 -->
<div id="partModal">
  <div class="modal">
    <div class="modal-head">
      <h3>查询部件</h3>
      <button class="modal-close" id="closeParts" title="关闭">×</button>
    </div>
    <div class="search">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8b93a1" stroke-width="2">
        <circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/>
      </svg>
      <input type="text" id="search" placeholder="搜索部件名称…">
    </div>
    <div class="part-table">
      <div class="part-row head">
        <span class="name">名称</span>
        <span class="vtx">顶点数</span>
        <span class="tri">三角面</span>
        <span class="size">尺寸 (x×y×z)</span>
        <span class="color">颜色</span>
        <span class="status">状态</span>
      </div>
      <div id="partList"></div>
    </div>
    <div id="partListNote"></div>
  </div>
</div>

<script type="importmap">
{
  "imports": {
    "three": "/js/three.module.js"
  }
}
</script>
<script type="module" src="/js/main.js"></script>
</body>
</html>