doodle-mini/miniprogram/pages/category/category.ts

import { CATEGORY_DATA, type CategoryItem } from './category.data';

type CategoryTab = {
    id: string;
    name: string;
    icon: string;
};

type DisplayItem = CategoryItem & {
    thumbBg: string;
};

const CATEGORY_BG: Record<string, string> = {
    math: '#fff3c4',
    pinyin: '#d8f0d0',
    puzzle: '#f5e6dc',
    chinese: '#d8f0d0',
    english: '#e8f4ff',
    craft: '#fce4ec',
};

const ALL_TAB: CategoryTab = { id: 'all', name: '全部', icon: '📋' };

const SIDEBAR_TABS: CategoryTab[] = [
    ALL_TAB,
    ...CATEGORY_DATA.categories.map((c) => ({
        id: c.id,
        name: c.name,
        icon: c.icon,
    })),
];

function buildAllItems(): DisplayItem[] {
    const items: DisplayItem[] = [];
    for (const group of CATEGORY_DATA.categories) {
        for (const item of group.items) {
            items.push({
                ...item,
                thumbBg: CATEGORY_BG[group.id] ?? '#f0e7d6',
            });
        }
    }
    return items;
}

function getItemsByCategory(categoryId: string): DisplayItem[] {
    if (categoryId === 'all') return buildAllItems();
    const group = CATEGORY_DATA.categories.find((c) => c.id === categoryId);
    if (!group) return [];
    return group.items.map((item) => ({
        ...item,
        thumbBg: CATEGORY_BG[group.id] ?? '#f0e7d6',
    }));
}

function filterByKeyword(items: DisplayItem[], keyword: string): DisplayItem[] {
    if (!keyword) return items;
    const kw = keyword.toLowerCase();
    return items.filter(
        (item) =>
            item.title.toLowerCase().includes(kw) ||
            item.subtitle.toLowerCase().includes(kw),
    );
}

const TAB_BAR_PATHS = new Set([
    '/pages/home/home',
    '/pages/category/category',
    '/pages/age/age',
    '/pages/favorites/favorites',
    '/pages/profile/profile',
]);

Page({
    data: {
        searchPlaceholder: CATEGORY_DATA.searchPlaceholder,
        searchKeyword: '',
        sidebarTabs: SIDEBAR_TABS,
        activeCategoryId: 'all',
        displayItems: buildAllItems() as DisplayItem[],
        scrollIntoViewId: '',
    },

    onTapCategory(e: WechatMiniprogram.TouchEvent) {
        const id = e.currentTarget.dataset.id as string;
        if (!id || id === this.data.activeCategoryId) return;

        const items = getItemsByCategory(id);
        const filtered = filterByKeyword(items, this.data.searchKeyword);

        this.setData({
            activeCategoryId: id,
            displayItems: filtered,
            scrollIntoViewId: '',
        });
    },

    onSearchInput(e: WechatMiniprogram.Input) {
        const keyword = (e.detail.value ?? '').trim();
        const items = getItemsByCategory(this.data.activeCategoryId);
        const filtered = filterByKeyword(items, keyword);

        this.setData({
            searchKeyword: keyword,
            displayItems: filtered,
        });
    },

    onClearSearch() {
        const items = getItemsByCategory(this.data.activeCategoryId);
        this.setData({
            searchKeyword: '',
            displayItems: items,
        });
    },

    onTapItem(e: WechatMiniprogram.TouchEvent) {
        const path = e.currentTarget.dataset.path as string;
        const title = e.currentTarget.dataset.title as string;
        const available = e.currentTarget.dataset.available;

        if (!available || !path) {
            wx.showToast({
                title: title ? `${title} 即将上线` : '即将上线',
                icon: 'none',
            });
            return;
        }

        if (TAB_BAR_PATHS.has(path)) {
            wx.switchTab({ url: path });
            return;
        }

        wx.navigateTo({ url: path });
    },

    onShareAppMessage() {
        return {
            title: '涂鸦丫 - 全部练习分类',
            path: '/pages/category/category',
        };
    },

    onShareTimeline() {
        return {
            title: '涂鸦丫 - 全部练习分类',
            query: '',
        };
    },
});