Merge pull request #37 from czfadmin/feat/walkthroughs

feat(walkthrough): 增加交互指南(walkthrough), 通过`showWalkthroughs`命令可以使用该交互指南

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.0.32
+
+### Patch Changes
+
+- 0d606d1: 增加Walkthrough
+
 ## 0.0.30
 
 ### Patch Changes

README-ZN.md

@@ -10,28 +10,33 @@
 - 书签管理视图
 - 快速跳转预览书签
 - 自定义书签备注
+- 分组自定义
 
 ### 预览
 
 - 总览
 
-  ![picture 8](images/6217a2dedefaf433e61dda94f782a283bdf01bafdf6e50b2dc32d29838c28e69.png)
+![overview](resources/overview.gif)
 
-- 侧边栏书签管理
+- 管理视图
 
-![picture 6](images/b0e8682a5dacc5c7df3d350fc89b0de76a9347f52f43c9693fa901ada57a3c6c.png)
+![tree-view](images/tree-view.png)
 
-- 书签多颜色分类管理
+- 可选多种颜色
 
-![picture 1](./images/454a86e976aac9448e305cc9942b13273a70e7cc89bec928f8e4234ed75411f2.png)
+![various-colors](resources/various-colors.png)
 
 - 悬浮时显示书签详情
 
-![picture 5](images/5880f91f811e917059eb6012407449ebbd177483a3bfe5ead87c7cac8dc4a8d8.png)
+![float-prompt](images/float-prompt.png)
 
-- 展示书签概览列表
+- 文件预览
 
-![picture 7](images/e15e1d0a9a1015637318d11f8db04f0c79255831cb3dcc0c65d993b689712e4c.png)
+![file-overview](images/file-overview.png)
+
+- 分组自定义
+
+![Group customization](resources/group-customization.png)
 
 ## 插件配置
 
@@ -52,11 +57,10 @@
 - `bookmark-manager.outlitextDecorationThicknessne`：自定义装饰的厚度。
 - `bookmark-manager.lineBlame`：为书签启用 `lineBlame`。
 - `bookmark-manager.enableClick`：启用点击跳转到书签位置。
+- ....
 
 ## 命令
 
-![picture 4](images/049f56ef509d47834c9df728f9cd94362df7fd6e3f3d8ac98a644694c925be16.png)
-
 - `bookmark-manager.toggleLineBookmark`：切换行书签。
 - `bookmark-manager.toggleLineBookmarkWithLabel`：使用标签切换行书签。
 - `bookmark-manager.toggleLineBookmarkWithColor`：用颜色切换行书签。
@@ -71,6 +75,7 @@
 - `bookmark-manager.quickJumpTo`：快速跳转。
 - `bookmark-manager.openInEditor`：在编辑器中打开。 **WIP**
 - `bookmark-manager.listBookmarksInCurrentFile`：列出当前文件中的书签。
+- ...
 
 ## 注意
 

README.md

@@ -14,28 +14,33 @@
 - Bookmark management view
 - Quickly jump to preview bookmarks
 - Customized bookmark notes
+- Group customization
 
 ### Preview
 
 - Overview
 
-![picture 8](images/6217a2dedefaf433e61dda94f782a283bdf01bafdf6e50b2dc32d29838c28e69.png)
+![overview](resources/overview.gif)
 
 - Sidebar bookmark management
 
-![picture 6](images/b0e8682a5dacc5c7df3d350fc89b0de76a9347f52f43c9693fa901ada57a3c6c.png)
+![tree-view](images/tree-view.png)
 
-- Bookmark multi-color classification management
+- Various colors available
 
-![picture 1](./images/454a86e976aac9448e305cc9942b13273a70e7cc89bec928f8e4234ed75411f2.png)
+![various-colors](resources/various-colors.png)
 
 - The floating prompt displays bookmark information
 
-![picture 5](images/5880f91f811e917059eb6012407449ebbd177483a3bfe5ead87c7cac8dc4a8d8.png)
+![float-prompt](images/float-prompt.png)
 
 - Display an overview list of bookmarks
 
-![picture 7](images/e15e1d0a9a1015637318d11f8db04f0c79255831cb3dcc0c65d993b689712e4c.png)
+![file-overview](images/file-overview.png)
+
+- Group customization
+
+![Group customization](resources/group-customization.png)
 
 ## Configuration
 
