3.5.6.3 布局的配置

布局是将页面拆分成一个一个的小单元,按照上下中左右进行排列。

前沿

在前端领域中,布局可以分为三大块「Float、Flex、Grid 」,Float可以说的上是上古时期的布局了,如今市面还是很少见的,除了一些古老的网站。

目前,平台主要支持通过配置XML上面的cols和span来进行布局。平台也同样支持自由布局,合理的使用row、col、containers和container四个布局容器相关组件,将可以实现各种类型的布局样式,换句话说,平台实现的自由布局功能是Flex和Grid的结合体。

这里主要是讲解Flex和Grid布局,以及目前新的模板布局实现的思路。

Flex布局

Flex布局采用的是一维布局,那么什么是一维布局呢,所谓的一维布局就是只有一个方向、没有体积、面积,比如一条直线。它适合做局部布局,就像我们原来的顶部菜单、面包屑导航,以及现在的主视图字段配置。

image.png

图3-5-6-19 Flex布局示意

image.png

图3-5-6-20 Flex布局示意

image.png

图3-5-6-21 Flex布局示意

从上图可以看看出,Flex布局只能在X、Y轴进行转换,它无法对上下左右四个方向同时处理,因为它没“面积”的概念。所以它最适合做局部布局。

优点

image.png

图3-5-6-22 Flex兼容性

Flex的兼容性,可以看得出来,目前主流的浏览器都支持该属性。所以Flex兼容性强,如果你想对局部做布局处理,Flex是最好选择。

缺陷

刚刚也提到了,用户想要的布局是千奇百怪的,如果他想要的布局在现有的功能中无法实现怎么办?让用户放弃?还是说服他使用现在的布局。

Grid布局

Grid布局系统采用的是二维布局,二维布局有四个方向:上、下、左、右,它只有面积没有体积,比如一张纸、网格。

Grid布局
<div id="grid-container-one">
  <div class="one-1">Grid Item 1</div>
  <div>Grid Item 2</div>
  <div>Grid Item 3</div>
  <div>Grid Item 4</div>
  <div>Grid Item 5</div>
  <div class="one-6">Grid Item 6</div>
</div>

<div id="grid-container-two">
  <div class="tow-1">Grid Item 1</div>
  <div class="tow-2">Grid Item 2</div>
  <div>Grid Item 3</div>
  <div>Grid Item 4</div>
  <div>Grid Item 5</div>
  <div>Grid Item 6</div>
</div>

<div id="grid-container-three">
  <div>Grid Item 1</div>
  <div>Grid Item 2</div>
  <div class="grid">Grid Item 3</div>
  <div class="grid-column">Grid Item 4</div>
  <div>Grid Item 5</div>
  <div>Grid Item 6</div>
  <div>Grid Item 7</div>
  <div class="grid-column">Grid Item 8</div>
</div>
HTML CSSResult Skip Results Iframe
EDIT ON
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
}

#grid-container-one{
  background-color: black;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 50px);
  gap: 10px;
  border: solid black 2px;
  margin-bottom: 20px;
  color: salmon;
}

#grid-container-one div {
  border: solid white 2px;
  padding: 10px;

}

#grid-container-one .one-1 {
    grid-area: span 1/span 3;
    text-aligin: center
}

#grid-container-one .one-6 {
    grid-column: 3 /4;
}

#grid-container-two{
  background-color: CADETBLUE;
  display: grid;
  grid-template-columns: 15% repeat(2, 1fr);
  grid-template-rows: 100px;
  text-shadow: 1px 1px 3px black;
  margin-bottom: 20px;
  color: salmon;
}

.tow-1 {
  grid-area: span 3 / span 1
}
.tow-2 {
  grid-area: span 1 / span 2
}

#grid-container-two div{
  border: solid white 2px;
  padding: 10px;
}

#grid-container-three{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 25%;
  grid-auto-rows: 200px; 
  grid-auto-columns: 100px;
  gap: 2px;
  color: black;
  text-decoration: underline;
  margin-bottom: 2%;
}

