diff --git a/resources/logo.png b/resources/logo.png
new file mode 100644
index 0000000..45f6e65
Binary files /dev/null and b/resources/logo.png differ
diff --git a/src/renderer/src/views/tool/components/side.vue b/src/renderer/src/views/tool/components/side.vue
index 4da860f..341bb2f 100644
--- a/src/renderer/src/views/tool/components/side.vue
+++ b/src/renderer/src/views/tool/components/side.vue
@@ -2,17 +2,19 @@
-
-
-
-
-
- {{item.label||item.text||item.name}}
-
-
-
-
-
+
+
+
+
+
+
+ {{item.label||item.text||item.name}}
+
+
+
+
+
+
{{isFold?'<<<':'>>>'}}
diff --git a/src/renderer/src/views/tool/directive/drag.js b/src/renderer/src/views/tool/directive/drag.js
index caa12f8..5565441 100644
--- a/src/renderer/src/views/tool/directive/drag.js
+++ b/src/renderer/src/views/tool/directive/drag.js
@@ -36,6 +36,7 @@ class Drag {
const {cx, cy} = this.getMousePos(e)
this.x = cx
this.y = cy
+ this.getCurPos() // 被拖拽元素初始坐标
// 手动-触发事件 v-drag-start
this.el.dispatchEvent(new CustomEvent('v-drag-start', {detail:{drag: this}}))
}
@@ -85,12 +86,20 @@ class Drag {
}
// 获取移动后坐标
getPos(x, y) {
- const w = this.max.w - this.toRound(this.el.clientWidth)
- const h = this.max.h - this.toRound(this.el.clientHeight)
+ // 边界控制:图标元素
+ // const w = this.max.w - this.toRound(this.el.clientWidth)
+ // const h = this.max.h - this.toRound(this.el.clientHeight)
+ // 边界控制:整个工具
+ const w = this.max.w - this.toRound(this.handle.clientWidth)
+ const h = this.max.h - this.toRound(this.handle.clientHeight)
x = x < 0 ? 0 : x > w ? w : x
y = y < 0 ? 0 : y > h ? h : y
return { x, y }
}
+ getCurPos(dom) {
+ const pos = this[dom||'handle']?.getBoundingClientRect()
+ this.data = {left:this.toRound(pos.left), top:this.toRound(pos.top)}
+ }
// 小数转整数
toRound = v => Math.round(v)
}
diff --git a/src/renderer/src/views/tool/sphere.vue b/src/renderer/src/views/tool/sphere.vue
index cef6cde..f5c55ce 100644
--- a/src/renderer/src/views/tool/sphere.vue
+++ b/src/renderer/src/views/tool/sphere.vue
@@ -20,17 +20,19 @@
-
+
+
+
@@ -41,7 +43,7 @@ import { onMounted, ref, reactive, watchEffect } from 'vue'
import { useRoute } from 'vue-router';
import { ElMessageBox, ElMessage, ElLoading } from 'element-plus'
import * as classManageApi from '@/api/classManage'
-import logo from '@root/resources/icon.png' // logo
+import logo from '@root/resources/logo.png' // logo
import boardVue from './components/board.vue' // 画板-子组件
import sideVue from './components/side.vue' // 画板-子组件
import upvoteVue from './components/upvote.vue' // 点赞-子组件
@@ -109,6 +111,23 @@ const tabChange = (val) => {
const logoHandle = (e,t) => {
if (Date.now() - dragtime.value < 200) {
isFold.value = !isFold.value
+ setTimeout(() => {
+ // 处理: 工具被拖动到右侧时功能被遮挡
+ const dom = document.querySelector('.tool-bottom-all')
+ const { x } = dom.getBoundingClientRect()
+ const w = window.innerWidth - (470 || 80)
+ // if (x > w) dom.style.left = `${w}px`
+ if (x > w) { // 动画
+ let left = x
+ const animatFn = () => {
+ left-=30
+ if (left < w) left == w
+ dom.style.left = `${left}px`
+ if (left > w) requestAnimationFrame(animatFn)
+ }
+ requestAnimationFrame(animatFn)
+ }
+ }, 20);
}
}
// 底部工具栏:移入移出-是否穿透
@@ -262,4 +281,15 @@ watchEffect(() => {
}
}
}
+.a-fade-leave-active,.a-fade-enter-active{
+ transition: all .3s;
+}
+.a-fade-enter-from,.a-fade-leave-to{
+ width: 0;
+ opacity: 0;
+}
+.a-fade-enter-to,.a-fade-leave-from{
+ width: 350px;
+ opacity: 1;
+}