标准页面

标准页面是基于网格布局系统的可视化页面类型，通过拖拽式组件编排实现快速的页面构建。它提供完整的组件管理、事件系统和生命周期机制，支持前后端分离架构，平衡了开发效率和功能灵活性。标准页面适用于大多数企业应用界面需求，是JitWeb中使用最广泛的页面类型。

标准页面元素分层结构为Meta（pages.Meta） → Type（pages.GridPageType） → 实例，开发者可通过JitAi的可视化开发工具快捷地创建标准页面实例元素。

当然，开发者也可以创建自己的Type元素，或者在自己的App中改写JitAi官方提供的pages.GridPageType元素，以实现自己的封装。

快速开始

创建实例元素

目录结构

推荐目录结构
pages/MyStandardPage/          # 页面名称（路径可自定义）
├── e.json                     # 元素声明文件
├── scheme.json                # 页面配置文件
├── index.ts                   # 前端入口文件
├── page.ts                    # 页面逻辑实现
├── PageRender.tsx             # 页面渲染组件（可选）
└── page.style.ts              # 页面样式文件（可选）

e.json文件

元素声明配置
{
  "title": "我的标准页面",
  "type": "pages.GridPageType",
  "frontBundleEntry": "./index.ts",
  "platform": "PC",
  "outputName": "index"
}

scheme.json文件

页面配置文件
{
  "layout": [
    {
      "i": "MyTable",
      "x": 0,
      "y": 0,
      "w": 12,
      "h": 8,
      "minW": 2,
      "minH": 2
    }
  ],
  "componentList": [
    {
      "name": "MyTable",
      "type": "components.Table",
      "title": "数据表格",
      "config": {
        "dataSource": "models.UserModel"
      }
    }
  ],
  "variableList": [
    {
      "name": "searchKeyword",
      "dataType": "Stext",
      "title": "搜索关键词",
      "value": ""
    }
  ],
  "functionList": [
    {
      "name": "handleSearch",
      "title": "处理搜索",
      "args": []
    }
  ]
}

page.ts文件

页面逻辑实现
import { Jit } from 'jit';

export default class MyStandardPage extends Jit.Pages["pages.GridPageType"] {
    
    bindEvent() {
        // 绑定组件事件
        this.MyTable.onRowClick = (row: any) => {
            console.log('点击行:', row);
        };
    }

    handleSearch() {
        // 实现搜索逻辑
        const keyword = this.searchKeyword.value;
        this.MyTable.refresh({
            filter: `Q(name__like='%${keyword}%')`
        });
    }
}

调用示例

页面使用
// 获取页面实例
const page = app.getElement("pages.MyStandardPage");

// 初始化页面
await page.init();

// 订阅页面事件
page.subscribeEvent("CUSTOM_EVENT", (event) => {
    console.log("接收到自定义事件:", event);
});

// 刷新页面
page.refresh();

元素配置

e.json配置

字段名	类型	必填	说明
title	string	是	页面显示标题
type	string	是	固定值"pages.GridPageType"
frontBundleEntry	string	是	前端入口文件路径
platform	string	否	运行平台，默认"PC"
outputName	string	否	输出文件名，默认"index"
extend	string	否	继承的父页面fullName

scheme.json配置

字段名	类型	必填	说明
layout	Array	是	组件布局配置数组
componentList	Array	是	页面组件配置数组
variableList	Array	否	页面变量配置数组
functionList	Array	否	页面方法配置数组
aiConfig	Object	否	AI配置对象

方法

init

初始化页面，加载配置、组件和变量，必须在页面使用前调用。

使用示例

页面初始化
const page = app.getElement("pages.MyStandardPage");
await page.init();
console.log("页面初始化完成:", page.isReady);

bindEvent

绑定页面和组件事件，在页面初始化时自动调用，开发者可重写此方法。

使用示例

事件绑定
bindEvent() {
    // 绑定组件事件
    this.MyButton.onClick = () => {
        this.handleButtonClick();
    };
    
    // 绑定页面级事件
    this.subscribeEvent("DATA_CHANGED", (event) => {
        this.MyTable.refresh();
    });
}

