FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Style: all - change page padding to 20px

Browse Source
This commit is contained in:
Fat Snake
2024-03-15 14:01:54 +08:00
parent 8850deb604
commit 1b9e527b68
31 changed files with 100 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

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

2
src/assets/css/common.scss
View File

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

2
src/assets/css/components/common/card.scss
View File

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

2
src/assets/css/components/common/hide-scrollbar.scss
View File

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

2
src/assets/css/components/common/indicator.scss
View File

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

2
src/assets/css/components/common/sidebar.scss
View File

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

2
src/assets/css/pages/sign.scss
View File

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

2
src/assets/css/pages/system-framework.scss
View File

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

4
src/assets/css/pages/system/index.scss
View File

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

4
src/assets/css/pages/system/settings.scss
View File

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

4
src/assets/css/pages/system/statistics.scss
View File

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

4
src/assets/css/pages/system/tools/base.scss
View File

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

4
src/assets/css/pages/system/tools/code.scss
View File

@@ -1,5 +1,5 @@
[data-component=system-tools-code] { [data-component=system-tools-code] {
padding: 30px; padding: 20px;
.card-box { .card-box {
width: 100%; width: 100%;
@@ -17,4 +17,4 @@
inset-block-end: 0; inset-block-end: 0;
} }
} }
} }

4
src/assets/css/pages/system/tools/execute.scss
View File

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

2
src/assets/css/pages/tools-framework.scss
View File

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

2
src/assets/css/pages/tools/create.scss
View File

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

27
src/assets/css/pages/tools/edit.scss
View File

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

2
src/assets/css/pages/tools/index.scss
View File

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

4
src/assets/css/pages/tools/source.scss
View File

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

4
src/assets/css/pages/tools/store.scss
View File

@@ -21,7 +21,7 @@
} }
.root-content { .root-content {
padding: 30px; padding: 20px;
gap: 20px; gap: 20px;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
@@ -141,4 +141,4 @@
color: constants.$font-secondary-color; color: constants.$font-secondary-color;
} }
} }
} }

8
src/assets/css/pages/tools/user.scss
View File

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

4
src/assets/css/pages/tools/view.scss
View File

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

2
src/assets/css/pages/user-framework.scss
View File

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

8
src/assets/css/pages/user/index.scss
View File

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

2
src/pages/System/Group.tsx
View File

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

2
src/pages/System/Log.tsx
View File

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

2
src/pages/System/Role.tsx
View File

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

2
src/pages/System/Tools/Category.tsx
View File

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

2
src/pages/System/Tools/index.tsx
View File

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

2
src/pages/System/User.tsx
View File

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

73
src/pages/Tools/Edit.tsx
View File

@@ -21,6 +21,7 @@ import Playground from '@/components/Playground'
import FitFullscreen from '@/components/common/FitFullscreen' import FitFullscreen from '@/components/common/FitFullscreen'
import FlexBox from '@/components/common/FlexBox' import FlexBox from '@/components/common/FlexBox'
import LoadingMask from '@/components/common/LoadingMask' import LoadingMask from '@/components/common/LoadingMask'
import Card from '@/components/common/Card'
const Edit = () => { const Edit = () => {
const navigate = useNavigate() const navigate = useNavigate()
@@ -403,41 +404,43 @@ const Edit = () => {
return ( return (
<> <>
<FitFullscreen data-component={'tools-edit'}> <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 <Draggable
onStart={() => setShowDraggableMask(true)} onStart={() => setShowDraggableMask(true)}
onStop={() => setShowDraggableMask(false)} onStop={() => setShowDraggableMask(false)}