Merge pull request #42 from baidu/restructure

feat: store面板删除功能&被选项焦点丢失
baidu · Sep 7, 2021 · a13610d · a13610d
2 parents 429d93a + 81036d2
commit a13610d
Show file tree

Hide file tree

Showing 12 changed files with 131 additions and 10 deletions.
diff --git 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
diff --git a/docs/images/store-delete2.png b/docs/images/store-delete2.png
diff --git 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 上，点击删除图表删除对应项。
+<p>
+    <a href="https://raw.githubusercontent.com/baidu/san-devtools/master/docs/images/store-delete2.png">
+        <img src="https://raw.githubusercontent.com/baidu/san-devtools/master/docs/images/store-delete2.png" alt="store-delete2" width="80%">
+    </a>
+</p>
+
+当然也可以删除一组 mutation，你只需要 hover 到某个 store 选项上，然后点击删除图表删除一组数据。
+<p>
+    <a href="https://raw.githubusercontent.com/baidu/san-devtools/master/docs/images/store-delete1.png">
+        <img src="https://raw.githubusercontent.com/baidu/san-devtools/master/docs/images/store-delete1.png" alt="store-delete1" width="80%">
+    </a>
+</p>
 
 ### 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
@@ -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;
-};
+};
diff --git 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
@@ -152,5 +152,5 @@
                 background-color: @dark-content-bg-color;
             }
         }
-    }    
+    }
 </style>
diff --git a/packages/frontend/src/components/treeView/treeView.san b/packages/frontend/src/components/treeView/treeView.san
@@ -20,6 +20,8 @@
         <div class="sm-tree-view-item-wrapper">
             <slot s-if="dataSource!=='JSON'"></slot>
             <san-tree-view-item
+                delete="{{delete}}"
+                selectedId="{{selectedId}}"
                 type="{{type}}"
                 defaultSelectedIdPath="{{defaultSelectedIdPath}}"
                 s-else
@@ -76,7 +78,9 @@
                 dataSource: 'ATTRIBUTE',
                 highlighted: false,
                 rootTreeView: true,
-                filterText: ''
+                filterText: '',
+                selectedId: -1,
+                delete: false
             };
         },
 
@@ -92,6 +96,9 @@
         },
 
         messages: {
+            'UI:selectedid-change'(arg) {
+                this.data.set('selectedId', arg.value);
+            },
             'UI:query-compact-attribute'(arg) {
                 let compact = this.data.get('compact');
                 let target = arg.target;

diff --git a/packages/frontend/src/components/treeView/treeViewItem.san b/packages/frontend/src/components/treeView/treeViewItem.san
@@ -8,7 +8,11 @@
             <div s-if="{{!disableRipple && !disabled}}"
                 style="{{touchRippleStyle}}"
                 class="sm-touch-ripple {{selectedClass}} {{hiddenClass}}"
-            ></div>
+            >
+                <div s-if="delete" on-click="deleteItem" class="sm-tree-view-item-del">
+                    <san-icon type="delete"></san-icon>
+                </div>
+            </div>
             <div class="sm-tree-view-item-content {{selectedClass}}
                         {{hiddenClass}}"
                 style="{{itemContentStyle}}"
@@ -40,7 +44,8 @@
                 </div>
                 <p class="sm-tree-view-item-secondary-text"
                     s-if="treeData.id"
-                >{{treeData.id | raw}}
+                >
+                    {{treeData.id | raw}}
                 </p>
             </div>
             <div
@@ -59,6 +64,7 @@
             >
                 <slot name="nested" s-if="dataSource!=='JSON'"></slot>
                 <san-tree-view-item
+                    delete="{{delete}}"
                     type="{{type}}"
                     defaultSelectedIdPath="{{defaultSelectedIdPath}}"
                     s-else
@@ -71,6 +77,7 @@
                     filterText="{{filterText}}"
                     initiallyOpen="{{initiallyOpen}}"
                     dataSource="JSON"
+                    selectedId="{{selectedId}}"
                 >
                 </san-tree-view-item>
             </div>
@@ -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
@@ -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
@@ -1,6 +1,7 @@
 <template>
     <div class="state-list-wrapper custom">
         <san-tree-view
+            delete
             searchTip="{{searchTip}}"
             s-ref="tv"
             ref="tv"
@@ -33,6 +34,9 @@
                 'UI:tree-view-item-click'({ value }) {
                     this.setSelectedMutationInfo(value);
                     this.setSelectedStoreData(value);
+                },
+                'UI:clearTreeData'({value}) {
+                    store.dispatch('clearTreeData', value);
                 }
             },
             initData() {

diff --git a/packages/san-devtools/package.json b/packages/san-devtools/package.json
@@ -1,6 +1,6 @@
 {
     "name": "san-devtools",
-    "version": "3.1.6",
+    "version": "3.1.7",
     "scriptName": "san-devtools",
     "description": "Development tools for debugging San.",
     "main": "dist/backend.js",