4.2.7 框架之翻译工具

史, 昂 • 2024年5月23日 am8:31 • Oinone 7天入门到精通 • 阅读 388

一、说明

Oinone目前的默认文案是中文，如果需要使用其他语言，Oinone也提供一系列的翻译能力。

二、定义语言文件

在src/local下新增一个名为zh_cn.ts文件:

图4-2-7-1 语言文件

编辑zh_cn.ts文件，增加以下内容：


const zhCN = {
    demo: {
        test: '这是测试'
    }
}
export default zhCN
generic
76 Bytes
© Oinone社区
const zhCN = {
    demo: {
        test: '这是测试'
    }
}

export default zhCN

图4-2-7-2 语言内容格式示意

在mian.ts注册语言资源：


import { LanguageType, registryLanguage} from '@kunlun/dependencies';
import Zh_cn from './local/zh_cn'
registryLanguage(LanguageType['zh-CN'], Zh_cn);
generic
151 Bytes
© Oinone社区
import { LanguageType, registryLanguage} from '@kunlun/dependencies';
import Zh_cn from './local/zh_cn'
registryLanguage(LanguageType['zh-CN'], Zh_cn);

图4-2-7-3 注册语言

三、Vue模板使用


<template>
  <div class="petFormWrapper">
    <form :model="formState" @finish="onFinish">
      <a-form-item :label="translate('demo.test')" 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 } from 'vue';
import { Form } from 'ant-design-vue';
export default defineComponent({
  // 引入translate
  props: ['onChange', 'reloadData', 'serviceErrors', 'translate'],
  components: { Form },
  setup(props) {
    const formState = reactive({
      kind: '',
      name: '',
    });
    const onFinish = () => {
      console.log(formState);
    };
    const onNameChange = (event, name) => {
      props.onChange(name, event.target.value);
    };
    const reloadData = async () => {
      await props.reloadData();
    };
    const getServiceError = (name: string) => {
      const error = props.serviceErrors.find(error => error.name === name);
      return error ? error.error : '';
    }
    return {
      formState,
      reloadData,
      onNameChange,
      onFinish,
      getServiceError
    };
  }
});
</script>
generic
1.6 KB
© Oinone社区
<template>
  <div class="petFormWrapper">
    <form :model="formState" @finish="onFinish">
      <a-form-item :label="translate('demo.test')" 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 } from 'vue';
import { Form } from 'ant-design-vue';

export default defineComponent({
  // 引入translate
  props: ['onChange', 'reloadData', 'serviceErrors', 'translate'],
  components: { Form },
  setup(props) {
    const formState = reactive({
      kind: '',
      name: '',
    });

    const onFinish = () => {
      console.log(formState);
    };

    const onNameChange = (event, name) => {
      props.onChange(name, event.target.value);
    };

    const reloadData = async () => {
      await props.reloadData();
    };

    const getServiceError = (name: string) => {
      const error = props.serviceErrors.find(error => error.name === name);
      return error ? error.error : '';
    }

    return {
      formState,
      reloadData,
      onNameChange,
      onFinish,
      getServiceError
    };
  }
});
</script>

图4-2-7-4 Vue模板使用示例

效果

图4-2-7-5 示例效果

四、JS使用-translate


<template>
  <div class="petFormWrapper">
    <form :model="formState" @finish="onFinish">
      <a-form-item :label="translate('demo.test')" 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, onMounted } from 'vue';
// 引入
import { translate } from '@kunlun/dependencies';
import { Form } from 'ant-design-vue';
export default defineComponent({
  props: ['onChange', 'reloadData', 'serviceErrors', 'translate'],
  components: { Form },
  setup(props) {
    const formState = reactive({
      kind: '',
      name: '',
    });
    const onFinish = () => {
      console.log(formState);
    };
    const onNameChange = (event, name) => {
      props.onChange(name, event.target.value);
    };
    const reloadData = async () => {
      await props.reloadData();
    };
    const getServiceError = (name: string) => {
      const error = props.serviceErrors.find(error => error.name === name);
      return error ? error.error : '';
    }
    onMounted(() => {
      // 使用
      const test = translate('demo.test');
      console.log(test);
    });
    return {
      formState,
      reloadData,
      onNameChange,
      onFinish,
      getServiceError
    };
  }
});
</script>
generic
1.76 KB
© Oinone社区
<template>
  <div class="petFormWrapper">
    <form :model="formState" @finish="onFinish">
      <a-form-item :label="translate('demo.test')" 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, onMounted } from 'vue';