getScheme

获取页面完整的配置方案，包含继承处理后的最终配置。

返回值

返回包含layout、componentList、variableList、functionList等的配置对象。

使用示例

获取页面配置
const scheme = this.getScheme();
console.log("页面布局:", scheme.layout);
console.log("组件列表:", scheme.componentList);
console.log("变量列表:", scheme.variableList);

// 动态修改配置
scheme.layout.push({
    i: "NewComponent",
    x: 0,
    y: 10,
    w: 6,
    h: 4
});

publishEvent

发布页面事件，向页面内的组件和订阅者广播消息。

参数详解

参数名	类型	对应原生类型	必填	说明
messageName	Stext	string \| symbol	是	事件名称
ex	JitDict	Record<string, any>	否	事件附加数据

使用示例

事件发布
// 发布简单事件
this.publishEvent("DATA_UPDATED");

// 发布带数据的事件
this.publishEvent("USER_SELECTED", {
    userId: 123,
    userName: "张三",
    action: "select"
});

subscribeEvent

订阅页面事件，注册事件回调函数。

参数详解

参数名	类型	对应原生类型	必填	说明
messageName	Stext	string \| symbol	是	事件名称
callback	Function	Handler<T>	是	事件回调函数

返回值

返回事件处理器ID，用于取消订阅。

使用示例

事件订阅
// 订阅事件
const handlerId = this.subscribeEvent("DATA_UPDATED", (event) => {
    console.log("数据已更新:", event.data);
    this.MyTable.refresh();
});

// 带类型的事件订阅
interface UserEvent {
    userId: number;
    userName: string;
}

this.subscribeEvent<UserEvent>("USER_SELECTED", (event) => {
    console.log(`用户 ${event.data.userName} 被选中`);
});

unSubscribeEvent

取消订阅页面事件。

参数详解

参数名	类型	对应原生类型	必填	说明
handlerId	Stext	string	是	事件处理器ID

使用示例

取消事件订阅
// 订阅事件并获取处理器ID
const handlerId = this.subscribeEvent("TEST_EVENT", (event) => {
    console.log("处理测试事件");
});

// 取消订阅
this.unSubscribeEvent(handlerId);

off

取消底层事件监听器，比unSubscribeEvent更底层的事件控制。

参数详解

参数名	类型	对应原生类型	必填	说明
handlerId	Stext	string	是	事件处理器ID

使用示例

取消底层事件监听
// 获取应用级事件处理器ID
const appHandlerId = this.app.on((event) => {
    console.log("应用级事件:", event);
});

// 取消监听
this.off(appHandlerId);

newVariable

创建页面变量实例，支持所有JitAi数据类型。

参数详解

参数名	类型	对应原生类型	必填	说明
varConfig	JitDict	DataTypeConfig	是	变量配置对象
value	Any	any	否	变量初始值

返回值

返回创建的变量实例对象。

使用示例

创建页面变量
// 创建文本变量
const textVar = this.newVariable({
    name: "description",
    dataType: "Stext",
    title: "描述信息"
}, "默认描述");

// 创建数字变量
const numberVar = this.newVariable({
    name: "count",
    dataType: "Numeric",
    title: "数量",
    decimal: 0
}, 10);

// 使用变量
console.log("文本值:", textVar.value);
numberVar.value = 20;

newComponent

创建组件实例，用于动态添加组件。

参数详解

参数名	类型	对应原生类型	必填	说明
type	Stext	string	是	组件类型标识
createCompConfig	JitDict	any	是	组件创建配置

返回值

返回创建的组件实例对象。

使用示例

动态创建组件
// 创建按钮组件
const button = await this.newComponent("components.Button", {
    name: "DynamicButton",
    title: "动态按钮",
    config: {
        text: "点击我",
        type: "primary"
    }
});

// 绑定组件到页面
button.bindPage(this);
this["DynamicButton"] = button;

getUIContext

获取页面UI上下文信息，包含所有可用的函数和变量列表。

返回值

返回包含functionList和variables的对象。

使用示例

