update at 2026-02-08 18:28:39

miniprogram/pages/font-picker/index.js

@@ -0,0 +1,144 @@
+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()
+  },
+})