feat(agent-chat): Agent 侧栏加宽并支持搜索跳转

侧栏 170px 太窄看不全 agent 名字，改成 260px 并把名字从省略号截断改成允许换行；顶部加搜索框按 name/id 过滤列表，点击过滤结果复用已有的 switchAgent() 跳转逻辑，不用额外写定位/滚动代码。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

feat(agent-chat): Agent 侧栏加宽并支持搜索跳转
侧栏 170px 太窄看不全 agent 名字，改成 260px 并把名字从省略号截断改成允许换行；顶部加搜索框按 name/id 过滤列表，点击过滤结果复用已有的 switchAgent() 跳转逻辑，不用额外写定位/滚动代码。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
yibo
1 parent 19b037f7
Showing 1 changed file with 17 additions and 2 deletions
web/src/views/AgentChat.vue
@@ -6,12 +6,19 @@
       <!-- 第1列: Agent 列表 (始终可见) -->
       <aside class="agent-sidebar">
         <div class="col-header">{{ $route.params.id ? '🏢 Agents' : '💻 System Agents' }}</div>
+        <input
+          v-model="agentSearchQuery"
+          class="agent-search-input"
+          type="text"
+          placeholder="🔍 搜索 Agent..."
+        />
         <div class="agent-list">
           <template v-for="(agents, compId) in groupedAgents" :key="compId">
             <div class="agent-group-title" v-if="$route.params.id">{{ compId === 'system' ? '💻 系统 Agent' : `🏢 ${compId}` }}</div>
             <div
               v-for="a in agents" :key="a.id"
               class="agent-card" :class="{ active: agentId === a.id }"
+              :title="a.name"
               @click="agentId = a.id; switchAgent()"
             >
               <span class="agent-card-emoji">{{ a.emoji || '🤖' }}</span>
@@ -329,8 +336,10 @@ const route = useRoute()
 const router = useRouter()
 const agentId = ref(route.params.agentId || '')
 const agentList = ref([])
+const agentSearchQuery = ref('')
 const groupedAgents = computed(() => {
+  const q = agentSearchQuery.value.trim().toLowerCase()
   const groups = {}
   agentList.value.forEach(a => {
     const comp = a.companyId || 'system'
@@ -341,6 +350,7 @@ const groupedAgents = computed(() =&gt; {
       // If we are in the System Agents context, ONLY show system agents
       if (comp !== 'system') return
     }
+    if (q && !(a.name || '').toLowerCase().includes(q) && !(a.id || '').toLowerCase().includes(q)) return
     if (!groups[comp]) groups[comp] = []
     groups[comp].push(a)
@@ -1005,9 +1015,14 @@ onMounted(async () =&gt; {
 /* ═══ 第1列: Agent 列表 ═══ */
 .agent-sidebar {
-  width: 170px; min-width: 150px; border-right: 1px solid var(--border-primary);
+  width: 260px; min-width: 220px; border-right: 1px solid var(--border-primary);
   background: var(--bg-overlay); display: flex; flex-direction: column;
 }
+.agent-search-input {
+  margin: 0 6px 6px; padding: 5px 8px; border-radius: 6px;
+  border: 1px solid var(--border-primary); background: var(--bg-input);
+  color: var(--text-primary); font-size: 11px; box-sizing: border-box;
+}
 .agent-list { flex: 1; overflow-y: auto; padding: 6px; }
 .agent-group-title { font-size: 10px; font-weight: 700; color: var(--text-tertiary); padding: 8px 6px 4px; text-transform: uppercase; }
 .agent-card {
@@ -1019,7 +1034,7 @@ onMounted(async () =&gt; {
 .agent-card.active { background: var(--bg-surface-active); border-color: var(--border-active); }
 .agent-card-emoji { font-size: 18px; flex-shrink: 0; }
 .agent-card-info { min-width: 0; }
-.agent-card-name { font-size: 11px; font-weight: 600; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.agent-card-name { font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: normal; word-break: break-word; }
 .agent-card-type { font-size: 9px; color: var(--text-faint); }
 .agent-card-time { font-size: 9px; color: var(--text-faint); white-space: nowrap; margin-left: 6px; }
 .agent-card-msg { font-size: 10px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }