更新文档

docs/assets/js/component.js

@@ -1,15 +1,4 @@
 // 使用 mkdocs-material 与第三方 JavaScript 库集成的方法
 document$.subscribe(function () {
-    // 重新初始化组件
     ComponentSystem.reinitializeAll()
-    // 延迟初始化以确保DOM完全渲染
-    setTimeout(() => {
-        ComponentSystem.initAll()
-    }, 300)
-})
-
-// 首次加载事件
-window.addEventListener('load', function () {
-    // 初始化所有组件
-    ComponentSystem.initAll()
 })

docs/assets/js/useThemeTransition.js

@@ -0,0 +1,90 @@
+function useThemeTransition() {
+    // 更新过渡样式变量
+    function updateViewTransitionVariables(isDarkTheme) {
+        document.documentElement.style.setProperty('--view-transition-z-index-foreground', isDarkTheme ? '999' : '1')
+        document.documentElement.style.setProperty('--view-transition-z-index-background', isDarkTheme ? '1' : '999')
+    }
+    // 切换主题按钮点击事件
+    function handleThemeToggle(e) {
+        // 阻止默认点击事件
+        e.preventDefault()
+        e.stopPropagation()
+        // 获取目标输入元素
+        const targetId = this.getAttribute('for')
+        const targetInput = document.getElementById(targetId)
+        if (!targetInput) return
+        // 获取主题状态
+        const targetTheme = targetInput.getAttribute('data-md-color-scheme') // 目标主题（system、default、slate）
+        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'slate' : 'default' // 系统主题（default、slate）
+        const currentScheme = document.body.getAttribute('data-md-color-scheme') // 当前主题（default、slate）
+        // 当目标主题与当前主题相同时不触发动画
+        if (targetTheme === 'system') {
+            if (systemTheme === currentScheme) {
+                targetInput.click()
+                return
+            }
+        } else if (targetTheme === currentScheme) {
+            targetInput.click()
+            return
+        }
+        // 当前主题状态
+        const isSystemDarkTheme = systemTheme === 'slate' // 系统是否为深色主题
+        const isCurrentDarkTheme = currentScheme.includes('slate') // 当前是否为深色主题
+        const isSwitchToDarkTheme = !isCurrentDarkTheme // 是否将切换到深色主题
+        // 根据系统主题设置动画样式
+        updateViewTransitionVariables(isSystemDarkTheme)
+        // 判断切换方向是否与系统主题一致
+        // 如果系统是深色，切换到深色是"靠近系统"；如果系统是浅色，切换到浅色是"靠近系统"
+        const isMovingTowardsSystemTheme = (isSwitchToDarkTheme && isSystemDarkTheme) || (!isSwitchToDarkTheme && !isSystemDarkTheme)
+        // 动画参数
+        const x = e.clientX
+        const y = e.clientY
+        const endRadius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y))
+        const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
+        // 启动视图过渡
+        document
+            .startViewTransition(async () => {
+                // 切换主题
+                targetInput.click()
+                // 添加CSS类用于动画控制
+                document.documentElement.classList.remove(isSwitchToDarkTheme ? 'light' : 'dark')
+                document.documentElement.classList.add(isSwitchToDarkTheme ? 'dark' : 'light')
+                // 等待主题变化完成
+                await new Promise((resolve) => setTimeout(resolve, 100))
+            })
+            .ready.then(() => {
+                // 当朝向系统主题方向变化时使用使用缩小效果（reversed clipPath），反之放大效果（clipPath）
+                document.documentElement.animate(
+                    {
+                        clipPath: isMovingTowardsSystemTheme ? [...clipPath].reverse() : clipPath,
+                        transform: 'translateZ(0)',
+                    },
+                    {
+                        duration: 500,
+                        easing: 'ease-in',
+                        pseudoElement: isMovingTowardsSystemTheme ? '::view-transition-old(root)' : '::view-transition-new(root)',
+                    }
+                )
+            })
+    }
+
+    // 不支持此特性
+    if (typeof document.startViewTransition !== 'function') {
+        return
+    }
+    // 获取主题切换按钮Dom
+    const themeToggles = document.querySelectorAll('form[data-md-component="palette"] .md-header__button.md-icon')
+    themeToggles.forEach((toggle) => {
+        toggle.addEventListener('click', handleThemeToggle, { capture: true })
+    })
+    // 初始化主题状态类
+    const currentScheme = document.body.getAttribute('data-md-color-scheme')
+    const isDark = currentScheme.includes('slate')
+    document.documentElement.classList.add(isDark ? 'dark' : 'light')
+    // 初始化过渡样式变量
+    updateViewTransitionVariables(isDark)
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    useThemeTransition()
+})

docs/stylesheets/extra.css

@@ -4,6 +4,8 @@
     --md-primary-fg-color--light: hsl(0, 0%, 100%, 0.33);
     --md-default-bg-color--light: #ffffff;
     --md-default-bg-color--dark: hsla(var(--md-hue), 15%, 14%, 1);
+    --view-transition-z-index-foreground: 999;
+    --view-transition-z-index-background: 1;
 }
 
 [data-md-color-primary=white] {
@@ -237,20 +239,15 @@
     animation: none;
     mix-blend-mode: normal;
 }
-
 .dark::view-transition-old(root) {
-    z-index: 999;
+    z-index: var(--view-transition-z-index-foreground);
 }
-
 .dark::view-transition-new(root) {
-    z-index: 1;
+    z-index: var(--view-transition-z-index-background);
 }
-
-/* 浅色主题下的设置 */
 ::view-transition-old(root) {
-    z-index: 1;
+    z-index: var(--view-transition-z-index-background)
 }
