feat(devtools): 模拟器机身与状态栏改用 @devicekit/frame 绘制，窗口信息随机型与朝向变化

README.md

@@ -75,6 +75,8 @@ console.log(`预览地址: http://localhost:${session.port}`)
 | [`@dimina-kit/workbench`](./packages/workbench) | 内嵌式 VS Code 编辑器（`@codingame/monaco-vscode-api`），带 WXML 语言特性与 dimina 配置的 JSON Schema |
 | [`@dimina-kit/inspect`](./packages/inspect) | 与宿主无关的 WXML 树提取与检查：Vue 运行时遍历、稳定 id、DOM 变更观察 |
 | [`@dimina-kit/view-anchor`](./packages/view-anchor) | 让主进程的原生视图（Electron `WebContentsView`）持续对齐某个 DOM 元素的几何位置 |
+| [`@devicekit/devices`](https://www.npmjs.com/package/@devicekit/devices) | 手机和平板的机型表：屏幕、像素比、状态栏、安全区、挖孔、UA，以及页面可用尺寸的换算。不碰 DOM。已独立为开源项目（[EchoTechFE/devicekit](https://github.com/EchoTechFE/devicekit)） |
+| [`@devicekit/frame`](https://www.npmjs.com/package/@devicekit/frame) | `<device-frame>` 自定义元素：画机身、状态栏和挖孔，留出标题栏和 tab 栏，报出 webview 该摆在哪。已独立为开源项目（[EchoTechFE/devicekit](https://github.com/EchoTechFE/devicekit)） |
 | [`@dimina-kit/design`](./packages/design) | devtools 那套外观：CSS 变量、基础样式、electron-deck 皮肤、Tailwind preset |
 | [`@dimina-kit/fs-core`](./packages/fs-core) | 零依赖的 OPFS WAL 文件系统内核，供 Web 端使用 |
 

packages/demo-app/app.json

@@ -7,6 +7,9 @@
     "pages/component-test/component-test",
     "pages/swiper-test/swiper-test",
     "pages/audio-test/audio-test",
+    "pages/safe-area-test/safe-area-test",
+    "pages/navbar-color-test/navbar-color-test",
+    "pages/fullscreen-test/fullscreen-test",
     "pages/tabbar-me/tabbar-me"
   ],
   "window": {
@@ -20,8 +23,14 @@
     "backgroundColor": "#ffffff",
     "borderStyle": "black",
     "list": [
-      { "pagePath": "pages/index/index", "text": "首页" },
-      { "pagePath": "pages/tabbar-me/tabbar-me", "text": "我的" }
+      {
+        "pagePath": "pages/index/index",
+        "text": "首页"
+      },
+      {
+        "pagePath": "pages/tabbar-me/tabbar-me",
+        "text": "我的"
+      }
     ]
   }
 }

packages/demo-app/app.wxss

@@ -158,3 +158,27 @@ page {
   background: #eee;
   margin: 24rpx 0;
 }
+
+/* 键值信息行，多个测试页共用 */
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12rpx 0;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.info-row:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.info-value {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+}

packages/demo-app/pages/fullscreen-test/fullscreen-test.js

