更新小程序图标组件,替换传统 emoji 为 iconfont 字体图标,提升视觉一致性。调整多个页面以使用新图标组件,优化用户界面体验。修复开发环境的 API 地址配置,并启用 URL 检查以增强安全性。删除不再使用的 iconfont CSS 文件,改为动态加载字体。增加动态加载 iconfont 的逻辑,确保在小程序中正确显示图标。
This commit is contained in:
@@ -31,7 +31,8 @@ Component({
|
||||
},
|
||||
|
||||
data: {
|
||||
svgData: ''
|
||||
svgData: '',
|
||||
fontGlyph: ''
|
||||
},
|
||||
|
||||
lifetimes: {
|
||||
@@ -41,6 +42,54 @@ Component({
|
||||
},
|
||||
|
||||
methods: {
|
||||
// iconfont 映射:将业务 name(lucide 风格)映射到 iconfont 的 unicode(形如 "\ue6aa")
|
||||
// 小程序不支持通过 :before { content } 渲染,因此必须直接输出 unicode 字符
|
||||
getFontGlyph(name) {
|
||||
const map = {
|
||||
// 基础高频(来自 static/iconfont.css 的 content 值)
|
||||
'wallet': '\ue6c8',
|
||||
'gift': '\ue6c9',
|
||||
'user': '\ue6b9',
|
||||
'search': '\ue6aa',
|
||||
'share': '\ue6ab',
|
||||
'home': '\ue694',
|
||||
'lock': '\ue699',
|
||||
'camera': '\ue671',
|
||||
'warning': '\ue6bd',
|
||||
|
||||
// 箭头/展开
|
||||
'chevron-left': '\ue6c1',
|
||||
'chevron-right': '\ue6c6',
|
||||
'chevron-down': '\ue6c4',
|
||||
'chevron-up': '\ue6c2',
|
||||
'arrow-up-right': '\ue6c2',
|
||||
|
||||
// 交互/状态
|
||||
'x': '\ue6c3',
|
||||
'check': '\ue6c7',
|
||||
'plus': '\ue664',
|
||||
'trash-2': '\ue66a',
|
||||
'pencil': '\ue685',
|
||||
'zap': '\ue75c',
|
||||
'info': '\ue69c',
|
||||
|
||||
// 语义近似映射(iconfont 不一定有同名)
|
||||
'map-pin': '\ue6a8',
|
||||
'message-circle': '\ue678',
|
||||
'smartphone': '\ue6a0',
|
||||
'refresh-cw': '\ue6a4',
|
||||
'shield': '\ue6ad',
|
||||
'star': '\ue689',
|
||||
'heart': '\ue68e',
|
||||
|
||||
// 其他:若 iconfont 里不存在,则继续走 SVG 兜底
|
||||
'book-open': '\ue993',
|
||||
'bar-chart': '\ue672',
|
||||
'clock': '\ue6b5',
|
||||
}
|
||||
return map[name] || ''
|
||||
},
|
||||
|
||||
// SVG 图标数据映射(Lucide 风格,替换原 emoji)
|
||||
getSvgPath(name) {
|
||||
const s = '<svg viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'
|
||||
@@ -96,8 +145,15 @@ Component({
|
||||
// 更新图标
|
||||
updateIcon() {
|
||||
const { name, color } = this.data
|
||||
const fontGlyph = this.getFontGlyph(name)
|
||||
let svgString = this.getSvgPath(name)
|
||||
|
||||
// 若 iconfont 存在映射,则优先用字体图标;否则走 SVG
|
||||
if (fontGlyph) {
|
||||
this.setData({ fontGlyph, svgData: '' })
|
||||
return
|
||||
}
|
||||
|
||||
if (svgString) {
|
||||
// 替换颜色占位符
|
||||
svgString = svgString.replace(/COLOR/g, color)
|
||||
@@ -106,11 +162,13 @@ Component({
|
||||
const svgData = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`
|
||||
|
||||
this.setData({
|
||||
svgData: svgData
|
||||
svgData: svgData,
|
||||
fontGlyph: ''
|
||||
})
|
||||
} else {
|
||||
this.setData({
|
||||
svgData: ''
|
||||
svgData: '',
|
||||
fontGlyph: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user