feat(icons): wire the universal picker into tabbar/floating settings and keep customsvg through their save paths

手机底部Tab and 右侧悬浮按钮 settings pages swap their icon text inputs
for the shared FaIconPicker (with a new IconValue preview component that
renders FA/sprite/custom SVG values in lists and previews). footer.php
tabbar/floating/sub-item icons and the VIP float render through
aksrt_icon_markup so every stored format displays; GlobalControllerPart1
and the VIP helper drop the FA-only regex gate and sanitize icon values
through aksrt_sanitize_icon_value. The picker popover tabs now wrap
instead of overflowing, and FA grid previews use style-only classes.

assets/admin/src/components/form/FaIconPicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="aksrt-fa-icon-picker">
-    <n-popover trigger="click" placement="bottom-start" :width="400" :style="{ padding: 0 }">
+    <n-popover trigger="click" placement="bottom-start" :width="460" :style="{ padding: 0 }">
       <template #trigger>
         <n-input
           :value="modelValue"
@@ -10,20 +10,8 @@
           @clear="$emit('update:modelValue', '')"
         >
           <template #prefix>
-            <!-- FA value -->
-            <FaIcon v-if="isFaValue(modelValue)" :icon="modelValue" />
-            <!-- Built-in sprite value -->
-            <span
-              v-else-if="isZibsvgValue(modelValue)"
-              class="aksrt-icon-picker__preview-svg"
-              v-html="zibsvgMarkup(modelValue)"
-            ></span>
-            <!-- Inline custom SVG value -->
-            <span
-              v-else-if="isCustomSvgValue(modelValue)"
-              class="aksrt-icon-picker__preview-svg"
-              v-html="cleanSvg(modelValue.slice(10))"
-            ></span>
+            <IconValue v-if="modelValue" :value="modelValue" />
+            <template v-else></template>
           </template>
           <template #suffix>
             <FaIcon icon="fa fas fa-chevron-down" :size="12" />
@@ -80,7 +68,7 @@
             :title="icon"
             @click="selectIcon(icon)"
           >
-            <i v-if="activeGroup.type === 'fa'" :class="['fa', activeTab, icon]"></i>
+            <i v-if="activeGroup.type === 'fa'" :class="[activeTab, icon]"></i>
             <span
               v-else
               class="aksrt-icon-picker__preview-svg"
@@ -104,12 +92,10 @@
  */
 import { ref, computed, onMounted } from 'vue'
 import FaIcon from './FaIcon.vue'
+import IconValue from './IconValue.vue'
 import api from '@/api/index.js'
 import {
   cleanSvg,
-  isFaValue,
-  isZibsvgValue,
-  isCustomSvgValue,
   zibsvgMarkup,
   composeIconValue,
 } from '@/utils/icons.js'
