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社区 作者：汤乾华原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/4253.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
![[前端]平台内置的基类](https://doc.oinone.top/wp-content/themes/justnews/themer/assets/images/lazy.png)
