Fe detail update: 1.Diff mode switch style fix. 2.README.MD all pics …

…replace. (#595)

* Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc.

* Revert "Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc."

This reverts commit 7180b42.

* FE bugfix: mock group switch transform

* Update README.md

* Style fix: Inspector - Diff Mode switch button.

README.md

@@ -123,21 +123,21 @@ b. 直连
 >
 > 选中请求后，可以将它保存到已激活的 mock 数据组中。
 
-<img src="./image/1_7_0_inspector.gif" width="800">
+<img src="./image/inspector.gif" width="800">
 
 ## 使用 Mock 数据
 
 > 激活 mock 数据选择器，选择 mock 数据后。经过 Lyrebird 的请求会被 mock，如果 mock 数据中没有匹配的数据，则会代理该请求。
 >
 > 可以在 DataManager 界面管理 mock 数据。
 
-<img src="./image/1_7_0_inspector_mock.gif" width="800">
+<img src="./image/inspector_mock.gif" width="800">
 
 ## Mock 数据管理
 
 > mock 数据可由左边导航栏切换到 DataManager 界面进行编辑管理
 
-<img src="./image/1_7_0_data_manager.gif" width="800">
+<img src="./image/data_manager.gif" width="800">
 
 ---
 

frontend/src/views/inspector/ButtonBar.vue

@@ -322,6 +322,13 @@ export default {
   height: 15px !important;
   width: 15px !important;
 }
+.v-application--is-ltr .button-bar-diff-mode.v-input--is-label-active .v-input--switch__thumb {
+  transform: translate(11px) !important;
+}
+.v-application--is-ltr .button-bar-diff-mode.v-input--is-label-active .v-input--selection-controls__ripple
+{
+  transform: translate(11px) !important;
+}
 .inspector-button {
   padding: 3px 8px 3px;
   font-size: 14px;