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

🎨 fix https://github.com/siyuan-note/siyuan/issues/7421

Browse source
This commit is contained in:
Vanessa 2023-02-20 19:37:42 +08:00
parent 1fc0fa0d86
commit 2e2251f44d
2 changed files with 141 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

215
app/src/config/bazaar.ts
View file

@ -128,23 +128,31 @@ export const bazaar = {
<div id="configBazaarReadme" class="config-bazaar__readme"></div> <div id="configBazaarReadme" class="config-bazaar__readme"></div>
</div>`; </div>`;
}, },
getHTML(item: IBazaarItem, bazaarType: TBazaarType) { _genCardHTML(item: IBazaarItem, bazaarType: TBazaarType) {
let hide = false; let hide = false;
let type = ""; let themeMode = "";
if (bazaarType === "themes") { if (bazaarType === "themes") {
const themeValue = (bazaar.element.querySelector("#bazaarSelect") as HTMLSelectElement).value; const themeValue = (bazaar.element.querySelector("#bazaarSelect") as HTMLSelectElement).value;
if ((themeValue === "0" && item.modes.includes("dark")) || if ((themeValue === "0" && item.modes.includes("dark")) ||
themeValue === "1" && item.modes.includes("light")) { themeValue === "1" && item.modes.includes("light")) {
hide = true; hide = true;
} }
type = item.modes.toString(); themeMode = item.modes.toString();
} }
let showSwitch = false; let showSwitch = false;
if (["icons", "themes"].includes(bazaarType)) { if (["icons", "themes"].includes(bazaarType)) {
showSwitch = true; showSwitch = true;
} }
const dataObj = {
return `<div data-bazaar="${bazaarType}" class="b3-card${hide ? " fn__none" : ""}${item.current ? " b3-card--current" : ""}" data-type="${type}" data-updated="${item.updated}"> bazaarType,
themeMode: themeMode,
updated: item.updated,
name: item.name,
repoURL: item.repoURL,
repoHash: item.repoHash,
downloaded: false,
}
return `<div data-obj='${JSON.stringify(dataObj)}' class="b3-card${hide ? " fn__none" : ""}${item.current ? " b3-card--current" : ""}">
<div class="b3-card__img"><img src="${item.previewURLThumb}"/></div> <div class="b3-card__img"><img src="${item.previewURLThumb}"/></div>
<div class="b3-card__info fn__flex"> <div class="b3-card__info fn__flex">
<span class="fn__flex-center fn__ellipsis">${item.name}</span> <span class="fn__flex-center fn__ellipsis">${item.name}</span>
@ -154,7 +162,7 @@ export const bazaar = {
<span class="fn__space"></span> <span class="fn__space"></span>
<span class="fn__flex-center">${item.downloads}</span> <span class="fn__flex-center">${item.downloads}</span>
</div> </div>
<div class="b3-card__actions" data-name="${item.name}" data-url="${item.repoURL}" data-hash="${item.repoHash}"> <div class="b3-card__actions">
<div class="fn__flex-1"></div> <div class="fn__flex-1"></div>
<span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${item.installed ? "" : " fn__none"}" data-type="uninstall" aria-label="${window.siyuan.languages.uninstall}"> <span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${item.installed ? "" : " fn__none"}" data-type="uninstall" aria-label="${window.siyuan.languages.uninstall}">
<svg><use xlink:href="#iconTrashcan"></use></svg> <svg><use xlink:href="#iconTrashcan"></use></svg>
@ -186,12 +194,21 @@ export const bazaar = {
showSwitch = true; showSwitch = true;
} }
response.data.packages.forEach((item: IBazaarItem) => { response.data.packages.forEach((item: IBazaarItem) => {
html += `<div data-bazaar="${bazaarType}" data-type="${item.modes?.toString()}" data-downloaded="true" class="b3-card${item.current ? " b3-card--current" : ""}"> const dataObj = {
bazaarType,
themeMode: item.modes?.toString(),
updated: item.updated,
name: item.name,
repoURL: item.repoURL,
repoHash: item.repoHash,
downloaded: true
}
html += `<div data-obj='${JSON.stringify(dataObj)}' class="b3-card${item.current ? " b3-card--current" : ""}">
<div class="b3-card__img"><img src="${item.previewURLThumb}"/></div> <div class="b3-card__img"><img src="${item.previewURLThumb}"/></div>
<div class="b3-card__info"> <div class="b3-card__info">
${item.name} ${item.name}
</div> </div>
<div class="b3-card__actions" data-url="${item.repoURL}" data-name="${item.name}" data-hash="${item.repoHash}"> <div class="b3-card__actions">
<div class="fn__flex-1"></div> <div class="fn__flex-1"></div>
<span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show" data-type="uninstall" aria-label="${window.siyuan.languages.uninstall}"> <span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show" data-type="uninstall" aria-label="${window.siyuan.languages.uninstall}">
<svg><use xlink:href="#iconTrashcan"></use></svg> <svg><use xlink:href="#iconTrashcan"></use></svg>
@ -211,23 +228,22 @@ export const bazaar = {
</div> </div>
</div>`; </div>`;
}); });
bazaar.data.downloaded = response.data.packages; bazaar._data.downloaded = response.data.packages;
bazaar.element.querySelector("#configBazaarDownloaded").innerHTML = html ? `<div class="b3-cards">${html}</div>` : `<div class="fn__hr"></div><ul class="b3-list b3-list--background"><li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li></ul>`; bazaar.element.querySelector("#configBazaarDownloaded").innerHTML = html ? `<div class="b3-cards">${html}</div>` : `<div class="fn__hr"></div><ul class="b3-list b3-list--background"><li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li></ul>`;
}); });
}, },
data: { _data: {
themes: [] as IBazaarItem[], themes: [] as IBazaarItem[],
templates: [] as IBazaarItem[], templates: [] as IBazaarItem[],
icons: [] as IBazaarItem[], icons: [] as IBazaarItem[],
widgets: [] as IBazaarItem[], widgets: [] as IBazaarItem[],
downloaded: [] as IBazaarItem[], downloaded: [] as IBazaarItem[],
}, },
renderReadme(cardElement: HTMLElement, bazaarType: TBazaarType) { _renderReadme(cardElement: HTMLElement, bazaarType: TBazaarType) {
const isDownloaded = cardElement.getAttribute("data-downloaded") === "true"; const dataObj = JSON.parse(cardElement.getAttribute("data-obj"));
const repoURL = cardElement.querySelector(".b3-card__actions").getAttribute("data-url");
let data: IBazaarItem; let data: IBazaarItem;
(isDownloaded ? bazaar.data.downloaded : bazaar.data[bazaarType]).find((item: IBazaarItem) => { (dataObj.downloaded ? bazaar._data.downloaded : bazaar._data[bazaarType]).find((item: IBazaarItem) => {
if (item.repoURL === repoURL) { if (item.repoURL === dataObj.repoURL) {
data = item; data = item;
return true; return true;
} }
@ -247,7 +263,15 @@ export const bazaar = {
} else if (bazaarType === "templates") { } else if (bazaarType === "templates") {
navTitle = window.siyuan.languages.template; navTitle = window.siyuan.languages.template;
} }
readmeElement.innerHTML = ` <div class="item__side"> const dataObj1 = {
bazaarType,
themeMode: data.modes?.toString(),
name: data.name,
repoURL: data.repoURL,
repoHash: data.repoHash,
downloaded: true
}
readmeElement.innerHTML = ` <div class="item__side" data-obj='${JSON.stringify(dataObj1)}'>
<div class="fn__flex"> <div class="fn__flex">
<button class="b3-button b3-button--outline" data-type="goBack" title="Go back"><svg><use xlink:href="#iconLeft"></use></svg></button> <button class="b3-button b3-button--outline" data-type="goBack" title="Go back"><svg><use xlink:href="#iconLeft"></use></svg></button>
<div class="item__nav">${navTitle}</div> <div class="item__nav">${navTitle}</div>
@ -261,17 +285,20 @@ export const bazaar = {
<div class="fn__hr--b"></div> <div class="fn__hr--b"></div>
<div class="ft__on-surface ft__smaller" style="line-height: 20px;">${window.siyuan.languages.currentVer}<br>v${data.version}</div> <div class="ft__on-surface ft__smaller" style="line-height: 20px;">${window.siyuan.languages.currentVer}<br>v${data.version}</div>
<div class="fn__hr"></div> <div class="fn__hr"></div>
<div class="ft__on-surface ft__smaller" style="line-height: 20px;">${isDownloaded ? window.siyuan.languages.installDate : window.siyuan.languages.releaseDate}<br>${isDownloaded ? data.hInstallDate : data.hUpdated}</div> <div class="ft__on-surface ft__smaller" style="line-height: 20px;">${dataObj.downloaded ? window.siyuan.languages.installDate : window.siyuan.languages.releaseDate}<br>${dataObj.downloaded ? data.hInstallDate : data.hUpdated}</div>
<div class="fn__hr"></div> <div class="fn__hr"></div>
<div class="ft__on-surface ft__smaller" style="line-height: 20px;">${isDownloaded ? window.siyuan.languages.installSize : window.siyuan.languages.pkgSize}<br>${isDownloaded ? data.hInstallSize : data.hSize}</div> <div class="ft__on-surface ft__smaller" style="line-height: 20px;">${dataObj.downloaded ? window.siyuan.languages.installSize : window.siyuan.languages.pkgSize}<br>${dataObj.downloaded ? data.hInstallSize : data.hSize}</div>
<div class="fn__hr--b"></div> <div class="fn__hr--b"></div>
<div class="fn__hr--b"></div> <div class="fn__hr--b"></div>
<div class="${(data.installed || isDownloaded) ? "fn__none" : ""}" data-type="${data.modes?.toString()}"> <div${(data.installed || dataObj.downloaded) ? ' class="fn__none"' : ""}>
<button class="b3-button" style="width: 168px" data-hash="${data.repoHash}" data-name="${data.name}" data-bazaar="${bazaarType}" data-url="${data.repoURL}" data-type="install">${window.siyuan.languages.download}</button> <button class="b3-button" style="width: 168px" data-type="install">${window.siyuan.languages.download}</button>
</div> </div>
<div class="fn__hr--b${isDownloaded ? " fn__none" : ""}"></div> <div${(data.outdated && (data.installed || dataObj.downloaded)) ? "" : ' class="fn__none"'}>
<div class="fn__hr--b${isDownloaded ? " fn__none" : ""}"></div> <button class="b3-button" style="width: 168px" data-type="install-t">${window.siyuan.languages.update}</button>
<div class="fn__flex${isDownloaded ? " fn__none" : ""}" style="justify-content: center;"> </div>
<div class="fn__hr--b${dataObj.downloaded ? " fn__none" : ""}"></div>
<div class="fn__hr--b${dataObj.downloaded ? " fn__none" : ""}"></div>
<div class="fn__flex${dataObj.downloaded ? " fn__none" : ""}" style="justify-content: center;">
<svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconGithub"></use></svg> <svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconGithub"></use></svg>
<span class="fn__space"></span> <span class="fn__space"></span>
<a href="${data.repoURL}" target="_blank" title="GitHub Repo">Repo</a> <a href="${data.repoURL}" target="_blank" title="GitHub Repo">Repo</a>
@ -299,7 +326,7 @@ export const bazaar = {
<img data-type="img-loading" style="position: absolute;top: 0;left: 0;height: 100%;width: 100%;padding: 48px;box-sizing: border-box;" src="/stage/loading-pure.svg"> <img data-type="img-loading" style="position: absolute;top: 0;left: 0;height: 100%;width: 100%;padding: 48px;box-sizing: border-box;" src="/stage/loading-pure.svg">
</div> </div>
</div>`; </div>`;
if (isDownloaded) { if (dataObj.downloaded) {
const mdElement = readmeElement.querySelector(".item__readme"); const mdElement = readmeElement.querySelector(".item__readme");
mdElement.innerHTML = data.readme; mdElement.innerHTML = data.readme;
highlightRender(mdElement); highlightRender(mdElement);
@ -317,8 +344,8 @@ export const bazaar = {
}, },
bindEvent() { bindEvent() {
fetchPost("/api/bazaar/getBazaarTheme", {}, response => { fetchPost("/api/bazaar/getBazaarTheme", {}, response => {
bazaar.onBazaar(response, "themes", false); bazaar._onBazaar(response, "themes", false);
bazaar.data.themes = response.data.packages; bazaar._data.themes = response.data.packages;
}); });
bazaar.element.addEventListener("click", (event) => { bazaar.element.addEventListener("click", (event) => {
let target = event.target as HTMLElement; let target = event.target as HTMLElement;
@ -326,11 +353,12 @@ export const bazaar = {
const type = target.getAttribute("data-type"); const type = target.getAttribute("data-type");
if (type === "open") { if (type === "open") {
/// #if !BROWSER /// #if !BROWSER
const dirName = target.parentElement.parentElement.getAttribute("data-bazaar"); const dataObj = JSON.parse(target.parentElement.parentElement.getAttribute("data-obj"));
const dirName = dataObj.bazaarType;
if (dirName === "icons" || dirName === "themes") { if (dirName === "icons" || dirName === "themes") {
shell.openPath(path.join(window.siyuan.config.system.confDir, "appearance", dirName, target.parentElement.getAttribute("data-name"))); shell.openPath(path.join(window.siyuan.config.system.confDir, "appearance", dirName, dataObj.name));
} else { } else {
shell.openPath(path.join(window.siyuan.config.system.dataDir, dirName, target.parentElement.getAttribute("data-name"))); shell.openPath(path.join(window.siyuan.config.system.dataDir, dirName, dataObj.name));
} }
/// #endif /// #endif
event.preventDefault(); event.preventDefault();
@ -357,7 +385,8 @@ export const bazaar = {
break; break;
} else if (type === "install") { } else if (type === "install") {
if (!target.classList.contains("b3-button--progress")) { if (!target.classList.contains("b3-button--progress")) {
const bazaarType = target.getAttribute("data-bazaar") as TBazaarType; const dataObj = JSON.parse(target.parentElement.parentElement.getAttribute("data-obj"));
const bazaarType = dataObj.bazaarType as TBazaarType;
let url = "/api/bazaar/installBazaarTemplate"; let url = "/api/bazaar/installBazaarTemplate";
if (bazaarType === "themes") { if (bazaarType === "themes") {
url = "/api/bazaar/installBazaarTheme"; url = "/api/bazaar/installBazaarTheme";
@ -367,28 +396,27 @@ export const bazaar = {
url = "/api/bazaar/installBazaarWidget"; url = "/api/bazaar/installBazaarWidget";
} }
fetchPost(url, { fetchPost(url, {
repoURL: target.getAttribute("data-url"), repoURL: dataObj.repoURL,
packageName: target.getAttribute("data-name"), packageName: dataObj.name,
repoHash: target.getAttribute("data-hash"), repoHash: dataObj.repoHash,
mode: target.parentElement.getAttribute("data-type") === "dark" ? 1 : 0, mode: dataObj.themeMode === "dark" ? 1 : 0,
}, response => { }, response => {
if (window.siyuan.config.appearance.themeJS && bazaarType === "themes") { if (window.siyuan.config.appearance.themeJS && bazaarType === "themes") {
exportLayout(true); exportLayout(true);
return; return;
} }
bazaar.onBazaar(response, bazaarType, ["themes", "icons"].includes(bazaarType)); bazaar._genMyHTML(bazaarType);
bazaar._onBazaar(response, bazaarType, ["themes", "icons"].includes(bazaarType));
}); });
} }
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "install-t") { } else if (type === "install-t") {
if (!target.classList.contains("b3-button--progress")) {
confirmDialog(window.siyuan.languages.update, window.siyuan.languages.exportTplTip, () => { confirmDialog(window.siyuan.languages.update, window.siyuan.languages.exportTplTip, () => {
const cardElement = hasClosestByClassName(target, "b3-card"); const dataObj = JSON.parse(target.parentElement.parentElement.getAttribute("data-obj"))
let bazaarType: TBazaarType = "themes"; const bazaarType: TBazaarType = dataObj.bazaarType;
if (cardElement) {
bazaarType = cardElement.getAttribute("data-bazaar") as TBazaarType;
}
let url = "/api/bazaar/installBazaarTemplate"; let url = "/api/bazaar/installBazaarTemplate";
if (bazaarType === "themes") { if (bazaarType === "themes") {
url = "/api/bazaar/installBazaarTheme"; url = "/api/bazaar/installBazaarTheme";
@ -397,25 +425,23 @@ export const bazaar = {
} else if (bazaarType === "widgets") { } else if (bazaarType === "widgets") {
url = "/api/bazaar/installBazaarWidget"; url = "/api/bazaar/installBazaarWidget";
} }
if (!target.classList.contains("b3-button")) {
target.parentElement.insertAdjacentHTML("afterend", '<img data-type="img-loading" style="position: absolute;top: 0;left: 0;height: 100%;width: 100%;padding: 48px;box-sizing: border-box;" src="/stage/loading-pure.svg">'); target.parentElement.insertAdjacentHTML("afterend", '<img data-type="img-loading" style="position: absolute;top: 0;left: 0;height: 100%;width: 100%;padding: 48px;box-sizing: border-box;" src="/stage/loading-pure.svg">');
const name = target.parentElement.getAttribute("data-name"); }
fetchPost(url, { fetchPost(url, {
repoURL: target.parentElement.getAttribute("data-url"), repoURL: dataObj.repoURL,
packageName: name, packageName: dataObj.name,
repoHash: target.parentElement.getAttribute("data-hash"), repoHash: dataObj.repoHash,
mode: target.parentElement.parentElement.getAttribute("data-type") === "dark" ? 1 : 0, mode: dataObj.themeMode === "dark" ? 1 : 0,
update: true, update: true,
}, response => { }, response => {
// 更新主题后不需要对该主题进行切换 https://github.com/siyuan-note/siyuan/issues/4966 // 更新主题后不需要对该主题进行切换 https://github.com/siyuan-note/siyuan/issues/4966
if (cardElement && cardElement.getAttribute("data-downloaded") === "true") {
this._genMyHTML(bazaarType); this._genMyHTML(bazaarType);
} else { bazaar._onBazaar(response, bazaarType, ["icons"].includes(bazaarType));
bazaar.onBazaar(response, bazaarType, ["icons"].includes(bazaarType));
}
// https://github.com/siyuan-note/siyuan/issues/5411 // https://github.com/siyuan-note/siyuan/issues/5411
if (bazaarType === "themes" && ( if (bazaarType === "themes" && (
(window.siyuan.config.appearance.mode === 0 && window.siyuan.config.appearance.themeLight === name) || (window.siyuan.config.appearance.mode === 0 && window.siyuan.config.appearance.themeLight === dataObj.name) ||
(window.siyuan.config.appearance.mode === 1 && window.siyuan.config.appearance.themeDark === name) (window.siyuan.config.appearance.mode === 1 && window.siyuan.config.appearance.themeDark === dataObj.name)
)) { )) {
if (window.siyuan.config.appearance.themeJS) { if (window.siyuan.config.appearance.themeJS) {
exportLayout(true); exportLayout(true);
@ -426,15 +452,13 @@ export const bazaar = {
} }
}); });
}); });
}
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "uninstall") { } else if (type === "uninstall") {
const cardElement = hasClosestByClassName(target, "b3-card"); const dataObj = JSON.parse(target.parentElement.parentElement.getAttribute("data-obj"))
let bazaarType: TBazaarType = "themes"; const bazaarType: TBazaarType = dataObj.bazaarType;
if (cardElement) {
bazaarType = cardElement.getAttribute("data-bazaar") as TBazaarType;
}
let url = "/api/bazaar/uninstallBazaarTemplate"; let url = "/api/bazaar/uninstallBazaarTemplate";
if (bazaarType === "themes") { if (bazaarType === "themes") {
url = "/api/bazaar/uninstallBazaarTheme"; url = "/api/bazaar/uninstallBazaarTheme";
@ -444,7 +468,7 @@ export const bazaar = {
url = "/api/bazaar/uninstallBazaarWidget"; url = "/api/bazaar/uninstallBazaarWidget";
} }
const packageName = target.parentElement.getAttribute("data-name"); const packageName = dataObj.name;
if (window.siyuan.config.appearance.themeDark === packageName || if (window.siyuan.config.appearance.themeDark === packageName ||
window.siyuan.config.appearance.themeLight === packageName || window.siyuan.config.appearance.themeLight === packageName ||
window.siyuan.config.appearance.icon === packageName) { window.siyuan.config.appearance.icon === packageName) {
@ -453,43 +477,28 @@ export const bazaar = {
fetchPost(url, { fetchPost(url, {
packageName packageName
}, response => { }, response => {
if (cardElement && cardElement.getAttribute("data-downloaded") === "true") {
this._genMyHTML(bazaarType); this._genMyHTML(bazaarType);
} else { bazaar._onBazaar(response, bazaarType, ["themes", "icons"].includes(bazaarType));
bazaar.onBazaar(response, bazaarType, ["themes", "icons"].includes(bazaarType));
}
}); });
} }
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "switch") { } else if (type === "switch") {
const packageName = target.parentElement.getAttribute("data-name"); const dataObj = JSON.parse(target.parentElement.parentElement.getAttribute("data-obj"))
const cardElement = hasClosestByClassName(target, "b3-card"); const bazaarType: TBazaarType = dataObj.bazaarType;
let bazaarType: TBazaarType = "themes"; const packageName = dataObj.name;
let mode: number; const mode = dataObj.themeMode === "dark" ? 1 : 0;
if (cardElement) {
bazaarType = cardElement.getAttribute("data-bazaar") as TBazaarType;
mode = cardElement.getAttribute("data-type") === "dark" ? 1 : 0;
}
if (bazaarType === "icons") { if (bazaarType === "icons") {
fetchPost("/api/setting/setAppearance", Object.assign({}, window.siyuan.config.appearance, { fetchPost("/api/setting/setAppearance", Object.assign({}, window.siyuan.config.appearance, {
icon: packageName, icon: packageName,
}), response => { }), (appearanceResponse) => {
bazaar.element.querySelectorAll(`.b3-card__actions[data-name="${window.siyuan.config.appearance.icon}"]`).forEach(item => { this._genMyHTML(bazaarType);
item.parentElement.classList.remove("b3-card--current"); fetchPost("/api/bazaar/getBazaarIcon", {}, response => {
const switchElement = item.querySelector('[data-type="switch"]'); response.data.appearance = appearanceResponse.data
switchElement.classList.remove("fn__none"); bazaar._onBazaar(response, "icons", true);
switchElement.previousElementSibling.classList.remove("fn__none"); bazaar._data.icons = response.data.packages;
}); });
bazaar.element.querySelectorAll(`.b3-card__actions[data-name="${packageName}"]`).forEach(item => {
item.parentElement.classList.add("b3-card--current");
const switchElement = item.querySelector('[data-type="switch"]');
switchElement.classList.add("fn__none");
switchElement.previousElementSibling.classList.add("fn__none");
});
appearance.onSetappearance(response.data);
}); });
} else if (bazaarType === "themes") { } else if (bazaarType === "themes") {
fetchPost("/api/setting/setAppearance", Object.assign({}, window.siyuan.config.appearance, { fetchPost("/api/setting/setAppearance", Object.assign({}, window.siyuan.config.appearance, {
@ -497,26 +506,18 @@ export const bazaar = {
modeOS: false, modeOS: false,
themeDark: mode === 1 ? packageName : window.siyuan.config.appearance.themeDark, themeDark: mode === 1 ? packageName : window.siyuan.config.appearance.themeDark,
themeLight: mode === 0 ? packageName : window.siyuan.config.appearance.themeLight, themeLight: mode === 0 ? packageName : window.siyuan.config.appearance.themeLight,
}), response => { }), (appearanceResponse) => {
if ((mode !== window.siyuan.config.appearance.mode || if ((mode !== window.siyuan.config.appearance.mode ||
(mode === 1 && window.siyuan.config.appearance.themeDark !== packageName) || (mode === 1 && window.siyuan.config.appearance.themeDark !== packageName) ||
(mode === 0 && window.siyuan.config.appearance.themeLight !== packageName)) && (mode === 0 && window.siyuan.config.appearance.themeLight !== packageName)) &&
window.siyuan.config.appearance.themeJS) { window.siyuan.config.appearance.themeJS) {
exportLayout(true); exportLayout(true);
} else { } else {
const oldTheme = window.siyuan.config.appearance.mode === 1 ? window.siyuan.config.appearance.themeDark : window.siyuan.config.appearance.themeLight; this._genMyHTML("themes");
bazaar.element.querySelectorAll(`.b3-card__actions[data-name="${oldTheme}"]`).forEach(item => { fetchPost("/api/bazaar/getBazaarTheme", {}, response => {
item.parentElement.classList.remove("b3-card--current"); response.data.appearance = appearanceResponse.data
const switchElement = item.querySelector('[data-type="switch"]'); bazaar._onBazaar(response, "themes", true);
switchElement.classList.remove("fn__none"); bazaar._data.themes = response.data.packages;
switchElement.previousElementSibling.classList.remove("fn__none");
});
appearance.onSetappearance(response.data);
bazaar.element.querySelectorAll(`.b3-card__actions[data-name="${packageName}"]`).forEach(item => {
item.parentElement.classList.add("b3-card--current");
const switchElement = item.querySelector('[data-type="switch"]');
switchElement.classList.add("fn__none");
switchElement.previousElementSibling.classList.add("fn__none");
}); });
} }
}); });
@ -525,7 +526,7 @@ export const bazaar = {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (target.classList.contains("b3-card")) { } else if (target.classList.contains("b3-card")) {
bazaar.renderReadme(target, target.getAttribute("data-bazaar") as TBazaarType); bazaar._renderReadme(target, (JSON.parse(target.getAttribute("data-obj")).bazaarType) as TBazaarType);
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;
@ -540,18 +541,18 @@ export const bazaar = {
if (!item.getAttribute("data-init")) { if (!item.getAttribute("data-init")) {
if (type === "template") { if (type === "template") {
fetchPost("/api/bazaar/getBazaarTemplate", {}, response => { fetchPost("/api/bazaar/getBazaarTemplate", {}, response => {
bazaar.onBazaar(response, "templates", false); bazaar._onBazaar(response, "templates", false);
bazaar.data.templates = response.data.packages; bazaar._data.templates = response.data.packages;
}); });
} else if (type === "icon") { } else if (type === "icon") {
fetchPost("/api/bazaar/getBazaarIcon", {}, response => { fetchPost("/api/bazaar/getBazaarIcon", {}, response => {
bazaar.onBazaar(response, "icons", false); bazaar._onBazaar(response, "icons", false);
bazaar.data.icons = response.data.packages; bazaar._data.icons = response.data.packages;
}); });
} else if (type === "widget") { } else if (type === "widget") {
fetchPost("/api/bazaar/getBazaarWidget", {}, response => { fetchPost("/api/bazaar/getBazaarWidget", {}, response => {
bazaar.onBazaar(response, "widgets", false); bazaar._onBazaar(response, "widgets", false);
bazaar.data.widgets = response.data.packages; bazaar._data.widgets = response.data.packages;
}); });
} else if (type === "downloaded") { } else if (type === "downloaded") {
this._genMyHTML("themes"); this._genMyHTML("themes");
@ -633,7 +634,7 @@ export const bazaar = {
}); });
}); });
}, },
onBazaar(response: IWebSocketData, bazaarType: TBazaarType, reload: boolean) { _onBazaar(response: IWebSocketData, bazaarType: TBazaarType, reload: boolean) {
let id = "#configBazaarTemplate"; let id = "#configBazaarTemplate";
if (bazaarType === "themes") { if (bazaarType === "themes") {
id = "#configBazaarTheme"; id = "#configBazaarTheme";
@ -651,9 +652,9 @@ export const bazaar = {
} }
let html = ""; let html = "";
response.data.packages.forEach((item: IBazaarItem) => { response.data.packages.forEach((item: IBazaarItem) => {
html += this.getHTML(item, bazaarType); html += this._genCardHTML(item, bazaarType);
}); });
bazaar.data[bazaarType] = response.data.packages; bazaar._data[bazaarType] = response.data.packages;
element.innerHTML = `<div class="b3-cards">${html}</div>`; element.innerHTML = `<div class="b3-cards">${html}</div>`;
const localSort = window.siyuan.storage[Constants.LOCAL_BAZAAR]; const localSort = window.siyuan.storage[Constants.LOCAL_BAZAAR];

9
app/src/dialog/processSystem.ts
View file

@ -248,7 +248,7 @@ export const progressLoading = (data: IWebSocketData) => {
} }
}; };
export const progressBackgroundTask = (tasks:{action:string}[]) => { export const progressBackgroundTask = (tasks: { action: string }[]) => {
const backgroundTaskElement = document.querySelector(".status__backgroundtask"); const backgroundTaskElement = document.querySelector(".status__backgroundtask");
if (!backgroundTaskElement) { if (!backgroundTaskElement) {
return; return;
@ -324,19 +324,22 @@ export const downloadProgress = (data: { id: string, percent: number }) => {
if (!bazzarElement) { if (!bazzarElement) {
return; return;
} }
const btnElement = bazzarElement.querySelector(`[data-url="${data.id}"]`) as HTMLElement; const btnElement = bazzarElement.querySelector('[data-type="install"]') as HTMLElement;
if (btnElement) { if (btnElement) {
if (data.percent >= 1) { if (data.percent >= 1) {
btnElement.parentElement.classList.add("fn__none"); btnElement.parentElement.classList.add("fn__none");
btnElement.parentElement.nextElementSibling.classList.add("fn__none");
} else { } else {
btnElement.classList.add("b3-button--progress"); btnElement.classList.add("b3-button--progress");
btnElement.parentElement.nextElementSibling.firstElementChild.classList.add("b3-button--progress");
btnElement.innerHTML = `<span style="width: ${data.percent * 100}%"></span>`; btnElement.innerHTML = `<span style="width: ${data.percent * 100}%"></span>`;
btnElement.parentElement.nextElementSibling.firstElementChild.innerHTML = `<span style="width: ${data.percent * 100}%"></span>`;
} }
} }
}; };
export const processSync = (data?: IWebSocketData) => { export const processSync = (data?: IWebSocketData) => {
const iconElement = document.querySelector(isMobile()?"#menuSyncNow" : "#barSync"); const iconElement = document.querySelector(isMobile() ? "#menuSyncNow" : "#barSync");
if (!iconElement) { if (!iconElement) {
return; return;
} }