抽象 font-size 到 css var

src/features/mark/CommonMarkBody.vue

@@ -567,7 +567,7 @@ const showBigImage = (event: MouseEvent) => {
   right: 340px;
   color: white;
   pointer-events: none;
-  font-size: 16px;
+  font-size: var(--app-title-font-size);
   background-color: #ef7c78;
 
   width: 30px;

src/features/mark/MarkBoardMouse.vue

@@ -218,7 +218,7 @@ function submit() {
   position: relative;
   width: 32px;
   height: 32px;
-  font-size: 12px;
+  font-size: var(--app-secondary-font-size);
   display: grid;
   place-content: center;
   background-color: var(--app-container-bg-color);

src/features/mark/MarkBoardTrack.vue

@@ -397,7 +397,7 @@ function submit() {
   position: relative;
   width: 32px;
   height: 32px;
-  font-size: 12px;
+  font-size: var(--app-secondary-font-size);
   display: grid;
   place-content: center;
   background-color: var(--app-container-bg-color);

src/features/mark/MarkHeader.vue

@@ -119,7 +119,6 @@
         </template>
         <a-button
           style="
-            font-size: 14px;
             color: rgba(255, 255, 255, 0.5);
             border: none;
             display: flex;
@@ -159,15 +158,20 @@
           src="./images/小助手.png"
           style="width: 10px; height: 12px; margin-right: 2px"
         />
-        <span style="font-size: 14px">小助手</span>
+        <span>小助手</span>
         <div class="dropdown-triangle"></div>
       </div>
     </a-popover>
     <a-popover v-if="isScanImage()" trigger="hover" class="tw-cursor-pointer">
       <template #title>
-        <span style="color: var(--app-main-text-color); font-size: 16px"
-          >小助手</span
+        <span
+          style="
+            color: var(--app-main-text-color);
+            font-size: var(--app-title-font-size);
+          "
         >
+          小助手
+        </span>
       </template>
       <template #content>
         <table class="assistant-table">
@@ -248,7 +252,7 @@
           src="./images/小助手.png"
           style="width: 10px; height: 12px; margin-right: 2px"
         />
-        <span style="font-size: 14px">小助手</span>
+        <span>小助手</span>
         <div class="dropdown-triangle"></div>
       </div>
     </a-popover>
@@ -262,10 +266,7 @@
         src="./images/分组.png"
         style="width: 10px; height: 12px; margin-right: 2px"
       />
-      <div
-        class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap"
-        style="font-size: 14px"
-      >
+      <div class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap">
         {{ "分组:" + store.setting.groupNumber }}
       </div>
       <div v-if="store.groups.length > 1" class="dropdown-triangle"></div>
@@ -273,7 +274,6 @@
     <div class="tw-flex tw-gap-4">
       <div
         class="tw-flex tw-place-items-center tw-cursor-pointer"
-        style="font-size: 14px"
         @click="openProfileModal"
       >
         <!-- <UserOutlined /> -->
@@ -282,7 +282,6 @@
       <div
         class="tw-flex tw-place-items-center tw-cursor-pointer"
         @click="logout"
-        style="font-size: 14px"
       >
         <!-- <PoweroffOutlined /> -->
         退出
@@ -470,7 +469,6 @@ watch(
 }
 .header-container {
   position: relative;
-  font-size: 16px;
   height: 56px;
   line-height: 16px;
 
@@ -495,11 +493,11 @@ watch(
   line-height: 30px;
 }
 .header-small-text {
-  font-size: 12px;
-  /* line-height: 12px; */
+  font-size: var(--app-secondary-font-size);
 }
 .highlight-text {
   color: white;
+  font-size: var(--app-title-font-size);
 }
 .header-bg-color.ant-btn:hover {
   background-color: var(--app-ant-select-bg-override-color) !important;

src/features/mark/MarkHistory.vue

@@ -23,31 +23,19 @@
       <div class="tw-cursor-pointer tw-flex">编号</div>
       <div
         @click="toggleOrderBy('markerTime')"
-        class="tw-cursor-pointer tw-flex"
+        class="tw-cursor-pointer tw-flex tw-items-center"
       >
         时间
-        <CaretUpOutlined
-          style="font-size: 16px"
-          v-if="order === 'markerTime' && sort === 'ASC'"
-        />
-        <CaretDownOutlined
-          style="font-size: 16px"
-          v-if="order === 'markerTime' && sort === 'DESC'"
-        />
+        <CaretUpOutlined v-if="order === 'markerTime' && sort === 'ASC'" />
+        <CaretDownOutlined v-if="order === 'markerTime' && sort === 'DESC'" />
       </div>
       <div
         @click="toggleOrderBy('markerScore')"
-        class="tw-cursor-pointer tw-flex"
+        class="tw-cursor-pointer tw-flex tw-items-center"
       >
         分数
-        <CaretUpOutlined
-          style="font-size: 16px"
-          v-if="order === 'markerScore' && sort === 'ASC'"
-        />
-        <CaretDownOutlined
-          style="font-size: 16px"
-          v-if="order === 'markerScore' && sort === 'DESC'"
-        />
+        <CaretUpOutlined v-if="order === 'markerScore' && sort === 'ASC'" />
+        <CaretDownOutlined v-if="order === 'markerScore' && sort === 'DESC'" />
       </div>
     </div>
     <a-spin :spinning="loading" size="large" tip="Loading..." :delay="500">
@@ -291,7 +279,7 @@ function searchHistoryTask() {
 .history-container {
   min-width: 290px;
   padding: 20px;
-  font-size: 12px;
+  font-size: var(--app-secondary-font-size);
   overflow-y: auto;
   height: calc(100vh - 56px);
   transition: margin-left 0.5s;

src/styles/global.css

@@ -13,11 +13,15 @@
   --app-primary-button-bg-color: #5d65ff;
   --app-ant-select-bg-override-color: #5d6d7d;
   --app-undo-button-bg-color: #4ed885;
+
+  --app-main-font-size: 14px;
+  --app-secondary-font-size: 12px;
+  --app-title-font-size: 16px;
 }
 
 body {
   margin: 0;
-  font-size: 14px;
+  font-size: var(--app-main-font-size);
   min-width: var(--app-min-width);
   min-height: 600px;
   user-select: none;