kate522/wordpress-theme-aksrt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
手机底部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.
This commit is contained in:
kate522 committed 2026-09-06 14:27:49 +08:00
1 parent d89752d543
commit 70cba11fb7
8 files changed
+96 -63
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/admin/src/pages/content/FloatingButtonsSettings.vue
+10 -8
View File
@@ -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
+7 -8
View File
@@ -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()