3.3.4 模型的继承

史, 昂 • 2024年5月23日 am9:48 • Oinone 7天入门到精通 • 1651 views

在我们的很多项目中，客户都是有个性化需求的，就像我们不能找到两件一模一样的东西，何况是企业的经营与管理思路，多少都会有差异。常规的方式只能去修改标准产品的逻辑来适配客户的需求。导致后续标品维护非常困难。而在介绍完这节以后是不是让你更加清晰认知到我们2.4.2【oinone独特性之每一个需求都可以是一个模块】一文中所表达的特性带来的好处呢？

一、继承方式

继承方式可以分为五种：

抽象基类ABSTRACT，只保存不希望为每个子模型重复键入的信息的模型，抽象基类模型不生成数据表存储数据，只供其他模型继承模型可继承域使用，抽象基类可以继承抽象基类。
扩展继承EXTENDS，子模型与父模型的数据表相同，子模型继承父模型的字段与函数。存储模型之间的继承默认为扩展继承。
多表继承MULTI_TABLE，父模型不变，子模型获得父模型的可继承域生成新的模型；父子模型不同表，子模型会建立与父模型的一对一关联关系字段（而不是交叉表），使用主键关联，同时子模型会通过一对一关联关系引用父模型的所有字段。多表继承父模型需要使用@Model.MultiTable来标识，子模型需要使用@Model.MultiTableInherited来标识。
代理继承PROXY，为原始模型创建代理，可以增删改查代理模型的实体数据，就像使用原始（非代理）模型一样。不同之处在于代理继承并不关注更改字段，可以更改代理中的元信息、函数和动作，而无需更改原始内容。一个代理模型必须仅能继承一个非抽象模型类。一个代理模型可以继承任意数量的没有定义任何模型字段的抽象模型类。一个代理模型也可以继承任意数量继承相同父类的代理模型。
临时继承TRANSIENT，将父模型作为传输模型使用，并可以添加传输字段。

二、继承约束

通用约束

对于扩展继承，查询的时候，父模型只能查询到父模型字段的数据，子模型可以查询出父模型及子模型的字段数据（因为派生关系所以子模型复刻了一份父模型的字段到子模型中）。

系统不会为抽象基类创建实际的数据库表，它们也没有默认的数据管理器，不能被实例化也无法直接保存，它们就是用来被继承的。抽象基类完全就是用来保存子模型们共有的内容部分，达到重用的目的。当它们被继承时，它们的字段会全部复制到子模型中。

系统不支持非jar包依赖模型的继承。

多表继承具有阻断效应，子模型无法继承多表继承父模型的存储父模型的字段，需要使用@Model.Advanced注解的inherited属性显示声明继承父模型的父模型。但是可以继承多表继承父模型的抽象父模型的字段。

可以使用@Model.Advanced的unInheritedFields和unInheritedFunctions属性设置不从父类继承的字段和函数。

跨模块继承约束

如果模型间的继承是跨模块继承，应该与模型所属模块建立依赖关系；如果模块间有互斥关系，则不允许建立模块依赖关系，同理模型间也不允许存在继承关系。

跨模块代理继承，对代理模型的非inJvm函数调用将使用远程调用方式；跨模块扩展（同表）继承将使用本地调用方式，如果是数据管理器函数，将直连数据源。

模型类型与继承约束

抽象模型可继承：抽象模型（Abstract）
临时模型可继承：抽象模型（Abstract）、传输模型（Transient）
存储模型可继承：抽象模型（Abstract）、存储模型（Store）、存储模型（多表，Multi-table Store），不可继承多个Store或Multi-table Store
多表存储模型（父）可继承：同扩展继承
多表存储模型（子）在继承单个Multi-table Store后可继承：抽象模型（Abstract）、存储模型（Store），不可继承多个Store
代理模型可继承：
- 抽象模型（Abstract），须搭配继承Store、Multi-table Store或Proxy
- 存储模型（Store），不可继承多个Store或Multi-table Store
- 存储模型（多表，Multi-table Store），不可继承多个Store或Multi-table Store
- 代理模型（Proxy），可继承多个Proxy，但多个父Proxy须继承自同一个Store或Multi-table Store，且不能再继承其他Store或Multi-table Store

同名字段以模型自身字段为有效配置，若模型自身不存在该字段，继承字段以第一个加载的字段为有效配置，所以在多重继承的情况下，未避免继承同名父模型字段的不确定性，在自身模型配置同名字段来确定生效配置。

三、继承的使用场景

模型的继承可以继承父模型的元信息、字段、数据管理器和函数

抽象基类解决公用字段问题
扩展继承解决开放封闭原则、跨模块扩展等问题
多表继承解决多型派生类字段差异问题和前端多存储模型组合外观问题
代理继承解决同一模型在不同场景下的多态问题（一表多态）
临时继承解决使用现有模型进行数据传输问题

举例，前端多存储模型组合外观问题可通过多表继承的子模型，并一对一关联到关联模型，同时使用排除继承字段去掉不需要继承的字段。子模型通过默认模型管理器提供查询功能给前端，默认查询会查询子模型数据列表并在列表行内根据一对一关系查出关联模型数据合并，关联模型数据展现形态在行内是平铺还是折叠，在详情是分组还是选项卡可以自定义view进行配置

扩展继承父子同表，模型在所有场景都有一致化的表现，意味着原模型被扩展成了新模型，父子模型的表名一致，模型编码不同，可覆盖父模型的模型管理器、数据排序规则、函数

多表继承父子多表，父子间有隐式一对一关系，即父子模型都增加了一对一关联关系字段，同时父模型的字段被引用到子模型，且引用字段为只读字段，意味着子模型不可以直接更改父模型的字段值，子模型不继承父模型的模型管理器、数据排序规则、函数，子模型拥有自己的默认模型管理器、数据排序规则、函数。多表继承具有阻断效应，子模型无法自动多表继承父模型的存储父模型，需要显式声明多表继承父模型的存储父模型。

代理继承代理模型继承并可覆盖父模型的模型管理器、数据排序规则、函数，同时可以使用排除继承字段和函数来达到不同场景不同视觉交互的效果。

图3-3-4-1 继承的使用场景

四、抽象基类（举例）

