Merge pull request #140 from opentiny/fix/tools-css

fix: tools css

Author: rhlin

sites/playground/server/src/chat-genui.ts

@@ -21,6 +21,8 @@ import type { IPlaygroundConfig, LLMConfig, LLMConfigParams, McpServer, McpServe
 
 type StreamTextOptions = Parameters<typeof streamText>[0];
 
+const isDevelopment = process.env.NODE_ENV === 'development';
+
 const initClients = async (
   serverName: string,
   serverConfig: McpServer,
@@ -175,11 +177,11 @@ const getPlaygroundConfig = (playgroundStr: string) => {
   }
 
   const rawAgents = playgroundConfig.agents || [];
-  // 解析后立刻过滤掉指向本地/内网等不安全目标的 Agent，降低 SSRF 风险
   const agents = rawAgents.filter((agent) => {
     const url = agent.api?.url;
     if (!url) return false;
-    return isAllowedAgentUrl(url);
+    // 开发态放开 URL 安全校验，生产态保持 SSRF 防护
+    return isDevelopment || isAllowedAgentUrl(url);
   });
 
   return {

sites/playground/web/src/components/tab-components/mcpTools.vue

@@ -8,21 +8,37 @@ const activePanels = ref(['mcp', 'agent']);
 
 <template>
   <div>
-    <tiny-collapse v-model="activePanels">
+    <tiny-collapse class="playground-tools" v-model="activePanels">
       <McpServerPanel />
       <AgentPanel />
     </tiny-collapse>
   </div>
 </template>
 
 <style scoped lang="less">
-::deep(.tiny-collapse-item__header) {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-  border-bottom: none !important;
-}
+:deep(.tiny-collapse) {
+  border-bottom: none;
+
+  .tiny-collapse-item {
+    padding-bottom: 16px;
+
+    &:first-of-type {
+      border-top: none;
+    }
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+
+    .tiny-collapse-item__header {
+      padding: 0;
+      border-bottom: none;
+    }
 
-::deep(.tiny-collapse-item__content) {
-  padding: 0 !important;
+    .tiny-collapse-item__content {
+      padding: 0 !important;
+      border: none;
+    }
+  }
 }
 </style>

sites/playground/web/src/components/tab-components/tool-panels/AgentDialog.vue

@@ -102,7 +102,7 @@ const agentCapabilityItems = computed((): AgentCapabilityViewItem[] => {
   <tiny-dialog-box
     :visible="visible"
     :title="agentData.index > -1 ? '编辑 Agent' : '添加 Agent'"
-    width="520px"
+    width="540px"
     :append-to-body="true"
     @update:visible="emit('update:visible', $event)"
     @close="handleClose"
@@ -112,7 +112,7 @@ const agentCapabilityItems = computed((): AgentCapabilityViewItem[] => {
         <div class="agent-url-action-row">
           <tiny-input
             :model-value="agentData.agentCardUrl"
-            placeholder="完整的 Agent Card 地址"
+            placeholder="http://localhost:3000/agent-card"
             @update:model-value="updateField('agentCardUrl', $event)"
           />
           <tiny-button type="primary" :loading="agentQueryLoading" @click="emit('queryAgentCard')">

sites/playground/web/src/components/tab-components/tool-panels/AgentPanel.vue

@@ -233,11 +233,11 @@ const updateAgentEnabled = (agent, enabled) => {
 </script>
 
 <template>
-  <tiny-collapse-item name="agent" title="Agent（a2a）">
+  <tiny-collapse-item name="agent" title="Agent（A2A 协议）">
     <template #title-right>
       <tiny-button type="text" :icon="IconPlus" @click.stop="addAgent"> </tiny-button>
     </template>
-    <div class="mcp-server-list">
+    <div class="mcp-server-list" v-if="llmConfig.agents && llmConfig.agents.length > 0">
       <div class="mcp-server-item" v-for="(agent, index) in llmConfig.agents || []" :key="agent.name">
         <div class="mcp-server-item-header">
           <div class="mcp-server-item-name">{{ agent.name }}</div>
@@ -264,7 +264,16 @@ const updateAgentEnabled = (agent, enabled) => {
             </tiny-popover>
           </div>
         </div>
-        <div class="mcp-server-item-description">{{ agent.description }}</div>
+        <div class="mcp-server-item-description" v-if="agent.description">{{ agent.description }}</div>
+      </div>
+    </div>
+    <div v-else class="mcp-server-list-empty">
+      <div class="mcp-server-item-empty">
+        <div class="mcp-server-item-empty-icon">
+          点击右上角
+          <component :is="IconPlus" class="mcp-server-item-empty-plus-icon" />
+          添加 Agent
+        </div>
       </div>
     </div>
     <AgentDialog :visible="showAgentFormDialog" :agent-data="agentData" :agent-card="agentCard"
@@ -317,6 +326,37 @@ const updateAgentEnabled = (agent, enabled) => {
   }
 }
 
+.mcp-server-list-empty {
+  margin-top: 12px;
+}
+
+.mcp-server-item-empty {
+  border: 1px dashed #d9d9d9;
+  border-radius: 8px;
+  min-height: 72px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fafafa;
+}
+
+.mcp-server-item-empty-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #8c8c8c;
+  font-size: 13px;
+  line-height: 20px;
+  text-align: center;
+  letter-spacing: 0.2px;
+}
+
+.mcp-server-item-empty-plus-icon {
+  width: 12px;
+  height: 12px;
+  color: #595959;
+}
+
 :deep(.mcp-server-item-actions-popover) {
   padding: 0;
   border: none;

sites/playground/web/src/components/tab-components/tool-panels/McpServerPanel.vue

@@ -195,6 +195,15 @@ const confirmMCPServer = async () => {
         <div class="mcp-server-item-description">{{ server.description }}</div>
       </div>
     </div>
+    <div v-if="!llmConfig.mcpServers || llmConfig.mcpServers.length === 0" class="mcp-server-list-empty">
+      <div class="mcp-server-item-empty">
+        <div class="mcp-server-item-empty-icon">
+          点击右上角
+          <component :is="IconPlus" class="mcp-server-item-empty-plus-icon" />
+          添加 MCP 服务
+        </div>
+      </div>
+    </div>
     <div class="mcp-server-tool-call-context">
       <tiny-checkbox :model-value="chatConfig.addToolCallContext" @update:model-value="updateAddToolCallContext">
         调用结果添加到上下文
@@ -238,15 +247,14 @@ const confirmMCPServer = async () => {
 
 <style scoped lang="less">
 .mcp-server-list {
-  margin-top: 12px;
   display: flex;
   flex-direction: column;
   gap: 8px;
 
   .mcp-server-item {
     border: none;
     border-radius: 6px;
-    padding: 6px 10px;
+    padding: 10px;
     transition: background-color 0.2s ease;
 
     &:hover {
@@ -257,7 +265,6 @@ const confirmMCPServer = async () => {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 4px;
     }
 
     &-name {
@@ -270,6 +277,7 @@ const confirmMCPServer = async () => {
       font-size: 12px;
       color: #999;
       overflow-wrap: break-word;
+      margin-top: 4px;
     }
 
     &-enabled {
@@ -278,6 +286,37 @@ const confirmMCPServer = async () => {
   }
 }
 
+.mcp-server-list-empty {
+  margin-top: 12px;
+}
+
+.mcp-server-item-empty {
+  border: 1px dashed #d9d9d9;
+  border-radius: 8px;
+  min-height: 72px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fafafa;
+}
+
+.mcp-server-item-empty-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #8c8c8c;
+  font-size: 13px;
+  line-height: 20px;
+  text-align: center;
+  letter-spacing: 0.2px;
+}
+
+.mcp-server-item-empty-plus-icon {
+  width: 12px;
+  height: 12px;
+  color: #595959;
+}
+
 .mcp-server-tool-call-context {
   margin-top: 12px;
   display: flex;