feat(mobile): split iOS, Android, and HarmonyOS shells (#334 #335 #336)

CHANGELOG.md

@@ -7,6 +7,8 @@
 
 ### Added
 
+- #334 #335 #336：手机壳按 iOS / Android / HarmonyOS 拆开，UA 分流；可用 `?platform=` 强制切换。
+
 - #329：手机打开 RoleWeave 时进入原生手机壳（组织 / 指令 / 桌面 / 设置），而不是缩过的桌面工作台。组织页只读预览 `examples/oss-maintainer`；回合仍在已打开的电脑桌面执行。
 
 - #328 R2：新增 `semantic-runtime.v1alpha1` 合同切片（BusinessObjectRef / EvidenceRef / DecisionRecord / ActionProposal / ExecutionReceipt）与 Ontology Runtime 术语表；github-ops 示例给出只读分析与可写 squash-merge 轨迹；纯函数测试覆盖「未批准不可执行、非法过期时间 fail-closed、幂等重试绑定目标版本、目标版本失效、运行前状态不可直接失败、indeterminate 不能变成 succeeded」。不是 live GitHub 执行，也不是 Sales Workbench 核心词汇。设计说明见 `docs/design/ontology-runtime-r2.md`。

apps/mobile-web/android/app.css

@@ -0,0 +1,72 @@
+:root {
+  color-scheme: dark;
+  --md-bg: #131316;
+  --md-surface: #1b1b1f;
+  --md-ink: #e6e1e5;
+  --md-muted: #cac4d0;
+  --md-line: #49454f;
+  --md-accent: #7aa2ff;
+  --md-on-accent: #001b3f;
+  font-family: Roboto, "Noto Sans SC", system-ui, sans-serif;
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; min-height: 100%; background: var(--md-bg); color: var(--md-ink); }
+body {
+  min-height: 100dvh;
+  padding: 0 0 calc(80px + env(safe-area-inset-bottom));
+  overscroll-behavior: contain;
+  touch-action: manipulation;
+}
+.md-bar {
+  padding: max(12px, env(safe-area-inset-top)) 16px 16px;
+  background: var(--md-surface);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
+}
+.md-bar__over { margin: 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-accent); }
+.md-bar h1 { margin: 6px 0 0; font-size: 22px; font-weight: 500; }
+.md-body, .host-status, #command-status { margin: 16px; color: var(--md-muted); line-height: 1.5; }
+.panel[hidden] { display: none; }
+.md-list { list-style: none; margin: 0; padding: 0; }
+.md-list .role, .md-settings li {
+  width: 100%; min-height: 72px; padding: 16px;
+  border: 0; border-bottom: 1px solid var(--md-line);
+  background: var(--md-surface); color: inherit; font: inherit; text-align: left;
+  display: grid; gap: 4px;
+}
+.md-list .role:active { background: #2b2930; }
+.md-sheet { margin: 16px; padding: 16px; background: var(--md-surface); border-radius: 12px; display: grid; gap: 8px; }
+.md-stack { display: grid; gap: 12px; margin: 16px; }
+label { font-size: 12px; color: var(--md-muted); }
+input, textarea {
+  width: 100%; padding: 16px; border-radius: 4px 4px 0 0; border: 0; border-bottom: 2px solid var(--md-accent);
+  background: #2b2930; color: inherit; font: inherit;
+}
+input { letter-spacing: 0.35em; font-size: 22px; text-align: center; }
+.md-fab {
+  min-height: 48px; display: flex; align-items: center; justify-content: center;
+  border: 0; border-radius: 16px; background: var(--md-accent); color: var(--md-on-accent);
+  font: inherit; font-weight: 600; text-decoration: none;
+}
+.md-text {
+  min-height: 48px; display: flex; align-items: center; justify-content: center;
+  border: 0; background: transparent; color: var(--md-accent); font: inherit; text-decoration: none;
+}
+.md-nav {
+  position: fixed; left: 0; right: 0; bottom: 0;
+  display: grid; grid-template-columns: repeat(4, 1fr);
+  height: calc(80px + env(safe-area-inset-bottom));
+  padding-bottom: env(safe-area-inset-bottom);
+  background: var(--md-surface); border-top: 1px solid var(--md-line);
+}
+.tab {
+  min-height: 48px; border: 0; background: transparent; color: var(--md-muted);
+  font-size: 12px; font-weight: 500;
+}
+.tab.is-active { color: var(--md-accent); background: #2b2930; }
+.error { color: #f2b8b5; }
+.meta { display: flex; gap: 8px; flex-wrap: wrap; }
+.chip { font-size: 12px; color: var(--md-muted); }
+.detail pre, #command-summary { white-space: pre-wrap; color: var(--md-muted); font: 13px/1.45 ui-monospace, monospace; }
+button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
+  outline: 2px solid var(--md-accent); outline-offset: 2px;
+}

apps/mobile-web/android/app.mjs

@@ -0,0 +1 @@
+import "/shared/shell.mjs";

apps/mobile-web/android/index.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="zh-CN" data-platform="android">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="theme-color" content="#1b1b1f">
+    <title>RoleWeave</title>
+    <link rel="stylesheet" href="/android/app.css">
+  </head>
+  <body>
+    <header class="md-bar">
+      <p class="md-bar__over">RoleWeave · Android</p>
+      <h1 id="workspace-name">工作区</h1>
+    </header>
+    <main id="main">
+      <section id="panel-org" class="panel is-active" data-panel="org" aria-label="组织">
+        <p id="org-lead" class="md-body">正在读取组织…</p>
+        <ol id="role-list" class="md-list"></ol>
+        <article id="role-detail" class="md-sheet" hidden></article>
+      </section>
+      <section id="panel-command" class="panel" data-panel="command" hidden aria-label="指令">
+        <p class="md-body">发给电脑上已打开的 RoleWeave。员工在电脑上跑。</p>
+        <p id="host-status" class="host-status">正在查看电脑是否在线…</p>
+        <form id="claim-form" class="md-stack">
+          <button type="submit" id="claim" class="md-fab">连接这台电脑</button>
+        </form>
+        <form id="pair-form" class="md-stack">
+          <label for="code">6 位配对码</label>
+          <input id="code" name="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]{6}">
+          <button type="submit" class="md-text">配对</button>
+        </form>
+        <form id="command-form" class="md-stack" hidden>
+          <label for="text">指令</label>
+          <textarea id="text" name="text" rows="4" maxlength="4000"></textarea>
+          <button type="submit" class="md-fab">发给电脑</button>
+        </form>
+        <p id="command-status" role="status">尚未连接。</p>
+        <pre id="command-summary" hidden></pre>
+      </section>
+      <section id="panel-desktop" class="panel" data-panel="desktop" hidden aria-label="桌面">
+        <p class="md-body">完整工作台在电脑上。需要时再打开远程桌面。</p>
+        <a class="md-fab" href="/desktop">打开远程桌面</a>
+      </section>
+      <section id="panel-settings" class="panel" data-panel="settings" hidden aria-label="设置">
+        <ul class="md-list md-settings">
+          <li><span>平台</span><strong>Android</strong></li>
+          <li><span>组织数据</span><strong id="org-source">尚未同步</strong></li>
+          <li><span>这台手机</span><strong id="device-state">未连接</strong></li>
+          <li><span>回合</span><strong>电脑宿主执行</strong></li>
+        </ul>
+        <button type="button" id="revoke" class="md-text" hidden>断开这台手机</button>
+        <a class="md-text" href="/?surface=desktop">打开桌面版</a>
+      </section>
+    </main>
+    <nav class="md-nav" aria-label="主要功能">
+      <button type="button" class="tab is-active" data-tab="org" aria-current="page">组织</button>
+      <button type="button" class="tab" data-tab="command">指令</button>
+      <button type="button" class="tab" data-tab="desktop">桌面</button>
+      <button type="button" class="tab" data-tab="settings">设置</button>
+    </nav>
+    <script type="module" src="/android/app.mjs"></script>
+  </body>
+</html>