145 lines
3.4 KiB
JavaScript
145 lines
3.4 KiB
JavaScript
const { loadFontsManifest, listCategories } = require('../../utils/mp/font-loader')
|
|
const { loadFavorites, saveFavorites } = require('../../utils/mp/storage')
|
|
|
|
Page({
|
|
data: {
|
|
fonts: [],
|
|
filteredFonts: [],
|
|
categories: ['全部'],
|
|
categoryIndex: 0,
|
|
favoriteOnly: false,
|
|
favorites: [],
|
|
searchText: '',
|
|
selectedFontId: '',
|
|
},
|
|
|
|
async onLoad(options) {
|
|
const selectedFontId = options && options.selected ? decodeURIComponent(options.selected) : ''
|
|
this.setData({ selectedFontId })
|
|
|
|
wx.showLoading({ title: '加载字体中', mask: true })
|
|
try {
|
|
const favorites = loadFavorites()
|
|
const fonts = await loadFontsManifest()
|
|
const categories = listCategories(fonts)
|
|
|
|
this.fontMap = new Map(fonts.map((font) => [font.id, font]))
|
|
|
|
this.setData({
|
|
fonts,
|
|
categories,
|
|
favorites,
|
|
})
|
|
|
|
this.applyFilter()
|
|
} catch (error) {
|
|
wx.showToast({ title: '字体加载失败', icon: 'none' })
|
|
} finally {
|
|
wx.hideLoading()
|
|
}
|
|
},
|
|
|
|
applyFilter() {
|
|
const {
|
|
fonts,
|
|
favorites,
|
|
searchText,
|
|
categories,
|
|
categoryIndex,
|
|
favoriteOnly,
|
|
} = this.data
|
|
|
|
const keyword = String(searchText || '').trim().toLowerCase()
|
|
const selectedCategory = categories[categoryIndex] || '全部'
|
|
const favoriteSet = new Set(favorites)
|
|
|
|
const filteredFonts = fonts
|
|
.filter((font) => {
|
|
if (favoriteOnly && !favoriteSet.has(font.id)) {
|
|
return false
|
|
}
|
|
if (selectedCategory !== '全部' && selectedCategory !== '收藏' && font.category !== selectedCategory) {
|
|
return false
|
|
}
|
|
if (selectedCategory === '收藏' && !favoriteSet.has(font.id)) {
|
|
return false
|
|
}
|
|
if (!keyword) {
|
|
return true
|
|
}
|
|
return (
|
|
String(font.name || '').toLowerCase().includes(keyword) ||
|
|
String(font.category || '').toLowerCase().includes(keyword)
|
|
)
|
|
})
|
|
.map((font) => ({
|
|
...font,
|
|
isFavorite: favoriteSet.has(font.id),
|
|
}))
|
|
|
|
this.setData({ filteredFonts })
|
|
},
|
|
|
|
onSearchInput(event) {
|
|
this.setData({ searchText: event.detail.value || '' })
|
|
this.applyFilter()
|
|
},
|
|
|
|
onCategoryChange(event) {
|
|
this.setData({ categoryIndex: Number(event.detail.value) || 0 })
|
|
this.applyFilter()
|
|
},
|
|
|
|
onToggleFavoriteOnly() {
|
|
this.setData({ favoriteOnly: !this.data.favoriteOnly })
|
|
this.applyFilter()
|
|
},
|
|
|
|
onToggleFavorite(event) {
|
|
const fontId = event.currentTarget.dataset.fontId
|
|
if (!fontId) {
|
|
return
|
|
}
|
|
|
|
const next = new Set(this.data.favorites)
|
|
if (next.has(fontId)) {
|
|
next.delete(fontId)
|
|
} else {
|
|
next.add(fontId)
|
|
}
|
|
|
|
const favorites = saveFavorites(Array.from(next))
|
|
this.setData({ favorites })
|
|
this.applyFilter()
|
|
},
|
|
|
|
onSelectFont(event) {
|
|
const fontId = event.currentTarget.dataset.fontId
|
|
if (!fontId) {
|
|
return
|
|
}
|
|
this.setData({ selectedFontId: fontId })
|
|
},
|
|
|
|
onCancel() {
|
|
wx.navigateBack()
|
|
},
|
|
|
|
onConfirm() {
|
|
const { selectedFontId } = this.data
|
|
if (!selectedFontId) {
|
|
wx.showToast({ title: '请选择字体', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
const font = this.fontMap ? this.fontMap.get(selectedFontId) : null
|
|
const eventChannel = this.getOpenerEventChannel()
|
|
eventChannel.emit('fontSelected', {
|
|
fontId: selectedFontId,
|
|
font,
|
|
})
|
|
|
|
wx.navigateBack()
|
|
},
|
|
})
|