mcp-bridge/panel/index.html

<div class="mcp-container">
	<!-- 标签页 -->
	<div class="tabs">
		<ui-button id="tabMain" class="tab-button active">Main</ui-button>
		<ui-button id="tabTest" class="tab-button">Tool Test</ui-button>
	</div>

	<!-- 主面板内容 -->
	<div id="panelMain" class="tab-content active">
		<div class="toolbar">
			<div class="ctrl-group">
				<span>Port:</span>
				<ui-input id="portInput" value="3456"></ui-input>
				<ui-button id="btnToggle" class="green">Start</ui-button>
			</div>

			<!-- 新增的自动启动勾选框 -->
			<div class="ctrl-group" style="margin-left: 15px">
				<ui-checkbox id="autoStartCheck">Auto Start</ui-checkbox>
			</div>

			<div class="spacer"></div>
			<ui-button id="btnClear" class="transparent">Clear</ui-button>
			<ui-button id="btnCopy" class="transparent">Copy All</ui-button>
		</div>

		<!-- 日志区域 -->
		<div id="logConsole" class="log-view"></div>
	</div>

	<!-- 测试面板内容 -->
	<div id="panelTest" class="tab-content">
		<div class="test-container">
			<div class="test-layout">
				<!-- 左侧工具列表 -->
				<div class="left-panel">
					<div class="tool-name-section">
						<label for="toolName">工具名称:</label>
						<ui-input id="toolName" placeholder="例如: manage_components"></ui-input>
					</div>
					<div class="tools-list" id="toolsList"></div>
				</div>
				
				<!-- 右侧输入输出 -->
				<div class="right-panel">
					<div class="form-group">
						<label for="toolParams">工具参数 (JSON格式):</label>
						<textarea id="toolParams" placeholder="例如: {
  \"nodeId\": \"节点UUID\",
  \"action\": \"add\",
  \"componentType\": \"cc.Button\"
}"></textarea>
					</div>
					
					<div class="button-group">
						<ui-button id="testBtn" class="primary">测试工具</ui-button>
						<ui-button id="listToolsBtn" class="secondary">获取工具列表</ui-button>
						<ui-button id="clearBtn" class="secondary">清空结果</ui-button>
					</div>
					
					<div class="result">
						<h2>测试结果:</h2>
						<textarea id="resultContent" placeholder="点击\"测试工具\"按钮开始测试"></textarea>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<style>
	:host {
		height: 100%;
		display: flex;
		background-color: #2d2d2d;
	}
	.mcp-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		padding: 5px;
		box-sizing: border-box;
	}
	
	/* 标签页样式 */
	.tabs {
		display: flex;
		border-bottom: 1px solid #444;
		margin-bottom: 10px;
		flex-shrink: 0;
	}
	.tab-button {
		padding: 8px 16px;
		margin-right: 2px;
		border: none;
		background-color: #333;
		color: #ccc;
		cursor: pointer;
		border-bottom: 2px solid transparent;
	}
	.tab-button.active {
		background-color: #2d2d2d;
		color: #fff;
		border-bottom-color: #4CAF50;
	}
	.tab-content {
		display: none;
		flex: 1;
		flex-direction: column;
	}
	.tab-content.active {
		display: flex;
	}

	/* 主面板样式 */
	.toolbar {
		display: flex;
		align-items: center;
		padding-bottom: 5px;
		border-bottom: 1px solid #444;
		flex-shrink: 0; /* 禁止头部压缩 */
	}
	.ctrl-group {
		display: flex;
		align-items: center;
		gap: 5px;
	}
	.spacer {
		flex-grow: 1;
	}

	.log-view {
		flex: 1; /* 自动撑满剩余空间 */
		background: #1a1a1a;
		margin-top: 5px;
		border-radius: 2px;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 8px;
		font-family: "Consolas", "Monaco", monospace;
		font-size: 12px;

		/* 【关键】允许鼠标选中文字 */
		-webkit-user-select: text;
		cursor: text;
	}

	.log-item {
		margin-bottom: 3px;
		line-height: 1.4;
		border-left: 4px solid #444;
		padding-left: 8px;
		word-wrap: break-word;
		white-space: pre-wrap;
	}

	/* 颜色修正 */
	.time {
		color: #5c6370;
		margin-right: 8px;
		font-weight: normal;
		user-select: none;
	}
	.info {
		border-left-color: #61afef;
		color: #abb2bf;
	}
	.success {
		border-left-color: #98c379;
		color: #98c379;
	}
	.warn {
		border-left-color: #e5c07b;
		color: #e5c07b;
	}
	.error {
		border-left-color: #e06c75;
		color: #e06c75;
	}
	.mcp {
		border-left-color: #c678dd;
		color: #d19a66;
	}

	/* 测试面板样式 */
	.test-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 10px;
		box-sizing: border-box;
	}
	
	.test-layout {
		display: flex;
		height: 100%;
		gap: 15px;
	}
	
	.left-panel {
		width: 300px;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #333;
		border-radius: 4px;
		padding: 10px;
	}
	
	.right-panel {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 15px;
		height: 100%;
		min-height: 0;
	}
	
	.left-panel .tool-name-section {
		margin-bottom: 10px;
	}
	
	.left-panel .tools-list {
		flex: 1;
		border: 1px solid #444;
		border-radius: 4px;
		padding: 5px;
		background-color: #222;
		overflow-y: auto;
		min-height: 0;
	}
	
	.left-panel label {
		display: block;
		margin-bottom: 5px;
		color: #ccc;
		font-size: 12px;
	}
	
	.left-panel ui-input {
		width: 100%;
		padding: 8px;
		border: 1px solid #444;
		border-radius: 4px;
		font-size: 12px;
		box-sizing: border-box;
		background-color: #222;
		color: #fff;
		margin-bottom: 10px;
	}
	
	.right-panel .form-group {
		margin-bottom: 0;
	}
	
	.right-panel .result {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-height: 0;
		margin-bottom: 0;
	}
	
	.right-panel .result textarea {
		flex: 1;
		min-height: 100px;
	}
	
	.right-panel .button-group {
		flex-shrink: 0;
	}
	.form-group {
		margin-bottom: 15px;
		background-color: #333;
		padding: 10px;
		border-radius: 4px;
	}
	.form-group label {
		display: block;
		margin-bottom: 5px;
		color: #ccc;
		font-size: 12px;
	}
	.form-group ui-input,
	.form-group textarea {
		width: 100%;
		padding: 8px;
		border: 1px solid #444;
		border-radius: 4px;
		font-size: 12px;
		box-sizing: border-box;
		background-color: #222;
		color: #fff;
	}
	.form-group textarea {
		height: 150px;
		resize: vertical;
		font-family: 'Courier New', monospace;
	}
	.tool-item {
		padding: 5px;
		margin-bottom: 5px;
		background-color: #333;
		border-radius: 3px;
		cursor: pointer;
		font-size: 12px;
		color: #ccc;
	}
	.tool-item:hover {
		background-color: #444;
	}
	.button-group {
		display: flex;
		gap: 10px;
		margin-bottom: 15px;
	}
	.button-group ui-button {
		padding: 8px 16px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 12px;
		font-weight: bold;
	}
	.button-group ui-button.primary {
		background-color: #4CAF50;
		color: white;
	}
	.button-group ui-button.secondary {
		background-color: #2196F3;
		color: white;
	}
	.result {
		flex: 1;
		background-color: #333;
		padding: 15px;
		border-radius: 4px;
	}
	.result h2 {
		color: #ccc;
		font-size: 14px;
		margin-bottom: 10px;
	}
	.result textarea {
		width: 100%;
		height: 100%;
		background-color: #222;
		color: #fff;
		border: 1px solid #444;
		border-radius: 4px;
		padding: 10px;
		font-family: 'Courier New', monospace;
		font-size: 12px;
		box-sizing: border-box;
		resize: vertical;
	}
</style>