From 1f8b17810a7cc596abd79b8c676f5381befa67a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=BB=E5=B8=85?= <1064425721@qq.com>
Date: Wed, 1 Mar 2023 11:39:06 +0800
Subject: [PATCH] chore : use css module conduct style isolation

---
 src/components/update/Modal/index.scss        | 50 ---------------
 src/components/update/Modal/index.tsx         | 32 +++++-----
 src/components/update/Modal/modal.module.scss | 63 +++++++++++++++++++
 src/components/update/Progress/index.scss     | 16 -----
 src/components/update/Progress/index.tsx      | 10 +--
 .../update/Progress/progress.module.scss      | 21 +++++++
 src/components/update/index.scss              | 13 ----
 src/components/update/index.tsx               |  8 +--
 src/components/update/update.module.scss      | 19 ++++++
 9 files changed, 128 insertions(+), 104 deletions(-)
 delete mode 100644 src/components/update/Modal/index.scss
 create mode 100644 src/components/update/Modal/modal.module.scss
 delete mode 100644 src/components/update/Progress/index.scss
 create mode 100644 src/components/update/Progress/progress.module.scss
 delete mode 100644 src/components/update/index.scss
 create mode 100644 src/components/update/update.module.scss

diff --git a/src/components/update/Modal/index.scss b/src/components/update/Modal/index.scss
deleted file mode 100644
index eeef6c1..0000000
--- a/src/components/update/Modal/index.scss
+++ /dev/null
@@ -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);
-    }
-  }
-}
diff --git a/src/components/update/Modal/index.tsx b/src/components/update/Modal/index.tsx
index 02bf723..7ecce0b 100644
--- a/src/components/update/Modal/index.tsx
+++ b/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="up-modal-bg" onClick={child.onCanCel} />
-      <div className="up-modal">
-        <div className="up-modal-panel">
+    <div className={modalScss.modal}>
+      <div className='modal-bg' onClick={child.onCanCel} />
+      <div className='modal-outboard'>
+        <div className='modal-panel'>
           {child.isHeaderShow ? (
-            <div className="up-modal-header">
-              <div className="up-modal-header-text">{child.titleText}</div>
+            <div className='modal-header'>
+              <div className='modal-header-text'>{child.titleText}</div>
               <svg
                 onClick={child.onCanCel}
-                className="icon"
-                viewBox="0 0 1026 1024"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
+                className='icon'
+                viewBox='0 0 1026 1024'
+                version='1.1'
+                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>
   );
 };
 
diff --git a/src/components/update/Modal/modal.module.scss b/src/components/update/Modal/modal.module.scss
new file mode 100644
index 0000000..a9536de
--- /dev/null
+++ b/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);
+        }
+      }
+  }
+}
\ No newline at end of file
diff --git a/src/components/update/Progress/index.scss b/src/components/update/Progress/index.scss
deleted file mode 100644
index 51ee222..0000000
--- a/src/components/update/Progress/index.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/src/components/update/Progress/index.tsx b/src/components/update/Progress/index.tsx
index de02693..bb82162 100644
--- a/src/components/update/Progress/index.tsx
+++ b/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="up-progress-pr"  style={{ width: props.rateWidth ?? 250 }}>
+    <div className={progressScss.progress}>
+      <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>
   );
 };
diff --git a/src/components/update/Progress/progress.module.scss b/src/components/update/Progress/progress.module.scss
new file mode 100644
index 0000000..ff84486
--- /dev/null
+++ b/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;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/update/index.scss b/src/components/update/index.scss
deleted file mode 100644
index 39961b2..0000000
--- a/src/components/update/index.scss
+++ /dev/null
@@ -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;
-  }
-}
\ No newline at end of file
diff --git a/src/components/update/index.tsx b/src/components/update/index.tsx
index 61ed92b..3eb4fd0 100644
--- a/src/components/update/index.tsx
+++ b/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>
+    </>
   )
 }
 
diff --git a/src/components/update/update.module.scss b/src/components/update/update.module.scss
new file mode 100644
index 0000000..926bb44
--- /dev/null
+++ b/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;
+}
\ No newline at end of file