fix(admin): bind FaIconPicker with v-model so icon clicks update the value

This commit is contained in:
2026-09-06 16:10:28 +08:00
parent 5acd1e0e25
commit af04fcfd3c
3 changed files with 9 additions and 4 deletions
@@ -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>
@@ -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>
@@ -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');