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

Refactor(css): Change all less to module mode

Browse Source
This commit is contained in:
Fat Snake
2024-10-27 19:51:46 +08:00
parent 1936ecb34f
commit 19e3d881cf
115 changed files with 999 additions and 895 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/renderer/src/assets/css/base.less
View File

@@ -8,31 +8,29 @@ html {
scroll-behavior: smooth;
}
em,
i {
font-style: normal
em, i {
font-style: normal;
}
li {
list-style: none
list-style: none;
}
img {
border: 0;
vertical-align: middle
vertical-align: middle;
}
button {
cursor: pointer
cursor: pointer;
}
a {
color: #666;
text-decoration: none
text-decoration: none;
}
button,
input {
button, input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
border: 0;
outline: none;
@@ -42,12 +40,11 @@ body {
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
color: #666;
}
.hide,
.none {
display: none
.hide, .none {
display: none;
}
.clearfix:after {
@@ -55,9 +52,9 @@ body {
clear: both;
display: block;
content: ".";
height: 0
height: 0;
}
.clearfix {
*zoom: 1
zoom: 1;
}

2
src/renderer/src/assets/css/components/common/card.less → src/renderer/src/assets/css/components/common/card.module.less
View File

@@ -1,6 +1,6 @@
@import '@/assets/css/constants';
.card-box {
.cardBox {
background-color: @origin-color;
border-radius: 8px;
overflow: hidden;

2
src/renderer/src/assets/css/components/common/fit-center.less → src/renderer/src/assets/css/components/common/fit-center.module.less
View File

@@ -1,4 +1,4 @@
.fit-center {
.fitCenter {
display: flex;
justify-content: center;
align-items: center;

2
src/renderer/src/assets/css/components/common/fit-fullscreen.less → src/renderer/src/assets/css/components/common/fit-fullscreen.module.less
View File

@@ -1,4 +1,4 @@
.fit-fullscreen {
.fitFullscreen {
position: relative;
width: 100%;
height: 100vh;

2
src/renderer/src/assets/css/components/common/flex-box.less → src/renderer/src/assets/css/components/common/flex-box.module.less
View File

@@ -1,4 +1,4 @@
.flex-box {
.flexBox {
> * {
flex: 1;
}

2
src/renderer/src/assets/css/components/common/fullscreen-loading-mask.less → src/renderer/src/assets/css/components/common/fullscreen-loading-mask.module.less
View File

@@ -1,4 +1,4 @@
.fullscreen-loading-mask {
.fullscreenLoadingMask {
position: absolute;
display: flex;
justify-content: center;

10
src/renderer/src/assets/css/components/common/hide-scrollbar.less → src/renderer/src/assets/css/components/common/hide-scrollbar.module.less
View File

@@ -1,19 +1,19 @@
@import "@/assets/css/constants";
@import "@/assets/css/mixins";
.hide-scrollbar-mask {
.hideScrollbarMask {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.hide-scrollbar-selection {
.hideScrollbarSelection {
position: relative;
overflow: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
.hide-scrollbar-content {
.hideScrollbarContent {
min-width: 100%;
}
}
@@ -66,7 +66,7 @@
}
}
.vertical-scrollbar {
.verticalScrollbar {
height: 100%;
left: 100%;
top: 0;
@@ -77,7 +77,7 @@
}
}
.horizontal-scrollbar {
.horizontalScrollbar {
width: 100%;
left: 0;
top: 100%;

2
src/renderer/src/assets/css/components/common/indicator.less → src/renderer/src/assets/css/components/common/indicator.module.less
View File

@@ -1,6 +1,6 @@
@import '@/assets/css/constants';
.dot-list {
.dotList {
display: flex;
justify-content: center;
align-items: center;

2
src/renderer/src/assets/css/components/common/loading-mask.less → src/renderer/src/assets/css/components/common/loading-mask.module.less
View File

@@ -1,4 +1,4 @@
.loading-mask {
.loadingMask {
display: flex;
justify-content: center;
align-items: center;

34
src/renderer/src/assets/css/components/common/sidebar.less → src/renderer/src/assets/css/components/common/sidebar.module.less
View File

@@ -17,7 +17,7 @@
color: @main-color;
overflow: hidden;
.icon-box {
.iconBox {
display: flex;
justify-content: center;
align-items: center;
@@ -47,7 +47,7 @@
}
}
.content, .bottom-fixed {
.content, .bottomFixed {
display: flex;
min-height: 0;
flex-direction: column;
@@ -67,12 +67,12 @@
position: relative;
font-size: 1rem;
> .menu-bt {
> .menuBt {
border-radius: 8px;
overflow: hidden;
height: 40px;
.icon-box {
.iconBox {
display: flex;
justify-content: center;
align-items: center;
@@ -113,6 +113,12 @@
}
}
}
&:hover {
> * {
background-color: @background-color;
}
}
}
.submenu {
@@ -194,8 +200,8 @@
}
}
.delete {
.menu-bt {
:global .delete {
:local .menuBt {
border: 1px dashed @error-secondary-color;
filter: drop-shadow(1000px 0 0 @error-secondary-color);
transform: translate(-1000px);
@@ -222,7 +228,7 @@
padding: 8px 14px;
color: @main-color;
.icon-user {
.iconUser {
display: flex;
justify-content: center;
align-items: center;
@@ -258,7 +264,7 @@
}
}
.icon-exit {
.iconExit {
font-size: @SIZE_ICON_XS;
color: @error-color;
padding: 6px 10px;
@@ -275,7 +281,7 @@
width: 68px !important;
.title {
.icon-box {
.iconBox {
span {
transform: rotateZ(360deg);
transition: all .3s;
@@ -287,14 +293,14 @@
}
}
.menu-bt {
.menuBt {
.text, .extend {
display: none;
}
}
.submenu {
.menu-bt {
.menuBt {
.text {
display: block;
}
@@ -308,7 +314,7 @@
display: none;
}
.submenu-exit {
.submenuExit {
display: none;
position: absolute;
padding-left: 6px;
@@ -321,7 +327,7 @@
border-radius: 8px;
background-color: @origin-color;
.icon-exit {
.iconExit {
padding: 4px 8px;
&:hover {
@@ -336,7 +342,7 @@
}
}
&:hover .submenu-exit {
&:hover .submenuExit {
display: block;
animation: 0.3s ease;
.keyframes(mfdCZC, {

4
src/renderer/src/assets/css/components/common/url-card.less → src/renderer/src/assets/css/components/common/url-card.module.less
View File

@@ -1,9 +1,9 @@
@import "@/assets/css/constants";
[data-component=component-url-card] {
.root {
cursor: pointer;
.url-card {
.urlCard {
width: 100%;
height: 100%;
margin-top: 80px;

2
src/renderer/src/assets/css/components/dnd/drag-handle.less → src/renderer/src/assets/css/components/dnd/drag-handle.module.less
View File

@@ -1,4 +1,4 @@
[data-component=component-drag-handle] {
.root {
background-color: transparent;
color: unset;
cursor: grab;

4
src/renderer/src/assets/css/components/dnd/drop-mask.less → src/renderer/src/assets/css/components/dnd/drop-mask.module.less
View File

@@ -1,6 +1,6 @@
@import "@/assets/css/constants";
[data-component=component-drop-mask] {
.root {
position: absolute;
left: 0;
top: 0;
@@ -9,7 +9,7 @@
padding: 0 10px 10px;
background-color: @origin-color;
.drop-mask-border {
.dropMaskBorder {
display: flex;
width: 100%;
height: 100%;

6
src/renderer/src/assets/css/components/system/setting-card.less → src/renderer/src/assets/css/components/system/setting-card.module.less
View File

@@ -1,7 +1,7 @@
@import "@/assets/css/constants";
[data-component=component-setting-card] {
.settings-card {
.root {
.settingsCard {
padding: 20px;
gap: 20px;
color: @main-color;
@@ -25,7 +25,7 @@
color: @font-main-color;
}
.bt-save {
.btSave {
color: @main-color;
}
}

6
src/renderer/src/assets/css/components/system/statistics-card.less → src/renderer/src/assets/css/components/system/statistics-card.module.less
View File

@@ -1,7 +1,7 @@
@import "@/assets/css/constants";
[data-component=component-statistics-card] {
.statistics-card {
.root {
.statisticsCard {
padding: 20px;
gap: 20px;
@@ -26,7 +26,7 @@
}
}
.card-content {
:global .card-content {
font-size: 1.1em;
padding: 0 10px;
gap: 10px;

4
src/renderer/src/assets/css/components/tools/load-more-card.less → src/renderer/src/assets/css/components/tools/load-more-card.module.less
View File

@@ -1,9 +1,9 @@
@import "@/assets/css/constants";
[data-component=component-load-more-card] {
.root {
cursor: pointer;
.load-more-card {
.loadMoreCard {
width: 100%;
height: 100%;
text-align: center;

16
src/renderer/src/assets/css/components/tools/local-card.less → src/renderer/src/assets/css/components/tools/local-card.module.less
View File

@@ -1,10 +1,10 @@
@import "@/assets/css/constants";
[data-component=component-local-card] {
.root {
height: 100%;
cursor: pointer;
.local-card {
.localCard {
width: 100%;
height: 100%;
text-align: center;
@@ -55,12 +55,12 @@
.info {
padding-top: 20px;
.tool-name {
.toolName {
font-weight: bolder;
font-size: 1.6em;
}
.tool-desc {
.toolDesc {
margin: 10px auto 0;
color: @font-secondary-color;
overflow: hidden;
@@ -85,7 +85,7 @@
}
}
.author-name {
.authorName {
display: flex;
align-items: center;
}
@@ -104,3 +104,9 @@
}
}
}
.androidQrcode {
align-items: center;
transform: translateX(-16px);
gap: 20px;
}

51
src/renderer/src/assets/css/components/tools/repository-card.less
View File

@@ -1,51 +0,0 @@
@import "@/assets/css/constants";
[data-component=component-repository-card] {
height: 100%;
.repository-card {
width: 100%;
height: 100%;
text-align: center;
align-items: center;
> * {
display: block;
flex: 0 0 auto;
}
.header {
display: flex;
width: 100%;
align-items: center;
padding: 10px;
.version-select {
width: 9em;
margin-right: auto;
}
>:not(.version-select) {
font-size: 1.6em;
}
}
.icon {
display: flex;
padding-top: 10px;
padding-bottom: 20px;
color: @production-color;
font-size: @SIZE_ICON_XL;
justify-content: center;
img {
width: @SIZE_ICON_XL;
}
}
.tool-name {
font-weight: bolder;
font-size: 1.6em;
}
}
}

94
src/renderer/src/assets/css/components/tools/repository-card.module.less Normal file
View File

@@ -0,0 +1,94 @@
@import "@/assets/css/constants";
.root {
height: 100%;
.repositoryCard {
width: 100%;
height: 100%;
text-align: center;
align-items: center;
> * {
display: block;
flex: 0 0 auto;
}
.header {
display: flex;
width: 100%;
align-items: center;
padding: 10px;
:global .version-select {
width: 9em;
margin-right: auto;
}
>:not(:global .version-select) {
font-size: 1.6em;
}
}
.icon {
display: flex;
padding-top: 10px;
padding-bottom: 20px;
color: @production-color;
font-size: @SIZE_ICON_XL;
justify-content: center;
img {
width: @SIZE_ICON_XL;
}
}
.info {
transform: translateY(40px);
transition: all 0.1s ease;
.toolName {
font-weight: bolder;
font-size: 1.6em;
}
}
&:hover {
.info {
transform: translateY(-10px);
transition: all 0.2s ease;
}
}
.operation {
display: flex;
flex: 1;
justify-content: center;
padding-bottom: 20px;
gap: 4px;
width: 70%;
flex-direction: column;
align-items: center;
visibility: hidden;
opacity: 0;
> *, .edit > * {
width: 100%;
}
.edit {
> * {
> :first-child {
flex: 1;
}
}
}
}
&:hover .operation {
visibility: visible;
opacity: 1;
transition: all 0.4s ease;
}
}
}

16
src/renderer/src/assets/css/components/tools/store-card.less → src/renderer/src/assets/css/components/tools/store-card.module.less
View File

@@ -1,10 +1,10 @@
@import "@/assets/css/constants";
[data-component=component-store-card] {
.root {
height: 100%;
cursor: pointer;
.store-card {
.storeCard {
width: 100%;
height: 100%;
text-align: center;
@@ -56,12 +56,12 @@
.info {
padding-top: 20px;
.tool-name {
.toolName {
font-weight: bolder;
font-size: 1.6em;
}
.tool-desc {
.toolDesc {
margin: 10px auto 0;
color: @font-secondary-color;
overflow: hidden;
@@ -87,7 +87,7 @@
}
}
.author-name {
.authorName {
display: flex;
align-items: center;
}
@@ -106,3 +106,9 @@
}
}
}
.androidQrcode {
align-items: center;
transform: translateX(-16px);
gap: 20px;
}

40
src/renderer/src/assets/css/pages/sign/forget.module.less Normal file
View File

@@ -0,0 +1,40 @@
@import "@/assets/css/constants";
.root {
.title {
margin-bottom: 20px;
transform: translateY(-10px);
.primary {
font-size: 2.4em;
font-weight: bolder;
color: @production-color;
}
.secondary {
font-size: 1.2em;
}
}
.form {
width: 300px;
font-size: 14px;
.retry, .success {
margin-bottom: 16px;
a {
font-weight: bolder;
}
}
.footer {
text-align: center;
a {
color: @production-color;
font-weight: bolder;
}
}
}
}

74
src/renderer/src/assets/css/pages/sign.less → src/renderer/src/assets/css/pages/sign/index.module.less
View File

@@ -1,6 +1,6 @@
@import "@/assets/css/constants";
[data-component=sign] {
.root {
background-color: #D2D0DD;
user-select: none;
@@ -12,7 +12,7 @@
color: @production-color;
}
.sign-box {
.signBox {
position: relative;
background-color: @origin-color;
width: 900px;
@@ -32,74 +32,6 @@
&.hidden {
opacity: 0;
}
> * {
.title {
margin-bottom: 20px;
transform: translateY(-10px);
.primary {
font-size: 2.4em;
font-weight: bolder;
color: @production-color;
}
.secondary {
font-size: 1.2em;
}
}
.form {
width: 300px;
font-size: 14px;
button {
font-weight: bolder;
}
.addition {
justify-content: space-between;
margin-bottom: 14px;
> * {
flex: 0 0 auto;
}
}
.footer {
text-align: center;
a {
color: @production-color;
}
}
}
}
.verify {
a {
color: @production-color;
font-weight: bolder;
}
}
.sign-up, .sign-in, .forget {
.footer {
a {
font-weight: bolder;
}
}
}
.sign-up, .forget {
.retry, .success {
margin-bottom: 16px;
a {
font-weight: bolder;
}
}
}
}
.cover {
@@ -109,7 +41,7 @@
background-color: #F3F4F8;
transition: all 0.8s ease;
.ball-box {
.ballBox {
position: relative;
overflow: hidden;

41
src/renderer/src/assets/css/pages/sign/sign-in.module.less Normal file
View File

@@ -0,0 +1,41 @@
@import "@/assets/css/constants";
.root {
.title {
margin-bottom: 20px;
transform: translateY(-10px);
.primary {
font-size: 2.4em;
font-weight: bolder;
color: @production-color;
}
.secondary {
font-size: 1.2em;
}
}
.form {
width: 300px;
font-size: 14px;
.addition {
justify-content: space-between;
margin-bottom: 14px;
a {
flex: 0 0 auto;
}
}
.footer {
text-align: center;
a {
color: @production-color;
font-weight: bolder;
}
}
}
}

40
src/renderer/src/assets/css/pages/sign/sign-up.module.less Normal file
View File

@@ -0,0 +1,40 @@
@import "@/assets/css/constants";
.root {
.title {
margin-bottom: 20px;
transform: translateY(-10px);
.primary {
font-size: 2.4em;
font-weight: bolder;
color: @production-color;
}
.secondary {
font-size: 1.2em;
}
}
.form {
width: 300px;
font-size: 14px;
.retry, .success {
margin-bottom: 16px;
a {
font-weight: bolder;
}
}
.footer {
text-align: center;
a {
color: @production-color;
font-weight: bolder;
}
}
}
}

28
src/renderer/src/assets/css/pages/sign/verify.module.less Normal file
View File

@@ -0,0 +1,28 @@
@import "@/assets/css/constants";
.root {
.title {
margin-bottom: 20px;
transform: translateY(-10px);
.primary {
font-size: 2.4em;
font-weight: bolder;
color: @production-color;
}
.secondary {
font-size: 1.2em;
}
}
.form {
width: 300px;
font-size: 14px;
a {
color: @production-color;
font-weight: bolder;
}
}
}

6
src/renderer/src/assets/css/pages/user-framework.less → src/renderer/src/assets/css/pages/system-framework.module.less
View File

@@ -1,11 +1,11 @@
@import "@/assets/css/constants";
[data-component=user-framework] {
.left-panel {
.root {
.leftPanel {
background-color: @origin-color;
}
.right-panel {
.rightPanel {
flex: 1;
width: 0;
background-color: @background-color;

6
src/renderer/src/assets/css/pages/system/index.less → src/renderer/src/assets/css/pages/system/index.module.less
View File

@@ -1,11 +1,11 @@
[data-component=system] {
.root-content {
.root {
.rootContent {
padding: 20px;
gap: 20px;
flex-wrap: wrap;
justify-content: flex-start;
> .card-box {
> div {
width: 200px;
height: 320px;
flex: 0 0 auto;

6
src/renderer/src/assets/css/pages/system/settings.less → src/renderer/src/assets/css/pages/system/settings.module.less
View File

@@ -1,9 +1,9 @@
[data-component=system-settings] {
.root-content {
.root {
.rootContent {
padding: 20px;
gap: 20px;
.root-col {
.rootCol {
gap: 20px;
> * {

6
src/renderer/src/assets/css/pages/system/statistics.less → src/renderer/src/assets/css/pages/system/statistics.module.less
View File

@@ -1,11 +1,11 @@
[data-component=system-statistics] {
.root-content {
.root {
.rootContent {
padding: 20px;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
> .card-box {
> div {
width: 48%;
flex: 0 0 auto;
}

8
src/renderer/src/assets/css/pages/system/tools/base.less → src/renderer/src/assets/css/pages/system/tools/base.module.less
View File

@@ -1,13 +1,13 @@
@import "@/assets/css/constants";
[data-component=system-tools-base] {
.root-content {
.root {
.rootContent {
padding: 20px;
gap: 10px;
height: 100%;
width: 100%;
.has-edited::after {
.hasEdited::after {
content: '*';
color: @font-secondary-color;
}
@@ -23,7 +23,7 @@
height: calc(100vh - 40px);
}
.close-editor-btn {
.closeEditorBtn {
display: flex;
justify-content: center;
align-items: center;

6
src/renderer/src/assets/css/pages/system/tools/code.less → src/renderer/src/assets/css/pages/system/tools/code.module.less
View File

@@ -1,12 +1,12 @@
[data-component=system-tools-code] {
.root {
padding: 20px;
.card-box {
.rootBox {
width: 100%;
height: 100%;
}
.draggable-content {
.draggableContent {
position: fixed;
inset-inline-end: 48px;
inset-block-end: 48px;

4
src/renderer/src/assets/css/pages/tools/source.less → src/renderer/src/assets/css/pages/system/tools/execute.module.less
View File

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

8
src/renderer/src/assets/css/pages/system/tools/template.less → src/renderer/src/assets/css/pages/system/tools/template.module.less
View File

@@ -1,13 +1,13 @@
@import "@/assets/css/constants";
[data-component=system-tools-template] {
.root-content {
.root {
.rootContent {
padding: 20px;
gap: 10px;
height: 100%;
width: 100%;
.has-edited::after {
.hasEdited::after {
content: '*';
color: @font-secondary-color;
}
@@ -23,7 +23,7 @@
height: calc(100vh - 40px);
}
.close-editor-btn {
.closeEditorBtn {
display: flex;
justify-content: center;
align-items: center;

8
src/renderer/src/assets/css/pages/tools-framework.less → src/renderer/src/assets/css/pages/tools-framework.module.less
View File

@@ -1,10 +1,10 @@
@import "@/assets/css/constants";
[data-component=tools-framework] {
.left-panel {
.root {
.leftPanel {
background-color: @origin-color;
.menu-droppable {
.menuDroppable {
display: flex;
position: relative;
min-height: 0;
@@ -13,7 +13,7 @@
}
}
.right-panel {
.rightPanel {
flex: 1;
width: 0;
background-color: @background-color;

60
src/renderer/src/assets/css/pages/tools/create.less
View File

@@ -1,60 +0,0 @@
@import "@/assets/css/constants";
[data-component=tools-create] {
.root-content {
padding: 20px;
gap: 20px;
height: 100%;
width: 100%;
> * {
gap: 10px;
width: 0;
.title {
flex: 0 0 auto;
height: 40px;
> * {
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
font-size: 1.6em;
color: @production-color;
font-weight: bolder;
}
}
.config {
.config-content {
padding: 20px;
.help {
margin-left: 6px;
color: @font-main-color;
font-size: 0.8em;
}
.create-bt {
width: 100%;
font-weight: bold;
}
}
}
.preview {
display: flex;
position: relative;
justify-content: center;
align-items: center;
.no-preview {
font-weight: bolder;
color: @font-secondary-color;
font-size: 1.4em;
}
}
}
}
}

52
src/renderer/src/assets/css/pages/tools/create.module.less Normal file
View File

@@ -0,0 +1,52 @@
@import "@/assets/css/constants";
.root {
padding: 20px;
gap: 20px;
height: 100%;
width: 100%;
> * {
gap: 10px;
width: 0;
.title {
flex: 0 0 auto;
height: 40px;
> * {
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
font-size: 1.6em;
color: @production-color;
font-weight: bolder;
}
}
.config {
.configContent {
padding: 20px;
.createBt {
width: 100%;
font-weight: bold;
}
}
}
.preview {
display: flex;
position: relative;
justify-content: center;
align-items: center;
.noPreview {
font-weight: bolder;
color: @font-secondary-color;
font-size: 1.4em;
}
}
}
}

10
src/renderer/src/assets/css/pages/tools/edit.less → src/renderer/src/assets/css/pages/tools/edit.module.less
View File

@@ -1,11 +1,11 @@
[data-component=tools-edit] {
.root {
padding: 20px;
.card-box {
.rootBox {
height: 100%;
width: 100%;
.root-content {
.rootContent {
position: relative;
width: 100%;
height: 100%;
@@ -14,7 +14,7 @@
width: 0;
}
.draggable-mask {
.draggableMask {
position: absolute;
width: 100%;
height: 100%;
@@ -22,7 +22,7 @@
}
}
.draggable-content {
.draggableContent {
position: fixed;
inset-inline-end: 48px;
inset-block-end: 48px;

105
src/renderer/src/assets/css/pages/tools/index.less
View File

@@ -1,105 +0,0 @@
@import "@/assets/css/constants";
[data-component=tools] {
.root-content {
padding: 20px;
gap: 20px;
.own-content {
gap: 20px;
flex-wrap: wrap;
justify-content: flex-start;
> .card-box, > div {
width: 180px;
min-height: 290px;
flex: 0 0 auto;
}
& > :first-child {
cursor: pointer;
.info {
padding-top: 50px;
}
}
& > :not(:first-child) {
.info {
transform: translateY(40px);
transition: all 0.1s ease;
}
.operation {
display: flex;
flex: 1;
justify-content: center;
padding-bottom: 20px;
gap: 4px;
width: 70%;
flex-direction: column;
align-items: center;
visibility: hidden;
opacity: 0;
> *, .edit > * {
width: 100%;
}
.edit {
> * {
> :first-child {
flex: 1;
}
}
}
}
}
& > :not(:first-child):hover {
.info {
transform: translateY(-10px);
transition: all 0.2s ease;
}
.operation {
visibility: visible;
opacity: 1;
transition: all 0.4s ease;
}
}
}
.favorite-divider {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
margin-top: 20px;
:first-child, :last-child {
height: 0;
border: 1px dashed @divide-color;
}
.divider-text {
flex: 0 0 auto;
font-size: 1.2em;
color: @font-secondary-color;
}
}
.star-content {
gap: 20px;
flex-wrap: wrap;
justify-content: flex-start;
> .card-box, > div {
width: 180px;
min-height: 290px;
flex: 0 0 auto;
}
}
}
}

54
src/renderer/src/assets/css/pages/tools/index.module.less Normal file
View File

@@ -0,0 +1,54 @@
@import "@/assets/css/constants";
.root {
padding: 20px;
gap: 20px;
.ownContent {
gap: 20px;
flex-wrap: wrap;
justify-content: flex-start;
> div {
width: 180px;
min-height: 290px;
flex: 0 0 auto;
}
& > :first-child {
cursor: pointer;
}
}
.favoriteDivider {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
margin-top: 20px;
:first-child, :last-child {
height: 0;
border: 1px dashed @divide-color;
}
.dividerText {
flex: 0 0 auto;
font-size: 1.2em;
color: @font-secondary-color;
}
}
.starContent {
gap: 20px;
flex-wrap: wrap;
justify-content: flex-start;
> div {
width: 180px;
min-height: 290px;
flex: 0 0 auto;
}
}
}

12
src/renderer/src/assets/css/pages/tools/store.less → src/renderer/src/assets/css/pages/tools/local.module.less
View File

@@ -1,6 +1,6 @@
@import "@/assets/css/constants";
[data-component=tools-store] {
.root {
.search {
display: flex;
position: sticky;
@@ -20,7 +20,7 @@
}
}
.root-content {
.rootContent {
padding: 20px;
gap: 20px;
flex-wrap: wrap;
@@ -32,7 +32,7 @@
flex: 0 0 auto;
}
.no-tool {
.noTool {
display: flex;
justify-content: center;
font-size: 1.4em;
@@ -40,10 +40,4 @@
color: @font-secondary-color;
}
}
.android-qrcode {
align-items: center;
transform: translateX(-16px);
gap: 20px;
}
}

4
src/renderer/src/assets/css/pages/system/tools/execute.less → src/renderer/src/assets/css/pages/tools/source.module.less
View File

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

12
src/renderer/src/assets/css/pages/tools/local.less → src/renderer/src/assets/css/pages/tools/store.module.less
View File

@@ -1,6 +1,6 @@
@import "@/assets/css/constants";
[data-component=tools-local] {
.root {
.search {
display: flex;
position: sticky;
@@ -20,7 +20,7 @@
}
}
.root-content {
.rootContent {
padding: 20px;
gap: 20px;
flex-wrap: wrap;
@@ -32,7 +32,7 @@
flex: 0 0 auto;
}
.no-tool {
.noTool {
display: flex;
justify-content: center;
font-size: 1.4em;
@@ -40,10 +40,4 @@
color: @font-secondary-color;
}
}
.android-qrcode {
align-items: center;
transform: translateX(-16px);
gap: 20px;
}
}

16
src/renderer/src/assets/css/pages/tools/user.less → src/renderer/src/assets/css/pages/tools/user.module.less
View File

@@ -1,9 +1,9 @@
@import "@/assets/css/constants";
[data-component=tools-store-user] .root-content {
.root {
padding: 80px 20px 20px 20px;
.root-box {
.rootBox {
width: 100%;
height: 100%;
overflow: visible;
@@ -19,7 +19,7 @@
flex: 0 0 auto;
}
.avatar-box {
.avatarBox {
background-color: white;
padding: 4px;
border-radius: 50%;
@@ -30,7 +30,7 @@
}
}
.info-name {
.infoName {
margin: 20px 0 0 24px;
justify-content: center;
@@ -66,7 +66,7 @@
flex: 0 0 auto;
}
.no-tool {
.noTool {
display: flex;
justify-content: center;
margin-bottom: 20px;
@@ -76,10 +76,4 @@
}
}
}
.android-qrcode {
align-items: center;
transform: translateX(-16px);
gap: 20px;
}
}

4
src/renderer/src/assets/css/pages/tools/view.less → src/renderer/src/assets/css/pages/tools/view.module.less
View File

@@ -1,7 +1,7 @@
[data-component=tools-view] {
.root {
padding: 20px;
.card-box {
.rootBox {
position: relative;
height: 100%;
width: 100%;

6
src/renderer/src/assets/css/pages/system-framework.less → src/renderer/src/assets/css/pages/user-framework.module.less
View File

@@ -1,11 +1,11 @@
@import "@/assets/css/constants";
[data-component=system-framework] {
.left-panel {
.root {
.leftPanel {
background-color: @origin-color;
}
.right-panel {
.rightPanel {
flex: 1;
width: 0;
background-color: @background-color;

10
src/renderer/src/assets/css/pages/user/index.less → src/renderer/src/assets/css/pages/user/index.module.less
View File

@@ -1,9 +1,9 @@
@import "@/assets/css/constants";
[data-component=user] .root-content {
.root {
padding: 80px 20px 20px 20px;
.card-box {
.content {
width: 100%;
height: 100%;
overflow: visible;
@@ -30,7 +30,7 @@
flex: 0 0 auto;
}
.avatar-box {
.avatarBox {
background-color: white;
padding: 4px;
border-radius: 50%;
@@ -41,7 +41,7 @@
}
}
.info-name {
.infoName {
margin: 20px 0 0 24px;
justify-content: center;
@@ -89,7 +89,7 @@
}
}
.table {
.profile, .security {
gap: 24px;
padding-top: 30px;
padding-bottom: 20px;

8
src/renderer/src/components/Playground/CodeEditor/Editor/editor.less → src/renderer/src/components/Playground/CodeEditor/Editor/index.module.less
View File

@@ -14,11 +14,11 @@
}
}
[data-component=playground-code-editor-editor] {
.root {
position: relative;
height: 0;
.monaco-editor-light {
:global .monaco-editor-light {
height: 100%;
overflow: hidden;
background-color: var(--border);
@@ -40,7 +40,7 @@
}
}
.monaco-editor-vs-dark {
:global .monaco-editor-vs-dark {
height: 100%;
overflow: hidden;
background-color: var(--border);
@@ -62,7 +62,7 @@
}
}
.playground-code-editor-loading {
.playgroundCodeEditorLoading {
position: absolute;
top: 0;
right: 0;

6
src/renderer/src/components/Playground/CodeEditor/Editor/index.tsx
View File

@@ -1,6 +1,6 @@
import { editor, Selection } from 'monaco-editor'
import MonacoEditor, { Monaco } from '@monaco-editor/react'
import '@/components/Playground/CodeEditor/Editor/editor.less'
import styles from '@/components/Playground/CodeEditor/Editor/index.module.less'
import '@/components/Playground/CodeEditor/Editor/loader'
import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files'
@@ -112,7 +112,7 @@ const Editor = ({
return (
<>
<div data-component={'playground-code-editor-editor'}>
<div className={styles.root}>
<MonacoEditor
theme={theme}
path={file.name}
@@ -129,7 +129,7 @@ const Editor = ({
readOnly: readonly
}}
/>
{total > 0 && !finished && <div className={'playground-code-editor-loading'} />}
{total > 0 && !finished && <div className={styles.playgroundCodeEditorLoading} />}
</div>
</>
)

9
src/renderer/src/components/Playground/CodeEditor/FileSelector/Item.tsx
View File

@@ -1,4 +1,5 @@
import { Dispatch, SetStateAction, KeyboardEvent, ChangeEvent, MouseEvent } from 'react'
import styles from '@/components/Playground/CodeEditor/FileSelector/item.module.less'
interface ItemProps {
className?: string
@@ -109,11 +110,11 @@ const Item = ({
return (
<div
className={`tab-item${active ? ' active' : ''}${className ? ` ${className}` : ''}`}
className={`${styles.root}${active ? ` ${styles.active}` : ''}${className ? ` ${className}` : ''}`}
onClick={handleOnClick}
>
{isCreating ? (
<div className={'tab-item-input'}>
<div className={styles.tabItemInput}>
<input
ref={inputRef}
value={fileName}
@@ -122,13 +123,13 @@ const Item = ({
onKeyDown={handleKeyDown}
spellCheck={'false'}
/>
<span className={'tab-item-input-mask'}>{fileName}</span>
<span className={styles.tabItemInputMask}>{fileName}</span>
</div>
) : (
<>
<div onDoubleClick={handleOnDoubleClick}>{value}</div>
{!readonly && (
<div className={'tab-item-close'} onClick={handleOnDelete}>
<div className={styles.tabItemClose} onClick={handleOnDelete}>
<IconOxygenClose />
</div>
)}

86
src/renderer/src/components/Playground/CodeEditor/FileSelector/file-selector.less
View File

@@ -1,86 +0,0 @@
[data-component=playground-file-selector].tab{
display: flex;
flex: 0 0 auto;
height: 40px;
.multiple {
flex: 1;
width: 0;
.tab-content {
height: 40px;
align-items: flex-end;
gap: 2px;
margin-left: 10px;
.tab-item-add {
padding: 0 12px;
}
.tabs-margin-right {
height: 100%;
> * {
height: 100%;
width: 10px;
}
}
}
}
.sticky {
display: flex;
flex: 0 0 auto;
align-items: flex-end;
margin-right: 10px;
}
.tab-item {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
height: 30px;
padding: 0 20px;
border: 1px solid #f0f0f0;
background-color: rgba(0, 0, 0, 0.04);
border-radius: 6px 6px 0 0;
cursor: pointer;
.tab-item-input {
position: relative;
min-width: 40px;
transform: translateY(1px);
.tab-item-input-mask {
display: inline-block;
color: transparent;
}
input {
position: absolute;
background-color: transparent;
width: 100%;
font-size: 1em;
}
}
.tab-item-close {
transform: translateX(10px);
:hover {
fill: #888;
}
svg {
height: 8px;
fill: #666;
}
}
&.active {
background-color: white;
border-bottom: none;
}
}
}

37
src/renderer/src/components/Playground/CodeEditor/FileSelector/index.module.less Normal file
View File

@@ -0,0 +1,37 @@
.root{
display: flex;
flex: 0 0 auto;
height: 40px;
.multiple {
flex: 1;
width: 0;
.tabContent {
height: 40px;
align-items: flex-end;
gap: 2px;
margin-left: 10px;
.tabItemAdd {
padding: 0 12px;
}
.tabsMarginRight {
height: 100%;
> * {
height: 100%;
width: 10px;
}
}
}
}
.sticky {
display: flex;
flex: 0 0 auto;
align-items: flex-end;
margin-right: 10px;
}
}

14
src/renderer/src/components/Playground/CodeEditor/FileSelector/index.tsx
View File

@@ -1,4 +1,4 @@
import '@/components/Playground/CodeEditor/FileSelector/file-selector.less'
import styles from '@/components/Playground/CodeEditor/FileSelector/index.module.less'
import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
import { IFiles } from '@/components/Playground/shared'
@@ -164,8 +164,8 @@ const FileSelector = ({
return (
<>
<div data-component={'playground-file-selector'} className={'tab'}>
<div className={'multiple'}>
<div className={styles.root}>
<div className={styles.multiple}>
<HideScrollbar
ref={hideScrollbarRef}
autoHideWaitingTime={800}
@@ -173,7 +173,7 @@ const FileSelector = ({
scrollbarAsidePadding={0}
scrollbarEdgePadding={0}
>
<FlexBox direction={'horizontal'} className={'tab-content'}>
<FlexBox direction={'horizontal'} className={styles.tabContent}>
{tabs.map((item, index) => (
<Item
key={index + item}
@@ -192,20 +192,20 @@ const FileSelector = ({
))}
{!readonly && (
<Item
className={'tab-item-add'}
className={styles.tabItemAdd}
value={'+'}
onClick={addTab}
readonly
/>
)}
<div className={'tabs-margin-right'}>
<div className={styles.tabsMarginRight}>
<div />
</div>
</FlexBox>
</HideScrollbar>
</div>
{(files[IMPORT_MAP_FILE_NAME] || files[TS_CONFIG_FILE_NAME]) && (
<div className={'sticky'}>
<div className={styles.sticky}>
{files[TS_CONFIG_FILE_NAME] && (
<Item
value={'tsconfig.json'}

47
src/renderer/src/components/Playground/CodeEditor/FileSelector/item.module.less Normal file
View File

@@ -0,0 +1,47 @@
.root {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
height: 30px;
padding: 0 20px;
border: 1px solid #f0f0f0;
background-color: rgba(0, 0, 0, 0.04);
border-radius: 6px 6px 0 0;
cursor: pointer;
.tabItemInput {
position: relative;
min-width: 40px;
transform: translateY(1px);
.tabItemInputMask {
display: inline-block;
color: transparent;
}
input {
position: absolute;
background-color: transparent;
width: 100%;
font-size: 1em;
}
}
.tabItemClose {
transform: translateX(10px);
:hover {
fill: #888;
}
svg {
height: 8px;
fill: #666;
}
}
&.active {
background-color: white;
border-bottom: none;
}
}

5
src/renderer/src/components/Playground/CodeEditor/code-editor.less
View File

@@ -1,5 +0,0 @@
[data-component=playground-code-editor] {
position: relative;
width: 100%;
height: 100%;
}

15
src/renderer/src/components/Playground/CodeEditor/index.module.less Normal file
View File

@@ -0,0 +1,15 @@
.root {
position: relative;
width: 100%;
height: 100%;
.errorMessage {
position: absolute;
bottom: 0;
width: 100%;
color: white;
background-color: #FF4D4FAA;
padding: 5px 10px;
font-size: 1.2em;
}
}

6
src/renderer/src/components/Playground/CodeEditor/index.tsx
View File

@@ -1,5 +1,5 @@
import _ from 'lodash'
import '@/components/Playground/CodeEditor/code-editor.less'
import styles from '@/components/Playground/CodeEditor/index.module.less'
import FlexBox from '@/components/common/FlexBox'
import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
import {
@@ -122,7 +122,7 @@ const CodeEditor = ({
return (
<>
<FlexBox data-component={'playground-code-editor'}>
<FlexBox className={styles.root}>
{showFileSelector && (
<FileSelector
files={files}
@@ -157,7 +157,7 @@ const CodeEditor = ({
onJumpFile={handleOnChangeSelectedFile}
extraLibs={extraLibs}
/>
{errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
{errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
</FlexBox>
</>
)

28
src/renderer/src/components/Playground/Output/Preview/Render.tsx
View File

@@ -1,5 +1,5 @@
import { ChangeEvent } from 'react'
import '@/components/Playground/Output/Preview/render.less'
import styles from '@/components/Playground/Output/Preview/render.module.less'
import { COLOR_FONT_MAIN } from '@/constants/common.constants'
import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
import HideScrollbar from '@/components/common/HideScrollbar'
@@ -174,16 +174,18 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
return mobileMode ? (
<>
<HideScrollbar
className={'mobile-mode-background'}
className={styles.mobileModeRoot}
isShowVerticalScrollbar
isShowHorizontalScrollbar
autoHideWaitingTime={1000}
>
<div className={'mobile-mode-content'} style={{ zoom }}>
<div className={`device${isRotate ? ' rotate' : ''}`}>
<div className={`device-header${isRotate ? ' rotate' : ''}`} />
<div className={styles.mobileModeContent} style={{ zoom }}>
<div className={`${styles.device}${isRotate ? ` ${styles.rotate}` : ''}`}>
<div
className={`device-content${isRotate ? ' rotate' : ''}`}
className={`${styles.deviceHeader}${isRotate ? ` ${styles.rotate}` : ''}`}
/>
<div
className={`${styles.deviceContent}${isRotate ? ` ${styles.rotate}` : ''}`}
style={{
width: isRotate
? (devices.find((value) => value.name === selectedDevice)
@@ -198,7 +200,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
}}
>
<iframe
data-component={'playground-output-preview-render'}
className={styles.renderRoot}
key={iframeKey}
ref={iframeRef}
src={iframeUrl}
@@ -207,19 +209,21 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
allow={'clipboard-read; clipboard-write'}
/>
</div>
<div className={`device-footer${isRotate ? ' rotate' : ''}`} />
<div
className={`${styles.deviceFooter}${isRotate ? ` ${styles.rotate}` : ''}`}
/>
</div>
</div>
</HideScrollbar>
<div className={'switch-device'}>
<div className={styles.switchDevice}>
<IconOxygenMobile fill={COLOR_FONT_MAIN} />
<select value={selectedDevice} onChange={handleOnChangeDevice}>
{devices.map((value) => (
<option value={value.name}>{value.name}</option>
))}
</select>
<div className={'rotate-device'} title={'旋转屏幕'} onClick={handleOnRotateDevice}>
<div title={'旋转屏幕'} onClick={handleOnRotateDevice}>
{isRotate ? (
<IconOxygenRotateRight fill={COLOR_FONT_MAIN} />
) : (
@@ -227,7 +231,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
)}
</div>
</div>
<div className={'switch-zoom'}>
<div className={styles.switchZoom}>
<IconOxygenZoom fill={COLOR_FONT_MAIN} />
<input
type={'range'}
@@ -241,7 +245,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
</>
) : (
<iframe
data-component={'playground-output-preview-render'}
className={styles.renderRoot}
key={iframeKey}
ref={iframeRef}
src={iframeUrl}

4
src/renderer/src/components/Playground/Output/Preview/preview.less → src/renderer/src/components/Playground/Output/Preview/index.module.less
View File

@@ -1,9 +1,9 @@
[data-component=playground-preview] {
.root {
display: flex;
position: relative;
height: 0;
.playground-error-message {
.errorMessage {
position: absolute;
bottom: 0;
width: 100%;

6
src/renderer/src/components/Playground/Output/Preview/index.tsx
View File

@@ -1,4 +1,4 @@
import '@/components/Playground/Output/Preview/preview.less'
import styles from '@/components/Playground/Output/Preview/index.module.less'
import { IFiles, IImportMap } from '@/components/Playground/shared'
import Compiler from '@/components/Playground/compiler'
import Render from '@/components/Playground/Output/Preview/Render'
@@ -42,9 +42,9 @@ const Preview = ({
}, [files, Compiler, importMap, entryPoint])
return (
<div data-component={'playground-preview'}>
<div className={styles.root}>
<Render iframeKey={iframeKey} compiledCode={compiledCode} mobileMode={mobileMode} />
{errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
{errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
</div>
)
}

18
src/renderer/src/components/Playground/Output/Preview/render.less → src/renderer/src/components/Playground/Output/Preview/render.module.less
View File

@@ -1,14 +1,14 @@
[data-component=playground-output-preview-render] {
.renderRoot {
border: none;
height: 100%;
width: 100%;
flex: 1;
}
.mobile-mode-background {
.mobileModeRoot {
background-color: rgba(204, 204, 204, 0.66);
.mobile-mode-content {
.mobileModeContent {
padding: 80px;
}
@@ -24,7 +24,7 @@
flex-direction: row;
}
.device-header {
.deviceHeader {
margin: 20px auto;
width: 60px;
height: 10px;
@@ -38,7 +38,7 @@
}
}
.device-content {
.deviceContent {
margin: 0 10px;
background-color: white;
@@ -47,7 +47,7 @@
}
}
.device-footer {
.deviceFooter {
margin: 20px auto;
width: 40px;
height: 40px;
@@ -61,7 +61,7 @@
}
}
.switch-device, .switch-zoom {
.switchDevice, .switchZoom {
display: flex;
position: absolute;
top: 10px;
@@ -69,10 +69,10 @@
gap: 4px;
}
.switch-device {
.switchDevice {
left: 10px;
}
.switch-zoom {
.switchZoom {
right: 10px;
}

13
src/renderer/src/components/Playground/Output/Transform/index.module.less Normal file
View File

@@ -0,0 +1,13 @@
.root {
position: relative;
.errorMessage {
position: absolute;
bottom: 0;
width: 100%;
color: white;
background-color: #FF4D4FAA;
padding: 5px 10px;
font-size: 1.2em;
}
}

6
src/renderer/src/components/Playground/Output/Transform/index.tsx
View File

@@ -1,6 +1,6 @@
import MonacoEditor from '@monaco-editor/react'
import { Loader } from 'esbuild-wasm'
import '@/components/Playground/Output/Transform/transform.less'
import styles from '@/components/Playground/Output/Transform/index.module.less'
import { IFile, ITheme } from '@/components/Playground/shared'
import { cssToJsFromFile, jsonToJsFromFile } from '@/components/Playground/files'
import Compiler from '@/components/Playground/compiler'
@@ -57,14 +57,14 @@ const Transform = ({ file, theme }: OutputProps) => {
}, [file, Compiler])
return (
<div data-component={'playground-transform'}>
<div className={styles.root}>
<MonacoEditor
theme={theme}
language={'javascript'}
value={compiledCode}
options={{ ...MonacoEditorConfig, readOnly: true }}
/>
{errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
{errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
</div>
)
}

3
src/renderer/src/components/Playground/Output/Transform/transform.less
View File

@@ -1,3 +0,0 @@
[data-component=playground-transform] {
position: relative;
}

2
src/renderer/src/components/Playground/Output/index.tsx
View File

@@ -26,7 +26,7 @@ const Output = ({
const [selectedTab, setSelectedTab] = useState('Preview')
return (
<FlexBox data-component={'playground-code-output'}>
<FlexBox>
<Playground.CodeEditor.FileSelector
files={{
Preview: { name: 'Preview', language: 'json', value: '' },

2
src/renderer/src/components/Playground/playground.less → src/renderer/src/components/Playground/index.module.less
View File

@@ -1,4 +1,4 @@
[data-component=playground] {
.root {
width: 100%;
height: 100%;

4
src/renderer/src/components/Playground/index.tsx
View File

@@ -1,4 +1,4 @@
import '@/components/Playground/playground.less'
import styles from '@/components/Playground/index.module.less'
import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared'
import {
ENTRY_FILE_NAME,
@@ -77,7 +77,7 @@ const Playground = ({
}, [tsconfigRaw])
return (
<FlexBox data-component={'playground'} direction={'horizontal'}>
<FlexBox className={styles.root} direction={'horizontal'}>
<CodeEditor
tsconfig={tsconfig}
files={{

10
src/renderer/src/components/common/Card.tsx
View File

@@ -1,10 +1,16 @@
import { DetailedHTMLProps, HTMLAttributes } from 'react'
import '@/assets/css/components/common/card.less'
import styles from '@/assets/css/components/common/card.module.less'
type CardProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
return <div className={`card-box${className ? ` ${className}` : ''}`} {...props} ref={ref} />
return (
<div
className={`${styles.cardBox}${className ? ` ${className}` : ''}`}
{...props}
ref={ref}
/>
)
})
export default Card

4
src/renderer/src/components/common/FitCenter.tsx
View File

@@ -1,5 +1,5 @@
import { DetailedHTMLProps, HTMLAttributes } from 'react'
import '@/assets/css/components/common/fit-center.less'
import styles from '@/assets/css/components/common/fit-center.module.less'
interface FitCenterProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
vertical?: boolean
@@ -8,7 +8,7 @@ interface FitCenterProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement
const FitCenter = ({ className, vertical, ...props }: FitCenterProps) => {
return (
<div
className={`fit-center${className ? ` ${className}` : ''}${
className={`${styles.fitCenter}${className ? ` ${className}` : ''}${
vertical ? ' flex-vertical' : ' flex-horizontal'
}`}
{...props}

4
src/renderer/src/components/common/FitFullscreen.tsx
View File

@@ -1,5 +1,5 @@
import { DetailedHTMLProps, HTMLAttributes } from 'react'
import '@/assets/css/components/common/fit-fullscreen.less'
import styles from '@/assets/css/components/common/fit-fullscreen.module.less'
interface FitFullscreenProps
extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -11,7 +11,7 @@ const FitFullscreen = forwardRef<HTMLDivElement, FitFullscreenProps>(
({ zIndex, backgroundColor, className, style, ...props }, ref) => {
return (
<div
className={`fit-fullscreen${className ? ` ${className}` : ''}`}
className={`${styles.fitFullscreen}${className ? ` ${className}` : ''}`}
style={{
zIndex,
backgroundColor,

4
src/renderer/src/components/common/FlexBox.tsx
View File

@@ -1,5 +1,5 @@
import { DetailedHTMLProps, HTMLAttributes } from 'react'
import '@/assets/css/components/common/flex-box.less'
import styles from '@/assets/css/components/common/flex-box.module.less'
interface FlexBoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
direction?: 'horizontal' | 'vertical'
@@ -10,7 +10,7 @@ const FlexBox = forwardRef<HTMLDivElement, FlexBoxProps>(
({ className, direction, gap, style, ...props }, ref) => {
return (
<div
className={`flex-box ${
className={`${styles.flexBox} ${
direction === 'horizontal' ? 'flex-horizontal' : 'flex-vertical'
}${className ? ` ${className}` : ''}`}
style={{ gap, ...style }}

4
src/renderer/src/components/common/FullscreenLoadingMask.tsx
View File

@@ -1,5 +1,5 @@
import Icon from '@ant-design/icons'
import '@/assets/css/components/common/fullscreen-loading-mask.less'
import styles from '@/assets/css/components/common/fullscreen-loading-mask.module.less'
import { COLOR_FONT_MAIN } from '@/constants/common.constants'
import FitFullscreen from '@/components/common/FitFullscreen'
@@ -16,7 +16,7 @@ const FullscreenLoadingMask = () => {
return (
<>
<FitFullscreen>
<div className={'fullscreen-loading-mask'}>
<div className={styles.fullscreenLoadingMask}>
<AntdSpin indicator={loadingIcon} />
</div>
</FitFullscreen>

24
src/renderer/src/components/common/HideScrollbar.tsx
View File

@@ -6,7 +6,7 @@ import {
HTMLAttributes,
UIEvent
} from 'react'
import '@/assets/css/components/common/hide-scrollbar.less'
import styles from '@/assets/css/components/common/hide-scrollbar.module.less'
interface HideScrollbarProps
extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -515,7 +515,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
return (
<>
<div
className={'hide-scrollbar-mask'}
className={styles.hideScrollbarMask}
ref={maskRef}
onMouseMove={
!isPreventScroll ? handleScrollbarMouseEvent('move', 'all') : undefined
@@ -538,7 +538,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
>
<div
ref={rootRef}
className={`hide-scrollbar-selection${className ? ` ${className}` : ''}`}
className={`${styles.hideScrollbarSelection}${className ? ` ${className}` : ''}`}
tabIndex={0}
style={{
width: `calc(${maskRef.current?.clientWidth}px + ${verticalScrollbarWidth}px)`,
@@ -555,7 +555,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
onScroll={handleDefaultScroll}
>
<div
className={'hide-scrollbar-content'}
className={styles.hideScrollbarContent}
ref={contentRef}
style={{ minWidth, minHeight }}
data-refresh={refreshTime}
@@ -566,8 +566,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
{isShowVerticalScrollbar &&
(!isHiddenVerticalScrollbarWhenFull || verticalScrollbarLength < 100) && (
<div
className={`scrollbar vertical-scrollbar${
isVerticalScrollbarAutoHide ? ' hide' : ''
className={`${styles.scrollbar} ${styles.verticalScrollbar}${
isVerticalScrollbarAutoHide ? ` ${styles.hide}` : ''
}`}
style={{
height: maskRef.current
@@ -582,9 +582,9 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
padding: `${scrollbarAsidePadding}px ${scrollbarEdgePadding}px`
}}
>
<div className={'box'} style={{ width: scrollbarWidth }}>
<div className={styles.box} style={{ width: scrollbarWidth }}>
<div
className={'block'}
className={styles.block}
style={{
height: `${verticalScrollbarLength}%`,
top: `clamp(0px, ${verticalScrollbarPosition}%, ${
@@ -609,8 +609,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
(!isHiddenHorizontalScrollbarWhenFull ||
horizontalScrollbarLength < 100) && (
<div
className={`scrollbar horizontal-scrollbar${
isHorizontalScrollbarAutoHide ? ' hide' : ''
className={`${styles.scrollbar} ${styles.horizontalScrollbar}${
isHorizontalScrollbarAutoHide ? ` ${styles.hide}` : ''
}`}
style={{
width: maskRef.current
@@ -625,9 +625,9 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
padding: `${scrollbarEdgePadding}px ${scrollbarAsidePadding}px`
}}
>
<div className={'box'} style={{ height: scrollbarWidth }}>
<div className={styles.box} style={{ height: scrollbarWidth }}>
<div
className={'block'}
className={styles.block}
style={{
width: `${horizontalScrollbarLength}%`,
left: `clamp(0px, ${horizontalScrollbarPosition}%, ${

8
src/renderer/src/components/common/Indicator.tsx
View File

@@ -1,5 +1,5 @@
import _ from 'lodash'
import '@/assets/css/components/common/indicator.less'
import styles from '@/assets/css/components/common/indicator.module.less'
interface IndicatorProps {
total: number
@@ -16,15 +16,15 @@ const Indicator = ({ total, current, onSwitch }: IndicatorProps) => {
return (
<>
<ul className={'dot-list flex-vertical'}>
<ul className={`${styles.dotList} flex-vertical`}>
{_.range(0, total).map((_value, index) => {
return (
<li
key={index}
className={`item center-box${index === current ? ' active' : ''}`}
className={`${styles.item} center-box${index === current ? ` ${styles.active}` : ''}`}
onClick={handleClick(index)}
>
<div className={'dot'} />
<div className={styles.dot} />
</li>
)
})}

4
src/renderer/src/components/common/LoadingMask.tsx
View File

@@ -1,6 +1,6 @@
import { PropsWithChildren, ReactNode } from 'react'
import Icon from '@ant-design/icons'
import '@/assets/css/components/common/loading-mask.less'
import styles from '@/assets/css/components/common/loading-mask.module.less'
import { COLOR_FONT_MAIN } from '@/constants/common.constants'
interface LoadingMaskProps extends PropsWithChildren {
@@ -22,7 +22,7 @@ const LoadingMask = (props: LoadingMaskProps) => {
props.children
) : (
<>
<div className={'loading-mask'}>
<div className={styles.loadingMask}>
{props.maskContent || <AntdSpin indicator={loadingIcon} />}
</div>
</>

19
src/renderer/src/components/common/Sidebar/Footer.tsx
View File

@@ -1,4 +1,5 @@
import Icon from '@ant-design/icons'
import styles from '@/assets/css/components/common/sidebar.module.less'
import { COLOR_ERROR } from '@/constants/common.constants'
import { getRedirectUrl } from '@/util/route'
import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
@@ -55,9 +56,9 @@ const Footer = () => {
}, [loginStatus])
return (
<div className={'footer'}>
<div className={styles.footer}>
<span
className={'icon-user'}
className={styles.iconUser}
onClick={handleClickAvatar}
title={getLoginStatus() ? '个人中心' : '登录'}
>
@@ -67,21 +68,25 @@ const Footer = () => {
<Icon viewBox={'-20 0 1024 1024'} component={IconOxygenUser} />
)}
</span>
<span hidden={getLoginStatus()} className={'text'}>
<span hidden={getLoginStatus()} className={styles.text}>
未
<NavLink to={getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`)}>
登录
</NavLink>
</span>
<span hidden={!getLoginStatus()} className={'text'} title={nickname}>
<span hidden={!getLoginStatus()} className={styles.text} title={nickname}>
{nickname}
</span>
<div
hidden={!getLoginStatus()}
className={`submenu-exit${!getLoginStatus() ? ' hide' : ''}`}
className={`${styles.submenuExit}${!getLoginStatus() ? ` ${styles.hide}` : ''}`}
>
<div className={'content'}>
<span hidden={!getLoginStatus()} className={'icon-exit'} onClick={handleLogout}>
<div className={styles.content}>
<span
hidden={!getLoginStatus()}
className={styles.iconExit}
onClick={handleLogout}
>
<Icon
component={isExiting ? IconOxygenLoading : IconOxygenExit}
spin={isExiting}

21
src/renderer/src/components/common/Sidebar/Item.tsx
View File

@@ -1,5 +1,6 @@
import { ReactNode, MouseEvent } from 'react'
import Icon from '@ant-design/icons'
import styles from '@/assets/css/components/common/sidebar.module.less'
import Submenu from '@/components/common/Sidebar/Submenu'
type ItemProps = {
@@ -33,30 +34,26 @@ const Item = (props: ItemProps) => {
}
return (
<li className={'item'}>
<div className={'menu-bt'} onMouseEnter={showSubmenu}>
<li className={styles.item}>
<div className={styles.menuBt} onMouseEnter={showSubmenu}>
<NavLink
end={props.end}
to={props.path}
className={({ isActive, isPending }) =>
isPending ? 'pending' : isActive ? 'active' : ''
isPending ? 'pending' : isActive ? `${styles.active}` : ''
}
>
{props.icon && (
<div className={'icon-box'}>
<div className={styles.iconBox}>
{typeof props.icon === 'string' ? (
<img
className={'icon'}
src={`data:image/svg+xml;base64,${props.icon}`}
alt={'icon'}
/>
<img src={`data:image/svg+xml;base64,${props.icon}`} alt={'icon'} />
) : (
<Icon className={'icon'} component={props.icon} />
<Icon component={props.icon} />
)}
</div>
)}
<span className={'text'}>{props.text}</span>
<div className={'extend'}>{props.extend}</div>
<span className={styles.text}>{props.text}</span>
<div className={styles.extend}>{props.extend}</div>
</NavLink>
</div>
{props.children && (

3
src/renderer/src/components/common/Sidebar/Scroll.tsx
View File

@@ -1,9 +1,10 @@
import { PropsWithChildren } from 'react'
import styles from '@/assets/css/components/common/sidebar.module.less'
import HideScrollbar from '@/components/common/HideScrollbar'
const Scroll = (props: PropsWithChildren) => {
return (
<div className={'scroll'}>
<div className={styles.scroll}>
<HideScrollbar
isShowVerticalScrollbar={true}
scrollbarWidth={2}

3
src/renderer/src/components/common/Sidebar/Separate.tsx
View File

@@ -1,10 +1,11 @@
import { DetailedHTMLProps, HTMLAttributes } from 'react'
import styles from '@/assets/css/components/common/sidebar.module.less'
const Separate = ({
className,
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
return <div className={`separate${className ? ` ${className}` : ''}`} {...props} />
return <div className={`${styles.separate}${className ? ` ${className}` : ''}`} {...props} />
}
export default Separate

5
src/renderer/src/components/common/Sidebar/Submenu.tsx
View File

@@ -1,4 +1,5 @@
import { PropsWithChildren } from 'react'
import styles from '@/assets/css/components/common/sidebar.module.less'
interface SidebarSubmenuProps extends PropsWithChildren {
submenuTop: number
@@ -8,13 +9,13 @@ interface SidebarSubmenuProps extends PropsWithChildren {
const Submenu = (props: SidebarSubmenuProps) => {
return (
<ul
className={'submenu'}
className={styles.submenu}
style={{
top: props.submenuTop,
left: props.submenuLeft
}}
>
<div className={'content'}>{props.children}</div>
<div className={styles.content}>{props.children}</div>
</ul>
)
}

14
src/renderer/src/components/common/Sidebar/index.tsx
View File

@@ -1,6 +1,6 @@
import { PropsWithChildren, ReactNode } from 'react'
import Icon from '@ant-design/icons'
import '@/assets/css/components/common/sidebar.less'
import styles from '@/assets/css/components/common/sidebar.module.less'
import { getLocalStorage, setLocalStorage } from '@/util/browser'
import Item from '@/components/common/Sidebar/Item'
import ItemList from '@/components/common/Sidebar/ItemList'
@@ -28,18 +28,18 @@ const Sidebar = (props: SidebarProps) => {
return (
<>
<div
className={`sidebar${isHideSidebar ? ' hide' : ''}`}
className={`${styles.sidebar}${isHideSidebar ? ` ${styles.hide}` : ''}`}
style={{ width: props.width ?? 'clamp(180px, 20vw, 240px)' }}
>
<div className={'title'}>
<span className={'icon-box'} onClick={switchSidebar}>
<div className={styles.title}>
<span className={styles.iconBox} onClick={switchSidebar}>
<Icon component={IconOxygenExpand} />
</span>
<span className={'text'}>{props.title}</span>
<span className={styles.text}>{props.title}</span>
</div>
<Separate style={{ marginTop: 0 }} />
<div className={'content'}>{props.children}</div>
<div className={'bottom-fixed'} style={{ flex: 'none' }}>
<div className={styles.content}>{props.children}</div>
<div className={styles.bottomFixed} style={{ flex: 'none' }}>
{props.bottomFixed}
</div>
<Separate style={{ marginTop: 0, marginBottom: 0 }} />

12
src/renderer/src/components/common/UrlCard.tsx
View File

@@ -1,7 +1,7 @@
import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
import Icon from '@ant-design/icons'
import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
import '@/assets/css/components/common/url-card.less'
import styles from '@/assets/css/components/common/url-card.module.less'
import Card from '@/components/common/Card'
import FlexBox from '@/components/common/FlexBox'
@@ -39,16 +39,16 @@ const UrlCard = ({
return (
<Card
data-component={'component-url-card'}
className={styles.root}
style={{ overflow: 'visible', ...style }}
{...props}
ref={cardRef}
onClick={handleCardOnClick}
>
<FlexBox className={'url-card'}>
<Icon component={icon} className={'icon'} />
<div className={'text'}>{children}</div>
<div className={'description'}>{description}</div>
<FlexBox className={styles.urlCard}>
<Icon component={icon} className={styles.icon} />
<div className={styles.text}>{children}</div>
<div>{description}</div>
</FlexBox>
</Card>
)

5
src/renderer/src/components/dnd/DragHandle.tsx
View File

@@ -1,6 +1,6 @@
import { HandleContextInst } from '@/components/dnd/HandleContext'
import Icon from '@ant-design/icons'
import '@/assets/css/components/dnd/drag-handle.less'
import styles from '@/assets/css/components/dnd/drag-handle.module.less'
interface DragHandleProps {
padding?: string | number
@@ -11,10 +11,9 @@ const DragHandle = ({ padding }: DragHandleProps) => {
return (
<button
data-component={'component-drag-handle'}
className={styles.root}
style={{ padding }}
ref={ref}
className={'drag-handle'}
{...attributes}
{...listeners}
>

6
src/renderer/src/components/dnd/DropMask.tsx
View File

@@ -1,10 +1,10 @@
import '@/assets/css/components/dnd/drop-mask.less'
import Icon from '@ant-design/icons'
import styles from '@/assets/css/components/dnd/drop-mask.module.less'
const DropMask = () => {
return (
<div data-component={'component-drop-mask'}>
<div className={'drop-mask-border'}>
<div className={styles.root}>
<div className={styles.dropMaskBorder}>
<Icon component={IconOxygenReceive} />
</div>
</div>

18
src/renderer/src/components/system/SettingCard.tsx
View File

@@ -1,6 +1,6 @@
import { PropsWithChildren, ReactNode } from 'react'
import Icon from '@ant-design/icons'
import '@/assets/css/components/system/setting-card.less'
import styles from '@/assets/css/components/system/setting-card.module.less'
import Card from '@/components/common/Card'
import FlexBox from '@/components/common/FlexBox'
import Permission from '@/components/common/Permission'
@@ -17,18 +17,22 @@ interface SettingsCardProps extends PropsWithChildren {
}
export const SettingsCard = (props: SettingsCardProps) => {
return (
<Card data-component={'component-setting-card'}>
<FlexBox className={'settings-card'}>
<FlexBox direction={'horizontal'} className={'head'}>
<Icon component={props.icon} className={'icon'} />
<div className={'title'}>{props.title}</div>
<Card className={styles.root}>
<FlexBox className={styles.settingsCard}>
<FlexBox direction={'horizontal'} className={styles.head}>
<Icon component={props.icon} className={styles.icon} />
<div className={styles.title}>{props.title}</div>
{!props.loading && (
<Permission operationCode={props.modifyOperationCode}>
{props.expand}
<AntdButton onClick={props.onReset} title={'重置'}>
<Icon component={IconOxygenBack} />
</AntdButton>
<AntdButton className={'bt-save'} onClick={props.onSave} title={'保存'}>
<AntdButton
className={styles.btSave}
onClick={props.onSave}
title={'保存'}
>
<Icon component={IconOxygenSave} />
</AntdButton>
</Permission>

12
src/renderer/src/components/system/StatisticsCard.tsx
View File

@@ -1,6 +1,6 @@
import { PropsWithChildren, ReactNode } from 'react'
import Icon from '@ant-design/icons'
import '@/assets/css/components/system/statistics-card.less'
import styles from '@/assets/css/components/system/statistics-card.module.less'
import Card from '@/components/common/Card'
import FlexBox from '@/components/common/FlexBox'
import LoadingMask from '@/components/common/LoadingMask'
@@ -14,11 +14,11 @@ interface StatisticsCardProps extends PropsWithChildren {
export const StatisticsCard = (props: StatisticsCardProps) => {
return (
<Card data-component={'component-statistics-card'} style={{ overflow: 'visible' }}>
<FlexBox className={'statistics-card'}>
<FlexBox direction={'horizontal'} className={'head'}>
<Icon component={props.icon} className={'icon'} />
<div className={'title'}>{props.title}</div>
<Card className={styles.root} style={{ overflow: 'visible' }}>
<FlexBox className={styles.statisticsCard}>
<FlexBox direction={'horizontal'} className={styles.head}>
<Icon component={props.icon} className={styles.icon} />
<div className={styles.title}>{props.title}</div>
{props.expand}
</FlexBox>
<LoadingMask

10
src/renderer/src/components/tools/LoadMoreCard.tsx
View File

@@ -1,6 +1,6 @@
import VanillaTilt from 'vanilla-tilt'
import Icon from '@ant-design/icons'
import '@/assets/css/components/tools/load-more-card.less'
import styles from '@/assets/css/components/tools/load-more-card.module.less'
import FlexBox from '@/components/common/FlexBox'
import Card from '@/components/common/Card'
@@ -24,16 +24,16 @@ const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => {
return (
<Card
data-component={'component-load-more-card'}
className={styles.root}
style={{ overflow: 'visible' }}
ref={cardRef}
onClick={onClick}
>
<FlexBox className={'load-more-card'}>
<div className={'icon'}>
<FlexBox className={styles.loadMoreCard}>
<div className={styles.icon}>
<Icon component={IconOxygenMore} />{' '}
</div>
<div className={'text'}>加载更多</div>
<div className={styles.text}>加载更多</div>
</FlexBox>
</Card>
)

36
src/renderer/src/components/tools/LocalCard.tsx
View File

@@ -1,7 +1,7 @@
import { DetailedHTMLProps, HTMLAttributes, MouseEvent } from 'react'
import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
import Icon from '@ant-design/icons'
import '@/assets/css/components/tools/local-card.less'
import styles from '@/assets/css/components/tools/local-card.module.less'
import { COLOR_BACKGROUND, COLOR_MAIN } from '@/constants/common.constants'
import { checkDesktop, omitText } from '@/util/common'
import { getAndroidUrl, navigateToStore, navigateToView } from '@/util/navigation'
@@ -63,9 +63,9 @@ const StoreCard = ({
icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
title: 'Android 端',
content: (
<FlexBox className={'android-qrcode'}>
<FlexBox className={styles.androidQrcode}>
<AntdQRCode value={getAndroidUrl(author.username, toolId)} size={300} />
<AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
<AntdTag>请使用手机端扫描上方二维码</AntdTag>
</FlexBox>
),
okText: '确定',
@@ -91,9 +91,9 @@ const StoreCard = ({
icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
title: 'Android 端',
content: (
<FlexBox className={'android-qrcode'}>
<FlexBox className={styles.androidQrcode}>
<AntdQRCode value={getAndroidUrl(author.username, toolId)} size={300} />
<AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
<AntdTag>请使用手机端扫描上方二维码</AntdTag>
</FlexBox>
),
okText: '确定',
@@ -123,20 +123,20 @@ const StoreCard = ({
}}
>
<Card
data-component={'component-local-card'}
className={styles.root}
style={{ overflow: 'visible', ...style }}
ref={cardRef}
{...props}
onClick={handleCardOnClick}
>
<FlexBox className={'local-card'}>
<div className={'header'}>
<div className={'version'}>
<FlexBox className={styles.localCard}>
<div className={styles.header}>
<div className={styles.version}>
<AntdTag>
{platform.slice(0, 1)}-{ver}
</AntdTag>
</div>
<div className={'operation'}>
<div className={styles.operation}>
{platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
<AntdTooltip title={'Android 端'}>
<Icon
@@ -156,22 +156,22 @@ const StoreCard = ({
<DragHandle />
</div>
</div>
<div className={'icon'}>
<div className={styles.icon}>
<img src={`data:image/svg+xml;base64,${icon}`} alt={'Icon'} />
</div>
<div className={'info'}>
<div className={'tool-name'}>{toolName}</div>
<div className={'tool-id'}>{`ID: ${toolId}`}</div>
<div className={styles.info}>
<div className={styles.toolName}>{toolName}</div>
<div>{`ID: ${toolId}`}</div>
{toolDesc && (
<div
className={'tool-desc'}
className={styles.toolDesc}
title={toolDesc}
>{`简介：${omitText(toolDesc, 18)}`}</div>
)}
</div>
{showAuthor && (
<div className={'author'} onClick={handleOnClickAuthor}>
<div className={'avatar'}>
<div className={styles.author} onClick={handleOnClickAuthor}>
<div className={styles.avatar}>
<AntdAvatar
src={
<AntdImage
@@ -183,7 +183,7 @@ const StoreCard = ({
style={{ background: COLOR_BACKGROUND }}
/>
</div>
<div className={'author-name'}>{author.userInfo.nickname}</div>
<div className={styles.authorName}>{author.userInfo.nickname}</div>
</div>
)}
</FlexBox>

20
src/renderer/src/components/tools/RepositoryCard.tsx
View File

@@ -1,6 +1,6 @@
import { DetailedHTMLProps, HTMLAttributes } from 'react'
import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
import '@/assets/css/components/tools/repository-card.less'
import styles from '@/assets/css/components/tools/repository-card.module.less'
import Card from '@/components/common/Card'
import FlexBox from '@/components/common/FlexBox'
import Draggable from '@/components/dnd/Draggable'
@@ -58,31 +58,31 @@ const RepositoryCard = ({
data={{ icon, toolName, toolId, authorUsername: '!', ver, platform }}
>
<Card
data-component={'component-repository-card'}
className={styles.root}
style={{ overflow: 'visible', ...style }}
ref={cardRef}
{...props}
>
<FlexBox className={'repository-card'}>
<div className={'header'}>
<FlexBox className={styles.repositoryCard}>
<div className={styles.header}>
{children}
<DragHandle />
</div>
<div className={'icon'}>
<div className={styles.icon}>
<img src={`data:image/svg+xml;base64,${icon}`} alt={'Icon'} />
</div>
<div className={'info'}>
<div className={'tool-name'}>{toolName}</div>
<div className={'tool-id'}>{`ID: ${toolId}`}</div>
<div className={styles.info}>
<div className={styles.toolName}>{toolName}</div>
<div>{`ID: ${toolId}`}</div>
</div>
<div className={'operation'}>
<div className={styles.operation}>
{onOpen && (
<AntdButton onClick={onOpen} size={'small'} type={'primary'}>
打开
</AntdButton>
)}
{onEdit && onPublish && (
<div className={'edit'}>
<div className={styles.edit}>
<AntdButton.Group size={'small'}>
<AntdButton onClick={onEdit}>编辑</AntdButton>
<AntdButton onClick={onPublish}>发布</AntdButton>

36
src/renderer/src/components/tools/StoreCard.tsx
View File

@@ -2,7 +2,7 @@ import { DetailedHTMLProps, HTMLAttributes, MouseEvent } from 'react'
import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
import protocolCheck from 'custom-protocol-check'
import Icon from '@ant-design/icons'
import '@/assets/css/components/tools/store-card.less'
import styles from '@/assets/css/components/tools/store-card.module.less'
import {
COLOR_BACKGROUND,
COLOR_MAIN,
@@ -95,9 +95,9 @@ const StoreCard = ({
icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
title: 'Android 端',
content: (
<FlexBox className={'android-qrcode'}>
<FlexBox className={styles.androidQrcode}>
<AntdQRCode value={getAndroidUrl(author.username, toolId)} size={300} />
<AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
<AntdTag>请使用手机端扫描上方二维码</AntdTag>
</FlexBox>
),
okText: '确定',
@@ -216,9 +216,9 @@ const StoreCard = ({
icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
title: 'Android 端',
content: (
<FlexBox className={'android-qrcode'}>
<FlexBox className={styles.androidQrcode}>
<AntdQRCode value={getAndroidUrl(author.username, toolId)} size={300} />
<AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
<AntdTag>请使用手机端扫描上方二维码</AntdTag>
</FlexBox>
),
okText: '确定',
@@ -296,20 +296,20 @@ const StoreCard = ({
}}
>
<Card
data-component={'component-store-card'}
className={styles.root}
style={{ overflow: 'visible', ...style }}
ref={cardRef}
{...props}
onClick={handleCardOnClick}
>
<FlexBox className={'store-card'}>
<div className={'header'}>
<div className={'version'}>
<FlexBox className={styles.storeCard}>
<div className={styles.header}>
<div className={styles.version}>
<AntdTag>
{platform.slice(0, 1)}-{ver}
</AntdTag>
</div>
<div className={'operation'}>
<div className={styles.operation}>
{(!isInstalled || isAvailableUpdate) && (
<AntdTooltip title={isAvailableUpdate ? '更新' : '安装'}>
<Icon
@@ -365,22 +365,22 @@ const StoreCard = ({
<DragHandle />
</div>
</div>
<div className={'icon'}>
<div className={styles.icon}>
<img src={`data:image/svg+xml;base64,${icon}`} alt={'Icon'} />
</div>
<div className={'info'}>
<div className={'tool-name'}>{toolName}</div>
<div className={'tool-id'}>{`ID: ${toolId}`}</div>
<div className={styles.info}>
<div className={styles.toolName}>{toolName}</div>
<div>{`ID: ${toolId}`}</div>
{toolDesc && (
<div
className={'tool-desc'}
className={styles.toolDesc}
title={toolDesc}
>{`简介：${omitText(toolDesc, 18)}`}</div>
)}
</div>
{showAuthor && (
<div className={'author'} onClick={handleOnClickAuthor}>
<div className={'avatar'}>
<div className={styles.author} onClick={handleOnClickAuthor}>
<div className={styles.avatar}>
<AntdAvatar
src={
<AntdImage
@@ -392,7 +392,7 @@ const StoreCard = ({
style={{ background: COLOR_BACKGROUND }}
/>
</div>
<div className={'author-name'}>{author.userInfo.nickname}</div>
<div className={styles.authorName}>{author.userInfo.nickname}</div>
</div>
)}
</FlexBox>

17
src/renderer/src/pages/Sign/Forget.tsx
View File

@@ -1,5 +1,6 @@
import Icon from '@ant-design/icons'
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
import styles from '@/assets/css/pages/sign/forget.module.less'
import {
H_CAPTCHA_SITE_KEY,
PERMISSION_FORGET_SUCCESS,
@@ -135,14 +136,14 @@ const Forget = () => {
}
return (
<div className={'forget'}>
<div className={styles.root}>
<FitCenter>
<FlexBox>
<div className={'title'}>
<div className={'primary'}>找回密码</div>
<div className={'secondary'}>Retrieve password</div>
<div className={styles.title}>
<div className={styles.primary}>找回密码</div>
<div className={styles.secondary}>Retrieve password</div>
</div>
<div className={'form'}>
<div className={styles.form}>
{!searchParams.get('code') ? (
!isSent ? (
<>
@@ -188,7 +189,7 @@ const Forget = () => {
</AntdForm>
</>
) : (
<div className={'retry'}>
<div className={styles.retry}>
我们向您发送了一封包含找回密码链接的邮件，如未收到，可能被归为垃圾邮件，请仔细检查。
<a onClick={handleOnRetry}>重新发送</a>
</div>
@@ -268,10 +269,10 @@ const Forget = () => {
</AntdForm>
</>
) : (
<div className={'success'}>恭喜你，密码已更新，请重新登录。</div>
<div className={styles.success}>恭喜你，密码已更新，请重新登录。</div>
)}
<div className={'footer'}>
<div className={styles.footer}>
找到了？
<a
onClick={() =>

15
src/renderer/src/pages/Sign/SignIn.tsx
View File

@@ -1,5 +1,6 @@
import Icon from '@ant-design/icons'
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
import styles from '@/assets/css/pages/sign/sign-in.module.less'
import {
H_CAPTCHA_SITE_KEY,
PERMISSION_LOGIN_SUCCESS,
@@ -211,14 +212,14 @@ const SignIn = () => {
}
return (
<div className={'sign-in'}>
<div className={styles.root}>
<FitCenter>
<FlexBox>
<div className={'title'}>
<div className={'primary'}>欢迎回来</div>
<div className={'secondary'}>Welcome back</div>
<div className={styles.title}>
<div className={styles.primary}>欢迎回来</div>
<div className={styles.secondary}>Welcome back</div>
</div>
<AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
<AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={styles.form}>
<AntdForm.Item
name={'account'}
rules={[
@@ -259,7 +260,7 @@ const SignIn = () => {
data-refresh={refreshTime}
/>
</AntdForm.Item>
<FlexBox direction={'horizontal'} className={'addition'}>
<FlexBox direction={'horizontal'} className={styles.addition}>
<a
onClick={() => {
navigateToRoot(navigate)
@@ -286,7 +287,7 @@ const SignIn = () => {
登&ensp;&ensp;&ensp;&ensp;录
</AntdButton>
</AntdForm.Item>
<div className={'footer'}>
<div className={styles.footer}>
还没有账号？
<a
onClick={() =>

15
src/renderer/src/pages/Sign/SignUp.tsx
View File

@@ -1,5 +1,6 @@
import Icon from '@ant-design/icons'
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
import styles from '@/assets/css/pages/sign/sign-up.module.less'
import {
DATABASE_DUPLICATE_KEY,
H_CAPTCHA_SITE_KEY,
@@ -124,14 +125,14 @@ const SignUp = () => {
}
return (
<div className={'sign-up'}>
<div className={styles.root}>
<FitCenter>
<FlexBox>
<div className={'title'}>
<div className={'primary'}>创建账号</div>
<div className={'secondary'}>Create account</div>
<div className={styles.title}>
<div className={styles.primary}>创建账号</div>
<div className={styles.secondary}>Create account</div>
</div>
<AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
<AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={styles.form}>
{!isFinish ? (
<>
<AntdForm.Item
@@ -234,13 +235,13 @@ const SignUp = () => {
</AntdForm.Item>
</>
) : (
<div className={'retry'}>
<div className={styles.retry}>
我们发送了一封包含验证账号链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
<a onClick={handleOnResend}>重新发送</a>
</div>
)}
<div className={'footer'} hidden={isFinish}>
<div className={styles.footer} hidden={isFinish}>
已有账号？
<a
onClick={() =>

22
src/renderer/src/pages/Sign/Verify.tsx
View File

@@ -1,3 +1,4 @@
import styles from '@/assets/css/pages/sign/verify.module.less'
import {
COLOR_BACKGROUND,
PERMISSION_ACCOUNT_NEED_INIT,
@@ -145,21 +146,18 @@ const Verify = () => {
return (
<>
<div className={'verify'}>
<div className={styles.root}>
<FitCenter>
<FlexBox>
<div className={'title'}>
<div className={'primary'}>验证账号</div>
<div className={'secondary'}>Verify account</div>
<div className={styles.title}>
<div className={styles.primary}>验证账号</div>
<div className={styles.secondary}>Verify account</div>
</div>
<AntdForm className={'form'} onFinish={handleOnFinish}>
<div className={'no-verify-need'} hidden={needVerify}>
<AntdForm className={styles.form} onFinish={handleOnFinish}>
<div hidden={needVerify}>
账号已验证通过，无需验证，点击&nbsp;<a href={'/'}>回到首页</a>
</div>
<div
className={'verify-process'}
hidden={!needVerify || !hasCode || !isValid}
>
<div hidden={!needVerify || !hasCode || !isValid}>
<div
style={{
display: 'flex',
@@ -214,11 +212,11 @@ const Verify = () => {
</AntdButton>
</AntdForm.Item>
</div>
<div className={'no-code'} hidden={hasCode}>
<div hidden={hasCode}>
在继续使用之前，我们需要确定您的电子邮箱地址的有效性，请点击&nbsp;
<a onClick={handleOnResend}>发送验证邮件</a>
</div>
<div className={'not-valid'} hidden={!hasCode || isValid}>
<div hidden={!hasCode || isValid}>
此链接有误或已失效，请点击&nbsp;
<a onClick={handleOnResend}>重新发送验证邮件</a>
</div>

24
src/renderer/src/pages/Sign/index.tsx
View File

@@ -1,4 +1,4 @@
import '@/assets/css/pages/sign.less'
import styles from '@/assets/css/pages/sign/index.module.less'
import FitFullscreen from '@/components/common/FitFullscreen'
import FitCenter from '@/components/common/FitCenter'
import FlexBox from '@/components/common/FlexBox'
@@ -42,23 +42,25 @@ const Sign = () => {
return (
<>
<FitFullscreen data-component={'sign'}>
<FitFullscreen className={styles.root}>
<FitCenter>
<FlexBox
direction={'horizontal'}
className={`sign-box${isSwitch ? ' switch' : ''}`}
className={`${styles.signBox}${isSwitch ? ` ${styles.switch}` : ''}`}
>
<div className={`left${!isSwitch ? ' hidden' : ''}`}>{leftComponent()}</div>
<div className={`right${isSwitch ? ' hidden' : ''}`}>
<div className={`${styles.left}${!isSwitch ? ` ${styles.hidden}` : ''}`}>
{leftComponent()}
</div>
<div className={`${styles.right}${isSwitch ? ` ${styles.hidden}` : ''}`}>
{rightComponent()}
</div>
<FlexBox className={'cover'}>
<div className={'ball-box'}>
<div className={'ball'} />
<FlexBox className={styles.cover}>
<div className={styles.ballBox}>
<div className={styles.ball} />
</div>
<div className={'ball-box'}>
<div className={'mask'}>
<div className={'ball'} />
<div className={styles.ballBox}>
<div className={styles.mask}>
<div className={styles.ball} />
</div>
</div>
</FlexBox>

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

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

10
src/renderer/src/pages/System/Settings/index.tsx
View File

@@ -1,4 +1,4 @@
import '@/assets/css/pages/system/settings.less'
import styles from '@/assets/css/pages/system/settings.module.less'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
@@ -11,10 +11,10 @@ import TwoFactor from '@/pages/System/Settings/TwoFactor'
const Settings = () => {
return (
<>
<FitFullscreen data-component={'system-settings'}>
<FitFullscreen className={styles.root}>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
<FlexBox direction={'horizontal'} className={'root-content'}>
<FlexBox className={'root-col'}>
<FlexBox direction={'horizontal'} className={styles.rootContent}>
<FlexBox className={styles.rootCol}>
<Permission operationCode={['system:settings:query:base']}>
<Base />
</Permission>
@@ -22,7 +22,7 @@ const Settings = () => {
<SensitiveWord />
</Permission>
</FlexBox>
<FlexBox className={'root-col'}>
<FlexBox className={styles.rootCol}>
<Permission operationCode={['system:settings:query:mail']}>
<Mail />
</Permission>

6
src/renderer/src/pages/System/Statistics/index.tsx
View File

@@ -1,4 +1,4 @@
import '@/assets/css/pages/system/statistics.less'
import styles from '@/assets/css/pages/system/statistics.module.less'
import FlexBox from '@/components/common/FlexBox'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
@@ -13,9 +13,9 @@ import StorageInfo from '@/pages/System/Statistics/StorageInfo'
const Statistics = () => {
return (
<>
<FitFullscreen data-component={'system-statistics'}>
<FitFullscreen className={styles.root}>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
<FlexBox direction={'horizontal'} className={'root-content'}>
<FlexBox direction={'horizontal'} className={styles.rootContent}>
<Permission operationCode={['system:statistics:query:usage']}>
<OnlineInfo />
<ActiveInfo />

13
src/renderer/src/pages/System/Tools/Base.tsx
View File

@@ -1,5 +1,5 @@
import Icon from '@ant-design/icons'
import '@/assets/css/pages/system/tools/base.less'
import styles from '@/assets/css/pages/system/tools/base.module.less'
import {
COLOR_PRODUCTION,
DATABASE_DELETE_SUCCESS,
@@ -125,7 +125,7 @@ const Base = () => {
{
title: '名称',
render: (_, record) => (
<span className={hasEdited[record.id] ? 'has-edited' : undefined}>
<span className={hasEdited[record.id] ? styles.hasEdited : undefined}>
{record.name}
</span>
)
@@ -1077,9 +1077,9 @@ const Base = () => {
return (
<>
<FitFullscreen data-component={'system-tools-base'}>
<FitFullscreen className={styles.root}>
<HideScrollbar>
<FlexBox direction={'horizontal'} className={'root-content'}>
<FlexBox direction={'horizontal'} className={styles.rootContent}>
<Card>
<AntdTable
dataSource={baseData}
@@ -1110,7 +1110,10 @@ const Base = () => {
}
extraLibs={editorExtraLibs}
/>
<div className={'close-editor-btn'} onClick={handleOnCloseBtnClick}>
<div
className={styles.closeEditorBtn}
onClick={handleOnCloseBtnClick}
>
<Icon component={IconOxygenClose} />
</div>
</Card>

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

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

8
src/renderer/src/pages/System/Tools/Code.tsx
View File

@@ -1,6 +1,6 @@
import Draggable from 'react-draggable'
import Icon from '@ant-design/icons'
import '@/assets/css/pages/system/tools/code.less'
import styles from '@/assets/css/pages/system/tools/code.module.less'
import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
import { checkDesktop } from '@/util/common'
import { navigateToExecute, navigateToRepository } from '@/util/navigation'
@@ -81,8 +81,8 @@ const Code = () => {
return (
<>
<FitFullscreen data-component={'system-tools-code'}>
<Card>
<FitFullscreen className={styles.root}>
<Card className={styles.rootBox}>
<Playground.CodeEditor
readonly
files={files}
@@ -93,7 +93,7 @@ const Code = () => {
</Card>
<Draggable bounds={'#root'}>
<div className={'draggable-content'}>
<div className={styles.draggableContent}>
<AntdFloatButton
type={'primary'}
icon={<Icon component={IconOxygenExecute} />}

Some files were not shown because too many files have changed in this diff Show More