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

app/appearance/langs/en_US.json

@@ -1,4 +1,5 @@
 {
+  "calc": "Calculate",
   "createWorkspace": "Create Workspace",
   "createWorkspaceTip": "Are you sure to use this path to create a workspace?",
   "calcOperatorNone": "None",

app/appearance/langs/es_ES.json

@@ -1,4 +1,5 @@
 {
+  "calc": "Calcular",
   "createWorkspace": "Crear espacio de trabajo",
   "createWorkspaceTip": "¿Estás seguro de usar esta ruta para crear un espacio de trabajo?",
   "calcOperatorNone": "Ninguno",

app/appearance/langs/fr_FR.json

@@ -1,4 +1,5 @@
 {
+  "calc": "Calculer",
   "createWorkspace": "Créer un espace de travail",
   "createWorkspaceTip": "Êtes-vous sûr d'utiliser ce chemin pour créer un espace de travail ?",
   "calcOperatorNone": "Aucun",

app/appearance/langs/zh_CHT.json

@@ -1,4 +1,5 @@
 {
+  "calc": "計算",
   "createWorkspace": "創建工作空間",
   "createWorkspaceTip": "確定使用該路徑創建工作空間嗎？",
   "calcOperatorNone": "無",

app/appearance/langs/zh_CN.json

@@ -1,4 +1,5 @@
 {
+  "calc": "计算",
   "createWorkspace": "创建工作空间",
   "createWorkspaceTip": "确定使用该路径创建工作空间吗？",
   "calcOperatorNone": "无",

app/src/assets/scss/business/_av.scss

@@ -3,6 +3,10 @@
   box-sizing: border-box;
   font-size: 14px;
 
+  &:hover .av__row--footer {
+    opacity: 1;
+  }
+
   &__header {
     top: -43px;
     z-index: 2;
@@ -74,7 +78,7 @@
         padding: 0;
 
         &:hover {
-          background-color: var(--b3-list-hover);
+          background-color: var(--b3-list-icon-hover);
         }
       }
     }
@@ -83,6 +87,51 @@
     &--footer {
       background-color: var(--b3-theme-background);
     }
+
+    &--footer {
+      display: flex;
+      border-top: 1px solid var(--b3-theme-surface-lighter);
+      color: var(--b3-theme-on-surface);
+      opacity: 0;
+
+      & > .av__calc {
+        display: flex;
+        align-items: center;
+        padding: 5px 5px 5px 7px;
+        border-right: 1px;
+        flex-direction: row-reverse;
+        box-sizing: border-box;
+
+        svg {
+          height: 10px;
+          width: 10px;
+          margin-left: 5px;
+        }
+
+        &:hover {
+          background-color: var(--b3-list-icon-hover);
+        }
+      }
+    }
+
+    &--add {
+      color: var(--b3-theme-on-surface);
+      padding: 5px 5px 5px 7px;
+      display: flex;
+      align-items: center;
+
+      svg {
+        height: 12px;
+        width: 12px;
+        color: var(--b3-theme-on-surface);
+        margin-right: 5px;
+        flex-shrink: 0;
+      }
+
+      &:hover {
+        background-color: var(--b3-list-icon-hover);
+      }
+    }
   }
 
   &__cell {

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

@@ -21,7 +21,8 @@ export const avRender = (element: Element, cb?: () => void) => {
             fetchPost("/api/av/renderAttributeView", {id: e.getAttribute("data-av-id")}, (response) => {
                 const data = response.data.view as IAVTable;
                 // header
-                let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol"><svg style="height: 42px"><use xlink:href="#iconUncheck"></use></svg></div>';
+                let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol"><svg style="height: 32px"><use xlink:href="#iconUncheck"></use></svg></div>';
+                let calcHTML = '<div style="width: 24px"></div>'
                 data.columns.forEach((column: IAVColumn) => {
                     if (column.hidden) {
                         return;
@@ -35,8 +36,10 @@ ${column.wrap ? "" : "white-space: nowrap;"}">
     </div>
     <div class="av__widthdrag"></div>
 </div>`;
+                    calcHTML += `<div class="av__calc" data-col-id="${column.id}" data-dtype="${column.type}"  
+style="width: ${column.width || "200px"}"><svg><use xlink:href="#iconDown"></use></svg>${window.siyuan.languages.calc}</div>`
                 });
-                tableHTML += `<div class="block__icons">
+                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>
     <div class="fn__space"></div>
     <div class="block__icon block__icon--show"  data-type="av-header-more"><svg><use xlink:href="#iconMore"></use></svg></div>
@@ -117,12 +120,11 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
     <div class="av__scroll">
         <div style="padding-left: ${paddingLeft};padding-right: ${paddingRight};float: left;">
             ${tableHTML}
-            <div class="block__icon block__icon--show">
-                <div class="fn__space"></div>
-                <svg><use xlink:href="#iconAdd"></use></svg><span class="fn__space"></span>
+            <div class="av__row--add">
+                <svg><use xlink:href="#iconAdd"></use></svg>
                 ${window.siyuan.languages.addAttr}
             </div>
-            <div class="av__row--footer">Calculate</div>
+            <div class="av__row--footer">${calcHTML}</div>
         </div>
     </div>
 </div>`;

app/src/protyle/wysiwyg/index.ts

@@ -358,8 +358,8 @@ export class WYSIWYG {
                 const dragColId = dragElement.getAttribute("data-col-id");
                 let newWidth: string;
                 documentSelf.onmousemove = (moveEvent: MouseEvent) => {
-                    newWidth = oldWidth + (moveEvent.clientX - event.clientX) + "px";
-                    dragElement.parentElement.parentElement.querySelectorAll(".av__row").forEach(item => {
+                    newWidth = Math.max(oldWidth + (moveEvent.clientX - event.clientX), 100) + "px";
+                    dragElement.parentElement.parentElement.querySelectorAll(".av__row, .av__row--footer").forEach(item => {
                         (item.querySelector(`[data-col-id="${dragColId}"]`) as HTMLElement).style.width = newWidth;
                     });
                 };