颜色表示是否放大缩小

src/components/mark/MarkHeader.vue

@@ -26,10 +26,20 @@
     </ul>
     <ul class="flex gap-2 mb-0">
       <li @click="upScale" title="放大" style="line-height: 20px">
-        <PlusCircleOutlined :style="{ 'font-size': '20px' }" />
+        <PlusCircleOutlined
+          :style="{
+            'font-size': '20px',
+            color: greaterThanOneScale ? 'green' : 'black',
+          }"
+        />
       </li>
       <li @click="downScale" title="缩小" style="line-height: 20px">
-        <MinusCircleOutlined :style="{ 'font-size': '20px' }" />
+        <MinusCircleOutlined
+          :style="{
+            'font-size': '20px',
+            color: lessThanOneScale ? 'green' : 'black',
+          }"
+        />
       </li>
       <li @click="normalScale" title="适应" style="line-height: 20px">
         <FullscreenOutlined :style="{ 'font-size': '20px' }" />
@@ -124,6 +134,12 @@ export default defineComponent({
     const toggleHistory = () => {
       store.historyOpen = !store.historyOpen;
     };
+    const greaterThanOneScale = computed(() => {
+      return store.setting.uiSetting["answer.paper.scale"] > 1;
+    });
+    const lessThanOneScale = computed(() => {
+      return store.setting.uiSetting["answer.paper.scale"] < 1;
+    });
 
     async function updateHistoryTask({
       pageNumber = 1,
@@ -157,6 +173,8 @@ export default defineComponent({
       upScale,
       downScale,
       normalScale,
+      greaterThanOneScale,
+      lessThanOneScale,
       updateHistoryTask,
       toggleHistory,
     };