第 6 章 · 组件化开发

<script setup>
// 1-90 行：分类筛选（currentCategory、switchCategory、请求参数拼装）
// 91-150 行：加载状态 / 错误状态 / 空状态
// 151-210 行：列表数据与分页参数
// 211-300 行：收藏、点赞两个动作 + 接口调用 + 乐观更新
// 301-380 行：卡片展示逻辑（推荐角标、浏览量格式化、封面兜底图）
// 381-420 行：一个手写的分页器（上一页 / 下一页 / 页码计算）
// 421-486 行：骨架屏、无障碍属性、以及 3 个只在某些分支用到的常量
</script>

<template>
  <!-- 下面这 300 多行模板里，所有状态都混在同一层作用域 -->
  <!-- 卡片那 30 行在 <li> 里、分页那 40 行在 <div> 里、
       收藏按钮的 @click 和「加载失败重试」的 @click 相隔 200 行 -->
</template>

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

const title = '古典文学网'
const likes = ref(0)
</script>

<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <p>品读古典文学，涵养中国心灵</p>
    <button @click="likes++">点赞 {{ likes }}</button>
  </div>
</template>

<style scoped>
.card { padding: 16px; border: 1px solid #eee; border-radius: 10px; }
</style>

<script setup>
// 导入即可用 —— <script setup> 里不需要再写 components: { HelloCard }
import HelloCard from '@/components/HelloCard.vue'
</script>

<template>
  <HelloCard />
  <HelloCard />
</template>

<script setup>
const props = defineProps({
  // 必填：没有它这张卡片无从渲染
  item: {
    type: Object,
    required: true
  },
  // 有默认值：父组件不传就是 false
  showBadge: {
    type: Boolean,
    default: false
  },
  // 带校验：只允许 sm / md / lg，传错了开发环境会警告
  size: {
    type: String,
    default: 'md',
    validator: (value) => ['sm', 'md', 'lg'].includes(value)
  }
})
</script>

<template>
  <div class="card" :class="`card-${size}`">
    <span v-if="item.isRecommend && showBadge" class="badge">推荐</span>
    <h3>{{ item.title }}</h3>
    <p>{{ item.author }} · {{ item.dynasty }}</p>
  </div>
</template>

<script setup>
import ArticleCard from '@/components/ArticleCard.vue'

const articles = [
  { id: 1, title: '静夜思', author: '李白', dynasty: '唐', isRecommend: true },
  { id: 2, title: '春望', author: '杜甫', dynasty: '唐', isRecommend: false }
]
</script>

<template>
  <ArticleCard
    v-for="item in articles"
    :key="item.id"
    :item="item"
    :show-badge="true"
    size="lg"
  />
</template>

<script setup>
const props = defineProps({
  item: { type: Object, required: true }
})

// 声明「我可能会喊这两声」——事件名用小写连字符风格
const emit = defineEmits(['favorite', 'view-detail'])

function onFavorite() {
  // 第一个参数：事件名；后面的参数：要报给父组件的数据
  emit('favorite', props.item.id, props.item.title)
}

function onViewDetail() {
  emit('view-detail', props.item.id)
}
</script>

<template>
  <div class="card">
    <h3 @click="onViewDetail">{{ item.title }}</h3>
    <p>{{ item.author }} · {{ item.dynasty }}</p>
    <button @click="onFavorite">收藏</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ArticleCard from '@/components/ArticleCard.vue'

const articles = ref([
  { id: 1, title: '静夜思', author: '李白', dynasty: '唐' },
  { id: 2, title: '春望', author: '杜甫', dynasty: '唐' }
])

// 事件处理函数：收到的参数就是子组件 emit 时带过来的
async function handleFavorite(articleId, title) {
  console.log('收到收藏事件：', articleId, title)

  const res = await fetch('http://127.0.0.1:5000/api/favorite/toggle', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ article_id: articleId })
  })
  const json = await res.json()
  console.log('接口返回：', json.msg, json.data)
}

function handleDetail(articleId) {
  console.log('去详情页：', articleId)
}
</script>

