lawless/client/assets/scripts/ui/common/UIBase.ts

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

const { ccclass, property } = _decorator;

/**
 * UI基础组件 - 提供通用的UI操作方法
 */
@ccclass('UIBase')
export class UIBase extends Component {

    /**
     * 设置标签文字和样式
     */
    protected setLabel(node: Node, text: string, options?: {
        fontSize?: number;
        color?: string;
        horizontalAlign?: number;
    }) {
        const label = node.getComponent(Label);
        if (label) {
            label.string = text;
            if (options?.fontSize) label.fontSize = options.fontSize;
            if (options?.color) {
                const c = options.color;
                label.color = new Color(
                    parseInt(c.substr(1, 2), 16),
                    parseInt(c.substr(3, 2), 16),
                    parseInt(c.substr(5, 2), 16),
                    255
                );
            }
        }
    }

    /**
     * 创建面板背景
     */
    protected createPanelBg(parent: Node, options?: {
        color?: string;
        width?: number;
        height?: number;
        opacity?: number;
    }) {
        const node = new Node('PanelBg');
        const sprite = node.addComponent(Sprite);
        const transform = node.getComponent(UITransform) || node.addComponent(UITransform);

        if (options?.width) transform.setContentSize(new Size(options.width, options.height || options.width));
        if (options?.opacity !== undefined) sprite.color = new Color(255, 255, 255, options.opacity);

        node.setParent(parent);
        return node;
    }

    /**
     * 创建金色边框装饰
     */
    protected createGoldBorder(parent: Node, width: number, height: number) {
        const node = new Node('GoldBorder');
        const transform = node.addComponent(UITransform);
        transform.setContentSize(new Size(width, height));
        node.setParent(parent);
        return node;
    }

    /**
     * 创建按钮
     */
    protected createButton(parent: Node, text: string, options?: {
        width?: number;
        height?: number;
        bgColor?: string;
        textColor?: string;
        fontSize?: number;
    }) {
        const node = new Node('Button');
        const transform = node.addComponent(UITransform);
        const w = options?.width || 200;
        const h = options?.height || 60;
        transform.setContentSize(new Size(w, h));
        node.setParent(parent);

        // 按钮背景
        const bgNode = new Node('Bg');
        bgNode.addComponent(Sprite);
        bgNode.getComponent(UITransform)?.setContentSize(new Size(w, h));
        bgNode.setParent(node);

        // 按钮文字
        const labelNode = new Node('Label');
        const label = labelNode.addComponent(Label);
        label.string = text;
        label.fontSize = options?.fontSize || UITheme.FONT_SIZE.MD;
        label.color = new Color(
            parseInt((options?.textColor || UITheme.COLORS.TEXT_WHITE).substr(1, 2), 16),
            parseInt((options?.textColor || UITheme.COLORS.TEXT_WHITE).substr(3, 2), 16),
            parseInt((options?.textColor || UITheme.COLORS.TEXT_WHITE).substr(5, 2), 16),
            255
        );
        labelNode.setParent(node);

        return node;
    }

    /**
     * 创建属性条（HP/MP/EXP）
     */
    protected createBar(parent: Node, options: {
        width: number;
        height: number;
        fillColor: string;
        bgColor: string;
        value: number;
        maxValue: number;
    }) {
        const node = new Node('Bar');
        const transform = node.addComponent(UITransform);
        transform.setContentSize(new Size(options.width, options.height));
        node.setParent(parent);

        // 背景
        const bgNode = new Node('Bg');
        bgNode.addComponent(Sprite);
        bgNode.getComponent(UITransform)?.setContentSize(new Size(options.width, options.height));
        bgNode.setParent(node);

        // 填充
        const fillNode = new Node('Fill');
        fillNode.addComponent(Sprite);
        const fillWidth = options.width * (options.value / options.maxValue);
        fillNode.getComponent(UITransform)?.setContentSize(new Size(fillWidth, options.height));
        fillNode.setParent(node);

        return node;
    }

    /**
     * 颜色字符串转Color
     */
    protected hexToColor(hex: string, alpha: number = 255): Color {
        const r = parseInt(hex.substr(1, 2), 16);
        const g = parseInt(hex.substr(3, 2), 16);
        const b = parseInt(hex.substr(5, 2), 16);
        return new Color(r, g, b, alpha);
    }
}