diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 88dd955e3..bbc3e5ac5 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -109,12 +109,22 @@
         box-sizing: border-box;
         opacity: 0;
 
+        &.av__calc--ashow {
+          opacity: 1;
+        }
+
         svg {
           height: 10px;
           width: 10px;
           margin-left: 5px;
         }
 
+        span {
+          font-size: 16px;
+          color: var(--b3-theme-on-background);
+          margin-left: 5px;
+        }
+
         &:hover {
           background-color: var(--b3-list-icon-hover);
         }
diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts
index dacde069e..8caca1832 100644
--- a/app/src/protyle/render/av/cell.ts
+++ b/app/src/protyle/render/av/cell.ts
@@ -3,6 +3,56 @@ import {hasClosestBlock, hasClosestByClassName} from "../../util/hasClosest";
 import {openMenuPanel} from "./openMenuPanel";
 import {Menu} from "../../../plugin/Menu";
 
+export const getCalcValue = (column: IAVColumn) => {
+    if (!column.calc || !column.calc.result) {
+        return ""
+    }
+    const resultCalc = column.calc.result.number
+    let value = "";
+    switch (column.calc.operator) {
+        case "Count all":
+            value = `<span>${resultCalc.content}</span>${window.siyuan.languages.calcResultCountAll}`
+            break;
+        case "Count values":
+            value = `<span>${resultCalc.content}</span>${window.siyuan.languages.calcResultCountValues}`;
+            break;
+        case "Count unique values":
+            value = `<span>${resultCalc.content}</span>${window.siyuan.languages.calcResultCountUniqueValues}`;
+            break;
+        case "Count empty":
+            value = `<span>${resultCalc.content}</span>${window.siyuan.languages.calcResultCountEmpty}`;
+            break;
+        case "Count not empty":
+            value = `<span>${resultCalc.content}</span>${window.siyuan.languages.calcResultCountNotEmpty}`;
+            break;
+        case "Percent empty":
+            value = `<span>${resultCalc.content}</span>${window.siyuan.languages.calcResultPercentEmpty}`;
+            break;
+        case "Percent not empty":
+            value = `<span>${resultCalc.content}</span>${window.siyuan.languages.calcResultPercentNotEmpty}`;
+            break;
+        case "Sum":
+            value = `<span>${resultCalc.content}</span>${window.siyuan.languages.calcResultSum}`;
+            break;
+        case  "Average":
+            value = `<span>${resultCalc.content}</span>${window.siyuan.languages.calcResultAverage}`;
+            break;
+        case  "Median":
+            value = `<span>${resultCalc.content}</span>${window.siyuan.languages.calcResultMedian}`;
+            break;
+        case  "Min":
+            value = `<span>${resultCalc.content}</span>${window.siyuan.languages.calcResultMin}`;
+            break;
+        case  "Max":
+            value = `<span>${resultCalc.content}</span>${window.siyuan.languages.calcResultMax}`;
+            break;
+        case  "Range":
+            value = `<span>${resultCalc.content}</span>${window.siyuan.languages.calcResultRange}`;
+            break;
+    }
+    return value;
+}
+
 export const genCellValue = (colType: TAVCol, value: string | {
     content: string,
     color: string
diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
index cadf93115..622d2d87c 100644
--- a/app/src/protyle/render/av/render.ts
+++ b/app/src/protyle/render/av/render.ts
@@ -1,6 +1,7 @@
 import {fetchPost} from "../../../util/fetch";
 import {getColIconByType, showColMenu} from "./col";
 import {Constants} from "../../../constants";
+import {getCalcValue} from "./cell";
 
 export const avRender = (element: Element, cb?: () => void) => {
     let avElements: Element[] = [];
@@ -36,8 +37,9 @@ ${column.wrap ? "" : "white-space: nowrap;"}">
     </div>
     <div class="av__widthdrag"></div>
 </div>`;
-                    calcHTML += `<div class="av__calc${(calcHTML || !column.calc) ? "" : " av__calc--show"}" data-col-id="${column.id}" data-dtype="${column.type}" data-operator="${column.calc?.operator || ""}"  
-style="width: ${column.width || "200px"}"><svg><use xlink:href="#iconDown"></use></svg>${window.siyuan.languages.calc}</div>`;
+
+                    calcHTML += `<div class="av__calc${calcHTML ? "" : " av__calc--show"}${column.calc && column.calc.operator !== "" ? " av__calc--ashow" : ""}" data-col-id="${column.id}" data-dtype="${column.type}" data-operator="${column.calc?.operator || ""}"  
+style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use xlink:href="#iconDown"></use></svg>' + window.siyuan.languages.calc}</div>`;
                 });
                 tableHTML += `<div class="block__icons" style="min-height: auto">
     <div class="block__icon block__icon--show" data-type="av-header-add"><svg><use xlink:href="#iconAdd"></use></svg></div>
@@ -45,7 +47,6 @@ style="width: ${column.width || "200px"}"><svg><use xlink:href="#iconDown"></use
     <div class="block__icon block__icon--show"  data-type="av-header-more"><svg><use xlink:href="#iconMore"></use></svg></div>
 </div>
 </div>`;
-
                 // body
                 data.rows.forEach((row: IAVRow) => {
                     tableHTML += `<div class="av__row" data-id="${row.id}">