chore : use css module conduct style isolation

src/components/update/Modal/index.scss

@@ -1,50 +0,0 @@
-.up-modal-bg{
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 9999;
-  background: rgba(0, 0, 0, 0.3);
-}
-.up-modal {
-  position: absolute;
-  top: 20vh;
-  left: 30vw;
-  z-index: 10000;
-  .up-modal-panel {
-    border: 1px solid #000000;
-    border-radius: 5px;
-    .up-modal-header {
-      $titleheight: 38px;
-      width: 530px;
-      height: $titleheight;
-      line-height: $titleheight;
-      background-color: rgb(99, 153, 255);
-      display: flex;
-      .up-modal-header-text {
-        text-align: center;
-        width: 480px;
-      }
-    }
-    .up-modal-body{
-      background-color: #ffffff;
-    }
-    .up-modal-footer {
-      background-color: #ffffff;
-      display: flex;
-      justify-content: end;
-      button{
-        margin: 10px;
-      }
-    }
-  }
-  .icon {
-    padding: 0 15px;
-    width: 20px;
-    fill: currentColor;
-    &:hover {
-      color: rgba(0, 0, 0, 0.4);
-    }
-  }
-}

src/components/update/Modal/index.tsx

@@ -1,43 +1,43 @@
 import { createPortal } from 'react-dom';
 import { ModalChildType, ModalPropsType } from './type';
-import './index.scss';
+import modalScss from './modal.module.scss'
 const ModalTemplate = (child: ModalChildType) => {
   return (
-    <>
+    <div className={modalScss.modal}>
-      <div className="up-modal-bg" onClick={child.onCanCel} />
+      <div className='modal-bg' onClick={child.onCanCel} />
-      <div className="up-modal">
+      <div className='modal-outboard'>
-        <div className="up-modal-panel">
+        <div className='modal-panel'>
           {child.isHeaderShow ? (
-            <div className="up-modal-header">
+            <div className='modal-header'>
-              <div className="up-modal-header-text">{child.titleText}</div>
+              <div className='modal-header-text'>{child.titleText}</div>
               <svg
                 onClick={child.onCanCel}
-                className="icon"
+                className='icon'
-                viewBox="0 0 1026 1024"
+                viewBox='0 0 1026 1024'
-                version="1.1"
+                version='1.1'
-                xmlns="http://www.w3.org/2000/svg"
+                xmlns='http://www.w3.org/2000/svg'
               >
                 <path
-                  d="M585.781589 510.748226l423.38657-423.38657A51.071963
+                  d='M585.781589 510.748226l423.38657-423.38657A51.071963
             51.071963 0 0 0 937.156692 14.839469L513.770122 438.736759
             90.383552 14.839469A51.071963 51.071963 0 0 0 17.861365 87.361656L441.758655 
             510.748226l-423.89729 423.38657A51.071963 51.071963 0 1 0 89.872832 1006.146263l423.89729-423.38657 
-            423.38657 423.38657a51.071963 51.071963 0 0 0 72.011467-72.011467z"
+            423.38657 423.38657a51.071963 51.071963 0 0 0 72.011467-72.011467z'
                 />
               </svg>
             </div>
           ) : null}
 
-          <div className="up-modal-body">{child.body}</div>
+          <div className='modal-body'>{child.body}</div>
           {child.isFooterShow ? (
-            <div className="up-modal-footer">
+            <div className='modal-footer'>
               {(child.isSubmitShow ?? true) ?<button onClick={child.onSubmit}>{child.submitText ?? '确认'}</button> : null}
               {(child.isCanCelShow ?? true) ? <button onClick={child.onCanCel}>{child.canCelText ?? '取消'}</button> : null}
             </div>
           ) : null}
         </div> 
       </div>
-    </>
+    </div>
   );
 };
 

src/components/update/Modal/modal.module.scss

