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/common.scss

@@ -115,4 +115,4 @@
 .flex-vertical {
   display: flex;
   flex-direction: column;
-}
+}

src/assets/css/components/common/card.scss

@@ -5,4 +5,4 @@
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1);
-}
+}

src/assets/css/components/common/hide-scrollbar.scss

@@ -90,4 +90,4 @@
       height: 8px;
     }
   }
-}
+}

src/assets/css/components/common/indicator.scss

@@ -31,4 +31,4 @@
   .active > * {
     background-color: constants.$font-secondary-color !important;
   }
-}
+}

src/assets/css/components/common/sidebar.scss

@@ -319,4 +319,4 @@
       }
     }
   }
-}
+}

src/assets/css/pages/sign.scss

@@ -146,4 +146,4 @@
       }
     }
   }
-}
+}

src/assets/css/pages/system-framework.scss

@@ -11,4 +11,4 @@
     width: 0;
     background-color: constants.$background-color;
   }
-}
+}

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;
@@ -38,4 +38,4 @@
       }
     }
   }
-}
+}

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 {
@@ -43,4 +43,4 @@
       }
     }
   }
-}
+}

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;
@@ -87,4 +87,4 @@
       }
     }
   }
-}
+}

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%;
@@ -39,4 +39,4 @@
       cursor: pointer;
     }
   }
-}
+}

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%;
@@ -17,4 +17,4 @@
       inset-block-end: 0;
     }
   }
-}
+}

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

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

src/assets/css/pages/tools-framework.scss

@@ -11,4 +11,4 @@
     width: 0;
     background-color: constants.$background-color;
   }
-}
+}

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

@@ -45,4 +45,4 @@
       }
     }
   }
-}
+}

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

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

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,8 +1,8 @@
 [data-component=tools-source] {
-  padding: 30px;
+  padding: 20px;
 
   .card-box {
     width: 100%;
     height: 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;
@@ -141,4 +141,4 @@
       color: constants.$font-secondary-color;
     }
   }
-}
+}

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 {
@@ -185,4 +185,4 @@
       }
     }
   }
-}
+}

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

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

src/assets/css/pages/user-framework.scss

@@ -11,4 +11,4 @@
     width: 0;
     background-color: constants.$background-color;
   }
-}
+}

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 {
@@ -132,4 +132,4 @@
       }
     }
   }
-}
+}

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,41 +404,43 @@ const Edit = () => {
     return (
         <>
             <FitFullscreen data-component={'tools-edit'}>
-                <FlexBox direction={'horizontal'} className={'root-content'}>
+                <Card>
-                    <LoadingMask hidden={!loading}>
+                    <FlexBox direction={'horizontal'} className={'root-content'}>
-                        <Playground.CodeEditor
+                        <LoadingMask hidden={!loading}>
-                            tsconfig={tsconfig}
+                            <Playground.CodeEditor
-                            files={{
+                                tsconfig={tsconfig}
-                                ...files,
+                                files={{
-                                [IMPORT_MAP_FILE_NAME]: {
+                                    ...files,
-                                    name: IMPORT_MAP_FILE_NAME,
+                                    [IMPORT_MAP_FILE_NAME]: {
-                                    language: 'json',
+                                        name: IMPORT_MAP_FILE_NAME,
-                                    value: importMapRaw
+                                        language: 'json',
-                                },
+                                        value: importMapRaw
-                                [TS_CONFIG_FILE_NAME]: {
+                                    },
-                                    name: TS_CONFIG_FILE_NAME,
+                                    [TS_CONFIG_FILE_NAME]: {
-                                    language: 'json',
+                                        name: TS_CONFIG_FILE_NAME,
-                                    value: tsconfigRaw
+                                        language: 'json',
-                                }
+                                        value: tsconfigRaw
-                            }}
+                                    }
-                            notRemovable={[entryPoint]}
+                                }}
-                            selectedFileName={selectedFileName}
+                                notRemovable={[entryPoint]}
-                            onAddFile={(_, files) => setFiles(files)}
+                                selectedFileName={selectedFileName}
-                            onRemoveFile={(_, files) => setFiles(files)}
+                                onAddFile={(_, files) => setFiles(files)}
-                            onRenameFile={(_, __, files) => setFiles(files)}
+                                onRemoveFile={(_, files) => setFiles(files)}
-                            onChangeFileContent={handleOnChangeFileContent}
+                                onRenameFile={(_, __, files) => setFiles(files)}
-                            onSelectedFileChange={setSelectedFileName}
+                                onChangeFileContent={handleOnChangeFileContent}
-                        />
+                                onSelectedFileChange={setSelectedFileName}
-                        <Playground.Output
+                            />
-                            files={files}
+                            <Playground.Output
-                            selectedFileName={selectedFileName}
+                                files={files}
-                            importMap={importMap!}
+                                selectedFileName={selectedFileName}
-                            entryPoint={entryPoint}
+                                importMap={importMap!}
-                            postExpansionCode={baseDist}
+                                entryPoint={entryPoint}
-                        />
+                                postExpansionCode={baseDist}
-                    </LoadingMask>
+                            />
-                    {showDraggableMask && <div className={'draggable-mask'} />}
+                        </LoadingMask>
-                </FlexBox>
+                        {showDraggableMask && <div className={'draggable-mask'} />}
+                    </FlexBox>
+                </Card>
                 <Draggable
                     onStart={() => setShowDraggableMask(true)}
                     onStop={() => setShowDraggableMask(false)}