Skip to Content
文档SDK 使用SDK 使用

@dingdao/psuip-render SDK 使用

PSUIP 渲染 SDK 提供在各主流前端框架中直接将 PSUIP 渲染为可交互 UI 的能力。本文介绍安装方式与在 Vue、React、Svelte 以及纯 HTML 环境中的最小示例。

安装

npm i @dingdao/psuip-render
# 或者
yarn add @dingdao/psuip-render
# 或者
pnpm add @dingdao/psuip-render

快速开始

Vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { renderVueFromPSUIP } from '@dingdao/psuip-render/vue'
 
const psuip = ref(`
    # 优雅青蓝卡片系列展示
 
## 设计特点
[icon:Abstract/ad-product]优雅青蓝卡片系列采用渐变背景、[icon:Base/home]精致装饰和层次化设计，[icon:Base/aiming]提供三种专业的内容展示方式。
 
 
[event:download][下载](https://github.com/example/edit)
 
<card:headerPrecentCard>
   ## 二、市场概述
   AI-PC 概念自 2023 年由英特尔提出后，迅速引发行业关注
 
   ### 中国市场
   <percentValue color={color.success.green6}>#### 15%</percentValue>
   AI-PC 出货量
 
   ### 全球市场  
   #### 25%
   AI-PC 渗透率
 
   ### 未来预测
   #### 40%
   预计增长率
</card:headerPrecentCard>
 
<card:headerCard background={color.success.green0}>
## 三、头部品牌分析
联想、苹果和荣耀作为 AI-PC 市场的头部品牌，各自凭借独特的产品功能和市场策略在竞争中占据一席之地。以下是联想、苹果和荣耀的销售份额占比。
 
[chart:barh|AI-PC 市场份额]
| 品牌 | 市场份额 | 增长率 |
|------|----------|--------|
| 联想 | 35% | +12% |
| 苹果 | 28% | +8% |
| 荣耀 | 18% | +15% |
 
[chart:grouped_line|心流指标趋势]
| 日期 | 心流满意度FSV | 心流专注值FFV | 心流效能值FEV |
| --- | --- | --- | --- |
| 2025-03-10 | 0.0 | 0.36 | 2.55 |
| 2025-03-11 | 0.0 | 0.41 | 2.22 |
| 2025-03-12 | 0.0 | 0.36 | 2.64 |
| 2025-03-13 | 0.0 | 0.32 | 2.94 |
 
[chart:pie|笔记本市场占比]
| 类型 | 占比 |
|------|------|
| 游戏本 | 40% |
| 轻薄本 | 35% |
| 工作站 | 25% |
 
</card:headerCard>
`)
 
const renderResult = ref<{ component: any, props: any } | null>(null)
 
const handleRender = async () => {
  const result = await renderVueFromPSUIP(psuip.value, {})
  renderResult.value = result
}
 
onMounted(() => {
  handleRender()
})
</script>
 
<template>
  <component v-if="renderResult" :is="renderResult.component" v-bind="renderResult.props" />  
</template>
 
<style scoped>
</style>

React

import { useState, useEffect } from 'react'
import { renderReactFromPSUIP } from '@dingdao/psuip-render/react'
import './App.css'
 
function App() {
  const [psuip, setPsuip] = useState(`
    # 优雅青蓝卡片系列展示
 
## 设计特点
[icon:Abstract/ad-product]优雅青蓝卡片系列采用渐变背景、[icon:Base/home]精致装饰和层次化设计，[icon:Base/aiming]提供三种专业的内容展示方式。
 
 
[event:download][下载](https://github.com/example/edit)
 
<card:headerPrecentCard>
   ## 二、市场概述
   AI-PC 概念自 2023 年由英特尔提出后，迅速引发行业关注
 
   ### 中国市场
   <percentValue color={color.success.green6}>#### 15%</percentValue>
   AI-PC 出货量
 
   ### 全球市场  
   #### 25%
   AI-PC 渗透率
 
   ### 未来预测
   #### 40%
   预计增长率
</card:headerPrecentCard>
 
<card:headerCard background={color.success.green0}>
## 三、头部品牌分析
联想、苹果和荣耀作为 AI-PC 市场的头部品牌，各自凭借独特的产品功能和市场策略在竞争中占据一席之地。以下是联想、苹果和荣耀的销售份额占比。
 
[chart:barh|AI-PC 市场份额]
| 品牌 | 市场份额 | 增长率 |
|------|----------|--------|
| 联想 | 35% | +12% |
| 苹果 | 28% | +8% |
| 荣耀 | 18% | +15% |
 
[chart:grouped_line|心流指标趋势]
| 日期 | 心流满意度FSV | 心流专注值FFV | 心流效能值FEV |
| --- | --- | --- | --- |
| 2025-03-10 | 0.0 | 0.36 | 2.55 |
| 2025-03-11 | 0.0 | 0.41 | 2.22 |
| 2025-03-12 | 0.0 | 0.36 | 2.64 |
| 2025-03-13 | 0.0 | 0.32 | 2.94 |
 
[chart:pie|笔记本市场占比]
| 类型 | 占比 |
|------|------|
| 游戏本 | 40% |
| 轻薄本 | 35% |
| 工作站 | 25% |
 
</card:headerCard>
  `)
 
  const [renderResult, setRenderResult] = useState<{ component: any, props: any } | null>(null)
 
  const handleRender = async () => {
    const result = await renderReactFromPSUIP(psuip, {})
    setRenderResult(result)
  }
 
  useEffect(() => {
    handleRender()
  }, [])
 
  return (
    <>
      {renderResult && <renderResult.component {...renderResult.props} />}
    </>
  )
}
 
