dynamic-interaction
Version:
Dynamic interaction 动态交互mcp，用于cursor、windsurf、trae 等 AI 智能编辑器 Agent 运行时交互使用
137 lines (125 loc) • 6.58 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title data-i18n="title">交互式反馈系统</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script>
// 配置 marked 使用 highlight.js 进行代码高亮
marked.setOptions({
highlight: function (code, lang) {
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
},
langPrefix: 'hljs language-',
breaks: true,
gfm: true
});
</script>
</head>
<body>
<!-- 状态栏 - 苹果风格设计 (内容区顶部) -->
<div class="status-bar-container">
<div class="status-bar integrated">
<div class="status-bar-section">
<div class="status-item">
<i data-lucide="folder-open" class="icon"></i>
<span class="label" data-i18n="status.workspace">工作区：</span>
<span id="workspace-directory-value" class="value" data-i18n="feedback.messages.loadingWorkspace" data-i18n-skip>加载中...</span>
</div>
<div class="status-item">
<i data-lucide="key-round" class="icon"></i>
<span class="label" data-i18n="status.sessionId">会话ID：</span>
<span id="session-id-value" class="value" data-i18n="feedback.messages.loadingSession" data-i18n-skip>加载中...</span>
</div>
</div>
<!-- 中间区域：会话倒计时 -->
<div class="status-bar-section center-section">
<div class="status-item session-timer" id="session-timer">
<i data-lucide="timer" class="icon"></i>
<span class="label" data-i18n="status.sessionTimer">会话剩余时间：</span>
<span id="session-timer-value" class="value">--:--</span>
</div>
</div>
<div class="status-bar-section">
<div class="status-item connection">
<span id="status-pulse" class="status-pulse disconnected"></span>
<span id="connection-status-value" data-i18n="status.connectionStatus.disconnected" data-i18n-skip>未连接</span>
<span class="latency">(<span id="latency-value" class="latency-value" data-i18n-skip>--</span>)</span>
</div>
<div class="status-item message-status">
<i data-lucide="message-circle" class="icon"></i>
<span id="message-status-value" data-i18n="status.messageStatus.idle" data-i18n-skip>暂无新消息</span>
</div>
<div class="status-item language-switcher" id="language-switcher" title="切换语言">
<i data-lucide="globe" class="icon language-icon"></i>
<span class="language-text" id="language-text">中</span>
</div>
<div class="status-item theme-switcher" id="theme-switcher" data-i18n-title="status.themeSwitch">
<i data-lucide="sun" class="icon theme-icon-sun"></i>
<i data-lucide="moon" class="icon theme-icon-moon" style="display: none;"></i>
</div>
</div>
</div>
</div>
<div class="main-container">
<!-- 通知面板 -->
<div id="notification-panel" class="panel" style="display: none;">
<!-- 通知内容将由NotificationDisplay组件动态生成 -->
</div>
<!-- AI 工作摘要 -->
<div id="summary-panel" class="panel">
<h2>
<i data-lucide="lightbulb" class="icon"></i> <span data-i18n="summary.title">AI 工作摘要</span>
</h2>
<hr>
<div id="summary"> - 我已根据您之前的需求"模仿苹果官网风格设计UI"，提供了两个版本的HTML...</div>
</div>
<!-- 提供反馈 -->
<div id="feedback-panel" class="panel">
<div class="panel-header">
<h2>
<i data-lucide="corner-down-left" class="icon"></i> <span data-i18n="feedback.title">提供反馈</span>
</h2>
<button id="send-feedback-btn" data-i18n="feedback.submitButton">提交反馈</button>
</div>
<hr>
<div class="feedback-section">
<label for="feedback-input" data-i18n="feedback.textLabel">文字反馈</label>
<div id="feedback-input" contenteditable="true" data-i18n-placeholder="feedback.textPlaceholder" placeholder="请在这里输入您的指示或回复..."></div>
</div>
<div class="hints-section">
<p data-i18n="feedback.hints.title">小提示:</p>
<ul>
<li data-i18n="feedback.hints.shortcut">按 Ctrl+Enter (或 Cmd+Enter) 可快速提交</li>
<li data-i18n="feedback.hints.pasteImage">支持 Ctrl+V (或 Cmd+V) 粘贴图片</li>
</ul>
</div>
<div class="attachment-section">
<label data-i18n="feedback.attachments.title">图片附件 (可选)</label>
<div id="drop-zone">
<div class="drop-zone-text">
<i data-lucide="paperclip" class="icon"></i>
<p data-i18n="feedback.attachments.dropZoneText">点击选择或拖拽图片到此处</p>
<span data-i18n="feedback.attachments.supportedFormats">支持 PNG, JPG, GIF, WebP 等格式</span>
</div>
</div>
<div id="image-preview-container"></div>
</div>
</div>
</div>
<!-- 脚本和模态框 -->
<script type="module" src="js/main.js"></script>
<div id="image-modal" class="modal">
<img class="modal-content" id="modal-image">
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>