shanxia2.0/docs/portal-mega-panel-width-demo.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>门户大面板宽度 · 一级菜单较少时</title>
  <style>
    :root {
      --primary: #10b981;
      --primary-dark: #059669;
      --primary-bg: #ecfdf5;
      --header: #1ca851;
      --text: #0f172a;
      --muted: #64748b;
      --border: #e2e8f0;
      --bg: #f1f5f9;
      --panel-min: 720px;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: var(--text);
      background: #f8fafc;
      line-height: 1.5;
    }
    .page { padding: 20px 24px 48px; max-width: 1280px; margin: 0 auto; }
    h1 { font-size: 22px; margin: 0 0 6px; }
    .lead { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
    .note {
      background: #fffbeb;
      border: 1px solid #fde68a;
      color: #92400e;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 13px;
      margin-bottom: 16px;
    }
    .ok {
      background: var(--primary-bg);
      border: 1px solid #a7f3d0;
      color: #065f46;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 13px;
      margin-bottom: 16px;
    }
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      align-items: center;
      margin-bottom: 16px;
      padding: 12px 14px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
    }
    .controls label {
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
      margin-right: 4px;
    }
    .seg {
      display: inline-flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .seg button {
      border: 1px solid var(--border);
      background: #fff;
      border-radius: 999px;
      padding: 7px 12px;
      font-size: 13px;
      cursor: pointer;
      color: #334155;
    }
    .seg button.active {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
      font-weight: 600;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
    }
    .card-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      background: #fafafa;
    }
    .card-head h2 {
      margin: 0 0 4px;
      font-size: 15px;
    }
    .card-head p {
      margin: 0;
      font-size: 12px;
      color: var(--muted);
    }
    .badge {
      flex-shrink: 0;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 999px;
      background: #e2e8f0;
      color: #475569;
    }
    .badge.bad { background: #fee2e2; color: #b91c1c; }
    .badge.good { background: #d1fae5; color: #047857; }
    .badge.rec { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
    .frame {
      height: 360px;
      background: var(--bg);
      position: relative;
      overflow: hidden;
    }
    .app {
      height: 100%;
      display: flex;
      flex-direction: column;
      font-size: 13px;
    }
    .top {
      position: relative;
      height: 56px;
      background: var(--header);
      display: flex;
      align-items: center;
      padding: 0 16px;
      flex-shrink: 0;
      color: #fff;
      z-index: 2;
    }
    .brand {
      font-weight: 700;
      font-size: 14px;
      flex-shrink: 0;
      margin-right: 12px;
    }
    .nav-slot {
      position: absolute;
      left: 50%;
      top: 0;
      height: 100%;
      transform: translateX(-50%);
      display: flex;
      align-items: stretch;
      justify-content: center;
      max-width: min(720px, calc(100% - 280px));
    }
    .l1 {
      display: flex;
      align-items: stretch;
      gap: 2px;
      height: 100%;
    }
    .l1-item {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 0 14px;
      height: 100%;
      white-space: nowrap;
      border: none;
      border-bottom: 4px solid transparent;
      background: transparent;
      color: #fff;
      font-size: 13px;
      cursor: pointer;
    }
    .l1-item.on {
      font-weight: 600;
      background: rgba(255, 255, 255, 0.14);
      border-bottom-color: #fff;
    }
    .l1-item .caret { font-size: 10px; opacity: 0.75; }
    .end {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      z-index: 1;
    }
    .avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, #6ee7b7, #34d399);
      border: 2px solid rgba(255, 255, 255, 0.4);
    }
    .main {
      flex: 1;
      position: relative;
      background: #eef2f7;
      overflow: hidden;
    }
    .page-fake {
      padding: 20px 24px;
      color: var(--muted);
      font-size: 13px;
    }
    .page-fake .bar {
      height: 10px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 6px;
      margin-bottom: 10px;
    }
    .page-fake .bar.w2 { width: 70%; }
    .page-fake .bar.w3 { width: 48%; }
    .mask {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.25);
      z-index: 3;
    }
    .panel {
      position: absolute;
      top: 0;
      z-index: 4;
      background: #fff;
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 10px 10px;
      box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
      max-height: calc(100% - 8px);
      overflow: auto;
    }
    .panel-body { padding: 12px 16px 16px; }
    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 16px;
    }
    .pane + .pane {
      padding-left: 16px;
      border-left: 1px solid var(--border);
    }
    .row {
      display: grid;
      grid-template-columns: 88px 1fr;
      gap: 8px 12px;
      padding: 10px 0;
      border-bottom: 1px solid #f1f5f9;
      align-items: start;
    }
    .row:last-child { border-bottom: 0; }
    .l2 {
      font-size: 12px;
      font-weight: 500;
      color: #666;
      padding-top: 4px;
    }
    .links { display: flex; flex-direction: column; gap: 2px; }
    .links span {
      font-size: 13px;
      font-weight: 500;
      color: #0f172a;
      padding: 3px 0;
    }
    .links span.on { color: var(--primary-dark); font-weight: 600; }
    .measure {
      position: absolute;
      top: 8px;
      right: 10px;
      z-index: 5;
      font-size: 11px;
      font-weight: 700;
      color: #b45309;
      background: #fffbeb;
      border: 1px solid #fde68a;
      border-radius: 6px;
      padding: 3px 8px;
      pointer-events: none;
    }
    .measure.ok-m {
      color: #047857;
      background: #ecfdf5;
      border-color: #a7f3d0;
    }
    .pick {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 16px;
    }
    .pick button {
      border: 1px solid var(--primary);
      background: var(--primary);
      color: #fff;
      border-radius: 8px;
      padding: 10px 16px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }
    .pick button.ghost {
      background: #fff;
      color: #334155;
      border-color: var(--border);
    }
    .pick button.alt {
      background: var(--primary-bg);
      color: var(--primary-dark);
    }
  </style>
