yuanlang12/openpipal/interactive-prototype

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
  <style>
    *{ box-sizing:border-box }
    html,body{ margin:0; height:100%; background:#e8e6e2 }
  </style>
</helmet>
 
<div style="min-height:100%; display:flex; align-items:center; justify-content:center; padding:32px 0">
  <x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx"
            title="Library" dark="{{ true }}" hint-size="402px,874px">
 
    <div style="position:relative; height:100%; overflow:hidden">
      <!-- 轨道：全篇唯一一处让空穴决定布局的地方——它是唯一会动的东西，其余几何一律内联 -->
      <div style="{{ track }}">
 
        <!-- 屏 1 · 列表 -->
        <div style="width:50%; height:100%; overflow:auto; padding-bottom:100px">
          <x-import component-from-global-scope="IOSList" from="./ios-frame.jsx" header="最近播放" dark="{{ true }}">
            <sc-for list="{{ songs }}" as="s" hint-placeholder-count="5">
              <div onClick="{{ s.open }}" style="cursor:pointer" style-active="opacity:.55">
                <x-import component-from-global-scope="IOSListRow" from="./ios-frame.jsx"
                          title="{{ s.name }}" detail="{{ s.len }}" icon="{{ s.tint }}" dark="{{ true }}"></x-import>
              </div>
            </sc-for>
          </x-import>
        </div>
 
        <!-- 屏 2 · 详情。不写 font-family：外框根节点已经铺了平台字体栈，这里继承 -->
        <div style="width:50%; height:100%; overflow:auto; padding:0 24px 100px">
          <div onClick="{{ back }}" style="display:inline-block; padding:14px 0; font-size:16px; color:#0a84ff; cursor:pointer">‹ 返回</div>
          <div style="height:220px; border-radius:22px; background:linear-gradient(160deg,#3a3a3c,#1c1c1e)"></div>
          <div style="margin-top:20px; font-size:26px; font-weight:600; color:#f5f5f7">{{ picked.name }}</div>
          <div style="margin-top:6px; font-size:15px; color:rgba(235,235,245,0.62)">{{ picked.len }}</div>
        </div>
      </div>
 
      <!-- 迷你播放条：轨道的兄弟，所以不跟着屏幕滚动 -->
      <x-import component-from-global-scope="IOSGlassPill" from="./ios-frame.jsx" dark="{{ true }}"
                style="position:absolute; left:16px; bottom:18px; width:370px; height:58px; padding:0 14px">
        <div style="display:flex; align-items:center; gap:12px; width:342px">
          <div style="width:34px; height:34px; border-radius:8px; background:{{ picked.tint }}"></div>
          <div style="flex:1; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">{{ picked.name }}</div>
          <div onClick="{{ toggle }}" style="font-size:16px; cursor:pointer" style-active="opacity:.5">{{ playIcon }}</div>
        </div>
      </x-import>
    </div>
  </x-import>
</div>
</x-dc>
 
<script type="text/x-dc" data-dc-script>
class Component extends DCLogic {
  state = { screen: 'list', picked: null, playing: false }
  renderVals() {
    const songs = [
      { name: '夜航', len: '3:24', tint: '#5b8def' },
      { name: '晚风', len: '4:02', tint: '#c2603f' },
      { name: '钝角', len: '2:47', tint: '#4f9e7a' }
    ]
    const shifted = this.state.screen === 'detail'
    return {
      songs: songs.map((s) => ({ ...s, open: () => this.setState({ screen: 'detail', picked: s }) })),
      picked: this.state.picked || songs[0],
      track: 'display:flex; width:200%; height:100%; transition:transform .38s cubic-bezier(.32,.72,0,1);' +
             ' transform:translateX(' + (shifted ? '-50%' : '0') + ')',
      back: () => this.setState({ screen: 'list' }),
      playIcon: this.state.playing ? '❚❚' : '▶',
      toggle: () => this.setState((s) => ({ playing: !s.playing }))
    }
  }
}
</script>
</body>
</html>

<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx"
          title="Settings" dark="{{ true }}" keyboard="{{ true }}" hint-size="402px,874px">
  …屏幕内容…
</x-import>

<div style="padding:14px 16px; background:var(--m3-secondaryContainer); color:var(--m3-onSecondaryContainer)">
  这块配色跟着外框的 dark 翻
</div>

--m3-surface  --m3-surfaceVariant  --m3-inverseOnSurface  --m3-secondaryContainer
--m3-onSurface  --m3-onSurfaceVariant  --m3-onSecondaryContainer  --m3-onPrimaryContainer
--m3-primary  --m3-onPrimary  --m3-primaryFixedDim
--m3-outline  --m3-outlineVariant  --m3-scrim  --m3-shadow