获取UI上下文
const context = this.getUIContext();
console.log("可用函数:", context.functionList);
console.log("可用变量:", context.variables);

// 遍历所有可用函数
context.functionList.forEach(func => {
    console.log(`函数: ${func.title}(${func.name})`);
});

getVariableValue

获取变量的值，支持页面变量和组件变量。

参数详解

参数名	类型	对应原生类型	必填	说明
varName	Variable \| Stext	InstanceType<BaseDataType> \| string	是	变量名或变量实例

返回值

返回变量的当前值。

使用示例

获取变量值
// 获取页面变量值
const searchValue = this.getVariableValue("searchKeyword");
console.log("搜索关键词:", searchValue);

// 获取组件变量值
const tableData = this.getVariableValue("MyTable.selectedRows");
console.log("表格选中行:", tableData);

// 使用变量实例获取值
const keywordVar = this.searchKeyword;
const value = this.getVariableValue(keywordVar);

parseVariableInQ

解析Q表达式中的变量，将页面变量转换为实际值。

参数详解

参数名	类型	对应原生类型	必填	说明
str	Stext	string	是	包含变量的Q表达式字符串

返回值

返回解析后的Q表达式字符串。

使用示例

Q表达式变量解析
// 设置页面变量
this.searchKeyword.value = "张三";
this.minAge.value = 18;

// 解析包含变量的Q表达式
const qStr = "Q(name__like=this.searchKeyword.value) & Q(age__gte=this.minAge.value)";
const parsedQ = this.parseVariableInQ(qStr);
console.log("解析后的Q表达式:", parsedQ);

// 用于数据查询
this.MyTable.refresh({
    filter: parsedQ
});

refresh

刷新页面显示，触发页面内部刷新事件。

使用示例

页面刷新
// 数据更新后刷新页面
const updateData = async () => {
    await this.saveUserData();
    // 刷新页面显示
    this.refresh();
};

refreshPageVariable

刷新页面变量，重新从URL参数加载变量值。

使用示例

页面变量刷新
// 当URL参数变化时刷新页面变量
this.refreshPageVariable();

// 监听路由变化并刷新变量
window.addEventListener('popstate', () => {
    this.refreshPageVariable();
});

sendAiMessage

发送AI消息，需要配置AI助手。

参数详解

参数名	类型	对应原生类型	必填	说明
message	Stext	string	是	发送的消息内容
inNewChat	Numeric	number	否	是否在新对话中发送，默认0

使用示例

AI消息发送
// 发送AI消息
await this.sendAiMessage("请帮我分析这份数据", 1);

// 监听AI响应
this.subscribeEvent("AI_RESPONSE", (event) => {
    console.log("AI回复:", event.data.response);
});

destroy

销毁页面实例，清理所有资源和事件监听器。

使用示例

页面销毁
// 页面卸载时调用
const cleanup = () => {
    this.destroy();
    console.log("页面已销毁");
};

// 在路由切换时自动调用
window.addEventListener('beforeunload', cleanup);

属性

name

页面名称，对应元素的name字段。

title

页面显示标题，对应元素的title字段。

fullName

页面完整名称，包含路径的完整标识符。

ePath

页面在应用中的路径。

scheme

页面配置对象，包含布局、组件、变量和方法定义。

compInsList

页面组件实例列表，包含所有已加载的组件。

compInsDict

页面组件实例字典，以组件名为key的组件映射。

isReady

页面就绪状态，表示页面是否已完成初始化。

app

当前应用实例，提供应用级服务和方法。

aiConfig

AI配置信息，包含AI助手的启用状态和配置。

extend

继承的父页面fullName，用于页面继承功能。

pagePerm

页面权限配置对象，控制页面的访问权限。

高级特性

页面继承

标准页面支持继承机制，子页面可以继承父页面的组件、变量和方法，并支持重写和扩展。

配置示例和使用示例

子页面e.json配置
{
  "title": "扩展的标准页面", 
  "type": "pages.GridPageType",
  "frontBundleEntry": "./index.ts",
  "extend": "pages.BaseStandardPage"
}

