npm package: @hbixinlian/as-editor-components
Description: AS-Editor 可视化拖拽编辑器组件库 - 基于Vue3的可复用UI组件集合
Author: xizhu
Latest version: 1.0.2

# @hbixinlian/as-editor-components

AS-Editor 可视化拖拽编辑器组件库 - 基于Vue3的可复用UI组件集合

## 📦 安装

```bash
npm install @hbixinlian/as-editor-components
# 或
pnpm install @hbixinlian/as-editor-components
# 或
yarn add @hbixinlian/as-editor-components
```

## 🚀 快速开始

### 完整引入

```javascript
import { createApp } from "vue";
import App from "./App.vue";
// 必要
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
// 必要
import vant from "vant";
import "vant/lib/index.css";
// 必要
import AsEditorComponents from "@hbixinlian/as-editor-components";
import "@hbixinlian/as-editor-components/dist/as-editor-components.css";

const app = createApp(App);
app.use(ElementPlus);
app.use(vant);
app.use(AsEditorComponents);

app.mount("#app");

```

### 按需引入

```javascript
import { ComponentRenderer, CaptionText, PictureAds } from '@hbixinlian/as-editor-components'

// 在组件中使用
export default {
  components: {
    ComponentRenderer,
    CaptionText,
    PictureAds
  }
}
```

### 分类引入

```javascript
import { 
  BasicComponents,      // 基础组件
  BusinessComponents,   // 业务组件
  LayoutComponents,     // 布局组件
  MediaComponents       // 媒体组件
} from '@hbixinlian/as-editor-components'
```

## 📋 组件列表

### 核心组件

#### JSON格式渲染器使用方法
```vue
<template>
  <div class="app">
    <!-- 渲染器组件 -->
    <ComponentRenderer
      :pageConfig="pageConfig"
      :components="components"
      :minHeight="800"
      :showEditControls="false"
      :enableInteraction="true"
      @renderer-ready="onRendererReady"
      @component-click="onComponentClick"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const pageData = {
  id: null,
  name: "页面标题",
  templateJson:
    '{}',
  component:
    '[{}]',
};

// 解析 JSON 字符串
const pageConfig = ref(JSON.parse(pageData.templateJson));
const components = ref(JSON.parse(pageData.component));

// 回调
const onRendererReady = () => {
  console.log("Renderer ready!");
};

const onComponentClick = (data: any) => {
  console.log("Clicked component:", data);
};
</script>

<style>
.app {
  padding: 20px;
}
</style>

```

#### ComponentRenderer - 组件渲染器
核心渲染组件，用于渲染页面配置和组件列表。

```vue
<template>
  <ComponentRenderer
    :pageConfig="pageConfig"
    :components="components"
    :minHeight="600"
    :showEditControls="false"
    :enableInteraction="true"
    @component-click="handleComponentClick"
    @component-delete="handleComponentDelete"
    @renderer-ready="handleRendererReady"
  />
</template>

<script setup>
import { ComponentRenderer } from '@hbixinlian/as-editor-components'

const pageConfig = {
  name: '页面标题',
  isPerson: false,
  isBack: true,
  titleHeight: 35,
  bgColor: '#f9f9f9',
  bgImg: ''
}

const components = [
  {
    component: 'CaptionText',
    setStyle: {
      name: '标题文本',
      wordSize: 16,
      wordColor: '#333'
    }
  }
]

const handleComponentClick = ({ component, index }) => {
  console.log('组件点击:', component, index)
}

const handleComponentDelete = ({ index }) => {
  console.log('删除组件:', index)
}

const handleRendererReady = () => {
  console.log('渲染器准备完成')
}
</script>
```

### 基础组件

#### CaptionText - 标题文本组件
用于显示标题和描述文本。

```vue
<CaptionText :datas="{
  name: '标题文本',
  description: '描述文本',
  wordSize: 16,
  wordColor: '#333',
  positions: 'left',
  backColor: '#fff'
}" />
```

#### PictureAds - 图片广告组件
支持单图、轮播等多种展示模式。

```vue
<PictureAds :datas="{
  imageList: [
    { src: 'image1.jpg', text: '图片1' },
    { src: 'image2.jpg', text: '图片2' }
  ],
  swiperType: 1,
  borderRadius: 8
}" />
```

#### RichText - 富文本组件
支持富文本内容展示。

```vue
<RichText :datas="{
  content: '<p>富文本内容</p>',
  padding: 16
}" />
```

#### Notice - 通知栏组件
用于展示通知消息。

