@hbixinlian/as-editor-components 1.0.0 → 1.0.2

package/README.md

@@ -1,388 +1,452 @@
-# @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 AsEditorComponents from '@hbixinlian/as-editor-components'
-import '@hbixinlian/as-editor-components/dist/as-editor-components.css'
-
-const app = createApp(App)
-app.use(AsEditorComponents)
-```
-
-### 按需引入
-
-```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'
-```
-
-## 📋 组件列表
-
-### 核心组件
-
-#### 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
-
----
-
+# @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
+
+---
+
 更多详细使用说明请参考各组件的具体文档。