🎨 readme image

frostime · Jul 8, 2024 · c3ebd12 · c3ebd12
1 parent d5c2ffc
commit c3ebd12
Show file tree

Hide file tree

Showing 14 changed files with 54 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -20,6 +20,9 @@ Click "Add" on the top bar to create a new bookmark group. Bookmark groups are c
     2. `<Attribute>=<val>`, e.g., `bookmark=test`, returns all blocks within the "test" bookmark
     3. `<Attribute> like <val>`
 
+![](./asset/newgroup.png)
+
+
 ## Adding Items
 
 ### Static Group
@@ -32,27 +35,46 @@ In a static bookmark group, you can add bookmark items through the following met
     1. Add from Clipboard: You can copy a block's ID, reference, or link, and the plugin will automatically recognize and add it to the bookmark group
     2. Add Current Document Block: Adds the currently edited document to the bookmark group
 
+![](./asset/add.gif)
+
 ### Dynamic Group
 
 Dynamic bookmark groups mainly acquire bookmark items by executing queries.
 
 1. Global Update: Click the update button on the top bar to update all bookmark groups
 2. Right-click Menu: Click the right-click menu of the dynamic group to re-execute the query in the current group and obtain the latest bookmark items
 
+![](./asset/dynamic-group.gif)
+
 ## Bookmark Items
 
 * Click an item to navigate to the corresponding block
 * Hover over the block icon to preview the block's content
+
+  ![](./asset/hover.png)
+
+* Drag the item and move to other group
+
+  ![](./asset/drag-move.gif)
+
 * More features are available in the right-click menu~
 
+  ![](./asset/contextmenu.png)
+
 
 ## Plugin Settings
 
+![](./asset/setting.png)
+
 * Replace Built-in Bookmarks: If enabled, the plugin will automatically block the default SiYuan bookmarks at startup and override the bookmark shortcuts (default is Alt + 3)
-* Display Styles: The plugin provides two styles
+* Display Styles: The plugin provides two styles (views)
+
+  * Bookmark View: Same as the built-in bookmarks of SiYuan
+
+    ![](./asset/bookmark-view.png)
+  * Card View: Each bookmark group is presented in a card style
 
-  * Bookmark Style: Same as the built-in bookmarks of SiYuan
-  * Card Style: Each bookmark group is presented in a card style
+    ![](./asset/card-view.png)
 * Hide Items: Bookmark items may not be indexed due to being deleted or the notebook containing the block being closed
 
   * Hide Closed Items: When enabled, hide items from closed notebooks

diff --git a/README_zh_CN.md b/README_zh_CN.md
@@ -2,6 +2,8 @@
 
 以下介绍最核心的功能，其他细节功能请自行探索。
 
+> 如果图片无法显示，可以访问 [线上文档](https://flowus.cn/share/d84d5d98-cc4c-471b-ba2b-62338bb88511?code=80RAFK) 查看
+
 ## 书签组
 
 在顶栏中点击「添加」，可以新建一个书签组，书签组分类两种类型：
@@ -20,6 +22,8 @@
     2. `<属性名>=<val>`，例如 `bookmark=测试`，返回所有「测试」书签内的块
     3. `<属性名> like <val>`
 
+![](./asset/newgroup.png)
+
 ## 添加项目
 
 ### 静态组
@@ -32,28 +36,50 @@
     1. 从剪贴板中添加：你可以复制一个块的 ID、引用、链接，插件会自动识别并将其添加到书签组中
     2. 添加当前文档块：会将当前正在编辑的文档添加到书签组中
 
+![](./asset/add.gif)
+
 ### 动态组
 
 动态书签组主要通过执行查询来获取书签项目。
 
 1. 全局更新：点击顶栏的更新按钮，更新所有的书签组
 2. 右键菜单：点击动态组右键菜单，重新在当前组中执行查询，并获取最新的书签项目
 
+![](./asset/dynamic-group.gif)
+
 
 ## 书签项目
 
 * 点击项目，跳转对应的块
 * 悬浮在块标上，可以预览块的内容
+
+  ![](./asset/hover.png)
+
+* 拖放调整书签位置
+
+  ![](./asset/drag-move.gif)
+
 * 右键菜单中支持更多功能~
 
+  ![](./asset/contextmenu.png)
+
 
 ## 插件设置
 
+![](./asset/setting.png)
+
+
 * 替换内置书签：如果开启，在插件在启动的时候会自动屏蔽默认的思源书签，并且覆盖书签的快捷键（默认为 Alt + 3）
 * 展示样式：插件提供了两种样式
 
   * 书签样式：和思源内置的书签一致
+
+    ![](./asset/bookmark-view.png)
+
   * 卡片样式：各个书签组以卡片的样式呈现
+
+    ![](./asset/card-view.png)
+
 * 隐藏项目：书签项目可能由于被删除、或者块所在的笔记本被关闭而无法被索引到
 
   * 隐藏关闭项目：开启后，隐藏那些来自被关闭的笔记本中的项目

diff --git a/asset/add.gif b/asset/add.gif
diff --git a/asset/bookmark-view.png b/asset/bookmark-view.png
diff --git a/asset/card-view.png b/asset/card-view.png
diff --git a/asset/contextmenu.png b/asset/contextmenu.png
diff --git a/asset/drag-move.gif b/asset/drag-move.gif
diff --git a/asset/dynamic-group.gif b/asset/dynamic-group.gif
diff --git a/asset/hover.png b/asset/hover.png
diff --git a/asset/newgroup.png b/asset/newgroup.png
diff --git a/asset/setting.png b/asset/setting.png
diff --git a/src/components/item.tsx b/src/components/item.tsx
@@ -214,7 +214,7 @@ const Item: Component<IProps> = (props) => {
     };
 
     const onDragStart = (event: DragEvent) => {
-        console.log('Drag Start', item());
+        // console.log('Drag Start', item());
         event.dataTransfer.setData("bookmark/item", JSON.stringify({ group: props.group, id: item().id }));
         event.dataTransfer.effectAllowed = "move";
         setOpacityStyle('opacity: 0.5;');

diff --git a/src/model/index.ts b/src/model/index.ts
@@ -455,6 +455,7 @@ export class BookmarkDataModel {
     }
 
     moveItem(detail: IMoveItemDetail) {
+        console.debug('Move item', detail);
         let { srcGroup, targetGroup, srcItem, afterItem } = detail;
         let src = groupMap().get(srcGroup);
         let target = groupMap().get(targetGroup);

diff --git a/vite.config.ts b/vite.config.ts
@@ -72,7 +72,7 @@ export default defineConfig({
         outDir: distDir,
         emptyOutDir: false,
 
-        // sourcemap: isWatch ? 'inline' : false,
+        sourcemap: isWatch ? 'inline' : false,
 
         // 设置为 false 可以禁用最小化混淆
         // 或是用来指定是应用哪种混淆器