feat: update

packages/canyon-platform/src/auto-imports.d.ts

@@ -24,6 +24,7 @@ declare global {
   const Popover: typeof import('antd')['Popover']
   const Progress: typeof import('antd')['Progress']
   const Radio: typeof import('antd')['Radio']
+  const Result: typeof import('antd')['Result']
   const Route: typeof import('react-router-dom')['Route']
   const Routes: typeof import('react-router-dom')['Routes']
   const Select: typeof import('antd')['Select']

packages/canyon-platform/src/components/GlobaScreenWidthLimitModal.tsx

@@ -0,0 +1,51 @@
+const useWindowSize = () => {
+	const [windowSize, setWindowSize] = useState({
+		width: window.innerWidth,
+		height: window.innerHeight,
+	});
+
+	useEffect(() => {
+		const handleResize = () => {
+			setWindowSize({
+				width: window.innerWidth,
+				height: window.innerHeight,
+			});
+		};
+
+		window.addEventListener("resize", handleResize);
+
+		return () => {
+			window.removeEventListener("resize", handleResize);
+		};
+	}, []);
+
+	return windowSize;
+};
+const GlobaScreenWidthLimitModal = () => {
+	const { width } = useWindowSize();
+
+	useEffect(() => {
+		if (width < 1424) {
+			document.body.style.overflow = "hidden";
+		}
+		// 在组件卸载时恢复滚动
+		return () => {
+			document.body.style.overflow = "auto";
+		};
+	}, [width]);
+
+	return (
+		<>
+			{width < 1424 ? (
+				<div className={"fullscreen-modal"}>
+					<Result
+						className={"bg-white dark:bg-black rounded-lg"}
+						title="你的窗口太小了，请调大一点"
+					/>
+				</div>
+			) : null}
+		</>
+	);
+};
+
+export default GlobaScreenWidthLimitModal;

packages/canyon-platform/src/components/GlobalContext.tsx

@@ -0,0 +1,107 @@
+// src/context/GlobalContext.js
+
+import { ConfigProvider } from "antd";
+import enUS from "antd/es/locale/en_US";
+import zhCN from "antd/es/locale/zh_CN";
+import { createContext, useReducer, useEffect } from "react";
+
+const getSystemTheme = () =>
+	window.matchMedia?.("(prefers-color-scheme: dark)").matches
+		? "dark"
+		: "light";
+const getSystemLocale = () =>
+	navigator.language.startsWith("zh") ? zhCN : enUS;
+
+const initialState = {
+	theme: getSystemTheme(),
+	locale: getSystemLocale(),
+};
+
+const GlobalContext = createContext();
+
+const globalReducer = (state, action) => {
+	switch (action.type) {
+		case "TOGGLE_THEME":
+			return {
+				...state,
+				theme: state.theme === "light" ? "dark" : "light",
+			};
+		case "SET_THEME":
+			return {
+				...state,
+				theme: action.payload,
+			};
+		case "SET_LOCALE":
+			return {
+				...state,
+				locale: action.payload,
+			};
+		default:
+			return state;
+	}
+};
+const { darkAlgorithm } = theme;
+const GlobalProvider = ({ children }) => {
+	const [state, dispatch] = useReducer(globalReducer, initialState);
+
+	useEffect(() => {
+		// console.log(initialState)
+
+		// if (initialState.locale ==='l'){
+
+		// }
+
+		const darkModeMediaQuery = window.matchMedia(
+			"(prefers-color-scheme: dark)",
+		);
+
+		const handleSystemThemeChange = (e) => {
+			console.log("?????");
+
+			const newTheme = e.matches ? "dark" : "light";
+			if (newTheme === "dark") {
+				document.documentElement.classList.add("dark");
+				// document.body.style.backgroundColor = "black";
+			} else {
+				document.documentElement.classList.remove("dark");
+				// document.body.style.backgroundColor = "white";
+			}
+
+			dispatch({ type: "SET_THEME", payload: newTheme });
+		};
+
+		handleSystemThemeChange({ matches: initialState.theme === "dark" });
+
+		darkModeMediaQuery.addEventListener("change", handleSystemThemeChange);
+
+		const handleSystemLocaleChange = () => {
+			const newLocale = navigator.language.startsWith("zh") ? zhCN : enUS;
+			console.log(newLocale);
+			dispatch({ type: "SET_LOCALE", payload: newLocale });
+		};
+		window.addEventListener("languagechange", handleSystemLocaleChange);
+
+		return () => {
+			darkModeMediaQuery.removeEventListener("change", handleSystemThemeChange);
+			window.removeEventListener("languagechange", handleSystemLocaleChange);
+		};
+	}, []);
+
+	return (
+		<GlobalContext.Provider value={{ state, dispatch }}>
+			<ConfigProvider
+				locale={state.locale}
+				theme={{
+					token: {
+						colorPrimary: "#0071c2",
+					},
+					algorithm: state.theme === "dark" ? [darkAlgorithm] : [],
+				}}
+			>
+				{children}
+			</ConfigProvider>
+		</GlobalContext.Provider>
+	);
+};
+
+export { GlobalContext, GlobalProvider };

packages/canyon-platform/src/index.css

@@ -10,6 +10,21 @@
 }
 
 
+.fullscreen-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+
+
 .ant-menu-light.ant-menu-root.ant-menu-vertical{
   border-inline-end:none !important;
 }

packages/canyon-platform/src/pages/index.tsx

@@ -17,7 +17,9 @@ import UilUsersAlt from '../assets/users-icon.tsx';
 import { MeDocument } from '../helpers/backend/gen/graphql.ts';
 import { genBreadcrumbItems } from '../layouts/genBreadcrumbItems.tsx';
 import { genTitle } from '../layouts/genTitle.ts';
-
+import GlobaScreenWidthLimitModal from "../components/GlobaScreenWidthLimitModal.tsx";
+const theme = localStorage.getItem('theme') || 'light';
+// console.log(theme, 'theme');
 function Index() {
   const { t } = useTranslation();
   useEffect(() => {
@@ -83,6 +85,7 @@ function Index() {
   window.canyonModalGlobalSearchRef = useRef(null);
   return (
     <>
+      <GlobaScreenWidthLimitModal />
       <CanyonLayoutBase
         breadcrumb={
           <div>
@@ -112,7 +115,7 @@ function Index() {
         title={'Canyon'}
         logo={
           <div>
-            <img src='/logo.svg' alt='' className={'w-[28px]'} />
+            <img src={`/${theme}-logo.svg?a=1`} alt='' className={'w-[28px]'} />
           </div>
         }
         mainTitleRightNode={

packages/canyon-ui-old/src/components/layout/ScrollBasedLayout.tsx

@@ -24,7 +24,7 @@ const ScrollBasedLayout: FC<{
 
     setTimeout(() => {
       document.documentElement.scrollTop += 0.5;
-    }, 800);
+    }, 1000);
 
     // 在组件卸载时移除监听器，以防止内存泄漏
     return () => {