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低代码应用平台体验
 
                
 
         
                    