3.2 Oinone以模块为组织

模块(module):是按业务领域划分和管理的最小单元,是一组功能、界面的集合。

带大家快速认识下如何构建一个oinone的模块并启动它。我会从以下几个维度去介绍模块的构建与启动方式、模块详解。让大家直观且全方位地了解oinone的模块所包含的内容

  1. 构建第一个Module

  2. 启动前端工程

  3. 应用中心

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

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

(1)
史, 昂的头像史, 昂数式管理员
上一篇 2024年5月23日 am9:55
下一篇 2024年5月23日 am9:57

相关推荐

  • 模型

    1. 模型介绍 Oinone低代码设计器是采用模型驱动的方式来设计应用,数据、数据都在模型,在模型设计器的模型管理模块,通过可视化配置的方式为用户提供快速设计模型的功能。 模型是对应用中所需要描述的实体进行必要的简化,并用适当的变现形式或规则把它的主要特征描述出来所得到的系统模仿品。模型由元信息、字段、数据管理器和自定义函数构成。 2. 操作模式 为了满足有无研发背景知识的不同用户使用需求,在模型设计器中,支持切换操作模式,包含专家模式和经典模式。经典模式功能基础且完善,操作交互简单易理解,适用于非研发用户;专家模式下模型的设计能力更高,有经典模式下的所有功能,相比于经典模式,功能更多,适用于一般有研发知识基础的用户。 比如在添加模型时,经典模式下可以创建的模型类型有:存储模型、传输模型,专家模式下,在此基础上还可以创建抽象模型和代理模型。 3. 分组管理 当模型过多时,可以自定义添加15个分组,将模型进行归类管理。点击「全部」展开所有分组,展开后,分组右侧可以管理分组。 3.1 管理分组 展开分组后,点击「管理分组」,出现弹窗,在弹窗中可以修改分组名称、添加分组、删除分组。 3.2 添加分组 操作「+模型分组」,可以直接输入分组名称后回车以添加一个新分组,或快捷选择其他应用使用的分组。最多添加15个分组。 3.3 修改分组 双击分组标签,即可对已有分组进行名称的修改。若分组在其他应用也使用,则在其他应用内,该分组名称也同步变化。 3.4 删除分组 点击分组标签右侧的“X”按钮,即为删除分组,但分组下如果有模型或者分组有被其他应用使用,则分组无法删除。 4. 模型管理 4.1 管理模式 在模型管理中,有两种管理模式,分别是图管理模式和列表管理模式。(下文简称图模式、表模式) 可以根据不同的使用场景,切换管理模式: 图管理模式下,模型操作区展示当前模型和与当前模型有直接关联关系的模型关系图,可以在关注模型关联关系时使用; 列表管理模式下,展示更多更详细的模型信息、字段信息,且左侧可快速切换不同模型,可以在关注模型基础信息时使用; 4.2 筛选 4.2.1 图模式筛选 在图模式下,顶部进行应用/模块、模型类型、分组的筛选,依此向下可以搜索或展开当前筛选条件下的模型列表,切换模型后在模型操作区将展示另一模型的信息。为了更大程度保留图模式下的模型展示区域,模型列表默认不会展示,点击搜索行的任意筛选项,即可展开模型列表。 4.2.2 表模式筛选 在表模式下,顶部和图模式一致,都是应用/模块、模型类型、分组的筛选,模型操作区左侧会直接展示模型列表。 4.2.3 重置筛选 图模式和表模式下,右侧都有重置筛选的选项。如果点击“重置筛选”按钮,则将筛选栏恢复到进入页面时的选项。 4.3 模型分组 模型新增成功后,默认无所属分组,每个模型可以设置所属分组,设置后通过分组进行筛选时,模型即展示在所属分组下。 4.3.1 图模式设置分组 图模式下为模型设置分组,点击模型信息顶部第一个「模型分组」操作图标,点击后设置或修改分组。 4.3.2 表模式设置分组 表模式下为模型设置分组,点击模型信息右上角第一个操作「模型分组」,点击后设置或修改分组。 4.4 继承关系 查看模型的继承关系,点击展示跟当前模型有父子关系的模型关系图。 页面初始状态只展示一层父模型与一层子模型,父模型顶部和子模型底部有“展示更多”按钮,点击展示更多再向上或向下加载一层。连线的顶部展示“收起”按钮,点击“收起”按钮收起子模型。 点击非当前模型,会打开新窗口,链接跳转到点击模型的模型设计器页面,新页面满足点击模型的筛选条件; 支持设置显示比例,缩放模型关系图; 支持最大化全屏展示。 4.4.1 图模式继承关系 4.4.2 表模式继承关系 4.5 查看引用关系 当删除模型时,如果模型有被其他设计器引用使用,则无法被删除。删除失败时会弹出“该模型仍在使用中,无法删除模型”的提示,并且可以点击「查看模型引用」,进而展示引用的详细信息。 引用包括五种:模型引用、页面引用、逻辑引用、流程引用、图表引用。 每种关系通过列表展示,列表项为链接(链接到对应的设计页面),内容为对应名称。例如,存在引用关系的流程的列表项显示的是流程的名称。列表项链接到对应流程的设计页面。 4.6 导入模型 导入模型的添加模型的一种方式,下载导入模板后在Excel中按照规则填写模型信息,成功导入后即添加模型成功。 点击「导入模型」后,可在弹窗中下载导入模板、上传导入文件、查看导入说明。 4.6.1 下载导入模板 下载导入模板时,会根据当前的操作模式不同,下载到的模板也不同。 在经典模型下,下载的导入模板中需要填写的模型信息基础、数量少、易懂。 在专家模型下,下载的导入模板中需要填写的模型信息丰富、数量多、专业。 4.6.2 查看导入说明 导入说明中描述了导入模板中各项内容的含义、填写规则等,有助于用户正确填写导入文件。在经典模式或专家模式下点击「导入说明」后,分别弹出两种操作模式下的导入说明。 4.6.3 导入上传 导入文件正确填写后,在弹窗中选择Excel文件,或将Excel直接拖入弹窗中的文件上传区域。Excel文件仅支持三种格式:.xlsx .xls .xlsm。 4.7 添加模型 点击「添加模型」,出现模型信息填写的弹窗,弹窗中包括:模型名称、模型类型、父模型。填写并保存成功后,模型即创建成功。 4.7.1 模型类型 专家模式下支持创建4种类型的模型:存储模型、传输模型、抽象模型、代理模型;经典模式下支持创建2种类型的模型:存储模型、传输模型。 存储模型:用于存储数据的模型,生成前后端交互协议、数据表、数据构造器和数据管理器。 抽象模型:用于配置多个子模型的公用字段和函数的模型,不会生成前后端交互协议、数据表、数据构造器和数据管理器。 传输模型:用于数据传输的模型,生成前后端交互协议和数据构造器,不生成数据表和数据管理器。 代理模型:用于以代理的方式扩展存储模型的模型,可以在存储模型的基础上增加传输字段和函数,与被代理的存储模型共用相同的数据管理器。 4.7.2 选择父模型 添加模型时,需要选择父模型,其中,经典模式下,无需且不展示父模型;专家模式下,必须选择父模型。 存储模型的父模型,默认是“基础存储模型”,可选项为可见的抽象模型和存储模型。 传输模型的父模型,默认是“基础存储模型”,可选项为可见的传输模型。 抽象模型的父模型,默认是“基础存储模型”,可选项为可见的抽象模型。 代理模型的父模型,无默认值,可选项为可见的存储模型和代理模型。 4.8 编辑模型 创建成功的模型,可以对其进行编辑,但只有部分信息支持编辑。 4.8.1 图模式编辑模型 图模式下,点击模型标题右侧的「编辑模型」按钮,即可在右侧弹出的抽屉中编辑模型信息。 4.8.2 表模式编辑模型 表模式下,点击模型信息标题右侧的「编辑模型」按钮,下方模型信息中可以被编辑修改的字段即由只读变为可编辑。 4.9 隐藏/可见模型 对于暂时不使用的模型,可以进行隐藏(隐藏后可再设置可见)的操作。 在其他设计器需要选择模型使用时,隐藏的模型将不被展示。对隐藏的模型再次操作可见后,即可选择到。 4.9.1 图模式隐藏/可见模型 图模式下,展开模型列表,模型列表中每个模型所在行的右侧,可点击隐藏/可见图标,以隐藏/可见该模型。 可见的模型常规展示,无特殊标识;隐藏后的模型在列表中将置灰展示。 4.9.1 表模式隐藏/可见模型 表模式下,模型信息左侧的模型列表中每个模型所在行的右侧,可点击隐藏/可见图标,以隐藏/可见该模型。 可见的模型常规展示,无特殊标识;隐藏后的模型在列表中将置灰展示。 4.10 删除模型 不再使用模型可以进行删除,删除时需要确保模型没有被其他设计器引用。删除成功后的模型将不在列表展示,且不可恢复,请谨慎操作。 4.10.1 图模式删除模型 图模式下,展开模型列表,模型列表中每个模型所在行的右侧,可点击删除图标,以删除该模型。 4.10.2 表模式删除模型 表模式下,模型信息左侧的模型列表中每个模型所在行的右侧,可点击删除图标,以删除该模型。 4.10.3 存在引用关系 如果删除的模型存在引用关系,则无法删除,并提示模型仍在使用。点击提示中的「查看模型引用」,可以查看这个模型引用情况。 5. 字段管理 在模型中,可以对字段进行增删改查等基础管理操作。 5.1 添加字段 每个模型中可以添加多个字段,手动添加的字段都为自定义字段。点击「添加字段」,右侧出现字段信息填写的抽屉,抽屉中包括:字段名称、字段业务类型、存储类型、长度(部分业务类型的字段无长度设置)。填写并保存成功后,字段即创建成功。 5.1.1 图模式添加字段 5.1.2 表模式添加字段 5.1.3 字段业务类型 添加字段时,支持设置16种基础类型的字段、支持设置4种关系类型字段。 基础类型:用户ID、整数、浮点数、金额、布尔型、文本、多行文本、富文本、日期时间、年份、日期、时间、数据字典、键值对、手机、邮箱; 字段为数据字典时需要选择一个数据字典。 关系类型:一对一、多对一、一对多、多对多 字段为关系类型字段时需要选择关联的模型。 5.1.4 多值字段 多值字段表示该字段可以存储或传输多个该业务类型的数据,非多值字段只能存储或传输单个该业务类型的数据。 5.1.5 存储类型 设置字段的存储类型:存储字段、传输字段 存储字段:用于查询和存储字段 传输字段:仅用于数据的组装与存储 5.2 编辑字段 创建成功的字段,可以对其进行编辑,但只有部分信息支持编辑。 字段长度和精度只能由小往大改,不能由大往小改。 关联关系的关联模型、关联字段、关系字段、中间模型,中间关系字段、中间关联字段、支持关联查询不可修改。 5.2.1 图模式编辑字段 图模式下,点击字段列表所在行右侧的「编辑字段」按钮,即可在右侧弹出的抽屉中编辑字段信息。 5.2.2 表模式编辑字段 表模式下,点击模型信息标题右侧的「编辑模型」按钮,下方模型中的字段都可以被展开编辑。 5.3 隐藏/可见字段 对于暂时不使用的字段,可以进行隐藏(隐藏后可再设置可见)的操作。 在其他设计器需要选择字段使用时,隐藏的字段将不被展示。对隐藏的字段再次操作可见后,即可选择到。 5.3.1 表模式隐藏/可见字段 表模式下,编辑模型时,字段所在行右侧可以操作隐藏/可见。 可见的字段常规展示,无特殊标识;隐藏的字段在列表中将置灰展示。 5.4 删除字段…

    2024年6月20日
    1.6K00
  • 4.2.2 框架之MessageHub

    一、MessageHub 请求出现异常时,提供”点对点“的通讯能力 二、何时使用 错误提示是用户体验中特别重要的组成部分,大部分的错误体现在整页级别,字段级别,按钮级别。友好的错误提示应该是怎么样的呢?我们假设他是这样的 与用户操作精密契合 当字段输入异常时,错误展示在错误框底部 按钮触发服务时异常,错误展示在按钮底部 区分不同的类型 错误 成功 警告 提示 调试 简洁易懂的错误信息 在oinone平台中,我们怎么做到友好的错误提示呢?接下来介绍我们的MessageHub,它为自定义错误提示提供无限的可能。 三、如何使用 订阅 import { useMessageHub, ILevel } from "@kunlun/dependencies" const messageHub = useMessageHub('当前视图的唯一标识'); /* 订阅错误信息 */ messageHub.subscribe((errorResult) => { console.log(errorResult) }) /* 订阅成功信息 */ messageHub.subscribe((errorResult) => { console.log(errorResult) }, ILevel.SUCCESS) 图4-2-2-1 订阅的示例代码 销毁 /** * 在适当的时机销毁它 * 如果页面逻辑运行时都不需要销毁,在页面destroyed是一定要销毁,重要!!! */ messageHub.unsubscribe() 图4-2-2-2 销毁的示例代码 四、实战 让我们把3.5.7.5【自定义视图-表单】一文中的自定义表单进行改造,加入我们的messageHub,模拟在表单提交时,后端报错信息在字段下方给予提示。 Step1 (后端)重写PetType的创建函数 重写PetType的创建函数,在创建逻辑中通过MessageHub返回错误信息,返回错误信息的同时要设置paths信息方便前端处理 @Action.Advanced(name = FunctionConstants.create, managed = true) @Action(displayName = "确定", summary = "创建", bindingType = ViewTypeEnum.FORM) @Function(name = FunctionConstants.create) @Function.fun(FunctionConstants.create) public PetType create(PetType data){ List<Object> paths = new ArrayList<>(); paths.add("demo.PetType"); paths.add("kind"); PamirsSession.getMessageHub().msg(new Message().msg("kind error").setPath(paths).setLevel(InformationLevelEnum.ERROR).setErrorType(ErrorTypeEnum.BIZ_ERROR)); List<Object> paths2 = new ArrayList<>(); paths2.add("demo.PetType"); paths2.add("name"); PamirsSession.getMessageHub().msg(new Message().msg("name error").setPath(paths2).setLevel(InformationLevelEnum.ERROR).setErrorType(ErrorTypeEnum.BIZ_ERROR)); // data.create(); return data; } 图4-2-2-3 (后端)重写PetType的创建函数 Step 2 修改PetForm.vue <template> <div class="petFormWrapper"> <form :model="formState" @finish="onFinish"> <a-form-item label="品种种类" id="name" name="kind" :rules="[{ required: true, message: '请输入品种种类!', trigger: 'focus' }]"> <a-input v-model:value="formState.kind" @input="(e) => onNameChange(e, 'kind')" /> <span style="color: red">{{ getServiceError('kind') }}</span> </a-form-item> <a-form-item label="品种名" id="name" name="name" :rules="[{ required: true, message: '请输入品种名!', trigger: 'focus' }]"> <a-input v-model:value="formState.name" @input="(e) => onNameChange(e, 'name')" /> <span style="color: red">{{ getServiceError('name') }}</span> </a-form-item> </form> </div> </template>- <script lang="ts"> import { defineComponent, reactive…

    2024年5月23日
    1.4K00
  • 2.4.2 Oinone独特性之每一个需求都可以是一个模块

    我们的Oinone平台采用模型驱动的方式,并符合面向对象设计原则,每个需求都可以是一个独立模块,可以独立安装、升级和卸载。这让系统真正像乐高积木一样搭建,具有高度的灵活性和可维护性。 与大部分低代码或无代码平台不同的是,它们的应用市场上的应用往往是模板式的,也就是说,这是一个拷贝,个性化只能在应用上直接修改,而且一旦修改就不能升级。这对于软件公司和客户来说都非常痛苦。客户无法享受到软件公司产品的升级功能,而软件公司在服务大量客户时,也会面临不同版本的维护问题,成本也非常高。而我们的Oinone平台完全避免了这些问题,让客户和软件公司都可以从中受益(如下图2-9、2-10所示)。 图2-9软件公司与客户项目的关系-让标准与个性化共存 图2-10 软件公司与客户项目的关系-让升级无忧 实现原理 在满足客户个性化定制需求时,传统的方法通常是直接修改标准产品源码,但这样做会带来一个问题:标准产品无法持续升级。相反,无论是在OP模式还是SaaS模式下,Oinone都采用全新的模块为客户进行个性化开发,保持标准产品和个性化模块的独立维护和升级。这是因为在元数据设计时,Oinone采用了面向对象的设计原则,实现了元数据设计与面向对象设计思想的完美融合。 面向对象设计的核心特征包括封装、继承、多态,而Oinone的元数据设计完全融入了这些思想。下面是几个例子,说明Oinone的元数据设计如何体现面向对象设计的核心特征,并带来了什么好处: 继承:在继承原有模型的字段、逻辑、展示的情况下,增加一段代码来扩展模型的字段、逻辑、展示。 多态:在继承原有模型的字段、逻辑、展示的情况下,增加一段代码来覆盖模型的原有字段、逻辑、展示。 封装:外部无需关心模型内部如何实现,只需按照不同场景调用模型对应开放级别的字段、逻辑、展示。 这些特征和优势使得Oinone在满足客户个性化需求时更加灵活和可持续,同时使得标准产品的维护和升级变得更加容易和高效。 在Java语言设计中,万物皆对象,一切都以对象为基础。而Oinone的元数据设计则是以模型为出发点,作为数据和行为的承载体。如下图2-11清晰地描述了Java面向对象编程中封装、继承、多态在Oinone元数据中的对应关系。Oinone元数据描述了B对象继承A对象并拥有其所有属性和方法,并覆盖了A对象的属性1和方法1,同时新增了属性3和方法3。 此外,Oinone的面向对象特性是用元数据来描述的。一方面,我们基于Java编码规范收集相关元数据,以保持不改变Java编程习惯。另一方面,方法和对象的挂载是松耦合的,只要按照元数据规范进行挂载,就能轻松地将其附加到模型上。在不改变原有A对象的情况下,我们可以直接增加方法和属性(如下图2-12所示)。 图2-11 java面向对象在Oinone元数据中对应 图2-12 java对象的修改 VS Oinone元数据模型的修改 Oinone函数不仅支持面向对象的继承和多态特性,还提供了面向切面的拦截器和SPI机制的扩展点,以应对方法逻辑的覆盖和扩展,以及系统层面的逻辑扩展(如下图2-13所示)。这些扩展功能可以独立地在模块中维护。 其中,拦截器可以在不侵入函数逻辑的情况下,根据优先级为满足条件的函数添加执行前和执行后的逻辑。 扩展点是一种类似于SPI机制的逻辑扩展机制,用于扩展函数的逻辑。通过这一机制,可以对函数逻辑进行灵活的扩展,以满足不同的业务需求。 图2-13 Oinone函数拦截与扩展机制 不管是对象、属性还是方法,都可以以独立的模块方式来扩展,这就使得每一个需求都可以成为一个独立的模块,方便我们在研发标准产品时进行模块化的划分,同时也让我们在以低代码模式为客户进行二次开发时,能够更好地支持“标准产品迭代与个性化保持独立”的需求。在2.4.3【oinone独特性之低无一体】一文中,我们也提到了这个特性,但那是在低无一体的情况下,通过元数据融合来实现的。让我们看看基于低代码开发模式下,典型的Oinone二次开发工程结构(如下图2-14所示),就可以更好地理解这个特性啦! 图2-14 Oinone典型的二开工程结构

    2024年5月23日
    1.4K00
  • 3.1.1 环境准备(Mac版)

    工欲善其事,必先利其器。 在进行学习前,大家务必先检查环境。为了降低大家环境准备难度,基础环境全程用安装包无脑模式进行环境配置,安装请从附件下载(提供mac版本安装包,其他操作系统请自行网上下载与安装)。 后端相关 基础环境准备 安装 jdk 1.8 (下载地址见书籍【附件一】) 安装 mysql 8.0.26 (下载地址见书籍【附件一】) 安装mysql,并配置环境变量详见本文中的【环境变量设置】部分 如果mysql启动失败则,在命令行加执行以下命令 Shell mysqld –initalize-insecure sudo chmod -R a+rwx /usr/local/mysql/data/ 图3-1-1 mysql启动失败需执行的命令 安装 idea社区版 (官方下载链接见书籍【附件一】) 根据不同版本下载不同的idea插件 (联系Oinone官方客服) b. 点击Preferences菜单(快捷键 comand+,) c. 选择Plugins,进入插件管理页面,接下来按图操作就可以了 d. 图3-1-3 插件管理页面操作示意 e. 选择.zip文件,不需要解压 如果安装了Lombok,请禁用 idea的Java Complier,不然java反射获取方法入参名会变成arg*,导致元数据默认取值出错。或者pom中加入Complier插件,此方法为正解,不然上线也会有问题,我们学习的工程都会选用mvn插件方式 图3-1-4 界面操作示意图 图3-1-5 界面操作示意图 图3-1-6 界面操作示意图 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <configuration> <compilerArgument>-parameters</compilerArgument> <source>${maven.compiler.source}</source> <target>${maven.compiler.source}</target> <encoding>${project.build.sourceEncoding}</encoding> </configuration> </plugin> 图3-1-7 pom文件代码 安装 dataGrip 最新版本的 过期就去删“ ~/Library/Application\ Support/JetBrains/DataGrip202xxxx”相关的目录,无限期试用,或者安装其他mysql GUI 工具 安装 git 2.2.0(下载地址见书籍【附件一】) 安装 GraphQL的客户端工具 Insomnia 第一次使用可以参考3.2.1【构建第一个Module】一文中在模块启动后如何用该工具验证后端启动成功,更多使用技巧自行百度,Insomnia.Core-2022.4.2.dmg.txt(186.9 MB)(下载地址见书籍【附件一】),下载文件后修改文件名去除.txt后缀 安装 maven ,并配置环境变量(下载地址见书籍【附件一】) 配置mvn的settings,下载附件settings-open.xml,并重命名为settings.xml,建议直接放在~/.m2/下面。下载地址见oinone开源社区群公告,也可以联系oinone合作伙伴或服务人员 把settings.xml拷贝一份到maven安装目录conf目录下 环境变量设置 vi ~/.bash_profile ,并执行 source ~/.bash_profile ##按实际情况设置 export PATH=$PATH:/usr/local/mysql/bin export PATH=$PATH:/usr/local/mysql/support-files export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_0221.jdk/Contents/Home ##替换掉${mavenHome},为你的实际maven的安装路径 export M2_HOME=${mavenHome} export PATH=$PATH:$M2_HOME/bin 图3-1-8 环境变量设置 查看主机名 #查看主机名 echo $HOSTNAME 图3-1-9 查看主机名 根据主机名,配置/etc/hosts文件。此步如果没有配置,可能导致mac机器在启动模块时出现dubbo超时,从而导致系统启动巨慢,记得把oinonedeMacBook-Pro.local换成自己的主机名 #oinonedeMacBook-Pro.local 需要换成自己对应的主机名,自己的主机名用 echo $HOSMNAME 127.0.0.1 oinonedeMacBook-Pro.local ::1 oinonedeMacBook-Pro.local 图3-1-10 配置/etc/hosts文件 必备中间件安装脚本(rocketmq、zk、redis) zk 下载并解压(下载地址见书籍【附件一】) vi ~/.bash_profile ,追加以下两行,并执行 source ~/.bash_profile #### 替换掉${basePath},为你的实际安装路径 export ZOOKEEPER_HOME=${basePath}/apache-zookeeper-3.5.8-bin export PATH=$PATH:$ZOOKEEPER_HOME/bin 图3-1-11 配置zk环境变量 启动zk ##启动 zkServer.sh start ##停止 zkServer.sh stop 图3-1-12 启停zk rocketmq (下载地址见书籍【附件一】) vi ~/.bash_profile ,追加以下两行,并执行 source ~/.bash_profile #### 替换掉${basePath},为你的实际安装路径 export ROECET_MQ_HOME=${basePath}/rocketmq-all-4.7.1-bin-release export PATH=$PATH:$ROECET_MQ_HOME:$ROECET_MQ_HOME/bin 图3-1-13 配置rocketmq环境变量 到bin目录下修改配置文件 runserver.sh 和 runbroker.sh ##注释掉下面一行 ##choose_gc_log_directory ##修改java启动所需内存,按自己实际情况改,1g或者512m JAVA_OPT = "${JAVA_OPT} -server -Xms1g -Xmx1g -Xmn1g -XX:MetaspaceSize=128m -XX:MaxMetaspaceSize=320m" 图3-1-14 bin目录下修改配置文件 启停rocketmq ##启动 nameserver nohup…

    2024年5月23日
    2.2K00

Leave a Reply

登录后才能评论