stmms-web/src/components/mark/Mark.vue

<template>
  <div class="my-container" @dblclick="saveTaskToServer">
    <mark-header />
    <div class="flex gap-1">
      <mark-history />
      <mark-body />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, watch } from "vue";
import {
  clearMarkTask,
  getGroup,
  getSetting,
  getStatus,
  getTask,
  saveTask,
  updateUISetting,
} from "@/api/markPage";
import { store } from "./store";
import MarkHeader from "./MarkHeader.vue";
import MarkBody from "./MarkBody.vue";
import { useTimers } from "@/setups/useTimers";
import MarkHistory from "./MarkHistory.vue";

export default defineComponent({
  name: "Mark",
  components: {
    MarkHeader,
    MarkBody,
    MarkHistory,
  },
  setup: () => {
    const { addInterval } = useTimers();

    async function updateMarkTask() {
      const settingRes = await clearMarkTask();
    }

    async function updateSetting() {
      const settingRes = await getSetting();
      settingRes.data.uiSetting["answer.paper.scale"] ||= 1;
      store.setting = settingRes.data;
    }
    async function updateStatus() {
      const res = await getStatus();
      store.status = res.data;
    }
    async function updateGroups() {
      const res = await getGroup();
      store.groups = res.data;
    }
    async function updateTask() {
      const res = await getTask();
      if (res.data.libraryId) {
        store.tasks.push(res.data);
        store.currentTask = store.tasks[0];
      }
    }

    // 5秒更新一次tasks
    // addInterval(() => {
    //   // console.log("get task", store.tasks);
    //   if (store.tasks.length < 3) {
    //     updateTask();
    //   }
    // }, 5 * 1000);

    onMounted(async () => {
      await updateMarkTask();
      updateSetting();
      updateStatus();
      updateGroups();
      updateTask();
    });

    watch(
      () => store.setting.uiSetting,
      () => {
        updateUISetting(undefined, store.setting.uiSetting);
      },
      { deep: true }
    );

    const saveTaskToServer = () => {
      console.log("save task to server");
      saveTask();
    };
    return { store, saveTaskToServer };
  },
});
</script>

<style scoped>
.my-container {
  width: 100%;
}
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>