Skip to content

Commit

Permalink
Merge pull request #820 from Hi-Windom/v0.35
Browse files Browse the repository at this point in the history 
V0.35
  • Loading branch information
@Soltus
Soltus authored Jun 10, 2024
2 parents fce80d1 + 6d8f3bb commit 7cd0c21
Show file tree
Hide file tree
Showing 33 changed files with 1,371 additions and 1,377 deletions.
2 changes: 1 addition & 1 deletion .vscode/extensions/Sillot/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "sillot",
"displayName": "汐洛 Sillot",
"description": "汐洛彖夲肜矩阵（Sillot T☳Converbenk Matrix）为智慧新彖务服务。此插件为汐洛官方插件，提供多功能一体化集成。",
"version": "0.35.2810",
"version": "0.35.2920",
"preview": true,
"repository": "https://github.com/Hi-Windom/Sillot",
"publisher": "Hi-Windom",
Expand Down
2 changes: 1 addition & 1 deletion app/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "sillot",
"version": "0.35.2810",
"version": "0.35.2920",
"syv": "3.1.0",
"sypv": "[3.0.16, 3.0.17]",
"description": "Build Your Eternal Digital Garden",
Expand Down
235 changes: 110 additions & 125 deletions app/src/mobile/settings/appearance_react.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,51 @@
import { Select, Option } from "@mui/joy";
import { Option } from "@mui/joy";
import { CssVarsProvider, useColorScheme } from "@mui/joy/styles";
import * as React from "react";
import * as Client from "react-dom/client";
import { openModel } from "../menu/model";
import { fetchGet, fetchPost } from "../../util/fetch";
import { initAssets, loadAssets, setMode } from "../../util/assets";
import { Constants } from "../../constants";
import type { Mode } from "fs";
import { fetchPost } from "../../util/fetch";
import { Select_KeyboardArrowDown } from "../../sillot/joyUI/base/selector";

interface SharedPropsContextValue {
isFirstRenderRef: React.MutableRefObject<boolean>;
mode2: number;
setMode2: React.Dispatch<React.SetStateAction<number>>;
themeLight: string;
setThemeLight: React.Dispatch<React.SetStateAction<string>>;
themeDark: string;
setThemeDark: React.Dispatch<React.SetStateAction<string>>;
icon: string;
setIcon: React.Dispatch<React.SetStateAction<string>>;
lang: "en_US" | "zh_CN" | "ja_JP";
setLang: React.Dispatch<React.SetStateAction<"en_US" | "zh_CN" | "ja_JP">>;
}
const SharedProps = React.createContext<SharedPropsContextValue | null>(null);

function AppearanceSettingsProvider() {
// https://mui.com/joy-ui/customization/dark-mode/ 只能在嵌套里使用，这里套壳
return (
<CssVarsProvider>
<AppearanceSettings />
</CssVarsProvider>
);
}