页面继承实现
class ExtendedPage extends Jit.Pages["pages.BaseStandardPage"] {
    scheme = {
        // 继承父页面配置并扩展
        ...super.getScheme(),
        componentList: [
            ...super.getScheme().componentList,
            {
                name: "NewButton",
                type: "components.Button", 
                title: "新增按钮",
                config: {}
            }
        ]
    };

    bindEvent() {
        super.bindEvent(); // 继承父类事件绑定
        
        // 扩展新的事件绑定
        this.NewButton.onClick = () => {
            this.handleNewFeature();
        };
    }
}

AI集成支持

标准页面内置AI助手集成能力，支持智能交互和辅助功能。

AI功能集成
class AIEnabledPage extends Jit.Pages["pages.GridPageType"] {
    scheme = {
        // ... 其他配置
        aiConfig: {
            useAi: 1,
            aiAssistant: "assistants.MyAI"
        }
    };

    async handleAIQuery(userInput: string) {
        // 发送AI消息
        await this.sendAiMessage(userInput, 1);
        
        // 监听AI响应
        this.subscribeEvent("AI_RESPONSE", (event) => {
            this.displayAIResponse(event.data.response);
        });
    }
}

动态布局调整

支持运行时动态调整组件布局和配置。

动态布局管理
class DynamicLayoutPage extends Jit.Pages["pages.GridPageType"] {
    
    adjustLayout(componentName: string, newLayout: any) {
        // 更新布局配置
        const layoutItem = this.scheme.layout.find(item => item.i === componentName);
        if (layoutItem) {
            Object.assign(layoutItem, newLayout);
            this.refresh(); // 刷新页面应用新布局
        }
    }

    addComponent(componentConfig: any, layoutConfig: any) {
        // 动态添加组件
        this.scheme.componentList.push(componentConfig);
        this.scheme.layout.push(layoutConfig);
        this.loadComponents(); // 重新加载组件
    }
}

快速开始​

创建实例元素​

目录结构​

e.json文件​

scheme.json文件​

page.ts文件​

调用示例​

元素配置​

e.json配置​

scheme.json配置​

方法​

init​

使用示例​

bindEvent​

使用示例​

getScheme​

返回值​

使用示例​

publishEvent​

参数详解​

使用示例​

subscribeEvent​

参数详解​

返回值​

使用示例​

unSubscribeEvent​

参数详解​

使用示例​

off​

参数详解​

使用示例​

newVariable​

参数详解​

返回值​

使用示例​

newComponent​

参数详解​

返回值​

使用示例​

getUIContext​

返回值​

使用示例​

getVariableValue​

参数详解​

返回值​

使用示例​

parseVariableInQ​

参数详解​

返回值​

使用示例​

refresh​

使用示例​

refreshPageVariable​

使用示例​

sendAiMessage​

参数详解​

使用示例​

destroy​

使用示例​

属性​

name​

title​

fullName​

ePath​

scheme​

compInsList​

compInsDict​

isReady​

app​

aiConfig​

extend​

pagePerm​

高级特性​

页面继承​

配置示例和使用示例​

AI集成支持​

动态布局调整​

快速开始

创建实例元素

目录结构

e.json文件

scheme.json文件

page.ts文件

调用示例

元素配置

e.json配置

scheme.json配置

方法

init

使用示例

bindEvent

使用示例

getScheme

返回值

使用示例

publishEvent

参数详解

使用示例

subscribeEvent

参数详解

返回值

使用示例

unSubscribeEvent

参数详解

使用示例

off

参数详解

使用示例

newVariable

参数详解

返回值

使用示例

newComponent

参数详解

返回值

使用示例

getUIContext

返回值

使用示例

getVariableValue

参数详解

返回值

使用示例

parseVariableInQ

参数详解

返回值

使用示例

refresh

使用示例

refreshPageVariable

使用示例

sendAiMessage

参数详解

使用示例

destroy

使用示例

属性

name

title

fullName

ePath

scheme

compInsList

compInsDict

isReady

app

aiConfig

extend

pagePerm

高级特性

页面继承

配置示例和使用示例

AI集成支持

动态布局调整