Feat(Theme): Support dark mode
This commit is contained in:
@@ -1,27 +1,65 @@
|
||||
import { theme } from 'antd'
|
||||
import zh_CN from 'antd/locale/zh_CN'
|
||||
import BaseStyles from '@/assets/css/base.style'
|
||||
import CommonStyles from '@/assets/css/common.style'
|
||||
import { COLOR_PRODUCTION } from '@/constants/common.constants'
|
||||
import { getRouter } from '@/router'
|
||||
import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
|
||||
|
||||
export const AppContext = createContext<{ refreshRouter: () => void }>({
|
||||
refreshRouter: () => undefined
|
||||
export const AppContext = createContext({
|
||||
refreshRouter: () => {},
|
||||
isDarkMode: false
|
||||
})
|
||||
|
||||
const App = () => {
|
||||
const [routerState, setRouterState] = useState(getRouter)
|
||||
const [isDarkMode, setIsDarkMode] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
setIsDarkMode(darkThemeMq.matches)
|
||||
const listener = (ev: MediaQueryListEvent) => {
|
||||
setIsDarkMode(ev.matches)
|
||||
}
|
||||
darkThemeMq.addEventListener('change', listener)
|
||||
|
||||
return () => {
|
||||
darkThemeMq.removeEventListener('change', listener)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<AntdConfigProvider
|
||||
theme={{
|
||||
cssVar: true,
|
||||
algorithm: isDarkMode ? theme.darkAlgorithm : undefined,
|
||||
token: {
|
||||
colorPrimary: COLOR_PRODUCTION,
|
||||
colorLinkHover: COLOR_PRODUCTION
|
||||
},
|
||||
components: {
|
||||
Tree: {
|
||||
colorBgContainer: 'transparent'
|
||||
}
|
||||
}
|
||||
}}
|
||||
locale={zh_CN}
|
||||
>
|
||||
<BaseStyles />
|
||||
<CommonStyles />
|
||||
<AppContext.Provider
|
||||
value={{
|
||||
refreshRouter: () => {
|
||||
setRouterState(getRouter())
|
||||
}
|
||||
},
|
||||
isDarkMode
|
||||
}}
|
||||
>
|
||||
<Suspense fallback={<FullscreenLoadingMask />}>
|
||||
<RouterProvider router={routerState} />
|
||||
</Suspense>
|
||||
</AppContext.Provider>
|
||||
</>
|
||||
</AntdConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
em, i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button, input {
|
||||
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.hide, .none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
display: block;
|
||||
content: ".";
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
zoom: 1;
|
||||
}
|
||||
32
src/renderer/src/assets/css/base.style.ts
Normal file
32
src/renderer/src/assets/css/base.style.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { createGlobalStyle } from 'antd-style'
|
||||
|
||||
export default createGlobalStyle(() => ({
|
||||
'*': { margin: 0, padding: 0, boxSizing: 'border-box' },
|
||||
html: { scrollBehavior: 'smooth' },
|
||||
'em, i': { fontStyle: 'normal' },
|
||||
li: { listStyle: 'none' },
|
||||
img: { border: 0, verticalAlign: 'middle' },
|
||||
button: { cursor: 'pointer' },
|
||||
a: { color: '#666', textDecoration: 'none' },
|
||||
'button, input': {
|
||||
fontFamily:
|
||||
'Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\\5B8B\\4F53", sans-serif',
|
||||
border: 0,
|
||||
outline: 'none'
|
||||
},
|
||||
body: {
|
||||
WebkitFontSmoothing: 'antialiased',
|
||||
backgroundColor: '#fff',
|
||||
font: '12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\\5B8B\\4F53", sans-serif',
|
||||
color: '#666'
|
||||
},
|
||||
'.hide, .none': { display: 'none' },
|
||||
'.clearfix:after': {
|
||||
visibility: 'hidden',
|
||||
clear: 'both',
|
||||
display: 'block',
|
||||
content: '"."',
|
||||
height: 0
|
||||
},
|
||||
'.clearfix': { zoom: 1 }
|
||||
}))
|
||||
@@ -1,118 +0,0 @@
|
||||
@import '@/assets/css/constants';
|
||||
|
||||
#root {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.body {
|
||||
background-color: @background-color;
|
||||
color: @font-main-color;
|
||||
user-select: none;
|
||||
min-width: 900px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.fill {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fill-with {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fill-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.background-origin {
|
||||
background-color: @origin-color;
|
||||
}
|
||||
|
||||
.center-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vertical-center-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.horizontal-center-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon-size-xs {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
> use {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-size-sm {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
> use {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-size-md {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
> use {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-size-lg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
> use {
|
||||
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-size-xl {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
||||
> use {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-size-menu {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
|
||||
> use {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-horizontal {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
43
src/renderer/src/assets/css/common.style.ts
Normal file
43
src/renderer/src/assets/css/common.style.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { createGlobalStyle } from 'antd-style'
|
||||
|
||||
export default createGlobalStyle(() => ({
|
||||
'.center-box': {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
},
|
||||
'.vertical-center-box': { display: 'flex', alignItems: 'center' },
|
||||
'.horizontal-center-box': { display: 'flex', justifyContent: 'center' },
|
||||
'.icon-size-xs': {
|
||||
width: 16,
|
||||
height: 16,
|
||||
'> use': { width: 16, height: 16 }
|
||||
},
|
||||
'.icon-size-sm': {
|
||||
width: 20,
|
||||
height: 20,
|
||||
'> use': { width: 20, height: 20 }
|
||||
},
|
||||
'.icon-size-md': {
|
||||
width: 24,
|
||||
height: 24,
|
||||
'> use': { width: 24, height: 24 }
|
||||
},
|
||||
'.icon-size-lg': {
|
||||
width: 32,
|
||||
height: 32,
|
||||
'> use': { width: 32, height: 32 }
|
||||
},
|
||||
'.icon-size-xl': {
|
||||
width: 64,
|
||||
height: 64,
|
||||
'> use': { width: 64, height: 64 }
|
||||
},
|
||||
'.icon-size-menu': {
|
||||
width: 23,
|
||||
height: 23,
|
||||
'> use': { width: 23, height: 23 }
|
||||
},
|
||||
'.flex-horizontal': { display: 'flex', flexDirection: 'row' },
|
||||
'.flex-vertical': { display: 'flex', flexDirection: 'column' }
|
||||
}))
|
||||
@@ -1,8 +0,0 @@
|
||||
@import '@/assets/css/constants';
|
||||
|
||||
.cardBox {
|
||||
background-color: @origin-color;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
10
src/renderer/src/assets/css/components/common/card.style.ts
Normal file
10
src/renderer/src/assets/css/components/common/card.style.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
cardBox: {
|
||||
backgroundColor: token.colorBgContainer,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
overflow: 'hidden',
|
||||
boxShadow: token.boxShadowTertiary
|
||||
}
|
||||
}))
|
||||
@@ -1,7 +0,0 @@
|
||||
.fitCenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
fitCenter: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
}))
|
||||
@@ -1,5 +0,0 @@
|
||||
.fitFullscreen {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
fitFullscreen: {
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100vh'
|
||||
}
|
||||
}))
|
||||
@@ -1,5 +0,0 @@
|
||||
.flexBox {
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
flexBox: {
|
||||
'> *': {
|
||||
flex: 1
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,10 +0,0 @@
|
||||
.fullscreenLoadingMask {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
background-color: rgba(200, 200, 200, 0.2);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
fullscreenLoadingMask: {
|
||||
position: 'absolute',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
zIndex: 100,
|
||||
backgroundColor: token.colorBgContainer
|
||||
}
|
||||
}))
|
||||
@@ -1,90 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
@import "@/assets/css/mixins";
|
||||
|
||||
.hideScrollbarMask {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.hideScrollbarSelection {
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
.hideScrollbarContent {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
opacity: .5;
|
||||
touch-action: none;
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
.block {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
background-color: @font-secondary-color;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
|
||||
:hover {
|
||||
background-color: @font-main-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
animation: 0.4s linear;
|
||||
|
||||
.keyframes(m7t06K, {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
.verticalScrollbar {
|
||||
height: 100%;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
transform: translateX(-100%);
|
||||
|
||||
.box {
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontalScrollbar {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
transform: translateY(-100%);
|
||||
|
||||
.box {
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import { createStyles, keyframes } from 'antd-style'
|
||||
|
||||
const fadeOut = keyframes`
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
`
|
||||
|
||||
export default createStyles(({ css, cx, token }) => {
|
||||
const scrollbarBox = cx(css`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: ${token.borderRadiusLG};
|
||||
overflow: hidden;
|
||||
`)
|
||||
|
||||
return {
|
||||
hideScrollbarMask: {
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
'::-webkit-scrollbar': {
|
||||
display: 'none'
|
||||
}
|
||||
},
|
||||
hideScrollbarSelection: {
|
||||
position: 'relative',
|
||||
overflow: 'scroll',
|
||||
scrollbarWidth: 'none',
|
||||
msOverflowStyle: 'none'
|
||||
},
|
||||
hideScrollbarContent: {
|
||||
minWidth: '100%'
|
||||
},
|
||||
scrollbar: {
|
||||
position: 'absolute',
|
||||
zIndex: 1000,
|
||||
opacity: 0.5,
|
||||
touchAction: 'none'
|
||||
},
|
||||
scrollbarBox,
|
||||
scrollbarBoxBlock: {
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
borderRadius: token.borderRadiusLG,
|
||||
backgroundColor: token.colorTextSecondary,
|
||||
transition: 'background-color 0.2s',
|
||||
':hover': {
|
||||
backgroundColor: token.colorTextLabel
|
||||
}
|
||||
},
|
||||
verticalScrollbar: css`
|
||||
height: 100%;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
transform: translateX(-100%);
|
||||
|
||||
.${scrollbarBox} {
|
||||
width: ${token.sizeXXS}px;
|
||||
}
|
||||
`,
|
||||
horizontalScrollbar: css`
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
transform: translateY(-100%);
|
||||
|
||||
.${scrollbarBox} {
|
||||
height: ${token.sizeXXS}px;
|
||||
}
|
||||
`,
|
||||
hide: {
|
||||
display: 'block',
|
||||
opacity: 0,
|
||||
animation: `${fadeOut} 0.4s linear`
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -1,30 +0,0 @@
|
||||
@import '@/assets/css/constants';
|
||||
|
||||
.dotList {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.item {
|
||||
flex: auto;
|
||||
cursor: pointer;
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid @font-secondary-color;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
:hover {
|
||||
background-color: @focus-color;
|
||||
}
|
||||
}
|
||||
|
||||
.active > * {
|
||||
background-color: @font-secondary-color !important;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
.loadingMask {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
loadingMask: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
zIndex: 100
|
||||
}
|
||||
}))
|
||||
@@ -1,361 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
@import "@/assets/css/mixins";
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
transition: all .3s;
|
||||
white-space: nowrap;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
padding: 10px 14px;
|
||||
color: @main-color;
|
||||
overflow: hidden;
|
||||
|
||||
.iconBox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: @SIZE_ICON_SM;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
transform: rotateZ(180deg);
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
letter-spacing: 0.2em;
|
||||
transform: translateX(0.1em);
|
||||
}
|
||||
}
|
||||
|
||||
.content, .bottomFixed {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
.scroll {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
> li, > div > li {
|
||||
padding: 2px 14px;
|
||||
|
||||
&.item {
|
||||
position: relative;
|
||||
font-size: 1rem;
|
||||
|
||||
> .menuBt {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
|
||||
.iconBox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: @SIZE_ICON_SM;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: all 0.2s;
|
||||
background-color: @origin-color;
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
padding-left: 8px;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: @origin-color;
|
||||
background-color: @main-color;
|
||||
|
||||
img {
|
||||
filter: drop-shadow(1000px 0 0 @origin-color);
|
||||
transform: translate(-1000px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> * {
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
padding-left: 10px;
|
||||
z-index: 10000;
|
||||
animation: 0.1s ease forwards;
|
||||
.keyframes(XxrGiu, {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
});
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 10px 10px;
|
||||
background-color: @origin-color;
|
||||
border-radius: 8px;
|
||||
box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.item {
|
||||
border-radius: 8px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 8px 16px;
|
||||
transition: all 0.2s;
|
||||
|
||||
.text {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: @origin-color;
|
||||
background-color: @main-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover a:not(.active) {
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .menu-bt {
|
||||
a:not(.active) {
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
visibility: visible;
|
||||
animation: 0.3s ease;
|
||||
.keyframes(f6yTZM, {
|
||||
0% {
|
||||
transform: translateX(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global .delete {
|
||||
:local .menuBt {
|
||||
border: 1px dashed @error-secondary-color;
|
||||
filter: drop-shadow(1000px 0 0 @error-secondary-color);
|
||||
transform: translate(-1000px);
|
||||
|
||||
> a {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.separate {
|
||||
height: 0;
|
||||
margin: 10px 5px;
|
||||
border: 1px solid @font-secondary-color;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
padding: 8px 14px;
|
||||
color: @main-color;
|
||||
|
||||
.iconUser {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
margin-left: 4px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: @SIZE_ICON_XS;
|
||||
border: 2px @font-secondary-color solid;
|
||||
color: @font-secondary-color;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
padding-left: 10px;
|
||||
font-size: 1.4em;
|
||||
color: @font-main-color;
|
||||
user-select: text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
a {
|
||||
color: @main-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.iconExit {
|
||||
font-size: @SIZE_ICON_XS;
|
||||
color: @error-color;
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-radius: 8px;
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
width: 68px !important;
|
||||
|
||||
.title {
|
||||
.iconBox {
|
||||
span {
|
||||
transform: rotateZ(360deg);
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menuBt {
|
||||
.text, .extend {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
.menuBt {
|
||||
.text {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
|
||||
.text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.submenuExit {
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding-left: 6px;
|
||||
left: 100%;
|
||||
z-index: 1000;
|
||||
box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.content {
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: @origin-color;
|
||||
|
||||
.iconExit {
|
||||
padding: 4px 8px;
|
||||
|
||||
&:hover {
|
||||
border-radius: 8px;
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .submenuExit {
|
||||
display: block;
|
||||
animation: 0.3s ease;
|
||||
.keyframes(mfdCZC, {
|
||||
0% {
|
||||
transform: translateX(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import { createStyles, keyframes } from 'antd-style'
|
||||
|
||||
const slideIn = keyframes`
|
||||
0% {
|
||||
transform: translateX(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
`
|
||||
|
||||
export default createStyles(({ cx, css, token }) => {
|
||||
const collapsedExit = cx(css`
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding-left: ${token.paddingXS}px;
|
||||
left: 100%;
|
||||
z-index: 1000;
|
||||
box-shadow: 5px 5px 15px 0 ${token.colorBorder};
|
||||
`)
|
||||
|
||||
return {
|
||||
footer: css`
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
padding: ${token.paddingXS}px ${token.paddingSM}px;
|
||||
color: ${token.colorPrimary};
|
||||
|
||||
&:hover .${collapsedExit} {
|
||||
display: block;
|
||||
animation: ${slideIn} 0.3s ease;
|
||||
}
|
||||
`,
|
||||
|
||||
icon: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flex: '0 0 auto',
|
||||
marginLeft: token.marginXXS,
|
||||
width: token.sizeXL,
|
||||
height: token.sizeXL,
|
||||
fontSize: token.sizeMS,
|
||||
border: `2px ${token.colorBorder} solid`,
|
||||
color: token.colorBorder,
|
||||
borderRadius: '50%',
|
||||
overflow: 'hidden',
|
||||
cursor: 'pointer',
|
||||
|
||||
img: {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
},
|
||||
|
||||
text: {
|
||||
flex: 1,
|
||||
paddingLeft: token.paddingXS,
|
||||
fontSize: token.fontSizeLG,
|
||||
color: token.colorTextLabel,
|
||||
userSelect: 'text',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
a: {
|
||||
color: token.colorPrimary,
|
||||
textDecoration: 'underline'
|
||||
}
|
||||
},
|
||||
|
||||
collapsedText: {
|
||||
display: 'none'
|
||||
},
|
||||
|
||||
collapsedExit,
|
||||
|
||||
hide: {
|
||||
display: 'none !important'
|
||||
},
|
||||
|
||||
exitContent: {
|
||||
display: 'flex',
|
||||
backgroundColor: token.colorBgContainer
|
||||
},
|
||||
|
||||
collapsedExitContent: {
|
||||
padding: token.paddingXS,
|
||||
borderRadius: token.borderRadiusLG
|
||||
},
|
||||
|
||||
exitIcon: {
|
||||
fontSize: token.sizeMS,
|
||||
color: token.colorError,
|
||||
padding: `${token.paddingXXS}px ${token.paddingXS}px`,
|
||||
cursor: 'pointer',
|
||||
|
||||
'&:hover': {
|
||||
borderRadius: token.borderRadiusLG,
|
||||
backgroundColor: token.colorBgLayout
|
||||
}
|
||||
},
|
||||
|
||||
collapsedExitIcon: {
|
||||
padding: `${token.paddingXXS}px ${token.paddingXS}px`
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,85 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ cx, css, token }) => {
|
||||
const title = cx(css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
padding: ${token.paddingXS}px ${token.paddingSM}px;
|
||||
color: ${token.colorPrimary};
|
||||
overflow: hidden;
|
||||
`)
|
||||
|
||||
const titleIcon = cx(css`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: ${token.paddingXS}px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: ${token.sizeMD}px;
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
transform: rotateZ(180deg);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: ${token.colorBgLayout};
|
||||
}
|
||||
`)
|
||||
|
||||
const titleText = cx(css`
|
||||
flex: 1;
|
||||
font-size: ${token.fontSizeHeading3}px;
|
||||
text-align: center;
|
||||
letter-spacing: ${token.sizeXS}px;
|
||||
`)
|
||||
|
||||
return {
|
||||
sidebar: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
userSelect: 'none',
|
||||
transition: 'all .3s',
|
||||
whiteSpace: 'nowrap'
|
||||
},
|
||||
|
||||
title,
|
||||
|
||||
titleIcon,
|
||||
|
||||
titleText,
|
||||
|
||||
content: {
|
||||
display: 'flex',
|
||||
minHeight: 0,
|
||||
flexDirection: 'column',
|
||||
flex: 1,
|
||||
|
||||
'ul > li, ul > div > li': {
|
||||
padding: `${token.paddingXXS}px ${token.paddingSM}px`
|
||||
}
|
||||
},
|
||||
|
||||
collapse: cx(css`
|
||||
width: ${token.sizeXL * 2}px !important;
|
||||
|
||||
.${title} {
|
||||
.${titleIcon} {
|
||||
span {
|
||||
transform: rotateZ(360deg);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.${titleText} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`)
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,83 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ cx, css, token }) => {
|
||||
const menuBt = cx(css`
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: all 0.2s;
|
||||
background-color: ${token.colorBgContainer};
|
||||
}
|
||||
`)
|
||||
|
||||
const active = cx(css`
|
||||
color: ${token.colorTextLightSolid};
|
||||
background-color: ${token.colorPrimary} !important;
|
||||
`)
|
||||
|
||||
return {
|
||||
item: css`
|
||||
position: relative;
|
||||
font-size: ${token.fontSizeHeading5}px;
|
||||
|
||||
&:hover > div > a:not(.${active}),
|
||||
&:hover > a:not(.${active}) {
|
||||
background-color: ${token.colorBgLayout};
|
||||
}
|
||||
`,
|
||||
|
||||
submenuItem: css`
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding: 0 !important;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: ${token.paddingXS}px ${token.paddingMD}px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
`,
|
||||
|
||||
menuBt,
|
||||
|
||||
active,
|
||||
|
||||
icon: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: `0 ${token.paddingXS}px`,
|
||||
width: 40,
|
||||
height: 40,
|
||||
fontSize: token.sizeMD,
|
||||
cursor: 'pointer',
|
||||
|
||||
img: {
|
||||
width: '100%'
|
||||
}
|
||||
},
|
||||
|
||||
text: {
|
||||
flex: 1,
|
||||
paddingLeft: token.paddingXS,
|
||||
width: 0,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis'
|
||||
},
|
||||
|
||||
collapsedText: {
|
||||
display: 'none'
|
||||
},
|
||||
|
||||
collapsedExtend: {
|
||||
display: 'none'
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,9 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
scroll: {
|
||||
minHeight: 0,
|
||||
flex: 1,
|
||||
width: '100%'
|
||||
}
|
||||
}))
|
||||
@@ -0,0 +1,9 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
separate: {
|
||||
height: 0,
|
||||
margin: `${token.marginSM}px ${token.marginXS}px`,
|
||||
border: `1px solid ${token.colorBorder}`
|
||||
}
|
||||
}))
|
||||
@@ -0,0 +1,50 @@
|
||||
import { createStyles, keyframes } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => {
|
||||
const slideIn = keyframes`
|
||||
0% {
|
||||
transform: translateX(-${token.sizeSM}px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
`
|
||||
|
||||
const slideOut = keyframes`
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-${token.sizeSM}px);
|
||||
opacity: 0;
|
||||
}
|
||||
`
|
||||
|
||||
return {
|
||||
submenu: {
|
||||
visibility: 'hidden',
|
||||
position: 'fixed',
|
||||
paddingLeft: token.paddingXS,
|
||||
zIndex: 10000,
|
||||
animation: `${slideOut} 0.1s ease forwards`
|
||||
},
|
||||
|
||||
hoveredSubmenu: {
|
||||
visibility: 'visible',
|
||||
animation: `${slideIn} 0.3s ease`
|
||||
},
|
||||
|
||||
content: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: token.sizeXXS,
|
||||
padding: token.paddingSM,
|
||||
backgroundColor: token.colorBgContainer,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
boxShadow: token.boxShadow
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -1,28 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
cursor: pointer;
|
||||
|
||||
.urlCard {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 80px;
|
||||
text-align: center;
|
||||
gap: 42px;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: @production-color;
|
||||
font-size: @SIZE_ICON_XL;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: bolder;
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
width: 180,
|
||||
height: 290,
|
||||
textAlign: 'center',
|
||||
gap: token.sizeXXL,
|
||||
cursor: 'pointer',
|
||||
'> *': {
|
||||
flex: '0 0 auto',
|
||||
display: 'block'
|
||||
}
|
||||
},
|
||||
icon: {
|
||||
marginTop: 80,
|
||||
color: token.colorPrimary,
|
||||
fontSize: token.sizeXXL
|
||||
},
|
||||
text: {
|
||||
fontWeight: 'bolder',
|
||||
fontSize: token.fontSizeXL
|
||||
}
|
||||
}))
|
||||
@@ -1,5 +0,0 @@
|
||||
.root {
|
||||
background-color: transparent;
|
||||
color: unset;
|
||||
cursor: grab;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
backgroundColor: 'transparent',
|
||||
color: 'unset',
|
||||
cursor: 'grab'
|
||||
}
|
||||
}))
|
||||
@@ -1,22 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 10px 10px;
|
||||
background-color: @origin-color;
|
||||
|
||||
.dropMaskBorder {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 2px dashed @font-secondary-color;
|
||||
border-radius: 8px;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
padding: `0 ${token.paddingSM}px ${token.paddingSM}px`,
|
||||
backgroundColor: token.colorBgContainer
|
||||
},
|
||||
|
||||
dropMaskBorder: {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
border: `2px dashed ${token.colorBorder}`,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
fontSize: token.fontSizeHeading3
|
||||
}
|
||||
}))
|
||||
15
src/renderer/src/assets/css/components/dnd/sortable.style.ts
Normal file
15
src/renderer/src/assets/css/components/dnd/sortable.style.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
delete: {
|
||||
'.dnd-delete-mask': {
|
||||
border: `1px dashed ${token.colorErrorHover}`,
|
||||
filter: `drop-shadow(1000px 0 0 ${token.colorErrorHover})`,
|
||||
transform: 'translate(-1000px)',
|
||||
|
||||
'> a': {
|
||||
backgroundColor: 'transparent !important'
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,33 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.settingsCard {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
color: @main-color;
|
||||
|
||||
> .head {
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
.icon {
|
||||
font-size: @SIZE_ICON_MD;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
:nth-child(n+3) {
|
||||
flex: 0 0 auto;
|
||||
color: @font-main-color;
|
||||
}
|
||||
|
||||
.btSave {
|
||||
color: @main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: token.paddingLG,
|
||||
gap: token.paddingLG,
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
head: {
|
||||
alignItems: 'center',
|
||||
gap: token.sizeXXS,
|
||||
|
||||
'>:nth-child(n+3)': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
icon: {
|
||||
fontSize: token.sizeLG,
|
||||
flex: '0 0 auto'
|
||||
},
|
||||
|
||||
title: {
|
||||
display: 'flex',
|
||||
fontSize: token.fontSize
|
||||
},
|
||||
|
||||
btSave: {
|
||||
color: token.colorPrimary
|
||||
}
|
||||
}))
|
||||
@@ -1,78 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.statisticsCard {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
|
||||
> .head {
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: @main-color;
|
||||
|
||||
.icon {
|
||||
font-size: @SIZE_ICON_MD;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
:nth-child(n+3) {
|
||||
flex: 0 0 auto;
|
||||
color: @font-main-color;
|
||||
}
|
||||
}
|
||||
|
||||
:global .card-content {
|
||||
font-size: 1.1em;
|
||||
padding: 0 10px;
|
||||
gap: 10px;
|
||||
|
||||
.key, .value-percent {
|
||||
flex: 0 0 auto;
|
||||
color: @font-main-color;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: @font-secondary-color;
|
||||
overflow: hidden;
|
||||
|
||||
> * {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.value-chart {
|
||||
justify-content: space-around;
|
||||
width: 0;
|
||||
|
||||
> div {
|
||||
max-height: 12px;
|
||||
height: 12px;
|
||||
|
||||
> * {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.value-percent {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.big-chart {
|
||||
width: 0;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
> * {
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: token.paddingLG,
|
||||
gap: token.paddingLG
|
||||
},
|
||||
|
||||
head: {
|
||||
alignItems: 'center',
|
||||
gap: token.sizeXXS,
|
||||
color: token.colorPrimary,
|
||||
|
||||
'>:nth-child(n+3)': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
icon: {
|
||||
fontSize: token.sizeLG,
|
||||
flex: '0 0 auto'
|
||||
},
|
||||
|
||||
title: {
|
||||
display: 'flex',
|
||||
fontSize: token.fontSize
|
||||
}
|
||||
}))
|
||||
@@ -1,27 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
cursor: pointer;
|
||||
|
||||
.loadMoreCard {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
font-size: @SIZE_ICON_XXL;
|
||||
color: @production-color;
|
||||
align-items: center;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
font-size: 1.2em;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
textAlign: 'center',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
|
||||
'>*': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
icon: {
|
||||
fontSize: token.sizeXXL,
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
text: {
|
||||
fontSize: token.fontSizeXL,
|
||||
fontWeight: 'bolder'
|
||||
}
|
||||
}))
|
||||
@@ -1,112 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
.localCard {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
|
||||
.version {
|
||||
width: 0;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
font-size: 1.6em;
|
||||
gap: 4px;
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
|
||||
> *:hover {
|
||||
color: @font-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding-top: 20px;
|
||||
|
||||
.toolName {
|
||||
font-weight: bolder;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.toolDesc {
|
||||
margin: 10px auto 0;
|
||||
color: @font-secondary-color;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-height: 40px;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
padding-bottom: 10px;
|
||||
gap: 10px;
|
||||
|
||||
.avatar {
|
||||
> * {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.authorName {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:hover {
|
||||
.header {
|
||||
.version {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.operation {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.androidQrcode {
|
||||
align-items: center;
|
||||
transform: translateX(-16px);
|
||||
gap: 20px;
|
||||
}
|
||||
110
src/renderer/src/assets/css/components/tools/local-card.style.ts
Normal file
110
src/renderer/src/assets/css/components/tools/local-card.style.ts
Normal file
@@ -0,0 +1,110 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ cx, css, token }) => {
|
||||
const version = cx(css`
|
||||
width: 0;
|
||||
transition: all 0.2s;
|
||||
`)
|
||||
|
||||
const operation = cx(css`
|
||||
display: flex;
|
||||
font-size: 1.6em;
|
||||
gap: ${token.sizeXXS}px;
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
z-index: 100;
|
||||
|
||||
> *:hover {
|
||||
color: ${token.colorIconHover};
|
||||
}
|
||||
`)
|
||||
|
||||
return {
|
||||
root: css`
|
||||
width: 180px;
|
||||
height: 290px;
|
||||
text-align: center;
|
||||
gap: ${token.sizeSM}px;
|
||||
cursor: pointer;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.${version} {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.${operation} {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
||||
header: {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
padding: token.paddingSM,
|
||||
justifyContent: 'space-between'
|
||||
},
|
||||
|
||||
version,
|
||||
|
||||
operation,
|
||||
|
||||
icon: {
|
||||
img: {
|
||||
width: token.sizeXL * 2
|
||||
}
|
||||
},
|
||||
|
||||
info: {
|
||||
padding: `0 ${token.paddingSM}px`
|
||||
},
|
||||
|
||||
toolName: {
|
||||
fontSize: token.fontSizeXL,
|
||||
fontWeight: 'bolder',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
},
|
||||
|
||||
toolDesc: {
|
||||
marginTop: token.marginXS,
|
||||
color: token.colorTextDescription
|
||||
},
|
||||
|
||||
author: {
|
||||
display: 'flex',
|
||||
marginTop: 'auto',
|
||||
paddingBottom: token.paddingSM,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
gap: token.sizeXS,
|
||||
|
||||
'&:hover': {
|
||||
color: token.colorPrimary
|
||||
}
|
||||
},
|
||||
|
||||
avatar: {
|
||||
'> *': {
|
||||
width: token.sizeLG,
|
||||
height: token.sizeLG
|
||||
}
|
||||
},
|
||||
|
||||
authorName: {
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
},
|
||||
|
||||
androidQrcode: {
|
||||
alignItems: 'center',
|
||||
transform: 'translateX(-16px)',
|
||||
gap: token.sizeMD
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -1,94 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ cx, css, token }) => {
|
||||
const info = cx(css`
|
||||
padding: 0 ${token.paddingSM}px;
|
||||
transform: translateY(${token.sizeXL}px);
|
||||
transition: all 0.1s ease;
|
||||
`)
|
||||
|
||||
const edit = cx(css`
|
||||
> * {
|
||||
> :first-child {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
`)
|
||||
|
||||
const toolDesc = cx(css`
|
||||
position: relative;
|
||||
margin-top: ${token.marginXS}px;
|
||||
color: ${token.colorTextDescription};
|
||||
transition: all 0.1s ease;
|
||||
`)
|
||||
|
||||
const operation = cx(css`
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex: 1;
|
||||
gap: ${token.sizeXXS}px;
|
||||
bottom: ${token.sizeLG}px;
|
||||
padding: 0 ${token.paddingLG}px;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
opacity: 0;
|
||||
|
||||
> *,
|
||||
.${edit} > * {
|
||||
width: 100%;
|
||||
}
|
||||
`)
|
||||
|
||||
return {
|
||||
root: css`
|
||||
width: 180px;
|
||||
height: 290px;
|
||||
text-align: center;
|
||||
gap: ${token.sizeSM}px;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.${info} {
|
||||
transform: translateY(-${token.sizeXXS}px);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.${toolDesc} {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.${operation} {
|
||||
opacity: 1;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
||||
header: {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
padding: token.paddingSM,
|
||||
gap: token.paddingXS,
|
||||
|
||||
'> :first-child': {
|
||||
width: 0,
|
||||
flex: 1
|
||||
},
|
||||
|
||||
'> :not(:first-child)': {
|
||||
fontSize: token.size
|
||||
}
|
||||
},
|
||||
|
||||
icon: {
|
||||
img: {
|
||||
width: token.sizeXL * 2
|
||||
}
|
||||
},
|
||||
|
||||
info,
|
||||
|
||||
toolName: {
|
||||
fontSize: token.fontSizeXL,
|
||||
fontWeight: 'bolder',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
},
|
||||
|
||||
toolDesc,
|
||||
|
||||
operation,
|
||||
|
||||
edit
|
||||
}
|
||||
})
|
||||
@@ -1,114 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
.storeCard {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
|
||||
.version {
|
||||
width: 0;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
font-size: 1.6em;
|
||||
gap: 4px;
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
z-index: 100;
|
||||
|
||||
> *:hover {
|
||||
color: @font-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding-top: 20px;
|
||||
|
||||
.toolName {
|
||||
font-weight: bolder;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.toolDesc {
|
||||
margin: 10px auto 0;
|
||||
color: @font-secondary-color;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-height: 40px;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
padding-top: 8px;
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
padding-bottom: 10px;
|
||||
gap: 10px;
|
||||
|
||||
.avatar {
|
||||
> * {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.authorName {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:hover {
|
||||
.header {
|
||||
.version {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.operation {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.androidQrcode {
|
||||
align-items: center;
|
||||
transform: translateX(-16px);
|
||||
gap: 20px;
|
||||
}
|
||||
110
src/renderer/src/assets/css/components/tools/store-card.style.ts
Normal file
110
src/renderer/src/assets/css/components/tools/store-card.style.ts
Normal file
@@ -0,0 +1,110 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ cx, css, token }) => {
|
||||
const version = cx(css`
|
||||
width: 0;
|
||||
transition: all 0.2s;
|
||||
`)
|
||||
|
||||
const operation = cx(css`
|
||||
display: flex;
|
||||
font-size: 1.6em;
|
||||
gap: ${token.sizeXXS}px;
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
z-index: 100;
|
||||
|
||||
> *:hover {
|
||||
color: ${token.colorIconHover};
|
||||
}
|
||||
`)
|
||||
|
||||
return {
|
||||
root: css`
|
||||
width: 180px;
|
||||
height: 290px;
|
||||
text-align: center;
|
||||
gap: ${token.sizeSM}px;
|
||||
cursor: pointer;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.${version} {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.${operation} {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
||||
header: {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
padding: token.paddingSM,
|
||||
justifyContent: 'space-between'
|
||||
},
|
||||
|
||||
version,
|
||||
|
||||
operation,
|
||||
|
||||
icon: {
|
||||
img: {
|
||||
width: token.sizeXL * 2
|
||||
}
|
||||
},
|
||||
|
||||
info: {
|
||||
padding: `0 ${token.paddingSM}px`
|
||||
},
|
||||
|
||||
toolName: {
|
||||
fontSize: token.fontSizeXL,
|
||||
fontWeight: 'bolder',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
},
|
||||
|
||||
toolDesc: {
|
||||
marginTop: token.marginXS,
|
||||
color: token.colorTextDescription
|
||||
},
|
||||
|
||||
author: {
|
||||
display: 'flex',
|
||||
marginTop: 'auto',
|
||||
paddingBottom: token.paddingSM,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
gap: token.sizeXS,
|
||||
|
||||
'&:hover': {
|
||||
color: token.colorPrimary
|
||||
}
|
||||
},
|
||||
|
||||
avatar: {
|
||||
'> *': {
|
||||
width: token.sizeLG,
|
||||
height: token.sizeLG
|
||||
}
|
||||
},
|
||||
|
||||
authorName: {
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
},
|
||||
|
||||
androidQrcode: {
|
||||
alignItems: 'center',
|
||||
transform: 'translateX(-16px)',
|
||||
gap: token.sizeMD
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -1,22 +0,0 @@
|
||||
@origin-color: white;
|
||||
@production-color: #4E47BB;
|
||||
@main-color: @production-color;
|
||||
@secondary-color: #BAB8E5;
|
||||
@error-color: #FF4D4F;
|
||||
@error-secondary-color: #FF7875;
|
||||
@blue-color: #1677FF;
|
||||
@active-color: #EBECFD;
|
||||
@background-color: #F5F5F5;
|
||||
@font-main-color: #4D4D4D;
|
||||
@font-secondary-color: #9E9E9E;
|
||||
@focus-color: #DDDDDD;
|
||||
@divide-color: rgba(204, 204, 204, 0.66);
|
||||
@border-color: rgba(204, 204, 204, 0.33);
|
||||
@url-color: rgba(102, 102, 102, .8);
|
||||
@url-active-color: #ccc;
|
||||
@SIZE_ICON_XS: 16px;
|
||||
@SIZE_ICON_SM: 20px;
|
||||
@SIZE_ICON_MD: 24px;
|
||||
@SIZE_ICON_LG: 32px;
|
||||
@SIZE_ICON_XL: 64px;
|
||||
@SIZE_ICON_XXL: 96px;
|
||||
@@ -1,15 +0,0 @@
|
||||
.keyframes(@animationName, @content) {
|
||||
animation-name: @animationName;
|
||||
@-webkit-keyframes @animationName {
|
||||
@content();
|
||||
}
|
||||
@-moz-keyframes @animationName {
|
||||
@content();
|
||||
}
|
||||
@-o-keyframes @animationName {
|
||||
@content();
|
||||
}
|
||||
@keyframes @animationName {
|
||||
@content();
|
||||
}
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
35
src/renderer/src/assets/css/pages/sign/forget.style.ts
Normal file
35
src/renderer/src/assets/css/pages/sign/forget.style.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
title: {
|
||||
marginBottom: token.marginMD,
|
||||
transform: `translateY(-${token.sizeSM}px)`
|
||||
},
|
||||
|
||||
primary: {
|
||||
fontSize: token.fontSizeHeading3,
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
secondary: {
|
||||
fontSize: token.fontSize
|
||||
},
|
||||
|
||||
form: {
|
||||
width: 300,
|
||||
fontSize: token.fontSize
|
||||
},
|
||||
|
||||
retry: {
|
||||
marginBottom: token.margin
|
||||
},
|
||||
|
||||
success: {
|
||||
marginBottom: token.margin
|
||||
},
|
||||
|
||||
footer: {
|
||||
textAlign: 'center'
|
||||
}
|
||||
}))
|
||||
@@ -1,80 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
background-color: #D2D0DD;
|
||||
user-select: none;
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: @production-color;
|
||||
}
|
||||
|
||||
.signBox {
|
||||
position: relative;
|
||||
background-color: @origin-color;
|
||||
width: 900px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
|
||||
.left, .right {
|
||||
opacity: 1;
|
||||
transition: all 1s ease;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
background-color: #F3F4F8;
|
||||
transition: all 0.8s ease;
|
||||
|
||||
.ballBox {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
background-color: #F1F2F7;
|
||||
|
||||
.ball {
|
||||
position: absolute;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
background-color: @production-color;
|
||||
border-radius: 50%;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(50%);
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
transform: rotateZ(180deg);
|
||||
filter: blur(12px);
|
||||
|
||||
.ball {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.switch {
|
||||
.cover {
|
||||
transform: translateX(100%);
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
82
src/renderer/src/assets/css/pages/sign/index.style.ts
Normal file
82
src/renderer/src/assets/css/pages/sign/index.style.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ cx, css, token }) => {
|
||||
const cover = cx(css`
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
background-color: ${token.colorBgLayout};
|
||||
transition: all 0.8s ease;
|
||||
`)
|
||||
|
||||
const ball = cx(css`
|
||||
position: absolute;
|
||||
width: ${token.sizeXL * 4}px;
|
||||
height: ${token.sizeXL * 4}px;
|
||||
background-color: ${token.colorPrimary};
|
||||
border-radius: 50%;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(50%);
|
||||
`)
|
||||
|
||||
return {
|
||||
root: {
|
||||
backgroundColor: token.colorBorderSecondary,
|
||||
userSelect: 'none',
|
||||
|
||||
a: {
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
|
||||
signBox: {
|
||||
position: 'relative',
|
||||
backgroundColor: token.colorBgContainer,
|
||||
width: 900,
|
||||
height: 600,
|
||||
overflow: 'hidden',
|
||||
borderRadius: token.borderRadiusLG
|
||||
},
|
||||
|
||||
switch: css`
|
||||
.${cover} {
|
||||
transform: translateX(100%);
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
`,
|
||||
|
||||
side: {
|
||||
opacity: 1,
|
||||
transition: 'all 1s ease',
|
||||
|
||||
'> *': {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
},
|
||||
|
||||
hidden: {
|
||||
opacity: 0
|
||||
},
|
||||
|
||||
cover,
|
||||
|
||||
ballBox: {
|
||||
position: 'relative',
|
||||
overflow: 'hidden'
|
||||
},
|
||||
|
||||
ball,
|
||||
|
||||
mask: css`
|
||||
transform: rotateZ(180deg);
|
||||
filter: blur(${token.sizeSM}px);
|
||||
|
||||
.${ball} {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
`
|
||||
}
|
||||
})
|
||||
@@ -1,41 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
36
src/renderer/src/assets/css/pages/sign/sign-in.style.ts
Normal file
36
src/renderer/src/assets/css/pages/sign/sign-in.style.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
title: {
|
||||
marginBottom: token.marginMD,
|
||||
transform: `translateY(-${token.sizeSM}px)`
|
||||
},
|
||||
|
||||
primary: {
|
||||
fontSize: token.fontSizeHeading3,
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
secondary: {
|
||||
fontSize: token.fontSize
|
||||
},
|
||||
|
||||
form: {
|
||||
width: 300,
|
||||
fontSize: token.fontSize
|
||||
},
|
||||
|
||||
addition: {
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: token.margin,
|
||||
|
||||
a: {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
footer: {
|
||||
textAlign: 'center'
|
||||
}
|
||||
}))
|
||||
@@ -1,40 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
31
src/renderer/src/assets/css/pages/sign/sign-up.style.ts
Normal file
31
src/renderer/src/assets/css/pages/sign/sign-up.style.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
title: {
|
||||
marginBottom: token.marginMD,
|
||||
transform: `translateY(-${token.sizeSM}px)`
|
||||
},
|
||||
|
||||
primary: {
|
||||
fontSize: token.fontSizeHeading3,
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
secondary: {
|
||||
fontSize: token.fontSize
|
||||
},
|
||||
|
||||
form: {
|
||||
width: 300,
|
||||
fontSize: token.fontSize
|
||||
},
|
||||
|
||||
retry: {
|
||||
marginBottom: token.margin
|
||||
},
|
||||
|
||||
footer: {
|
||||
textAlign: 'center'
|
||||
}
|
||||
}))
|
||||
@@ -1,28 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
src/renderer/src/assets/css/pages/sign/verify.style.ts
Normal file
23
src/renderer/src/assets/css/pages/sign/verify.style.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
title: {
|
||||
marginBottom: token.marginMD,
|
||||
transform: `translateY(-${token.sizeSM}px)`
|
||||
},
|
||||
|
||||
primary: {
|
||||
fontSize: token.fontSizeHeading3,
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
secondary: {
|
||||
fontSize: token.fontSize
|
||||
},
|
||||
|
||||
form: {
|
||||
width: 300,
|
||||
fontSize: token.fontSize
|
||||
}
|
||||
}))
|
||||
@@ -1,13 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.leftPanel {
|
||||
background-color: @origin-color;
|
||||
}
|
||||
|
||||
.rightPanel {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
13
src/renderer/src/assets/css/pages/system-framework.style.ts
Normal file
13
src/renderer/src/assets/css/pages/system-framework.style.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
leftPanel: {
|
||||
backgroundColor: token.colorBgContainer
|
||||
},
|
||||
|
||||
rightPanel: {
|
||||
flex: 1,
|
||||
width: 0,
|
||||
backgroundColor: token.colorBgLayout
|
||||
}
|
||||
}))
|
||||
@@ -1,15 +0,0 @@
|
||||
.root {
|
||||
.rootContent {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
> div {
|
||||
width: 200px;
|
||||
height: 320px;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
15
src/renderer/src/assets/css/pages/system/index.style.ts
Normal file
15
src/renderer/src/assets/css/pages/system/index.style.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'flex-start',
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto',
|
||||
overflow: 'hidden !important'
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,14 +0,0 @@
|
||||
.root {
|
||||
.rootContent {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
|
||||
.rootCol {
|
||||
gap: 20px;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20
|
||||
},
|
||||
|
||||
rootCol: {
|
||||
gap: 20,
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,13 +0,0 @@
|
||||
.root {
|
||||
.rootContent {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
> div {
|
||||
width: 48%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
content: {
|
||||
fontSize: token.fontSize,
|
||||
padding: '0 10px',
|
||||
gap: 10,
|
||||
|
||||
'> *': {
|
||||
gap: 5
|
||||
}
|
||||
},
|
||||
|
||||
bigChart: {
|
||||
width: 0,
|
||||
height: 400
|
||||
},
|
||||
|
||||
key: {
|
||||
flex: '0 0 auto',
|
||||
color: token.colorTextLabel
|
||||
},
|
||||
|
||||
value: {
|
||||
color: token.colorTextDescription,
|
||||
overflow: 'hidden',
|
||||
|
||||
'> *': {
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
}
|
||||
},
|
||||
|
||||
chartValue: {
|
||||
justifyContent: 'space-between',
|
||||
width: 0
|
||||
},
|
||||
|
||||
percentValue: {
|
||||
flex: '0 0 auto',
|
||||
color: token.colorTextDescription
|
||||
}
|
||||
}))
|
||||
@@ -0,0 +1,16 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
minWidth: 800,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
|
||||
'> div': {
|
||||
width: '48%',
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,44 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.rootContent {
|
||||
padding: 20px;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.hasEdited::after {
|
||||
content: '*';
|
||||
color: @font-secondary-color;
|
||||
}
|
||||
|
||||
>*:first-child {
|
||||
width: 0;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
> *:nth-child(2) {
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.closeEditorBtn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-color: @font-secondary-color;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
opacity: 0.6;
|
||||
box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
}
|
||||
44
src/renderer/src/assets/css/pages/system/tools/base.style.ts
Normal file
44
src/renderer/src/assets/css/pages/system/tools/base.style.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
|
||||
'> *:first-child': {
|
||||
width: 0,
|
||||
height: 'fit-content'
|
||||
},
|
||||
|
||||
'> *:nth-child(2)': {
|
||||
position: 'sticky',
|
||||
top: 20,
|
||||
height: 'calc(100vh - 40px)'
|
||||
}
|
||||
},
|
||||
|
||||
hasEdited: {
|
||||
'&::after': {
|
||||
content: '"*"',
|
||||
color: token.colorTextSecondary
|
||||
}
|
||||
},
|
||||
|
||||
closeEditorBtn: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
top: 10,
|
||||
right: 10,
|
||||
backgroundColor: token.colorBorder,
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: '50%',
|
||||
color: token.colorTextSecondary,
|
||||
opacity: 0.6,
|
||||
boxShadow: token.boxShadow,
|
||||
cursor: 'pointer',
|
||||
zIndex: 1000
|
||||
}
|
||||
}))
|
||||
@@ -1,20 +0,0 @@
|
||||
.root {
|
||||
padding: 20px;
|
||||
|
||||
.rootBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.draggableContent {
|
||||
position: fixed;
|
||||
inset-inline-end: 48px;
|
||||
inset-block-end: 48px;
|
||||
|
||||
> * {
|
||||
position: relative;
|
||||
inset-inline-end: 0;
|
||||
inset-block-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
24
src/renderer/src/assets/css/pages/system/tools/code.style.ts
Normal file
24
src/renderer/src/assets/css/pages/system/tools/code.style.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20
|
||||
},
|
||||
|
||||
rootBox: {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
},
|
||||
|
||||
draggableContent: {
|
||||
position: 'fixed',
|
||||
insetInlineEnd: 48,
|
||||
insetBlockEnd: 48,
|
||||
|
||||
'> *': {
|
||||
position: 'relative',
|
||||
insetInlineEnd: 0,
|
||||
insetBlockEnd: 0
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,8 +0,0 @@
|
||||
.root {
|
||||
padding: 20px;
|
||||
|
||||
.rootBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20
|
||||
},
|
||||
|
||||
rootBox: {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
}))
|
||||
@@ -1,44 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.rootContent {
|
||||
padding: 20px;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.hasEdited::after {
|
||||
content: '*';
|
||||
color: @font-secondary-color;
|
||||
}
|
||||
|
||||
>*:first-child {
|
||||
width: 0;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
> *:nth-child(2) {
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.closeEditorBtn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-color: @font-secondary-color;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
opacity: 0.6;
|
||||
box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
|
||||
'> *:first-child': {
|
||||
width: 0,
|
||||
height: 'fit-content'
|
||||
},
|
||||
|
||||
'> *:nth-child(2)': {
|
||||
position: 'sticky',
|
||||
top: 20,
|
||||
height: 'calc(100vh - 40px)'
|
||||
}
|
||||
},
|
||||
|
||||
hasEdited: {
|
||||
'&::after': {
|
||||
content: '"*"',
|
||||
color: token.colorTextSecondary
|
||||
}
|
||||
},
|
||||
|
||||
closeEditorBtn: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
top: 10,
|
||||
right: 10,
|
||||
backgroundColor: token.colorBorder,
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: '50%',
|
||||
color: token.colorTextSecondary,
|
||||
opacity: 0.6,
|
||||
boxShadow: token.boxShadow,
|
||||
cursor: 'pointer',
|
||||
zIndex: 1000
|
||||
}
|
||||
}))
|
||||
@@ -1,21 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.leftPanel {
|
||||
background-color: @origin-color;
|
||||
|
||||
.menuDroppable {
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.rightPanel {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
21
src/renderer/src/assets/css/pages/tools-framework.style.ts
Normal file
21
src/renderer/src/assets/css/pages/tools-framework.style.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
leftPanel: {
|
||||
backgroundColor: token.colorBgContainer
|
||||
},
|
||||
|
||||
menuDroppable: {
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
minHeight: 0,
|
||||
flex: 1,
|
||||
width: '100%'
|
||||
},
|
||||
|
||||
rightPanel: {
|
||||
flex: 1,
|
||||
width: 0,
|
||||
backgroundColor: token.colorBgLayout
|
||||
}
|
||||
}))
|
||||
@@ -1,52 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
52
src/renderer/src/assets/css/pages/tools/create.style.ts
Normal file
52
src/renderer/src/assets/css/pages/tools/create.style.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
|
||||
'> *': {
|
||||
gap: 10,
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
|
||||
title: {
|
||||
flex: '0 0 auto',
|
||||
height: 40,
|
||||
|
||||
'> *': {
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
fontSize: token.fontSizeXL,
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorPrimary
|
||||
}
|
||||
},
|
||||
|
||||
config: {
|
||||
padding: 20
|
||||
},
|
||||
|
||||
createBt: {
|
||||
width: '100%',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
|
||||
preview: {
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
},
|
||||
|
||||
noPreview: {
|
||||
color: token.colorTextSecondary,
|
||||
fontSize: token.fontSizeLG,
|
||||
fontWeight: 'bolder'
|
||||
}
|
||||
}))
|
||||
@@ -1,36 +0,0 @@
|
||||
.root {
|
||||
padding: 20px;
|
||||
|
||||
.rootBox {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.rootContent {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
> * {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.draggableMask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.draggableContent {
|
||||
position: fixed;
|
||||
inset-inline-end: 48px;
|
||||
inset-block-end: 48px;
|
||||
|
||||
> * {
|
||||
position: relative;
|
||||
inset-inline-end: 0;
|
||||
inset-block-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
40
src/renderer/src/assets/css/pages/tools/edit.style.ts
Normal file
40
src/renderer/src/assets/css/pages/tools/edit.style.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20
|
||||
},
|
||||
|
||||
rootBox: {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
},
|
||||
|
||||
content: {
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
|
||||
'> *': {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
|
||||
draggableMask: {
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
},
|
||||
|
||||
draggableContent: {
|
||||
position: 'fixed',
|
||||
insetInlineEnd: 48,
|
||||
insetBlockEnd: 48,
|
||||
|
||||
'> *': {
|
||||
position: 'relative',
|
||||
insetInlineEnd: 0,
|
||||
insetBlockEnd: 0
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,54 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
45
src/renderer/src/assets/css/pages/tools/index.style.ts
Normal file
45
src/renderer/src/assets/css/pages/tools/index.style.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20
|
||||
},
|
||||
|
||||
ownContent: {
|
||||
gap: 20,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'flex-start',
|
||||
|
||||
'> div': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
favoriteDivider: {
|
||||
alignItems: 'center',
|
||||
gap: 20,
|
||||
marginTop: 20,
|
||||
|
||||
'> :first-child, > :last-child': {
|
||||
height: 0,
|
||||
border: `1px dashed ${token.colorSplit}`
|
||||
}
|
||||
},
|
||||
|
||||
dividerText: {
|
||||
flex: '0 0 auto !important',
|
||||
fontSize: '1.2em',
|
||||
color: token.colorTextSecondary
|
||||
},
|
||||
|
||||
starContent: {
|
||||
gap: 20,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'flex-start',
|
||||
|
||||
'> div': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,43 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.search {
|
||||
display: flex;
|
||||
position: sticky;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
top: 20px;
|
||||
z-index: 10;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
> * {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
transform: translateY(-60px);
|
||||
}
|
||||
}
|
||||
|
||||
.rootContent {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
> div {
|
||||
width: 180px;
|
||||
min-height: 290px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.noTool {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 1.4em;
|
||||
font-weight: bolder;
|
||||
color: @font-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
41
src/renderer/src/assets/css/pages/tools/local.style.ts
Normal file
41
src/renderer/src/assets/css/pages/tools/local.style.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
search: {
|
||||
display: 'flex',
|
||||
position: 'sticky',
|
||||
width: '100%',
|
||||
marginTop: 20,
|
||||
top: 20,
|
||||
zIndex: 10,
|
||||
justifyContent: 'center',
|
||||
transition: 'all 0.3s ease',
|
||||
|
||||
'> *': {
|
||||
width: '80%'
|
||||
}
|
||||
},
|
||||
|
||||
hide: {
|
||||
transform: 'translateY(-60px)'
|
||||
},
|
||||
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
|
||||
'> div': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
noTool: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
fontSize: '1.4em',
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorTextSecondary
|
||||
}
|
||||
}))
|
||||
@@ -1,8 +0,0 @@
|
||||
.root {
|
||||
padding: 20px;
|
||||
|
||||
.rootBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
12
src/renderer/src/assets/css/pages/tools/source.style.ts
Normal file
12
src/renderer/src/assets/css/pages/tools/source.style.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20
|
||||
},
|
||||
|
||||
content: {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
}))
|
||||
@@ -1,43 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.search {
|
||||
display: flex;
|
||||
position: sticky;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
top: 20px;
|
||||
z-index: 10;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
> * {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
transform: translateY(-60px);
|
||||
}
|
||||
}
|
||||
|
||||
.rootContent {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
> div {
|
||||
width: 180px;
|
||||
min-height: 290px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.noTool {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 1.4em;
|
||||
font-weight: bolder;
|
||||
color: @font-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
41
src/renderer/src/assets/css/pages/tools/store.style.ts
Normal file
41
src/renderer/src/assets/css/pages/tools/store.style.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
search: {
|
||||
display: 'flex',
|
||||
position: 'sticky',
|
||||
width: '100%',
|
||||
marginTop: 20,
|
||||
top: 20,
|
||||
zIndex: 10,
|
||||
justifyContent: 'center',
|
||||
transition: 'all 0.3s ease',
|
||||
|
||||
'> *': {
|
||||
width: '80%'
|
||||
}
|
||||
},
|
||||
|
||||
hide: {
|
||||
transform: 'translateY(-60px)'
|
||||
},
|
||||
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
|
||||
'> div': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
noTool: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
fontSize: '1.4em',
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorTextSecondary
|
||||
}
|
||||
}))
|
||||
@@ -1,79 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
padding: 80px 20px 20px 20px;
|
||||
|
||||
.rootBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
align-items: center;
|
||||
min-width: 900px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
> .info {
|
||||
margin-left: 40px;
|
||||
transform: translateY(-40px);
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.avatarBox {
|
||||
background-color: white;
|
||||
padding: 4px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.avatar {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.infoName {
|
||||
margin: 20px 0 0 24px;
|
||||
justify-content: center;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 2.4em;
|
||||
font-weight: bolder;
|
||||
color: @production-color;
|
||||
}
|
||||
|
||||
.url {
|
||||
cursor: pointer;
|
||||
|
||||
> span {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tools {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
> div {
|
||||
width: 180px;
|
||||
min-height: 290px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.noTool {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.2em;
|
||||
font-weight: bolder;
|
||||
color: @font-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
82
src/renderer/src/assets/css/pages/tools/user.style.ts
Normal file
82
src/renderer/src/assets/css/pages/tools/user.style.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: '80px 20px 20px 20px'
|
||||
},
|
||||
|
||||
content: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'visible',
|
||||
alignItems: 'center',
|
||||
minWidth: 900,
|
||||
paddingBottom: 20
|
||||
},
|
||||
|
||||
info: {
|
||||
marginLeft: 40,
|
||||
transform: 'translateY(-40px)',
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto !important'
|
||||
}
|
||||
},
|
||||
|
||||
avatarBox: {
|
||||
backgroundColor: token.colorBgLayout,
|
||||
padding: 4,
|
||||
borderRadius: '50%',
|
||||
boxShadow: token.boxShadow
|
||||
},
|
||||
|
||||
avatar: {
|
||||
backgroundColor: 'transparent !important'
|
||||
},
|
||||
|
||||
infoName: {
|
||||
margin: '20px 0 0 20px',
|
||||
justifyContent: 'center',
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
nickname: {
|
||||
fontSize: token.fontSizeHeading2,
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
url: {
|
||||
cursor: 'pointer',
|
||||
|
||||
'> span': {
|
||||
marginLeft: 8
|
||||
}
|
||||
},
|
||||
|
||||
tools: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
|
||||
'> div': {
|
||||
flex: '0 0 auto',
|
||||
|
||||
'> div': {
|
||||
backgroundColor: token.colorBgLayout
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
noTool: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 20,
|
||||
fontSize: token.fontSizeLG,
|
||||
color: token.colorTextSecondary
|
||||
}
|
||||
}))
|
||||
@@ -1,9 +0,0 @@
|
||||
.root {
|
||||
padding: 20px;
|
||||
|
||||
.rootBox {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
13
src/renderer/src/assets/css/pages/tools/view.style.ts
Normal file
13
src/renderer/src/assets/css/pages/tools/view.style.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20
|
||||
},
|
||||
|
||||
content: {
|
||||
position: 'relative',
|
||||
height: '100%',
|
||||
width: '100%'
|
||||
}
|
||||
}))
|
||||
@@ -1,13 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.leftPanel {
|
||||
background-color: @origin-color;
|
||||
}
|
||||
|
||||
.rightPanel {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
13
src/renderer/src/assets/css/pages/user-framework.style.ts
Normal file
13
src/renderer/src/assets/css/pages/user-framework.style.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
leftPanel: {
|
||||
backgroundColor: token.colorBgContainer
|
||||
},
|
||||
|
||||
rightPanel: {
|
||||
flex: 1,
|
||||
width: 0,
|
||||
backgroundColor: token.colorBgLayout
|
||||
}
|
||||
}))
|
||||
@@ -1,118 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
padding: 80px 20px 20px 20px;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
align-items: center;
|
||||
min-width: 900px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
> :not(:first-child) {
|
||||
padding: 0 60px;
|
||||
}
|
||||
|
||||
.divide {
|
||||
height: 1px;
|
||||
width: calc(100% - 120px);
|
||||
background-color: @divide-color;
|
||||
margin: 0 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 40px;
|
||||
transform: translateY(-40px);
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.avatarBox {
|
||||
background-color: white;
|
||||
padding: 4px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.avatar {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.infoName {
|
||||
margin: 20px 0 0 24px;
|
||||
justify-content: center;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 2.4em;
|
||||
font-weight: bolder;
|
||||
color: @production-color;
|
||||
}
|
||||
|
||||
.url {
|
||||
cursor: pointer;
|
||||
|
||||
> span {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
align-items: center;
|
||||
|
||||
.content {
|
||||
padding-bottom: 30px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 1.6em;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.operation {
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile, .security {
|
||||
gap: 24px;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.row {
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 1.4em;
|
||||
font-weight: bolder;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 400px;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
114
src/renderer/src/assets/css/pages/user/index.style.ts
Normal file
114
src/renderer/src/assets/css/pages/user/index.style.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: '80px 20px 20px 20px'
|
||||
},
|
||||
|
||||
content: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'visible',
|
||||
alignItems: 'center',
|
||||
minWidth: 900,
|
||||
paddingBottom: 20,
|
||||
|
||||
'> :not(:first-child)': {
|
||||
padding: '0 60px'
|
||||
}
|
||||
},
|
||||
|
||||
info: {
|
||||
marginLeft: 40,
|
||||
transform: 'translateY(-40px)',
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto !important'
|
||||
}
|
||||
},
|
||||
|
||||
avatarBox: {
|
||||
backgroundColor: token.colorBgLayout,
|
||||
padding: 4,
|
||||
borderRadius: '50%',
|
||||
boxShadow: token.boxShadow
|
||||
},
|
||||
|
||||
avatar: {
|
||||
backgroundColor: 'transparent !important'
|
||||
},
|
||||
|
||||
infoName: {
|
||||
margin: '20px 0 0 20px',
|
||||
justifyContent: 'center',
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
nickname: {
|
||||
fontSize: token.fontSizeHeading2,
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
url: {
|
||||
cursor: 'pointer',
|
||||
|
||||
'> span': {
|
||||
marginLeft: 8
|
||||
}
|
||||
},
|
||||
|
||||
header: {
|
||||
justifyContent: 'space-between',
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
title: {
|
||||
fontSize: token.fontSizeXL,
|
||||
fontWeight: 'bolder'
|
||||
},
|
||||
|
||||
operation: {
|
||||
gap: 10
|
||||
},
|
||||
|
||||
divider: {
|
||||
height: 1,
|
||||
width: 'calc(100% - 120px)',
|
||||
backgroundColor: token.colorSplit,
|
||||
margin: '30px 60px'
|
||||
},
|
||||
|
||||
list: {
|
||||
gap: 24
|
||||
},
|
||||
|
||||
row: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
label: {
|
||||
fontSize: token.fontSize,
|
||||
fontWeight: 'bolder',
|
||||
flex: 1
|
||||
},
|
||||
|
||||
input: {
|
||||
width: 400,
|
||||
|
||||
'> *': {
|
||||
width: '100%'
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,89 +0,0 @@
|
||||
.keyframes(@animationName, @content) {
|
||||
animation-name: @animationName;
|
||||
@-webkit-keyframes @animationName {
|
||||
@content();
|
||||
}
|
||||
@-moz-keyframes @animationName {
|
||||
@content();
|
||||
}
|
||||
@-o-keyframes @animationName {
|
||||
@content();
|
||||
}
|
||||
@keyframes @animationName {
|
||||
@content();
|
||||
}
|
||||
}
|
||||
|
||||
.root {
|
||||
position: relative;
|
||||
height: 0;
|
||||
|
||||
:global .monaco-editor-light {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: var(--border);
|
||||
|
||||
.jsx-tag-angle-bracket {
|
||||
color: #800000;
|
||||
}
|
||||
|
||||
.jsx-text {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.jsx-tag-name {
|
||||
color: #800000;
|
||||
}
|
||||
|
||||
.jsx-tag-attribute-key {
|
||||
color: #f00;
|
||||
}
|
||||
}
|
||||
|
||||
:global .monaco-editor-vs-dark {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: var(--border);
|
||||
|
||||
.jsx-tag-angle-bracket {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.jsx-text {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.jsx-tag-name {
|
||||
color: #569cd6;
|
||||
}
|
||||
|
||||
.jsx-tag-attribute-key {
|
||||
color: #9cdcfe;
|
||||
}
|
||||
}
|
||||
|
||||
.playgroundCodeEditorLoading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border-top: 2px #666 solid;
|
||||
border-right: 2px #ddd solid;
|
||||
border-bottom: 2px #ddd solid;
|
||||
border-left: 2px #ddd solid;
|
||||
animation: .6s linear infinite;
|
||||
|
||||
.keyframes(fUHD7o, {
|
||||
0% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import { createStyles, keyframes } from 'antd-style'
|
||||
|
||||
const rotate = keyframes`
|
||||
0% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
`
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
position: 'relative',
|
||||
height: 0,
|
||||
|
||||
'.monaco-editor-light': {
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'var(--border)',
|
||||
'.jsx-tag-angle-bracket': { color: '#800000' },
|
||||
'.jsx-text': { color: '#000' },
|
||||
'.jsx-tag-name': { color: '#800000' },
|
||||
'.jsx-tag-attribute-key': { color: '#f00' }
|
||||
},
|
||||
|
||||
'.monaco-editor-dark': {
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'var(--border)',
|
||||
'.jsx-tag-angle-bracket': { color: '#808080' },
|
||||
'.jsx-text': { color: '#d4d4d4' },
|
||||
'.jsx-tag-name': { color: '#569cd6' },
|
||||
'.jsx-tag-attribute-key': { color: '#9cdcfe' }
|
||||
}
|
||||
},
|
||||
|
||||
loading: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
margin: 4,
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: '50%',
|
||||
borderTop: '2px #666 solid',
|
||||
borderRight: '2px #ddd solid',
|
||||
borderBottom: '2px #ddd solid',
|
||||
borderLeft: '2px #ddd solid',
|
||||
animation: `${rotate} .6s linear infinite`
|
||||
}
|
||||
}))
|
||||
@@ -1,8 +1,8 @@
|
||||
import { editor, Selection } from 'monaco-editor'
|
||||
import MonacoEditor, { Monaco } from '@monaco-editor/react'
|
||||
import styles from '@/components/Playground/CodeEditor/Editor/index.module.less'
|
||||
import useStyles from '@/components/Playground/CodeEditor/Editor/index.style'
|
||||
import '@/components/Playground/CodeEditor/Editor/loader'
|
||||
import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
|
||||
import { IEditorOptions, IFiles, ITsconfig } from '@/components/Playground/shared'
|
||||
import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files'
|
||||
import { useEditor, useTypesProgress } from '@/components/Playground/CodeEditor/Editor/hooks'
|
||||
import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
|
||||
@@ -13,28 +13,29 @@ export interface ExtraLib {
|
||||
}
|
||||
|
||||
interface EditorProps {
|
||||
isDarkMode?: boolean
|
||||
tsconfig?: ITsconfig
|
||||
files?: IFiles
|
||||
selectedFileName?: string
|
||||
readonly?: boolean
|
||||
onChange?: (code: string | undefined) => void
|
||||
options?: IEditorOptions
|
||||
theme?: ITheme
|
||||
onJumpFile?: (fileName: string) => void
|
||||
extraLibs?: ExtraLib[]
|
||||
}
|
||||
|
||||
const Editor = ({
|
||||
isDarkMode,
|
||||
tsconfig,
|
||||
files = {},
|
||||
selectedFileName = '',
|
||||
readonly,
|
||||
theme,
|
||||
onChange,
|
||||
options,
|
||||
onJumpFile,
|
||||
extraLibs = []
|
||||
}: EditorProps) => {
|
||||
const { styles } = useStyles()
|
||||
const editorRef = useRef<editor.IStandaloneCodeEditor>()
|
||||
const monacoRef = useRef<Monaco>()
|
||||
const { doOpenEditor, loadJsxSyntaxHighlight, autoLoadExtraLib } = useEditor()
|
||||
@@ -114,9 +115,9 @@ const Editor = ({
|
||||
<>
|
||||
<div className={styles.root}>
|
||||
<MonacoEditor
|
||||
theme={theme}
|
||||
theme={isDarkMode ? 'vs-dark' : 'light'}
|
||||
path={file.name}
|
||||
className={`monaco-editor-${theme ?? 'light'}`}
|
||||
className={`monaco-editor-${isDarkMode ? 'dark' : 'light'}`}
|
||||
language={file.language}
|
||||
value={file.value}
|
||||
onChange={onChange}
|
||||
@@ -129,7 +130,7 @@ const Editor = ({
|
||||
readOnly: readonly
|
||||
}}
|
||||
/>
|
||||
{total > 0 && !finished && <div className={styles.playgroundCodeEditorLoading} />}
|
||||
{total > 0 && !finished && <div className={styles.loading} />}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user