laobinghu
ce208df092
核心功能: - 项目初始化 (Nuxt 4 + Nuxt UI + Pinia + ofetch) - TypeScript 类型定义 (User, Article, Comment, API 响应) - 认证系统 (登录/登出、Cookie 支持、权限中间件) - 文章列表页 (筛选、分页、响应式布局) - 文章详情页 (Markdown 渲染、评论系统) - 文章编辑器 (左右分栏、实时预览、Markdown 工具栏) 管理后台: - 侧边栏布局、权限检查 - 数据分析 (数据统计卡片、热门文章、评论审核统计) - 文章管理 (表格、筛选、删除) - 评论管理 (审核通过/拒绝、删除) - 用户管理 (角色管理、删除) 全局组件: - 导航栏 (暗色模式切换、移动端菜单) - 页脚 - 403/404 错误页 配置文件: - .env.example 环境变量模板 - nuxt.config.ts 完整配置 - 自定义 CSS 样式
72 lines
1.5 KiB
Vue
72 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="loading" class="space-y-4">
|
|
<USkeleton v-for="i in 3" :key="i" class="h-24" />
|
|
</div>
|
|
|
|
<div v-else-if="comments.length === 0" class="text-center py-8">
|
|
<p class="text-gray-600 dark:text-gray-400">暂无评论</p>
|
|
</div>
|
|
|
|
<div v-else class="space-y-6">
|
|
<CommentItem
|
|
v-for="comment in comments"
|
|
:key="comment.id"
|
|
:comment="comment"
|
|
:depth="0"
|
|
@reply="handleReply"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mt-8">
|
|
<CommentForm
|
|
:article-id="articleId"
|
|
@submitted="onCommentSubmitted"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Comment } from '~/types/models'
|
|
|
|
const props = defineProps<{
|
|
articleId: number
|
|
}>()
|
|
|
|
const { fetchComments, createComment } = useComments()
|
|
const { isAuthenticated } = useAuth()
|
|
|
|
const comments = ref<Comment[]>([])
|
|
const loading = ref(true)
|
|
const replyTo = ref<Comment | null>(null)
|
|
|
|
const loadComments = async () => {
|
|
loading.value = true
|
|
try {
|
|
comments.value = await fetchComments(props.articleId)
|
|
} catch (error) {
|
|
console.error('Failed to load comments:', error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const handleReply = (comment: Comment) => {
|
|
if (!isAuthenticated.value) {
|
|
// TODO: 跳转到登录页
|
|
return
|
|
}
|
|
replyTo.value = comment
|
|
}
|
|
|
|
const onCommentSubmitted = async () => {
|
|
replyTo.value = null
|
|
await loadComments()
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadComments()
|
|
})
|
|
</script>
|