1275 lines
29 KiB
HTML
Executable File
1275 lines
29 KiB
HTML
Executable File
{% extends "base.html" %}
|
||
|
||
{% block content %}
|
||
|
||
<!-- 添加华为登录所需的 meta 标签 -->
|
||
<head>
|
||
<meta name="client_id" content="{{ config.HUAWEI_APP_ID }}" />
|
||
<meta name="redirect_uri" content="{{ config.HUAWEI_REDIRECT_URI }}" />
|
||
<meta name="scope" content="openid profile email https://www.huawei.com/auth/account/base.profile" />
|
||
</head>
|
||
|
||
<!-- 添加网站标题区域 -->
|
||
<div class="site-header">
|
||
<div class="site-title">
|
||
<h1 id="greetingText">更多</h1>
|
||
</div>
|
||
<div class="header-actions">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加提示消息 -->
|
||
<div id="toast" class="developing-tip">
|
||
<span id="toastMessage"></span>
|
||
</div>
|
||
|
||
<div class="more-container">
|
||
<!-- 新增：用户信息 section -->
|
||
<div class="more-section user-section">
|
||
{% if session.get('huawei_user') %}
|
||
<!-- 已登录状态 -->
|
||
<div class="more-item" onclick="window.location.href='{{ url_for('user_profile') }}'">
|
||
|
||
<div class="user-avatar">
|
||
{% if session.huawei_user.avatar %}
|
||
<img src="{{ session.huawei_user.avatar }}" alt="{{ session.huawei_user.name }}" class="avatar-img">
|
||
{% else %}
|
||
<i class="fas fa-user"></i>
|
||
{% endif %}
|
||
</div>
|
||
<div class="user-info">
|
||
<div class="user-name">{{ session.huawei_user.name }}</div>
|
||
</div>
|
||
<div class="more-item-arrow">
|
||
<i class="fas fa-chevron-right"></i>
|
||
</div>
|
||
</div>
|
||
{% else %}
|
||
<!-- 未登录状态 -->
|
||
<div class="more-item" onclick="huaweiLogin(event)">
|
||
<div class="user-avatar">
|
||
<i class="fas fa-user"></i>
|
||
</div>
|
||
<div class="user-info">
|
||
<div class="user-name">未登录</div>
|
||
</div>
|
||
<div class="more-item-arrow">
|
||
<i class="fas fa-chevron-right"></i>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- 第一个 more-section：外部链接（原第二个） -->
|
||
<div class="more-section" style="margin-top: 20px;">
|
||
<!-- 心愿单功能 -->
|
||
<div class="more-item" onclick="handleWishlistClick()">
|
||
<div class="more-item-icon">
|
||
<i class="fas fa-heart"></i>
|
||
</div>
|
||
<div class="more-item-text">
|
||
心愿单
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 邀请排行榜 -->
|
||
<!--<div class="more-item" onclick="window.location.href='{{ url_for('invite_leaderboard') }}'">-->
|
||
<!-- <div class="more-item-icon">-->
|
||
<!-- <i class="fas fa-trophy"></i>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="more-item-text">-->
|
||
<!-- 邀请排行榜-->
|
||
<!-- </div>-->
|
||
<!--<div class="more-item-badge">-->
|
||
<!-- <i class="fas fa-gift"></i>-->
|
||
<!-- <span>赢京东E卡</span>-->
|
||
<!--</div>-->
|
||
<!--</div>-->
|
||
|
||
<!-- Hap包投稿 -->
|
||
<div class="more-item" onclick="window.open('https://wj.qq.com/s2/17358082/eb84/', '_blank')">
|
||
<div class="more-item-icon">
|
||
<i class="fas fa-upload"></i>
|
||
</div>
|
||
<div class="more-item-text">
|
||
Hap包投稿
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="more-item" onclick="showDevelopingTip()">
|
||
<div class="more-item-icon">
|
||
<i class="fas fa-cube"></i>
|
||
</div>
|
||
<div class="more-item-text">
|
||
HAP包查看器
|
||
</div>
|
||
</div>
|
||
<div class="more-item" onclick="showDevelopingTip()">
|
||
<div class="more-item-icon">
|
||
<i class="fas fa-comments"></i>
|
||
</div>
|
||
<div class="more-item-text">
|
||
NEXT BBS
|
||
</div>
|
||
</div> -->
|
||
|
||
<!--<div class="more-item" onclick="handleMyComments()">-->
|
||
<!-- <div class="more-item-icon">-->
|
||
<!-- <i class="fas fa-comment-dots"></i>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="more-item-text">-->
|
||
<!-- 我的评论-->
|
||
<!-- </div>-->
|
||
<!-- <div class="more-item-badge">
|
||
<!-- <i class="fas fa-comment"></i>-->
|
||
<!-- <span>查看状态</span>-->
|
||
<!-- </div> -->
|
||
<!--</div>-->
|
||
</div>
|
||
|
||
<!-- 第二个 more-section：主要功能（原第一个） -->
|
||
<div class="more-section" style="margin-top: 20px;">
|
||
<div class="more-item" onclick="toggleTheme()">
|
||
<div class="more-item-icon">
|
||
<i class="fas fa-moon dark-icon"></i>
|
||
<i class="fas fa-sun light-icon"></i>
|
||
</div>
|
||
<div class="more-item-text">
|
||
<span class="dark-text">深色模式</span>
|
||
<span class="light-text">浅色模式</span>
|
||
</div>
|
||
</div>
|
||
<div class="more-item" onclick="window.location.href='{{ url_for('terms') }}'">
|
||
<div class="more-item-icon">
|
||
<i class="fas fa-file-alt"></i>
|
||
</div>
|
||
<div class="more-item-text">
|
||
使用条款
|
||
</div>
|
||
</div>
|
||
<div class="more-item" onclick="window.location.href='{{ url_for('privacy') }}'">
|
||
<div class="more-item-icon">
|
||
<i class="fas fa-shield-alt"></i>
|
||
</div>
|
||
<div class="more-item-text">
|
||
隐私政策
|
||
</div>
|
||
</div>
|
||
<div class="more-item" onclick="window.location.href='{{ url_for('cookie_policy') }}'">
|
||
<div class="more-item-icon">
|
||
<i class="fas fa-cookie-bite"></i>
|
||
</div>
|
||
<div class="more-item-text">
|
||
Cookie政策
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加提示元素 -->
|
||
<div class="developing-tip" id="developingTip">开发中</div>
|
||
</div>
|
||
|
||
<!-- 底部导航栏 -->
|
||
{% include 'nav_bar.html' %}
|
||
|
||
<style>
|
||
/* 基础过渡效果 */
|
||
:root {
|
||
--transition-speed: 0.3s;
|
||
}
|
||
|
||
/* 网站标题栏样式 */
|
||
.site-header {
|
||
background: #F5F8FB;
|
||
padding: 8px 15px 3px 15px;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
transition: background-color var(--transition-speed) ease;
|
||
}
|
||
|
||
.site-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.site-logo {
|
||
height: 40px;
|
||
width: auto;
|
||
margin-right: 5px;
|
||
display: none;
|
||
}
|
||
|
||
.light-mode-logo {
|
||
display: block;
|
||
}
|
||
|
||
[data-theme="dark"] .light-mode-logo {
|
||
display: none;
|
||
}
|
||
|
||
[data-theme="dark"] .dark-mode-logo {
|
||
display: block;
|
||
}
|
||
|
||
.site-header h1 {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #000;
|
||
margin: 0;
|
||
text-align: left;
|
||
padding: 0;
|
||
transition: color var(--transition-speed) ease;
|
||
}
|
||
|
||
[data-theme="dark"] .site-header {
|
||
background: #1a1a1a;
|
||
}
|
||
|
||
[data-theme="dark"] .site-header h1 {
|
||
color: #fff;
|
||
}
|
||
|
||
/* 修改页面背景色和容器样式 */
|
||
html {
|
||
background-color: #F5F8FB;
|
||
transition: background-color var(--transition-speed) ease;
|
||
}
|
||
|
||
html[data-theme="dark"] {
|
||
background-color: #1a1a1a;
|
||
}
|
||
|
||
body {
|
||
background-color: #F5F8FB;
|
||
min-height: 100vh;
|
||
margin: 0;
|
||
transition: background-color var(--transition-speed) ease;
|
||
}
|
||
|
||
[data-theme="dark"] body {
|
||
background-color: #1a1a1a;
|
||
}
|
||
|
||
/* 修改 more-container 样式 */
|
||
.more-container {
|
||
padding: 20px;
|
||
text-align: center;
|
||
margin-bottom: 0;
|
||
margin-top: 35px;
|
||
min-height: calc(100vh - 120px);
|
||
background-color: #F5F8FB;
|
||
transition: all var(--transition-speed) ease;
|
||
padding-bottom: 70px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
[data-theme="dark"] .more-container {
|
||
background-color: #1a1a1a;
|
||
}
|
||
|
||
/* 确保整个页面容器都有过渡效果 */
|
||
#content {
|
||
background-color: #F5F8FB;
|
||
min-height: 100vh;
|
||
transition: background-color var(--transition-speed) ease;
|
||
}
|
||
|
||
[data-theme="dark"] #content {
|
||
background-color: #1a1a1a;
|
||
}
|
||
|
||
/* 添加主题切换时的过渡效果 */
|
||
.theme-transitioning {
|
||
transition: background-color var(--transition-speed) ease !important;
|
||
}
|
||
|
||
.theme-transitioning * {
|
||
transition: background-color var(--transition-speed) ease !important;
|
||
}
|
||
|
||
/* 修改 more-section 样式 */
|
||
.more-section {
|
||
max-width: 600px;
|
||
margin: 0 auto 15px;
|
||
background: white;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
transition: all var(--transition-speed) ease;
|
||
}
|
||
|
||
[data-theme="dark"] .more-section {
|
||
background: #242424;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
/* 移除全局过渡效果，只保留必要的过渡 */
|
||
*, *::before, *::after {
|
||
transition: none;
|
||
}
|
||
|
||
/* 只为需要过渡效果的元素添加过渡 */
|
||
.site-header,
|
||
.more-item,
|
||
.more-item-icon,
|
||
.more-item-text,
|
||
.more-item-icon i {
|
||
transition: all var(--transition-speed) ease;
|
||
}
|
||
|
||
/* 优化过渡效果 */
|
||
.theme-transitioning .more-section {
|
||
transition: background-color var(--transition-speed) ease,
|
||
box-shadow var(--transition-speed) ease;
|
||
}
|
||
|
||
.theme-transitioning .more-container {
|
||
transition: background-color var(--transition-speed) ease;
|
||
}
|
||
|
||
.more-item {
|
||
padding: 10px 16px;
|
||
min-height: 65px;
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
|
||
.more-item:hover {
|
||
background-color: rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.more-item:active {
|
||
background-color: rgba(0,0,0,0.05);
|
||
transition: none;
|
||
}
|
||
|
||
[data-theme="dark"] .more-item:hover {
|
||
background-color: rgba(255,255,255,0.05);
|
||
}
|
||
|
||
[data-theme="dark"] .more-item:active {
|
||
background-color: rgba(255,255,255,0.05);
|
||
transition: none;
|
||
}
|
||
|
||
.more-item-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
transition: background-color var(--transition-speed) ease;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.more-item-icon i {
|
||
font-size: 16px;
|
||
color: #666;
|
||
transition: color var(--transition-speed) ease;
|
||
}
|
||
|
||
.more-item-text {
|
||
flex: 1;
|
||
text-align: left;
|
||
font-size: 14px;
|
||
color: #333;
|
||
transition: color var(--transition-speed) ease;
|
||
}
|
||
|
||
/* 确保所有元素在暗色模式下的过渡效果 */
|
||
*, *::before, *::after {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 暗色/亮色模式图标和文字切换 */
|
||
[data-theme="dark"] .dark-icon,
|
||
[data-theme="dark"] .dark-text {
|
||
opacity: 0;
|
||
position: absolute;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.light-icon,
|
||
.light-text {
|
||
opacity: 0;
|
||
position: absolute;
|
||
pointer-events: none;
|
||
}
|
||
|
||
[data-theme="dark"] .light-icon,
|
||
[data-theme="dark"] .light-text {
|
||
opacity: 1;
|
||
position: static;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* 主题切换图标容器 */
|
||
.theme-icons {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
[data-theme="dark"] .more-item:hover {
|
||
background-color: rgba(255,255,255,0.05);
|
||
}
|
||
|
||
[data-theme="dark"] .more-item-icon i {
|
||
color: #999;
|
||
}
|
||
|
||
[data-theme="dark"] .more-item-text {
|
||
color: #fff;
|
||
}
|
||
|
||
/* 充电按钮样式 */
|
||
.button {
|
||
--h-button: 42px;
|
||
--w-button: 88px;
|
||
--round: 0.75rem;
|
||
cursor: pointer;
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
transition: all 0.25s ease;
|
||
background: radial-gradient(
|
||
65.28% 65.28% at 50% 100%,
|
||
rgba(223, 113, 255, 0.8) 0%,
|
||
rgba(223, 113, 255, 0) 100%
|
||
),
|
||
linear-gradient(0deg, #7a5af8, #7a5af8);
|
||
border-radius: var(--round);
|
||
border: none;
|
||
outline: none;
|
||
padding: 10px 16px;
|
||
}
|
||
|
||
.donate-new-button {
|
||
margin-right: 15px;
|
||
}
|
||
|
||
/* 确保所有元素在主题切换时有平滑过渡 */
|
||
.more-item,
|
||
.more-item-icon,
|
||
.more-item-text,
|
||
.more-item-icon i {
|
||
transition: all var(--transition-speed) ease;
|
||
}
|
||
|
||
/* 其他样式保持不变... */
|
||
|
||
footer,
|
||
.footer {
|
||
display: none !important;
|
||
}
|
||
|
||
/* 用户信息样式 */
|
||
.user-section {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.user-section .more-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10px;
|
||
position: relative;
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 42px;
|
||
height: 42px;
|
||
border-radius: 50%;
|
||
background: #f0f0f0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 12px;
|
||
transition: background-color var(--transition-speed) ease;
|
||
}
|
||
|
||
.user-avatar i {
|
||
font-size: 20px;
|
||
color: #999;
|
||
transition: color var(--transition-speed) ease;
|
||
}
|
||
|
||
.user-info {
|
||
flex: 1;
|
||
text-align: left;
|
||
}
|
||
|
||
.user-name {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
transition: color var(--transition-speed) ease;
|
||
}
|
||
|
||
.user-status {
|
||
font-size: 13px;
|
||
color: #999;
|
||
transition: color var(--transition-speed) ease;
|
||
}
|
||
|
||
.more-item-arrow {
|
||
color: #ccc;
|
||
font-size: 14px;
|
||
transition: color var(--transition-speed) ease;
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .user-avatar {
|
||
background: #333;
|
||
}
|
||
|
||
[data-theme="dark"] .user-avatar i {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .user-name {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .user-status {
|
||
color: #888;
|
||
}
|
||
|
||
[data-theme="dark"] .more-item-arrow {
|
||
color: #666;
|
||
}
|
||
|
||
/* 为非用户信息部分的 more-item 添加分隔线 */
|
||
.more-section:not(.user-section) .more-item:not(:last-child)::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 16px;
|
||
right: 16px;
|
||
height: 1px;
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
[data-theme="dark"] .more-section:not(.user-section) .more-item:not(:last-child)::after {
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
/* 开发中提示样式 */
|
||
.developing-tip {
|
||
position: fixed;
|
||
bottom: 100px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(0, 0, 0, 0.85);
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 25px;
|
||
font-size: 14px;
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||
pointer-events: none;
|
||
transform: translate(-50%, 20px);
|
||
}
|
||
|
||
[data-theme="dark"] .developing-tip {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
color: black;
|
||
}
|
||
|
||
.developing-tip.show {
|
||
opacity: 1;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
|
||
/* 添加动画效果 */
|
||
@keyframes tipAppear {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translate(-50%, 20px);
|
||
}
|
||
20% {
|
||
opacity: 1;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
80% {
|
||
opacity: 1;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
transform: translate(-50%, -20px);
|
||
}
|
||
}
|
||
|
||
.developing-tip.show {
|
||
animation: tipAppear 2s ease forwards;
|
||
}
|
||
|
||
.avatar-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.user-section .more-item {
|
||
cursor: pointer;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.user-section .more-item:hover {
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
[data-theme="dark"] .user-section .more-item:hover {
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
/* 提示消息样式 */
|
||
.toast {
|
||
position: fixed;
|
||
top: 100px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(0, 0, 0, 0.7);
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: auto;
|
||
white-space: pre-wrap;
|
||
max-width: calc(100% - 40px);
|
||
}
|
||
|
||
.toast.show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
animation: toastIn 0.3s ease forwards;
|
||
}
|
||
|
||
#toastMessage {
|
||
text-align: center;
|
||
line-height: 1.4;
|
||
word-break: break-word;
|
||
}
|
||
|
||
@keyframes toastIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translate(-50%, -20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .toast {
|
||
background: rgba(0, 0, 0, 0.85);
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media screen and (max-width: 768px) {
|
||
.toast {
|
||
padding: 10px 20px;
|
||
font-size: 13px;
|
||
max-width: calc(100% - 24px);
|
||
margin: 0 12px;
|
||
}
|
||
}
|
||
|
||
/* PC端适配 */
|
||
@media screen and (min-width: 769px) {
|
||
.toast {
|
||
max-width: 300px;
|
||
padding: 10px 20px;
|
||
}
|
||
}
|
||
|
||
/* 添加徽章样式 */
|
||
.more-item-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 2px 8px;
|
||
background: rgba(255, 59, 48, 0.1);
|
||
color: #ff3b30;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.more-item-badge i {
|
||
font-size: 10px;
|
||
}
|
||
|
||
[data-theme="dark"] .more-item-badge {
|
||
background: rgba(255, 59, 48, 0.2);
|
||
color: #ff453a;
|
||
}
|
||
|
||
/* 确保徽章在暗色模式下也有过渡效果 */
|
||
.more-item-badge {
|
||
transition: all var(--transition-speed) ease;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
function toggleTheme() {
|
||
var html = document.documentElement;
|
||
var currentTheme = html.getAttribute('data-theme');
|
||
var newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||
|
||
// 添加过渡类
|
||
document.body.classList.add('theme-transitioning');
|
||
|
||
html.setAttribute('data-theme', newTheme);
|
||
localStorage.setItem('theme', newTheme);
|
||
|
||
// 触发一个自定义事件，通知其他页面主题已更改
|
||
var event = new CustomEvent('themeChanged', { detail: { theme: newTheme } });
|
||
document.dispatchEvent(event);
|
||
|
||
// 过渡完成后移除过渡类
|
||
setTimeout(function() {
|
||
document.body.classList.remove('theme-transitioning');
|
||
}, 300); // 与 CSS 过渡时间匹配
|
||
}
|
||
|
||
var tipTimeout;
|
||
|
||
function showDevelopingTip() {
|
||
var tip = document.getElementById('developingTip');
|
||
|
||
// 如果已经有正在显示的提示，先清除它
|
||
if (tipTimeout) {
|
||
clearTimeout(tipTimeout);
|
||
tip.classList.remove('show');
|
||
void tip.offsetWidth; // 触发重绘
|
||
}
|
||
|
||
// 显示新提示
|
||
tip.classList.add('show');
|
||
|
||
// 设置定时器移除提示
|
||
tipTimeout = setTimeout(function() {
|
||
tip.classList.remove('show');
|
||
}, 2000);
|
||
}
|
||
|
||
function huaweiLogin(event) {
|
||
// 阻止事件冒泡
|
||
if (event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
}
|
||
|
||
// 从meta标签获取配置
|
||
var clientId = '', redirectUri = '', scope = '';
|
||
for(var meta of document.getElementsByTagName("meta")) {
|
||
switch(meta.name) {
|
||
case 'client_id':
|
||
clientId = meta.content;
|
||
break;
|
||
case 'redirect_uri':
|
||
redirectUri = meta.content;
|
||
break;
|
||
case 'scope':
|
||
scope = meta.content;
|
||
break;
|
||
}
|
||
}
|
||
|
||
var csrf_token = '{{ csrf_token() }}';
|
||
|
||
// 添加日志输出
|
||
console.log('Login parameters:', {
|
||
clientId: clientId,
|
||
redirectUri: redirectUri,
|
||
scope: scope,
|
||
csrf_token: csrf_token
|
||
});
|
||
|
||
var authUrl = 'https://oauth-login.cloud.huawei.com/oauth2/v3/authorize?' +
|
||
'response_type=code' +
|
||
'&access_type=offline' +
|
||
'&state=' + encodeURIComponent(csrf_token) +
|
||
'&client_id=' + encodeURIComponent(clientId) +
|
||
'&redirect_uri=' + encodeURIComponent(redirectUri) +
|
||
'&scope=' + scope.split(' ').join('+');
|
||
|
||
console.log('Auth URL:', authUrl);
|
||
window.location.href = authUrl;
|
||
}
|
||
|
||
// 添加登出函数
|
||
function logout() {
|
||
fetch('/logout', {
|
||
method: 'POST',
|
||
credentials: 'same-origin'
|
||
}).then(() => {
|
||
window.location.reload();
|
||
});
|
||
}
|
||
|
||
// Toast 提示函数
|
||
function showToast(message) {
|
||
const toast = document.getElementById('toast');
|
||
const toastMessage = document.getElementById('toastMessage');
|
||
toastMessage.textContent = message;
|
||
toast.classList.add('show');
|
||
|
||
setTimeout(() => {
|
||
toast.classList.remove('show');
|
||
}, 2000);
|
||
}
|
||
|
||
function handleWishlistClick() {
|
||
{% if session.get('huawei_user') %}
|
||
window.location.href = '{{ url_for("wishlist") }}';
|
||
{% else %}
|
||
showToast('请先登录');
|
||
{% endif %}
|
||
}
|
||
|
||
function handleMyComments() {
|
||
{% if session.get('huawei_user') %}
|
||
window.location.href = '{{ url_for("wiki.my_comments") }}';
|
||
{% else %}
|
||
showToast('请先登录');
|
||
{% endif %}
|
||
}
|
||
|
||
// 检查URL参数是否包含错误信息
|
||
window.addEventListener('load', function() {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const error = urlParams.get('error');
|
||
const loginSuccess = urlParams.get('login_success');
|
||
if (error) {
|
||
showNotification(decodeURIComponent(error));
|
||
}
|
||
// 显示登录成功提示，并清除URL参数
|
||
if (loginSuccess === 'true') {
|
||
showToast('登录成功');
|
||
// 移除URL中的login_success参数
|
||
urlParams.delete('login_success');
|
||
const newUrl = `${window.location.pathname}${urlParams.toString() ? '?' + urlParams.toString() : ''}`;
|
||
window.history.replaceState({}, '', newUrl);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<!-- 添加额外的样式来处理过渡 -->
|
||
<style>
|
||
.theme-transitioning * {
|
||
transition: all var(--transition-speed) ease !important;
|
||
}
|
||
|
||
/* 确保背景色过渡平滑 */
|
||
body {
|
||
transition: background-color var(--transition-speed) ease;
|
||
}
|
||
|
||
[data-theme="dark"] body {
|
||
background-color: #1a1a1a;
|
||
}
|
||
|
||
/* 优化过渡效果 */
|
||
.more-section * {
|
||
transition: background-color var(--transition-speed) ease,
|
||
color var(--transition-speed) ease,
|
||
border-color var(--transition-speed) ease,
|
||
box-shadow var(--transition-speed) ease;
|
||
}
|
||
</style>
|
||
|
||
<!-- 添加登录状态样式 -->
|
||
<style>
|
||
.user-section .more-item {
|
||
padding: 10px 16px;
|
||
min-height: 65px;
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 42px;
|
||
height: 42px;
|
||
border-radius: 50%;
|
||
background: #f0f0f0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 12px;
|
||
transition: background-color var(--transition-speed) ease;
|
||
}
|
||
|
||
.user-avatar i {
|
||
font-size: 20px;
|
||
color: #999;
|
||
transition: color var(--transition-speed) ease;
|
||
}
|
||
|
||
.user-info {
|
||
flex: 1;
|
||
text-align: left;
|
||
}
|
||
|
||
.user-name {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
transition: color var(--transition-speed) ease;
|
||
}
|
||
|
||
.user-status {
|
||
font-size: 13px;
|
||
color: #999;
|
||
transition: color var(--transition-speed) ease;
|
||
}
|
||
|
||
[data-theme="dark"] .user-avatar {
|
||
background: #333;
|
||
}
|
||
|
||
[data-theme="dark"] .user-avatar i {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .user-name {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .user-status {
|
||
color: #888;
|
||
}
|
||
|
||
[data-theme="dark"] .more-item-arrow {
|
||
color: #666;
|
||
}
|
||
|
||
/* 为非用户信息部分的 more-item 添加分隔线 */
|
||
.more-section:not(.user-section) .more-item:not(:last-child)::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 16px;
|
||
right: 16px;
|
||
height: 1px;
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
[data-theme="dark"] .more-section:not(.user-section) .more-item:not(:last-child)::after {
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
/* 开发中提示样式 */
|
||
.developing-tip {
|
||
position: fixed;
|
||
bottom: 100px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(0, 0, 0, 0.85);
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 25px;
|
||
font-size: 14px;
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||
pointer-events: none;
|
||
transform: translate(-50%, 20px);
|
||
}
|
||
|
||
[data-theme="dark"] .developing-tip {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
color: black;
|
||
}
|
||
|
||
.developing-tip.show {
|
||
opacity: 1;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
|
||
/* 添加动画效果 */
|
||
@keyframes tipAppear {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translate(-50%, 20px);
|
||
}
|
||
20% {
|
||
opacity: 1;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
80% {
|
||
opacity: 1;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
transform: translate(-50%, -20px);
|
||
}
|
||
}
|
||
|
||
.developing-tip.show {
|
||
animation: tipAppear 2s ease forwards;
|
||
}
|
||
|
||
.avatar-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.user-section .more-item {
|
||
cursor: pointer;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.user-section .more-item:hover {
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
[data-theme="dark"] .user-section .more-item:hover {
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
/* 提示消息样式 */
|
||
.toast {
|
||
position: fixed;
|
||
top: 100px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(0, 0, 0, 0.7);
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: auto;
|
||
white-space: pre-wrap;
|
||
max-width: calc(100% - 40px);
|
||
}
|
||
|
||
.toast.show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
animation: toastIn 0.3s ease forwards;
|
||
}
|
||
|
||
#toastMessage {
|
||
text-align: center;
|
||
line-height: 1.4;
|
||
word-break: break-word;
|
||
}
|
||
|
||
@keyframes toastIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translate(-50%, -20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .toast {
|
||
background: rgba(0, 0, 0, 0.85);
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media screen and (max-width: 768px) {
|
||
.toast {
|
||
padding: 10px 20px;
|
||
font-size: 13px;
|
||
max-width: calc(100% - 24px);
|
||
margin: 0 12px;
|
||
}
|
||
}
|
||
|
||
/* PC端适配 */
|
||
@media screen and (min-width: 769px) {
|
||
.toast {
|
||
max-width: 300px;
|
||
padding: 10px 20px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- 在页面底部添加弹窗元素 -->
|
||
<div id="loginNotification" class="notification">
|
||
<div class="notification-content">
|
||
<span id="notificationMessage"></span>
|
||
<button onclick="closeNotification()">确定</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加弹窗样式 -->
|
||
<style>
|
||
.notification {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 1000;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.notification-content {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
text-align: center;
|
||
}
|
||
|
||
[data-theme="dark"] .notification-content {
|
||
background: #333;
|
||
color: white;
|
||
}
|
||
|
||
.notification button {
|
||
margin-top: 15px;
|
||
padding: 8px 20px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
background: #007bff;
|
||
color: white;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.notification button:hover {
|
||
background: #0056b3;
|
||
}
|
||
</style>
|
||
|
||
<!-- 添加弹窗相关脚本 -->
|
||
<script>
|
||
function showNotification(message) {
|
||
const notification = document.getElementById('loginNotification');
|
||
const messageElement = document.getElementById('notificationMessage');
|
||
messageElement.textContent = message;
|
||
notification.style.display = 'flex';
|
||
}
|
||
|
||
function closeNotification() {
|
||
const notification = document.getElementById('loginNotification');
|
||
notification.style.display = 'none';
|
||
}
|
||
|
||
// 检查URL参数是否包含错误信息
|
||
window.addEventListener('load', function() {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const error = urlParams.get('error');
|
||
const loginSuccess = urlParams.get('login_success');
|
||
if (error) {
|
||
showNotification(decodeURIComponent(error));
|
||
}
|
||
// 显示登录成功提示，并清除URL参数
|
||
if (loginSuccess === 'true') {
|
||
showToast('登录成功');
|
||
// 移除URL中的login_success参数
|
||
urlParams.delete('login_success');
|
||
const newUrl = `${window.location.pathname}${urlParams.toString() ? '?' + urlParams.toString() : ''}`;
|
||
window.history.replaceState({}, '', newUrl);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
function getGreeting() {
|
||
const hour = new Date().getHours();
|
||
let greeting;
|
||
|
||
if (hour >= 23 || hour < 5) {
|
||
greeting = "夜深了，注意休息 🌙";
|
||
} else if (hour >= 5 && hour < 8) {
|
||
greeting = "早安，新的一天开始啦 🌅";
|
||
} else if (hour >= 8 && hour < 11) {
|
||
greeting = "上午好，今天也要加油 ☀️";
|
||
} else if (hour >= 11 && hour < 13) {
|
||
greeting = "中午好，记得按时吃饭 🍚";
|
||
} else if (hour >= 13 && hour < 17) {
|
||
greeting = "下午好，来杯咖啡提提神 ☕";
|
||
} else if (hour >= 17 && hour < 19) {
|
||
greeting = "傍晚好，收获满满的一天 🌇";
|
||
} else if (hour >= 19 && hour < 23) {
|
||
greeting = "晚上好，今天过得开心吗 🌟";
|
||
}
|
||
|
||
return greeting;
|
||
}
|
||
|
||
function updateGreeting() {
|
||
const greetingElement = document.getElementById('greetingText');
|
||
if (greetingElement) {
|
||
greetingElement.textContent = getGreeting();
|
||
}
|
||
}
|
||
|
||
// 初始更新问候语
|
||
document.addEventListener('DOMContentLoaded', updateGreeting);
|
||
|
||
// 每分钟更新一次问候语
|
||
setInterval(updateGreeting, 60000);
|
||
</script>
|
||
|
||
<style>
|
||
.site-header h1 {
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
/* 添加问候语切换动画 */
|
||
@keyframes greetingFade {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-10px);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
#greetingText {
|
||
animation: greetingFade 0.5s ease;
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block footer %}{% endblock %} |