From c5bfa680583edaa682c7eeaf7ecb8b2829e03b42 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Fri, 25 Jul 2025 11:52:57 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/10964

---
 app/src/assets/scss/component/_menu.scss   |  7 +++
 app/src/protyle/render/av/groups.ts        | 60 +++++++++++++++++++++-
 app/src/protyle/render/av/openMenuPanel.ts | 18 ++++++-
 3 files changed, 82 insertions(+), 3 deletions(-)

diff --git a/app/src/assets/scss/component/_menu.scss b/app/src/assets/scss/component/_menu.scss
index 168301387..75a0c09a4 100644
--- a/app/src/assets/scss/component/_menu.scss
+++ b/app/src/assets/scss/component/_menu.scss
@@ -296,6 +296,13 @@
     min-width: 84px;
   }
 
+  &__labels {
+    font-size: 12px;
+    margin-bottom: 4px;
+    line-height: 20px;
+    color: var(--b3-theme-on-surface);
+  }
+
   &__icon {
     align-self: center;
     height: 14px;
diff --git a/app/src/protyle/render/av/groups.ts b/app/src/protyle/render/av/groups.ts
index de43da90b..6dd056c17 100644
--- a/app/src/protyle/render/av/groups.ts
+++ b/app/src/protyle/render/av/groups.ts
@@ -103,6 +103,64 @@ const getLanguageByIndex = (index: number, type: "sort" | "date") => {
     }
 };
 
+export const getGroupsNumberHTML = (group: IAVGroup) => {
+    return `<div class="b3-menu__items">
+    <button class="b3-menu__item" data-type="nobg">
+        <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goGroups">
+            <svg><use xlink:href="#iconLeft"></use></svg>
+        </span>
+        <span class="b3-menu__label ft__center">${window.siyuan.languages.numberFormatNone}</span>
+    </button>
+    <button class="b3-menu__separator"></button>
+    <div class="b3-menu__item" data-type="nobg">
+        <div>
+            <div class="b3-menu__labels">${window.siyuan.languages.groupRange}</div>
+            <input data-type="avGroupRange" class="b3-text-field fn__size96" placeholder="${group?.range?.numStart || 0}"> - <input class="b3-text-field fn__size96" placeholder="${group?.range?.numEnd || 1000}">
+            <div class="fn__hr"></div>
+            <div class="b3-menu__labels">${window.siyuan.languages.groupStep}</div>
+            <input class="b3-text-field fn__block" placeholder="${group?.range?.numStep || 100}">
+            <div class="fn__hr--small"></div>
+        </div>
+    </div>
+</div>`;
+};
+
+export const bindGroupsNumber = (options: {
+    protyle: IProtyle;
+    menuElement: HTMLElement;
+    blockElement: Element;
+    data: IAV;
+}) => {
+    return () => {
+        if (!options.menuElement.querySelector('[data-type="avGroupRange"]')) {
+            return;
+        }
+        const blockID = options.blockElement.getAttribute("data-node-id");
+        const inputElements = options.menuElement.querySelectorAll("input");
+        const range = {
+            numStart: inputElements[0].value ? parseFloat(inputElements[0].value) : 0,
+            numEnd: inputElements[1].value ? parseFloat(inputElements[1].value) : 1000,
+            numStep: inputElements[2].value ? parseFloat(inputElements[2].value) : 100
+        };
+        transaction(options.protyle, [{
+            action: "setAttrViewGroup",
+            avID: options.data.id,
+            blockID,
+            data: {
+                range
+            }
+        }], [{
+            action: "setAttrViewGroup",
+            avID: options.data.id,
+            blockID,
+            data: {
+                range: options.data.view.group.range
+            }
+        }]);
+        options.data.view.group.range = range;
+    };
+};
+
 export const getGroupsHTML = (columns: IAVColumn[], view: IAVView) => {
     let html = "";
     let column: IAVColumn;
@@ -125,7 +183,7 @@ export const getGroupsHTML = (columns: IAVColumn[], view: IAVView) => {
     <span class="b3-menu__accelerator">${getLanguageByIndex(view.group.method, "date")}</span>
     <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
 </button>
-<button class="b3-menu__item${column.type === "number" ? "" : " fn__none"}" data-type="goGroupsNumber">
+<button class="b3-menu__item${column.type === "number" ? "" : " fn__none"}" data-type="getGroupsNumber">
     <span class="b3-menu__label">${window.siyuan.languages.numberFormatNone}</span>
     <span class="b3-menu__accelerator">${(view.group.range && typeof view.group.range.numStart === "number") ? `${view.group.range.numStart} - ${view.group.range.numEnd}` : ""}</span>
     <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts
index 241227a08..e08599a60 100644
--- a/app/src/protyle/render/av/openMenuPanel.ts
+++ b/app/src/protyle/render/av/openMenuPanel.ts
@@ -49,9 +49,9 @@ import {Dialog} from "../../../dialog";
 import {bindLayoutEvent, getLayoutHTML, updateLayout} from "./layout";
 import {setGalleryCover, setGalleryRatio, setGallerySize} from "./gallery/util";
 import {
-    bindGroupsEvent,
+    bindGroupsEvent, bindGroupsNumber,
     getGroupsHTML,
-    getGroupsMethodHTML,
+    getGroupsMethodHTML, getGroupsNumberHTML,
     goGroupsDate,
     goGroupsSort,
     setGroupMethod
@@ -1463,6 +1463,7 @@ export const openMenuPanel = (options: {
                     event.stopPropagation();
                     break;
                 } else if (type === "goGroups") {
+                    closeCB = undefined;
                     menuElement.innerHTML = getGroupsHTML(fields, data.view);
                     bindGroupsEvent({
                         protyle: options.protyle,
@@ -1481,6 +1482,19 @@ export const openMenuPanel = (options: {
                     event.preventDefault();
                     event.stopPropagation();
                     break;
+                } else if (type === "getGroupsNumber") {
+                    window.siyuan.menus.menu.remove();
+                    menuElement.innerHTML = getGroupsNumberHTML(data.view.group);
+                    setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
+                    closeCB = bindGroupsNumber({
+                        protyle: options.protyle,
+                        data,
+                        menuElement,
+                        blockElement: options.blockElement
+                    });
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
                 }
                 // 有错误日志，没找到重现步骤，需先判断一下
                 if (!target || !target.parentElement) {