From fe6b35c5700824baced8c11b33c3f8e423ddde6f Mon Sep 17 00:00:00 2001
From: jingyang <72259332+zjy365@users.noreply.github.com>
Date: Thu, 11 Apr 2024 19:02:32 +0800
Subject: [PATCH] fix:desktop modal header style & costcenter breakpoints
(#4675)
* fix:desktop modal header style
Signed-off-by: jingyang <3161362058@qq.com>
* fix cost center breakpoints
Signed-off-by: jingyang <3161362058@qq.com>
* fix template
---------
Signed-off-by: jingyang <3161362058@qq.com>
---
.../src/components/account/PasswordModify.tsx | 6 +++--
.../src/components/team/Abdication.tsx | 6 +++--
.../src/components/team/ModifyRole.tsx | 4 ++-
.../src/components/team/ReciveMessage.tsx | 6 +++--
frontend/packages/ui/src/theme/theme.ts | 11 ++++----
.../costcenter/src/styles/chakraTheme.ts | 1 +
.../template/src/components/Banner/index.tsx | 26 +++++++++++--------
.../template/src/components/layout/index.tsx | 6 ++---
.../providers/template/src/constants/theme.ts | 11 ++++----
.../providers/template/src/pages/index.tsx | 4 +--
10 files changed, 48 insertions(+), 33 deletions(-)
diff --git a/frontend/desktop/src/components/account/PasswordModify.tsx b/frontend/desktop/src/components/account/PasswordModify.tsx
index 8172700501c..89e2c1507df 100644
--- a/frontend/desktop/src/components/account/PasswordModify.tsx
+++ b/frontend/desktop/src/components/account/PasswordModify.tsx
@@ -76,8 +76,10 @@ export default function PasswordModify(props: FlexProps) {
backdropFilter="blur(150px)"
p="24px"
>
-
- {t('changePassword')}
+
+
+ {t('changePassword')}
+
{mutation.isLoading ? (
) : (
diff --git a/frontend/desktop/src/components/team/Abdication.tsx b/frontend/desktop/src/components/team/Abdication.tsx
index 81901ea4e4d..dffdb34a65e 100644
--- a/frontend/desktop/src/components/team/Abdication.tsx
+++ b/frontend/desktop/src/components/team/Abdication.tsx
@@ -90,8 +90,10 @@ export default function Abdication({
backdropFilter="blur(150px)"
p="24px"
>
-
- {t('Abdication')}
+
+
+ {t('Abdication')}
+
{mutation.isLoading ? (
) : (
diff --git a/frontend/desktop/src/components/team/ModifyRole.tsx b/frontend/desktop/src/components/team/ModifyRole.tsx
index d41a4d5e6e9..f217a52c8b1 100644
--- a/frontend/desktop/src/components/team/ModifyRole.tsx
+++ b/frontend/desktop/src/components/team/ModifyRole.tsx
@@ -82,7 +82,9 @@ export default function ModifyRole({
p="24px"
>
- modify member
+
+ modify member
+
{mutation.isLoading ? (
) : (
diff --git a/frontend/desktop/src/components/team/ReciveMessage.tsx b/frontend/desktop/src/components/team/ReciveMessage.tsx
index 3715b4f9ab1..284befee159 100644
--- a/frontend/desktop/src/components/team/ReciveMessage.tsx
+++ b/frontend/desktop/src/components/team/ReciveMessage.tsx
@@ -100,8 +100,10 @@ export default function ReciveMessage({
backdropFilter="blur(150px)"
p="24px"
>
-
- {t('Accept Invitation')}
+
+
+ {t('Accept Invitation')}
+
{mutation.isLoading ? (
) : (
diff --git a/frontend/packages/ui/src/theme/theme.ts b/frontend/packages/ui/src/theme/theme.ts
index 3f07733af4b..969fa9a0f53 100644
--- a/frontend/packages/ui/src/theme/theme.ts
+++ b/frontend/packages/ui/src/theme/theme.ts
@@ -20,11 +20,12 @@ const _theme = {
'2xl': '20px'
},
breakpoints: {
- sm: '1024px',
- md: '1280px',
- lg: '1500px',
- xl: '1800px',
- '2xl': '2100px'
+ base: '0px',
+ sm: '640px',
+ md: '768px',
+ lg: '1024px',
+ xl: '1280px',
+ '2xl': '1536px'
},
fontWeights: {
bold: 500
diff --git a/frontend/providers/costcenter/src/styles/chakraTheme.ts b/frontend/providers/costcenter/src/styles/chakraTheme.ts
index 9340546b440..f0e13ee2688 100644
--- a/frontend/providers/costcenter/src/styles/chakraTheme.ts
+++ b/frontend/providers/costcenter/src/styles/chakraTheme.ts
@@ -83,6 +83,7 @@ export const theme = extendTheme(originTheme, {
Heading,
Card
},
+ breakpoints: { base: '0em', sm: '30em', md: '48em', lg: '62em', xl: '80em', '2xl': '96em' },
styles: {
global: {
'html, body': {
diff --git a/frontend/providers/template/src/components/Banner/index.tsx b/frontend/providers/template/src/components/Banner/index.tsx
index 42de551f641..e0e5ebb0f55 100644
--- a/frontend/providers/template/src/components/Banner/index.tsx
+++ b/frontend/providers/template/src/components/Banner/index.tsx
@@ -1,6 +1,6 @@
import { useSystemConfigStore } from '@/store/config';
import { SlideDataType } from '@/types/app';
-import { Box, Center, Flex, Text } from '@chakra-ui/react';
+import { Box, Center, Flex, Text, useBreakpointValue } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React, { useRef } from 'react';
import 'swiper/css';
@@ -58,6 +58,7 @@ export default React.memo(function Banner() {
const swiperRef = useRef(null);
const { systemConfig } = useSystemConfigStore();
const router = useRouter();
+ const isSmallScreen = useBreakpointValue({ base: true, xl: false });
const handlePrev = () => {
if (swiperRef.current) {
@@ -83,7 +84,7 @@ export default React.memo(function Banner() {
return (
goDeploy(item.templateName)} />
-
- goDeploy(
- (systemConfig?.slideData[(index + 1) % systemConfig?.slideData.length])
- .templateName
- )
- }
- />
+ {!isSmallScreen && (
+
+ goDeploy(
+ (systemConfig?.slideData[(index + 1) % systemConfig?.slideData.length])
+ .templateName
+ )
+ }
+ />
+ )}
))}
+
= {
@@ -16,12 +15,13 @@ const AppMenu = dynamic(() => import('./appmenu'), {
export default function Layout({ children }: { children: JSX.Element }) {
const router = useRouter();
+ const firstColumnWidth = useBreakpointValue({ base: '230px', xl: '270px' });
return (
<>
{ShowLayoutRoute[router.pathname] ? (
{filterData?.map((item: TemplateType) => {
return (