anian
340 lines
9.6 KiB
HTML
340 lines
9.6 KiB
HTML
<style>
|
|
.store * {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.store {
|
|
--primary: #50C878;
|
|
--primary-light: #90EE90;
|
|
--primary-dark: #3A9156;
|
|
--danger: #E74C3C;
|
|
--bg: #F9FFFB;
|
|
--shadow: 0 12px 30px rgba(80, 200, 120, .12);
|
|
--radius: 8px;
|
|
padding: 26px 14px;
|
|
background: var(--bg);
|
|
}
|
|
|
|
.store .container {
|
|
width: 100%;
|
|
max-width: 420px;
|
|
margin: 0 auto;
|
|
padding: 32px 24px;
|
|
border-radius: var(--radius);
|
|
background: #fff;
|
|
box-shadow: var(--shadow);
|
|
position: relative;
|
|
}
|
|
|
|
.store .top-bar {
|
|
height: 4px;
|
|
width: 100%;
|
|
background: linear-gradient(90deg, #8ef5b4, #50C878, #3A9156);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.store .title {
|
|
text-align: center;
|
|
font-size: 26px;
|
|
font-weight: 800;
|
|
color: #2C3E50;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
/* 搜索 */
|
|
.store .tag-container {
|
|
margin: 10px 0
|
|
}
|
|
|
|
.store .tag-search-wrapper {
|
|
position: relative;
|
|
margin-bottom: 6px
|
|
}
|
|
|
|
#tag-search {
|
|
width: 100%;
|
|
padding: 7px 12px 7px 34px;
|
|
border-radius: 8px;
|
|
border: 1px solid #c9efd6;
|
|
outline: none;
|
|
background: #fafffb;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.store .search-icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 10px;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
/* 标签居中 */
|
|
.store .tag-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
border: 1px solid #c9efd6;
|
|
background: rgba(144, 238, 144, .08);
|
|
max-height: 100px;
|
|
overflow-y: auto;
|
|
justify-content: center;
|
|
}
|
|
|
|
.store .tag-item {
|
|
padding: 5px 7px;
|
|
border-radius: 8px;
|
|
border: 1px solid #90ee90;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
background: #fff;
|
|
color: #2c6e49;
|
|
transition: .25s;
|
|
}
|
|
|
|
.store .tag-item:hover {
|
|
background: linear-gradient(135deg, #90ee90, #50c878);
|
|
color: #fff;
|
|
}
|
|
|
|
/* 无结果提示 */
|
|
.store .no-result {
|
|
width: 100%;
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #7f8c8d;
|
|
font-size: 13px;
|
|
min-height: 100%;
|
|
padding: 0;
|
|
display: none;
|
|
}
|
|
|
|
/* 输入框 */
|
|
.store .input-group {
|
|
display: flex;
|
|
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: 8px;
|
|
border: 2px solid #e8f7ec;
|
|
font-size: 14px;
|
|
outline: none;
|
|
}
|
|
|
|
#submit-btn {
|
|
padding: 10px 20px;
|
|
border-radius: 8px;
|
|
border: none;
|
|
background: linear-gradient(135deg, #50c878, #3a9156);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 手机端 */
|
|
@media(max-width:520px) {
|
|
.store {
|
|
padding: 14px
|
|
}
|
|
|
|
.store .container {
|
|
padding: 22px 18px;
|
|
max-width: 95%
|
|
}
|
|
|
|
.store .title {
|
|
font-size: 22px
|
|
}
|
|
|
|
.store .input-group {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
#submit-btn {
|
|
width: 100%
|
|
}
|
|
|
|
.store .tag-list {
|
|
max-height: 120px
|
|
}
|
|
|
|
#file-path {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="store">
|
|
<div class="container">
|
|
<div class="top-bar"></div>
|
|
|
|
<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"><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="/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>
|
|
</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 tagItems = document.querySelectorAll('.tag-item');
|
|
const tagSearch = document.getElementById('tag-search');
|
|
const noResult = document.getElementById('noResult');
|
|
|
|
tagItems.forEach(t => {
|
|
t.onclick = () => {
|
|
input.value = t.dataset.value;
|
|
cocoMessage.success('已填入对应标签信息');
|
|
};
|
|
});
|
|
|
|
tagSearch.oninput = () => {
|
|
const k = tagSearch.value.toLowerCase();
|
|
let visible = 0;
|
|
|
|
tagItems.forEach(t => {
|
|
const show = t.textContent.toLowerCase().includes(k) ||
|
|
t.dataset.value.toLowerCase().includes(k);
|
|
t.style.display = show ? 'inline-flex' : 'none';
|
|
if (show) visible++;
|
|
});
|
|
|
|
noResult.style.display = visible === 0 ? 'flex' : 'none';
|
|
};
|
|
|
|
function check(url) {
|
|
return new Promise(r => {
|
|
const xhr = new XMLHttpRequest();
|
|
try {
|
|
xhr.open('HEAD', url, true);
|
|
} catch (e) {
|
|
r(0);
|
|
return;
|
|
}
|
|
xhr.timeout = 5000;
|
|
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 cocoMessage.warning('请输入翻找目标');
|
|
const url = normalizeDestination(v);
|
|
if (!url) return cocoMessage.warning('翻找目标无效');
|
|
btn.textContent = '翻找中...';
|
|
closeLoading = cocoMessage.loading('正在翻找中，请稍候...');
|
|
btn.disabled = true;
|
|
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(); };
|
|
}
|
|
|
|
initializeStoreEvents();
|
|
|
|
</script> |