#grid-container-three div{
  background-color: salmon;
  border: solid black 5px;
  padding: 10px;
}

.grid-column{
  grid-column: 5 / 7;
}

.grid{
  grid-row: 1 /1;
  grid-column: 4 / 5;
}

.grid-container-inline{
  display: inline-grid;
  grid-template-columns: repeat(2, 200px);
  grid-template-rows: 100px 100px;
  gap: 2px;
  margin-bottom: 20px;
}

.grid-container-inline div{
  padding: 35px;
  border: solid black 2px;
  background-color: PINK;
}

Resources1× 0.5× 0.25×Rerun

3.5.6.3 布局的配置

图3-5-6-23 Grid布局示意

从上面的代码可以看出,Grid天生的支持整体布局,它甚至可以移行换位,它的强大之处可以颠覆你对布局的认知。

缺陷

虽然Grid很强大,但是它有一个致命的缺陷,那就是兼容性。

image.png

图3-5-6-24 Grid兼容性

从上图可以看出,IE10以下、Chrome56以下、Firefox51以下等等都不支持该属性。

平台布局

名词解释

-布局容器相关组件:rowcolcontainerscontainer这四个组件的统称。

-基础布局属性:包括colscolSpanspanoffset

概述

一般的,我们对大多数组件提供了基本的布局属性配置,包括:

  • cols:将内容区中的每行拆分的列数;当前元素未配置该属性时,将取离当前元素最近父元素属性。默认:1
  • colSpan:当前元素相对于父元素在每行中所占列比例;优先于span。默认:FULL
    • FULL:1
    • HALF:1/2
    • THIRD:1/3
    • TWO_THIRDS:2/3
    • QUARTER:1/4
    • THREE_QUARTERS:3/4
  • span:当前元素相对于父元素在每行中所占列数。默认:cols
  • offset:当前元素相对于原所在列的偏移列数。

我们规定了默认栅格数为24,基础布局属性均是相对于默认栅格数而言的。

在使用基础布局属性时,请尽可能保证公式 (24 / cols) * span 以及以下列举的公式,其计算结果为整数,否则可能出现不符合预期的结果。

在使用colSpan时,span的计算公式为:span = cols * colSpan

在使用offset时,offset的计算公式为:offset = (24 / cols) * offset

平台内置组件

下面列举了平台内置组件在FormDetail视图中使用时所支持的布局相关属性,包括可能影响部分区域显隐的相关属性。

表头说明:

  • tag:xml配置标签
  • widget:组件名称;xml属性;多个值属于别称。如:widget="form"
  • 配置项:xml属性名称。
  • 可选值:声明支持的配置项属性类型,不可识别或不可解析时将采用默认值。
  • 作用:对配置项的简单描述,部分布局属性在上方进行了描述,不再赘述。
tag widget 配置项 可选值 默认值 作用
view cols number 1
element form cols number 1
colSpan enum FULL
span number cols
offset number
detail cols number 1
colSpan enum FULL
span number cols
offset number
DateTimeRangePicker colSpan enum FULL
span number cols
offset number
DateRangePicker colSpan enum FULL
span number cols
offset number
TimeRangePicker colSpan enum FULL
span number cols
offset number
colSpan enum FULL
YearRangePicker span number cols
offset number
field 任意 colSpan enum FULL
span number cols
offset number
pack fieldset/group cols number 1
colSpan enum FULL
span number cols
offset number
title string 分组 标题;空字符串或不填,则隐藏标题区;
tabs cols number 1
colSpan enum FULL
span number cols
offset number
tab cols number 1
title string 选项页 标题;必填;空字符串或不填则显示默认值;
row cols number 1
align top/middle/bottom 垂直对齐方式
justify start/end/center/space-around/space-between 水平对齐方式
gutter number,number?示例:24 = 24,2412,12 24,24 水平/垂直间距
wrap boolean true 是否允许换行
col cols number 1
colSpan enum FULL
span number cols
offset number 偏移单元格数
mode/widthType manual/full manual 列模式;手动/自动填充;使用自动填充时,将忽略span、offset属性;
containers cols number 1
align top/middle/bottom 垂直对齐方式
justify start/end/center/space-around/space-between 水平对齐方式
gutter number,number?示例:24 = 24,2412,12 0,24 水平/垂直间距
wrap boolean true 是否允许换行
container cols number 1
colSpan enum FULL
span number cols
offset number 偏移单元格数
align top/middle/bottom 垂直对齐方式
justify start/end/center/space-around/space-between 水平对齐方式
gutter number,number?示例:24 = 24,2412,12 0,24 水平/垂直间距
wrap boolean true 是否允许换行
mode/widthType manual/full full 列模式;手动/自动填充;使用自动填充时,将忽略span、offset属性;

