556 lines
14 KiB
HTML
556 lines
14 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>O1Key 笔记侧栏草图</title>
|
||
<style>
|
||
:root {
|
||
--bg: #151515;
|
||
--rail: #1b1b1b;
|
||
--panel: #202020;
|
||
--panel-2: #262626;
|
||
--field: #181818;
|
||
--line: rgba(255,255,255,.09);
|
||
--line-2: rgba(255,255,255,.16);
|
||
--text: #e6e6e6;
|
||
--soft: #b5b5b5;
|
||
--muted: #777;
|
||
--blue: #4f8cff;
|
||
--blue-2: #7eb8f7;
|
||
--blue-soft: rgba(79,140,255,.14);
|
||
--danger: #d76565;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
background: #101010;
|
||
color: var(--text);
|
||
font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
|
||
display: grid;
|
||
place-items: center;
|
||
}
|
||
|
||
.frame {
|
||
width: 1180px;
|
||
height: 740px;
|
||
background: var(--bg);
|
||
border: 1px solid #303030;
|
||
display: grid;
|
||
grid-template-columns: 52px 352px 1fr;
|
||
overflow: hidden;
|
||
box-shadow: 0 18px 60px rgba(0,0,0,.45);
|
||
position: relative;
|
||
}
|
||
|
||
.rail {
|
||
background: var(--rail);
|
||
border-right: 1px solid var(--line);
|
||
padding: 10px 7px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.rail button {
|
||
width: 36px;
|
||
height: 36px;
|
||
border: 1px solid transparent;
|
||
border-radius: 8px;
|
||
background: transparent;
|
||
color: #8a8a8a;
|
||
display: grid;
|
||
place-items: center;
|
||
cursor: default;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.rail button.active {
|
||
color: var(--blue-2);
|
||
background: rgba(79,140,255,.13);
|
||
border-color: rgba(79,140,255,.36);
|
||
}
|
||
|
||
.note-panel {
|
||
background: var(--panel);
|
||
border-right: 1px solid var(--line);
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
min-height: 0;
|
||
}
|
||
|
||
.header {
|
||
padding: 14px 14px 10px;
|
||
border-bottom: 1px solid rgba(255,255,255,.06);
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.title-row,
|
||
.actions,
|
||
.tag-strip,
|
||
.note-top,
|
||
.note-meta,
|
||
.edit-top,
|
||
.edit-actions,
|
||
.tag-row {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.title-row {
|
||
justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.title {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
letter-spacing: .2px;
|
||
}
|
||
|
||
.actions { gap: 5px; }
|
||
|
||
.icon-btn {
|
||
width: 28px;
|
||
height: 28px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 7px;
|
||
color: #9b9b9b;
|
||
background: rgba(255,255,255,.035);
|
||
display: grid;
|
||
place-items: center;
|
||
}
|
||
|
||
.icon-btn.primary {
|
||
color: white;
|
||
background: var(--blue);
|
||
border-color: transparent;
|
||
}
|
||
|
||
.search {
|
||
height: 34px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: rgba(255,255,255,.045);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 0 10px;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.tag-strip {
|
||
gap: 6px;
|
||
margin-top: 10px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tag-filter {
|
||
height: 26px;
|
||
padding: 0 9px;
|
||
border-radius: 7px;
|
||
border: 1px solid var(--line);
|
||
background: transparent;
|
||
color: #969696;
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tag-filter.active {
|
||
color: var(--blue-2);
|
||
border-color: rgba(79,140,255,.36);
|
||
background: var(--blue-soft);
|
||
}
|
||
|
||
.list {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
padding: 8px 10px 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.scroll-hint {
|
||
height: 24px;
|
||
color: #606060;
|
||
font-size: 11px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 0 0 auto;
|
||
border-top: 1px solid rgba(255,255,255,.04);
|
||
margin: 2px 4px 0;
|
||
}
|
||
|
||
.note {
|
||
border: 1px solid transparent;
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
background: transparent;
|
||
}
|
||
|
||
.note.active {
|
||
background: rgba(255,255,255,.055);
|
||
border-color: rgba(255,255,255,.11);
|
||
box-shadow: inset 2px 0 0 var(--blue);
|
||
}
|
||
|
||
.note-title {
|
||
font-size: 13px;
|
||
color: #e0e0e0;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.note-action {
|
||
color: #777;
|
||
font-size: 11px;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.note-text {
|
||
margin-top: 6px;
|
||
font-size: 12px;
|
||
line-height: 1.45;
|
||
color: #8c8c8c;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.note-meta {
|
||
margin-top: 8px;
|
||
justify-content: space-between;
|
||
color: #666;
|
||
font-size: 10px;
|
||
gap: 8px;
|
||
}
|
||
|
||
.tags {
|
||
display: flex;
|
||
gap: 4px;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tag {
|
||
color: var(--blue-2);
|
||
background: rgba(79,140,255,.1);
|
||
border: 1px solid rgba(79,140,255,.2);
|
||
border-radius: 5px;
|
||
padding: 2px 5px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.canvas {
|
||
position: relative;
|
||
background:
|
||
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
|
||
background-size: 26px 26px;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.canvas-label {
|
||
position: absolute;
|
||
left: 24px;
|
||
top: 22px;
|
||
color: #5f5f5f;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.node {
|
||
position: absolute;
|
||
width: 186px;
|
||
height: 92px;
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(255,255,255,.12);
|
||
background: #222;
|
||
box-shadow: 0 12px 30px rgba(0,0,0,.2);
|
||
}
|
||
|
||
.node.one { left: 160px; top: 160px; }
|
||
.node.two { left: 430px; top: 290px; }
|
||
.node::before {
|
||
content: "";
|
||
display: block;
|
||
height: 28px;
|
||
border-bottom: 1px solid rgba(255,255,255,.08);
|
||
background: rgba(79,140,255,.12);
|
||
border-radius: 8px 8px 0 0;
|
||
}
|
||
|
||
.edit-popover {
|
||
position: absolute;
|
||
right: 24px;
|
||
top: 76px;
|
||
width: 420px;
|
||
height: 588px;
|
||
border: 1px solid rgba(79,140,255,.28);
|
||
border-radius: 10px;
|
||
background: #202020;
|
||
box-shadow: 0 22px 70px rgba(0,0,0,.46);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.edit-top {
|
||
height: 48px;
|
||
padding: 0 14px;
|
||
border-bottom: 1px solid rgba(255,255,255,.08);
|
||
justify-content: space-between;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.edit-title {
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.edit-body {
|
||
padding: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 9px;
|
||
min-height: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
.input,
|
||
.textarea {
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: rgba(255,255,255,.045);
|
||
color: #ddd;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.input {
|
||
height: 34px;
|
||
padding: 0 10px;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.textarea {
|
||
flex: 1;
|
||
min-height: 220px;
|
||
padding: 12px;
|
||
font-size: 13px;
|
||
line-height: 1.6;
|
||
white-space: pre-wrap;
|
||
font-family: "JetBrains Mono", "Consolas", monospace;
|
||
}
|
||
|
||
.tag-editor {
|
||
min-height: 74px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: var(--field);
|
||
padding: 8px;
|
||
}
|
||
|
||
.tag-row {
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.tag-token {
|
||
height: 24px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
border-radius: 6px;
|
||
padding: 0 7px;
|
||
border: 1px solid rgba(79,140,255,.25);
|
||
color: var(--blue-2);
|
||
background: rgba(79,140,255,.1);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.tag-token .x {
|
||
color: #8baee8;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.tag-input {
|
||
height: 24px;
|
||
min-width: 106px;
|
||
padding: 0 6px;
|
||
border: 1px dashed rgba(255,255,255,.14);
|
||
border-radius: 6px;
|
||
color: #8f8f8f;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.hint {
|
||
margin-top: 7px;
|
||
color: #666;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.edit-actions {
|
||
gap: 8px;
|
||
padding: 12px;
|
||
border-top: 1px solid rgba(255,255,255,.08);
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.btn {
|
||
height: 32px;
|
||
border-radius: 7px;
|
||
border: 1px solid var(--line);
|
||
background: rgba(255,255,255,.04);
|
||
color: #aaa;
|
||
padding: 0 12px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.btn.primary {
|
||
background: var(--blue);
|
||
border-color: transparent;
|
||
color: white;
|
||
font-weight: 700;
|
||
flex: 1;
|
||
}
|
||
|
||
.btn.cancel {
|
||
color: #ccc;
|
||
}
|
||
|
||
.btn.danger {
|
||
color: #ee9f9f;
|
||
border-color: rgba(215,101,101,.24);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="frame">
|
||
<nav class="rail">
|
||
<button>☰</button>
|
||
<button>💬</button>
|
||
<button class="active">✎</button>
|
||
<button>🖼</button>
|
||
<button>⚙</button>
|
||
</nav>
|
||
|
||
<aside class="note-panel">
|
||
<div class="header">
|
||
<div class="title-row">
|
||
<div class="title">笔记</div>
|
||
<div class="actions">
|
||
<button class="icon-btn">⇩</button>
|
||
<button class="icon-btn primary">＋</button>
|
||
</div>
|
||
</div>
|
||
<div class="search">⌕ 搜索笔记内容或标签</div>
|
||
<div class="tag-strip">
|
||
<div class="tag-filter active">全部 18</div>
|
||
<div class="tag-filter">#产品图</div>
|
||
<div class="tag-filter">#Nano Banana</div>
|
||
<div class="tag-filter">#负向词</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list">
|
||
<div class="note active">
|
||
<div class="note-top">
|
||
<div class="note-title">产品主图：高级玻璃质感</div>
|
||
<div class="note-action">编辑</div>
|
||
</div>
|
||
<div class="note-text">Clean studio lighting, translucent glass material, subtle caustics, soft shadow, premium product photography...</div>
|
||
<div class="note-meta"><div class="tags"><span class="tag">#产品图</span><span class="tag">#玻璃</span></div><span>今天 14:22</span></div>
|
||
</div>
|
||
<div class="note">
|
||
<div class="note-top">
|
||
<div class="note-title">Nano Banana 参考图经验</div>
|
||
<div class="note-action">编辑</div>
|
||
</div>
|
||
<div class="note-text">参考图越多越容易跑偏，主体一致性优先用 1-3 张图；复杂场景建议分两步...</div>
|
||
<div class="note-meta"><div class="tags"><span class="tag">#Nano Banana</span><span class="tag">#参考图</span></div><span>昨天</span></div>
|
||
</div>
|
||
<div class="note">
|
||
<div class="note-top">
|
||
<div class="note-title">电商模特换装模板</div>
|
||
<div class="note-action">编辑</div>
|
||
</div>
|
||
<div class="note-text">Keep face identity, preserve pose, replace outfit with [服装描述], realistic fabric texture...</div>
|
||
<div class="note-meta"><div class="tags"><span class="tag">#电商</span><span class="tag">#换装</span></div><span>05/25</span></div>
|
||
</div>
|
||
<div class="note">
|
||
<div class="note-top">
|
||
<div class="note-title">常用负向词</div>
|
||
<div class="note-action">编辑</div>
|
||
</div>
|
||
<div class="note-text">low quality, blurry, deformed hands, extra fingers, bad anatomy, distorted text, watermark...</div>
|
||
<div class="note-meta"><div class="tags"><span class="tag">#负向词</span><span class="tag">#通用</span></div><span>05/20</span></div>
|
||
</div>
|
||
<div class="note">
|
||
<div class="note-top">
|
||
<div class="note-title">批量任务命名经验</div>
|
||
<div class="note-action">编辑</div>
|
||
</div>
|
||
<div class="note-text">小批量先跑 2-3 张确认风格，固定提示词和参考图后再放大批量数量...</div>
|
||
<div class="note-meta"><div class="tags"><span class="tag">#批量</span><span class="tag">#工作流</span></div><span>05/18</span></div>
|
||
</div>
|
||
<div class="scroll-hint">列表默认可滚动，编辑框不常驻</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="canvas">
|
||
<div class="canvas-label">ComfyUI 画布区域，笔记列表不再占用右侧空间</div>
|
||
<div class="node one"></div>
|
||
<div class="node two"></div>
|
||
</main>
|
||
|
||
<section class="edit-popover">
|
||
<div class="edit-top">
|
||
<div class="edit-title">编辑笔记</div>
|
||
<button class="icon-btn">×</button>
|
||
</div>
|
||
<div class="edit-body">
|
||
<div class="input">产品主图：高级玻璃质感</div>
|
||
<div class="tag-editor">
|
||
<div class="tag-row">
|
||
<span class="tag-token">产品图 <span class="x">×</span></span>
|
||
<span class="tag-token">玻璃 <span class="x">×</span></span>
|
||
<span class="tag-token">灯光 <span class="x">×</span></span>
|
||
<span class="tag-input">＋ 添加标签</span>
|
||
</div>
|
||
<div class="hint">只保留标签作为组织方式；可搜索、筛选、删除。</div>
|
||
</div>
|
||
<div class="textarea">Clean studio lighting, translucent glass material, subtle caustics, soft shadow, premium product photography, 85mm lens, minimal background, high detail.
|
||
|
||
使用方式：
|
||
1. 把产品图作为参考图输入
|
||
2. 保留主体轮廓，只调整材质和灯光
|
||
3. 如果玻璃过亮，降低 “caustics” 权重</div>
|
||
</div>
|
||
<div class="edit-actions">
|
||
<button class="btn cancel">取消</button>
|
||
<button class="btn">复制</button>
|
||
<button class="btn danger">删除</button>
|
||
<button class="btn primary">保存</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</body>
|
||
</html>
|