anian/halo-theme-pix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

朋友圈支持图片显示；手机端新增全局公告提示；更新部分页面；优化部分效果

Browse Source
This commit is contained in:
anian
2026-04-17 00:19:43 +08:00
parent 5a3544f8df
commit 565bf30ea5
11 changed files with 571 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
embed-code/page/store.html
+114 -89
View File
@@ -3,7 +3,6 @@
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", "Microsoft YaHei", Arial;
}
.store {
@@ -13,7 +12,7 @@
--danger: #E74C3C;
--bg: #F9FFFB;
--shadow: 0 12px 30px rgba(80, 200, 120, .12);
--radius: 18px;
--radius: 8px;
padding: 26px 14px;
background: var(--bg);
}
@@ -59,7 +58,7 @@
#tag-search {
width: 100%;
padding: 7px 12px 7px 34px;
border-radius: 10px;
border-radius: 8px;
border: 1px solid #c9efd6;
outline: none;
background: #fafffb;
@@ -79,7 +78,7 @@
flex-wrap: wrap;
gap: 8px;
padding: 8px;
border-radius: 12px;
border-radius: 8px;
border: 1px solid #c9efd6;
background: rgba(144, 238, 144, .08);
max-height: 100px;
@@ -89,7 +88,7 @@
.store .tag-item {
padding: 5px 7px;
border-radius: 9px;
border-radius: 8px;
border: 1px solid #90ee90;
font-size: 12px;
cursor: pointer;
@@ -107,31 +106,66 @@
.store .no-result {
width: 100%;
text-align: center;
align-items: center;
justify-content: center;
color: #7f8c8d;
font-size: 13px;
padding: 8px 0;
min-height: 100%;
padding: 0;
display: none;
}
/* 输入框 */
.store .input-group {
display: flex;
gap: 10px;
gap: 8px;
margin: 16px 0;
align-items: center;
}
.store .section-divider {
position: relative;
height: 18px;
margin: 6px 0 14px;
}
.store .section-divider::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
transform: translateY(-50%);
background: linear-gradient(90deg, rgba(80, 200, 120, 0), rgba(80, 200, 120, .55), rgba(80, 200, 120, 0));
box-shadow: 0 1px 0 rgba(80, 200, 120, .12);
}
.store .section-divider::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
transform: translate(-50%, -50%) rotate(45deg);
border-radius: 2px;
background: linear-gradient(135deg, #90ee90, #50c878);
box-shadow: -14px 0 0 -3px rgba(80, 200, 120, .5), 14px 0 0 -3px rgba(80, 200, 120, .5), 0 0 0 2px #ffffff;
}
#file-path {
flex: 1;
padding: 8px 14px;
border-radius: 12px;
border-radius: 8px;
border: 2px solid #e8f7ec;
font-size: 14px;
outline: none;
}
#submit-btn {
padding: 10px;
border-radius: 12px;
padding: 10px 20px;
border-radius: 8px;
border: none;
background: linear-gradient(135deg, #50c878, #3a9156);
color: #fff;
@@ -139,17 +173,6 @@
cursor: pointer;
}
/* 底部提示（改成浅黄色系） */
.store .tips {
font-size: 12px;
text-align: center;
color: #a97400;
padding: 8px;
border-radius: 8px;
background: rgba(255, 215, 0, .12);
border: 1px solid rgba(243, 156, 18, .25);
}
/* 手机端 */
@media(max-width:520px) {
.store {
@@ -166,7 +189,8 @@
}
.store .input-group {
flex-direction: column
flex-direction: column;
align-items: stretch;
}
#submit-btn {
@@ -176,34 +200,11 @@
.store .tag-list {
max-height: 120px
}
}
/* Toast */
.custom-toast {
position: fixed;
top: 26px;
left: 50%;
transform: translateX(-50%) translateY(-80px);
background: #2ECC71;
color: #fff;
padding: 12px 20px;
border-radius: 10px;
transition: .4s;
opacity: 0;
z-index: 9999;
}
.toast-show {
transform: translateX(-50%) translateY(0);
opacity: 1
}
.toast-error {
background: #E74C3C
}
.toast-warning {
background: #F39C12
#file-path {
width: 100%;
box-sizing: border-box;
}
}
</style>
@@ -211,58 +212,55 @@
<div class="container">
<div class="top-bar"></div>
<h1 class="title">Anian的储物柜</h1>
<h1 class="title">储物柜</h1>
<div class="input-group">
<input id="file-path" placeholder="请输入翻找目标..." autocomplete="off">
<button id="submit-btn">翻 找</button>
</div>
<div class="section-divider" aria-hidden="true"></div>
<div class="tag-container">
<div class="tag-search-wrapper">
<span class="search-icon">🔍</span>
<input id="tag-search" placeholder="搜索标签">
<span class="search-icon"><i class="ri-search-line"></i></span>
<input id="tag-search" placeholder="搜索标签..." autocomplete="off">
</div>
<div class="tag-list">
<div class="tag-item" data-value="test.zip">测试压缩包</div>
<div class="tag-item" data-value="docs/report.pdf">示例报告</div>
<div class="tag-item" data-value="images/banner.jpg">横幅图片</div>
<div class="tag-item" data-value="software/setup.exe">安装程序</div>
<div class="tag-item" data-value="/upload/jiazai.gif">加载动画</div>
<div class="tag-item" data-value="/upload/logo.png">网站Logo</div>
<div class="tag-item" data-value="/upload/jiazai.gif">加载动画</div>
<div class="tag-item" data-value="/upload/logo.png">网站Logo</div> <div class="tag-item" data-value="/upload/jiazai.gif">加载动画</div>
<div class="tag-item" data-value="/upload/logo.png">网站Logo</div> <div class="tag-item" data-value="/upload/jiazai.gif">加载动画</div>
<div class="tag-item" data-value="/upload/logo.png">网站Logo</div> <div class="tag-item" data-value="/upload/jiazai.gif">加载动画</div>
<div class="tag-item" data-value="/upload/logo.png">网站Logo</div> <div class="tag-item" data-value="/upload/jiazai.gif">加载动画</div>
<div class="tag-item" data-value="/upload/logo.png">网站Logo</div>
<div class="no-result" id="noResult">没有匹配的结果</div>
</div>
</div>
<div class="input-group">
<input id="file-path" placeholder="请输入路径" autocomplete="off">
<button id="submit-btn">访问 / 下载</button>
</div>
<p class="tips">⚠️ 错误过多将可能被封禁</p>
</div>
<div class="custom-toast" id="customToast"></div>
</div>
<script>
function initializeStoreEvents() {
let closeLoading = null;
const container = document.querySelector(".store");
if (!container || container.dataset.init === "1") return;
container.dataset.init = "1";
const input = document.getElementById('file-path');
const btn = document.getElementById('submit-btn');
const toast = document.getElementById('customToast');
const tagItems = document.querySelectorAll('.tag-item');
const tagSearch = document.getElementById('tag-search');
const noResult = document.getElementById('noResult');
function showToast(msg, type = 'warning') {
toast.textContent = msg;
toast.className = 'custom-toast toast-' + type + ' toast-show';
setTimeout(() => toast.classList.remove('toast-show'), 2600);
}
tagItems.forEach(t => {
t.onclick = () => {
input.value = t.dataset.value;
showToast('已填入 ' + t.dataset.value, 'success');
cocoMessage.success('已填入对应标签信息');
};
});
@@ -277,39 +275,66 @@
if (show) visible++;
});
noResult.style.display = visible === 0 ? 'block' : 'none';
noResult.style.display = visible === 0 ? 'flex' : 'none';
};
function check(url) {
return new Promise(r => {
const xhr = new XMLHttpRequest();
xhr.open('HEAD', url, true);
try {
xhr.open('HEAD', url, true);
} catch (e) {
r(0);
return;
}
xhr.timeout = 5000;
xhr.onload = () => r(xhr.status === 200);
xhr.onerror = () => r(false);
xhr.ontimeout = () => r(false);
xhr.onload = () => r(xhr.status);
xhr.onerror = () => r(0);
xhr.ontimeout = () => r(0);
xhr.send();
});
}
function normalizeDestination(value) {
const trimmed = value.trim();
if (!trimmed || /\\/.test(trimmed)) return null;
const url = trimmed.charAt(0) === '/' ? trimmed : '/' + trimmed;
if (/^\/\//.test(url)) return null;
return url;
}
async function go() {
const v = input.value.trim();
if (!v) return showToast('请输入路径');
const url = '/' + v;
btn.textContent = '检测中...';
if (!v) return cocoMessage.warning('请输入翻找目标');
const url = normalizeDestination(v);
if (!url) return cocoMessage.warning('翻找目标无效');
btn.textContent = '翻找中...';
closeLoading = cocoMessage.loading('正在翻找中，请稍候...');
btn.disabled = true;
const ok = await check(url);
if (ok) {
showToast('资源存在，跳转中', 'success');
setTimeout(() => location.href = url, 700);
} else showToast('资源不存在', 'error');
setTimeout(() => { btn.textContent = '访问 / 下载'; btn.disabled = false }, 700);
try {
const status = await check(url);
if (status === 200) {
cocoMessage.success('翻找成功，即将打开目标页面');
window.open(url, '_blank');
} else if (status === 404) {
cocoMessage.warning('翻找失败，失败过多将被封禁');
} else {
cocoMessage.error('翻找异常，请重试或刷新页面');
}
} finally {
closeLoading?.();
closeLoading = null;
btn.textContent = '翻 找';
btn.disabled = false;
}
}
btn.onclick = go;
input.onkeydown = e => { if (e.key === 'Enter') go(); };
}
document.addEventListener("DOMContentLoaded", initializeStoreEvents);
document.addEventListener("pjax:complete", initializeStoreEvents);
initializeStoreEvents();
</script>