feat: 样式管理

.npmrc

+public-hoist-pattern[]=*@nextui-org/*

package.json

@@ -8,6 +8,7 @@
     "dev": "rsbuild dev --open",
     "build:sit": "npx rsbuild dev --env-mode sit",
     "build": "rsbuild build",
+    "doctor": "RSDOCTOR=true pnpm build",
     "preview": "rsbuild preview",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -38,8 +39,10 @@
     }
   },
   "dependencies": {
+    "@nextui-org/react": "^2.4.6",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.24.1",
@@ -49,12 +52,14 @@
     "@rsbuild/plugin-react": "1.0.1-beta.9",
     "@rsbuild/plugin-svgr": "1.0.1-beta.9",
     "@rsbuild/plugin-typed-css-modules": "^1.0.1",
+    "@rsdoctor/rspack-plugin": "^0.3.10",
     "@types/node": "^22.0.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "eslint": "^9.8.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.9",
+    "framer-motion": "^11.3.21",
     "lint-staged": "^15.2.7",
     "simple-git-hooks": "^2.11.1",
     "tailwindcss": "^3.4.7",

rsbuild.config.ts

@@ -3,6 +3,7 @@ import { pluginReact } from '@rsbuild/plugin-react'
 import { pluginSvgr } from '@rsbuild/plugin-svgr'
 import { pluginLess } from '@rsbuild/plugin-less'
 import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules'
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin' // https://rsdoctor.dev/zh/guide/start/quick-start
 
 const isProd = process.env.NODE_ENV === 'production'
 
@@ -37,6 +38,16 @@ export default defineConfig({
   },
   tools: {
     // 与底层工具有关的选项
+    rspack(config, { appendPlugins }) {
+      // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
+      if (process.env.RSDOCTOR) {
+        appendPlugins(
+          new RsdoctorRspackPlugin({
+            // 插件选项
+          }),
+        )
+      }
+    },
   },
   output: {
     // 与构建产物有关的选项

src/App.css

-body {
-  margin: 0;
-  color: #fff;
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  background-image: linear-gradient(to bottom, #020917, #101725);
-}
-
-.content {
-  display: flex;
-  min-height: 100vh;
-  line-height: 1.1;
-  text-align: center;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.content h1 {
-  font-size: 3.6rem;
-  font-weight: 700;
-}
-
-.content p {
-  font-size: 1.2rem;
-  font-weight: 400;
-  opacity: 0.5;
-}

src/App.tsx

 import './App.css'
-import styles from './App.module.less'
+import { Button } from '@nextui-org/button'
+import React from 'react'
 
-function App() {
+const App: React.FC = () => {
   return (
-    <div className="content">
-      <h1 className={styles.testH1}>Rsbuild with React</h1>
-      <p>Start building amazing things with Rsbuild.</p>
+    <div>
+      <Button color="primary">Button</Button>
     </div>
   )
 }

src/config/theme.ts

+import type { NextUIPluginConfig } from '@nextui-org/react'
+
+export const theme: NextUIPluginConfig = {
+  prefix: 'sdream',
+  themes: {
+    light: {
+      colors: {
+        background: '#E6F6FE', // or DEFAULT
+        primary: {
+          DEFAULT: '#29B6FD',
+        },
+      },
+    },
+    dark: {
+      colors: {
+        background: '#000000', // or DEFAULT
+        primary: {
+          DEFAULT: '#29B6FD',
+        },
+      },
+    },
+  },
+}

src/index.tsx

 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import { NextUIProvider } from '@nextui-org/react'
 import App from './App'
-import './index.less'
+import './styles/index.less'
 
 const rootEl = document.getElementById('root')
+
+document.documentElement.classList.add('light')
+
 if (rootEl) {
   const root = ReactDOM.createRoot(rootEl)
   root.render(
     <React.StrictMode>
-      <App />
+      <NextUIProvider>
+        <BrowserRouter>
+          <main>
+            <App />
+          </main>
+        </BrowserRouter>
+      </NextUIProvider>
     </React.StrictMode>,
   )
 }

src/styles/global.less

+:root {
+
+  // 其他全局 CSS 变量...
+}
+
+// 其他全局样式...
+// 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;
+// }

src/styles/index.less

+@import './global.less';
+@import './tailwindcss.less';

src/typings.d.ts

-declare module '*.less';
+declare module '*.less' {
+  const content: { [className: string]: string }
+  export default content
+}

tailwind.config.js

+import { theme } from './src/config/theme'
+
+const { nextui } = require ('@nextui-org/react')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
+  content: [
+    './src/**/*.{html,js,ts,jsx,tsx}',
+    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
+  ],
   theme: {
     extend: {},
   },
-  plugins: [],
+  darkMode: 'class',
+  plugins: [
+    nextui(theme),
+  ],
 }