diff --git a/packages/canyon-platform/public/dark-logo.svg b/packages/canyon-platform/public/dark-logo.svg
new file mode 100755
index 00000000..cd67bd7c
--- /dev/null
+++ b/packages/canyon-platform/public/dark-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/canyon-platform/public/light-logo.svg b/packages/canyon-platform/public/light-logo.svg
index cd67bd7c..092881cd 100755
--- a/packages/canyon-platform/public/light-logo.svg
+++ b/packages/canyon-platform/public/light-logo.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/packages/canyon-platform/src/auto-imports.d.ts b/packages/canyon-platform/src/auto-imports.d.ts
index e6de06d0..5fe03de9 100644
--- a/packages/canyon-platform/src/auto-imports.d.ts
+++ b/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']
diff --git a/packages/canyon-platform/src/components/GlobaScreenWidthLimitModal.tsx b/packages/canyon-platform/src/components/GlobaScreenWidthLimitModal.tsx
new file mode 100644
index 00000000..443b63c9
--- /dev/null
+++ b/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 ? (
+
+
+
+ ) : null}
+
+ );
+};
+
+export default GlobaScreenWidthLimitModal;
diff --git a/packages/canyon-platform/src/components/GlobalContext.tsx b/packages/canyon-platform/src/components/GlobalContext.tsx
new file mode 100644
index 00000000..af488f60
--- /dev/null
+++ b/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 (
+
+
+ {children}
+
+
+ );
+};
+
+export { GlobalContext, GlobalProvider };
diff --git a/packages/canyon-platform/src/index.css b/packages/canyon-platform/src/index.css
index 055ae659..be005df6 100644
--- a/packages/canyon-platform/src/index.css
+++ b/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;
}
diff --git a/packages/canyon-platform/src/pages/index.tsx b/packages/canyon-platform/src/pages/index.tsx
index bf92ae91..ebe028fa 100644
--- a/packages/canyon-platform/src/pages/index.tsx
+++ b/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 (
<>
+
@@ -112,7 +115,7 @@ function Index() {
title={'Canyon'}
logo={
-
+
