FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Feat(Tools): Support theme

Browse Source
This commit is contained in:
Fat Snake
2024-09-20 11:53:57 +08:00
parent 60d1309610
commit 451225c1cf
11 changed files with 347 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Playground/Output/Preview/Render.tsx
View File

@@ -2,6 +2,7 @@ import Icon from '@ant-design/icons'
import { Background, Controls, MiniMap, Node, Panel, ReactFlow } from '@xyflow/react'
import '@xyflow/react/dist/style.css'
import { AppContext } from '@/App'
import { generateThemeCssVariable } from '@/util/common'
import useStyles from '@/components/Playground/Output/Preview/render.style'
import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
import devices, { DeviceName } from '@/components/Playground/Output/Preview/devices'
@@ -14,11 +15,12 @@ interface RenderProps {
}
interface IMessage {
type: 'LOADED' | 'ERROR' | 'UPDATE' | 'DONE'
type: 'LOADED' | 'ERROR' | 'UPDATE' | 'DONE' | 'THEME'
msg: string
data: {
compiledCode?: string
zoom?: number
themeSrc?: string
}
}
@@ -57,6 +59,16 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
setIsRotate(!isRotate)
}
const loadTheme = () => {
iframeRef.current?.contentWindow?.postMessage(
{
type: 'THEME',
data: { themeSrc: generateThemeCssVariable(theme).styles }
} as IMessage,
'*'
)
}
useEffect(() => {
if (!isLoaded) {
return
@@ -68,8 +80,16 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
} as IMessage,
'*'
)
loadTheme()
}, [isLoaded, compiledCode])
useEffect(() => {
if (!isLoaded) {
return
}
loadTheme()
}, [isLoaded, isDarkMode])
return mobileMode ? (
<>
<ReactFlow

7
src/components/Playground/Output/Preview/iframe.html
View File

@@ -4,13 +4,14 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Preview</title>
<style id="theme-variable"></style>
</head>
<body>
<script>
window.addEventListener("message", ({ data }) => {
if (data?.type === "UPDATE") {
// Record old styles that need to be removed
const appStyleElement = document.querySelectorAll("style:not(style[id$=\"_oxygen_base_style.css\"])") || [];
const appStyleElement = document.querySelectorAll("style:not(:is(style[id$=\"_oxygen_base_style.css\"], style[id=\"theme-variable\"]))") || [];
// Remove old app
const appSrcElement = document.querySelector("#appSrc");
@@ -35,6 +36,10 @@
document.body.appendChild(script);
URL.revokeObjectURL(oldSrc);
}
if (data?.type === "THEME") {
document.querySelector("#theme-variable").textContent = data.data.themeSrc;
}
});
</script>
<script type="module" id="appSrc"></script>

2
src/components/Playground/Output/Preview/simulation.style.ts
View File

@@ -2,7 +2,7 @@ import { createStyles } from 'antd-style'
export default createStyles(({ token }) => ({
renderRoot: {
border: 'none',
border: `1px solid ${token.colorBorder}`,
height: '100%',
width: '100%',
flex: 1