OioProvider详解(v4.3.0)

OioProvider

OioProvider是平台的初始化入口。

示例入口 main.ts
import { VueOioProvider } from '@kunlun/dependencies';

VueOioProvider();

网络请求/响应配置 http

平台统一使用apollo作为统一的http请求发起服务,并使用GraphQL协议作为前后端协议。

参考文档:

配置方式
VueOioProvider({
  http?: OioHttpConfig
});
OioHttpConfig
/**
 * OioHttp配置
 */
export interface OioHttpConfig {
  /**
   * base url
   */
  url: string;

  /**
   * 拦截器配置
   */
  interceptor?: Partial<InterceptorOptions>;

  /**
   * 中间件配置(优先于拦截器)
   */
  middleware?: NetworkMiddlewareHandler | NetworkMiddlewareHandler[];
}

内置拦截器可选项 InterceptorOptions

/**
 * 拦截器可选项
 */
export interface InterceptorOptions {
  /**
   * 网络错误拦截器
   */
  networkError: NetworkInterceptor;

  /**
   * 请求成功拦截器 (success)
   */
  requestSuccess: NetworkInterceptor;

  /**
   * 重定向拦截器 (success)
   */
  actionRedirect: NetworkInterceptor;

  /**
   * 登录重定向拦截器 (error)
   */
  loginRedirect: NetworkInterceptor;

  /**
   * 请求错误拦截器 (error)
   */
  requestError: NetworkInterceptor;

  /**
   * MessageHub拦截器 (success/error)
   */
  messageHub: NetworkInterceptor;

  /**
   * 前置拦截器
   */
  beforeInterceptors: NetworkInterceptor | NetworkInterceptor[];

  /**
   * 后置拦截器
   */
  afterInterceptors: NetworkInterceptor | NetworkInterceptor[];
}

内置拦截器执行顺序:

  • beforeInterceptors:前置拦截器
  • networkError:网络错误
  • actionRedirect:重定向
  • requestSuccess 请求成功
  • loginRedirect:登录重定向
  • requestError:请求错误
  • messageHub:MessageHub
  • afterInterceptors:后置拦截器

NetworkInterceptor

/**
 * <h3>网络请求拦截器</h3>
 * <ul>
 *   <li>拦截器将按照注册顺序依次执行</li>
 *   <li>当任何一个拦截器返回false时,将中断拦截器执行</li>
 *   <li>内置拦截器总是优先于自定义拦截器执行</li>
 * </ul>
 *
 */
export interface NetworkInterceptor {
  /**
   * 成功拦截
   * @param response 响应结果
   */
  success?(response: IResponseResult): ReturnPromise<boolean>;

  /**
   * 错误拦截
   * @param response 响应结果
   */
  error?(response: IResponseErrorResult): ReturnPromise<boolean>;
}

自定义路由配置 router

配置方式
VueOioProvider({
  router?: RouterPath[]
});
RouterPath
/**
 * 路由配置
 */
export interface RouterPath {
  /**
   * 访问路径
   */
  path: string;
  /**
   * 路由组件名称
   */
  widget: string;
}
内置路由配置
[
  {
    path: '/login',
    widget: 'Login'
  },
  {
    path: '/forget',
    widget: 'ForgetPassword'
  },
  {
    path: '/first',
    widget: 'FirstResetPassword'
  }
]
  • login:登录页路由
  • forget:忘记密码页路由(非登录态)
  • first:首次登录页路由

外观配置

配置方式
VueOioProvider({
  copyrightStatus?: boolean;
  loginTheme?: OioLoginThemeConfig;
  browser?: OioProviderBrowserProps;
  theme?: ThemeName[];
});
copyrightStatus

是否显示copyright信息,默认显示(true)

OioLoginThemeConfig
/**
 * 登录主题配置
 */
export interface OioLoginThemeConfig {
  /**
   * 内置登录主题名称
   */
  name?: OioLoginThemeName;
  /**
   * 背景图片 url
   */
  backgroundImage?: string;
  /**
   * 背景色
   */
  backgroundColor?: string;
  /**
   * logo url
   */
  logo?: string;
  /**
   * 登录页logo显示位置
   */
  logoPosition?: OioLoginLogoPosition;
}

/**
 * 内置登录主题名称
 */
export enum OioLoginThemeName {
  /**
   * 大背景居左登录
   */
  LEFT_STICK = 'LEFT_STICK',
  /**
   * 大背景居右登录
   */
  RIGHT_STICK = 'RIGHT_STICK',
  /**
   * 大背景居中登录
   */
  CENTER_STICK = 'CENTER_STICK',
  /**
   * 大背景居中登录,logo在登录页里面
   */
  CENTER_STICK_LOGO = 'CENTER_STICK_LOGO',
  /**
   * 左侧登录
   */
  STAND_LEFT = 'STAND_LEFT',
  /**
   * 右侧登录
   */
  STAND_RIGHT = 'STAND_RIGHT'
}

