mirror of
https://github.com/TommyFang2077/dsh-desktop.git
synced 2026-08-17 09:06:36 +08:00
144 lines
5.2 KiB
HTML
144 lines
5.2 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN" class="dsh-desktop-offset">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>新会话</title>
|
||
<link rel="stylesheet" href="chrome.css" />
|
||
<style>
|
||
:root {
|
||
--bg: #f6f6f8;
|
||
--sidebar: #efeff2;
|
||
--text: #1d1d1f;
|
||
--muted: #86868b;
|
||
--line: rgba(0,0,0,0.06);
|
||
--accent: #0071e3;
|
||
--card: #ffffff;
|
||
}
|
||
html, body {
|
||
margin: 0; width: 1280px; height: 800px; overflow: hidden;
|
||
background: var(--bg); color: var(--text);
|
||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
.shell {
|
||
display: grid;
|
||
grid-template-columns: 248px 1fr;
|
||
height: calc(800px - 36px);
|
||
}
|
||
.sidebar {
|
||
background: var(--sidebar);
|
||
border-right: 0.5px solid var(--line);
|
||
padding: 16px 12px 18px;
|
||
display: flex; flex-direction: column; gap: 14px;
|
||
}
|
||
.brand {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 4px 8px 8px;
|
||
font-weight: 600; font-size: 13px;
|
||
}
|
||
.brand img { width: 22px; height: 22px; border-radius: 6px; }
|
||
.new-session {
|
||
height: 34px; border: 0; border-radius: 10px;
|
||
background: var(--card); color: var(--text);
|
||
font: 600 13px/1 inherit; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
||
display: flex; align-items: center; justify-content: center; gap: 6px;
|
||
}
|
||
.section-label {
|
||
margin: 8px 8px 4px; font-size: 11px; color: var(--muted); letter-spacing: 0.04em;
|
||
}
|
||
.session {
|
||
padding: 8px 10px; border-radius: 8px; font-size: 13px;
|
||
background: rgba(255,255,255,0.7);
|
||
}
|
||
.session small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
|
||
.main {
|
||
display: flex; flex-direction: column; min-width: 0;
|
||
background: var(--bg);
|
||
}
|
||
.hero {
|
||
flex: 1; display: flex; flex-direction: column;
|
||
align-items: center; justify-content: center; gap: 10px;
|
||
padding-bottom: 40px;
|
||
}
|
||
.hero .mark {
|
||
width: 56px; height: 56px; border-radius: 14px; margin-bottom: 8px;
|
||
}
|
||
.hero h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; }
|
||
.badge {
|
||
font-size: 11px; color: var(--muted); background: rgba(0,0,0,0.04);
|
||
padding: 2px 8px; border-radius: 999px;
|
||
}
|
||
.hint { color: var(--muted); font-size: 13px; margin: 0; }
|
||
.composer {
|
||
margin: 0 28px 22px; background: var(--card);
|
||
border: 0.5px solid var(--line); border-radius: 16px;
|
||
min-height: 92px; padding: 14px 16px 12px;
|
||
display: flex; flex-direction: column; justify-content: space-between;
|
||
box-shadow: 0 8px 28px rgba(0,0,0,0.04);
|
||
}
|
||
.placeholder { color: #aeaeb2; font-size: 14px; }
|
||
.tools { display: flex; justify-content: space-between; align-items: center; }
|
||
.chips { display: flex; gap: 8px; color: var(--muted); font-size: 12px; }
|
||
.chip {
|
||
border: 0.5px solid var(--line); border-radius: 999px; padding: 4px 10px; background: #fff;
|
||
}
|
||
.send-cluster { display: flex; align-items: center; gap: 8px; }
|
||
.mic {
|
||
width: 28px; height: 28px; border-radius: 8px;
|
||
display: grid; place-items: center; font-size: 14px; color: var(--muted);
|
||
}
|
||
.send {
|
||
width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff;
|
||
display: grid; place-items: center; font-size: 14px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header id="dsh-desktop-titlebar">
|
||
<button class="more" type="button">•••</button>
|
||
<div class="menu"></div>
|
||
<div class="drag"></div>
|
||
<div class="traffic">
|
||
<button class="tl min"></button>
|
||
<button class="tl zoom"></button>
|
||
<button class="tl close"></button>
|
||
</div>
|
||
</header>
|
||
<div class="shell">
|
||
<aside class="sidebar">
|
||
<div class="brand">
|
||
<img src="../../../ui/icon.png" alt="" />
|
||
DeepSeek Harness
|
||
</div>
|
||
<div class="new-session">＋ 新会话</div>
|
||
<div class="section-label">工作区</div>
|
||
<div class="session">
|
||
新会话
|
||
<small>锚定式标准（实验）</small>
|
||
</div>
|
||
</aside>
|
||
<section class="main">
|
||
<div class="hero">
|
||
<img class="mark" src="../../../ui/icon.png" alt="" />
|
||
<h1>探索未至之境</h1>
|
||
<span class="badge">预览版</span>
|
||
<p class="hint">官方 WebUI 运行在原生窗口中，凭据仍保存在 ~/.dsh</p>
|
||
</div>
|
||
<div class="composer">
|
||
<div class="placeholder">给 Harness 发送消息</div>
|
||
<div class="tools">
|
||
<div class="chips">
|
||
<span class="chip">锚定式标准（实验）</span>
|
||
<span class="chip">工作区</span>
|
||
</div>
|
||
<div class="send-cluster">
|
||
<div class="mic" title="语音输入">🎤</div>
|
||
<div class="send">↑</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</body>
|
||
</html>
|