浏览代码

浮窗选项:可禁止resize

Michael Wang 3 年之前
父节点
当前提交
1b728ba2ab
共有 3 个文件被更改,包括 29 次插入20 次删除
  1. 12 11
      src/components/QmDialog.vue
  2. 15 6
      src/features/mark/ShortCutModal.vue
  3. 2 3
      src/features/mark/SpecialTagModal.vue

+ 12 - 11
src/components/QmDialog.vue

@@ -10,19 +10,17 @@
         class="tw-flex tw-place-content-between tw-items-center"
       >
         <div
-          class="
-            tw-text-base
-            tw-ml-5
-            tw-my-2
-            tw-cursor-move
-            tw-flex-grow
-            tw-font-bold
-          "
+          class="tw-text-base tw-ml-5 tw-my-2 tw-cursor-move tw-flex-grow tw-font-bold"
           @mousedown="handleDragMouseDown"
         >
           {{ title }}
         </div>
-        <a-button shape="circle" size="small" @click="$emit('close')">
+        <a-button
+          shape="circle"
+          size="small"
+          class="tw-mr-2"
+          @click="$emit('close')"
+        >
           <template #icon><CloseOutlined /></template>
         </a-button>
       </header>
@@ -33,7 +31,7 @@
 
       <div
         ref="resizeHandler"
-        class="resize-handler"
+        :class="enableResize && 'resize-handler'"
         @mousedown="handleResizeMouseDown"
       ></div>
     </div>
@@ -47,13 +45,14 @@ import { store } from "@/store/store";
 
 // 因为要更改props取得的值,所以不需要reactivity
 // eslint-disable-next-line vue/no-setup-props-destructure
-const { top, width, height, title, zIndex } = withDefaults(
+const { top, width, height, title, zIndex, enableResize } = withDefaults(
   defineProps<{
     title: string;
     top?: string;
     width?: string;
     height?: string;
     zIndex?: number;
+    enableResize?: boolean;
   }>(),
   {
     title: "无标题",
@@ -61,6 +60,7 @@ const { top, width, height, title, zIndex } = withDefaults(
     width: "30%",
     height: "30%",
     zIndex: 1020,
+    enableResize: true,
   }
 );
 
@@ -130,6 +130,7 @@ const handleDragMouseUp = () => {
 };
 
 const handleResizeMouseDown = (e: MouseEvent) => {
+  if (!enableResize) return;
   document.addEventListener("mousemove", handleResizeMouseMove);
   document.addEventListener("mouseup", handleResizeMouseUp);
   const { clientX, clientY } = e;

+ 15 - 6
src/features/mark/ShortCutModal.vue

@@ -3,18 +3,15 @@
     v-if="store.setting.uiSetting['shortCut.modal']"
     top="10%"
     width="500px"
-    height="330px"
+    height="350px"
     title="快捷键"
+    :enableResize="false"
     @close="close"
   >
     <div class="short-cut-container">
       <div class="row">
         <div class="tw-text-base tw-border-b-2 tw-mb-2">通用</div>
       </div>
-      <div class="row">
-        <div>交卷</div>
-        <div>Ctrl + Enter</div>
-      </div>
       <div class="row">
         <div>放大</div>
         <div>+</div>
@@ -47,10 +44,22 @@
         <div>全屏窗口</div>
         <div>F11</div>
       </div>
+      <div class="row">
+        <div>取消全屏</div>
+        <div>F11</div>
+      </div>
+      <div class="row">
+        <div>刷新页面</div>
+        <div>F5</div>
+      </div>
 
       <div class="row">
         <div class="tw-text-base tw-border-b-2 tw-mb-2">轨迹模式</div>
       </div>
+      <div class="row">
+        <div>交卷</div>
+        <div>Ctrl + Enter</div>
+      </div>
       <div class="row">
         <div>切题</div>
         <div>Tab</div>
@@ -65,7 +74,7 @@
       </div>
 
       <div class="row">
-        <div class="tw-text-base tw-border-b-2 tw-mt-4">键盘模式</div>
+        <div class="tw-text-base tw-border-b-2 tw-mt-5">键盘模式</div>
       </div>
       <div class="row">
         <div>切题</div>

+ 2 - 3
src/features/mark/SpecialTagModal.vue

@@ -5,12 +5,11 @@
     width="320px"
     height="180px"
     title="特殊标记"
+    :enableResize="false"
     @close="close"
   >
     <div
-      class="
-        tw-flex tw-place-content-between tw-m-4 tw-text-xl tw-cursor-pointer
-      "
+      class="tw-flex tw-place-content-between tw-m-4 tw-text-xl tw-cursor-pointer"
       style="color: var(--app-main-text-color)"
     >
       <div