@@ -56,11 +61,10 @@
 - `bookmark-manager.outlitextDecorationThicknessne`: Customize the thickness of the decoration.
 - `bookmark-manager.lineBlame`: Enable `lineBlame` for bookmarks.
 - `bookmark-manager.enableClick`: Enable click to jump to bookmark location.
+- ......
 
 ### Commands
 
-![picture 4](images/049f56ef509d47834c9df728f9cd94362df7fd6e3f3d8ac98a644694c925be16.png)
-
 - `bookmark-manager.toggleLineBookmark`: Toggle line bookmark.
 - `bookmark-manager.toggleLineBookmarkWithLabel`: Toggle line bookmark with label.
 - `bookmark-manager.toggleLineBookmarkWithColor`: Toggle line bookmark with color.

package.json

@@ -2,7 +2,7 @@
   "name": "bookmark-manager",
   "displayName": "Bookmark Manager (BM)",
   "description": "Simple and easy to use bookmark manager",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "engines": {
     "vscode": "^1.82.0"
   },
@@ -265,6 +265,18 @@
         "title": "%bookmark-manager.listBookmarksInSelectedGroup%",
         "icon": "$(bookmark)",
         "category": "Bookmark Manager (BM)"
+      },
+      {
+        "command": "bookmark-manager.showWalkthroughs",
+        "title": "%bookmark-manager.showWalkthroughs%",
+        "icon": "$(bookmark)",
+        "category": "Bookmark Manager (BM)"
+      },
+      {
+        "command": "bookmark-manager.changeSetting",
+        "title": "%bookmark-manager.changeSetting%",
+        "icon": "$(bookmark)",
+        "category": "Bookmark Manager (BM)"
       }
     ],
     "views": {
@@ -698,7 +710,79 @@
           "fontCharacter": "\\f101"
         }
       }
-    }
+    },
+    "walkthroughs": [
+      {
+        "id": "bookmark-manager-walkthroughs",
+        "title": "Bookmark Manager Walkthroughs",
+        "description": "Bookmark Manager Walkthroughs",
+        "steps": [
+          {
+            "id": "introduction",
+            "title": "Introduction",
+            "description": "Plug-in introduction",
+            "media": {
+              "image": "resources/overview.gif",
+              "altText": "overview"
+            },
+            "completionEvents": []
+          },
+          {
+            "id": "groupCustomization",
+            "title": "Group customization",
+            "description": "You can create and manage customized bookmark groups, and you can also set the default activation group and drag and drop to adjust the order of the groups.",
+            "media": {
+              "image": "resources/group-customization.png",
+              "altText": "group customization"
+            },
+            "completionEvents": []
+          },
+          {
+            "id": "quickJumpToBookmarks",
+            "title": "Quick jump to bookmarks",
+            "description": "You can use the command to quickly preview and jump to the bookmark you will select.",
+            "media": {
+              "image": "resources/quick-jump-to-bookmark.png",
+              "altText": "quick jump to bookmark"
+            },
+            "completionEvents": []
+          },
+          {
+            "id": "variousColorsAvailable",
+            "title": "Various colors available",
+            "description": "You can use and create many different colors to decorate your bookmarks.",
+            "media": {
+              "image": "resources/various-colors.png",
+              "altText": "various-colors"
+            },
+            "completionEvents": []
+          },
+          {
+            "id": "focusOnBookmarkManagerTreeView",
+            "title": "Focus on Bookmark Manager View",
+            "description": "This step will run a command and show bookmark-manager tree view.\n[Open Bookmark Manager View](command:bookmark-manager.focus)",
+            "media": {
+              "image": "resources/tree-view.png",
+              "altText": "Focus on Bookmark Manager View"
+            },
+            "completionEvents": [
+              "command:bookmark-manager.focus"
+            ]
+          },
+          {
+            "id": "changesetting",
+            "title": "Change Setting",
+            "description": "This step will change a setting and check off when the setting has changed\n[Change Setting](command:bookmark-manager.changeSetting)",
+            "media": {
+              "markdown": "resources/markdown.md"
+            },
+            "completionEvents": [
+              "command:bookmark-manager.changeSetting"
+            ]
+          }
+        ]
+      }
+    ]
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.2",

package.nls.json

@@ -62,5 +62,7 @@
   "bookmark-manager.clearAllBookmarksInColor": "Clear bookmarks in this color",
   "bookmark-manager.setAsDefaultActivedGroup": "Set as default activation group",
   "bookmark-manager.changeBookmarkGroup": "Change group",
