API

sdk

version

基座版本

console.log(sdk.version)

userInfo

用户和权限信息

{
  permissions: {
    //权限信息
    all: boolean //是否具有全部权限
    page: string[] //具有权限页面 id
    widgets: boolean //具有组件权限 id
  }
  user:{
    id:string//用户 id
    name:string //用户名称
    organizationId:string//组织 id
    orignizationDiaplsyName:string // 组织名称
    roleIds:Array  //角色 id 集合
  }
}

request:Request

axios 实例 请求接口使用

类型

type RequestConfig = AxiosRequestConfig & {
  silent?: boolean
}

type Request = {
  <D = Data>(config?: RequestConfig): Promise<D>
  <D = Data>(url: string, config?: RequestConfig): Promise<D>
  get<D = Data>(url: string, config?: RequestConfig): Promise<D>
  delete<D = Data>(url: string, config?: RequestConfig): Promise<D>
  post<D = Data>(url: string, data?: any, config?: RequestConfig): Promise<D>
  put<D = Data>(url: string, data?: any, config?: RequestConfig): Promise<D>
} & AxiosInstance

示例

const { request } = sdk
const params = {id : 1 }
request.get('api/v1/xxx', {params})

const { request } = sdk
const data  = {id : 1}
request.post('api/v1/xxx',data)

不需要出现 loading 弹窗

const { request } = sdk
const data  = { id : 1}
request.post('api/v1/xxx', data, { silent : false})

cms

utils

工具函数

openVariableDialog(option:Object)

打开变量弹窗方法(和内置组件 function-dialog-variate.vue 作用一样) 命令式

示例

import sdk from 'syc-cms'
const { openVariableDialog } = sdk.utils

/**
 *
 * @param currentVariable 单选时默认选中的数据
 * @param isMultiple  是否开启多选 默认false
 * @param defaultCheckKey  多选时默认选中的数据列表id
 * @param showConfig  是否显示确认并配置下一项按钮
 * @param configData  是否显示确认并配置下一项按钮的数据
 * @example
 * configData = {
 *  data:[{
 *     id:xxx,
 *    name:xxx
 *  }],  //当前数据列表
 *  currentRow:{
 *    id:xxx,
 *    name:xxx
 *  }, //当前选中项
 *  key:'id' //根据唯一key值获取对应选中的下标
 *  variableKey:variableKey，对应获取变量名的key
 * }
 * @example
 * const variable = await openVariableDialog({currentVariable: null})
 * console.log(variable.name)
 */

async function open() {
  const data = await openVariableDialog({
    isMultiple: true,
  })
}

importAsyc(module: string)

异步导入 cms 内置组件

示例

导入内置组件： /src/widgets/widget1.setting.vue

<template>
  <SettingItem :title="'自定义设置'"> 自定义设置 </SettingItem>
</template>

<script lang="ts" setup>
import sdk from 'syc-cms'
const SettingItem = sdk.importAsync(
  '@/views/Project/Pages/Editor/Settings/components/SettingItem.vue'
)
</script>

models

模型指 MVC 中的 M ，是对应用结构的描述，是一系列类

models.App

系统数据中心类

示例

import sdk from 'syc-cms'
const { app, App, createApp, getApp } = sdk.models
// 单例
;((app === new App()) === createApp()) === getApp()

实例属性

属性名	说明	类型	默认值
mode	当前模式，编辑模式（开发版），运行模式（运行版）。组件渲染时在两种模式中可能有区别，取决于组件自身逻辑	"editing" | "running"	"editing"
editing	是否编辑模式	boolean	true
running	是否运行模式	boolean	false
current.project	当前工程项目	Project	Project
projectList	工程项目列表	Project[]	[]
dataeventSocket	全局事件 socket	Socket	Socket

models.app: App

App 的实例，单例，是整个系统的数据中心

示例

获取当前 app 模式 开发版和运行版做不同逻辑：

<script lang="ts" setup>
import sdk from 'syc-cms'
const { app } = sdk.models

function doSomething(){
  if(app.editing){  //开发版
    //
  }else{    //运行版
    //
  }
}

</script>

获取应用程序

models.Project

对项目工程进行管理和操作，包括变量、页面、语言等内容

示例

获取工程信息

