⚡️ perf: 适配移动端 close #13

CHANGELOG.md

@@ -1,5 +1,12 @@
 ## Changelog
 
+## v1.2.3
+
+- ⚡ perf: 适配优化移动端 [#13](https://github.com/frostime/sy-bookmark-plus/issues/13)
+  - 允许移动端点击跳转
+  - 去掉异常显示的 empty element
+  - 优化 setting 对话框显示
+
 ## v1.2.2
 
 - ✨ feat: 优化反查询功能，允许添加后处理

README.md

@@ -184,3 +184,10 @@ However, if the user enables the "First child of container" post-processing sche
 
 * For dynamic groups, it re-executes the query and displays the most recent query results.
 * For static groups, it checks the current status of each item (block) and updates them based on the latest results.
+
+
+### Can plugins be used on mobile devices?
+
+![](asset/mobile.png)
+
+However, since plugin development is done on the desktop, some operations on mobile devices may be less convenient.

README_zh_CN.md

@@ -188,3 +188,9 @@
 
 * 对于动态组，会重新执行查询，并显示最新的查询结果
 * 对于静态组，会查询当中每个项目（块）的最新情况，并根据最新结果更新项目
+
+### 移动端能使用插件吗？
+
+![](asset/mobile.png)
+
+不过由于插件开发在桌面端上，所以移动端中有些操作可能会有些不方便。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sy-bookmark-plus",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "type": "module",
   "description": "A more powerful bookmark",
   "repository": "",

plugin.json

@@ -2,7 +2,7 @@
   "name": "sy-bookmark-plus",
   "author": "frostime",
   "url": "https://github.com/frostime/sy-bookmark-plus",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "minAppVersion": "3.0.12",
   "backends": [
     "all"

src/components/item.tsx

@@ -1,6 +1,6 @@
 import { Component, createEffect, createMemo, createSignal, useContext } from "solid-js";
 import { render } from "solid-js/web";
-import { Menu, openTab, showMessage } from "siyuan";
+import { Menu, openTab, showMessage, openMobileFileById } from "siyuan";
 import { buildItemDetail } from "../libs/dom";
 
 import { itemInfo, setGroups, groupMap, configs } from "../model";
@@ -10,7 +10,7 @@ import { BookmarkContext, itemMoving, setItemMoving } from "./context";
 import { i18n, renderI18n } from "@/utils/i18n";
 import { simpleDialog } from "@/libs/dialog";
 import Typography from "@/libs/components/typography";
-import { getNotebook } from "@/utils";
+import { getNotebook, isMobile } from "@/utils";
 
 interface IProps {
     group: TBookmarkGroupId;
@@ -263,13 +263,17 @@ const Item: Component<IProps> = (props) => {
     };
 
     const openBlock = () => {
-        openTab({
-            app: plugin.app,
-            doc: {
-                id: item().id,
-                zoomIn: item().type === 'd' ? false : true,
-            },
-        });
+        if (isMobile()) {
+            openMobileFileById(plugin.app, item().id);
+        } else {
+            openTab({
+                app: plugin.app,
+                doc: {
+                    id: item().id,
+                    zoomIn: item().type === 'd' ? false : true,
+                },
+            });
+        }
     };
 
     const onDragStart = (event: DragEvent) => {

src/components/setting/index.tsx

@@ -10,7 +10,7 @@ const App = () => {
 
     return (
         <div class="config__tab-container fn__flex-1" style={{
-            'font-size': '1.2rem',
+            'font-size': '1rem',
             padding: '10px 20px'
         }}>
             <SettingItemWrap

src/index.ts

@@ -3,7 +3,7 @@
  * @Author       : frostime
  * @Date         : 2024-06-12 19:48:53
  * @FilePath     : /src/index.ts
- * @LastEditTime : 2024-07-21 17:20:44
+ * @LastEditTime : 2024-08-15 17:38:22
  * @Description  : 
  */
 import {
@@ -25,12 +25,19 @@ import { Svg } from "@/utils/const";
 import { setI18n } from "@/utils/i18n";
 
 import "@/index.scss";
+import { isMobile } from "./utils";
 
 let model: BookmarkDataModel;
 
 const initBookmark = async (ele: HTMLElement, plugin: PluginBookmarkPlus) => {
     await model.updateAll();
     ele.classList.add('fn__flex-column');
+
+    if (isMobile()) {
+        //Refer to https://github.com/frostime/sy-bookmark-plus/issues/13#issuecomment-2283031563
+        let empty = ele.querySelector('.b3-list--empty') as HTMLElement;
+        if (empty) empty.style.display = 'none';
+    }
     render(() => Bookmark({
         plugin: plugin,
         model: model
@@ -48,6 +55,7 @@ const destroyBookmark = () => {
 const bookmarkKeymap = window.siyuan.config.keymap.general.bookmark;
 
 
+
 export default class PluginBookmarkPlus extends Plugin {
 
     declare data: {
@@ -121,14 +129,23 @@ export default class PluginBookmarkPlus extends Plugin {
         let container = document.createElement("div") as HTMLDivElement;
         container.classList.add("fn__flex-1", "fn__flex");
         render(() => Setting(), container);
+        let size = {
+            width: '700px',
+            height: '700px'
+        }
+        if (isMobile()) {
+            size = {
+                width: '100%',
+                height: '90%'
+            }
+        }
         simpleDialog({
             title: window.siyuan.languages.config,
             ele: container,
-            width: '700px',
-            height: '700px',
             callback: () => {
                 model.save();
-            }
+            },
+            ...size
         })
     }
 

src/utils/index.ts

@@ -6,9 +6,15 @@
  * @LastEditTime : 2024-07-20 18:17:00
  * @Description  : 
  */
+import { getFrontend } from 'siyuan';
 import * as api from '../api';
 
 
+export const isMobile = () => {
+    return getFrontend().endsWith('mobile');
+}
+
+
 export function debounce<T extends (...args: any[]) => void>(func: T, wait: number): T {
     let timeout: NodeJS.Timeout;
     return function(...args: Parameters<T>) {