参考前文中3.3.2【模型的类型】一文中关于抽象模型的介绍

五、多表继承（举例）

场景设计如下

图3-3-4-2 多表继承设计场景

Step1 新建宠物品种、宠狗品种和萌猫品种模型

新建宠物品种模型，用@Model.MultiTable(typeField = "kind")，申明为可多表继承父类，typeField指定为kind字段

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;
import pro.shushi.pamirs.meta.base.IdModel;

@Model.MultiTable(typeField = "kind")
@Model.model(PetType.MODEL_MODEL)
@Model(displayName="品种",labelFields = {"name"})
public class PetType extends IdModel {

    public static final String MODEL_MODEL="demo.PetType";

    @Field(displayName = "品种名")
    private String name;

    @Field(displayName = "宠物分类")
    private String kind;
}

图3-3-4-3 多表继承示例代码

新建宠狗品种模型，用@Model.MultiTableInherited(type = PetDogType.KIND_DOG)，申明以多表继承模式继承PetType，覆盖kind字段(用defaultValue设置默认值，用invisible = true设置为前端不展示)，更多模块元数据以及模型字段元数据配置详见4.1.6【模型之元数据详解】一文

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;

@Model.MultiTableInherited(type = PetDogType.KIND_DOG)
@Model.model(PetDogType.MODEL_MODEL)
@Model(displayName="宠狗品种",labelFields = {"name"})
public class PetDogType extends PetType {

    public static final String MODEL_MODEL="demo.PetDogType";
    public static final String KIND_DOG="DOG";

    @Field(displayName = "宠物分类",defaultValue = PetDogType.KIND_DOG,invisible = true)
    private String kind;
}

图3-3-4-4 多表继承示例代码

新建萌猫品种模型，用@Model.MultiTableInherited(type = PetCatType.KIND_CAT)，申明以多表继承模式继承PetType，覆盖kind字段(用defaultValue设置默认值，用invisible = true设置为前端不展示)，并新增一个CatShapeEnum枚举类型的字段shape

package pro.shushi.pamirs.demo.api.enumeration;

import pro.shushi.pamirs.meta.annotation.Dict;
import pro.shushi.pamirs.meta.common.enmu.BaseEnum;

@Dict(dictionary = CatShapeEnum.DICTIONARY,displayName = "萌猫体型")
public class CatShapeEnum extends BaseEnum<CatShapeEnum,Integer> {

    public static final String DICTIONARY ="demo.CatShapeEnum";

    public final static CatShapeEnum BIG =create("BIG",1,"大","大");
    public final static CatShapeEnum SMALL =create("SMALL",2,"小","小");
}

图3-3-4-5 多表继承示例代码

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.demo.api.enumeration.CatShapeEnum;
import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;

@Model.MultiTableInherited(type = PetCatType.KIND_CAT)
@Model.model(PetCatType.MODEL_MODEL)
@Model(displayName="萌猫品种",labelFields = {"name"})
public class PetCatType extends PetType {

    public static final String MODEL_MODEL="demo.PetCatType";
    public static final String KIND_CAT="CAT";

    @Field(displayName = "宠物分类",defaultValue = PetCatType.KIND_CAT,invisible = true)
    private String kind;

    @Field.Enum
    @Field(displayName = "宠物体型")
    private CatShapeEnum shape;
}

图3-3-4-6 多表继承示例代码

Step2 配置菜单后，重启查看效果

为了更好帮助大家更好地理解，这里先把对应的菜单配置上，从页面来看看效果。下面以注解方式进行菜单配置，更多详见3.5.1【构建第一个Menu】一文。

package pro.shushi.pamirs.demo.core.init;

import pro.shushi.pamirs.boot.base.constants.ViewActionConstants;
import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute;
import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenu;
import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenus;
import pro.shushi.pamirs.demo.api.model.*;

@UxMenus
public class DemoMenus implements ViewActionConstants {
    @UxMenu("宠物品种")@UxRoute(PetType.MODEL_MODEL) class PetTypeMenu{}
    @UxMenu("萌猫品种")@UxRoute(PetCatType.MODEL_MODEL) class CatTypeMenu{}
    @UxMenu("宠狗品种")@UxRoute(PetDogType.MODEL_MODEL) class DogTypeMenu{}
}

图3-3-4-7 对应菜单配置

在宠狗品种中新增、修改、列表都隐藏了品种类型字段，并附上了默认值DOG

图3-3-4-8 宠狗品种新增页

图3-3-4-9 宠狗品种列表页

图3-3-4-10 宠狗品种数据表

在萌猫品种中新增、修改、列表都增加宠物体型枚举字段，并且隐藏了品种类型字段，并附上了默认值CAT

图3-3-4-11 萌猫品种新增页

图3-3-4-12 萌猫品种列表页

图3-3-4-13 萌猫品种数据表

Step3 为宠狗和萌猫品种模型实现默认读写扩展点，保证父子表数据同步

多表继承默认父子表是不同步的，不过oinone为每一个模型的默认数据管理器都提供的默认读写扩展点，我们可以主动利用这个特性来进行手动同步，更多扩展点知识详见3.4.3【函数相关特性】部分中的扩展点一文，会介绍除了利用系统默认提供的扩展点，还有如何自定义扩展。

PetCatType和PetDogType都需要实现扩展点来完成与父模型的同步，所以这里把相同逻辑做了提取AbstractPetTypeExtPoint

package pro.shushi.pamirs.demo.core.extpoint;

import pro.shushi.pamirs.core.common.CopyHelper;
import pro.shushi.pamirs.demo.api.model.PetType;
import pro.shushi.pamirs.framework.connectors.data.sql.Pops;
import pro.shushi.pamirs.meta.api.Models;
import pro.shushi.pamirs.meta.base.extpoint.DefaultReadWriteExtPoint;

import java.util.ArrayList;
import java.util.List;

public abstract class AbstractPetTypeExtPoint  extends DefaultReadWriteExtPoint {

    public T createBefore(T data) {
        data.construct();
        return data;
    }

    public T updateBefore(T data) {
        return data;
    }

    public T createAfter(T data) {
        CopyHelper.simpleReplace(data, new PetType()).create();
        return data;
    }

