ai-web-components-test

v1.1.34

Published

4 months ago

使用Lit框架开发的AI Web Components组件库，包含聊天、图像生成、语音合成等功能组件

Downloads

0High
0Medium
0Low

web-components lit typescript vite ai chat image-generation speech-synthesis art-font-generation video-understanding ui-components frontend

AI Web Components

一个基于 Lit 框架开发的 AI 功能 Web Components 组件库，提供聊天、图像生成、语音合成等 AI 相关功能组件。

特性

🚀 基于 Web Components 标准，可在任何框架中使用
🎨 使用 Lit 框架开发，性能优异
🤖 内置多种 AI 功能组件
📱 响应式设计，支持移动端
🎯 TypeScript 支持，完整的类型定义
🎨 可自定义主题和样式

安装

npm install ai-web-components

使用方法

1. 引入组件库

// ES Module
import 'ai-web-components';

// CommonJS
require('ai-web-components');

2. 在 HTML 中使用

<!DOCTYPE html>
<html>
<head>
    <script type="module" src="node_modules/ai-web-components/dist/index.js"></script>
</head>
<body>
    <!-- AI 按钮组件 -->
    <ai-button variant="primary" size="large">
        点击我
    </ai-button>

    <!-- AI 聊天组件 -->
    <comp-ai-chat></comp-ai-chat>

    <!-- 图像生成组件 -->
    <comp-image-generation></comp-image-generation>

    <!-- 语音合成组件 -->
    <comp-speech-synthesis></comp-speech-synthesis>
</body>
</html>

3. 在 React 中使用

import React, { useEffect } from 'react';
import 'ai-web-components';

function App() {
  useEffect(() => {
    // 组件会自动注册
  }, []);

  return (
    <div>
      <ai-button variant="primary">React 中的按钮</ai-button>
      <comp-ai-chat />
    </div>
  );
}

4. 在 Vue 中使用

<template>
  <div>
    <ai-button variant="success">Vue 中的按钮</ai-button>
    <comp-image-generation />
  </div>
</template>

<script>
import 'ai-web-components';

export default {
  name: 'App'
}
</script>

可用组件

AI 按钮 (ai-button)

<ai-button 
  variant="primary" 
  size="medium" 
  :disabled="false" 
  :loading="false">
  按钮文本
</ai-button>

属性：

variant: 按钮样式变体 (primary, secondary, success, danger, warning)
size: 按钮尺寸 (small, medium, large)
disabled: 是否禁用
loading: 是否显示加载状态

AI 聊天 (comp-ai-chat)

<comp-ai-chat></comp-ai-chat>

图像生成 (comp-image-generation)

<comp-image-generation></comp-image-generation>

语音合成 (comp-speech-synthesis)

<comp-speech-synthesis></comp-speech-synthesis>

艺术字体生成 (comp-art-font-generation)

<comp-art-font-generation></comp-art-font-generation>

视频理解 (comp-video-understanding)

<comp-video-understanding></comp-video-understanding>

侧边菜单 (ai-side-menu)

<ai-side-menu></ai-side-menu>

侧边模态框 (ai-side-modal)

<ai-side-modal></ai-side-modal>

下拉菜单 (ai-dropdown)

<ai-dropdown 
  :options="dropdownOptions" 
  :selected-value="selectedValue"
  trigger="hover"
  placement="bottom">
  <div>选择选项 ▼</div>
</ai-dropdown>

属性：

options: 下拉选项数组，支持二级菜单
selected-value: 当前选中的值
placeholder: 占位符文本
size: 尺寸 (small, medium, large)
disabled: 是否禁用
clearable: 是否可清除
trigger: 触发方式 (click, hover)
- click: 点击触发，点击有子菜单的选项可展开/收起子菜单
- hover: 悬停触发，鼠标悬停自动显示子菜单
placement: 弹出位置 (bottom, top, left, right)

二级菜单配置：

interface DropdownOption {
  label: string;
  value: string | number;
  disabled?: boolean;
  icon?: string;
  children?: DropdownOption[]; // 支持子菜单
}

const options = [
  {
    label: "选项 1",
    value: "option1",
    children: [
      { label: "子选项 1-1", value: "sub1-1" },
      { label: "子选项 1-2", value: "sub1-2" }
    ]
  }
];

菜单弹出方向：

placement="bottom" (默认): 子菜单在父菜单下方显示
placement="top": 子菜单在父菜单上方显示
placement="left": 子菜单在父菜单左侧显示
placement="right": 子菜单在父菜单右侧显示

右侧二级菜单示例：

<ai-dropdown 
  :options="options" 
  trigger="click" 
  placement="right">
  <div>选择选项 ▼</div>
</ai-dropdown>

事件：

option-selected: 选项被选中时触发

输入框 (ai-input)

<ai-input placeholder="请输入内容"></ai-input>

输入按钮 (ai-input-button)

<ai-input-button></ai-input-button>

聊天列表 (ai-chat-list)

<ai-chat-list></ai-chat-list>

包装器 (ai-wrapper)

<ai-wrapper>
  <div>内容</div>
</ai-wrapper>

依赖要求

Lit: ^3.0.0 (peer dependency)
Node.js: >= 16.0.0

浏览器支持

Chrome >= 67
Firefox >= 63
Safari >= 10.1
Edge >= 79

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 类型检查
npm run build:types

# 代码检查
npm run lint

构建输出

构建后的文件位于 dist/ 目录：

index.js - ES Module 格式
index.umd.js - UMD 格式
index.d.ts - TypeScript 类型定义
index.css - 样式文件（如果有）

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

1.0.0

初始版本发布
包含 12 个 AI 功能组件
支持 TypeScript
完整的文档和示例

🚀 发布状态

✅ 已完成配置

[x] 项目构建配置 (Vite + TypeScript)
[x] 组件导出和自动注册
[x] NPM 发布配置
[x] 类型定义生成
[x] 文档和指南
[x] 发布脚本和检查清单

📦 准备发布到 NPM

项目已配置完成，可以发布到 NPM。发布前请：

更新个人信息：编辑 package.json 中的作者和仓库信息
测试构建：运行 npm run build 确保构建成功
本地测试：打开 test-build.html 验证组件
登录 NPM：运行 npm login
发布包：运行 ./scripts/publish.sh 或手动发布

📚 相关文档

NPM 发布指南 - 详细的发布步骤
发布检查清单 - 发布前检查项目
React 集成指南 - React 项目使用指南

🔧 快速发布

# 1. 更新个人信息后
npm run build

# 2. 测试组件
open test-build.html

# 3. 发布到 NPM
./scripts/publish.sh

发布成功后，其他开发者就可以通过 npm install ai-web-components 使用您的组件库了！