From c29a9586892020465ef0268d5d3baf17fcbbad52 Mon Sep 17 00:00:00 2001
From: unanmed <1319491857@qq.com>
Date: Sun, 20 Nov 2022 00:00:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8DBug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/scroll.vue | 12 ++++++++++--
 src/ui/bookDetail.vue     |  7 +++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/scroll.vue b/src/components/scroll.vue
index 90db511..316e6cb 100644
--- a/src/components/scroll.vue
+++ b/src/components/scroll.vue
@@ -35,6 +35,7 @@ const canvasAttr = props.type === 'horizontal' ? 'width' : 'height';
 
 let ctx: CanvasRenderingContext2D;
 let content: HTMLDivElement;
+let fromSelf = false;
 
 const resize = () => {
     calHeight();
@@ -89,6 +90,7 @@ function scroll() {
 }
 
 onUpdated(() => {
+    if (fromSelf) return;
     now = props.now ?? now;
     content.style.transition = `${cssTarget} 0.2s ease-out`;
     calHeight();
@@ -105,7 +107,6 @@ function canvasDrag(x: number, y: number) {
     last = d;
     if (ctx.canvas[canvasAttr] < total * scale)
         now += ((dy * total) / ctx.canvas[canvasAttr]) * scale;
-    content.style.transition = '';
     scroll();
 }
 
@@ -115,7 +116,6 @@ function contentDrag(x: number, y: number) {
     const dy = d - contentLast;
     contentLast = d;
     if (ctx.canvas[canvasAttr] < total * scale) now -= dy;
-    content.style.transition = '';
     scroll();
 }
 
@@ -149,10 +149,13 @@ onMounted(() => {
         canvas,
         canvasDrag,
         (x, y) => {
+            fromSelf = true;
             last = props.type === 'horizontal' ? x : y;
+            content.style.transition = '';
         },
         () => {
             setTimeout(() => emits('update:drag', false));
+            fromSelf = false;
         },
         true
     );
@@ -162,15 +165,19 @@ onMounted(() => {
         content,
         contentDrag,
         (x, y) => {
+            fromSelf = true;
             contentLast = props.type === 'horizontal' ? x : y;
+            content.style.transition = '';
         },
         () => {
             setTimeout(() => emits('update:drag', false));
+            fromSelf = false;
         },
         true
     );
 
     useWheel(content, (x, y) => {
+        fromSelf = true;
         const d = x !== 0 ? x : y;
         if (Math.abs(d) > 50) {
             content.style.transition = `${cssTarget} 0.2s ease-out`;
@@ -179,6 +186,7 @@ onMounted(() => {
         }
         now += d;
         scroll();
+        fromSelf = false;
     });
 });
 
diff --git a/src/ui/bookDetail.vue b/src/ui/bookDetail.vue
index 1106a68..c3cac77 100644
--- a/src/ui/bookDetail.vue
+++ b/src/ui/bookDetail.vue
@@ -53,6 +53,7 @@ import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
 import EnemyCritical from '../panel/enemyCritical.vue';
 import { KeyCode } from '../plugin/keyCodes';
 import { keycode } from '../plugin/utils';
+import { sleep } from 'mutate-animate';
 
 const enemy = core.plugin.bookDetailEnemy;
 const top = ref(core.plugin.bookDetailPos);
@@ -81,7 +82,7 @@ function key(e: KeyboardEvent) {
     }
 }
 
-onMounted(() => {
+onMounted(async () => {
     top.value = 0;
     detail = document.getElementById('detail') as HTMLDivElement;
     detail.style.opacity = '1';
@@ -91,6 +92,8 @@ onMounted(() => {
     let moved = false;
     let pos = [0, 0];
 
+    await sleep(600);
+
     useDrag(
         detail,
         (x, y) => {
@@ -182,7 +185,7 @@ onUnmounted(() => {
     opacity: 0;
 }
 
-@media screen and(max-width:600px) {
+@media screen and (max-width: 600px) {
     #detail {
         width: 95%;
         height: 100%;