# ldesign-comment

**Repository Path**: ldesign-v1/ldesign-comment

## Basic Information

- **Project Name**: ldesign-comment
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-11
- **Last Updated**: 2026-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @ldesign/comment

评论/批注系统 - Comment and annotation system for document review and collaboration

## Features

- Framework-agnostic core with Vue 3 component wrapper
- Comment CRUD: add, edit, delete, reply
- Resolve/reopen workflow for code review
- Light/dark/auto theme support
- Nested replies with configurable depth
- Permission control (reply, edit, delete, resolve)
- Event system for all operations
- Keyboard shortcut: Ctrl+Enter to submit
- TypeScript support with full type definitions

## Installation

```bash
# Core library (vanilla JS)
pnpm add @ldesign/comment

# Vue 3 adapter (optional)
pnpm add @ldesign/comment-vue
```

## Quick Start

### Vanilla JavaScript

```typescript
import { createComment } from '@ldesign/comment';

const comment = createComment({
  container: '#my-comment',
  currentUser: { id: '1', name: 'Alice' },
  theme: 'light',
  onAdd: (data) => console.log('New comment:', data.content),
});
```

### Vue 3

```vue
<template>
  <CommentPanel
    v-model="comments"
    :current-user="user"
    @add="onAdd"
  />
</template>

<script setup>
import { ref } from 'vue';
import { CommentPanel } from '@ldesign/comment-vue';

const user = { id: '1', name: 'Alice' };
const comments = ref([]);
const onAdd = (comment) => console.log('New:', comment.content);
</script>
```

## Project Structure

```
comment/
+-- packages/
|   +-- core/          # @ldesign/comment - core library
|   |   +-- src/
|   |       +-- core/       # EventEmitter, CommentManager, CommentSystem
|   |       +-- renderer/   # DOMRenderer, StyleManager
|   |       +-- theme/      # ThemeManager, tokens
|   |       +-- types/      # TypeScript type definitions
|   +-- vue/           # @ldesign/comment-vue - Vue 3 adapter
|       +-- src/
|           +-- components/  # CommentPanel.vue
|           +-- composables/ # useComment
|           +-- plugins/     # CommentPlugin
+-- playground/        # Demo application (engine-vue3 + launcher)
```

## Development

```bash
# Install dependencies
pnpm install

# Start playground
pnpm dev

# Build libraries
pnpm build

# Build playground
pnpm build:playground
```

## API Overview

### Core Instance Methods

- `addComment(content, parentId?)` - Add comment or reply
- `editComment(id, content)` - Edit comment
- `deleteComment(id)` - Delete comment
- `resolveComment(id)` - Mark as resolved
- `reopenComment(id)` - Reopen resolved comment
- `getComments()` / `getComment(id)` / `getCommentCount()`
- `setTheme('light' | 'dark' | 'auto')`
- `setSortMode('newest' | 'oldest')`
- `setReadonly(boolean)`
- `on(event, handler)` - Listen to events
- `destroy()` - Cleanup

### Vue Component Props

- `v-model` - CommentData[]
- `current-user` - CommentAuthor
- `theme` - 'light' | 'dark' | 'auto'
- `readonly` - boolean
- `allow-reply` / `allow-edit` / `allow-delete` / `allow-resolve` - boolean

## License

MIT