表3-5-6-11 平台内置组件

基础布局

    基础布局提供了在不使用任何布局容器相关组件的情况下,仅使用cols、span、offset这三个属性控制行列的布局能力。

    其本质上是flex布局的扩展,但依旧无法脱离flex布局本身的限制,即元素始终是自上而下、自左向右紧凑的。

    下面将使用fieldset和tabs/tab组件来介绍各个属性在实际场景中的使用。

示例1:默认撑满一行

<pack widget="fieldset" title="示例1">
    <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
    <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
</pack>

图3-5-6-25 示例1:默认撑满一行

结果展示

image.png

图3-5-6-26 示例效果

示例2:一行两列:cols=2; colSpan=HALF/span=1

<pack widget="fieldset" title="示例2" cols="2">
    <field data="code" widget="Input" colSpan="HALF" label="编码" placeholder="请输入" required="true" />
    <field data="name" widget="Input" colSpan="HALF" label="名称" placeholder="请输入" required="true" />
</pack>
------------------------------ 或 ------------------------------
<pack widget="fieldset" title="示例2" cols="2">
    <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    <field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
</pack>

图3-5-6-27 示例2代码

结果展示

image.png

图3-5-6-28 示例效果

示例3:使用offset实现中间空一个字段空间的布局

<pack widget="fieldset" title="示例3" cols="3">
    <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    <field data="name" widget="Input" span="1" offset="1" label="名称" placeholder="请输入" required="true" />
</pack>

PS:offset的作用有限,offset最优实践的前提是在同一行中进行偏移,要实现特殊布局功能,请使用自由布局相关布局能力。

图3-5-6-29 使用offset实现中间空一个字段空间的布局

结果展示

image.png

图3-5-6-30 示例效果

示例4:属性cols就近取值

<!-- 所有tab将使用cols="2"属性 -->
<pack widget="tabs" cols="2">
    <pack widget="tab" title="示例4-1">
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    </pack>
    <pack widget="tab" title="示例4-2">
        <field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
    </pack>
</pack>

图3-5-6-31 示例4:属性cols就近取值

结果展示

image.png

图3-5-6-32 示例效果

image.png

图3-5-6-33 示例效果

<!-- 所有tab将使用cols="2"属性 -->
<pack widget="tabs" cols="2">
    <!-- 特指该tab使用cols="1"属性,其他tab继续使用tabs配置的cols="2"属性 -->
    <pack widget="tab" title="示例4-1" cols="1">
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    </pack>
    <pack widget="tab" title="示例4-2">
        <field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
    </pack>
</pack>

图3-5-6-34 实例4:tab属性生效

结果展示

image.png

图3-5-6-35 示例效果

image.png

图3-5-6-36 示例效果

自由布局

自由布局提供了无法通过基础布局能力实现的其他布局能力,总的来说,自由布局是对grid布局和flex布局的结合,它既拥有grid布局对页面进行单元格拆/合的能力,在每个单元格中,使用flex布局进行紧凑排列。

下面将使用fieldset组件介绍各个属性在实际场景中的使用。

组件组合

row/col:两个组件共同形成行和列,在一行中拆分成24个栅格,每个列的跨度不超过24。当一行中,所有列的跨度和超过24时,将会自动换行。

containers/row/container:三个组件共同形成一个二维网格,以此实现grid布局的基本能力。每个单元格(container)中使用flex布局。