-  "bookmark-manager.listBookmarksInSelectedGroup": "List the bookmarks in the selected group"
+  "bookmark-manager.listBookmarksInSelectedGroup": "List the bookmarks in the selected group",
+  "bookmark-manager.showWalkthroughs": "Show walkthroughs",
+  "bookmark-manager.changeSetting": "Change setting"
 }

package.nls.zh.json

@@ -62,5 +62,7 @@
   "bookmark-manager.clearAllBookmarksInColor": "清除此颜色下的所有书签",
   "bookmark-manager.setAsDefaultActivedGroup": "设置为默认激活组",
   "bookmark-manager.changeBookmarkGroup": "改变书签分组",
-  "bookmark-manager.listBookmarksInSelectedGroup": "列出已选择分组中的书签列表"
+  "bookmark-manager.listBookmarksInSelectedGroup": "列出已选择分组中的书签列表",
+  "bookmark-manager.showWalkthroughs": "显示交互指南",
+  "bookmark-manager.changeSetting": "更改设置"
 }

resources/markdown.md

@@ -0,0 +1 @@
+![setting-page](show-settings.png)

src/commands/bookmark/base.ts

@@ -6,6 +6,7 @@ import {
   workspace,
   Uri,
   TextEditorRevealType,
+  commands,
 } from 'vscode';
 import {resolveBookmarkController} from '../../bootstrap';
 import resolveServiceManager from '../../services/ServiceManager';
@@ -348,3 +349,14 @@ export function clearAllBookmarksInColor(args: any) {
   const meta = args.meta as BookmarksGroupedByColorType;
   controller.clearAllBookmarksInColor(meta.color);
 }
+
+/**
+ * 打开交互指南
+ * @param args
+ */
+export function showWalkthroughs(args: any) {
+  commands.executeCommand(
+    'welcome.showAllWalkthroughs',
+    '@ext:czfadmin.bookmark-manager',
+  );
+}

src/commands/bookmark/index.ts

@@ -1,3 +1,4 @@
 export * from './group';
 export * from './view';
 export * from './base';
+export * from './settings';

src/commands/bookmark/settings.ts

@@ -0,0 +1,13 @@
+import {commands} from 'vscode';
+import {AUTHOR, EXTENSION_ID} from '../../constants';
+
+/**
+ * 跳转到插件设置页
+ * @param args
+ */
+export function changeSetting(args: any) {
+  commands.executeCommand(
+    'workbench.action.openSettings',
+    `@ext:${AUTHOR}.${EXTENSION_ID}`,
+  );
+}

src/constants/index.ts

@@ -2,3 +2,5 @@ export * from './configuration';
 export * from './extension';
 export * from './env';
 export * from './bookmark';
+
+export const AUTHOR = 'czfadmin';

src/stores/bookmark-store.ts

@@ -323,11 +323,17 @@ export const BookmarksStore = types
           window.showInformationMessage(l10n.t('Group name already exists'));
           return;
         }
+
+        const maxIdx = self.groups.reduce(
+          (a, b) => (b.sortedIndex > a ? b.sortedIndex : a),
+          0,
+        );
+        console.log(maxIdx);
         self.groups.push(
           BookmarkGroup.create({
             id: generateUUID(),
             label,
-            sortedIndex: self.groups.length,
+            sortedIndex: maxIdx + 1,
             color,
             activeStatus: false,
           }),
@@ -434,6 +440,14 @@ export const BookmarksStore = types
       clearAll() {
         self.bookmarks.clear();
         self.groups.clear();
+        self.groups.push(
+          BookmarkGroup.create({
+            id: DEFAULT_BOOKMARK_GROUP_ID,
+            label: l10n.t('Default Group'),
+            sortedIndex: 0,
+            activeStatus: true,
+          }),
+        );
         self.groupView = 'file';
         self.viewType = 'tree';
         self.sortedType = 'linenumber';

src/views/BaseTreeView.ts

@@ -153,7 +153,7 @@ export default class BaseTreeView<T extends BaseTreeItem, C extends IController>
 
           // 1. 对于顶层级进行拖拽, 顶层进行排序
           // 2. 第二层级中 进行排序
-          console.log(draggedSource, target);
+          // console.log(draggedSource, target);
         }
       },
     };