diff --git a/demo/debug-pages/backTopDebug/index.vue b/demo/debug-pages/backTopDebug/index.vue
index 22ec36ceb..6f1ed81d8 100644
--- a/demo/debug-pages/backTopDebug/index.vue
+++ b/demo/debug-pages/backTopDebug/index.vue
@@ -1,9 +1,7 @@
 <template>
   <div ref="doc" class="n-doc">
     <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        BackTopDebug
-      </n-gradient-text>
+      <n-gradient-text :font-size="20"> BackTopDebug </n-gradient-text>
     </div>
     <div class="n-doc-body" style="height: 2400px" />
     <n-back-top />
diff --git a/demo/debug-pages/cascaderDebug/basic.demo.vue b/demo/debug-pages/cascaderDebug/basic.demo.vue
index 7c17c6277..82aef0014 100644
--- a/demo/debug-pages/cascaderDebug/basic.demo.vue
+++ b/demo/debug-pages/cascaderDebug/basic.demo.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Multiple
-    </div>
+    <div class="n-doc-section__header">Multiple</div>
     <div class="n-doc-section__view" style="flex-wrap: nowrap">
       <!--EXAMPLE_START-->
       <n-cascader
@@ -17,7 +15,8 @@
       <!--EXAMPLE_END-->
     </div>
     <pre class="n-doc-section__inspect">
-v-model: {{ JSON.stringify(value) }}</pre>
+v-model: {{ JSON.stringify(value) }}</pre
+    >
     <pre>
       <!--SOURCE-->
     </pre>
diff --git a/demo/debug-pages/cascaderDebug/index.vue b/demo/debug-pages/cascaderDebug/index.vue
index 884937f61..639c99ef7 100644
--- a/demo/debug-pages/cascaderDebug/index.vue
+++ b/demo/debug-pages/cascaderDebug/index.vue
@@ -1,9 +1,7 @@
 <template>
   <div ref="doc" class="n-doc">
     <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        CascaderDebug
-      </n-gradient-text>
+      <n-gradient-text :font-size="20"> CascaderDebug </n-gradient-text>
     </div>
     <div class="n-doc-body">
       <basic />
diff --git a/demo/debug-pages/datePickerDebug/index.vue b/demo/debug-pages/datePickerDebug/index.vue
index b720f8d64..6cbdf30a7 100644
--- a/demo/debug-pages/datePickerDebug/index.vue
+++ b/demo/debug-pages/datePickerDebug/index.vue
@@ -1,9 +1,7 @@
 <template>
   <div ref="doc" class="n-doc">
     <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        DatePickerDebug
-      </n-gradient-text>
+      <n-gradient-text :font-size="20"> DatePickerDebug </n-gradient-text>
     </div>
     <div class="n-doc-body">
       <range />
diff --git a/demo/debug-pages/datePickerDebug/range.demo.vue b/demo/debug-pages/datePickerDebug/range.demo.vue
index dd68dd40c..163bc0d10 100644
--- a/demo/debug-pages/datePickerDebug/range.demo.vue
+++ b/demo/debug-pages/datePickerDebug/range.demo.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      DateTime Range
-    </div>
+    <div class="n-doc-section__header">DateTime Range</div>
     <div class="n-doc-section__view" style="flex-wrap: wrap">
       <!--EXAMPLE_START-->
       <n-date-picker
@@ -15,7 +13,8 @@
     <pre class="n-doc-section__inspect">
 range1 v-model: {{ JSON.stringify(range1) }}
 range2 v-model: {{ JSON.stringify(range2) }}
-range3 v-model: {{ JSON.stringify(range3) }}</pre>
+range3 v-model: {{ JSON.stringify(range3) }}</pre
+    >
     <pre>
       <!--SOURCE-->
     </pre>
diff --git a/demo/debug-pages/modalDebug/card.vue b/demo/debug-pages/modalDebug/card.vue
index b8563e850..c035e832f 100644
--- a/demo/debug-pages/modalDebug/card.vue
+++ b/demo/debug-pages/modalDebug/card.vue
@@ -7,9 +7,7 @@
     <template #header>
       {{ time }}
     </template>
-    <template #footer>
-      #footer
-    </template>
+    <template #footer> #footer </template>
     <template #content>
       <n-input v-model="time" />
       <n-select
@@ -21,9 +19,7 @@
       />
       <n-tooltip placement="bottom" trigger="click" style="margin-right: 12px">
         <template #activator>
-          <n-button style="margin: 0">
-            California Girls(Click)
-          </n-button>
+          <n-button style="margin: 0"> California Girls(Click) </n-button>
         </template>
         <span> I wish they all could be California girls </span>
       </n-tooltip>
diff --git a/demo/debug-pages/modalDebug/index.vue b/demo/debug-pages/modalDebug/index.vue
index 14edee461..51a984e68 100644
--- a/demo/debug-pages/modalDebug/index.vue
+++ b/demo/debug-pages/modalDebug/index.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <n-button @click="isActive = true">
-      active
-    </n-button>
+    <n-button @click="isActive = true"> active </n-button>
     <modal-wrapper v-model="isActive" />
   </div>
 </template>
diff --git a/demo/debug-pages/popoverDebug.vue b/demo/debug-pages/popoverDebug.vue
index 9f47b6539..b9419bf7e 100644
--- a/demo/debug-pages/popoverDebug.vue
+++ b/demo/debug-pages/popoverDebug.vue
@@ -7,9 +7,7 @@
             Top Start
           </n-button>
         </template>
-        <div class="large-text">
-          Oops!
-        </div>
+        <div class="large-text">Oops!</div>
       </n-popover>
       <n-popover placement="top" trigger="click">
         <template #activator>
@@ -17,9 +15,7 @@
             Top
           </n-button>
         </template>
-        <div class="large-text">
-          Oops!
-        </div>
+        <div class="large-text">Oops!</div>
       </n-popover>
       <n-popover placement="top-end" trigger="click">
         <template #activator>
@@ -27,9 +23,7 @@
             Top End
           </n-button>
         </template>
-        <div class="large-text">
-          Oops!
-        </div>
+        <div class="large-text">Oops!</div>
       </n-popover>
       <n-popover placement="left-start" trigger="click">
         <template #activator>
@@ -37,9 +31,7 @@
             Left Start
           </n-button>
         </template>
-        <div class="large-text">
-          Oops!
-        </div>
+        <div class="large-text">Oops!</div>
       </n-popover>
       <n-popover placement="left" trigger="click">
         <template #activator>
@@ -47,9 +39,7 @@
             Left
           </n-button>
         </template>
-        <div class="large-text">
-          Oops!
-        </div>
+        <div class="large-text">Oops!</div>
       </n-popover>
       <n-popover placement="left-end" trigger="click">
         <template #activator>
@@ -57,9 +47,7 @@
             Left End
           </n-button>
         </template>
-        <div class="large-text">
-          Oops!
-        </div>
+        <div class="large-text">Oops!</div>
       </n-popover>
       <n-popover placement="right-start" trigger="click">
         <template #activator>
@@ -67,9 +55,7 @@
             Right Start
           </n-button>
         </template>
-        <div class="large-text">
-          Oops!
-        </div>
+        <div class="large-text">Oops!</div>
       </n-popover>
       <n-popover placement="right" trigger="click">
         <template #activator>
@@ -77,9 +63,7 @@
             Right
           </n-button>
         </template>
-        <div class="large-text">
-          Oops!
-        </div>
+        <div class="large-text">Oops!</div>
       </n-popover>
       <n-popover placement="right-end" trigger="click">
         <template #activator>
@@ -87,9 +71,7 @@
             Right End
           </n-button>
         </template>
-        <div class="large-text">
-          Oops!
-        </div>
+        <div class="large-text">Oops!</div>
       </n-popover>
       <n-popover placement="bottom-start" trigger="click">
         <template #activator>
@@ -97,9 +79,7 @@
             Bottom Start
           </n-button>
         </template>
-        <div class="large-text">
-          Oops!
-        </div>
+        <div class="large-text">Oops!</div>
       </n-popover>
       <n-popover placement="bottom" trigger="click">
         <template #activator>
@@ -107,9 +87,7 @@
             Bottom
           </n-button>
         </template>
-        <div class="large-text">
-          Oops!
-        </div>
+        <div class="large-text">Oops!</div>
       </n-popover>
       <n-popover placement="bottom-end" trigger="click">
         <template #activator>
@@ -117,9 +95,7 @@
             Bottom End
           </n-button>
         </template>
-        <div class="large-text">
-          Oops!
-        </div>
+        <div class="large-text">Oops!</div>
       </n-popover>
     </div>
     <!-- <div style="margin-left: 400px;">
diff --git a/demo/debug-pages/routerDebug.vue b/demo/debug-pages/routerDebug.vue
index e516e797d..abfb29e6f 100644
--- a/demo/debug-pages/routerDebug.vue
+++ b/demo/debug-pages/routerDebug.vue
@@ -1,8 +1,6 @@
 <template>
   <div style="padding: 100px">
