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

Feat(Theme): Support dark mode

Browse Source
This commit is contained in:
Fat Snake
2024-10-23 10:17:45 +08:00
parent b7c3fb8524
commit dbce6b9cf2
180 changed files with 3478 additions and 3199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,5 @@
import { ChangeEvent } from 'react'
import styles from '@/components/Playground/Output/Preview/render.module.less'
import { COLOR_FONT_MAIN } from '@/constants/common.constants'
import useStyles from '@/components/Playground/Output/Preview/render.style'
import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
import HideScrollbar from '@/components/common/HideScrollbar'
@@ -41,6 +40,7 @@ const getIframeUrl = (iframeRaw: string) => {
const iframeUrl = getIframeUrl(iframeRaw)
const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => {
const { styles, theme, cx } = useStyles()
const iframeRef = useRef<HTMLIFrameElement>(null)
const [isLoaded, setIsLoaded] = useState(false)
const [selectedDevice, setSelectedDevice] = useState('Pixel 7')
@@ -164,7 +164,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
iframeRef.current?.contentWindow?.postMessage(
{
type: 'SCALE',
data: { zoom: zoom }
data: { zoom }
} as IMessage,
'*'
)
@@ -180,12 +180,18 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
autoHideWaitingTime={1000}
>
<div className={styles.mobileModeContent} style={{ zoom }}>
<div className={`${styles.device}${isRotate ? ` ${styles.rotate}` : ''}`}>
<div className={cx(styles.device, isRotate ? styles.rotate : '')}>
<div
className={`${styles.deviceHeader}${isRotate ? ` ${styles.rotate}` : ''}`}
className={cx(
styles.deviceHeader,
isRotate ? styles.rotatedDeviceHeader : ''
)}
/>
<div
className={`${styles.deviceContent}${isRotate ? ` ${styles.rotate}` : ''}`}
className={cx(
styles.deviceContent,
isRotate ? styles.rotatedDeviceContent : ''
)}
style={{
width: isRotate
? (devices.find((value) => value.name === selectedDevice)
@@ -210,14 +216,17 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
/>
</div>
<div
className={`${styles.deviceFooter}${isRotate ? ` ${styles.rotate}` : ''}`}
className={cx(
styles.deviceFooter,
isRotate ? styles.rotatedDeviceFooter : ''
)}
/>
</div>
</div>
</HideScrollbar>
<div className={styles.switchDevice}>
<IconOxygenMobile fill={COLOR_FONT_MAIN} />
<IconOxygenMobile fill={theme.colorText} />
<select value={selectedDevice} onChange={handleOnChangeDevice}>
{devices.map((value) => (
<option value={value.name}>{value.name}</option>
@@ -225,14 +234,14 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
</select>
<div title={'旋转屏幕'} onClick={handleOnRotateDevice}>
{isRotate ? (
<IconOxygenRotateRight fill={COLOR_FONT_MAIN} />
<IconOxygenRotateRight fill={theme.colorText} />
) : (
<IconOxygenRotateLeft fill={COLOR_FONT_MAIN} />
<IconOxygenRotateLeft fill={theme.colorText} />
)}
</div>
</div>
<div className={styles.switchZoom}>
<IconOxygenZoom fill={COLOR_FONT_MAIN} />
<IconOxygenZoom fill={theme.colorText} />
<input
type={'range'}
min={0.5}

15
src/components/Playground/Output/Preview/index.module.less
View File

@@ -1,15 +0,0 @@
.root {
display: flex;
position: relative;
height: 0;
.errorMessage {
position: absolute;
bottom: 0;
width: 100%;
color: white;
background-color: #FF4D4FAA;
padding: 5px 10px;
font-size: 1.2em;
}
}

19
src/components/Playground/Output/Preview/index.style.ts Normal file
View File

@@ -0,0 +1,19 @@
import { createStyles } from 'antd-style'
export default createStyles(({ token }) => ({
root: {
display: 'flex',
position: 'relative',
height: 0
},
errorMessage: {
position: 'absolute',
bottom: 0,
width: '100%',
color: token.colorErrorText,
backgroundColor: token.colorErrorBg,
padding: '5px 10px',
fontSize: token.fontSize
}
}))

3
src/components/Playground/Output/Preview/index.tsx
View File

@@ -1,4 +1,4 @@
import styles from '@/components/Playground/Output/Preview/index.module.less'
import useStyles from '@/components/Playground/Output/Preview/index.style'
import { IFiles, IImportMap } from '@/components/Playground/shared'
import Compiler from '@/components/Playground/compiler'
import Render from '@/components/Playground/Output/Preview/Render'
@@ -22,6 +22,7 @@ const Preview = ({
postExpansionCode = '',
mobileMode = false
}: PreviewProps) => {
const { styles } = useStyles()
const [errorMsg, setErrorMsg] = useState('')
const [compiledCode, setCompiledCode] = useState('')

78
src/components/Playground/Output/Preview/render.module.less
View File

@@ -1,78 +0,0 @@
.renderRoot {
border: none;
height: 100%;
width: 100%;
flex: 1;
}
.mobileModeRoot {
background-color: rgba(204, 204, 204, 0.66);
.mobileModeContent {
padding: 80px;
}
.device {
display: flex;
flex-direction: column;
background-color: #EEEFF2;
width: fit-content;
margin: 0 auto;
border-radius: 40px;
&.rotate {
flex-direction: row;
}
.deviceHeader {
margin: 20px auto;
width: 60px;
height: 10px;
border-radius: 5px;
background-color: #C8C9CC;
&.rotate {
margin: auto 20px;
width: 10px;
height: 60px;
}
}
.deviceContent {
margin: 0 10px;
background-color: white;
&.rotate {
margin: 10px 0;
}
}
.deviceFooter {
margin: 20px auto;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #C8C9CC;
&.rotate {
margin: auto 20px;
}
}
}
}
.switchDevice, .switchZoom {
display: flex;
position: absolute;
top: 10px;
align-items: center;
gap: 4px;
}
.switchDevice {
left: 10px;
}
.switchZoom {
right: 10px;
}

84
src/components/Playground/Output/Preview/render.style.ts Normal file
View File

@@ -0,0 +1,84 @@
import { createStyles } from 'antd-style'
export default createStyles(({ token }) => ({
renderRoot: {
border: 'none',
height: '100%',
width: '100%',
flex: 1
},
mobileModeRoot: {
backgroundColor: token.colorBgLayout
},
mobileModeContent: {
padding: 80
},
device: {
display: 'flex',
flexDirection: 'column',
backgroundColor: token.colorBgElevated,
width: 'fit-content',
margin: '0 auto',
borderRadius: 40
},
rotate: {
flexDirection: 'row'
},
deviceHeader: {
margin: '20px auto',
width: 60,
height: 10,
borderRadius: 5,
backgroundColor: token.colorBgMask
},
rotatedDeviceHeader: {
margin: 'auto 20px',
width: 10,
height: 60
},
deviceContent: {
margin: '0 10px',
backgroundColor: token.colorBgLayout
},
rotatedDeviceContent: {
margin: '10px 0'
},
deviceFooter: {
margin: '20px auto',
width: 40,
height: 40,
borderRadius: '50%',
backgroundColor: token.colorBgMask
},
rotatedDeviceFooter: {
margin: 'auto 20px'
},
switchDevice: {
display: 'flex',
position: 'absolute',
top: 10,
left: 10,
alignItems: 'center',
gap: 4
},
switchZoom: {
display: 'flex',
position: 'absolute',
top: 10,
right: 10,
alignItems: 'center',
gap: 4
}
}))

13
src/components/Playground/Output/Transform/index.module.less
View File

@@ -1,13 +0,0 @@
.root {
position: relative;
.errorMessage {
position: absolute;
bottom: 0;
width: 100%;
color: white;
background-color: #FF4D4FAA;
padding: 5px 10px;
font-size: 1.2em;
}
}

17
src/components/Playground/Output/Transform/index.style.ts Normal file
View File

@@ -0,0 +1,17 @@
import { createStyles } from 'antd-style'
export default createStyles(({ token }) => ({
root: {
position: 'relative'
},
errorMessage: {
position: 'absolute',
bottom: 0,
width: '100%',
color: token.colorErrorText,
backgroundColor: token.colorErrorBg,
padding: '5px 10px',
fontSize: token.fontSize
}
}))

3
src/components/Playground/Output/Transform/index.tsx
View File

@@ -1,6 +1,6 @@
import MonacoEditor from '@monaco-editor/react'
import { Loader } from 'esbuild-wasm'
import styles from '@/components/Playground/Output/Transform/index.module.less'
import useStyles from '@/components/Playground/Output/Transform/index.style'
import { IFile, ITheme } from '@/components/Playground/shared'
import { cssToJsFromFile, jsonToJsFromFile } from '@/components/Playground/files'
import Compiler from '@/components/Playground/compiler'
@@ -12,6 +12,7 @@ interface OutputProps {
}
const Transform = ({ file, theme }: OutputProps) => {
const { styles } = useStyles()
const [compiledCode, setCompiledCode] = useState('')
const [errorMsg, setErrorMsg] = useState('')