From 47ca0ca6d7f62c50137e64cf0c0f89cb604e7e6d Mon Sep 17 00:00:00 2001
From: mhpei <mhpei@gaojihealth.com>
Date: Fri, 17 May 2024 17:22:19 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=9A=97=E5=A4=9C=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/taro-ui-docs/app.jsx                 | 23 ++++-
 packages/taro-ui-docs/assets/dark.svg         |  1 +
 packages/taro-ui-docs/assets/light.svg        |  1 +
 packages/taro-ui-docs/assets/style/dark.scss  | 27 ++++++
 packages/taro-ui-docs/assets/style/docs.scss  |  4 +
 .../taro-ui-docs/components/header/index.jsx  | 93 +++++++++++++++++--
 .../taro-ui-docs/components/header/style.scss | 34 ++++++-
 .../taro-ui-docs/components/sidebar/index.jsx | 13 +--
 .../components/sidebar/style.scss             |  9 ++
 packages/taro-ui-docs/lib/default.scss        |  4 +-
 packages/taro-ui-docs/pages/docs.jsx          | 44 ++++++---
 packages/taro-ui-docs/utils/const.js          |  1 +
 12 files changed, 222 insertions(+), 32 deletions(-)
 create mode 100644 packages/taro-ui-docs/assets/dark.svg
 create mode 100644 packages/taro-ui-docs/assets/light.svg
 create mode 100644 packages/taro-ui-docs/assets/style/dark.scss
 create mode 100644 packages/taro-ui-docs/utils/const.js

