js-wlg-app/src/App.vue

<template>
  <el-config-provider :locale="zhCn">
    <router-view
      v-slot="{ Component }"
      @click="clearTimer"
      @mousemove="clearTimer"
      @touchmove="clearTimer"
    >
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>

    <ScreenSavers
      v-if="showScreenSavers"
      :autoPlay="autoPlay"
      :list="screenList"
      @onClick="closeScreen"
    />
  </el-config-provider>
</template>

<script lang="ts" setup>
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { onMounted, ref } from "vue";
import { ScreenSavers } from "@/components";
import { getScreenConfigApi } from "./api";
import { GetScreenConfigApiResponse } from "./api/types";

const showScreenSavers = ref(false);
const showScreenTime = ref(60 * 10);
const autoPlay = ref(false);
const screenList = ref<GetScreenConfigApiResponse["img"]>([]);
let time = 0;

onMounted(() => {
  getScreenConfig();
});

const clearTimer = () => {
  time = 0;
};
const closeScreen = () => {
  clearTimer();
  showScreenSavers.value = false;
};

const getScreenConfig = async () => {
  const { data } = await getScreenConfigApi();
  const c = JSON.parse(data.config.content);
  autoPlay.value = c.autoPlay === "true";
  showScreenTime.value = Number(c.time);
  screenList.value = data.img.map((i) => ({
    ...i,
    thumb: process.env.VUE_APP_BACKEND_URL + i.thumb,
  }));

  setInterval(() => {
    time++;
    if (time >= showScreenTime.value && !showScreenSavers.value) {
      showScreenSavers.value = true;
    }
  }, 1000);
};
</script>

<style lang="scss">
@import url("./App.scss");
</style>