“你真的睡着了吗？”一个用浏览器就能判断你是否刷夜的小工具

<template>
  <div>
    <h2>你真的睡着了吗？</h2>
    <textarea v-model="sleepNote" placeholder="睡前想说点啥..." rows="3"></textarea>

    <div class="status">
      <p>最近一次交互时间：{{ lastActiveTimeStr }}</p>
      <p v-if="isSleeping">🛌 检测到你可能已经入睡</p>
      <p v-else>😐 你还醒着呢</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const sleepNote = ref('')
const lastActiveTime = ref(new Date())
const isSleeping = ref(false)
const IDLE_THRESHOLD_MINUTES = 5

const updateActivity = () => {
  lastActiveTime.value = new Date()
  isSleeping.value = false
}

const checkSleepStatus = () => {
  const now = new Date()
  const diffMs = now - lastActiveTime.value
  if (diffMs > IDLE_THRESHOLD_MINUTES * 60 * 1000) {
    isSleeping.value = true
  }
}

const lastActiveTimeStr = computed(() =>
  lastActiveTime.value.toLocaleTimeString()
)

onMounted(() => {
  document.addEventListener('mousemove', updateActivity)
  document.addEventListener('keydown', updateActivity)
  document.addEventListener('touchstart', updateActivity)
  window.addEventListener('focus', updateActivity)

  setInterval(checkSleepStatus, 30000) // 每30秒检查一次
})

onUnmounted(() => {
  document.removeEventListener('mousemove', updateActivity)
  document.removeEventListener('keydown', updateActivity)
  document.removeEventListener('touchstart', updateActivity)
  window.removeEventListener('focus', updateActivity)
})
</script>

<style scoped>
.status {
  margin-top: 1rem;
  font-size: 1.1rem;
}
</style>

<div v-if="!isSleeping">
  <p>睡前放松建议：</p>
  <ul>
    <li>关掉蓝光屏</li>
    <li>听个轻音乐</li>
    <li>避免再刷短视频</li>
  </ul>
</div>