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

app/appearance/icons/ant/icon.js

@@ -18,9 +18,6 @@ document.body.insertAdjacentHTML('afterbegin', `<svg style="position: absolute;
   <symbol id="iconNumber" viewBox="0 0 32 32">
     <path d="M30.674 11.19c0.179 0 0.326-0.147 0.326-0.326v-2.446c0-0.179-0.147-0.326-0.326-0.326h-6.685v-6.766c0-0.179-0.147-0.326-0.326-0.326h-2.609c-0.179 0-0.326 0.147-0.326 0.326v6.766h-9.293v-6.766c0-0.179-0.147-0.326-0.326-0.326h-2.609c-0.179 0-0.326 0.147-0.326 0.326v6.766h-6.848c-0.179 0-0.326 0.147-0.326 0.326v2.446c0 0.179 0.147 0.326 0.326 0.326h6.848v9.62h-6.848c-0.179 0-0.326 0.147-0.326 0.326v2.446c0 0.179 0.147 0.326 0.326 0.326h6.848v6.766c0 0.179 0.147 0.326 0.326 0.326h2.609c0.179 0 0.326-0.147 0.326-0.326v-6.766h9.293v6.766c0 0.179 0.147 0.326 0.326 0.326h2.609c0.179 0 0.326-0.147 0.326-0.326v-6.766h6.685c0.179 0 0.326-0.147 0.326-0.326v-2.446c0-0.179-0.147-0.326-0.326-0.326h-6.685v-9.62h6.685zM20.728 20.81h-9.293v-9.62h9.293v9.62z"></path>
   </symbol>
-  <symbol id="iconCalendar" viewBox="0 0 32 32">
-    <path d="M29.8 3.7h-6.3v-2.4c0-0.165-0.135-0.3-0.3-0.3h-2.1c-0.165 0-0.3 0.135-0.3 0.3v2.4h-9.6v-2.4c0-0.165-0.135-0.3-0.3-0.3h-2.1c-0.165 0-0.3 0.135-0.3 0.3v2.4h-6.3c-0.664 0-1.2 0.536-1.2 1.2v24.9c0 0.664 0.536 1.2 1.2 1.2h27.6c0.664 0 1.2-0.536 1.2-1.2v-24.9c0-0.664-0.536-1.2-1.2-1.2zM28.3 28.3h-24.6v-14.25h24.6v14.25zM3.7 11.5v-5.1h4.8v1.8c0 0.165 0.135 0.3 0.3 0.3h2.1c0.165 0 0.3-0.135 0.3-0.3v-1.8h9.6v1.8c0 0.165 0.135 0.3 0.3 0.3h2.1c0.165 0 0.3-0.135 0.3-0.3v-1.8h4.8v5.1h-24.6z"></path>
-  </symbol>
   <symbol id="iconIndeterminateCheck" viewBox="0 0 32 32">
     <path d="M9.1 17.2h13.8c0.165 0 0.3-0.135 0.3-0.3v-1.8c0-0.165-0.135-0.3-0.3-0.3h-13.8c-0.165 0-0.3 0.135-0.3 0.3v1.8c0 0.165 0.135 0.3 0.3 0.3z"></path>
     <path d="M29.8 1h-27.6c-0.664 0-1.2 0.536-1.2 1.2v27.6c0 0.664 0.536 1.2 1.2 1.2h27.6c0.664 0 1.2-0.536 1.2-1.2v-27.6c0-0.664-0.536-1.2-1.2-1.2zM28.3 28.3h-24.6v-24.6h24.6v24.6z"></path>
@@ -276,7 +273,7 @@ document.body.insertAdjacentHTML('afterbegin', `<svg style="position: absolute;
     <path d="M31.892 15.774l-5.104-4.028c-0.049-0.039-0.111-0.062-0.179-0.062-0.16 0-0.289 0.129-0.289 0.289 0 0 0 0.001 0 0.001v-0 2.588h-8.879v-8.879h2.592c0.24 0 0.376-0.28 0.228-0.468l-4.032-5.104c-0.053-0.068-0.134-0.111-0.226-0.111s-0.173 0.043-0.226 0.11l-0.001 0.001-4.032 5.104c-0.039 0.049-0.062 0.111-0.062 0.179 0 0.16 0.129 0.289 0.289 0.289 0 0 0.001 0 0.001 0h2.588v8.879h-8.879v-2.592c0-0.24-0.28-0.376-0.468-0.228l-5.104 4.032c-0.068 0.053-0.111 0.134-0.111 0.226s0.043 0.173 0.11 0.226l0.001 0 5.1 4.032c0.188 0.148 0.468 0.016 0.468-0.228v-2.588h8.879v8.879h-2.592c-0.24 0-0.376 0.28-0.228 0.468l4.032 5.1c0.116 0.148 0.34 0.148 0.452 0l4.032-5.1c0.148-0.188 0.016-0.468-0.228-0.468h-2.584v-8.879h8.879v2.592c0 0.24 0.28 0.376 0.468 0.228l5.1-4.032c0.068-0.054 0.112-0.137 0.112-0.23 0-0.091-0.042-0.172-0.107-0.226l-0.001-0z"></path>
   </symbol>
   <symbol id="iconCalendar" viewBox="0 0 32 32">
-    <path d="M30.72 2.88h-6.72v-2.56c0-0.176-0.144-0.32-0.32-0.32h-2.24c-0.176 0-0.32 0.144-0.32 0.32v2.56h-10.24v-2.56c0-0.176-0.144-0.32-0.32-0.32h-2.24c-0.176 0-0.32 0.144-0.32 0.32v2.56h-6.72c-0.708 0-1.28 0.572-1.28 1.28v26.56c0 0.708 0.572 1.28 1.28 1.28h29.44c0.708 0 1.28-0.572 1.28-1.28v-26.56c0-0.708-0.572-1.28-1.28-1.28zM29.12 29.12h-26.24v-15.2h26.24v15.2zM2.88 11.2v-5.44h5.12v1.92c0 0.176 0.144 0.32 0.32 0.32h2.24c0.176 0 0.32-0.144 0.32-0.32v-1.92h10.24v1.92c0 0.176 0.144 0.32 0.32 0.32h2.24c0.176 0 0.32-0.144 0.32-0.32v-1.92h5.12v5.44h-26.24z"></path>
+    <path d="M29.8 3.7h-6.3v-2.4c0-0.165-0.135-0.3-0.3-0.3h-2.1c-0.165 0-0.3 0.135-0.3 0.3v2.4h-9.6v-2.4c0-0.165-0.135-0.3-0.3-0.3h-2.1c-0.165 0-0.3 0.135-0.3 0.3v2.4h-6.3c-0.664 0-1.2 0.536-1.2 1.2v24.9c0 0.664 0.536 1.2 1.2 1.2h27.6c0.664 0 1.2-0.536 1.2-1.2v-24.9c0-0.664-0.536-1.2-1.2-1.2zM28.3 28.3h-24.6v-14.25h24.6v14.25zM3.7 11.5v-5.1h4.8v1.8c0 0.165 0.135 0.3 0.3 0.3h2.1c0.165 0 0.3-0.135 0.3-0.3v-1.8h9.6v1.8c0 0.165 0.135 0.3 0.3 0.3h2.1c0.165 0 0.3-0.135 0.3-0.3v-1.8h4.8v5.1h-24.6z"></path>
   </symbol>
   <symbol id="iconKeymap" viewBox="0 0 32 32">
     <path d="M31.931 27.939l-2.168-7.638v-16.63c0-0.634-0.513-1.147-1.147-1.147h-25.232c-0.634 0-1.147 0.513-1.147 1.147v16.63l-2.168 7.638c-0.269 0.749 0.283 1.538 1.079 1.538h29.705c0.796 0 1.348-0.788 1.079-1.538zM4.818 5.104h22.365v14.157h-22.365v-14.157zM13 26.896l0.29-1.326h5.387l0.29 1.326h-5.968zM21.028 26.896l-0.685-3.107c-0.029-0.133-0.147-0.226-0.28-0.226h-8.157c-0.136 0-0.251 0.093-0.28 0.226l-0.685 3.107h-7.896l1.516-5.34h22.874l1.516 5.34h-7.924z"></path>

app/appearance/icons/ant/icon.json

@@ -2,5 +2,5 @@
   "name": "ant",
   "author": "Vanessa",
   "url": "https://github.com/Vanessa219",
-  "version": "1.23.0"
+  "version": "1.23.1"
 }

