From 5c226237c03ab395672ff4fc19f29be4b8ea9564 Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Sun, 6 Sep 2026 16:28:07 +0800
Subject: [PATCH] fix(admin): wrap the icon picker tabs and shorten catalog
 group titles

---
 .../src/components/form/FaIconPicker.vue      | 49 ++++++++++++++++---
 src/Icons/IconCatalog.php                     |  4 +-
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/assets/admin/src/components/form/FaIconPicker.vue b/assets/admin/src/components/form/FaIconPicker.vue
index fa5239b7..9626a289 100644
--- a/assets/admin/src/components/form/FaIconPicker.vue
+++ b/assets/admin/src/components/form/FaIconPicker.vue
@@ -29,11 +29,16 @@
         </div>
 
         <div class="aksrt-icon-picker__tabs">
-          <n-radio-group v-model:value="activeTab" size="small">
-            <n-radio-button v-for="tab in tabs" :key="tab.id" :value="tab.id">
-              {{ tab.title }}
-            </n-radio-button>
-          </n-radio-group>
+          <button
+            v-for="tab in tabs"
+            :key="tab.id"
+            type="button"
+            class="aksrt-icon-picker__tab"
+            :class="{ 'is-active': activeTab === tab.id }"
+            @click="activeTab = tab.id"
+          >
+            {{ tab.title }}
+          </button>
         </div>
 
         <!-- Custom SVG tab -->
@@ -172,6 +177,14 @@ onMounted(async () => {
 
 <style scoped>
 .aksrt-icon-picker__panel {
+  /* The popover teleports to <body>, outside #aksrt-admin-app where the
+     palette is declared — re-declare every token the panel consumes. */
+  --aksrt-color-primary: #18A058;
+  --aksrt-color-primary-hover: #36AD6A;
+  --aksrt-color-primary-soft: rgba(24, 160, 88, 0.12);
+  --aksrt-color-text-secondary: #465149;
+  --aksrt-color-muted: #6F7A72;
+  --aksrt-color-border: #E2E8E3;
   padding: 12px;
 }
 
@@ -180,11 +193,33 @@ onMounted(async () => {
 }
 
 .aksrt-icon-picker__tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
   margin-bottom: 10px;
 }
 
-.aksrt-icon-picker__tabs :deep(.n-radio-group) {
-  flex-wrap: wrap;
+.aksrt-icon-picker__tab {
+  padding: 3px 10px;
+  font-size: 13px;
+  line-height: 20px;
+  border: 1px solid var(--aksrt-color-border);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--aksrt-color-text-secondary);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.aksrt-icon-picker__tab:hover {
+  border-color: var(--aksrt-color-primary);
+  color: var(--aksrt-color-primary);
+}
+
+.aksrt-icon-picker__tab.is-active {
+  border-color: var(--aksrt-color-primary);
+  background: var(--aksrt-color-primary);
+  color: #fff;
 }
 
 .aksrt-icon-picker__grid {
diff --git a/src/Icons/IconCatalog.php b/src/Icons/IconCatalog.php
index 752c2da1..a363d2b8 100644
--- a/src/Icons/IconCatalog.php
+++ b/src/Icons/IconCatalog.php
@@ -31,8 +31,8 @@ final class IconCatalog {
 			['id' => 'fas', 'title' => __('FA 实色', 'aksrt'), 'type' => 'fa', 'icons' => array_values((array) ($fa['fas'] ?? []))],
 			['id' => 'far', 'title' => __('FA 常规', 'aksrt'), 'type' => 'fa', 'icons' => array_values((array) ($fa['far'] ?? []))],
 			['id' => 'fab', 'title' => __('FA 品牌', 'aksrt'), 'type' => 'fa', 'icons' => array_values((array) ($fa['fab'] ?? []))],
-			['id' => 'zibsvg', 'title' => __('主题内置 SVG', 'aksrt'), 'type' => 'svg', 'icons' => self::sprite_keys()],
-			['id' => 'custom', 'title' => __('自定义 SVG', 'aksrt'), 'type' => 'custom', 'icons' => []],
+			['id' => 'zibsvg', 'title' => __('内置 SVG', 'aksrt'), 'type' => 'svg', 'icons' => self::sprite_keys()],
+			['id' => 'custom', 'title' => __('自定义', 'aksrt'), 'type' => 'custom', 'icons' => []],
 		];
 	}