// 引入
import { translate } from '@kunlun/dependencies';
import { Form } from 'ant-design-vue';

export default defineComponent({
  props: ['onChange', 'reloadData', 'serviceErrors', 'translate'],
  components: { Form },
  setup(props) {
    const formState = reactive({
      kind: '',
      name: '',
    });

    const onFinish = () => {
      console.log(formState);
    };

    const onNameChange = (event, name) => {
      props.onChange(name, event.target.value);
    };

    const reloadData = async () => {
      await props.reloadData();
    };

    const getServiceError = (name: string) => {
      const error = props.serviceErrors.find(error => error.name === name);
      return error ? error.error : '';
    }

    onMounted(() => {
      // 使用
      const test = translate('demo.test');
      console.log(test);
    });

    return {
      formState,
      reloadData,
      onNameChange,
      onFinish,
      getServiceError
    };
  }
});
</script>

图4-2-7-6 JS使用-translate示例

图4-2-7-7 示例效果

五、JS使用-translateValueByKey

translateValueByKey和translate的区别是，获取资源的路径不同，translate从前端定义中获取对应的翻译，translateValueByKey是从平台翻译功能中配置得来。建议使用


import { translateValueByKey } from '@kunlun/dependencies';
translateValueByKey("中文名称") || "默认值"
generic
96 Bytes
© Oinone社区
import { translateValueByKey } from '@kunlun/dependencies';
translateValueByKey("中文名称") || "默认值"

图4-2-7-8 JS使用-translateValueByKey示例

六、翻译dslNode

处理xml的国际化


import { translateNode } from '@kunlun/translateValueByKey';
translateNode(dslNode);
generic
84 Bytes
© Oinone社区
import { translateNode } from '@kunlun/translateValueByKey';
translateNode(dslNode);

图4-2-7-9 翻译dslNode示例

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

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

Oinone 7天从入门到精通

史, 昂数式管理员

0 0

4.2.8 自定义组件与设计器结合（新）

上一篇 2024年5月23日 am8:30

4.2.6 框架之网络请求-拦截器

下一篇 2024年5月23日 am8:32

Oinone 7天入门到精通

6.1 文件与导入导出（改）

