Files
LinuxMirrors/docs/assets/js/common.js

146 lines
6.0 KiB
JavaScript
Raw Normal View History

2025-10-14 15:32:16 +08:00
const __p = typeof window !== 'undefined' && window.location && window.location.pathname ? window.location.pathname : ''
const __isZhHant = __p.includes('/zh-Hant')
const __isEn = __p.includes('/en')
2025-04-04 13:15:39 +08:00
// 防抖
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,
2025-10-14 15:32:16 +08:00
app: null,
2025-04-04 13:15:39 +08:00
}
// 创建组件初始化函数
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 {
2025-10-14 15:32:16 +08:00
if (component.app && typeof component.app.unmount === 'function') {
try {
component.app.unmount()
} catch (err) {
console.error('ComponentSystem: unmount previous app error', err)
}
component.app = null
}
2025-04-04 13:15:39 +08:00
// 清空容器内容,防止重复初始化
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)
2025-10-14 15:32:16 +08:00
// 保存 app 引用以便后续卸载
component.app = App
2025-04-04 13:15:39 +08:00
// console.log(`组件 ${componentId} 初始化成功`)
// 标记组件已初始化
component.instance.setAttribute('data-initialized', 'true')
// 立即更新主题
updateTDesignGlobalTheme()
2025-10-14 15:32:16 +08:00
} else if (typeof Vue !== 'undefined') {
2025-04-04 13:15:39 +08:00
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)
2025-10-14 15:32:16 +08:00
} else if (typeof TDesign !== 'undefined') {
2025-04-04 13:15:39 +08:00
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) {
2025-10-14 15:32:16 +08:00
if (component.app && typeof component.app.unmount === 'function') {
try {
component.app.unmount()
} catch (err) {
console.error('ComponentSystem: unmount on reinitialize error', err)
}
component.app = null
}
2025-04-04 13:15:39 +08:00
component.instance.removeAttribute('data-initialized')
setTimeout(component.debouncedInit, 300)
}
}
},
// 重新初始化所有组件
reinitializeAll: function () {
Object.keys(this.components).forEach((id) => {
this.reinitialize(id)
})
},
}