diff --git a/CHANGELOG.md b/CHANGELOG.md index 66aea0a..2397023 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ ChangeLog ======== +3.1.7 +------- + - [Add] + - Make the mutation or a group of mutations removable in store panel. + - [Bugfix] + - Fix a bug that mutation increased but the selected item is not focused. + 3.1.6 ------- - [Add] diff --git a/docs/images/store-delete1.png b/docs/images/store-delete1.png new file mode 100644 index 0000000..2eee464 Binary files /dev/null and b/docs/images/store-delete1.png differ diff --git a/docs/images/store-delete2.png b/docs/images/store-delete2.png new file mode 100644 index 0000000..057605f Binary files /dev/null and b/docs/images/store-delete2.png differ diff --git a/docs/user_guide.md b/docs/user_guide.md index c6aa8f8..76b734e 100644 --- a/docs/user_guide.md +++ b/docs/user_guide.md @@ -243,6 +243,19 @@ Component tab 右侧为详细信息显示区域，包含了五个功能块： > 提示：当使用了非官方的 connector 时，要确保在必要的时刻向 san-devtools 发送 `store-connected` `store-comp-inited` `store-comp-disposed` 事件，这样 san-devtools 才可以更好的生成 Store tab 中所需要状态变更快照。虽然已对无法收到上述事件做了替代方案，但这样可能会导致 Store tab 中某些地方为空。 +如果你想删除某个 mutation，可以 hover 到某个 mutation 上，点击删除图表删除对应项。 +

+ + store-delete2 + +

+ +当然也可以删除一组 mutation，你只需要 hover 到某个 store 选项上，然后点击删除图表删除一组数据。 +

+ + store-delete1 + +

### History ![history_list](https://raw.githubusercontent.com/baidu/san-devtools/master/docs/images/history_list.png) diff --git a/packages/build-tools/icons-loader.js b/packages/build-tools/icons-loader.js index 62de054..6fa8bc3 100644 --- a/packages/build-tools/icons-loader.js +++ b/packages/build-tools/icons-loader.js @@ -20,7 +20,9 @@ const SVG_NAME = [ 'DoubleRightOutlined', // InfoCircleOutlined 'InfoCircleOutlined', - 'InfoCircleFilled' + 'InfoCircleFilled', + 'DeleteFilled', + 'DeleteOutlined' ]; const SVG_USED_STR = SVG_NAME.map(item => { return `export { default as ${item} } from './asn/${item}';`; @@ -30,4 +32,4 @@ module.exports = function loader(source) { return SVG_USED_STR; } return source; -}; \ No newline at end of file +}; diff --git a/packages/extensions/package.json b/packages/extensions/package.json index aab399d..7e11ae9 100644 --- a/packages/extensions/package.json +++ b/packages/extensions/package.json @@ -1,7 +1,7 @@ { "name": "extensions", "private": true, - "version": "3.1.6", + "version": "3.1.7", "scripts": { "start": "cross-env NODE_ENV=development webpack --watch", "build": "cross-env NODE_ENV=production webpack --hide-modules --config ./webpack.config.js && yarn zip", diff --git a/packages/frontend/src/DevTools.san b/packages/frontend/src/DevTools.san index 82cdfb1..f6c051a 100644 --- a/packages/frontend/src/DevTools.san +++ b/packages/frontend/src/DevTools.san @@ -152,5 +152,5 @@ background-color: @dark-content-bg-color; } } - } + } diff --git a/packages/frontend/src/components/treeView/treeView.san b/packages/frontend/src/components/treeView/treeView.san index a2d3c73..ccb4349 100755 --- a/packages/frontend/src/components/treeView/treeView.san +++ b/packages/frontend/src/components/treeView/treeView.san @@ -20,6 +20,8 @@
+ > +
+ +
+

{{treeData.id | raw}} + > + {{treeData.id | raw}}

