From ec5a805cba9b36396d518503ad1d8f8b2af8092b Mon Sep 17 00:00:00 2001
From: yibo <bboonnee@gmail.com>
Date: Fri, 28 Aug 2026 16:37:16 +0800
Subject: [PATCH] feat(agent-chat): system agent 列表支持置顶，Master 常驻置顶

---
 web/src/views/AgentChat.vue | 120 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 107 insertions(+), 13 deletions(-)

diff --git a/web/src/views/AgentChat.vue b/web/src/views/AgentChat.vue
index d873a93..961cd63 100644
--- a/web/src/views/AgentChat.vue
+++ b/web/src/views/AgentChat.vue
@@ -12,11 +12,36 @@
           type="text"
           placeholder="🔍 搜索 Agent..."
         />
+        <div class="pinned-box" v-if="pinnedAgentsFlat.length">
+          <div
+            v-for="a in pinnedAgentsFlat" :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>
+            <div class="agent-card-info" style="flex:1;">
+              <div style="display:flex; justify-content:space-between; align-items:center;">
+                <div class="agent-card-name" style="flex:1;">
+                  {{ a.name }}
+                  <span v-if="a.name !== a.id" class="agent-card-id" style="margin-left:4px; font-weight:normal; font-family:monospace; opacity:0.55;" :title="a.id">{{ a.id }}</span>
+                  <span class="agent-card-type" style="margin-left:4px; font-weight:normal;">{{ a.type }}</span>
+                </div>
+                <div class="agent-card-time" v-if="a.lastActiveAt">{{ formatTime(a.lastActiveAt) }}</div>
+              </div>
+              <div class="agent-card-msg" :title="a.lastMessage" v-if="a.lastMessage" style="margin-top:2px;">{{ a.lastMessage }}</div>
+            </div>
+            <button class="agent-card-menu-btn" @click.stop="toggleAgentMenu(a.id, $event)">⋯</button>
+            <div v-if="openAgentMenuId === a.id" class="agent-card-menu" @click.stop>
+              <div class="agent-card-menu-item" @click="togglePin(a)">{{ a.type === 'master' ? '🔒 常驻置顶' : '📌 取消置顶' }}</div>
+            </div>
+          </div>
+        </div>
         <div class="agent-list">
-          <template v-for="(agents, compId) in groupedAgents" :key="compId">
+          <template v-for="(group, 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"
+              v-for="a in group.rest" :key="a.id"
               class="agent-card" :class="{ active: agentId === a.id }"
               :title="a.name"
               @click="agentId = a.id; switchAgent()"
@@ -33,6 +58,10 @@
                 </div>
                 <div class="agent-card-msg" :title="a.lastMessage" v-if="a.lastMessage" style="margin-top:2px;">{{ a.lastMessage }}</div>
               </div>
+              <button class="agent-card-menu-btn" @click.stop="toggleAgentMenu(a.id, $event)">⋯</button>
+              <div v-if="openAgentMenuId === a.id" class="agent-card-menu" @click.stop>
+                <div class="agent-card-menu-item" @click="togglePin(a)">📌 置顶</div>
+              </div>
             </div>
           </template>
         </div>
