diff --git a/app/src/protyle/render/av/blockAttr.ts b/app/src/protyle/render/av/blockAttr.ts
index 064984753..005f0c2ec 100644
--- a/app/src/protyle/render/av/blockAttr.ts
+++ b/app/src/protyle/render/av/blockAttr.ts
@@ -4,6 +4,42 @@ import {escapeAttr} from "../../../util/escape";
 import * as dayjs from "dayjs";
 import {popTextCell} from "./cell";
 
+const genAVRollupHTML = (value: IAVCellValue) => {
+    let html = "";
+    switch (value.type) {
+        case "block":
+            html = value.block.content;
+            break;
+        case "text":
+            html = value.text.content;
+            break;
+        case "number":
+            html = value.number.formattedContent || value.number.content.toString();
+            break;
+        case "date":
+            if (value[value.type] && value[value.type].isNotEmpty) {
+                html = dayjs(value[value.type].content).format(value[value.type].isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm");
+            }
+            if (value[value.type] && value[value.type].hasEndDate && value[value.type].isNotEmpty && value[value.type].isNotEmpty2) {
+                html += `<svg class="av__cellicon"><use xlink:href="#iconForward"></use></svg>${dayjs(value[value.type].content2).format(value[value.type].isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm")}`;
+            }
+            if (html) {
+                html = `<span class="av__celltext">${html}</span>`;
+            }
+            break;
+        case "url":
+            html = value.url.content ? `<a class="fn__a" href="${value.url.content}" target="_blank">${value.url.content}</a>` : "";
+            break;
+        case "phone":
+            html = value.phone.content ? `<a class="fn__a" href="tel:${value.phone.content}" target="_blank">${value.phone.content}</a>` : "";
+            break;
+        case "email":
+            html = value.email.content ? `<a class="fn__a" href="mailto:${value.email.content}" target="_blank">${value.email.content}</a>` : "";
+            break;
+    }
+    return html;
+};
+
 export const genAVValueHTML = (value: IAVCellValue) => {
     let html = "";
     switch (value.type) {
@@ -74,8 +110,13 @@ export const genAVValueHTML = (value: IAVCellValue) => {
             });
             break;
         case "rollup":
-            value.rollup?.contents.forEach((item) => {
-                html += `<span class="av__celltext--url" style="margin-right: 8px">${item}</span>`;
+            value?.rollup?.contents?.forEach((item, index) => {
+                const rollupText = ["select", "mSelect", "mAsset", "checkbox", "relation"].includes(item.type) ? genAVValueHTML(item) : genAVRollupHTML(item);
+                if (!rollupText && html) {
+                    html = html.substring(0, html.length - 2);
+                } else {
+                    html += rollupText + ((index === value.rollup.contents.length - 1 || !rollupText) ? "" : ",&nbsp;");
+                }
             });
             break;
     }
diff --git a/app/src/protyle/render/av/rollup.ts b/app/src/protyle/render/av/rollup.ts
index 794e38938..4c5f6e8a9 100644
--- a/app/src/protyle/render/av/rollup.ts
+++ b/app/src/protyle/render/av/rollup.ts
@@ -175,7 +175,7 @@ export const getRollupHTML = (options: { data?: IAV, cellElements?: HTMLElement[
 </button>`
 }
 
-export const bindRollupEvent = (options:  {
+export const bindRollupEvent = (options: {
     protyle: IProtyle,
     data: IAV,
     menuElement: HTMLElement