mirror of
https://gitee.com/SuperManito/LinuxMirrors
synced 2025-11-05 00:40:27 +08:00
249 lines
11 KiB
JavaScript
249 lines
11 KiB
JavaScript
const appId = 'mirrors-table' // 表格容器ID
|
||
let appInstance = null // 缓存表格容器引用
|
||
let vueApp = null // Vue 应用实例
|
||
let isInitializing = false // 是否正在初始化
|
||
let lastInitTime = 0 // 上次初始化时间
|
||
const INIT_COOLDOWN = 1000 // 初始化冷却时间(毫秒)
|
||
|
||
// 更新表格主题
|
||
function updateTableTheme() {
|
||
const scheme = document.querySelector('[data-md-color-scheme]')?.getAttribute('data-md-color-scheme')
|
||
const isDarkMode = scheme === 'slate' || scheme === 'dark'
|
||
// 设置 TDesign 的主题模式
|
||
if (isDarkMode) {
|
||
document.documentElement.setAttribute('theme-mode', 'dark')
|
||
} else {
|
||
document.documentElement.removeAttribute('theme-mode')
|
||
}
|
||
}
|
||
|
||
// 初始化表格的函数
|
||
function initTables() {
|
||
// 如果正在初始化或者距离上次初始化时间太短，则跳过
|
||
const now = Date.now()
|
||
if (isInitializing || now - lastInitTime < INIT_COOLDOWN) {
|
||
return
|
||
}
|
||
// 使用缓存的引用，如果没有则查询
|
||
if (!appInstance) {
|
||
appInstance = document.getElementById(appId)
|
||
}
|
||
// 如果找不到容器，不执行后续操作
|
||
if (!appInstance) {
|
||
return
|
||
}
|
||
// 如果表格已经初始化过，且DOM没有变化，则跳过
|
||
if (appInstance.hasAttribute('data-initialized')) {
|
||
return
|
||
}
|
||
// console.log('找到表格容器，初始化表格')
|
||
isInitializing = true
|
||
lastInitTime = now
|
||
try {
|
||
// 清空容器内容，防止重复初始化
|
||
while (appInstance.firstChild) {
|
||
appInstance.removeChild(appInstance.firstChild)
|
||
}
|
||
// 确保容器有适当的尺寸
|
||
if (!appInstance.style.width) {
|
||
appInstance.style.width = '100%'
|
||
}
|
||
// 确保 Vue 和 TDesign 已加载
|
||
if (typeof Vue !== 'undefined' && typeof TDesign !== 'undefined') {
|
||
// 创建 Vue 应用
|
||
const App = Vue.createApp(app)
|
||
// 注册 TDesign 组件
|
||
App.use(TDesign.default)
|
||
// 挂载应用
|
||
vueApp = App.mount(appInstance)
|
||
// console.log('表格初始化成功')
|
||
// 标记表格已初始化
|
||
appInstance.setAttribute('data-initialized', 'true')
|
||
// 立即更新主题
|
||
updateTableTheme()
|
||
} else {
|
||
console.error('Vue 或 TDesign 未加载')
|
||
// 显示错误消息
|
||
const errorDiv = document.createElement('div')
|
||
errorDiv.style.padding = '20px'
|
||
errorDiv.style.color = 'red'
|
||
errorDiv.textContent = 'Vue 或 TDesign 未加载，请在 mkdocs.yml 中添加相应 CDN 链接'
|
||
appInstance.appendChild(errorDiv)
|
||
}
|
||
} catch (error) {
|
||
console.error('初始化表格时发生错误：', error)
|
||
} finally {
|
||
isInitializing = false
|
||
}
|
||
}
|
||
|
||
// 初始化
|
||
function reinitializeTable() {
|
||
appInstance = document.getElementById(appId)
|
||
if (appInstance) {
|
||
appInstance.removeAttribute('data-initialized')
|
||
setTimeout(debouncedInit, 300) // 使用更短的延迟
|
||
}
|
||
}
|
||
|
||
// 设置主题监听器
|
||
function setupThemeObserver() {
|
||
// 监听主题变化
|
||
const observer = new MutationObserver(() => {
|
||
updateTableTheme()
|
||
})
|
||
const element = document.querySelector('[data-md-color-scheme]')
|
||
if (element) {
|
||
observer.observe(element, {
|
||
attributes: true,
|
||
attributeFilter: ['data-md-color-scheme'],
|
||
})
|
||
} else {
|
||
// 如果元素不存在，等待页面加载完成后重试
|
||
setTimeout(setupThemeObserver, 1000)
|
||
}
|
||
}
|
||
|
||
// 使用防抖函数包装初始化逻辑
|
||
function debounce(func, wait) {
|
||
let timeout
|
||
return function () {
|
||
const context = this
|
||
const args = arguments
|
||
clearTimeout(timeout)
|
||
timeout = setTimeout(() => func.apply(context, args), wait)
|
||
}
|
||
}
|
||
|
||
// 列定义
|
||
const columns = [
|
||
{ 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' },
|
||
]
|
||
|
||
// 修改 app 对象的模板部分，添加自定义表头渲染
|
||
const app = {
|
||
template: `
|
||
<div>
|
||
<t-table
|
||
:columns="columns"
|
||
:data="data"
|
||
row-key="name"
|
||
size="small"
|
||
>
|
||
<template v-for="col in columns" :key="col.colKey" #[col.title]>
|
||
<div v-if="col.tooltip" class="t-table__th-cell-inner">
|
||
<t-space style="gap: 4px">
|
||
{{ col.title }}
|
||
<t-tooltip :content="col.tooltip" placement="bottom" :show-arrow="false">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M11.95 18q.525 0 .888-.363t.362-.887t-.362-.888t-.888-.362t-.887.363t-.363.887t.363.888t.887.362m.05 4q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m.1-12.3q.625 0 1.088.4t.462 1q0 .55-.337.975t-.763.8q-.575.5-1.012 1.1t-.438 1.35q0 .35.263.588t.612.237q.375 0 .638-.25t.337-.625q.1-.525.45-.937t.75-.788q.575-.55.988-1.2t.412-1.45q0-1.275-1.037-2.087T12.1 6q-.95 0-1.812.4T8.975 7.625q-.175.3-.112.638t.337.512q.35.2.725.125t.625-.425q.275-.375.688-.575t.862-.2"/></svg>
|
||
</t-tooltip>
|
||
</t-space>
|
||
</div>
|
||
<div v-else class="t-table__th-cell-inner">{{ col.title }}</div>
|
||
</template>
|
||
<template v-for="col in columns" :key="col.colKey" #[col.colKey]="{ row }">
|
||
<template v-if="col.colKey === 'name'">
|
||
<t-popup placement="bottom" :show-arrow="false">
|
||
<template #content>
|
||
<a :href="row.url" target="_blank" style="color: var(--md-typeset-a-color)">{{ row.domain }}</a>
|
||
</template>
|
||
<a :href="row.url" target="_blank">{{ row.name }}</a>
|
||
</t-popup>
|
||
</template>
|
||
<template v-else>
|
||
<t-tag v-if="typeof row[col.colKey] === 'boolean'" :theme="row[col.colKey] ? 'success' : 'danger'" variant="light" size="small" style="background-color: transparent; height: 100%">
|
||
<template #icon>
|
||
<svg v-if="row[col.colKey]" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59L21 7Z" /></svg>
|
||
<svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="vertical-align: -0.2em"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"/></svg>
|
||
</template>
|
||
</t-tag>
|
||
<t-tag v-else theme="warning" variant="light" size="small" style="background-color: transparent">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="vertical-align: -0.3em"><path fill="#F6B604" d="M22.11 21.46L2.39 1.73L1.11 3l2.95 2.95A9.95 9.95 0 0 0 2 12c0 5.5 4.5 10 10 10c2.28 0 4.37-.77 6.05-2.06l2.79 2.79l1.27-1.27M12 20c-4.42 0-8-3.58-8-8c0-1.73.56-3.32 1.5-4.62L16.62 18.5A7.78 7.78 0 0 1 12 20M8.17 4.97L6.72 3.5C8.25 2.56 10.06 2 12 2c5.5 0 10 4.5 10 10c0 1.94-.56 3.75-1.5 5.28l-1.47-1.45c.62-1.14.97-2.44.97-3.83c0-4.42-3.58-8-8-8c-1.39 0-2.69.35-3.83.97Z"/></svg>
|
||
</t-tag>
|
||
</template>
|
||
</template>
|
||
</t-table>
|
||
</div>
|
||
`,
|
||
data() {
|
||
return {
|
||
columns,
|
||
data: mirrorsTableData,
|
||
}
|
||
},
|
||
}
|
||
|
||
// 防抖处理的初始化函数
|
||
const debouncedInit = debounce(initTables, 300)
|
||
|
||
// 仅在导航完成后监听URL变化
|
||
let lastUrl = location.href
|
||
const urlObserver = new MutationObserver(() => {
|
||
const url = location.href
|
||
if (url !== lastUrl) {
|
||
lastUrl = url
|
||
// 重置初始化状态
|
||
appInstance = document.getElementById(appId)
|
||
if (appInstance) {
|
||
appInstance.removeAttribute('data-initialized')
|
||
}
|
||
// 延迟初始化
|
||
setTimeout(debouncedInit, 400)
|
||
}
|
||
})
|
||
urlObserver.observe(document, { subtree: true, childList: true })
|
||
|
||
// 页面加载事件
|
||
window.addEventListener('load', function () {
|
||
debouncedInit()
|
||
// 尝试找到 MkDocs 内容容器来精确监听
|
||
const contentContainer = document.querySelector('.md-content') || document.querySelector('.md-main__inner') || document.querySelector('article') || document.body
|
||
// 只监听这个元素的子元素变化
|
||
urlObserver.observe(contentContainer, {
|
||
childList: true, // 监听子节点添加或删除
|
||
subtree: false, // 不监听所有后代变化，降低开销
|
||
attributes: false, // 不监听属性变化
|
||
})
|
||
// 监听 iframe 情况下的 hashchange 和 popstate 事件
|
||
window.addEventListener('hashchange', function () {
|
||
if (location.href !== lastUrl) {
|
||
lastUrl = location.href
|
||
appInstance = null
|
||
reinitializeTable()
|
||
}
|
||
})
|
||
window.addEventListener('popstate', function () {
|
||
if (location.href !== lastUrl) {
|
||
lastUrl = location.href
|
||
appInstance = null
|
||
reinitializeTable()
|
||
}
|
||
})
|
||
})
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
// 设置主题观察器
|
||
setupThemeObserver()
|
||
})
|
||
// MkDocs 页面切换事件
|
||
document.addEventListener('DOMContentSwitch', function () {
|
||
reinitializeTable()
|
||
})
|