dialog drag resize 优化

src/components/QmDialog.vue

@@ -77,8 +77,8 @@ export default defineComponent({
     };
 
     const handleDragMouseDown = (e: MouseEvent) => {
-      mouseHandler.value.addEventListener("mousemove", handleDragMouseMove);
-      mouseHandler.value.addEventListener("mouseup", handleDragMouseUp);
+      document.addEventListener("mousemove", handleDragMouseMove);
+      document.addEventListener("mouseup", handleDragMouseUp);
       // console.log(e);
       const { offsetX, offsetY } = e;
       mousePosition.offsetX = offsetX;
@@ -102,43 +102,42 @@ export default defineComponent({
     const handleDragMouseUp = (e: MouseEvent) => {
       mousePosition.offsetX = 0;
       mousePosition.offsetY = 0;
-      mouseHandler.value.removeEventListener("mousemove", handleDragMouseMove);
-      mouseHandler.value.removeEventListener("mouseup", handleDragMouseUp);
+      mouseHandler.value.removeEventListener("mousedown", handleDragMouseDown);
+      document.removeEventListener("mousemove", handleDragMouseMove);
+      document.removeEventListener("mouseup", handleDragMouseUp);
     };
 
     const handleResizeMouseDown = (e: MouseEvent) => {
-      resizeHandler.value.addEventListener("mousemove", handleResizeMouseMove);
-      resizeHandler.value.addEventListener("mouseup", handleResizeMouseUp);
-      resizeHandler.value.addEventListener("mouseout", handleResizeMouseOut);
+      document.addEventListener("mousemove", handleResizeMouseMove);
+      document.addEventListener("mouseup", handleResizeMouseUp);
+      const { clientX, clientY } = e;
+      mousePosition.offsetX = clientX;
+      mousePosition.offsetY = clientY;
     };
     const handleResizeMouseMove = (e: MouseEvent) => {
       // console.log(e);
       // console.log("mouse move");
+      const { clientX, clientY } = e;
       // @ts-ignore
-      const dialog = e.target.parentElement as HTMLDivElement;
-      // console.log(dialog);
-      const newXRatio =
-        parseFloat(getComputedStyle(dialog).width) + e.movementX;
-      const newYRatio =
-        parseFloat(getComputedStyle(dialog).height) + e.movementY;
-      positionStyle.width = newXRatio + "px";
-      positionStyle.height = newYRatio + "px";
+      const newXRatio = clientX - mousePosition.offsetX;
+      const newYRatio = clientY - mousePosition.offsetY;
+      console.log(newXRatio, newYRatio);
+      positionStyle.width = parseFloat(positionStyle.width) + newXRatio + "px";
+      positionStyle.height =
+        parseFloat(positionStyle.height) + newYRatio + "px";
+
+      mousePosition.offsetX = clientX;
+      mousePosition.offsetY = clientY;
     };
     const handleResizeMouseUp = (e: MouseEvent) => {
+      mousePosition.offsetX = 0;
+      mousePosition.offsetY = 0;
       resizeHandler.value.removeEventListener(
-        "mousemove",
-        handleResizeMouseMove
-      );
-      resizeHandler.value.removeEventListener("mouseup", handleResizeMouseUp);
-      resizeHandler.value.removeEventListener("mouseout", handleResizeMouseOut);
-    };
-    const handleResizeMouseOut = (e: MouseEvent) => {
-      resizeHandler.value.removeEventListener(
-        "mousemove",
-        handleResizeMouseMove
+        "mousedown",
+        handleResizeMouseDown
       );
-      resizeHandler.value.removeEventListener("mouseup", handleResizeMouseUp);
-      resizeHandler.value.removeEventListener("mouseout", handleResizeMouseOut);
+      document.removeEventListener("mousemove", handleResizeMouseMove);
+      document.removeEventListener("mouseup", handleResizeMouseUp);
     };
 
     onMounted(() => {

src/features/mark/MarkHeader.vue

@@ -267,48 +267,51 @@
         style="width: 7px; height: 4px; margin-left: 2px"
       />
     </div>
-    <div
-      class="tw-flex tw-place-items-center tw-cursor-pointer"
-      style="font-size: 14px"
-      @click="openProfileModal"
-    >
-      <!-- <UserOutlined /> -->
-      {{ store.setting.userName }}
-    </div>
-    <div
-      class="tw-flex tw-place-items-center tw-cursor-pointer"
-      @click="logout"
-      style="font-size: 14px"
-    >
-      <!-- <PoweroffOutlined /> -->
-      退出
-    </div>
-    <div
-      class="tw-flex tw-place-content-center tw-cursor-pointer menu"
-      :class="[
-        !store.setting.uiSetting['score.board.collapse'] &&
-          store.currentTask &&
-          'menu-toggled',
-      ]"
-      @click="toggleScoreBoard"
-    >
-      <span
-        title="给分板"
-        class="tw-inline-flex tw-place-content-center tw-relative"
+    <div class="tw-flex tw-gap-4">
+      <div
+        class="tw-flex tw-place-items-center tw-cursor-pointer"
+        style="font-size: 14px"
+        @click="openProfileModal"
       >
-        <img
-          src="./images/right-menu.svg"
-          :class="[
-            !store.setting.uiSetting['score.board.collapse'] && 'svg-red',
-          ]"
-        />
-      </span>
+        <!-- <UserOutlined /> -->
+        {{ store.setting.userName }}
+      </div>
       <div
-        v-if="
-          !store.setting.uiSetting['score.board.collapse'] && store.currentTask
-        "
-        class="triangle"
-      ></div>
+        class="tw-flex tw-place-items-center tw-cursor-pointer"
+        @click="logout"
+        style="font-size: 14px"
+      >
+        <!-- <PoweroffOutlined /> -->
+        退出
+      </div>
+      <div
+        class="tw-flex tw-place-content-center tw-cursor-pointer menu"
+        :class="[
+          !store.setting.uiSetting['score.board.collapse'] &&
+            store.currentTask &&
+            'menu-toggled',
+        ]"
+        @click="toggleScoreBoard"
+      >
+        <span
+          title="给分板"
+          class="tw-inline-flex tw-place-content-center tw-relative"
+        >
+          <img
+            src="./images/right-menu.svg"
+            :class="[
+              !store.setting.uiSetting['score.board.collapse'] && 'svg-red',
+            ]"
+          />
+        </span>
+        <div
+          v-if="
+            !store.setting.uiSetting['score.board.collapse'] &&
+            store.currentTask
+          "
+          class="triangle"
+        ></div>
+      </div>
     </div>
   </div>
   <MarkChangeProfile ref="changeProfileRef" />

src/features/mark/SpecialTagModal.vue

@@ -2,8 +2,8 @@
   <qm-dialog
     v-if="store.setting.uiSetting['specialTag.modal']"
     top="10%"
-    width="300px"
-    height="160px"
+    width="320px"
+    height="180px"
     title="特殊标记"
     @close="close"
   >

src/styles/global.css

@@ -32,3 +32,7 @@ body {
 button.ant-btn span[role="img"] {
   display: inline-flex !important;
 }
+
+button.ant-btn-primary {
+  background-color: #5d65ff;
+}