Merge branch 'dev'

Author: frostime

package.json

@@ -1,29 +1,30 @@
 {
   "name": "sy-docs-flow",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "type": "module",
   "description": "",
   "repository": "",
   "homepage": "",
   "author": "",
   "license": "MIT",
   "scripts": {
-    "make-link": "node  --no-warnings ./scripts/make_dev_link.js",
-    "dev": "vite build --watch",
-    "build": "vite build"
+    "dev": "cross-env NODE_ENV=development VITE_SOURCEMAP=inline vite build --watch",
+    "build": "cross-env NODE_ENV=production vite build",
+    "make-install": "vite build && npx make-install"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.5.3",
     "@tsconfig/svelte": "^5.0.4",
     "@types/node": "^20.2.0",
+    "cross-env": "^7.0.3",
     "eslint": "^8.42.0",
     "fast-glob": "^3.2.12",
     "glob": "^10.4.5",
     "js-yaml": "^4.1.0",
     "minimist": "^1.2.8",
     "rollup-plugin-livereload": "^2.0.5",
     "sass": "^1.62.1",
-    "siyuan": "^1.0.3",
+    "siyuan": "^1.0.8",
     "svelte": "^4.2.19",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.4",

plugin.json

@@ -2,7 +2,7 @@
   "name": "sy-docs-flow",
   "author": "frostime",
   "url": "https://github.com/frostime/sy-docs-flow",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "minAppVersion": "3.1.10",
   "backends": [
     "all"

src/components/docs-flow/docs-flow-toolbar.svelte

@@ -24,7 +24,7 @@
     let showToolbar: boolean = false;
 
     const getAllDocIds = getContext("getAllDocIds") as () => BlockId[];
-    const getLoadedDocIds = getContext("getLoadedDocIds") as () => BlockId[];
+    // const getLoadedDocIds = getContext("getLoadedDocIds") as () => BlockId[];
     const jumpToDoc = getContext("jumpToDoc") as (id: BlockId) => void;
 
     function onConfigChanged() {
@@ -169,7 +169,35 @@
         });
     };
 
+    const getDocsFlow = getContext("docsFlow") as () => HTMLElement;
+
+    const getCurrentProtyle = (): BlockId[] => {
+        const docsFlow = getDocsFlow();
+        if (!docsFlow) return [];
+
+        // 获取容器在视口中的实际可见位置
+        const rect = docsFlow.getBoundingClientRect();
+        const visibleTop = rect.top;
+        const visibleBottom = rect.bottom;
+
+        const protyles = docsFlow.querySelectorAll(".docs-flow__doc");
+        const visibleIds: BlockId[] = [];
+
+        protyles.forEach((protyle: HTMLElement) => {
+            const protyleRect = protyle.getBoundingClientRect();
+            const id = protyle.getAttribute("data-node-id");
+
+            if (protyleRect.bottom > visibleTop && protyleRect.top < visibleBottom && id) {
+                visibleIds.push(id);
+            }
+        });
+
+        return visibleIds;
+    };
+
     const showDocsFlowOutline = () => {
+        const ids = getCurrentProtyle();
+        // console.log(visibleIds);
 
         const { close } = svelteDialog({
             title: "Outline",
@@ -178,11 +206,11 @@
                     target: container,
                     props: {
                         allDocIds: getAllDocIds(),
-                        loadedDocIds: getLoadedDocIds(),
+                        hightlightIds: ids || [],
                         jumpToDoc: (id: BlockId) => {
                             jumpToDoc(id);
                             close();
-                        }
+                        },
                     },
                 });
             },
@@ -205,7 +233,7 @@
 </script>
 
 <div
