@continew/landing-page-components

一个可重用的落地页组件库，专为移动端编辑器和运行时环境设计。

特性

• 🎨 丰富的组件类型 - 支持文本、图片、表单、QA、横幅、悬浮组件等
• 🔧 灵活的配置系统 - 每个组件都有详细的属性配置和默认值
• 🚀 高性能 - 支持 Tree-shaking、懒加载和代码分割
• 📱 移动优先 - 专为移动端设计，响应式布局
• 🎯 TypeScript 支持 - 完整的类型定义和智能提示
• 🌐 SSR 兼容 - 支持服务端渲染和客户端水合
• 🔌 可扩展 - 支持自定义组件注册和配置
• 🛡️ 错误边界 - 内置错误处理和恢复机制

安装

# 使用 pnpm
pnpm add @continew/landing-page-components

# 使用 npm
npm install @continew/landing-page-components

# 使用 yarn
yarn add @continew/landing-page-components

快速开始

基础用法

<template>
  <div>
    <!-- 使用组件映射表动态渲染 -->
    <component
      :is="componentMap[component.type]"
      v-bind="component.props"
    />
    
    <!-- 或者直接使用具体组件 -->
    <TextComponent content="Hello World" />
    <ImageComponent url="https://example.com/image.jpg" />
  </div>
</template>

<script setup>
import { componentMap, TextComponent, ImageComponent } from '@continew/landing-page-components'

const component = {
  type: 'text',
  props: {
    content: 'Hello from dynamic component!'
  }
}
</script>

导入样式

// 导入所有样式
import '@continew/landing-page-components/styles'

// 或者在 CSS 中导入
@import '@continew/landing-page-components/styles';

组件类型

TextComponent (文本组件)

显示可配置的文本内容。

<TextComponent
  content="这是一段文本"
  :fontSize="16"
  color="#333333"
  align="center"
  :bold="true"
/>

属性：

• content (string) - 文本内容
• fontSize (number) - 字体大小，默认 14
• color (string) - 文字颜色，默认 '#333333'
• align ('left' | 'center' | 'right') - 对齐方式，默认 'left'
• bold (boolean) - 是否加粗，默认 false

ImageComponent (图片组件)

显示图片，支持加载状态和错误处理。

<ImageComponent
  url="https://example.com/image.jpg"
  :height="200"
  link="https://example.com"
/>

属性：

• url (string, 必需) - 图片地址
• height (number) - 图片高度
• link (string) - 点击跳转链接

FormComponent (表单组件)

简单的表单组件，包含姓名和联系方式字段。

<FormComponent
  name="联系表单"
  nameLabel="姓名"
  contactLabel="手机号"
  buttonText="提交"
  buttonColor="#007bff"
/>

属性：

• name (string) - 表单名称，默认 '表单'
• nameLabel (string) - 姓名字段标签，默认 '姓名'
• namePlaceholder (string) - 姓名字段占位符
• contactLabel (string) - 联系方式标签，默认 '手机'
• contactPlaceholder (string) - 联系方式占位符
• buttonText (string) - 提交按钮文本，默认 '立即提交'
• buttonColor (string) - 按钮颜色，默认 '#E74C3C'

QAComponent (问答组件)

可展开的问答组件。

<QAComponent
  question="这是一个问题？"
  answer="这是对应的答案。"
/>

属性：

• question (string, 必需) - 问题内容
• answer (string, 必需) - 答案内容

BannerComponent (横幅组件)

显示横幅广告或通知。

<BannerComponent
  content="限时优惠活动"
  :fontSize="18"
  color="#ffffff"
  backgroundColor="#ff6b6b"
  align="center"
  :animated="true"
/>

属性：