    public T updateAfter(T data) {
        CopyHelper.simpleReplace(data, new PetType()).updateById();
        return data;
    }

    public List deleteBefore(List data) {
        List petTypeIdList = new ArrayList();
        for(T item:data){
            petTypeIdList.add(item.getId());
        }
        Models.data().deleteByWrapper(Pops.lambdaQuery().from(PetType.MODEL_MODEL).in(PetType::getId,petTypeIdList));
        return data;
    }
}

图3-3-4-14 相同逻辑提取AbstractPetTypeExtPoint

PetCatTypeExtPoint继承AbstractPetTypeExtPoint类，并通过@Ext(PetCatType.class)申明扩展点所扩展函数所在类为PetCatType，并@ExtPoint.Implement申明对应扩展点的实现方法实例

package pro.shushi.pamirs.demo.core.extpoint;

import pro.shushi.pamirs.demo.api.model.PetCatType;
import pro.shushi.pamirs.meta.annotation.Ext;
import pro.shushi.pamirs.meta.annotation.ExtPoint;

import java.util.List;

@Ext(PetCatType.class)
public class PetCatTypeExtPoint extends AbstractPetTypeExtPoint{

    @Override
    @ExtPoint.Implement
    public PetCatType createBefore(PetCatType data) {
        return super.createBefore(data);
    }
    @Override
    @ExtPoint.Implement
    public PetCatType updateBefore(PetCatType data) {
        return super.updateBefore(data);
    }
    @Override
    @ExtPoint.Implement
    public PetCatType createAfter(PetCatType data) {
        return super.createAfter(data);
    }
    @Override
    @ExtPoint.Implement
    public PetCatType updateAfter(PetCatType data) {
        return super.updateAfter(data);
    }
    @Override
    @ExtPoint.Implement
    public List deleteBefore(List data) {
        return super.deleteBefore(data);
    }
}

图3-3-4-15 PetCatTypeExtPoint继承AbstractPetTypeExtPoint类

PetDogTypeExtPoint继承AbstractPetTypeExtPoint类，并通过@Ext(PetDogType.class)申明扩展点所扩展函数所在类为PetDogType，并@ExtPoint.Implement申明对应扩展点的实现方法实例

package pro.shushi.pamirs.demo.core.extpoint;

import pro.shushi.pamirs.demo.api.model.PetDogType;
import pro.shushi.pamirs.meta.annotation.Ext;
import pro.shushi.pamirs.meta.annotation.ExtPoint;

import java.util.List;

@Ext(PetDogType.class)
public class PetDogTypeExtPoint extends AbstractPetTypeExtPoint{

    @Override
    @ExtPoint.Implement
    public PetDogType createBefore(PetDogType data) {
        return super.createBefore(data);
    }
    @Override
    @ExtPoint.Implement
    public PetDogType updateBefore(PetDogType data) {
        return super.updateBefore(data);
    }
    @Override
    @ExtPoint.Implement
    public PetDogType createAfter(PetDogType data) {
        return super.createAfter(data);
    }
    @Override
    @ExtPoint.Implement
    public PetDogType updateAfter(PetDogType data) {
        return super.updateAfter(data);
    }
    @Override
    @ExtPoint.Implement
    public List deleteBefore(List data) {
        return super.deleteBefore(data);
    }
}

图3-3-4-16 PetDogTypeExtPoint继承AbstractPetTypeExtPoint类

Step4 重启查看效果：在萌猫品种和宠狗品种下新增、修改、删除，则会在宠物品种下看到对应记录变化

图3-3-4-17 父模型宠物品种列表页

图3-3-4-18 父模型宠物品种数据表

六、扩展继承（举例）

场景设计（如下图3-3-55所示）

图3-3-4-19 扩展继承场景设计

Step1 新建宠物商品、宠狗商品和萌猫商品模型，并配置菜单

新建宠物商品模型为普通存储模型，用扩展继承父类设置公共字段如：店铺，品种等，注意type字段类型为PetType

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;

import java.math.BigDecimal;

@Model.model(PetItem.MODEL_MODEL)
@Model(displayName = "宠物商品",summary="宠物商品")
public class PetItem  extends AbstractDemoCodeModel{

    public static final String MODEL_MODEL="demo.PetItem";
    @Field(displayName = "商品名称",required = true)
    private String itemName;

    @Field(displayName = "商品价格",required = true)
    private BigDecimal price;

    @Field(displayName = "店铺",required = true)
    private PetShop shop;

    @Field(displayName = "品种")
    @Field.many2one
    private PetType type;
}

图3-3-4-20 新建宠物商品模型为普通存储模型

新建宠狗商品模型继承宠物商品模型，注意这里把type字段类型覆盖为PetType的子类PetDogType，并新增原产地字段provenance

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;

@Model.model(PetDogItem.MODEL_MODEL)
@Model(displayName = "宠狗商品",summary="宠狗商品")
public class PetDogItem extends PetItem{

    public static final String MODEL_MODEL="demo.PetDogItem";

    @Field(displayName = "品种")
    @Field.many2one
    private PetDogType type;

    @Field(displayName = "原产地")
    private String provenance;
}

图3-3-4-21 新建宠狗商品模型继承宠物商品模型

新建萌猫商品模型继承宠物商品模型，注意这里把type字段类型覆盖为PetType的子类PetCatType。

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;

@Model.model(PetCatItem.MODEL_MODEL)
@Model(displayName = "萌猫商品",summary="萌猫商品")
public class PetCatItem extends PetItem{
    public static final String MODEL_MODEL="demo.PetCatItem";

    @Field(displayName = "品种")
    @Field.many2one
    private PetCatType type;
}

图3-3-4-22 新建萌猫商品模型继承宠物商品模型

为了更好帮助大家更好地理解，这里先把对应的菜单配置上，从页面来看看效果。下面以注解方式进行菜单配置，更多详见3.5.1【构建第一个Menu】一文。

package pro.shushi.pamirs.demo.core.init;

import pro.shushi.pamirs.boot.base.constants.ViewActionConstants;
import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute;
import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenu;
import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenus;
import pro.shushi.pamirs.demo.api.model.*;

