🎨 https://github.com/siyuan-note/siyuan/issues/10964

app/src/protyle/render/av/groups.ts

@@ -13,35 +13,35 @@ export const setGroupMethod = (options: {
     blockElement: Element,
 }) => {
     const blockID = options.blockElement.getAttribute("data-block-id");
+    const column: IAVColumn = getFieldsByData(options.data).find(item => item.id === options.fieldId);
+    const data = {
+        field: options.fieldId,
+        method: column.type === "number" ? 1 : (["date", "updated", "created"].includes(column.type) ? 2 : 0),
+        order: 0,
+        range: column.type === "number" ? {
+            numStart: 0,
+            numEnd: 1000,
+            numStep: 100,
+        } : null
+    };
     transaction(options.protyle, [{
         action: "setAttrViewGroup",
         avID: options.data.id,
         blockID,
-        data: {
-            field: options.fieldId,
-            method: null,
-            order: null,
-            range: null
-        }
+        data
     }], [{
         action: "setAttrViewGroup",
         avID: options.data.id,
         blockID,
         data: {
             field: options.data.view.group?.field || "",
-            method: null,
-            order: null,
-            range: null
+            method: options.data.view.group?.method || "",
+            order: options.data.view.group?.order || "",
+            range: options.data.view.group?.range || ""
         }
     }]);
-    if (!options.data.view.group) {
-        options.data.view.group = {
-            field: options.fieldId
-        };
-    } else {
-        options.data.view.group.field = options.fieldId;
-    }
-    options.menuElement.innerHTML = getGroupsHTML(getFieldsByData(options.data), options.data.view.group);
+    options.data.view.group = data;
+    options.menuElement.innerHTML = getGroupsHTML(getFieldsByData(options.data), options.data.view);
     // bindGroupsEvent(options.protyle, options.menuElement, options.data, blockID);
     const tabRect = options.blockElement.querySelector(".av__views").getBoundingClientRect();
     setPosition(options.menuElement, tabRect.right - options.menuElement.clientWidth, tabRect.bottom, tabRect.height);
@@ -74,17 +74,68 @@ ${html}
 </div>`;
 };
 
-export const getGroupsHTML = (columns: IAVColumn[], group: IAVGroup) => {
+const getLanguageByIndex = (index: number, type: "sort" | "date") => {
+    if (type === "sort") {
+        switch (index) {
+            case 0:
+                return window.siyuan.languages.asc;
+            case 1:
+                return window.siyuan.languages.desc;
+            case 2:
+                return window.siyuan.languages.customSort;
+            default:
+                return "";
+        }
+    } else if (type === "date") {
+        switch (index) {
+            case 2:
+                return window.siyuan.languages.groupMethodDateRelative;
+            case 3:
+                return window.siyuan.languages.groupMethodDateDay;
+            case 4:
+                return window.siyuan.languages.groupMethodDateWeek;
+            case 5:
+                return window.siyuan.languages.groupMethodDateMonth;
+            case 6:
+                return window.siyuan.languages.groupMethodDateYear;
+            default:
+                return "";
+        }
+    }
+};
+
+export const getGroupsHTML = (columns: IAVColumn[], view: IAVView) => {
     let html = "";
-    if (group && group.field) {
-        html = `<button class="b3-menu__item" data-type="goGroupsMethod">
+    let column: IAVColumn;
+    if (view.group && view.group.field) {
+        let groupHTML = "";
+        if (view.groups.length > 0) {
+            groupHTML = `<button class="b3-menu__separator"></button>
+<button class="b3-menu__item" data-type="nobg">
+    <span class="b3-menu__label">${window.siyuan.languages.groups}</span>
+</button>`;
+            view.groups.forEach(item => {
+                groupHTML += `<button class="b3-menu__item" draggable="true">
+    <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
+    <div class="b3-menu__label fn__flex">${item.name || ""}</div>
+    <svg class="b3-menu__action"><use xlink:href="#iconEye${item.groupHidden ? "off" : ""}"></use></svg>
+</button>`;
+            });
+        }
+        column = columns.find(item => item.id === view.group.field);
+        html = `<button class="b3-menu__item${["date", "updated", "created"].includes(column.type) ? "" : " fn__none"}" data-type="goGroupsDate">
     <span class="b3-menu__label">${window.siyuan.languages.date}</span>
-    <span class="b3-menu__accelerator">${group.method}</span>
+    <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">
+    <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>
 </button>
 <button class="b3-menu__item" data-type="goGroupsSort">
     <span class="b3-menu__label">${window.siyuan.languages.sort}</span>
-    <span class="b3-menu__accelerator">${group.order}</span>
+    <span class="b3-menu__accelerator">${getLanguageByIndex(view.group.order, "sort")}</span>
     <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
 </button>
 <button class="b3-menu__item">
@@ -92,8 +143,9 @@ export const getGroupsHTML = (columns: IAVColumn[], group: IAVGroup) => {
     <span class="fn__space fn__flex-1"></span>
     <input type="checkbox" class="b3-switch b3-switch--menu">
 </button>
+${groupHTML}
 <button class="b3-menu__separator"></button>
-<button class="b3-menu__item" data-type="removeGroups">
+<button class="b3-menu__item b3-menu__item--warning" data-type="removeGroups">
     <svg class="b3-menu__icon"><use xlink:href="#iconTrashcan"></use></svg>
     <span class="b3-menu__label">${window.siyuan.languages.removeGroup}</span>
 </button>`;
@@ -108,7 +160,7 @@ export const getGroupsHTML = (columns: IAVColumn[], group: IAVGroup) => {
 <button class="b3-menu__separator"></button>
 <button class="b3-menu__item" data-type="goGroupsMethod">
     <span class="b3-menu__label">${window.siyuan.languages.groupMethod}</span>
-    <span class="b3-menu__accelerator">${(group && group.field) ? columns.filter(item => item.id === group.field)[0].name : ""}</span>
+    <span class="b3-menu__accelerator">${column ? column.name : ""}</span>
     <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
 </button>
 ${html}

app/src/protyle/render/av/openMenuPanel.ts

@@ -578,7 +578,7 @@ export const openMenuPanel = (options: {
                     event.stopPropagation();
                     break;
                 } else if (type === "goGroups") {
-                    menuElement.innerHTML = getGroupsHTML(fields, data.view.group);
+                    menuElement.innerHTML = getGroupsHTML(fields, data.view);
                     bindGroupsEvent();
                     setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
                     window.siyuan.menus.menu.remove();

app/src/types/index.d.ts

@@ -851,6 +851,7 @@ interface IAVView {
     pageSize: number;
     showIcon: boolean;
     wrapField: boolean;
+    groupHidden?: boolean,
     filters: IAVFilter[],
     sorts: IAVSort[],
     groups: IAVView[]
@@ -893,9 +894,9 @@ interface IAVGroup {
     field: string,
     method?: number //  0: 按值分组、1: 按数字范围分组、2: 按相对日期分组、3: 按天日期分组、4: 按周日期分组、5: 按月日期分组、6: 按年日期分组
     range?: {
-        numStart: number // 数字范围起始值
-        numEnd: number   // 数字范围结束值
-        numStep: number  // 数字范围步长
+        numStart: number // 数字范围起始值 0
+        numEnd: number   // 数字范围结束值 1000
+        numStep: number  // 数字范围步长 100
     }
     order?: number  // 升序: 0(默认), 降序: 1, 手动排序: 2
 }