@@ -1,7 +1,24 @@
 Page({
   data: {
     statusBarHeight: 0,
-    navHeight: 0
+    navHeight: 0,
+    envTop: '-'
+  },
+
+  onReady() {
+    this.measureEnvTop()
+  },
+
+  onResize() {
+    this.measureEnvTop()
+  },
+
+  measureEnvTop() {
+    wx.createSelectorQuery().select('#env-top-probe').boundingClientRect((rect) => {
+      const envTop = rect ? `${Math.round(rect.height * 100) / 100}px` : 'n/a'
+      console.log('[Fullscreen] env(safe-area-inset-top) 实测:', envTop)
+      this.setData({ envTop })
+    }).exec()
   },
 
   onLoad() {

packages/demo-app/pages/fullscreen-test/fullscreen-test.wxml

@@ -23,6 +23,16 @@
         <text class="info-label">导航栏总高度</text>
         <text class="info-value">{{navHeight}}px</text>
       </view>
+      <view class="info-row">
+        <text class="info-label">env(safe-area-inset-top) 实测</text>
+        <text class="info-value">{{envTop}}</text>
+      </view>
+    </view>
+
+    <view class="section">
+      <view class="section-title">env(safe-area-inset-top) 探针</view>
+      <view class="env-top-probe" id="env-top-probe"></view>
+      <view class="desc">这条红色条的高度直接绑定 env(safe-area-inset-top)。取消导航栏后页面从屏幕顶部开始，它应当等于状态栏高度；带导航栏的页面里它是 0。</view>
     </view>
 
     <view class="section">

packages/demo-app/pages/fullscreen-test/fullscreen-test.wxss

@@ -51,3 +51,10 @@
   color: #666;
   line-height: 1.6;
 }
+
+.env-top-probe {
+  height: env(safe-area-inset-top);
+  background: #ff7875;
+  border-radius: 6rpx;
+  margin-bottom: 12rpx;
+}

packages/demo-app/pages/index/index.js

@@ -42,6 +42,27 @@ Page({
         title: 'Audio 音频测试',
         subtitle: '验证 createInnerAudioContext 的容器→service 事件桥',
         tags: ['audio', 'createInnerAudioContext', '事件桥']
+      },
+      {
+        path: '/pages/safe-area-test/safe-area-test',
+        icon: '\u{1F4D0}',
+        title: '安全区域 env() 测试',
+        subtitle: '实测 env(safe-area-inset-*) 与 wx safeArea，切机型/横竖屏自动重量',
+        tags: ['env()', 'safeArea', 'onResize']
+      },
+      {
+        path: '/pages/navbar-color-test/navbar-color-test',
+        icon: '\u{1F3A8}',
+        title: '导航栏颜色测试',
+        subtitle: 'setNavigationBarColor / Title / Loading，状态栏文字跟随 frontColor',
+        tags: ['setNavigationBarColor', 'frontColor', 'animation']
+      },
+      {
+        path: '/pages/fullscreen-test/fullscreen-test',
+        icon: '\u{1F5BC}',
+        title: '取消导航栏测试',
+        subtitle: 'navigationStyle: custom，页面顶到状态栏，自绘导航栏',
+        tags: ['navigationStyle', 'custom', 'safe-area-inset-top']
       }
     ],
     deviceInfo: {}

packages/demo-app/pages/index/index.wxss

@@ -40,25 +40,3 @@
   margin-left: 16rpx;
 }
 
-.info-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12rpx 0;
-  border-bottom: 1rpx solid #f5f5f5;
-}
-
-.info-row:last-child {
-  border-bottom: none;
-}
-
-.info-label {
-  font-size: 28rpx;
-  color: #666;
-}
-
-.info-value {
-  font-size: 28rpx;
-  color: #333;
-  font-weight: 500;
-}

packages/demo-app/pages/navbar-color-test/navbar-color-test.js

@@ -0,0 +1,82 @@
+// wx.setNavigationBarColor / setNavigationBarTitle / showNavigationBarLoading 的效果页。
+// frontColor 只接受 #ffffff 和 #000000；状态栏文字颜色应跟着 frontColor 一起变。
+const PRESETS = [
+  { name: '白字 · 深灰', frontColor: '#ffffff', backgroundColor: '#1f2937' },
+  { name: '黑字 · 浅灰', frontColor: '#000000', backgroundColor: '#f5f5f5' },
+  { name: '白字 · 品牌蓝', frontColor: '#ffffff', backgroundColor: '#4A90D9' },
+  { name: '黑字 · 暖黄', frontColor: '#000000', backgroundColor: '#ffd666' },
+  { name: '白字 · 玫红', frontColor: '#ffffff', backgroundColor: '#eb2f96' }
+]
+
+Page({
+  data: {
+    presets: PRESETS,
+    current: { frontColor: '#ffffff', backgroundColor: '#1f2937' },
+    lastResult: '（尚未调用）',
+    loading: false,
+    titleCount: 0
+  },
+
+  onLoad() {
+    console.log('[NavBarColor] 页面加载')
+  },
+
+  applyPreset(e) {
+    const preset = PRESETS[Number(e.currentTarget.dataset.index)]
+    this.setColor(preset.frontColor, preset.backgroundColor)
+  },
+
+  applyAnimated() {
+    const next = this.data.current.backgroundColor === '#722ed1' ? '#13c2c2' : '#722ed1'
+    this.setColor('#ffffff', next, { duration: 600, timingFunc: 'easeInOut' })
+  },
+
+  applyInvalidFront() {
+    // 非法 frontColor：官方只允许 #ffffff / #000000，这里故意传红色看回调怎么报
+    this.setColor('#ff0000', '#1f2937')
+  },
+
+  setColor(frontColor, backgroundColor, animation) {
+    const params = { frontColor, backgroundColor }
+    if (animation) params.animation = animation
+    console.log('[NavBarColor] setNavigationBarColor', params)
+    wx.setNavigationBarColor({
+      ...params,
+      success: (res) => {
+        console.log('[NavBarColor] success', res)
+        this.setData({
+          current: { frontColor, backgroundColor },
+          lastResult: `success: ${JSON.stringify(params)}`
+        })
+      },
+      fail: (err) => {
+        console.error('[NavBarColor] fail', err)
+        this.setData({ lastResult: `fail: ${err && err.errMsg ? err.errMsg : JSON.stringify(err)}` })
+      }
+    })
+  },
+
+  changeTitle() {
+    const titleCount = this.data.titleCount + 1
+    const title = `标题已改 ${titleCount} 次`
+    wx.setNavigationBarTitle({
+      title,
+      success: () => this.setData({ titleCount, lastResult: `setNavigationBarTitle: ${title}` }),
+      fail: (err) => this.setData({ lastResult: `setNavigationBarTitle fail: ${err && err.errMsg}` })
+    })
+  },
+
+  toggleLoading() {
+    const loading = !this.data.loading
+    if (loading) {
+      wx.showNavigationBarLoading()
+    } else {
+      wx.hideNavigationBarLoading()
+    }
+    this.setData({ loading, lastResult: loading ? 'showNavigationBarLoading' : 'hideNavigationBarLoading' })
+  },
+
+  goCustomNav() {
+    wx.navigateTo({ url: '/pages/fullscreen-test/fullscreen-test' })
+  }
+})

