宜博 / lemonboss

Commit 01267e8a6c60b506221b020f76f503be72c42979

Authored by yibo
1 parent 19b037f7

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

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

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Inline Side-by-side
Showing 1 changed file with 17 additions and 2 deletions
web/src/views/AgentChat.vue
  View file @01267e8
... ... @@ -6,12 +6,19 @@
6 6 <!-- 第1列: Agent 列表 (始终可见) -->
7 7 <aside class="agent-sidebar">
8 8 <div class="col-header">{{ $route.params.id ? '🏢 Agents' : '💻 System Agents' }}</div>
  9 + <input
  10 + v-model="agentSearchQuery"
  11 + class="agent-search-input"
  12 + type="text"
  13 + placeholder="🔍 搜索 Agent..."
  14 + />
9 15 <div class="agent-list">
10 16 <template v-for="(agents, compId) in groupedAgents" :key="compId">
11 17 <div class="agent-group-title" v-if="$route.params.id">{{ compId === 'system' ? '💻 系统 Agent' : `🏢 ${compId}` }}</div>
12 18 <div
13 19 v-for="a in agents" :key="a.id"
14 20 class="agent-card" :class="{ active: agentId === a.id }"
  21 + :title="a.name"
15 22 @click="agentId = a.id; switchAgent()"
16 23 >
17 24 <span class="agent-card-emoji">{{ a.emoji || '🤖' }}</span>
... ... @@ -329,8 +336,10 @@ const route = useRoute()
329 336 const router = useRouter()
330 337 const agentId = ref(route.params.agentId || '')
331 338 const agentList = ref([])
  339 +const agentSearchQuery = ref('')
332 340  
333 341 const groupedAgents = computed(() => {
  342 + const q = agentSearchQuery.value.trim().toLowerCase()
334 343 const groups = {}
335 344 agentList.value.forEach(a => {
336 345 const comp = a.companyId || 'system'
... ... @@ -341,6 +350,7 @@ const groupedAgents = computed(() =&gt; {
341 350 // If we are in the System Agents context, ONLY show system agents
342 351 if (comp !== 'system') return
343 352 }
  353 + if (q && !(a.name || '').toLowerCase().includes(q) && !(a.id || '').toLowerCase().includes(q)) return
344 354  
345 355 if (!groups[comp]) groups[comp] = []
346 356 groups[comp].push(a)
... ... @@ -1005,9 +1015,14 @@ onMounted(async () =&gt; {
1005 1015  
1006 1016 /* ═══ 第1列: Agent 列表 ═══ */
1007 1017 .agent-sidebar {
1008   - width: 170px; min-width: 150px; border-right: 1px solid var(--border-primary);
  1018 + width: 260px; min-width: 220px; border-right: 1px solid var(--border-primary);
1009 1019 background: var(--bg-overlay); display: flex; flex-direction: column;
1010 1020 }
  1021 +.agent-search-input {
  1022 + margin: 0 6px 6px; padding: 5px 8px; border-radius: 6px;
  1023 + border: 1px solid var(--border-primary); background: var(--bg-input);
  1024 + color: var(--text-primary); font-size: 11px; box-sizing: border-box;
  1025 +}
1011 1026 .agent-list { flex: 1; overflow-y: auto; padding: 6px; }
1012 1027 .agent-group-title { font-size: 10px; font-weight: 700; color: var(--text-tertiary); padding: 8px 6px 4px; text-transform: uppercase; }
1013 1028 .agent-card {
... ... @@ -1019,7 +1034,7 @@ onMounted(async () =&gt; {
1019 1034 .agent-card.active { background: var(--bg-surface-active); border-color: var(--border-active); }
1020 1035 .agent-card-emoji { font-size: 18px; flex-shrink: 0; }
1021 1036 .agent-card-info { min-width: 0; }
1022   -.agent-card-name { font-size: 11px; font-weight: 600; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  1037 +.agent-card-name { font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: normal; word-break: break-word; }
1023 1038 .agent-card-type { font-size: 9px; color: var(--text-faint); }
1024 1039 .agent-card-time { font-size: 9px; color: var(--text-faint); white-space: nowrap; margin-left: 6px; }
1025 1040 .agent-card-msg { font-size: 10px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
... ...