// 文件路径：src/composables/usePosts.js
import { ref, computed, onMounted } from 'vue'

export function usePosts() {
  const articles = ref([])          // 所有文章数据
  const isLoading = ref(true)       // 加载状态
  const error = ref(null)           // 错误信息
  const activeCategory = ref('全部') // 当前选中的分类
  const keyword = ref('')           // 搜索关键词

  // 提取所有分类（去重）
  const categories = computed(() => {
    const cats = articles.value.map(a => a.category)
    return ['全部', ...new Set(cats)]
  })

  // 过滤后的文章：先按分类，再按关键词
  const filteredArticles = computed(() => {
    let result = articles.value

    // 按分类过滤
    if (activeCategory.value !== '全部') {
      result = result.filter(a => a.category === activeCategory.value)
    }

    // 按关键词过滤（匹配标题或摘要）
    if (keyword.value.trim()) {
      const kw = keyword.value.trim().toLowerCase()
      result = result.filter(a =>
        a.title.toLowerCase().includes(kw) ||
        a.summary.toLowerCase().includes(kw)
      )
    }

    return result
  })

  // 根据 ID 查找单篇文章
  function getArticleById(id) {
    return articles.value.find(a => a.id === id)
  }

  // 切换分类
  function setCategory(cat) {
    activeCategory.value = cat
  }

  // 加载数据
  async function fetchPosts() {
    isLoading.value = true
    error.value = null
    try {
      const res = await fetch('/posts.json')
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      articles.value = await res.json()
    } catch (err) {
      error.value = err.message
    } finally {
      isLoading.value = false
    }
  }

  // 组件挂载时自动加载
  onMounted(() => {
    fetchPosts()
  })

  // 返回给组件使用的数据和方法
  return {
    articles,
    isLoading,
    error,
    activeCategory,
    keyword,
    categories,
    filteredArticles,
    getArticleById,
    setCategory,
    fetchPosts
  }
}

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

// 一行代码获取所有文章相关的数据和方法
const {
  isLoading,
  error,
  activeCategory,
  keyword,
  categories,
  filteredArticles,
  setCategory,
  fetchPosts
} = usePosts()
</script>

<template>
  <div class="home">
    <div class="search-bar">
      <input
        v-model="keyword"
        type="text"
        placeholder="搜索文章标题或摘要..."
      />
    </div>

    <CategoryFilter
      :categories="categories"
      :active-category="activeCategory"
      @update-category="setCategory"
    />

    <p v-if="isLoading">加载中...</p>
    <p v-else-if="error">加载失败：{{ error }}
      <button @click="fetchPosts">重试</button>
    </p>
    <p v-else-if="filteredArticles.length === 0">没有匹配的文章</p>
    <div v-else class="article-grid">
      <BlogCard
        v-for="article in filteredArticles"
        :key="article.id"
        :id="article.id"
        :title="article.title"
        :summary="article.summary"
        :date="article.date"
        :category="article.category"
      />
    </div>
  </div>
</template>

<!-- 文件路径：src/views/PostView.vue -->
<script setup>
import { useRoute } from 'vue-router'
import { usePosts } from '../composables/usePosts.js'

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

const { isLoading, error, getArticleById } = usePosts()

// getArticleById 从已加载的数据中查找，不需要再次 fetch
const article = computed(() => getArticleById(id))
</script>

<template>
  <div>
    <p v-if="isLoading">加载中...</p>
    <div v-else-if="!article">文章不存在</div>
    <article v-else>
      <h1>{{ article.title }}</h1>
      <div v-html="article.content"></div>
    </article>
  </div>
</template>

// 文件路径：src/composables/useDarkMode.js
import { ref, watchEffect } from 'vue'

export function useDarkMode() {
  // 从 localStorage 读取用户之前的设置（没有则默认 light）
  const saved = localStorage.getItem('blog-theme')
  const isDark = ref(saved === 'dark')

  // 应用主题到 DOM
  function applyTheme(dark) {
    if (dark) {
      document.documentElement.classList.add('dark')
      localStorage.setItem('blog-theme', 'dark')
    } else {
      document.documentElement.classList.remove('dark')
      localStorage.setItem('blog-theme', 'light')
    }
  }

  // watchEffect 自动追踪 isDark，变化时同步到 DOM
  watchEffect(() => {
    applyTheme(isDark.value)
  })

  // 切换暗黑模式
  function toggleDark() {
    isDark.value = !isDark.value
  }

  return { isDark, toggleDark }
}

<!-- 文件路径：src/components/NavBar.vue -->
<script setup>
import { useDarkMode } from '../composables/useDarkMode.js'

const { isDark, toggleDark } = useDarkMode()
</script>

<template>
  <header class="navbar">
    <a href="/" class="logo">RUNOOB Blog</a>
    <nav>
      <a href="/">首页</a>
      <button class="theme-btn" @click="toggleDark">
        {{ isDark ? '&#x2600; 亮色' : '☾ 暗黑' }}
      </button>
    </nav>
  </header>
</template>

[mycode4 type="css"> /* 文件路径：src/assets/main.css */ /* 浅色模式（默认） */ :root { --bg-primary: #f5f5f5; --bg-card: #ffffff; --text-primary: #333333; --text-secondary: #666666; --border-color: #eeeeee; } /* 暗黑模式（html 标签加上 .dark 类时生效） */ html.dark { --bg-primary: #1a1a2e; --bg-card: #16213e; --text-primary: #e0e0e0; --text-secondary: #a0a0a0; --border-color: #2a2a4a; } /* 组件中引用这些变量 */ body { background: var(--bg-primary); color: var(--text-primary); } .card { background: var(--bg-card); border: 1px solid var(--border-color); } [/mycode4]