导入导出在一定程度上是企业级软件和效率工具（office工具）的桥梁文件的上传下载以及业务数据的导入导出是企业级软件一个比较常规的需求，甚至是巨量的需求。业务有管理需要一般都伴随有导入导出需求，导入导出在一定程度上是企业级软件和效率工具（office工具）的桥梁。oinone的文件模块就提供了通用的导入导出实现方案，以简单、一致、可扩展为目标，简单是快速入门，一致是用户操作感知一致、可扩展是满足用户最大化的自定义需求。下图为文件导入导出的实现示意图，大家可以做一个整体了解图6-1-1 文件导入导出实现示意图一、基础能力准备工作 pamirs-demo-api的pom文件中引入pamirs-file2-api包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-file2-api</artifactId> </dependency> 图6-1-2 引入pamirs-file2-api包依赖 DemoModule增加对FileModule的依赖 @Module(dependencies = {FileModule.MODULE_MODULE}) 图6-1-3 DemoModule增加对FileModule的依赖 pamirs-demo-boot的pom文件中引入pamirs-file2-core包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-file2-core</artifactId> </dependency> 图6-1-4 启动工程引入pamirs-file2-core包依赖 pamirs-demo-boot的application-dev.yml文件中增加配置pamirs.boot.modules增加file，即在启动模块中增加file模块 pamirs: boot: modules: – file 图6-1-5 pamirs-demo-boot的application-dev.yml文件中增加配置 pamirs-demo-boot的application-dev.yml文件中增加oss的配置。更多有关文件相关配置详见4.1.1【模块之yml文件结构详解】一文 cdn: oss: name: 阿里云 type: OSS bucket: demo uploadUrl: #换成自己的oss上传服务地址 downUrl: #换成自己的oss下载服务地址 accessKeyId: #阿里云oss的accessKeyId accessKeySecret: #阿里云oss的accessKeySecret mairDir: upload/demo #换成自己的目录 validTime: 360000 timeout: 60000 active: true referer: www.shushi.pro 图6-1-6 application-dev.yml文件中增加oss的配置其他文件系统支持 a. 文件系统类型类型服务 OSS 阿里云 UPYUN 又拍云 MINIO Minio HUAWEI_OBS 华为云 LOCAL 本地文件存储表6-1-1 支持的文件系统类型 b. OSS配置示例 ⅰ. 华为云OBS cdn: oss: name: 华为云 type: HUAWEI_OBS bucket: pamirs #(根据实际情况修改) uploadUrl: obs.cn-east-2.myhuaweicloud.com downloadUrl: obs.cn-east-2.myhuaweicloud.com accessKeyId: 你的accessKeyId accessKeySecret: 你的accessKeySecret # 根据实际情况修改 mainDir: upload/ validTime: 3600000 timeout: 600000 active: true allowedOrigin: http://192.168.95.31:8888,https://xxxx.xxxxx.com referer: 图6-1-7 OBS的配置说明 ⅱ. MINIO cdn: oss: name: minio type: MINIO bucket: pamirs #(根据实际情况修改) uploadUrl: http://192.168.243.6:32190 #(根据实际情况修改) downloadUrl: http://192.168.243.6:9000 #(根据实际情况修改) accessKeyId: 你的accessKeyId accessKeySecret: 你的accessKeySecret # 根据实际情况修改 mainDir: upload/ validTime: 3600000 timeout: 600000 active: true referer: localFolderUrl: 图6-1-8 MINIO的配置说明 ⅲ. 又拍云 cdn: oss: name: 又拍云 type: UPYUN bucket: pamirs #(根据实际情况修改) uploadUrl: v0.api.upyun.com downloadUrl: v0.api.upyun.com accessKeyId: 你的accessKeyId accessKeySecret: 你的accessKeySecret # 根据实际情况修改 mainDir: upload/ validTime: 3600000 timeout: 600000…

史, 昂
2024年5月23日
515000
组件介绍

在设计页面时，页面中的所有内容均是由组件组成，每个组件有不同的属性，可以灵活的对每个组件的属性进行设置，以满足业务场景。组件分为四类，分别是布局、字段、动作、数据 1. 布局布局类组件主要用于页面的样式排版。分组：类似一个容器，可以把业务含义相近的内容放在这个分组容器内。选项卡：类似一个容器，每个选项卡可以添加多个选项页，可以把业务含义相近的内容放在选项卡的选项页容器内。 2. 字段字段型组件是常用，也是用于支撑页面的主要组件类，每个字段型组件都对应一个模型字段。单行文本：常用于记录名称、身份证号或其他普通的文字内容。多行文本：常用于记录字数较多的文字，如意见、复杂备注等。整数：常用于输入整数的天数、数量等，如果会出现小数，请使用小数组件。小数：常用于输入金额、单价等，会出现小数的数值。下拉单选：从多个选项中下拉选择一个数据，作为数据值。选项可以是关联模型的数据，也可以是数据字典或布尔型开关。下拉多选：从多个选项中下拉选择多个数据，作为数据值。选项可以是关联模型的数据，也可以是数据字典。开关：常用于只有是否两种对立选项的选择。单选框：常用于在直接展示的选现中单选一个值，例如选择性别。复选框：常用于在直接展示的选现中多选一个值，例如选择爱好、选择课程等。富文本编辑器：一种可内嵌于浏览器，所见即所得的文本编辑器，类似于Office Word 的编辑功能，常应用于篇幅较长的说明性文字，支持改变字体样式、插入图片等。年份：常用于选择出身年份、一项计划的年份等。日期：常用于选择颗粒度到日期的Date类型字段，例如出生日期、入职日期、入驻日期等。日期时间：常用于选择颗粒度到时间的DateTime类型的字段，例如下单时间、发货时间、审批时间等。时间：常用于选择仅时间无日期的Time类型的字段，如设置规章中的上班时间、日志的提交时间等。颜色选择器：应用于自定义颜色，如设置标签的颜色、设置产品的颜色属性、主题定制时选择色彩等。文件上传：常用于上传附件、文件，例如Office文档、图片、视频、音频、其他格式的文件等。图片上传：常用于上传记录的图片，例如上传身份证照片、头像、商品图片等。标签：可输入保存多值，例如用户的标记标签。 3. 数据与数据可视化设计器进行联动，可以选择自定义的图表或报表，在页面展示。图表：可以选择数据可视化设计器中允许被引用的图表，展示在页面中报表：可以选择数据可视化设计器中允许被引用的报表，展示在页面中

