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

app/src/assets/scss/business/_custom.scss

@@ -3,4 +3,33 @@
     display: block;
     padding: 8px 16px;
   }
+
+  .block__logo {
+    width: 160px;
+    color: var(--b3-theme-on-surface);
+
+    svg {
+      margin-right: 4px;
+    }
+
+    span {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+
+  .b3-text-field--text {
+    background-color: transparent;
+    cursor: pointer;
+    transition: var(--b3-transition);
+
+    &:hover {
+      background-color: var(--b3-theme-background);
+    }
+  }
+
+  .b3-chip {
+    margin: 1px 2px;
+  }
 }

app/src/assets/scss/component/_form.scss

@@ -120,4 +120,8 @@
   &--noborder {
     border-bottom: 0;
   }
+
+  &--bordr {
+    border-bottom: 1px solid var(--b3-border-color) !important;
+  }
 }

app/src/menus/commonMenuItem.ts

@@ -25,6 +25,7 @@ import * as dayjs from "dayjs";
 import {Constants} from "../constants";
 import {exportImage} from "../protyle/export/util";
 import {App} from "../index";
+import {renderAVAttribute} from "../protyle/render/av/render";
 
 const bindAttrInput = (inputElement: HTMLInputElement, confirmElement: Element) => {
     inputElement.addEventListener("keydown", (event) => {
@@ -161,7 +162,7 @@ export const openFileWechatNotify = (protyle: IProtyle) => {
 const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rms: string[]) => void) => {
     let customHTML = "";
     let notifyHTML = "";
-    let avHTML = "";
+    let hasAV = false;
     const range = getSelection().rangeCount > 0 ? getSelection().getRangeAt(0) : null;
     Object.keys(attrs).forEach(item => {
         if ("custom-riff-decks" === item) {
@@ -174,14 +175,15 @@ const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rm
     <input class="b3-text-field fn__block" type="datetime-local" readonly data-name="${item}" value="${dayjs(attrs[item]).format("YYYY-MM-DDTHH:mm")}">
 </label>`;
         } else if (item.indexOf("custom-av") > -1) {
-            avHTML += `<label class="b3-label b3-label--noborder">
+            hasAV = true
-     <div class="fn__flex">
+//             avHTML += `<label class="b3-label b3-label--noborder">
-        <span class="fn__flex-1">${item.replace("custom-", "")}</span>
+//      <div class="fn__flex">
-        <span data-action="remove" class="block__icon block__icon--show"><svg><use xlink:href="#iconMin"></use></svg></span>
+//         <span class="fn__flex-1">${item.replace("custom-", "")}</span>
-    </div>
+//         <span data-action="remove" class="block__icon block__icon--show"><svg><use xlink:href="#iconMin"></use></svg></span>
-    <div class="fn__hr"></div>
+//     </div>
-    <textarea class="b3-text-field fn__block" rows="1" data-name="${item}">${attrs[item]}</textarea>
+//     <div class="fn__hr"></div>
-</label>`;
+//     <textarea class="b3-text-field fn__block" rows="1" data-name="${item}">${attrs[item]}</textarea>
+// </label>`;
         } else if (item.indexOf("custom") > -1) {
             customHTML += `<label class="b3-label b3-label--noborder">
      <div class="fn__flex">
@@ -203,7 +205,7 @@ const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rm
             <span class="item__text">${window.siyuan.languages.buildIn}</span>
             <span class="fn__flex-1"></span>
         </div>
-        <div class="item item--full${avHTML ? "" : " fn__none"}" data-type="av">
+        <div class="item item--full${hasAV ? "" : " fn__none"}" data-type="av">
             <span class="fn__flex-1"></span>
             <span class="item__text">${window.siyuan.languages.database}</span>
             <span class="fn__flex-1"></span>
@@ -241,9 +243,7 @@ const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rm
             </label>
             ${notifyHTML}
         </div>
-        <div data-type="av" class="fn__none custom-attr">
+        <div data-type="av" class="fn__none custom-attr"></div>
-           ${avHTML}
-        </div>
         <div data-type="custom" class="fn__none custom-attr">
            ${customHTML}
            <div class="b3-label">
@@ -279,6 +279,9 @@ const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rm
                 target.classList.add("item--focus")
                 dialog.element.querySelectorAll(".custom-attr").forEach((item: HTMLElement) => {
                     if (item.dataset.type === target.dataset.type) {
+                        if (item.dataset.type === "av" && item.innerHTML === "") {
+                            renderAVAttribute(item, attrs.id);
+                        }
                         item.classList.remove("fn__none")
                     } else {
                         item.classList.add("fn__none")

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

@@ -193,3 +193,62 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
         lastParentID = null;
     }, Constants.TIMEOUT_TRANSITION);
 };
+
+const genAVValueHTML = (value: IAVCellValue) => {
+    let html = ""
+    switch (value.type) {
+        case "text":
+            html = `<input value="${value.text.content}" class="b3-text-field b3-text-field--text fn__flex-1">`;
+            break;
+        case "number":
+            html = `<input value="${value.number.content}" type="number" class="b3-text-field b3-text-field--text fn__flex-1">`;
+            break;
+        case "mSelect":
+        case "select":
+            value.mSelect.forEach(item => {
+                html += `<span class="b3-chip b3-chip--middle" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${item.content}</span>`;
+            })
+            break;
+        case "date":
+            html = `<input value="${dayjs(value.date.content).format("YYYY-MM-DD HH:mm")}" type="datetime-local" class="b3-text-field b3-text-field--text fn__flex-1">`;
+            if (value.date.hasEndDate) {
+                html += `<span class="fn__space"></span>
+<input value="${dayjs(value.date.content2).format("YYYY-MM-DD HH:mm")}" type="datetime-local" class="b3-text-field b3-text-field--text fn__flex-1">`;
+            }
+            break;
+        case "url":
+            html = `<input value="${value.url.content}" class="b3-text-field b3-text-field--text fn__flex-1">`;
+            break;
+    }
+    return html;
+}
+
+export const renderAVAttribute = (element: HTMLElement, id: string) => {
+    fetchPost("/api/av/getAttributeViewKeys", {id}, (response) => {
+        let html = ""
+        response.data.forEach((table: {
+            keyValues: {
+                key: {
+                    type: TAVCol,
+                    name: string
+                },
+                values: IAVCellValue[]
+            }[],
+            avName: string
+        }) => {
+            html += `<div class="b3-label b3-label--bordr">${table.avName}</div>`;
+            table.keyValues?.forEach(item => {
+                html += `<div class="block__icons">
+    <div class="block__logo">
+        <svg><use xlink:href="#${getColIconByType(item.key.type)}"></use></svg>
+        <span>${item.key.name || window.siyuan.languages.title}</span>
+    </div>
+    <div class="fn__flex-1 fn__flex">
+        ${genAVValueHTML(item.values[0])}
+    </div>
+</div>`
+            })
+        })
+        element.innerHTML = html
+    })
+}

app/src/types/index.d.ts

@@ -45,7 +45,7 @@ type TEventBus = "ws-main" |
     "open-menu-av" | "open-menu-content" | "open-menu-breadcrumbmore" |
     "input-search" |
     "loaded-protyle"
-type TAVCol = "text" | "date" | "number" | "relation" | "rollup" | "select" | "block" | "mSelect"
+type TAVCol = "text" | "date" | "number" | "relation" | "rollup" | "select" | "block" | "mSelect" | "url"
 type THintSource = "search" | "av" | "hint";
 type TAVFilterOperator =
     "="
@@ -931,5 +931,6 @@ interface IAVCellValue {
     number?: { content?: number, isNotEmpty: boolean, format?: string, formattedContent?: string },
     mSelect?: { content: string, color: string }[]
     block?: { content: string, id: string }
+    url?: { content: string }
     date?: { content?: number, content2?: number, hasEndDate?: boolean }
 }