feat: 基础建设

package.json

@@ -26,12 +26,6 @@
     "@eslint-react/eslint-plugin": {
       "optional": true
     },
-    "@unocss/eslint-plugin": {
-      "optional": true
-    },
-    "astro-eslint-parser": {
-      "optional": true
-    },
     "eslint-plugin-format": {
       "optional": true
     },
@@ -50,7 +44,9 @@
     "@antfu/eslint-config": "^2.24.1",
     "@eslint-react/eslint-plugin": "^1.8.0",
     "@rsbuild/core": "1.0.1-beta.9",
+    "@rsbuild/plugin-less": "1.0.1-beta.9",
     "@rsbuild/plugin-react": "1.0.1-beta.9",
+    "@rsbuild/plugin-svgr": "1.0.1-beta.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "eslint": "^9.8.0",
@@ -58,6 +54,7 @@
     "eslint-plugin-react-refresh": "^0.4.9",
     "lint-staged": "^15.2.7",
     "simple-git-hooks": "^2.11.1",
+    "tailwindcss": "^3.4.7",
     "typescript": "^5.5.2"
   },
   "simple-git-hooks": {

postcss.config.cjs

+module.exports = {
+  plugins: {
+    tailwindcss: {},
+  },
+}

rsbuild.config.ts

 import { defineConfig } from '@rsbuild/core'
 import { pluginReact } from '@rsbuild/plugin-react'
+import { pluginSvgr } from '@rsbuild/plugin-svgr'
+import { pluginLess } from '@rsbuild/plugin-less'
 
 export default defineConfig({
-  plugins: [pluginReact()],
+  plugins: [
+    pluginReact(),
+    pluginLess(),
+    pluginSvgr(),
+  ],
+  dev: {
+    // 与本地开发有关的选项
+  },
+  html: {
+    // 与 HTML 生成有关的选项
+    title: '晓得. - 晓得解惑，让沟通更智能。',
+    favicon: './src/assets/logo.png',
+    appIcon: './src/assets/logo.png',
+    meta: [
+      { description: '晓得 是一个智能助手，知晓市场脉搏，引领行业潮流，晓得AI助手全方位为您保驾护航| 晓得. - 晓得解惑，让沟通更智能。' },
+      { name: 'viewport', content: 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' },
+      { 'http-equiv': 'X-UA-Compatible', 'content': 'ie=edge' },
+      { 'http-equiv': 'Cache-Control', 'content': 'no-cache' },
+      { 'http-equiv': 'Pragma', 'content': 'no-cache' },
+      { 'http-equiv': 'Expires', 'content': '0' },
+      { name: 'keywords', content: '晓得,sdream,ai,众耳,insurebank,保险,智能,条款解析,人工智能大模型,AI聊天机器人,AI聊天,国内大模型公司,AI聊天,AI助手,context' },
+      { name: 'apple-mobile-web-app-capable', content: 'yes' },
+      { name: 'apple-mobile-web-app-status-bar-style', content: 'black' },
+      { name: 'format-detection', content: 'telephone=no,email=no' },
+      { name: 'apple-mobile-web-app-title', content: '晓得' },
+    ],
+  },
+  tools: {
+    // 与底层工具有关的选项
+  },
+  output: {
+    // 与构建产物有关的选项
+    distPath: {
+      image: 'assets',
+      svg: 'assets',
+      font: 'assets',
+      media: 'assets',
+    },
+  },
+  source: {
+    // 与源代码解析、编译方式相关的选项
+  },
+  server: {
+    // 与 Rsbuild 服务器有关的选项
+    // 在本地开发和预览时都会生效
+  },
+  security: {
+    // 与 Web 安全有关的选项
+  },
+  performance: {
+    // 与构建性能、运行时性能有关的选项
+  },
+  environments: {
+    // 为每个环境定义不同的 Rsbuild 配置
+  },
 })

src/index.less

+@tailwind base;

src/index.tsx

 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
+import './index.less'
 
 const rootEl = document.getElementById('root')
 if (rootEl) {

tailwind.config.js

+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

tsconfig.json

@@ -6,6 +6,9 @@
     "useDefineForClassFields": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "resolveJsonModule": true,
     "allowImportingTsExtensions": true,
     "strict": true,

wiki/rules/components.md

+# React Fast Refresh
+Rsbuild 使用 React 官方的 Fast Refresh 能力来进行组件热更新。
+
+注意 React Refresh 要求组件按照规范的方式编写，否则热更新可能无效，你可以使用 eslint-plugin-react-refresh 进行校验。
+
+比如，如果 React 组件的热更新无法生效，或者是热更新后 React 组件的 state 丢失，这通常是因为你的 React 组件使用了匿名函数。在 React Fast Refresh 的官方实践中，要求组件不能为匿名函数，否则热更新后无法保留 React 组件的 state。
+
+以下是一些错误用法的例子：
+
+```tsx
+// 错误写法 1
+export default function () {
+  return <div>Hello World</div>
+}
+
+// 错误写法 2
+export default () => <div>Hello World</div>
+```
+
+```tsx
+// 正确写法 1
+export default function MyComponent() {
+  return <div>Hello World</div>
+}
+
+// 正确写法 2
+const MyComponent = () => <div>Hello World</div>
+
+export default MyComponent
+```

wiki/useage/SVGR.md

+# SVGR 插件
+
+默认情况下，Rsbuild 会将 SVG 图片当作静态资源处理，处理规则可参考：引用静态资源。
+
+通过添加 SVGR 插件，Rsbuild 支持调用 SVGR，将 SVG 图片转换为一个 React 组件使用。
+
+# 安装插件
+
+```bash
+pnpm add @rsbuild/plugin-svgr -D
+```
+
+# 注册插件
+
+```ts
+// rsbuild.config.ts
+import { pluginSvgr } from '@rsbuild/plugin-svgr'
+
+export default {
+  plugins: [pluginSvgr()],
+}
+```
+
+# 示例
+
+注册插件后，当你在 JS 文件中引用 SVG 资源时，如果导入的路径包含 ?react 后缀，Rsbuild 会调用 SVGR，将 SVG 图片转换为一个 React 组件。
+
+```tsx
+import Logo from './logo.svg?react'
+
+export const App = () => <Logo />
+```
+
+如果导入的路径不包含 ?react 后缀，那么 SVG 会被当做普通的静态资源来处理，你会得到一个 URL 字符串：
+
+```tsx
+import logoURL from './static/logo.svg'
+
+console.log(logoURL) // => "/static/logo.6c12aba3.png"
+```
+
+Rsbuild 也支持具名导入 ReactComponent 来使用 SVGR：
+
+```tsx
+import { ReactComponent as Logo } from './logo.svg'
+
+export const App = () => <Logo />
+```

wiki/useage/静态资源内联.md

+# 强制内联
+# 强制内联
+```tsx
+import React from 'react'
+import img from './foo.png?inline'
+
+export default function Foo() {
+  return <img src={img} />
+}
+```
+
+# 从 CSS 文件中引用
+
+```css
+.foo {
+  background-image: url('./icon.png?inline');
+}
+```