-    <button @click="f">
-      router debug
-    </button>
+    <button @click="f">router debug</button>
   </div>
 </template>
 
diff --git a/demo/debug-pages/scrollbarDebug/case1.demo.vue b/demo/debug-pages/scrollbarDebug/case1.demo.vue
index 12cbe2c22..9a453d0ea 100644
--- a/demo/debug-pages/scrollbarDebug/case1.demo.vue
+++ b/demo/debug-pages/scrollbarDebug/case1.demo.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Scrollbar
-    </div>
+    <div class="n-doc-section__header">Scrollbar</div>
     <div class="n-doc-section__view" style="flex-wrap: wrap">
       <!--EXAMPLE_START-->
       <div style="width: 400px; height: 300px">
@@ -48,9 +46,7 @@
         <n-scrollbar>
           <div style="background: linear-gradient(red, blue); height: 300px">
             <div style="background: yellow; width: 100%; color: #000">
-              <n-button block>
-                666
-              </n-button>
+              <n-button block> 666 </n-button>
             </div>
           </div>
         </n-scrollbar>
diff --git a/demo/debug-pages/scrollbarDebug/index.vue b/demo/debug-pages/scrollbarDebug/index.vue
index 26ba89208..902d89588 100644
--- a/demo/debug-pages/scrollbarDebug/index.vue
+++ b/demo/debug-pages/scrollbarDebug/index.vue
@@ -1,9 +1,7 @@
 <template>
   <div ref="doc" class="n-doc">
     <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        scaffold
-      </n-gradient-text>
+      <n-gradient-text :font-size="20"> scaffold </n-gradient-text>
     </div>
     <div class="n-doc-body">
       <case1 />
diff --git a/demo/debug-pages/scrollbarDebug2/case2.demo.vue b/demo/debug-pages/scrollbarDebug2/case2.demo.vue
index 42b2da958..f94d3d567 100644
--- a/demo/debug-pages/scrollbarDebug2/case2.demo.vue
+++ b/demo/debug-pages/scrollbarDebug2/case2.demo.vue
@@ -24,28 +24,28 @@
           <col
             data-v-770eb43a=""
             style="width: 290px; padding-right: 5px; min-width: 290px"
-          >
+          />
           <col
             data-v-770eb43a=""
             style="width: 300px; padding-right: 5px; min-width: 300px"
-          >
+          />
           <col
             data-v-770eb43a=""
             style="width: 120px; padding-right: 5px; min-width: 120px"
-          >
+          />
           <col
             data-v-770eb43a=""
             style="width: 80px; padding-right: 5px; min-width: 80px"
-          >
+          />
           <col
             data-v-770eb43a=""
             style="width: 100px; padding-right: 5px; min-width: 100px"
-          >
+          />
           <col
             data-v-770eb43a=""
             style="width: 380px; padding-right: 5px; min-width: 380px"
-          >
-          <col data-v-770eb43a="" width="5">
+          />
+          <col data-v-770eb43a="" width="5" />
         </colgroup>
         <thead data-v-770eb43a="">
           <tr data-v-e063b074="">
@@ -67,18 +67,17 @@
                 data-v-d4850fa2=""
                 class="ts-sort-container"
                 data-v-85b770e0=""
-              ><i
-                data-v-d4850fa2=""
-                class="n-icon ion-md-arrow-dropdown"
-                style="
+                ><i
+                  data-v-d4850fa2=""
+                  class="n-icon ion-md-arrow-dropdown"
+                  style="
                     font-size: 12px;
                     opacity: 0.3;
                     transform: scale(0.8);
-                  "
-              /><i
-                data-v-d4850fa2=""
-                class="n-icon ion-md-arrow-dropup"
-                style="font-size: 12px; opacity: 0.3; transform: scale(0.8)"
+                  " /><i
+                  data-v-d4850fa2=""
+                  class="n-icon ion-md-arrow-dropup"
+                  style="font-size: 12px; opacity: 0.3; transform: scale(0.8)"
               /></span>
 
               <!---->
@@ -89,18 +88,17 @@
                 data-v-d4850fa2=""
                 class="ts-sort-container"
                 data-v-85b770e0=""
-              ><i
-                data-v-d4850fa2=""
-                class="n-icon ion-md-arrow-dropdown"
-                style="
+                ><i
+                  data-v-d4850fa2=""
+                  class="n-icon ion-md-arrow-dropdown"
+                  style="
                     font-size: 12px;
                     opacity: 0.3;
                     transform: scale(0.8);
-                  "
-              /><i
-                data-v-d4850fa2=""
-                class="n-icon ion-md-arrow-dropup"
-                style="font-size: 12px; opacity: 0.3; transform: scale(0.8)"
+                  " /><i
+                  data-v-d4850fa2=""
+                  class="n-icon ion-md-arrow-dropup"
+                  style="font-size: 12px; opacity: 0.3; transform: scale(0.8)"
               /></span>
 
               <!---->
@@ -147,45 +145,39 @@
           <col
             data-v-770eb43a=""
             style="width: 290px; padding-right: 5px; min-width: 290px"
-          >
+          />
           <col
             data-v-770eb43a=""
             style="width: 300px; padding-right: 5px; min-width: 300px"
-          >
+          />
           <col
             data-v-770eb43a=""
             style="width: 120px; padding-right: 5px; min-width: 120px"
-          >
+          />
           <col
             data-v-770eb43a=""
             style="width: 80px; padding-right: 5px; min-width: 80px"
-          >
+          />
           <col
             data-v-770eb43a=""
             style="width: 100px; padding-right: 5px; min-width: 100px"
-          >
+          />
           <col
             data-v-770eb43a=""
             style="width: 380px; padding-right: 5px; min-width: 380px"
-          >
+          />
         </colgroup>
         <tbody data-v-770eb43a="">
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test0
-              </div>
+              <div data-v-35ad2114="">test0</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 15:46:40
-                </p>
+                <p data-v-35ad2114="">19/08/07 15:46:40</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -202,9 +194,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -224,20 +214,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test1
-              </div>
+              <div data-v-35ad2114="">test1</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 14:28:16
-                </p>
+                <p data-v-35ad2114="">19/08/07 14:28:16</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -254,9 +238,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -276,20 +258,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test2
-              </div>
+              <div data-v-35ad2114="">test2</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 15:21:41
-                </p>
+                <p data-v-35ad2114="">19/08/07 15:21:41</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -306,9 +282,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -328,20 +302,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test3
-              </div>
+              <div data-v-35ad2114="">test3</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 15:39:41
-                </p>
+                <p data-v-35ad2114="">19/08/07 15:39:41</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -358,9 +326,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -380,20 +346,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test4
-              </div>
+              <div data-v-35ad2114="">test4</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 15:08:57
-                </p>
+                <p data-v-35ad2114="">19/08/07 15:08:57</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -410,9 +370,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -432,20 +390,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test5
-              </div>
+              <div data-v-35ad2114="">test5</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 14:14:27
-                </p>
+                <p data-v-35ad2114="">19/08/07 14:14:27</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -462,9 +414,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -484,20 +434,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test6
-              </div>
+              <div data-v-35ad2114="">test6</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 14:44:43
-                </p>
+                <p data-v-35ad2114="">19/08/07 14:44:43</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -514,9 +458,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -536,20 +478,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test7
-              </div>
+              <div data-v-35ad2114="">test7</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 14:25:25
-                </p>
+                <p data-v-35ad2114="">19/08/07 14:25:25</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -566,9 +502,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -588,20 +522,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test8
-              </div>
+              <div data-v-35ad2114="">test8</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 14:12:05
-                </p>
+                <p data-v-35ad2114="">19/08/07 14:12:05</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -618,9 +546,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -640,20 +566,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test9
-              </div>
+              <div data-v-35ad2114="">test9</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 15:38:27
-                </p>
+                <p data-v-35ad2114="">19/08/07 15:38:27</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -670,9 +590,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -692,20 +610,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test10
-              </div>
+              <div data-v-35ad2114="">test10</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 15:15:52
-                </p>
+                <p data-v-35ad2114="">19/08/07 15:15:52</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -722,9 +634,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -744,20 +654,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test11
-              </div>
+              <div data-v-35ad2114="">test11</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 14:15:05
-                </p>
+                <p data-v-35ad2114="">19/08/07 14:15:05</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -774,9 +678,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -796,20 +698,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test12
-              </div>
+              <div data-v-35ad2114="">test12</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 15:28:51
-                </p>
+                <p data-v-35ad2114="">19/08/07 15:28:51</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -826,9 +722,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -848,20 +742,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test13
-              </div>
+              <div data-v-35ad2114="">test13</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 14:02:34
-                </p>
+                <p data-v-35ad2114="">19/08/07 14:02:34</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -878,9 +766,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -900,20 +786,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test14
-              </div>
+              <div data-v-35ad2114="">test14</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 15:32:36
-                </p>
+                <p data-v-35ad2114="">19/08/07 15:32:36</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -930,9 +810,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -952,20 +830,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test15
-              </div>
+              <div data-v-35ad2114="">test15</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 14:34:16
-                </p>
+                <p data-v-35ad2114="">19/08/07 14:34:16</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -982,9 +854,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -1004,20 +874,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test16
-              </div>
+              <div data-v-35ad2114="">test16</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 15:25:47
-                </p>
+                <p data-v-35ad2114="">19/08/07 15:25:47</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -1034,9 +898,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -1056,20 +918,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test17
-              </div>
+              <div data-v-35ad2114="">test17</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 15:14:17
-                </p>
+                <p data-v-35ad2114="">19/08/07 15:14:17</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -1086,9 +942,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -1108,20 +962,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test18
-              </div>
+              <div data-v-35ad2114="">test18</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 15:02:17
-                </p>
+                <p data-v-35ad2114="">19/08/07 15:02:17</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -1138,9 +986,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -1160,20 +1006,14 @@
           </tr>
           <tr data-v-e063b074="">
             <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                test19
