From 07137be6db8508e57a23cdf4d0b9171fc559dabd Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Fri, 5 Jun 2026 21:02:13 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E4=BC=98=E5=8C=96=E6=99=BA?=
 =?UTF-8?q?=E8=83=BD=E4=BD=93=E7=AE=A1=E7=90=86=E5=88=86=E7=BB=84=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/common/MarkdownPreview.vue |   6 +-
 .../model-management/AgentManagePanel.vue     | 155 ++++++++++++------
 2 files changed, 104 insertions(+), 57 deletions(-)

diff --git a/web/src/components/common/MarkdownPreview.vue b/web/src/components/common/MarkdownPreview.vue
index 66a77fbe..763a04a8 100644
--- a/web/src/components/common/MarkdownPreview.vue
+++ b/web/src/components/common/MarkdownPreview.vue
@@ -240,11 +240,11 @@ const showCopiedFeedback = (btn) => {
 
   cite {
     position: relative;
-    margin-left: 4px;
+    margin: 0 4px;
     padding: 0 0.25rem;
     border-radius: 4px;
-    outline: 2px solid var(--gray-200);
-    background-color: var(--gray-200);
+    outline: 2px solid var(--gray-100);
+    background-color: var(--gray-100);
     color: var(--gray-800);
     font-size: 12px;
     font-style: normal;
diff --git a/web/src/components/model-management/AgentManagePanel.vue b/web/src/components/model-management/AgentManagePanel.vue
index c2455bd1..aa922e1a 100644
--- a/web/src/components/model-management/AgentManagePanel.vue
+++ b/web/src/components/model-management/AgentManagePanel.vue
@@ -103,6 +103,15 @@ const filteredAgents = computed(() => {
   })
 })
 
+const groupedAgents = computed(() => {
+  const agents = filteredAgents.value.filter((agent) => !agent.is_subagent)
+  const subagents = filteredAgents.value.filter((agent) => agent.is_subagent)
+  return [
+    { key: 'agents', title: '智能体', agents },
+    { key: 'subagents', title: '子智能体', agents: subagents }
+  ].filter((group) => group.agents.length > 0)
+})
+
 const agentStats = computed(() => ({
   total: managedAgents.value.length,
   builtin: managedAgents.value.filter(isBuiltinAgent).length,
@@ -394,62 +403,76 @@ defineExpose({
       </template>
     </PageShoulder>
 
-    <ExtensionCardGrid :min-width="320">
-      <InfoCard
-        v-for="agent in filteredAgents"
-        :key="agent.id"
-        :title="agent.name"
-        :subtitle="agent.slug || agent.id"
-        :description="agent.description || '暂无描述'"
-        :default-icon="Bot"
-        :tags="getAgentTags(agent)"
-        class="config-card agent-card"
-        @click="canManageAgent(agent) && openEditAgentModal(agent)"
-      >
-        <template #icon>
-          <img
-            v-if="getAgentIconSrc(agent)"
-            class="agent-card-icon-image"
-            :src="getAgentIconSrc(agent)"
-            :alt="`${agent.name || '智能体'}图标`"
-          />
-        </template>
+    <div v-if="groupedAgents.length === 0" class="agent-empty-state">
+      <a-empty :image="false" :description="searchQuery ? '没有匹配的智能体' : '暂无智能体'" />
+    </div>
 
-        <template #status>
-          <a-dropdown v-if="canManageAgent(agent)" :trigger="['click']" placement="bottomRight">
-            <template #overlay>
-              <a-menu>
-                <a-menu-item key="edit" @click.stop="openEditAgentModal(agent)">
-                  <span class="agent-card-menu-item">
-                    <Edit3 :size="14" />
-                    编辑智能体
-                  </span>
-                </a-menu-item>
-                <a-menu-item
-                  key="delete"
-                  :disabled="isBuiltinAgent(agent)"
-                  @click.stop="deleteAgent(agent)"
-                >
-                  <span class="agent-card-menu-item" :class="{ danger: !isBuiltinAgent(agent) }">
-                    <Trash2 :size="14" />
-                    删除智能体
-                  </span>
-                </a-menu-item>
-              </a-menu>
+    <template v-else>
+      <section v-for="group in groupedAgents" :key="group.key" class="agent-group-section">
+        <div class="agent-group-header">
+          <span>{{ group.title }}</span>
+        </div>
+        <ExtensionCardGrid :min-width="320">
+          <InfoCard
+            v-for="agent in group.agents"
+            :key="agent.id"
+            :title="agent.name"
+            :subtitle="agent.slug || agent.id"
+            :description="agent.description || '暂无描述'"
+            :default-icon="Bot"
+            :tags="getAgentTags(agent)"
+            class="config-card agent-card"
+            @click="canManageAgent(agent) && openEditAgentModal(agent)"
+          >
+            <template #icon>
+              <img
+                v-if="getAgentIconSrc(agent)"
+                class="agent-card-icon-image"
+                :src="getAgentIconSrc(agent)"
+                :alt="`${agent.name || '智能体'}图标`"
+              />
             </template>
-            <a-button
-              type="text"
-              size="small"
-              class="agent-card-menu-trigger"
-              aria-label="智能体操作"
-              @click.stop
-            >
-              <MoreVertical :size="16" />
-            </a-button>
-          </a-dropdown>
-        </template>
-      </InfoCard>
-    </ExtensionCardGrid>
+
+            <template #status>
+              <a-dropdown v-if="canManageAgent(agent)" :trigger="['click']" placement="bottomRight">
+                <template #overlay>
+                  <a-menu>
+                    <a-menu-item key="edit" @click.stop="openEditAgentModal(agent)">
+                      <span class="agent-card-menu-item">
+                        <Edit3 :size="14" />
+                        编辑智能体
+                      </span>
+                    </a-menu-item>
+                    <a-menu-item
+                      key="delete"
+                      :disabled="isBuiltinAgent(agent)"
+                      @click.stop="deleteAgent(agent)"
+                    >
+                      <span
+                        class="agent-card-menu-item"
+                        :class="{ danger: !isBuiltinAgent(agent) }"
+                      >
+                        <Trash2 :size="14" />
+                        删除智能体
+                      </span>
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+                <a-button
+                  type="text"
+                  size="small"
+                  class="agent-card-menu-trigger"
+                  aria-label="智能体操作"
+                  @click.stop
+                >
+                  <MoreVertical :size="16" />
+                </a-button>
+              </a-dropdown>
+            </template>
+          </InfoCard>
+        </ExtensionCardGrid>
+      </section>
+    </template>
 
     <!-- Agent Edit Modal -->
     <a-modal
@@ -617,6 +640,30 @@ defineExpose({
   min-height: 0;
 }
 
+.agent-empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 100px 20px;
+  text-align: center;
+}
+
+.agent-group-section + .agent-group-section {
+  padding-top: 2px;
+}
+
+.agent-group-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px var(--page-padding) 0;
+  color: var(--gray-500);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  line-height: 18px;
+}
+
 .agent-card-icon-image {
   display: block;
   width: 100%;