<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TENG YUAN界面 - 多页面系统</title>
<!-- 引入外部资源 -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
/* ==================== 基础样式 ==================== */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
overflow: hidden; /* 隐藏整个页面的滚动条 */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
height: 100vh;
transition: all 0.3s ease;
}
/* 白天模式 */
body.light-mode {
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
color: #1f2937;
}
/* 夜间模式 */
body.dark-mode {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #f8fafc;
}
/* 应用容器 */
#app {
--nav-width: 5.5rem;
--nav-height: 5.5rem;
height: 100vh;
position: relative;
}
/* ==================== 内容区域样式 ==================== */
/* 白天模式内容区域 */
body.light-mode #content {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 10px 25px -5px rgba(0, 0, 0, 0.05),
0 8px 10px -6px rgba(0, 0, 0, 0.02),
inset 0 -1px 0 rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* 夜间模式内容区域 */
body.dark-mode #content {
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.2),
0 10px 10px -5px rgba(0, 0, 0, 0.1),
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#content {
position: absolute;
top: 1rem;
left: 1rem;
right: 1rem;
bottom: 1rem;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 1.5rem;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
display: flex;
flex-direction: column;
overflow: hidden; /* 隐藏内容区域的滚动条 */
will-change: transform;
}
/* ==================== 内容区域样式 ==================== */
/* 白天模式内容区域 */
body.light-mode #content {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 10px 25px -5px rgba(0, 0, 0, 0.05),
0 8px 10px -6px rgba(0, 0, 0, 0.02),
inset 0 -1px 0 rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* 夜间模式内容区域 */
body.dark-mode #content {
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.2),
0 10px 10px -5px rgba(0, 0, 0, 0.1),
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#content {
position: absolute;
top: 1rem;
left: 1rem;
right: 1rem;
bottom: 1rem;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 1.5rem;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
display: flex;
flex-direction: column;
overflow: hidden;
will-change: transform;
}
/* ==================== 导航栏样式 ==================== */
/* 顶部导航栏 */
.top-nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--nav-height);
display: flex;
gap: 0.75rem;
padding: 0.75rem;
transform: translateY(-100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: auto;
border: none;
}
/* 侧边导航栏 */
.side-nav {
position: absolute;
top: 0;
left: 0;
width: var(--nav-width);
height: 100%;
padding-top: var(--nav-height);
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 0.75rem;
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: auto;
will-change: transform;
border: none;
}
/* 白天模式导航栏背景 */
body.light-mode .top-nav,
body.light-mode .side-nav {
background: rgba(249, 250, 251, 0.95);
box-shadow:
0 5px 15px -5px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* 夜间模式导航栏背景 */
body.dark-mode .top-nav,
body.dark-mode .side-nav {
background: rgba(15, 23, 42, 0.95);
box-shadow:
0 10px 15px -5px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* ==================== 头部样式 ==================== */
body.light-mode header {
background: rgba(255, 255, 255, 0.7);
border-bottom: 1px solid rgba(229, 231, 235, 0.5);
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.02),
0 1px 2px -1px rgba(0, 0, 0, 0.01);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
body.dark-mode header {
background: rgba(15, 23, 42, 0.7);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
header {
height: 5.5rem;
display: flex;
align-items: center;
padding: 0 2rem;
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
}
/* ==================== 天气显示样式 ==================== */
body.light-mode .weather-widget {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(229, 231, 235, 0.5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
body.dark-mode .weather-widget {
background: rgba(30, 41, 59, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.weather-widget {
margin-left: auto;
display: flex;
align-items: center;
gap: 1rem;
border-radius: 1rem;
padding: 0.5rem 1.25rem;
transition: all 0.3s ease;
position: relative;
}
.weather-widget:hover {
transform: translateY(-2px);
}
body.light-mode .weather-widget:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
body.dark-mode .weather-widget:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}
.weather-icon {
font-size: 1.5rem;
transition: all 0.3s ease;
}
body.light-mode .weather-icon {
color: #4b5563;
}
body.dark-mode .weather-icon {
color: #f8fafc;
}
.weather-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.weather-temp {
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
white-space: nowrap;
}
body.light-mode .weather-temp {
color: #1f2937;
}
body.dark-mode .weather-temp {
color: #f8fafc;
}
.welcome-message {
font-size: 0.75rem;
display: flex;
align-items: center;
gap: 0.25rem;
transition: all 0.3s ease;
white-space: nowrap;
}
body.light-mode .welcome-message {
color: #6b7280;
}
body.dark-mode .welcome-message {
color: #94a3b8;
}
/* ==================== 主要内容区域 ==================== */
main {
flex: 1;
padding: 0;
overflow-y: auto;
background: transparent;
-webkit-overflow-scrolling: touch;
position: relative;
}
/* ==================== 导航按钮样式 ==================== */
.nav-toggle {
width: 3rem;
height: 3rem;
border: none;
border-radius: 0.75rem;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: white;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06),
0 0 0 2px rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
z-index: 1;
will-change: transform;
}
.nav-toggle::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.nav-toggle:hover {
transform: translateY(-2px) scale(1.05);
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05),
0 0 0 2px rgba(255, 255, 255, 0.3);
}
.nav-toggle:hover::before {
opacity: 1;
}
.nav-toggle:active {
transform: translateY(0) scale(0.98);
}
/* ==================== 导航项样式 ==================== */
body.light-mode .nav-item {
background: rgba(255, 255, 255, 0.8);
color: #4b5563;
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.05),
0 1px 2px 0 rgba(0, 0, 0, 0.03),
inset 0 -1px 0 rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.3);
}
body.dark-mode .nav-item {
background: rgba(30, 41, 59, 0.8);
color: #cbd5e1;
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06),
inset 0 -1px 0 rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-item {
display: block;
border-radius: 0.75rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
will-change: transform;
}
.side-nav .nav-item {
width: calc(var(--nav-width) - 1.5rem);
height: calc(var(--nav-width) - 1.5rem);
}
.top-nav .nav-item {
width: calc(var(--nav-height) - 1.5rem);
height: calc(var(--nav-height) - 1.5rem);
}
.nav-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);
opacity: 0;
transition: all 0.3s ease;
z-index: -1;
}
.nav-item:hover {
transform: translateY(-3px);
color: white;
}
body.light-mode .nav-item:hover {
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05),
0 0 0 1px rgba(255, 255, 255, 0.4);
border-color: rgba(255, 255, 255, 0.5);
}
body.dark-mode .nav-item:hover {
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.2),
0 4px 6px -2px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.2);
}
.nav-item:hover::before {
opacity: 1;
}
.nav-item i {
transition: all 0.3s ease;
}
.nav-item:hover i {
transform: scale(1.15);
}
body.light-mode .nav-item:hover i {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
body.dark-mode .nav-item:hover i {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.nav-item::after {
content: attr(title);
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: 1rem;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.85rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
z-index: 10;
backdrop-filter: blur(10px);
}
body.light-mode .nav-item::after {
background: rgba(31, 41, 55, 0.9);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
body.dark-mode .nav-item::after {
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}
.nav-item:hover::after {
opacity: 1;
margin-left: 1.5rem;
}
/* ==================== 打开状态下的样式 ==================== */
#app.open #content {
top: calc(var(--nav-height) + 1rem);
left: calc(var(--nav-width) + 1rem);
right: 1rem;
bottom: 1rem;
border-top-left-radius: 0;
}
#app.open .side-nav {
transform: translateX(0);
}
#app.open .top-nav {
transform: translateY(0);
}
/* ==================== 页面标题 ==================== */
#page-title {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
letter-spacing: -0.025em;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* ==================== 内容卡片 ==================== */
body.light-mode .content-card {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.05),
0 2px 4px -1px rgba(0, 0, 0, 0.03),
inset 0 -1px 0 rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.dark-mode .content-card {
background: rgba(30, 41, 59, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06),
inset 0 -1px 0 rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.content-card {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 1rem;
padding: 2rem;
margin-bottom: 2rem;
transition: all 0.3s ease;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
/* ==================== 主界面内容 ==================== */
.main-content {
display: none;
animation: fadeIn 0.5s ease forwards;
height: 100%;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
#home {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==================== iframe样式 ==================== */
body.light-mode .page-frame {
background: rgba(255, 255, 255, 0.8);
}
body.dark-mode .page-frame {
background: rgba(15, 23, 42, 0.8);
}
.page-frame {
width: 100%;
height: 100%;
border: none;
display: none;
border-radius: 0 0 1.5rem 1.5rem;
}
/* ==================== 主页头部区域 ==================== */
.header-section {
width: 100%;
height: 100vh; /* 改为100vh以适应全屏滚动 */
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
background-image: url(https://a1.boltp.com/2025/04/18/68026765695c7.png);
background-position: center bottom;
background-size: cover;
filter: saturate(180%);
color: white;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
.header-logo {
width: 100%;
height: 100%;
background-image: url(https://a1.boltp.com/2025/04/19/68036c5f411a0.png);
background-position: center bottom;
position: absolute;
z-index: 4;
background-size: cover;
filter: grayscale(0.5) contrast(100%) brightness(80%);
}
.header-container {
position: absolute;
z-index: 2;
font-family: var(--titleheader);
text-align: center;
text-transform: uppercase;
width: 900px;
}
.header-percy {
display: block;
font-size: 250px;
line-height: 80%;
letter-spacing: 10px;
font-weight: 400;
}
.header-sub {
display: block;
font-size: 10px;
font-family: 'Inter', sans-serif;
margin-top: 0px;
letter-spacing: 5px;
font-weight: 400;
}
.header-container2 {
position: absolute;
z-index: 5;
font-family: var(--titleheader);
text-align: center;
text-transform: uppercase;
width: 900px;
color: transparent;
}
.header-container2 .header-percy {
-webkit-text-stroke: 2px white;
}
.header-container2 .header-sub {
color: white;
}
.header-container, .header-container2 {
margin-top: -50px;
}
.particles {
position: absolute;
width: 100%;
height: 100%;
border: 0px;
}
/* ==================== 底部备案信息 ==================== */
body.light-mode .footer {
background: rgba(255, 255, 255, 0.7);
border-top: 1px solid rgba(229, 231, 235, 0.5);
color: #6b7280;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
body.dark-mode .footer {
background: rgba(15, 23, 42, 0.7);
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #64748b;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
text-align: center;
font-size: 0.75rem;
z-index: 10;
}
.footer a {
color: #818cf8;
text-decoration: none;
transition: color 0.2s ease;
}
.footer a:hover {
color: #6366f1;
text-decoration: underline;
}
/* ==================== 加载动画 ==================== */
@keyframes pulse {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
.loading {
animation: pulse 1.5s ease-in-out infinite;
}
/* ==================== AI助手样式 ==================== */
/* 会动的小人样式 */
.ai-assistant {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
z-index: 1000;
transition: all 0.3s ease;
animation: float 3s ease-in-out infinite, pulse 2s infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.ai-assistant:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.ai-assistant i {
font-size: 1.5rem;
}
/* ==================== 聊天窗口样式 ==================== */
.chat-container {
position: fixed;
bottom: 105px;
right: 30px;
width: 420px;
height: 600px;
background-color: white;
border-radius: 20px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
overflow: hidden;
transform: scale(0);
transform-origin: bottom right;
opacity: 0;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 999;
border: none;
background: #f8f9fa;
display: none;
}
.chat-container.active {
transform: scale(1);
opacity: 1;
display: flex;
}
.chat-container.minimized {
transform: translateY(calc(100% - 40px)) scale(1);
opacity: 1;
height: 40px;
overflow: hidden;
}
.chat-container.fullscreen {
width: 100vw;
height: 100vh;
bottom: 0;
right: 0;
border-radius: 0;
}
.chat-header {
background: #ffffff;
padding: 12px 24px 12px 15px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
border-bottom: 1px solid #e9ecef;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
flex-shrink: 0;
}
.chat-header h2 {
margin: 0;
color: #1a1a2e;
font-weight: 600;
letter-spacing: -0.5px;
font-size: 16px;
text-align: center;
flex: 1;
padding: 0 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.window-controls {
display: flex;
gap: 8px;
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
}
.window-btn {
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
.close-btn {
background-color: #ff5f56;
border: 0.5px solid #e0443e;
}
.close-btn:hover {
background-color: #ff3b30;
}
.minimize-btn {
background-color: #ffbd2e;
border: 0.5px solid #d6a123;
}
.minimize-btn:hover {
background-color: #ffa700;
}
.fullscreen-btn {
background-color: #27c93f;
border: 0.5px solid #1dad2b;
}
.fullscreen-btn:hover {
background-color: #1aad2b;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 20px;
background-color: #f8f9fa;
scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar {
width: 6px;
}
.chat-messages::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
}
.message {
margin-bottom: 16px;
padding: 14px 20px;
border-radius: 20px;
max-width: 85%;
word-wrap: break-word;
position: relative;
line-height: 1.6;
font-size: 15px;
color: #1a1a2e;
background: #ffffff;
border: 1px solid #e9ecef;
box-shadow: 0 2px 12px rgba(67, 97, 238, 0.08);
}
.user-message {
margin-left: auto;
border-radius: 20px 20px 4px 20px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
border: none;
}
.bot-message {
margin-right: auto;
border-radius: 20px 20px 20px 4px;
}
.message-time {
font-size: 12px;
color: #6c757d;
margin-top: 8px;
text-align: right;
}
/* ==================== 视频播放器容器样式 ==================== */
.video-player-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 宽高比 */
margin-top: 12px;
border-radius: 8px;
overflow: hidden;
background: #000;
}
.video-player-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* ==================== 输入区域样式 ==================== */
.chat-input-container {
display: flex;
flex-direction: column;
padding: 15px;
background: rgba(255, 255, 255, 0.9);
border-top: 1px solid #e9ecef;
flex-shrink: 0;
position: relative;
}
/* 隐藏输入框滚动条 */
#message-input::-webkit-scrollbar {
display: none; /* 隐藏滚动条但保留滚动功能 */
}
/* 处理进度提示样式调整到输入框上方 */
.processing-container {
position: absolute;
top: -40px;
left: 15px;
right: 15px;
z-index: 1;
}
.processing-message {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #ffffff;
border-radius: 8px;
font-size: 13px;
color: #4b5563;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
width: 100%;
box-sizing: border-box;
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.processing-message i {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.input-actions {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.action-button {
background: none;
border: none;
color: #6b7280;
cursor: pointer;
font-size: 14px;
padding: 6px 10px;
border-radius: 8px;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 6px;
}
.action-button:hover {
background: #f3f4f6;
color: #4f46e5;
}
.action-button.highlight {
background: #e0e7ff;
color: #4f46e5;
}
.action-button.highlight:hover {
background: #c7d2fe;
}
.badge {
background: #ef4444;
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
margin-left: 4px;
}
.input-wrapper {
display: flex;
align-items: flex-end;
gap: 8px;
}
#message-input {
flex: 1;
padding: 12px 18px;
border: 1px solid #e9ecef;
border-radius: 20px;
outline: none;
font-size: 14px;
color: #1a1a2e;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(255, 255, 255, 0.6);
resize: none;
min-height: 44px;
max-height: 120px;
overflow-y: auto;
-ms-overflow-style: none; /* IE和Edge隐藏滚动条 */
scrollbar-width: none; /* Firefox隐藏滚动条 */
}
#message-input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
}
#send-button {
margin-left: 12px;
padding: 0;
width: 44px;
height: 44px;
background-color: #6366f1;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(67, 97, 238, 0.25);
}
#send-button:hover {
background-color: #4f46e5;
transform: scale(1.05);
}
#send-button:disabled {
background-color: #c7d2fe;
cursor: not-allowed;
transform: none;
}
.file-preview {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
padding: 8px;
background: rgba(99, 102, 241, 0.05);
border-radius: 8px;
border: 1px dashed #c7d2fe;
}
.file-preview-item {
display: flex;
align-items: center;
padding: 6px 10px;
background: white;
border-radius: 6px;
font-size: 13px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.file-preview-item i {
margin-right: 8px;
color: #6366f1;
}
.remove-file-btn {
margin-left: auto;
color: #9ca3af;
cursor: pointer;
transition: color 0.2s;
}
.remove-file-btn:hover {
color: #ef4444;
}
/* ==================== 扩展面板样式 ==================== */
/* 修改为悬浮在右侧 */
.extensions-panel {
position: fixed;
bottom: 220px; /* 与聊天窗口底部对齐 */
right: 60px; /* 与聊天窗口右侧对齐 */
width: 360px;
max-height: 400px;
background: white;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
z-index: 1001;
display: none;
opacity: 0;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
flex-direction: column;
overflow: hidden;
border: 1px solid #e9ecef;
}
.extensions-panel.active {
opacity: 1;
display: flex;
}
.extensions-header {
padding: 12px 16px;
border-bottom: 1px solid #e9ecef;
display: flex;
justify-content: space-between;
align-items: center;
}
.extensions-title {
font-weight: 600;
color: #1a1a2e;
}
.close-extensions {
background: none;
border: none;
color: #6b7280;
cursor: pointer;
font-size: 16px;
padding: 4px;
border-radius: 50%;
transition: all 0.2s;
}
.close-extensions:hover {
background: #f3f4f6;
color: #6366f1;
}
.extensions-scroll-area {
flex: 1;
overflow-y: auto;
padding: 12px;
}
.extension-item {
display: flex;
padding: 12px;
border-radius: 8px;
margin-bottom: 8px;
transition: all 0.2s;
border: 1px solid #e9ecef;
}
.extension-item:hover {
background: #f9fafb;
border-color: #e0e7ff;
}
.extension-icon {
width: 40px;
height: 40px;
border-radius: 8px;
background: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
flex-shrink: 0;
overflow: hidden;
}
.extension-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.extension-content {
flex: 1;
min-width: 0;
}
.extension-name {
font-weight: 600;
margin-bottom: 4px;
color: #1a1a2e;
}
.extension-description {
font-size: 12px;
color: #6b7280;
line-height: 1.4;
}
.add-button {
margin-left: 12px;
padding: 6px 12px;
background: #6366f1;
color: white;
border: none;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
align-self: center;
}
.add-button:hover {
background: #4f46e5;
}
.add-button.added {
background: #10b981;
}
.add-button.added:hover {
background: #059669;
}
/* ==================== 选项按钮样式 ==================== */
.option-buttons {
display: flex;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
.option-button {
padding: 8px 12px;
background: #e0e7ff;
color: #4f46e5;
border: none;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.option-button:hover {
background: #c7d2fe;
}
/* 修改后的下载按钮样式 - 居中显示 */
.download-btn {
display: block; /* 改为块级元素 */
margin: 8px auto 0; /* 上下边距8px，左右自动居中 */
padding: 8px 16px;
background: #6366f1;
color: white;
border: none;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
width: fit-content; /* 宽度适应内容 */
text-align: center; /* 文本居中 */
}
.download-btn:hover {
background: #4f46e5;
}
.download-btn i {
margin-right: 6px;
}
/* ==================== 图片预览样式 ==================== */
.image-preview {
max-width: 100%;
max-height: 200px;
border-radius: 8px;
border: 1px solid #e9ecef;
margin: 8px auto;
display: block;
object-fit: contain;
}
.error-message {
color: #e53e3e;
background-color: #fff5f5;
padding: 12px 16px;
border-radius: 12px;
margin: 10px 0;
font-size: 13px;
border: 1px solid rgba(229, 62, 62, 0.2);
}
/* ==================== 夜间模式样式 ==================== */
body.dark-mode .chat-container {
background: #1e293b;
}
body.dark-mode .chat-header {
background: #1e293b;
border-bottom: 1px solid #334155;
}
body.dark-mode .chat-header h2 {
color: #f8fafc;
}
body.dark-mode .chat-messages {
background: #1e293b;
}
body.dark-mode .message {
background: #0f172a;
color: #f8fafc;
border: 1px solid #334155;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
body.dark-mode .message-time {
color: #94a3b8;
}
body.dark-mode .chat-input-container {
background: #1e293b;
border-top: 1px solid #334155;
}
body.dark-mode #message-input {
background: #0f172a;
color: #f8fafc;
border: 1px solid #334155;
}
body.dark-mode #message-input:focus {
border-color: #818cf8;
box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}
body.dark-mode .error-message {
background: #1e1b4b;
color: #a5b4fc;
border: 1px solid #4338ca;
}
body.dark-mode .extensions-panel {
background: #1e293b;
border-color: #334155;
}
body.dark-mode .extensions-header {
border-bottom-color: #334155;
}
body.dark-mode .extensions-title {
color: #f8fafc;
}
body.dark-mode .close-extensions {
color: #94a3b8;
}
body.dark-mode .close-extensions:hover {
background: #334155;
color: #818cf8;
}
body.dark-mode .extensions-scroll-area {
background: #1e293b;
}
body.dark-mode .extension-item {
background: #0f172a;
border-color: #334155;
}
body.dark-mode .extension-item:hover {
background: #1e293b;
border-color: #475569;
}
body.dark-mode .extension-icon {
background: #1e293b;
}
body.dark-mode .extension-name {
color: #f8fafc;
}
body.dark-mode .extension-description {
color: #94a3b8;
}
body.dark-mode .option-button {
background: #1e293b;
color: #818cf8;
}
body.dark-mode .option-button:hover {
background: #334155;
}
body.dark-mode .file-preview {
background: rgba(99, 102, 241, 0.1);
border-color: #334155;
}
body.dark-mode .file-preview-item {
background: #1e293b;
color: #f8fafc;
}
body.dark-mode .action-button {
color: #94a3b8;
}
body.dark-mode .action-button:hover {
background: #1e293b;
color: #818cf8;
}
body.dark-mode .action-button.highlight {
background: #1e293b;
color: #818cf8;
}
body.dark-mode .action-button.highlight:hover {
background: #334155;
}
body.dark-mode .processing-message {
background: #1e293b;
color: #cbd5e1;
}
/* ==================== 昼夜切换按钮样式 ==================== */
.toggle-container {
position: relative;
width: 70px;
height: 35px;
margin-right: 15px;
}
.toggle-input {
display: none;
}
.toggle-label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(145deg, #e6e6e6, #ffffff);
border-radius: 50px;
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.1),
inset 0 2px 5px rgba(255, 255, 255, 0.5),
inset 0 -2px 5px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
overflow: hidden;
}
.dark-mode .toggle-label {
background: linear-gradient(145deg, #2a2a2a, #1e1e1e);
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.3),
inset 0 2px 5px rgba(255, 255, 255, 0.05),
inset 0 -2px 5px rgba(0, 0, 0, 0.5);
}
.toggle-button {
position: absolute;
top: 3px;
left: 3px;
width: 29px;
height: 29px;
background: linear-gradient(145deg, #ffdf6b, #ffb347);
border-radius: 50%;
box-shadow:
0 2px 10px rgba(255, 179, 71, 0.5),
inset 0 1px 3px rgba(255, 255, 255, 0.4);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.dark-mode .toggle-button {
left: 38px;
background: linear-gradient(145deg, #d1d1d1, #f1f1f1);
box-shadow:
0 2px 10px rgba(209, 209, 209, 0.5),
inset 0 1px 3px rgba(255, 255, 255, 0.4);
}
.sun {
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ffdf6b;
box-shadow:
0 0 5px #ffdf6b,
0 0 10px #ffdf6b,
0 0 15px #ffdf6b;
transition: all 0.5s ease;
opacity: 1;
}
.dark-mode .sun {
opacity: 0;
transform: scale(0.5);
}
.moon {
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
background: #f1f1f1;
box-shadow:
inset -4px -1px 0 0 #d1d1d1;
transition: all 0.5s ease;
opacity: 0;
transform: scale(0.5) rotate(90deg);
}
.dark-mode .moon {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.stars {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
transition: all 0.5s ease;
}
.star {
position: absolute;
background-color: white;
border-radius: 50%;
opacity: 0;
transition: all 0.5s ease;
}
.dark-mode .star {
opacity: 1;
}
/* 创建星星 */
.star:nth-child(1) {
top: 15%;
left: 25%;
width: 1px;
height: 1px;
animation: twinkle 2s infinite alternate;
}
.star:nth-child(2) {
top: 25%;
left: 70%;
width: 2px;
height: 2px;
animation: twinkle 1.5s infinite alternate 0.5s;
}
.star:nth-child(3) {
top: 60%;
left: 40%;
width: 1px;
height: 1px;
animation: twinkle 2.5s infinite alternate 0.2s;
}
.star:nth-child(4) {
top: 75%;
left: 20%;
width: 2px;
height: 2px;
animation: twinkle 1.8s infinite alternate 0.7s;
}
.star:nth-child(5) {
top: 40%;
left: 80%;
width: 1px;
height: 1px;
animation: twinkle 2.2s infinite alternate 0.3s;
}
@keyframes twinkle {
0% { opacity: 0.3; }
100% { opacity: 1; }
}
.clouds {
position: absolute;
width: 100%;
height: 100%;
transition: all 0.5s ease;
}
.cloud {
position: absolute;
background-color: white;
border-radius: 50px;
opacity: 1;
transition: all 0.5s ease;
}
.dark-mode .cloud {
opacity: 0;
}
/* 创建云朵 */
.cloud:nth-child(1) {
top: 20%;
left: 20%;
width: 12px;
height: 6px;
}
.cloud:nth-child(2) {
top: 30%;
left: 60%;
width: 18px;
height: 8px;
}
.cloud:nth-child(3) {
top: 70%;
left: 30%;
width: 15px;
height: 6px;
}
/* ==================== 响应式设计 - 小屏幕适配 ==================== */
@media (max-width: 768px) {
/* 头部区域调整 */
header {
padding: 0 1rem;
}
/* 天气小部件调整 */
.weather-widget {
padding: 0.5rem;
gap: 0.5rem;
min-width: auto;
}
.weather-info {
display: none; /* 在小屏幕上隐藏详细信息 */
}
.weather-icon {
font-size: 1.2rem;
}
/* 昼夜切换按钮调整 */
.toggle-container {
width: 60px;
height: 30px;
margin-right: 10px;
}
.toggle-button {
width: 24px;
height: 24px;
}
.dark-mode .toggle-button {
left: 32px;
}
.sun, .moon {
width: 16px;
height: 16px;
}
/* 标题调整 */
#page-title {
font-size: 1.5rem;
margin-left: 0.5rem;
}
/* 主页标题调整 */
.header-percy {
font-size: 120px;
}
.header-container, .header-container2 {
width: 90%;
}
/* AI助手调整 */
.chat-container {
width: 95vw;
right: 2.5vw;
bottom: 100px;
height: 70vh;
}
.extensions-panel {
width: 90vw;
max-height: 60vh;
right: 5vw;
bottom: 110px;
}
}
@media (max-width: 480px) {
.header-percy {
font-size: 80px;
}
.header-sub {
font-size: 8px;
letter-spacing: 3px;
}
/* 进一步缩小天气小部件 */
.weather-widget {
padding: 0.3rem;
}
.weather-icon {
font-size: 1rem;
}
}
</style>
</head>
<body class="light-mode">
<div id="app">
<!-- 导航栏 -->
<nav>
<div class="top-nav">
<a href="#" class="nav-item" data-target="tools/image-cut" title="抠图工具">
<i class="fa-solid fa-cut text-lg"></i>
</a>
<a href="#" class="nav-item" data-target="tools/audio-parse" title="音频解析">
<i class="fa-solid fa-music text-lg"></i>
</a>
<a href="#" class="nav-item" data-target="network/ip-query" title="IP地址查询">
<i class="fa-solid fa-map-marker-alt text-lg"></i>
</a>
<a href="#" class="nav-item" data-target="media/gallery" title="图片画廊">
<i class="fa-solid fa-images text-lg"></i>
</a>
</div>
<div class="side-nav">
<a href="#" class="nav-item" data-target="home" title="主页">
<i class="fa-solid fa-house text-xl"></i>
</a>
<a href="#" class="nav-item" data-target="tools/image-cut" title="抠图工具">
<i class="fa-solid fa-cut text-xl"></i>
</a>
<a href="#" class="nav-item" data-target="tools/audio-parse" title="音频解析">
<i class="fa-solid fa-music text-xl"></i>
</a>
<a href="#" class="nav-item" data-target="network/ip-query" title="IP地址查询">
<i class="fa-solid fa-map-marker-alt text-xl"></i>
</a>
<a href="#" class="nav-item" data-target="media/gallery" title="图片画廊">
<i class="fa-solid fa-images text-xl"></i>
</a>
<a href="#" class="nav-item" data-target="content/blog" title="博客">
<i class="fa-solid fa-blog text-xl"></i>
</a>
<a href="#" class="nav-item" data-target="help/faq" title="常见问题">
<i class="fa-solid fa-question text-xl"></i>
</a>
<a href="#" class="nav-item" data-target="business/pricing" title="价格套餐">
<i class="fa-solid fa-dollar-sign text-xl"></i>
</a>
</div>
</nav>
<!-- 内容区域 -->
<div id="content">
<header>
<button class="nav-toggle" aria-label="切换导航">
<i class="fa-solid fa-bars"></i>
</button>
<h1 class="ml-4 text-2xl font-bold" id="page-title">TENG YUAN - 主页</h1>
<!-- 昼夜切换按钮 -->
<div class="toggle-container">
<input type="checkbox" id="toggle" class="toggle-input">
<label for="toggle" class="toggle-label">
<div class="toggle-button">
<div class="sun"></div>
<div class="moon"></div>
</div>
<div class="stars">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="clouds">
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
</div>
</label>
</div>
<!-- 天气显示 -->
<div class="weather-widget" id="weather-widget">
<div class="weather-icon loading">
<i class="fas fa-cloud"></i>
</div>
<div class="weather-info">
<span class="weather-temp loading" style="width: 3rem; height: 1rem; background: #64748b; border-radius: 0.25rem;"></span>
<span class="welcome-message loading" style="width: 8rem; height: 0.75rem; background: #64748b; border-radius: 0.25rem;"></span>
</div>
</div>
</header>
<main>
<!-- 主页内容 -->
<div class="main-content" id="home">
<!-- 第一页 - 头部区域 -->
<div class="header-section">
<iframe src="" class="particles"></iframe>
<div class="header-logo"></div>
<div class="header-container">
<div class="header-percy">TENG YUAN</div>
<div class="header-sub" id="daily-quote-container">每日一言加载中...</div>
</div>
<div class="header-container2">
<div class="header-percy">TENG YUAN</div>
<div class="header-sub" id="daily-quote-container2">每日一言加载中...</div>
</div>
</div>
</div>
<!-- 其他页面的iframe容器 -->
<iframe id="tools/image-cut" class="page-frame" data-title="抠图工具"></iframe>
<iframe id="tools/audio-parse" class="page-frame" data-title="音频解析"></iframe>
<iframe id="network/ip-query" class="page-frame" data-title="IP地址查询"></iframe>
<iframe id="media/gallery" class="page-frame" data-title="图片画廊"></iframe>
<iframe id="content/blog" class="page-frame" data-title="博客"></iframe>
<iframe id="help/faq" class="page-frame" data-title="常见问题"></iframe>
<iframe id="business/pricing" class="page-frame" data-title="价格套餐"></iframe>
</main>
<!-- 底部备案信息 -->
<div class="footer">
<p>© 2025 TENG YUAN | <a href="#" target="_blank">隐私政策</a> | <a href="#" target="_blank">服务条款</a> | <a href="https://beian.miit.gov.cn/" target="_blank">ICP备案号</a></p>
</div>
</div>
</div>
<!-- AI助手小人 -->
<div class="ai-assistant" id="ai-assistant">
<i class="fas fa-robot"></i>
</div>
<!-- AI助手聊天窗口 -->
<div class="chat-container" id="chat-container">
<div class="chat-header">
<div class="window-controls">
<button class="window-btn close-btn" id="close-btn"></button>
<button class="window-btn minimize-btn" id="minimize-btn"></button>
<button class="window-btn fullscreen-btn" id="fullscreen-btn"></button>
</div>
<h2>AI助手</h2>
</div>
<!-- 聊天消息区域 -->
<div class="chat-messages" id="chat-messages">
<!-- AI欢迎消息 -->
<div class="message bot-message">
您好！我是AI助手，我可以帮您转换图片格式或解析视频。请先添加相应的扩展功能。
<div class="message-time">今天 10:30</div>
</div>
</div>
<!-- 输入区域 -->
<div class="chat-input-container">
<!-- 处理进度提示容器 -->
<div class="processing-container">
<div class="processing-message hidden" id="processing-message">
<i class="fas fa-spinner"></i>
<span>正在处理您的请求...</span>
</div>
</div>
<div class="input-actions">
<button class="action-button" id="attach-button">
<i class="fas fa-paperclip"></i>
<span>附件</span>
</button>
<button class="action-button highlight" id="extend-button">
<i class="fas fa-puzzle-piece"></i>
<span>扩展</span>
<div class="badge">2</div>
</button>
</div>
<div class="input-wrapper">
<textarea id="message-input" placeholder="发送消息..."></textarea>
<button id="send-button" disabled>
<i class="fas fa-paper-plane"></i>
</button>
</div>
<!-- 文件预览区域 -->
<div class="file-preview hidden" id="file-preview"></div>
<!-- 隐藏的文件输入 -->
<input type="file" id="file-input" class="hidden" accept="image/*,video/*,audio/*" multiple>
</div>
</div>
<!-- 扩展面板 - 现在悬浮在右侧 -->
<div class="extensions-panel" id="extensions-panel">
<div class="extensions-header">
<div class="extensions-title">添加扩展</div>
<button class="close-extensions" id="close-extensions">
<i class="fas fa-times"></i>
</button>
</div>
<div class="extensions-scroll-area">
<!-- 图片格式转换 -->
<div class="extension-item" id="image-converter">
<div class="extension-icon">
<img src="https://lf3-appstore-sign.oceancloudapi.com/ocean-cloud-tos/FileBizType.BIZ_BOT_WORKFLOW/1682717607724762_1744706486858059414_2qmmg0xEV9.png?lk3s=cd508e2b&x-expires=2061097613&x-signature=62GS9dYBZw7OyrsN2HtZ5s8XtMo%3D" alt="图片格式转换">
</div>
<div class="extension-content">
<div class="extension-name">图片格式转换</div>
<div class="extension-description">可生成高质量的图片，也可以编辑已有的图片，支持JPG、PNG、WEBP等多种格式转换</div>
</div>
<button class="add-button" id="image-converter-btn">
<i class="fas fa-plus"></i> 添加
</button>
</div>
<!-- 影视解析 -->
<div class="extension-item" id="video-parser">
<div class="extension-icon">
<img src="https://lf9-appstore-sign.oceancloudapi.com/ocean-cloud-tos/plugin_icon/3732214325715875_1703131669996743697_6V4mnfwUUf.png?lk3s=cd508e2b&x-expires=2061097613&x-signature=yb3na%2Fk6ZOLgOEzhqR4CGIXKMTY%3D" alt="影视解析">
</div>
<div class="extension-content">
<div class="extension-name">影视解析</div>
<div class="extension-description">查询全球影视资源，支持各大平台视频解析，获取高清播放链接</div>
</div>
<button class="add-button" id="video-parser-btn">
<i class="fas fa-plus"></i> 添加
</button>
</div>
</div>
</div>
<script>
// ==================== 主题管理功能 ====================
const themeManager = {
/**
* 初始化主题功能
*/
init: function() {
// 检查本地存储中的主题设置
const savedTheme = localStorage.getItem('theme');
// 如果没有保存的主题，则根据时间自动选择
if (!savedTheme) {
this.autoSetThemeByTime();
} else {
this.setTheme(savedTheme);
}
// 设置主题切换按钮事件
document.getElementById('toggle').addEventListener('change', this.toggleTheme.bind(this));
// 每小时检查一次时间，自动切换主题
setInterval(this.autoSetThemeByTime.bind(this), 3600000);
// 根据当前主题设置按钮状态
const toggle = document.getElementById('toggle');
toggle.checked = document.body.classList.contains('dark-mode');
},
/**
* 根据时间自动设置主题
*/
autoSetThemeByTime: function() {
const hour = new Date().getHours();
// 晚上6点到早上6点视为夜间
const isNightTime = hour >= 18 || hour < 6;
// 如果用户没有手动设置过主题，则根据时间自动设置
if (!localStorage.getItem('theme')) {
this.setTheme(isNightTime ? 'dark-mode' : 'light-mode');
document.getElementById('toggle').checked = isNightTime;
}
},
/**
* 切换主题
*/
toggleTheme: function() {
const currentTheme = document.body.classList.contains('dark-mode') ? 'dark-mode' : 'light-mode';
const newTheme = currentTheme === 'dark-mode' ? 'light-mode' : 'dark-mode';
this.setTheme(newTheme);
// 保存用户选择到本地存储
localStorage.setItem('theme', newTheme);
},
/**
* 设置主题
* @param {string} theme - 要设置的主题 ('light-mode' 或 'dark-mode')
*/
setTheme: function(theme) {
// 移除现有主题类
document.body.classList.remove('light-mode', 'dark-mode');
// 添加新主题类
document.body.classList.add(theme);
// 更新iframe内容
this.updateIframeThemes(theme);
},
/**
* 更新iframe中的主题
* @param {string} theme - 要设置的主题
*/
updateIframeThemes: function(theme) {
// 获取所有iframe元素
const iframes = document.querySelectorAll('.page-frame');
// 为每个iframe发送主题信息
iframes.forEach(iframe => {
if (iframe.contentWindow) {
iframe.contentWindow.postMessage({
type: 'THEME_CHANGE',
theme: theme
}, '*');
}
});
}
};
// ==================== 每日一言功能 ====================
const dailyQuote = {
/**
* 初始化每日一言功能
*/
init: function() {
this.getQuote();
setInterval(this.getQuote.bind(this), 3600000); // 每小时更新
},
/**
* 获取每日一言
*/
getQuote: function() {
const apiUrl = 'https://v1.hitokoto.cn/?c=d&encode=text';
fetch(apiUrl)
.then(response => {
if (!response.ok) throw new Error('网络响应不正常');
return response.text();
})
.then(quote => {
this.updateDisplays(quote);
})
.catch(error => {
console.error('获取每日一言失败:', error);
const fallback = this.fallbackQuotes[
Math.floor(Math.random() * this.fallbackQuotes.length)
];
this.updateDisplays(fallback);
});
},
/**
* 更新显示区域
* @param {string} quote - 要显示的每日一言
*/
updateDisplays: function(quote) {
const containers = document.querySelectorAll('[id^="daily-quote-container"]');
containers.forEach(container => {
container.textContent = quote;
container.style.opacity = 0;
setTimeout(() => container.style.opacity = 1, 100);
});
},
// 备用每日一言
fallbackQuotes: [
"不积跬步，无以至千里",
"学而不思则罔，思而不学则殆",
"生活就像海洋，只有意志坚强的人才能到达彼岸",
"今日事，今日毕"
]
};
// ==================== 天气功能 ====================
const weatherWidget = {
/**
* 初始化天气功能
*/
init: function() {
this.getWeather();
setInterval(this.getWeather.bind(this), 3600000); // 每小时更新
},
/**
* 获取天气信息
*/
getWeather: function() {
const apiUrl = 'https://api.kxzjoker.cn/api/Weather';
fetch(apiUrl)
.then(response => {
if (!response.ok) throw new Error('网络响应不正常');
return response.json();
})
.then(data => {
if (data.code !== 200) throw new Error('API返回错误');
// 提取地区信息
let location = '欢迎访问本服务';
if (data.data && data.data.ipdata && data.data.ipdata.info) {
const locationParts = data.data.ipdata.info.split('-');
location = `👏欢迎来自${locationParts[0]}的用户`;
}
// 提取天气信息
let weatherData = {
temp: '未知温度',
condition: 'cloud',
location: location
};
if (data.data && data.data.tianqi && data.data.tianqi.temperature) {
weatherData.temp = `${data.data.tianqi.temperature}°C`;
// 根据天气情况选择图标
const weatherText = data.data.tianqi.weather.toLowerCase();
if (weatherText.includes('晴')) {
weatherData.condition = 'sun';
} else if (weatherText.includes('云') || weatherText.includes('阴')) {
weatherData.condition = 'cloud';
} else if (weatherText.includes('雨')) {
weatherData.condition = 'cloud-rain';
} else if (weatherText.includes('雪')) {
weatherData.condition = 'snowflake';
} else if (weatherText.includes('雷')) {
weatherData.condition = 'bolt';
} else if (weatherText.includes('雾')) {
weatherData.condition = 'smog';
}
}
this.updateDisplay(weatherData);
})
.catch(error => {
console.error('获取天气信息失败:', error);
// 使用默认数据
const defaultWeather = {
temp: '未知天气',
condition: 'cloud',
location: '👏欢迎访问本服务'
};
this.updateDisplay(defaultWeather);
});
},
/**
* 更新天气显示
* @param {object} data - 天气数据
*/
updateDisplay: function(data) {
const widget = document.getElementById('weather-widget');
const icon = widget.querySelector('.weather-icon i');
const temp = widget.querySelector('.weather-temp');
const location = widget.querySelector('.welcome-message');
// 移除加载状态
widget.querySelector('.weather-icon').classList.remove('loading');
widget.querySelector('.weather-temp').classList.remove('loading');
widget.querySelector('.welcome-message').classList.remove('loading');
// 更新图标
if (icon) {
icon.className = `fas fa-${data.condition}`;
}
// 更新温度
if (temp) {
temp.textContent = data.temp;
temp.style.width = 'auto';
temp.style.height = 'auto';
temp.style.background = 'transparent';
}
// 更新位置
if (location) {
location.textContent = data.location;
location.style.width = 'auto';
location.style.height = 'auto';
location.style.background = 'transparent';
}
// 添加动画效果
widget.style.opacity = 0;
setTimeout(() => widget.style.opacity = 1, 300);
}
};
// ==================== AI助手功能 ====================
const aiAssistant = {
/**
* 初始化AI助手
*/
init: function() {
// API配置
this.apiConfig = {
id: '10003788',
key: 'ffa8afb46dce4916c5a74fd73c8de9f6',
endpoint: 'https://cn.apihz.cn/api/ai/wxtiny.php'
};
this.extensions = {
imageConverter: false,
videoParser: false
};
this.currentFiles = [];
this.isMinimized = false;
// 设置事件监听器
this.setupEventListeners();
// 恢复聊天窗口状态
this.restoreChatState();
// 初始化输入框高度
this.adjustTextareaHeight();
// 更新扩展数量徽章
this.updateExtensionBadge();
},
/**
* 恢复聊天窗口状态
*/
restoreChatState: function() {
const chatState = localStorage.getItem('chatState');
if (chatState) {
const { minimized, fullscreen } = JSON.parse(chatState);
const chatContainer = document.getElementById('chat-container');
this.isMinimized = minimized;
if (fullscreen) {
chatContainer.classList.add('fullscreen');
}
if (minimized) {
chatContainer.classList.add('minimized');
} else {
chatContainer.classList.remove('minimized');
}
}
},
/**
* 保存聊天窗口状态
*/
saveChatState: function() {
const chatContainer = document.getElementById('chat-container');
const chatState = {
minimized: this.isMinimized,
fullscreen: chatContainer.classList.contains('fullscreen')
};
localStorage.setItem('chatState', JSON.stringify(chatState));
},
/**
* 设置事件监听器
*/
setupEventListeners: function() {
const aiAssistantBtn = document.getElementById('ai-assistant');
const chatContainer = document.getElementById('chat-container');
const closeBtn = document.getElementById('close-btn');
const minimizeBtn = document.getElementById('minimize-btn');
const fullscreenBtn = document.getElementById('fullscreen-btn');
const sendButton = document.getElementById('send-button');
const messageInput = document.getElementById('message-input');
const fileInput = document.getElementById('file-input');
const attachButton = document.getElementById('attach-button');
const extendButton = document.getElementById('extend-button');
const extensionsPanel = document.getElementById('extensions-panel');
const closeExtensions = document.getElementById('close-extensions');
const imageConverterBtn = document.getElementById('image-converter-btn');
const videoParserBtn = document.getElementById('video-parser-btn');
// 主按钮点击事件 - 切换聊天窗口显示/隐藏
aiAssistantBtn.addEventListener('click', () => this.toggleChat());
// 窗口控制按钮事件
closeBtn.addEventListener('click', () => this.closeChat());
minimizeBtn.addEventListener('click', () => this.minimizeChat());
fullscreenBtn.addEventListener('click', () => this.toggleFullscreen());
// 消息发送事件
sendButton.addEventListener('click', () => this.sendMessage());
messageInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
this.sendMessage();
}
});
// 输入框内容变化事件
messageInput.addEventListener('input', () => {
sendButton.disabled = messageInput.value.trim() === '' && this.currentFiles.length === 0;
this.adjustTextareaHeight();
});
// 附件按钮事件
attachButton.addEventListener('click', () => fileInput.click());
// 文件上传事件
fileInput.addEventListener('change', (e) => this.handleFileUpload(e));
// 扩展按钮事件
extendButton.addEventListener('click', () => this.toggleExtensionsPanel());
// 关闭扩展面板按钮
closeExtensions.addEventListener('click', () => this.hideExtensionsPanel());
// 扩展添加按钮事件
imageConverterBtn.addEventListener('click', (e) => {
e.stopPropagation();
this.toggleExtension('imageConverter', imageConverterBtn);
});
videoParserBtn.addEventListener('click', (e) => {
e.stopPropagation();
this.toggleExtension('videoParser', videoParserBtn);
});
// 点击文档其他地方关闭扩展面板
document.addEventListener('click', (e) => {
if (!e.target.closest('#extensions-panel') && !e.target.closest('#extend-button')) {
this.hideExtensionsPanel();
}
});
},
/**
* 切换聊天窗口显示/隐藏
*/
toggleChat: function() {
const chatContainer = document.getElementById('chat-container');
const aiAssistantBtn = document.getElementById('ai-assistant');
if (chatContainer.classList.contains('active')) {
chatContainer.classList.remove('active');
setTimeout(() => {
chatContainer.style.display = 'none';
aiAssistantBtn.style.display = 'flex';
}, 300);
} else {
// 如果之前是最小化状态，先恢复窗口
if (this.isMinimized) {
chatContainer.classList.remove('minimized');
this.isMinimized = false;
this.saveChatState();
}
chatContainer.style.display = 'flex';
setTimeout(() => {
chatContainer.classList.add('active');
document.getElementById('message-input').focus();
}, 10);
aiAssistantBtn.style.display = 'none';
}
},
/**
* 关闭聊天窗口
*/
closeChat: function() {
const chatContainer = document.getElementById('chat-container');
const aiAssistantBtn = document.getElementById('ai-assistant');
chatContainer.classList.remove('active');
setTimeout(() => {
chatContainer.style.display = 'none';
aiAssistantBtn.style.display = 'flex';
}, 300);
},
/**
* 最小化/恢复聊天窗口
*/
minimizeChat: function() {
const chatContainer = document.getElementById('chat-container');
this.isMinimized = !this.isMinimized;
if (this.isMinimized) {
chatContainer.classList.add('minimized');
} else {
chatContainer.classList.remove('minimized');
}
this.saveChatState();
},
/**
* 切换全屏模式
*/
toggleFullscreen: function() {
const chatContainer = document.getElementById('chat-container');
chatContainer.classList.toggle('fullscreen');
this.saveChatState();
},
/**
* 显示/隐藏扩展面板
*/
toggleExtensionsPanel: function() {
const extensionsPanel = document.getElementById('extensions-panel');
if (extensionsPanel.classList.contains('active')) {
this.hideExtensionsPanel();
} else {
extensionsPanel.style.display = 'flex';
setTimeout(() => {
extensionsPanel.classList.add('active');
}, 10);
}
},
/**
* 隐藏扩展面板
*/
hideExtensionsPanel: function() {
const extensionsPanel = document.getElementById('extensions-panel');
extensionsPanel.classList.remove('active');
setTimeout(() => {
extensionsPanel.style.display = 'none';
}, 300);
},
/**
* 切换扩展功能状态
*/
toggleExtension: function(extensionName, button) {
const isAdded = button.classList.contains('added');
if (isAdded) {
button.classList.remove('added');
button.innerHTML = '<i class="fas fa-plus"></i> 添加';
this.extensions[extensionName] = false;
this.addExtensionFeedback(extensionName, false);
} else {
button.classList.add('added');
button.innerHTML = '<i class="fas fa-check"></i> 已添加';
this.extensions[extensionName] = true;
this.addExtensionFeedback(extensionName, true);
// 添加扩展后关闭面板
setTimeout(() => {
this.hideExtensionsPanel();
}, 500);
}
this.updateExtensionBadge();
},
/**
* 更新扩展数量徽章
*/
updateExtensionBadge: function() {
const badge = document.querySelector('.badge');
const count = Object.values(this.extensions).filter(Boolean).length;
badge.textContent = count;
},
/**
* 添加扩展反馈消息
*/
addExtensionFeedback: function(extensionName, isAdded) {
const chatMessages = document.getElementById('chat-messages');
const feedbackMsg = document.createElement('div');
feedbackMsg.className = 'message bot-message';
if (isAdded) {
feedbackMsg.innerHTML = `
<div>已成功添加${extensionName}扩展功能。</div>
<div class="message-time">${this.getCurrentTime()}</div>
`;
} else {
feedbackMsg.innerHTML = `
<div>已移除${extensionName}扩展功能。</div>
<div class="message-time">${this.getCurrentTime()}</div>
`;
}
chatMessages.appendChild(feedbackMsg);
chatMessages.scrollTop = chatMessages.scrollHeight;
},
/**
* 处理文件上传
*/
handleFileUpload: function(event) {
const files = Array.from(event.target.files);
this.currentFiles = files;
const filePreview = document.getElementById('file-preview');
const sendButton = document.getElementById('send-button');
if (files.length > 0) {
filePreview.innerHTML = '';
filePreview.classList.remove('hidden');
files.slice(0, 3).forEach(file => {
const fileElement = document.createElement('div');
fileElement.className = 'file-preview-item';
fileElement.innerHTML = `
<i class="fas fa-file"></i> ${file.name}
<span class="remove-file-btn" data-file="${file.name}">
<i class="fas fa-times"></i>
</span>
`;
filePreview.appendChild(fileElement);
});
if (files.length > 3) {
const moreFiles = document.createElement('div');
moreFiles.className = 'file-preview-item';
moreFiles.innerHTML = `
<i class="fas fa-ellipsis-h"></i> 还有 ${files.length - 3} 个文件
`;
filePreview.appendChild(moreFiles);
}
} else {
filePreview.classList.add('hidden');
}
sendButton.disabled = document.getElementById('message-input').value.trim() === '' && files.length === 0;
},
/**
* 发送消息
*/
sendMessage: function() {
const messageInput = document.getElementById('message-input');
const message = messageInput.value.trim();
const files = this.currentFiles;
const chatMessages = document.getElementById('chat-messages');
const processingMessage = document.getElementById('processing-message');
if (message || files.length > 0) {
// 添加用户消息
const userMessageDiv = document.createElement('div');
userMessageDiv.className = 'message user-message';
if (message) {
userMessageDiv.textContent = message;
}
// 添加文件预览
if (files.length > 0) {
files.forEach(file => {
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = (e) => {
const img = document.createElement('img');
img.src = e.target.result;
img.className = 'image-preview';
userMessageDiv.appendChild(img);
};
reader.readAsDataURL(file);
} else {
const fileElement = document.createElement('div');
fileElement.innerHTML = `<i class="fas fa-file"></i> ${file.name}`;
userMessageDiv.appendChild(fileElement);
}
});
}
// 添加时间戳
const timeDiv = document.createElement('div');
timeDiv.className = 'message-time';
timeDiv.textContent = this.getCurrentTime();
userMessageDiv.appendChild(timeDiv);
chatMessages.appendChild(userMessageDiv);
// 显示处理中状态
processingMessage.classList.remove('hidden');
// 清空输入
messageInput.value = '';
document.getElementById('send-button').disabled = true;
document.getElementById('file-input').value = '';
document.getElementById('file-preview').classList.add('hidden');
this.currentFiles = [];
// 滚动到底部
chatMessages.scrollTop = chatMessages.scrollHeight;
// 检查是否需要调用扩展功能
const shouldUseExtension = this.checkForExtensionUse(message, files);
if (!shouldUseExtension) {
// 如果没有使用扩展功能，则调用AI API
this.callAIAPI(message);
}
}
},
/**
* 检查是否需要使用扩展功能
*/
checkForExtensionUse: function(message, files) {
// 检查是否是视频链接
const videoPlatforms = ['v.qq.com', 'mgtv.com', 'iqiyi.com', 'youku.com', 'le.com', 'sohu.com'];
const isVideoLink = message && videoPlatforms.some(platform => message.includes(platform));
// 检查是否有图片文件上传
const hasImage = files.some(file => file.type.startsWith('image/'));
if (isVideoLink) {
if (this.extensions.videoParser) {
// 视频解析功能
const videoUrl = `https://www.yemu.xyz/?url=${encodeURIComponent(message)}`;
const botMessage = document.createElement('div');
botMessage.className = 'message bot-message';
// 创建视频容器
const videoContainer = document.createElement('div');
videoContainer.className = 'video-player-container';
videoContainer.innerHTML = `
<iframe src="${videoUrl}" allowfullscreen></iframe>
`;
botMessage.innerHTML = `
<div>已为您解析视频链接：</div>
<div class="message-time">${this.getCurrentTime()}</div>
`;
// 将视频容器插入到消息内容中
botMessage.insertBefore(videoContainer, botMessage.querySelector('.message-time'));
// 添加提示信息
const tipDiv = document.createElement('div');
tipDiv.style.marginTop = '12px';
tipDiv.style.fontSize = '13px';
tipDiv.style.color = '#6b7280';
tipDiv.innerHTML = '<i class="fas fa-info-circle"></i> 视频解析服务由第三方提供，请遵守相关平台规定';
botMessage.insertBefore(tipDiv, botMessage.querySelector('.message-time'));
document.getElementById('chat-messages').appendChild(botMessage);
document.getElementById('processing-message').classList.add('hidden');
return true;
} else {
// 提示添加影视解析扩展
const botMessage = document.createElement('div');
botMessage.className = 'message bot-message';
botMessage.innerHTML = `
<div>检测到您发送了视频链接，但尚未添加影视解析扩展。</div>
<button class="option-button" id="add-video-parser-btn" style="margin-top:10px;">
<i class="fas fa-plus"></i> 添加影视解析扩展
</button>
<div class="message-time">${this.getCurrentTime()}</div>
`;
document.getElementById('chat-messages').appendChild(botMessage);
document.getElementById('processing-message').classList.add('hidden');
// 为添加扩展按钮添加事件监听器
setTimeout(() => {
document.getElementById('add-video-parser-btn').addEventListener('click', () => {
this.toggleExtensionsPanel();
});
}, 100);
return true;
}
} else if (hasImage) {
if (this.extensions.imageConverter) {
// 显示图片转换选项
const imageFile = files.find(file => file.type.startsWith('image/'));
const botMessage = document.createElement('div');
botMessage.className = 'message bot-message';
botMessage.innerHTML = `
<div>已收到您上传的图片，请选择要转换的格式：</div>
<div class="option-buttons">
<button class="option-button convert-btn" data-format="png">转换为PNG</button>
<button class="option-button convert-btn" data-format="jpg">转换为JPG</button>
<button class="option-button convert-btn" data-format="webp">转换为WEBP</button>
</div>
<div style="margin-top:12px;font-size:13px;color:#6b7280;">
<i class="fas fa-info-circle"></i> 转换后将提供下载链接
</div>
<div class="message-time">${this.getCurrentTime()}</div>
`;
document.getElementById('chat-messages').appendChild(botMessage);
document.getElementById('processing-message').classList.add('hidden');
// 为转换按钮添加事件监听器
setTimeout(() => {
document.querySelectorAll('.convert-btn').forEach(btn => {
btn.addEventListener('click', () => {
const format = btn.dataset.format;
this.convertImage(imageFile, format);
});
});
}, 100);
return true;
} else {
// 提示添加图片转换扩展
const botMessage = document.createElement('div');
botMessage.className = 'message bot-message';
botMessage.innerHTML = `
<div>检测到您上传了图片，但尚未添加图片格式转换扩展。</div>
<button class="option-button" id="add-image-converter-btn" style="margin-top:10px;">
<i class="fas fa-plus"></i> 添加图片格式转换扩展
</button>
<div class="message-time">${this.getCurrentTime()}</div>
`;
document.getElementById('chat-messages').appendChild(botMessage);
document.getElementById('processing-message').classList.add('hidden');
// 为添加扩展按钮添加事件监听器
setTimeout(() => {
document.getElementById('add-image-converter-btn').addEventListener('click', () => {
this.toggleExtensionsPanel();
});
}, 100);
return true;
}
}
return false;
},
/**
* 调用AI API
*/
callAIAPI: function(message) {
const chatMessages = document.getElementById('chat-messages');
const processingMessage = document.getElementById('processing-message');
// 构建API URL
const apiUrl = `${this.apiConfig.endpoint}?id=${this.apiConfig.id}&key=${this.apiConfig.key}&words=${encodeURIComponent(message)}`;
// 使用fetch调用API
fetch(apiUrl)
.then(response => response.json())
.then(data => {
// 隐藏处理中状态
processingMessage.classList.add('hidden');
if (data.code === 200) {
// 成功获取回复
this.showAIResponse(data.msg);
} else {
// API返回错误
this.showErrorResponse(data.msg || 'API请求失败');
}
})
.catch(error => {
// 隐藏处理中状态
processingMessage.classList.add('hidden');
// 显示错误消息
this.showErrorResponse('网络请求失败: ' + error.message);
});
},
/**
* 显示AI回复
*/
showAIResponse: function(responseText) {
const chatMessages = document.getElementById('chat-messages');
const botMessage = document.createElement('div');
botMessage.className = 'message bot-message';
botMessage.innerHTML = `
<div>${responseText}</div>
<div class="message-time">${this.getCurrentTime()}</div>
`;
chatMessages.appendChild(botMessage);
chatMessages.scrollTop = chatMessages.scrollHeight;
},
/**
* 显示错误回复
*/
showErrorResponse: function(errorText) {
const chatMessages = document.getElementById('chat-messages');
const errorMessage = document.createElement('div');
errorMessage.className = 'message bot-message error-message';
errorMessage.innerHTML = `
<div>${errorText}</div>
<div class="message-time">${this.getCurrentTime()}</div>
`;
chatMessages.appendChild(errorMessage);
chatMessages.scrollTop = chatMessages.scrollHeight;
},
/**
* 转换图片格式
*/
convertImage: function(file, targetFormat) {
const chatMessages = document.getElementById('chat-messages');
const processingMsg = document.createElement('div');
processingMsg.className = 'message bot-message';
processingMsg.innerHTML = `
<div>正在将图片转换为 ${targetFormat.toUpperCase()}，请稍候...</div>
<div class="message-time">${this.getCurrentTime()}</div>
`;
chatMessages.appendChild(processingMsg);
chatMessages.scrollTop = chatMessages.scrollHeight;
// 模拟转换过程
setTimeout(() => {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const resultMsg = document.createElement('div');
resultMsg.className = 'message bot-message';
resultMsg.innerHTML = `
<div>图片已成功转换为 ${targetFormat.toUpperCase()} 格式：</div>
<img src="${canvas.toDataURL(`image/${targetFormat}`)}" class="image-preview">
<button class="download-btn" onclick="window.downloadImage('${canvas.toDataURL(`image/${targetFormat}`)}', 'converted.${targetFormat}')">
<i class="fas fa-download"></i> 下载 ${targetFormat.toUpperCase()} 文件
</button>
<div class="message-time">${this.getCurrentTime()}</div>
`;
chatMessages.appendChild(resultMsg);
chatMessages.scrollTop = chatMessages.scrollHeight;
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}, 2000);
},
/**
* 调整输入框高度
*/
adjustTextareaHeight: function() {
const textarea = document.getElementById('message-input');
textarea.style.height = 'auto';
textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
},
/**
* 获取当前时间
*/
getCurrentTime: function() {
const now = new Date();
return `今天 ${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
}
};
// 全局下载函数
window.downloadImage = function(url, filename) {
const link = document.createElement('a');
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
// ==================== 页面加载完成后的初始化 ====================
document.addEventListener('DOMContentLoaded', function () {
// 初始化主题管理
themeManager.init();
// 初始化每日一言和天气
dailyQuote.init();
weatherWidget.init();
// 初始化AI助手
aiAssistant.init();
const app = document.getElementById('app');
const toggleBtn = document.querySelector('.nav-toggle');
const navItems = document.querySelectorAll('.nav-item');
const pageTitle = document.getElementById('page-title');
const mainContents = document.querySelectorAll('.main-content');
const pageFrames = document.querySelectorAll('.page-frame');
// 页面标题映射
const titleMap = {
'home': '主页',
'tools/image-cut': '抠图工具',
'tools/audio-parse': '音频解析',
'network/ip-query': 'IP地址查询',
'media/gallery': '图片画廊',
'content/blog': '博客',
'help/faq': '常见问题',
'business/pricing': '价格套餐'
};
// 当前活动页面
let currentPage = 'home';
// ==================== 导航栏功能 ====================
// 点击按钮切换导航状态
toggleBtn.addEventListener('click', function () {
app.classList.toggle('open');
// 按钮动画
if (app.classList.contains('open')) {
toggleBtn.innerHTML = '<i class="fa-solid fa-xmark"></i>';
} else {
toggleBtn.innerHTML = '<i class="fa-solid fa-bars"></i>';
}
// 更新按钮的ARIA标签
const isOpen = app.classList.contains('open');
toggleBtn.setAttribute('aria-expanded', isOpen);
toggleBtn.setAttribute('aria-label', isOpen ? '隐藏导航' : '显示导航');
});
// 点击内容区域关闭导航
document.getElementById('content').addEventListener('click', function (e) {
if (app.classList.contains('open') && !e.target.closest('.nav-toggle')) {
app.classList.remove('open');
toggleBtn.innerHTML = '<i class="fa-solid fa-bars"></i>';
toggleBtn.setAttribute('aria-expanded', 'false');
toggleBtn.setAttribute('aria-label', '显示导航');
}
});
// ==================== 页面加载功能 ====================
/**
* 加载外部页面到iframe
* @param {string} pageId - 要加载的页面ID
*/
function loadExternalPage(pageId) {
// 隐藏所有内容
mainContents.forEach(content => content.style.display = 'none');
pageFrames.forEach(frame => {
frame.style.display = 'none';
frame.src = '';
});
// 如果是主页
if (pageId === 'home') {
document.getElementById('home').style.display = 'block';
currentPage = 'home';
pageTitle.textContent = 'TENG YUAN - 主页';
return;
}
// 查找对应的iframe
const targetFrame = document.getElementById(pageId);
if (targetFrame) {
// 设置iframe的src（模拟不同目录下的页面）
targetFrame.src = `pages/${pageId}.html`;
targetFrame.style.display = 'block';
currentPage = pageId;
// 更新标题
pageTitle.textContent = `TENG YUAN - ${titleMap[pageId] || pageId}`;
// 发送当前主题给iframe
const currentTheme = document.body.classList.contains('dark-mode') ? 'dark-mode' : 'light-mode';
targetFrame.onload = function() {
this.contentWindow.postMessage({
type: 'THEME_CHANGE',
theme: currentTheme
}, '*');
};
}
}
// 点击导航项加载页面
navItems.forEach(item => {
item.addEventListener('click', function (e) {
e.preventDefault();
const target = this.dataset.target;
// 关闭导航
app.classList.remove('open');
toggleBtn.innerHTML = '<i class="fa-solid fa-bars"></i>';
toggleBtn.setAttribute('aria-expanded', 'false');
toggleBtn.setAttribute('aria-label', '显示导航');
// 加载页面
loadExternalPage(target);
});
});
// ==================== 消息监听 ====================
// 监听来自iframe的消息
window.addEventListener('message', function(event) {
if (event.data && event.data.type === 'THEME_TOGGLE_REQUEST') {
// 当iframe请求切换主题时
themeManager.toggleTheme();
document.getElementById('toggle').checked = document.body.classList.contains('dark-mode');
}
});
});
</script>
</body>
</html>
index.html
style.css
index.js