如何在文档中心新增定制菜单？

该组件仅适用于私有化WPS365版本

1. 方案概述

企业想把文档中心上定制的新功能放在文档中心上，可以将入口放在文档中心左侧Tab栏。

针对这种需求，我们可以使用文档中心PC端、H5、管理后台、系统后台的开放能力，新增定制菜单

实现效果	文档中心PC端👇可在左侧原有菜单中任意位置添加新的菜单（图中的demo定制菜单），保持和文档中心固定菜单效果一致将分享菜单换序放到回收站菜单下面，其它菜单同理文档中心H5端👇H5端修改底部菜单新增二级菜单项全员团队上方增加新的菜单在我的面板中新增一个菜单功能项文档中心管理后台👇对应的定制功能有后台管理要求，可在管理后台左侧增加新菜单，同时菜单可纳入菜单权限管理中文档中心系统后台👇系统后台增加新的定制功能时，可在系统后台左侧自定义子菜单栏，常见场景如新增对文件通用配置或运维数据等
支持端	文档中心PC端、H5、管理后台、系统后台
版本限制	不同端的定制所依赖版本有所不同，具体见操作流程此处罗列的功能，在24-10b版本后都可支持
操作系统限制	支持X86、XC

2. 使用指南

云文档PCweb

云文档PCweb端，可在左侧原有菜单中任意位置添加新的菜单，且具备切换时选中、高亮等交互，保持和云文档固定菜单效果一致

自定义云文档左侧菜单

👉能力

sdk.kdrive.aside.menu

👉方法

onChange

侧边栏区域-修改侧边栏（新增过滤）

信息	内容
支持版本	231019
是否支持多插件	true
是否支持异步	false
兼容性说明	无

👉能力

sdk.kdrive

👉方法

router

信息	内容
支持版本	230706
是否支持多插件	true
是否支持异步	false
兼容性说明	无

参数：

参数名称	必选	类型	描述
path	是	string

👉代码示例

// 云文档PCweb-自定义云文档左侧菜单
sdk.kdrive.aside.menu.onChange((data) => {
// 避免重复添加
if (~data.menus.items().findIndex((item) => item.label === "demo定制菜单")) return;
// add方法第二个参数代表你要插入位置的索引
data.menus.add({ key: '/demo1', label: 'demo定制菜单' }, 2)
})
const routerPage1 = sdk.kdrive.router('/demo1')
routerPage1.onMounted((params) => {
routerPage1.mount(<div style={{width:600,height: 700,background: '#ccc'}}>demo定制菜单-111</div>, ReactDOM)
})

👉效果截图

左侧菜单同步调整顺序

👉能力

sdk.kdrive.aside.menu

👉方法

onChange

信息	内容
支持版本	23.10b
是否支持多插件	true
是否支持异步	false
兼容性说明	无

👉代码示例

// 先保存要调整的菜单，再删除，再添加到对应的位置，共享菜单移动到最后一个
sdk.kdrive.aside.menu.onChange(
  (data) => {
    const starIndex = data.menus
      .items()
      .findIndex((item) => item.label === '共享')
    const star = data.menus.items()[starIndex]
    data.menus.remove(starIndex)
    data.menus.add(star)
  }
)

👉效果截图

未调整：

调整后：

云文档H5

云文档H5端，可新增菜单功能的入口如下：

1. 底部一级导航栏增加一个菜单项
2. 「首页」的二级菜单项增加菜单
3. 「团队」全员团队上方增加新的菜单
4. 「我的」在我的面板中新增一个菜单功能项（也适用于新增一个操作项）

文件选择器中菜单同步调整顺序

底部一级导航栏修改

👉能力

sdk.kdriveMobile.homePage.footer.tabs

👉方法

onChange

名称	描述	版本号
onChange	首页底部tab-改变事件(过滤、新增、修改)	231109
onClick	首页底部tab点击拦截	230810

👉代码示例

// H5端修改底部菜单
sdk.kdriveMobile.homePage.footer.tabs.onChange(
  (data) => {
    // 移除菜单
    const meIndex = data.menus.items().findIndex((item) => item.key === 'me')
    if (~meIndex) {
      data.menus.remove(meIndex)
    }
    // 添加菜单
    const testIndex = data.menus
      .items()
      .findIndex((item) => item.key === '/test')
    if (!~testIndex) {
      // 添加的菜单key属性值要与sdk.kdriveMobile.router传参保持一致
      data.menus.add({
        key: '/test',
        icon: 'test',
        title: 'test',
        selectIcon: 'test',
      })
    }
    // 修改菜单名称
    const spaceIndex = data.menus
      .items()
      .findIndex((item) => item.key === 'space')
    data.menus.items()[spaceIndex].title = '修改后的名称'
  }
)

👉效果截图

「首页」的二级菜单项增加菜单

👉能力

sdk.kdriveMobile.homePage.topTabs.onMounted

sdk.kdriveMobile.homePage.topTabs.onClick

sdk.kdriveMobile.router

👉方法

名称	描述	版本号
onClick	首页顶部tob点击拦截	2024-05-11
onMounted	首页顶部tob加载传参	2024-05-11

👉代码示例

// 新增二级菜单项
sdk.kdriveMobile.homePage.topTabs.onMounted((data)=>{
  const testIndex = data.items().findIndex(item => item.key === 'dztest')
  if (!~testIndex) {
    // add方法第二个参数代表你要插入位置的索引
    data.add({key: 'dztest', name: 'dztest'})
  }
})
// 新增二级菜单项对应点击事件
sdk.kdriveMobile.homePage.topTabs.onClick((data)=>{
  if (data.key === 'dztest') {
    data.history.push('/dztest')
    return true
  }
})
// 新增新增二级菜单项对应路由
const routerPage = sdk.kdriveMobile.router('/dztest')
routerPage.onMounted((params) => {
  routerPage.mount(React.createElement('h1', {}, `定制页面`), ReactDOM)
})

