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

Feat(Playground): Support load global js and css variables

Browse Source
This commit is contained in:
Fat Snake
2024-11-03 12:04:05 +08:00
parent e2fe240877
commit a33a405a07
14 changed files with 1704 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/renderer/src/components/Playground/Output/Preview/Render.tsx
View File

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

11
src/renderer/src/components/Playground/Output/Preview/iframe.html
View File

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

14
src/renderer/src/components/Playground/Output/Preview/index.tsx
View File

@@ -11,6 +11,8 @@ interface PreviewProps {
preExpansionCode?: string preExpansionCode?: string
postExpansionCode?: string postExpansionCode?: string
mobileMode?: boolean mobileMode?: boolean
globalJsVariables?: Record<string, unknown>
globalCssVariables?: string
} }
const Preview = ({ const Preview = ({
@@ -20,7 +22,9 @@ const Preview = ({
entryPoint, entryPoint,
preExpansionCode = '', preExpansionCode = '',
postExpansionCode = '', postExpansionCode = '',
mobileMode = false mobileMode = false,
globalJsVariables,
globalCssVariables
}: PreviewProps) => { }: PreviewProps) => {
const { styles } = useStyles() const { styles } = useStyles()
const [errorMsg, setErrorMsg] = useState('') const [errorMsg, setErrorMsg] = useState('')
@@ -44,7 +48,13 @@ const Preview = ({
return ( return (
<div className={styles.root}> <div className={styles.root}>
<Render iframeKey={iframeKey} compiledCode={compiledCode} mobileMode={mobileMode} /> <Render
iframeKey={iframeKey}
compiledCode={compiledCode}
mobileMode={mobileMode}
globalJsVariables={globalJsVariables}
globalCssVariables={globalCssVariables}
/>
{errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>} {errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
</div> </div>
) )

8
src/renderer/src/components/Playground/Output/index.tsx
View File

@@ -13,6 +13,8 @@ interface OutputProps {
preExpansionCode?: string preExpansionCode?: string
postExpansionCode?: string postExpansionCode?: string
mobileMode?: boolean mobileMode?: boolean
globalJsVariables?: Record<string, unknown>
globalCssVariables?: string
} }
const Output = ({ const Output = ({
@@ -23,7 +25,9 @@ const Output = ({
entryPoint, entryPoint,
preExpansionCode, preExpansionCode,
postExpansionCode, postExpansionCode,
mobileMode = false mobileMode = false,
globalJsVariables,
globalCssVariables
}: OutputProps) => { }: OutputProps) => {
const [selectedTab, setSelectedTab] = useState('Preview') const [selectedTab, setSelectedTab] = useState('Preview')
@@ -47,6 +51,8 @@ const Output = ({
preExpansionCode={preExpansionCode} preExpansionCode={preExpansionCode}
postExpansionCode={postExpansionCode} postExpansionCode={postExpansionCode}
mobileMode={mobileMode} mobileMode={mobileMode}
globalJsVariables={globalJsVariables}
globalCssVariables={globalCssVariables}
/> />
)} )}
{selectedTab === 'Transform' && ( {selectedTab === 'Transform' && (

4
src/renderer/src/pages/System/Tools/Base.tsx
View File

@@ -7,7 +7,7 @@ import {
DATABASE_SELECT_SUCCESS, DATABASE_SELECT_SUCCESS,
DATABASE_UPDATE_SUCCESS DATABASE_UPDATE_SUCCESS
} from '@/constants/common.constants' } from '@/constants/common.constants'
import { addExtraCssVariable, message, modal } from '@/util/common' import { addExtraCssVariables, message, modal } from '@/util/common'
import { utcToLocalTime } from '@/util/datetime' import { utcToLocalTime } from '@/util/datetime'
import { hasPermission } from '@/util/auth' import { hasPermission } from '@/util/auth'
import editorExtraLibs from '@/util/editorExtraLibs' import editorExtraLibs from '@/util/editorExtraLibs'
@@ -1113,7 +1113,7 @@ const Base = () => {
!hasPermission('system:tool:modify:base') !hasPermission('system:tool:modify:base')
} }
extraLibs={editorExtraLibs} extraLibs={editorExtraLibs}
onEditorDidMount={(_, monaco) => addExtraCssVariable(monaco)} onEditorDidMount={(_, monaco) => addExtraCssVariables(monaco)}
/> />
<div <div
className={styles.closeEditorBtn} className={styles.closeEditorBtn}

4
src/renderer/src/pages/System/Tools/Code.tsx
View File

@@ -2,7 +2,7 @@ import Draggable from 'react-draggable'
import Icon from '@ant-design/icons' import Icon from '@ant-design/icons'
import useStyles from '@/assets/css/pages/system/tools/code.style' import useStyles from '@/assets/css/pages/system/tools/code.style'
import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants' import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
import { message, modal, checkDesktop, addExtraCssVariable } from '@/util/common' import { message, modal, checkDesktop, addExtraCssVariables } from '@/util/common'
import { navigateToExecute, navigateToRepository } from '@/util/navigation' import { navigateToExecute, navigateToRepository } from '@/util/navigation'
import editorExtraLibs from '@/util/editorExtraLibs' import editorExtraLibs from '@/util/editorExtraLibs'
import { r_sys_tool_get_one } from '@/services/system' import { r_sys_tool_get_one } from '@/services/system'
@@ -93,7 +93,7 @@ const Code = () => {
selectedFileName={selectedFileName} selectedFileName={selectedFileName}
onSelectedFileChange={setSelectedFileName} onSelectedFileChange={setSelectedFileName}
extraLibs={editorExtraLibs} extraLibs={editorExtraLibs}
onEditorDidMount={(_, monaco) => addExtraCssVariable(monaco)} onEditorDidMount={(_, monaco) => addExtraCssVariables(monaco)}
/> />
</Card> </Card>

15
src/renderer/src/pages/System/Tools/Execute.tsx
View File

@@ -1,8 +1,14 @@
import useStyles from '@/assets/css/pages/system/tools/execute.style' import useStyles from '@/assets/css/pages/system/tools/execute.style'
import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants' import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
import { checkDesktop, message } from '@/util/common' import {
checkDesktop,
generateThemeCssVariables,
message,
removeUselessAttributes
} from '@/util/common'
import { navigateToTools } from '@/util/navigation' import { navigateToTools } from '@/util/navigation'
import { r_sys_tool_get_one } from '@/services/system' import { r_sys_tool_get_one } from '@/services/system'
import { AppContext } from '@/App'
import FitFullscreen from '@/components/common/FitFullscreen' import FitFullscreen from '@/components/common/FitFullscreen'
import Card from '@/components/common/Card' import Card from '@/components/common/Card'
import Playground from '@/components/Playground' import Playground from '@/components/Playground'
@@ -11,7 +17,8 @@ import { IImportMap } from '@/components/Playground/shared'
import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files' import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
const Execute = () => { const Execute = () => {
const { styles } = useStyles() const { styles, theme } = useStyles()
const { isDarkMode } = useContext(AppContext)
const navigate = useNavigate() const navigate = useNavigate()
const { id } = useParams() const { id } = useParams()
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
@@ -94,6 +101,10 @@ const Execute = () => {
iframeKey={`${id}`} iframeKey={`${id}`}
compiledCode={compiledCode} compiledCode={compiledCode}
mobileMode={isMobileMode} mobileMode={isMobileMode}
globalJsVariables={{
OxygenTheme: { ...removeUselessAttributes(theme), isDarkMode }
}}
globalCssVariables={generateThemeCssVariables(theme).styles}
/> />
</Card> </Card>
</FitFullscreen> </FitFullscreen>

4
src/renderer/src/pages/System/Tools/Template.tsx
View File

@@ -7,7 +7,7 @@ import {
DATABASE_SELECT_SUCCESS, DATABASE_SELECT_SUCCESS,
DATABASE_UPDATE_SUCCESS DATABASE_UPDATE_SUCCESS
} from '@/constants/common.constants' } from '@/constants/common.constants'
import { addExtraCssVariable, message, modal } from '@/util/common' import { addExtraCssVariables, message, modal } from '@/util/common'
import { utcToLocalTime } from '@/util/datetime' import { utcToLocalTime } from '@/util/datetime'
import { hasPermission } from '@/util/auth' import { hasPermission } from '@/util/auth'
import editorExtraLibs from '@/util/editorExtraLibs' import editorExtraLibs from '@/util/editorExtraLibs'
@@ -1056,7 +1056,7 @@ const Template = () => {
!hasPermission('system:tool:modify:template') !hasPermission('system:tool:modify:template')
} }
extraLibs={editorExtraLibs} extraLibs={editorExtraLibs}
onEditorDidMount={(_, monaco) => addExtraCssVariable(monaco)} onEditorDidMount={(_, monaco) => addExtraCssVariables(monaco)}
/> />
<div <div
className={styles.closeEditorBtn} className={styles.closeEditorBtn}

10
src/renderer/src/pages/Tools/Create.tsx
View File

@@ -5,7 +5,7 @@ import {
DATABASE_INSERT_SUCCESS, DATABASE_INSERT_SUCCESS,
DATABASE_SELECT_SUCCESS DATABASE_SELECT_SUCCESS
} from '@/constants/common.constants' } from '@/constants/common.constants'
import { message } from '@/util/common' import { generateThemeCssVariables, message, removeUselessAttributes } from '@/util/common'
import { navigateToEdit } from '@/util/navigation' import { navigateToEdit } from '@/util/navigation'
import { import {
r_tool_category_get, r_tool_category_get,
@@ -13,6 +13,7 @@ import {
r_tool_template_get, r_tool_template_get,
r_tool_template_get_one r_tool_template_get_one
} from '@/services/tool' } from '@/services/tool'
import { AppContext } from '@/App'
import compiler from '@/components/Playground/compiler' import compiler from '@/components/Playground/compiler'
import { IImportMap } from '@/components/Playground/shared' import { IImportMap } from '@/components/Playground/shared'
import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files' import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
@@ -23,7 +24,8 @@ import HideScrollbar from '@/components/common/HideScrollbar'
import Playground from '@/components/Playground' import Playground from '@/components/Playground'
const Create = () => { const Create = () => {
const { styles } = useStyles() const { styles, theme } = useStyles()
const { isDarkMode } = useContext(AppContext)
const navigate = useNavigate() const navigate = useNavigate()
const [form] = AntdForm.useForm<ToolCreateParam>() const [form] = AntdForm.useForm<ToolCreateParam>()
const formValues = AntdForm.useWatch([], form) const formValues = AntdForm.useWatch([], form)
@@ -380,6 +382,10 @@ const Create = () => {
iframeKey={previewTemplate} iframeKey={previewTemplate}
compiledCode={compiledCode} compiledCode={compiledCode}
mobileMode={formValues.platform === 'ANDROID'} mobileMode={formValues.platform === 'ANDROID'}
globalJsVariables={{
OxygenTheme: { ...removeUselessAttributes(theme), isDarkMode }
}}
globalCssVariables={generateThemeCssVariables(theme).styles}
/> />
) : ( ) : (
<span className={styles.noPreview}>暂无预览</span> <span className={styles.noPreview}>暂无预览</span>

15
src/renderer/src/pages/Tools/Edit.tsx
View File

@@ -8,7 +8,12 @@ import {
TOOL_HAS_BEEN_PUBLISHED, TOOL_HAS_BEEN_PUBLISHED,
TOOL_UNDER_REVIEW TOOL_UNDER_REVIEW
} from '@/constants/common.constants' } from '@/constants/common.constants'
import { addExtraCssVariable, message } from '@/util/common' import {
addExtraCssVariables,
generateThemeCssVariables,
message,
removeUselessAttributes
} from '@/util/common'
import { navigateToRepository } from '@/util/navigation' import { navigateToRepository } from '@/util/navigation'
import editorExtraLibs from '@/util/editorExtraLibs' import editorExtraLibs from '@/util/editorExtraLibs'
import { r_tool_category_get, r_tool_detail, r_tool_update } from '@/services/tool' import { r_tool_category_get, r_tool_detail, r_tool_update } from '@/services/tool'
@@ -28,7 +33,7 @@ import LoadingMask from '@/components/common/LoadingMask'
import Card from '@/components/common/Card' import Card from '@/components/common/Card'
const Edit = () => { const Edit = () => {
const { styles } = useStyles() const { styles, theme } = useStyles()
const { isDarkMode } = useContext(AppContext) const { isDarkMode } = useContext(AppContext)
const blocker = useBlocker( const blocker = useBlocker(
({ currentLocation, nextLocation }) => ({ currentLocation, nextLocation }) =>
@@ -457,7 +462,7 @@ const Edit = () => {
onChangeFileContent={handleOnChangeFileContent} onChangeFileContent={handleOnChangeFileContent}
onSelectedFileChange={setSelectedFileName} onSelectedFileChange={setSelectedFileName}
extraLibs={editorExtraLibs} extraLibs={editorExtraLibs}
onEditorDidMount={(_, monaco) => addExtraCssVariable(monaco)} onEditorDidMount={(_, monaco) => addExtraCssVariables(monaco)}
/> />
<Playground.Output <Playground.Output
isDarkMode={isDarkMode} isDarkMode={isDarkMode}
@@ -467,6 +472,10 @@ const Edit = () => {
entryPoint={entryPoint} entryPoint={entryPoint}
postExpansionCode={baseDist} postExpansionCode={baseDist}
mobileMode={toolData?.platform === 'ANDROID'} mobileMode={toolData?.platform === 'ANDROID'}
globalJsVariables={{
OxygenTheme: { ...removeUselessAttributes(theme), isDarkMode }
}}
globalCssVariables={generateThemeCssVariables(theme).styles}
/> />
</LoadingMask> </LoadingMask>
{isShowDraggableMask && <div className={styles.draggableMask} />} {isShowDraggableMask && <div className={styles.draggableMask} />}

4
src/renderer/src/pages/Tools/Source.tsx
View File

@@ -1,6 +1,6 @@
import useStyles from '@/assets/css/pages/tools/source.style' import useStyles from '@/assets/css/pages/tools/source.style'
import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants' import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
import { addExtraCssVariable, message } from '@/util/common' import { addExtraCssVariables, message } from '@/util/common'
import { getLoginStatus } from '@/util/auth' import { getLoginStatus } from '@/util/auth'
import { navigateToRepository, navigateToSource } from '@/util/navigation' import { navigateToRepository, navigateToSource } from '@/util/navigation'
import editorExtraLibs from '@/util/editorExtraLibs' import editorExtraLibs from '@/util/editorExtraLibs'
@@ -98,7 +98,7 @@ const Source = () => {
selectedFileName={selectedFileName} selectedFileName={selectedFileName}
onSelectedFileChange={setSelectedFileName} onSelectedFileChange={setSelectedFileName}
extraLibs={editorExtraLibs} extraLibs={editorExtraLibs}
onEditorDidMount={(_, monaco) => addExtraCssVariable(monaco)} onEditorDidMount={(_, monaco) => addExtraCssVariables(monaco)}
/> />
</Card> </Card>
</FitFullscreen> </FitFullscreen>

15
src/renderer/src/pages/Tools/View.tsx
View File

@@ -1,6 +1,11 @@
import useStyles from '@/assets/css/pages/tools/view.style' import useStyles from '@/assets/css/pages/tools/view.style'
import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants' import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
import { checkDesktop, message } from '@/util/common' import {
checkDesktop,
generateThemeCssVariables,
message,
removeUselessAttributes
} from '@/util/common'
import { getLoginStatus } from '@/util/auth' import { getLoginStatus } from '@/util/auth'
import { import {
navigateToInstall, navigateToInstall,
@@ -9,6 +14,7 @@ import {
navigateToView navigateToView
} from '@/util/navigation' } from '@/util/navigation'
import { l_tool_detail, r_tool_detail } from '@/services/tool' import { l_tool_detail, r_tool_detail } from '@/services/tool'
import { AppContext } from '@/App'
import compiler from '@/components/Playground/compiler' import compiler from '@/components/Playground/compiler'
import { IImportMap } from '@/components/Playground/shared' import { IImportMap } from '@/components/Playground/shared'
import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files' import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
@@ -17,7 +23,8 @@ import Playground from '@/components/Playground'
import Card from '@/components/common/Card' import Card from '@/components/common/Card'
const View = () => { const View = () => {
const { styles } = useStyles() const { styles, theme } = useStyles()
const { isDarkMode } = useContext(AppContext)
const navigate = useNavigate() const navigate = useNavigate()
const { username, toolId, ver } = useParams() const { username, toolId, ver } = useParams()
const [searchParams] = useSearchParams({ const [searchParams] = useSearchParams({
@@ -157,6 +164,10 @@ const View = () => {
iframeKey={`${username}:${toolId}:${ver}`} iframeKey={`${username}:${toolId}:${ver}`}
compiledCode={compiledCode} compiledCode={compiledCode}
mobileMode={isMobileMode} mobileMode={isMobileMode}
globalJsVariables={{
OxygenTheme: { ...removeUselessAttributes(theme), isDarkMode }
}}
globalCssVariables={generateThemeCssVariables(theme).styles}
/> />
</Card> </Card>
</FitFullscreen> </FitFullscreen>

30
src/renderer/src/util/common.tsx
View File

@@ -4,7 +4,7 @@ import { Monaco } from '@monaco-editor/react'
import { MessageInstance } from 'antd/es/message/interface' import { MessageInstance } from 'antd/es/message/interface'
import { HookAPI } from 'antd/es/modal/useModal' import { HookAPI } from 'antd/es/modal/useModal'
import { NotificationInstance } from 'antd/es/notification/interface' import { NotificationInstance } from 'antd/es/notification/interface'
import { Theme, css } from 'antd-style' import { css, AntdToken, Theme } from 'antd-style'
import { floor } from 'lodash' import { floor } from 'lodash'
import { import {
STORAGE_COLLAPSE_SIDEBAR_KEY, STORAGE_COLLAPSE_SIDEBAR_KEY,
@@ -300,8 +300,6 @@ const cssVariables: string[] = [
'zIndexBase', 'zIndexBase',
'zIndexPopupBase', 'zIndexPopupBase',
'opacityImage', 'opacityImage',
'wireframe',
'motion',
'colorLinkHover', 'colorLinkHover',
'colorText', 'colorText',
'colorTextSecondary', 'colorTextSecondary',
@@ -485,7 +483,7 @@ const cssVariables: string[] = [
'screenXXLMin' 'screenXXLMin'
] ]
export const generateThemeCssVariable = (theme: Omit<Theme, 'prefixCls'>) => { export const generateThemeCssVariables = (theme: AntdToken) => {
const cssContent = cssVariables const cssContent = cssVariables
.map((variable) => `--${variable}: ${theme[variable]};`) .map((variable) => `--${variable}: ${theme[variable]};`)
.join('\n') .join('\n')
@@ -497,7 +495,7 @@ export const generateThemeCssVariable = (theme: Omit<Theme, 'prefixCls'>) => {
` `
} }
export const addExtraCssVariable = (monaco: Monaco) => { export const addExtraCssVariables = (monaco: Monaco) => {
monaco.languages.registerCompletionItemProvider('css', { monaco.languages.registerCompletionItemProvider('css', {
provideCompletionItems: ( provideCompletionItems: (
model: editor.ITextModel, model: editor.ITextModel,
@@ -535,3 +533,25 @@ export const addExtraCssVariable = (monaco: Monaco) => {
} }
}) })
} }
export const removeUselessAttributes = (theme: Omit<Theme, 'prefixCls'>) => {
const {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
Tree,
appearance,
browserPrefers,
isDarkMode,
setAppearance,
setThemeMode,
stylish,
themeMode,
wireframe,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
_tokenKey,
...result
} = theme
return result
}

1581
src/renderer/src/util/editorExtraLibs/_index.d.ts vendored
View File

File diff suppressed because it is too large Load Diff