@UxMenus
public class DemoMenus implements ViewActionConstants {
    @UxMenu("商品管理")@UxRoute(PetItem.MODEL_MODEL) class ItemMenu{}
    @UxMenu("宠狗商品")@UxRoute(PetDogItem.MODEL_MODEL) class DogItemMenu{}
    @UxMenu("萌猫商品")@UxRoute(PetCatItem.MODEL_MODEL) class CatItemMenu{}
    @UxMenu("宠物品种")@UxRoute(PetType.MODEL_MODEL) class PetTypeMenu{}
    @UxMenu("萌猫品种")@UxRoute(PetCatType.MODEL_MODEL) class CatTypeMenu{}
    @UxMenu("宠狗品种")@UxRoute(PetDogType.MODEL_MODEL) class DogTypeMenu{}
}

图3-3-4-23 以注解方式进行菜单配置

至此模型就建完了，还是很简单的吧

Step2 分别新建三条宠物商品、宠狗商品和萌猫商品记录，查看效果

父模型宠物商品的商品管理可以看到品类中可选柴犬、加菲猫，数据来源是品种的父模型PetType，店铺下拉框展示为"-"，因为店铺模型没有配置label字段，可以在店铺模型的注解上增加“@Model(displayName = "宠物店铺",summary="宠物店铺",labelFields = {"shopName"})”，即可解决。这里先选择第一个往下执行

图3-3-4-24 宠物商品管理

父模型宠狗商品的商品管理可以看到品类中可选柴犬，数据来源是品种的子模型PetDogType，而且新增源产地字段；

图3-3-4-25 父模型宠狗商品管理

父模型萌猫商品的商品管理可以看到品类中可选加菲猫，数据来源是品种的子模型PetCatType；

图3-3-4-26 父模型萌猫商品管理

Step3 分别观察宠物商品、宠狗商品和萌猫商品的列表页，我们会发现数据记录都是三条，但是展示字段会随着模型不同而有差异

父页面在品种一列中可以显示所有品种名称

图3-3-4-27 父页面在品种一列中可以显示所有品种名称

宠狗页面在品种一列中只能显示PetDogType的品种名称、但多了原产地字段

图3-3-4-28 宠狗页面品种列展示

萌猫页面在品种一列中只能显示PetCatType的品种名称

图3-3-4-29 萌猫页面品种列中只展示PetCatType的品种名称

对应的数据库表：数据都在一张记录表中，新增了原产地字段

图3-3-4-30 对应数据库表

Step4 顺带优化下宠物店铺的展示Labels

给PetShop增加@Model(labelFields ={"shopName"} )注解，labelFields是为模型的“数据标题, 用于前端展示”，其默认值为name，但PetShop没有name字段，所以我们列表上展示不出来。更多元数据见4.1.6【模型之元数据详解】一文；

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;

import java.sql.Time;

@Model.model(PetShop.MODEL_MODEL)
@Model(displayName = "宠物店铺",summary="宠物店铺",labelFields ={"shopName"} )
public class PetShop extends AbstractDemoIdModel {
    public static final String MODEL_MODEL="demo.PetShop";

    @Field(displayName = "店铺名称",required = true)
    private String shopName;

    @Field(displayName = "开店时间",required = true)
    private Time openTime;

    @Field(displayName = "闭店时间",required = true)
    private Time closeTime;
}

图3-3-4-31 给PetShop增加@Model(labelFields ={shopName} )注解

重启查看效果，店铺字段可以展示出来

图3-3-4-32 店铺字段可展示

Step5 思考在扩展继承模式下数据隔离问题

多表继承需要自己搞定父、子模型的数据同步问题，同表继承则需要自己搞定数据隔离问题。我们可以重写queryPage这个Function，如我们在3.3.2【模型类型】一文中介绍“代理模型类型”的部分时，涉及的PetShopProxyAction就覆盖了queryPage。这里举例PetCatItem的queryPage覆盖，PetDogItem留给大家自行练习

给PetItem显示增加一个typeId字段，方便在PetCatItemAction中用于过滤条件使用。为什么说显示增加呢？因为type字段是一个many2one的字段在没有配置@Field.Relation的情况下，oinone会为PetItem模型自动推断出一个typeId字段去关联PetType模型的Id。@Field.Relation的relationFields为本模型的关联字段，referenceFields为目标模型关联字段。如符合推断规范可以不配置@Field.Relation，就如这个场景配不配效果是一样的。还是那句话“更多元数据详见4.1.6【模型之元数据详解】一文”；

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;

import java.math.BigDecimal;

@Model.model(PetItem.MODEL_MODEL)
@Model(displayName = "宠物商品",summary="宠物商品")
public class PetItem  extends AbstractDemoCodeModel{
    public static final String MODEL_MODEL="demo.PetItem";

    @Field(displayName = "商品名称",required = true)
    private String itemName;

    @Field(displayName = "商品价格",required = true)
    private BigDecimal price;

    @Field(displayName = "店铺",required = true)
    private PetShop shop;

    @Field(displayName = "品种")
    @Field.many2one
    @Field.Relation(relationFields = {"typeId"},referenceFields = {"id"})
    private PetType type;

    @Field(displayName = "品种类型",invisible = true)
    private Long typeId;
}

图3-3-4-33 给PetItem显示增加一个typeId字段

覆盖PetCatItem名为“queryFilters”的函数，增加typeId的过滤条件为PetCatType表对应的Id列表，则针对PetCatItem的所有查询都会自动加上“queryFilters”的函数返回的过滤条件

package pro.shushi.pamirs.demo.core.action;

import org.springframework.stereotype.Component;
import org.springframework.util.CollectionUtils;
import pro.shushi.pamirs.core.common.behavior.impl.DataStatusBehavior;
import pro.shushi.pamirs.demo.api.model.PetCatItem;
import pro.shushi.pamirs.demo.api.model.PetCatType;
import pro.shushi.pamirs.framework.connectors.data.sql.Pops;
import pro.shushi.pamirs.meta.annotation.Action;
import pro.shushi.pamirs.meta.annotation.Function;
import pro.shushi.pamirs.meta.annotation.Model;
import pro.shushi.pamirs.meta.api.dto.condition.Pagination;
import pro.shushi.pamirs.meta.api.dto.wrapper.IWrapper;
import pro.shushi.pamirs.meta.constant.FunctionConstants;
import pro.shushi.pamirs.meta.enmu.FunctionOpenEnum;
import pro.shushi.pamirs.meta.enmu.FunctionTypeEnum;

