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-03-15 18:05:44 +08:00
parent b387ea885c
commit e716097e07
19 changed files with 2632 additions and 1633 deletions
Download Patch File Download Diff File Expand all files Collapse all files
embed-code/page/navigator.html
+186 -218
View File
@@ -1,119 +1,23 @@
<div
style="max-width: 1200px; margin: 20px auto; padding: 0 15px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
<!-- 链接卡片容器 - 桌面4列，平板/手机2列 -->
<div class="link-container" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;">
<!-- 媒体查询：桌面端（≥768px）显示4列 -->
<style>
/* 基础布局样式 */
@media (min-width: 768px) {
.link-container {
grid-template-columns: repeat(4, 1fr) !important;
}
}
.ri-icon {
color: white !important;
fill: white !important;
}
.link-container>a {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
text-decoration: none !important;
}
.link-container>a>div {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
border-radius: 12px !important;
padding: 25px 15px !important;
text-align: center !important;
position: relative !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
/* 基础边框：无!important，靠类优先级控制 */
border: 2px solid transparent;
}
/* ========== CSS优先级顺序：默认 → 未读基础 → hover → 未读hover ========== */
/* 1. 通用默认样式（初始无黑框） */
.link-card-default {
background: #f0f7f4 !important;
transform: translateY(0) !important;
box-shadow: none !important;
border-color: transparent !important;
}
/* 2. 公告未读基础样式（红色调，优先级高于默认） */
.notice-unread {
background: #fff5f5 !important;
/* 浅红背景 */
}
.notice-unread .notice-icon-bg {
background: #e53e3e !important;
/* 红色图标背景 */
}
.notice-unread .notice-title {
color: #c53030 !important;
/* 深红标题 */
}
.notice-unread .notice-desc {
color: #e53e3e !important;
/* 红色描述 */
font-weight: 500 !important;
}
/* 3. 通用hover样式（绿色边框，必显） */
.link-card-hover {
transform: translateY(-5px) !important;
box-shadow: 0 10px 20px rgba(72, 187, 120, 0.15) !important;
border: 2px solid #74c69d !important;
/* 绿色边框 */
}
/* 4. 公告未读hover样式（红色边框，优先级最高） */
.notice-unread-hover {
transform: translateY(-5px) !important;
box-shadow: 0 10px 20px rgba(229, 62, 62, 0.15) !important;
border: 2px solid #fc8181 !important;
/* 红色边框 */
}
</style>
<!-- 公告模块 -->
<a href="/notice">
<div id="my-links-widget" style="max-width: 1200px; margin: 20px auto; padding: 0 15px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
<div id="link-container" class="link-container" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;">
<a href="/notice" target="_self" data-is-notice="true">
<div id="notice-card" class="link-card-default">
<div
style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;">
</div>
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
<div style="position: relative; z-index: 1;">
<div class="notice-icon-bg"
style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
<div class="icon-box" style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
<i class="ri-megaphone-line ri-icon" style="font-size: 30px;"></i>
</div>
<h4 id="notice-title" class="notice-title"
style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">通知书</h4>
<p id="notice-desc" class="notice-desc"
style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">最新通知与提醒</p>
<h4 class="notice-title" style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">通知书</h4>
<p class="notice-desc" style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">最新通知与提醒</p>
</div>
</div>
</a>
<!-- 告知信链接 -->
<a href="/about">
<a href="/about" target="_self">
<div class="link-card-default">
<div
style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;">
</div>
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
<div style="position: relative; z-index: 1;">
<div
style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
<i class="ri-mail-line ri-icon" style="font-size: 30px;"></i>
</div>
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">告知信</h4>
@@ -122,160 +26,224 @@
</div>
</a>
<!-- 通讯录链接 -->
<a href="/address">
<a href="/content" target="_self">
<div class="link-card-default">
<div
style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;">
</div>
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
<div style="position: relative; z-index: 1;">
<div
style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
<i class="ri-plant-line ri-icon" style="font-size: 30px;"></i>
</div>
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">自命题</h4>
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">不同的分类与标签</p>
</div>
</div>
</a>
<a href="/photos" target="_self">
<div class="link-card-default">
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
<div style="position: relative; z-index: 1;">
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
<i class="ri-folder-image-line ri-icon" style="font-size: 30px;"></i>
</div>
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">小插曲</h4>
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">值得的图片与视频</p>
</div>
</div>
</a>
<a href="/address" target="_self">
<div class="link-card-default">
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
<div style="position: relative; z-index: 1;">
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
<i class="ri-contacts-line ri-icon" style="font-size: 30px;"></i>
</div>
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">通讯录</h4>
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">一些很喜欢的人物</p>
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">猜猜看会有谁呢</p>
</div>
</div>
</a>
<!-- 朋友圈链接 -->
<a href="/friends">
<a href="/friends" target="_self">
<div class="link-card-default">
<div
style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;">
</div>
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
<div style="position: relative; z-index: 1;">
<div
style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
<i class="ri-message-3-line ri-icon" style="font-size: 30px;"></i>
</div>
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">朋友圈</h4>
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">一些有意思的内容</p>
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">大家都在干什么</p>
</div>
</div>
</a>
<a href="/store" target="_self">
<div class="link-card-default">
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
<div style="position: relative; z-index: 1;">
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
<i class="ri-building-4-line ri-icon" style="font-size: 30px;"></i>
</div>
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">储物柜</h4>
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">左边翻翻右边找找</p>
</div>
</div>
</a>
<a href="/qiyu" target="_self">
<div class="link-card-default">
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
<div style="position: relative; z-index: 1;">
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
<i class="ri-book-3-line ri-icon" style="font-size: 30px;"></i>
</div>
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">奇遇书</h4>
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">每天都值得记录</p>
</div>
</div>
</a>
<a href="/news-2026" target="_self">
<div class="link-card-default">
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
<div style="position: relative; z-index: 1;">
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
<i class="ri-file-list-3-line ri-icon" style="font-size: 30px;"></i>
</div>
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">每日报</h4>
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">运筹帷幄之中</p>
</div>
</div>
</a>
<a href="https://git.anian.cc/explore/repos" target="_blank">
<div class="link-card-default">
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
<div style="position: relative; z-index: 1;">
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
<i class="ri-git-pull-request-line ri-icon" style="font-size: 30px;"></i>
</div>
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">代码库</h4>
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">如何实现的呢</p>
</div>
</div>
</a>
<a href="#" target="_self">
<div class="link-card-default">
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
<div style="position: relative; z-index: 1;">
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
<i class="ri-door-open-line ri-icon" style="font-size: 30px;"></i>
</div>
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">课外书</h4>
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">敬请期待</p>
</div>
</div>
</a>
<a href="#" target="_self">
<div class="link-card-default">
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
<div style="position: relative; z-index: 1;">
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
<i class="ri-git-repository-line ri-icon" style="font-size: 30px;"></i>
</div>
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">笔记本</h4>
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">敬请期待</p>
</div>
</div>
</a>
</div>
<!-- 兼容PJAX的脚本（核心：保留未读类，仅重置hover/默认类） -->
<style>
@media (max-width: 767px) {
#my-links-widget { margin-top: 40px !important; }
}
@media (min-width: 768px) {
.link-container { grid-template-columns: repeat(4, 1fr) !important; }
}
.ri-icon { color: white !important; fill: white !important; }
.link-container>a { display: flex !important; flex-direction: column !important; height: 100% !important; text-decoration: none !important; }
.link-container>a>div { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; border-radius: 12px !important; padding: 25px 15px !important; text-align: center !important; position: relative !important; overflow: hidden !important; transition: all 0.3s ease !important; border: 2px solid #e2e8f0; }
.link-card-default { background: #f0f7f4 !important; }
.notice-unread {
background: #fffbeb !important;
border-color: #fce788 !important;
}
.notice-unread .icon-box { background: #d69e2e !important; }
.notice-unread .notice-title { color: #b7791f !important; }
.notice-unread .notice-desc { color: #d69e2e !important; font-weight: 500 !important; }
.link-card-hover { transform: translateY(-5px) !important; box-shadow: 0 10px 20px rgba(72, 187, 120, 0.15) !important; border-color: #74c69d !important; }
.notice-unread-hover { transform: translateY(-5px) !important; box-shadow: 0 10px 20px rgba(214, 158, 46, 0.15) !important; border-color: #ecc94b !important; }
</style>
<script>
(function() {
const widget = document.getElementById('my-links-widget');
if (!widget) return;
// 2. 公告状态初始化（保留未读类）
async function initNoticeStatus() {
const combinedDateStr = await getAllLatestNoticeDatesFromRSS();
const noticeCard = document.getElementById('notice-card');
const noticeTitle = document.getElementById('notice-title');
const noticeDesc = document.getElementById('notice-desc');
if (!noticeCard || !noticeTitle || !noticeDesc) return;
if (!noticeCard || typeof getAllLatestNoticeDatesFromRSS !== 'function') return;
if (!combinedDateStr) {
console.warn('获取最新版本失败');
return;
}
// 保存未读状态标记（避免重置类时丢失）
const isUnreadBefore = noticeCard.classList.contains('notice-unread');
// 重置基础样式（保留未读类）
noticeCard.classList.remove('link-card-hover', 'notice-unread-hover');
noticeCard.classList.add('link-card-default');
noticeTitle.textContent = '通知书';
noticeDesc.textContent = '最新通知与提醒';
const decorCircle = noticeCard.querySelector('div[style*="position: absolute; top: -20px"]');
decorCircle && (decorCircle.style.background = '#d8f3dc');
// 判断未读状态（重新应用未读类）
const local_notice = getCookie('latest_notice_date');
const isUnread = !local_notice || local_notice !== combinedDateStr;
const combinedDateStr = await getAllLatestNoticeDatesFromRSS();
const decorCircle = noticeCard.querySelector('.decor-circle');
const isUnread = combinedDateStr && (!getCookie('latest_notice_date') || getCookie('latest_notice_date') !== combinedDateStr);
if (isUnread) {
initNoticeTip();
noticeTitle.textContent = `通知书`;
noticeDesc.textContent = `有新通知待查看`;
noticeCard.classList.add('notice-unread'); // 重新添加未读类
decorCircle && (decorCircle.style.background = '#fed7d7');
typeof initNoticeTip === 'function' && initNoticeTip();
noticeCard.querySelector('.notice-title').textContent = `通知书`;
noticeCard.querySelector('.notice-desc').textContent = `有新通知待查看`;
noticeCard.classList.add('notice-unread');
if(decorCircle) decorCircle.style.background = '#fef3c7';
// 绑定点击标记已读
const noticeLink = noticeCard.closest('a');
noticeLink.removeEventListener('click', markNoticeRead);
noticeLink.addEventListener('click', markNoticeRead);
function markNoticeRead() {
setLongCookie('latest_notice_date', combinedDateStr);
markAsRead(combinedDateStr);
// 标记已读：移除未读类，恢复默认
noticeTitle.textContent = '通知书';
noticeDesc.textContent = '最新通知与提醒';
noticeCard.classList.remove('notice-unread');
noticeCard.classList.add('link-card-default');
decorCircle && (decorCircle.style.background = '#d8f3dc');
}
} else if (isUnreadBefore) {
// 已读：移除未读类
noticeCard.classList.remove('notice-unread');
noticeLink.onclick = function() {
$.cookie('latest_notice_date', combinedDateStr, { path: '/', domain: 'anian.cc', expires: 365 });
typeof markAsRead === 'function' && markAsRead(combinedDateStr);
};
}
}
// 3. Hover事件绑定（核心：不删除notice-unread类）
function initCardHover() {
// 移除所有旧事件
document.querySelectorAll('.link-container > a').forEach(card => {
card.removeEventListener('mouseenter', handleMouseEnter);
card.removeEventListener('mouseleave', handleMouseLeave);
const cardDiv = card.querySelector('div');
const decorCircle = cardDiv.querySelector('.decor-circle');
card.onmouseenter = () => {
if (cardDiv.classList.contains('notice-unread')) {
cardDiv.classList.add('notice-unread-hover');
} else {
cardDiv.classList.add('link-card-hover');
}
if(decorCircle) decorCircle.style.transform = 'scale(1.5)';
};
card.onmouseleave = () => {
cardDiv.classList.remove('link-card-hover', 'notice-unread-hover');
if(decorCircle) decorCircle.style.transform = 'scale(1)';
};
});
// 重置hover样式（保留未读类）
document.querySelectorAll('.link-container > a > div').forEach(cardDiv => {
cardDiv.classList.remove('link-card-hover', 'notice-unread-hover');
if (!cardDiv.classList.contains('link-card-default')) {
cardDiv.classList.add('link-card-default');
}
});
// 重新绑定hover事件
document.querySelectorAll('.link-container > a').forEach(card => {
card.addEventListener('mouseenter', handleMouseEnter);
card.addEventListener('mouseleave', handleMouseLeave);
});
// Hover处理函数（仅切换hover类，保留未读/默认类）
function handleMouseEnter() {
const cardDiv = this.querySelector('div');
const decorCircle = cardDiv.querySelector('div[style*="position: absolute; top: -20px"]');
// 移除默认hover，添加对应hover类
cardDiv.classList.remove('link-card-default');
if (cardDiv.id === 'notice-card' && cardDiv.classList.contains('notice-unread')) {
cardDiv.classList.add('notice-unread-hover'); // 未读→红色hover
} else {
cardDiv.classList.add('link-card-hover'); // 其他→绿色hover
}
decorCircle && (decorCircle.style.transform = 'scale(1.5)');
}
function handleMouseLeave() {
const cardDiv = this.querySelector('div');
const decorCircle = cardDiv.querySelector('div[style*="position: absolute; top: -20px"]');
// 移除hover类，恢复默认类（保留未读类）
cardDiv.classList.remove('link-card-hover', 'notice-unread-hover');
cardDiv.classList.add('link-card-default');
decorCircle && (decorCircle.style.transform = 'scale(1)');
}
}
// 4. 统一初始化入口
function initAll() {
initNoticeStatus();
if (!document.getElementById('my-links-widget')) return;
initCardHover();
initNoticeStatus();
}
// 5. 绑定加载事件（初始+PJAX）
document.addEventListener("DOMContentLoaded", initAll);
document.addEventListener("pjax:complete", initAll);
window.jQuery && jQuery(document).on('pjax:complete', initAll);
if (document.readyState === 'loading') {
document.addEventListener("DOMContentLoaded", initAll);
} else {
initAll();
}
})();
</script>
</div>
embed-code/page/notice.html
-2
View File
@@ -236,7 +236,6 @@
// 检查是否有解析错误
const parseError = xmlDoc.getElementsByTagName("parsererror");
if (parseError.length > 0) {
console.error("[RSS Debug] XML 解析失败", parseError[0].textContent);
listBox.innerHTML = '<div style="color:#f56c6c;">XML 解析错误</div>';
return;
}
@@ -265,7 +264,6 @@
listBox.innerHTML = htmlContent || '<div style="color:#999;">暂无更新内容</div>';
} catch (error) {
console.error('[RSS Debug] 请求发生异常:', error);
listBox.innerHTML = `<div style="color:#f56c6c;font-size:14px;">请求失败: ${error.message}</div>`;
}
}