```vue
<Notice :datas="{
  text: '通知内容',
  speed: 50,
  color: '#333',
  backgroundColor: '#fff'
}" />
```

#### TabBar - 标签栏组件
用于标签页切换。

```vue
<TabBar :datas="{
  tabs: [
    { name: '标签1', active: true },
    { name: '标签2', active: false }
  ]
}" />
```

#### Videos - 视频组件
用于视频播放展示。

```vue
<Videos :datas="{
  src: 'video.mp4',
  poster: 'poster.jpg',
  autoplay: false
}" />
```

### 业务组件

#### CommoditySearch - 商品搜索组件
```vue
<CommoditySearch :datas="{ placeholder: '请输入搜索关键词' }" />
```

#### CommunityPowder - 社群运营组件
```vue
<CommunityPowder :datas="{ title: '社群标题', memberCount: 1000 }" />
```

#### PersonalizedRecommendation - 个性化推荐组件
```vue
<PersonalizedRecommendation :datas="{ 
  title: '为您推荐',
  products: []
}" />
```

### 布局组件

#### AuxiliarySegmentation - 辅助分割线组件
```vue
<AuxiliarySegmentation :datas="{ 
  height: 10,
  backgroundColor: '#f5f5f5'
}" />
```

#### MagicCube - 魔方组件
```vue
<MagicCube :datas="{ 
  items: [
    { icon: 'icon1', text: '选项1' },
    { icon: 'icon2', text: '选项2' }
  ]
}" />
```

### 媒体组件

#### CourseModule - 课程模块组件
```vue
<CourseModule :datas="{ 
  courseList: [],
  title: '推荐课程'
}" />
```

#### LiveModule - 直播模块组件
```vue
<LiveModule :datas="{ 
  liveList: [],
  title: '直播间'
}" />
```

## 🛠 工具和配置

### ComponentProperties
组件属性配置数据，包含所有组件的默认配置和属性定义。

```javascript
import { Utils } from '@hbixinlian/as-editor-components'
const { ComponentProperties } = Utils

// 获取组件配置
const captionTextConfig = ComponentProperties.find(item => item.name === 'captiontext')
```

### ComponentFactory
组件工厂，用于动态创建和管理组件。

```javascript
import { Utils } from '@hbixinlian/as-editor-components'
const { ComponentFactory } = Utils

// 使用组件工厂
const componentInstance = ComponentFactory.createComponent('captiontext', config)
```

## 📝 TypeScript 支持

本组件库提供完整的TypeScript类型定义：

```typescript
import { ComponentRendererProps, ComponentItem, PageConfig } from '@hbixinlian/as-editor-components'

const pageConfig: PageConfig = {
  name: '页面标题',
  bgColor: '#f9f9f9'
}

const components: ComponentItem[] = [
  {
    component: 'CaptionText',
    setStyle: {
      name: '标题'
    }
  }
]
```

## 🎯 依赖要求

### Peer Dependencies
- Vue 3.x
- Vant 3.x (UI组件库)
- Element Plus 1.x (部分组件使用)

请确保在项目中安装这些依赖：

```bash
npm install vue@^3.0.0 vant@^3.0.0 element-plus@^1.0.0
```

## 📖 完整示例

```vue
<template>
  <div class="app">
    <ComponentRenderer
      :pageConfig="pageConfig"
      :components="components"
      :minHeight="600"
      @component-click="handleClick"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ComponentRenderer } from '@hbixinlian/as-editor-components'
import '@hbixinlian/as-editor-components/dist/as-editor-components.css'

const pageConfig = ref({
  name: '商城首页',
  bgColor: '#f9f9f9'
})

const components = ref([
  {
    component: 'CaptionText',
    setStyle: {
      name: '热门推荐',
      wordSize: 18,
      wordColor: '#333',
      positions: 'center'
    }
  },
  {
    component: 'PictureAds',
    setStyle: {
      imageList: [
        { src: 'banner1.jpg', text: '广告1' },
        { src: 'banner2.jpg', text: '广告2' }
      ],
      swiperType: 1,
      borderRadius: 8
    }
  }
])

const handleClick = ({ component, index }) => {
  console.log('点击了组件:', component.component, '索引:', index)
}
</script>
```

## 🔧 开发与构建

```bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 构建库
npm run build:lib

# 代码检查
npm run lint
```

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issues 和 Pull Requests！

## 📞 联系

- 作者: 孤傲 <9068149@qq.com>
- GitHub: https://github.com/hbixinlian/as-editor

---

更多详细使用说明请参考各组件的具体文档。