import java.util.List;
import java.util.stream.Collectors;

@Model.model(PetCatItem.MODEL_MODEL)
@Component
public class PetCatItemAction extends DataStatusBehavior {

    @Override
    protected PetCatItem fetchData(PetCatItem data) {
        return data.queryById();
    }
    @Action(displayName = "启用")
    public PetCatItem dataStatusEnable(PetCatItem data){
        data = super.dataStatusEnable(data);
        data.updateById();
        return data;
    }

    @Function.Advanced(displayName = "查询模型数据的默认过滤条件", type = FunctionTypeEnum.QUERY, managed = true)
    @Function(openLevel = {LOCAL})
    public String queryFilters() {
        StringBuilder sqlWhereCondition = new StringBuilder();
        List typeList = new PetCatType().queryList();
        if(!CollectionUtils.isEmpty(typeList)){
//          sqlWhereCondition.append("type_id");
            sqlWhereCondition.append(PStringUtils.fieldName2Column(LambdaUtil.fetchFieldName(PetCatItem::getTypeId)));
            sqlWhereCondition.append(StringUtils.SPACE).append(SqlConstants.IN).append(CharacterConstants.LEFT_BRACKET);
            for(PetCatType petCatType: typeList){
                sqlWhereCondition.append(petCatType.getId()).append(CharacterConstants.SEPARATOR_COMMA);
            }
            sqlWhereCondition.deleteCharAt(sqlWhereCondition.lastIndexOf(CharacterConstants.SEPARATOR_COMMA));
            sqlWhereCondition.append(StringUtils.SPACE).append(CharacterConstants.RIGHT_BRACKET);
        }
        return sqlWhereCondition.toString();
    }
}

图3-3-4-34 覆盖函数的代码示例

重启查看效果，萌猫商品只能看到PetCatType对应的数据记录了，赶紧自己动手试试PetDogItem的改造吧

图3-3-4-35 重启查看效果

七、代理继承（举例）

代理模型在3.3.2【模型的类型】一文中有介绍过，代理模型看名字就知道其本身是通过继承方式代理另一个存储模型，这里不过多介绍。我们来尝试一下它继承的特殊性“一个代理模型也可以继承任意数量继承相同父类的代理模型”

场景设计（如下图3-3-72所示）

图3-3-4-36 代理继承场景设计

Step1 新建宠物店铺代理模型A和宠物店铺代理模型B，同时修改PetItem

新建宠物店铺代理模型A申明为代理模型，新增一个one2many字段items，用@Field.Relation申明关联字段

package pro.shushi.pamirs.demo.api.proxy;

import pro.shushi.pamirs.demo.api.model.PetItem;
import pro.shushi.pamirs.demo.api.model.PetShop;
import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;
import pro.shushi.pamirs.meta.enmu.ModelTypeEnum;
import pro.shushi.pamirs.user.api.model.PamirsUser;

import java.util.List;

@Model.model(PetShopProxyA.MODEL_MODEL)
@Model.Advanced(type = ModelTypeEnum.PROXY)
@Model(displayName = "宠物店铺代理模型A",summary="宠物店铺代理模型A")
public class PetShopProxyA extends PetShop {
    public static final String MODEL_MODEL="demo.PetShopProxyA";

    @Field.one2many
    @Field(displayName = "商品列表")
    @Field.Relation(relationFields = {"id"},referenceFields = {"shopId"})
    private List items;
}

图3-3-4-37 新建宠物店铺代理模型A申明为代理模型

新建宠物店铺代理模型B申明为代理模型，用 @Model.Advanced(inherited ={PetShopProxy.MODEL_MODEL,PetShopProxyA.MODEL_MODEL})声明继承多个同源代理模型,并且新增一个one2many字段catItems用@Field.Relation申明关联字段

package pro.shushi.pamirs.demo.api.proxy;

import pro.shushi.pamirs.demo.api.model.PetCatItem;
import pro.shushi.pamirs.demo.api.model.PetShop;
import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;
import pro.shushi.pamirs.meta.enmu.ModelTypeEnum;

import java.util.List;

@Model.model(PetShopProxyB.MODEL_MODEL)
@Model.Advanced(type = ModelTypeEnum.PROXY,inherited ={PetShopProxy.MODEL_MODEL,PetShopProxyA.MODEL_MODEL} )
@Model(displayName = "宠物店铺代理模型B",summary="宠物店铺代理模型B")
public class PetShopProxyB extends PetShop {

    public static final String MODEL_MODEL="demo.PetShopProxyB";

    @Field.one2many
    @Field(displayName = "萌猫商品列表")
    @Field.Relation(relationFields = {"id"},referenceFields = {"shopId"})
    private List catItems;
}

图3-3-4-38 新建宠物店铺代理模型B申明为代理模型

修改PetItem增加一个labelFields={"itemName"}注解，给PetItem显示增加一个shopId字段方便，在Service中用于过滤条件使用。

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;

import java.math.BigDecimal;

@Model.model(PetItem.MODEL_MODEL)
@Model(displayName = "宠物商品",summary="宠物商品",labelFields={"itemName"})
public class PetItem  extends AbstractDemoCodeModel{

    public static final String MODEL_MODEL="demo.PetItem";
    @Field(displayName = "商品名称",required = true)
    private String itemName;

    @Field(displayName = "商品价格",required = true)
    private BigDecimal price;

    @Field(displayName = "店铺",required = true)
    private PetShop shop;

    @Field(displayName="店铺id",invisible = true)
    private Long shopId;

    @Field(displayName = "品种")
    @Field.many2one
    @Field.Relation(relationFields = {"typeId"},referenceFields = {"id"})
    private PetType type;

    @Field(displayName = "品种类型",invisible = true)
    private Long typeId;
}

图3-3-4-39 PetItem代码修改示例

Step2 覆盖PetShopProxyB的queryPage和queryOne函数

PetShopProxyB的queryPage和queryOne都查catItems\creater\items三个字段

