fix(admin): wrap the icon picker tabs and shorten catalog group titles

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">
+          <button
-            <n-radio-button v-for="tab in tabs" :key="tab.id" :value="tab.id">
+            v-for="tab in tabs"
-              {{ tab.title }}
+            :key="tab.id"
-            </n-radio-button>
+            type="button"
-          </n-radio-group>
+            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) {
+.aksrt-icon-picker__tab {
-  flex-wrap: wrap;
+  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 {

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' => 'zibsvg', 'title' => __('内置 SVG', 'aksrt'), 'type' => 'svg', 'icons' => self::sprite_keys()],
-			['id' => 'custom', 'title' => __('自定义 SVG', 'aksrt'), 'type' => 'custom', 'icons' => []],
+			['id' => 'custom', 'title' => __('自定义', 'aksrt'), 'type' => 'custom', 'icons' => []],
 		];
 	}