史, 昂
Oinone 7天入门到精通 2024年6月20日
623000
Oinone 7天入门到精通

3.3.2 模型的类型

本文会介绍不同类型模型以及其简单的应用场景，方便大家理解不同类型模型的用途模型分为元模型和业务模型。元数据是指描述应用程序运行所必需的数据、规则和逻辑的数据集；元模型是指用于描述内核元数据的一套模式集合；业务模型是指用于描述业务应用元数据的一套模式集合。元模型分为模块域、模型域和函数域三个域。域的划分规则是根据元模型定义数据关联关系的离散性来判断，离散程度越小越聚集到一个域。在4.1.4【模块元数据详解】一文中介绍的ModuleDefinition就是元模型。而我们在开发中涉及的就是业务模型一、模型类型抽象模型：往往是提供公共能力和字段的模型，它本身不会直接用于构建协议和基础设施（如表结构等）。传输模型：用于表现层和应用层之间的数据交互，本身不会存储，没有默认的数据管理器，只有数据构造器。存储模型：存储模型用于定义数据表结构和数据的增删改查（数据管理器）功能，是直接与连接器进行交互的数据容器。代理模型：用于代理存储模型的数据管理器能力的同时，扩展出非存储数据信息的交互功能的模型。二、模型定义种类模型定义就是模型描述，不同定义类型，代表计算描述模型的元数据的规则不同静态模型定义：模型元数据不持久化、不进行模型定义的计算（默认值、主键、继承、关联关系）静态计算模型定义：模型元数据不持久化但初始化时进行模型定义计算获得最终的模型定义动态模型定义：模型元数据持久化且初始化时进行模型定义计算获得最终的模型定义静态模型定义需要使用@Model.Static进行注解；静态计算模型定义使用@Model.Static(compute=true)进行注解;动态模型定义不注解@Model.Static注解。三、安装与更新使用@Model.model来配置模型的不可变更编码。模型一旦安装，无法在对该模型编码值进行修改，之后的模型配置更新会依据该编码进行查找并更新；如果仍然修改该注解的配置值，则系统会将该模型识别为新模型，存储模型会创建新的数据库表，而原表将会rename为废弃表。如果模型配置了@Base注解，表明在【oinone的设计器】中该模型配置不可变更；如果字段配置了@Base注解，表明在【oinone的设计器】中该字段配置不可变更。四、基础配置模型基类所有的模型都需要继承以下模型中的一种，来表明模型的类型，同时继承以下模型的默认数据管理器（详见3.3.3模型的数据管理器一节）。继承BaseModel，构建存储模型，默认无id属性。继承BaseRelation，构建多对多关系模型，默认无id属性。继承TransientModel，构建临时模型（传输模型），临时模型没有数据管理器，也没有id属性。继承EnhanceModel，构建数据源为ElasticSearch的增强模型。快捷继承继承IdModel，构建主键为id的模型。继承IdModel的模型会数据管理器会增加queryById方法（根据id查询单条记录）继承CodeModel，构建带有唯一编码code的主键为id的模型。可以使用@Model.Code注解配置编码生成规则。也可以直接覆盖CodeModel的generateCode方法或者自定义新增的前置扩展点自定义编码生成逻辑。继承CodeModel的模型会数据管理器会增加queryByCode方法（根据唯一编码查询单条记录）继承VersionModel，构建带有乐观锁，唯一编码code且主键为id的模型。继承IdRelation，构建主键为id的多对多关系模型。模型继承关系图图3-3-2-1 模型继承关系图 AbstractModel抽象基类是包含createDate创建时间、writeDate更新时间、createUid创建用户ID、writeUid更新用户ID、aggs聚合结果和activePks批量主键列表等基础字段的抽象模型。 TransientModel传输模型抽象基类是所有传输模型的基类，传输模型不存储，没有数据管理器。 TransientRelation传输关系模型是所有传输关系模型的基类，传输关系模型不存储，用于承载多对多关系，没有数据管理器。 BaseModel存储模型基类提供数据管理器功能，数据模型主键可以不是ID。 IdModel带id模型抽象基类，在BaseModel数据管理器基础之上提供根据ID查询、更新、删除数据的功能。 BaseRelation关系模型抽象基类用于承载多对多关系，是多对多关系的中间模型，数据模型主键可以不是ID。 IdRelation带id关系模型抽象基类，在BaseRelation数据管理器基础之上提供根据ID查询、更新、删除数据的功能。 CodeModel带code模型抽象基类，提供按配置生成业务唯一编码功能，根据code查询、更新、删除数据的功能。 EnhanceModel增强模型，提供全文检索能力。此模型会在4.1.25【框架之搜索引擎】一文中展开介绍。五、抽象模型（举例）抽象模型本身不会直接用于构建协议和基础设施（如表结构等），而是通过继承的机制供子模型复用其字段和函数。子模型可以是所有类型的模型。比如demo模块要管理的一些公共模型字段，我们可以建一个AbstractDemoIdModel和AbstractDemoCodeModel，demo模块中的实体模型就可以继承它们。我们来为demo模块的模型统一增加一个数据状态这么一个字段，用做数据的生效与失效管理。 Step1 引入DataStatusEnum类 pamirs-demo-api的pom.xml包增加依赖，便于引入DataStatusEnum类，当然也可以自己建，这里只是oinone提供了统一的数据记录状态的枚举，以及相应的通用方法，这边就直接引入 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-core-common</artifactId> </dependency> 图3-3-2-2 引入通用类库 Step2 修改DemoModule DataStatusEnum枚举类本身也会做为数据字典，以元数据的方式被管理起来，当一个模块依赖另一个模块的元数据相关对象，则需要改模块的模块依赖定义。为DemoModule增加CommonModule的依赖注解 package pro.shushi.pamirs.demo.api; import org.springframework.stereotype.Component; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxHomepage; import pro.shushi.pamirs.core.common.CommonModule; import pro.shushi.pamirs.demo.api.model.PetShop; import pro.shushi.pamirs.meta.annotation.Module; import pro.shushi.pamirs.meta.base.PamirsModule; import pro.shushi.pamirs.meta.common.constants.ModuleConstants; @Component @Module( name = DemoModule.MODULE_NAME, displayName = "oinoneDemo工程", version = "1.0.0", dependencies = {ModuleConstants.MODULE_BASE, CommonModule.MODULE_MODULE} ) @Module.module(DemoModule.MODULE_MODULE) @Module.Advanced(selfBuilt = true, application = true) @UxHomepage(@UxRoute(PetShop.MODEL_MODEL)) public class DemoModule implements PamirsModule { public static final String MODULE_MODULE = "demo_core"; public static final String MODULE_NAME = "DemoCore"; @Override public String[] packagePrefix() { return new String[]{ "pro.shushi.pamirs.demo"}; } } 图3-3-2-3 定义模块依赖 Step3 新建AbstractDemoCodeModel和AbstractDemoIdModel 并新增AbstractDemoIdModel和AbstractDemoCodeModel分别继承IdModel和CodeModel，实现IDataStatus接口不是必须的，刚好DataStatus有配套的通用逻辑，暂时也先加进去，具体使用会在本文的【代理模型】这段介绍 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.core.common.behavior.IDataStatus; import pro.shushi.pamirs.core.common.enmu.DataStatusEnum; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.annotation.sys.Base; import pro.shushi.pamirs.meta.base.common.CodeModel; import pro.shushi.pamirs.meta.enmu.ModelTypeEnum; @Base @Model.model(AbstractDemoCodeModel.MODEL_MODEL) @Model.Advanced(type = ModelTypeEnum.ABSTRACT) @Model(displayName = "AbstractDemoCodeModel") public abstract class AbstractDemoCodeModel extends CodeModel implements IDataStatus { public static final String MODEL_MODEL="demo.AbstractDemoCodeModel"; @Base @Field.Enum @Field(displayName = "数据状态",defaultValue = "DISABLED",required =…

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

7.1 设计器总览

设计器转为非专业研发设计，在Oinone3.0版本中已经完成元数据完整在线化，真正做到低无一体。对于设计器的定位我们开篇就介绍过，它是LCDP的产品化呈现，是冰山露在外面大家看得到的，核心还是在LCDP本身。我们先目睹下设计器的一些产品页面，如您有想体验，可以在Oinone官网注册模型设计器 Oinone以模型为驱动，当有模型、数据字典、数据编码等设计功能，我们就可以完整地定义产品数据模型，模型设计器整体呈现区别于普通ER图，以当前模型为核心视角展开，可以点击关联模型切换主视角。这样的好处在于突出当前设计，聚焦设计本身。同时模型上预留了几个核心入口如：分类管理、继承拓扑图、页面设计、逻辑设计等。另外我们在体验上区分了专家模式和经典模式，顾名思义，专家模式的功能会更加丰富，对专业知识的要求也会更高。专家模式下一般会增加一些跟业务无关的配置如：索引设置等调优行为逻辑设计器从图灵完备的角度上说，要支持功能越完备，使用越复杂。我们优先从图灵完备的角度出发，所以我们第一版逻辑设计器相对比较复杂，第二版本规划中会类似模型设计器推出专家版和经典版。界面设计器界面设计器第一版会先支撑后端页面在线自定义，后边将陆续推出前端页面、多端能力。为了支持多端和2C页面的设计，我们对前后端协议做了比较大的改造。目前设计器已经支持完全基于V3的前后端协议。数据可视化数据可视化支持从内部系统模型获取数据内容后，根据业务需求自定义图表，目的是为企业提供更高效的数据分析工具。与市场同类产品相比，我们的数据可视化产品：不需要前置维护数据源、进行数据转换；可智取业务系统模型，系统自动解析选择的模型、接口、表格中的字段后进行数据分析；降低对数据分析人员研发能力要求的同时，也提升了数据分析的效率。流程设计器 Oinone流程设计器为业务流程和审批流程提供了可自动执行的流程模型：通过定义流转过程中的各个动作、规则，以此实现流程自动化。在Oinone流程设计器中，流程可以跨应用设计，不同应用的模型之间可以通过同一流程执行。

史, 昂
2024年5月23日
609002
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日
442000

登录后才能评论

4.2.7 框架之翻译工具

一、说明

二、定义语言文件

三、Vue模板使用

四、JS使用-translate

五、JS使用-translateValueByKey

六、翻译dslNode

相关推荐

6.1 文件与导入导出（改）

组件介绍

3.3.2 模型的类型

7.1 设计器总览

3.5.7.7 自定义主题

Leave a Reply