package pro.shushi.pamirs.demo.core.action;

import org.springframework.stereotype.Component;
import org.springframework.util.CollectionUtils;
import pro.shushi.pamirs.core.common.behavior.impl.DataStatusBehavior;
import pro.shushi.pamirs.demo.api.model.PetShop;
import pro.shushi.pamirs.demo.api.proxy.PetShopProxy;
import pro.shushi.pamirs.demo.api.proxy.PetShopProxyB;
import pro.shushi.pamirs.framework.faas.utils.ArgUtils;
import pro.shushi.pamirs.meta.annotation.Action;
import pro.shushi.pamirs.meta.annotation.Function;
import pro.shushi.pamirs.meta.annotation.Model;
import pro.shushi.pamirs.meta.api.dto.condition.Pagination;
import pro.shushi.pamirs.meta.api.dto.wrapper.IWrapper;
import pro.shushi.pamirs.meta.constant.FunctionConstants;
import pro.shushi.pamirs.meta.enmu.FunctionOpenEnum;
import pro.shushi.pamirs.meta.enmu.FunctionTypeEnum;

@Model.model(PetShopProxyB.MODEL_MODEL)
@Component
public class PetShopProxyBAction  {

    @Function.Advanced(type= FunctionTypeEnum.QUERY)
    @Function.fun(FunctionConstants.queryPage)
    @Function(openLevel = {FunctionOpenEnum.API})
    public Pagination queryPage(Pagination page, IWrapper queryWrapper){
        Pagination result = new PetShopProxy().queryPage(page,queryWrapper);
        if(!CollectionUtils.isEmpty(result.getContent())) {
            //自身继承【宠物店铺】后扩展的字段catItems
            new PetShopProxyB().listFieldQuery(result.getContent(),PetShopProxyB::getCatItems);
            //继承【宠物店铺代理模型】而来的字段creater，java语言限制【宠物店铺代理模型B】没有getCreate()方法
            new PetShopProxyB().listFieldQuery(result.getContent(),"creater");
            //继承【宠物店铺代理模型A】而来的字段items，java语言限制【宠物店铺代理模型B】没有getItems()方法
            new PetShopProxyB().listFieldQuery(result.getContent(),"items");
        }
        return result;
    }
    @Function.Advanced(type= FunctionTypeEnum.QUERY)
    @Function.fun(FunctionConstants.queryByEntity)
    @Function(openLevel = {FunctionOpenEnum.API})
    public PetShopProxyB queryOne(PetShopProxyB query){
        query = query.queryById();
        //自身继承【宠物店铺】后扩展的字段catItems
        query.fieldQuery(PetShopProxyB::getCatItems);
        //继承【宠物店铺代理模型】而来的字段creater，java语言限制【宠物店铺代理模型B】没有getCreate()方法
        query.fieldQuery("creater");
        //继承【宠物店铺代理模型A】而来的字段items，java语言限制【宠物店铺代理模型B】没有getItems()方法
        query.fieldQuery("items");
        return query;
    }
}

图3-3-4-40 函数覆盖代码示例

Step3 配置菜单，并重启看效果

配置菜单：请参考本节前面介绍自行增加三个菜单商店管理、商店管理A、商店管理B分别对应宠物店铺代理模型、宠物店铺代理模型A、宠物店铺代理模型B的管理入口
宠物店铺代理模型覆盖了queryPage方法但没有覆盖queryOne方法，所以列表页有显示新增字段创建者，但详情页没有。具体详见3.3.2【模型的类型】一文中的“代理模型”介绍部分；

图3-3-4-41 宠物店铺代理模型的列表页

图3-3-4-42 宠物店铺代理模型的详情页

宠物店铺代理模型A只增加了一个商品列表字段，没有覆盖对应query相关方法，所以列表页有这个字段但没有值；

图3-3-4-43 宠物店铺代理模型A的列表页

宠物店铺代理模型B因为同源多表继承了宠物店铺代理模型和宠物店铺代理模型A所以它拥有商品列表、萌猫商品列表、创建者三个字段，并且同时覆盖queryPage和queryOne函数，所以列表和详情都有值。

图3-3-4-44 宠物店铺代理模型B的列表页

图3-3-4-45 宠物店铺代理模型B的详情页

八、临时继承（举例）

参考前文3.3.2【模型的类型】一文中对传输模型的介绍，差别在于一个继承抽象基类，一个继承其他模型类型，不管什么类型都只是复用父类的字段，自己还是传输模型

九、总结

Oinone社区作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9235.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Oinone 7天从入门到精通

Like (1)

史, 昂数式管理员

0 0

3.3.5 模型编码生成器

Previous 2024年5月23日 am9:42

3.3.3 模型的数据管理器

Next 2024年5月23日 am9:49

Oinone 7天入门到精通

4.1.18 框架之网关协议-Variables变量

我们在应用开发过程有一种特殊情况在后端逻辑编写的时候需要知道请求的发起入口，平台利用GQL协议中的Variables属性来传递信息，本文就介绍如何获取。一、前端附带额外变量属性名类型说明 scene String 菜单入口表4-1-18-1 前端附带额外变量图4-1-18-1 variables信息中的scene 二、后端如何接收variables信息通过PamirsSession.getRequestVariables()可以得到PamirsRequestVariables对象。三、第一个variable（举例） Step1 修改PetTalentAction，获取得到前端传递的Variables package pro.shushi.pamirs.demo.core.action; ……类引用 @Model.model(PetTalent.MODEL_MODEL) @Component public class PetTalentAction { ……其他代码 @Function.Advanced(type= FunctionTypeEnum.QUERY) @Function.fun(FunctionConstants.queryPage) @Function(openLevel = {FunctionOpenEnum.API}) public Pagination<PetTalent> queryPage(Pagination<PetTalent> page, IWrapper<PetTalent> queryWrapper){ String scene = (String)PamirsSession.getRequestVariables().getVariables().get("scene"); System.out.println("scene: "+ scene); ……其他代码 } ……其他代码 } 图4-1-18-2 修改PetTalentAction Step2 重启验证点击宠物达人不同菜单入口，查看效果图4-1-18-3 示例效果（一）图4-1-18-4 示例效果（二）