PS:以下示例为了体现布局效果,可能会出现重复字段定义,业务上在使用时需要避免这种定义。

示例1:仅使用1/2左侧空间

小贴士:在使用row和col组合时,如果在一个col中有且仅有一个子元素,则col可以缺省。col相关属性可以配置在该子元素上。

<pack widget="fieldset" title="示例1">
    <pack widget="row" cols="2">
        <!-- 此处显式定义col组件,field标签上的基础布局属性将失效 -->
        <pack widget="col" span="1">
            <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
        </pack>
    </pack>
    <pack widget="row" cols="2">
        <pack widget="col" span="1">
            <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
        </pack>
    </pack>
</pack>
------------------------------ 或 ------------------------------
<pack widget="fieldset" title="示例1">
    <pack widget="row" cols="2">
        <!-- 此处缺省col组件,field标签上的基础布局属性可生效 -->
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    </pack>
    <pack widget="row" cols="2">
        <field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
    </pack>
</pack>

图3-5-6-37 仅使用1/2左侧空间

结果展示

image.png

图3-5-6-38 示例效果

示例2:使用布局容器实现中间空一个字段空间的布局

<pack widget="fieldset" title="示例2">
    <pack widget="containers">
        <pack widget="row">
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container"></pack>
            <pack widget="container">
                <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
            </pack>
        </pack>
    </pack>
</pack>

图3-5-6-39 使用布局容器实现中间空一个字段空间的布局

结果展示

image.png

图3-5-6-40 示例效果

示例3:一行5列(基础布局属性公式无法计算出整数的情况)

<pack widget="fieldset" title="示例3">
    <pack widget="containers">
        <pack widget="row">
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
                <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
              <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
              <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
              <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
        </pack>
    </pack>
</pack>

图3-5-6-41 一行5列(基础布局属性公式无法计算出整数的情况)

结果展示

image.png

图3-5-6-42 示例效果

示例4:共2行,其中1行未3列,另1行为2列

该示例可以使用任何一种组件组合都可以实现,结果一致。

<!-- 使用containers/row/container -->
<pack widget="fieldset" title="示例4">
    <pack widget="containers">
        <pack widget="row">
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
                <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
        </pack>
        <pack widget="row">
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
        </pack>
    </pack>
</pack>
------------------------------ 或 ------------------------------
<!-- 使用row/col,其中col缺省 -->
<pack widget="fieldset" title="示例4">
    <pack widget="row" cols="3">
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
        <field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    </pack>
    <pack widget="row" cols="2">
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    </pack>
</pack>

图3-5-6-43 示例为共2行,其中1行未3列,另1行为2列

结果展示

image.png

图3-5-6-44 示例效果

示例5:布局容器的垂直居中

左侧容器高度被子元素撑开,右侧容器在垂直方向居中

<pack widget="fieldset" title="示例5">
    <pack widget="containers">
        <pack widget="row">
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
                <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container" align="middle">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
        </pack>
    </pack>
</pack>

图3-5-6-45 设置布局容器的垂直居中

结果展示

image.png

图3-5-6-46 示例效果

举例

这里拿PetTalent举例,仿造教程上面效果,除了例子中的效果,自己可以做更多的尝试

Step1 修改PetTalent的form视图如下

给creater字段增加一个属性配置 offset="1"

<field data="creater" widget="SSConstructSelect" offset="1" submitFields="creater,name" responseFields="name"/>

图3-5-6-47 给creater字段增加一个属性配置 offset="1"

Step2 重启看效果

image.png

图3-5-6-48 示例效果

Step3 修改PetTalent的form视图如下

给【基础信息】增加一个属性cols="4",给name字段增加一个属性span="2",给creater和nick字段增加一个属性span="1":