@@ -0,0 +1,63 @@
+.modal{
+  :global{
+    .modal-bg {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        left: 0;
+        top: 0;
+        z-index: 9999;
+        background: rgba(0, 0, 0, 0.3);
+      }
+    
+      .modal-outboard {
+        position: absolute;
+        top: 20vh;
+        left: 30vw;
+        z-index: 10000;
+      }
+    
+      .modal-panel {
+        border: 1px solid #000000;
+        border-radius: 5px;
+    
+        .modal-header {
+          $titleheight: 38px;
+          width: 530px;
+          height: $titleheight;
+          line-height: $titleheight;
+          background-color: rgb(99, 153, 255);
+          display: flex;
+    
+          .modal-header-text {
+            text-align: center;
+            width: 480px;
+          }
+        }
+    
+        .modal-body {
+          background-color: #ffffff;
+        }
+    
+        .modal-footer {
+          background-color: #ffffff;
+          display: flex;
+          justify-content: end;
+    
+          button {
+            margin: 10px;
+          }
+        }
+      }
+    
+      .icon {
+        padding: 0 15px;
+        width: 20px;
+        fill: currentColor;
+    
+        &:hover {
+          color: rgba(0, 0, 0, 0.4);
+        }
+      }
+  }
+}

src/components/update/Progress/index.scss

@@ -1,16 +0,0 @@
-.up-progress{
-  display: flex;
-  align-items: center;
-  .up-progress-pr{
-     border: 1px solid #000000;
-     border-radius: 3px;
-     height: 6px;
-  }
-  .up-progress-rate{
-     height: 6px;
-     border-radius: 3px;
-  }
-  .up-progress-num{
-    margin: 0 10px;
-  }
-}

src/components/update/Progress/index.tsx

@@ -1,20 +1,20 @@
 import { RsProgressType } from './type'
-import './index.scss'
+import progressScss from './progress.module.scss'
 
 const Progress = (props: RsProgressType) => {
 
   return (
-    <div className="up-progress">
+    <div className={progressScss.progress}>
-      <div className="up-progress-pr"  style={{ width: props.rateWidth ?? 250 }}>
+      <div className='progress-pr'  style={{ width: props.rateWidth ?? 250 }}>
       <div
-        className="up-progress-rate"
+        className='progress-rate'
         style={{
           width: (props.percent ?? 0) * ((props.rateWidth ?? 250) / 100),
           backgroundColor: props.rateColor ?? 'blue',
         }}
       />
     </div>
-      <span className='up-progress-num'>{props.percent > 100 ? 100 :(props.percent.toString().substring(0,4) ?? 0) }%</span>
+      <span className='progress-num'>{props.percent > 100 ? 100 :(props.percent.toString().substring(0,4) ?? 0) }%</span>
     </div>
   );
 };

src/components/update/Progress/progress.module.scss

@@ -0,0 +1,21 @@
+.progress {
+  display: flex;
+  align-items: center;
+
+  :global {
+    .progress-pr {
+      border: 1px solid #000000;
+      border-radius: 3px;
+      height: 6px;
+    }
+
+    .progress-rate {
+      height: 6px;
+      border-radius: 3px;
+    }
+
+    .progress-num {
+      margin: 0 10px;
+    }
+  }
+}

src/components/update/index.scss

@@ -1,13 +0,0 @@
-.up-modal-body{
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100px;
-  .progress-title{
-    width: 150px;
-  }
-
-  .update-progress{
-    display: flex;
-  }
-}

src/components/update/index.tsx

@@ -2,7 +2,7 @@ import Modal from '@/components/update/Modal'
 import Progress from '@/components/update/Progress'
 import { ipcRenderer } from 'electron'
 import { useEffect, useState } from 'react'
-import './index.scss'
+import updateScss from './update.module.scss'
 import { checkUpdateType, isUpdateAvailable, ModalBtnText, VersionInfo } from './type'
 
 
@@ -89,11 +89,11 @@ const Update = () => {
   })
 
   return (
-    <div>
+    <>
       <Modal isOpenModal={isOpenModal} onCanCel={onModalCanCel} onSubmit={onModalSubmit}
         canCelText={modalBtnText.canCelText} submitText={modalBtnText.submitText}
         isFooterShow={checkType && isNeedUpdate}>
-        <div className='up-modal-body'>
+        <div className={updateScss.modalslot}>
           {updateError ?
             <div className='update-error'>Error downloading the latest version, please contact the developer</div> :
             checkType ? (
@@ -116,7 +116,7 @@ const Update = () => {
       <button disabled={checkLoading} onClick={checkUpdate}>
         {checkBtnText}
       </button>
-    </div>
+    </>
   )
 }
 

src/components/update/update.module.scss

@@ -0,0 +1,19 @@
+.modalslot{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+
+  :global {
+    .progress-title {
+      width: 150px;
+    }
+
+    .update-progress {
+      display: flex;
+    }
+  }
+}
+.a{
+  color: red;
+}