@composy/comment-vue

@composy/comment-vue

@composy/comment-core 的 Vue 适配层，提供 CommentPanel 组件、useComment() 组合式函数和插件安装能力。

使用

<script setup lang="ts">
import type { CommentData } from '@composy/comment-vue'
import { CommentPanel } from '@composy/comment-vue'
import { ref } from 'vue'

const user = { id: 'u1', name: 'Alice' }
const comments = ref<CommentData[]>([])

function onArchive(id: string) {
  console.info('archived', id)
}

function onChange(next: CommentData[]) {
  comments.value = next
}
</script>

<template>
  <CommentPanel
    v-model="comments"
    :current-user="user"
    status-filter="all"
    @archive="onArchive"
    @change="onChange"
  />
</template>

Props

• modelValue?: CommentData[]
• currentUser?: CommentAuthor | null
• readonly?: boolean
• sortMode?: 'newest' | 'oldest'
• statusFilter?: 'all' | 'active' | 'resolved' | 'archived'
• theme?: 'light' | 'dark' | 'auto'
• maxReplyDepth?: number
• maxContentLength?: number
• placeholder?: string
• allowReply?: boolean
• allowResolve?: boolean
• allowArchive?: boolean
• allowEdit?: boolean
• allowDelete?: boolean
• confirmDelete?: boolean
• deleteConfirmMessage?: string
• showStatusFilter?: boolean
• classPrefix?: string

Events

• update:modelValue
• add
• edit
• delete
• reply
• resolve
• archive
• reopen
• sort
• filter
• status-change
• change

Composable

import { useComment } from '@composy/comment-vue'

const { comments, addComment } = useComment()
addComment('可以继续跟进的反馈')
console.info(comments.value)

useComment() 暴露 core 实例的主要能力，并同步 comments、commentCount、stats 和 error。 updateOptions() 接受部分运行时选项；create() 重建失败时会清空已销毁的旧实例，避免 Vue 状态继续指向不可用对象。CommentPanel 的 v-model 既支持 Core 操作后的快照回写，也支持父组件主动替换 modelValue。

插件

import { CommentPlugin } from '@composy/comment-vue'
import { createApp } from 'vue'

createApp(App).use(CommentPlugin)

也可以使用 createCommentPlugin({ name: 'LCommentPanel' }) 自定义全局组件名。

样式和产物

Vue 组件复用 core 的 ldesign-comment class 和 --ldesign-comment-* CSS var。颜色与尺寸引用 packages/color、packages/size 生成的 --ld-* 变量。

构建产物包含：

• dist/index.js
• dist/index.min.js
• es/index.js
• esm/index.js
• lib/index.cjs

验证

pnpm --dir libraries/comment/packages/vue run type-check
pnpm --dir libraries/comment/packages/vue run type-check:cjs
pnpm --dir libraries/comment/packages/vue run build

Builder 与 ESM/CJS TypeScript 配置位于 packages/vue/.ldesign/；类型检查配置将 @composy/comment-core 映射到 Core 源码，避免依赖旧构建声明。包根保留旧配置路径作为兼容入口。

License

MIT