import sdk from 'syc-cms'
const { app } = sdk.models
const project = app.current.project
//当前工程id
console.log(project.id)

//当前工程所有页面
console.log(project.pageList)

实例属性

属性名	说明	类型	默认值
identifier	工程唯一标识	string
id	项目的 ID	string
name	项目的名称	string
current.page	当前页面	string
current.language	当前语言	string
current.user	当前用户	string
current.homePageId	首页 ID	string
pageList	项目中的页面列表，存储 Page 类的实例数组	Page[]	[]
languageList	项目中的语言列表，存储 Language 类的实例数组	Language[]	[]
variableMap	以变量名称为键的对象，存储项目中的变量信息，每个变量是 Variable 类的实例	{ [string]: Variable }
variableValueMap	以变量名称为键的对象，存储项目中的变量值信息。通过 Proxy，实现了对 variableMap 的值的自动获取和设置	Proxy
variableOldValueMap	以变量名称为键的对象，存储项目中的变量旧值信息。通过 Proxy，实现了对 variableMap 的旧值的自动获取	Proxy
saved	当前工程是否已保存	boolean	true
saveStatus	当前工程的保存状态	"saved" | "saving" | "fail" | "unsaved"	"saved"
moduleSavedStatusMap	工程各子模块的保存状态	Object
blocks	全局事件列表，存储 Block 类的实例数组	Block[]	[]

实例方法

方法名	说明	类型
remove	从 app.projectList 中移除当前项目实例	() => void
setVariable	设置变量值。参数 name：变量名，value：变量值	(name: string, value: string) => void
setVariable	等待时长 参数 time：时长（mm）	(time: number = 0) => void
openVirtualKeyboard	开启虚拟键盘	() => void
closeVirtualKeyboard	关闭虚拟键盘	() => void
closeVirtualKeyboard	播放音频 参数 fileUrl： 文件路径，loop:是否循环	(fileUrl: string, loop: boolean) => void

models.Page

页面管理，它包含了页面的基本属性和方法，以及与其他页面进行交互的功能。

示例

获取当前页面信息

import sdk from 'syc-cms'
const { app } = sdk.models
//当前页面
const page = app.current.project.current.page

//当前页面渲染节点信息
const document = page.document

//获取页面下标
const sort = page.getSort()

// 保存页面
page.save()

实例属性

属性名	说明	类型	默认值
id	页面的 ID	string
name	页面的名称	string
parent	当前页面的父页面,为 undenfind 时是顶层	Page | undefined	undefined
parentId	页面的父页面 id	string | undefined	undefined
children	页面的子页面列表	Page[]	[]
document 重点	页面文档数据，body 是页面渲染在画布上时的根节点	{body:CanvasNode}	{body:CanvasNode}
type	页面类型。0 表示文件夹，1 表示画面	number	1
updateTime	页面的更新时间	string
sort	页面在父级页面中的下标（用于排序）。值为 null 时，默认排序将页面追加到父级的最后一个	number | null	number
hasEvent	是否有页面事件	boolean	false
permissions	表示页面的权限控制配置。包含多个具有 id、name 和 subs 属性的对象，id 和 name 分别表示 CanvasNode 的 id 和 name，subs 是一个包含多个具有 id 和 name 属性的对象的数组(组件级别)	Array	[]

实例方法

方法名	说明	类型
appendChild	向当前页面的子页面列表中添加一个子页面	(child: Page, sort: number | null = null) => void
remove	从父页面的子页面列表中移除当前页面	() => void
copyPage	复制当前页面到当前列表	() => void
getSort	获取当前页面在父页面子页面列表中的下标	() => number
save	保存当前页面的内容和权限配置	() => void

models.PageManager

一个页面控制器，主要用于管理页面的弹窗、页面跳转、导出、打印等功能。

示例

获取页面控制器信息

import sdk from 'syc-cms'
const { PageManager } = sdk.models

const pageManager = new PageManager()

//获取所有弹窗页面
console.log(pageManager.dialogPages)

//获取最后一次弹窗信息
console.log(PageManager.lastDialogInfo)

打开指定页面弹窗

import sdk from 'syc-cms'
const { PageManager } = sdk.models

const pageManager = new PageManager()
//只能打开一个弹窗
pageManager.alertRoute(1, '我是标题', true, 800, 200, 'dialog', true)