👉效果截图

「团队」全员团队上方增加新的菜单

👉能力

sdk.kdriveMobile.groupPage.topSlot.onAdded

👉方法

名称	描述	版本号
dissolveOrExitGroupModal	团队页面-退出团队和解散团队弹窗	2024-0509
topSlot	团队页面顶部新增插槽	2024-0511

👉代码示例

sdk.kdriveMobile.groupPage.topSlot.onAdded(()=>{
  sdk.mount(sdk.kdriveMobile.groupPage.topSlot, <h1>定制菜单</h1>)
})

👉效果截图

「我的」在我的面板中新增一个菜单功能项

👉能力

sdk.kdriveMobile.userCenter.menuList.onChange

👉方法

名称	描述	版本号
onChange	我的页面-菜单列表修改事件	2024-05-30

👉代码示例

sdk.kdriveMobile.userCenter.menuList.onChange((data)=> {
  // add方法第二个参数代表你要插入位置的索引
  data.menuList.add({
    key: 'dztest', // 菜单唯一标识
    icon: <div>icon</div>, // 菜单图标
    label: '定制菜单', // 菜单名称
    isDivider: false, // 是否是分割线
    onClick: () => {
      alert('定制菜单') // 菜单点击事件
    }
  }, 1)
})

👉效果截图

管理后台

管理后台新增一个管理类菜单，比如模板库管理、知识库管理或者商密文档的管理等

增加一项管理类菜单后，咱们可以将菜单注册到菜单权限列表中，用于管理员分配菜单权限哈，具体操作指导如下

👉能力

管理后台新增菜单有点特殊，咱们是通过【系统后台】配置一个新菜单，建议可以👀👀【金山文档】 V7系统后台菜单配置手册https://365.kdocs.cn/l/cvLlCvsq0yqV

定制接入注意事项

1. 请求路径固定为/admin/ecis
2. 菜单路径必须以/ecis开头 例如/ecis/xxxx
3. 菜单对应的页面插件写法

const routerPage = sdk.admin.router('/xxxx')
routerPage.onMounted((params) => {
  routerPage.mount(<div>111<br/><br/>2222222</div>, ReactDOM)
})

插件获取权限点接口

1. 获取企业companyId接口

sdk.utils.request.get({
    url: '/accounts/u/v1/session/info',
    service: 'cloud'
})

2. 获取权限列表接口

sdk.utils.request.get({
    url: '/role/admin/v1/companies/{companyId}/permissions',
    service: 'cloud'
})

👉效果截图

用户头像菜单 添加下拉项

👉能力

sdk.admin.header.userInfo.panel.menu.onChange

名称	描述	版本号
onChange	管理后台-头部-用户信息面板-菜单修改事件	2024-0125
onLogout	管理后台-头部-用户信息面板-菜单-只是拦截退出的跳转，不会影响标准退出流程，可以在插件中指定跳转地址	2024-0511

👉方法

onChange

管理后台-头部-用户信息面板-菜单修改事件

信息	内容
支持版本	2024-0125
是否支持多插件	true
是否支持异步	false
兼容性说明	无

👉代码示例

// 用户头像菜单 添加下拉项
sdk.admin.header.userInfo.panel.menu.onChange((data) => {
  data.menus.add({
    label: (
      <div
        className="dropdown-link"
        onClick={() => console.log('用户头像菜单 - demo')}
      >
        用户头像菜单-demo
      </div>
    ),
  })
})

👉效果截图

系统后台

左侧菜单中任意位置添加新的菜单

系统后台可在左侧原有菜单中任意位置添加新的菜单，该功能一般在定制项目中使用较少。适用于需要在对文档中心的产品添加高级设置功能，或者对整个文档中心有监控行为数据的定制扩展，具体场景以项目需求为准。

👉能力

sdk.systemAdmin.aside.menus.onChange

sdk.systemAdmin.main.router

👉模块

名称	描述	版本号
aside	系统后台-侧边栏	1019
createTenant	系统后台-新建租户页	2024-0627
editTenant	系统后台-修改租户信息页	2024-0627
main	系统后台-内容区	1019

👉aside模块

名称	描述	版本号
menus	系统后台-侧边栏菜单	1019

👉代码示例

// 新增菜单
sdk.systemAdmin.aside.menus.onChange((data)=>{
  // 新增一级菜单
  data.menus.add({
    exact: true,
    name: "定制菜单",
    path: '/dztest',
  }, 0)
  // 新增二级菜单
  data.menus.add({
   exact: true, // 路由匹配方式，通常为true
   name: "定制菜单2", // 菜单名称
   path: '/dztest2', // 菜单路径
   // 二级菜单
   children: [
     {
       exact: true,
       name: "定制子菜单",
       path: '/dztest2-dzchild'
     }
   ]
  }, 1)
})
// 新增菜单对应路由
const routerPage = sdk.systemAdmin.main.router('/dztest')
routerPage.onMounted((params) => {
  routerPage.mount(<h1>定制页面</h1>, ReactDOM)
})
const routerPage2 = sdk.systemAdmin.main.router('/dztest2-dzchild')
routerPage2.onMounted((params) => {
  routerPage2.mount(<h1>定制页面2</h1>, ReactDOM)
})

👉效果截图

👉注意事项

注意API大小写