开源测试工具 [vue、kityminder] 放一个自己 Ctrl+C、Ctrl+V 出来的插件

槽神 · 2019年11月22日 · 最后由 yxp1995 回复于 2020年08月07日 · 13923 次阅读

背景说明

最近在优化平台工具的时候觉得需要对测试用例加入思维导图设计的支持，就想到了百度的 kityminder、kityminder-editor
调研了一下，发现是基于 angularjs 和 php 之类的技术栈实现的
苦搜 github 找到这位仁兄自己基于 vue2 改造的 vue-kityminder，clone 之，随即发现一小坨问题，改之
结合一些在百度脑图的特性，做一下简化，毕竟不是做文档协作工具，够用就行了

大致改动说明，细节不赘述

改为 Vue2 组件实现，基于 Webpack4 打包
删除图片、链接、备注的支持
合并样式菜单到编辑菜单，菜单从原先的三个变为两个
删除编辑菜单上的撤销、重做按钮，改为快捷键和鼠标右键支持
删除多主题支持和打标签功能
移除搜索功能
文件存储置于本地 localStorage（参见 main_editor.vue），需要导出或者另存可以自行修改
文件导入全部不支持，文件导出去除对 Xmind（可实现但太麻烦）和 MindManager（本身无法支持）的支持

依赖安装（注意：npm6.7.0 以上、node8.12.0 以上未测试）

npm install

本机环境启动在http://localhost:8088

npm run dev

线上构建

npm run build

具体信息

想着 90%+ 的内容都是 Ctrl+C、Ctrl+V 得到的，也就顺手扔回 github，有需要的自取，毕竟现在做平台的测开同学越来越多了，保不齐就有同栈却没工夫自己去实现的
地址：vue-mindeditor
下面效果图是我自己抽出组件嵌入自己的平台的样子，其实我更建议:

将脑图服务独立搭建，并且留出接口
平台只集成 kityminder-core，每个需要使用的页面——包括需求、设计、测试、wiki 等只做展示，内容编辑链接到脑图服务上去做，这个扩展性更强一些

14 个赞

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！

打赏支持

共收到 35 条回复时间点赞

文贤平 #35 · 2019年11月22日

感谢大佬的开源，最近平台也想加这个，基于 g6 改的，效果不如你这个，有点想换这个了

槽神 #2 · 2019年11月22日 Author

对

文贤平回复

先本地把服务起起来看看效果再说~

Karaser #33 · 2019年11月22日

赞一个，同栈，但是暂时没用上思维导图功能

陈 #32 · 2019年11月22日

antd pro 貌似自带这个功能？

0x88 #31 · 2019年11月28日

左边的测试用例管理也有吗？

槽神 #30 · 2019年11月28日 Author

对

0x88 回复

木有
这周我找领导问一下能不能申请开源

妞妞 #29 · 2019年11月28日

赞，左边的测试用例管理开源就好了，学习学习

yuan #28 · 2019年11月29日

大佬，想问下，我如何重新初始化思维导图（就是我读取到了某个文件，要展示出来），研究了半天，还弄出来

槽神 #27 · 2019年11月29日 Author

对

yuan 回复

没支持文件导入功能，可以从 localStorage 导入或者通过父组件传值进来，保证 JSON 格式
建议自己去搜一下 vue 父子组建通讯方式

子组件：

<script>
export default {
  data() {
    return {
      mindText: ""
    };
  },

  mounted() {
    var Editor = require("../../script/editor");
    var el = this.$el;
    var editor = (window.editor = new Editor(el));
    this.setEditor(editor);

    if (this.minds) {
      this.mindText = JSON.parse(this.minds);
      editor.minder.importJson(this.mindText);
      window.localStorage.mindText = this.minds;
    } else if (window.localStorage.mindText) {
      editor.minder.importJson(JSON.parse(window.localStorage.mindText));
      this.mindText = JSON.parse(window.localStorage.mindText);
    }

    editor.minder.on("contentchange", function() {
      window.localStorage.mindText = JSON.stringify(editor.minder.exportJson());
    });

    editor.minder.execCommand("camera", editor.minder.getRoot(), 600);

    window.minder = window.km = editor.minder;
    this.setMinder(editor.minder);
    this.executeCallback();
  },

  ......

  props: ["minds"]
};
</script>

