f-low-code-renderer

低代码页面 PC 端渲染组件库（v2 版本）。所有组件以 V2 后缀命名，便于与后续版本共存。

安装

npm install f-low-code-renderer

使用

全量注册

import { createApp } from 'vue'
import FLowCodeRenderer from 'f-low-code-renderer'
import 'f-low-code-renderer/style.css'

const app = createApp(App)
app.use(FLowCodeRenderer)

注册后组件会以组件名注册到全局，可直接在模板中使用：

<template>
  <FBannerV2 :config="bannerConfig" />
  <FTitleV2 :config="titleConfig" />
  <FTextV2 :config="textConfig" />
  <FMediaV2 :config="mediaConfig" />
  <FTabTextMediaV2 :config="tabConfig" />
  <FCarouselTextMediaV2 :config="carouselConfig" />
  <FCaseShowV2 :config="caseConfig" />
</template>

按需导入

import { FBannerV2, FTitleV2 } from 'f-low-code-renderer'
import 'f-low-code-renderer/style.css'

<template>
  <FBannerV2 :config="bannerConfig" />
  <FTitleV2 :config="titleConfig" />
</template>

组件

v2 核心组件

| 组件 | 注册名 | 说明 | |------|--------|------| | FBannerV2 | FBannerV2 | 横幅 Banner | | FTitleV2 | FTitleV2 | 标题（模块标题 / 序号标题），支持滚动动画 | | FTextV2 | FTextV2 | 文本块，支持滚动动画 | | FMediaV2 | FMediaV2 | 媒体（图片 / 视频），支持滚动动画 | | FTabTextMediaV2 | FTabTextMediaV2 | Tab 切换图文，支持滚动动画 | | FCarouselTextMediaV2 | FCarouselTextMediaV2 | Swiper 轮播图文 | | FCaseShowV2 | FCaseShowV2 | Swiper 案例展示（支持图片/视频/对比） |

所有核心组件接收 config prop，类型为对应的 *ComponentConfig_v2 接口。

子组件

| 组件 | 说明 | |------|------| | LazyImage | IntersectionObserver 懒加载图片，加载前显示 fallback 占位 | | LazyVideo | IntersectionObserver 懒加载视频，加载前显示 fallback 占位 | | HsTab / HsTabPane | Tab 切换容器，支持 AnimatePresence 动画切换 + KeepAlive | | PreviewMedia | 媒体预览（点击放大，支持左右切换） | | ImageDiffv2 | 图片前后对比（拖拽滑块） | | DynamicTable | 动态表格（编辑/查看模式） |

类型

import type {
  // 联合类型，覆盖所有 v2 配置
  ComponentConfig,
  BannerComponentConfig_v2,
  TitleComponentConfig_v2,
  TextComponentConfig_v2,
  MediaComponentConfig_v2,
  TabTextMediaComponentConfig_v2,
  CarouselTextMediaComponentConfig_v2,
  CaseShowComponentConfig_v2,
  // 内容类型
  TabTextMediaContent,
  CarouselTextMediaContent,
  CaseShowContent,
  TableData,
  Cell,
} from 'f-low-code-renderer'

// 枚举
import {
  ComponentType,
  TextAlignType,
  TitleType,
  TabContentType,
  CaseShowType,
  ThemeType,
} from 'f-low-code-renderer'

Config 类型定义

interface BaseComponentConfig {
  nanoid: string
  type: ComponentType
  bg?: string
  paddingY?: [string, string]
}

interface BannerComponentConfig_v2 extends BaseComponentConfig {
  type: ComponentType.BANNER_V2
  title: string
  text: string
  bgImage: string
}

interface TitleComponentConfig_v2 extends BaseComponentConfig {
  type: ComponentType.TITLE_V2
  text: string
  orderNumber: number
  titleType: TitleType       // 'moduleTitle' | 'sortTitles'
  theme: ThemeType           // 'light' | 'dark'
}

interface TextComponentConfig_v2 extends BaseComponentConfig {
  type: ComponentType.TEXT_V2
  text: string
  align: TextAlignType      // 'left' | 'center' | 'right' | 'justify'
}

interface MediaComponentConfig_v2 extends BaseComponentConfig {
  type: ComponentType.MEDIA_V2
  src: string
}

interface TabTextMediaComponentConfig_v2 extends BaseComponentConfig {
  type: ComponentType.TAB_TEXT_MEDIA_V2
  contentHeight?: string
  items: TabTextMediaContent[]
}

interface CarouselTextMediaComponentConfig_v2 extends BaseComponentConfig {
  type: ComponentType.CAROUSEL_TEXT_MEDIA_V2
  contentHeight?: string
  items: CarouselTextMediaContent[]
}

interface CaseShowComponentConfig_v2 extends BaseComponentConfig {
  type: ComponentType.CASE_SHOW_V2
  contentHeight?: string
  delay?: number
  items: CaseShowContent[]
}

示例

<script setup lang="ts">
import type { BannerComponentConfig_v2 } from 'f-low-code-renderer'
import { ComponentType } from 'f-low-code-renderer'

const bannerConfig: BannerComponentConfig_v2 = {
  nanoid: 'banner-001',
  type: ComponentType.BANNER_V2,
  title: '标题',
  text: '文本1    文本2    文本3',
  bgImage: 'https://example.com/banner.jpg',
}
</script>

<template>
  <FBannerV2 :config="bannerConfig" />
</template>

样式

组件 scoped 样式随 JS 自动注入，但全局 CSS 需要手动导入：

import 'f-low-code-renderer/style.css'

全局 CSS 类名：

| 类名 | 用途 | |------|------| | .csr-v2-title-display | 展示型标题（Banner） | | .csr-v2-title-level-1 | 一级模块标题 | | .csr-v2-title-level-2 | 二级标题 | | .csr-v2-title-tab | Tab 小模块标题 | | .csr-v2-text | 正文 | | .csr-v2-tab | Tab 文字 | | .csr-v2-description | 描述文字 | | .csr-v2-btn | 按钮文字 | | .csr-v2-will-disable | 过渡禁用态 | | .csr-v2-disable | 禁用态 |

开发

# 安装依赖
npm install

# 构建
npm run build          # vite build + 类型声明
npm run dev            # 本地开发

# 发布
npm publish

构建产物在 dist/ 目录：

| 文件 | 说明 | |------|------| | f-low-code-renderer.mjs | ESM 格式 | | f-low-code-renderer.cjs | CJS 格式 | | f-low-code-renderer.css | 全局样式 | | index.d.ts | 类型声明 |

依赖

| 包 | 版本 | 类型 | 说明 | |----|------|------|------| | vue | ^3.4.0 | peer | | | motion-v | ^0.6.0 | dependency | 滚动动画，使用 { Motion } 命名导出 | | swiper | ^11.0.0 | dependency | 轮播组件 |

motion-v 使用命名导入：import { Motion } from 'motion-v'，模板中用法为 <Motion is="div">。