♻️ scss

app/src/assets/scss/base.scss

@@ -29,6 +29,8 @@
 @import "business/search";
 @import "pickr/pcr";
 @import "viewerjs/viewer";
+@import "business/export";
+@import "business/card";
 
 /*
 .status: 3
@@ -417,5 +419,27 @@ html {
   }
 }
 
+.switch-doc {
+  max-height: 70vh;
+  width: 520px;
+
+  .b3-list:last-child {
+    border-left: 1px solid var(--b3-theme-surface-lighter);
+    max-height: calc(70vh - 35px)
+  }
+
+  &__path {
+    padding: 4px 8px;
+    border-top: 1px solid var(--b3-theme-surface-lighter);
+    color: var(--b3-theme-on-surface);
+    font-size: 12px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: 18px;
+    min-height: 18px;
+  }
+}
+
 // 需放置最后，否则 https://github.com/siyuan-note/siyuan/issues/7056
 @import "util/responsive";

app/src/assets/scss/business/_card.scss

@@ -0,0 +1,53 @@
+.card {
+  &__empty {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    flex: 1;
+    text-align: center;
+    background-color: var(--b3-theme-background);
+    font-size: 16px;
+
+    & > div {
+      font-size: 64px;
+      margin-bottom: 16px;
+    }
+  }
+
+  &__action {
+    padding: 16px 24px;
+
+    & > div > span {
+      display: block;
+      color: var(--b3-theme-on-surface);
+      text-align: center;
+      line-height: 15px;
+      font-size: 10px;
+    }
+  }
+
+  &__block {
+    .protyle-wysiwyg [data-node-id][custom-riff-decks] {
+      box-shadow: none;
+    }
+
+    &--hide {
+      .protyle-wysiwyg > .sb > div:nth-of-type(n+2):not(.protyle-attr) {
+        display: none;
+      }
+
+      .li > .list {
+        display: none;
+      }
+
+      span[data-type~=mark] {
+        transition: var(--b3-transition);
+        color: transparent !important;
+      }
+    }
+  }
+
+
+}
+
+

app/src/assets/scss/business/_export.scss

@@ -0,0 +1,5 @@
+.export-img.protyle-wysiwyg [data-node-id].li[fold="1"] > .protyle-action:after {
+  background-color: transparent;
+  border: 1px solid var(--b3-list-hover);
+  box-sizing: border-box;
+}

app/src/assets/scss/business/_history.scss

@@ -42,4 +42,11 @@
     color: var(--b3-theme-on-surface);
     background: var(--b3-theme-background);
   }
+
+  &__diff {
+    width: 200px;
+    border-right: 1px solid var(--b3-border-color);
+    padding: 8px 0;
+    overflow: auto;
+  }
 }

app/src/assets/scss/component/_dialog.scss

@@ -82,86 +82,4 @@
     height: 16px;
     width: 16px;
   }
-
-  &--switch {
-    max-height: 70vh;
-    width: 520px;
-
-    .b3-list:last-child {
-      border-left: 1px solid var(--b3-theme-surface-lighter);
-      max-height: calc(70vh - 35px)
-    }
-
-    .dialog__path {
-      padding: 4px 8px;
-      border-top: 1px solid var(--b3-theme-surface-lighter);
-      color: var(--b3-theme-on-surface);
-      font-size: 12px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      line-height: 18px;
-      min-height: 18px;
-    }
-  }
-
-  &__diff {
-    width: 200px;
-    border-right: 1px solid var(--b3-border-color);
-    padding: 8px 0;
-    overflow: auto;
-  }
-
-  &__cardempty {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    flex: 1;
-    text-align: center;
-    background-color: var(--b3-theme-background);
-    font-size: 16px;
-
-    & > div {
-      font-size: 64px;
-      margin-bottom: 16px;
-    }
-  }
-
-  &__cardaction {
-    padding: 16px 24px;
-
-    & > div > span {
-      display: block;
-      color: var(--b3-theme-on-surface);
-      text-align: center;
-      line-height: 15px;
-      font-size: 10px;
-    }
-  }
-
-  &__cardblock {
-    .protyle-wysiwyg [data-node-id][custom-riff-decks] {
-      box-shadow: none;
-    }
-
-    &--hide {
-      .protyle-wysiwyg > .sb > div:nth-of-type(n+2):not(.protyle-attr) {
-        display: none;
-      }
-
-      .li > .list {
-        display: none;
-      }
-
-      span[data-type~=mark] {
-        transition: var(--b3-transition);
-        color: transparent !important;
-      }
-    }
-  }
-
-  &__exportimg.protyle-wysiwyg [data-node-id].li[fold="1"] > .protyle-action:after {
-    background-color: transparent;
-    border: 1px solid var(--b3-list-hover);
-  }
 }

app/src/assets/scss/mobile.scss

@@ -21,6 +21,8 @@
 @import "protyle/protyle";
 @import "component/typography";
 @import "viewerjs/viewer";
+@import "business/export";
+@import "business/card";
 
 .block__popover {
   width: 80vw;

app/src/card/openCard.ts

@@ -48,17 +48,17 @@ export const openCardByData = (cardsData: ICard[], html = "") => {
         <span class="fn__flex-1 fn__flex-center">${window.siyuan.languages.riffCard}</span>
         ${html}
     </div>
-    <div class="b3-dialog__cardblock b3-dialog__cardblock--hide fn__flex-1${blocks.length === 0 ? " fn__none" : ""}" data-type="render"></div>
+    <div class="card__block card__block--hide fn__flex-1${blocks.length === 0 ? " fn__none" : ""}" data-type="render"></div>
-    <div class="b3-dialog__cardempty${blocks.length === 0 ? "" : " fn__none"}" data-type="empty">
+    <div class="card__empty${blocks.length === 0 ? "" : " fn__none"}" data-type="empty">
         <div>🔮</div>
         ${window.siyuan.languages.noDueCard}
     </div>
-    <div class="fn__flex b3-dialog__cardaction${blocks.length === 0 ? " fn__none" : ""}">
+    <div class="fn__flex card__action${blocks.length === 0 ? " fn__none" : ""}">
         <span class="fn__flex-1"></span>
         <button data-type="-1" class="b3-button">Show (S)</button>
         <span class="fn__flex-1"></span>
     </div>
-    <div class="fn__flex b3-dialog__cardaction fn__none">
+    <div class="fn__flex card__action fn__none">
         <div>
             <span></span>
             <button data-type="0" aria-label="1 / j" class="b3-button b3-button--error b3-tooltips__s b3-tooltips">
@@ -114,7 +114,7 @@ export const openCardByData = (cardsData: ICard[], html = "") => {
     (dialog.element.firstElementChild as HTMLElement).style.zIndex = "200";
     dialog.element.setAttribute("data-key", window.siyuan.config.keymap.general.riffCard.custom);
     const countElement = dialog.element.querySelector('[data-type="count"]');
-    const actionElements = dialog.element.querySelectorAll(".b3-dialog__cardaction");
+    const actionElements = dialog.element.querySelectorAll(".card__action");
     dialog.element.addEventListener("click", (event) => {
         const viewElement = hasClosestByAttribute(event.target as HTMLElement, "data-type", "view");
         if (viewElement) {
@@ -159,7 +159,7 @@ export const openCardByData = (cardsData: ICard[], html = "") => {
         event.stopPropagation();
         hideElements(["toolbar", "hint", "util"], editor.protyle);
         if (type === "-1") {
-            editor.protyle.element.classList.remove("b3-dialog__cardblock--hide");
+            editor.protyle.element.classList.remove("card__block--hide");
             actionElements[0].classList.add("fn__none");
             actionElements[1].querySelectorAll(".b3-button").forEach((element, btnIndex) => {
                 element.previousElementSibling.textContent = blocks[index].nextDues[btnIndex];
@@ -174,7 +174,7 @@ export const openCardByData = (cardsData: ICard[], html = "") => {
                 rating: parseInt(type)
             }, () => {
                 index++;
-                editor.protyle.element.classList.add("b3-dialog__cardblock--hide");
+                editor.protyle.element.classList.add("card__block--hide");
                 if (index > blocks.length - 1) {
                     countElement.classList.add("fn__none");
                     editor.protyle.element.classList.add("fn__none");
@@ -204,7 +204,7 @@ export const openCardByData = (cardsData: ICard[], html = "") => {
         fetchPost("/api/riff/getRiffDueCards", {deckID: selectElement.value}, (cardsChangeResponse) => {
             blocks = cardsChangeResponse.data;
             index = 0;
-            editor.protyle.element.classList.add("b3-dialog__cardblock--hide");
+            editor.protyle.element.classList.add("card__block--hide");
             if (blocks.length > 0) {
                 countElement.lastElementChild.innerHTML = `<span>1</span>/${blocks.length}`;
                 countElement.classList.remove("fn__none");

app/src/card/viewCards.ts

@@ -34,7 +34,7 @@ export const viewCards = (deckID: string, title: string, cb:(response:IWebSocket
             ${renderViewItem(response.data.blocks)}
         </ul>
         <div id="cardPreview" class="fn__flex-1 fn__none"></div>
-        <div class="fn__flex-1 b3-dialog__cardempty">${window.siyuan.languages.emptyContent}</div>
+        <div class="fn__flex-1 card__empty">${window.siyuan.languages.emptyContent}</div>
     </div>
 </div>`,
             width: isMobile() ? "98vw" : "80vw",

app/src/history/diff.ts

@@ -27,7 +27,7 @@ const genItem = (data: [], data2?: { title: string, fileID: string }[]) => {
 let leftEditor: Protyle;
 let rightEditor: Protyle;
 const renderCompare = (element: HTMLElement) => {
-    const listElement = hasClosestByClassName(element, "b3-dialog__diff");
+    const listElement = hasClosestByClassName(element, "history__diff");
     if (!listElement) {
         return;
     }
@@ -112,7 +112,7 @@ export const showDiff = (data: { id: string, time: string }[]) => {
         const dialog = new Dialog({
             title: window.siyuan.languages.compare,
             content: `<div class="fn__flex" style="height: 100%">
-    <div class="b3-dialog__diff">
+    <div class="history__diff">
         <ul class="b3-list b3-list--background">
             <li class="b3-list-item">
                 <span class="b3-list-item__toggle b3-list-item__toggle--hl">
@@ -172,7 +172,7 @@ export const showDiff = (data: { id: string, time: string }[]) => {
                     if (target.classList.contains("b3-list-item--focus")) {
                         return;
                     }
-                    dialog.element.querySelector(".b3-dialog__diff .b3-list-item--focus")?.classList.remove("b3-list-item--focus");
+                    dialog.element.querySelector(".history__diff .b3-list-item--focus")?.classList.remove("b3-list-item--focus");
                     target.classList.add("b3-list-item--focus");
                     renderCompare(target);
                 }

app/src/protyle/breadcrumb/index.ts

@@ -409,7 +409,7 @@ export class Breadcrumb {
         }
         this.id = id;
         const excludeTypes: string[] = [];
-        if (this.element.parentElement?.parentElement && this.element.parentElement.parentElement.classList.contains("b3-dialog__cardblock")) {
+        if (this.element.parentElement?.parentElement && this.element.parentElement.parentElement.classList.contains("card__block")) {
             // 闪卡面包屑不能显示答案
             excludeTypes.push("NodeTextMark-mark");
         }

app/src/protyle/export/util.ts

@@ -38,7 +38,7 @@ export const exportImage = (id: string) => {
 </div>
 `,
         content: `<div class="b3-dialog__content" style="max-height: 70vh;overflow: auto;${isMobile() ? "padding:8px;" : ""};background-color: var(--b3-theme-background)">
-    <div style="${isMobile() ? "padding: 16px;margin: 16px 0" : "padding: 48px;margin: 8px 0 24px"};border: 1px solid var(--b3-border-color);border-radius: 10px;" class="b3-dialog__exportimg protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}" id="preview"></div>
+    <div style="${isMobile() ? "padding: 16px;margin: 16px 0" : "padding: 48px;margin: 8px 0 24px"};border: 1px solid var(--b3-border-color);border-radius: 10px;" class="export-img protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}" id="preview"></div>
     <div class="ft__smaller ft__on-surface fn__flex"><img style="height: 18px;margin: 0 8px" src="stage/icon.png">${window.siyuan.languages.exportBySiYuan}</div>
     <div class="fn__hr--b"></div>
     <div class="fn__hr--b"></div>

app/src/util/globalShortcut.ts

@@ -474,12 +474,12 @@ export const globalShortcut = () => {
             hideElements(["dialog"]);
             switchDialog = new Dialog({
                 title: window.siyuan.languages.switchTab,
-                content: `<div class="fn__flex-column b3-dialog--switch">
+                content: `<div class="fn__flex-column switch-doc">
     <div class="fn__hr"><input style="opacity: 0;height: 1px;box-sizing: border-box"></div>
     <div class="fn__flex">${dockHtml}
         <ul${!isTabWindow ? "" : ' style="border-left:0"'} class="b3-list b3-list--background fn__flex-1">${tabHtml}</ul>
     </div>
-    <div class="dialog__path"></div>
+    <div class="switch-doc__path"></div>
 </div>`,
                 destroyCallback: () => {
                     if (range && range.getBoundingClientRect().height !== 0) {
@@ -967,12 +967,12 @@ ${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_FILE, false, "b3-list-item__
         }
         const dialog = new Dialog({
             title: window.siyuan.languages.recentDocs,
-            content: `<div class="fn__flex-column b3-dialog--switch">
+            content: `<div class="fn__flex-column switch-doc">
     <div class="fn__hr"><input style="opacity: 0;height: 1px;box-sizing: border-box"></div>
     <div class="fn__flex">${dockHtml}
         <ul${!isWindow() ? "" : ' style="border-left:0"'} class="b3-list b3-list--background fn__flex-1">${tabHtml}</ul>
     </div>
-    <div class="dialog__path"></div>
+    <div class="switch-doc__path"></div>
 </div>`,
             destroyCallback: () => {
                 if (range && range.getBoundingClientRect().height !== 0) {
@@ -984,10 +984,10 @@ ${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_FILE, false, "b3-list-item__
             fetchPost("/api/filetree/getFullHPathByID", {
                 id: response.data[0].rootID
             }, (response) => {
-                dialog.element.querySelector(".dialog__path").innerHTML = escapeHtml(response.data);
+                dialog.element.querySelector(".switch-doc__path").innerHTML = escapeHtml(response.data);
             });
         } else {
-            dialog.element.querySelector(".dialog__path").innerHTML = dialog.element.querySelector(".b3-list-item--focus").textContent;
+            dialog.element.querySelector(".switch-doc__path").innerHTML = dialog.element.querySelector(".b3-list-item--focus").textContent;
         }
         dialog.element.querySelector("input").focus();
         dialog.element.setAttribute("data-key", window.siyuan.config.keymap.general.recentDocs.custom);