156 lines
7.6 KiB
HTML
156 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<title>CC-Web</title>
|
|
<script>
|
|
(function () {
|
|
var theme = localStorage.getItem('cc-web-theme') || 'washi';
|
|
var dividerTime = localStorage.getItem('cc-web-show-divider-time') === '0' ? 'hide' : 'show';
|
|
document.documentElement.dataset.theme = theme;
|
|
document.documentElement.dataset.dividerTime = dividerTime;
|
|
})();
|
|
</script>
|
|
<link rel="stylesheet" href="style.css?v=20260616-runtime-insert-controls">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
|
|
</head>
|
|
<body>
|
|
<!-- Login -->
|
|
<div id="login-overlay" class="login-overlay">
|
|
<div class="login-box">
|
|
<div class="login-logo">CC</div>
|
|
<h2>CC-Web</h2>
|
|
<p>Claude / Codex Web Chat</p>
|
|
<form id="login-form">
|
|
<input type="password" id="login-password" placeholder="输入密码" autocomplete="current-password" autofocus>
|
|
<label class="remember-label">
|
|
<input type="checkbox" id="remember-pw"> 记住密码
|
|
</label>
|
|
<button type="submit">登录</button>
|
|
</form>
|
|
<div id="login-error" class="login-error" hidden>密码错误</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main App -->
|
|
<div id="app" class="app" hidden>
|
|
<!-- Sidebar -->
|
|
<aside id="sidebar" class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="new-chat-split">
|
|
<button id="new-chat-btn" class="new-chat-btn">+ 新会话</button>
|
|
<button id="new-chat-arrow" class="new-chat-arrow" title="更多">▾</button>
|
|
</div>
|
|
<div id="new-chat-dropdown" class="new-chat-dropdown" hidden>
|
|
<button id="import-session-btn">导入本地 CLI 会话</button>
|
|
</div>
|
|
</div>
|
|
<div id="session-list" class="session-list"></div>
|
|
<div class="sidebar-footer">
|
|
<button id="settings-btn" class="settings-btn" title="设置">⚙</button>
|
|
<span class="brand">CC-Web</span>
|
|
</div>
|
|
</aside>
|
|
|
|
<div id="sidebar-overlay" class="sidebar-overlay" hidden></div>
|
|
|
|
<!-- Chat -->
|
|
<main class="chat-main">
|
|
<header class="chat-header">
|
|
<button id="menu-btn" class="menu-btn" title="菜单">☰</button>
|
|
<span id="chat-title" class="chat-title">新会话</span>
|
|
<button id="chat-session-id-btn" class="chat-session-id-btn" type="button" title="复制当前会话 ID" hidden>ID</button>
|
|
<div class="chat-agent-picker">
|
|
<button id="chat-agent-btn" class="chat-agent-btn" type="button" aria-haspopup="menu" aria-expanded="false">Claude</button>
|
|
<div id="chat-agent-menu" class="chat-agent-menu" hidden>
|
|
<button type="button" class="chat-agent-option active" data-agent="claude">Claude</button>
|
|
<button type="button" class="chat-agent-option" data-agent="codex">Codex</button>
|
|
<button type="button" class="chat-agent-option" data-agent="codexapp">Codex App</button>
|
|
</div>
|
|
</div>
|
|
<button id="chat-cwd" class="chat-cwd" type="button" hidden></button>
|
|
</header>
|
|
|
|
<div class="messages-wrap">
|
|
<div id="messages" class="messages">
|
|
<div class="welcome-msg">
|
|
<div class="welcome-icon">✿</div>
|
|
<h3>欢迎使用 CC-Web</h3>
|
|
<p>开始与 Claude 对话</p>
|
|
</div>
|
|
</div>
|
|
<div class="custom-scrollbar" id="custom-scrollbar">
|
|
<div class="custom-scrollbar-thumb" id="custom-scrollbar-thumb"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slash command menu -->
|
|
<div id="cmd-menu" class="cmd-menu" hidden></div>
|
|
|
|
<div class="input-area">
|
|
<div class="chat-controls" aria-label="会话控制">
|
|
<span id="chat-runtime-state" class="chat-runtime-state" hidden>运行中</span>
|
|
<select id="mode-select" class="mode-select" title="权限模式">
|
|
<option value="yolo">YOLO</option>
|
|
<option value="default">默认</option>
|
|
<option value="plan">Plan</option>
|
|
</select>
|
|
<div class="user-outline-anchor">
|
|
<button id="user-outline-btn" class="user-outline-btn" type="button" aria-expanded="false" aria-controls="user-outline-panel" title="定位用户消息">定位</button>
|
|
<div id="user-outline-panel" class="user-outline-panel" hidden></div>
|
|
</div>
|
|
<button id="reload-mcp-btn" class="reload-mcp-btn" type="button" title="重载 Codex App MCP 配置" hidden>重载 MCP</button>
|
|
<span id="cost-display" class="cost-display" hidden></span>
|
|
</div>
|
|
<div id="attachment-tray" class="attachment-tray" hidden></div>
|
|
<div id="pending-notes-tray" class="pending-notes-tray" hidden></div>
|
|
<div class="input-wrapper">
|
|
<input id="image-upload-input" type="file" accept="image/png,image/jpeg,image/webp,image/gif" multiple hidden>
|
|
<button id="attach-btn" class="attach-btn" title="上传图片" type="button">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21.44 11.05l-8.49 8.49a6 6 0 1 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
|
|
</svg>
|
|
</button>
|
|
<textarea id="msg-input" rows="1" placeholder="输入消息… 输入 / 查看指令" autocomplete="off"></textarea>
|
|
<button id="note-mode-btn" class="note-mode-btn" title="笔记模式" aria-label="笔记模式" aria-pressed="false" type="button">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 20h9"></path>
|
|
<path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"></path>
|
|
<path d="m15 5 3 3"></path>
|
|
</svg>
|
|
</button>
|
|
<button id="send-btn" class="send-btn" title="发送">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
|
|
</svg>
|
|
</button>
|
|
<button id="abort-btn" class="abort-btn" title="停止" hidden>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
|
<rect x="6" y="6" width="12" height="12" rx="2"></rect>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<div id="session-loading-overlay" class="session-loading-overlay" hidden aria-live="polite" aria-hidden="true">
|
|
<div class="session-loading-card" role="status" aria-busy="true">
|
|
<div class="session-loading-badge">Session</div>
|
|
<div class="session-loading-title">会话加载中</div>
|
|
<div id="session-loading-label" class="session-loading-label">正在整理消息与上下文…</div>
|
|
<div class="session-loading-bar">
|
|
<span class="session-loading-bar-fill"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
<script src="app.js?v=20260616-runtime-insert-controls"></script>
|
|
</body>
|
|
</html>
|