<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>目录</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 2vh;
background: #f3f3f3;
}
table,
tr,
th,
td {
border: 1px solid #ebeef5;
}
table {
width: 100%;
background-color: #fff;
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 10px 8px;
}
tr {
transition: background 0.25s;
}
tr:hover {
background: #f5f6f6;
}
td:nth-child(1) {
text-align: center;
}
td {
cursor: pointer;
user-select: text;
}
a {
display: block;
color: #165dff;
text-decoration: none;
}
strong {
font-weight: normal;
color: #333;
}
.container {
max-width: 600px;
min-height: 80vh;
margin: 0 auto;
color: #444;
padding: 12px;
font-size: 14px;
background-color: #fff;
border-radius: 4px;
}
.msg-box {
margin-top: 20px;
color: #aaa;
font-size: 13px;
line-height: 20px;
padding: 10px;
text-align: center;
}
</style>
<%- VITE_INJECT_DATA %>
</head>
<body>
<div class="container">
<table>
<tr>
<th>序号</th>
<th>页面</th>
<th>标题</th>
</tr>
</table>
<div class="msg-box">
<p>启动时默认打开页面，可在 <strong>vite.config.ts</strong> 中关闭</p>
</div>
</div>
<script>
function gengerateUrl(name) {
const pathname = location.pathname.substring(0, location.pathname.lastIndexOf('/'))
const url = `${location.origin}${pathname}/${name}.html`
return url
}
function handleCopy(url, title) {
if (title) {
copyToClipboard(`${title} ${url}`)
} else {
copyToClipboard(url)
}
}
function copyToClipboard(text) {
const textarea = document.createElement('textarea')
document.body.appendChild(textarea)
textarea.style.position = 'fixed'
textarea.style.top = '10px'
textarea.value = text
textarea.select()
document.execCommand('copy')
document.body.removeChild(textarea)
showToast(`已复制：${text}`)
}
function showToast(message) {
const toast = document.createElement('div')
toast.textContent = message
toast.style.cssText = `
position: fixed;
bottom: 30px;
left: 50%;
z-index: 9999;
padding: 8px 10px;
color: #fff;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transform: translateX(-50%);
`
document.body.appendChild(toast)
setTimeout(() => {
document.body.removeChild(toast)
}, 1000)
}
window.addEventListener('DOMContentLoaded', () => {
const table = document.querySelector('table')
// eslint-disable-next-line no-undef
pages.forEach((page, index) => {
const pageUrl = gengerateUrl(page.path)
const tr = document.createElement('tr')
const td1 = document.createElement('td')
const td2 = document.createElement('td')
const td3 = document.createElement('td')
const p1 = document.createElement('p')
const p2 = document.createElement('p')
const a = document.createElement('a')
a.target = '_black'
td1.appendChild(p1)
td2.appendChild(p2)
td3.appendChild(a)
tr.appendChild(td1)
tr.appendChild(td2)
tr.appendChild(td3)
p1.textContent = index + 1
p1.title = '点击复制链接'
p1.addEventListener('click', () => {
handleCopy(pageUrl)
})
p2.textContent = page.path
p2.title = '点击复制链接'
p2.addEventListener('click', () => {
handleCopy(pageUrl, page.title)
})
a.href = pageUrl
a.title = `${pageUrl}`
a.textContent = page.title
table.appendChild(tr)
})
})
</script>
</body>
</html>