史, 昂
2024年5月23日
1.4K000
Oinone 7天入门到精通

报表发布主流程

1. 主业务流程图 2. 主业务流程操作图解创建图表—创建报表/数据大屏—发布图表/报表—前端业务系统可引用 2.1 创建图表分组 1）操作流程：创建图表分组 2）操作路径：数据可视化-图表-创建图表分组 3）点击搜索框后的「+」创建一级分组，输入一级分组名称后，点击一级分组后的「+」创建二级分组，输入二级分组名称后，此时分组创建完成，可以在二级分组下创建图表 2.2 创建图表 1）操作流程：选择图表二级分组-创建图表 2）操作路径：数据可视化-图表-二级分组-创建图表 3）鼠标移动至需要创建图表的二级分组上，出现「+」，点击图标后弹出“创建图表”弹窗，需要填写图表标题、模型、方法； a. 图表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； b. 模型：需要选择来源数据对应的模型； c. 方法：选择模型后需要选择方法，方法是用来提取模型数据的逻辑； 4）选择成功后进图表设计页面（详见图表-图表设计页面），设计完成后点击保存，图表创建成功 2.3 创建报表分组 1）操作流程：创建报表分组 2）操作路径：数据可视化-报表-创建报表分组 3）点击搜索框后的「+」创建一级分组，输入一级分组名称后，点击一级分组后的「+」创建二级分组，输入二级分组名称后，此时分组创建完成，可以在二级分组下创建报表 2.4 创建数据大屏分组 1）操作流程：创建报表分组 2）操作路径：数据可视化-报表-创建报表分组 3）点击搜索框后的「+」创建一级分组，输入一级分组名称后，点击一级分组后的「+」创建二级分组，输入二级分组名称后，此时分组创建完成，可以在二级分组下创建报表 2.5 创建报表 1）操作流程：选择报表二级分组-创建报表 2）操作路径：数据可视化-报表-二级分组-创建报表 3）鼠标移动至需要创建报表的二级分组上，出现「+」，点击图标后=需要填写报表标题； a报表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； 4）创建后可以选择报表需要展示的图表 2.6 为报表选择图表 1）操作流程：选择报表-为报表选择图表 2）操作路径：数据可视化-图表-二级分组-报表-选择图表 3）选择单个未发布或者已发布但没有被隐藏的报表，点击【选择图表】，弹出“选择图表”弹窗，对该报表需要展示的图表进行选择 a需要选择图表的一级分组后才能选择图表； b可以多选图表，选择的图表只能是已选一级分组下的未隐藏的未被选择的图表；选择一个二级分组时，默认该二级分组下的图表会全部被选中，图表会按照选中的顺序展示在报表列表； 4）选择图表后，报表信息保持展示图表的最新效果；如果图表更新了，但是报表没有发布最新，则报表在前端展示的仍为最近发布的版本； 5）如果图表中存在超过一行的图内筛选项，则在报表处原始的图表尺寸只能查看一行图内筛选项，需要根据图表在报表处的等比拖动效果展示更多的图内筛选项 2.7 创建数据大屏 1）操作流程：选择数据大屏二级分组-创建数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-创建 3）鼠标移动至需要创建数据大屏的二级分组上，出现「+」，点击图标后进入数据大屏设计页面； a. 选择图表组件组合成数据大屏，还有其他诸如时间、图片等组件可供选择； b. 数据大屏标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； 4）选择完成后可以保存，则创建数据大屏成功 2.8 发布图表/报表/数据大屏 1）操作流程：选择图表/报表-发布图表/报表 2）操作路径：数据可视化-图表/报表/数据大屏-二级分组-图表名称/报表名称/数据大屏名称-发布 3）选择单个未发布且没有被隐藏的图表/报表/数据大屏，点击【发布】按钮，图表/报表发布后可以被前端引用，数据大屏可被屏幕演示，图表/报表/数据大屏状态变为已发布，展示最近发布时间； a. 如果图表发布后有更新内容，会展示的更新类型：更新图表信息/更新图表内容； b. 如果报表发布后有更新内容，会展示的更新类型：更新报表信息/更新图表内容/选择图表/移除图表； c. 如果数据大屏发布后有更新内容，会展示的更新类型：更新数据大屏信息/更新数据大屏内容； 4）发布后可以修改 2.9更新发布图表/报表/数据大屏 1）操作流程：选择图表/报表-更新发布图表/报表 2）操作路径：数据可视化-图表/报表/数据大屏-二级分组-图表名称/报表名称/数据大屏名称-更新发布图表/报表/数据大屏 3）选择单个已发布且没有被隐藏的图表/报表/数据大屏，并且该图表/报表/数据大屏在上次发布后有所更新，可以点击【更新发布】按钮，将最新的图表/报表内容发布至业务系统，业务系统引用的图表/报表为最新内容，屏幕展示的数据大屏是最新的大屏内容； 4）如果更新了内容，但未点击更新发布，则前端业务系统查看的图表/报表仍为最近发布的内容，屏幕展示的数据大屏仍是最近发布的内容

史, 昂
2024年6月20日
1.7K000
陈浩

自2017年中国推进数字建设以来，数字经济规模持续增长，“十四五”规划和2035远景目标纲要中明确强调企业和政府需大力推动数字化转型，中国正在迈进一个崭新的数字经济时代。在这个过程中，软件已经从工具变成信息化的基础设施，如何有效应对该变化所带来的一系列新的核心技术挑战，是整个软件行业发展遇到的另一难题。我认为，开源创新是解决这些难题的有效手段之一，也是未来软件发展的重要方向。如果说，数字化转型是时代趋势，那么开源创新也已成为时代主流。十四五规划纲要首提开源，2021年11月工信部印发《十四五软件和信息技术服务业发展规划》中提到开源重塑软件发展新生态，并将开源重塑软件发展新生态作为十四五期间我国软件产业的四大发展形势之一进行重点阐述。支持国产化开源创新体系发展，建设自己的开源社区和开源平台，其所具有的大众协同、开放共享、持续创新等特点，可有效推动各行业自主可控的数字化转型。 Oinone所倡导的开源理念和生态共建，与国家开源战略不谋而合：将开源作为一种合作手段，通过完善社区注重开源治理，吸引更多的企业和个体参与其中。湖南大学作为首批国家示范性软件学院的双一流建设高校，一直致力于推进和引导国产化开源软件体系的建设，并为此开展多种形式的产学研研究和实践。基于Oinone微服务分布式的设计理念和面向生态的开源特性，湖南大学结合自身在大数据分布式存储、多元异构数据汇聚融合和大数据智能分析等方面的研究成果，与Oinone展开了深度的技术创新合作，并在多个大中型企业数字化应用和数字政府应用中取得了良好的效果。随着Oinone的开源，相信能激发更多的开发者参与到国产软件建设中，通过开源模式实现更广泛参与方的共享、共创、共生、共赢，构建价值驱动的数字创新生态平台，为我国数字经济发展贡献科技力量。湖南大学教授：陈浩

