kyj-yanglao-web-new/src/views/living-home/device-management/home-device/components/TopInfoBar.vue

<template>
  <div class="top-info-bar">
    <div class="system-title-section">
      <h1 class="system-title">{{ tenantName }}</h1>
      <p class="system-subtitle">智能守护 • 安心养老 • 实时监控</p>
    </div>
    <div class="time-display">
      <div class="current-date">{{ currentDate }}</div>
      <div class="current-time">{{ currentTime }}</div>
      <!-- <button class="fullscreen-btn" @click="toggleFullScreen">
        <Icon icon="ep:full-screen" />
      </button> -->
      <Setting />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Setting } from '@/layout/components/Setting'

interface Props {
  tenantName: string
}

withDefaults(defineProps<Props>(), {
  tenantName: ''
})

const currentDate = ref('')
const currentTime = ref('')
const timeInterval = ref<ReturnType<typeof setInterval> | null>(null)
const isFullscreen = ref(false)

const updateDateTime = () => {
  const now = new Date()
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

const handleFullscreenChange = () => {
  isFullscreen.value = !!document.fullscreenElement
}

const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen().catch((err) => {
      ElMessage.error(`全屏请求失败: ${err.message}`)
    })
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}

onMounted(() => {
  updateDateTime()
  timeInterval.value = setInterval(() => {
    updateDateTime()
  }, 1000)
  document.addEventListener('fullscreenchange', handleFullscreenChange)
})

onUnmounted(() => {
  if (timeInterval.value) {
    clearInterval(timeInterval.value)
  }
  document.removeEventListener('fullscreenchange', handleFullscreenChange)
})
</script>

<style lang="scss" scoped>
$primary-color: #1a73e8;
$secondary-color: #00c6ff;
$accent-color: #7b61ff;
$text-light: #fff;
$text-gray: #8a8f98;

.top-info-bar {
  display: flex;
  padding: 15px 25px;
  margin-bottom: 20px;
  background: rgb(26 31 46 / 90%);
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
}

.system-title-section {
  .system-title {
    margin-bottom: 5px;
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(90deg, $primary-color, $secondary-color, $accent-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .system-subtitle {
    font-size: 18px;
    color: $text-gray;
  }
}

.time-display {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: right;

  .current-date {
    margin-bottom: 5px;
    font-size: 20px;
  }

  .current-time {
    font-size: 28px;
    font-weight: 600;
    color: $secondary-color;
  }
}

.fullscreen-btn {
  width: 40px;
  height: 40px;
  color: white;
  cursor: pointer;
  background: rgb(255 255 255 / 20%);
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background: rgb(255 255 255 / 30%);
  }

  :deep(svg),
  :deep(span) {
    width: 24px !important;
    height: 24px !important;
  }
}
</style>