Style: all - change page padding to 20px

package.json

@@ -6,8 +6,9 @@
   "scripts": {
     "dev": "vite",
     "dev-host": "vite --host 0.0.0.0",
-    "build": "vite build",
+    "build": "vite build && npm run typecheck",
     "build-test": "vite build --mode testing",
+    "typecheck": "tsc",
     "clean": "rimraf dist .eslintrc-auto-import.json auto-imports.d.ts",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier --write src/",

src/assets/css/pages/system/index.scss

@@ -2,7 +2,7 @@
 
 [data-component=system] {
   .root-content {
-    padding: 30px;
+    padding: 20px;
     gap: 20px;
     flex-wrap: wrap;
     justify-content: flex-start;

src/assets/css/pages/system/settings.scss

@@ -2,7 +2,7 @@
 
 [data-component=system-settings] {
   .root-content {
-    padding: 30px;
+    padding: 20px;
     gap: 20px;
 
     .root-col {

src/assets/css/pages/system/statistics.scss

@@ -2,7 +2,7 @@
 
 [data-component=system-statistics] {
   .root-content {
-    padding: 30px;
+    padding: 20px;
     gap: 20px;
     flex-wrap: wrap;
     justify-content: center;

src/assets/css/pages/system/tools/base.scss

@@ -2,7 +2,7 @@
 
 [data-component=system-tools-base] {
   .root-content {
-    padding: 30px;
+    padding: 20px;
     gap: 10px;
     height: 100%;
     width: 100%;

src/assets/css/pages/system/tools/code.scss

@@ -1,5 +1,5 @@
 [data-component=system-tools-code] {
-  padding: 30px;
+  padding: 20px;
 
   .card-box {
     width: 100%;

src/assets/css/pages/system/tools/execute.scss

@@ -1,5 +1,5 @@
 [data-component=system-tools-execute] {
-  padding: 30px;
+  padding: 20px;
 
   .card-box {
     width: 100%;

src/assets/css/pages/tools/edit.scss

@@ -1,4 +1,10 @@
 [data-component=tools-edit] {
+  padding: 20px;
+
+  .card-box {
+    height: 100%;
+    width: 100%;
+
     .root-content {
       width: 100%;
       height: 100%;
@@ -13,10 +19,11 @@
         height: 100%;
       }
     }
+  }
 
   .draggable-content {
     position: fixed;
-    inset-inline-end: 32px;
+    inset-inline-end: 48px;
     inset-block-end: 48px;
 
     > * {

src/assets/css/pages/tools/index.scss

@@ -3,7 +3,7 @@
 
 [data-component=tools] {
   .root-content {
-    padding: 30px;
+    padding: 20px;
     gap: 20px;
     flex-wrap: wrap;
     justify-content: flex-start;

src/assets/css/pages/tools/source.scss

@@ -1,5 +1,5 @@
 [data-component=tools-source] {
-  padding: 30px;
+  padding: 20px;
 
   .card-box {
     width: 100%;

src/assets/css/pages/tools/store.scss

@@ -21,7 +21,7 @@
   }
 
   .root-content {
-    padding: 30px;
+    padding: 20px;
     gap: 20px;
     flex-wrap: wrap;
     justify-content: center;

src/assets/css/pages/tools/user.scss

@@ -3,9 +3,9 @@
 [data-component=tools-store-user] .root-content {
   padding: {
     top: 80px;
-    left: 30px;
+    left: 20px;
-    right: 30px;
+    right: 20px;
-    bottom: 30px;
+    bottom: 20px;
   };
 
   .root-box {

src/assets/css/pages/tools/view.scss

@@ -1,5 +1,5 @@
 [data-component=tools-view] {
-  padding: 30px;
+  padding: 20px;
 
   .card-box {
     height: 100%;

src/assets/css/pages/user/index.scss

@@ -3,9 +3,9 @@
 [data-component=user] .root-content {
   padding: {
     top: 80px;
-    left: 30px;
+    left: 20px;
-    right: 30px;
+    right: 20px;
-    bottom: 30px;
+    bottom: 20px;
   };
 
   .card-box {

src/pages/System/Group.tsx

@@ -634,7 +634,7 @@ const Group = () => {
         <>
             <FitFullscreen data-component={'system-group'}>
                 <HideScrollbar
-                    style={{ padding: 30 }}
+                    style={{ padding: 20 }}
                     isShowVerticalScrollbar
                     autoHideWaitingTime={1000}
                 >

src/pages/System/Log.tsx

@@ -285,7 +285,7 @@ const Log = () => {
         <>
             <FitFullscreen>
                 <HideScrollbar
-                    style={{ padding: 30 }}
+                    style={{ padding: 20 }}
                     isShowVerticalScrollbar
                     autoHideWaitingTime={1000}
                 >

src/pages/System/Role.tsx

@@ -641,7 +641,7 @@ const Role = () => {
         <>
             <FitFullscreen>
                 <HideScrollbar
-                    style={{ padding: 30 }}
+                    style={{ padding: 20 }}
                     isShowVerticalScrollbar
                     autoHideWaitingTime={1000}
                 >

src/pages/System/Tools/Category.tsx

@@ -286,7 +286,7 @@ const Category = () => {
         <>
             <FitFullscreen data-component={'system-tools-category'}>
                 <HideScrollbar
-                    style={{ padding: 30 }}
+                    style={{ padding: 20 }}
                     isShowVerticalScrollbar
                     autoHideWaitingTime={1000}
                 >

src/pages/System/Tools/index.tsx

@@ -568,7 +568,7 @@ const Tools = () => {
         <>
             <FitFullscreen>
                 <HideScrollbar
-                    style={{ padding: 30 }}
+                    style={{ padding: 20 }}
                     isShowVerticalScrollbar
                     autoHideWaitingTime={1000}
                 >

src/pages/System/User.tsx

@@ -1010,7 +1010,7 @@ const User = () => {
         <>
             <FitFullscreen>
                 <HideScrollbar
-                    style={{ padding: 30 }}
+                    style={{ padding: 20 }}
                     isShowVerticalScrollbar
                     autoHideWaitingTime={1000}
                 >

src/pages/Tools/Edit.tsx

@@ -21,6 +21,7 @@ import Playground from '@/components/Playground'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FlexBox from '@/components/common/FlexBox'
 import LoadingMask from '@/components/common/LoadingMask'
+import Card from '@/components/common/Card'
 
 const Edit = () => {
     const navigate = useNavigate()
@@ -403,6 +404,7 @@ const Edit = () => {
     return (
         <>
             <FitFullscreen data-component={'tools-edit'}>
+                <Card>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <LoadingMask hidden={!loading}>
                             <Playground.CodeEditor
@@ -438,6 +440,7 @@ const Edit = () => {
                         </LoadingMask>
                         {showDraggableMask && <div className={'draggable-mask'} />}
                     </FlexBox>
+                </Card>
                 <Draggable
                     onStart={() => setShowDraggableMask(true)}
                     onStop={() => setShowDraggableMask(false)}