feat: 调整样式

package.json

@@ -40,6 +40,7 @@
   },
   },
   "dependencies": {
   "dependencies": {
     "@nextui-org/react": "^2.4.6",
     "@nextui-org/react": "^2.4.6",
+    "@reactuses/core": "^5.0.19",
     "react": "^18.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.0"
     "react-router-dom": "^6.26.0"

src/App.tsx

 import './App.css'
 import './App.css'
 import { Button } from '@nextui-org/button'
 import { Button } from '@nextui-org/button'
+import { useToggle } from '@reactuses/core'
+import { motion } from 'framer-motion'
 import React from 'react'
 import React from 'react'
 
 
 const App: React.FC = () => {
 const App: React.FC = () => {
+  const [on, toggle] = useToggle(true)
+
   return (
   return (
     <div>
     <div>
-      <Button color="primary">Button</Button>
+      <motion.div
+        className="w-[100px] h-[100px] bg-slate-300"
+      >
+        {on ? 'ON' : 'OFF'}
+      </motion.div>
+      <Button color="primary" onClick={toggle}>Toggle</Button>
     </div>
     </div>
   )
   )
 }
 }

src/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import { BrowserRouter } from 'react-router-dom'
 import { NextUIProvider } from '@nextui-org/react'
 import { NextUIProvider } from '@nextui-org/react'
+import { motion } from 'framer-motion'
 import App from './App'
 import App from './App'
 import './styles/index.less'
 import './styles/index.less'
 
 
@@ -13,11 +14,11 @@ if (rootEl) {
   const root = ReactDOM.createRoot(rootEl)
   const root = ReactDOM.createRoot(rootEl)
   root.render(
   root.render(
     <React.StrictMode>
     <React.StrictMode>
-      <NextUIProvider>
+      <NextUIProvider className="h-full">
         <BrowserRouter>
         <BrowserRouter>
-          <main>
+          <motion.main className="h-full">
             <App />
             <App />
-          </main>
+          </motion.main>
         </BrowserRouter>
         </BrowserRouter>
       </NextUIProvider>
       </NextUIProvider>
     </React.StrictMode>,
     </React.StrictMode>,

src/styles/global.less

@@ -4,15 +4,15 @@
 }
 }
 
 
 // 其他全局样式...
 // 其他全局样式...
-// html {
-//   height: 100%;
-//   background-color: var(--background-default);
-//   color: var(--text-primary);
-// }
-// body {
-//   background-color: var(--background-default);
-//   color: var(--text-primary);
-//   height: 100%;
-//   min-width: 375px;
-//   font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, "segoe ui", arial, roboto, "PingFang SC", miui, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
-// }
+html {
+  height: 100%;
+}
+body {
+  height: 100%;
+  min-width: 375px;
+  font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, "segoe ui", arial, roboto, "PingFang SC", miui, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
+}
+#root {
+  height: 100%;
+  margin: 0;
+}