Style:1; Optimize:1; Feat:1 #42

Merged
FatttSnake merged 3 commits from FatttSnake into dev 2024-03-18 17:33:15 +08:00
31 changed files with 100 additions and 89 deletions
Showing only changes of commit 1b9e527b68 - Show all commits

View File

@@ -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/",

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,22 +1,29 @@
[data-component=tools-edit] {
.root-content {
width: 100%;
padding: 20px;
.card-box {
height: 100%;
width: 100%;
> * {
width: 0;
}
.draggable-mask {
position: absolute;
.root-content {
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;
> * {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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