diff --git a/packages/taro-ui-docs/app.jsx b/packages/taro-ui-docs/app.jsx
index ce31a1644..a74b87c43 100644
--- a/packages/taro-ui-docs/app.jsx
+++ b/packages/taro-ui-docs/app.jsx
@@ -12,12 +12,15 @@ class App extends React.Component {
   constructor(...args) {
     super(...args)
     this.state = {
-      visible: false
+      visible: false,
+      mode: 'light',
     }
   }
   componentDidMount() {
+    const _mode = localStorage.getItem('mode')
     this.setState({
-      visible: true
+      visible: true,
+      mode: _mode || 'light',
     })
   }
 
@@ -25,12 +28,24 @@ class App extends React.Component {
     return true
   }
 
+  handleMode() {
+    const _mode = this.state.mode
+    const modeVal = _mode === 'light' ? 'dark' : 'light'
+    this.setState({
+      mode: modeVal
+    }, () => {
+      localStorage.setItem('mode', modeVal)
+    })
+  }
+
   render() {
+    const { mode } = this.state
+
     return (
-      <div className='wrapper' style={{ backgroundColor: '#F8FAFF' }}>
+      <div className='wrapper' style={{ backgroundColor: mode === 'light' ? '#F8FAFF' : '#434242' }}>
         <Switch>
           <Route path='/' exact component={Index} />
-          <Route path='/docs' component={Docs} />
+          <Route path='/docs' render={() => <Docs handleMode={this.handleMode.bind(this)} />} />
           <Route path='/guide' component={Guide} />
         </Switch>
       </div>
diff --git a/packages/taro-ui-docs/assets/dark.svg b/packages/taro-ui-docs/assets/dark.svg
new file mode 100644
index 000000000..da13b504c
--- /dev/null
+++ b/packages/taro-ui-docs/assets/dark.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715149290221" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5898" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M544.768 854.4256a339.8656 339.8656 0 0 1-240.8448-99.5328 336.7936 336.7936 0 0 1-72.96-108.032 336.4864 336.4864 0 0 1-26.6752-132.2496 338.2272 338.2272 0 0 1 99.584-240.2816 339.8656 339.8656 0 0 1 144.5376-85.76 413.5936 413.5936 0 0 0-49.5616 196.7616c0 203.4176 146.2784 372.736 339.456 408.8832a338.432 338.432 0 0 1-193.536 60.2112z m267.4176-129.1776a339.8656 339.8656 0 0 1-237.312-99.5328 336.896 336.896 0 0 1-72.96-108.032 336.5376 336.5376 0 0 1-26.6752-132.2496 338.1248 338.1248 0 0 1 99.6864-240.1792l7.2704-7.0656a22.528 22.528 0 0 0-14.2336-38.912 410.112 410.112 0 0 0-55.1936 0.512C297.472 116.2752 128 295.68 128 514.6112c0 229.7856 186.5728 416 416.768 416a415.488 415.488 0 0 0 338.2784-173.1072 22.528 22.528 0 0 0-21.3504-35.4304 327.8336 327.8336 0 0 1-45.9776 3.1744h-3.584z" fill="#666666" p-id="5899"></path></svg>
\ No newline at end of file
diff --git a/packages/taro-ui-docs/assets/light.svg b/packages/taro-ui-docs/assets/light.svg
new file mode 100644
index 000000000..babe88e9f
--- /dev/null
+++ b/packages/taro-ui-docs/assets/light.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715151922241" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19268" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M752.41931153 240.7063601c8.36993432 0 15.62255883 3.08990502 21.72821045 9.16589356 6.1353147 6.08093262 9.18566918 13.3928833 9.18566918 21.73315382 0 8.55285621-3.05035376 15.85986352-9.18566918 21.94079614l-43.67394996 43.66900658c-5.93261719 5.97216773-13.17041016 8.95825195-21.72326709 8.95825195-8.87420678 0-16.20098901-2.98608422-22.08911085-8.75061035-5.88317847-5.87329102-8.80004906-13.2890625-8.80004906-22.14843774 0-8.54791283 2.95642114-15.75604272 8.91375732-21.72821044l43.66900659-43.67394996c6.14025879-6.07598853 13.44726539-9.16589356 21.98034668-9.16589356z m37.66223167 240.39459181h61.79809547c8.52813721 0 15.82031227 2.98608422 21.83697534 9.06207276C879.78271508 496.24395728 882.78857422 503.45208717 882.78857422 512c0 8.55285621-3.00585914 15.85986352-9.07196021 21.83697533-6.01666236 6.07598853-13.30883813 9.06207276-21.83697534 9.06207276h-61.79809547c-8.52813721 0-15.80053734-2.98608422-21.86663841-9.06207276-6.01666236-5.97711182-9.05712867-13.2890625-9.05712867-21.83697533 0-8.55285621 3.04046631-15.76098609 9.05712867-21.83697533 6.06610107-6.07598853 13.33850122-9.06207276 21.86663841-9.06207276zM512 141.21142578c8.52813721 0 15.79064917 3.08990502 21.85180688 9.06207276 6.02160645 6.08093262 9.05712867 13.3928833 9.05712867 21.83697533v61.79809546c0 8.55285621-3.03552222 15.85986352-9.0521853 21.83697534-6.06610107 6.07598853-13.32861305 9.16589356-21.85675025 9.16589355-8.53802467 0-15.80053734-3.08990502-21.86663842-9.16589355-6.01666236-5.97711182-9.0521853-13.2890625-9.05218458-21.83697534V172.11047387c0-8.44409203 3.03552222-15.76098609 9.05218458-21.83697533C496.20440674 144.3013308 503.46691871 141.21142578 512.00494408 141.21142578zM271.81304907 240.7063601c8.36499023 0 15.61267066 3.08990502 21.743042 9.16589356l43.66900659 43.67394996c6.14025879 6.07598853 9.17083764 13.38793922 9.17083764 21.72821044 0 8.55285621-3.01080323 15.86480689-9.05712938 21.83697534-6.03149391 6.08093262-13.30389404 9.06207276-21.85180617 9.06207275-8.69622827 0-16.02795386-2.98608422-21.95068359-8.85443115l-43.68383814-43.67395068c-5.97216773-5.97216773-8.92858886-13.28411842-8.92858886-22.03967284 0-8.55285621 3.00585914-15.76098609 9.07196021-21.83697462 6.01666236-5.97216773 13.30883813-9.06207276 21.85675096-9.06207276h-0.03955126z m436.93725586 436.91253615c8.36499023 0 15.60772729 2.98608422 21.72326709 9.16589355l43.67394995 43.67395067c6.1353147 6.17980933 9.18566918 13.38793922 9.18566919 21.93585205 0 8.34521461-3.05035376 15.65716529-9.18566919 21.73315382-6.1105957 6.17980933-13.35827613 9.16589356-21.72326636 9.16589356-8.52813721 0-15.84008789-2.98608422-21.98034668-9.16589356l-43.66900659-43.66900587c-5.95733618-5.87329102-8.91375732-13.1852417-8.91375732-21.73315453 0-8.55285621 3.01080323-15.86480689 9.05712866-21.94079614 6.03149391-6.07598853 13.32861305-9.16589356 21.85180689-9.16589355h-0.01977564zM512.00494408 388.40380836c-34.12243628 0-63.22192359 12.05310035-87.39239525 36.2532351-24.1358645 24.10125732-36.21368384 53.25018335-36.21368384 87.34295654 0 34.0927732 12.07782007 63.24169922 36.21368384 87.44677734C448.78796387 623.53814721 477.88250709 635.59619164 512 635.59619164c34.12243628 0 63.23181176-12.05310035 87.4072268-36.15435838C623.51837158 575.2466433 635.59619164 546.09771729 635.59619164 512c0-34.0927732-12.07782007-63.24169922-36.18896484-87.34295654C575.23181176 400.45690942 546.12243628 388.40380836 512 388.40380836zM172.12036133 481.10095191h61.79809547c8.53802467 0 15.80053734 2.98608422 21.86663841 9.06207276 6.01666236 6.08093262 9.05712867 13.2890625 9.05712867 21.83697533 0 8.55285621-3.04046631 15.85986352-9.05712867 21.83697533-6.06610107 6.07598853-13.32861305 9.06207276-21.86663841 9.06207276h-61.79809547c-8.52813721 0-15.81042481-2.98608422-21.83697534-9.06207276C144.21728492 527.85986352 141.21142578 520.54791283 141.21142578 512c0-8.55285621 3.00585914-15.76098609 9.07196021-21.83697533 6.03149391-6.07598853 13.30883813-9.06207276 21.83697534-9.06207276zM512.00494408 759.19238258c8.52813721 0 15.79064917 2.98608422 21.85180617 9.06207274 6.02160645 6.08093262 9.05712867 13.2890625 9.05712938 21.83697535v61.79809546c0 8.55285621-3.03552222 15.85986352-9.0521853 21.83697533C527.79559326 879.80249 520.53308129 882.78857422 512 882.78857422c-8.53802467 0-15.80053734-2.98608422-21.86663842-9.06207276-6.01666236-5.97711182-9.0521853-13.2890625-9.05218458-21.83697533v-61.79809546c0-8.55285621 3.03552222-15.76098609 9.05218458-21.83697534 6.06610107-6.07598853 13.32861305-9.06207276 21.86663842-9.06207275z m-196.47839379-81.57348633c8.5034182 0 15.80053734 2.98608422 21.84686279 9.16589355 6.03149391 6.08093262 9.07196021 13.3928833 9.07196021 21.94079614 0 8.44409203-3.08001685 15.65222192-9.19555664 21.72821044l-43.67394995 43.67394996c-6.10565162 6.17980933-13.34838867 9.16589356-21.72326637 9.16589356-8.54791283 0-15.84008789-2.98608422-21.85180687-8.96319533-6.07104516-6.07598853-9.0769043-13.38793922-9.0769043-21.93585205 0-8.65173364 2.95642114-15.96862769 8.92858887-21.94079614l43.68383813-43.66900658c6.10565162-6.17980933 13.44232202-9.16589356 21.95068359-9.16589355h0.03955054zM512 326.60571289c33.628052 0 64.6506958 8.34521461 93.0481565 24.81811547 28.42712378 16.69042992 50.92163109 39.1404419 67.4637456 67.56756568 16.57177758 28.32824708 24.86755347 59.32617188 24.86755347 93.00860596 0 33.68243408-8.27600098 64.68035888-24.86755347 93.10748267-16.58166504 28.32824708-39.08605981 50.77825904-67.4637456 67.4637456-28.36285424 16.58166504-59.37561059 24.82305884-93.0481565 24.82305884-33.66760254 0-64.67047143-8.24139381-93.05804468-24.81811547-28.37768578-16.69042992-50.86230492-39.14538598-67.46374487-67.46868897-16.58166504-28.42712378-24.86755347-59.42504859-24.86755348-93.10748267 0-33.68243408 8.31555152-64.68035888 24.86755348-93.00860596 16.55200195-28.42712378 39.03662109-50.87713647 67.46374487-67.56262231C447.35424828 334.94598413 478.371948 326.60571289 512 326.60571289z" p-id="19269" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/packages/taro-ui-docs/assets/style/dark.scss b/packages/taro-ui-docs/assets/style/dark.scss
new file mode 100644
index 000000000..5546a4346
--- /dev/null
+++ b/packages/taro-ui-docs/assets/style/dark.scss
@@ -0,0 +1,27 @@
+h1, h2, h3, h4, h5, h6 {
+  color: #fff;
+}
+
+.dark-style-docs-20140517 {
+  color: '#fff';
+}
+
+p {
+  color: #fff;
+}
+
+li {
+  color: #fff;
+}
+
+code {
+  color: #3F536E;
+}
+
+span {
+  color: #3F536E;
+}
+
+a {
+  color: #fff;
+}
\ No newline at end of file
diff --git a/packages/taro-ui-docs/assets/style/docs.scss b/packages/taro-ui-docs/assets/style/docs.scss
index 316db4a0a..df0258840 100644
--- a/packages/taro-ui-docs/assets/style/docs.scss
+++ b/packages/taro-ui-docs/assets/style/docs.scss
@@ -54,6 +54,10 @@ $drop-shadow: 0 4px 30px 0 rgba(223, 225, 230, 0.5);
   overflow: hidden;
 }
 
+.darkbox {
+  background-color: #23272f;
+}
+
 /**
  * Component - Preview & Code sample
  */
diff --git a/packages/taro-ui-docs/components/header/index.jsx b/packages/taro-ui-docs/components/header/index.jsx
index 154e2b63b..c7ff1f8d0 100644
--- a/packages/taro-ui-docs/components/header/index.jsx
+++ b/packages/taro-ui-docs/components/header/index.jsx
@@ -1,16 +1,40 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Link, NavLink, withRouter } from 'react-router-dom'
+import { DARK_KEY_SINGLE } from '../../utils/const'
 import taroUILogo from '../../assets/logo-taro.png'
+import darkImg from '../../assets/dark.svg'
+import lightImg from '../../assets/light.svg'
 import './style.scss'
 
 class PageHeader extends React.Component {
   constructor(...args) {
     super(...args)
     this.state = {
-      toggle: true
+      toggle: true,
+      mode: 'light',
     }
   }
+
+  componentDidMount() {
+    const _mode = localStorage.getItem('mode')
+    const style = localStorage.getItem('dark-style');
+    const isCurrentStyle = style && ~style.indexOf(DARK_KEY_SINGLE) && !~style.indexOf('<style')
+
+    if (_mode) {
+      this.setState({
+        mode: _mode
+      })
+
+      if (_mode === 'dark' && isCurrentStyle) {
+        const styleTag = document.createElement('style');
+        styleTag.type = 'text/css';
+        styleTag.innerHTML = style;
+        document.head.appendChild(styleTag);
+      }
+    }
+  }
+  
   toggleMenu() {
     const _toggle = this.state.toggle
     this.setState({
@@ -23,13 +47,52 @@ class PageHeader extends React.Component {
   goToSource(e) {
     e.preventDefault()
   }
+  handleChange() {
+    const _mode = this.state.mode
+    const modeVal = _mode === 'light' ? 'dark' : 'light'
+    const { handleMode } = this.props
+    const styles = Array.from(document.querySelectorAll('style'));
+    const style = localStorage.getItem('dark-style');
+    const isCurrentStyle = style && ~style.indexOf(DARK_KEY_SINGLE) && !~style.indexOf('<style')
+
+    if (modeVal === 'light') {
+      styles.forEach(style => {
+        if (~style.outerHTML.indexOf(DARK_KEY_SINGLE)) {
+          const newStyle = style.outerHTML.replace(/<style>/g, '').replace(/<\/style>/g, '').replace(/<style type="text\/css">/, '')
+          localStorage.setItem('dark-style', newStyle)
+          style.remove()
+        }
+      });
+    }
+
+    if (modeVal === 'dark' && isCurrentStyle) {
+      const styleTag = document.createElement('style');
+      styleTag.type = 'text/css';
+      styleTag.innerHTML = style;
+      document.head.appendChild(styleTag);
+    }
+
+    if (modeVal === 'dark' && !isCurrentStyle) {
+      require('../../assets/style/dark.scss');
+    }
+
+    this.setState({
+      mode: modeVal,
+    }, () => {
+      localStorage.setItem('mode', modeVal)
+      handleMode && handleMode()
+    })
+  }
 
   render() {
-    const { collapse, style } = this.props
-    const { toggle } = this.state
+    const { collapse, style, themeMode } = this.props
+    const { toggle, mode } = this.state
+    const darktheme = themeMode && mode === 'dark' && 'darktheme' // 暗黑模式bg
+    const darktext = themeMode && mode === 'dark' && 'darktext' // 暗黑模式text color
+
     return (
       <header
-        className={classnames('page-header', { collapse })}
+        className={classnames('page-header', { collapse, darktheme })}
         style={style}
         id='J-page-header'
       >
@@ -38,7 +101,7 @@ class PageHeader extends React.Component {
             <div className='logo'>
               <Link to='/'>
                 <img className='logo-img' src={taroUILogo} />
-                <span>Taro UI</span>
+                <span className={classnames('', { darktext })}>Taro UI</span>
               </Link>
             </div>
             <i className='icon icon-menu nav-icon' onClick={this.toggleMenu} />
@@ -50,6 +113,7 @@ class PageHeader extends React.Component {
             <ul className='navbar'>
               <li>
                 <NavLink
+                  className={classnames('', { darktext })}
                   activeClassName='router-link-active'
                   to='/docs/introduction'
                 >
@@ -58,6 +122,7 @@ class PageHeader extends React.Component {
               </li>
               <li>
                 <NavLink
+                  className={classnames('', { darktext })}
                   activeClassName='router-link-active'
                   to='/docs/resource'
                 >
@@ -68,15 +133,31 @@ class PageHeader extends React.Component {
                 <a
                   href='https://nervjs.github.io/taro-ui-theme-preview/'
                   target='__blank'
+                  className={classnames('', { darktext })}
                 >
                   主题生成器
                 </a>
               </li>
               <li>
-                <a href='https://aotu.io/' target='__blank'>
+                <a 
+                  href='https://aotu.io/' 
+                  target='__blank' 
+                  className={classnames('', { darktext })}
+                >
                   关于我们
                 </a>
               </li>
+              {
+                themeMode && <li>
+                  <a onClick={this.handleChange.bind(this)}>
+                    {
+                      mode === 'light'
+                        ? <img className="nav-icon" src={darkImg} />
+                        : <img className="nav-icon" src={lightImg} />
+                    }
+                  </a>
+                </li>
+              }
             </ul>
           </div>
         </div>
diff --git a/packages/taro-ui-docs/components/header/style.scss b/packages/taro-ui-docs/components/header/style.scss
index 602aab5e2..9a2c95c1f 100644
--- a/packages/taro-ui-docs/components/header/style.scss
+++ b/packages/taro-ui-docs/components/header/style.scss
@@ -32,7 +32,11 @@ $header-height: 80px;
       padding: 0 50px;
 
       .nav-left .logo span {
-        color: #1D1D1F;
+        color: #23272f;
+      }
+
+      .nav-left .logo .darktext {
+        color: rgb(246 247 249);
       }
 
       .nav-right .navbar {
@@ -40,10 +44,22 @@ $header-height: 80px;
       }
 
       .navbar a {
-        color: #1D1D1F;
+        color: #23272f;
+      }
+
+      .navbar .darktext {
+        color: rgb(246 247 249);
+      }
+
+      .navbar .router-link-active {
+        color: $brand-blue-500;
       }
     }
   }
+
+  &.darktheme {
+    background-color: #23272f;
+  }
 }
 
 .nav-container {
@@ -120,6 +136,10 @@ $header-height: 80px;
             display: inline-block;
           }
         }
+
+        &.darktext {
+          color: $brand-blue-500;
+        }
       }
 
       li {
@@ -138,13 +158,21 @@ $header-height: 80px;
           cursor: not-allowed;
         }
       }
+
+      .nav-icon {
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        top: 50%;
+        margin-top: -12px;
+      }
     }
 
     .btn-language {
       display: inline-block;
       margin: 0 24px;
       padding: 2px 12px;
-      border: 1px solid #1d1d1f;
+      border: 1px solid #23272f;
       border-radius: 2px;
       cursor: pointer;
       transition: color 0.3s, border 0.3s;
diff --git a/packages/taro-ui-docs/components/sidebar/index.jsx b/packages/taro-ui-docs/components/sidebar/index.jsx
index 05d0517b3..0a7c54a3d 100644
--- a/packages/taro-ui-docs/components/sidebar/index.jsx
+++ b/packages/taro-ui-docs/components/sidebar/index.jsx
@@ -31,20 +31,21 @@ class Sidebar extends React.Component {
   }
 
   render() {
-    const { data: items } = this.props
+    const { data: items, mode } = this.props
+    const darktext = mode === 'dark' ? 'darktext' : ''
 
     return (
       <nav className='at-nav'>
         {items.map(item => (
           <div key={item.title}>
-            <h2 className='at-nav__title'>{item.title}</h2>
+            <h2 className={classnames('at-nav__title', { darktext })}>{item.title}</h2>
             <ul className='at-nav__items'>
               {item.items &&
                 item.items.map((navItem, index) => (
                   <li className='at-nav__item' key={index}>
                     <NavLink
                       exact
-                      className='at-nav__page'
+                      className={classnames('at-nav__page', { darktext })}
                       activeClassName='router-link-exact-active router-link-active'
                       to={{
                         pathname: `/${item.name.toLowerCase()}/${navItem.name.toLowerCase()}`
@@ -59,7 +60,7 @@ class Sidebar extends React.Component {
                 item.groups.map((group, idx) => (
                   <li className='at-nav__item active' key={idx}>
                     <a
-                      className='at-nav__group'
+                      className={classnames('at-nav__group', { darktext })}
                       onClick={this.toggleMenu.bind(this, idx)}
                     >
                       {group.title}
@@ -82,13 +83,13 @@ class Sidebar extends React.Component {
                         {group.items.map(navItem => (
                           <li className='at-nav__child-item' key={navItem.name}>
                             <NavLink
-                              className='at-nav__component'
+                              className={classnames('at-nav__component', { darktext })}
                               activeClassName='router-link-exact-active router-link-active'
                               to={`/docs/${navItem.name.toLowerCase()}`}
                               replace
                             >
                               {navItem.name}
-                              <span>{navItem.title}</span>
+                              <span className={classnames('', { darktext })}>{navItem.title}</span>
                             </NavLink>
                           </li>
                         ))}
diff --git a/packages/taro-ui-docs/components/sidebar/style.scss b/packages/taro-ui-docs/components/sidebar/style.scss
index 43aed2ac6..5a4b400b9 100644
--- a/packages/taro-ui-docs/components/sidebar/style.scss
+++ b/packages/taro-ui-docs/components/sidebar/style.scss
@@ -13,6 +13,11 @@
   overflow: auto;
 }
 
+.darkbox {
+  // background-color: #434242;
+  background-color: #23272f;
+}
+
 /**
  * Navigation
  */
@@ -119,6 +124,10 @@
     }
   }
 
+  .darktext {
+    color: #fff !important;
+  }
+
   &__component {
     display: block;
     position: relative;
diff --git a/packages/taro-ui-docs/lib/default.scss b/packages/taro-ui-docs/lib/default.scss
index 1966d5bab..b22e444a3 100644
--- a/packages/taro-ui-docs/lib/default.scss
+++ b/packages/taro-ui-docs/lib/default.scss
@@ -91,14 +91,14 @@ $black-100                  : #C0C6CE;
 $black-200                  : #96A0AD;
 $black-300                  : #6B798C;
 $black-400                  : #4C5D73;
-$black-500                  : #2C405A;
+$black-500                  : #5a2c36;
 $black-600                  : #273A52;
 $black-700                  : #213248;
 $black-800                  : #1B2A3F;
 $black-900                  : #101C2E;
 
 $text-color                 : #3F536E;
-$title-color                : #2C405A;
+$title-color                : #5a2c45;
 
 $border-color-gray          : #CCC;
 $border-color-base          : #C5D9E8;
diff --git a/packages/taro-ui-docs/pages/docs.jsx b/packages/taro-ui-docs/pages/docs.jsx
index 66362e070..68e1a2a70 100644
--- a/packages/taro-ui-docs/pages/docs.jsx
+++ b/packages/taro-ui-docs/pages/docs.jsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import classnames from 'classnames'
 import { Route, Redirect, Switch } from 'react-router-dom'
 import QRCode from 'qrcode.react'
 import PageHeader from '../components/header'
@@ -15,31 +16,52 @@ class Docs extends React.Component {
   constructor() {
     super(...arguments)
     this.state = {
-      fixed: false
+      fixed: false,
+      mode: 'light',
     }
   }
 
+  componentDidMount() {
+    const _mode = localStorage.getItem('mode')
+    this.setState({
+      mode: _mode || 'light',
+    })
+  }
+
   UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.location.pathname !== this.props.location.pathname) {
-      this.refs.atMarkdown.scrollTo(0, 0)
-    }
+    // if (nextProps.location.pathname !== this.props.location.pathname) {
+    //   this.refs.atMarkdown.scrollTo(0, 0)
+    // }
+  }
+
+  changeMode() {
+    const { handleMode } = this.props
+    const { mode } = this.state
+
+    handleMode && handleMode()
+    this.setState({
+      mode: mode === 'light' ? 'dark' : 'light',
+    })
   }
 
   render() {
     const data = navsConfig.components
-    const { fixed } = this.state
-    const pathname = this.props.location.pathname
+    const { fixed, mode } = this.state
+    // const pathname = this.props.location.pathname
+    const pathname = '/docs/introduction'
     const reg = /\/\S+\/(\S+)/
     const result = pathname.match(reg)
     const curDemoPath = pathMap[result[1]] || ''
     const curPageUrl = `${window.location.origin}${window.location.pathname}/h5/index.html#/pages/${curDemoPath}/index`
+    const isDark = mode === 'dark'
+    const darkbox = isDark ? 'darkbox' : ''
 
     return (
       <div className='app' id='app'>
-        <PageHeader collapse />
-        <div className='at-container row'>
-          <div className='at-sidebar col-sm-24 col-md-6 col-lg-4'>
-            <Sidebar data={data} />
+        <PageHeader collapse themeMode handleMode={this.changeMode.bind(this)} />
+        <div className={classnames('at-container row', { darkbox })}>
+          <div className={classnames('at-sidebar col-sm-24 col-md-6 col-lg-4', { darkbox })}>
+            <Sidebar data={data} mode={mode} />
           </div>
           <div
             ref='atMarkdown'
@@ -119,4 +141,4 @@ class Docs extends React.Component {
   }
 }
 
-export default Docs
+export default Docs
\ No newline at end of file
diff --git a/packages/taro-ui-docs/utils/const.js b/packages/taro-ui-docs/utils/const.js
new file mode 100644
index 000000000..524756580
--- /dev/null
+++ b/packages/taro-ui-docs/utils/const.js
@@ -0,0 +1 @@
+export const DARK_KEY_SINGLE = 'dark-style-docs-20140517' // 暗黑模式的key
\ No newline at end of file

From 6ef23e372c0bcff3f80ca6a612fe8c7ac47bded3 Mon Sep 17 00:00:00 2001
From: mhpei <mhpei@gaojihealth.com>
Date: Fri, 17 May 2024 17:28:17 +0800
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=9A=97=E5=A4=9C=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/taro-ui-docs/components/sidebar/style.scss | 1 -
 packages/taro-ui-docs/lib/default.scss              | 4 ++--
 packages/taro-ui-docs/pages/docs.jsx                | 9 ++++-----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/taro-ui-docs/components/sidebar/style.scss b/packages/taro-ui-docs/components/sidebar/style.scss
index 5a4b400b9..590be6dfb 100644
--- a/packages/taro-ui-docs/components/sidebar/style.scss
+++ b/packages/taro-ui-docs/components/sidebar/style.scss
@@ -14,7 +14,6 @@
 }
 
 .darkbox {
-  // background-color: #434242;
   background-color: #23272f;
 }
 
diff --git a/packages/taro-ui-docs/lib/default.scss b/packages/taro-ui-docs/lib/default.scss
index b22e444a3..198ef97d4 100644
--- a/packages/taro-ui-docs/lib/default.scss
+++ b/packages/taro-ui-docs/lib/default.scss
@@ -91,14 +91,14 @@ $black-100                  : #C0C6CE;
 $black-200                  : #96A0AD;
 $black-300                  : #6B798C;
 $black-400                  : #4C5D73;
-$black-500                  : #5a2c36;
+$black-500                  : #2C405A;;
 $black-600                  : #273A52;
 $black-700                  : #213248;
 $black-800                  : #1B2A3F;
 $black-900                  : #101C2E;
 
 $text-color                 : #3F536E;
-$title-color                : #5a2c45;
+$title-color                : #2C405A;;
 
 $border-color-gray          : #CCC;
 $border-color-base          : #C5D9E8;
diff --git a/packages/taro-ui-docs/pages/docs.jsx b/packages/taro-ui-docs/pages/docs.jsx
index 68e1a2a70..f45a6031d 100644
--- a/packages/taro-ui-docs/pages/docs.jsx
+++ b/packages/taro-ui-docs/pages/docs.jsx
@@ -29,9 +29,9 @@ class Docs extends React.Component {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    // if (nextProps.location.pathname !== this.props.location.pathname) {
-    //   this.refs.atMarkdown.scrollTo(0, 0)
-    // }
+    if (nextProps.location.pathname !== this.props.location.pathname) {
+      this.refs.atMarkdown.scrollTo(0, 0)
+    }
   }
 
   changeMode() {
@@ -47,8 +47,7 @@ class Docs extends React.Component {
   render() {
     const data = navsConfig.components
     const { fixed, mode } = this.state
-    // const pathname = this.props.location.pathname
-    const pathname = '/docs/introduction'
+    const pathname = this.props.location.pathname
     const reg = /\/\S+\/(\S+)/
     const result = pathname.match(reg)
     const curDemoPath = pathMap[result[1]] || ''

From 29cda273355024491dc1d100f4ef8bf8c5421091 Mon Sep 17 00:00:00 2001
From: robin <robin@rnode.me>
Date: Sun, 19 May 2024 23:08:15 +0800
Subject: [PATCH 3/5] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E4=BE=9D?=
 =?UTF-8?q?=E8=B5=96=E5=8C=85=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/taro-ui-docs/package.json |   1 +
 pnpm-lock.yaml                     | 271 ++++++++++++++++++++++++++---
 2 files changed, 247 insertions(+), 25 deletions(-)

diff --git a/packages/taro-ui-docs/package.json b/packages/taro-ui-docs/package.json
index 69faa93c1..b8278c41c 100644
--- a/packages/taro-ui-docs/package.json
+++ b/packages/taro-ui-docs/package.json
@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "@types/classnames": "^2.2.10",
+    "@types/react-router-dom": "5.1.5",
     "@types/webpack-env": "^1.15.1",
     "babel-loader": "^8.1.0",
     "chalk": "^4.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6be86f9ce..fe7164d43 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 overrides:
   sharp: ^0.28.3
 
@@ -139,8 +143,7 @@ importers:
         version: 3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0)
       '@tarojs/taro-rn':
         specifier: '>=3'
-        version: >-
-          3.6.6(@babel/core@7.22.11)(@babel/preset-env@7.22.14)(@bam.tech/react-native-image-resizer@3.0.7)(@react-native-async-storage/async-storage@1.17.12)(@react-native-camera-roll/camera-roll@5.0.4)(@react-native-clipboard/clipboard@1.11.2)(@react-native-community/geolocation@3.0.6)(@react-native-community/netinfo@9.3.11)(@react-native-community/segmented-control@2.2.2)(@react-native-community/slider@4.3.3)(@react-native-masked-view/masked-view@0.2.9)(@react-native-picker/picker@2.4.10)(expo-av@13.0.3)(expo-barcode-scanner@12.0.0)(expo-brightness@11.0.1)(expo-camera@13.0.0)(expo-file-system@15.1.1)(expo-image-picker@14.0.3)(expo-keep-awake@11.0.1)(expo-location@15.0.1)(expo-sensors@12.0.1)(expo@47.0.14)(react-native-device-info@10.3.1)(react-native-gesture-handler@2.9.0)(react-native-pager-view@6.0.2)(react-native-safe-area-context@4.4.1)(react-native-screens@3.25.0)(react-native-svg@13.7.0)(react-native-syan-image-picker@0.5.3)(react-native-webview@11.23.1)(react-native@0.71.6)(react@18.2.0)
+        version: 3.6.6(@babel/core@7.22.11)(@babel/preset-env@7.22.14)(@bam.tech/react-native-image-resizer@3.0.7)(@react-native-async-storage/async-storage@1.17.12)(@react-native-camera-roll/camera-roll@5.0.4)(@react-native-clipboard/clipboard@1.11.2)(@react-native-community/geolocation@3.0.6)(@react-native-community/netinfo@9.3.11)(@react-native-community/segmented-control@2.2.2)(@react-native-community/slider@4.3.3)(@react-native-masked-view/masked-view@0.2.9)(@react-native-picker/picker@2.4.10)(expo-av@13.0.3)(expo-barcode-scanner@12.0.0)(expo-brightness@11.0.1)(expo-camera@13.0.0)(expo-file-system@15.1.1)(expo-image-picker@14.0.3)(expo-keep-awake@11.0.1)(expo-location@15.0.1)(expo-sensors@12.0.1)(expo@47.0.14)(react-native-device-info@10.3.1)(react-native-gesture-handler@2.9.0)(react-native-pager-view@6.0.2)(react-native-safe-area-context@4.4.1)(react-native-screens@3.25.0)(react-native-svg@13.7.0)(react-native-syan-image-picker@0.5.3)(react-native-webview@11.23.1)(react-native@0.71.6)(react@18.2.0)
       classnames:
         specifier: ^2.2.6
         version: 2.2.6
@@ -225,7 +228,7 @@ importers:
         version: 7.7.7
       '@tarojs/components':
         specifier: 3.6.6
-        version: 3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0)
+        version: 3.6.6(@types/react@18.2.21)(react@18.2.0)
       '@tarojs/helper':
         specifier: 3.6.6
         version: 3.6.6
@@ -234,25 +237,25 @@ importers:
         version: 3.6.6(@pmmmwh/react-refresh-webpack-plugin@0.5.5)(@types/react@18.2.21)(react-refresh@0.11.0)(react@18.2.0)
       '@tarojs/plugin-platform-alipay':
         specifier: 3.6.6
-        version: 3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0)
+        version: 3.6.6(@types/react@18.2.21)
       '@tarojs/plugin-platform-h5':
         specifier: 3.6.6
-        version: 3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0)
+        version: 3.6.6(@types/react@18.2.21)
       '@tarojs/plugin-platform-jd':
         specifier: 3.6.6
         version: 3.6.6(@types/react@18.2.21)
       '@tarojs/plugin-platform-qq':
         specifier: 3.6.6
-        version: 3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0)
+        version: 3.6.6(@types/react@18.2.21)
       '@tarojs/plugin-platform-swan':
         specifier: 3.6.6
-        version: 3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0)
+        version: 3.6.6(@types/react@18.2.21)
       '@tarojs/plugin-platform-tt':
         specifier: 3.6.6
-        version: 3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0)
+        version: 3.6.6(@types/react@18.2.21)
       '@tarojs/plugin-platform-weapp':
         specifier: 3.6.6
-        version: 3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0)
+        version: 3.6.6(@types/react@18.2.21)
       '@tarojs/react':
         specifier: 3.6.6
         version: 3.6.6(react@18.2.0)
@@ -331,7 +334,7 @@ importers:
         version: 7.7.7
       '@tarojs/components':
         specifier: 3.6.6
-        version: 3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0)
+        version: 3.6.6(@types/react@18.2.21)(react@18.2.0)
       '@tarojs/plugin-framework-react':
         specifier: 3.6.6
         version: 3.6.6(@pmmmwh/react-refresh-webpack-plugin@0.5.5)(@types/react@18.2.21)(react-refresh@0.11.0)(react@18.2.0)
@@ -349,8 +352,7 @@ importers:
         version: 3.6.6(@types/react@18.2.21)
       '@tarojs/taro-rn':
         specifier: 3.6.6
-        version: >-
-          3.6.6(@babel/core@7.22.11)(@babel/preset-env@7.22.14)(@bam.tech/react-native-image-resizer@3.0.7)(@react-native-async-storage/async-storage@1.17.12)(@react-native-camera-roll/camera-roll@5.0.4)(@react-native-clipboard/clipboard@1.11.2)(@react-native-community/geolocation@3.0.6)(@react-native-community/netinfo@9.3.11)(@react-native-community/segmented-control@2.2.2)(@react-native-community/slider@4.3.3)(@react-native-masked-view/masked-view@0.2.9)(@react-native-picker/picker@1.15.0)(expo-av@13.0.3)(expo-barcode-scanner@12.0.0)(expo-brightness@11.0.1)(expo-camera@13.0.0)(expo-file-system@15.1.1)(expo-image-picker@14.0.3)(expo-keep-awake@11.0.1)(expo-location@15.0.1)(expo-sensors@12.0.1)(expo@48.0.0)(react-native-device-info@10.3.1)(react-native-gesture-handler@2.9.0)(react-native-pager-view@6.0.2)(react-native-safe-area-context@4.4.1)(react-native-screens@3.25.0)(react-native-svg@13.8.0)(react-native-syan-image-picker@0.5.3)(react-native-webview@11.23.1)(react-native@0.71.6)(react@18.2.0)
+        version: 3.6.6(@babel/core@7.22.11)(@babel/preset-env@7.22.14)(@bam.tech/react-native-image-resizer@3.0.7)(@react-native-async-storage/async-storage@1.17.12)(@react-native-camera-roll/camera-roll@5.0.4)(@react-native-clipboard/clipboard@1.11.2)(@react-native-community/geolocation@3.0.6)(@react-native-community/netinfo@9.3.11)(@react-native-community/segmented-control@2.2.2)(@react-native-community/slider@4.3.3)(@react-native-masked-view/masked-view@0.2.9)(@react-native-picker/picker@1.15.0)(expo-av@13.0.3)(expo-barcode-scanner@12.0.0)(expo-brightness@11.0.1)(expo-camera@13.0.0)(expo-file-system@15.1.1)(expo-image-picker@14.0.3)(expo-keep-awake@11.0.1)(expo-location@15.0.1)(expo-sensors@12.0.1)(expo@48.0.0)(react-native-device-info@10.3.1)(react-native-gesture-handler@2.9.0)(react-native-pager-view@6.0.2)(react-native-safe-area-context@4.4.1)(react-native-screens@3.25.0)(react-native-svg@13.8.0)(react-native-syan-image-picker@0.5.3)(react-native-webview@11.23.1)(react-native@0.71.6)(react@18.2.0)
       classnames:
         specifier: ^2.2.6
         version: 2.2.6
@@ -440,6 +442,9 @@ importers:
       '@types/classnames':
         specifier: ^2.2.10
         version: 2.2.10
+      '@types/react-router-dom':
+        specifier: 5.1.5
+        version: 5.1.5
       '@types/webpack-env':
         specifier: ^1.15.1
         version: 1.15.1
@@ -4214,6 +4219,7 @@ packages:
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     optional: true
 
@@ -4222,6 +4228,7 @@ packages:
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     optional: true
 
@@ -4230,6 +4237,7 @@ packages:
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     optional: true
 
@@ -4238,6 +4246,7 @@ packages:
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     optional: true
 
@@ -4368,6 +4377,30 @@ packages:
       - '@types/webpack'
       - '@types/webpack-dev-server'
 
+  /@tarojs/components-advanced@3.6.6(@types/react@18.2.21)(react@18.2.0):
+    resolution: {integrity: sha512-cAJniZi8iB3d1VinqQ8qrLHc4jo7DmLZQsDnM5qdtn0wS4zdv+mhGw9gl3NscGCe2xhnmLwI1M1sy0K4an8a7w==}
+    peerDependencies:
+      react: '>=17'
+      vue: '*'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      '@tarojs/components': 3.6.6(@types/react@18.2.21)(react@18.2.0)
+      '@tarojs/runtime': 3.6.6
+      '@tarojs/shared': 3.6.6
+      '@tarojs/taro': 3.6.6(@types/react@18.2.21)
+      memoize-one: 6.0.0
+      postcss: 8.4.31
+      react: 18.2.0
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-native'
+      - '@types/webpack'
+      - '@types/webpack-dev-server'
+
   /@tarojs/components-react@3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0):
     resolution: {integrity: sha512-FZh6VBFaqaHsuphTiTmmQ70K7/mvXqB7teL1IDn1sniDwMwLLXZRvWojcdxkE1nGPtD+gPmdhZEPWHMUNYpung==}
     dependencies:
@@ -4388,6 +4421,25 @@ packages:
       - vue
     dev: false
 
+  /@tarojs/components-react@3.6.6(@types/react@18.2.21):
+    resolution: {integrity: sha512-FZh6VBFaqaHsuphTiTmmQ70K7/mvXqB7teL1IDn1sniDwMwLLXZRvWojcdxkE1nGPtD+gPmdhZEPWHMUNYpung==}
+    dependencies:
+      '@babel/runtime': 7.22.11
+      '@tarojs/components': 3.6.6(@types/react@18.2.21)(react@18.2.0)
+      '@tarojs/taro': 3.6.6(@types/react@18.2.21)
+      classnames: 2.2.6
+      intersection-observer: 0.7.0
+      resolve-pathname: 3.0.0
+      swiper: 6.8.0
+      weui: 1.1.3
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-native'
+      - '@types/webpack'
+      - '@types/webpack-dev-server'
+      - vue
+    dev: false
+
   /@tarojs/components-rn@3.6.6(@babel/preset-env@7.22.14)(@react-native-camera-roll/camera-roll@5.0.4)(@react-native-community/segmented-control@2.2.2)(@react-native-community/slider@4.3.3)(@react-native-masked-view/masked-view@0.2.9)(@react-native-picker/picker@1.15.0)(expo-av@13.0.3)(expo-barcode-scanner@12.0.0)(expo-camera@13.0.0)(expo@48.0.0)(react-native-gesture-handler@2.9.0)(react-native-pager-view@6.0.2)(react-native-safe-area-context@4.4.1)(react-native-screens@3.25.0)(react-native-svg@13.8.0)(react-native-webview@11.23.1)(react-native@0.71.6)(react@18.2.0):
     resolution: {integrity: sha512-bQmtQgAnxWfXWuIsymcEa/9aflAaq+jXB+h23WOIm6NRMxRBIT/6G0ZAz8BK6NrCkICHX0MkPJvLgh/8RboPJg==}
     peerDependencies:
@@ -4498,6 +4550,36 @@ packages:
       - '@types/webpack-dev-server'
       - react
 
+  /@tarojs/components@3.6.6(@types/react@18.2.21)(react@18.2.0):
+    resolution: {integrity: sha512-GWxFtKeiTNajkIyNjyrkEyvrtqOIcrdWSF46A5pCbtmpjdsloN6NX9ms4fwvSjoyci8VZ+sBimnviIqTpBfL+w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-native': '*'
+      vue: '*'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-native':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      '@stencil/core': 2.22.3
+      '@tarojs/components-advanced': 3.6.6(@types/react@18.2.21)(react@18.2.0)
+      '@tarojs/router': 3.6.6(@types/react@18.2.21)
+      '@tarojs/taro': 3.6.6(@types/react@18.2.21)
+      '@types/react': 18.2.21
+      classnames: 2.2.6
+      hls.js: 1.4.10
+      intersection-observer: 0.7.0
+      resolve-pathname: 3.0.0
+      swiper: 6.8.0
+      weui: 1.1.3
+    transitivePeerDependencies:
+      - '@types/webpack'
+      - '@types/webpack-dev-server'
+      - react
+
   /@tarojs/helper@3.6.6:
     resolution: {integrity: sha512-feY1z2rqV+5g8ZBagcOcjbI0P7jq9gIFW8664MXc5iFNxgUbU2w8eNbwRv9zAb1/U9cZoWxx+QGSw4xyTKy/6A==}
     dependencies:
@@ -4535,14 +4617,14 @@ packages:
       postcss: ^8.4.18
     dependencies:
       '@babel/core': 7.22.11
-      '@tarojs/components': 3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0)
+      '@tarojs/components': 3.6.6(@types/react@18.2.21)(react@18.2.0)
       '@tarojs/helper': 3.6.6
-      '@tarojs/plugin-platform-alipay': 3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0)
+      '@tarojs/plugin-platform-alipay': 3.6.6(@types/react@18.2.21)
       '@tarojs/plugin-platform-jd': 3.6.6(@types/react@18.2.21)
-      '@tarojs/plugin-platform-qq': 3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0)
-      '@tarojs/plugin-platform-swan': 3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0)
-      '@tarojs/plugin-platform-tt': 3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0)
-      '@tarojs/plugin-platform-weapp': 3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0)
+      '@tarojs/plugin-platform-qq': 3.6.6(@types/react@18.2.21)
+      '@tarojs/plugin-platform-swan': 3.6.6(@types/react@18.2.21)
+      '@tarojs/plugin-platform-tt': 3.6.6(@types/react@18.2.21)
+      '@tarojs/plugin-platform-weapp': 3.6.6(@types/react@18.2.21)
       '@tarojs/runner-utils': 3.6.6
       '@tarojs/runtime': 3.6.6
       '@tarojs/shared': 3.6.6
@@ -4661,6 +4743,21 @@ packages:
       - react
       - supports-color
       - vue
+    dev: false
+
+  /@tarojs/plugin-platform-alipay@3.6.6(@types/react@18.2.21):
+    resolution: {integrity: sha512-65SFA8Vmlwf5ZflI+jXN3W2nrh2NYM3GRAjOcZDIPE+6Je33Bi/7jNaTn3t+YwJlcVjY6djp3/dmC+xwc7skfA==}
+    dependencies:
+      '@tarojs/components': 3.6.6(@types/react@18.2.21)(react@18.2.0)
+      '@tarojs/service': 3.6.6(@types/react@18.2.21)
+      '@tarojs/shared': 3.6.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-native'
+      - '@types/webpack'
+      - '@types/webpack-dev-server'
+      - supports-color
+      - vue
 
   /@tarojs/plugin-platform-h5@3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0):
     resolution: {integrity: sha512-NVn9an5hcdWAtqylDirbCHBGdwEhk0VYOzspeubemNLQ/lGLkJHU50CfOF42RBZA1sAfwwh6JB1LNILMdtCaPA==}
@@ -4683,6 +4780,26 @@ packages:
       - vue
     dev: false
 
+  /@tarojs/plugin-platform-h5@3.6.6(@types/react@18.2.21):
+    resolution: {integrity: sha512-NVn9an5hcdWAtqylDirbCHBGdwEhk0VYOzspeubemNLQ/lGLkJHU50CfOF42RBZA1sAfwwh6JB1LNILMdtCaPA==}
+    dependencies:
+      '@tarojs/components': 3.6.6(@types/react@18.2.21)(react@18.2.0)
+      '@tarojs/components-react': 3.6.6(@types/react@18.2.21)
+      '@tarojs/router': 3.6.6(@types/react@18.2.21)
+      '@tarojs/service': 3.6.6(@types/react@18.2.21)
+      '@tarojs/shared': 3.6.6
+      '@tarojs/taro-h5': 3.6.6(@types/react@18.2.21)
+      babel-plugin-transform-taroapi: 3.6.6
+      resolve: 1.22.4
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-native'
+      - '@types/webpack'
+      - '@types/webpack-dev-server'
+      - supports-color
+      - vue
+    dev: false
+
   /@tarojs/plugin-platform-jd@3.6.6(@types/react@18.2.21):
     resolution: {integrity: sha512-AlMmnENciAVhI0/tRZsE5sRThVJ1ESR8oxy974XcAeS3K0DhQhAHVNJ9bVm534RZjGhJ05YGARFtQqJZnNfV3g==}
     dependencies:
@@ -4709,6 +4826,21 @@ packages:
       - react
       - supports-color
       - vue
+    dev: false
+
+  /@tarojs/plugin-platform-qq@3.6.6(@types/react@18.2.21):
+    resolution: {integrity: sha512-GPLUNeduZMG7wFmPZspfVTc2oSv9zlanKjJn/7uUDPA3HKIbflcVehkPn2Cq28BuvSvY8q3oqFUPMGvKP7jHnw==}
+    dependencies:
+      '@tarojs/plugin-platform-weapp': 3.6.6(@types/react@18.2.21)
+      '@tarojs/service': 3.6.6(@types/react@18.2.21)
+      '@tarojs/shared': 3.6.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-native'
+      - '@types/webpack'
+      - '@types/webpack-dev-server'
+      - supports-color
+      - vue
 
   /@tarojs/plugin-platform-swan@3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0):
     resolution: {integrity: sha512-ISylMI0/7cZ7S/nKwDvkKke76h2m+TtcCqrhvmm4Fo/RyFdxPtZu/wtJ62WSw39dcU5Jec6UuP/YqsMGYEqcWw==}
@@ -4724,6 +4856,21 @@ packages:
       - react
       - supports-color
       - vue
+    dev: false
+
+  /@tarojs/plugin-platform-swan@3.6.6(@types/react@18.2.21):
+    resolution: {integrity: sha512-ISylMI0/7cZ7S/nKwDvkKke76h2m+TtcCqrhvmm4Fo/RyFdxPtZu/wtJ62WSw39dcU5Jec6UuP/YqsMGYEqcWw==}
+    dependencies:
+      '@tarojs/components': 3.6.6(@types/react@18.2.21)(react@18.2.0)
+      '@tarojs/service': 3.6.6(@types/react@18.2.21)
+      '@tarojs/shared': 3.6.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-native'
+      - '@types/webpack'
+      - '@types/webpack-dev-server'
+      - supports-color
+      - vue
 
   /@tarojs/plugin-platform-tt@3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0):
     resolution: {integrity: sha512-NgHSRX9tejcQQm3ATc4zaG6mtHYr1c7udhaaFrHxCZJeLqsWWlw7f06FIpghKdbhmKCUcqXUgtbQOwdcvb9P1Q==}
@@ -4739,6 +4886,21 @@ packages:
       - react
       - supports-color
       - vue
+    dev: false
+
+  /@tarojs/plugin-platform-tt@3.6.6(@types/react@18.2.21):
+    resolution: {integrity: sha512-NgHSRX9tejcQQm3ATc4zaG6mtHYr1c7udhaaFrHxCZJeLqsWWlw7f06FIpghKdbhmKCUcqXUgtbQOwdcvb9P1Q==}
+    dependencies:
+      '@tarojs/components': 3.6.6(@types/react@18.2.21)(react@18.2.0)
+      '@tarojs/service': 3.6.6(@types/react@18.2.21)
+      '@tarojs/shared': 3.6.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-native'
+      - '@types/webpack'
+      - '@types/webpack-dev-server'
+      - supports-color
+      - vue
 
   /@tarojs/plugin-platform-weapp@3.6.6(@types/react-native@0.64.13)(@types/react@18.2.21)(react@18.2.0):
     resolution: {integrity: sha512-/feSsGVeXlcuruuSamUvDz/CzttN0E/ziXLjJ6ldBYW7Mscfb1Ro+HnM26eaCGWrJTee4WRvvYerr7Nn6m+PbQ==}
@@ -4754,6 +4916,21 @@ packages:
       - react
       - supports-color
       - vue
+    dev: false
+
+  /@tarojs/plugin-platform-weapp@3.6.6(@types/react@18.2.21):
+    resolution: {integrity: sha512-/feSsGVeXlcuruuSamUvDz/CzttN0E/ziXLjJ6ldBYW7Mscfb1Ro+HnM26eaCGWrJTee4WRvvYerr7Nn6m+PbQ==}
+    dependencies:
+      '@tarojs/components': 3.6.6(@types/react@18.2.21)(react@18.2.0)
+      '@tarojs/service': 3.6.6(@types/react@18.2.21)
+      '@tarojs/shared': 3.6.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-native'
+      - '@types/webpack'
+      - '@types/webpack-dev-server'
+      - supports-color
+      - vue
 
   /@tarojs/react@3.6.6(react@18.2.0):
     resolution: {integrity: sha512-FX+hXFmIdwfiRBSTYcWyjRA4T6hjybIu0FZ43HZfddZhVbzYWvED4nv6NI5CJhh+PRhpjMc2JsH3RyXiitMVXA==}
@@ -5020,6 +5197,28 @@ packages:
       - vue
     dev: false
 
+  /@tarojs/taro-h5@3.6.6(@types/react@18.2.21):
+    resolution: {integrity: sha512-Ze4HzJV9GoY9epB0eIrFzLAkQyh3XH8ZgJcGpo0kC3BUxtDZqS14ca6ZS/H0KOsOIFwdhb4VO7An15YofLEDMw==}
+    dependencies:
+      '@tarojs/api': 3.6.6
+      '@tarojs/components': 3.6.6(@types/react@18.2.21)(react@18.2.0)
+      '@tarojs/router': 3.6.6(@types/react@18.2.21)
+      '@tarojs/runtime': 3.6.6
+      '@tarojs/shared': 3.6.6
+      abortcontroller-polyfill: 1.7.5
+      base64-js: 1.5.1
+      intersection-observer: 0.7.0
+      jsonp-retry: 1.0.3
+      query-string: 7.1.3
+      whatwg-fetch: 3.6.18
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-native'
+      - '@types/webpack'
+      - '@types/webpack-dev-server'
+      - vue
+    dev: false
+
   /@tarojs/taro-loader@3.6.6(@types/react@18.2.21):
     resolution: {integrity: sha512-FH/vBfvUV8sYfrBV1nnxtpZ628XaYAiieiUkCYBIaTL//XLuwiqlDJ8+mC07vMzKlLnpLG7aOKBbHaOHhadzbw==}
     dependencies:
@@ -5325,6 +5524,17 @@ packages:
   /@types/hammerjs@2.0.41:
     resolution: {integrity: sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==}
 
+  /@types/history@4.7.11:
+    resolution: {integrity: sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==}
+    dev: true
+
+  /@types/history@5.0.0:
+    resolution: {integrity: sha512-hy8b7Y1J8OGe6LbAjj3xniQrj3v6lsivCcrmf4TzSgPzLkhIeKgc5IZnT7ReIqmEuodjfO8EYAuoFvIrHi/+jQ==}
+    deprecated: This is a stub types definition. history provides its own type definitions, so you do not need this installed.
+    dependencies:
+      history: 5.3.0
+    dev: true
+
   /@types/html-minifier-terser@5.1.2:
     resolution: {integrity: sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w==}
     dev: true
@@ -5426,6 +5636,21 @@ packages:
     dependencies:
       '@types/react': 18.2.21
 
+  /@types/react-router-dom@5.1.5:
+    resolution: {integrity: sha512-ArBM4B1g3BWLGbaGvwBGO75GNFbLDUthrDojV2vHLih/Tq8M+tgvY1DSwkuNrPSwdp/GUL93WSEpTZs8nVyJLw==}
+    dependencies:
+      '@types/history': 5.0.0
+      '@types/react': 18.2.21
+      '@types/react-router': 5.1.20
+    dev: true
+
+  /@types/react-router@5.1.20:
+    resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
+    dependencies:
+      '@types/history': 4.7.11
+      '@types/react': 18.2.21
+    dev: true
+
   /@types/react@18.2.21:
     resolution: {integrity: sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==}
     dependencies:
@@ -14951,8 +15176,8 @@ packages:
     resolution: {integrity: sha512-tE0zjq+3bFEgUROzCjXTdtLY+FmqiTX4kZWXc8bCC7M9wSHCriBz+ga1E2i1PcI+DQJoz2cyK8Cv2exJv6XEzA==}
     dev: true
 
-  /miniprogram-compiler@0.2.2:
-    resolution: {integrity: sha512-fiJXv/15jCcRAU8YKcO7S7fkPKLa5ZBgpLN+d6B3r3KMktM5tAkDEQ+zm6aTfNoHurYOHcRyPyGf26gqQXlFXg==}
+  /miniprogram-compiler@0.2.3:
+    resolution: {integrity: sha512-/MfFiXTBUwYxnrTbj1hgwk1+qGkMCTL1zi8IReOq/0SPVkUxpx19E89w+ohYCELFXkMfVbD+6ejrHh3Y1u5sVg==}
     dependencies:
       glob: 7.2.3
       unescape-js: 1.1.4
@@ -14968,7 +15193,7 @@ packages:
       csso: 3.5.1
       j-component: 1.4.9
       less: 3.13.1
-      miniprogram-compiler: 0.2.2
+      miniprogram-compiler: 0.2.3
       postcss: 7.0.39
     dev: true
 
@@ -21052,7 +21277,3 @@ packages:
   /yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false

From 0c34a1e22f350b2c1b7d5e576ca8288af147337a Mon Sep 17 00:00:00 2001
From: robin <robin@rnode.me>
Date: Sun, 19 May 2024 23:12:19 +0800
Subject: [PATCH 4/5] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0react-router-dom?=
 =?UTF-8?q?=E4=BE=9D=E8=B5=96=E7=89=88=E6=9C=AC=E8=87=B35.3.4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/taro-ui-docs/package.json |  2 +-
 pnpm-lock.yaml                     | 28 +++++++---------------------
 2 files changed, 8 insertions(+), 22 deletions(-)

diff --git a/packages/taro-ui-docs/package.json b/packages/taro-ui-docs/package.json
index b8278c41c..df2256276 100644
--- a/packages/taro-ui-docs/package.json
+++ b/packages/taro-ui-docs/package.json
@@ -28,7 +28,7 @@
     "copy-to-clipboard": "^3.3.1",
     "highlight.js": "^10.7.2",
     "qrcode.react": "^1.0.0",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^5.3.4",
     "regenerator-runtime": "^0.13.5",
     "taro-ui-demo": "workspace:^"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fe7164d43..553cada50 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -430,8 +430,8 @@ importers:
         specifier: ^1.0.0
         version: 1.0.0(react@16.14.0)
       react-router-dom:
-        specifier: ^5.1.2
-        version: 5.1.2(react@16.14.0)
+        specifier: ^5.3.4
+        version: 5.3.4(react@16.14.0)
       regenerator-runtime:
         specifier: ^0.13.5
         version: 0.13.5
@@ -15066,19 +15066,6 @@ packages:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
 
-  /mini-create-react-context@0.3.3(prop-types@15.8.1)(react@16.14.0):
-    resolution: {integrity: sha512-TtF6hZE59SGmS4U8529qB+jJFeW6asTLDIpPgvPLSCsooAwJS7QprHIFTqv9/Qh3NdLwQxFYgiHX5lqb6jqzPA==}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
-    peerDependencies:
-      prop-types: ^15.0.0
-      react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
-    dependencies:
-      '@babel/runtime': 7.22.11
-      prop-types: 15.8.1
-      react: 16.14.0
-      tiny-warning: 1.0.3
-    dev: false
-
   /mini-css-extract-plugin@0.9.0(webpack@4.46.0):
     resolution: {integrity: sha512-lp3GeY7ygcgAmVIcRPBVhIkf8Us7FZjA+ILpal44qLdSu11wmjKQ3d9k15lfD7pO4esu9eUIAW7qiYIBppv40A==}
     engines: {node: '>= 6.9.0'}
@@ -17431,8 +17418,8 @@ packages:
     resolution: {integrity: sha512-Hwln1VNuGl/6bVwnd0Xdn1e84gT/8T9aYNL+HAKDArLCS7LWjwr7StE30IEYbIkx0Vi3vs+coQxe+SQDbGbbpA==}
     engines: {node: '>=0.10.0'}
 
-  /react-router-dom@5.1.2(react@16.14.0):
-    resolution: {integrity: sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==}
+  /react-router-dom@5.3.4(react@16.14.0):
+    resolution: {integrity: sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==}
     peerDependencies:
       react: '>=15'
     dependencies:
@@ -17441,13 +17428,13 @@ packages:
       loose-envify: 1.4.0
       prop-types: 15.8.1
       react: 16.14.0
-      react-router: 5.1.2(react@16.14.0)
+      react-router: 5.3.4(react@16.14.0)
       tiny-invariant: 1.3.1
       tiny-warning: 1.0.3
     dev: false
 
-  /react-router@5.1.2(react@16.14.0):
-    resolution: {integrity: sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==}
+  /react-router@5.3.4(react@16.14.0):
+    resolution: {integrity: sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==}
     peerDependencies:
       react: '>=15'
     dependencies:
@@ -17455,7 +17442,6 @@ packages:
       history: 4.10.1
       hoist-non-react-statics: 3.3.2
       loose-envify: 1.4.0
-      mini-create-react-context: 0.3.3(prop-types@15.8.1)(react@16.14.0)
       path-to-regexp: 1.8.0
       prop-types: 15.8.1
       react: 16.14.0

From 3bc264263850c2dbb7c2db8d1df592f398dcf608 Mon Sep 17 00:00:00 2001
From: robin <robin@rnode.me>
Date: Sun, 19 May 2024 23:13:17 +0800
Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20pathname=20?=
 =?UTF-8?q?=E4=B8=8D=E5=AD=98=E5=9C=A8=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/taro-ui-docs/app.jsx                | 35 +++++++++++++-------
 packages/taro-ui-docs/assets/style/docs.scss |  3 ++
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/taro-ui-docs/app.jsx b/packages/taro-ui-docs/app.jsx
index a74b87c43..5d08bbe44 100644
--- a/packages/taro-ui-docs/app.jsx
+++ b/packages/taro-ui-docs/app.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { HashRouter as Router, Switch, Route } from 'react-router-dom'
+import { HashRouter as Router, Route, Switch } from 'react-router-dom'
 
 import 'at-ui-style'
 
@@ -13,14 +13,14 @@ class App extends React.Component {
     super(...args)
     this.state = {
       visible: false,
-      mode: 'light',
+      mode: 'light'
     }
   }
   componentDidMount() {
     const _mode = localStorage.getItem('mode')
     this.setState({
       visible: true,
-      mode: _mode || 'light',
+      mode: _mode || 'light'
     })
   }
 
@@ -31,29 +31,40 @@ class App extends React.Component {
   handleMode() {
     const _mode = this.state.mode
     const modeVal = _mode === 'light' ? 'dark' : 'light'
-    this.setState({
-      mode: modeVal
-    }, () => {
-      localStorage.setItem('mode', modeVal)
-    })
+    this.setState(
+      {
+        mode: modeVal
+      },
+      () => {
+        localStorage.setItem('mode', modeVal)
+      }
+    )
   }
 
   render() {
     const { mode } = this.state
 
     return (
-      <div className='wrapper' style={{ backgroundColor: mode === 'light' ? '#F8FAFF' : '#434242' }}>
+      <div
+        className='wrapper'
+        style={{ backgroundColor: mode === 'light' ? '#F8FAFF' : '#434242' }}
+      >
         <Switch>
           <Route path='/' exact component={Index} />
-          <Route path='/docs' render={() => <Docs handleMode={this.handleMode.bind(this)} />} />
+          <Route
+            path='/docs'
+            render={props => (
+              <Docs {...props} handleMode={this.handleMode.bind(this)} />
+            )}
+          />
           <Route path='/guide' component={Guide} />
         </Switch>
       </div>
     )
   }
 }
-const container = document.getElementById('container');
-const root = createRoot(container);
+const container = document.getElementById('container')
+const root = createRoot(container)
 root.render(
   <Router>
     <App />
diff --git a/packages/taro-ui-docs/assets/style/docs.scss b/packages/taro-ui-docs/assets/style/docs.scss
index df0258840..ff18dfcdc 100644
--- a/packages/taro-ui-docs/assets/style/docs.scss
+++ b/packages/taro-ui-docs/assets/style/docs.scss
@@ -56,6 +56,9 @@ $drop-shadow: 0 4px 30px 0 rgba(223, 225, 230, 0.5);
 
 .darkbox {
   background-color: #23272f;
+  &.at-container {
+    box-shadow: none;
+  }
 }
 
 /**