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

89
src/components/Playground/CodeEditor/Editor/index.module.less
View File

@@ -1,89 +0,0 @@
.keyframes(@animationName, @content) {
animation-name: @animationName;
@-webkit-keyframes @animationName {
@content();
}
@-moz-keyframes @animationName {
@content();
}
@-o-keyframes @animationName {
@content();
}
@keyframes @animationName {
@content();
}
}
.root {
position: relative;
height: 0;
:global .monaco-editor-light {
height: 100%;
overflow: hidden;
background-color: var(--border);
.jsx-tag-angle-bracket {
color: #800000;
}
.jsx-text {
color: #000;
}
.jsx-tag-name {
color: #800000;
}
.jsx-tag-attribute-key {
color: #f00;
}
}
:global .monaco-editor-vs-dark {
height: 100%;
overflow: hidden;
background-color: var(--border);
.jsx-tag-angle-bracket {
color: #808080;
}
.jsx-text {
color: #d4d4d4;
}
.jsx-tag-name {
color: #569cd6;
}
.jsx-tag-attribute-key {
color: #9cdcfe;
}
}
.playgroundCodeEditorLoading {
position: absolute;
top: 0;
right: 0;
margin: 4px;
width: 10px;
height: 10px;
border-radius: 50%;
border-top: 2px #666 solid;
border-right: 2px #ddd solid;
border-bottom: 2px #ddd solid;
border-left: 2px #ddd solid;
animation: .6s linear infinite;
.keyframes(fUHD7o, {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
});
}
}

53
src/components/Playground/CodeEditor/Editor/index.style.ts Normal file
View File

@@ -0,0 +1,53 @@
import { createStyles, keyframes } from 'antd-style'
const rotate = keyframes`
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
`
export default createStyles(() => ({
root: {
position: 'relative',
height: 0,
'.monaco-editor-light': {
height: '100%',
overflow: 'hidden',
backgroundColor: 'var(--border)',
'.jsx-tag-angle-bracket': { color: '#800000' },
'.jsx-text': { color: '#000' },
'.jsx-tag-name': { color: '#800000' },
'.jsx-tag-attribute-key': { color: '#f00' }
},
'.monaco-editor-dark': {
height: '100%',
overflow: 'hidden',
backgroundColor: 'var(--border)',
'.jsx-tag-angle-bracket': { color: '#808080' },
'.jsx-text': { color: '#d4d4d4' },
'.jsx-tag-name': { color: '#569cd6' },
'.jsx-tag-attribute-key': { color: '#9cdcfe' }
}
},
loading: {
position: 'absolute',
top: 0,
right: 0,
margin: 4,
width: 10,
height: 10,
borderRadius: '50%',
borderTop: '2px #666 solid',
borderRight: '2px #ddd solid',
borderBottom: '2px #ddd solid',
borderLeft: '2px #ddd solid',
animation: `${rotate} .6s linear infinite`
}
}))

15
src/components/Playground/CodeEditor/Editor/index.tsx
View File

