fix: 修复示例URL显示错误并改进复制功能
- 将硬编码的示例URL改为动态生成,确保显示当前访问的域名/端口 - 修复复制功能在URL未加载时可能复制错误内容的问题 - 将url-preview字体从'Fira Code'改为通用monospace,提高兼容性
This commit is contained in:
22
server.js
22
server.js
@@ -608,7 +608,7 @@ app.use(async (req, res) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.url-preview {
|
.url-preview {
|
||||||
font-family: 'Fira Code', monospace;
|
font-family: monospace;
|
||||||
background: #f1f5f9;
|
background: #f1f5f9;
|
||||||
padding: 0.75rem 1rem;
|
padding: 0.75rem 1rem;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@@ -635,6 +635,7 @@ app.use(async (req, res) => {
|
|||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.features {
|
.features {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
@@ -752,7 +753,7 @@ app.use(async (req, res) => {
|
|||||||
<div class="usage-row">
|
<div class="usage-row">
|
||||||
<span class="method-tag">GET</span>
|
<span class="method-tag">GET</span>
|
||||||
<div class="url-preview">
|
<div class="url-preview">
|
||||||
<span>${req.protocol}://${req.get('host')}/www.baidu.com</span>
|
<span class="dynamic-url" data-path="/www.baidu.com">Loading...</span>
|
||||||
<button class="copy-btn" onclick="copyUrl(this)">复制</button>
|
<button class="copy-btn" onclick="copyUrl(this)">复制</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -760,7 +761,7 @@ app.use(async (req, res) => {
|
|||||||
<div class="usage-row">
|
<div class="usage-row">
|
||||||
<span class="method-tag">GET</span>
|
<span class="method-tag">GET</span>
|
||||||
<div class="url-preview">
|
<div class="url-preview">
|
||||||
<span>${req.protocol}://${req.get('host')}/https://github.com</span>
|
<span class="dynamic-url" data-path="/https://github.com">Loading...</span>
|
||||||
<button class="copy-btn" onclick="copyUrl(this)">复制</button>
|
<button class="copy-btn" onclick="copyUrl(this)">复制</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -768,7 +769,7 @@ app.use(async (req, res) => {
|
|||||||
<div class="usage-row">
|
<div class="usage-row">
|
||||||
<span class="method-tag">GET</span>
|
<span class="method-tag">GET</span>
|
||||||
<div class="url-preview">
|
<div class="url-preview">
|
||||||
<span>${req.protocol}://${req.get('host')}/?url=www.baidu.com</span>
|
<span class="dynamic-url" data-path="/?url=https://www.baidu.com">Loading...</span>
|
||||||
<button class="copy-btn" onclick="copyUrl(this)">复制</button>
|
<button class="copy-btn" onclick="copyUrl(this)">复制</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -871,8 +872,19 @@ app.use(async (req, res) => {
|
|||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// 动态生成 URL,确保显示的是用户浏览器当前访问的地址(包含正确的域名/端口)
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const origin = window.location.origin;
|
||||||
|
document.querySelectorAll('.dynamic-url').forEach(el => {
|
||||||
|
el.innerText = origin + el.getAttribute('data-path');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
function copyUrl(btn) {
|
function copyUrl(btn) {
|
||||||
const url = btn.previousElementSibling.innerText;
|
const urlSpan = btn.previousElementSibling;
|
||||||
|
const url = urlSpan.innerText;
|
||||||
|
if (url === 'Loading...') return;
|
||||||
|
|
||||||
navigator.clipboard.writeText(url).then(() => {
|
navigator.clipboard.writeText(url).then(() => {
|
||||||
const originalText = btn.innerText;
|
const originalText = btn.innerText;
|
||||||
btn.innerText = '已复制!';
|
btn.innerText = '已复制!';
|
||||||
|
|||||||
Reference in New Issue
Block a user