@ponydev/dsh-phone 0.3.1 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,384 +0,0 @@
1
- <!doctype html>
2
- <html lang="zh-CN">
3
- <head>
4
- <meta charset="utf-8" />
5
- <title>dsh-phone · 布局草案 v2</title>
6
- <style>
7
- :root {
8
- --bg: #ffffff;
9
- --bg-side: #f7f7f8;
10
- --bg-soft: #f4f4f5;
11
- --border: #e9e9ec;
12
- --border-strong: #dededf;
13
- --text: #17171a;
14
- --text-2: #6f6f76;
15
- --text-3: #9a9aa1;
16
- --accent: #3b6cff;
17
- --accent-soft: #eef2ff;
18
- --green: #22c55e;
19
- --radius: 14px;
20
- --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
21
- }
22
- * { box-sizing: border-box; }
23
- html, body { margin: 0; height: 100%; }
24
- body { font-family: var(--font); color: var(--text); background: #ececee; -webkit-font-smoothing: antialiased; }
25
- .frame { width: 1440px; height: 900px; display: flex; background: var(--bg); margin: 0 auto; overflow: hidden; }
26
- svg { display: block; }
27
-
28
- /* ---------------- left sidebar ---------------- */
29
- .sidebar { width: 268px; flex: 0 0 268px; background: var(--bg-side); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 14px 10px 10px; }
30
- .brand { display: flex; align-items: center; gap: 8px; padding: 2px 8px 12px; }
31
- .brand .logo { width: 24px; height: 24px; border-radius: 7px; background: #17171a; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
32
- .brand .name { font-size: 13.5px; font-weight: 600; letter-spacing: .2px; }
33
- .newchat { margin: 0 2px 10px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; gap: 8px; padding: 0 11px; font-size: 13px; }
34
- .newchat kbd { margin-left: auto; font: 11px var(--font); color: var(--text-3); }
35
- .search { margin: 0 2px 12px; height: 30px; border-radius: 9px; background: #efeff1; display: flex; align-items: center; gap: 7px; padding: 0 9px; color: var(--text-3); font-size: 12.5px; }
36
- .sec { font-size: 11px; color: var(--text-3); padding: 4px 10px 6px; letter-spacing: .3px; }
37
- .sess { height: 34px; border-radius: 9px; display: flex; align-items: center; gap: 8px; padding: 0 9px; font-size: 13px; color: #3c3c42; margin-bottom: 1px; }
38
- .sess .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); flex: none; }
39
- .sess.active { background: #fff; box-shadow: 0 0 0 1px var(--border); font-weight: 500; color: var(--text); }
40
- .sess.active .dot { background: var(--accent); }
41
- .sess .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
42
- .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
43
- .foot-row { height: 38px; border-radius: 10px; display: flex; align-items: center; gap: 9px; padding: 0 9px; font-size: 12.5px; color: var(--text-2); }
44
- .foot-row .badge { margin-left: auto; font-size: 12px; color: var(--text); font-weight: 600; }
45
- .foot-row .pill { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
46
-
47
- /* ---------------- center ---------------- */
48
- .main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #fff; }
49
- .conv-head { height: 52px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 20px; }
50
- .conv-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
51
- .conv-sub { font-size: 12px; color: var(--text-3); }
52
- .head-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
53
- .iconbtn { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); background: transparent; border: 0; position: relative; }
54
- .iconbtn.active { background: var(--accent-soft); color: var(--accent); }
55
- .iconbtn .badge { position: absolute; top: 3px; right: 3px; min-width: 13px; height: 13px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 600; display: grid; place-items: center; padding: 0 3px; }
56
- .hair { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
57
- .transcript { flex: 1 1 auto; overflow: hidden; padding: 8px 0 0; display: flex; flex-direction: column; gap: 18px; }
58
- .turn { padding: 0 26px; }
59
- .turn.user { display: flex; justify-content: flex-end; }
60
- .bubble { max-width: 78%; background: #f4f4f6; border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-size: 13.5px; line-height: 1.62; color: #242428; }
61
- .assistant { font-size: 13.5px; line-height: 1.72; color: #26262b; max-width: 92%; }
62
- .assistant p { margin: 0 0 10px; }
63
- .assistant .muted { color: var(--text-2); }
64
- .inline-code { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; background: #f2f2f4; border-radius: 5px; padding: 1px 5px; color: #3b3b42; }
65
- .composer-wrap { flex: none; padding: 8px 26px 18px; }
66
- .composer { border: 1px solid var(--border-strong); border-radius: var(--radius); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.03); padding: 12px 14px 10px; }
67
- .composer .ph { font-size: 13.5px; color: var(--text-3); }
68
- .composer .bar { display: flex; align-items: center; gap: 6px; margin-top: 18px; }
69
- .chip { height: 26px; border-radius: 8px; border: 1px solid var(--border); background: #fff; display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 12px; color: var(--text-2); }
70
- .send { margin-left: auto; width: 30px; height: 30px; border-radius: 9px; background: #17171a; color: #fff; display: grid; place-items: center; }
71
-
72
- /* ---------------- right bar ---------------- */
73
- .rightbar { width: 540px; flex: 0 0 540px; border-left: 1px solid var(--border); display: flex; flex-direction: column; background: #fff; }
74
- .tabstrip { height: 44px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 8px; border-bottom: 1px solid var(--border); }
75
- .tab { height: 28px; border-radius: 8px; display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 12.5px; color: var(--text-2); }
76
- .tab .x { color: var(--text-3); margin-left: 2px; }
77
- .tab.active { background: var(--bg-soft); color: var(--text); font-weight: 500; }
78
- .strip-spacer { flex: 1 1 auto; }
79
- .strip-right { display: flex; align-items: center; gap: 2px; }
80
-
81
- /* panel toolbar — 参考 Codex Mobile Dev:设备下拉 + 一排图标,没有别的 */
82
- .panelbar { height: 42px; flex: none; display: flex; align-items: center; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--border); }
83
- .device-select { height: 28px; border-radius: 8px; display: flex; align-items: center; gap: 7px; padding: 0 8px; font-size: 12.5px; color: var(--text); background: var(--bg-soft); max-width: 240px; }
84
- .device-select .nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
85
- .device-select .chev { color: var(--text-3); }
86
- .panelbar .grow { flex: 1 1 auto; }
87
- .panelbar .iconbtn { width: 28px; height: 28px; color: var(--text-2); }
88
- .panelbar .iconbtn:hover { background: var(--bg-soft); }
89
-
90
- .pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
91
-
92
- /* device list — 只有型号 / serial / 状态,没有分辨率网速 */
93
- .devlist { padding: 8px 10px 14px; overflow: hidden; }
94
- .group { padding: 14px 10px 6px; font-size: 11px; letter-spacing: .4px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
95
- .group::after { content: ""; flex: 1; height: 1px; background: var(--border); }
96
- .dev { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; }
97
- .dev:hover { background: var(--bg-soft); }
98
- .dev.sel { background: var(--accent-soft); }
99
- .dev .ph-icon { width: 32px; height: 32px; border-radius: 9px; background: #f1f1f3; display: grid; place-items: center; color: #4b4b52; flex: none; position: relative; }
100
- .dev .ph-icon .on { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); border: 2px solid #fff; }
101
- .dev .meta { min-width: 0; flex: 1; }
102
- .dev .model { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
103
- .dev .model .tag { font-size: 10px; font-weight: 500; color: var(--text-2); background: #fff; border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }
104
- .dev .serial { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
105
- .dev .open { font-size: 12px; color: var(--text-3); }
106
- .dev:hover .open { color: var(--accent); }
107
- .list-foot { margin-top: auto; padding: 12px 18px 16px; display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-3); }
108
- .dot-live { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block; }
109
-
110
- /* mirror canvas — 灰底 + 设备机身,画面之外什么都不放 */
111
- .stage { flex: 1 1 auto; min-height: 0; background: #f2f2f4; display: flex; align-items: center; justify-content: center; position: relative; padding: 18px; }
112
- .bezels { position: relative; }
113
- .phone { position: relative; width: 252px; height: 548px; border-radius: 42px; background: #0b0b0d; padding: 9px; box-shadow: inset 0 0 0 1.5px #2c2c31, inset 0 0 0 4px #050506, 0 24px 48px rgba(0,0,0,.24); }
114
- .phone::after { content: ""; position: absolute; right: -3px; top: 132px; width: 3px; height: 54px; border-radius: 2px; background: #232327; }
115
- .phone::before { content: ""; position: absolute; left: -3px; top: 118px; width: 3px; height: 84px; border-radius: 2px; background: #232327; }
116
- .screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: linear-gradient(165deg, #dbe8ff 0%, #e9dcff 42%, #ffe4d2 100%); }
117
- .status { position: absolute; top: 0; left: 0; right: 0; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 10px; font-weight: 600; color: #1d1d22; z-index: 3; }
118
- .punch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: #0b0b0d; z-index: 4; }
119
- .apps { position: absolute; top: 70px; left: 20px; right: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 10px; }
120
- .app { display: flex; flex-direction: column; align-items: center; gap: 6px; }
121
- .app .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; }
122
- .app .nm { font-size: 8px; color: #26262b; }
123
- .dock { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 62px; border-radius: 24px; background: rgba(255,255,255,.55); display: flex; align-items: center; justify-content: space-around; }
124
- .dock .ic { width: 40px; height: 40px; border-radius: 12px; }
125
-
126
- .hidden { display: none !important; }
127
- </style>
128
- </head>
129
- <body>
130
- <div class="frame">
131
- <!-- LEFT -->
132
- <aside class="sidebar">
133
- <div class="brand"><div class="logo">D</div><div class="name">DeepSeek Harness</div></div>
134
- <div class="newchat">
135
- <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
136
- 新会话 <kbd>⌘N</kbd>
137
- </div>
138
- <div class="search">
139
- <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
140
- 搜索会话
141
- </div>
142
- <div class="sec">今天</div>
143
- <div class="sess active"><span class="dot"></span><span class="t">手机插件:右侧 adb 预览</span></div>
144
- <div class="sess"><span class="dot"></span><span class="t">dsh 有手机插件嘛?adb 的?</span></div>
145
- <div class="sess"><span class="dot"></span><span class="t">云手机 pony 的 adb 转发</span></div>
146
- <div class="sec" style="margin-top:8px">昨天</div>
147
- <div class="sess"><span class="dot"></span><span class="t">DeBox 日志导出脚本</span></div>
148
- <div class="sess"><span class="dot"></span><span class="t">RRWL release 流程梳理</span></div>
149
- <div class="side-foot">
150
- <div class="foot-row">
151
- <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="4" width="18" height="6" rx="2"/><rect x="3" y="14" width="18" height="6" rx="2"/></svg>
152
- 模型用量 <span class="badge">¥117.03</span><span class="pill"></span>
153
- </div>
154
- <div class="foot-row">
155
- <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.7 1.7 0 0 0-1.87-.34 1.7 1.7 0 0 0-1 1.55V21a2 2 0 1 1-4 0v-.09a1.7 1.7 0 0 0-1.11-1.55 1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.7 1.7 0 0 0 .34-1.87 1.7 1.7 0 0 0-1.55-1H3a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 4.64 9a1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.64h.09A1.7 1.7 0 0 0 10.64 3V3a2 2 0 1 1 4 0v.09a1.7 1.7 0 0 0 1 1.55 1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.36 9v.09a1.7 1.7 0 0 0 1.55 1H21a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.51 1Z"/></svg>
156
- 设置
157
- </div>
158
- </div>
159
- </aside>
160
-
161
- <!-- CENTER -->
162
- <main class="main">
163
- <header class="conv-head">
164
- <div class="conv-title">手机插件:右侧 adb 预览</div>
165
- <div class="conv-sub">· 3 个会话</div>
166
- <div class="head-right">
167
- <button class="iconbtn active" title="手机">
168
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><rect x="6.5" y="2.5" width="11" height="19" rx="2.6"/><path d="M10.5 18.6h3"/></svg>
169
- <span class="badge">5</span>
170
- </button>
171
- <button class="iconbtn" title="更多">
172
- <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></svg>
173
- </button>
174
- <div class="hair"></div>
175
- <button class="iconbtn" title="收起右侧栏">
176
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2.5"/><path d="M15 4v16M9 10l-2 2 2 2"/></svg>
177
- </button>
178
- </div>
179
- </header>
180
-
181
- <div class="transcript">
182
- <div class="turn user">
183
- <div class="bubble">手机插件就叫 dsh-phone,右侧只预览画面,别加分辨率网速,也不要输入框。</div>
184
- </div>
185
- <div class="turn">
186
- <div class="assistant">
187
- <p>明白,按 Codex Mobile Dev 那个右侧面板的样子收敛:顶上只有一行「设备下拉 + 几个图标按钮」,下面整块留给设备画面。</p>
188
- <p class="muted">本机现在有 5 台在线:Pixel 7a(USB)、100.107.25.26、100.90.248.53、云手机 pony / test。</p>
189
- </div>
190
- </div>
191
- </div>
192
-
193
- <div class="composer-wrap">
194
- <div class="composer">
195
- <div class="ph">继续输入…</div>
196
- <div class="bar">
197
- <div class="chip">
198
- <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v18M3 12h18"/></svg>
199
- 附件
200
- </div>
201
- <div class="chip">DeepSeek V4.1</div>
202
- <div class="send">
203
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M6 11l6-6 6 6"/></svg>
204
- </div>
205
- </div>
206
- </div>
207
- </div>
208
- </main>
209
-
210
- <!-- RIGHT -->
211
- <section class="rightbar">
212
- <div class="tabstrip">
213
- <div class="tab active">
214
- <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><rect x="6.5" y="2.5" width="11" height="19" rx="2.6"/><path d="M10.5 18.6h3"/></svg>
215
- 手机
216
- <span class="x">
217
- <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="m6 6 12 12M18 6 6 18"/></svg>
218
- </span>
219
- </div>
220
- <button class="iconbtn" style="width:26px;height:26px" title="新建 tab">
221
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
222
- </button>
223
- <button class="iconbtn" style="width:26px;height:26px" title="分屏">
224
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><rect x="3" y="4" width="18" height="16" rx="2.5"/><path d="M12 4v16"/></svg>
225
- </button>
226
- <div class="strip-spacer"></div>
227
- <div class="strip-right">
228
- <button class="iconbtn" style="width:26px;height:26px" title="全屏">
229
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
230
- </button>
231
- <button class="iconbtn" style="width:26px;height:26px" title="收起">
232
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
233
- </button>
234
- </div>
235
- </div>
236
-
237
- <div class="pane">
238
- <!-- toolbar: 设备下拉 + 图标,参考 Codex 一行搞定 -->
239
- <div class="panelbar" id="bar-list">
240
- <div class="device-select">
241
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><rect x="6.5" y="2.5" width="11" height="19" rx="2.6"/><path d="M10.5 18.6h3"/></svg>
242
- <span class="nm">选择设备</span>
243
- <svg class="chev" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
244
- </div>
245
- <div class="grow"></div>
246
- <button class="iconbtn" title="刷新设备">
247
- <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
248
- </button>
249
- <button class="iconbtn" title="连接设备">
250
- <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
251
- </button>
252
- </div>
253
-
254
- <div class="panelbar hidden" id="bar-device">
255
- <div class="device-select">
256
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><rect x="6.5" y="2.5" width="11" height="19" rx="2.6"/><path d="M10.5 18.6h3"/></svg>
257
- <span class="nm">Pixel 7a</span>
258
- <svg class="chev" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
259
- </div>
260
- <div class="grow"></div>
261
- <button class="iconbtn" title="返回">
262
- <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
263
- </button>
264
- <button class="iconbtn" title="主页">
265
- <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><circle cx="12" cy="12" r="7.5"/></svg>
266
- </button>
267
- <button class="iconbtn" title="多任务">
268
- <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><rect x="5.5" y="5.5" width="13" height="13" rx="2"/></svg>
269
- </button>
270
- <button class="iconbtn" title="截图">
271
- <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="6" width="18" height="14" rx="2.5"/><circle cx="12" cy="13" r="3.4"/><path d="M8 6l1.4-2h5.2L16 6"/></svg>
272
- </button>
273
- <button class="iconbtn" title="更多">
274
- <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></svg>
275
- </button>
276
- </div>
277
-
278
- <!-- LIST -->
279
- <div id="view-list" style="display:flex;flex-direction:column;height:100%;min-height:0">
280
- <div class="devlist">
281
- <div class="group">已连接</div>
282
- <div class="dev sel">
283
- <div class="ph-icon">
284
- <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="6.5" y="2.5" width="11" height="19" rx="2.6"/><path d="M10.5 18.6h3"/></svg>
285
- <span class="on"></span>
286
- </div>
287
- <div class="meta">
288
- <div class="model">Pixel 7a <span class="tag">USB</span></div>
289
- <div class="serial">34201JEHN07681</div>
290
- </div>
291
- <div class="open">›</div>
292
- </div>
293
- <div class="dev">
294
- <div class="ph-icon">
295
- <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="6.5" y="2.5" width="11" height="19" rx="2.6"/><path d="M10.5 18.6h3"/></svg>
296
- <span class="on"></span>
297
- </div>
298
- <div class="meta">
299
- <div class="model">Pixel 7a <span class="tag">Wi-Fi</span></div>
300
- <div class="serial">100.107.25.26:5555</div>
301
- </div>
302
- <div class="open">›</div>
303
- </div>
304
- <div class="dev">
305
- <div class="ph-icon">
306
- <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="6.5" y="2.5" width="11" height="19" rx="2.6"/><path d="M10.5 18.6h3"/></svg>
307
- <span class="on"></span>
308
- </div>
309
- <div class="meta">
310
- <div class="model">小米 13 <span class="tag">thor</span></div>
311
- <div class="serial">100.90.248.53:5555</div>
312
- </div>
313
- <div class="open">›</div>
314
- </div>
315
- <div class="group">云手机</div>
316
- <div class="dev">
317
- <div class="ph-icon">
318
- <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M7 18a4 4 0 0 1 .6-7.95A5.5 5.5 0 0 1 18.2 11 3.5 3.5 0 0 1 17.5 18Z"/></svg>
319
- <span class="on"></span>
320
- </div>
321
- <div class="meta">
322
- <div class="model">云手机 pony</div>
323
- <div class="serial">unicom-openclaw-pony:5555</div>
324
- </div>
325
- <div class="open">›</div>
326
- </div>
327
- <div class="dev">
328
- <div class="ph-icon">
329
- <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M7 18a4 4 0 0 1 .6-7.95A5.5 5.5 0 0 1 18.2 11 3.5 3.5 0 0 1 17.5 18Z"/></svg>
330
- <span class="on"></span>
331
- </div>
332
- <div class="meta">
333
- <div class="model">云手机 test</div>
334
- <div class="serial">unicom-openclaw-test:5555</div>
335
- </div>
336
- <div class="open">›</div>
337
- </div>
338
- </div>
339
- <div class="list-foot"><span class="dot-live"></span>5 台在线</div>
340
- </div>
341
-
342
- <!-- DEVICE -->
343
- <div id="view-device" class="hidden" style="display:flex;flex-direction:column;height:100%;min-height:0">
344
- <div class="stage">
345
- <div class="bezels">
346
- <div class="phone">
347
- <div class="screen">
348
- <div class="status"><span>9:41</span><span>5G ▮▮▮ 86%</span></div>
349
- <div class="punch"></div>
350
- <div class="apps">
351
- <div class="app"><div class="ic" style="background:#34a853">拨</div><div class="nm">电话</div></div>
352
- <div class="app"><div class="ic" style="background:#4285f4">消</div><div class="nm">信息</div></div>
353
- <div class="app"><div class="ic" style="background:#ea4335">邮</div><div class="nm">Gmail</div></div>
354
- <div class="app"><div class="ic" style="background:#1a73e8">地</div><div class="nm">地图</div></div>
355
- <div class="app"><div class="ic" style="background:#0f9d58">相</div><div class="nm">相册</div></div>
356
- <div class="app"><div class="ic" style="background:#fbbc04">设</div><div class="nm">设置</div></div>
357
- <div class="app"><div class="ic" style="background:#673ab7">De</div><div class="nm">DeBox</div></div>
358
- <div class="app"><div class="ic" style="background:#00bcd4">dsh</div><div class="nm">dsh</div></div>
359
- </div>
360
- <div class="dock">
361
- <div class="ic" style="background:#34a853"></div>
362
- <div class="ic" style="background:#4285f4"></div>
363
- <div class="ic" style="background:#ea4335"></div>
364
- <div class="ic" style="background:#fbbc04"></div>
365
- </div>
366
- </div>
367
- </div>
368
- </div>
369
- </div>
370
- </div>
371
- </div>
372
- </section>
373
- </div>
374
-
375
- <script>
376
- if (location.hash === '#device') {
377
- document.getElementById('view-list').classList.add('hidden');
378
- document.getElementById('view-device').classList.remove('hidden');
379
- document.getElementById('bar-list').classList.add('hidden');
380
- document.getElementById('bar-device').classList.remove('hidden');
381
- }
382
- </script>
383
- </body>
384
- </html>
Binary file
Binary file
Binary file