Simon
bea288e414
== 已部署上线 (9项) == - 代办事项真实数据源集成 (企微审批API 8bug修复链) - H5/坐席端 Logo样式统一+绿色背景 - 视频引导页修复 (localStorage key v2) - 坐席端 v9 Vue版本修复 (ElMessage._context) - 截图按钮 v10 修复 (getDisplayMedia user gesture) - 扫码样式恢复+H5扫码登录跳转修复 - H5截图快捷键提示 == 代码完成待部署 (3项) == - 知识迭代3Bug修复 (#8 POST端点/#7 MERGE幂等/#6 过期检查) - 会议室预定-小鱼易联终端 (40文件, 40/40测试通过) - IT资产升级审批推送 (asset_service.py) == 需求文档 (2项) == - 坐席端AI辅助消息框-PRD (4项新功能确认) - 坐席端布局优化建议 v2.0 (7天计划) == 新增文档 == - 日报-2026-07-11.md - 知识迭代Bug修复报告-20260711.md - 会议室预定-部署指南.md - CHANGELOG.md 更新 == 测试 == - test_todo_integration.py: 40/40 - test_meetingroom.py: 40/40 - test_bugfix_ki_suggestions.py: 21/21
138 lines
3.3 KiB
HTML
138 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>文字工具测试</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { overflow: hidden; }
|
|
.container {
|
|
position: fixed;
|
|
top: 0; left: 0; width: 100vw; height: 100vh;
|
|
background: #333;
|
|
cursor: crosshair;
|
|
}
|
|
#canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #666; }
|
|
#input {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
border: 2px solid #07C160;
|
|
border-radius: 4px;
|
|
padding: 2px 6px;
|
|
font-size: 20px;
|
|
font-family: sans-serif;
|
|
background: rgba(255,255,255,0.9);
|
|
outline: none;
|
|
min-width: 60px;
|
|
color: #333;
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container" id="container">
|
|
<canvas id="canvas"></canvas>
|
|
<input id="input" />
|
|
</div>
|
|
<script>
|
|
const canvas = document.getElementById('canvas')
|
|
const ctx = canvas.getContext('2d')
|
|
const input = document.getElementById('input')
|
|
canvas.width = window.innerWidth
|
|
canvas.height = window.innerHeight
|
|
|
|
ctx.fillStyle = '#666'
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
|
ctx.fillStyle = 'red'
|
|
ctx.font = '20px sans-serif'
|
|
|
|
let isSelecting = false
|
|
let box = {x: 0, y: 0, w: 0, h: 0}
|
|
let tool = 'arrow'
|
|
|
|
// 绘制选区框
|
|
function drawBox() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|
ctx.fillStyle = 'rgba(0,0,0,0.5)'
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
|
ctx.clearRect(box.x, box.y, box.w, box.h)
|
|
ctx.strokeStyle = '#07C160'
|
|
ctx.lineWidth = 2
|
|
ctx.strokeRect(box.x, box.y, box.w, box.h)
|
|
}
|
|
|
|
// 切换工具（模拟点击工具栏）
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 't') { tool = 'text'; console.log('tool=text') }
|
|
if (e.key === 'a') { tool = 'arrow'; console.log('tool=arrow') }
|
|
if (e.key === 'Escape') {
|
|
input.style.display = 'none'
|
|
input.value = ''
|
|
}
|
|
})
|
|
|
|
canvas.addEventListener('mousedown', (e) => {
|
|
console.log('mousedown', e.clientX, e.clientY, 'tool=', tool)
|
|
if (box.w === 0) {
|
|
isSelecting = true
|
|
box = {x: e.clientX, y: e.clientY, w: 0, h: 0}
|
|
return
|
|
}
|
|
// 在选区内
|
|
if (e.clientX >= box.x && e.clientX <= box.x + box.w && e.clientY >= box.y && e.clientY <= box.y + box.h) {
|
|
if (tool === 'text') {
|
|
input.style.display = 'block'
|
|
input.style.left = e.clientX + 'px'
|
|
input.style.top = (e.clientY - 14) + 'px'
|
|
input.value = ''
|
|
input.focus()
|
|
console.log('show input at', e.clientX, e.clientY - 14)
|
|
return
|
|
}
|
|
// arrow 等...
|
|
}
|
|
})
|
|
|
|
canvas.addEventListener('mousemove', (e) => {
|
|
if (isSelecting) {
|
|
box.w = Math.abs(e.clientX - box.x)
|
|
box.h = Math.abs(e.clientY - box.y)
|
|
box.x = Math.min(box.x, e.clientX)
|
|
box.y = Math.min(box.y, e.clientY)
|
|
drawBox()
|
|
}
|
|
})
|
|
|
|
document.addEventListener('mouseup', () => {
|
|
isSelecting = false
|
|
})
|
|
|
|
input.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') {
|
|
commitText()
|
|
}
|
|
})
|
|
|
|
input.addEventListener('blur', () => {
|
|
console.log('blur')
|
|
commitText()
|
|
})
|
|
|
|
function commitText() {
|
|
if (input.style.display === 'none') return
|
|
const text = input.value.trim()
|
|
console.log('commitText', text)
|
|
if (text) {
|
|
const rect = input.getBoundingClientRect()
|
|
ctx.fillStyle = 'red'
|
|
ctx.font = '20px sans-serif'
|
|
ctx.textBaseline = 'middle'
|
|
ctx.fillText(text, rect.left, rect.top + rect.height / 2)
|
|
}
|
|
input.style.display = 'none'
|
|
input.value = ''
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|