app/appearance/icons/index.html

@@ -508,12 +508,6 @@
         </svg>
         iconBazaar
     </div>
-    <div>
-        <svg>
-            <use xlink:href="#iconCalendar"></use>
-        </svg>
-        iconCalendar
-    </div>
     <div>
         <svg>
             <use xlink:href="#iconKeymap"></use>

app/appearance/icons/material/icon.js

@@ -270,9 +270,6 @@ document.body.insertAdjacentHTML('afterbegin', `<svg style="position: absolute;
   <symbol id="iconMove" viewBox="0 0 32 32">
     <path d="M13.091 11.636h5.818v-4.364h4.364l-7.273-7.273-7.273 7.273h4.364v4.364zM11.636 13.091h-4.364v-4.364l-7.273 7.273 7.273 7.273v-4.364h4.364v-5.818zM32 16l-7.273-7.273v4.364h-4.364v5.818h4.364v4.364l7.273-7.273zM18.909 20.364h-5.818v4.364h-4.364l7.273 7.273 7.273-7.273h-4.364v-4.364z"></path>
   </symbol>
-  <symbol id="iconCalendar" viewBox="0 0 32 32">
-    <path d="M27.636 2.909h-1.455v-2.909h-2.909v2.909h-14.545v-2.909h-2.909v2.909h-1.455c-1.6 0-2.909 1.309-2.909 2.909v23.273c0 1.6 1.309 2.909 2.909 2.909h23.273c1.6 0 2.909-1.309 2.909-2.909v-23.273c0-1.6-1.309-2.909-2.909-2.909zM27.636 29.091h-23.273v-16h23.273v16zM27.636 10.182h-23.273v-4.364h23.273v4.364z"></path>
-  </symbol>
   <symbol id="iconKeymap" viewBox="0 0 32 32">
     <path d="M28.8 8v16h-25.6v-16h25.6zM28.8 4.8h-25.6c-1.76 0-3.184 1.44-3.184 3.2l-0.016 16c0 1.76 1.44 3.2 3.2 3.2h25.6c1.76 0 3.2-1.44 3.2-3.2v-16c0-1.76-1.44-3.2-3.2-3.2zM14.4 9.6h3.2v3.2h-3.2zM14.4 14.4h3.2v3.2h-3.2zM9.6 9.6h3.2v3.2h-3.2zM9.6 14.4h3.2v3.2h-3.2zM4.8 14.4h3.2v3.2h-3.2zM4.8 9.6h3.2v3.2h-3.2zM9.6 19.2h12.8v3.2h-12.8zM19.2 14.4h3.2v3.2h-3.2zM19.2 9.6h3.2v3.2h-3.2zM24 14.4h3.2v3.2h-3.2zM24 9.6h3.2v3.2h-3.2z"></path>
   </symbol>

app/appearance/icons/material/icon.json

@@ -2,5 +2,5 @@
   "name": "material",
   "author": "Vanessa",
   "url": "https://github.com/Vanessa219",
-  "version": "1.23.0"
+  "version": "1.23.1"
 }

app/src/menus/Menu.ts

@@ -206,7 +206,7 @@ export class MenuItem {
             if (typeof options.iconHTML === "string") {
                 html = options.iconHTML + html;
             } else {
-                html = `<svg class="b3-menu__icon${["HTML (SiYuan)", window.siyuan.languages.template].includes(options.label) ? " ft__error" : ""}" style="${options.icon === "iconClose" ? "height:10px;" : ""}"><use xlink:href="#${options.icon || ""}"></use></svg>${html}`;
+                html = `<svg class="b3-menu__icon ${options.iconClass || ""}" style="${options.icon === "iconClose" ? "height:10px;" : ""}"><use xlink:href="#${options.icon || ""}"></use></svg>${html}`;
             }
             if (options.accelerator) {
                 html += `<span class="b3-menu__accelerator">${updateHotkeyTip(options.accelerator)}</span>`;

app/src/menus/commonMenuItem.ts

@@ -431,6 +431,7 @@ export const exportMd = (id: string) => {
         icon: "iconUpload",
         submenu: [{
             label: window.siyuan.languages.template,
+            iconClass: "ft__error",
             icon: "iconMarkdown",
             click: async () => {
                 const result = await fetchSyncPost("/api/block/getRefText", {id: id});
@@ -536,6 +537,7 @@ export const exportMd = (id: string) => {
                 }
             }, {
                 label: "HTML (SiYuan)",
+                iconClass: "ft__error",
                 icon: "iconHTML5",
                 click: () => {
                     saveExport({type: "html", id});

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

@@ -230,5 +230,30 @@ export const addCol = (protyle: IProtyle, blockElement: Element) => {
             });
         }
     });
+    menu.addItem({
+        icon: "iconMath",
+        label: window.siyuan.languages.template,
+        click() {
+            const id = Lute.NewNodeID();
+            transaction(protyle, [{
+                action: "addAttrViewCol",
+                name: window.siyuan.languages.template,
+                avID,
+                type: "template",
+                id
+            }], [{
+                action: "removeAttrViewCol",
+                id,
+                avID,
+            }]);
+            addAttrViewColAnimation({
+                blockElement: blockElement,
+                protyle: protyle,
+                type: "template",
+                name: window.siyuan.languages.template,
+                id
+            });
+        }
+    });
     return menu;
 };

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

@@ -47,6 +47,9 @@ export const genAVValueHTML = (value: IAVCellValue) => {
 <span class="fn__space"></span>
 <a href="tel:${value.phone.content}" target="_blank" aria-label="${window.siyuan.languages.openBy}" class="block__icon block__icon--show fn__flex-center b3-tooltips__w b3-tooltips"><svg><use xlink:href="#iconPhone"></use></svg></a>`;
             break;
+        case "template":
+            html = `<input value="${value.template.content}" class="b3-text-field b3-text-field--text fn__flex-1">`;
+            break;
         case "email":
             html = `<input value="${value.email.content}" class="b3-text-field b3-text-field--text fn__flex-1">
 <span class="fn__space"></span>
@@ -83,7 +86,7 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle?: IP
     </div>
     <div data-av-id="${table.avID}" data-col-id="${item.values[0].keyID}" data-block-id="${item.values[0].blockID}" data-id="${item.values[0].id}" data-type="${item.values[0].type}" 
 data-options="${item.key?.options ? escapeAttr(JSON.stringify(item.key.options)) : "[]"}"
-class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes(item.values[0].type) ? "" : " custom-attr__avvalue"}">
+class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "template"].includes(item.values[0].type) ? "" : " custom-attr__avvalue"}">
         ${genAVValueHTML(item.values[0])}
     </div>
 </div>`;
@@ -117,7 +120,7 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes
         element.querySelectorAll(".b3-text-field--text").forEach((item: HTMLInputElement) => {
             item.addEventListener("change", () => {
                 let value;
-                if (["url", "text", "email", "phone"].includes(item.parentElement.dataset.type)) {
+                if (["url", "text", "email", "phone", "template"].includes(item.parentElement.dataset.type)) {
                     value = {
                         [item.parentElement.dataset.type]: {
                             content: item.value

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

@@ -85,7 +85,7 @@ export const genCellValue = (colType: TAVCol, value: string | any) => {
                     }
                 };
             }
-        } else if (["text", "block", "url", "phone", "email"].includes(colType)) {
+        } else if (["text", "block", "url", "phone", "email", "template"].includes(colType)) {
             cellValue = {
                 type: colType,
                 [colType]: {
@@ -353,7 +353,9 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type
     const blockElement = hasClosestBlock(cellElements[0]);
     if (["text", "url", "email", "phone", "block"].includes(type)) {
         html = `<textarea ${style} class="b3-text-field">${cellElements[0].firstElementChild.textContent}</textarea>`;
-    } else if (type === "number") {
+    } else if (type === "template") {
+        html = `<textarea ${style} class="b3-text-field">${cellElements[0].firstElementChild.getAttribute("data-content")}</textarea>`;
+    }else if (type === "number") {
         html = `<input type="number" value="${cellElements[0].firstElementChild.getAttribute("data-content")}" ${style} class="b3-text-field">`;
     } else if (["select", "mSelect"].includes(type) && blockElement) {
         openMenuPanel({protyle, blockElement, type: "select", cellElements});

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

@@ -251,6 +251,8 @@ export const getColIconByType = (type: TAVCol) => {
             return "iconEmail";
         case "phone":
             return "iconPhone";
+        case "template":
+            return "iconMath";
     }
 };
 

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

@@ -11,7 +11,7 @@ export const getDefaultOperatorByType = (type: TAVCol) => {
     if (type === "number" || type === "select") {
         return "=";
     }
-    if (["text", "mSelect", "url", "block", "email", "phone"].includes(type)) {
+    if (["text", "mSelect", "url", "block", "email", "phone", "template"].includes(type)) {
         return "Contains";
     }
 };
@@ -140,6 +140,7 @@ export const setFilter = (options: {
         case "text":
         case "url":
         case "phone":
+        case "template":
         case "email":
             selectHTML = `<option ${"=" === options.filter.operator ? "selected" : ""} value="=">${window.siyuan.languages.filterOperatorIs}</option>
 <option ${"!=" === options.filter.operator ? "selected" : ""} value="!=">${window.siyuan.languages.filterOperatorIsNot}</option>
@@ -214,7 +215,7 @@ export const setFilter = (options: {
                 }
             });
         });
-    } else if (["text", "url", "block", "email", "phone"].includes(colData.type)) {
+    } else if (["text", "url", "block", "email", "phone", "template"].includes(colData.type)) {
         menu.addItem({
             iconHTML: "",
             label: `<input style="margin: 4px 0" value="${options.filter.value ? options.filter.value[colData.type as "text"].content : ""}" class="b3-text-field fn__size200">`

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

@@ -64,6 +64,8 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
                         let text = "";
                         if (cell.valueType === "text") {
                             text = `<span class="av__celltext">${cell.value?.text.content || ""}</span>`;
+                        } else if (cell.valueType === "template") {
+                            text = `<span class="av__celltext" data-content="${cell.value?.template.content || ""}">${cell.value?.template.renderedContent || ""}</span>`;
                         } else if (["url", "email", "phone"].includes(cell.valueType)) {
                             const urlContent = cell.value ? cell.value[cell.valueType as "url"].content : "";
                             // https://github.com/siyuan-note/siyuan/issues/9291

app/src/types/index.d.ts

@@ -62,6 +62,7 @@ type TAVCol =
     | "email"
     | "phone"
     | "mAsset"
+    | "template"
 type THintSource = "search" | "av" | "hint";
 type TAVFilterOperator =
     "="
@@ -929,6 +930,7 @@ interface IModels {
 }
 
 interface IMenu {
+    iconClass?: string,
     label?: string,
     click?: (element: HTMLElement, event: MouseEvent) => boolean | void | Promise<boolean | void>
     type?: "separator" | "submenu" | "readonly",
@@ -1071,6 +1073,10 @@ interface IAVCellValue {
     email?: {
         content: string
     }
+    template?: {
+        content: string
+        renderedContent?:string
+    }
     date?: IAVCellDateValue
 }