feat: ui调整02

src/components/QmDialog.vue

@@ -1,31 +1,23 @@
 <template>
   <teleport to="body">
     <div
-      class="dialog-container"
+      class="qm-dialog"
+      :class="customClass"
       :style="positionStyle"
       @click="increaseZIndex"
     >
-      <header
-        ref="mouseHandler"
-        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"
-          @mousedown="handleDragMouseDown"
-        >
-          {{ title }}
+      <header ref="mouseHandler" class="qm-dialog-header">
+        <div class="qm-dialog-title drag" @mousedown="handleDragMouseDown">
+          <slot name="title">
+            <h2>{{ title }}</h2>
+          </slot>
         </div>
-        <a-button
-          shape="circle"
-          size="small"
-          class="tw-mr-2"
-          @click="$emit('close')"
-        >
-          <template #icon><CloseOutlined /></template>
-        </a-button>
+        <button class="qm-dialog-close" @click="$emit('close')">
+          <CloseOutlined />
+        </button>
       </header>
 
-      <div class="tw-m-1 tw-overflow-auto" style="height: calc(100% - 50px)">
+      <div class="qm-dialog-body">
         <slot></slot>
       </div>
 
@@ -52,6 +44,7 @@ const {
   zIndex = 1020,
   enableResize = true,
   fixedWidth = false,
+  customClass = "",
 } = defineProps<{
   title: string;
   top?: string;
@@ -60,6 +53,7 @@ const {
   zIndex?: number;
   enableResize?: boolean;
   fixedWidth?: boolean;
+  customClass?: string;
 }>();
 
 defineEmits(["close"]);
@@ -174,27 +168,3 @@ const increaseZIndex = () => {
   }
 };
 </script>
-
-<style scoped>
-.dialog-container {
-  z-index: 1020;
-  position: absolute;
-  min-width: 100px;
-  background-color: var(--app-container-bg-color);
-  border: 1px solid var(--app-main-bg-color);
-  border-radius: 5px;
-  box-shadow: 0px 4px 8px 0px rgba(25, 27, 55, 0.1);
-}
-header {
-  color: var(--app-main-text-color);
-  border-bottom: 1px solid var(--app-main-bg-color);
-}
-.resize-handler {
-  position: absolute;
-  bottom: -10px;
-  right: -10px;
-  width: 20px;
-  height: 20px;
-  cursor: nwse-resize;
-}
-</style>

src/features/mark/AllPaperModal.vue

@@ -1,29 +1,26 @@
 <template>
   <teleport to="body">
-    <div v-if="store.allPaperModal" class="dialog-container">
-      <header class="tw-flex tw-place-content-between tw-items-center">
-        <div class="tw-text-2xl ctw-text-base tw-ml-5 tw-my-2">全卷切换</div>
-        <div class="tw-flex tw-items-center tw-gap-2 tw-mx-8 tw-flex-grow">
-          <span
-            v-for="(u, index) in urls"
-            :key="index"
-            class="image-index hover:tw-bg-gray-300"
-            :class="checkedIndex === index && 'tw-bg-gray-300'"
-            @click="checkedIndex = index"
-          >
-            {{ index + 1 }}
-          </span>
+    <div v-if="store.allPaperModal" class="qm-dialog fullscreen">
+      <header class="qm-dialog-header">
+        <div class="qm-dialog-title">
+          <h2>全卷切换</h2>
+          <div class="head-menu">
+            <a-button
+              v-for="(u, index) in urls"
+              :key="index"
+              :type="checkedIndex === index ? 'primary' : 'default'"
+              @click="checkedIndex = index"
+            >
+              {{ index + 1 }}
+            </a-button>
+          </div>
         </div>
-        <a-button
-          shape="circle"
-          class="tw-mr-2"
-          @click="store.allPaperModal = false"
-        >
-          <template #icon><CloseOutlined /></template>
-        </a-button>
+        <button class="qm-dialog-close" @click="store.allPaperModal = false">
+          <CloseOutlined />
+        </button>
       </header>
 
-      <div>
+      <div class="qm-dialog-body">
         <div
           v-for="(url, index) in urls"
           :key="index"