/**
 * 登录页logo显示位置
 */
export enum OioLoginLogoPosition {
  /**
   * 左侧
   */
  LEFT = 'LEFT',
  /**
   * 右侧
   */
  RIGHT = 'RIGHT',
  /**
   * 中间
   */
  CENTER = 'CENTER'
}
OioProviderBrowserProps
/**
 * 浏览器配置
 */
export interface OioProviderBrowserProps {
  /**
   * 浏览器选项卡图标
   */
  favicon?: string;
  /**
   * 浏览器默认标题(仅用于非主页面)
   */
  title?: string;
}
ThemeName
type ThemeName =
  | 'default-large'
  | 'default-medium'
  | 'default-small'
  | 'dark-large'
  | 'dark-medium'
  | 'dark-small'
  | string;
  • default-large:默认大号主题
  • default-medium:默认中号主题(默认)
  • default-small:默认小号主题
  • dark-large:深色大号主题
  • dark-medium:深色中号主题
  • dark-small:深色小号主题
  • 其他:自定义主题
定义自定义主题
export const themeName = 'customTheme';

export const themeCssVars = {
  ......
};

主题变量参考文档:OioThemeCssVars

应用自定义主题
import { registerTheme } from '@kunlun/dependencies';
import { themeName, themeCssVars } from './theme';

registerTheme(themeName, themeCssVars);

VueOioProvider({
  theme: [themeName]
});

低无一体依赖配置 dependencies

配置方式
VueOioProvider({
  dependencies?: PluginLoadDependencies
});
PluginLoadDependencies
/**
 * 插件加载依赖
 */
export type PluginLoadDependencies = Record<string, unknown> | PluginLoadDependency[];

/**
 * 插件加载类型
 */
export type PluginLoadType = 'esm' | 'cjs' | 'umd' | 'iife' | 'css';

/**
 * 插件加载依赖
 */
export type PluginLoadDependency = {
  /**
   * 插件加载类型
   */
  type: PluginLoadType;
  /**
   * 依赖项
   */
  dependencies: Record<string, unknown>;
};

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

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

(0)
oinone的头像oinone
上一篇 2023年6月20日 下午4:07
下一篇 2023年11月2日 下午1:58

相关推荐

  • 接口日志内容记录频率限制功能说明

    为有效避免接口调用日志记录占用过多存储空间,从而减少对数据库资源的消耗,自5.2.0之后的版本,对于成功请求的集成接口与开放接口,其日志将不再进行完整记录。请求及响应参数将依据默认的千分之一概率进行选择性完整记录。 修改日志完整记录频率 日志完整记录频率默认0.01,即千分之一。 取值范围0~1,0为完全不记录,1为100%记录。 pamirs: eip: …

    2024年10月8日
    32800
  • 创建与编辑一体化

    在业务操作中,用户通常期望能够在创建页面后立即进行编辑,以减少频繁切换页面的步骤。我们可以充分利用Oinone平台提供的创建与编辑一体化功能,使操作更加高效便捷。 通过拖拽实现表单页面设计 在界面设计器中,我们首先需要设计出对应的页面。完成页面设计后,将需要的动作拖入设计好的页面。这个动作的关键在于支持一个功能,即根据前端传入的数据是否包含id来判断是创建操…

    2023年11月21日
    85800
  • 左树右表的配置,无代码方式实现

    场景 以公司的部门与员工为示例(需要建一个自关联字段) 第一步先在模型设计器界面创建一个员工模型 第二步在模式设计器界面创建一个部门模型,并建自关联字段与他表模型关联字段 1.创建部门模型 2.创建自关联字段 3.建关联其他模型字段 第三步在界面设计器页面设计树表 1.创建树表页面 2.设计树表 3.设计创建表单 第四步查看效果 1.先创建部门 2.再创建员…

    2023年11月20日
    69400
  • 工作流自定义转交/加签人函数执行时机使用说明

    在实际工作流程的应用过程中,我们注意到有小伙伴需要根据当前执行操作的用户,进行筛选转交或加签人员的列表。为了应对这个需求,我们在流程设计器新增了自定义函数执行时机选项。 使用说明 自定义函数执行时机为空时,逻辑同任务创建时生效。 任务创建时生效:当系统创建待办任务时,会立即调用自定义函数确定转交或加签人列表。 功能特性:效率更高,但无法知道当前操作的用户是谁…

    2024年8月23日
    55000
  • 数据可视化的导入导出

    目录 依赖包安装GraphQL的工具登录gql导出生成json文件子业务工程中导入示例代码 简介 通过调用导出接口,将设计器的设计数据与元数据打包导出到文件中。提供了download/export两类接口。 依赖包 <dependency> <groupId>pro.shushi.pamirs.metadata.manager<…

    2024年5月16日
    1.1K00

发表回复

登录后才能评论