655e039aad
原实现是 Canvas 画笔画板，与「文字白板/记事本」需求不符。重做为纯文本实时协作： - model：strokes JSON -> content TEXT + version INT（乐观锁）+ edit_count； schema/dao/service 同步重构，append_stroke/replace_strokes -> update_content。 - WS 协议：stroke -> edit（发完整文本，debounce 400ms）；init 下发 content/version。 update 帧广播给他人，cleared 广播给所有人。 - 前端：canvas -> textarea；收到远端 update 用最长公共前后缀算变更区间， 仅替换该区间并保留光标（区间前不动/后平移/内移末尾）；清空/复制文本按钮。 - schema.sql 更新 whiteboard 表 DDL；DB 旧表 DROP 重建（开发环境）。 - 测试脚本与 README 同步更新。
49 lines
2.1 KiB
CSS
49 lines
2.1 KiB
CSS
/* 记事本页专属样式：全屏 textarea、悬浮工具栏、移动端适配。 */
|
|
:root { --bar-h: 52px; }
|
|
body { overflow: hidden; background: var(--bg); }
|
|
.wb-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
|
|
.wb-bar {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
gap: 0.6em; padding: 0.5em 0.9em;
|
|
background: var(--surface); border-bottom: 1px solid var(--border);
|
|
box-shadow: var(--shadow); min-height: var(--bar-h);
|
|
flex-wrap: wrap;
|
|
}
|
|
.wb-bar-left, .wb-bar-right { display: flex; align-items: center; gap: 0.6em; }
|
|
.wb-title { font-weight: 700; font-size: 1.05em; }
|
|
.wb-id { background: var(--surface-2); padding: 0.15em 0.5em; border-radius: 6px; font-size: 0.82em; color: var(--text-dim); }
|
|
.wb-online { color: var(--success); font-size: 0.7em; }
|
|
.wb-online.off { color: var(--text-dim); }
|
|
.wb-bar .btn { padding: 0.4em 0.9em; font-size: 0.86em; }
|
|
|
|
.wb-stage { position: relative; flex: 1; overflow: hidden; }
|
|
.wb-editor {
|
|
position: absolute; inset: 0;
|
|
width: 100%; height: 100%;
|
|
display: block; resize: none; border: none; outline: none;
|
|
padding: 1em 1.2em;
|
|
font-family: ui-monospace, "SF Mono", Menlo, Consolas, "JetBrains Mono", monospace;
|
|
font-size: 14px; line-height: 1.6;
|
|
background: var(--surface); color: var(--text);
|
|
touch-action: manipulation;
|
|
}
|
|
.wb-editor::placeholder { color: var(--text-dim); }
|
|
.wb-status {
|
|
position: absolute; bottom: 0.8em; left: 50%; transform: translateX(-50%);
|
|
background: var(--surface); border: 1px solid var(--border);
|
|
padding: 0.3em 0.9em; border-radius: 16px; font-size: 0.8em;
|
|
color: var(--text-dim); box-shadow: var(--shadow);
|
|
opacity: 0; transition: opacity 0.3s; pointer-events: none;
|
|
}
|
|
.wb-status.show { opacity: 1; }
|
|
.wb-status.err { color: var(--danger); border-color: var(--danger-soft); }
|
|
|
|
/* 移动端：工具栏紧凑、按钮变大易触 */
|
|
@media (max-width: 640px) {
|
|
.wb-bar { padding: 0.4em 0.5em; gap: 0.4em; }
|
|
.wb-id { max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.wb-bar .btn { padding: 0.45em 0.7em; }
|
|
.wb-title { display: none; }
|
|
.wb-editor { font-size: 15px; padding: 0.8em; }
|
|
}
|