13 lines
6.4 KiB
HTML
13 lines
6.4 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>越欣科技 VDI · 界面评审</title><link rel="icon" href="data:,"><style>
|
||
*{box-sizing:border-box}body{margin:0;background:#f5f6f7;color:#263340;font:15px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}main{max-width:1360px;margin:0 auto;padding:40px 32px 70px}header{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:30px}h1{font-size:28px;letter-spacing:-.5px;margin:0 0 6px}p{margin:0;color:#536372}a{color:#a95121;text-decoration:none}a:hover{text-decoration:underline}.primary{display:inline-block;padding:12px 19px;border-radius:11px;background:#a95121;color:#fff;white-space:nowrap}section{margin-bottom:40px}h2{font-size:21px;margin:0 0 14px}h3{font-size:17px;margin:0 0 9px}figure{margin:0}figure img{width:100%;display:block;border:1px solid #dce2e7;border-radius:14px}figcaption{margin-top:10px;font-size:13px;color:#536372}.tabs{display:flex;gap:8px;margin-bottom:16px}.tabs button{font:inherit;border:1px solid #dce2e7;background:#fff;color:#536372;padding:8px 18px;border-radius:9px;cursor:pointer}.tabs button.active{background:#f8eee6;color:#a95121;border-color:#d7b29a}.grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.note{padding:23px 26px;background:#fff;border:1px solid #dce2e7;border-radius:14px}.note ul{padding-left:20px;margin:10px 0 0;color:#536372}.thumb img{height:340px;object-fit:contain;background:#fff}.small{font-size:13px;color:#536372}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.metrics strong{font-size:24px;display:block}.metrics span{font-size:13px;color:#536372}footer{border-top:1px solid #dce2e7;padding-top:23px;font-size:13px;color:#536372}@media(max-width:700px){main{padding:24px 18px}.grid,.metrics{grid-template-columns:1fr}header{align-items:flex-start;flex-direction:column}.thumb img{height:auto}}
|
||
</style></head><body><main>
|
||
<header><div><h1>越欣科技 VDI · 终端界面</h1><p>沿用深蓝灰、铜橙和圆角体系，包含登录校验、企业连接与桌面选择、设置和连接状态。</p></div><a class="primary" href="index.html">打开交互原型 ↗</a></header>
|
||
<section><div class="tabs"><button class="active" data-theme="dark">深色外观</button><button data-theme="light">浅色外观</button></div><figure><img id="main-preview" src="output/playwright/workspace-dark-1366.png" alt="越欣科技终端桌面选择页"><figcaption>1366 × 768 实际浏览器渲染。卡片使用统一底色，系统识别、桌面名称、状态、规格、操作依次排列。</figcaption></figure></section>
|
||
<section><h2>登录交互</h2><figure><a href="index.html"><img id="login-preview" src="output/playwright/login-interactive-dark.png" alt="可交互的终端登录界面"></a><figcaption>体验账号：demo · 密码：Demo123!。支持输入校验、记住账号、密码显示、企业连接、SSO 取消、忘记密码和离线体验；认证为本地模拟。</figcaption></figure></section>
|
||
<section class="metrics"><div class="note"><strong>5.04 : 1</strong><span>深色桌面列表的最小文字对比度</span></div><div class="note"><strong>4.74 : 1</strong><span>浅色桌面列表的最小文字对比度</span></div><div class="note"><strong>1280 × 720</strong><span>三张卡片、连接操作与状态条完整可见</span></div></section>
|
||
<section><h2>参考真实 VDI 界面，保留自己的视觉风格</h2><div class="grid"><figure class="thumb"><img src="references/windows-app-devices.png" alt="微软官方 Windows App 设备选择页"><figcaption><a href="https://learn.microsoft.com/en-us/windows-app/get-started-connect-devices-desktops-apps">Microsoft Windows App · 官方设备页</a></figcaption></figure><figure class="thumb"><img src="references/workspaces-list.png" alt="AWS 官方 WorkSpaces 资源管理界面"><figcaption><a href="https://docs.aws.amazon.com/workspaces/latest/userguide/amazon-workspaces-windows-client.html">Amazon WorkSpaces · 官方资源列表</a>（新客户端 Public Preview）</figcaption></figure></div><div class="grid" style="margin-top:20px"><div class="note"><h3>采用的结构</h3><ul><li>系统标识与桌面名称分层，状态靠近桌面名称。</li><li>搜索、收藏、单资源连接入口各自独立。</li><li>设置与连接分开，未配置时显示原因。</li></ul></div><div class="note"><h3>针对 ARM 终端调整</h3><ul><li>取消大块彩色卡头、壁纸叠字和重复系统名称。</li><li>连接操作至少 44 px，适配 720p / 1080p 显示器。</li><li>连接设置对应 kiosk-shell 的地址、应用、分辨率、帧率。</li></ul></div></div><p class="small" style="margin-top:16px">另核对 <a href="https://docs.omnissa.com/HorizonClient-WindowsGuide-V2609/ConnecttoaRemoteDesktoporPublishedApplicationfromHorizonWindowsClient">Omnissa Horizon 官方按桌面设置与连接流程</a>。完整来源和采用理由见 <a href="references/README.md">设计依据</a>。</p></section>
|
||
<section><h2>同一套风格覆盖设置与状态页</h2><div class="grid"><figure><a href="index.html?preview=settings&theme=dark"><img src="output/playwright/settings-dark.png" alt="桌面连接设置"></a><figcaption>连接设置：目标桌面、地址、应用名、分辨率与帧率。</figcaption></figure><figure><a href="index.html?preview=connecting&theme=dark"><img src="output/playwright/connecting-dark.png" alt="正在连接桌面"></a><figcaption>连接过程：选定桌面、当前步骤、取消和恢复路径。</figcaption></figure></div></section>
|
||
<footer>登录页保留原有品牌图形与布局，新增表单操作、状态提示和弹窗。交付为 HTML 交互设计原型，设备状态为示例；尚未接入认证、Moonlight 或 ARM 实机。<a href="README.md">使用说明</a> · <a href="output/playwright/login-verification.json">登录验证</a> · <a href="output/playwright/verification.json">此前工作区验证</a></footer>
|
||
</main><script>document.querySelectorAll('[data-theme]').forEach(button=>button.addEventListener('click',()=>{document.querySelectorAll('[data-theme]').forEach(b=>b.classList.toggle('active',b===button));document.getElementById('main-preview').src='output/playwright/workspace-'+button.dataset.theme+'-1366.png';document.getElementById('login-preview').src='output/playwright/login-interactive-'+button.dataset.theme+'.png'}));</script></body></html>
|