//能多开弹窗（显示最小化按钮）
pageManager.alertRoute(1, '我是标题1', true, 800, 200, '', true)
pageManager.alertRoute(2, '我是标题2', true, 800, 200, '', true)
pageManager.alertRoute(3, '我是标题3', true, 800, 200, '', true)

导出指定页面

import sdk from 'syc-cms'
const { PageManager } = sdk.models

const pageManager = new PageManager()
const params = {
  pageInfo:{
    id:1 //页面id 优先整个页面导出 （可选）
    elementId:'#chart' //指定元素id  （可选）
  }
  type: "PDF"  // 导出文件格式 "Image" | "PDF"
  filename: "PDF"  // 导出文件名
  format: "A4"  // 纸张类型 "A4" \| "A3"
  orientation: "p"  //  p'=纵向 'l'=横向
}
pageManager.exportCurrentPage(params)

实例属性

属性名	说明	类型	默认值
id	页面控制器 ID	'PageManager'	'PageManager'
name	页面控制器 名称	'页面控制器'	'页面控制器'
topPageZIndex	页面层级的 z-index 属性值	string	'99'
dialogPages	存储所有窗口页面的数组   dialogPages[0].\_props.uuid 是 uuid	Array[{dialog:Component,pageIds:Array}]	[]
miniPagesId	存储最小化窗口页面的数组 这里 id 是 uuid	Array<{vm:ComponentInternalInstance,id: string,title: string}>	[]
currentPage	当前选中的弹窗信息	Object[{dialog:Object,pageIds:Array}]

静态属性

属性名	说明	类型	默认值
lastDialogInfo	记录最后一次弹窗的信息，包括时间戳和 pageId	Object[{timestamp:Date,pageId:Page['id']}]

实例方法

