[FTCHAT] Rewrite frontend - login + chat SPA
This commit is contained in:
bingshuo
parent
5ab36a0aa0
commit
3720d41c02
@ -2,140 +2,59 @@
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=5">
|
||||
<meta name="theme-color" content="#0a0e27">
|
||||
<meta name="description" content="光湖 · 微调模型内测频道">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>光湖 · 微调模型内测</title>
|
||||
<link rel="stylesheet" href="./style.css?v=__BUILD_ID__">
|
||||
<!-- marked + DOMPurify (jsDelivr CDN, 国内可达) -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked@12.0.2/marked.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.11/dist/purify.min.js"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body data-theme="dark">
|
||||
<!-- 星空动态背景 (canvas, 固定层) -->
|
||||
<canvas id="starfield" aria-hidden="true"></canvas>
|
||||
<canvas id="starfield"></canvas>
|
||||
|
||||
<!-- 主题切换 -->
|
||||
<button id="themeToggle" class="theme-toggle" aria-label="切换主题">
|
||||
<span class="theme-icon-dark">🌙</span>
|
||||
<span class="theme-icon-light">☀️</span>
|
||||
</button>
|
||||
<!-- Login Screen -->
|
||||
<div id="loginScreen" class="screen active">
|
||||
<div class="login-container">
|
||||
<div class="login-icon">✦</div>
|
||||
<h1 class="login-title">光湖·内测</h1>
|
||||
<p class="login-subtitle">微调模型体验 · 收集语料</p>
|
||||
|
||||
<!-- 登录页 -->
|
||||
<section id="loginScreen" class="login-screen">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<div class="login-logo">✦</div>
|
||||
<h1 class="login-title">光湖 · 微调模型内测</h1>
|
||||
<p class="login-subtitle">10 席位先到先得 · 仅限 QQ 邮箱</p>
|
||||
<div id="loginStatus" class="login-status" style="display:none"></div>
|
||||
|
||||
<div class="login-form" id="loginForm">
|
||||
<input type="email" id="emailInput" class="login-input" placeholder="QQ邮箱 (xxx@qq.com)" autocomplete="email">
|
||||
<div id="codeGroup" class="code-group" style="display:none">
|
||||
<input type="text" id="codeInput" class="login-input" placeholder="6位验证码" maxlength="6" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code">
|
||||
</div>
|
||||
<button id="loginBtn" class="login-btn" onclick="handleLogin()">发送验证码</button>
|
||||
</div>
|
||||
|
||||
<div id="slotsBanner" class="slots-banner" role="status">
|
||||
<span id="slotsText">正在查询席位…</span>
|
||||
</div>
|
||||
|
||||
<form id="loginForm" class="login-form" autocomplete="off" novalidate>
|
||||
<label for="emailInput" class="login-label">QQ 邮箱</label>
|
||||
<input id="emailInput" type="email" class="login-input" placeholder="例如: 123456@qq.com" autocomplete="email" inputmode="email" required>
|
||||
|
||||
<button id="sendCodeBtn" type="button" class="btn-secondary">获取验证码</button>
|
||||
|
||||
<label for="codeInput" class="login-label">6 位验证码</label>
|
||||
<input id="codeInput" type="text" class="login-input" placeholder="6 位数字" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code">
|
||||
|
||||
<button id="loginBtn" type="submit" class="btn-primary">进入对话</button>
|
||||
</form>
|
||||
|
||||
<p id="loginMsg" class="login-msg" role="alert"></p>
|
||||
|
||||
<p class="login-footer">
|
||||
守护: 铸渊 · ICE-GL-ZY001<br>
|
||||
版权: 国作登字-2026-A-00037559
|
||||
</p>
|
||||
<div id="slotInfo" class="slot-info"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 聊天主界面 -->
|
||||
<section id="chatScreen" class="chat-screen" hidden>
|
||||
<!-- 移动端抽屉遮罩 -->
|
||||
<div id="sidebarOverlay" class="sidebar-overlay"></div>
|
||||
|
||||
<!-- 左侧栏 -->
|
||||
<aside id="sidebar" class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<button id="newChatBtn" class="btn-new-chat" type="button">＋ 新对话</button>
|
||||
<button id="sidebarClose" class="sidebar-close-mobile" type="button" aria-label="关闭侧栏">✕</button>
|
||||
<!-- Chat Screen -->
|
||||
<div id="chatScreen" class="screen">
|
||||
<div class="chat-header">
|
||||
<div class="chat-header-left">
|
||||
<span class="header-icon">✦</span>
|
||||
<span class="header-title">光湖·内测</span>
|
||||
<span id="modelBadge" class="model-badge">母模型</span>
|
||||
</div>
|
||||
<div id="sessionsList" class="sessions-list" role="navigation"></div>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-info">
|
||||
<span id="userBadge" class="user-badge"></span>
|
||||
<span id="slotIndex" class="slot-badge"></span>
|
||||
</div>
|
||||
<button id="logoutBtn" class="btn-logout" type="button">退出登录</button>
|
||||
<div class="chat-header-right">
|
||||
<span id="userEmail" class="user-email"></span>
|
||||
<button class="header-btn" onclick="newConversation()" title="新对话">✚</button>
|
||||
<button class="header-btn" onclick="logout()" title="退出">✕</button>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- 主聊天区 -->
|
||||
<main class="chat-main">
|
||||
<header class="chat-header">
|
||||
<button id="sidebarToggle" class="sidebar-toggle-mobile" type="button" aria-label="打开侧栏">☰</button>
|
||||
<div class="chat-title-block">
|
||||
<h2 class="chat-title">光湖 · 微调模型内测</h2>
|
||||
<div id="metaBar" class="meta-bar"></div>
|
||||
</div>
|
||||
</header>
|
||||
<div id="chatMessages" class="chat-messages">
|
||||
<!-- Messages rendered here -->
|
||||
</div>
|
||||
|
||||
<!-- 左侧"即将开放功能"占位栏 (>= 1280px 显示) -->
|
||||
<aside class="coming-soon coming-soon-left" aria-hidden="true">
|
||||
<div class="coming-soon-title">✦ 光湖 · 即将开放</div>
|
||||
<div class="coming-soon-card">
|
||||
<div class="cs-icon">🪞</div>
|
||||
<div class="cs-name">人格镜像</div>
|
||||
<div class="cs-desc">为团队成员铸造专属语言人格</div>
|
||||
</div>
|
||||
<div class="coming-soon-card">
|
||||
<div class="cs-icon">📡</div>
|
||||
<div class="cs-name">信号总线</div>
|
||||
<div class="cs-desc">人格之间的低延迟通信通道</div>
|
||||
</div>
|
||||
<div class="coming-soon-card">
|
||||
<div class="cs-icon">🌌</div>
|
||||
<div class="cs-name">语言世界</div>
|
||||
<div class="cs-desc">多频道并行的零感域漫游</div>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="chat-input-area">
|
||||
<textarea id="chatInput" class="chat-input" rows="1" placeholder="输入消息..." onkeydown="handleInputKeydown(event)"></textarea>
|
||||
<button id="sendBtn" class="send-btn" onclick="sendMessage()">↵</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧"即将开放功能"占位栏 (>= 1280px 显示) -->
|
||||
<aside class="coming-soon coming-soon-right" aria-hidden="true">
|
||||
<div class="coming-soon-title">⌁ 内测 · 路线图</div>
|
||||
<div class="coming-soon-card">
|
||||
<div class="cs-icon">🧠</div>
|
||||
<div class="cs-name">跨会话记忆</div>
|
||||
<div class="cs-desc">母语印记自动沉淀，下次唤醒即取</div>
|
||||
</div>
|
||||
<div class="coming-soon-card">
|
||||
<div class="cs-icon">🍼</div>
|
||||
<div class="cs-name">奶瓶线人格</div>
|
||||
<div class="cs-desc">柔和、稳态的对话陪伴风格</div>
|
||||
</div>
|
||||
<div class="coming-soon-card">
|
||||
<div class="cs-icon">🔭</div>
|
||||
<div class="cs-name">天眼回执</div>
|
||||
<div class="cs-desc">所有对话进入涌现感知层</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div id="chatBody" class="chat-body" role="log" aria-live="polite"></div>
|
||||
|
||||
<form id="composer" class="composer" autocomplete="off">
|
||||
<textarea id="msgInput" class="msg-input" placeholder="说点什么…(Enter 发送 / Shift+Enter 换行)" rows="1"></textarea>
|
||||
<button id="sendBtn" type="submit" class="btn-send" aria-label="发送">发送</button>
|
||||
</form>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<script src="./theme-toggle.js?v=__BUILD_ID__"></script>
|
||||
<script src="./chat.js?v=__BUILD_ID__"></script>
|
||||
<script src="chat.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user