TESTCASE-FACTOR-MINDER-EDITOR

#### 特别注意：本组件为vue-testcase-minder-editor基础上再次进行二次开发

#### 环境：node v14.17.4

#### 重新打包core操作：
##### 1、修改kityminder-core中的代码之后，npm run build
##### 2、回到testcase-factor-minder-editor目录下 npm run lib , npm run serve

#### 特此存档---以满足添加测试用例公共因子标签的需求
##### 2023-08-18 在加载完成后加入所需其他按钮，可在引用组建后，第三方直接调用即可
##### 2023-08-19 点击/切换标签后，添加事件上报，第三方直接调用即可
##### 2023-08-21 添加脑图保存按钮，并事件上报，第三方直接调用即可
##### 2023-08-23 脑图contentchange + execCommand事件触发，存至缓存中
##### 2023-08-25 Hotbox样式改为列表展示并提取出来，可供第三方直接引用
##### 2023-10-20 去掉一些不用的组件（组件安全扫描的要求）
##### 2024-01-12 按钮扩展复制、粘贴功能（本身支持，按钮直接引入即可）
##### 2024-02-20 复制粘贴时，节点使用新生成的id，确保id的唯一性; 更新节点的parentId；同时更新节点的其他属性

#### 效果
!脑图

改造为 vue 组件： fudax/vue-mindeditor

补充部分用例需要用的功能 MeYoung/Case_Minder_Vue

采用Vue 全家桶 + Element UI + webpack 开发

在此特别感谢 fudax、MeYoung 两位前辈的开源贡献

#### 效果

!脑图

也可以本地跑起来体验，克隆完代码后，在根目录下：

``

安装依赖

npm --registry=https://registry.npm.taobao.org install

本地运行

npm run lib && npm run serve
`

运行后，按照提示的地址打开即可，例如

`
App running at:
- Local: http://localhost:8081
`

表示通过 可以打开

#### 项目中使用

安装本组件

` bash
npm --registry=https://registry.npm.taobao.org install vue-testcase-minder-editor
`

在 main.js 中

` javascript
import 'vue-testcase-minder-editor/lib/VueTestcaseMinderEditor.css'
import VueTestcaseMinderEditor from 'vue-testcase-minder-editor'

Vue.use(VueTestcaseMinderEditor)
`

本组件依赖 vuex 进行部分全局配置管理。如果没有用 vuex ，可直接在 main.js 加入下面代码。

` javascript
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
caseEditorStore: VueTestcaseMinderEditor.caseEditorStore
}
})
`

如果有，可以仿照下面代码，动态注册对应 module

` javascript
const store = new Vuex.Store({...})

// 动态注册用例编辑器项目的 store 模块到项目中
store.registerModule('caseEditorStore', {
...VueTestcaseMinderEditor.caseEditorStore
})
`

在页面的 .vue 文件中

` javascript

...



export default {

...

data() {
return {
// 测试数据，实际可不必引入
initJson: {
'data': {
'id': 2,
'text': 'Design project',
'image': 'https://testerhome.com/uploads/user/avatar/6109.jpg',
'imageSize': { 'width': 200, 'height': 200 }
}
}
}
},
methods: {
// 示例方法，实际可根据需要绑定到其他元素事件中，比如 v-on:click="logCurrentData"
logCurrentData: function(event) {
console.log("编辑器中的最新用例内容：", this.$refs.minderEditor.getJsonData())
}
}
}

`

完整示例可查看 examples 下面的2个文件

#### 版本发布记录

请查看 CHANGELOG.md

##### 本地开发

` bash

安装依赖

npm --registry=https://registry.npm.taobao.org install

打包成组件并本地运行 examples 里面的示例

npm run lib && npm run serve

打包成组件

npm run lib
`

* 运行时报错 Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime

如果运行 npm run serve 有报错 Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime ，可以运行以下命令解决（参考文章）：

`bash
npm rebuild node-sass
`

* 如果有修改 kityminder-core ，需要阅读 kityminder-core 下的readme，并执行如下指令打包

`shell script

kityminder-core

cd kityminder-core && npm run build && cd ..
`

* 如果需要本地调试，且不使用示例程序便于查看错误堆栈，请修改根目录下 vue.config.js 下面 entry 的值。改为注释下面代码片段中的第一行，去掉第二行的注释即可

` json
...
entry: 'examples/main.js', // 走示例项目，需要 npm run lib 后才能使用
// entry: 'packages/VueTestcaseMinderEditor/main.js', // 走主工程项目，可直接 npm run serve 使用。方便调试时查看源码堆栈
...
`

#### 发布版本指引

1. 改动代码
2. 提交这些改动
3. 改变package.json中的版本号
4. 运行 npm run changelog 生成版本变更记录
5. 提交 package.json和CHANGELOG.md文件
6. 创建tag，规则为 v+版本号，比如 v0.2.0
7. git push && git push --tags push代码及tags
8. 运行 npm publish 发布到仓库上

#### 部分核心功能说明

1、用例结果对应的节点属性是什么？

答：对应的属性名是 progress 。此处为了兼容原有滴滴 agileTC 平台自带的测试结果，所以没有新开属性，而是沿用了原有的属性及值定义。

具体值定义：
`
1, // 不通过
9, // 通过
5, // 阻塞
4 // 不执行
`

2、整体项目架构是怎样的？

答：整体上这个项目包含了 kityminder-core + kityminder-editor 所做的事情。

可参考下图中，kityminder-editor 里面包含的部分：

![](https://github.com/fex-team/kityminder-editor/raw/master/relations.png)

* kityminder-core

负责底部编辑器具体内容绘制，以及通过命令调用改变编辑器内容、接口和事件暴露编辑器内部关键内容。详细可参阅：kityminder-core

* editor

使用 vue 重写了 kityminder-editor （原来官方的 editor 用的 angularjs ，不好内嵌到 vue 中）。负责顶部编辑栏以及包住 core 提供的编辑窗口，以及右键 hotbox 菜单能力。通过调用 kityminder-core 提供的命令、接口和事件达到修改 xmind 内容的目的。

3、result 这个新增属性怎么加上去的？

答：关键改动点有3处

1、editor的顶部编辑器，增加 result 编辑框。可参考 packages/VueTestcaseMinderEditor/src/components/menu/edit/resultBox.vue

2、editor的右键菜单，增加 result 相关操作。可参考 packages/VueTestcaseMinderEditor/src/script/runtime/result.js

3、kityminder-core 的命令解析器及渲染器，解析前两处发出的命令并对应修改节点内容。可参考 kityminder-core/src/module/result.js`

#### License

BSD 3-Clause (基于fex-team/kityminder-core，并非kityminder-editor)