禅道文档模块UI自定义说明

94 阅读2分钟

前言

禅道的文档模块通过覆盖前端js,进行文档模块ui的自定义处理

以禅道21.7版本为准。

基础定义

位置:禅道源码根目录/lib/zin/wg/docapp/js/v1.js

  • const actionsMap window.docAppActions //定义文档各个试图和 UI 元素的上的操作方法。
  • const commands window.docAppCommands //定义界面操作命令。文档中的大部分操作按钮都会调用这里定义的命令。
  • const customRenders window.docAppCustomRenders //定义页面上的自定义渲染器。

扩展方式

在扩展的界面中,定义相应的Map,然后用如下代码来进行扩展操作命令渲染器

/**
 * 重写文档应用的配置选项方法。
 * Override the method to set the doc app options.
 */
window._setDocAppOptions = window.setDocAppOptions; // Save the original method.
window.setDocAppOptions = function(_, options) // Override the method.
{
    options = window._setDocAppOptions(_, options);
    console.log('setDocAppOptions ext', options);
    return $.extend(options,
    {
        customRenders   : $.extend(docAppCustomRenders, customRenders),
        commands        : $.extend(docAppCommands, commands)
    });
};
/**

用如下代码扩展操作方法

/* 扩展文档应用操作按钮生成定义。 Extend the doc app action definition. */
$.extend(window.docAppActions,
{
    /**
     * 定义文档编辑时的操作按钮。
     * Define the actions on toolbar of the doc editing page.
     */
    'doc-edit': function(info)
    {
        const doc = info.data;
        if(!doc) return;

        const lang = getDocAppLang();
        return [
            {text: lang.save, size: 'md', className: 'btn-wide', type: 'primary', command: 'saveApiDoc'},
            {text: lang.cancel, size: 'md', className: 'btn-wide', type: 'primary-outline', command: 'cancelEditDoc'},
        ];
    },
    /**
     * 定义文档创建时的操作按钮。
     * Define the actions on toolbar of the doc editing page.
     */
    'doc-create': function(info)
    {
        const doc = info.data;
        if(!doc) return;

        const lang = getDocAppLang();
        return [
            {text: lang.save, size: 'md', className: 'btn-wide', type: 'primary', command: 'saveApiDoc'},
            {text: lang.cancel, size: 'md', className: 'btn-wide', type: 'primary-outline', command: 'cancelCreateDoc'},
        ];
    },
});

自定义列表

  • window.docAppActions
    • doc: ƒ (info) //定义文档的操作按钮。
    • doc-create: ƒ (info) //定义文档创建时的操作按钮。
    • doc-edit: ƒ (info) //定义文档编辑时的操作按钮。
    • doc-list: ƒ (info) //定义文档列表的操作按钮。
    • doc-table: ƒ (info) //定义文档表格操作栏的操作按钮。
    • file: ƒ (info) //定义文件的操作按钮。
    • home: ƒ () //定义首页的操作按钮。
    • lib: ƒ (info) //定义文档库的操作按钮。
    • module: ƒ (info) //定义目录的操作按钮。
    • space: ƒ (info) //定义空间的操作按钮。
  • window.docAppCommands
    • addChapter: ƒ (_, args) //添加章节。
    • addModule: ƒ (_, args) //添加目录。
    • changeLibRelease: ƒ (_, args) //更改当前库的发布版本。
    • collectDoc: ƒ (_, args)
    • createLib: ƒ (_, args) //创建库。
    • createSpace: ƒ () //创建空间。
    • deleteDoc: ƒ (_, args)
    • deleteLib: ƒ (_, args)
    • deleteModule: ƒ (_, args)
    • deleteSpace: ƒ (_, args)
    • editChapter: ƒ (_, args)
    • editLib: ƒ (_, args)
    • editModule: ƒ (_, args)
    • editSpace: ƒ (_, args)
    • effortDoc: ƒ (_,args)
    • exportApi: ƒ (_, args)
    • exportWord: ƒ (_, args) //导出Word
    • handleMovedDoc: handleMovedDoc(_, args)
    • importFile: ƒ (info, args)
    • loadApi: ƒ (_, args) //加载指定的 API 文档。
    • loadLazyContent: ƒ (_, args) //加载懒加载内容。
    • loadLibApi: ƒ (_, args) //获取库的 API 列表。
    • moveDoc: ƒ (_, args)
    • moveLib: ƒ (_, args)
    • saveApiDoc: ƒ () //保存 API 文档数据。
    • selectApi: ƒ (_, args) //选择 API 文档。
    • showDocSettingModal: ƒ (_, args) //显示文档设置对话框。
    • showModules: ƒ () //显示API 目录。
    • showReleases: ƒ () //显示版本列表。
    • showStructs: ƒ () //显示结构列表。
    • startConvertDoc: ƒ (_, args)
    • startCreatModule: ƒ (_, args) //创建目录。
    • startCreateDoc: ƒ (_, args) //创建文档。
    • startCreateOffice: ƒ (_, args) //创建 Office 文件。
    • startEditDoc: ƒ (_, [doc], options) //编辑文档。
    • updateLazyContent: ƒ (context, args) //更新懒加载内容。
    • uploadDoc: ƒ ()
  • window.docAppCustomRenders
    • app-nav: ƒ (items) //定义顶部面包屑导航渲染。
    • editor: ƒ () //定义 API 文档编辑器渲染,包括查看、编辑和创建。
    • filters: ƒ () //定义 API 文档列表筛选菜单渲染,当展示结构和版本时不显示筛选菜单。
    • list: ƒ () //定义 API 文档列表渲染,包括结构和版本。
    • sidebar-before: ƒ () //定义侧边栏渲染,显示结构、版本和模块。
    • toolbar: ƒ () //定义 API 文档列表工具栏渲染。