small UI improve

src/App.vue

@@ -4,7 +4,7 @@
     v-if="spinning"
     size="large"
     :spinning="spinning"
-    :delay="32"
+    :delay="1000"
     class="global-mask fade-in"
   />
 </template>
@@ -57,7 +57,8 @@ export default defineComponent({
 
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: "PingFang SC", tahoma, arial, "Hiragino Sans GB", "宋体",
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: var(--app-main-bg-color);
@@ -77,7 +78,7 @@ export default defineComponent({
   display: flex;
   place-content: center;
   align-items: center;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.7);
   z-index: 6000;
 }
 .fade-in {

src/components/QmDialog.vue

@@ -5,19 +5,24 @@
       :style="positionStyle"
       @click="increaseZIndex"
     >
-      <header ref="mouseHandler" class="tw-flex tw-place-content-between">
+      <header
+        ref="mouseHandler"
+        class="tw-flex tw-place-content-between tw-items-center"
+      >
         <div
-          class="tw-text-base tw-ml-5 tw-my-2 tw-cursor-move tw-flex-grow"
+          class="
+            tw-text-base
+            tw-ml-5
+            tw-my-2
+            tw-cursor-move
+            tw-flex-grow
+            tw-font-bold
+          "
           @mousedown="handleDragMouseDown"
         >
           {{ title }}
         </div>
-        <a-button
-          class="tw-mt-2 tw-mr-2"
-          shape="circle"
-          size="small"
-          @click="$emit('close')"
-        >
+        <a-button shape="circle" size="small" @click="$emit('close')">
           <template #icon><CloseOutlined /></template>
         </a-button>
       </header>