@@ -184,6 +170,10 @@ onMounted(async () => {
   margin-bottom: 10px;
 }
 
+.aksrt-icon-picker__tabs :deep(.n-radio-group) {
+  flex-wrap: wrap;
+}
+
 .aksrt-icon-picker__grid {
   display: grid;
   grid-template-columns: repeat(8, 1fr);

assets/admin/src/components/form/IconValue.vue

@@ -0,0 +1,48 @@
+<template>
+  <!-- FA class value -->
+  <i v-if="isFaValue(value)" :class="faClass" aria-hidden="true"></i>
+  <!-- Built-in sprite value -->
+  <span
+    v-else-if="isZibsvgValue(value)"
+    class="aksrt-icon-value__svg"
+    v-html="zibsvgMarkup(value)"
+  ></span>
+  <!-- Inline custom SVG value -->
+  <span
+    v-else-if="isCustomSvgValue(value)"
+    class="aksrt-icon-value__svg"
+    v-html="cleanSvg(value.slice(10))"
+  ></span>
+</template>
+
+<script setup>
+/**
+ * IconValue — renders any icon-picker value ("fa fas fa-x", "zibsvg-key",
+ * "customsvg-<svg>") as inline preview markup.
+ */
+import { computed } from 'vue'
+import { cleanSvg, isFaValue, isZibsvgValue, isCustomSvgValue, zibsvgMarkup } from '@/utils/icons.js'
+
+const props = defineProps({
+  value: { type: String, default: '' },
+})
+
+const faClass = computed(() => {
+  const raw = String(props.value || '').trim()
+  if (raw.startsWith('fa-')) return `fa fas ${raw}`
+  return raw
+})
+</script>
+
+<style scoped>
+.aksrt-icon-value__svg {
+  display: inline-flex;
+}
+
+.aksrt-icon-value__svg :deep(svg),
+.aksrt-icon-value__svg svg {
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+}
+</style>

assets/admin/src/pages/content/FloatingButtonsSettings.vue

@@ -90,7 +90,7 @@
                   <i class="fa fas fa-bars"></i>
                 </button>
                 <span class="float-btn-sort__icon">
-                  <i v-if="element.icon" :class="element.icon"></i>
+                  <IconValue v-if="element.icon" :value="element.icon" />
                 </span>
                 <div class="float-btn-sort__meta">
                   <div class="float-btn-sort__title-row">
@@ -140,7 +140,7 @@
             <n-select v-model:value="editingItem.type" :options="typeOptions" placeholder="选择按钮类型" @update:value="handleTypeChange" />
           </n-form-item-gi>
           <n-form-item-gi v-if="editingItem.type !== 'theme_mode'" label="主图标 (Font Awesome)">
-            <n-input v-model:value="editingItem.icon" placeholder="例如: fa fas fa-home" />
+            <FaIconPicker v-model:value="editingItem.icon" placeholder="选择图标" />
           </n-form-item-gi>
           <n-form-item-gi v-else label="主题图标">
             <div class="theme-icon-preview">
@@ -155,7 +155,7 @@
           <template v-if="editingItem.type === 'theme_mode'">
             <span class="theme-icon-preview-inline"><i class="fa fas fa-sun"></i> / <i class="fa fas fa-moon"></i></span>
           </template>
-          <i v-else-if="editingItem.icon" :class="editingItem.icon" style="font-size: 18px;"></i>
+          <IconValue v-else-if="editingItem.icon" :value="editingItem.icon" style="font-size: 18px;" />
           <span v-else class="muted-text">未设置图标</span>
           <a href="https://fontawesome.com/search?m=free" target="_blank" rel="noopener">
             <i class="fa fas fa-external-link-alt"></i>
@@ -254,7 +254,7 @@
                     <i class="fa fas fa-bars"></i>
                   </button>
                   <n-input v-model:value="element.label" placeholder="名称，例如: 写文章" />
-                  <n-input v-model:value="element.icon" placeholder="图标，例如: fa fas fa-pen" />
+                  <FaIconPicker v-model:value="element.icon" placeholder="选择图标" />
                   <n-input v-model:value="element.url" placeholder="链接，例如: /submit" />
                   <n-button quaternary type="error" @click="removeAddItem(subIndex)">
                     <template #icon><i class="fa fas fa-trash-alt" /></template>
@@ -270,7 +270,7 @@
             <div class="add-items-preview__panel add-items-preview__panel--light">
               <div class="add-items-preview__mode">亮色</div>
               <div class="add-items-preview__trigger">
-                <i :class="editingItem.icon || 'fa fas fa-plus'"></i>
+                <IconValue :value="editingItem.icon || 'fa fas fa-plus'" />
               </div>
               <div class="add-items-preview__menu">
                 <div v-if="editingItem.add_items.length" class="add-items-preview__list">
@@ -280,7 +280,7 @@
                     href="javascript:void(0)"
                     class="add-items-preview__item"
                   >
-                    <i :class="subItem.icon || 'fa fas fa-pen'"></i>
+                    <IconValue :value="subItem.icon || 'fa fas fa-pen'" />
                     <span>{{ subItem.label || '未命名子项' }}</span>
                   </a>
                 </div>
@@ -290,7 +290,7 @@
             <div class="add-items-preview__panel add-items-preview__panel--dark">
               <div class="add-items-preview__mode">暗色</div>
               <div class="add-items-preview__trigger add-items-preview__trigger--dark">
-                <i :class="editingItem.icon || 'fa fas fa-plus'"></i>
+                <IconValue :value="editingItem.icon || 'fa fas fa-plus'" />
               </div>
               <div class="add-items-preview__menu add-items-preview__menu--dark">
                 <div v-if="editingItem.add_items.length" class="add-items-preview__list">
@@ -300,7 +300,7 @@
                     href="javascript:void(0)"
                     class="add-items-preview__item add-items-preview__item--dark"
                   >
-                    <i :class="subItem.icon || 'fa fas fa-pen'"></i>
+                    <IconValue :value="subItem.icon || 'fa fas fa-pen'" />
                     <span>{{ subItem.label || '未命名子项' }}</span>
                   </a>
                 </div>
@@ -344,6 +344,8 @@ import { NButton, NTag, useDialog, useMessage } from 'naive-ui'
 import draggable from 'vuedraggable'
 import api from '@/api'
 import PageHeader from '@/components/PageHeader.vue'
+import FaIconPicker from '@/components/form/FaIconPicker.vue'
+import IconValue from '@/components/form/IconValue.vue'
 
 const message = useMessage()
 const dialog = useDialog()

assets/admin/src/pages/content/FooterTabbarSettings.vue

@@ -75,7 +75,7 @@
                   <i class="fa fas fa-bars"></i>
                 </button>
                 <span class="tabbar-sort__icon">
-                  <i v-if="element.icon" :class="element.icon"></i>
+                  <IconValue v-if="element.icon" :value="element.icon" />
                 </span>
                 <div class="tabbar-sort__meta">
                   <div class="tabbar-sort__title-row">
@@ -128,16 +128,13 @@
           />
         </n-form-item>
 
-        <n-form-item label="图标 (Font Awesome)">
-          <n-input v-model:value="editingItem.icon" placeholder="例如: fa fas fa-home" />
+        <n-form-item label="图标 (Font Awesome / 内置 SVG)">
+          <FaIconPicker v-model:value="editingItem.icon" placeholder="选择图标" />
           <template #feedback>
             <div class="icon-preview-row">
               <span>预览：</span>
-              <i v-if="editingItem.icon" :class="editingItem.icon" style="font-size: 20px;"></i>
+              <IconValue v-if="editingItem.icon" :value="editingItem.icon" style="font-size: 20px;" />
               <span v-else class="muted-text">无图标</span>
-              <a href="https://fontawesome.com/search?m=free" target="_blank" rel="noopener" style="margin-left: 12px;">
-                <i class="fa fas fa-external-link-alt"></i> Font Awesome 图标库
-              </a>
             </div>
           </template>
         </n-form-item>
@@ -230,7 +227,7 @@
                     <i class="fa fas fa-bars"></i>
                   </button>
                   <n-input v-model:value="element.label" placeholder="名称，例如：写文章" />
-                  <n-input v-model:value="element.icon" placeholder="图标，例如：fa fas fa-pen" />
+                  <FaIconPicker v-model:value="element.icon" placeholder="选择图标" />
                   <n-input v-model:value="element.url" placeholder="链接，例如：/wp-admin/post-new.php" />
                   <n-button quaternary type="error" @click="removeAddItem(subIndex)">
                     <template #icon><i class="fa fas fa-trash-alt" /></template>
@@ -268,6 +265,8 @@ import { NButton, NTag, useDialog, useMessage } from 'naive-ui'
 import draggable from 'vuedraggable'
 import api from '@/api'
 import PageHeader from '@/components/PageHeader.vue'
+import FaIconPicker from '@/components/form/FaIconPicker.vue'
+import IconValue from '@/components/form/IconValue.vue'
 
 const message = useMessage()
 const dialog = useDialog()