|
|
|
|
@ -1,20 +1,31 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!-- 评论区域容器,设置背景、内边距、外边距、圆角和阴影样式 -->
|
|
|
|
|
<div class="bg-ob-deep-800 p-4 mt-8 lg:px-14 lg:py-10 rounded-2xl shadow-xl mb-8 lg:mb-0" id="comments">
|
|
|
|
|
<!-- 评论标题组件,使用国际化文本作为标题 -->
|
|
|
|
|
<SubTitle :title="'titles.comment'" />
|
|
|
|
|
<!-- 评论表单组件,用于输入新评论 -->
|
|
|
|
|
<CommentForm />
|
|
|
|
|
<!-- 评论列表组件,展示所有评论及回复 -->
|
|
|
|
|
<CommentList />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
// 导入Vue的defineComponent用于定义组件
|
|
|
|
|
import { defineComponent } from 'vue'
|
|
|
|
|
// 导入标题组件
|
|
|
|
|
import { SubTitle } from '@/components/Title'
|
|
|
|
|
// 导入评论表单组件
|
|
|
|
|
import CommentForm from './CommentForm.vue'
|
|
|
|
|
// 导入评论列表组件
|
|
|
|
|
import CommentList from './CommentList.vue'
|
|
|
|
|
|
|
|
|
|
// 定义评论组件
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
name: 'Comment',
|
|
|
|
|
components: { SubTitle, CommentForm, CommentList },
|
|
|
|
|
name: 'Comment', // 组件名称
|
|
|
|
|
components: { SubTitle, CommentForm, CommentList }, // 注册子组件
|
|
|
|
|
setup() {
|
|
|
|
|
// 组件逻辑设置,此处无额外逻辑
|
|
|
|
|
return {}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
</script>
|