🎨 style: 优化响应式布局

Author: frostime

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sy-docs-flow",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "type": "module",
   "description": "",
   "repository": "",

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

@@ -170,7 +170,6 @@
     };
 
     const showDocsFlowOutline = () => {
-
         const { close } = svelteDialog({
             title: "Outline",
             constructor: (container: HTMLElement) => {
@@ -182,7 +181,7 @@
                         jumpToDoc: (id: BlockId) => {
                             jumpToDoc(id);
                             close();
-                        }
+                        },
                     },
                 });
             },
@@ -205,7 +204,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 +247,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 +259,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,14 +293,16 @@
 
             <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}
             />
 
             <button
-                class="b3-button {isMobile() ? 'b3-button--text' : ''}"
+                class="b3-button {isMobile()
+                    ? 'b3-button--text'
+                    : ''}"
                 on:click={onOpenConfig}
             >
                 {i18n.button.moreConfig}
@@ -312,13 +313,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 +334,84 @@
     .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: 95%;
+    }
+    .docs-flow__toolbar:not(.is-mobile) {
+        @container docs-flow (min-width: 1000px) {
+            --width: 72%;
+        }
+
+        @container docs-flow (max-width: 800px) {
+            --width: 90%;
+        }
+
+        section.docs-flow__toolbar-body {
+            @container docs-flow-toolbar (min-width: 720px) {
+                width: 720px;
+            }
+            @container docs-flow-toolbar (max-width: 720px) {
+                max-width: 100%;
+            }
+            @container docs-flow-toolbar (max-width: 400px) {
+                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 17:31:07
  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) {
@@ -206,30 +210,40 @@
     let hideGutterClass: "" | "hide-gutter" = "";
 </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'}"
+    >
+        {#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-container {
+        container-type: inline-size;
+        container-name: docs-flow;
+        width: 100%;
+        position: relative;
+    }
+
     .docs-flow {
         :global(div.docs-flow__protyle .protyle-breadcrumb) {
             display: var(--display-breadcrumb);