@@ -1,8 +1,8 @@
import { editor, Selection } from 'monaco-editor'
import MonacoEditor, { Monaco } from '@monaco-editor/react'
import styles from '@/components/Playground/CodeEditor/Editor/index.module.less'
import useStyles from '@/components/Playground/CodeEditor/Editor/index.style'
import '@/components/Playground/CodeEditor/Editor/loader'
import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
import { IEditorOptions, IFiles, ITsconfig } from '@/components/Playground/shared'
import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files'
import { useEditor, useTypesProgress } from '@/components/Playground/CodeEditor/Editor/hooks'
import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
@@ -13,28 +13,29 @@ export interface ExtraLib {
}
interface EditorProps {
isDarkMode?: boolean
tsconfig?: ITsconfig
files?: IFiles
selectedFileName?: string
readonly?: boolean
onChange?: (code: string | undefined) => void
options?: IEditorOptions
theme?: ITheme
onJumpFile?: (fileName: string) => void
extraLibs?: ExtraLib[]
}
const Editor = ({
isDarkMode,
tsconfig,
files = {},
selectedFileName = '',
readonly,
theme,
onChange,
options,
onJumpFile,
extraLibs = []
}: EditorProps) => {
const { styles } = useStyles()
const editorRef = useRef<editor.IStandaloneCodeEditor>()
const monacoRef = useRef<Monaco>()
const { doOpenEditor, loadJsxSyntaxHighlight, autoLoadExtraLib } = useEditor()
@@ -114,9 +115,9 @@ const Editor = ({
<>
<div className={styles.root}>
<MonacoEditor
theme={theme}
theme={isDarkMode ? 'vs-dark' : 'light'}
path={file.name}
className={`monaco-editor-${theme ?? 'light'}`}
className={`monaco-editor-${isDarkMode ? 'dark' : 'light'}`}
language={file.language}
value={file.value}
onChange={onChange}
@@ -129,7 +130,7 @@ const Editor = ({
readOnly: readonly
}}
/>
{total > 0 && !finished && <div className={styles.playgroundCodeEditorLoading} />}
{total > 0 && !finished && <div className={styles.loading} />}
</div>
</>
)

5
src/components/Playground/CodeEditor/FileSelector/Item.tsx
View File

@@ -1,5 +1,5 @@
import { Dispatch, SetStateAction, KeyboardEvent, ChangeEvent, MouseEvent } from 'react'
import styles from '@/components/Playground/CodeEditor/FileSelector/item.module.less'
import useStyles from '@/components/Playground/CodeEditor/FileSelector/item.style'
interface ItemProps {
className?: string
@@ -30,6 +30,7 @@ const Item = ({
onValidate,
...prop
}: ItemProps) => {
const { styles, cx } = useStyles()
const inputRef = useRef<HTMLInputElement>(null)
const [fileName, setFileName] = useState(value)
const [isCreating, setIsCreating] = useState(prop.creating)
@@ -110,7 +111,7 @@ const Item = ({
return (
<div
className={`${styles.root}${active ? ` ${styles.active}` : ''}${className ? ` ${className}` : ''}`}
className={cx(styles.root, active ? styles.active : '', className)}
onClick={handleOnClick}
>
{isCreating ? (

37
src/components/Playground/CodeEditor/FileSelector/index.module.less
View File

@@ -1,37 +0,0 @@
.root{
display: flex;
flex: 0 0 auto;
height: 40px;
.multiple {
flex: 1;
width: 0;
.tabContent {
height: 40px;
align-items: flex-end;
gap: 2px;
margin-left: 10px;
.tabItemAdd {
padding: 0 12px;
}
.tabsMarginRight {
height: 100%;
> * {
height: 100%;
width: 10px;
}
}
}
}
.sticky {
display: flex;
flex: 0 0 auto;
align-items: flex-end;
margin-right: 10px;
}
}

41
src/components/Playground/CodeEditor/FileSelector/index.style.ts Normal file
View File

@@ -0,0 +1,41 @@
import { createStyles } from 'antd-style'
export default createStyles(() => ({
root: {
display: 'flex',
flex: '0 0 auto',
height: 40
},
multiple: {
flex: 1,
width: 0
},
tabContent: {
height: 40,
alignItems: 'flex-end',
gap: 2,
marginLeft: 10
},
tabItemAdd: {
padding: '0 12px'
},
tabsMarginRight: {
height: '100%',
'> *': {
height: '100%',
width: 10
}
},
sticky: {
display: 'flex',
flex: '0 0 auto',
alignItems: 'flex-end',
marginRight: 10
}
}))

3
src/components/Playground/CodeEditor/FileSelector/index.tsx
View File

@@ -1,4 +1,4 @@
import styles from '@/components/Playground/CodeEditor/FileSelector/index.module.less'
import useStyles from '@/components/Playground/CodeEditor/FileSelector/index.style'
import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
import { IFiles } from '@/components/Playground/shared'
@@ -32,6 +32,7 @@ const FileSelector = ({
onUpdateFileName,
selectedFileName = ''
}: FileSelectorProps) => {
const { styles } = useStyles()
const hideScrollbarRef = useRef<HideScrollbarElement>(null)
const [tabs, setTabs] = useState<string[]>([])
const [isCreating, setIsCreating] = useState(false)

47
src/components/Playground/CodeEditor/FileSelector/item.module.less
View File

@@ -1,47 +0,0 @@
.root {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
height: 30px;
padding: 0 20px;
border: 1px solid #f0f0f0;
background-color: rgba(0, 0, 0, 0.04);
border-radius: 6px 6px 0 0;
cursor: pointer;
.tabItemInput {
position: relative;
min-width: 40px;
transform: translateY(1px);
.tabItemInputMask {
display: inline-block;
color: transparent;
}
input {
position: absolute;
background-color: transparent;
width: 100%;
font-size: 1em;
}
}
.tabItemClose {
transform: translateX(10px);
:hover {
fill: #888;
}
svg {
height: 8px;
fill: #666;
}
}
&.active {
background-color: white;
border-bottom: none;
}
}

54
src/components/Playground/CodeEditor/FileSelector/item.style.ts Normal file
View File

@@ -0,0 +1,54 @@
import { createStyles } from 'antd-style'
export default createStyles(({ token }) => ({
root: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flex: '0 0 auto',
height: 30,
padding: '0 20px',
color: token.colorText,
border: `1px solid ${token.colorBorder}`,
backgroundColor: token.colorBgLayout,
borderRadius: '6px 6px 0 0',
cursor: 'pointer'
},
active: {
backgroundColor: token.colorBgElevated,
borderBottom: 'none'
},
tabItemInput: {
position: 'relative',
minWidth: 40,
transform: 'translateY(1px)',
input: {
position: 'absolute',
backgroundColor: 'transparent',
width: '100%',
color: token.colorText,
fontSize: token.fontSizeSM
}
},
tabItemInputMask: {
display: 'inline-block',
color: 'transparent'
},
tabItemClose: {
transform: 'translateX(10px)',
svg: {
height: token.sizeXS,
fill: token.colorTextSecondary
},
'>:hover': {
fill: token.colorTextDescription
}
}
}))

15
src/components/Playground/CodeEditor/index.module.less
View File

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

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

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

11
src/components/Playground/CodeEditor/index.tsx
View File

@@ -1,7 +1,7 @@
import _ from 'lodash'
import styles from '@/components/Playground/CodeEditor/index.module.less'
import useStyles from '@/components/Playground/CodeEditor/index.style'
import FlexBox from '@/components/common/FlexBox'
import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
import { IEditorOptions, IFiles, ITsconfig } from '@/components/Playground/shared'
import {
fileNameToLanguage,
getFileNameList,
@@ -12,7 +12,7 @@ import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
import Editor, { ExtraLib } from '@/components/Playground/CodeEditor/Editor'
interface CodeEditorProps {
theme?: ITheme
isDarkMode?: boolean
showFileSelector?: boolean
tsconfig?: ITsconfig
files: IFiles
@@ -31,7 +31,7 @@ interface CodeEditorProps {
}
const CodeEditor = ({
theme,
isDarkMode,
showFileSelector = true,
tsconfig,
files,
@@ -48,6 +48,7 @@ const CodeEditor = ({
extraLibs,
...props
}: CodeEditorProps) => {
const { styles } = useStyles()
const filteredFilesName = getFileNameList(files).filter(
(item) => ![IMPORT_MAP_FILE_NAME, TS_CONFIG_FILE_NAME].includes(item) && !files[item].hidden
)
@@ -139,8 +140,8 @@ const CodeEditor = ({
/>
)}
<Editor
isDarkMode={isDarkMode}
tsconfig={tsconfig}
theme={theme}
selectedFileName={
onSelectedFileChange ? propsSelectedFileName : selectedFileName
}

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('')

8
src/components/Playground/index.module.less
View File

@@ -1,8 +0,0 @@
.root {
width: 100%;
height: 100%;
> * {
width: 0 !important;
}
}

12
src/components/Playground/index.style.ts Normal file
View File

@@ -0,0 +1,12 @@
import { createStyles } from 'antd-style'
export default createStyles(() => ({
root: {
width: '100%',
height: '100%',
'> *': {
width: '0 !important'
}
}
}))

6
src/components/Playground/index.tsx
View File

@@ -1,4 +1,4 @@
import styles from '@/components/Playground/index.module.less'
import useStyles from '@/components/Playground/index.style'
import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared'
import {
ENTRY_FILE_NAME,
@@ -11,6 +11,7 @@ import CodeEditor from '@/components/Playground/CodeEditor'
import Output from '@/components/Playground/Output'
interface PlaygroundProps {
isDarkMode?: boolean
initFiles: IFiles
initImportMapRaw: string
initTsconfigRaw: string
@@ -18,11 +19,13 @@ interface PlaygroundProps {
}
const Playground = ({
isDarkMode,
initFiles,
initImportMapRaw,
initTsconfigRaw,
entryPoint = ENTRY_FILE_NAME
}: PlaygroundProps) => {
const { styles } = useStyles()
const [files, setFiles] = useState(initFiles)
const [selectedFileName, setSelectedFileName] = useState(MAIN_FILE_NAME)
const [importMapRaw, setImportMapRaw] = useState<string>(initImportMapRaw)
@@ -79,6 +82,7 @@ const Playground = ({
return (
<FlexBox className={styles.root} direction={'horizontal'}>
<CodeEditor
isDarkMode={isDarkMode}
tsconfig={tsconfig}
files={{
...files,