素材类型
素材相关的 TypeScript 类型定义。
MaterialCategory
素材分类接口。
typescript
interface MaterialCategory {
id: number | string // 分类ID
title: string // 分类名称
pid?: number | string // 父分类ID
sort?: number // 排序
_child?: MaterialCategory[] // 子分类
}示例
typescript
const categories: MaterialCategory[] = [
{
id: 1,
title: '通用模板',
sort: 1,
_child: [
{ id: 11, title: '标题', pid: 1 },
{ id: 12, title: '段落', pid: 1 }
]
},
{
id: 2,
title: '营销模板',
sort: 2
}
]MaterialItem
素材项接口。
typescript
interface MaterialItem {
id: number | string // 素材ID
title: string // 素材名称
html: string // HTML内容
categoryId?: number | string // 分类ID
cover?: string // 缩略图URL
[key: string]: any // 其他字段
}示例
typescript
const material: MaterialItem = {
id: 101,
title: '标题模板',
html: '<div class="pb-section"><h1>标题</h1></div>',
categoryId: 11,
cover: 'https://example.com/cover.jpg',
// 自定义字段
author: 'John',
createTime: '2024-01-01'
}MaterialQueryParams
素材查询参数接口。
typescript
interface MaterialQueryParams {
categoryId?: number | string // 分类ID
keywords?: string // 搜索关键词
page?: number // 页码
pageSize?: number // 每页数量
}示例
typescript
const params: MaterialQueryParams = {
categoryId: 11,
keywords: '标题',
page: 1,
pageSize: 20
}StyleListData
素材列表数据接口（分页）。
typescript
interface StyleListData {
records: MaterialItem[] // 素材列表
total: number // 总数
page: number // 当前页
pageSize: number // 每页数量
}示例
typescript
const data: StyleListData = {
records: [
{
id: 101,
title: '模板1',
html: '<div>...</div>'
},
{
id: 102,
title: '模板2',
html: '<div>...</div>'
}
],
total: 100,
page: 1,
pageSize: 20
}MaterialData
素材数据接口（旧版，用于兼容）。
typescript
interface MaterialData {
categories: MaterialCategory[] // 分类列表
records: MaterialItem[] // 素材列表
total?: number // 总数
}废弃警告
此接口已废弃，建议使用 StyleListData。
ImageItem
图片项接口。
typescript
interface ImageItem {
path: string // 图片路径
name?: string // 图片名称
filename?: string // 文件名
[key: string]: any // 其他字段
}VideoItem
视频项接口。
typescript
interface VideoItem {
path: string // 视频路径
name?: string // 视频名称
filename?: string // 文件名
[key: string]: any // 其他字段
}SectionData
Section 数据接口。
typescript
interface SectionData {
id: string // Section ID
width: number // 宽度（百分比）
rotate: number // 旋转角度
opacity: number // 透明度
[key: string]: any // 其他字段
}示例
typescript
const section: SectionData = {
id: 'section-1',
width: 100,
rotate: 0,
opacity: 1
}完整示例
分类加载器
typescript
import type { MaterialCategory } from 'ueditor-plus-designer'
const categoryLoader = async (): Promise<MaterialCategory[]> => {
const response = await fetch('/api/categories')
const data = await response.json()
return data.map((item: any): MaterialCategory => ({
id: item.id,
title: item.name,
pid: item.parentId,
sort: item.order,
_child: item.children?.map((child: any): MaterialCategory => ({
id: child.id,
title: child.name,
pid: item.id
}))
}))
}素材加载器
typescript
import type {
MaterialQueryParams,
StyleListData,
MaterialItem
} from 'ueditor-plus-designer'
const styleLoader = async (
params?: MaterialQueryParams
): Promise<StyleListData> => {
const response = await fetch('/api/materials', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(params)
})
const data = await response.json()
return {
records: data.items.map((item: any): MaterialItem => ({
id: item.id,
title: item.name,
html: item.content,
categoryId: item.categoryId,
cover: item.thumbnail
})),
total: data.total,
page: params?.page || 1,
pageSize: params?.pageSize || 20
}
}类型守卫
检查 MaterialItem
typescript
function isMaterialItem(obj: any): obj is MaterialItem {
return (
typeof obj === 'object' &&
obj !== null &&
('id' in obj) &&
('title' in obj) &&
('html' in obj)
)
}
// 使用
if (isMaterialItem(data)) {
console.log(data.html)
}检查 StyleListData
typescript
function isStyleListData(obj: any): obj is StyleListData {
return (
typeof obj === 'object' &&
obj !== null &&
Array.isArray(obj.records) &&
typeof obj.total === 'number' &&
typeof obj.page === 'number' &&
typeof obj.pageSize === 'number'
)
}