tiklab-plugin-ui

TODO: 插件管理 插件加载对错误捕获有限，只支持react提供的错误边界执行能力 注意: 插件中需要使用到国际化，必选在项目中通过extraProps中传递 使用占位符拉传

V2 版本文档说明

npm i tiklab-plugin-ui

#插件错误边界不能捕获的

参考react文档：错误边界

| 不能捕获 | | |-------------------|---| | 事件错误 | x | | 异步代码 | x | | 服务端渲染 和 错误边界自己的错误 | x |

initFetch

初始化相关插件数据

| 组件名称 | 描述 | | ---- |------------------| | method | 请求方式 | | routes | 项目路由 | | languages | 项目中中语言资源 | | i18n | useTranslation中的 i18n|

加载的国际化语言包会自动注入到 项目中的 i18n 中，自行调用切换方法以及获取多个语言数据

    const [pluginData,setPluginData] = useState({
        routes,
        pluginStore:[],
        languageStore:[]
    });
    const [viable,setViable] = useState(false);

    
    // 新增
    const {i18n, t} = useTranslation();
    useEffect(() => {
        // 修改
        initFetch('post', routes, resources, i18n).then(res => {
            setPluginData(res)
        })
    }, []);

    if (!viable) {
        return <div>加载中</div>
    }
    return (
        <PluginProvider store={pluginData}>
            <Provider {...allStore}>
                <HashRouter>
                    {
                        renderRoutes(pluginData.routes)
                    }
                </HashRouter>
            </Provider>
        </PluginProvider>
    );

#createContainer

插件全局数据的方法

使用如下

const CounterContainer = createContainer();
return (
    <CounterContainer.Provider initialState={pluginData}>
        <Provider {...allStore}>
            <HashRouter>
                {
                    renderRoutes(pluginData.routes)
                }
            </HashRouter>
        </Provider>
    </CounterContainer.Provider>
);

#PluginProvider

<CounterContainer.Provider initialState={pluginData}> 功能一样。

提供2中方式的Provider形式

| 组件名称 | 描述 | |-----------|----------| | store | store数据 |

return (
    <PluginProvider store={pluginData}>
        <Provider {...allStore}>
            <HashRouter>
                {
                    renderRoutes(pluginData.routes)
                }
            </HashRouter>
        </Provider>
    </PluginProvider>
);

#useSelector

选择插件数据

login.js

import {useSelector} from 'tiklab-plugin-ui';
// 获取所有数据
const allData = useSelector(state => state)
// 获取插件配置的数据
const pluginStore = useSelector(state => state.pluginStore)
// 获取语言配置的数据
const languageStore = useSelector(state => state.languageStore)
// 获取处理后得路由
const routes = useSelector(state => state.routes)
// 获取处理后得语言
const languages = useSelector(state => state.languages)

connect （高阶组件）

用于将store的数据以props的方式传递给子组件

1.类组件使用该 方法可以获取到插件管理中的数据，函数组件也是可以。

2.函数组件推荐 useSelector 方法来获取

| 组件名称 | 描述 | |-----------|-----------------| | mapStateToProps | (state)=> state |

// 类组件
class Demo {
    render() {
        // Demo 组件被 connect 包裹红藕props就就会有pluginStore数据
        const {pluginStore} = this.props; 
        
        return (
            <div>
                
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        pluginStore: state.pluginStore
    }
}
export default connect(mapStateToProps)(Demo)

// 函数组件
const Demo1 = (props) => {
    const {pluginStore} = props;
    return(
        <div>

        </div>
    )
}

export default connect(mapStateToProps)(Demo1)

#RemoteUmdComponent

远程加载组件

使用 Shadow DOM 做沙箱隔离，就会导致在插件中使用Modal，通知类的组件样式丢失，需要在组件中设置isModalType={true} 内部会创建一个link标签在body中，这样样式就会显示.

插件尽可能不需要使用类似在body同级别插件的组件

不要滥用isModalType=true的属性

| 组件名称 | 描述 | |-------------|----------------------------------------| | isModalType | 默认false, 为true表示插件中有在弹出框或者全局通知中写有自定义样式 | | point | 挂载点 | | pluginStore | 插件管理中的插件数据 | | extraProps | 扩展的props，支持已$[name]做占位符 |

插件配置 plugin.json

{
  "name": "钉钉企业微信ldap的认证",  // 插件总体名称
  "auth": "hia",                  // 插件作者
  "desc": "用户认证高阶组件",       // 插件描述
  "tag": ["用户", "组价"],        // 插件tag标
  "previewImgs": [
    "https://img0.baidu.com/it/u=1165226539,2557398339&fm=26&fmt=auto",
    "https://img2.baidu.com/it/u=4007240083,716495009&fm=26&fmt=auto"
  ], // 插件预览图
  "extensions": [
      // 挂载到项目某个点上
        {
          "id": "verify",   // 插件ID
          "type": "function",  // 插件类型 function：组件 ，language：语言包类型
          "version": "1.0.0",   // 插件版本
          "js": "/verify/verify.umd.js",
          "css": "",
          "point": "verify"   // 插件挂载点
        },
    // 挂载到项目某个点上，可传递props属性值
        {
          "id": "loginBtn",
          "type": "function",
          "version": "1.0.0",
          "js": "/loginBtnForLocal/loginBtnForLocal.umd.js",
          "css": "/loginBtnForLocal/loginBtnForLocal.css",
          "point": "loginBtn",
          "extraProps":{   // 插件所需要的props，"$setUseType"占位符最终会把项目中的setUseType替换
            "setUseType": "$setUseType",  
            "setLoginError": "$setLoginError"
          }
        },

    // 挂载到项目路路由中
    {
      "id": "plugins-menu",
      "type": "function",
      "version": "1.0.0",
      "css": "/demorouter/demorouter.css",
      "js": "/demorouter/demorouter.umd.js",
      "routers": [
        {
          "mount": "",  // 挂载跟路由是空 且 'router' 不需要携带/, mount有值就退查找项目中的目录进行挂载
          "router": "demo"
        }
      ]
    },
    // 挂载路由，同时支持menu方式显示menutitle来点击路由
    {
      "id": "plugins-menu",
      "type": "function",
      "version": "1.0.0",
      "css": "/plugins-menu/plugins-menu.css",
      "js": "/plugins-menu/plugins-menu.umd.js",
      "routers": [
        {
          "mount": "orga",
          "router": "/plugins-menu",
          "menuTitle": "插件导航名称"
        }
      ],
      "entry": "button",
      "point": "orgaMenu"
    },
  ]
}