From af04fcfd3c9736b8f4092c8ca41fe884eb86f6f6 Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Sun, 6 Sep 2026 16:10:28 +0800
Subject: [PATCH] fix(admin): bind FaIconPicker with v-model so icon clicks
 update the value

---
 assets/admin/src/pages/content/FloatingButtonsSettings.vue | 4 ++--
 assets/admin/src/pages/content/FooterTabbarSettings.vue    | 4 ++--
 tests/widget-system/icon-picker-contract.test.cjs          | 5 +++++
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/assets/admin/src/pages/content/FloatingButtonsSettings.vue b/assets/admin/src/pages/content/FloatingButtonsSettings.vue
index 9520d025..4a7e253e 100644
--- a/assets/admin/src/pages/content/FloatingButtonsSettings.vue
+++ b/assets/admin/src/pages/content/FloatingButtonsSettings.vue
@@ -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)">
-            <FaIconPicker v-model:value="editingItem.icon" placeholder="选择图标" />
+            <FaIconPicker v-model="editingItem.icon" placeholder="选择图标" />
           </n-form-item-gi>
           <n-form-item-gi v-else label="主题图标">
             <div class="theme-icon-preview">
@@ -254,7 +254,7 @@
                     <i class="fa fas fa-bars"></i>
                   </button>
                   <n-input v-model:value="element.label" placeholder="名称，例如: 写文章" />
-                  <FaIconPicker v-model:value="element.icon" placeholder="选择图标" />
+                  <FaIconPicker v-model="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>
diff --git a/assets/admin/src/pages/content/FooterTabbarSettings.vue b/assets/admin/src/pages/content/FooterTabbarSettings.vue
index 9638c014..2bdcf9ce 100644
--- a/assets/admin/src/pages/content/FooterTabbarSettings.vue
+++ b/assets/admin/src/pages/content/FooterTabbarSettings.vue
@@ -129,7 +129,7 @@
         </n-form-item>
 
         <n-form-item label="图标 (Font Awesome / 内置 SVG)">
-          <FaIconPicker v-model:value="editingItem.icon" placeholder="选择图标" />
+          <FaIconPicker v-model="editingItem.icon" placeholder="选择图标" />
           <template #feedback>
             <div class="icon-preview-row">
               <span>预览：</span>
@@ -227,7 +227,7 @@
                     <i class="fa fas fa-bars"></i>
                   </button>
                   <n-input v-model:value="element.label" placeholder="名称，例如：写文章" />
-                  <FaIconPicker v-model:value="element.icon" placeholder="选择图标" />
+                  <FaIconPicker v-model="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>
diff --git a/tests/widget-system/icon-picker-contract.test.cjs b/tests/widget-system/icon-picker-contract.test.cjs
index ec33bc19..12697b6d 100644
--- a/tests/widget-system/icon-picker-contract.test.cjs
+++ b/tests/widget-system/icon-picker-contract.test.cjs
@@ -97,6 +97,11 @@ test('custom settings pages and standalone save paths speak the three icon forma
     assert.match(source, /import FaIconPicker from '@\/components\/form\/FaIconPicker\.vue'/);
     assert.match(source, /import IconValue from '@\/components\/form\/IconValue\.vue'/);
     assert.match(source, /<FaIconPicker/, `${page} uses the picker for icon fields`);
+    // FaIconPicker declares modelValue / emits update:modelValue; the Naive UI
+    // v-model:value convention binds a prop the picker never reads, so
+    // selection clicks would be dropped.
+    assert.doesNotMatch(source, /<FaIconPicker[^>]*v-model:value/, `${page} must not bind the picker with v-model:value`);
+    assert.match(source, /<FaIconPicker v-model=/, `${page} binds the picker with v-model`);
   }
   // Their REST save paths keep customsvg markup intact.
   const controller = read('src/Admin/GlobalControllerPart1.php');