父组件

<template>
  <div>
    <div class="main-container">
      <header-menu></header-menu>
      <mainEditor :minds="mindText"></mainEditor>
      <navigator></navigator>
    </div>
  </div>
</template>

yuan #26 · 2019年12月02日

对

槽神回复

mounted() {
      this.initData()
  },
  created() {
      this.$eventBus.$on('getTestCaseFileData', (message) => {
          this.tempData = message;
          // console.log(this.tempData)
          this.initData();
      })
  },

  computed: {
      ...mapGetters([
          'minder',
      ])
  },
  methods: {
      ...mapActions([
          'executeCallback'
      ]),
      ...mapMutations([
          'setMinder',
          'setEditor'
      ]),
      initData() {
          var Editor = require('../script/editor');
          var el = this.$el;
          var editor = window.editor = new Editor(el);
          this.setEditor(editor);
          // if (window.localStorage.mindText) {
          //     editor.minder.importJson(JSON.parse(window.localStorage.mindText));
          // }
          editor.minder.importJson(this.tempData);
          window.localStorage.mindText = this.tempData
          console.log(this.tempData)
          editor.minder.on('contentchange', function () {
              window.localStorage.mindText = JSON.stringify(editor.minder.exportJson());

          });
          editor.minder.execCommand("camera", editor.minder.getRoot(), 600);
          console.log(editor.minder.exportJson())
          window.minder = window.km = editor.minder;
          this.setMinder(editor.minder);
          this.executeCallback();
      }
  },

我是这样子写的，一开始初始化的时候 this.tempData 是有效的，但是后续通过组件传值，改变 tempData,然后调用 ininData 函数重新初始化，但是发现没有真的改变当前的思维导图数据~~所以不太明白，当组件已经渲染完成后，后续的思维导图数据如何改变

槽神 #25 · 2019年12月02日 Author

重新渲染——在父组件用 v-if 控制一下就行了，这点开销还是没所谓的

<mainEditor :minds="mindText" v-if="showMind"></mainEditor>

基本所有 canvas 和 svg 框架做的图形图表数据刷新貌似都需要重新渲染

yuan #24 · 2019年12月02日

对

槽神回复

感谢

0x88 #13 · 2019年12月04日

对

槽神回复

大佬，再问一下还开不开源左侧呢？

槽神 #22 · 2019年12月04日 Author 1 个赞

对

0x88 回复

今晚发完版本之后，明天整理 lic 和开源申请到法务

simple #21 · 2019年12月04日

不顶一个吗？

0x88 #20 · 2019年12月05日

对

槽神回复

赞赞赞，可以拿大佬的的东西改改改了。

槽神 #17 · 2019年12月06日 Author 1 个赞

对

0x88 回复

已批复同意，我可以开始准备文档说明了，争取 2 周之内吧，激动吗

妞妞 #18 · 2019年12月06日

太赞了

妞妞 #17 · 2019年12月06日

每时每刻都在刷新等待大佬开源

gyyfifafans #16 · 2019年12月06日

坐等！！

0x88 #15 · 2019年12月06日

对

槽神回复

鸡冻

hello #14 · 2019年12月08日

鸡冻

米阳MeYoung #13 · 2019年12月09日

等待大佬。

米阳MeYoung #12 · 2019年12月18日

前端 build 报这个错误，怎么处理。

槽神 #11 · 2019年12月18日 Author

对

米阳MeYoung 回复

1、估计是你动了什么文件了，恢复回去吧，报错看起来是 build/webpack.prod.conf.js：

new UglifyJsPlugin({
  uglifyOptions: {
    show_copyright: false,
    comments: false,
    compress: {
      warnings: false,
      drop_debugger: true,
      drop_console: false
    }
  },