• content (string) - 横幅内容，默认 '立即加入营销训练'
• fontSize (number) - 字体大小，默认 16
• color (string) - 文字颜色，默认 '#FFFFFF'
• backgroundColor (string) - 背景颜色，默认 '#E74C3C'
• align ('left' | 'center' | 'right') - 对齐方式，默认 'center'
• padding (string) - 内边距，默认 '12px 20px'
• animated (boolean) - 是否启用动画，默认 false

WidgetComponent (悬浮组件)

悬浮在页面上的小组件。

<WidgetComponent
  image="https://example.com/widget.png"
  :animation="true"
/>

属性：

• image (string) - 组件图片
• animation (boolean) - 是否启用动画，默认 false

高级用法

组件注册系统

使用内置的组件注册系统管理组件：

import { componentRegistry, ComponentRegistry } from '@continew/landing-page-components'

// 注册新组件
componentRegistry.register(customConfig, CustomComponent)

// 批量注册
componentRegistry.registerBatch(configs, implementations)

// 懒加载注册
componentRegistry.registerLazy({
  type: 'custom',
  label: '自定义组件',
  loader: () => import('./CustomComponent.vue')
})

// 获取组件
const config = componentRegistry.getConfig('text')
const component = await componentRegistry.getImplementation('text')

运行时配置

配置组件的全局行为：

import { updateConfig, getConfig } from '@continew/landing-page-components'

// 更新配置
updateConfig({
  theme: 'dark',
  components: {
    image: {
      lazyLoad: true,
      placeholder: '加载中...'
    },
    form: {
      validateOnBlur: true
    }
  },
  errorHandling: {
    showErrorDetails: true
  }
})

// 获取配置
const config = getConfig()

SSR 支持

组件完全支持服务端渲染：

// 服务端安全的工具函数
import { 
  isBrowser, 
  isServer, 
  runInBrowser, 
  safeOpenWindow 
} from '@continew/landing-page-components'

// 检查环境
if (isBrowser) {
  // 仅在浏览器中执行
}

// 安全执行
runInBrowser(() => {
  localStorage.setItem('key', 'value')
})

错误边界

使用错误边界包装组件：

<template>
  <ErrorBoundary 
    fallback="组件加载失败"
    :showError="true"
    @error="handleError"
  >
    <YourComponent />
  </ErrorBoundary>
</template>

<script setup>
import { ErrorBoundary } from '@continew/landing-page-components'

const handleError = (error, instance, info) => {
  console.error('Component error:', error)
}
</script>

按需导入

支持按需导入以减少包大小：

// 导入特定组件
import { TextComponent } from '@continew/landing-page-components/components/TextComponent'

// 导入特定配置
import { textComponentConfig } from '@continew/landing-page-components/configs/text'

// 导入工具函数
import { ComponentRegistry } from '@continew/landing-page-components/utils'

TypeScript 支持

完整的 TypeScript 类型定义：

import type { 
  ComponentDefinition, 
  ComponentDSL, 
  RuntimeConfig 
} from '@continew/landing-page-components'

// 组件配置类型
const config: ComponentDefinition = {
  type: 'text',
  label: '文本',
  // ...
}

// 组件数据类型
const component: ComponentDSL = {
  id: 'text-1',
  type: 'text',
  props: {
    content: 'Hello'
  }
}

开发和构建

# 安装依赖
pnpm install

# 开发模式（监听文件变化）
pnpm dev

# 构建
pnpm build

# 类型检查
pnpm typecheck

# 代码检查
pnpm lint

# 修复代码风格
pnpm lint:fix

# 分析包大小
pnpm build:analyze

浏览器支持

• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88

支持现代浏览器的 ES2020 特性。

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/amazing-feature)
3. 提交更改 (git commit -m 'Add some amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 开启 Pull Request

更新日志

1.0.0

• 🎉 初始版本发布
• ✨ 支持 6 种基础组件类型
• 🔧 完整的配置系统
• 🚀 性能优化和 Tree-shaking 支持
• 🌐 SSR 兼容性
• 🛡️ 错误边界支持
• 📚 完整的文档和类型定义