@@ -109,7 +116,16 @@ secondaryText: DataTypes.oneOfType([DataTypes.string, DataTypes.number]), extras: DataTypes.arrayOf(DataTypes.objectOf(DataTypes.string)) }, - + deleteItem(e) { + e.stopPropagation(); + this.dispatch( + 'UI:clearTreeData', + { + id: this.data.get('treeData.id'), + displayName: this.data.get('displayName') + } + ); + }, components: { 'san-checkbox': Checkbox, 'san-icon': Icon, @@ -260,6 +276,15 @@ } }, + updated() { + const selectedId = this.data.get('selectedId'); + const shouldSelected = selectedId === this.data.get('treeData.id'); + const isSelected = this.data.get('selected'); + if (shouldSelected !== isSelected) { + this.data.set('selected', !isSelected); + } + }, + inited() { this.data.set('defaultSelectedIdentity', this.parentComponent.data.get('defaultSelectedIdentity')); @@ -434,7 +459,7 @@ if (!isNaN(+id)) { return id >= lowId && id <= highId; } - return true; + return true; }, storeChangedTargetFilter(value) { @@ -634,6 +659,7 @@ } this.clearSelectedClass(true); this.data.set('selected', true); + this.dispatch('UI:selectedid-change', this.data.get('treeData.id')); this.dispatch('UI:record-selected-item'); } }, @@ -863,6 +889,10 @@ .sm-tree-view-item { position: relative; cursor: pointer; + &-del { + display: none; + width: 20px; + } &.disabled { cursor: not-allowed; color: #e0e0e0; @@ -948,6 +978,16 @@ &.nested .sm-touch-ripple { height: @one-line-height; } + .sm-tree-view-item-action { + position: absolute; + top: 0; + width: 20px; + right: 50px; + bottom: 0; + overflow: hidden; + z-index: 0; + border-radius: 6px; + } .sm-touch-ripple { position: absolute; top: 0; @@ -957,6 +997,18 @@ overflow: hidden; z-index: 0; border-radius: 6px; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + &:hover { + .sm-tree-view-item-del { + position: relative; + display: block; + right: 60px; + color: #adadad; + } + } } .sm-tree-view-item-primary-text { font-size: 16px; @@ -968,6 +1020,7 @@ text-overflow: ellipsis; white-space: nowrap; -webkit-box-orient: vertical; + cursor: pointer; } } .show { diff --git a/packages/frontend/src/store/setMutations.ts b/packages/frontend/src/store/setMutations.ts index 6cf17af..b600038 100644 --- a/packages/frontend/src/store/setMutations.ts +++ b/packages/frontend/src/store/setMutations.ts @@ -23,6 +23,11 @@ interface MutationTreeDataItem { index: {[key: string]: number}; // key 是 actionId， value 是在数组中的位置 } +interface IDeleteInfo { + displayName: string; + id: string; +} + export const setMutationTreeData = { initData: { mutationTreeData: [] @@ -53,6 +58,36 @@ export const setMutationTreeData = { }); return arr; }); + }, + clearTreeData(payload: IDeleteInfo) { + const {displayName, id} = payload; + return builder().apply('mutationTreeData', (oldValue: MutationTreeDataItem[]) => { + if (typeof id === 'undefined' && typeof displayName === 'undefined') { + return []; + } + let arr = oldValue.slice(); + // eslint-disable-next-line @typescript-eslint/prefer-for-of + for (let s = 0; s < arr.length; s++) { + const store = arr[s]; + if (store.displayName === displayName) { + arr.splice(s, 1); + return arr; + } + else if (id) { + if (Array.isArray(store.treeData)) { + // eslint-disable-next-line @typescript-eslint/prefer-for-of + for (let i = 0; i < store.treeData.length; i++) { + const item = store.treeData[i]; + if (item.id === id) { + store.treeData.splice(i, 1); + return arr; + } + } + } + } + } + return arr; + }); } } }; diff --git a/packages/frontend/src/views/store/mutationTree/mutationTree.san b/packages/frontend/src/views/store/mutationTree/mutationTree.san index c0367d5..ac85c35 100644 --- a/packages/frontend/src/views/store/mutationTree/mutationTree.san +++ b/packages/frontend/src/views/store/mutationTree/mutationTree.san @@ -1,6 +1,7 @@