修theme

src/frontend/src/components/ui/provider.jsx

@@ -1,12 +1,14 @@
-'use client'
+'use client';
+import { ChakraProvider } from '@chakra-ui/react';
+import { ColorModeProvider } from './color-mode';
+import createSystem from '@/theme';
 
-import { ChakraProvider, defaultSystem } from '@chakra-ui/react'
+const system = createSystem;
-import { ColorModeProvider } from './color-mode'
 
 export function Provider(props) {
   return (
-    <ChakraProvider value={defaultSystem}>
+    <ChakraProvider value={system}>
       <ColorModeProvider {...props} />
     </ChakraProvider>
-  )
+  );
 }

src/frontend/src/index.js

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom/client';
 import App from '@/App';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from '@/components/ui/provider';
-import system from '@/theme';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

src/frontend/src/pages/Welcome.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Box, Button, Heading, VStack } from '@chakra-ui/react';
 import { useNavigate } from 'react-router-dom';
-import Card from '@/components/ui/Card';
 
 const Welcome = () => {
   const navigate = useNavigate();

src/frontend/src/theme.js

@@ -3,25 +3,21 @@ import { defineConfig, createSystem, defaultConfig } from '@chakra-ui/react';
 const config = defineConfig({
   cssVarsRoot: ':where(:root, :host)',
   cssVarsPrefix: 'ck',
-  strictTokens: false,
+  strictTokens: true,
 
-  globalCss: {
+  globalCss: {}, //全局css
-    'html, body': {
-      margin: 0,
-      padding: 0,
-      fontFamily: "'Roboto', sans-serif",
-      backgroundColor: '{colors.bg}',
-      color: '{colors.text}',
-    },
-  },
 
   conditions: {
-    cqSm: '@container(min-width: 320px)',
+    child: '& > *', //子元素选择
-    child: '& > *',
   },
 
   theme: {
+    //核心主题配置
+    components: {
+      //组件样式
+    },
     breakpoints: {
+      //响应式断点
       sm: '320px',
       md: '768px',
       lg: '960px',
@@ -29,6 +25,7 @@ const config = defineConfig({
     },
 
     tokens: {
+      //基础主题
       colors: {
         bg: '#f9fafb',
         text: '#1a202c',
@@ -46,6 +43,7 @@ const config = defineConfig({
     },
 
     semanticTokens: {
+      //自定义标记
       colors: {
         danger: { value: '{colors.red}' },
         primary: { value: '{colors.primary}' },
@@ -54,6 +52,7 @@ const config = defineConfig({
     },
 
     keyframes: {
+      //关键帧
       fadeIn: {
         from: { opacity: 0 },
         to: { opacity: 1 },
@@ -65,6 +64,7 @@ const config = defineConfig({
     },
 
     animationStyles: {
+      //预定义动画样式
       fadeIn: {
         animation: 'fadeIn 0.3s ease-in',
       },
@@ -74,6 +74,7 @@ const config = defineConfig({
     },
 
     textStyles: {
+      //文字样式
       heading: {
         description: 'Page heading',
         value: {
@@ -90,6 +91,7 @@ const config = defineConfig({
     },
 
     layerStyles: {
+      //层样式
       card: {
         bg: 'white',
         boxShadow: 'soft',
@@ -100,6 +102,4 @@ const config = defineConfig({
   },
 });
 
-const system = createSystem(defaultConfig, config);
+export default createSystem(defaultConfig, config);
-
-export default system;