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>
        </>
    )