<pack widget="group" title="基础信息" cols="4">
    <field invisible="true" data="id" label="ID" readonly="true"/>
    <field data="name" label="达人" required ="true" span="2"/>
    <field data="nick" compute="activeRecord.name" readonly = "true" span="1"/>
    <field data="creater" widget="SSConstructSelect"  submitFields="creater,name" responseFields="name" span="1"/>
    <field data="dataStatus" label="数据状态" >
        <options>
            <!-- option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/ -->
            <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/>
            <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/>
            <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/>
        </options>
    </field>
    <field invisible="true" data="createDate" label="创建时间" readonly="true"/>
    <field invisible="true" data="writeDate" label="更新时间" readonly="true"/>
    <field data="createUid" label="创建人id"/>
    <field data="writeUid" label="更新人id"/>
</pack>

图3-5-6-49 修改PetTalent的form视图

Step4 重启看效果

image.png

图3-5-6-50 示例效果

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

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

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

相关推荐

  • 翻译

    翻译应用是管理翻译规则的应用,以模型为基础、维护字段的翻译值,支持导入、导出 1. 操作步骤 Step1:导出所有翻译项; Step2:线下翻译; Step3:导入翻译项; Step4:刷新远程资源; Step5:页面右上角可切换语言,查看翻译效果。 2. 新增翻译 翻译是具体到模型字段,其中需要区分出是否字典; 源语言、目标语言,是在资源中维护的语言,可在资源中维护需要翻译的语言; 翻译项则是模型字段,默认翻译项为激活状态,关闭后维护的翻译项无效。 3. 导出、导入 不勾选导出:导出所有需要翻译的翻译项,包括模块、字段,源术语、翻译值等,其中如果已经翻译过的内容,会体现在翻译值中; 勾选导出:导出勾选模型的翻译项。 导入:导入翻译项,平台会根据模型拆分为多条数据。 4. 刷新远程资源 导入翻译项后,点击“刷新远程资源”按钮。 5. 查看翻译内容 页面右上角切换语言,查看翻译效果。

    2024年6月20日
    85300
  • 6.4 国际化之多语言

    多语言是国际化中大家最常面对的问题,我们需要对应用的页面结构元素进行翻译,也需要对系统内容进行翻译比如:菜单、数据字典等,甚至还会业务数据进行翻译。但不管什么翻译需求,我们在实现上基本可以归类为前端翻译和后端翻译。前端翻译顾名思义是在前端根据用户选择语言对内容进行翻译,反之就是后端翻译。本文会带着大家了解oinone的前端翻译与后端翻译 准备工作 pamirs-demo-boot的pom文件中引入pamirs-translate包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-translate</artifactId> </dependency> pamirs-demo-boot的application-dev.yml文件中增加配置pamirs.boot.modules增加translate,即在启动模块中增加translate模块 pamirs: boot: modules: – translate 后端翻译(使用) 这里通过对菜单的翻译来带大家了解翻译模块 Step1 新增翻译记录 切换应用到translate模块,点击新增翻译。 选择新增翻译生效模块 选择翻译的模型为:菜单模型 源语言选择中文,目标选择English 添加翻译项目: 源术语为:商店 翻译值为:shop 状态为:激活 Step2 查看效果 应用切换到Demo模块,在右上角切换语言至英语 后端翻译(自定义模型的翻译) 在前面菜单的翻译中,似乎我们什么都没做就可以正常通过翻译模块完成多语言的切换了。是不是真如我们想象的一样,当然不是。是因为Menu模型的displayName字段加上@Field(translate = true)注解。 Step1 为PetType模型的name字段增加翻译注解 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 = "品种名" , translate = true) private String name; @Field(displayName = "宠物分类") private String kind; } Step2 重启应用查看效果 切换应用到translate模块,点击新增翻译 切换应用到Demo模块,切换中英文,查看效果 前端翻译 还记得我们前端第一个自定义动作吗?会弹出“oinone第一个自定义Action,啥也没干”,我们要对它进行翻译。 Step1 修改前端DoNothingActionWidget.ts import translateValueByKey 提示语用translateValueByKey加上翻译 const confirmRs = executeConfirm(translateValueByKey(\’oinone第一个自定义Action,啥也没干\’)||\’oinone第一个自定义Action,啥也没干\’); 前端更多翻译工具请见前端高级特性-框架之翻译工具 import { Action, ActionContextType, ActionWidget, executeConfirm, IClientAction, SPI, ViewType, Widget, translateValueByKey } from '@kunlun/dependencies'; @SPI.ClassFactory(ActionWidget.Token({ name: 'demo.doNothing' })) export class DoNothingActionWidget extends ActionWidget { @Widget.Method() public async clickAction() { const confirmRs = executeConfirm(translateValueByKey('oinone第一个自定义Action,啥也没干')||'oinone第一个自定义Action,啥也没干'); } } //定义动作元数据 Action.registerAction('*', { displayName: '啥也没干', name: 'demo.doNothing', id: 'demo.doNothing', contextType: ActionContextType.ContextFree, bindingType: [ViewType.Table] } as IClientAction); Step2 新增翻译记录 前端翻译的翻译记录对应的模型可以随意找一个放。但要注意几点: 不要找有字读配置translate = true的模型,因为会影响后端翻译性能。 最好统一到一个模型中,便于后续管理。这里大家可以自定义一个无有业务访问且本身无需要翻译的模型来挂载,避免性能损失 Step3 刷新远程资源生成前端语言文件 Step4 新增或修改.env 前端在项目根目录下新增或修改.env,可以参考.env.example文件。通过.env文件为前端配置oss文件路径,针对I18N_OSS_URL配置项。真实前端访问翻译语言文件的路径规则为:http://bucket.downloadUrl/mainDir/租户/translate/模块/语言文件。 yaml文件中oss配置的文件路径:http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo/ 租户/translate/模块/语言文件 前端会自动根据上下文组织 # 后端api配置 # API_BASE_URL=http://127.0.0.1:8090 # 下面是国际化语言的cdn配置,默认用当前请求链接下的路径: /pamirs/translate/${module}/i18n_${lang}.js I18N_OSS_URL=http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo Step5 重启前端应用看效果 对语言进行中英文切换,进入宠狗达人页面,点击【第一个自定义Action】,查看前端翻译效果

    2024年5月23日
    1.3K20
  • 4.5.2 研发辅助之SQL优化

    Oinone体系中是不需要针对模型写SQL的,默认提供了通用的数据管理器。在带来便利的情况下,也导致传统的sql审查就没办法开展。但是我们可以以技术的手段收集慢SQL和限制问题SQL执行。 慢SQL搜集目的:去发现非原则性问题的慢SQL,并进行整改 限制问题SQL执行:对应一些不规范的SQL系统上直接做限制,如果有特殊情况手动放开 一、发现慢SQL 这个功能并没有直接加入到oinone的版本中,需要业务自行写插件,插件代码如下。大家可以根据实际情况进行改造比如: 堆栈入口,例子中只是放了pamirs,可以根据实际情况改成业务包路径 对慢SQL的定义是5s还是3s,根据实际情况变 package pro.shushi.pamirs.demo.core.plugin; import org.apache.ibatis.executor.Executor; import org.apache.ibatis.mapping.MappedStatement; import org.apache.ibatis.plugin.*; import org.apache.ibatis.session.ResultHandler; import org.apache.ibatis.session.RowBounds; import org.springframework.stereotype.Component; import pro.shushi.pamirs.meta.annotation.fun.extern.Slf4j; @Intercepts({ @Signature(type = Executor.class,method = "query",args = {MappedStatement.class,Object.class, RowBounds.class, ResultHandler.class}) }) @Component @Slf4j public class SlowSQLAnalysisInterceptor implements Interceptor { @Override public Object intercept(Invocation invocation) throws Throwable { long start = System.currentTimeMillis(); Object result = invocation.proceed(); long end = System.currentTimeMillis(); if (end – start > 10000) {//大于10秒 try { StackTraceElement[] stackTraceElements = Thread.currentThread().getStackTrace(); StringBuffer slowLog = new StringBuffer(); slowLog.append(System.lineSeparator()); for (StackTraceElement element : stackTraceElements) { if (element.getClassName().indexOf("pamirs") > 0) { slowLog.append(element.getClassName()).append(":").append(element.getMethodName()).append(":").append(element.getLineNumber()).append(System.lineSeparator()); } } Object parameter = null; if (invocation.getArgs().length > 1) { parameter = invocation.getArgs()[1]; } MappedStatement mappedStatement = (MappedStatement) invocation.getArgs()[0]; BoundSql boundSql = mappedStatement.getBoundSql(parameter); Configuration configuration = mappedStatement.getConfiguration(); String originalSql = showSql(configuration, boundSql); originalSql = originalSql.replaceAll("\'", "").replace("\"", ""); log.warn("检测到的慢SQL为:" + originalSql); log.warn("业务慢SQL入口为:" + slowLog.toString()); } catch (Throwable e1) { //忽略 } } return result; } public String showSql(Configuration configuration, BoundSql boundSql) { Object parameterObject = boundSql.getParameterObject(); List<ParameterMapping> parameterMappings = boundSql.getParameterMappings(); String sql = boundSql.getSql().replaceAll("[\\s]+", " "); if (parameterMappings.size() > 0 && parameterObject != null) { TypeHandlerRegistry typeHandlerRegistry…

  • 3.5.6.1 字段的配置

    字段组件类型 ttype可以配置哪些widget?本文这里把oinone平台默认支持的所有widget都进行了罗列,方便大家查阅。 字段组件匹配规则 字段组件没有严格的按组件名(widget)、字段类型(ttype)、视图组件类型(viewType)限定,而是一个匹配规则 按widget 最优先匹配 按最大匹配原则 ttype、viewType。每个属性权重一分 按后注册优先原则 通用属性 属性 属性描述 属性name 默认值 类型 标题 字段的标题名称 label – string 占位提示 一个字段的描述信息,常用于说明当前字典的范围、注意事项等 placeholder – string 描述说明 组件描述信息 hint – string 数据校验 与表单其他数据联动校验 validator – 表达式 数据校验不通过提示 数据校验不通过提示 validatorMessage 校验失败 string 只读 字段的状态,可见,不可编辑 readonly false boolean或者表达式 隐藏 字段的状态,不,不可编辑 invisible false boolean或者表达式 必填 字段是否必填 required false boolean或者表达式 禁用 字段是否禁用 disabled false boolean或者表达式 宽度 属性在页面中的宽度 colSpan 01/02 标题排列方式 标题排列方式: 水平 , 横向 layout vertical vertical | horizontal 默认值 默认值,多值逗号分割 defaultValue – 根据不同ttype有不同的默认值类型 表3-5-6-1 字段通用属性 字段组件大全 widget为"-"表明不需要指定,是该ttype默认widget 组件名称 widget 对应ttype 属性 属性描述 属性name 默认值 类型 单行文本 – STRING 通用属性 文本类型 密码:password; 文本: text type text string 最小长度 输入框填写数据时最少输入的长度值 minLength – number 最大长度 输入框填写数据时最多输入的长度值 maxLength – number 输入格式 单行文本组件特有的属性,通过规则校验内容,提供一些常用的,也支持自定义校验正则 pattern – 正则表达式 输入格式不通过 输入格式不通过提示语 tips 校验失败 string 显示计数器 设置输入框是否显示字数计数器 showCount FALSE boolean 显示清除按钮 设置输入框是否有一键清除的按钮及功能 allowClear TRUE TRUE 支持前缀 开启前缀 showPrefix FALSE boolean 支持后缀 开启后缀 showSuffix FALSE boolean 前缀类型 ICON: 图标; TEXT:文本 prefixType – string 后缀类型 ICON: 图标; TEXT:文本 suffixType – string 前缀内容 文本内容或者图标引用名 prefix – string 后缀内容 文本内容或者图标引用名 suffix – string 前缀存储 前缀存储, 仅前缀类型为文本可用 prefixStore – boolean 后缀存储 后缀存储, 仅后缀类型为文本可用 suffixStore – boolean 多行文本 -…

    2024年5月23日
    99700

Leave a Reply

登录后才能评论