dropdown for options

src/features/mark/MarkBoardKeyBoard.vue

@@ -1,9 +1,19 @@
 <template>
   <div v-if="store.currentTask" class="mark-board-track-container">
-    <div>
-      <h1 class="tw-text-3xl tw-text-center" @click="toggleKeyMouse">
-        键盘给分
-      </h1>
+    <div class="tw-my-2 tw-flex tw-place-content-center">
+      <a-dropdown>
+        <template #overlay>
+          <a-menu>
+            <a-menu-item key="1" @click="toggleKeyMouse">
+              鼠标给分
+            </a-menu-item>
+          </a-menu>
+        </template>
+        <a-button>
+          键盘给分
+          <DownOutlined style="display: inline-flex" />
+        </a-button>
+      </a-dropdown>
     </div>
     <div>
       <h1 class="tw-text-3xl tw-text-center">
@@ -67,10 +77,12 @@ import { store } from "./store";
 import { keyMouse } from "./use/keyboardAndMouse";
 import { autoChooseFirstQuestion } from "./use/autoChooseFirstQuestion";
 import { message } from "ant-design-vue";
+import { DownOutlined } from "@ant-design/icons-vue";
 
 export default defineComponent({
   name: "MarkBoardKeyBoard",
   emits: ["submit"],
+  components: { DownOutlined },
   setup(props, { emit }) {
     const { toggleKeyMouse } = keyMouse();
     const { chooseQuestion } = autoChooseFirstQuestion();

src/features/mark/MarkBoardMouse.vue

@@ -1,9 +1,19 @@
 <template>
   <div v-if="store.currentTask" class="mark-board-track-container">
-    <div>
-      <h1 class="tw-text-3xl tw-text-center" @click="toggleKeyMouse">
-        鼠标给分
-      </h1>
+    <div class="tw-my-2 tw-flex tw-place-content-center">
+      <a-dropdown>
+        <template #overlay>
+          <a-menu>
+            <a-menu-item key="1" @click="toggleKeyMouse">
+              键盘给分
+            </a-menu-item>
+          </a-menu>
+        </template>
+        <a-button>
+          鼠标给分
+          <DownOutlined style="display: inline-flex" />
+        </a-button>
+      </a-dropdown>
     </div>
     <div>
       <h1 class="tw-text-3xl tw-text-center">
@@ -51,10 +61,12 @@ import { defineComponent, watch } from "vue";
 import { store } from "./store";
 import { keyMouse } from "./use/keyboardAndMouse";
 import { message } from "ant-design-vue";
+import { DownOutlined } from "@ant-design/icons-vue";
 
 export default defineComponent({
   name: "MarkBoardMouse",
   emits: ["submit"],
+  components: { DownOutlined },
   setup(props, { emit }) {
     const { toggleKeyMouse } = keyMouse();
 

src/features/mark/MarkHeader.vue

@@ -68,8 +68,23 @@
         <FullscreenOutlined class="icon-font icon-font-size-20" />
       </li>
     </ul>
-    <div @click="toggleSettingMode">
-      {{ modeName }} {{ store.setting.forceMode ? "" : "(切换)" }}
+    <div>
+      <a-dropdown class="header-bg-color">
+        <template #overlay v-if="!store.setting.forceMode">
+          <a-menu>
+            <a-menu-item key="1" @click="toggleSettingMode">
+              {{ exchangeModeName }}
+            </a-menu-item>
+          </a-menu>
+        </template>
+        <a-button style="color: white !important; border: none">
+          {{ modeName }}
+          <DownOutlined
+            v-if="!store.setting.forceMode"
+            style="display: inline-flex"
+          />
+        </a-button>
+      </a-dropdown>
     </div>
     <div @click="toggleHistory" title="回看">
       <HistoryOutlined class="icon-font icon-font-size-20" />
@@ -116,6 +131,7 @@ import {
   PoweroffOutlined,
   ClockCircleOutlined,
   QuestionCircleOutlined,
+  DownOutlined,
 } from "@ant-design/icons-vue";
 import { ModeEnum } from "@/types";
 
@@ -127,6 +143,7 @@ export default defineComponent({
     FullscreenOutlined,
     HistoryOutlined,
     UserOutlined,
+    DownOutlined,
     PoweroffOutlined,
     ClockCircleOutlined,
     QuestionCircleOutlined,
@@ -135,6 +152,9 @@ export default defineComponent({
     const modeName = computed(() =>
       store.setting.mode === ModeEnum.TRACK ? "轨迹模式" : "普通模式"
     );
+    const exchangeModeName = computed(() =>
+      store.setting.mode === ModeEnum.TRACK ? "普通模式" : "轨迹模式"
+    );
     function toggleSettingMode() {
       if (store.setting.mode === ModeEnum.TRACK) {
         store.setting.mode = ModeEnum.COMMON;
@@ -219,6 +239,7 @@ export default defineComponent({
     return {
       store,
       modeName,
+      exchangeModeName,
       toggleSettingMode,
       progress,
       group,
@@ -236,6 +257,9 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.header-bg-color {
+  background-color: #5d6d7d;
+}
 .header-container {
   /* z-index: 10000; */
   position: relative;
@@ -261,4 +285,7 @@ export default defineComponent({
   font-size: 18px;
   line-height: 18px;
 }
+.header-bg-color.ant-btn:hover {
+  background-color: #5d6d7d !important;
+}
 </style>