245 lines
12 KiB
HTML
245 lines
12 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>AI 助手对话界面</title>
|
|
|
|
<!-- 字体 -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#6366f1',
|
|
secondary: '#8b5cf6'
|
|
},
|
|
borderRadius: {
|
|
'none': '0px',
|
|
'sm': '2px',
|
|
DEFAULT: '4px',
|
|
'md': '8px',
|
|
'lg': '12px',
|
|
'xl': '16px',
|
|
'2xl': '20px',
|
|
'3xl': '24px',
|
|
'full': '9999px',
|
|
'button': '4px'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- 自定义样式 -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
</head>
|
|
<body class="relative">
|
|
<!-- 动态背景粒子效果 -->
|
|
<div class="particles" id="particles"></div>
|
|
|
|
<div class="flex h-screen">
|
|
<!-- 应用选择面板（初始显示） -->
|
|
<div id="app-selector-panel" class="w-full bg-slate-900/80 glass-effect flex flex-col">
|
|
<div class="p-6 border-b border-slate-700 flex justify-between items-center">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-white mb-2 font-['Pacifico']">AI 助手</h1>
|
|
<p class="text-slate-400">选择一个智能体开始对话</p>
|
|
</div>
|
|
<!-- 设置按钮 -->
|
|
<button
|
|
onclick="openTokenModal()"
|
|
class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-md transition-colors flex items-center gap-2"
|
|
title="设置认证Token"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
设置
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 搜索框 -->
|
|
<div class="p-6 border-b border-slate-700 flex justify-center">
|
|
<div class="relative w-[30%]">
|
|
<input
|
|
type="text"
|
|
id="app-search-input"
|
|
placeholder="搜索智能体..."
|
|
class="w-full bg-slate-800 text-white px-4 py-3 pl-12 rounded-xl border border-slate-600 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-300"
|
|
>
|
|
<i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 应用列表 -->
|
|
<div class="flex-1 overflow-y-auto p-6">
|
|
<div id="app-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
<!-- 应用卡片将通过JavaScript动态加载 -->
|
|
<div class="text-center text-slate-400 py-12 col-span-full">
|
|
<i class="fas fa-spinner fa-spin text-4xl mb-4"></i>
|
|
<p>正在加载智能体列表...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主对话区域（初始隐藏） -->
|
|
<div id="chat-panel" class="flex-1 flex flex-col hidden">
|
|
<!-- 顶部导航栏 -->
|
|
<div class="h-16 bg-slate-900/80 glass-effect border-b border-slate-700 flex items-center justify-between px-6 relative">
|
|
<div class="flex items-center space-x-4">
|
|
<!-- 返回按钮 -->
|
|
<button id="back-to-apps-btn" class="text-white p-2 hover:bg-slate-700 rounded-lg transition">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</button>
|
|
<!-- 当前应用信息 -->
|
|
<div class="flex items-center space-x-3">
|
|
<img id="current-app-avatar" src="" alt="" class="w-10 h-10 rounded-full bg-slate-700">
|
|
<div>
|
|
<h1 id="current-app-name" class="text-lg font-bold text-white">AI 助手</h1>
|
|
<p id="current-app-desc" class="text-xs text-slate-400"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧工具栏 -->
|
|
<div class="flex items-center space-x-4">
|
|
<select id="font-select" class="bg-slate-800 text-white px-3 py-1 rounded-lg border border-slate-600 focus:outline-none focus:border-primary text-sm">
|
|
<option value="'Inter', sans-serif">默认字体</option>
|
|
<option value="'Source Han Sans CN', sans-serif">思源黑体</option>
|
|
<option value="'PingFang SC', sans-serif">苹方</option>
|
|
<option value="'Roboto', sans-serif">Roboto</option>
|
|
</select>
|
|
|
|
<div class="w-8 h-8 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center text-white">
|
|
<i class="fas fa-user text-sm"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 智能回复提示（动态加载） -->
|
|
<div id="quick-reply-container" class="p-4 bg-slate-800/50 border-b border-slate-700 hidden">
|
|
<div id="quick-reply-buttons" class="flex space-x-3 overflow-x-auto">
|
|
<!-- 快捷回复按钮将通过JavaScript动态加载 -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 对话内容区域 -->
|
|
<div class="flex-1 overflow-y-auto p-6 space-y-4" id="chat-container">
|
|
<!-- 欢迎消息 -->
|
|
<div class="flex justify-center">
|
|
<div class="text-center text-slate-400 py-8">
|
|
<i class="fas fa-comments text-4xl mb-4"></i>
|
|
<p id="welcome-message">开始对话吧！</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 输入区域 -->
|
|
<div class="p-6 bg-slate-900/80 glass-effect border-t border-slate-700">
|
|
<div class="flex items-end space-x-4">
|
|
<!-- 语音输入按钮 -->
|
|
<button class="w-12 h-12 bg-slate-700 rounded-full flex items-center justify-center text-white hover:bg-slate-600 transition glow-button">
|
|
<div class="voice-wave">
|
|
<div class="wave-bar"></div>
|
|
<div class="wave-bar"></div>
|
|
<div class="wave-bar"></div>
|
|
<div class="wave-bar"></div>
|
|
<div class="wave-bar"></div>
|
|
</div>
|
|
</button>
|
|
|
|
<!-- 文本输入框 -->
|
|
<div class="flex-1 relative">
|
|
<input
|
|
type="text"
|
|
id="message-input"
|
|
placeholder="输入消息..."
|
|
class="w-full bg-slate-800 text-white px-4 py-3 rounded-xl border border-slate-600 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-300"
|
|
style="border: 1px solid rgba(99, 102, 241, 0.5); box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);"
|
|
>
|
|
</div>
|
|
|
|
<!-- 发送按钮 -->
|
|
<button id="send-button" class="w-12 h-12 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center text-white hover:from-primary/80 hover:to-secondary/80 transition glow-button pulse">
|
|
<i class="fas fa-paper-plane"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 功能按钮 -->
|
|
<div class="flex justify-between items-center mt-3">
|
|
<div class="flex space-x-2">
|
|
<button class="p-2 bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition">
|
|
<i class="fas fa-image"></i>
|
|
</button>
|
|
<button class="p-2 bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition">
|
|
<i class="fas fa-paperclip"></i>
|
|
</button>
|
|
<button class="p-2 bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition">
|
|
<i class="fas fa-microphone"></i>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-slate-400 text-sm">连接状态</span>
|
|
<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Token设置模态框 -->
|
|
<div id="token-modal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
|
|
<div class="bg-slate-800 rounded-lg p-6 w-full max-w-md mx-4 shadow-2xl">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-bold text-white">设置认证Token</h2>
|
|
<button onclick="closeTokenModal()" class="text-slate-400 hover:text-white transition">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-slate-300 mb-2">
|
|
Token（自动添加Bearer前缀）
|
|
</label>
|
|
<textarea
|
|
id="token-input"
|
|
rows="4"
|
|
placeholder="粘贴您的认证token..."
|
|
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent resize-none"
|
|
></textarea>
|
|
<p class="mt-2 text-xs text-slate-400">
|
|
当前状态: <span id="token-status-modal" class="font-medium">未设置</span>
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button
|
|
onclick="saveToken()"
|
|
class="flex-1 px-4 py-2 bg-primary hover:bg-primary/80 text-white rounded-md transition-colors"
|
|
>
|
|
保存
|
|
</button>
|
|
<button
|
|
onclick="closeTokenModal()"
|
|
class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-md transition-colors"
|
|
>
|
|
取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
|
</body>
|
|
</html>
|