相关推荐

• Oinone 7天入门到精通

  3.5.6.3 布局的配置

  布局是将页面拆分成一个一个的小单元，按照上下中左右进行排列。 前沿 在前端领域中，布局可以分为三大块「Float、Flex、Grid 」，Float可以说的上是上古时期的布局了，如今市面还是很少见的，除了一些古老的网站。 目前，平台主要支持通过配置XML上面的cols和span来进行布局。平台也同样支持自由布局，合理的使用row、col、containers和container四个布局容器相关组件，将可以实现各种类型的布局样式，换句话说，平台实现的自由布局功能是Flex和Grid的结合体。 这里主要是讲解Flex和Grid布局，以及目前新的模板布局实现的思路。 Flex布局 Flex布局采用的是一维布局，那么什么是一维布局呢，所谓的一维布局就是只有一个方向、没有体积、面积，比如一条直线。它适合做局部布局，就像我们原来的顶部菜单、面包屑导航，以及现在的主视图字段配置。 图3-5-6-19 Flex布局示意 图3-5-6-20 Flex布局示意 图3-5-6-21 Flex布局示意 从上图可以看看出，Flex布局只能在X、Y轴进行转换，它无法对上下左右四个方向同时处理，因为它没“面积”的概念。所以它最适合做局部布局。 优点 图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);…

  史, 昂

  2024年5月23日

  1.6K000
