Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-16 14:40:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 https://github.com/siyuan-note/siyuan/pull/16340

Browse source
This commit is contained in:
Vanessa 2025-11-17 12:01:26 +08:00
parent cc59bd1087
commit a22ec4ede6
6 changed files with 106 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/appearance/themes/daylight/theme.css
View file

@ -188,7 +188,6 @@
/* 数据库 */
--b3-av-gallery-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, var(--b3-border-color) 0px 0px 0px 1px;
--b3-av-kanban-content-hover-bg: var(--b3-theme-surface);
/* 嵌入块 */
--b3-embed-background: transparent;

1
app/appearance/themes/midnight/theme.css
View file

@ -187,7 +187,6 @@
/* 数据库 */
--b3-av-gallery-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, var(--b3-border-color) 0px 0px 0px 1px;
--b3-av-kanban-content-hover-bg: var(--b3-theme-surface);
/* 嵌入块 */
--b3-embed-background: transparent;

187
app/src/assets/scss/business/_av.scss
View file

@ -278,13 +278,18 @@
position: relative;
min-height: 40px;
&:hover {
.av__gallery-cover {
background-color: var(--b3-theme-surface-light);
&::before {
transition: background 100ms ease-out;
content: "";
inset: 0;
position: absolute;
border-radius: inherit;
background-color: var(--b3-theme-background);
}
.av__gallery-fields {
background-color: var(--b3-theme-surface);
&:hover {
&:not(.av__gallery-item--select)::before {
background-color: var(--b3-theme-surface-light);
}
.av__gallery-actions {
@ -292,22 +297,16 @@
}
}
&--select:before {
content: "";
background-color: var(--b3-theme-primary-lightest);
height: 100%;
width: 100%;
z-index: 1;
position: absolute;
&--select::before {
background-color: var(--b3-theme-primary-lightest) !important;
opacity: 1 !important;
}
}
&-cover {
border-bottom: 1px solid var(--b3-border-color);
background-color: var(--b3-theme-surface);
border-radius: var(--b3-border-radius) var(--b3-border-radius) 0 0;
overflow: hidden;
transition: background 100ms ease-out;
position: relative;
cursor: pointer;
@ -376,9 +375,8 @@
}
&-fields {
border-radius: var(--b3-border-radius);
border-radius: 0 0 var(--b3-border-radius) var(--b3-border-radius);
flex: 1;
transition: background 100ms ease-out;
white-space: nowrap;
font-size: 85%;
min-height: 23px;
@ -430,10 +428,6 @@
}
}
&-cover + &-fields {
border-radius: 0 0 var(--b3-border-radius) var(--b3-border-radius);
}
&-field {
position: relative;
}
@ -492,7 +486,7 @@
position: relative;
&:hover {
background-color: var(--b3-list-hover);
background-color: var(--b3-theme-surface-light);
color: var(--b3-theme-on-background);
}
}
@ -1010,6 +1004,58 @@
display: flex;
align-items: flex-start;
&--bg {
.av__kanban-group::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--b3-av-kanban-background);
opacity: 0.16;
border-radius: inherit;
}
.av__gallery-item {
position: relative;
box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0, var(--b3-av-kanban-background) 0 0 0 1px;
&::before {
background-color: var(--b3-av-kanban-background);
opacity: 0.26;
}
&:hover:not(.av__gallery-item--select)::before {
background-color: var(--b3-av-kanban-background);
opacity: 0.38;
}
}
.av__gallery-cover {
border-bottom-color: var(--b3-av-kanban-background);
}
.av__gallery-add {
box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0, var(--b3-av-kanban-background) 0 0 0 1px;
&::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--b3-av-kanban-background);
border-radius: inherit;
opacity: 0.26;
}
&:hover {
background-color: transparent;
&::before {
background-color: var(--b3-av-kanban-background);
opacity: 0.38;
}
}
}
}
&-group {
width: 260px;
padding: 8px;
@ -1017,23 +1063,6 @@
position: relative;
flex-shrink: 0;
&::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--b3-av-kanban-border);
opacity: 0.161;
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
&:hover {
.av__group-icon {
opacity: 1;
}
}
&--small {
width: 180px;
}
@ -1042,91 +1071,9 @@
width: 320px;
}
.av__group-icon {
opacity: 0;
}
.av__group-title {
padding-top: 0;
}
.av__gallery-item {
position: relative;
box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0, var(--b3-av-kanban-border, var(--b3-border-color)) 0 0 0 1px;
&::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--b3-av-kanban-border);
opacity: 0.278;
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
&--select::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--b3-theme-primary-lighter);
border-radius: inherit;
pointer-events: none;
z-index: 1;
}
// 禁用父级 hover 规则对背景色的改变，避免与 ::before 伪元素冲突
&:hover {
.av__gallery-cover {
background-color: var(--b3-theme-surface);
}
.av__gallery-fields {
background-color: transparent;
}
}
.av__gallery-fields,
.av__gallery-cover {
position: relative;
&::before {
content: "";
position: absolute;
inset: 0;
background-color: transparent;
opacity: 0.361;
border-radius: inherit;
pointer-events: none;
z-index: 0;
transition: background-color 100ms ease-out;
}
}
&:hover .av__gallery-fields,
&:hover .av__gallery-cover {
&::before {
background-color: var(--b3-av-kanban-content-hover-bg);
opacity: 0.65;
}
}
}
.av__gallery-cover {
position: relative;
border-bottom: 1px solid var(--b3-av-kanban-border);
&::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--b3-av-kanban-border);
opacity: 0.278;
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
}
}
}
}

