refactor: 微信小程序改造
This commit is contained in:
AfyerCu
parent
c5d956d3a8
commit
8b1bc80d4b
|
|
@ -123,6 +123,7 @@ export default defineManifestConfig({
|
|||
// 是否启用 ES6 转 ES5
|
||||
es6: true,
|
||||
minified: true,
|
||||
swc: true,
|
||||
},
|
||||
optimization: {
|
||||
subPackages: true,
|
||||
|
|
|
|||
|
|
@ -247,113 +247,6 @@ function toggleSpecialMark(type: 'excellent' | 'typical' | 'problem') {
|
|||
emit('toggle-special-mark', type)
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新画笔颜色
|
||||
*/
|
||||
function updatePenColor(color: string | null) {
|
||||
settings.value.penColor = color || '#ff0000'
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新画笔粗细
|
||||
*/
|
||||
function updatePenWidth(width: number | number[]) {
|
||||
settings.value.penWidth = Array.isArray(width) ? width[0] : width
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新文字大小
|
||||
*/
|
||||
function updateTextSize(size: number | undefined) {
|
||||
if (size !== undefined) {
|
||||
settings.value.textSize = size
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新文字颜色
|
||||
*/
|
||||
function updateTextColor(color: string | null) {
|
||||
settings.value.textColor = color || '#000000'
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理鼠标按下开始拖动
|
||||
*/
|
||||
function handleMouseDown(event: MouseEvent) {
|
||||
// 如果已收起，不允许拖动
|
||||
if (isCollapsed.value) {
|
||||
return
|
||||
}
|
||||
|
||||
// 如果点击的是按钮或其他交互元素，不触发拖动
|
||||
const target = event.target as HTMLElement
|
||||
if (
|
||||
target.tagName === 'BUTTON'
|
||||
|| target.closest('button')
|
||||
|| target.tagName === 'INPUT'
|
||||
|| target.closest('input')
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
isDragging.value = true
|
||||
dragState.value = {
|
||||
startX: event.clientX,
|
||||
startY: event.clientY,
|
||||
startPositionX: position.value.x,
|
||||
startPositionY: position.value.y,
|
||||
}
|
||||
|
||||
// 添加全局鼠标事件监听
|
||||
document.addEventListener('mousemove', handleMouseMove)
|
||||
document.addEventListener('mouseup', handleMouseUp)
|
||||
|
||||
// 防止选中文本
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理鼠标移动进行拖动
|
||||
*/
|
||||
function handleMouseMove(event: MouseEvent) {
|
||||
if (!isDragging.value)
|
||||
return
|
||||
|
||||
const deltaX = event.clientX - dragState.value.startX
|
||||
const deltaY = event.clientY - dragState.value.startY
|
||||
|
||||
// 计算新位置
|
||||
let newX = dragState.value.startPositionX + deltaX
|
||||
let newY = dragState.value.startPositionY - deltaY // bottom 坐标系是相反的
|
||||
|
||||
// 获取工具栏尺寸和窗口尺寸，确保工具栏不会超出屏幕边界
|
||||
if (toolbarRef.value) {
|
||||
const rect = toolbarRef.value.getBoundingClientRect()
|
||||
const windowWidth = window.innerWidth
|
||||
const windowHeight = window.innerHeight
|
||||
|
||||
// 限制左右边界
|
||||
newX = Math.max(0, Math.min(newX, windowWidth - rect.width))
|
||||
// 限制上下边界 (注意 bottom 坐标系)
|
||||
newY = Math.max(0, Math.min(newY, windowHeight - rect.height))
|
||||
}
|
||||
|
||||
// 更新位置
|
||||
position.value = { x: newX, y: newY }
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理鼠标松开结束拖动
|
||||
*/
|
||||
function handleMouseUp() {
|
||||
isDragging.value = false
|
||||
|
||||
// 移除全局鼠标事件监听
|
||||
document.removeEventListener('mousemove', handleMouseMove)
|
||||
document.removeEventListener('mouseup', handleMouseUp)
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换收起/展开状态
|
||||
*/
|
||||
|
|
@ -361,74 +254,6 @@ function toggleCollapse() {
|
|||
isCollapsed.value = !isCollapsed.value
|
||||
}
|
||||
|
||||
/**
|
||||
* 键盘快捷键处理
|
||||
*/
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
// 防止在输入框中触发
|
||||
const target = event.target as HTMLElement
|
||||
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
|
||||
return
|
||||
}
|
||||
|
||||
switch (event.code) {
|
||||
case 'KeyV':
|
||||
event.preventDefault()
|
||||
switchTool(MarkingTool.SELECT)
|
||||
break
|
||||
|
||||
case 'KeyT':
|
||||
event.preventDefault()
|
||||
switchTool(MarkingTool.TEXT)
|
||||
break
|
||||
|
||||
case 'KeyP':
|
||||
event.preventDefault()
|
||||
switchTool(MarkingTool.PEN)
|
||||
break
|
||||
|
||||
case 'KeyR':
|
||||
event.preventDefault()
|
||||
switchTool(MarkingTool.RECT)
|
||||
break
|
||||
|
||||
case 'KeyE':
|
||||
event.preventDefault()
|
||||
switchTool(MarkingTool.ERASER)
|
||||
break
|
||||
|
||||
case 'KeyZ':
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
event.preventDefault()
|
||||
if (event.shiftKey) {
|
||||
handleRedo()
|
||||
}
|
||||
else {
|
||||
handleUndo()
|
||||
}
|
||||
}
|
||||
break
|
||||
|
||||
case 'Delete':
|
||||
case 'Backspace':
|
||||
event.preventDefault()
|
||||
handleClearAll()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 挂载时绑定键盘事件
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', handleKeydown)
|
||||
})
|
||||
|
||||
// 卸载时移除事件监听
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', handleKeydown)
|
||||
document.removeEventListener('mousemove', handleMouseMove)
|
||||
document.removeEventListener('mouseup', handleMouseUp)
|
||||
})
|
||||
|
||||
// 暴露点击处理方法给父组件
|
||||
defineExpose({
|
||||
handleImageClick,
|
||||
|
|
@ -447,7 +272,6 @@ defineExpose({
|
|||
'backdrop-saturate-150': !isCollapsed,
|
||||
},
|
||||
]"
|
||||
@mousedown="handleMouseDown"
|
||||
>
|
||||
<!-- 收起按钮 -->
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -130,9 +130,9 @@ export function getEnvBaseUrl() {
|
|||
let baseUrl = import.meta.env.VITE_SERVER_BASEURL
|
||||
|
||||
// # 有些同学可能需要在微信小程序里面根据 develop、trial、release 分别设置上传地址，参考代码如下。
|
||||
const VITE_SERVER_BASEURL__WEIXIN_DEVELOP = 'https://ukw0y1.laf.run'
|
||||
const VITE_SERVER_BASEURL__WEIXIN_TRIAL = 'https://ukw0y1.laf.run'
|
||||
const VITE_SERVER_BASEURL__WEIXIN_RELEASE = 'https://ukw0y1.laf.run'
|
||||
const VITE_SERVER_BASEURL__WEIXIN_DEVELOP = 'http://mapi.xianglexue.com/api/v1'
|
||||
const VITE_SERVER_BASEURL__WEIXIN_TRIAL = 'http://mapi.xianglexue.com/api/v1'
|
||||
const VITE_SERVER_BASEURL__WEIXIN_RELEASE = 'http://mapi.xianglexue.com/api/v1'
|
||||
|
||||
// 微信小程序端环境区分
|
||||
if (isMpWeixin) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue