更新文档

docs/assets/js/common.js

@@ -0,0 +1,122 @@
+// 防抖
+function debounce(func, wait) {
+    let timeout
+    return function () {
+        const context = this
+        const args = arguments
+        clearTimeout(timeout)
+        timeout = setTimeout(() => func.apply(context, args), wait)
+    }
+}
+
+// 组件管理系统（每个组件都是一个 Vue 实例）
+const ComponentSystem = {
+    // 组件状态数据
+    components: {},
+
+    // 注册组件
+    register: function (componentId, componentDef) {
+        // 为每个组件创建自己的状态
+        this.components[componentId] = {
+            id: componentId,
+            instance: null,
+            isInitializing: false,
+            lastInitTime: 0,
+            def: componentDef,
+            debouncedInit: null,
+        }
+        // 创建组件初始化函数
+        const initFunc = function () {
+            const component = ComponentSystem.components[componentId]
+            // 如果正在初始化或者距离上次初始化时间太短，则跳过
+            const now = Date.now()
+            if (component.isInitializing || now - component.lastInitTime < 1000) {
+                return
+            }
+            // 使用缓存，如果没有则查询
+            if (!component.instance) {
+                component.instance = document.getElementById(componentId)
+            }
+            // 如果找不到容器，不执行后续操作
+            if (!component.instance) {
+                return
+            }
+            // 如果组件已经初始化过，且DOM没有变化，则跳过
+            if (component.instance.hasAttribute('data-initialized')) {
+                return
+            }
+            // console.log(`找到组件 ${componentId} 容器，开始初始化`)
+            component.isInitializing = true
+            component.lastInitTime = now
+            try {
+                // 清空容器内容，防止重复初始化
+                while (component.instance.firstChild) {
+                    component.instance.removeChild(component.instance.firstChild)
+                }
+                // 确保容器有适当的尺寸
+                if (!component.instance.style.width) {
+                    component.instance.style.width = '100%'
+                }
+                // 确保 Vue 和 TDesign 已加载
+                if (typeof Vue !== 'undefined' && typeof TDesign !== 'undefined') {
+                    // 创建 Vue 应用
+                    const App = Vue.createApp(component.def)
+                    // 注册 TDesign 组件
+                    App.use(TDesign.default)
+                    // 挂载应用
+                    App.mount(component.instance)
+                    // console.log(`组件 ${componentId} 初始化成功`)
+                    // 标记组件已初始化
+                    component.instance.setAttribute('data-initialized', 'true')
+                    // 立即更新主题
+                    updateTDesignGlobalTheme()
+                } else if (typeof Vue !== 'undefined')  {
+                    console.error('Vue 未找到')
+                    const errorDiv = document.createElement('div')
+                    errorDiv.innerHTML = `<div class="admonition failure"><p class="admonition-title">组件 ${componentId} 加载失败，请检查 Vue 是否存在！</p></div>`
+                    component.instance.appendChild(errorDiv)
+                } else if (typeof TDesign !== 'undefined')  {
+                    console.error('TDesign UI 未找到')
+                    const errorDiv = document.createElement('div')
+                    errorDiv.innerHTML = `<div class="admonition failure"><p class="admonition-title">组件 ${componentId} 加载失败，请检查 TDesign UI 是否存在！</p></div>`
+                    component.instance.appendChild(errorDiv)
+                }
+            } catch (error) {
+                console.error(`组件 ${componentId} 初始化时发生错误：${error}`)
+            } finally {
+                component.isInitializing = false
+            }
+        }
+        // 为每个组件创建防抖初始化函数
+        this.components[componentId].debouncedInit = debounce(initFunc, 300)
+        return this.components[componentId].debouncedInit
+    },
+
+    // 初始化所有组件
+    initAll: function () {
+        Object.values(this.components).forEach((component) => {
+            if (component.debouncedInit) {
+                component.debouncedInit()
+            }
+        })
+    },
+
+    // 重新初始化组件
+    reinitialize: function (componentId) {
+        const component = this.components[componentId]
+        if (component) {
+            component.instance = document.getElementById(componentId)
+            if (component.instance) {
+                component.instance.removeAttribute('data-initialized')
+                setTimeout(component.debouncedInit, 300)
+            }
+        }
+    },
+
+    // 重新初始化所有组件
+    reinitializeAll: function () {
+        Object.keys(this.components).forEach((id) => {
+            this.reinitialize(id)
+        })
+    },
+}