From fafbc5c9ee4076177f7e86e8008e93d4d2e4bbe5 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Wed, 3 Jun 2026 22:12:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8C=89=E6=9D=A5=E6=BA=90=E5=88=86?=
 =?UTF-8?q?=E7=BB=84=E5=B1=95=E7=A4=BA=20Skill?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extensions/SkillCardList.vue   | 99 +++++++++++--------
 1 file changed, 58 insertions(+), 41 deletions(-)

diff --git a/web/src/components/extensions/SkillCardList.vue b/web/src/components/extensions/SkillCardList.vue
index 9f9c42b0..00b6ddbc 100644
--- a/web/src/components/extensions/SkillCardList.vue
+++ b/web/src/components/extensions/SkillCardList.vue
@@ -76,49 +76,54 @@
     </div>
 
     <template v-else>
-      <ExtensionCardGrid :min-width="360">
-        <div
-          v-for="skill in filteredInstalledSkills"
-          :key="skill.slug"
-          class="card-wrapper"
-          :class="{
-            selected: selectedCardSlugs.includes(skill.slug),
-            'batch-mode': isBatchDeleteMode
-          }"
-        >
-          <a-checkbox
-            v-if="isBatchDeleteMode && canManageSkill(skill) && skill.sourceType !== 'builtin'"
-            :checked="selectedCardSlugs.includes(skill.slug)"
-            @change="handleToggleCardSelect(skill.slug)"
-            class="card-select-checkbox"
-          />
-          <InfoCard
-            variant="mini"
-            :title="formatExtensionCardTitle(skill.name)"
-            :description="skill.description || '暂无描述'"
-            :default-icon="BookMarkedIcon"
-            @click="handleCardClick(skill)"
-            :class="{ 'card-clickable-select': isBatchDeleteMode }"
-          >
-            <template #action>
-              <button
-                type="button"
-                class="skill-enabled-action"
-                :class="{ enabled: skill.enabled !== false }"
-                :disabled="!canManageSkill(skill) || isSkillToggling(skill.slug)"
-                :aria-label="skill.enabled === false ? '启用 Skill' : '禁用 Skill'"
-                @click.stop="handleToggleSkillEnabled(skill)"
+      <template v-for="group in skillGroups" :key="group.key">
+        <template v-if="group.skills.length">
+          <div class="extension-section-header">{{ group.title }}</div>
+          <ExtensionCardGrid :min-width="360">
+            <div
+              v-for="skill in group.skills"
+              :key="skill.slug"
+              class="card-wrapper"
+              :class="{
+                selected: selectedCardSlugs.includes(skill.slug),
+                'batch-mode': isBatchDeleteMode
+              }"
+            >
+              <a-checkbox
+                v-if="isBatchDeleteMode && canManageSkill(skill) && skill.sourceType !== 'builtin'"
+                :checked="selectedCardSlugs.includes(skill.slug)"
+                @change="handleToggleCardSelect(skill.slug)"
+                class="card-select-checkbox"
+              />
+              <InfoCard
+                variant="mini"
+                :title="formatExtensionCardTitle(skill.name)"
+                :description="skill.description || '暂无描述'"
+                :default-icon="BookMarkedIcon"
+                @click="handleCardClick(skill)"
+                :class="{ 'card-clickable-select': isBatchDeleteMode }"
               >
-                <Plus v-if="skill.enabled === false" :size="15" class="action-icon" />
-                <template v-else>
-                  <Check :size="15" class="action-icon action-icon-check" />
-                  <Minus :size="15" class="action-icon action-icon-minus" />
+                <template #action>
+                  <button
+                    type="button"
+                    class="skill-enabled-action"
+                    :class="{ enabled: skill.enabled !== false }"
+                    :disabled="!canManageSkill(skill) || isSkillToggling(skill.slug)"
+                    :aria-label="skill.enabled === false ? '启用 Skill' : '禁用 Skill'"
+                    @click.stop="handleToggleSkillEnabled(skill)"
+                  >
+                    <Plus v-if="skill.enabled === false" :size="15" class="action-icon" />
+                    <template v-else>
+                      <Check :size="15" class="action-icon action-icon-check" />
+                      <Minus :size="15" class="action-icon action-icon-minus" />
+                    </template>
+                  </button>
                 </template>
-              </button>
-            </template>
-          </InfoCard>
-        </div>
-      </ExtensionCardGrid>
+              </InfoCard>
+            </div>
+          </ExtensionCardGrid>
+        </template>
+      </template>
     </template>
 
     <a-modal
@@ -610,6 +615,18 @@ const installedSkillCards = computed(() =>
 )
 
 const filteredInstalledSkills = computed(() => installedSkillCards.value.filter(matchesSearch))
+const skillGroups = computed(() => [
+  {
+    key: 'builtin',
+    title: '内置',
+    skills: filteredInstalledSkills.value.filter((skill) => skill.sourceType === 'builtin')
+  },
+  {
+    key: 'uploaded',
+    title: '上传的',
+    skills: filteredInstalledSkills.value.filter((skill) => skill.sourceType !== 'builtin')
+  }
+])
 const filteredDeletableSkills = computed(() =>
   filteredInstalledSkills.value.filter(
     (skill) => canManageSkill(skill) && skill.sourceType !== 'builtin'