• Oinone 7天入门到精通

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

  在整个http的链路中，异常错误对前端来说尤为重要，他作用在很多不同的场景，通用的比如500, 502等; 一个好的软件通常需要在不同的错误场景中做不同的事情。当用户cookie失效时，希望能自动跳转到登录页；当用户权限发生变更时，希望能跳转到一个友好的提示页；那么如何满足这些个性化的诉求呢？接下来让我们一起了解oinone前端网络请求-拦截器。 一、入口 在src目录下main.ts中可以看到VueOioProvider，这是系统功能提供者的注册入口 图4-2-6-1 VueOioProvider import interceptor from './middleware/network-interceptor'; VueOioProvider( { http: { callback: interceptor } }, [] ); 图4-2-6-2 拦截器的申明入口 二、middleware 在项目初始化时使用CLI构建初始化前端工程，在src/middleware有拦截器的默认实现： 图4-2-6-3 在src/middleware有拦截器的默认实现 三、interceptor interceptor在请求返回后触发，interceptor有两个回调函数，error和next error参数 graphQLErrors 处理业务异常 networkError 处理网络异常 next extensions 后端返回扩展参数 const interceptor: RequestHandler = (operation, forward) => { return forward(operation).subscribe({ error: ({ graphQLErrors, networkError }) => { console.log(graphQLErrors, networkError); // 默认实现 => interceptor error }, next: ({ extensions }) => { console.log(extensions); // 默认实现 => interceptor next }, }); }; 图4-2-6-4 后端返回扩展参数 四、interceptor error // 定义错误提示等级 const DEFAULT_MESSAGE_LEVEL = ILevel.ERROR; // 错误提示等级 对应提示的报错 const MESSAGE_LEVEL_MAP = { [ILevel.ERROR]: [ILevel.ERROR], [ILevel.WARN]: [ILevel.ERROR, ILevel.WARN], [ILevel.INFO]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO], [ILevel.SUCCESS]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO, ILevel.SUCCESS], [ILevel.DEBUG]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO, ILevel.SUCCESS, ILevel.DEBUG] }; // 错误提示通用函数 const notificationMsg = (type: string = 'error', tip: string = '错误', desc: string = '') => { notification[type]({ message: tip, description: desc }); }; // 根据错误等级 返回错误提示和类型 const getMsgInfoByLevel = (level: ILevel) => { let notificationType = 'info'; let notificationText = translate('kunlun.common.info'); switch (level) { case ILevel.DEBUG: notificationType = 'info'; notificationText = translate('kunlun.common.debug'); break; case ILevel.INFO: notificationType = 'info'; notificationText = translate('kunlun.common.info'); break;…

  史, 昂

  2024年5月23日

  1.7K000
• 产品使用手册

  新版权限操作手册（5.0以上）

  一 整体介绍 1. 角色类型： 为了更好地管理和控制平台中的不同用户，权限系统将对角色进行分类定义。通过角色分类，可以更高效地管理同一类角色，无需单独操作每个角色，实现统一管理。 2. 角色管理： 角色管理是权限系统中的一个基础功能，负责管理具体角色的创建、编辑和禁用，以及对角色的单独操作。 3. 系统权限： 可配置某个应用或其下的某个菜单、某个应用的首页的管理权限和访问权限。 管理权限：赋予某角色后，该角色具备向下分配权限的能力。 访问权限：赋予某角色后，该角色可进行访问。访问权限可配置多个权限组，不同权限组可授权给不同角色。 注： 此处应用下的“首页”菜单是在【应用中心-设置首页-绑定视图】中配置的视图。权限控制是针对这个视图进行的。只有当在设置首页时选择了绑定视图，应用下才会有对应的“首页”菜单；否则，该菜单将不可见。 当【应用中心-设置首页-绑定菜单】只需单独为应用下的某个菜单进行授权即可。 拥有访问权限并不代表拥有管理权限，同理，拥有管理权限也不代表拥有访问权限。这两种权限需要单独授权。二者并无直接关系。 4. 数据权限项和数据权限： 数据权限项：通过为某个模型配置过滤条件来定义特定的数据访问规则，但这些规则不会立即生效。它们需要与数据权限配合使用，以实现精细化的数据访问权限控制。 数据权限：为多个角色应用指定多个数据权限项，类似于系统权限的管理，但其范围更广泛，涵盖了对所有模块的授权。 通过数据权限项定义具体的访问规则，再通过数据权限将这些规则分配给不同的角色，以实现全面的权限控制。 二 操作手册 2.1 创建用户、绑定角色 创建一个名为testName的用户。 2.1.2 用户与角色的绑定（3种方式） 2.1.2.1 创建用户时为其单个或批量绑定角色 在创建用户页面进行添加绑定的角色，勾选完成，点击“确定”，完成角色的添加。 2.1.2.2 修改用户时为其单个或批量绑定角色 在修改用户页面进行添加绑定的角色，勾选完成，点击“确定”，完成角色的添加。 2.1.2.3 选择指定用户为其单个或批量绑定角色 指定用户后点击绑定角色，进行绑定的角色。 2.2 应用的授权–访问权限 访问权限是指将特定应用程序授权给相应的角色，一旦用户被分配到这些角色，他们将获得访问该应用程序的权限。确保了只有经过认证的用户才能访问特定的应用功能或数据。 2.2.1 应用与角色的授权–访问权限 选择系统权限，点击某个想要为其授权的应用。 添加角色，点击“确定”按钮，为应用授权。 授权成功，显示可以访问此应用的角色。 2.2.2 菜单与角色的授权–访问权限 选中系统权限，点击某个想要为其授权的菜单，为其添加权限组。 配置权限组，保存配置。 为权限组授权对应的角色。 授权成功，显示可以访问此菜单的角色。 2.2.3 批量授权–访问权限 我们支持对单个或多个应用程序及其菜单执行批量授权操作，以授予相应的访问权限。 角色权限访问： 角色未被授予应用的访问权限时，即使授予了菜单权限也无法访问。 角色被授予应用访问权限但未被授予菜单权限时，仍然无法访问菜单。 只有当角色同时被授予应用和菜单的权限时，才能访问相关菜单。 批量授权： 该功能仅作为添加角色至应用或菜单配置访问权限的入口。 批量授权： 在批量授权过程中，平台会自动创建一个默认权限组，这个权限组赋予了用户管理所有数据和当前菜单下所有管理权限的能力。这个默认权限组的创建会根据不同的平台版本进行区分处理。 在5.0.4版本之前，平台在创建默认权限组时，并不会自动勾选动作权限。 从5.0.4版本开始，包括5.0.4版本在内，平台会自动勾选所有动作权限，简化了授权流程。 值得注意的是，默认权限组在首次创建时遵循当时的动作权限规则。如果后续进行多次批量授权，平台不会重新创建默认权限组，而是保留之前的设置。因此，即使在后续的批量授权过程中，动作权限也会保持之前的状态。 总结来说，批量授权时，平台会根据版本自动创建带有或不带有动作权限的默认权限组，且该默认权限组在多次授权过程中保持不变，不会随每次授权而更新其动作权限设置。 找到系统权限菜单，点击批量配置。 选择单个或多个应用为其添加访问权限，点击添加角色进行添加操作。 进入添加角色页面。 选择需要添加的角色，点击“确定”按钮，完成角色的授权。 在批量授权过程中，添加角色框中的角色将被视为本次批量授权的角色。 此时完成批量授权，点击取消批量即可。 验证是否批量授权成功：点击已经授权的应用下某一菜单，看到“管理所有数据”下有我们添加的“子管理员”。 2.3 应用的授权–管理权限 管理权限涉及将应用程序的管理功能授权给特定角色，例如“子管理员”。拥有管理权限的角色能够进一步授权其他用户管理权限，可以向下分配。通过这种方式，组织可以实施分级的管理结构，确保各级管理员能够有效地管理和分配资源。 注：如果要为应用授予管理权限，则该应用下的所有菜单也会被授予管理权限。此外，也可以单独为某个应用下的特定菜单授予管理权限。 2.3.1 应用与角色的授权–管理权限 选择系统权限，点击某个想要为其授予管理权限的应用。 进入添加角色页面。 添加可管理此应用的角色，点击“确定”，完成角色的授权。 授权成功，显示可以管理此应用的角色。 2.3.2 菜单与角色的授权–管理权限 选择系统权限，点击某个想要为其授予管理权限的菜单。 进入添加角色页面。 添加可管理此菜单的角色，点击“确定”，完成角色的授权。 授权成功，显示可以管理此菜单的角色。 2.2 实例：向下分配权限–子管理员 子管理员描述 管理权限向下分配能力：子管理员可以向下分配管理权限，包括向其他角色授予或取消某应用、菜单或首页的管理权限。 访问权限：子管理员被授予访问权限，可以访问平台中指定的应用、菜单或首页。 持续的管理权限向下分配：子管理员可以持续地向下分配管理权限，确保权限的适当控制和分配。 子管理员一定要为管理中心应用配置访问和管理权限。 2.2.1 创建一个名字为“子管理员”的角色 2.2.2 角色与用户的绑定 2.2.3 为子管理员分配应用的管理权限 如果要为应用授予管理权限，则该应用下的所有菜单也会被授予管理权限。此外，也可以单独为某个应用下的特定菜单授予管理权限。 应用管理权限的分配 选择系统权限，点击某个想要为其授予管理权限的应用。 进入添加角色页面。 添加可管理此应用的角色，点击“确定”，完成角色的授权。 授权成功，显示可以管理此应用的角色。 2.2.4 登录子管理员继续向下级分配权限 输入账号、密码，点击登录。 在上级角色中我们已经为“子管理员”角色，授权了管理中心的管理、访问权限和具体的某个应用的管理权限。 选择系统权限，点击某个想要为其授权的应用。在此页面“子管理员”这一角色还可以根据所需的业务场景继续向下级分配管理权限和访问权限。 至此，已成功实现子管理员角色所需的管理权限的配置。子管理员随后可依循相同流程，对下属用户进行相应的权限分配。

  萧炎

  2024年7月2日

  6.5K000
• Oinone 7天入门到精通

  接口日志

  记录每个PAPI接口执行日志，接口的响应结果、执行时间、执行时长等信息，可查看接口详情。 接口详情

  史, 昂

  2023年5月23日

  1.5K000
• 产品使用手册

  多tab栏样式

  该模块允许用户自定义多Tab栏的显示与行为设置，通过启用或关闭标签页功能来控制系统风格。

  萧炎

  2024年9月20日

  1.1K000