:art: https://github.com/siyuan-note/siyuan/issues/7596

app/src/assets/scss/mobile.scss

@@ -281,6 +281,7 @@
   &__util {
     flex: 1;
     overflow: auto;
+    background-color: var(--b3-theme-surface);
   }
 
   &__split {
@@ -318,6 +319,44 @@
       }
     }
   }
+
+  &__slash {
+    &-title {
+      font-size: 12px;
+      color: var(--b3-theme-on-surface);
+      line-height: 12px;
+      padding: 8px;
+    }
+
+    &-block {
+      display: flex;
+      padding: 0px 0 8px 8px;
+    }
+
+    &-item {
+      background-color: var(--b3-theme-background);
+      border-radius: 8px;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      margin-right: 8px;
+      box-shadow: inset 0 0 0 .4px var(--b3-theme-on-surface-light);
+    }
+
+    &-empty {
+      flex: 1;
+      margin-right: 8px;
+    }
+
+    &-icon {
+      height: 24px;
+      width: 24px;
+      padding: 6px;
+      flex-shrink: 0;
+      margin: 6px 4px;
+      color: var(--b3-theme-on-surface);
+    }
+  }
 }
 
 .svg {

app/src/mobile/util/keyboardToolbar.ts

@@ -3,16 +3,43 @@ import {hasClosestBlock, hasClosestByClassName, hasClosestByMatchTag} from "../.
 import {moveToDown, moveToUp} from "../../protyle/wysiwyg/move";
 import {Constants} from "../../constants";
 import {focusByRange, getSelectionPosition} from "../../protyle/util/selection";
-import {hintSlash} from "../../protyle/hint/extend";
 
 let renderKeyboardToolbarTimeout: number;
 let showKeyboardToolbarUtil = false;
 
+const getSlashItem = (value: string, icon: string, text:string) => {
+    return  `<div class="keyboard__slash-item" data-value="${value}">
+    <svg class="keyboard__slash-icon"><use xlink:href="#${icon}"></use></svg>
+    <span class="keyboard__slash-text">${text}</span>
+</div>`
+}
+
 const renderSlashMenu = (protyle: IProtyle, toolbarElement: Element) => {
     protyle.hint.splitChar = "/";
     protyle.hint.lastIndex = -1;
     const utilElement = toolbarElement.querySelector(".keyboard__util") as HTMLElement;
-    utilElement.innerHTML = protyle.hint.getHTMLByData(hintSlash("", protyle), false);
+    utilElement.innerHTML = `<div class="keyboard__slash-title">
+${window.siyuan.languages.general}
+</div>
+<div class="keyboard__slash-block">
+    ${getSlashItem(Constants.ZWSP, "iconMarkdown", window.siyuan.languages.template)}
+    ${getSlashItem(Constants.ZWSP + 1, "iconBoth", window.siyuan.languages.widget)}
+</div>
+<div class="keyboard__slash-block">
+    ${getSlashItem(Constants.ZWSP + 2, "iconImage", window.siyuan.languages.assets)}
+    ${getSlashItem(Constants.ZWSP + 3, "iconRef", window.siyuan.languages.blockRef)}
+</div>
+<div class="keyboard__slash-block">
+    ${getSlashItem("{{", "iconSQL", window.siyuan.languages.blockEmbed)}
+    ${getSlashItem(Constants.ZWSP + 5, "iconSparkles", "AI Chat")}
+</div>
+<div class="keyboard__slash-block">
+    ${getSlashItem(Constants.ZWSP + 4, "iconFile", window.siyuan.languages.newFile)}
+    <div class="keyboard__slash-empty"></div>
+</div>
+<div class="keyboard__slash-title">
+common
+</div>`;
     protyle.hint.bindUploadEvent(protyle, utilElement);
 };
 
@@ -201,7 +228,7 @@ export const initKeyboardToolbar = () => {
 <div class="keyboard__util"></div>`;
     toolbarElement.addEventListener("click", (event) => {
         const target = event.target as HTMLElement;
-        const slashBtnElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item");
+        const slashBtnElement = hasClosestByClassName(event.target as HTMLElement, "keyboard__slash-item");
         const protyle = window.siyuan.mobile.editor.protyle;
         if (slashBtnElement) {
             protyle.hint.fill(decodeURIComponent(slashBtnElement.getAttribute("data-value")), protyle);

app/src/protyle/hint/extend.ts

@@ -23,7 +23,11 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
     const allList: IHintData[] = [{
         filter: ["模版", "moban", "mb", "template"],
         value: Constants.ZWSP,
-        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic ft__error"><use xlink:href="#iconMarkdown"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.template}</span></div>`,
+        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconMarkdown"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.template}</span></div>`,
+    }, {
+        filter: ["挂件", "widget", "gj", "guajian"],
+        value: Constants.ZWSP + 1,
+        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconBoth"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.widget}</span></div>`,
     }, {
         filter: ["资源", "assets", "zy", "ziyuan"],
         value: Constants.ZWSP + 2,
@@ -41,11 +45,11 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
         value: Constants.ZWSP + 5,
         html: '<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconSparkles"></use></svg><span class="b3-list-item__text">AI Chat</span></div>',
     },
-    // {
-    //     filter: ["属性视图", "shuxingshitu", "sxst", "attribute view"],
-    //     value: '<div data-type="NodeAttributeView" data-av-type="table"></div>',
-    //     html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconDatabase"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.attributeView}</span></div>`,
-    // },
+    {
+        filter: ["属性视图", "shuxingshitu", "sxst", "attribute view"],
+        value: '<div data-type="NodeAttributeView" data-av-type="table"></div>',
+        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconDatabase"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.attributeView}</span></div>`,
+    },
     {
         filter: ["文档", "子文档", "wendang", "wd", "ziwendang", "zwd", "xjwd"],
         value: Constants.ZWSP + 4,
@@ -80,11 +84,11 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
     }, {
         filter: ["无序列表", "wuxuliebiao", "wxlb", "unordered list"],
         value: "* " + Lute.Caret,
-        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconList"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.list}</span><span class="b3-menu__accelerator">*&nbsp;</span></div>`,
+        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconList"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.list}</span><span class="b3-list-item__meta">*&nbsp;</span></div>`,
     }, {
         filter: ["有序列表", "youxuliebiao", "yxlb", "ordered list"],
         value: "1. " + Lute.Caret,
-        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconOrderedList"></use></svg><span class="b3-list-item__text">${window.siyuan.languages["ordered-list"]}</span><span class="b3-menu__accelerator">1.&nbsp;</span></div>`,
+        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconOrderedList"></use></svg><span class="b3-list-item__text">${window.siyuan.languages["ordered-list"]}</span><span class="b3-list-item__meta">1.&nbsp;</span></div>`,
     }, {
         filter: ["任务列表", "renwuliebiao", "rwlb", "task list", "todo list"],
         value: "* [ ] " + Lute.Caret,
@@ -92,11 +96,11 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
     }, {
         filter: ["引述", "yinshu", "ys", "bq", "blockquote"],
         value: "> " + Lute.Caret,
-        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconQuote"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.quote}</span><span class="b3-menu__accelerator">&gt;</span></div>`,
+        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconQuote"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.quote}</span><span class="b3-list-item__meta">&gt;</span></div>`,
     }, {
         filter: ["代码块", "daimakuai", "dmk", "code block"],
         value: "```",
-        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconCode"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.code}</span><span class="b3-menu__accelerator">\`\`\`Enter</span></div>`,
+        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconCode"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.code}</span><span class="b3-list-item__meta">\`\`\`Enter</span></div>`,
     }, {
         filter: ["表格", "biaoge", "bg", "table"],
         value: `| ${Lute.Caret} |  |  |\n| --- | --- | --- |\n|  |  |  |\n|  |  |  |`,
@@ -104,7 +108,7 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
     }, {
         filter: ["分割线", "fengexian", "fgx", "divider"],
         value: "---",
-        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconLine"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.line}</span><span class="b3-menu__accelerator">---</span></div>`,
+        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconLine"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.line}</span><span class="b3-list-item__meta">---</span></div>`,
     }, {
         filter: ["数学公式块", "shuxuegongshikuai", "sxgsk", "math block"],
         value: "$$",
@@ -119,7 +123,7 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
     }, {
         filter: ["表情", "biaoqing", "bq", "emoji"],
         value: "emoji",
-        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconEmoji"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.emoji}</span><span class="b3-menu__accelerator">:</span></div>`,
+        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconEmoji"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.emoji}</span><span class="b3-list-item__meta">:</span></div>`,
     }, {
         filter: ["链接", "lianjie", "lj", "link", "a"],
         value: "a",
@@ -243,11 +247,6 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
         value: `style${Constants.ZWSP}`,
         html: `<div class="b3-list-item__first"><div class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.clearFontStyle}</span></div>`,
     }];
-    allList.splice(1, 0, {
-        filter: ["挂件", "widget", "gj", "guajian"],
-        value: Constants.ZWSP + 1,
-        html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconBoth"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.widget}</span></div>`,
-    });
     if (key === "") {
         return allList;
     }