533 lines
36 KiB
HTML
533 lines
36 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>云大阁 - 首页</title>
|
|||
|
|
|
|||
|
|
<!-- Google Fonts -->
|
|||
|
|
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600,800" rel="stylesheet">
|
|||
|
|
|
|||
|
|
<!-- Tailwind CSS CDN -->
|
|||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|||
|
|
<script>
|
|||
|
|
// 配置主色和字体
|
|||
|
|
tailwind.config = {
|
|||
|
|
theme: {
|
|||
|
|
extend: {
|
|||
|
|
colors: {
|
|||
|
|
primary: '#2563eb'
|
|||
|
|
},
|
|||
|
|
fontFamily: {
|
|||
|
|
'work': ['Work Sans', 'sans-serif']
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- FontAwesome 6 Free CDN -->
|
|||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous">
|
|||
|
|
|
|||
|
|
<!-- 自定义样式 - 优化后的结构 -->
|
|||
|
|
<link rel="stylesheet" href="css/style.css"> <!-- 主样式文件（包含字体大小和图片尺寸） -->
|
|||
|
|
<link rel="stylesheet" href="css/responsive.css"> <!-- 响应式设计 -->
|
|||
|
|
<link rel="stylesheet" href="css/sidebar-responsive.css"> <!-- 侧边栏响应式 -->
|
|||
|
|
<link rel="stylesheet" href="css/tools-dropdown.css"> <!-- 工具下拉菜单 -->
|
|||
|
|
<link rel="stylesheet" href="css/switch-toggle.css"> <!-- 开关按钮样式 -->
|
|||
|
|
<link rel="stylesheet" href="css/font-optimization.css"> <!-- 字体和行距优化 -->
|
|||
|
|
<link rel="stylesheet" href="css/compact-mode.css"> <!-- 超紧凑模式 -->
|
|||
|
|
<link rel="stylesheet" href="css/safari-fix.css"> <!-- Safari和苹果系统修复 -->
|
|||
|
|
<link rel="stylesheet" href="css/zoom-support.css"> <!-- 页面缩放支持 -->
|
|||
|
|
<link rel="stylesheet" href="css/layout-fixes.css"> <!-- 布局修复（最高优先级） -->
|
|||
|
|
<link rel="stylesheet" href="css/chat-input-fix.css"> <!-- 修复输入框遮挡问题 -->
|
|||
|
|
<link rel="stylesheet" href="css/adaptive-sizing.css"> <!-- 自适应尺寸系统（覆盖固定px值） -->
|
|||
|
|
<link rel="stylesheet" href="css/image-size-fix.css"> <!-- 强制图片尺寸380x200（必须最后加载） -->
|
|||
|
|
</head>
|
|||
|
|
<body class="font-work h-screen overflow-hidden">
|
|||
|
|
<!-- 初始加载遮罩 -->
|
|||
|
|
<div id="authCheckLoader" style="position: fixed; inset: 0; background: white; z-index: 9999; display: flex; align-items: center; justify-content: center;">
|
|||
|
|
<div style="text-align: center;">
|
|||
|
|
<div style="width: 40px; height: 40px; border: 3px solid #f3f3f3; border-top: 3px solid #2563eb; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px;"></div>
|
|||
|
|
<p style="color: #666;">正在加载...</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<style>
|
|||
|
|
@keyframes spin {
|
|||
|
|
0% { transform: rotate(0deg); }
|
|||
|
|
100% { transform: rotate(360deg); }
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<!-- 页眉右上角用户功能 -->
|
|||
|
|
<div class="fixed top-4 right-4 z-50">
|
|||
|
|
<div class="relative">
|
|||
|
|
<!-- 用户头像 -->
|
|||
|
|
<button id="userMenuToggle" class="w-9 h-9 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-all duration-200 shadow-lg border border-gray-300">
|
|||
|
|
<!-- 用户图标 SVG -->
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-600">
|
|||
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|||
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<!-- 下拉菜单 - 未登录状态 -->
|
|||
|
|
<div id="userDropdown" class="absolute right-0 top-14 hidden bg-white border border-gray-200 rounded-lg shadow-xl py-2 min-w-40 z-60">
|
|||
|
|
<!-- 未登录菜单 -->
|
|||
|
|
<div id="guestMenu">
|
|||
|
|
<a href="auth/pages/login.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2">
|
|||
|
|
<i class="fas fa-sign-in-alt text-blue-500"></i>
|
|||
|
|
<span>登录</span>
|
|||
|
|
</a>
|
|||
|
|
<a href="auth/pages/register.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2">
|
|||
|
|
<i class="fas fa-user-plus text-green-500"></i>
|
|||
|
|
<span>注册</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 已登录菜单 -->
|
|||
|
|
<div id="userMenu" class="hidden">
|
|||
|
|
<div class="px-4 py-2 border-b border-gray-200">
|
|||
|
|
<div class="flex justify-between items-start">
|
|||
|
|
<div>
|
|||
|
|
<div class="text-sm font-medium text-gray-900" id="userName">用户名</div>
|
|||
|
|
<div class="text-xs text-gray-500" id="userAccount">账号信息</div>
|
|||
|
|
</div>
|
|||
|
|
<button id="refreshUserInfo" class="text-gray-400 hover:text-gray-600 transition-colors" title="刷新用户信息">
|
|||
|
|
<i class="fas fa-sync-alt text-xs"></i>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<a href="#profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2">
|
|||
|
|
<i class="fas fa-user text-gray-500"></i>
|
|||
|
|
<span>个人中心</span>
|
|||
|
|
</a>
|
|||
|
|
<a href="#upgrade" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2">
|
|||
|
|
<i class="fas fa-crown text-yellow-500"></i>
|
|||
|
|
<span>升级</span>
|
|||
|
|
</a>
|
|||
|
|
<a href="#settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2">
|
|||
|
|
<i class="fas fa-cog text-gray-500"></i>
|
|||
|
|
<span>设置</span>
|
|||
|
|
</a>
|
|||
|
|
<hr class="my-1">
|
|||
|
|
<a href="#logout" id="logoutBtn" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2">
|
|||
|
|
<i class="fas fa-sign-out-alt text-red-500"></i>
|
|||
|
|
<span>退出登录</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 左侧侧边栏 - 复刻duijie.html样式 + yundage-keyong1的tooltip -->
|
|||
|
|
<div class="sidebar" id="sidebar">
|
|||
|
|
<!-- 侧边栏内容 -->
|
|||
|
|
<div class="sidebar-content">
|
|||
|
|
<!-- Logo作为第一个菜单项 -->
|
|||
|
|
<div class="menu-item" id="logoMenuItem">
|
|||
|
|
<span class="menu-icon tooltip-wrapper">
|
|||
|
|
<img src="images/logo.png" alt="云大阁" style="width: 40px; height: 40px; object-fit: contain;">
|
|||
|
|
<div class="tooltip-text">打开/隐藏边框</div>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-item" id="newChatBtn">
|
|||
|
|
<span class="menu-icon tooltip-wrapper">
|
|||
|
|
<!-- 云朵图标带加号 -->
|
|||
|
|
<div class="cloud-icon-container">
|
|||
|
|
<!-- 云朵主体 -->
|
|||
|
|
<div class="cloud-main">
|
|||
|
|
<!-- 云朵圆形组合 -->
|
|||
|
|
<div class="cloud-circle cloud-circle-1"></div>
|
|||
|
|
<div class="cloud-circle cloud-circle-2"></div>
|
|||
|
|
<div class="cloud-circle cloud-circle-3"></div>
|
|||
|
|
<div class="cloud-circle cloud-circle-4"></div>
|
|||
|
|
<div class="cloud-base"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 加号 -->
|
|||
|
|
<div class="cloud-plus">+</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tooltip-text">新对话</div>
|
|||
|
|
</span>
|
|||
|
|
<span class="menu-text">新对话</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="menu-item" id="historyBtn">
|
|||
|
|
<span class="menu-icon tooltip-wrapper">
|
|||
|
|
📜
|
|||
|
|
<div class="tooltip-text">历史记录</div>
|
|||
|
|
</span>
|
|||
|
|
<span class="menu-text">历史记录</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 历史对话区域 - 仅在展开时显示 -->
|
|||
|
|
<div class="chat-history-section">
|
|||
|
|
<div class="chat-history-title">聊天</div>
|
|||
|
|
<div class="chat-history-list">
|
|||
|
|
<div class="chat-history-item">
|
|||
|
|
<div class="chat-title">模拟对话页面布局</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-history-item">
|
|||
|
|
<div class="chat-title">New chat</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-history-item">
|
|||
|
|
<div class="chat-title">New chat</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-history-item">
|
|||
|
|
<div class="chat-title">如何静止</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-history-item">
|
|||
|
|
<div class="chat-title">图标提取透明背景</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-history-item">
|
|||
|
|
<div class="chat-title">水平垂直居中区别</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-history-item">
|
|||
|
|
<div class="chat-title">New chat</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-history-item">
|
|||
|
|
<div class="chat-title">标题代码实现</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-history-item">
|
|||
|
|
<div class="chat-title">网站背景动画灵感</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-history-item">
|
|||
|
|
<div class="chat-title">WSL Claude Code 连接问题</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-history-item">
|
|||
|
|
<div class="chat-title">服务器部署与配置建议</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 底部菜单项容器 -->
|
|||
|
|
<div class="sidebar-bottom-items">
|
|||
|
|
<div class="menu-item">
|
|||
|
|
<span class="menu-icon tooltip-wrapper">
|
|||
|
|
⚙️
|
|||
|
|
<div class="tooltip-text">设置</div>
|
|||
|
|
</span>
|
|||
|
|
<span class="menu-text">设置</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="menu-item" id="downloadAppBtn">
|
|||
|
|
<span class="menu-icon tooltip-wrapper">
|
|||
|
|
📱
|
|||
|
|
<div class="tooltip-text">下载APP</div>
|
|||
|
|
</span>
|
|||
|
|
<span class="menu-text">下载APP</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 主体内容区域 - 自适应高度，占据剩余空间 -->
|
|||
|
|
<main class="main-content flex flex-col flex-1 transition-all duration-300">
|
|||
|
|
|
|||
|
|
<!-- 主聊天区域 - 占据剩余空间 -->
|
|||
|
|
<section class="chat-section chroma-hero relative flex-1 flex flex-col" style="overflow: visible;">
|
|||
|
|
|
|||
|
|
<!-- 动态背景 -->
|
|||
|
|
<div class="background-container" style="position: fixed; inset: 0; z-index: 1; overflow: hidden;">
|
|||
|
|
<div class="animated-gradient" id="animatedGradient" style="position: absolute; inset: 0; filter: blur(40px) saturate(1.2); transition: background 0.5s ease-out;"></div>
|
|||
|
|
<div class="backdrop-overlay" style="position: absolute; inset: 0; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(2px);"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 欢迎模式布局 -->
|
|||
|
|
<div id="welcomeMode" class="flex-1 relative" style="z-index: 10;">
|
|||
|
|
<div class="welcome-content-wrapper">
|
|||
|
|
<div class="container mx-auto" style="max-width: 1324px; padding: 0 24px; text-align: center;">
|
|||
|
|
<!-- 欢迎文字 - 在对话框上方 -->
|
|||
|
|
<div class="deepseek-welcome-section">
|
|||
|
|
<div class="welcome-message animate-fade-in">
|
|||
|
|
<div class="text-3d-container" style="position: relative; perspective: 1000px; display: flex; flex-direction: column; align-items: center; margin: 0;">
|
|||
|
|
<h2 class="text-4xl font-black mb-1" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-weight: 300; letter-spacing: -0.02em; font-size: clamp(2.5rem, 5vw, 4rem);">
|
|||
|
|
<span class="main-text-static">在云大阁找</span>
|
|||
|
|
<span id="rotating-word" class="rotating-word-3d cursor-pointer">资料</span>
|
|||
|
|
</h2>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 对话输入框 - Apple风格 -->
|
|||
|
|
<div class="deepseek-input-section" style="animation: fadeInUp 0.8s ease-out 0.2s both;">
|
|||
|
|
<div class="input-area" style="max-width: 1020px; width: 100%; margin: 0 auto;">
|
|||
|
|
|
|||
|
|
<div class="chat-input-container" style="width: 100%; position: relative; z-index: 1;">
|
|||
|
|
<div class="input-wrapper" style="position: relative; background: rgba(255, 255, 255, 0.9); border-radius: 1.5rem; padding: 0.75rem 1rem; backdrop-filter: blur(15px); border: 1px solid rgba(0, 0, 0, 0.1); transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);">
|
|||
|
|
<!-- 输入框行：工具按钮、输入框和发送按钮 -->
|
|||
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|||
|
|
<!-- 工具按钮（左侧圆形） -->
|
|||
|
|
<button id="toolsMenuBtn" class="tools-menu-btn" style="width: 32px; height: 32px; border-radius: 50%; background: #f0f0f0; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; align-self: center;">
|
|||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">
|
|||
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|||
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
<textarea id="messageInput"
|
|||
|
|
placeholder="向云大阁提问任何问题..."
|
|||
|
|
rows="1"
|
|||
|
|
class="chat-textarea"
|
|||
|
|
style="flex: 1; border: none; outline: none; background: transparent; resize: none; font-size: 19px; line-height: 28px; color: #333; min-height: 124px; max-height: 220px; padding: 46px 12px 50px 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;"></textarea>
|
|||
|
|
<button id="sendBtn" class="send-button" style="padding: 0; background: transparent; border: none; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; align-self: center;">
|
|||
|
|
<svg class="send-icon" id="sendIcon" style="width: 20px; height: 20px; transition: opacity 0.3s ease; color: #999;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<path d="m3 3 3 9-3 9 19-9Z"/>
|
|||
|
|
<path d="m6 12 13 0"/>
|
|||
|
|
</svg>
|
|||
|
|
<div class="loading-spinner" id="loadingSpinner" style="display: none; width: 20px; height: 20px; border: 2px solid #f3f3f3; border-top: 2px solid #666; border-radius: 50%; animation: spin 1s linear infinite;"></div>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<!-- 工具下拉菜单容器 -->
|
|||
|
|
<div class="tools-button-container" style="position: relative;">
|
|||
|
|
<!-- 下拉菜单 -->
|
|||
|
|
<div id="toolsDropdown" class="tools-dropdown" style="display: none; position: absolute; bottom: 30px; left: 0; background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); min-width: 240px; padding: 12px; z-index: 100; border: 1px solid rgba(0, 0, 0, 0.08);">
|
|||
|
|
<div class="menu-item no-hover" id="deepResearchItem" style="padding: 8px 0; display: flex; align-items: center; justify-content: space-between; font-size: 14px; background: transparent !important;">
|
|||
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|||
|
|
<span style="font-size: 16px;">🔍</span>
|
|||
|
|
<span style="color: #333;">深度研究</span>
|
|||
|
|
</div>
|
|||
|
|
<label class="switch" style="position: relative; display: inline-block; width: 44px; height: 24px;">
|
|||
|
|
<input type="checkbox" id="deepResearchToggle" style="opacity: 0; width: 0; height: 0;">
|
|||
|
|
<span class="slider" style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .3s; border-radius: 24px;">
|
|||
|
|
<span style="position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%;"></span>
|
|||
|
|
</span>
|
|||
|
|
<span id="deepResearchStatus" style="display: none;">关</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-item no-hover disabled" id="showThinkingItem" style="padding: 8px 0; display: flex; align-items: center; justify-content: space-between; font-size: 14px; background: transparent !important; cursor: not-allowed; pointer-events: none;">
|
|||
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|||
|
|
<span style="font-size: 16px;">💭</span>
|
|||
|
|
<span style="color: #333;">显示思考</span>
|
|||
|
|
</div>
|
|||
|
|
<label class="switch disabled" style="position: relative; display: inline-block; width: 44px; height: 24px; opacity: 0.5; cursor: not-allowed;">
|
|||
|
|
<input type="checkbox" id="showThinkingToggle" style="opacity: 0; width: 0; height: 0;" disabled>
|
|||
|
|
<span class="slider" style="position: absolute; cursor: not-allowed; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .3s; border-radius: 24px;">
|
|||
|
|
<span style="position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%;"></span>
|
|||
|
|
</span>
|
|||
|
|
<span id="showThinkingStatus" style="display: none;">关</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 聊天模式固定输入框 -->
|
|||
|
|
<div id="chatModeInput" class="fixed bottom-0 left-0 right-0 z-20 hidden" style="background: transparent; padding: 0;">
|
|||
|
|
<div class="container mx-auto" style="max-width: 1020px; padding: 1rem;">
|
|||
|
|
<div class="input-wrapper" style="position: relative; background: rgba(255, 255, 255, 0.9); border-radius: 1.5rem; padding: 0.75rem 1rem; backdrop-filter: blur(15px); border: 1px solid rgba(0, 0, 0, 0.1); transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);">
|
|||
|
|
<!-- 第一行：输入框和发送按钮 -->
|
|||
|
|
<div style="display: flex; align-items: center;">
|
|||
|
|
<textarea id="chatModeMessageInput"
|
|||
|
|
placeholder="向云大阁提问任何问题..."
|
|||
|
|
rows="1"
|
|||
|
|
class="chat-textarea"
|
|||
|
|
style="flex: 1; border: none; outline: none; background: transparent; resize: none; font-size: 19px; line-height: 1.5; color: #333; min-height: 50px; max-height: 110px; padding: 12px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;"></textarea>
|
|||
|
|
<button id="chatModeSendBtn" class="send-button" style="margin-left: 0.5rem; padding: 0; background: transparent; border: none; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;">
|
|||
|
|
<svg class="send-icon" id="chatModeSendIcon" style="width: 20px; height: 20px; transition: opacity 0.3s ease; color: #999;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<path d="m3 3 3 9-3 9 19-9Z"/>
|
|||
|
|
<path d="m6 12 13 0"/>
|
|||
|
|
</svg>
|
|||
|
|
<div class="loading-spinner" id="chatModeLoadingSpinner" style="display: none; width: 20px; height: 20px; border: 2px solid #f3f3f3; border-top: 2px solid #666; border-radius: 50%; animation: spin 1s linear infinite;"></div>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<!-- 第二行：工具按钮 -->
|
|||
|
|
<div class="tools-button-container" style="position: relative; margin-top: 8px;">
|
|||
|
|
<button id="chatModeToolsMenuBtn" class="tools-menu-btn" style="width: 32px; height: 32px; border-radius: 50%; background: #f0f0f0; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0;">
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #666;">
|
|||
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|||
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
<!-- 下拉菜单 -->
|
|||
|
|
<div id="chatModeToolsDropdown" class="tools-dropdown" style="display: none; position: absolute; bottom: 30px; left: 0; background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); min-width: 240px; padding: 12px; z-index: 100; border: 1px solid rgba(0, 0, 0, 0.08);">
|
|||
|
|
<div class="menu-item no-hover" id="chatModeDeepResearchItem" style="padding: 8px 0; display: flex; align-items: center; justify-content: space-between; font-size: 14px; background: transparent !important;">
|
|||
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|||
|
|
<span style="font-size: 16px;">🔍</span>
|
|||
|
|
<span style="color: #333;">深度研究</span>
|
|||
|
|
</div>
|
|||
|
|
<label class="switch" style="position: relative; display: inline-block; width: 44px; height: 24px;">
|
|||
|
|
<input type="checkbox" id="chatModeDeepResearchToggle" style="opacity: 0; width: 0; height: 0;">
|
|||
|
|
<span class="slider" style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .3s; border-radius: 24px;">
|
|||
|
|
<span style="position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%;"></span>
|
|||
|
|
</span>
|
|||
|
|
<span id="chatModeDeepResearchStatus" style="display: none;">关</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-item no-hover disabled" id="chatModeShowThinkingItem" style="padding: 8px 0; display: flex; align-items: center; justify-content: space-between; font-size: 14px; background: transparent !important; cursor: not-allowed; pointer-events: none;">
|
|||
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|||
|
|
<span style="font-size: 16px;">💭</span>
|
|||
|
|
<span style="color: #333;">显示思考</span>
|
|||
|
|
</div>
|
|||
|
|
<label class="switch disabled" style="position: relative; display: inline-block; width: 44px; height: 24px; opacity: 0.5; cursor: not-allowed;">
|
|||
|
|
<input type="checkbox" id="chatModeShowThinkingToggle" style="opacity: 0; width: 0; height: 0;" disabled>
|
|||
|
|
<span class="slider" style="position: absolute; cursor: not-allowed; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .3s; border-radius: 24px;">
|
|||
|
|
<span style="position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%;"></span>
|
|||
|
|
</span>
|
|||
|
|
<span id="chatModeShowThinkingStatus" style="display: none;">关</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 中间部分：聊天记录容器（隐藏状态） -->
|
|||
|
|
<div class="chat-container" id="chatContainer" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 15; display: none; overflow-y: auto; height: 100vh;">
|
|||
|
|
<div class="chat-wrapper" style="min-height: 100vh; display: flex; flex-direction: column;">
|
|||
|
|
<div id="chatMessages" class="chat-messages" style="flex: 1; width: 100%; overflow: visible;">
|
|||
|
|
<!-- 聊天记录内容 -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 下半部分：剩余空间用于显示内容 -->
|
|||
|
|
<div class="flex-1 flex items-center justify-center">
|
|||
|
|
<!-- 内容区域预留 -->
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 底部功能区 - 3D新闻卡片固定在底部 -->
|
|||
|
|
<div class="ticker-section" style="display: block; height: 150px; position: absolute; bottom: 50px; left: 0; right: 0; overflow: visible;">
|
|||
|
|
<!-- 新闻跑马灯 - 3D增强版 -->
|
|||
|
|
<div class="ticker-3d-container relative" id="ticker3D" style="padding: 25px 0;">
|
|||
|
|
<!-- 3D场景容器 -->
|
|||
|
|
<div class="ticker-parallax-scene">
|
|||
|
|
<!-- 背景粒子效果 -->
|
|||
|
|
<div class="ticker-particles" id="tickerParticles"></div>
|
|||
|
|
|
|||
|
|
<!-- 3D新闻轮播 - 翻转卡片版 -->
|
|||
|
|
<div class="ticker-carousel" id="tickerCarousel">
|
|||
|
|
<div class="ticker-flip-card" data-index="0" data-news="新闻1" data-image="新闻1.png">
|
|||
|
|
<div class="flip-card-inner">
|
|||
|
|
<div class="flip-card-front">
|
|||
|
|
<img src="images/新闻1.png" alt="新闻1" class="news-image" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flip-card-back">
|
|||
|
|
<img src="images/新闻1.png" alt="新闻1" class="news-image" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="ticker-flip-card" data-index="1" data-news="新闻2" data-image="新闻2.png">
|
|||
|
|
<div class="flip-card-inner">
|
|||
|
|
<div class="flip-card-front">
|
|||
|
|
<img src="images/新闻2.png" alt="新闻2" class="news-image" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flip-card-back">
|
|||
|
|
<img src="images/新闻2.png" alt="新闻2" class="news-image" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="ticker-flip-card" data-index="2" data-news="新闻3" data-image="新闻3.png">
|
|||
|
|
<div class="flip-card-inner">
|
|||
|
|
<div class="flip-card-front">
|
|||
|
|
<img src="images/新闻3.png" alt="新闻3" class="news-image" />
|
|||
|
|
</div>
|
|||
|
|
<div class="flip-card-back">
|
|||
|
|
<img src="images/新闻3.png" alt="新闻3" class="news-image" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 脉冲效果 -->
|
|||
|
|
<div class="ticker-pulse-ring" style="width: 100px; height: 100px; top: 50%; left: 20%; animation-delay: 0s;"></div>
|
|||
|
|
<div class="ticker-pulse-ring" style="width: 80px; height: 80px; top: 50%; right: 15%; animation-delay: 1s;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 下载二维码弹窗 -->
|
|||
|
|
<div id="downloadModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
|
|||
|
|
<div class="bg-white rounded-lg p-6 max-w-sm mx-4 text-center">
|
|||
|
|
<h3 class="text-lg font-medium mb-4">下载云大阁APP</h3>
|
|||
|
|
<!-- 模拟二维码 -->
|
|||
|
|
<div class="w-48 h-48 mx-auto mb-4 bg-gray-100 border-2 border-gray-300 flex items-center justify-center relative">
|
|||
|
|
<div class="grid grid-cols-8 gap-0.5">
|
|||
|
|
<!-- 模拟二维码图案 -->
|
|||
|
|
<div class="w-2 h-2 bg-black"></div>
|
|||
|
|
<div class="w-2 h-2 bg-white"></div>
|
|||
|
|
<div class="w-2 h-2 bg-black"></div>
|
|||
|
|
<div class="w-2 h-2 bg-black"></div>
|
|||
|
|
<div class="w-2 h-2 bg-white"></div>
|
|||
|
|
<div class="w-2 h-2 bg-black"></div>
|
|||
|
|
<div class="w-2 h-2 bg-white"></div>
|
|||
|
|
<div class="w-2 h-2 bg-black"></div>
|
|||
|
|
<!-- 更多二维码图案... -->
|
|||
|
|
<div class="w-2 h-2 bg-white"></div>
|
|||
|
|
<div class="w-2 h-2 bg-black"></div>
|
|||
|
|
<div class="w-2 h-2 bg-white"></div>
|
|||
|
|
<div class="w-2 h-2 bg-white"></div>
|
|||
|
|
<div class="w-2 h-2 bg-black"></div>
|
|||
|
|
<div class="w-2 h-2 bg-white"></div>
|
|||
|
|
<div class="w-2 h-2 bg-black"></div>
|
|||
|
|
<div class="w-2 h-2 bg-white"></div>
|
|||
|
|
<!-- 继续填充... -->
|
|||
|
|
<div class="w-2 h-2 bg-black"></div>
|
|||
|
|
<div class="w-2 h-2 bg-black"></div>
|
|||
|
|
<div class="w-2 h-2 bg-white"></div>
|
|||
|
|
<div class="w-2 h-2 bg-black"></div>
|
|||
|
|
<div class="w-2 h-2 bg-black"></div>
|
|||
|
|
<div class="w-2 h-2 bg-white"></div>
|
|||
|
|
<div class="w-2 h-2 bg-white"></div>
|
|||
|
|
<div class="w-2 h-2 bg-black"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 中心logo -->
|
|||
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|||
|
|
<div class="w-8 h-8 bg-white rounded border">
|
|||
|
|
<img src="images/logo.png" alt="云大阁" class="w-full h-full object-contain">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p class="text-gray-600 text-sm mb-4">扫描二维码下载云大阁移动端</p>
|
|||
|
|
<button id="closeDownloadModal" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
|
|||
|
|
关闭
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- JavaScript -->
|
|||
|
|
<!-- 先加载认证相关脚本 -->
|
|||
|
|
<script src="utils/token/token-manager.js"></script>
|
|||
|
|
<script src="services/api/auth-service.js"></script>
|
|||
|
|
<!-- 原有的chat-service.js已被hippo-deep-service.js替代 -->
|
|||
|
|
<script src="services/api/chat-service.js"></script>
|
|||
|
|
<!-- <script src="services/api/hippo-deep-service.js"></script> -->
|
|||
|
|
<script src="js/auth-integration.js"></script>
|
|||
|
|
<script src="js/chat-manager.js"></script>
|
|||
|
|
<script src="js/markdown-renderer.js"></script>
|
|||
|
|
<!-- 视口和响应式处理 -->
|
|||
|
|
<script src="js/viewport-handler.js"></script>
|
|||
|
|
<!-- 开关按钮桥接 -->
|
|||
|
|
<script src="js/switch-toggle-bridge.js"></script>
|
|||
|
|
|
|||
|
|
<!-- 移除br标签（修复列表间距） -->
|
|||
|
|
<script src="js/remove-br-tags.js"></script>
|
|||
|
|
<!-- 聊天模式性能优化 -->
|
|||
|
|
<script src="js/chat-mode-optimizer.js"></script>
|
|||
|
|
<!-- 工具栏修复 -->
|
|||
|
|
<!-- 暂时禁用，避免事件冲突
|
|||
|
|
<script src="js/tools-dropdown-fix.js"></script> -->
|
|||
|
|
<!-- 聊天模式工具栏修复 -->
|
|||
|
|
<!-- <script src="js/chat-tools-fix.js"></script> -->
|
|||
|
|
<!-- 动态监测输入框高度 -->
|
|||
|
|
<script src="js/chat-input-height-observer.js"></script>
|
|||
|
|
<!-- 聊天模式工具栏收起修复 -->
|
|||
|
|
<!-- <script src="js/chat-tools-toggle-fix.js"></script> -->
|
|||
|
|
<!-- 流式状态显示组件 -->
|
|||
|
|
<script src="js/stream-status.js"></script>
|
|||
|
|
<!-- 再加载主脚本 -->
|
|||
|
|
<script src="js/main.js"></script>
|
|||
|
|
<!-- 聊天模式工具栏简单修复（最后加载） -->
|
|||
|
|
<script src="js/chat-tools-simple-fix.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|