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

app/appearance/langs/zh_CN.json

@@ -1,4 +1,14 @@
 {
+  "articleCover": "页面封面",
+  "articleContent": "页面内容",
+  "cardView": "卡片预览",
+  "cardSize": "卡片大小",
+  "big": "大",
+  "middle": "中",
+  "small": "小",
+  "adjustImg": "自适应图片大小",
+  "showIcon": "显示页面图标",
+  "wrapAllFields": "对所有属性换行",
   "gallery": "画廊",
   "newTag": "新建标签",
   "pleaseWait": "请稍等片刻...",

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

@@ -287,6 +287,43 @@
     }
   }
 
+  &__layout {
+    display: flex;
+    gap: 8px;
+    width: 100%;
+    margin: 8px 0;
+
+    &-item {
+      border: 1px solid var(--b3-border-color);
+      border-radius: var(--b3-border-radius);
+      text-align: center;
+      color: var(--b3-theme-on-surface);
+      font-size: 12px;
+      flex: 1;
+      cursor: pointer;
+      transition: var(--b3-transition);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      line-height: 1;
+      padding: 8px;
+
+      &:not(.av__layout-item--select):hover {
+        color: var(--b3-theme-on-background);
+      }
+
+      svg {
+        height: 14px;
+        width: 14px;
+      }
+
+      &--select {
+        color: var(--b3-theme-primary);
+        border-color: var(--b3-theme-primary);
+      }
+    }
+  }
+
   &__cell {
     box-sizing: border-box;
     position: relative;

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

@@ -0,0 +1,84 @@
+import {transaction} from "../../wysiwyg/transaction";
+
+export const getLayoutHTML = (data: IAV) => {
+    let html = "";
+    if (data.viewType === "gallery") {
+        html = `<label class="b3-menu__item">
+    <span class="fn__flex-center">${window.siyuan.languages.showTitle}</span>
+    <span class="fn__space fn__flex-1"></span>
+    <input data-type="toggle-view-title" type="checkbox" class="b3-switch b3-switch--menu" ${data.view.hideAttrViewName ? "" : "checked"}>
+</label>`
+        // calcOperatorNone
+    }
+    return `<div class="b3-menu__items">
+    <div class="b3-menu__items">
+    <button class="b3-menu__item" data-type="nobg">
+        <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="go-config">
+            <svg><use xlink:href="#iconLeft"></use></svg>
+        </span>
+        <span class="b3-menu__label ft__center">${window.siyuan.languages.layout}</span>
+    </button>
+    <button class="b3-menu__separator"></button>
+    <button class="b3-menu__item" data-type="nobg">
+        <div class="av__layout">
+            <div class="av__layout-item${data.viewType === "table" ? " av__layout-item--select" : ""}">
+                <svg><use xlink:href="#iconTable"></use></svg>
+                <div class="fn__hr"></div>
+                <div>${window.siyuan.languages.table}</div>
+            </div>
+            <div class="av__layout-item${data.viewType === "gallery" ? " av__layout-item--select" : ""}">
+                <svg><use xlink:href="#iconGallery"></use></svg>
+                <div class="fn__hr"></div>
+                <div>${window.siyuan.languages.gallery}</div>
+            </div>
+        </div>
+    </button>
+    <label class="b3-menu__item">
+        <span class="fn__flex-center">${window.siyuan.languages.showTitle}</span>
+        <span class="fn__space fn__flex-1"></span>
+        <input data-type="toggle-view-title" type="checkbox" class="b3-switch b3-switch--menu" ${data.view.hideAttrViewName ? "" : "checked"}>
+    </label>
+    ${html}
+</div>`;
+};
+
+export const bindLayoutEvent = (options: {
+    protyle: IProtyle,
+    data: IAV,
+    menuElement: HTMLElement
+    blockElement: Element
+}) => {
+    const toggleTitleElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-view-title"]') as HTMLInputElement;
+    toggleTitleElement.addEventListener("change", () => {
+        const avID = options.blockElement.getAttribute("data-av-id");
+        const blockID = options.blockElement.getAttribute("data-node-id");
+        if (!toggleTitleElement.checked) {
+            // hide
+            transaction(options.protyle, [{
+                action: "hideAttrViewName",
+                avID,
+                blockID,
+                data: true
+            }], [{
+                action: "hideAttrViewName",
+                avID,
+                blockID,
+                data: false
+            }]);
+            options.blockElement.querySelector(".av__title").classList.add("fn__none");
+        } else {
+            transaction(options.protyle, [{
+                action: "hideAttrViewName",
+                avID,
+                blockID,
+                data: false
+            }], [{
+                action: "hideAttrViewName",
+                avID,
+                blockID,
+                data: true
+            }]);
+            options.blockElement.querySelector(".av__title").classList.remove("fn__none");
+        }
+    });
+};

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

@@ -20,7 +20,14 @@ import {openAsset} from "../../../editor/util";
 /// #endif
 import {previewAttrViewImages} from "../../preview/image";
 import {assetMenu} from "../../../menus/protyle";
-import {addView, bindSwitcherEvent, bindViewEvent, getSwitcherHTML, getViewHTML, openViewMenu} from "./view";
+import {
+    addView,
+    bindSwitcherEvent,
+    bindViewEvent,
+    getSwitcherHTML,
+    getViewHTML,
+    openViewMenu
+} from "./view";
 import {focusBlock} from "../../util/selection";
 import {avRender} from "./render";
 import {setPageSize} from "./row";
@@ -30,6 +37,7 @@ import {updateCellsValue} from "./cell";
 import {openCalcMenu} from "./calc";
 import {escapeAttr, escapeHtml} from "../../../util/escape";
 import {Dialog} from "../../../dialog";
+import {bindLayoutEvent, getLayoutHTML} from "./layout";
 
 export const openMenuPanel = (options: {
     protyle: IProtyle,
@@ -537,6 +545,14 @@ export const openMenuPanel = (options: {
                     event.preventDefault();
                     event.stopPropagation();
                     break;
+                } else if (type === "go-layout") {
+                    menuElement.innerHTML = getLayoutHTML(data);
+                    setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
+                    bindLayoutEvent({protyle: options.protyle, data, menuElement, blockElement: options.blockElement});
+                    window.siyuan.menus.menu.remove();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
                 } else if (type === "goSorts") {
                     menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
                     bindSortsEvent(options.protyle, menuElement, data, blockID);

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

@@ -163,39 +163,6 @@ export const bindViewEvent = (options: {
     descElement.addEventListener("input", () => {
         inputElement.nextElementSibling.setAttribute("aria-label", descElement.value ? escapeHtml(descElement.value) : window.siyuan.languages.addDesc);
     });
-    const toggleTitleElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-view-title"]') as HTMLInputElement;
-    toggleTitleElement.addEventListener("change", () => {
-        const avID = options.blockElement.getAttribute("data-av-id");
-        const blockID = options.blockElement.getAttribute("data-node-id");
-        if (!toggleTitleElement.checked) {
-            // hide
-            transaction(options.protyle, [{
-                action: "hideAttrViewName",
-                avID,
-                blockID,
-                data: true
-            }], [{
-                action: "hideAttrViewName",
-                avID,
-                blockID,
-                data: false
-            }]);
-            options.blockElement.querySelector(".av__title").classList.add("fn__none");
-        } else {
-            transaction(options.protyle, [{
-                action: "hideAttrViewName",
-                avID,
-                blockID,
-                data: false
-            }], [{
-                action: "hideAttrViewName",
-                avID,
-                blockID,
-                data: true
-            }]);
-            options.blockElement.querySelector(".av__title").classList.remove("fn__none");
-        }
-    });
 };
 
 export const getViewHTML = (data: IAV) => {
@@ -258,12 +225,6 @@ export const getViewHTML = (data: IAV) => {
     <span class="b3-menu__accelerator">${view.pageSize === Constants.SIZE_DATABASE_MAZ_SIZE ? window.siyuan.languages.all : view.pageSize}</span>
     <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
 </button>
-<label class="b3-menu__item">
-    <svg class="b3-menu__icon"></svg>
-    <span class="fn__flex-center">${window.siyuan.languages.showTitle}</span>
-    <span class="fn__space fn__flex-1"></span>
-    <input data-type="toggle-view-title" type="checkbox" class="b3-switch b3-switch--menu" ${view.hideAttrViewName ? "" : "checked"}>
-</label>
 <button class="b3-menu__separator"></button>
 <button class="b3-menu__item" data-type="duplicate-view">
     <svg class="b3-menu__icon">
@@ -428,3 +389,4 @@ export const getViewName = (type: string) => {
             return window.siyuan.languages.gallery;
     }
 };
+

app/src/protyle/wysiwyg/index.ts

@@ -1848,6 +1848,7 @@ export class WYSIWYG {
                 if (avTabHeaderElement.classList.contains("item--focus")) {
                     openViewMenu({protyle, blockElement: nodeElement, element: avTabHeaderElement});
                 } else {
+                    nodeElement.setAttribute("data-av-type", avTabHeaderElement.dataset.avType);
                     nodeElement.removeAttribute("data-render");
                     avRender(nodeElement, protyle, () => {
                         openViewMenu({

app/src/types/index.d.ts

@@ -816,7 +816,7 @@ interface IAV {
     name: string;
     view: IAVTable | IAVGallery;
     viewID: string;
-    viewType: string;
+    viewType: "table" | "gallery";
     views: IAVView[];
 }