方法名	说明	类型
getDialogPageById	根据 uuid 获取对应的窗口页面	(uuid: string) => Component
removeMiniPagesById	根据 uuid 移除最小化窗口页面	(uuid: string) => void`
removeDialogPagesById	根据 uuid 移除最大化窗口页面	(uuid: string) => void
closeRoute	关闭所有窗口页面	() => void
alertRoute	弹出指定页面，包括相关参数（如：目标页面 id、标题、是否固定尺寸、宽度、高度、是否多开窗口、是否显示关闭按钮）	(targetPageId: Page['id'], title: string, fixedSize: boolean, width: number, height: number, target: "dialog" | null, closeBtn: boolean) => void
jumpRoute	跳转到指定的页面，支持弹窗内跳转和主体页面跳转	(pageId: number) => void
reloadRoute	刷新当前页面	() => void
backRoute	返回上一个页面	() => void
exportCurrentPage	导出页面中的图表数据，支持导出为 Excel 格式 id:页面 id elementId:元素 id specifiedSavePath:指定路径（eletron）	(pageInfo: {id?:Page['id'],elementId?:string}, type: "Image" | "PDF", filename: string, format: "A4" | "A3", orientation: "p" | "l", specifiedSavePath: string | null, timeout: number = 2000) => Promiese<void>
printCurrentPage	打印当前页面	(pageInfo: {id?:Page['id'],elementId?:string}, timeout: number = 2000) => Promiese<void>

models.CanvasNode

用于表示和管理一个画布上的图形元素，每个独立的图形元素都可以看作是一个 CanvasNode 实例。它包含了许多属性和方法，用于描述元素的形状、位置、颜色等特征，以及实现元素的绘制、移动、缩放等操作。

示例

获取节点样式 /src/widgets/widget1/widget1.vue

<template>
  <div class="example">
  </div>
</template>

<script setup lang="ts">

const $props = defineProps<{
  editing?: boolean
  running?: boolean
  node: CanvasNode
}>()

const node = $props.node

//node.style
consol.loeg(node.style)   //固定三个参数{position:'absolute',left '1px',top:'1px'} 如果没有手动设置过其他参数（如width,height）,是没有保存的
//node.convertedStyled对node.style 经过Proxy代理转换 '1px' = 1
consol.loeg(node.convertedStyle.left) // 1
node.convertedStyle.left = 2   // node.style  {position:'absolute',left '2px',top:'1px'}

<script>

设置组件自定义参数

/src/widgets/widget1/defaultProps.ts

export let defaultProps = {
  expression: '',
  defaultColor: '#3D6EFF',
}

/src/widgets/widget1/index.ts

import sdk from 'syc-cms'
import { defaultProps } from './defaultProps'
const { Widget } = sdk.models

export default <Partial<Widget>>{
  category: 'base',
  name: 'widget1',
  icon: '',
  authorizationRequired: true,
  styleConfig: {},
  onCreate(node) {
    node.setDefaultProps(defaultProps)
  },
}

/src/widgets/widget1/widget1.vue

<template>
  <div class="example">
  </div>
</template>
<script setup lang="ts">
const $props = defineProps<{
  editing?: boolean
  running?: boolean
  node: CanvasNode
}>()
const node = $props.node
console.log(node.props) // {expression: '',defaultColor: '#3D6EFF'}

实例属性

属性名	说明	类型	默认值
id	节点的唯一标识符，使用日期的 JSON 字符串表示 ID	string	""
name	节点名称	string	""
is	组件类型，类似于 Vue 的 is 属性	string	""
props 重点	组件的自定义配置数据，类似 vue props	Object
tagName	节点的 HTML 标签名，is 存在时 tagName 为 undefined	string	undefined
style	节点的自定义设置样式数据	Partial <CSSStyleDeclaration>
computedStyle	已渲染的计算样式（基于 windows.getComputedStyle）	Partial <CSSStyleDeclaration>
convertedStyle	已转换的样式，方便 js 使用	Partial <CSSStyleDeclaration>
selected	选中状态的 getter 和 setter，用于判断节点是否被选中	boolean	false
locked	是否锁定	boolean	false
aspectRatioLocked	是否宽高比锁定	boolean	false
dom	渲染的 dom 节点	HTMLElement | null	null
parentNode	父节点	CanvasNode | undefined	undefined
childNodes	子节点们	CanvasNode[]	[]

实例方法

方法名	说明	类型
setDefaultProps 重点	设置 默认自定义数据的 props	(defaultProps: object) => void
toJSON	返回一个 JSON 对象，包含节点的属性	() => Object
appendChild	将给定的子节点添加到当前节点的 childNodes 数组中	(child: CanvasNode) => void
remove	从父节点中移除当前节点	() => void
cloneNode	克隆当前节点及其子节点，返回克隆得到的新节点	() => void
isGroup	判断当前节点是否为组节点	() => void

静态属性

属性名	说明	类型	默认值
selectedList readonly	选中的节点列表，响应式数组	CanvasNode[]	[]
styleProxy readonly	读写当前选中节点的样式的代理对象	Partial <CSSStyleDeclaration>

静态方法

方法名	说明	类型
getSelectedOrBodyList	获取选中的节点或页面主体节点列表	() => void
getUnlockedSelectedList	获取未锁定的选中节点列表	() => void
getSameStyleProxyValue	获取具有相同样式代理值的节点数组	(nodes: CanvasNode[], key: string) => void
setSameStyleProxyValue	为具有相同样式代理值的节点数组设置样式值	(nodes: CanvasNode[], key: string, value: any) => void
getById	根据给定的 id 获取 CanvasNode 实例	(id:string) => CanvasNode	undefined
getBody	获取页面主体节点	() => CanvasNode

models.Widget

表示应用中的可视化组件，这些组件可以在画布上进行组合和编辑，从而实现各种自定义的功能。Widget 类包含了组件的一些基本属性和方法，以及与其他组件进行交互的功能。

实例属性

属性名	说明	类型	默认值
is	组件的唯一标识，类比 vue is 。如果相同将会覆盖。内部组件自动使用文件名	string	""
name	组件名称	string	""
category	组件分类	"base"| "readWrite"| "jump"| "container"| "run"| "chart"| "run"|"system"	""
icon	组件图标，支持 class 类名， 也支持 base64	string	""
authorizationRequired	表示组件是否可以进行权限控制	boolean	false
canvasView	表示组件在画布上的视图	VueComponent	null
settingsView	表示组件的设置视图（如：Name.settings.vue）	VueComponent	null
styleConfig	表示组件设置项禁用 textSetting:文本配置 appearanceSetting:外观配置	{[key in keyof CSSStyleDeclaration]?:boolean } & {textSetting?: boolean appearanceSetting?: boolean}	null

实例方法

方法名	说明	类型
onCreate 重点	钩子函数，组件实例化调用此函数（1.页面刷新，2.从组件库拖出）	(node: CanvasNode) => void

静态属性

属性名	说明	类型	默认值
store	以组件类型为键，Widget 实例为值。用于存储所有已创建的 Widget 实例	Object<string,string[]>
list	获取 store 中的所有 Widget 实例	Widget[]	[]
sortInfo	指定组件的排序	Object<string,string[]>	[]

models.Variable

对项目中的变量进行变量管理。它包含了与变量相关的一系列操作，例如获取和设置变量值，发送变量值到后端等。还提供了一些静态方法和属性，以方便访问和操作当前项目中的变量。

示例

获取变量信息 /src/widgets/widget1/widget1.vue

<template>
  <div class="example">
    {{computeValue}}
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import sdk  from 'syc-cms'
const { Variable } = sdk.models
const $props = defineProps<{
  editing?: boolean
  running?: boolean
  node: CanvasNode
}>()

//获取变量a的Variable实例 (需要启动变量服务)
const aVariableInstance = Variable.store['a']

//获取变量a的值(需要启动变量服务)
const value = aVariableInstance.value

//变量a 变量b组合 ，使用computed变成响应式数据
const computeValue = computed(()=> Variable.exp('a'))

const computeValue = computed(()=> Variable.exp('a+b+1'))


<script>

监听变量值变化 /src/widgets/widget1/widget1.vue

<template>
  <div class="example">
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import sdk  from 'syc-cms'
const { Variable } = sdk.models
const $props = defineProps<{
  editing?: boolean
  running?: boolean
  node: CanvasNode
}>()

/**
 *监听变量a 值变化
 * 需要同步调用，异步需要手动调用unWatch解除监听
 */
const unWatch = Variable.watch('a',(newValue,oldValue)=>{})

<script>

实例属性

属性名	说明	类型	默认值
project	该变量所属的项目实例	Project
name	变量名	string	""
type	变量数据类型	keyof typeof Variable.types	0
typeName	变量数据类型名称	string	'二进制变量'
dataQuality	变量的数据质量	number	undefined
oldValue	变量的旧值	any
value	变量的新值	any
address	变量地址（IO 变量相关）	string
interval	采集间隔 （IO 变量相关）	number	1000
stringLength	字符长度 （IO 变量相关）	number | null	null
zoom	缩放比 （IO 变量相关）	number | null	null
digit	小数位数 （IO 变量相关）	number | null	null
readWriteRule	读写规则 （IO 变量相关）	1 | 2 | 3	1
scopeType	作用域类型 （系统变量相关）0 = 服务端变量 1 = 客户端变量	0 | 1	1
initType	初始值类型 （内部变量相关）0 = "无" 1 = "退出值" 2="设定值"	0 | 1| 2	1
setValue	初始值 （内部变量相关）	string | null	null
expression	表达式 （逻辑变量相关）	string | null	null
mappingVariable	映射变量	string | null	null

实例方法

方法名	说明	类型
get	返回变量的值	() => any
set	设置变量值并同步更新本地值	(newValue:any) => void
post	仅下发变量值，不立即更新本地值(下发成功后，等待 websocket 通知更新)	(newValue:any) => void
remove	从本地变量池删除当前变量	() => void

静态属性

属性名	说明	类型	默认值
store	当前工程的变量池 获取变量 Variables 实例 Variable.store.varName	Proxy

静态方法

方法名	说明	类型
exp deprecated	通过表达式求值值	(code: string) => any
watchExp deprecated	监听表达式的值的变化	(code: string,callback: (value: any, oldValue: any) => void) => any
isVarName	判断给定字符串是否为一个合法的变量名	(code: string) => boolean) => any

models.Expression

表达式运算,Variable 类 的扩展

示例

获取表达式值 /src/widgets/widget1/widget1.vue <template>

  <div class="example">
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import sdk  from 'syc-cms'
const { Expression } = sdk.models
const $props = defineProps<{
  editing?: boolean
  running?: boolean
  node: CanvasNode
}>()

//获取表达式值
new Expression("1 + 1").toValue() // 2
Expression().getValue("1 + 1") // 2

//获取表达式值 变量a + 变量b
new Expression("a + b").toValue() //
Expression().getValue("a + b") //

const fn = Expression.getValue("() => a + b")
fn() //调用时才获取表达式结果

<script>

监听表达式值变化 /src/widgets/widget1/widget1.vue

<template>
  <div class="example">
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import sdk  from 'syc-cms'
const { Expression } = sdk.models
const $props = defineProps<{
  editing?: boolean
  running?: boolean
  node: CanvasNode
}>()

const exp =  new Expression('a+b')
const exp2 =  new Expression('a')

/**
 *监听变量a + 变量b 值变化
 * 需要同步调用，异步需要手动调用unWatch解除监听
 */

const unWatch = exp.watch((newValue,oldValue)=>{})

<script>

获取表达式中得变量列表 /src/widgets/widget1/widget1.vue

<template>
  <div class="example">
    {{computeValue}}
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import sdk  from 'syc-cms'
const { Expression } = sdk.models
const $props = defineProps<{
  editing?: boolean
  running?: boolean
  node: CanvasNode
}>()

const exp =  new Expression('a+b+1')

//获取表达式中得变量名列表
const vars = exp.getVars() //['a,'b']

<script>

实例属性

属性名	说明	类型	默认值
code	表达式 code 内容	string	""

实例方法

方法名	说明	类型
toValue	获取表达式值 throwError:运行错误时是否抛出错误	(throwError:boolean = false) => any
watch	监听表达式的值的变化	(callback: (value: any, oldValue: any) => WatchStopHandle)

静态属性

属性名	说明	类型	默认值
$vars	当前工程的变量池 获取某个变量值 Expression.$vars.varName	Proxy

静态方法

方法名	说明	类型
getValue	获取表达式值	(code: string,throwError:boolean = false) => any
getVars	获取表达式中的变量列表	(code: string) => string[]
isValidVariableName	判断是否是合法变量名	(code: string) => boolean
isValid	是否是合法表达式	(code: string) => boolean

models.Language

用于管理多语言，用于实现在应用中切换不同的语言环境。其属性和方法主要负责获取、设置和翻译文本，以及订阅和触发当前语言环境的变化。

示例

监听当前语言变化 /src/widgets/widget1/widget1.vue

<template>
  <div class="example">
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import sdk  from 'syc-cms'
const { Language } = sdk.models
const $props = defineProps<{
  editing?: boolean
  running?: boolean
  node: CanvasNode
}>()

Language.useChange((language: Language)=>{
  //dosomething
})

<script>

获取 ElementPlusI18n 内置语言包 /src/widgets/widget1/widget1.vue

<template>
  <div class="example">
     <el-config-provider :locale="local">
        <el-date-picker
        />
      </el-config-provider>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import sdk  from 'syc-cms'
const { Language } = sdk.models
const $props = defineProps<{
  editing?: boolean
  running?: boolean
  node: CanvasNode
}>()

const { local } = Language.useElementPlusI18n()

<script>

实例属性

属性名	说明	类型	默认值
project	当前项目信息	Project
lang	开发版当前设置的语言	"original" | "auto" | "zh-CN" | "en-US"	"original"
followLang	运行版实际设置的语言	"zh-CN" | "en-US"	""
map	动态语言包的映射，键为原始文本，值为翻译后的文本	Record<string,string>
staticMap	静态（内置)语言包的映射，键为原始文本，值为翻译后的文本	Record<string,string>

实例方法

方法名	说明	类型
isOriginal	判断当前语言状态是否为原始文本	() => boolean

静态方法

方法名	说明	类型
isOriginal	判断当前语言状态是否为原始文本	() => boolean
setLang	保存当前设置的语言到本地 localStorage	(lang: "original" | "auto" | "zh-CN" | "en-US") => void)
t	收集并翻译动态语言，将原始文本替换为对应的翻译文	(rawText: string) => void)
_t	翻译内置语言包的文本	(rawText: string) => void)
useChange	订阅当前语言状态的变化，收集监听函数（同步调用）	(fn: Function) => void)
useElementPlusI18n	获取当前语言的 element-plus 内置语言包	() => Object)
getLangReqHeader	获取当前语言请求头	() => string)

内置组件（Component）

CMS 内置组件

SettingItem.vue

设置 折叠组件 路径：views/Project/Pages/Viewer/Viewer.vue 路径：@/views/Project/Pages/Editor/Settings/components/SettingItem.vue

示例

/src/widgets/widget1.setting.vue

<template>
  <SettingItem :title="'自定义设置'"> 自定义设置 </SettingItem>
</template>

<script lang="ts" setup>
import sdk from 'syc-cms'
const SettingItem = sdk.importAsync(
  '@/views/Project/Pages/Editor/Settings/components/SettingItem.vue'
)
</script>

props

属性名	说明	类型	默认值
title	标题	string	'running'
fold	是否折叠		false

function-dialog-variate.vue

变量弹窗 路径：@/views/components/component-styles/function-dialogs/FunctionDialogVariate.vue

示例

<template>
   <function-dialog-variate
      :visible="visible"
      :filterType="filterTypes"
      isMultiple
      isAppendToBody

      @cancel="cancel"
      @confirm="confirm"
    />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import sdk from 'syc-cms'
const { app } = sdk.models
const FunctionDialogVariate = sdk.importAsync(
  '@/views/components/component-styles/function-dialogs/function-dialog-variate.vue'
)
const filterTypes = [ 0 ] //只显示二进制
</script>

props

属性名	说明	类型	默认值
visible	是否可见	boolean	false
isAppendToBody	是否添加到 body 中	boolean	true
isMultiple	是否可以多选	boolean	false
data	单选时默认选中的数据  id=变量 id name=变量名	Obeject <{id:string,name:string}>	undefined
defaultCheckKey	多选时默认选中的数据列表 id	string[]	[]
filterType	过滤只显示指定类型变量（0 二进制，1 有符号 8 位整型等，详细看 Variable.types）	<keyof typeof Variable.types>[]	[]
disabledNames	禁止选择变量名集合	string[]	[]
dialogConfirm	点击确认按钮触发回调函数	(rows:Object,index)=>void	(rows:Object,index)=>void
dialogClose	关闭弹窗触发回调函数	（）=> void	()=>void

事件

事件名	说明	回调参数
confirm	点击确认按钮触发	(rows:Object,index)
cancel	关闭弹窗触发	()
cellClick	点击且高亮的当前行数据	(row:Object)

ExpConfigDialog.vue

表达式弹窗 路径：@/views/Project/Data/VariableTag/components/ExpConfigDialog.vue

示例

<template>
 <ExpConfigDialog
      v-model:model-value="info.visible"
      v-model:code="info.code"
      :filterClientVariables="true"
    ></ExpConfigDialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import sdk from 'syc-cms'
const { app } = sdk.models
const ExpConfigDialog = sdk.importAsync(
  '@/views/Project/Data/VariableTag/components/ExpConfigDialog.vue'
)
const info = reactive({
  visbible:false,
  code:''
})

</script>

props

属性名	说明	类型	默认值
code	变量名	string	''
confirmAutoClose	点击确认按钮后是否自动关闭弹窗	boolean	true
filterClientVariables	过滤掉客户端变量	boolean	true
mergeVariableList	事件参数	Array	[]

事件

事件名	说明	回调参数
change	点击确认按钮触发	(code:string)
close	关闭弹窗时触发	boolean

Viewer.vue

页面文档渲染器 路径：@/views/Project/Pages/Viewer/Viewer.vue

示例

<template>
  <Viewer :mode="app.mode" :document="document"></Viewer>
</template>
<script setup lang="ts">
import sdk from 'syc-cms'
const { app } = sdk.models
const { Viewer } = sdk.importAsync('@/views/Project/Pages/Viewer/Viewer.vue')
const document = app.current.project.current.page.document
</script>

props

属性名	说明	类型	默认值
mode	当前项目信息	'running' | 'editing'	'running'
document	节点信息	Page['document']	app.current.project.current.page.document
running	是否 running 状态	boolean	false
editing	是否 editing 状态	boolean	false

注意

iconfont

cms 使用了 iconfont ， css 类名为 .iconfont ，如果需要使用额外的 iconfont 图标库，则 css 类名不能再命名为 .iconfont

版本升级

起始版本

2.0.3