@hbixinlian/as-editor-components

@hbixinlian/as-editor-components

AS-Editor 可视化拖拽编辑器组件库 - 基于Vue3的可复用UI组件集合

📦 安装

npm install @hbixinlian/as-editor-components
# 或
pnpm install @hbixinlian/as-editor-components
# 或
yarn add @hbixinlian/as-editor-components

🚀 快速开始

完整引入

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");

按需引入

import { ComponentRenderer, CaptionText, PictureAds } from '@hbixinlian/as-editor-components'

// 在组件中使用
export default {
  components: {
    ComponentRenderer,
    CaptionText,
    PictureAds
  }
}

分类引入

import { 
  BasicComponents,      // 基础组件
  BusinessComponents,   // 业务组件
  LayoutComponents,     // 布局组件
  MediaComponents       // 媒体组件
} from '@hbixinlian/as-editor-components'

📋 组件列表

核心组件

JSON格式渲染器使用方法

<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 - 组件渲染器

核心渲染组件，用于渲染页面配置和组件列表。

<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 - 标题文本组件

用于显示标题和描述文本。

<CaptionText :datas="{
  name: '标题文本',
  description: '描述文本',
  wordSize: 16,
  wordColor: '#333',
  positions: 'left',
  backColor: '#fff'
}" />

PictureAds - 图片广告组件

支持单图、轮播等多种展示模式。

<PictureAds :datas="{
  imageList: [
    { src: 'image1.jpg', text: '图片1' },
    { src: 'image2.jpg', text: '图片2' }
  ],
  swiperType: 1,
  borderRadius: 8
}" />

RichText - 富文本组件

支持富文本内容展示。

<RichText :datas="{
  content: '<p>富文本内容</p>',
  padding: 16
}" />

Notice - 通知栏组件

用于展示通知消息。

<Notice :datas="{
  text: '通知内容',
  speed: 50,
  color: '#333',
  backgroundColor: '#fff'
}" />

TabBar - 标签栏组件

用于标签页切换。

<TabBar :datas="{
  tabs: [
    { name: '标签1', active: true },
    { name: '标签2', active: false }
  ]
}" />

Videos - 视频组件

用于视频播放展示。

<Videos :datas="{
  src: 'video.mp4',
  poster: 'poster.jpg',
  autoplay: false
}" />

业务组件

CommoditySearch - 商品搜索组件

<CommoditySearch :datas="{ placeholder: '请输入搜索关键词' }" />

CommunityPowder - 社群运营组件

<CommunityPowder :datas="{ title: '社群标题', memberCount: 1000 }" />

PersonalizedRecommendation - 个性化推荐组件

<PersonalizedRecommendation :datas="{ 
  title: '为您推荐',
  products: []
}" />

布局组件

AuxiliarySegmentation - 辅助分割线组件

<AuxiliarySegmentation :datas="{ 
  height: 10,
  backgroundColor: '#f5f5f5'
}" />

MagicCube - 魔方组件

<MagicCube :datas="{ 
  items: [
    { icon: 'icon1', text: '选项1' },
    { icon: 'icon2', text: '选项2' }
  ]
}" />

媒体组件

CourseModule - 课程模块组件

<CourseModule :datas="{ 
  courseList: [],
  title: '推荐课程'
}" />

LiveModule - 直播模块组件

<LiveModule :datas="{ 
  liveList: [],
  title: '直播间'
}" />

🛠 工具和配置

ComponentProperties

组件属性配置数据，包含所有组件的默认配置和属性定义。

import { Utils } from '@hbixinlian/as-editor-components'
const { ComponentProperties } = Utils

// 获取组件配置
const captionTextConfig = ComponentProperties.find(item => item.name === 'captiontext')

ComponentFactory

组件工厂，用于动态创建和管理组件。

import { Utils } from '@hbixinlian/as-editor-components'
const { ComponentFactory } = Utils

// 使用组件工厂
const componentInstance = ComponentFactory.createComponent('captiontext', config)

📝 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 (部分组件使用)

请确保在项目中安装这些依赖：

npm install vue@^3.0.0 vant@^3.0.0 element-plus@^1.0.0

📖 完整示例

<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>

🔧 开发与构建

# 安装依赖
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

更多详细使用说明请参考各组件的具体文档。