组件 ${componentId} 加载失败,请检查 TDesign UI 是否存在!
`
+ 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)
+ })
+ },
+}
diff --git a/docs/assets/js/component.js b/docs/assets/js/component.js
new file mode 100644
index 0000000..0ca4a57
--- /dev/null
+++ b/docs/assets/js/component.js
@@ -0,0 +1,15 @@
+// 使用 mkdocs-material 与第三方 JavaScript 库集成的方法
+document$.subscribe(function () {
+ // 重新初始化组件
+ ComponentSystem.reinitializeAll()
+ // 延迟初始化以确保DOM完全渲染
+ setTimeout(() => {
+ ComponentSystem.initAll()
+ }, 300)
+})
+
+// 首次加载事件
+window.addEventListener('load', function () {
+ // 初始化所有组件
+ ComponentSystem.initAll()
+})
diff --git a/docs/assets/js/mirrors-table-data.js b/docs/assets/js/components/mirrors-table/data.js
similarity index 83%
rename from docs/assets/js/mirrors-table-data.js
rename to docs/assets/js/components/mirrors-table/data.js
index 579d9d4..990acd4 100644
--- a/docs/assets/js/mirrors-table-data.js
+++ b/docs/assets/js/components/mirrors-table/data.js
@@ -1,3 +1,4 @@
+// 表格数据
const mirrorsTableData = [
{
name: '阿里云',
@@ -322,3 +323,26 @@ const mirrorsTableData = [
raspberry: true,
},
]
+
+// 表格列配置
+const mirrorsTableColumns = [
+ { colKey: 'name', title: '镜像站', align: 'center', width: '160', fixed: 'left' },
+ { colKey: 'ipv6', title: 'IPv6', align: 'center' },
+ { colKey: 'epel', title: 'EPEL', align: 'center', tooltip: 'Extra Packages for Enterprise Linux (EPEL) 是由 Fedora 组织维护的一个附加软件包仓库,它主要适用于除 Fedora 操作系统以外的红帽系 Linux 发行版。' },
+ { colKey: 'archlinux', title: 'Arch Linux', align: 'center' },
+ { colKey: 'kalilinux', title: 'Kali Linux', align: 'center' },
+ { colKey: 'armbian', title: 'Armbian', align: 'center' },
+ { colKey: 'deepin', title: 'Deepin', align: 'center' },
+ { colKey: 'raspberry', title: 'Raspberry Pi OS', align: 'center', width: '130' },
+ { colKey: 'linuxmint', title: 'Linux Mint', align: 'center' },
+ { colKey: 'proxmox', title: 'Proxmox VE', align: 'center' },
+ { colKey: 'fedora', title: 'Fedora', align: 'center' },
+ { colKey: 'rockylinux', title: 'Rocky Linux', align: 'center' },
+ { colKey: 'almalinux', title: 'AlmaLinux', align: 'center' },
+ { colKey: 'opencloudos', title: 'OpenCloudOS', align: 'center', width: '120' },
+ { colKey: 'anolis', title: 'Anolis OS', align: 'center' },
+ { colKey: 'openkylin', title: 'openKylin', align: 'center' },
+ { colKey: 'alpinelinux', title: 'Alpine Linux', align: 'center' },
+ { colKey: 'gentoo', title: 'Gentoo', align: 'center' },
+ { colKey: 'nix', title: 'NixOS', align: 'center' },
+]
diff --git a/docs/assets/js/components/mirrors-table/index.js b/docs/assets/js/components/mirrors-table/index.js
new file mode 100644
index 0000000..e6f9d91
--- /dev/null
+++ b/docs/assets/js/components/mirrors-table/index.js
@@ -0,0 +1,51 @@
+ComponentSystem.register('mirrors-table', {
+ template: `
+