feat: 新增护眼模式

src/features/mark/MarkTool.vue

@@ -136,6 +136,13 @@
       </div>
     </div>
     <div>
+      <div
+        :class="['mark-tool-item', { 'is-active': greaterThanOneScale }]"
+        @click="toEyecare"
+      >
+        <img src="@/assets/icons/icon-magnify.svg" />
+        <p>护眼模式</p>
+      </div>
       <div
         v-if="store.setting.enableAllZero && !store.setting.forceSpecialTag"
         class="mark-tool-item"
@@ -258,6 +265,16 @@ const equalOneScale = computed(() => {
   return store.setting.uiSetting["answer.paper.scale"] === 1;
 });
 
+const toEyecare = () => {
+  const classList = Array.from(document.body.classList);
+  const eyecareCls = "eyecare-mode";
+  if (classList.includes(eyecareCls)) {
+    document.body.classList = classList.filter((item) => item !== eyecareCls);
+  } else {
+    document.body.classList = [...classList, eyecareCls];
+  }
+};
+
 function clearLatestTagOfCurrentTask() {
   if (!store.currentTask?.markResult) return;
   store.currentTask.markResult.specialTagList.splice(-1);

src/styles/cssvar.css

@@ -15,5 +15,7 @@
   --app-secondary-font-size: 12px;
   --app-title-font-size: 16px;
 
+  --app-eyecare-color: rgb(228, 246, 230);
+
   /* FIXME: z-index 应该用var来代表的 */
 }

src/styles/page.less

@@ -1537,3 +1537,26 @@
     scale: 1.3;
   }
 }
+
+/* 护眼模式 */
+body.eyecare-mode {
+  .mark-tool,
+  .mark-board-track,
+  .mark-board-track .board-footer,
+  .mark-body-none,
+  .mark-history {
+    background-color: var(--app-eyecare-color) !important;
+  }
+
+  .common-dialog,
+  .qm-dialog,
+  .ant-modal,
+  .mark-dialog .ant-modal-content {
+    filter: brightness(0.95);
+  }
+  .single-image-container img,
+  .common-dialog img,
+  .qm-dialog img {
+    filter: brightness(1.2) contrast(0.8) sepia(0.2) hue-rotate(80deg);
+  }
+}