packages/demo-app/pages/navbar-color-test/navbar-color-test.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "导航栏颜色",
+  "navigationBarBackgroundColor": "#1f2937",
+  "navigationBarTextStyle": "white"
+}

packages/demo-app/pages/navbar-color-test/navbar-color-test.wxml

@@ -0,0 +1,35 @@
+<view class="container">
+  <view class="page-title">导航栏颜色</view>
+  <view class="page-desc">本页 json 里设了深灰底白字；下面的按钮在运行时改颜色、标题和加载态。状态栏文字应跟随 frontColor 一起变黑/变白。</view>
+
+  <view class="section">
+    <view class="section-title">wx.setNavigationBarColor</view>
+    <view class="preset-list">
+      <view class="preset" wx:for="{{presets}}" wx:key="name" data-index="{{index}}" bindtap="applyPreset" style="background: {{item.backgroundColor}}; color: {{item.frontColor}};">
+        <text class="preset-name">{{item.name}}</text>
+        <text class="preset-code">{{item.frontColor}} / {{item.backgroundColor}}</text>
+      </view>
+    </view>
+    <button class="btn btn-info" bindtap="applyAnimated">带动画切换（600ms easeInOut）</button>
+    <button class="btn btn-warning" bindtap="applyInvalidFront">非法 frontColor（#ff0000）</button>
+  </view>
+
+  <view class="section">
+    <view class="section-title">标题与加载态</view>
+    <button class="btn btn-primary" bindtap="changeTitle">wx.setNavigationBarTitle</button>
+    <button class="btn btn-default" bindtap="toggleLoading">{{loading ? 'hideNavigationBarLoading' : 'showNavigationBarLoading'}}</button>
+  </view>
+
+  <view class="section">
+    <view class="section-title">当前状态</view>
+    <view class="info-row"><text class="info-label">frontColor</text><text class="info-value">{{current.frontColor}}</text></view>
+    <view class="info-row"><text class="info-label">backgroundColor</text><text class="info-value">{{current.backgroundColor}}</text></view>
+    <view class="info-row"><text class="info-label">最近一次调用</text></view>
+    <view class="result-area">{{lastResult}}</view>
+  </view>
+
+  <view class="section">
+    <view class="section-title">相关页面</view>
+    <button class="btn btn-default" bindtap="goCustomNav">取消导航栏（navigationStyle: custom）</button>
+  </view>
+</view>

packages/demo-app/pages/navbar-color-test/navbar-color-test.wxss

@@ -0,0 +1,26 @@
+.preset-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+  margin-bottom: 20rpx;
+}
+
+.preset {
+  flex: 1 1 40%;
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+  padding: 20rpx;
+  border-radius: 12rpx;
+  border: 2rpx solid rgba(0, 0, 0, 0.08);
+}
+
+.preset-name {
+  font-size: 28rpx;
+  font-weight: 600;
+}
+
+.preset-code {
+  font-size: 22rpx;
+  opacity: 0.8;
+}