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

const message = ref('加载中...')

// onMounted 在组件挂载到页面后执行
onMounted(() => {
  // 此时 DOM 已经渲染完成，可以安全地操作 DOM 或发请求
  console.log('组件已挂载，可以开始加载数据了')
  message.value = '数据加载完成！'
})
</script>

<template>
  <p>{{ message }}</p>
</template>

// 文件路径：public/posts.json
[
  {
    "id": 1,
    "title": "Vue3 入门完全指南",
    "summary": "从零开始学习 Vue3 组合式 API，涵盖 ref、reactive、computed 等核心概念。",
    "content": "<h2>为什么学 Vue3？</h2><p>Vue3 是目前最流行的前端框架之一...</p>",
    "category": "Vue",
    "date": "2024-05-10"
  },
  {
    "id": 2,
    "title": "JavaScript 异步编程详解",
    "summary": "一文搞懂 Promise、async/await、事件循环与微任务队列。",
    "content": "<h2>什么是异步？</h2><p>JS 是单线程的...</p>",
    "category": "JavaScript",
    "date": "2024-05-08"
  },
  {
    "id": 3,
    "title": "CSS Grid 布局实战",
    "summary": "用 CSS Grid 轻松实现复杂的响应式布局。",
    "content": "<h2>Grid 入门</h2><p>Grid 是二维布局系统...</p>",
    "category": "CSS",
    "date": "2024-05-05"
  }
]

<!-- 文件路径：src/views/HomeView.vue -->
<script setup>
import { ref, onMounted } from 'vue'
import BlogCard from '../components/BlogCard.vue'
import CategoryFilter from '../components/CategoryFilter.vue'

const articles = ref([])        // 初始空数组
const isLoading = ref(true)     // 加载状态
const error = ref(null)         // 错误信息

// 异步加载文章数据
async function fetchPosts() {
  isLoading.value = true
  error.value = null
  try {
    const response = await fetch('/posts.json')
    // 检查响应是否成功（404 或 500 时抛出错误）
    if (!response.ok) {
      throw new Error(`加载失败：HTTP ${response.status}`)
    }
    const data = await response.json()
    articles.value = data
  } catch (err) {
    error.value = err.message
    console.error('文章数据加载失败：', err)
  } finally {
    isLoading.value = false
  }
}

// 组件挂载后立即加载数据
onMounted(() => {
  fetchPosts()
})
</script>

<template>
  <div class="home">
    <h2>最新文章</h2>

    <!-- 加载中状态 -->
    <p v-if="isLoading" class="status-msg">加载中，请稍候...</p>

    <!-- 错误状态 -->
    <p v-else-if="error" class="status-msg error">
      加载失败：{{ error }}
      <button @click="fetchPosts">重试</button>
    </p>

    <!-- 空数据状态 -->
    <p v-else-if="articles.length === 0" class="status-msg">
      还没有文章，敬请期待。
    </p>

    <!-- 正常数据展示 -->
    <template v-else>
      <div class="article-grid">
        <BlogCard
          v-for="article in articles"
          :key="article.id"
          :id="article.id"
          :title="article.title"
          :summary="article.summary"
          :date="article.date"
          :category="article.category"
        />
      </div>
    </template>
  </div>
</template>

<style scoped>
.status-msg {
  text-align: center;
  padding: 60px 0;
  font-size: 16px;
  color: #999;
}
.error { color: #e74c3c; }
.error button {
  margin-left: 10px;
  padding: 4px 12px;
  cursor: pointer;
}
</style>

<!-- 文件路径：src/views/PostView.vue -->
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, RouterLink } from 'vue-router'

const route = useRoute()
const id = Number(route.params.id)

const posts = ref([])           // 所有文章
const isLoading = ref(true)
const error = ref(null)

// 根据 ID 查找当前文章
const article = computed(() => {
  return posts.value.find(p => p.id === id)
})

// 加载所有文章数据
async function fetchPosts() {
  isLoading.value = true
  try {
    const res = await fetch('/posts.json')
    if (!res.ok) throw new Error('加载失败')
    posts.value = await res.json()
  } catch (err) {
    error.value = err.message
  } finally {
    isLoading.value = false
  }
}

onMounted(() => {
  fetchPosts()
})
</script>

<template>
  <div class="post-view">
    <p v-if="isLoading">加载中...</p>
    <p v-else-if="error">加载失败：{{ error }}</p>
    <div v-else-if="!article">
      <h2>文章不存在</h2>
      <RouterLink to="/">返回首页</RouterLink>
    </div>
    <article v-else>
      <span class="category-tag">{{ article.category }}</span>
      <h1>{{ article.title }}</h1>
      <time>{{ article.date }}</time>
      <div class="content" v-html="article.content"></div>
      <RouterLink to="/">← 返回首页</RouterLink>
    </article>
  </div>
</template>