@@ -48,31 +45,16 @@ const urls = $computed(() => {
 let checkedIndex = $ref(0);
 </script>
 
-<style scoped>
-.dialog-container {
-  /* always top */
-  z-index: 99999;
-  position: absolute;
-  background-color: white;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  overflow: auto;
-  min-width: var(--app-min-width);
-}
-header {
-  color: var(--app-main-text-color);
-  border-bottom: 1px solid var(--app-main-bg-color);
+<style lang="less" scoped>
+.head-menu {
+  display: flex;
+  gap: 10px;
+  margin-left: 20px;
 }
-.image-index {
-  display: inline-block;
-  border: 1px solid grey;
-  width: 25px;
+.ant-btn {
+  padding: 4px 10px;
+  min-width: 32px;
   text-align: center;
-  border-radius: 5px;
-
-  cursor: pointer;
 }
 
 .show-image {

src/features/mark/MarkBoardTrack.vue

@@ -5,7 +5,7 @@
     :class="[
       {
         hide: store.isScoreBoardCollapsed && !props.modal,
-        'in-dialog': store.isScoreBoardCollapsed && !props.modal,
+        'in-dialog': store.isScoreBoardCollapsed && props.modal,
         show: !store.isScoreBoardCollapsed,
       },
     ]"

src/features/mark/MarkBoardTrackDialog.vue

@@ -3,9 +3,10 @@
     v-if="store.isScoreBoardCollapsed"
     title="给分板"
     top="10%"
-    width="300px"
+    width="282px"
     fixedWidth
     height="400px"
+    customClass="board-dialog"
     @close="close"
   >
     <mark-board-track

src/features/mark/ShortCutModal.vue

@@ -3,7 +3,7 @@
     v-if="store.setting.uiSetting['shortCut.modal']"
     top="10%"
     width="500px"
-    height="350px"
+    height="360px"
     title="快捷键"
     :enableResize="false"
     @close="close"
@@ -106,10 +106,9 @@ const close = () => {
 
 <style>
 .short-cut-container {
-  margin: 20px;
   columns: 2;
   column-fill: auto;
-  height: calc(100% - 40px);
+  height: 100%;
 }
 
 .short-cut-container .row {

src/features/mark/SpecialTagModal.vue

@@ -3,15 +3,12 @@
     v-if="store.setting.uiSetting['specialTag.modal']"
     top="10%"
     width="320px"
-    height="180px"
+    height="220px"
     title="特殊标记"
     :enableResize="false"
     @close="close"
   >
-    <div
-      class="tw-flex tw-place-content-between tw-m-4 tw-text-xl tw-cursor-pointer"
-      style="color: var(--app-main-text-color)"
-    >
+    <div class="tag-list">
       <div
         :class="[store.currentSpecialTag === '√' && 'tag-selected', 'tag']"
         @click="toggleTag('√')"
@@ -32,18 +29,15 @@
       </div>
       <div
         :class="[store.currentSpecialTag === '——' && 'tag-selected', 'tag']"
-        style="width: 70px; border-radius: 5px"
         @click="toggleTag('——')"
       >
         <u>下划线</u>
       </div>
     </div>
 
-    <div class="tw-flex tw-place-content-between tw-mt-8 tw-mx-2">
+    <div class="tag-footer">
       <qm-button
         type="primary"
-        shape="round"
-        size="large"
         style="
           background-color: var(--app-undo-button-bg-color);
           border-color: var(--app-undo-button-bg-color);
@@ -56,8 +50,6 @@
 
       <qm-button
         type="primary"
-        shape="round"
-        size="large"
         :clickTimeout="300"
         @click="clearAllTagsOfCurrentTask"
       >
@@ -96,16 +88,39 @@ const close = () => {
 </script>
 
 <style>
+.tag-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 .tag {
-  width: 30px;
-  height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 2px;
-  border-radius: 30px;
+  min-width: 40px;
+  height: 40px;
+  padding: 5px 8px;
+  border-radius: 6px;
+  font-size: 20px;
+  cursor: pointer;
+}
+.tag:hover {
+  background-color: var(--app-main-bg-color);
 }
 .tag-selected {
+  color: var(--color-text-primary);
   background-color: var(--app-main-bg-color);
 }
+
+.tag-footer {
+  display: flex;
+  gap: 10px;
+  margin-top: 40px;
+}
+.tag-footer .ant-btn {
+  flex: 1;
+  border-radius: 8px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
 </style>

src/main.ts

@@ -7,6 +7,7 @@ if (!validUA) {
 }
 import "./styles/global.css";
 import "./styles/mark.less";
+import "./styles/pages.less";
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import { initMarkStore } from "@/store/store";

src/styles/mark.less

@@ -256,8 +256,6 @@
   }
 
   &.in-dialog {
-    max-width: 100%;
-    min-width: 100%;
     height: 100%;
   }
 
@@ -461,6 +459,11 @@
     }
   }
 }
+.board-dialog.qm-dialog {
+  .qm-dialog-body {
+    padding: 0;
+  }
+}
 
 // mark-history
 .mark-history {

src/styles/pages.less

@@ -0,0 +1,91 @@
+/* qm-dialog */
+.qm-dialog {
+  position: absolute;
+  z-index: 1020;
+  border-radius: 6px;
+  min-width: 100px;
+  background-color: var(--app-container-bg-color);
+  border: 1px solid var(--app-main-bg-color);
+  box-shadow: 0px 4px 8px 0px rgba(25, 27, 55, 0.1);
+
+  .qm-dialog-header {
+    position: relative;
+    border-radius: 6px 6px 0 0;
+    color: var(--app-main-text-color);
+    padding-right: 50px;
+    border-bottom: 1px solid var(--app-main-bg-color);
+    height: 55px;
+  }
+  .qm-dialog-title {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 22px;
+    padding: 10px 20px;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+
+    &.drag {
+      cursor: move;
+    }
+
+    h2 {
+      margin: 0;
+    }
+  }
+  .qm-dialog-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    z-index: 10;
+    padding: 0;
+
+    color: rgba(0, 0, 0, 0.45);
+    font-weight: 700;
+    line-height: 1;
+    text-decoration: none;
+    background: transparent;
+    border: 0;
+    outline: 0;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover {
+      color: rgba(0, 0, 0, 0.75);
+    }
+  }
+  .qm-dialog-body {
+    padding: 16px 20px;
+    height: calc(100% - 55px);
+    overflow: auto;
+  }
+  .resize-handler {
+    position: absolute;
+    bottom: -10px;
+    right: -10px;
+    width: 20px;
+    height: 20px;
+    cursor: nwse-resize;
+  }
+
+  &.fullscreen {
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9999;
+    overflow: hidden;
+    border-radius: 0;
+
+    .qm-dialog-header {
+      border-radius: 0;
+    }
+  }
+}