@zemu/digital-human

数字人组件库 - 统一包，包含所有功能

✨ 特性

• 🎯 Types - TypeScript 类型定义
• 🛠️ Utils - 工具函数库
• 🪝 Hooks - Vue 组合式函数
• 📦 uni-app Components - uni-app 组件

安装

# pnpm
pnpm add @zemu/digital-human

# npm
npm install @zemu/digital-human

# yarn
yarn add @zemu/digital-human

使用

1. 使用工具函数

import { formatPhone, formatAmount, isEmail, debounce } from '@zemu/digital-human'

const phone = formatPhone('13800138000') // 138****8000
const amount = formatAmount(1234567.89) // ¥1,234,567.89
const valid = isEmail('[email protected]') // true

const search = debounce((keyword: string) => {
  console.log('搜索:', keyword)
}, 300)

2. 使用 Hooks

<script setup lang="ts">
import { useRequest, useStorage, useModal } from '@zemu/digital-human'

// 请求管理
const { data, loading, error, execute } = useRequest(async () => {
  return await fetch('/api/data').then(res => res.json())
})

// 本地存储
const { value: token, setValue: setToken } = useStorage('user-token', '')

// 弹窗管理
const { visible, open, close } = useModal()
</script>

3. 使用 uni-app 组件

<template>
  <view>
    <!-- 协议弹窗 -->
    <AgreementPopup
      v-model:visible="showAgreement"
      :agreements="agreements"
      @accept="handleAccept"
      @reject="handleReject"
    />
    
    <!-- 客服弹窗 -->
    <CustomerServicePopup
      v-model:visible="showService"
      phone="400-123-4567"
      wechat="customer_service"
      email="[email protected]"
    />
    
    <!-- 兑换码弹窗 -->
    <RedeemPopup
      v-model:visible="showRedeem"
      @submit="handleRedeem"
    />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { 
  AgreementPopup, 
  CustomerServicePopup, 
  RedeemPopup 
} from '@zemu/digital-human/uni-app'
import type { Agreement } from '@zemu/digital-human'

const showAgreement = ref(false)
const showService = ref(false)
const showRedeem = ref(false)

const agreements: Agreement[] = [
  { title: '用户协议', url: 'https://example.com/terms' },
  { title: '隐私政策', url: 'https://example.com/privacy' }
]

const handleAccept = () => {
  console.log('用户接受了协议')
}

const handleReject = () => {
  console.log('用户拒绝了协议')
}

const handleRedeem = (code: string) => {
  console.log('兑换码:', code)
}
</script>

4. 使用类型定义

import type { 
  Size, 
  Status, 
  Theme,
  ButtonProps,
  ModalProps,
  Agreement,
  UserInfo 
} from '@zemu/digital-human'

const user: UserInfo = {
  id: '1',
  name: 'John',
  avatar: 'https://example.com/avatar.jpg'
}

API 文档

Utils

• format: formatPhone, formatAmount, formatDate, formatFileSize, formatRelativeTime
• validate: isPhone, isEmail, isIdCard, isUrl, getPasswordStrength, isEmpty
• storage: getStorage, setStorage, removeStorage, clearStorage
• url: parseQuery, stringifyQuery, joinUrl
• common: debounce, throttle, deepClone, generateId, sleep

Hooks

• useAgreement - 协议管理
• useModal - 弹窗管理
• useForm - 表单管理
• useRequest - 请求管理
• useStorage - 本地存储
• useClipboard - 剪贴板操作

uni-app Components

• AgreementPopup - 协议弹窗
• CustomerServicePopup - 客服弹窗
• RedeemPopup - 兑换码弹窗

📚 完整文档

访问我们的文档站点获取更多信息：https://your-docs-site.com

🤝 贡献

欢迎贡献代码！请查看 贡献指南

📄 License

MIT © Digital Human Team