抽象 color 为 css var

src/App.vue

@@ -6,7 +6,6 @@
     :spinning="spinning"
     :delay="32"
     class="global-mask fade-in"
-    :style="spinning && { zIndex: 6000 }"
   />
 </template>
 
@@ -78,7 +77,8 @@ export default defineComponent({
   display: flex;
   place-content: center;
   align-items: center;
-  background-color: grey;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 6000;
 }
 .fade-in {
   opacity: 0.7;

src/components/QmDialog.vue

@@ -175,14 +175,14 @@ export default defineComponent({
   z-index: 1020;
   position: absolute;
   min-width: 100px;
-  background-color: white;
-  border: 1px solid #edf2fa;
+  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: #283e76;
-  border-bottom: 1px solid #edf2fa;
+  color: var(--app-main-text-color);
+  border-bottom: 1px solid var(--app-main-bg-color);
 }
 .resize-handler {
   position: absolute;

src/components/ZoomPaper.vue

@@ -20,6 +20,7 @@
     />
     <FullscreenOutlined
       class="icon-font-size-20 tw-cursor-pointer"
+      style="color: white"
       @click="normalScale"
       title="适应"
     />

src/features/arbitrate/MarkHeader.vue

@@ -149,11 +149,11 @@ onMounted(() => {
   font-size: 16px;
   height: 40px;
 
-  background-color: #5d6d7d;
-  color: white;
+  background-color: var(--header-bg-color);
+  color: rgba(255, 255, 255, 0.5);
 }
 .highlight-text {
-  color: #ffe400;
+  color: white;
 }
 .icon-font {
   display: block;

src/features/library/inspect/MarkHeader.vue

@@ -80,11 +80,11 @@ onMounted(() => {
   font-size: 16px;
   height: 40px;
 
-  background-color: #5d6d7d;
-  color: white;
+  background-color: var(--header-bg-color);
+  color: rgba(255, 255, 255, 0.5);
 }
 .highlight-text {
-  color: #ffe400;
+  color: white;
 }
 .icon-font {
   display: block;

src/features/library/libraryTrack/MarkHeader.vue

@@ -52,11 +52,11 @@ const closeWindow = async () => {
   font-size: 16px;
   height: 40px;
 
-  background-color: #5d6d7d;
-  color: white;
+  background-color: var(--header-bg-color);
+  color: rgba(255, 255, 255, 0.5);
 }
 .highlight-text {
-  color: #ffe400;
+  color: white;
 }
 .icon-font {
   display: block;

src/features/library/quality/MarkHeader.vue

@@ -98,11 +98,11 @@ const closeWindow = async () => {
   font-size: 16px;
   height: 40px;
 
-  background-color: #5d6d7d;
-  color: white;
+  background-color: var(--header-bg-color);
+  color: rgba(255, 255, 255, 0.5);
 }
 .highlight-text {
-  color: #ffe400;
+  color: white;
 }
 .icon-font {
   display: block;

src/features/mark/AllPaperModal.vue

@@ -1,17 +1,18 @@
 <template>
   <teleport to="body">
     <div v-if="store.allPaperModal" class="dialog-container">
-      <header class="tw-flex tw-place-content-between">
-        <div class="tw-text-2xl tw-cursor-move">全卷切换</div>
-        <div class="tw-mx-8 tw-flex-grow">
+      <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"
             @click="checkedIndex = index"
             class="image-index hover:tw-bg-gray-300"
             :class="checkedIndex === index && 'tw-bg-gray-300'"
-            >{{ index + 1 }}</span
           >
+            {{ index + 1 }}
+          </span>
         </div>
         <a-button shape="circle" @click="store.allPaperModal = false">
           <template #icon><CloseOutlined /></template>
@@ -58,14 +59,13 @@ const checkedIndex = ref(0);
   min-width: var(--app-min-width);
 }
 header {
-  background-color: #eff3f6;
+  color: var(--app-main-text-color);
+  border-bottom: 1px solid var(--app-main-bg-color);
 }
 .image-index {
   display: inline-block;
   border: 1px solid grey;
   width: 25px;
-  margin-right: 10px;
-  margin-top: 5px;
   text-align: center;
   border-radius: 5px;
 

src/features/mark/CommonMarkBody.vue

@@ -530,7 +530,7 @@ const showBigImage = (event: MouseEvent) => {
   /* background-size: 8px 8px;
   background-image: linear-gradient(to right, #e7e7e7 4px, transparent 4px),
     linear-gradient(to bottom, transparent 4px, #e7e7e7 4px); */
-  background-color: white;
+  background-color: var(--app-container-bg-color);
   background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
     linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
@@ -547,7 +547,7 @@ const showBigImage = (event: MouseEvent) => {
   height: calc(100%);
   font-size: 20px;
   overflow: hidden;
-  background-color: white;
+  background-color: var(--app-container-bg-color);
 }
 .empty-task img {
   display: block;

src/features/mark/MarkBoardKeyBoard.vue

@@ -44,17 +44,7 @@
           @confirm="$emit('allZeroSubmit')"
           :overlayStyle="{ width: '200px' }"
         >
-          <a-button
-            type="primary"
-            size="middle"
-            style="
-              height: 76px;
-              border-radius: 10px;
-              padding: 7px;
-              background-color: #4db9ff;
-              border: none;
-            "
-          >
+          <a-button type="primary" size="middle" class="all-zero-button">
             <span>全零分</span>
           </a-button>
         </a-popconfirm>
@@ -358,10 +348,7 @@ function submit() {
   overflow: auto;
   z-index: 1001;
   transition: margin-right 0.5s;
-  --big-score-color: #283e76;
-  --high-light-score-color: #5d65ff;
-  --the-color: #7584ac;
-  color: var(--the-color);
+  color: var(--app-small-header-text-color);
 }
 .mark-board-track-container.show {
   margin-right: 0;
@@ -371,23 +358,23 @@ function submit() {
 }
 
 .top-container {
-  background-color: white;
+  background-color: var(--app-container-bg-color);
 }
 .total-score {
-  color: var(--big-score-color);
+  color: var(--app-main-text-color);
   font-size: 32px;
 }
 .question {
   min-width: 80px;
   padding: 10px;
-  background-color: white;
+  background-color: var(--app-container-bg-color);
 }
 .current-question .score {
   color: var(--high-light-score-color);
 }
 
 .current-score {
-  color: #5d65ff;
+  color: var(--app-score-color);
 }
 .current-score-indicator {
   position: absolute;
@@ -397,4 +384,11 @@ function submit() {
   height: 5px;
   background-color: #5c69f6;
 }
+.all-zero-button {
+  height: 76px;
+  border-radius: 10px;
+  padding: 7px;
+  background-color: #4db9ff;
+  border: none;
+}
 </style>

src/features/mark/MarkBoardMouse.vue

@@ -44,17 +44,7 @@
           @confirm="$emit('allZeroSubmit')"
           :overlayStyle="{ width: '200px' }"
         >
-          <a-button
-            type="primary"
-            size="middle"
-            style="
-              height: 76px;
-              border-radius: 10px;
-              padding: 7px;
-              background-color: #4db9ff;
-              border: none;
-            "
-          >
+          <a-button type="primary" size="middle" class="all-zero-button">
             <span>全零分</span>
           </a-button>
         </a-popconfirm>
@@ -205,10 +195,7 @@ function submit() {
   overflow: auto;
   z-index: 1001;
   transition: margin-right 0.5s;
-  --big-score-color: #283e76;
-  --high-light-score-color: #5d65ff;
-  --the-color: #7584ac;
-  color: var(--the-color);
+  color: var(--app-small-header-text-color);
 }
 .mark-board-track-container.show {
   margin-right: 0;
@@ -218,10 +205,10 @@ function submit() {
 }
 
 .top-container {
-  background-color: white;
+  background-color: var(--app-container-bg-color);
 }
 .total-score {
-  color: var(--big-score-color);
+  color: var(--app-main-text-color);
   font-size: 32px;
 }
 .question {
@@ -234,12 +221,12 @@ function submit() {
   font-size: 12px;
   display: grid;
   place-content: center;
-  background-color: white;
+  background-color: var(--app-container-bg-color);
 
   border-radius: 30px;
 }
 .current-score {
-  color: #5d65ff;
+  color: var(--app-score-color);
 }
 .current-score-indicator {
   position: absolute;
@@ -249,4 +236,11 @@ function submit() {
   height: 5px;
   background-color: #5c69f6;
 }
+.all-zero-button {
+  height: 76px;
+  border-radius: 10px;
+  padding: 7px;
+  background-color: #4db9ff;
+  border: none;
+}
 </style>

src/features/mark/MarkBoardTrack.vue

@@ -29,17 +29,7 @@
           @confirm="$emit('allZeroSubmit')"
           :overlayStyle="{ width: '200px' }"
         >
-          <a-button
-            type="primary"
-            size="middle"
-            style="
-              height: 76px;
-              border-radius: 10px;
-              padding: 7px;
-              background-color: #4db9ff;
-              border: none;
-            "
-          >
+          <a-button type="primary" size="middle" class="all-zero-button">
             <span>全零分</span>
           </a-button>
         </a-popconfirm>
@@ -137,7 +127,10 @@
         type="primary"
         shape="round"
         size="large"
-        style="background-color: #4ed885; border-color: #4ed885"
+        style="
+          background-color: var(--app-undo-button-bg-color);
+          border-color: var(--app-undo-button-bg-color);
+        "
         :clickTimeout="300"
         @click="clearLatestMarkOfCurrentQuetion"
       >
@@ -374,10 +367,7 @@ function submit() {
   overflow: auto;
   z-index: 1001;
   transition: margin-right 0.5s;
-  --big-score-color: #283e76;
-  --high-light-score-color: #5d65ff;
-  --the-color: #7584ac;
-  color: var(--the-color);
+  color: var(--app-small-header-text-color);
 }
 .mark-board-track-container.show {
   margin-right: 0;
@@ -387,10 +377,10 @@ function submit() {
 }
 
 .top-container {
-  background-color: white;
+  background-color: var(--app-container-bg-color);
 }
 .total-score {
-  color: var(--big-score-color);
+  color: var(--app-main-text-color);
   font-size: 32px;
 }
 .question {
@@ -398,8 +388,7 @@ function submit() {
   max-width: 110px;
   min-height: 72px;
   padding: 10px;
-  /* border: 1px solid grey; */
-  background-color: white;
+  background-color: var(--app-container-bg-color);
 }
 .current-question .score {
   color: var(--high-light-score-color);
@@ -411,12 +400,12 @@ function submit() {
   font-size: 12px;
   display: grid;
   place-content: center;
-  background-color: white;
+  background-color: var(--app-container-bg-color);
 
   border-radius: 30px;
 }
 .current-score {
-  color: #5d65ff;
+  color: var(--app-score-color);
 }
 .current-score-indicator {
   position: absolute;
@@ -426,4 +415,11 @@ function submit() {
   height: 5px;
   background-color: #5c69f6;
 }
+.all-zero-button {
+  height: 76px;
+  border-radius: 10px;
+  padding: 7px;
+  background-color: #4db9ff;
+  border: none;
+}
 </style>

src/features/mark/MarkChangeProfile.vue

@@ -110,16 +110,13 @@ export default defineComponent({
 });
 </script>
 <style>
-/* .profile-wrapper .ant-modal-content {
-  background-color: #191b37;
-} */
 .profile-wrapper .ant-modal-title {
-  color: #283e76;
+  color: var(--app-main-text-color);
 }
 .profile-wrapper .anticon-close {
   vertical-align: middle;
 }
 .profile-wrapper .ant-modal-body label {
-  color: #435488 !important;
+  color: var(--app-bold-text-color) !important;
 }
 </style>

src/features/mark/MarkHeader.vue

@@ -165,7 +165,9 @@
     </a-popover>
     <a-popover v-if="isScanImage()" trigger="hover" class="tw-cursor-pointer">
       <template #title>
-        <span style="color: #283e76; font-size: 16px">小助手</span>
+        <span style="color: var(--app-main-text-color); font-size: 16px"
+          >小助手</span
+        >
       </template>
       <template #content>
         <table class="assistant-table">
@@ -216,7 +218,11 @@
             <td>
               <a-button
                 type="text"
-                style="color: #5d65ff; margin-right: -15px; height: 25px"
+                style="
+                  color: var(--app-primary-button-bg-color);
+                  margin-right: -15px;
+                  height: 25px;
+                "
                 @click="openProblemModal"
               >
                 选择问题类型
@@ -496,14 +502,14 @@ watch(
   color: white;
 }
 .header-bg-color.ant-btn:hover {
-  background-color: #5d6d7d !important;
+  background-color: var(--app-ant-select-bg-override-color) !important;
 }
 
 .assistant-table {
   z-index: 5500;
   border-collapse: separate;
   border-spacing: 0 1em;
-  color: #435488;
+  color: var(--app-bold-text-color);
   width: 240px;
 }
 .assistant-table tr td:nth-child(2) {

src/features/mark/MarkHistory.vue

@@ -304,7 +304,7 @@ function searchHistoryTask() {
 }
 
 .current-task {
-  background-color: white;
+  background-color: var(--app-container-bg-color);
   padding-left: 5px;
   margin-left: -5px;
   padding-right: 5px;

src/features/mark/MarkProblemDialog.vue

@@ -109,7 +109,7 @@ export default defineComponent({
 
 <style scoped>
 .profile-wrapper .ant-modal-title {
-  color: #283e76;
+  color: var(--app-main-text-color);
 }
 .profile-wrapper .anticon-close {
   vertical-align: text-top;
@@ -121,13 +121,9 @@ export default defineComponent({
   border-spacing: 0 0.5em;
 }
 .group-table th {
-  color: #7584ac;
+  color: var(--app-small-header-text-color);
 }
 .group-table tr td {
-  color: #435488;
-}
-
-.current-group {
-  background-color: lightblue;
+  color: var(--app-bold-text-color);
 }
 </style>

src/features/mark/MarkSwitchGroupDialog.vue

@@ -107,15 +107,6 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.profile-wrapper .ant-modal-title {
-  color: #283e76;
-}
-.profile-wrapper .anticon-close {
-  vertical-align: text-top;
-}
-.profile-wrapper .ant-modal-body label {
-  color: #435488 !important;
-}
 .group-table {
   width: 100%;
   border-collapse: separate;
@@ -126,3 +117,17 @@ export default defineComponent({
   background-color: #f2f7ff;
 }
 </style>
+<style>
+.profile-wrapper .ant-modal-title {
+  color: var(--app-main-text-color);
+}
+.profile-wrapper .anticon-close {
+  vertical-align: text-top;
+}
+.profile-wrapper .ant-modal-body {
+  color: var(--app-bold-text-color);
+}
+.profile-wrapper .ant-modal-body th {
+  color: var(--app-small-header-text-color);
+}
+</style>

src/features/mark/MultiMediaMarkBody.vue

@@ -231,7 +231,7 @@ onUpdated(() => {
 
 <style scoped>
 .question {
-  background-color: white;
+  background-color: var(--app-container-bg-color);
   padding: 5px;
   border-radius: 5px;
 }

src/features/mark/SheetViewModal.vue

@@ -1,9 +1,9 @@
 <template>
   <teleport to="body">
     <div v-if="store.sheetViewModal" class="dialog-container">
-      <header class="tw-flex tw-place-content-between">
-        <div class="tw-text-2xl tw-cursor-move">原图</div>
-        <div class="tw-mx-8 tw-flex-grow">
+      <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 dataUrls"
             :key="index"
@@ -113,7 +113,7 @@ function getDataUrlForSheetConfig(
   /* always top */
   z-index: 99999;
   position: absolute;
-  background-color: white;
+  background-color: var(--app-container-bg-color);
   top: 0;
   left: 0;
   width: 100vw;
@@ -122,14 +122,13 @@ function getDataUrlForSheetConfig(
   min-width: var(--app-min-width);
 }
 header {
-  background-color: #eff3f6;
+  color: var(--app-main-text-color);
+  border-bottom: 1px solid var(--app-main-bg-color);
 }
 .image-index {
   display: inline-block;
   border: 1px solid grey;
   width: 25px;
-  margin-right: 10px;
-  margin-top: 5px;
   text-align: center;
   border-radius: 5px;
 

src/features/mark/SpecialTagModal.vue

@@ -11,7 +11,7 @@
       class="
         tw-flex tw-place-content-between tw-m-4 tw-text-xl tw-cursor-pointer
       "
-      style="color: #283e76"
+      style="color: var(--app-main-text-color)"
     >
       <div
         @click="toggleTag('√')"
@@ -45,7 +45,10 @@
         type="primary"
         shape="round"
         size="large"
-        style="background-color: #4ed885; border-color: #4ed885"
+        style="
+          background-color: var(--app-undo-button-bg-color);
+          border-color: var(--app-undo-button-bg-color);
+        "
         :clickTimeout="300"
         @click="clearLatestTagOfCurrentTask"
       >
@@ -104,6 +107,6 @@ const close = () => {
   border-radius: 30px;
 }
 .tag-selected {
-  background-color: #edf2fa;
+  background-color: var(--app-main-bg-color);
 }
 </style>

src/features/student/inspect/MarkBody.vue

@@ -156,7 +156,7 @@ const answerPaperScale = computed(() => {
 .mark-body-container {
   height: calc(100vh - 56px);
   overflow: auto;
-  background-color: white;
+  background-color: var(--app-container-bg-color);
   background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
     linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, #e0e0e0 75%),

src/features/student/inspect/MarkHeader.vue

@@ -93,11 +93,11 @@ onMounted(() => {
   font-size: 16px;
   height: 40px;
 
-  background-color: #5d6d7d;
-  color: white;
+  background-color: var(--header-bg-color);
+  color: rgba(255, 255, 255, 0.5);
 }
 .highlight-text {
-  color: #ffe400;
+  color: white;
 }
 .icon-font {
   display: block;

src/features/student/studentTrack/MarkHeader.vue

@@ -40,11 +40,11 @@ const closeWindow = async () => {
   font-size: 16px;
   height: 40px;
 
-  background-color: #5d6d7d;
-  color: white;
+  background-color: var(--header-bg-color);
+  color: rgba(255, 255, 255, 0.5);
 }
 .highlight-text {
-  color: #ffe400;
+  color: white;
 }
 .icon-font {
   display: block;

src/styles/global.css

@@ -3,9 +3,16 @@
 
 :root {
   --header-bg-color: #191b37;
+  --app-container-bg-color: white;
   --app-main-bg-color: #edf2fa;
   --app-main-text-color: #283e76;
   --app-min-width: 1280px;
+  --app-bold-text-color: #435488;
+  --app-small-header-text-color: #7584ac;
+  --app-score-color: #5d65ff;
+  --app-primary-button-bg-color: #5d65ff;
+  --app-ant-select-bg-override-color: #5d6d7d;
+  --app-undo-button-bg-color: #4ed885;
 }
 
 body {
@@ -34,5 +41,5 @@ button.ant-btn span[role="img"] {
 }
 
 button.ant-btn-primary {
-  background-color: #5d65ff;
+  background-color: var(--app-primary-button-bg-color);
 }