弹窗：个人信息、分组，样式修改

src/features/mark/MarkChangeProfile.vue

@@ -8,6 +8,7 @@
     @ok="handleOk"
     @cancel="handleCancel"
     :zIndex="6000"
+    wrapClassName="profile-wrapper"
   >
     <a-form labelAlign="right" :labelCol="{ span: 4 }">
       <a-form-item class="tw-mb-2" :required="true" label="姓名">
@@ -108,3 +109,17 @@ export default defineComponent({
   },
 });
 </script>
+<style>
+/* .profile-wrapper .ant-modal-content {
+  background-color: #191b37;
+} */
+.profile-wrapper .ant-modal-title {
+  color: #283e76;
+}
+.profile-wrapper .anticon-close {
+  vertical-align: middle;
+}
+.profile-wrapper .ant-modal-body label {
+  color: #435488 !important;
+}
+</style>

src/features/mark/MarkSwitchGroupDialog.vue

@@ -1,22 +1,31 @@
 <template>
-  <a-modal title="切换分组" v-model:visible="visible" :zIndex="6000">
+  <a-modal
+    title="切换分组"
+    v-model:visible="visible"
+    :zIndex="6000"
+    wrapClassName="profile-wrapper"
+  >
     <table class="group-table">
       <tr>
-        <th>分组号</th>
+        <th style="padding-left: 15px">分组号</th>
         <th>分组名</th>
         <th>进度</th>
-        <td class="tw-text-right">操作</td>
+        <td class="tw-text-right" style="padding-right: 15px">操作</td>
       </tr>
       <tr
         v-for="(group, index) in store.groups"
         :key="index"
         :class="isCurrentGroup(group.number) && 'current-group'"
       >
-        <td>{{ group.number }}</td>
+        <td style="padding-left: 15px">{{ group.number }}</td>
         <td>{{ group.title }}</td>
         <td>{{ progress(group.totalCount, group.markedCount) }}%</td>
         <td class="tw-text-right">
-          <qm-button type="primary" @click="chooseGroup(group.markerId)">
+          <qm-button
+            type="text"
+            style="color: #5d65ff; font-weight: bold"
+            @click="chooseGroup(group.markerId)"
+          >
             选择
           </qm-button>
         </td>
@@ -100,6 +109,15 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.profile-wrapper .ant-modal-title {
+  color: #283e76;
+}
+.profile-wrapper .anticon-close {
+  vertical-align: middle;
+}
+.profile-wrapper .ant-modal-body label {
+  color: #435488 !important;
+}
 .group-table {
   width: 100%;
   border-collapse: separate;
@@ -107,6 +125,6 @@ export default defineComponent({
 }
 
 .current-group {
-  background-color: lightblue;
+  background-color: #f2f7ff;
 }
 </style>

src/types/global.d.ts

@@ -30,3 +30,16 @@ declare global {
     APP_OPTIONS: Option;
   }
 }
+
+declare module "vue" {
+  // for volar
+  export interface GlobalComponents {
+    RouterLink: typeof import("vue-router")["RouterLink"];
+    RouterView: typeof import("vue-router")["RouterView"];
+    AModal: typeof import("ant-design-vue")["Modal"];
+    AButton: typeof import("ant-design-vue")["Button"];
+    AForm: typeof import("ant-design-vue")["Form"];
+    AFormItem: typeof import("ant-design-vue")["FormItem"];
+    AInput: typeof import("ant-design-vue")["Input"];
+  }
+}