refactor: 白板从画笔画板改为文本记事本
原实现是 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 同步更新。
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<meta name="theme-color" content="#1565c0">
|
||||
<title>白板 - zikai</title>
|
||||
<title>记事本 - zikai</title>
|
||||
<link rel="stylesheet" href="/static/common.css">
|
||||
<link rel="stylesheet" href="/static/whiteboard.css">
|
||||
</head>
|
||||
@@ -12,24 +12,17 @@
|
||||
<div class="wb-app">
|
||||
<header class="wb-bar">
|
||||
<div class="wb-bar-left">
|
||||
<span class="wb-title">白板</span>
|
||||
<code class="wb-id mono" id="boardId" title="白板 ID"></code>
|
||||
<span class="wb-title">记事本</span>
|
||||
<code class="wb-id mono" id="boardId" title="记事本 ID"></code>
|
||||
<span class="wb-online" id="online" title="在线人数">●</span>
|
||||
</div>
|
||||
<div class="wb-bar-right">
|
||||
<label class="wb-tool" title="笔画颜色">
|
||||
<input type="color" id="color" value="#1565c0">
|
||||
</label>
|
||||
<label class="wb-tool" title="笔画粗细">
|
||||
<input type="range" id="width" min="1" max="24" value="3">
|
||||
<span class="wb-width-val mono" id="widthVal">3</span>
|
||||
</label>
|
||||
<button class="btn" id="copyBtn" title="复制分享链接">复制链接</button>
|
||||
<button class="btn danger" id="clearBtn" title="清空白板(所有人)">清空</button>
|
||||
<button class="btn" id="copyBtn" title="复制全部文本">复制文本</button>
|
||||
<button class="btn danger" id="clearBtn" title="清空全部内容(所有人)">清空</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="wb-stage">
|
||||
<canvas id="canvas"></canvas>
|
||||
<textarea id="editor" class="wb-editor" placeholder="在此输入文本,所有人会实时看到你的编辑…" spellcheck="false" autocomplete="off"></textarea>
|
||||
<div class="wb-status" id="status">连接中…</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user