✨ https://github.com/siyuan-note/siyuan/issues/8764

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

@@ -5,6 +5,7 @@ import {fetchPost} from "../../../util/fetch";
 import {getDefaultOperatorByType, setFilter} from "./filter";
 import {genCellValue} from "./cell";
 import {openMenuPanel} from "./openMenuPanel";
+import {getLabelByNumberFormat} from "./number";
 
 export const duplicateCol = (options: {
     protyle: IProtyle,
@@ -117,10 +118,10 @@ export const getEditHTML = (options: {
     }
     if (colData.type === "number") {
         html += `<button class="b3-menu__separator"></button>
-<button class="b3-menu__item" data-type="numberFormat">
+<button class="b3-menu__item" data-type="numberFormat" data-format="${colData.numberFormat}">
     <svg class="b3-menu__icon"><use xlink:href="#iconFormat"></use></svg>
     <span class="b3-menu__label">${window.siyuan.languages.format}</span>
-    <span class="b3-menu__accelerator">${colData.numberFormat}</span>
+    <span class="b3-menu__accelerator">${getLabelByNumberFormat(colData.numberFormat)}</span>
 </button>`;
     }
     return `<div class="b3-menu__items">

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

@@ -0,0 +1,200 @@
+import {Menu} from "../../../plugin/Menu";
+import {transaction} from "../../wysiwyg/transaction";
+
+const addFormatItem = (options: {
+    menu: Menu,
+    protyle: IProtyle,
+    colId: string,
+    avID: string,
+    format: string,
+    oldFormat: string
+    avPanelElement: HTMLElement
+}) => {
+    options.menu.addItem({
+        iconHTML: "",
+        label: getLabelByNumberFormat(options.format),
+        click() {
+            transaction(options.protyle, [{
+                action: "updateAttrViewColNumberFormat",
+                id: options.colId,
+                avID: options.avID,
+                format: options.format,
+                type: "number",
+            }], [{
+                action: "updateAttrViewColNumberFormat",
+                id: options.colId,
+                avID: options.avID,
+                format: options.oldFormat,
+                type: "number",
+            }]);
+            options.avPanelElement.remove();
+        }
+    })
+}
+
+export const formatNumber = (options: {
+    avPanelElement: HTMLElement,
+    element: HTMLElement,
+    protyle: IProtyle,
+    colId: string,
+    avID: string,
+    oldFormat: string
+}) => {
+    const menu = new Menu("av-col-format-number")
+    addFormatItem({
+        menu,
+        protyle: options.protyle,
+        colId: options.colId,
+        avID: options.avID,
+        format: "",
+        oldFormat: options.oldFormat,
+        avPanelElement: options.avPanelElement,
+    })
+    addFormatItem({
+        menu,
+        protyle: options.protyle,
+        colId: options.colId,
+        avID: options.avID,
+        format: "commas",
+        oldFormat: options.oldFormat,
+        avPanelElement: options.avPanelElement,
+    })
+    addFormatItem({
+        menu,
+        protyle: options.protyle,
+        colId: options.colId,
+        avID: options.avID,
+        format: "percent",
+        oldFormat: options.oldFormat,
+        avPanelElement: options.avPanelElement,
+    })
+    addFormatItem({
+        menu,
+        protyle: options.protyle,
+        colId: options.colId,
+        avID: options.avID,
+        format: "usDollar",
+        oldFormat: options.oldFormat,
+        avPanelElement: options.avPanelElement,
+    })
+    addFormatItem({
+        menu,
+        protyle: options.protyle,
+        colId: options.colId,
+        avID: options.avID,
+        format: "yuan",
+        oldFormat: options.oldFormat,
+        avPanelElement: options.avPanelElement,
+    })
+    addFormatItem({
+        menu,
+        protyle: options.protyle,
+        colId: options.colId,
+        avID: options.avID,
+        format: "euro",
+        oldFormat: options.oldFormat,
+        avPanelElement: options.avPanelElement,
+    })
+    addFormatItem({
+        menu,
+        protyle: options.protyle,
+        colId: options.colId,
+        avID: options.avID,
+        format: "pound",
+        oldFormat: options.oldFormat,
+        avPanelElement: options.avPanelElement,
+    })
+    addFormatItem({
+        menu,
+        protyle: options.protyle,
+        colId: options.colId,
+        avID: options.avID,
+        format: "yen",
+        oldFormat: options.oldFormat,
+        avPanelElement: options.avPanelElement,
+    })
+    addFormatItem({
+        menu,
+        protyle: options.protyle,
+        colId: options.colId,
+        avID: options.avID,
+        format: "ruble",
+        oldFormat: options.oldFormat,
+        avPanelElement: options.avPanelElement,
+    })
+    addFormatItem({
+        menu,
+        protyle: options.protyle,
+        colId: options.colId,
+        avID: options.avID,
+        format: "rupee",
+        oldFormat: options.oldFormat,
+        avPanelElement: options.avPanelElement,
+    })
+    addFormatItem({
+        menu,
+        protyle: options.protyle,
+        colId: options.colId,
+        avID: options.avID,
+        format: "won",
+        oldFormat: options.oldFormat,
+        avPanelElement: options.avPanelElement,
+    })
+    addFormatItem({
+        menu,
+        protyle: options.protyle,
+        colId: options.colId,
+        avID: options.avID,
+        format: "canadianDollar",
+        oldFormat: options.oldFormat,
+        avPanelElement: options.avPanelElement,
+    })
+    addFormatItem({
+        menu,
+        protyle: options.protyle,
+        colId: options.colId,
+        avID: options.avID,
+        format: "franc",
+        oldFormat: options.oldFormat,
+        avPanelElement: options.avPanelElement,
+    })
+    const rect = options.element.getBoundingClientRect()
+    menu.open({
+        x: rect.left,
+        y: rect.bottom,
+        h: rect.height,
+        w: rect.width,
+        isLeft: true,
+    })
+}
+
+export const getLabelByNumberFormat = (format: string) => {
+    switch (format) {
+        case "":
+            return window.siyuan.languages.numberFormatNone
+        case "commas":
+            return window.siyuan.languages.numberFormatCommas
+        case "percent":
+            return window.siyuan.languages.numberFormatPercent
+        case "usDollar":
+            return window.siyuan.languages.numberFormatUSDollar
+        case "yuan":
+            return window.siyuan.languages.numberFormatYuan
+        case "euro":
+            return window.siyuan.languages.numberFormatEuro
+        case "pound":
+            return window.siyuan.languages.numberFormatPound
+        case "yen":
+            return window.siyuan.languages.numberFormatYen
+        case "ruble":
+            return window.siyuan.languages.numberFormatRuble
+        case "rupee":
+            return window.siyuan.languages.numberFormatRupee
+        case "won":
+            return window.siyuan.languages.numberFormatWon
+        case "canadianDollar":
+            return window.siyuan.languages.numberFormatCanadianDollar
+        case "franc":
+            return window.siyuan.languages.numberFormatFranc
+    }
+}

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

@@ -8,6 +8,7 @@ import {bindSelectEvent, getSelectHTML, addColOptionOrCell, setColOption, remove
 import {addFilter, getFiltersHTML, setFilter} from "./filter";
 import {addSort, bindSortsEvent, getSortsHTML} from "./sort";
 import {bindDateEvent, getDateHTML, setDateValue} from "./date";
+import {formatNumber} from "./number";
 
 export const openMenuPanel = (options: {
     protyle: IProtyle,
@@ -431,7 +432,14 @@ export const openMenuPanel = (options: {
                     event.stopPropagation();
                     break;
                 } else if (type === "numberFormat") {
-
+                    formatNumber({
+                        avPanelElement,
+                        element: target,
+                        protyle: options.protyle,
+                        oldFormat: target.dataset.format,
+                        colId: menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id"),
+                        avID
+                    });
                     event.preventDefault();
                     event.stopPropagation();
                     break;

app/src/protyle/wysiwyg/transaction.ts

@@ -655,7 +655,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b
     } else if (["addAttrViewCol", "insertAttrViewBlock", "updateAttrViewCol", "updateAttrViewColOptions",
         "updateAttrViewColOption", "updateAttrViewCell", "sortAttrViewRow", "sortAttrViewCol", "setAttrViewColHidden",
         "setAttrViewColWrap", "setAttrViewColWidth", "removeAttrViewColOption", "setAttrViewName", "setAttrViewFilters",
-        "setAttrViewSorts", "setAttrViewColCalc", "removeAttrViewCol"].includes(operation.action)) {
+        "setAttrViewSorts", "setAttrViewColCalc", "removeAttrViewCol", "updateAttrViewColNumberFormat"].includes(operation.action)) {
         refreshAV(protyle, operation);
     }
 };

app/src/types/index.d.ts

@@ -36,6 +36,7 @@ type TOperation =
     | "setAttrViewFilters"
     | "setAttrViewSorts"
     | "setAttrViewColCalc"
+    | "updateAttrViewColNumberFormat"
 type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins"
 type TCardType = "doc" | "notebook" | "all"
 type TEventBus = "ws-main" |
@@ -329,6 +330,7 @@ interface IOperation {
     action: TOperation, // move， delete 不需要传 data
     id?: string,
     avID?: string,  // av
+    format?: string // updateAttrViewColNumberFormat 专享
     keyID?: string // updateAttrViewCell 专享
     rowID?: string // updateAttrViewCell 专享
     data?: any, // updateAttr 时为  { old: IObject, new: IObject }, updateAttrViewCell 时为 {TAVCol: {content: string}}