-
 ::view-transition-new(root) {
-    z-index: 999;
+    z-index: var(--view-transition-z-index-foreground);
 }

docs/theme/partials/palette.html

@@ -1,89 +0,0 @@
-<form class="md-header__option" data-md-component="palette">
-  {% for option in config.theme.palette %} {% set scheme = option.scheme | d("default", true) %} {% set primary = option.primary | d("indigo", true) %} {% set accent = option.accent | d("indigo", true) %}
-  <input class="md-option" data-md-color-media="{{ option.media }}" data-md-color-scheme="{{ scheme | replace(' ', '-') }}" data-md-color-primary="{{ primary | replace(' ', '-') }}" data-md-color-accent="{{ accent | replace(' ', '-') }}" {% if option.toggle %} aria-label="{{ option.toggle.name }}" {% else %} aria-hidden="true" {% endif %} type="radio" name="__palette" id="__palette_{{ loop.index0 }}" />
-  {% if option.toggle %}
-  <label class="md-header__button md-icon" title="{{ option.toggle.name }}" for="__palette_{{ loop.index % loop.length }}" hidden> {% include ".icons/" ~ option.toggle.icon ~ ".svg" %} </label>
-  {% endif %} {% endfor %}
-</form>
-<script>
-  var palette = __md_get('__palette')
-  if (palette && palette.color) {
-      /* Retrieve color palette for system preference */
-      if (palette.color.media === '(prefers-color-scheme)') {
-          var media = matchMedia('(prefers-color-scheme: light)')
-          var input = document.querySelector(media.matches ? "[data-md-color-media='(prefers-color-scheme: light)']" : "[data-md-color-media='(prefers-color-scheme: dark)']")
-          /* Retrieve colors for system preference */
-          ;(palette.color.media = input.getAttribute('data-md-color-media')), (palette.color.scheme = input.getAttribute('data-md-color-scheme')), (palette.color.primary = input.getAttribute('data-md-color-primary')), (palette.color.accent = input.getAttribute('data-md-color-accent'))
-      }
-      /* Set color palette */
-      for (var [key, value] of Object.entries(palette.color)) document.body.setAttribute('data-md-color-' + key, value)
-  }
-
-  document.addEventListener('DOMContentLoaded', function () {
-      if (typeof document.startViewTransition !== 'function') {
-          return // 不支持 View Transitions API 的浏览器直接返回
-      }
-      // 获取所有主题切换按钮 - 更精确的选择器
-      // 只选择form[data-md-component="palette"]内部的按钮，而不是所有md-header__button
-      const themeToggles = document.querySelectorAll('form[data-md-component="palette"] .md-header__button.md-icon')
-      themeToggles.forEach((toggle) => {
-          toggle.addEventListener(
-              'click',
-              function (e) {
-                  // 阻止默认点击事件
-                  e.preventDefault()
-                  e.stopPropagation()
-                  // 获取目标输入元素
-                  const targetId = this.getAttribute('for')
-                  const targetInput = document.getElementById(targetId)
-                  if (!targetInput) return
-                  // 获取当前主题状态
-                  const currentScheme = document.body.getAttribute('data-md-color-scheme')
-                  const isCurrentDark = currentScheme.includes('slate')
-                  // 点击后会切换到相反的主题
-                  const isNewDark = !isCurrentDark
-                  // 当前主题和目标主题相同则不触发动画
-                  if (isCurrentDark === isNewDark) {
-                      targetInput.click()
-                      return
-                  }
-                  // 动画参数
-                  const x = e.clientX
-                  const y = e.clientY
-                  const endRadius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y))
-                  // 设置动画路径
-                  const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
-                  // 启动视图过渡
-                  document
-                      .startViewTransition(async () => {
-                          // 切换主题
-                          targetInput.click()
-                          // 添加暗/亮模式类，用于动画控制
-                          document.documentElement.classList.remove(isNewDark ? 'light' : 'dark')
-                          document.documentElement.classList.add(isNewDark ? 'dark' : 'light')
-                          // 等待主题变化完成
-                          await new Promise((resolve) => setTimeout(resolve, 100))
-                      })
-                      .ready.then(() => {
-                          // 视图过渡准备就绪，开始动画
-                          document.documentElement.animate(
-                              {
-                                  clipPath: isNewDark ? [...clipPath].reverse() : clipPath,
-                              },
-                              {
-                                  duration: 500,
-                                  easing: 'ease-in',
-                                  pseudoElement: isNewDark ? '::view-transition-old(root)' : '::view-transition-new(root)',
-                              }
-                          )
-                      })
-              },
-              { capture: true }
-          )
-      })
-      // 初始化主题状态类
-      const currentScheme = document.body.getAttribute('data-md-color-scheme')
-      const isDark = currentScheme.includes('slate')
-      document.documentElement.classList.add(isDark ? 'dark' : 'light')
-  })
-</script>

mkdocs.yml

@@ -8,6 +8,7 @@ extra_javascript:
   - assets/js/modules/vue.global.prod.js
   - assets/js/modules/tdesign.min.js
   - assets/js/modules/tdesign-theme.js
+  - assets/js/useThemeTransition.js
   - assets/js/common.js
   - assets/js/component.js
   - assets/js/components/mirrors-table/data.js
@@ -157,6 +158,7 @@ plugins:
           remove_comments: true
       cache_safe: true
       js_files:
+        - assets/js/useThemeTransition.js
         - assets/js/common.js
         - assets/js/component.js
         - assets/js/components/mirrors-table/data.js