message-templates-vue

一个灵活的 Vue 3 组件库，用于渲染各种平台的消息模板（微信、小红书、抖音等）。

✨ 特性

• 🚀 基于 Vue 3 + TypeScript 构建
• 🎨 支持多种主题和尺寸
• 📱 响应式设计，支持移动端
• 🔌 可扩展的平台支持
• 🎯 类型安全
• 🌈 可自定义样式和交互

📦 安装

npm install message-templates-vue
# 或
yarn add message-templates-vue
# 或
pnpm add message-templates-vue

🚀 快速开始

全局注册

import { createApp } from 'vue'
import MessageTemplates from 'message-templates-vue'
import 'message-templates-vue/style'

const app = createApp(App)
app.use(MessageTemplates)
app.mount('#app')

按需引入

import { MessageTemplate } from 'message-templates-vue'
import 'message-templates-vue/style'

export default {
  components: {
    MessageTemplate,
  },
}

📖 使用方法

简化用法（推荐）

只需要传入平台类型和原始数据，组件内部自动处理数据转换：

<template>
  <!-- 微信消息 -->
  <MessageTemplate :message="{ platform: 'wechat', data: wechatData }" :options="options" />

  <!-- 小红书消息 -->
  <MessageTemplate :message="{ platform: 'xiaohongshu', data: xiaohongshuData }" :options="options" />

  <!-- 抖音消息 -->
  <MessageTemplate :message="{ platform: 'douyin', data: douyinData }" :options="options" />
</template>

<script setup>
import { ref } from 'vue'
import { MessageTemplate } from 'message-templates-vue'

// 微信原始数据 - 保持你现有的数据结构
const wechatData = ref({
  wechat_type: 1,
  wechat_data: JSON.stringify({
    content: {
      title: '这是一个微信链接',
      desc: '链接描述信息',
      url: 'https://example.com',
      image_url: 'https://example.com/image.jpg',
    },
  }),
})

// 小红书原始数据
const xiaohongshuData = ref({
  post_type: 'post',
  title: '小红书帖子标题',
  summary: '帖子摘要信息',
  cover_url: 'https://example.com/cover.jpg',
  author: {
    nickname: '小红书用户',
    avatar: 'https://example.com/avatar.jpg',
  },
})

// 抖音原始数据
const douyinData = ref({
  video_type: 'video',
  title: '抖音视频标题',
  cover_url: 'https://example.com/video-cover.jpg',
  author: {
    nickname: '抖音用户',
    avatar: 'https://example.com/avatar.jpg',
  },
})

const options = ref({
  theme: 'light',
  size: 'medium',
})
</script>

### 微信消息示例

```vue
<template>
  <MessageTemplate :message="wechatMessage" :options="options" />
</template>

<script setup>
import { ref } from 'vue'
import { MessageTemplate } from 'message-templates-vue'

const wechatMessage = ref({
  id: '1',
  platform: 'wechat',
  wechatType: 1,
  wechatData: JSON.stringify({
    content: {
      title: '这是一个链接',
      desc: '链接描述信息',
      url: 'https://example.com',
      image_url: 'https://example.com/image.jpg',
    },
  }),
})

const options = ref({
  theme: 'light',
  size: 'medium',
})
</script>
```

### 小红书消息示例

```vue
<template>
  <MessageTemplate :message="xiaohongshuMessage" :options="options" />
</template>

<script setup>
import { ref } from 'vue'
import { MessageTemplate } from 'message-templates-vue'

const xiaohongshuMessage = ref({
  id: '2',
  platform: 'xiaohongshu',
  postType: 'post',
  postData: {
    title: '小红书帖子标题',
    summary: '帖子摘要信息',
    cover_url: 'https://example.com/cover.jpg',
    author: {
      nickname: '小红书用户',
      avatar: 'https://example.com/avatar.jpg',
    },
  },
})

const options = ref({
  theme: 'light',
  size: 'large',
})
</script>
```

### 抖音消息示例

```vue
<template>
  <MessageTemplate :message="douyinMessage" :options="options" />
</template>

<script setup>
import { ref } from 'vue'
import { MessageTemplate } from 'message-templates-vue'

const douyinMessage = ref({
  id: '3',
  platform: 'douyin',
  videoType: 'video',
  videoData: {
    title: '抖音视频标题',
    cover_url: 'https://example.com/video-cover.jpg',
    author: {
      nickname: '抖音用户',
      avatar: 'https://example.com/avatar.jpg',
    },
  },
})

const options = ref({
  theme: 'dark',
  size: 'medium',
})
</script>
```

## ⚙️ 配置选项

### MessageTemplateOptions

| 属性            | 类型                             | 默认值     | 描述             |
| --------------- | -------------------------------- | ---------- | ---------------- |
| `theme`         | `'light' \| 'dark'`              | `'light'`  | 主题样式         |
| `size`          | `'small' \| 'medium' \| 'large'` | `'medium'` | 组件尺寸         |
| `showAvatar`    | `boolean`                        | `true`     | 是否显示平台标识 |
| `showTimestamp` | `boolean`                        | `false`    | 是否显示时间戳   |
| `showSender`    | `boolean`                        | `false`    | 是否显示发送者   |
| `customStyles`  | `Record<string, any>`            | `{}`       | 自定义样式       |
| `onLinkClick`   | `(url: string) => void`          | -          | 链接点击回调     |
| `onImageClick`  | `(url: string) => void`          | -          | 图片点击回调     |
| `onCardClick`   | `(data: any) => void`            | -          | 卡片点击回调     |

## 🎨 主题和尺寸

### 主题

- **light**: 浅色主题，适合浅色背景
- **dark**: 深色主题，适合深色背景

### 尺寸

- **small**: 小尺寸，适合紧凑布局
- **medium**: 中等尺寸，默认大小
- **large**: 大尺寸，适合突出显示

## 🔌 支持的消息类型

### 微信

- 文本消息
- 图片消息
- 链接消息
- 位置消息
- 个人名片
- 小程序
- 视频号
- 表情

### 小红书

- 帖子
- 故事
- 直播
- 图片
- 视频
- 文本

### 抖音

- 视频
- 直播
- 故事
- 图片
- 文本

## 🛠️ 开发

### 安装依赖

```bash
pnpm install
```

### 开发模式

```bash
pnpm dev
```

### 构建

```bash
pnpm build
```

### 类型检查

```bash
pnpm type-check
```

## 📝 类型定义

```typescript
import type { BaseMessage, Platform, MessageType, MessageTemplateOptions } from 'message-templates-vue'

// 基础消息接口
interface BaseMessage {
  id: string
  platform: Platform
  type: MessageType
  content: any
  timestamp?: number
  sender?: string
}

// 支持的平台
type Platform = 'wechat' | 'xiaohongshu' | 'douyin' | 'weibo' | 'qq'

// 消息类型
type MessageType =
  | 'text'
  | 'image'
  | 'video'
  | 'link'
  | 'location'
  | 'card'
  | 'miniprogram'
  | 'videonum'
  | 'emoji'
  | 'post'
  | 'story'
  | 'live'
```