326 lines
6.8 KiB
HTML
Executable File
326 lines
6.8 KiB
HTML
Executable File
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="hot-apps-page">
|
|
<div class="header">
|
|
<a href="{{ url_for('index') }}" class="back-link" title="返回首页">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1>热门应用</h1>
|
|
</div>
|
|
|
|
<div class="apps-grid">
|
|
{% for app in hot_apps %}
|
|
<div class="app-tile" onclick="handleAppClick(event, '{{ app.id }}')">
|
|
<div class="app-tile-content">
|
|
<div class="app-tile-icon">
|
|
{% if 'http' in app.icon_path %}
|
|
<img src="{{ app.icon_path }}" alt="{{ app.name }}">
|
|
{% else %}
|
|
<img src="{{ url_for('static', filename='uploads/' + app.icon_path) }}" alt="{{ app.name }}">
|
|
{% endif %}
|
|
</div>
|
|
<div class="app-tile-info">
|
|
<div class="app-tile-header">
|
|
<h3>{{ app.name }}</h3>
|
|
<span class="category-tag">{{ app.category_name }}</span>
|
|
</div>
|
|
<div class="app-tile-meta">
|
|
{% if app.version and app.version.strip() %}
|
|
<span class="version-tag">{{ app.version }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 生成客户端ID
|
|
function generateClientId() {
|
|
return 'client_' + Math.random().toString(36).substr(2, 9);
|
|
}
|
|
|
|
// 获取或创建客户端ID
|
|
function getClientId() {
|
|
let clientId = localStorage.getItem('clientId');
|
|
if (!clientId) {
|
|
clientId = generateClientId();
|
|
localStorage.setItem('clientId', clientId);
|
|
}
|
|
return clientId;
|
|
}
|
|
|
|
// 简化点击处理函数
|
|
function handleAppClick(event, appId) {
|
|
window.location.href = `/app/${appId}`;
|
|
}
|
|
|
|
// 保存滚动位置和来源页面
|
|
window.addEventListener('beforeunload', () => {
|
|
sessionStorage.setItem('hotAppsScrollPosition', window.scrollY);
|
|
// 保存来源页面的路径，但只在不是从应用详情页来时保存
|
|
if (document.referrer && !document.referrer.includes('/app/')) {
|
|
sessionStorage.setItem('hotAppsReferer', document.referrer);
|
|
}
|
|
});
|
|
|
|
// 恢复滚动位置
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// 检查是否是从应用详情页返回
|
|
if (document.referrer.includes('/app/')) {
|
|
const scrollPosition = sessionStorage.getItem('hotAppsScrollPosition');
|
|
if (scrollPosition) {
|
|
window.scrollTo(0, parseInt(scrollPosition));
|
|
// 不要在这里删除位置记录，因为可能还需要返回
|
|
}
|
|
}
|
|
});
|
|
|
|
// 修改返回链接的处理
|
|
document.querySelector('.back-link').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
window.history.back();
|
|
});
|
|
|
|
// 设置客户端ID cookie
|
|
document.cookie = `client_id=${getClientId()}; path=/; max-age=31536000`;
|
|
</script>
|
|
|
|
<style>
|
|
.hot-apps-page {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 60px 15px 20px 15px;
|
|
transform: none !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
margin-bottom: 30px;
|
|
background: white;
|
|
padding: 10px 15px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
transform: none !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
.back-link {
|
|
color: #666;
|
|
text-decoration: none;
|
|
padding: 8px;
|
|
border-radius: 50%;
|
|
background: #f5f5f7;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
transform: none !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
.back-link:hover {
|
|
background: #e5e5e7;
|
|
color: #333;
|
|
}
|
|
|
|
.header h1 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
color: #333;
|
|
font-weight: 500;
|
|
font-family: "SimHei", "黑体", sans-serif;
|
|
transform: none !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
.apps-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.app-tile {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.app-tile:hover {
|
|
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.app-tile-content {
|
|
padding: 15px;
|
|
display: flex;
|
|
gap: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.app-tile-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.app-tile-icon img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 16px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.app-tile-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.app-tile-header {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.app-tile-header h3 {
|
|
margin: 0 0 6px 0;
|
|
font-size: 16px;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.category-tag {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
color: #666;
|
|
background: #f0f0f0;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.app-tile-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.version-tag {
|
|
font-size: 12px;
|
|
color: #007AFF;
|
|
background: #E3F2FD;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.update-badge {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.apps-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* 暗色模式样式 */
|
|
[data-theme="dark"] .hot-apps-page {
|
|
background: #1a1a1a;
|
|
}
|
|
|
|
[data-theme="dark"] .header {
|
|
background: #242424;
|
|
}
|
|
|
|
[data-theme="dark"] .header h1 {
|
|
color: #fff;
|
|
}
|
|
|
|
[data-theme="dark"] .back-link {
|
|
color: #ccc;
|
|
background: #333;
|
|
}
|
|
|
|
[data-theme="dark"] .back-link:hover {
|
|
background: #444;
|
|
color: #fff;
|
|
}
|
|
|
|
[data-theme="dark"] .app-tile {
|
|
background: #242424;
|
|
}
|
|
|
|
[data-theme="dark"] .app-tile-header h3 {
|
|
color: #fff;
|
|
}
|
|
|
|
[data-theme="dark"] .category-tag {
|
|
background: #333;
|
|
color: #ccc;
|
|
}
|
|
|
|
[data-theme="dark"] .version-tag {
|
|
background: #333;
|
|
color: #007AFF;
|
|
}
|
|
|
|
.floating-buttons {
|
|
position: fixed;
|
|
bottom: 40px;
|
|
right: 20px;
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.theme-toggle {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
background: #fff;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
padding: 0;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* 暗色模式样式 */
|
|
[data-theme="dark"] .theme-toggle {
|
|
background: #333;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 768px) {
|
|
.floating-buttons {
|
|
bottom: 30px;
|
|
right: 15px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.theme-toggle {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %} |