function AppearanceSettings() {
const [isFirstRender, setIsFirstRender] = React.useState(true);
const [mode2, setMode2] = React.useState(window.siyuan.config.appearance.mode);
const isFirstRenderRef = React.useRef(true); // 如果你只是想避免在初始化时执行副作用，可以使用useRef来存储一个标识，而不是使用状态变量。
const { mode, setMode } = useColorScheme();
const [mode2, setMode2] = React.useState(window.siyuan.config.appearance.modeOS ? 2 : window.siyuan.config.appearance.mode);
const [themeLight, setThemeLight] = React.useState(window.siyuan.config.appearance.themeLight);
const [themeDark, setThemeDark] = React.useState(window.siyuan.config.appearance.themeDark);
const [icon, setIcon] = React.useState(window.siyuan.config.appearance.icon);
const [lang, setLang] = React.useState(window.siyuan.config.appearance.lang);

// const handleModeChange = (e, v) => {
// if (isFirstRender) {
// return;
// }
// setMode(v === 0 ? "light" : "dark")
// setMode2(Number.parseInt(v) || window.siyuan.config.appearance.mode);
// };

// const handleThemeLightChange = (e, v) => {
// if (isFirstRender) {
// return;
// }
// setThemeLight(v || window.siyuan.config.appearance.themeLight);
// };

// const handleThemeDarkChange = (e, v) => {
// if (isFirstRender) {
// return;
// }
// setThemeDark(v || window.siyuan.config.appearance.themeDark);
// };

const handleIconChange = (e, v) => {
if (isFirstRender) {
return;
}
setIcon(v);
};

const handleLangChange = (e, v) => {
if (isFirstRender) {
return;
}
setLang(v);
fetchGet(
`/appearance/langs/${v}.json?v=${Constants.SIYUAN_VERSION}`,
(lauguages: IObject) => {
window.siyuan.languages = lauguages;
window.location.reload(); // 后续可以考虑加个对话框确认
}
);
};

// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
React.useEffect(() => {
// 每当 state 发生变化时，执行此副作用
if (isFirstRender) {
// 这是第一次渲染，不需要执行副作用
setIsFirstRender(false);
return;
// 每当 state 发生变化时（包括初始化），执行此副作用。
if (isFirstRenderRef.current) {
console.log("AppearanceSettings isFirstRender");
isFirstRenderRef.current = false;
return; // 第一次渲染不应执行副作用
}
const _data = Object.assign({}, window.siyuan.config.appearance, {
icon: icon,
Expand All @@ -85,88 +56,53 @@ function AppearanceSettings() {
lang: lang,
});
console.log(_data);
fetchPost("/api/setting/setAppearance", _data, () => {
window.siyuan.config.appearance = _data;
loadAssets(_data);
initAssets();
fetchPost("/api/setting/setAppearance", _data, async response => {
window.siyuan.config.appearance = response.data; // 应当与 _data 一致
setMode(window.siyuan.config.appearance.mode === 0 ? "light" : "dark");
window.location.reload();
});
}, [mode2, themeLight, themeDark, icon, lang, isFirstRender]);
}, [mode2, themeLight, themeDark, icon, lang]);

return (
<SharedProps.Provider
value={{
isFirstRenderRef: isFirstRenderRef,
mode2: mode2,
setMode2: setMode2,
themeDark: themeDark,
themeLight: themeLight,
setThemeDark: setThemeDark,
setThemeLight: setThemeLight,
icon: icon,
setIcon: setIcon,
lang: lang,
setLang: setLang,
}}
>
<CssVarsProvider defaultMode="system">
<SYAppearanceModeSelector />
<SYThemmSelector />

<div className="b3-label">
{window.siyuan.languages.icon}
<div className="fn__hr" />
<Select value={icon} onChange={handleIconChange}>
{window.siyuan.config.appearance.icons.map(icon => (
<Option key={icon} value={icon}>
{icon}
</Option>
))}
</Select>
<div className="b3-label__text">{window.siyuan.languages.theme2}</div>
</div>

<div className="b3-label">
{window.siyuan.languages.language}
<div className="fn__hr" />
<Select value={lang} onChange={handleLangChange}>
{window.siyuan.config.langs.map(lang => (
<Option key={lang.name} value={lang.name}>
{`${lang.label} (${lang.name})`}
</Option>
))}
</Select>
<div className="b3-label__text">{window.siyuan.languages.language1}</div>
</div>
</CssVarsProvider>
<SYAppearanceModeSelector />
<SYThemmSelector />
<SYIconSelector />
<SYLangSelector />
</SharedProps.Provider>
);
}

function SYAppearanceModeSelector() {
const _props = React.useContext(SharedProps);
const { mode, setMode } = useColorScheme();
// 跟随系统优先
return (
<div className="b3-label">
{window.siyuan.languages.appearance4}
<div className="fn__hr" />
<Select
value={window.siyuan.config.appearance.modeOS ? "2" : String(_props.mode2)}
<Select_KeyboardArrowDown
value={String(_props.mode2)}
onChange={(e, v) => {
// if (isFirstRender) {
// return;
// }
setMode(
_props.mode2 === 2
? window.siyuan.config.appearance.mode === 0
? "light"
: "dark"
: v === "0"
? "light"
: "dark"
);
_props.setMode2(Number.parseInt(v));
}}
>
<Option value="0">{window.siyuan.languages.themeLight}</Option>
<Option value="1">{window.siyuan.languages.themeDark}</Option>
<Option value="2">{window.siyuan.languages.themeOS}</Option>
</Select>
</Select_KeyboardArrowDown>
<div className="b3-label__text">{window.siyuan.languages.appearance5}</div>
</div>
);
Expand All @@ -178,52 +114,101 @@ function SYThemmSelector() {
<div className="b3-label">
{window.siyuan.languages.theme}
<div className="fn__hr" />
<Select value={_props.themeLight} onChange={(e, v) => {
// if (isFirstRender) {
// return;
// }
_props.setThemeLight(v);
}}>
<Select_KeyboardArrowDown
value={_props.themeLight}
onChange={(e, v) => {
_props.setThemeLight(v);
}}
>
{window.siyuan.config.appearance.lightThemes.map(theme => (
<Option key={theme} value={theme}>
{theme}
</Option>
))}
</Select>
</Select_KeyboardArrowDown>
<div className="b3-label__text">{window.siyuan.languages.theme11}</div>
<div className="fn__hr" />
<Select value={_props.themeDark} onChange={(e, v) => {
// if (isFirstRender) {
// return;
// }
_props.setThemeDark(v);
}}>
<Select_KeyboardArrowDown
value={_props.themeDark}
onChange={(e, v) => {
_props.setThemeDark(v);
}}
>
{window.siyuan.config.appearance.darkThemes.map(theme => (
<Option key={theme} value={theme}>
{theme}
</Option>
))}
</Select>
</Select_KeyboardArrowDown>
<div className="b3-label__text">{window.siyuan.languages.theme12}</div>
</div>
);
}

function SYIconSelector() {
const _props = React.useContext(SharedProps);
return (
<div className="b3-label">
{window.siyuan.languages.icon}
<div className="fn__hr" />
<Select_KeyboardArrowDown
value={_props.icon}
onChange={(e, v) => {
_props.setIcon(v);
}}
>
{window.siyuan.config.appearance.icons.map(icon => (
<Option key={icon} value={icon}>
{icon}
</Option>
))}
</Select_KeyboardArrowDown>
<div className="b3-label__text">{window.siyuan.languages.theme2}</div>
</div>
);
}

function SYLangSelector() {
const _props = React.useContext(SharedProps);
return (
<div className="b3-label">
{window.siyuan.languages.language}
<div className="fn__hr" />
<Select_KeyboardArrowDown
value={_props.lang}
onChange={(e, v) => {
_props.setLang(v);
}}
>
{window.siyuan.config.langs.map(lang => (
<Option key={lang.name} value={lang.name}>
{`${lang.label} (${lang.name})`}
</Option>
))}
</Select_KeyboardArrowDown>
<div className="b3-label__text">{window.siyuan.languages.language1}</div>
</div>
);
}

/**
* TODO: 需要解决同步配置和实时更新问题。。。不能用 window.location.reload();
* 解决 https://github.com/Hi-Windom/Sillot/issues/814
*/
export const initAppearanceReact = () => {
window.sout.tracker("invoked");
const appearanceHTML = '<div id="appearanceSettingsContainer"></div>'; // AppearanceSettings 组件将渲染到这里
const appearanceHTML = '<div id="appearanceSettingsContainer"></div>'; // AppearanceSettingsProvider 组件将渲染到这里
openModel({
title: window.siyuan.languages.appearance,
icon: "iconTheme",
html: appearanceHTML,
bindEvent: modelMainElement => {
// 在模态框中渲染 AppearanceSettings 组件
const e = modelMainElement.querySelector("#appearanceSettingsContainer");
const root = Client.createRoot(e);
root.render(<AppearanceSettings />);
root.render(<AppearanceSettingsProvider />);
if (!window.Sillot.android.roots) {
window.Sillot.android.AppearanceReactRoots = []; // 初始化roots数组
}
window.Sillot.android.AppearanceReactRoots.push(root); // 在 window.goBakc() 、closePanel 和 closeModel 中 unmount
},
});
};
2 changes: 2 additions & 0 deletions app/src/mobile/util/MobileBackFoward.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {showMessage} from "../../dialog/message";
import {getCurrentEditor} from "../editor";
import {avRender} from "../../protyle/render/av/render";
import {setTitle} from "../../dialog/processSystem";
import { unmountReactRootsArray } from "../../sillot/util/react";

const forwardStack: IBackStack[] = [];

Expand Down Expand Up @@ -143,6 +144,7 @@ export const goForward = () => {

export const goBack = () => {
window.sout.tracker("invoked");
unmountReactRootsArray(window.Sillot.android?.AppearanceReactRoots);
const editor = getCurrentEditor();
if (window.siyuan.menus.menu.element.classList.contains("b3-menu--fullscreen") &&
!window.siyuan.menus.menu.element.classList.contains("fn__none")) {
Expand Down
Loading

0 comments on commit 7cd0c21

Please sign in to comment.