From 3720d41c02f3fba9da33bbf2dcfa037a2b76637d Mon Sep 17 00:00:00 2001
From: bingshuo <565183519@qq.com>
Date: Mon, 18 May 2026 19:44:32 +0800
Subject: [PATCH] [FTCHAT] Rewrite frontend - login + chat SPA

---
 frontend/ftchat/index.html | 161 +++++++++----------------------------
 1 file changed, 40 insertions(+), 121 deletions(-)
diff --git a/frontend/ftchat/index.html b/frontend/ftchat/index.html
index da22740..d98dd89 100644
--- a/frontend/ftchat/index.html
+++ b/frontend/ftchat/index.html
@@ -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>