<template>
  <ArticleCard
    v-for="item in articles"
    :key="item.id"
    :item="item"
    @favorite="handleFavorite"
    @view-detail="handleDetail"
  />
</template>

<script setup>
defineProps({
  title: { type: String, default: '未命名卡片' }
})
</script>

<template>
  <div class="base-card">
    <div class="card-head">
      <!-- 具名插槽 header：父组件不填就用 props 里的 title 兜底 -->
      <slot name="header">{{ title }}</slot>
    </div>

    <div class="card-body">
      <!-- 默认插槽：没写 name 的那个 -->
      <slot>（这里还什么都没有）</slot>
    </div>

    <div class="card-foot">
      <!-- 具名插槽 footer：父组件不填，这个 div 就是空的 -->
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<style scoped>
.base-card { border: 1px solid #e7ddca; border-radius: 10px; overflow: hidden; }
.card-head { padding: 10px 14px; border-bottom: 1px solid #e7ddca; font-weight: 600; }
.card-body { padding: 14px; }
.card-foot { padding: 10px 14px; border-top: 1px solid #e7ddca; }
</style>

<script setup>
import { ref } from 'vue'
import BaseCard from '@/components/BaseCard.vue'

const favorited = ref(false)
</script>

<template>
  <BaseCard title="静夜思">
    <!-- 想自定义头部，就用 template + #插槽名 -->
    <template #header>
      <b>静夜思</b><span class="tag">唐诗</span>
    </template>

    <!-- 不写名字的内容，全部落到「默认插槽」 -->
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>

    <!-- 底部插槽：想放什么都可以 -->
    <template #footer>
      <button @click="favorited = !favorited">
        {{ favorited ? '已收藏' : '收藏' }}
      </button>
    </template>
  </BaseCard>
</template>

<!-- ① 子组件：负责循环和空状态，每行内容交给插槽 -->
<script setup>
defineProps({
  list: { type: Array, default: () => [] }
})
</script>

<template>
  <p v-if="list.length === 0">暂无数据</p>
  <ul v-else>
    <li v-for="(item, index) in list" :key="item.id">
      <!-- 把 item 和 index「抛」给使用方，父组件在插槽里就能拿到 -->
      <slot name="item" :item="item" :index="index"></slot>
    </li>
  </ul>
</template>

<!-- ② 父组件：用 #item="scope" 接住子组件抛出来的数据 -->
<script setup>
import ArticleList from '@/components/ArticleList.vue'

const articles = [
  { id: 1, title: '静夜思', author: '李白', views: 328 },
  { id: 2, title: '春望', author: '杜甫', views: 256 }
]
</script>

<template>
  <ArticleList :list="articles">
    <!-- 解构写法：{ item, index } 就是子组件 :item :index 绑的变量名 -->
    <template #item="{ item, index }">
      <span>{{ index + 1 }}</span>
      <b>{{ item.title }}</b>
      <span>{{ item.author }}</span>
      <span>{{ item.views }} 次浏览</span>
    </template>
  </ArticleList>
</template>

<script setup>
const props = defineProps({
  item: { type: Object, required: true },
  showBadge: { type: Boolean, default: true }
})

const emit = defineEmits(['favorite', 'view-detail'])
</script>

<template>
  <div class="article-card">
    <span v-if="item.isRecommend && showBadge" class="badge">推荐</span>

    <h3 class="title" @click="emit('view-detail', item.id)">
      {{ item.title }}
    </h3>

    <p class="meta">{{ item.author }} · {{ item.dynasty }}</p>
    <p class="summary">{{ item.summary }}</p>

    <div class="foot">
      <span>{{ item.views }} 次浏览</span>
      <!-- 卡片只喊一声，具体做什么由页面决定 -->
      <button @click="emit('favorite', item.id)">收藏</button>
    </div>
  </div>
</template>

<style scoped>
.article-card { border: 1px solid #e7ddca; border-radius: 10px; padding: 14px; }
.badge { display: inline-block; padding: 1px 6px; border-radius: 6px; background: #f8ecda; color: #c0491c; font-size: 12px; }
.title { margin: 6px 0; cursor: pointer; }
.meta { color: #736a5b; font-size: 13px; }
.summary { font-size: 13.5px; }
.foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
</style>

<script setup>
// 容器只管「怎么排、空了怎么办」，不碰任何业务
defineProps({
  list: { type: Array, default: () => [] }
})
</script>

<template>
  <p v-if="list.length === 0" class="empty">暂无作品，换个分类试试～</p>

  <div v-else class="article-list">
    <div v-for="(item, index) in list" :key="item.id">
      <!-- 循环、key、空状态都由这个组件负责；
           每行长什么样，交给使用方通过插槽决定。
           注意：插槽里的内容是在「使用方」的作用域里编译的，
           所以卡片上的 @favorite 由使用方（页面组件）直接监听即可。 -->
      <slot name="item" :item="item" :index="index"></slot>
    </div>
  </div>
</template>

<style scoped>
.article-list { display: grid; gap: 12px; }
.empty { color: #736a5b; padding: 24px 0; text-align: center; }
</style>

<script setup>
import { ref, onMounted } from 'vue'
import { useArticleList } from '@/composables/useArticleList'
import ArticleList from '@/components/ArticleList.vue'
import ArticleCard from '@/components/ArticleCard.vue'

// 第 5 章的组合式函数：状态与请求都在它里面
const { list, total, loading, error, fetchArticles } = useArticleList()

onMounted(() => fetchArticles({ order_by: 'hot' }))

async function handleFavorite(articleId) {
  const res = await fetch('http://127.0.0.1:5000/api/favorite/toggle', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ article_id: articleId })
  })
  const json = await res.json()
  if (json.code === 200) console.log(json.msg, json.data.favorited)
}

function handleDetail(articleId) {
  console.log('跳转详情页：', articleId)   // 第 7 章换成 router.push
}
</script>

<template>
  <div class="page">
    <h2>作品列表<span class="meta">共 {{ total }} 篇</span></h2>

    <p v-if="loading">加载中……</p>
    <p v-else-if="error" class="err">{{ error }}</p>

    <!-- 空状态与循环都在 ArticleList 里，这里只负责「把卡片塞进去」 -->
    <ArticleList
      v-else
      :list="list"
      @favorite="handleFavorite"
      @view-detail="handleDetail"
    >
      <template #item="{ item }">
        <ArticleCard :item="item" />
      </template>
    </ArticleList>
  </div>
</template>

<style scoped>
.meta { margin-left: 8px; color: #736a5b; font-size: 13px; font-weight: 400; }
.err { color: #c0491c; }
</style>

<script setup>
// Vue 3.4+ 写法：一行得到一个「可读可写」的 model
// 它内部自动做了两件事：读父组件的值、改值时 emit('update:modelValue', 新值)
const favorited = defineModel({ type: Boolean, default: false })

function toggle() {
  // 直接赋值就会同步给父组件 —— 不需要手写 emit
  favorited.value = !favorited.value
}
</script>

<template>
  <button class="fav" :class="{ on: favorited }" @click="toggle">
    {{ favorited ? '★ 已收藏' : '☆ 收藏' }}
  </button>
</template>

<style scoped>
.fav { border: 1px solid #e7ddca; background: #fff; border-radius: 8px; padding: 6px 14px; cursor: pointer; }
.fav.on { border-color: #b06a24; color: #c0491c; background: #f8ecda; }
</style>

<script setup>
import { ref } from 'vue'
import FavoriteSwitch from '@/components/FavoriteSwitch.vue'

const isFav = ref(false)
</script>

<template>
  <!-- 默认 v-model：绑定的是子组件的 modelValue -->
  <FavoriteSwitch v-model="isFav" />
  <p>当前状态：{{ isFav ? '已收藏' : '未收藏' }}</p>
</template>

<!-- 子组件里改成具名 model：
     const checked = defineModel('checked', { type: Boolean, default: false })
     父组件则写：  <FavoriteSwitch v-model:checked="isFav" /> -->