-              </div>
+              <div data-v-35ad2114="">test19</div>
+            </td>
+            <td data-v-35ad2114="" class="" data-v-e063b074="">
+              <div data-v-35ad2114="">BJ-XXX</div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
               <div data-v-35ad2114="">
-                BJ-XXX
-              </div>
-            </td>
-            <td data-v-35ad2114="" class="" data-v-e063b074="">
-              <div data-v-35ad2114="">
-                <p data-v-35ad2114="">
-                  19/08/07 15:48:21
-                </p>
+                <p data-v-35ad2114="">19/08/07 15:48:21</p>
               </div>
             </td>
             <td data-v-35ad2114="" class="" data-v-e063b074="">
@@ -1190,9 +1030,7 @@
               <div data-v-35ad2114="">
                 <div class="n-popover n-tooltip" data-v-35ad2114="">
                   <div class="n-popover__activator">
-                    <div class="text-overflow">
-                      Zheyu Zhang
-                    </div>
+                    <div class="text-overflow">Zheyu Zhang</div>
                   </div>
                 </div>
               </div>
@@ -1217,20 +1055,20 @@
     <div class="n-advanced-table__pagination">
       <div class="n-pagination">
         <div
-          class="n-pagination__item n-pagination__item--backward n-pagination__item--disabled"
+          class="
+            n-pagination__item
+            n-pagination__item--backward
+            n-pagination__item--disabled
+          "
         >
           <i class="n-icon ion-ios-arrow-back" />
         </div>
         <div class="n-pagination__item n-pagination__item--active">
-          <div class="n-pagination-item__label">
-            1
-          </div>
+          <div class="n-pagination-item__label">1</div>
           <!----><!---->
         </div>
         <div class="n-pagination__item">
-          <div class="n-pagination-item__label">
-            2
-          </div>
+          <div class="n-pagination-item__label">2</div>
           <!----><!---->
         </div>
         <div class="n-pagination__item n-pagination__item--forward">
diff --git a/demo/debug-pages/suffixDebug/basic.demo.vue b/demo/debug-pages/suffixDebug/basic.demo.vue
index 8d070a25a..a36a2c3ec 100644
--- a/demo/debug-pages/suffixDebug/basic.demo.vue
+++ b/demo/debug-pages/suffixDebug/basic.demo.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      DateTime Range
-    </div>
+    <div class="n-doc-section__header">DateTime Range</div>
     <div class="n-doc-section__view" style="flex-wrap: wrap">
       <!--EXAMPLE_START-->
       <n-base-suffix clearable :show="show" />
diff --git a/demo/debug-pages/suffixDebug/index.vue b/demo/debug-pages/suffixDebug/index.vue
index f8ede25b1..0f3d8bef6 100644
--- a/demo/debug-pages/suffixDebug/index.vue
+++ b/demo/debug-pages/suffixDebug/index.vue
@@ -1,9 +1,7 @@
 <template>
   <div ref="doc" class="n-doc">
     <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        DatePickerDebug
-      </n-gradient-text>
+      <n-gradient-text :font-size="20"> DatePickerDebug </n-gradient-text>
     </div>
     <div class="n-doc-body">
       <basic />
diff --git a/demo/debug-pages/verticalAlignDebug.vue b/demo/debug-pages/verticalAlignDebug.vue
index 69fd5da28..43b545520 100644
--- a/demo/debug-pages/verticalAlignDebug.vue
+++ b/demo/debug-pages/verticalAlignDebug.vue
@@ -26,7 +26,7 @@
       <input
         style="height: 60px; display: inline-block; vertical-align: baseline"
         value="666"
-      >
+      />
       <n-checkbox />
       <div
         style="
diff --git a/package.json b/package.json
index 948a54688..31099dc61 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,7 @@
     "cssnano": "^5.0.5",
     "eslint": "^7.20.0",
     "eslint-config-standard": "^16.0.2",
-    "eslint-config-standard-with-typescript": "^19.0.1",
+    "eslint-config-standard-with-typescript": "^20.0.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-markdown": "^2.0.0",
     "eslint-plugin-node": "^11.1.0",