export default App

Svelte

<script lang="ts">
  import { onMount } from 'svelte'
  import { renderSvelteFromPSUIP } from '@dingdao/psuip-render/svelte'
  
  const psuip = `
    # 优雅青蓝卡片系列展示
  
  ## 设计特点
  [icon:Abstract/ad-product]优雅青蓝卡片系列采用渐变背景、[icon:Base/home]精致装饰和层次化设计，[icon:Base/aiming]提供三种专业的内容展示方式。
  
  
  [event:download][下载](https://github.com/example/edit)
  
  <card:headerPrecentCard>
   ## 二、市场概述
   AI-PC 概念自 2023 年由英特尔提出后，迅速引发行业关注
  
   ### 中国市场
   <percentValue color={color.success.green6}>#### 15%</percentValue>
   AI-PC 出货量
  
   ### 全球市场  
   #### 25%
   AI-PC 渗透率
  
   ### 未来预测
   #### 40%
   预计增长率
  </card:headerPrecentCard>
  
  <card:headerCard background={color.success.green0}>
  ## 三、头部品牌分析
  联想、苹果和荣耀作为 AI-PC 市场的头部品牌，各自凭借独特的产品功能和市场策略在竞争中占据一席之地。以下是联想、苹果和荣耀的销售份额占比。
  
  [chart:barh|AI-PC 市场份额]
  | 品牌 | 市场份额 | 增长率 |
  |------|----------|--------|
  | 联想 | 35% | +12% |
  | 苹果 | 28% | +8% |
  | 荣耀 | 18% | +15% |
  
  [chart:grouped_line|心流指标趋势]
  | 日期 | 心流满意度FSV | 心流专注值FFV | 心流效能值FEV |
  | --- | --- | --- | --- |
  | 2025-03-10 | 0.0 | 0.36 | 2.55 |
  | 2025-03-11 | 0.0 | 0.41 | 2.22 |
  | 2025-03-12 | 0.0 | 0.36 | 2.64 |
  | 2025-03-13 | 0.0 | 0.32 | 2.94 |
  
  [chart:pie|笔记本市场占比]
  | 类型 | 占比 |
  |------|------|
  | 游戏本 | 40% |
  | 轻薄本 | 35% |
  | 工作站 | 25% |
  
  </card:headerCard>
  `
  
  let comp: any = null
  let compProps: any = null
  
  onMount(async () => {
    const result = await renderSvelteFromPSUIP(psuip, {})
    comp = result.component
    compProps = result.props
  })
</script>
  
<main>
  {#if comp}
    <svelte:component this={comp} {...compProps} />
  {/if}
</main>
  
<style>
</style>

HTML

// Node.js (ESM) 环境下将 PSUIP 文件渲染为 HTML 并写入磁盘
import { readFile, writeFile } from 'node:fs/promises'
import { renderHTMLFromPSUIP } from '@dingdao/psuip-render/html'
 
const psuip = await readFile(new URL('./example.psuip.md', import.meta.url), 'utf-8')
 
// 可选：传入渲染选项（所有方法均支持，见下文 RenderOptions）
const { html } = await renderHTMLFromPSUIP(psuip, {
  // cardWidth: '960px',
  // cardHeight: 'auto',
  // themeColor: '#1677ff',
  // scaleValue: '1'
})
 
await writeFile(new URL('./result.html', import.meta.url), html, 'utf-8')

渲染选项（所有方法通用）

interface RenderOptions {
  cardWidth?: string;
  cardHeight?: string;
  themeColor?: string;
  scaleValue?: string;
}
  • cardWidth: 卡片容器宽度，例如 '960'
  • cardHeight: 卡片容器高度，例如 '600px'
  • themeColor: 主题主色（十六进制或 CSS 颜色值），用于品牌化
  • scaleValue: 整体缩放比例，示例 '1'、'0.85'

常见问题

如果你使用的是 Vite，请确保依赖以 ESM 方式加载；如遇到类型报错，升级 TypeScript 至较新版本（建议 >= 5.3）。

Last updated on
交互组件API 概览