史, 昂
Oinone 7天入门到精通 2024年5月23日
2.0K000
Oinone 7天入门到精通

3.5.7.7 自定义主题

主题是什么 Oinone框架提供了强大的主题定制功能，使得平台可以轻松适应和遵循公司的品牌和UI规范。通过自定义主题，你可以调整颜色、间距、圆角等视觉元素，从而使Oinone更好地融入到特定行业的需求和公司标准中。以下是关于如何定制主题的关键点和步骤：关键点使用CSS变量： Oinone使用CSS变量 (Css Var) 来实现主题定制。 CSS变量提供了一种高效且灵活的方式来定义和使用样式。全面定制：可以定制的范围广泛，包括颜色、字体、间距、边框、圆角等。通过调整这些元素，可以确保UI符合公司的视觉标准。定制步骤了解CSS变量：首先，了解如何在CSS中使用变量。查看Oinone现有的CSS变量列表，以了解哪些样式可以被定制。定义公司的UI规范：根据公司的品牌指南，定义一套UI规范。包括颜色方案、字体样式、元素尺寸等。应用自定义样式：在Oinone的样式表中，使用定义的CSS变量来覆盖默认样式。确保在适当的地方应用这些自定义样式。作用场景 Oinone平台提供了灵活的主题定制选项，包括内置的六套主题样式，涵盖深色和浅色模式以及不同的尺寸选项（大、中、小）。这些主题可以适应不同的业务需求和项目特性，同时提供了定制工具，方便用户根据公司的UI规范进行调整。下面是主题作用场景的详细说明：主题选项内置主题：六套主题：包括深色和浅色模式，以及大、中、小尺寸。用户可以通过系统设置功能轻松切换不同的主题。可定制性：提供CSS变量的JSON文件，方便用户下载和修改。允许用户根据具体需求定制颜色、字体、间距等样式变量。应用场景公司UI规范对齐：首先根据公司的UI规范调整一份基础主题。这有助于确保平台的外观与公司品牌一致。项目和业务适应性：在不同项目或业务场景中，可以基于公司UI规范进行微调。这提供了项目特定的灵活性，同时保持整体的品牌一致性。实施建议初始设置：初始时，选择一个接近公司标准的内置主题作为起点。通过系统设置功能体验不同的主题效果。定制和微调：下载并修改CSS变量的JSON文件，以符合公司的UI标准。对于特定项目或业务场景，根据需要进行进一步的微调。自定义主题自定义主题功能允许在Oinone平台上创建和应用独特的视觉风格，以适应特定的业务需求和品牌标准。以下是自定义主题的步骤和示例，用于指导如何在Oinone平台上实现这一功能。示例工程目录以下是需关注的工程目录示例，main.ts更新导入./theme：图3-5-7-24 自定义主题目录示例步骤 1: 创建主题定义主题变量：创建一个包含主题样式变量的JavaScript文件。例如，可以定义一个名为OinoneTheme的新主题，并设置相应的CSS变量。图3-5-7-24 自定义主题代码示例注册主题：使用registerTheme函数注册自定义主题。这个函数将新主题添加到可用主题列表中。步骤 2: 应用主题在主入口文件中引用：在main.ts文件中引入自定义主题，并在VueOioProvider配置中指定。图3-5-7-24 自定义主题应用配置示例效果图3-5-7-24 自定义黑色主题效果示例主题叠加： Oinone支持多个主题变量同时存在，后导入的主题变量会覆盖前面导入的。内置主题 Oinone平台内置了以下六个主题变量，你可以在自定义主题时参考或扩展它们： ‘default – large’ ‘default – medium’ ‘default – small’ ‘dark – large’ ‘dark – medium’ ‘dark – small’ 扩展变量在定义主题变量时，根据业务需求可以添加不存在的变量，作为变量的扩展。示例 { "custom-color": "#新的辅助颜色", "button-padding": "10px 20px", // …其他自定义变量 } 图3 – 5 – 7 – 24 扩展主题变量查找主题变量在Oinone平台上，通过DOM调试器查找主题变量是一种有效的方式，允许用户定位并获取相应组件的主题变量。以下是执行这一步骤的详细说明：步骤：使用DOM调试器：在浏览器中打开Oinone平台，进入需要查找主题变量的页面。使用浏览器的开发者工具或DOM调试器（通常可通过右键点击页面元素并选择“检查”打开）。选择目标组件：在DOM调试器中，通过选择器工具或直接点击页面上的组件，选中你想要查找主题变量的目标组件。查看样式和主题变量：在选中的组件上，浏览开发者工具中的“样式”或“计算”选项卡。可以通过查看样式表中的相关样式规则，找到组件所使用的主题变量。 4标识主题变量：主题变量通常以 –oio 为前缀。标识出你感兴趣的主题变量，记录下变量名和当前的取值。示例：假设你想查找某个按钮组件的主题变量，可以通过以下步骤：在DOM调试器中选中按钮组件。在“样式”或“计算”选项卡中查看相关样式规则。找到以 –oio 为前缀的主题变量，如 –oio-button-pirmary-background。记录该主题变量的取值，例如 #3498db。图3-5-7-24 DOM调试器查询主题变量

史, 昂
2024年5月23日
1.5K000
7.3 实战训练（全员营销为例）

史, 昂
Oinone 7天入门到精通 2024年5月23日
1.2K000

Please Login to Comment