lawless/client/assets/scripts/ui/components/BottomNavBar.ts

import { _decorator, Component, Node, Label, Sprite, Color, UITransform, Size, Layout, EventHandler } from 'cc';
import { UITheme } from '../common/UITheme';
import { UIBase } from '../common/UIBase';

const { ccclass, property } = _decorator;

/**
 * 底部导航栏组件
 * 吐纳 | 门派 | 武学 | 江湖 | 游历
 */
@ccclass('BottomNavBar')
export class BottomNavBar extends UIBase {

    @property([Node]) tabs: Node[] = [];
    @property(Node) indicator: Node = null!;

    private currentTab: number = 0;
    private tabNames: string[] = ['吐纳', '门派', '武学', '江湖', '游历'];
    private tabIcons: string[] = ['🧘', '🏯', '⚔️', '🗺️', '🚶'];

    start() {
        this.initTabs();
    }

    private initTabs() {
        if (!this.node) return;

        const transform = this.node.getComponent(UITransform) || this.node.addComponent(UITransform);
        transform.setContentSize(new Size(720, 120));

        const layout = this.node.addComponent(Layout);
        layout.type = Layout.Type.HORIZONTAL;
        layout.resizeMode = Layout.ResizeMode.CONTAINER;

        this.tabNames.forEach((name, index) => {
            const tabNode = new Node(`Tab_${name}`);
            const tabTransform = tabNode.addComponent(UITransform);
            tabTransform.setContentSize(new Size(144, 120));
            tabNode.setParent(this.node);

            // 图标背景
            const bgNode = new Node('IconBg');
            const bgTransform = bgNode.addComponent(UITransform);
            bgTransform.setContentSize(new Size(80, 80));
            bgNode.setParent(tabNode);

            // 图标
            const iconNode = new Node('Icon');
            const iconLabel = iconNode.addComponent(Label);
            iconLabel.string = this.tabIcons[index];
            iconLabel.fontSize = UITheme.FONT_SIZE.XL;
            iconNode.setParent(bgNode);

            // 文字
            const textNode = new Node('Text');
            const textLabel = textNode.addComponent(Label);
            textLabel.string = name;
            textLabel.fontSize = UITheme.FONT_SIZE.XS;
            textLabel.color = index === this.currentTab
                ? this.hexToColor(UITheme.COLORS.TEXT_GOLD)
                : this.hexToColor(UITheme.COLORS.TEXT_DIM);
            textNode.setParent(tabNode);

            this.tabs.push(tabNode);
        });
    }

    /**
     * 切换标签
     */
    switchTab(index: number) {
        if (index < 0 || index >= this.tabNames.length) return;
        if (index === this.currentTab) return;

        // 更新当前标签样式
        this.updateTabStyle(this.currentTab, false);
        this.currentTab = index;
        this.updateTabStyle(index, true);

        // 触发切换事件
        this.onTabChanged(index);
    }

    private updateTabStyle(index: number, active: boolean) {
        const tab = this.tabs[index];
        if (!tab) return;

        const textNode = tab.getChildByName('Text');
        if (textNode) {
            const label = textNode.getComponent(Label);
            if (label) {
                label.color = active
                    ? this.hexToColor(UITheme.COLORS.TEXT_GOLD)
                    : this.hexToColor(UITheme.COLORS.TEXT_DIM);
            }
        }
    }

    /**
     * 标签切换回调
     */
    protected onTabChanged(index: number) {
        // 子类重写此方法处理界面切换
        console.log(`Tab switched to: ${this.tabNames[index]}`);
    }

    /**
     * 获取当前标签索引
     */
    getCurrentTab(): number {
        return this.currentTab;
    }

    /**
     * 获取标签名称
     */
    getTabName(index: number): string {
        return this.tabNames[index] || '';
    }
}