@@ -326,7 +355,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, nextTick, watch, onMounted } from 'vue'
+import { ref, reactive, computed, nextTick, watch, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import AppNav from '@/components/AppNav.vue'
 import FileNode from '@/components/FileNode.vue'
@@ -338,6 +367,30 @@ const agentId = ref(route.params.agentId || '')
 const agentList = ref([])
 const agentSearchQuery = ref('')
 
+const PINNED_AGENTS_KEY = 'lemonboss.pinnedAgentIds'
+const pinnedAgentIds = ref(new Set(JSON.parse(localStorage.getItem(PINNED_AGENTS_KEY) || '[]')))
+const openAgentMenuId = ref(null)
+
+function isPinned(a) {
+  return a.type === 'master' || pinnedAgentIds.value.has(a.id)
+}
+function togglePin(a) {
+  if (a.type === 'master') return // master 常驻置顶，不可取消
+  const next = new Set(pinnedAgentIds.value)
+  if (next.has(a.id)) next.delete(a.id)
+  else next.add(a.id)
+  pinnedAgentIds.value = next
+  localStorage.setItem(PINNED_AGENTS_KEY, JSON.stringify([...next]))
+  openAgentMenuId.value = null
+}
+function toggleAgentMenu(id, evt) {
+  evt.stopPropagation()
+  openAgentMenuId.value = openAgentMenuId.value === id ? null : id
+}
+function closeAgentMenu() { openAgentMenuId.value = null }
+onMounted(() => document.addEventListener('click', closeAgentMenu))
+onUnmounted(() => document.removeEventListener('click', closeAgentMenu))
+
 const groupedAgents = computed(() => {
   const q = agentSearchQuery.value.trim().toLowerCase()
   const groups = {}
@@ -356,28 +409,45 @@ const groupedAgents = computed(() => {
     groups[comp].push(a)
   })
 
-  // Master agent 置顶，其余按 lastActiveAt 降序
+  const byRecency = (a, b) => {
+    const ta = a.lastActiveAt ? new Date(a.lastActiveAt).getTime() : 0
+    const tb = b.lastActiveAt ? new Date(b.lastActiveAt).getTime() : 0
+    return tb - ta
+  }
+
+  // 每组拆成「置顶区」（master + 用户手动置顶）与「其余」，置顶区单独渲染成
+  // 一个跟滚动列表分开的框（见 pinnedAgentsFlat），列表滚动时不会互相干扰
+  const result = {}
   Object.keys(groups).forEach(k => {
-    groups[k].sort((a, b) => {
+    const pinned = []
+    const rest = []
+    groups[k].forEach(a => (isPinned(a) ? pinned : rest).push(a))
+    pinned.sort((a, b) => {
       if (a.type === 'master') return -1
       if (b.type === 'master') return 1
-      const ta = a.lastActiveAt ? new Date(a.lastActiveAt).getTime() : 0
-      const tb = b.lastActiveAt ? new Date(b.lastActiveAt).getTime() : 0
-      return tb - ta
+      return byRecency(a, b)
     })
+    rest.sort(byRecency)
+    result[k] = { pinned, rest }
   })
-  
+
   // 确保 system 永远在最上面排第一
-  const sortedKeys = Object.keys(groups).sort((a,b) => {
+  const sortedKeys = Object.keys(result).sort((a,b) => {
     if (a === 'system') return -1;
     if (b === 'system') return 1;
     return a.localeCompare(b);
   })
-  
+
   const sortedGroups = {}
-  sortedKeys.forEach(k => { sortedGroups[k] = groups[k] })
+  sortedKeys.forEach(k => { sortedGroups[k] = result[k] })
   return sortedGroups
 })
+
+const pinnedAgentsFlat = computed(() => {
+  const list = []
+  Object.values(groupedAgents.value).forEach(g => list.push(...g.pinned))
+  return list
+})
 const activeTab = ref('chat') // 'chat' | 'detail'
 
 // 每个 agent 独立一份聊天态（messages/sending/streaming/思考栏/ACP 面板…），
@@ -1059,12 +1129,20 @@ onMounted(async () => {
   border: 1px solid var(--border-primary); background: var(--bg-input);
   color: var(--text-primary); font-size: 11px; box-sizing: border-box;
 }
+.pinned-box {
+  flex-shrink: 0; margin: 0 6px 8px; padding: 4px;
+  border: 1px solid var(--border-primary); border-radius: 10px;
+  background: var(--bg-surface);
+}
+.pinned-box .agent-card { margin-bottom: 2px; }
+.pinned-box .agent-card:last-child { margin-bottom: 0; }
 .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 {
-  display: flex; align-items: center; gap: 8px;
+  display: flex; align-items: center; gap: 8px; position: relative;
   padding: 7px 10px; border-radius: 8px; cursor: pointer;
   transition: all 0.15s; margin-bottom: 2px; border: 1px solid transparent;
+  background: var(--bg-primary);
 }
 .agent-card:hover { background: var(--accent-bg); }
 .agent-card.active { background: var(--bg-surface-active); border-color: var(--border-active); }
@@ -1074,6 +1152,22 @@ onMounted(async () => {
 .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%; }
+.agent-card-menu-btn {
+  flex-shrink: 0; width: 18px; height: 18px; padding: 0; border: none; border-radius: 4px;
+  background: transparent; color: var(--text-faint); font-size: 13px; line-height: 1; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+}
+.agent-card-menu-btn:hover { background: var(--bg-surface-hover); color: var(--text-secondary); }
+.agent-card-menu {
+  position: absolute; top: 100%; right: 8px; z-index: 10; min-width: 96px;
+  background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 6px;
+  box-shadow: var(--shadow-lg); padding: 4px;
+}
+.agent-card-menu-item {
+  padding: 5px 8px; border-radius: 4px; font-size: 11px; color: var(--text-secondary);
+  white-space: nowrap; cursor: pointer;
+}
+.agent-card-menu-item:hover { background: var(--accent-bg); }
 
 /* ═══ 第2列: 对话列表 / 详情 ═══ */
 .conv-sidebar {
--
libgit2 0.21.4