hm/tergent-android
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 24 Wiki Activity

docs: add UI layout reference for Pixso design

Browse Source
This commit is contained in:
Tergent DevOps
2026-05-23 03:21:04 +00:00
parent 376d6a04c2
commit 9f9ddb9f4c
1 changed files with 638 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/tergent-ui-screens.html
+638
View File
@@ -0,0 +1,638 @@
<!doctype html>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tergent — 主要界面布局参考</title>
<style>
:root {
color-scheme: light dark;
--bg: #f8fafc;
--fg: #172033;
--muted: #5b6475;
--line: #64748b;
--neutral: #e2e8f0;
--accent: #6366f1;
--accent2: #a855f7;
--chat-from: #6366f1;
--chat-to: #e2e8f0;
--bar: #1e293b;
--status-green: #22c55e;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0f172a;
--fg: #e5e7eb;
--muted: #a3adbd;
--line: #475569;
--neutral: #334155;
--accent: #818cf8;
--accent2: #c084fc;
--chat-from: #6366f1;
--chat-to: #1e293b;
--bar: #0f172a;
--status-green: #4ade80;
}
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--fg);
font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif;
}
h1 {
text-align: center;
padding: 32px 0 8px;
font-size: 22px;
font-weight: 650;
}
.sub {
text-align: center;
color: var(--muted);
font-size: 13px;
margin-bottom: 32px;
}
.grid {
max-width: 1100px;
margin: 0 auto;
padding: 0 16px 48px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
}
.card {
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
background: var(--neutral);
}
.card-header {
padding: 10px 14px;
font-weight: 600;
font-size: 13px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
gap: 8px;
}
.tag {
display: inline-block;
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 4px;
text-transform: uppercase;
}
.tag-p0 { background: #6366f1; color: #fff; }
.tag-p1 { background: #a855f7; color: #fff; }
.tag-p2 { background: var(--muted); color: #fff; }
.phone {
position: relative;
width: 100%;
aspect-ratio: 9 / 19;
max-height: 520px;
background: #fff;
margin: 0;
border-radius: 0 0 12px 12px;
overflow: hidden;
color: #1e293b;
}
.phone.dark {
background: #1e293b;
color: #e5e7eb;
}
/* status bar */
.status-bar {
display: flex;
justify-content: space-between;
padding: 6px 14px;
font-size: 11px;
font-weight: 600;
background: inherit;
}
/* top bar */
.top-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 12px;
border-bottom: 1px solid #e2e8f0;
}
.top-bar .title-text {
font-weight: 650;
font-size: 15px;
}
.top-bar .icon {
width: 22px; height: 22px;
border-radius: 4px;
background: var(--line);
opacity: 0.3;
}
/* content */
.screen-content {
padding: 8px 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* chat bubbles */
.bubble {
max-width: 80%;
padding: 8px 12px;
border-radius: 12px;
font-size: 12px;
line-height: 1.4;
}
.bubble.from {
background: var(--chat-from);
color: #fff;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.bubble.to {
background: var(--chat-to);
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.bubble .time {
font-size: 10px;
opacity: 0.6;
margin-top: 4px;
text-align: right;
}
/* input bar */
.input-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-top: 1px solid #e2e8f0;
margin-top: auto;
}
.input-bar .field {
flex: 1;
height: 32px;
border-radius: 16px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
}
.input-bar .btn {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--accent);
}
/* onboarding */
.onboarding-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
flex: 1;
padding: 20px;
text-align: center;
}
.logo-placeholder {
width: 60px; height: 60px;
border-radius: 16px;
background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.qr-placeholder {
width: 100px; height: 100px;
border: 2px dashed var(--line);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: var(--muted);
}
.pill-btn {
padding: 10px 28px;
border-radius: 24px;
background: var(--accent);
color: #fff;
font-weight: 600;
font-size: 14px;
border: none;
}
/* settings */
.settings-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #e2e8f0;
font-size: 13px;
}
.settings-row .switch {
width: 36px; height: 20px;
border-radius: 10px;
background: var(--status-green);
}
.settings-row .value {
color: var(--muted);
font-size: 12px;
}
/* connect */
.connect-status {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 6px;
background: #dcfce7;
color: #166534;
font-size: 12px;
font-weight: 600;
}
.connect-status .dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--status-green);
}
/* voice */
.voice-orb {
width: 72px; height: 72px;
border-radius: 50%;
background: radial-gradient(circle, var(--accent), var(--accent2));
margin: 0 auto;
opacity: 0.85;
}
.voice-wave {
width: 100%;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
}
.voice-wave .bar {
width: 3px;
height: 100%;
border-radius: 2px;
background: var(--accent);
opacity: 0.5;
}
/* canvas */
.canvas-placeholder {
flex: 1;
background: #f1f5f9;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: var(--muted);
min-height: 100px;
}
/* device list */
.device-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid #e2e8f0;
}
.device-item .dot {
width: 8px; height: 8px;
border-radius: 50%;
}
.device-item .dot.online { background: var(--status-green); }
.device-item .dot.offline { background: #94a3b8; }
/* tabs */
.tabs {
display: flex;
border-top: 1px solid #e2e8f0;
margin-top: auto;
}
.tab {
flex: 1;
text-align: center;
padding: 8px 0;
font-size: 10px;
color: var(--muted);
}
.tab.active {
color: var(--accent);
border-top: 2px solid var(--accent);
}
.tab .tab-icon {
width: 18px; height: 18px;
margin: 0 auto 2px;
border-radius: 4px;
background: currentColor;
opacity: 0.3;
}
</style>
<h1>Tergent — 界面布局参考</h1>
<p class="sub">Pixso 设计参考 · 9 个主要页面</p>
<div class="grid">
<!-- 1. Onboarding -->
<div class="card">
<div class="card-header">
<span class="tag tag-p0">P0</span> 1. 引导页 (Onboarding)
</div>
<div class="phone">
<div class="status-bar"><span>14:30</span><span>📶 🔋</span></div>
<div class="onboarding-center" style="height:85%">
<div class="logo-placeholder"></div>
<div style="font-size:20px;font-weight:700">Tergent</div>
<div style="font-size:13px;color:var(--muted);max-width:200px">
Connect your devices, control from anywhere.
</div>
<div class="qr-placeholder">QR 码</div>
<div style="font-size:12px;color:var(--muted)">扫码配对 或 手动输入</div>
<button class="pill-btn">开始连接 →</button>
<div style="font-size:11px;color:var(--muted);margin-top:8px">v0.1.0 alpha</div>
</div>
</div>
</div>
<!-- 2. Connect -->
<div class="card">
<div class="card-header">
<span class="tag tag-p0">P0</span> 2. 连接页 (Connect)
</div>
<div class="phone">
<div class="status-bar"><span>14:30</span><span>📶 🔋</span></div>
<div class="top-bar">
<span class="icon"></span>
<span class="title-text">连接</span>
<span class="icon"></span>
</div>
<div class="screen-content" style="height:75%;gap:12px">
<div class="connect-status"><span class="dot"></span> 已连接 · 网关 hdtime.space</div>
<div style="font-size:12px;color:var(--muted)">已配对设备: 茂之钳 (main)</div>
<div style="border:1px solid #e2e8f0;border-radius:8px;padding:10px">
<div style="font-size:12px;font-weight:600;margin-bottom:6px">连接信息</div>
<div class="settings-row" style="font-size:12px"><span>网关地址</span><span class="value">hdtime.space</span></div>
<div class="settings-row" style="font-size:12px"><span>端口</span><span class="value">443 (WSS)</span></div>
<div class="settings-row" style="font-size:12px"><span>连接状态</span><span class="value" style="color:#166534">● 在线</span></div>
</div>
<div style="display:flex;gap:8px;margin-top:4px">
<button style="flex:1;padding:8px;border-radius:8px;border:1px solid var(--line);background:transparent;font-size:12px">切换网关</button>
<button style="flex:1;padding:8px;border-radius:8px;background:var(--accent);color:#fff;border:none;font-size:12px">重新配对</button>
</div>
</div>
<div class="tabs">
<div class="tab active"><div class="tab-icon"></div>连接</div>
<div class="tab"><div class="tab-icon"></div>聊天</div>
<div class="tab"><div class="tab-icon"></div>语音</div>
<div class="tab"><div class="tab-icon"></div>屏幕</div>
<div class="tab"><div class="tab-icon"></div>设置</div>
</div>
</div>
</div>
<!-- 3. Chat -->
<div class="card">
<div class="card-header">
<span class="tag tag-p0">P0</span> 3. 聊天页 (Chat)
</div>
<div class="phone">
<div class="status-bar"><span>14:30</span><span>📶 🔋</span></div>
<div class="top-bar">
<span class="icon"></span>
<span class="title-text">茂之钳</span>
<span style="display:flex;gap:4px"><span class="icon"></span><span class="icon"></span></span>
</div>
<div class="screen-content" style="flex:1;gap:8px;overflow:hidden">
<div class="bubble to">你好！有什么需要帮忙的？</div>
<div class="bubble from" style="margin-top:4px">帮我查一下今天的天气 <span class="time">14:30</span></div>
<div class="bubble to" style="margin-top:4px">好的，我来查询。今天北京晴，22-28°C，适合出门。</div>
<div class="bubble from" style="margin-top:4px">谢谢！<span class="time">14:31</span></div>
<div style="font-size:11px;text-align:center;color:var(--muted);margin:4px 0">Tergent is working...</div>
</div>
<div class="input-bar">
<div class="field"></div>
<div class="btn"></div>
</div>
<div class="tabs">
<div class="tab"><div class="tab-icon"></div>连接</div>
<div class="tab active"><div class="tab-icon"></div>聊天</div>
<div class="tab"><div class="tab-icon"></div>语音</div>
<div class="tab"><div class="tab-icon"></div>屏幕</div>
<div class="tab"><div class="tab-icon"></div>设置</div>
</div>
</div>
</div>
<!-- 4. Settings -->
<div class="card">
<div class="card-header">
<span class="tag tag-p0">P0</span> 4. 设置页 (Settings)
</div>
<div class="phone">
<div class="status-bar"><span>14:30</span><span>📶 🔋</span></div>
<div class="top-bar">
<span class="icon"></span>
<span class="title-text">设置</span>
<span class="icon"></span>
</div>
<div class="screen-content" style="flex:1;gap:2px;padding:8px 14px">
<div style="display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #e2e8f0">
<div style="width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2))"></div>
<div><div style="font-weight:600;font-size:14px">Tergent Node</div><div style="font-size:11px;color:var(--muted)">v0.1.0 · ai.hdtime.tergent</div></div>
</div>
<div class="settings-row"><span>🔔 通知转发</span><span class="switch"></span></div>
<div class="settings-row"><span>📷 相机权限</span><span class="switch"></span></div>
<div class="settings-row"><span>📍 定位权限</span><span class="switch"></span></div>
<div class="settings-row"><span>🤖 语音唤醒</span><span class="switch"></span></div>
<div class="settings-row"><span>🌙 深色模式</span><span class="switch"></span></div>
<div class="settings-row" style="border:none"><span>📡 连接设置</span><span class="value">›</span></div>
</div>
<div class="tabs">
<div class="tab"><div class="tab-icon"></div>连接</div>
<div class="tab"><div class="tab-icon"></div>聊天</div>
<div class="tab"><div class="tab-icon"></div>语音</div>
<div class="tab"><div class="tab-icon"></div>屏幕</div>
<div class="tab active"><div class="tab-icon"></div>设置</div>
</div>
</div>
</div>
<!-- 5. Voice -->
<div class="card">
<div class="card-header">
<span class="tag tag-p1">P1</span> 5. 语音页 (Voice)
</div>
<div class="phone">
<div class="status-bar"><span>14:30</span><span>📶 🔋</span></div>
<div class="top-bar">
<span class="icon"></span>
<span class="title-text">语音</span>
<span class="icon"></span>
</div>
<div class="screen-content" style="flex:1;align-items:center;justify-content:center;gap:20px;padding:30px 12px">
<div style="font-size:13px;color:var(--muted)">点击按钮开始说话</div>
<div class="voice-orb"></div>
<div class="voice-wave">
<div class="bar" style="height:60%"></div>
<div class="bar" style="height:90%"></div>
<div class="bar" style="height:45%"></div>
<div class="bar" style="height:100%"></div>
<div class="bar" style="height:55%"></div>
<div class="bar" style="height:80%"></div>
<div class="bar" style="height:35%"></div>
</div>
<div style="font-size:12px;color:var(--muted)">"帮我查一下今天的日程"</div>
<div style="font-size:11px;color:var(--muted);background:var(--chat-to);padding:8px 12px;border-radius:8px;max-width:220px;text-align:center">
Tergent: 你今天有2个会议，下午3点设计评审
</div>
</div>
<div class="tabs">
<div class="tab"><div class="tab-icon"></div>连接</div>
<div class="tab"><div class="tab-icon"></div>聊天</div>
<div class="tab active"><div class="tab-icon"></div>语音</div>
<div class="tab"><div class="tab-icon"></div>屏幕</div>
<div class="tab"><div class="tab-icon"></div>设置</div>
</div>
</div>
</div>
<!-- 6. Canvas -->
<div class="card">
<div class="card-header">
<span class="tag tag-p1">P1</span> 6. 画布页 (Canvas)
</div>
<div class="phone">
<div class="status-bar"><span>14:30</span><span>📶 🔋</span></div>
<div class="top-bar">
<span class="icon"></span>
<span class="title-text">屏幕</span>
<span style="display:flex;gap:4px"><span class="icon"></span><span class="icon"></span></span>
</div>
<div style="flex:1;padding:8px 12px;display:flex;flex-direction:column;gap:6px">
<div style="display:flex;gap:6px;flex-wrap:wrap">
<span style="padding:3px 8px;border-radius:4px;font-size:10px;background:var(--chat-to)">📷 截图</span>
<span style="padding:3px 8px;border-radius:4px;font-size:10px;background:var(--chat-to)">🔍 缩放</span>
<span style="padding:3px 8px;border-radius:4px;font-size:10px;background:var(--chat-to)">↻ 刷新</span>
</div>
<div class="canvas-placeholder" style="flex:1;min-height:180px">
WebView 内容区域<br>agent 可在此展示 HTML/CSS
</div>
</div>
<div class="tabs">
<div class="tab"><div class="tab-icon"></div>连接</div>
<div class="tab"><div class="tab-icon"></div>聊天</div>
<div class="tab"><div class="tab-icon"></div>语音</div>
<div class="tab active"><div class="tab-icon"></div>屏幕</div>
<div class="tab"><div class="tab-icon"></div>设置</div>
</div>
</div>
</div>
<!-- 7. Devices -->
<div class="card">
<div class="card-header">
<span class="tag tag-p1">P1</span> 7. 节点管理 (Devices)
</div>
<div class="phone">
<div class="status-bar"><span>14:30</span><span>📶 🔋</span></div>
<div class="top-bar">
<span class="icon"></span>
<span class="title-text">设备</span>
<span class="icon"></span>
</div>
<div class="screen-content" style="flex:1;gap:4px;padding:8px 14px">
<div style="font-size:12px;font-weight:600;padding:6px 0">已配对网关</div>
<div class="device-item">
<div class="dot online"></div>
<div><div style="font-weight:600;font-size:13px">hdtime.space</div><div style="font-size:11px;color:var(--muted)">茂之钳 · 在线</div></div>
<div style="margin-left:auto;font-size:11px;color:var(--muted)">● 18789</div>
</div>
<div style="font-size:12px;font-weight:600;padding:10px 0 6px">发现的网关</div>
<div class="device-item">
<div class="dot offline"></div>
<div><div style="font-weight:600;font-size:13px">Local Gateway</div><div style="font-size:11px;color:var(--muted)">192.168.1.100:18789</div></div>
</div>
<div style="margin-top:8px">
<button style="width:100%;padding:8px;border-radius:8px;border:1px dashed var(--line);background:transparent;font-size:12px;color:var(--muted)">
+ 手动添加网关
</button>
</div>
</div>
<div class="tabs">
<div class="tab"><div class="tab-icon"></div>连接</div>
<div class="tab"><div class="tab-icon"></div>聊天</div>
<div class="tab"><div class="tab-icon"></div>语音</div>
<div class="tab"><div class="tab-icon"></div>屏幕</div>
<div class="tab active"><div class="tab-icon"></div>设置</div>
</div>
</div>
</div>
<!-- 8. Notifications -->
<div class="card">
<div class="card-header">
<span class="tag tag-p2">P2</span> 8. 通知历史 (Notifications)
</div>
<div class="phone">
<div class="status-bar"><span>14:30</span><span>📶 🔋</span></div>
<div class="top-bar">
<span class="icon"></span>
<span class="title-text">通知</span>
<span class="icon"></span>
</div>
<div class="screen-content" style="flex:1;gap:2px;padding:8px 14px">
<div class="settings-row" style="padding:6px 0">
<span style="font-size:12px">通知转发</span>
<span class="switch"></span>
</div>
<div style="padding:8px 0;border-bottom:1px solid #e2e8f0">
<div style="font-weight:600;font-size:12px">微信</div>
<div style="font-size:11px;color:var(--muted)">收到了一条消息</div>
<div style="font-size:10px;color:var(--muted)">刚刚</div>
</div>
<div style="padding:8px 0;border-bottom:1px solid #e2e8f0">
<div style="font-weight:600;font-size:12px">Slack</div>
<div style="font-size:11px;color:var(--muted)">#general: 新消息</div>
<div style="font-size:10px;color:var(--muted)">2分钟前</div>
</div>
<div style="padding:8px 0">
<div style="font-weight:600;font-size:12px">系统</div>
<div style="font-size:11px;color:var(--muted)">电池电量低</div>
<div style="font-size:10px;color:var(--muted)">10分钟前</div>
</div>
</div>
</div>
</div>
<!-- 9. Diagnostics -->
<div class="card">
<div class="card-header">
<span class="tag tag-p2">P2</span> 9. 连接诊断 (Diagnostics)
</div>
<div class="phone">
<div class="status-bar"><span>14:30</span><span>📶 🔋</span></div>
<div class="top-bar">
<span class="icon"></span>
<span class="title-text">诊断</span>
<span class="icon"></span>
</div>
<div class="screen-content" style="flex:1;gap:6px;padding:8px 14px">
<div class="connect-status" style="background:#fef3c7;color:#92400e">
<span class="dot" style="background:#f59e0b"></span> 连接不稳定
</div>
<div style="font-size:12px">
<div class="settings-row"><span>延迟</span><span class="value">342ms</span></div>
<div class="settings-row"><span>重连次数</span><span class="value">3</span></div>
<div class="settings-row"><span>信号质量</span><span class="value">82%</span></div>
<div class="settings-row"><span>证书指纹</span><span class="value" style="font-size:9px">a1:b2:c3:...</span></div>
</div>
<button style="padding:8px;border-radius:8px;border:1px solid var(--line);background:transparent;font-size:12px">🔄 运行测试</button>
<pre style="font-size:10px;color:var(--muted);background:var(--chat-to);padding:8px;border-radius:6px;overflow:hidden">
> ping gateway...
64 bytes: 342ms
> TLS handshake...
OK (TOFU)
> WebSocket upgrade...
OK
</pre>
</div>
</div>
</div>
</div>