diff --git a/src/_internal/select-menu/src/SelectOption.tsx b/src/_internal/select-menu/src/SelectOption.tsx
index cf3396f69..b2d69f12c 100644
--- a/src/_internal/select-menu/src/SelectOption.tsx
+++ b/src/_internal/select-menu/src/SelectOption.tsx
@@ -121,9 +121,9 @@ export default defineComponent({
     const showCheckMark = multiple && isSelected
     const children = rawNode.render
       ? [
-        rawNode.render(rawNode, isSelected),
-        renderCheckMark(showCheckMark, clsPrefix)
-      ]
+          rawNode.render(rawNode, isSelected),
+          renderCheckMark(showCheckMark, clsPrefix)
+        ]
       : [rawNode.label, renderCheckMark(showCheckMark, clsPrefix)]
     return (
       <div
diff --git a/src/_internal/selection/src/Selection.tsx b/src/_internal/selection/src/Selection.tsx
index 79dac1c92..d31ff5fa0 100644
--- a/src/_internal/selection/src/Selection.tsx
+++ b/src/_internal/selection/src/Selection.tsx
@@ -485,9 +485,10 @@ export default defineComponent({
           </NTag>
         </div>
       )
-      const originalTags = (maxTagCountNumeric
-        ? this.selectedOptions!.slice(0, maxTagCount as number)
-        : this.selectedOptions!
+      const originalTags = (
+        maxTagCountNumeric
+          ? this.selectedOptions!.slice(0, maxTagCount as number)
+          : this.selectedOptions!
       ).map(createTag)
       const input = filterable ? (
         <div
@@ -519,18 +520,18 @@ export default defineComponent({
       // May Overflow
       const renderCounter = maxTagCountResponsive
         ? () => (
-          <div
-            class={`${clsPrefix}-base-selection-tag-wrapper`}
-            ref="counterWrapperRef"
-          >
-            <NTag
-              ref="counterRef"
-              onMouseenter={this.handleMouseEnterCounter}
-              onMouseleave={this.handleMouseLeaveCounter}
-              disabled={disabled}
-            />
-          </div>
-        )
+            <div
+              class={`${clsPrefix}-base-selection-tag-wrapper`}
+              ref="counterWrapperRef"
+            >
+              <NTag
+                ref="counterRef"
+                onMouseenter={this.handleMouseEnterCounter}
+                onMouseleave={this.handleMouseLeaveCounter}
+                disabled={disabled}
+              />
+            </div>
+          )
         : undefined
       let counter: JSX.Element | undefined
       if (maxTagCountNumeric) {
@@ -597,24 +598,24 @@ export default defineComponent({
       )
       const renderPopover = useMaxTagCount
         ? (): JSX.Element => (
-          <div class={`${clsPrefix}-base-selection-popover`}>
-            {maxTagCountResponsive
-              ? originalTags
-              : this.selectedOptions!.map(createTag)}
-          </div>
-        )
+            <div class={`${clsPrefix}-base-selection-popover`}>
+              {maxTagCountResponsive
+                ? originalTags
+                : this.selectedOptions!.map(createTag)}
+            </div>
+          )
         : undefined
       const popoverProps = useMaxTagCount
         ? ({
-          show: this.showTagsPanel,
-          trigger: 'hover',
-          overlap: true,
-          placement: 'top',
-          width: 'trigger',
-          onUpdateShow: this.onPopoverUpdateShow,
-          theme: this.mergedTheme.peers.Popover,
-          themeOverrides: this.mergedTheme.peerOverrides.Popover
-        } as const)
+            show: this.showTagsPanel,
+            trigger: 'hover',
+            overlap: true,
+            placement: 'top',
+            width: 'trigger',
+            onUpdateShow: this.onPopoverUpdateShow,
+            theme: this.mergedTheme.peers.Popover,
+            themeOverrides: this.mergedTheme.peerOverrides.Popover
+          } as const)
         : null
       const placeholder =
         !this.selected && !this.pattern && !this.isCompositing ? (
diff --git a/src/_mixins/use-form-item.ts b/src/_mixins/use-form-item.ts
index aea75f764..5a86d2786 100644
--- a/src/_mixins/use-form-item.ts
+++ b/src/_mixins/use-form-item.ts
@@ -21,9 +21,8 @@ export interface FormItemInjection {
   handleContentChange: () => void
 }
 
-export const formItemInjectionKey: InjectionKey<FormItemInjection> = Symbol(
-  'formItem'
-)
+export const formItemInjectionKey: InjectionKey<FormItemInjection> =
+  Symbol('formItem')
 
 interface UseFormItemOptions<T> {
   defaultSize?: FormItemSize
@@ -54,16 +53,16 @@ export default function useFormItem<T extends AllowedSize = FormItemSize> (
     mergedSize
       ? () => mergedSize(NFormItem)
       : () => {
-        const { size } = props as any
-        if (size) return size
-        if (NFormItem) {
-          const { mergedSize } = NFormItem
-          if (mergedSize.value !== undefined) {
-            return mergedSize.value as T
+          const { size } = props as any
+          if (size) return size
+          if (NFormItem) {
+            const { mergedSize } = NFormItem
+            if (mergedSize.value !== undefined) {
+              return mergedSize.value as T
+            }
           }
+          return defaultSize as T
         }
-        return defaultSize as T
-      }
   )
   onBeforeUnmount(() => {
     if (NFormItem) {
diff --git a/src/_mixins/use-theme.ts b/src/_mixins/use-theme.ts
index 69dc13ce1..12c18ae85 100644
--- a/src/_mixins/use-theme.ts
+++ b/src/_mixins/use-theme.ts
@@ -42,10 +42,10 @@ export type ExtractThemeVars<T> = T extends Theme<unknown, infer U, unknown>
 
 export type ExtractPeerOverrides<T> = T extends Theme<unknown, unknown, infer V>
   ? {
-    peers?: {
-      [k in keyof V]?: ExtractThemeOverrides<V[k]>
+      peers?: {
+        [k in keyof V]?: ExtractThemeOverrides<V[k]>
+      }
     }
-  }
   : T
 
 // V is peers theme
@@ -55,8 +55,8 @@ unknown,
 infer V
 >
   ? {
-    [k in keyof V]?: ExtractPeerOverrides<V[k]>
-  }
+      [k in keyof V]?: ExtractPeerOverrides<V[k]>
+    }
   : T
 
 export type ExtractThemeOverrides<T> = Partial<ExtractThemeVars<T>> &
@@ -76,11 +76,11 @@ type UseThemeProps<T> = Readonly<{
 
 export type MergedTheme<T> = T extends Theme<unknown, infer V, infer W>
   ? {
-    common: ThemeCommonVars
-    self: V
-    peers: W
-    peerOverrides: ExtractMergedPeerOverrides<T>
-  }
+      common: ThemeCommonVars
+      self: V
+      peers: W
+      peerOverrides: ExtractMergedPeerOverrides<T>
+    }
   : T
 
 function useTheme<N, T, R> (
diff --git a/src/color-picker/src/ColorInput.tsx b/src/color-picker/src/ColorInput.tsx
index cdb4afe18..9e55c0473 100644
--- a/src/color-picker/src/ColorInput.tsx
+++ b/src/color-picker/src/ColorInput.tsx
@@ -117,8 +117,8 @@ export default defineComponent({
                     valueArr === null
                       ? null
                       : (showAlpha ? toHexaString : toHexString)(
-                        valueArr as RGBA
-                      )
+                          valueArr as RGBA
+                        )
                 } catch {}
                 return (
                   <ColorInputUnit
diff --git a/src/data-table/src/TableParts/Body.tsx b/src/data-table/src/TableParts/Body.tsx
index 8762ca4a8..c4b45fe71 100644
--- a/src/data-table/src/TableParts/Body.tsx
+++ b/src/data-table/src/TableParts/Body.tsx
@@ -475,28 +475,28 @@ export default defineComponent({
                   >
                     {hasChildren && colIndex === firstContentfulColIndex
                       ? [
-                        repeat(
-                          isSummary ? 0 : (rowInfo as TmNode).level,
-                          <div
-                            class={`${mergedClsPrefix}-data-table-indent`}
-                            style={indentStyle}
-                          />
-                        ),
-                        isSummary || !(rowInfo as TmNode).children ? (
-                          <div
-                            class={`${mergedClsPrefix}-data-table-expand-placeholder`}
-                          />
-                        ) : (
-                          <ExpandTrigger
-                            class={`${mergedClsPrefix}-data-table-expand-trigger`}
-                            clsPrefix={mergedClsPrefix}
-                            expanded={expanded}
-                            onClick={() => {
-                              handleUpdateExpanded(rowKey)
-                            }}
-                          />
-                        )
-                      ]
+                          repeat(
+                            isSummary ? 0 : (rowInfo as TmNode).level,
+                            <div
+                              class={`${mergedClsPrefix}-data-table-indent`}
+                              style={indentStyle}
+                            />
+                          ),
+                          isSummary || !(rowInfo as TmNode).children ? (
+                            <div
+                              class={`${mergedClsPrefix}-data-table-expand-placeholder`}
+                            />
+                          ) : (
+                            <ExpandTrigger
+                              class={`${mergedClsPrefix}-data-table-expand-trigger`}
+                              clsPrefix={mergedClsPrefix}
+                              expanded={expanded}
+                              onClick={() => {
+                                handleUpdateExpanded(rowKey)
+                              }}
+                            />
+                          )
+                        ]
                       : null}
                     {column.type === 'selection' ? (
                       !isSummary ? (
@@ -513,12 +513,12 @@ export default defineComponent({
                       !isSummary ? (
                         !column.expandable ||
                         column.expandable?.(rowData, rowIndex) ? (
-                            <ExpandTrigger
-                              clsPrefix={mergedClsPrefix}
-                              expanded={expanded}
-                              onClick={() => handleUpdateExpanded(rowKey)}
-                            />
-                          ) : null
+                          <ExpandTrigger
+                            clsPrefix={mergedClsPrefix}
+                            expanded={expanded}
+                            onClick={() => handleUpdateExpanded(rowKey)}
+                          />
+                            ) : null
                       ) : null
                     ) : (
                       <Cell
diff --git a/src/data-table/src/TableParts/Header.tsx b/src/data-table/src/TableParts/Header.tsx
index 548a954cc..78bfd3514 100644
--- a/src/data-table/src/TableParts/Header.tsx
+++ b/src/data-table/src/TableParts/Header.tsx
@@ -149,12 +149,10 @@ export default defineComponent({
                         [`${mergedClsPrefix}-data-table-th--hover`]:
                           mergedSortState?.order &&
                           mergedSortState.columnKey === key,
-                        [`${mergedClsPrefix}-data-table-th--filterable`]: isColumnFilterable(
-                          column
-                        ),
-                        [`${mergedClsPrefix}-data-table-th--sortable`]: isColumnSortable(
-                          column
-                        ),
+                        [`${mergedClsPrefix}-data-table-th--filterable`]:
+                          isColumnFilterable(column),
+                        [`${mergedClsPrefix}-data-table-th--sortable`]:
+                          isColumnSortable(column),
                         [`${mergedClsPrefix}-data-table-th--selection`]:
                           column.type === 'selection',
                         [`${mergedClsPrefix}-data-table-th--last`]: isLast
@@ -166,8 +164,8 @@ export default defineComponent({
                       column.type !== 'expand' &&
                       !('children' in column)
                         ? (e) => {
-                          handleColHeaderClick(e, column)
-                        }
+                            handleColHeaderClick(e, column)
+                          }
                         : undefined
                     }
                   >
@@ -190,15 +188,15 @@ export default defineComponent({
                       </div>
                     ) // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
                       : ellipsis && ellipsis.tooltip ? (
-                        <NEllipsis
-                          tooltip={ellipsis.tooltip}
-                          theme={mergedTheme.peers.Ellipsis}
-                          themeOverrides={mergedTheme.peerOverrides.Ellipsis}
-                        >
-                          {{
-                            default: () => renderTitle(column)
-                          }}
-                        </NEllipsis>
+                      <NEllipsis
+                        tooltip={ellipsis.tooltip}
+                        theme={mergedTheme.peers.Ellipsis}
+                        themeOverrides={mergedTheme.peerOverrides.Ellipsis}
+                      >
+                        {{
+                          default: () => renderTitle(column)
+                        }}
+                      </NEllipsis>
                       ) : (
                         renderTitle(column)
                       )}
diff --git a/src/data-table/src/use-table-data.ts b/src/data-table/src/use-table-data.ts
index b29e81874..24b770f40 100644
--- a/src/data-table/src/use-table-data.ts
+++ b/src/data-table/src/use-table-data.ts
@@ -141,11 +141,9 @@ export function useTableData (
           column.sortOrder === false)
     )
     // if multiple column is controlled sortable, then we need to find a column with active sortOrder
-    const columnToSort:
-    | TableBaseColumn
-    | undefined = (columnsWithControlledSortOrder as TableBaseColumn[]).filter(
-      (col: TableBaseColumn) => col.sortOrder !== false
-    )[0]
+    const columnToSort: TableBaseColumn | undefined = (
+      columnsWithControlledSortOrder as TableBaseColumn[]
+    ).filter((col: TableBaseColumn) => col.sortOrder !== false)[0]
     if (columnToSort) {
       return {
         columnKey: columnToSort.key,
@@ -263,18 +261,18 @@ export function useTableData (
       const sorter =
         activeSorter.sorter === undefined || activeSorter.sorter === 'default'
           ? (row1: RowData, row2: RowData) => {
-            const value1 = row1[columnKey]
-            const value2 = row2[columnKey]
-            if (typeof value1 === 'number' && typeof value2 === 'number') {
-              return value1 - value2
-            } else if (
-              typeof value1 === 'string' &&
+              const value1 = row1[columnKey]
+              const value2 = row2[columnKey]
+              if (typeof value1 === 'number' && typeof value2 === 'number') {
+                return value1 - value2
+              } else if (
+                typeof value1 === 'string' &&
                 typeof value2 === 'string'
-            ) {
-              return value1.localeCompare(value2)
+              ) {
+                return value1.localeCompare(value2)
+              }
+              return 0
             }
-            return 0
-          }
           : activeSorter.sorter
       return filteredData.sort(
         (tmNode1, tmNode2) =>
@@ -308,10 +306,8 @@ export function useTableData (
   function mergedOnUpdatePageSize (pageSize: number): void {
     const { pagination } = props
     if (pagination) {
-      const {
-        onPageSizeChange,
-        'onUpdate:pageSize': onUpdatePageSize
-      } = pagination
+      const { onPageSizeChange, 'onUpdate:pageSize': onUpdatePageSize } =
+        pagination
       if (onPageSizeChange) call(onPageSizeChange, pageSize)
       if (onUpdatePageSize) call(onUpdatePageSize, pageSize)
       doUpdatePageSize(pageSize)
diff --git a/src/drawer/src/Drawer.tsx b/src/drawer/src/Drawer.tsx
index 4dd89c20e..a1b901bc8 100644
--- a/src/drawer/src/Drawer.tsx
+++ b/src/drawer/src/Drawer.tsx
@@ -67,12 +67,12 @@ const drawerProps = {
     type: [Object, String] as PropType<CSSProperties | string | undefined>,
     validator: __DEV__
       ? () => {
-        warn(
-          'drawer',
-          '`drawer-style` is deprecated, please use `style` instead.'
-        )
-        return true
-      }
+          warn(
+            'drawer',
+            '`drawer-style` is deprecated, please use `style` instead.'
+          )
+          return true
+        }
       : undefined,
     default: undefined
   },
@@ -81,21 +81,21 @@ const drawerProps = {
     type: String as PropType<string | undefined>,
     validator: __DEV__
       ? () => {
-        warn(
-          'drawer',
-          '`drawer-class` is deprecated, please use `class` instead.'
-        )
-        return true
-      }
+          warn(
+            'drawer',
+            '`drawer-class` is deprecated, please use `class` instead.'
+          )
+          return true
+        }
       : undefined,
     default: undefined
   },
   target: {
     validator: __DEV__
       ? () => {
-        warn('drawer', '`target` is deprecated, please use `to` instead.')
-        return true
-      }
+          warn('drawer', '`target` is deprecated, please use `to` instead.')
+          return true
+        }
       : undefined,
     default: undefined
   },
diff --git a/src/ellipsis/src/Ellipsis.tsx b/src/ellipsis/src/Ellipsis.tsx
index e505d9953..639a8d678 100644
--- a/src/ellipsis/src/Ellipsis.tsx
+++ b/src/ellipsis/src/Ellipsis.tsx
@@ -79,12 +79,12 @@ export default defineComponent({
     const handleClickRef = computed(() => {
       return props.expandTrigger === 'click'
         ? () => {
-          const { value: expanded } = expandedRef
-          if (expanded) {
-            tooltipRef.value?.setShow(false)
+            const { value: expanded } = expandedRef
+            if (expanded) {
+              tooltipRef.value?.setShow(false)
+            }
+            expandedRef.value = !expanded
           }
-          expandedRef.value = !expanded
-        }
         : undefined
     })
     const renderTrigger = (): JSX.Element => (
diff --git a/src/form/src/FormItem.tsx b/src/form/src/FormItem.tsx
index 9252815c4..6fc914c1b 100644
--- a/src/form/src/FormItem.tsx
+++ b/src/form/src/FormItem.tsx
@@ -407,10 +407,10 @@ export default defineComponent({
                 ? this.mergedShowRequireMark
                 : this.mergedRequired
             ) ? (
-                <span class={`${mergedClsPrefix}-form-item-label__asterisk`}>
+              <span class={`${mergedClsPrefix}-form-item-label__asterisk`}>
                 &nbsp;*
-                </span>
-              ) : null}
+              </span>
+                ) : null}
           </label>
         ) : null}
         <div
diff --git a/src/global.d.ts b/src/global.d.ts
index 8fb797b69..6d40ff0a2 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1,5 +1,5 @@
 export {}
 
 declare global {
-  var __DEV__: boolean
+  const __DEV__: boolean
 }
diff --git a/src/input/src/Input.tsx b/src/input/src/Input.tsx
index a3eb522c5..8a216ba6a 100644
--- a/src/input/src/Input.tsx
+++ b/src/input/src/Input.tsx
@@ -893,24 +893,24 @@ export default defineComponent({
           )}
           {!this.pair &&
           (this.$slots.suffix || this.clearable || this.showCount) ? (
-              <div class={`${mergedClsPrefix}-input__suffix`}>
-                {[
-                  renderSlot(this.$slots, 'suffix'),
-                  this.clearable || this.$slots.clear ? (
-                    <NBaseClear
-                      clsPrefix={mergedClsPrefix}
-                      show={this.showClearButton}
-                      onClear={this.handleClear}
-                    >
-                      {{ default: () => renderSlot(this.$slots, 'clear') }}
-                    </NBaseClear>
-                  ) : null,
-                  this.showCount && this.type !== 'textarea' ? (
-                    <WordCount />
-                  ) : null
-                ]}
-              </div>
-            ) : null}
+            <div class={`${mergedClsPrefix}-input__suffix`}>
+              {[
+                renderSlot(this.$slots, 'suffix'),
+                this.clearable || this.$slots.clear ? (
+                  <NBaseClear
+                    clsPrefix={mergedClsPrefix}
+                    show={this.showClearButton}
+                    onClear={this.handleClear}
+                  >
+                    {{ default: () => renderSlot(this.$slots, 'clear') }}
+                  </NBaseClear>
+                ) : null,
+                this.showCount && this.type !== 'textarea' ? (
+                  <WordCount />
+                ) : null
+              ]}
+            </div>
+              ) : null}
         </div>
         {/* pair input */}
         {this.pair ? (
diff --git a/src/layout/src/LayoutSider.tsx b/src/layout/src/LayoutSider.tsx
index cfd4cf6eb..993239237 100644
--- a/src/layout/src/LayoutSider.tsx
+++ b/src/layout/src/LayoutSider.tsx
@@ -259,9 +259,9 @@ export default defineComponent({
             builtinThemeOverrides={
               this.inverted && this.cssVars.__invertScrollbar === 'true'
                 ? {
-                  colorHover: 'rgba(255, 255, 255, .4)',
-                  color: 'rgba(255, 255, 255, .3)'
-                }
+                    colorHover: 'rgba(255, 255, 255, .4)',
+                    color: 'rgba(255, 255, 255, .3)'
+                  }
                 : undefined
             }
           >
diff --git a/src/modal/src/BodyWrapper.tsx b/src/modal/src/BodyWrapper.tsx
index 5eadedd7e..2a579d0ee 100644
--- a/src/modal/src/BodyWrapper.tsx
+++ b/src/modal/src/BodyWrapper.tsx
@@ -183,26 +183,26 @@ export default defineComponent({
     }
     return this.displayDirective === 'show' || this.displayed || this.show
       ? withDirectives(
-        <div class={`${mergedClsPrefix}-modal-body-wrapper`}>
-          <NScrollbar
-            ref="scrollbarRef"
-            theme={this.mergedTheme.peers.Scrollbar}
-            themeOverrides={this.mergedTheme.peerOverrides.Scrollbar}
-            contentClass={`${mergedClsPrefix}-modal-scroll-content`}
-          >
-            {{
-              default: () => (
-                <Transition
-                  name="fade-in-scale-up-transition"
-                  appear={this.appear ?? this.isMounted}
-                  onEnter={handleEnter as any}
-                  onAfterLeave={handleAfterLeave}
-                  onBeforeLeave={handleBeforeLeave as any}
-                >
-                  {{
-                    default: () =>
-                      withDirectives(
-                        (this.preset === 'confirm' ||
+          <div class={`${mergedClsPrefix}-modal-body-wrapper`}>
+            <NScrollbar
+              ref="scrollbarRef"
+              theme={this.mergedTheme.peers.Scrollbar}
+              themeOverrides={this.mergedTheme.peerOverrides.Scrollbar}
+              contentClass={`${mergedClsPrefix}-modal-scroll-content`}
+            >
+              {{
+                default: () => (
+                  <Transition
+                    name="fade-in-scale-up-transition"
+                    appear={this.appear ?? this.isMounted}
+                    onEnter={handleEnter as any}
+                    onAfterLeave={handleAfterLeave}
+                    onBeforeLeave={handleBeforeLeave as any}
+                  >
+                    {{
+                      default: () =>
+                        withDirectives(
+                          (this.preset === 'confirm' ||
                           this.preset === 'dialog' ? (
                             <NDialog
                               {...this.$attrs}
@@ -216,7 +216,7 @@ export default defineComponent({
                             >
                               {$slots}
                             </NDialog>
-                          ) : this.preset === 'card' ? (
+                              ) : this.preset === 'card' ? (
                             <NCard
                               {...this.$attrs}
                               ref="bodyRef"
@@ -229,26 +229,26 @@ export default defineComponent({
                             >
                               {$slots}
                             </NCard>
-                          ) : (
-                            childNode
-                          )) as any,
-                        [
-                          [vShow, this.show],
-                          [clickoutside, handleClickOutside]
-                        ]
-                      )
-                  }}
-                </Transition>
-              )
-            }}
-          </NScrollbar>
-        </div>,
-        [
+                              ) : (
+                                childNode
+                              )) as any,
+                          [
+                            [vShow, this.show],
+                            [clickoutside, handleClickOutside]
+                          ]
+                        )
+                    }}
+                  </Transition>
+                )
+              }}
+            </NScrollbar>
+          </div>,
           [
-            vShow,
-            this.displayDirective === 'if' || this.displayed || this.show
+            [
+              vShow,
+              this.displayDirective === 'if' || this.displayed || this.show
+            ]
           ]
-        ]
       )
       : null
   }
diff --git a/src/pagination/src/Pagination.tsx b/src/pagination/src/Pagination.tsx
index e6b15d924..7cdac312a 100644
--- a/src/pagination/src/Pagination.tsx
+++ b/src/pagination/src/Pagination.tsx
@@ -267,28 +267,28 @@ export default defineComponent({
     function handlePageItemMouseEnter (pageItem: PageItem): void {
       if (props.disabled) return
       switch (pageItem.type) {
-        default:
-          return
         case 'fastBackward':
           showFastBackwardRef.value = true
           break
         case 'fastForward':
           showFastForwardRef.value = true
           break
+        default:
+          return
       }
       disableTransitionOneTick()
     }
     function handlePageItemMouseLeave (pageItem: PageItem): void {
       if (props.disabled) return
       switch (pageItem.type) {
-        default:
-          return
         case 'fastBackward':
           showFastBackwardRef.value = false
           break
         case 'fastForward':
           showFastForwardRef.value = false
           break
+        default:
+          return
       }
       disableTransitionOneTick()
     }
@@ -458,7 +458,7 @@ export default defineComponent({
         {prefix || $slots.prefix ? (
           <div class={`${mergedClsPrefix}-pagination-prefix`}>
             {($slots.prefix
-              ? (($slots.prefix as unknown) as RenderPrefix)
+              ? ($slots.prefix as unknown as RenderPrefix)
               : prefix!)({
               page: mergedPage,
               pageSize: mergedPageSize,
@@ -487,7 +487,8 @@ export default defineComponent({
               class={[
                 `${mergedClsPrefix}-pagination-item`,
                 {
-                  [`${mergedClsPrefix}-pagination-item--active`]: pageItem.active,
+                  [`${mergedClsPrefix}-pagination-item--active`]:
+                    pageItem.active,
                   [`${mergedClsPrefix}-pagination-item--disabled`]: disabled
                 }
               ]}
@@ -566,7 +567,7 @@ export default defineComponent({
         {suffix || $slots.suffix ? (
           <div class={`${mergedClsPrefix}-pagination-suffix`}>
             {($slots.suffix
-              ? (($slots.suffix as unknown) as RenderSuffix)
+              ? ($slots.suffix as unknown as RenderSuffix)
               : suffix!)({
               page: mergedPage,
               pageSize: mergedPageSize,
diff --git a/src/select/src/Select.tsx b/src/select/src/Select.tsx
index ca0786239..651e52a83 100644
--- a/src/select/src/Select.tsx
+++ b/src/select/src/Select.tsx
@@ -786,9 +786,9 @@ export default defineComponent({
                             </NInternalSelectMenu>,
                             this.displayDirective === 'show'
                               ? [
-                                [vShow, this.mergedShow],
-                                [clickoutside, this.handleMenuClickOutside]
-                              ]
+                                  [vShow, this.mergedShow],
+                                  [clickoutside, this.handleMenuClickOutside]
+                                ]
                               : [[clickoutside, this.handleMenuClickOutside]]
                           )
                       }}
diff --git a/src/space/src/Space.tsx b/src/space/src/Space.tsx
index 640eba685..c3fee98e0 100644
--- a/src/space/src/Space.tsx
+++ b/src/space/src/Space.tsx
@@ -127,13 +127,13 @@ export default defineComponent({
               },
               vertical
                 ? {
-                  marginBottom: index !== lastIndex ? verticalMargin : ''
-                }
+                    marginBottom: index !== lastIndex ? verticalMargin : ''
+                  }
                 : {
-                  marginRight: index !== lastIndex ? horizontalMargin : '',
-                  paddingTop: semiVerticalMargin,
-                  paddingBottom: semiVerticalMargin
-                }
+                    marginRight: index !== lastIndex ? horizontalMargin : '',
+                    paddingTop: semiVerticalMargin,
+                    paddingBottom: semiVerticalMargin
+                  }
             ]}
           >
             {child}
diff --git a/src/steps/src/Step.tsx b/src/steps/src/Step.tsx
index bb612b0c0..b6d100ffc 100644
--- a/src/steps/src/Step.tsx
+++ b/src/steps/src/Step.tsx
@@ -123,21 +123,21 @@ export default defineComponent({
                   return !(
                     mergedStatus === 'finish' || mergedStatus === 'error'
                   ) ? (
-                      <div
-                        key={this.internalIndex}
-                        class={`${mergedClsPrefix}-step-indicator-slot__index`}
-                      >
-                        {this.internalIndex}
-                      </div>
-                    ) : mergedStatus === 'finish' ? (
-                      <NBaseIcon clsPrefix={mergedClsPrefix} key="finish">
-                        {{ default: () => <FinishedIcon /> }}
-                      </NBaseIcon>
-                    ) : mergedStatus === 'error' ? (
-                      <NBaseIcon clsPrefix={mergedClsPrefix} key="error">
-                        {{ default: () => <ErrorIcon /> }}
-                      </NBaseIcon>
-                    ) : null
+                    <div
+                      key={this.internalIndex}
+                      class={`${mergedClsPrefix}-step-indicator-slot__index`}
+                    >
+                      {this.internalIndex}
+                    </div>
+                      ) : mergedStatus === 'finish' ? (
+                    <NBaseIcon clsPrefix={mergedClsPrefix} key="finish">
+                      {{ default: () => <FinishedIcon /> }}
+                    </NBaseIcon>
+                      ) : mergedStatus === 'error' ? (
+                    <NBaseIcon clsPrefix={mergedClsPrefix} key="error">
+                      {{ default: () => <ErrorIcon /> }}
+                    </NBaseIcon>
+                      ) : null
                 }
               }}
             </NIconSwitchTransition>
diff --git a/src/theme-editor/src/ThemeEditor.tsx b/src/theme-editor/src/ThemeEditor.tsx
index da5d4fc3b..e1fd8c8e1 100644
--- a/src/theme-editor/src/ThemeEditor.tsx
+++ b/src/theme-editor/src/ThemeEditor.tsx
@@ -263,7 +263,8 @@ export default defineComponent({
                                   {this.locale.filterCompName}
                                   <NInput
                                     onChange={() => {
-                                      this.compNamePattern = this.tempCompNamePattern
+                                      this.compNamePattern =
+                                        this.tempCompNamePattern
                                     }}
                                     onInput={(value: string) => {
                                       this.tempCompNamePattern = value
@@ -343,8 +344,10 @@ export default defineComponent({
                                   varNamePattern
                                 } = this
                                 const themeKeys = Object.keys(theme)
-                                const compNamePatternLower = compNamePattern.toLowerCase()
-                                const varNamePatternLower = varNamePattern.toLowerCase()
+                                const compNamePatternLower =
+                                  compNamePattern.toLowerCase()
+                                const varNamePatternLower =
+                                  varNamePattern.toLowerCase()
                                 let filteredItemsCount = 0
                                 const collapsedItems = themeKeys
                                   .filter((themeKey) => {
@@ -400,98 +403,99 @@ export default defineComponent({
                                                         varKey.includes(
                                                           'Color'
                                                         ) ? (
-                                                            <NColorPicker
-                                                              key={varKey}
-                                                              modes={[
-                                                                'rgb',
-                                                                'hex'
-                                                              ]}
-                                                              value={
-                                                                this
-                                                                  .tempOverrides?.[
-                                                                    themeKey
-                                                                  ]?.[varKey] ||
+                                                          <NColorPicker
+                                                            key={varKey}
+                                                            modes={[
+                                                              'rgb',
+                                                              'hex'
+                                                            ]}
+                                                            value={
+                                                              this
+                                                                .tempOverrides?.[
+                                                                  themeKey
+                                                                ]?.[varKey] ||
                                                               componentTheme[
                                                                 varKey
                                                               ]
-                                                              }
-                                                              onComplete={
-                                                                this
-                                                                  .applyTempOverrides
-                                                              }
-                                                              onUpdateValue={(
-                                                                value: string
-                                                              ) => {
-                                                                this.setTempOverrides(
-                                                                  themeKey,
-                                                                  varKey,
-                                                                  value
-                                                                )
-                                                              }}
-                                                            >
-                                                              {{
-                                                                action: () => (
-                                                                  <NButton
-                                                                    size="small"
-                                                                    disabled={
-                                                                      componentTheme[
-                                                                        varKey
-                                                                      ] ===
+                                                            }
+                                                            onComplete={
+                                                              this
+                                                                .applyTempOverrides
+                                                            }
+                                                            onUpdateValue={(
+                                                              value: string
+                                                            ) => {
+                                                              this.setTempOverrides(
+                                                                themeKey,
+                                                                varKey,
+                                                                value
+                                                              )
+                                                            }}
+                                                          >
+                                                            {{
+                                                              action: () => (
+                                                                <NButton
+                                                                  size="small"
+                                                                  disabled={
+                                                                    componentTheme[
+                                                                      varKey
+                                                                    ] ===
                                                                     this
                                                                       .tempOverrides?.[
                                                                         themeKey
                                                                       ]?.[varKey]
-                                                                    }
-                                                                    onClick={() => {
-                                                                      this.setTempOverrides(
-                                                                        themeKey,
-                                                                        varKey,
-                                                                        componentTheme[
-                                                                          varKey
-                                                                        ]
-                                                                      )
-                                                                      this.applyTempOverrides()
-                                                                    }}
-                                                                  >
-                                                                    {{
-                                                                      default: () =>
+                                                                  }
+                                                                  onClick={() => {
+                                                                    this.setTempOverrides(
+                                                                      themeKey,
+                                                                      varKey,
+                                                                      componentTheme[
+                                                                        varKey
+                                                                      ]
+                                                                    )
+                                                                    this.applyTempOverrides()
+                                                                  }}
+                                                                >
+                                                                  {{
+                                                                    default:
+                                                                      () =>
                                                                         this
                                                                           .locale
                                                                           .restore
-                                                                    }}
-                                                                  </NButton>
-                                                                )
-                                                              }}
-                                                            </NColorPicker>
-                                                          ) : (
-                                                            <NInput
-                                                              key={varKey}
-                                                              onChange={
-                                                                this
-                                                                  .applyTempOverrides
-                                                              }
-                                                              onUpdateValue={(
-                                                                value: string
-                                                              ) => {
-                                                                this.setTempOverrides(
-                                                                  themeKey,
-                                                                  varKey,
-                                                                  value
-                                                                )
-                                                              }}
-                                                              value={
-                                                                this
-                                                                  .tempOverrides?.[
-                                                                    themeKey
-                                                                  ]?.[varKey] || ''
-                                                              }
-                                                              placeholder={
-                                                                componentTheme[
-                                                                  varKey
-                                                                ]
-                                                              }
-                                                            />
-                                                          )
+                                                                  }}
+                                                                </NButton>
+                                                              )
+                                                            }}
+                                                          </NColorPicker>
+                                                            ) : (
+                                                          <NInput
+                                                            key={varKey}
+                                                            onChange={
+                                                              this
+                                                                .applyTempOverrides
+                                                            }
+                                                            onUpdateValue={(
+                                                              value: string
+                                                            ) => {
+                                                              this.setTempOverrides(
+                                                                themeKey,
+                                                                varKey,
+                                                                value
+                                                              )
+                                                            }}
+                                                            value={
+                                                              this
+                                                                .tempOverrides?.[
+                                                                  themeKey
+                                                                ]?.[varKey] || ''
+                                                            }
+                                                            placeholder={
+                                                              componentTheme[
+                                                                varKey
+                                                              ]
+                                                            }
+                                                          />
+                                                            )
                                                       ]
                                                     })
                                                 }}
diff --git a/src/thing/src/Thing.tsx b/src/thing/src/Thing.tsx
index 360bb19e6..ea1b7e191 100644
--- a/src/thing/src/Thing.tsx
+++ b/src/thing/src/Thing.tsx
@@ -72,75 +72,75 @@ export default defineComponent({
               slots['header-extra'] ||
               props.titleExtra ||
               slots.avatar) ? (
-                <div class={`${mergedClsPrefix}-thing-avatar-header-wrapper`}>
-                  {slots.avatar ? (
-                    <div class={`${mergedClsPrefix}-thing-avatar`}>
-                      {renderSlot(slots, 'avatar')}
-                    </div>
-                  ) : null}
-                  {slots.header ||
+              <div class={`${mergedClsPrefix}-thing-avatar-header-wrapper`}>
+                {slots.avatar ? (
+                  <div class={`${mergedClsPrefix}-thing-avatar`}>
+                    {renderSlot(slots, 'avatar')}
+                  </div>
+                ) : null}
+                {slots.header ||
                 props.title ||
                 slots['header-extra'] ||
                 props.titleExtra ? (
-                      <div class={`${mergedClsPrefix}-thing-header-wrapper`}>
-                        <div class={`${mergedClsPrefix}-thing-header`}>
-                          {slots.header || props.title ? (
-                            <div class={`${mergedClsPrefix}-thing-header__title`}>
-                              {renderSlot(slots, 'header', undefined, () => [
-                                props.title
-                              ])}
-                            </div>
-                          ) : null}
-                          {slots['header-extra'] || props.titleExtra ? (
-                            <div class={`${mergedClsPrefix}-thing-header__extra`}>
-                              {renderSlot(slots, 'header-extra', undefined, () => [
-                                props.titleExtra
-                              ])}
-                            </div>
-                          ) : null}
+                  <div class={`${mergedClsPrefix}-thing-header-wrapper`}>
+                    <div class={`${mergedClsPrefix}-thing-header`}>
+                      {slots.header || props.title ? (
+                        <div class={`${mergedClsPrefix}-thing-header__title`}>
+                          {renderSlot(slots, 'header', undefined, () => [
+                            props.title
+                          ])}
                         </div>
-                        {slots.description || props.description ? (
-                          <div class={`${mergedClsPrefix}-thing-main__description`}>
-                            {renderSlot(slots, 'description', undefined, () => [
-                              props.description
-                            ])}
-                          </div>
-                        ) : null}
+                      ) : null}
+                      {slots['header-extra'] || props.titleExtra ? (
+                        <div class={`${mergedClsPrefix}-thing-header__extra`}>
+                          {renderSlot(slots, 'header-extra', undefined, () => [
+                            props.titleExtra
+                          ])}
+                        </div>
+                      ) : null}
+                    </div>
+                    {slots.description || props.description ? (
+                      <div class={`${mergedClsPrefix}-thing-main__description`}>
+                        {renderSlot(slots, 'description', undefined, () => [
+                          props.description
+                        ])}
                       </div>
                     ) : null}
-                </div>
-              ) : (
-                <>
-                  {slots.header ||
+                  </div>
+                    ) : null}
+              </div>
+                ) : (
+              <>
+                {slots.header ||
                 props.title ||
                 slots['header-extra'] ||
                 props.titleExtra ? (
-                      <div class={`${mergedClsPrefix}-thing-header`}>
-                        {slots.header || props.title ? (
-                          <div class={`${mergedClsPrefix}-thing-header__title`}>
-                            {renderSlot(slots, 'header', undefined, () => [
-                              props.title
-                            ])}
-                          </div>
-                        ) : null}
-                        {slots['header-extra'] || props.titleExtra ? (
-                          <div class={`${mergedClsPrefix}-thing-header__extra`}>
-                            {renderSlot(slots, 'header-extra', undefined, () => [
-                              props.titleExtra
-                            ])}
-                          </div>
-                        ) : null}
+                  <div class={`${mergedClsPrefix}-thing-header`}>
+                    {slots.header || props.title ? (
+                      <div class={`${mergedClsPrefix}-thing-header__title`}>
+                        {renderSlot(slots, 'header', undefined, () => [
+                          props.title
+                        ])}
                       </div>
                     ) : null}
-                  {slots.description || props.description ? (
-                    <div class={`${mergedClsPrefix}-thing-main__description`}>
-                      {renderSlot(slots, 'description', undefined, () => [
-                        props.description
-                      ])}
-                    </div>
-                  ) : null}
-                </>
-              )}
+                    {slots['header-extra'] || props.titleExtra ? (
+                      <div class={`${mergedClsPrefix}-thing-header__extra`}>
+                        {renderSlot(slots, 'header-extra', undefined, () => [
+                          props.titleExtra
+                        ])}
+                      </div>
+                    ) : null}
+                  </div>
+                    ) : null}
+                {slots.description || props.description ? (
+                  <div class={`${mergedClsPrefix}-thing-main__description`}>
+                    {renderSlot(slots, 'description', undefined, () => [
+                      props.description
+                    ])}
+                  </div>
+                ) : null}
+              </>
+                )}
             {slots.default || props.content ? (
               <div class={`${mergedClsPrefix}-thing-main__content`}>
                 {renderSlot(slots, 'default', undefined, () => [props.content])}
diff --git a/src/time-picker/src/TimePicker.tsx b/src/time-picker/src/TimePicker.tsx
index c6e43c674..86e298746 100644
--- a/src/time-picker/src/TimePicker.tsx
+++ b/src/time-picker/src/TimePicker.tsx
@@ -127,9 +127,8 @@ export default defineComponent({
   name: 'TimePicker',
   props: timePickerProps,
   setup (props) {
-    const { mergedBorderedRef, mergedClsPrefixRef, namespaceRef } = useConfig(
-      props
-    )
+    const { mergedBorderedRef, mergedClsPrefixRef, namespaceRef } =
+      useConfig(props)
     const { localeRef, dateLocaleRef } = useLocale('TimePicker')
     const formItem = useFormItem(props)
     const themeRef = useTheme(
@@ -362,11 +361,8 @@ export default defineComponent({
     }
     function scrollTimer (): void {
       if (!panelInstRef.value) return
-      const {
-        hourScrollRef,
-        minuteScrollRef,
-        secondScrollRef
-      } = panelInstRef.value
+      const { hourScrollRef, minuteScrollRef, secondScrollRef } =
+        panelInstRef.value
       if (hourScrollRef) {
         const hour = hourScrollRef.contentRef?.querySelector(
           '[data-active]'
@@ -625,17 +621,17 @@ export default defineComponent({
                     >
                       {this.showIcon
                         ? {
-                          suffix: () => (
-                            <NBaseIcon
-                              clsPrefix={mergedClsPrefix}
-                              class={`${mergedClsPrefix}-time-picker-icon`}
-                            >
-                              {{
-                                default: () => <TimeIcon />
-                              }}
-                            </NBaseIcon>
-                          )
-                        }
+                            suffix: () => (
+                              <NBaseIcon
+                                clsPrefix={mergedClsPrefix}
+                                class={`${mergedClsPrefix}-time-picker-icon`}
+                              >
+                                {{
+                                  default: () => <TimeIcon />
+                                }}
+                              </NBaseIcon>
+                            )
+                          }
                         : null}
                     </NInput>
                   )
@@ -658,37 +654,37 @@ export default defineComponent({
                         default: () =>
                           this.active
                             ? withDirectives(
-                              <Panel
-                                ref="panelInstRef"
-                                style={this.cssVars as CSSProperties}
-                                transitionDisabled={this.transitionDisabled}
-                                hourValue={this.hourValue}
-                                showHour={this.hourInFormat}
-                                isHourInvalid={this.isHourInvalid}
-                                isHourDisabled={this.isHourDisabled}
-                                minuteValue={this.minuteValue}
-                                showMinute={this.minuteInFormat}
-                                isMinuteInvalid={this.isMinuteInvalid}
-                                isMinuteDisabled={this.isMinuteDisabled}
-                                secondValue={this.secondValue}
-                                showSecond={this.secondInFormat}
-                                isSecondInvalid={this.isSecondInvalid}
-                                isSecondDisabled={this.isSecondDisabled}
-                                isValueInvalid={this.isValueInvalid}
-                                nowText={this.localizedNow}
-                                confirmText={this.localizedPositiveText}
-                                onFocusout={this.handleMenuFocusOut}
-                                onKeydown={this.handleMenuKeyDown}
-                                onHourClick={this.handleHourClick}
-                                onMinuteClick={this.handleMinuteClick}
-                                onSecondClick={this.handleSecondClick}
-                                onNowClick={this.handleNowClick}
-                                onConfirmClick={this.handleConfirmClick}
-                                onFocusDetectorFocus={
-                                  this.handleFocusDetectorFocus
-                                }
-                              />,
-                              [[clickoutside, this.handleClickOutside]]
+                                <Panel
+                                  ref="panelInstRef"
+                                  style={this.cssVars as CSSProperties}
+                                  transitionDisabled={this.transitionDisabled}
+                                  hourValue={this.hourValue}
+                                  showHour={this.hourInFormat}
+                                  isHourInvalid={this.isHourInvalid}
+                                  isHourDisabled={this.isHourDisabled}
+                                  minuteValue={this.minuteValue}
+                                  showMinute={this.minuteInFormat}
+                                  isMinuteInvalid={this.isMinuteInvalid}
+                                  isMinuteDisabled={this.isMinuteDisabled}
+                                  secondValue={this.secondValue}
+                                  showSecond={this.secondInFormat}
+                                  isSecondInvalid={this.isSecondInvalid}
+                                  isSecondDisabled={this.isSecondDisabled}
+                                  isValueInvalid={this.isValueInvalid}
+                                  nowText={this.localizedNow}
+                                  confirmText={this.localizedPositiveText}
+                                  onFocusout={this.handleMenuFocusOut}
+                                  onKeydown={this.handleMenuKeyDown}
+                                  onHourClick={this.handleHourClick}
+                                  onMinuteClick={this.handleMinuteClick}
+                                  onSecondClick={this.handleSecondClick}
+                                  onNowClick={this.handleNowClick}
+                                  onConfirmClick={this.handleConfirmClick}
+                                  onFocusDetectorFocus={
+                                    this.handleFocusDetectorFocus
+                                  }
+                                />,
+                                [[clickoutside, this.handleClickOutside]]
                             )
                             : null
                       }}
diff --git a/src/transfer/src/TransferListItem.tsx b/src/transfer/src/TransferListItem.tsx
index 3b7ab62d5..5c2e88112 100644
--- a/src/transfer/src/TransferListItem.tsx
+++ b/src/transfer/src/TransferListItem.tsx
@@ -39,15 +39,15 @@ export default defineComponent({
       : useMemo(() => tgtCheckedValuesRef.value.includes(props.value))
     const handleClick = source
       ? () => {
-        if (!props.disabled) {
-          handleSrcCheckboxClick(!checkedRef.value, props.value)
+          if (!props.disabled) {
+            handleSrcCheckboxClick(!checkedRef.value, props.value)
+          }
         }
-      }
       : () => {
-        if (!props.disabled) {
-          handleTgtCheckboxClick(!checkedRef.value, props.value)
+          if (!props.disabled) {
+            handleTgtCheckboxClick(!checkedRef.value, props.value)
+          }
         }
-      }
     return {
       mergedClsPrefix: mergedClsPrefixRef,
       mergedTheme: mergedThemeRef,
@@ -56,14 +56,8 @@ export default defineComponent({
     }
   },
   render () {
-    const {
-      disabled,
-      mergedTheme,
-      mergedClsPrefix,
-      label,
-      checked,
-      source
-    } = this
+    const { disabled, mergedTheme, mergedClsPrefix, label, checked, source } =
+      this
     return (
       <div
         class={[
diff --git a/src/tree/src/TreeNode.tsx b/src/tree/src/TreeNode.tsx
index 1323c0c8c..49d7d7a3d 100644
--- a/src/tree/src/TreeNode.tsx
+++ b/src/tree/src/TreeNode.tsx
@@ -204,12 +204,12 @@ const TreeNode = defineComponent({
     // it need to be append to node itself, not wrapper
     const dragEventHandlers = draggable
       ? {
-        onDragenter: this.handleDragEnter,
-        onDragleave: this.handleDragLeave,
-        onDragend: this.handleDragEnd,
-        onDrop: this.handleDrop,
-        onDragover: this.handleDragOver
-      }
+          onDragenter: this.handleDragEnter,
+          onDragleave: this.handleDragLeave,
+          onDragend: this.handleDragEnd,
+          onDrop: this.handleDrop,
+          onDragover: this.handleDragOver
+        }
       : undefined
     return (
       <div class={`${clsPrefix}-tree-node-wrapper`} {...dragEventHandlers}>