ViewComponent 页面组件

结构声明

TS Declaration

interface ViewComponent {
    "concept": "ViewComponent", // 产品概念
    "name": string, // 页面组件名称
    "title": string, // 页面组件标题
    "description": string, // 页面组件描述
    "category": string, // category
    "attrs": Array<Attribute>, // 组件属性列表
    "events": Array<Event>, // 组件事件列表
    "slots": Array<Slot>, // 插槽列表
    "methods": Array<Logic>, // 逻辑列表
    "children": Array<ViewComponent>, // 页面组件列表
    "blocks": Array<ViewBlock>, // 页面代码块列表
    "themes": Array<{ name: string, type: string}>, // themes
}

Java Class

class ViewComponentTreeNode {
    ConceptEnum concept; // 产品概念
    String name; // 页面组件名称
    String title; // 页面组件标题
    String description; // 页面组件描述
    String category; // category
    List<AttributeTreeNode> attrs; // 组件属性列表
    List<EventTreeNode> events; // 组件事件列表
    List<SlotTreeNode> slots; // 插槽列表
    List<LogicTreeNode> methods; // 逻辑列表
    List<ViewComponentTreeNode> children; // 页面组件列表
    List<ViewBlockTreeNode> blocks; // 页面代码块列表
    Object themes; // themes
}

JSON Schema

{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "$ref": "#/definitions/ViewComponent",
    "definitions": {
        "ViewComponent": {
            "type": "object",
            "properties": {
                "concept": {
                    "type": "string",
                    "const": "ViewComponent"
                },
                "name": {
                    "type": "string"
                },
                "title": {
                    "type": "string"
                },
                "description": {
                    "type": "string"
                },
                "category": {
                    "type": "string"
                },
                "attrs": {
                    "type": "array",
                    "items": {
                        "$ref": "#/definitions/Attribute"
                    }
                },
                "events": {
                    "type": "array",
                    "items": {
                        "$ref": "#/definitions/Event"
                    }
                },
                "slots": {
                    "type": "array",
                    "items": {
                        "$ref": "#/definitions/Slot"
                    }
                },
                "methods": {
                    "type": "array",
                    "items": {
                        "$ref": "#/definitions/Logic"
                    }
                },
                "children": {
                    "type": "array",
                    "items": {
                        "$ref": "#/definitions/ViewComponent"
                    }
                },
                "blocks": {
                    "type": "array",
                    "items": {
                        "$ref": "#/definitions/ViewBlock"
                    }
                },
                "themes": {
                    "type": "array",
                    "items": {
                        "type": "object",
                        "properties": {
                            "name": {
                                "type": "string"
                            },
                            "type": {
                                "type": "string"
                            }
                        },
                        "required": [
                            "name",
                            "type"
                        ],
                        "additionalProperties": false
                    }
                }
            },
            "required": [
                "concept",
                "name",
                "title",
                "description",
                "category",
                "attrs",
                "events",
                "slots",
                "methods",
                "children",
                "blocks",
                "themes"
            ],
            "additionalProperties": false
        }
    }
}

示例

简单示例

JSON

{
    "concept": "ViewComponent",
    "name": "u-table-view",
    "title": "数据表格",
    "description": "用于展示大量结构化数据。支持排序、过滤（筛选）、分页、自定义操作等复杂功能。",
    "category": "Table",
    "attrs": [],
    "events": [],
    "slots": [],
    "methods": [],
    "children": [],
    "blocks": [],
    "themes": null
}

YAML

concept: ViewComponent
name: u-table-view
title: 数据表格
description: 用于展示大量结构化数据。支持排序、过滤（筛选）、分页、自定义操作等复杂功能。
category: Table
attrs: []
events: []
slots: []
methods: []
children: []
blocks: []
themes: null