-    class="docs-flow__toolbar {classNamePin}"
+    class="docs-flow__toolbar {classNamePin} {isMobile() ? 'is-mobile' : ''}"
     on:mouseenter={() => {
         if (pinToolbar) return;
         showToolbar = true;
@@ -248,7 +276,7 @@
             </svg>
 
             <svg
-                class="svg-button ariaLabel"
+                class="svg-button ariaLabel hide-if-very-narrow"
                 aria-label={i18n.button.reverse}
                 on:click={() => {
                     listDocumentIds = listDocumentIds.reverse();
@@ -260,7 +288,7 @@
             </svg>
 
             <svg
-                class="svg-button ariaLabel"
+                class="svg-button ariaLabel hide-if-very-narrow"
                 aria-label={i18n.button.edit}
                 on:click={editRuleValue}
                 on:keypress={() => {}}
@@ -294,7 +322,7 @@
 
             <input
                 id="displayBreadcrumb"
-                class="b3-switch fn__flex-center"
+                class="b3-switch fn__flex-center hide-if-very-narrow"
                 type="checkbox"
                 bind:checked={config.breadcrumb}
                 on:change={onConfigChanged}
@@ -312,13 +340,16 @@
                 class="fn__flex {isMobile() ? 'fn__none' : ''}"
                 style="gap: 5px;"
             >
-                <button class="b3-button hide-if-need" on:click={onRenameThis}
+                <button class="b3-button hide-if-narrow" on:click={onRenameThis}
                     >{i18n.nameTab}</button
                 >
-                <button class="b3-button" on:click={onSaveThis}>
+                <button
+                    class="b3-button hide-if-very-narrow"
+                    on:click={onSaveThis}
+                >
                     {i18n.saveRule}
                 </button>
-                <button class="b3-button hide-if-need" on:click={onCopyLink}>
+                <button class="b3-button hide-if-narrow" on:click={onCopyLink}>
                     {i18n.copyLink}
                 </button>
             </div>
@@ -330,41 +361,80 @@
     .docs-flow__toolbar {
         height: 3rem;
         padding: 0;
-
         position: absolute;
+
+        --width: 70%;
+        --left: calc(calc(100% - var(--width)) / 2);
+
         width: var(--width);
         left: var(--left);
 
         top: 15px;
         z-index: 10;
-
         display: flex;
         justify-content: center;
         align-items: center;
+
+        container-type: inline-size;
+        container-name: docs-flow-toolbar;
     }
 
     .docs-flow__toolbar section.docs-flow__toolbar-body {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         gap: 5px;
-
         padding: 4px 5px;
-        width: 600px;
-        height: 30px;
 
+        height: 30px;
         background-color: var(--b3-theme-surface);
         opacity: 1;
         border-radius: 10px;
         box-shadow:
             0 0.5em 1em -0.125em var(--b3-theme-primary-light),
             0 0 0 1px var(--b3-theme-primary-light);
 
-        overflow: hidden; /* 添加这行以隐藏溢出的内容 */
-
         #space {
             flex: 1;
         }
+
+        flex-wrap: nowrap;
+
+        @container docs-flow-toolbar (max-width: 600px) {
+            .b3-label__text {
+                display: none;
+            }
+            .hide-if-narrow {
+                display: none;
+            }
+        }
+
+        @container docs-flow-toolbar (max-width: 400px) {
+            .hide-if-very-narrow {
+                display: none;
+            }
+        }
+    }
+
+    .docs-flow__toolbar.is-mobile {
+        --width: 90%;
+        top: 25px;
+        section.docs-flow__toolbar-body {
+            width: 70%;
+            min-width: max-content;
+        }
+    }
+    .docs-flow__toolbar:not(.is-mobile) {
+        --width: 80%;
+
+        section.docs-flow__toolbar-body {
+            @container docs-flow-toolbar (min-width: 720px) {
+                width: 720px;
+            }
+            @container docs-flow-toolbar (max-width: 720px) {
+                width: 100%;
+            }
+        }
     }
 
     .docs-flow__toolbar svg.svg-button {

src/components/docs-flow/docs-flow.svelte

@@ -3,7 +3,7 @@
  Author       : Yp Z
  Date         : 2023-07-28 20:49:27
  FilePath     : /src/components/docs-flow/docs-flow.svelte
- LastEditTime : 2024-10-03 14:10:48
+ LastEditTime : 2025-01-18 19:03:34
  Description  : 
 -->
 <script lang="ts">
@@ -18,21 +18,21 @@
 
     export let app: any;
     export let rule: MatchRule;
-    export let listDocumentIds: DocumentId[] = [];  //所有文档列表
+    export let listDocumentIds: DocumentId[] = []; //所有文档列表
 
     // const ruleHash: string = rule.hash;
     let config: IConfig = rule.config;
 
     let loadOffset: number = 0; //当前动态加载的文档偏移量
     let loadLength: number = config.dynamicLoading.capacity; //每次动态加载的文档数量
     let shiftLength: number = config.dynamicLoading.shift; //每次动态加载时的偏移量
-    let loadIdList: DocumentId[] = [];  //当前动态加载的文档列表
+    let loadIdList: DocumentId[] = []; //当前动态加载的文档列表
 
-    setContext('getAllDocIds', () => {
+    setContext("getAllDocIds", () => {
         return listDocumentIds;
     });
 
-    setContext('getLoadedDocIds', () => {
+    setContext("getLoadedDocIds", () => {
         return loadIdList;
     });
 
@@ -67,14 +67,16 @@
         }
         //然后再滚动到指定文档
         const queryAndScroll = () => {
-            const ele = document.querySelector(`.docs-flow__doc[data-node-id="${id}"] > .protyle-breadcrumb__item`);
+            const ele = document.querySelector(
+                `.docs-flow__doc[data-node-id="${id}"] > .protyle-breadcrumb__item`,
+            );
             if (ele) {
                 // ele.scrollIntoView({ behavior: "smooth", block: "start" });
                 ele.scrollIntoView(true);
                 return true;
             }
             return false;
-        }
+        };
 
         const MAX_ATTEMPTS = 5;
         const TRY_INTERVAL = 500;
@@ -84,19 +86,21 @@
             if (queryAndScroll()) {
                 console.debug("滚动成功");
             } else if (attempts < MAX_ATTEMPTS) {
-                console.debug(`滚动失败，${TRY_INTERVAL * (attempts + 1)}ms 后重试`);
+                console.debug(
+                    `滚动失败，${TRY_INTERVAL * (attempts + 1)}ms 后重试`,
+                );
                 attempts++;
                 setTimeout(attemptScroll, TRY_INTERVAL);
             } else {
                 console.debug("滚动失败，已达到最大尝试次数");
             }
-        }
+        };
 
         // 立即尝试第一次滚动
         attemptScroll();
-    }
+    };
 
-    setContext('jumpToDoc', jumpToDoc);
+    setContext("jumpToDoc", jumpToDoc);
 
     const updateLoadIdList = () => {
         if (config.dynamicLoading.enabled !== true) {
@@ -204,32 +208,41 @@
 
     //全局 css，用于隐藏gutter
     let hideGutterClass: "" | "hide-gutter" = "";
+    let docsFlow: HTMLElement;
+
+    setContext("docsFlow", () => docsFlow);
+
 </script>
 
-<Toolbar
-    bind:rule
-    bind:config
-    bind:listDocumentIds
-    {updateLoadIdList}
-    {dispatch}
-    {reInit}
-    --width="{isMobile() ? '80%' : '60%'}"
-    --left="calc(calc(100% - var(--width)) / 2)"
-/>
-
-<div class="docs-flow fn__flex-1 {hideGutterClass}" style="--display-breadcrumb: {isMobile() ? "none" : "flex"}">
-    {#each loadIdList as did, i (did)}
-        <Protyle
-            {app}
-            index={i + loadOffset}
-            blockId={did}
-            {config}
-            displayCollapseBar={config.breadcrumb}
-        />
-    {/each}
-</div>
+<main class="docs-flow-container">
+    <Toolbar
+        bind:rule
+        bind:config
+        bind:listDocumentIds
+        {updateLoadIdList}
+        {dispatch}
+        {reInit}
+    />
+
+    <div
+        class="docs-flow fn__flex-1 {hideGutterClass}"
+        style="--display-breadcrumb: {isMobile() ? 'none' : 'flex'}"
+        bind:this={docsFlow}
+    >
+        {#each loadIdList as did, i (did)}
+            <Protyle
+                {app}
+                index={i + loadOffset}
+                blockId={did}
+                {config}
+                displayCollapseBar={config.breadcrumb}
+            />
+        {/each}
+    </div>
+</main>
 
 <style lang="scss">
+
     .docs-flow {
         :global(div.docs-flow__protyle .protyle-breadcrumb) {
             display: var(--display-breadcrumb);