<template>
  <div class="bg-light-gray font-sans text-text-dark flex flex-col h-screen antialiased">
    <!-- Header -->
    <header class="bg-white shadow-md z-10 flex-shrink-0">
      <div class="container mx-auto px-4 py-3 flex items-center justify-between relative">
        <div class="flex items-center space-x-4">
          <router-link to="/" class="text-text-medium hover:text-tech-blue transition-colors">
            <i data-lucide="home" class="w-6 h-6"></i>
          </router-link>
          <router-link to="/messages" class="text-text-medium hover:text-tech-blue transition-colors">
            <i data-lucide="bell" class="w-6 h-6"></i>
          </router-link>
        </div>
        <h1 class="text-lg font-bold text-text-dark absolute left-1/2 -translate-x-1/2">人生轨迹</h1>
        <router-link to="/settings" class="text-text-medium hover:text-tech-blue transition-colors">
          <i data-lucide="user" class="w-6 h-6"></i>
        </router-link>
      </div>
    </header>

    <!-- Main Content -->
    <main class="flex-1 overflow-y-auto p-4 lg:p-6 flex items-center justify-center pb-24">
      <div class="text-center">
        <i data-lucide="milestone" class="w-16 h-16 mx-auto text-gray-300"></i>
        <h2 class="mt-4 text-xl font-semibold text-text-dark">记录你的人生轨迹</h2>
        <p class="mt-2 text-text-medium">重要的时刻、达成的目标、难忘的经历...都在这里汇集。</p>
        <p class="mt-1 text-text-medium">此功能正在建设中，敬请期待！</p>
      </div>
    </main>

    <!-- App Navigation -->
    <BottomNavigation />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import BottomNavigation from '@/components/layout/BottomNavigation.vue'

// 生命周期
onMounted(() => {
  // 初始化Lucide图标
  if (window.lucide) {
    window.lucide.createIcons()
  }
})
</script>

<style scoped>
/* 导入原始样式变量 */
:root {
  --tech-blue: #4A90E2;
  --warm-orange: #F5A623;
  --white: #FFFFFF;
  --light-gray: #F7F8FA;
  --text-dark: #333333;
  --text-medium: #888888;
}

/* 应用原始样式类 */
.bg-tech-blue { background-color: var(--tech-blue); }
.bg-warm-orange { background-color: var(--warm-orange); }
.bg-light-gray { background-color: var(--light-gray); }
.text-tech-blue { color: var(--tech-blue); }
.text-text-dark { color: var(--text-dark); }
.text-text-medium { color: var(--text-medium); }
.border-tech-blue { border-color: var(--tech-blue); }

.life-milestones-page {
  font-family: 'Noto Sans SC', sans-serif;
  background-color: var(--light-gray);
  color: var(--text-dark);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 全局样式 */
body {
  font-family: 'Noto Sans SC', sans-serif;
}
</style> 