Refactor(css): Change all less to module mode

2024-10-17 20:26:06 +08:00
parent 3d77dc793b
commit b7c3fb8524
111 changed files with 962 additions and 858 deletions
--- a/src/components/Playground/CodeEditor/Editor/index.module.less
+++ b/src/components/Playground/CodeEditor/Editor/index.module.less
@@ -14,11 +14,11 @@
  }
 }

-[data-component=playground-code-editor-editor] {
+.root {
  position: relative;
  height: 0;

-  .monaco-editor-light {
+  :global .monaco-editor-light {
    height: 100%;
    overflow: hidden;
    background-color: var(--border);
@@ -40,7 +40,7 @@
    }
  }

-  .monaco-editor-vs-dark {
+  :global .monaco-editor-vs-dark {
    height: 100%;
    overflow: hidden;
    background-color: var(--border);
@@ -62,7 +62,7 @@
    }
  }

-  .playground-code-editor-loading {
+  .playgroundCodeEditorLoading {
    position: absolute;
    top: 0;
    right: 0;
--- a/src/components/Playground/CodeEditor/Editor/index.tsx
+++ b/src/components/Playground/CodeEditor/Editor/index.tsx
@@ -1,6 +1,6 @@
 import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
-import '@/components/Playground/CodeEditor/Editor/editor.less'
+import styles from '@/components/Playground/CodeEditor/Editor/index.module.less'
 import '@/components/Playground/CodeEditor/Editor/loader'
 import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
 import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files'
@@ -112,7 +112,7 @@ const Editor = ({

    return (
        <>
-            <div data-component={'playground-code-editor-editor'}>
+            <div className={styles.root}>
                <MonacoEditor
                    theme={theme}
                    path={file.name}
@@ -129,7 +129,7 @@ const Editor = ({
                        readOnly: readonly
                    }}
                />
-                {total > 0 && !finished && <div className={'playground-code-editor-loading'} />}
+                {total > 0 && !finished && <div className={styles.playgroundCodeEditorLoading} />}
            </div>
        </>
    )
--- a/src/components/Playground/CodeEditor/FileSelector/Item.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/Item.tsx
@@ -1,4 +1,5 @@
 import { Dispatch, SetStateAction, KeyboardEvent, ChangeEvent, MouseEvent } from 'react'
+import styles from '@/components/Playground/CodeEditor/FileSelector/item.module.less'

 interface ItemProps {
    className?: string
@@ -109,11 +110,11 @@ const Item = ({

    return (
        <div
-            className={`tab-item${active ? ' active' : ''}${className ? ` ${className}` : ''}`}
+            className={`${styles.root}${active ? ` ${styles.active}` : ''}${className ? ` ${className}` : ''}`}
            onClick={handleOnClick}
        >
            {isCreating ? (
-                <div className={'tab-item-input'}>
+                <div className={styles.tabItemInput}>
                    <input
                        ref={inputRef}
                        value={fileName}
@@ -122,13 +123,13 @@ const Item = ({
                        onKeyDown={handleKeyDown}
                        spellCheck={'false'}
                    />
-                    <span className={'tab-item-input-mask'}>{fileName}</span>
+                    <span className={styles.tabItemInputMask}>{fileName}</span>
                </div>
            ) : (
                <>
                    <div onDoubleClick={handleOnDoubleClick}>{value}</div>
                    {!readonly && (
-                        <div className={'tab-item-close'} onClick={handleOnDelete}>
+                        <div className={styles.tabItemClose} onClick={handleOnDelete}>
                            <IconOxygenClose />
                        </div>
                    )}
--- a/src/components/Playground/CodeEditor/FileSelector/file-selector.less
+++ b/src/components/Playground/CodeEditor/FileSelector/file-selector.less
@@ -1,86 +0,0 @@
-[data-component=playground-file-selector].tab{
-  display: flex;
-  flex: 0 0 auto;
-  height: 40px;
-
-  .multiple {
-    flex: 1;
-    width: 0;
-
-    .tab-content {
-      height: 40px;
-      align-items: flex-end;
-      gap: 2px;
-      margin-left: 10px;
-
-      .tab-item-add {
-        padding: 0 12px;
-      }
-
-      .tabs-margin-right {
-        height: 100%;
-
-        > * {
-          height: 100%;
-          width: 10px;
-        }
-      }
-    }
-  }
-
-  .sticky {
-    display: flex;
-    flex: 0 0 auto;
-    align-items: flex-end;
-    margin-right: 10px;
-  }
-
-  .tab-item {
-    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;
-
-    .tab-item-input {
-      position: relative;
-      min-width: 40px;
-      transform: translateY(1px);
-
-      .tab-item-input-mask {
-        display: inline-block;
-        color: transparent;
-      }
-      input {
-        position: absolute;
-        background-color: transparent;
-        width: 100%;
-        font-size: 1em;
-      }
-    }
-
-    .tab-item-close {
-      transform: translateX(10px);
-
-      :hover {
-        fill: #888;
-      }
-
-      svg {
-        height: 8px;
-        fill: #666;
-      }
-    }
-
-    &.active {
-      background-color: white;
-      border-bottom: none;
-    }
-  }
-
-}
--- a/src/components/Playground/CodeEditor/FileSelector/index.module.less
+++ b/src/components/Playground/CodeEditor/FileSelector/index.module.less
@@ -0,0 +1,37 @@
+.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;
+  }
+}
--- a/src/components/Playground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -1,4 +1,4 @@
-import '@/components/Playground/CodeEditor/FileSelector/file-selector.less'
+import styles from '@/components/Playground/CodeEditor/FileSelector/index.module.less'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import { IFiles } from '@/components/Playground/shared'
@@ -164,8 +164,8 @@ const FileSelector = ({

    return (
        <>
-            <div data-component={'playground-file-selector'} className={'tab'}>
-                <div className={'multiple'}>
+            <div className={styles.root}>
+                <div className={styles.multiple}>
                    <HideScrollbar
                        ref={hideScrollbarRef}
                        autoHideWaitingTime={800}
@@ -173,7 +173,7 @@ const FileSelector = ({
                        scrollbarAsidePadding={0}
                        scrollbarEdgePadding={0}
                    >
-                        <FlexBox direction={'horizontal'} className={'tab-content'}>
+                        <FlexBox direction={'horizontal'} className={styles.tabContent}>
                            {tabs.map((item, index) => (
                                <Item
                                    key={index + item}
@@ -192,20 +192,20 @@ const FileSelector = ({
                            ))}
                            {!readonly && (
                                <Item
-                                    className={'tab-item-add'}
+                                    className={styles.tabItemAdd}
                                    value={'+'}
                                    onClick={addTab}
                                    readonly
                                />
                            )}
-                            <div className={'tabs-margin-right'}>
+                            <div className={styles.tabsMarginRight}>
                                <div />
                            </div>
                        </FlexBox>
                    </HideScrollbar>
                </div>
                {(files[IMPORT_MAP_FILE_NAME] || files[TS_CONFIG_FILE_NAME]) && (
-                    <div className={'sticky'}>
+                    <div className={styles.sticky}>
                        {files[TS_CONFIG_FILE_NAME] && (
                            <Item
                                value={'tsconfig.json'}
--- a/src/components/Playground/CodeEditor/FileSelector/item.module.less
+++ b/src/components/Playground/CodeEditor/FileSelector/item.module.less
@@ -0,0 +1,47 @@
+.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;
+  }
+}
--- a/src/components/Playground/CodeEditor/code-editor.less
+++ b/src/components/Playground/CodeEditor/code-editor.less
@@ -1,5 +0,0 @@
-[data-component=playground-code-editor] {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
--- a/src/components/Playground/CodeEditor/index.module.less
+++ b/src/components/Playground/CodeEditor/index.module.less
@@ -0,0 +1,15 @@
+.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;
+  }
+}
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import '@/components/Playground/CodeEditor/code-editor.less'
+import styles from '@/components/Playground/CodeEditor/index.module.less'
 import FlexBox from '@/components/common/FlexBox'
 import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
 import {
@@ -122,7 +122,7 @@ const CodeEditor = ({

    return (
        <>
-            <FlexBox data-component={'playground-code-editor'}>
+            <FlexBox className={styles.root}>
                {showFileSelector && (
                    <FileSelector
                        files={files}
@@ -157,7 +157,7 @@ const CodeEditor = ({
                    onJumpFile={handleOnChangeSelectedFile}
                    extraLibs={extraLibs}
                />
-                {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
+                {errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
            </FlexBox>
        </>
    )
--- a/src/components/Playground/Output/Preview/Render.tsx
+++ b/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}
--- a/src/components/Playground/Output/Preview/index.module.less
+++ b/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%;
--- a/src/components/Playground/Output/Preview/index.tsx
+++ b/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>
    )
 }
--- a/src/components/Playground/Output/Preview/render.module.less
+++ b/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;
 }
--- a/src/components/Playground/Output/Transform/index.module.less
+++ b/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;
+  }
+}
--- a/src/components/Playground/Output/Transform/index.tsx
+++ b/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>
    )
 }
--- a/src/components/Playground/Output/Transform/transform.less
+++ b/src/components/Playground/Output/Transform/transform.less
@@ -1,3 +0,0 @@
-[data-component=playground-transform] {
-  position: relative;
-}
--- a/src/components/Playground/Output/index.tsx
+++ b/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: '' },
--- a/src/components/Playground/index.module.less
+++ b/src/components/Playground/index.module.less
@@ -1,4 +1,4 @@
-[data-component=playground] {
+.root {
  width: 100%;
  height: 100%;

--- a/src/components/Playground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -1,4 +1,4 @@
-import '@/components/Playground/playground.less'
+import styles from '@/components/Playground/index.module.less'
 import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared'
 import {
    ENTRY_FILE_NAME,
@@ -77,7 +77,7 @@ const Playground = ({
    }, [tsconfigRaw])

    return (
-        <FlexBox data-component={'playground'} direction={'horizontal'}>
+        <FlexBox className={styles.root} direction={'horizontal'}>
            <CodeEditor
                tsconfig={tsconfig}
                files={{