Refactor(css): Change all less to module mode

src/components/Playground/Output/Preview/Render.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react'
-import '@/components/Playground/Output/Preview/render.less'
+import styles from '@/components/Playground/Output/Preview/render.module.less'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
 import HideScrollbar from '@/components/common/HideScrollbar'
@@ -174,16 +174,18 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
     return mobileMode ? (
         <>
             <HideScrollbar
-                className={'mobile-mode-background'}
+                className={styles.mobileModeRoot}
                 isShowVerticalScrollbar
                 isShowHorizontalScrollbar
                 autoHideWaitingTime={1000}
             >
-                <div className={'mobile-mode-content'} style={{ zoom }}>
-                    <div className={`device${isRotate ? ' rotate' : ''}`}>
-                        <div className={`device-header${isRotate ? ' rotate' : ''}`} />
+                <div className={styles.mobileModeContent} style={{ zoom }}>
+                    <div className={`${styles.device}${isRotate ? ` ${styles.rotate}` : ''}`}>
                         <div
-                            className={`device-content${isRotate ? ' rotate' : ''}`}
+                            className={`${styles.deviceHeader}${isRotate ? ` ${styles.rotate}` : ''}`}
+                        />
+                        <div
+                            className={`${styles.deviceContent}${isRotate ? ` ${styles.rotate}` : ''}`}
                             style={{
                                 width: isRotate
                                     ? (devices.find((value) => value.name === selectedDevice)
@@ -198,7 +200,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
                             }}
                         >
                             <iframe
-                                data-component={'playground-output-preview-render'}
+                                className={styles.renderRoot}
                                 key={iframeKey}
                                 ref={iframeRef}
                                 src={iframeUrl}
@@ -207,19 +209,21 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
                                 allow={'clipboard-read; clipboard-write'}
                             />
                         </div>
-                        <div className={`device-footer${isRotate ? ' rotate' : ''}`} />
+                        <div
+                            className={`${styles.deviceFooter}${isRotate ? ` ${styles.rotate}` : ''}`}
+                        />
                     </div>
                 </div>
             </HideScrollbar>
 
-            <div className={'switch-device'}>
+            <div className={styles.switchDevice}>
                 <IconOxygenMobile fill={COLOR_FONT_MAIN} />
                 <select value={selectedDevice} onChange={handleOnChangeDevice}>
                     {devices.map((value) => (
                         <option value={value.name}>{value.name}</option>
                     ))}
                 </select>
-                <div className={'rotate-device'} title={'旋转屏幕'} onClick={handleOnRotateDevice}>
+                <div title={'旋转屏幕'} onClick={handleOnRotateDevice}>
                     {isRotate ? (
                         <IconOxygenRotateRight fill={COLOR_FONT_MAIN} />
                     ) : (
@@ -227,7 +231,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
                     )}
                 </div>
             </div>
-            <div className={'switch-zoom'}>
+            <div className={styles.switchZoom}>
                 <IconOxygenZoom fill={COLOR_FONT_MAIN} />
                 <input
                     type={'range'}
@@ -241,7 +245,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
         </>
     ) : (
         <iframe
-            data-component={'playground-output-preview-render'}
+            className={styles.renderRoot}
             key={iframeKey}
             ref={iframeRef}
             src={iframeUrl}

src/components/Playground/Output/Preview/index.module.less

@@ -1,9 +1,9 @@
-[data-component=playground-preview] {
+.root {
   display: flex;
   position: relative;
   height: 0;
 
-  .playground-error-message {
+  .errorMessage {
     position: absolute;
     bottom: 0;
     width: 100%;

src/components/Playground/Output/Preview/index.tsx

@@ -1,4 +1,4 @@
-import '@/components/Playground/Output/Preview/preview.less'
+import styles from '@/components/Playground/Output/Preview/index.module.less'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
 import Compiler from '@/components/Playground/compiler'
 import Render from '@/components/Playground/Output/Preview/Render'
@@ -42,9 +42,9 @@ const Preview = ({
     }, [files, Compiler, importMap, entryPoint])
 
     return (
-        <div data-component={'playground-preview'}>
+        <div className={styles.root}>
             <Render iframeKey={iframeKey} compiledCode={compiledCode} mobileMode={mobileMode} />
-            {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
+            {errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
         </div>
     )
 }

src/components/Playground/Output/Preview/render.module.less

@@ -1,14 +1,14 @@
-[data-component=playground-output-preview-render] {
+.renderRoot {
   border: none;
   height: 100%;
   width: 100%;
   flex: 1;
 }
 
-.mobile-mode-background {
+.mobileModeRoot {
   background-color: rgba(204, 204, 204, 0.66);
 
-  .mobile-mode-content {
+  .mobileModeContent {
     padding: 80px;
   }
 
@@ -24,7 +24,7 @@
       flex-direction: row;
     }
 
-    .device-header {
+    .deviceHeader {
       margin: 20px auto;
       width: 60px;
       height: 10px;
@@ -38,7 +38,7 @@
       }
     }
 
-    .device-content {
+    .deviceContent {
       margin: 0 10px;
       background-color: white;
 
@@ -47,7 +47,7 @@
       }
     }
 
-    .device-footer {
+    .deviceFooter {
       margin: 20px auto;
       width: 40px;
       height: 40px;
@@ -61,7 +61,7 @@
   }
 }
 
-.switch-device, .switch-zoom {
+.switchDevice, .switchZoom {
   display: flex;
   position: absolute;
   top: 10px;
@@ -69,10 +69,10 @@
   gap: 4px;
 }
 
-.switch-device {
+.switchDevice {
   left: 10px;
 }
 
-.switch-zoom {
+.switchZoom {
   right: 10px;
 }

src/components/Playground/Output/Transform/index.module.less

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

src/components/Playground/Output/Transform/index.tsx

@@ -1,6 +1,6 @@
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
-import '@/components/Playground/Output/Transform/transform.less'
+import styles from '@/components/Playground/Output/Transform/index.module.less'
 import { IFile, ITheme } from '@/components/Playground/shared'
 import { cssToJsFromFile, jsonToJsFromFile } from '@/components/Playground/files'
 import Compiler from '@/components/Playground/compiler'
@@ -57,14 +57,14 @@ const Transform = ({ file, theme }: OutputProps) => {
     }, [file, Compiler])
 
     return (
-        <div data-component={'playground-transform'}>
+        <div className={styles.root}>
             <MonacoEditor
                 theme={theme}
                 language={'javascript'}
                 value={compiledCode}
                 options={{ ...MonacoEditorConfig, readOnly: true }}
             />
-            {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
+            {errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
         </div>
     )
 }

src/components/Playground/Output/Transform/transform.less

@@ -1,3 +0,0 @@
-[data-component=playground-transform] {
-  position: relative;
-}

src/components/Playground/Output/index.tsx

@@ -26,7 +26,7 @@ const Output = ({
     const [selectedTab, setSelectedTab] = useState('Preview')
 
     return (
-        <FlexBox data-component={'playground-code-output'}>
+        <FlexBox>
             <Playground.CodeEditor.FileSelector
                 files={{
                     Preview: { name: 'Preview', language: 'json', value: '' },