30
app/src/protyle/render/av/kanban/render.ts
View file

@ -31,7 +31,7 @@ const getKanbanTitleHTML = (group: IAVView, counter: number) => {
<span class="av__group-name fn__ellipsis" style="white-space: nowrap;">${nameHTML}</span>
${counter === 0 ? '<span class="fn__space"></span>' : `<span aria-label="${window.siyuan.languages.entryNum}" data-position="north" class="av__group-counter ariaLabel">${counter}</span>`}
<span class="fn__flex-1"></span>
<span class="av__group-icon ariaLabel" data-type="av-add-top" data-position="north" aria-label="${window.siyuan.languages.newRow}"><svg><use xlink:href="#iconAdd"></use></svg></span>
<span class="av__group-icon av__group-icon--hover ariaLabel" data-type="av-add-top" data-position="north" aria-label="${window.siyuan.languages.newRow}"><svg><use xlink:href="#iconAdd"></use></svg></span>
</div>`;
};
@ -198,18 +198,22 @@ export const renderKanban = async (options: {
});
return;
}
const view: IAVGallery = data.view as IAVKanban;
const view = data.view as IAVKanban;
let bodyHTML = "";
let isSelectGroup = false;
view.groups.forEach((group: IAVKanban) => {
if (group.groupHidden === 0) {
let selectBg = "";
if (group.fillColBackgroundColor && ["mSelect", "select"].includes(group.groupKey.type)) {
if (group.groupValue.mSelect) {
// 单选多选字段分组使用选项颜色
selectBg = `style="--b3-av-kanban-border: var(--b3-font-background${group.groupValue.mSelect[0].color}); --b3-av-kanban-content-hover-bg: var(--b3-av-kanban-border);"`;
if (group.fillColBackgroundColor) {
if (["mSelect", "select"].includes(group.groupValue.type)) {
isSelectGroup = true;
}
if (isSelectGroup) {
if (group.groupValue.mSelect && group.groupValue.mSelect.length > 0) {
selectBg = `style="--b3-av-kanban-background: var(--b3-font-background${group.groupValue.mSelect[0].color});"`;
} else {
// _@default@_ 分组使用 var(--b3-border-color)
selectBg = 'style="--b3-av-kanban-border: var(--b3-border-color); --b3-av-kanban-content-hover-bg: var(--b3-av-kanban-border);"';
selectBg = 'style="--b3-av-kanban-background: var(--b3-border-color);"';
}
}
}
bodyHTML += `<div class="av__kanban-group${group.cardSize === 0 ? " av__kanban-group--small" : (group.cardSize === 2 ? " av__kanban-group--big" : "")}"${selectBg}>
@ -221,13 +225,19 @@ export const renderKanban = async (options: {
if (options.renderAll) {
options.blockElement.firstElementChild.outerHTML = `<div class="av__container fn__block">
${genTabHeaderHTML(data, resetData.isSearching || !!resetData.query, !options.protyle.disabled && !hasClosestByAttribute(options.blockElement, "data-type", "NodeBlockQueryEmbed"))}
<div class="av__kanban">
<div class="av__kanban${isSelectGroup ? " av__kanban--bg" : ""}">
${bodyHTML}
</div>
<div class="av__cursor" contenteditable="true">${Constants.ZWSP}</div>
</div>`;
} else {
options.blockElement.querySelector(".av__kanban").innerHTML = bodyHTML;
const kanbanElement = options.blockElement.querySelector(".av__kanban");
kanbanElement.innerHTML = bodyHTML;
if (isSelectGroup) {
kanbanElement.classList.add("av__kanban--bg");
} else {
kanbanElement.classList.remove("av__kanban--bg");
}
}
afterRenderGallery({
resetData,

20
app/src/protyle/render/av/render.ts
View file

@ -727,19 +727,23 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
}
if (operation.action === "setAttrViewFillColBackgroundColor") {
getAVElements(protyle, operation.avID, operation.viewID).forEach((avItem: HTMLElement) => {
avItem.querySelectorAll(".av__kanban-group").forEach(item => {
if (!operation.data) {
item.removeAttribute("style");
return;
const hasSelect = avItem.querySelector(".av__group-title .b3-chip");
const kanbanElement = avItem.querySelector(".av__kanban");
if (operation.data && hasSelect) {
kanbanElement.classList.add("av__kanban--bg");
} else {
kanbanElement.classList.remove("av__kanban--bg");
}
avItem.querySelectorAll(".av__kanban-group").forEach(item => {
if (operation.data && hasSelect) {
const nameElement = item.querySelector(".av__group-title .b3-chip") as HTMLElement;
if (nameElement) {
const colorMatch = nameElement.style.backgroundColor.match(/--b3-font-background(\d+)/);
if (colorMatch) {
item.setAttribute("style", `--b3-av-kanban-border: var(--b3-font-background${colorMatch[1]}); --b3-av-kanban-content-hover-bg: var(--b3-av-kanban-border);`);
item.setAttribute("style", `--b3-av-kanban-background:var(--b3-font-background${nameElement.style.backgroundColor.slice(-2, -1)})`);
} else {
item.setAttribute("style", "--b3-av-kanban-background: var(--b3-border-color)");
}
} else {
item.setAttribute("style", "--b3-av-kanban-border: var(--b3-border-color); --b3-av-kanban-content-hover-bg: var(--b3-av-kanban-border);");
item.removeAttribute("style");
}
});
});

7
app/src/protyle/util/editorCommonEvent.ts
View file

@ -602,7 +602,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
ghostElement.className = "protyle-wysiwyg protyle-wysiwyg--attr";
const isKanban = blockElement.getAttribute("data-av-type") === "kanban";
if (isKanban) {
ghostElement.innerHTML = "<div class=\"av__kanban\"></div>";
ghostElement.innerHTML = `<div class="${blockElement.querySelector(".av__kanban").className}"></div>`;
}
let galleryElement: HTMLElement;
let cloneGalleryElement = document.createElement("div");
@ -614,7 +614,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
if (isKanban) {
cloneGalleryElement.className = "av__kanban-group";
cloneGalleryElement.setAttribute("style", item.parentElement.parentElement.parentElement.getAttribute("style") || "--b3-av-kanban-content-bg: var(--b3-theme-background);");
cloneGalleryElement.innerHTML = "<div class=\"av__gallery\"></div>";
cloneGalleryElement.innerHTML = '<div class="av__gallery"></div>';
ghostElement.firstElementChild.appendChild(cloneGalleryElement);
} else {
cloneGalleryElement.classList.add("av__gallery");
@ -628,11 +628,10 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
if (isKanban) {
cloneGalleryElement.firstElementChild.appendChild(cloneItem);
} else {
cloneItem.querySelector(".av__gallery-fields").setAttribute("style", "background-color: var(--b3-theme-background)");
cloneGalleryElement.appendChild(cloneItem);
}
});
ghostElement.setAttribute("style", "top:100vh;position:fixed;opacity:.1;padding:0;z-index: 8");
ghostElement.setAttribute("style", "left: 1px;top:100vh;position:fixed;opacity:.1;padding:0;z-index: 8");
document.body.append(ghostElement);
event.dataTransfer.setDragImage(ghostElement, -10, -10);
setTimeout(() => {