</head>
<body>
  <div class="page">
    <h1>大面板宽度 Demo：一级菜单较少时</h1>
    <p class="lead">
      现状：二级大面板宽度 = 一级菜单区域宽度。权限较少（仅 2 / 4 个一级）时，面板会跟着变窄，两栏二级排不开。
    </p>
    <div class="note">
      先用上方开关模拟「一级数量」，再对比三种宽度策略。点选卡片或底部按钮告诉我偏好。
    </div>

    <div class="controls">
      <div>
        <label>一级菜单数量</label>
        <div class="seg" id="countSeg">
          <button type="button" data-count="2">2 个（窄权限）</button>
          <button type="button" data-count="4" class="active">4 个</button>
          <button type="button" data-count="7">7 个（接近满）</button>
        </div>
      </div>
      <div>
        <label>高亮模块</label>
        <div class="seg" id="activeSeg">
          <button type="button" class="active" data-active="0">第一个</button>
          <button type="button" data-active="1">第二个</button>
        </div>
      </div>
    </div>

    <div class="ok">
      推荐倾向：<strong>方案 B</strong> — 面板有最小宽度（如 720px），相对一级区域居中；一级很多时仍可随区域变宽，但不超过顶栏中间槽位上限。
    </div>

    <div class="grid" id="cards"></div>

    <div class="pick">
      <button type="button" class="alt" data-choice="a">选 A · 跟一级同宽（现状）</button>
      <button type="button" data-choice="b">选 B · 最小宽度居中（推荐）</button>
      <button type="button" class="ghost" data-choice="c">选 C · 固定铺满中间槽</button>
    </div>
  </div>

  <script>
    const ALL_L1 = ['CRM', '仓储', '质检', '财务', '系统', '报表', '运营']
    const PANEL_ROWS_LEFT = [
      { l2: '客户管理', links: ['客户列表', '联系人', '公海客户'] },
      { l2: '商机报价', links: ['商机列表', '报价单', '价格函'] },
      { l2: '合同订单', links: ['合同审批', '订单跟踪'] },
      { l2: '拜访计划', links: ['拜访日历', '拜访记录'] },
      { l2: '基础资料', links: ['产品目录', '单位管理'] }
    ]
    const PANEL_ROWS_RIGHT = [
      { l2: '审批中心', links: ['待办审批', '已办审批'] },
      { l2: '设置', links: ['审批人设置', '业务参数'] }
    ]

    const strategies = [
      {
        id: 'a',
        title: 'A · 跟一级区域同宽（现状）',
        desc: '面板 left/width 完全等于一级 nav 的 getBoundingClientRect。一级少 → 面板窄。',
        badge: '现状问题',
        badgeClass: 'bad',
        calc(navRect, slotMax) {
          return { left: navRect.left, width: navRect.width }
        }
      },
      {
        id: 'b',
        title: 'B · 最小宽度 + 相对一级居中（推荐）',
        desc: 'width = max(一级宽度, min(720, 槽位上限))，相对一级中心对齐；一级很多时仍可更宽。',
        badge: '推荐',
        badgeClass: 'rec',
        calc(navRect, slotMax, viewportW) {
          const minW = Math.min(720, slotMax, viewportW - 32)
          const width = Math.max(navRect.width, minW)
          const center = navRect.left + navRect.width / 2
          let left = center - width / 2
          left = Math.max(16, Math.min(left, viewportW - width - 16))
          return { left, width }
        }
      },
      {
        id: 'c',
        title: 'C · 始终铺满顶栏中间槽位',
        desc: '面板宽度固定为中间槽 max-width（约 720），与一级数量无关，始终居中于顶栏。',
        badge: '固定宽',
        badgeClass: 'good',
        calc(navRect, slotMax, viewportW, slotRect) {
          const width = Math.min(720, slotMax, viewportW - 32)
          const center = slotRect.left + slotRect.width / 2
          let left = center - width / 2
          left = Math.max(16, Math.min(left, viewportW - width - 16))
          return { left, width }
        }
      }
    ]

    let l1Count = 4
    let activeIdx = 0

    function rowHtml(row) {
      return `<div class="row">
        <div class="l2">${row.l2}</div>
        <div class="links">${row.links.map((t, i) => `<span class="${i === 0 ? 'on' : ''}">${t}</span>`).join('')}</div>
      </div>`
    }

    function panelInner() {
      return `<div class="panel-body">
        <div class="split">
          <div class="pane">${PANEL_ROWS_LEFT.map(rowHtml).join('')}</div>
          <div class="pane">${PANEL_ROWS_RIGHT.map(rowHtml).join('')}</div>
        </div>
      </div>`
    }

    function render() {
      const cards = document.getElementById('cards')
      cards.innerHTML = strategies.map((s) => `
        <div class="card" data-choice="${s.id}" onclick="window.__pick('${s.id}')">
          <div class="card-head">
            <div>
              <h2>${s.title}</h2>
              <p>${s.desc}</p>
            </div>
            <span class="badge ${s.badgeClass}">${s.badge}</span>
          </div>
          <div class="frame" id="frame-${s.id}">
            <div class="app">
              <div class="top">
                <div class="brand">山峡化工</div>
                <div class="nav-slot" id="slot-${s.id}">
                  <div class="l1" id="nav-${s.id}">
                    ${ALL_L1.slice(0, l1Count).map((name, i) => `
                      <button type="button" class="l1-item ${i === activeIdx ? 'on' : ''}">
                        <span>${name}</span><span class="caret">▾</span>
                      </button>
                    `).join('')}
                  </div>
                </div>
                <div class="end"><div class="avatar"></div></div>
              </div>
              <div class="main" id="main-${s.id}">
                <div class="page-fake">
                  <div class="bar"></div>
                  <div class="bar w2"></div>
                  <div class="bar w3"></div>
                  <p>内容区（示意）</p>
                </div>
                <div class="mask"></div>
                <div class="panel" id="panel-${s.id}">${panelInner()}</div>
                <div class="measure" id="measure-${s.id}"></div>
              </div>
            </div>
          </div>
        </div>
      `).join('')

      requestAnimationFrame(layoutPanels)
    }

    function layoutPanels() {
      strategies.forEach((s) => {
        const frame = document.getElementById(`frame-${s.id}`)
        const nav = document.getElementById(`nav-${s.id}`)
        const slot = document.getElementById(`slot-${s.id}`)
        const main = document.getElementById(`main-${s.id}`)
        const panel = document.getElementById(`panel-${s.id}`)
        const measure = document.getElementById(`measure-${s.id}`)
        if (!frame || !nav || !slot || !main || !panel) return

        const frameRect = frame.getBoundingClientRect()
        const navRect = nav.getBoundingClientRect()
        const slotRect = slot.getBoundingClientRect()
        const mainRect = main.getBoundingClientRect()
        const slotMax = Math.min(720, frameRect.width - 280)

        const localNav = {
          left: navRect.left - mainRect.left,
          width: navRect.width
        }
        const localSlot = {
          left: slotRect.left - mainRect.left,
          width: slotRect.width
        }
        const viewportW = mainRect.width

        const pos = s.calc(localNav, slotMax, viewportW, localSlot)
        panel.style.left = `${Math.round(pos.left)}px`
        panel.style.width = `${Math.round(pos.width)}px`

        const narrow = pos.width < 520
        measure.textContent = `面板宽 ≈ ${Math.round(pos.width)}px · 一级区 ≈ ${Math.round(navRect.width)}px`
        measure.className = `measure ${narrow ? '' : 'ok-m'}`
      })
    }

    window.__pick = function (id) {
      const names = { a: 'A 现状同宽', b: 'B 最小宽度居中', c: 'C 固定铺满中间槽' }
      alert(`已记录偏好：${names[id] || id}\n\n请在对话里回复确认，或继续改参数再看。`)
      if (typeof toggleSelect === 'function') {
        const el = document.querySelector(`[data-choice="${id}"]`)
        if (el) toggleSelect(el)
      }
    }

    document.getElementById('countSeg').addEventListener('click', (e) => {
      const btn = e.target.closest('button[data-count]')
      if (!btn) return
      l1Count = Number(btn.dataset.count)
      document.querySelectorAll('#countSeg button').forEach((b) => b.classList.toggle('active', b === btn))
      if (activeIdx >= l1Count) activeIdx = 0
      render()
    })

    document.getElementById('activeSeg').addEventListener('click', (e) => {
      const btn = e.target.closest('button[data-active]')
      if (!btn) return
      activeIdx = Math.min(Number(btn.dataset.active), l1Count - 1)
      document.querySelectorAll('#activeSeg button').forEach((b) => b.classList.toggle('active', b === btn))
      render()
    })

    document.querySelector('.pick').addEventListener('click', (e) => {
      const btn = e.target.closest('button[data-choice]')
      if (!btn) return
      window.__pick(btn.dataset.choice)
    })

    window.addEventListener('resize', layoutPanels)
    render()
  </script>
</body>
</html>