lawless/client/assets/scripts/ui/screens/SectScreen.ts

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

const { ccclass, property } = _decorator;

/**
 * 门派界面
 * 基于江湖截图：门派建筑列表 + 江湖风评
 */
@ccclass('SectScreen')
export class SectScreen extends UIBase {

    @property(Node) sectHeader: Node = null!;
    @property(Node) buildingList: Node = null!;
    @property(Node) reputationArea: Node = null!;

    start() {
        this.initSectHeader();
        this.initBuildingList();
        this.initReputationArea();
    }

    /**
     * 门派头部信息
     * 门派名称 + 身份 + 贡献
     */
    private initSectHeader() {
        if (!this.sectHeader) return;

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

        // 门派名
        const nameNode = new Node('SectName');
        const nameLabel = nameNode.addComponent(Label);
        nameLabel.string = '昆仑派';
        nameLabel.fontSize = UITheme.FONT_SIZE.XL;
        nameLabel.color = this.hexToColor(UITheme.COLORS.TEXT_GOLD);
        nameNode.setParent(this.sectHeader);

        // 身份
        const identityNode = new Node('Identity');
        const identityLabel = identityNode.addComponent(Label);
        identityLabel.string = '门派身份：长老';
        identityLabel.fontSize = UITheme.FONT_SIZE.SM;
        identityLabel.color = this.hexToColor(UITheme.COLORS.TEXT_NORMAL);
        identityNode.setParent(this.sectHeader);

        // 贡献
        const contribNode = new Node('Contribution');
        const contribLabel = contribNode.addComponent(Label);
        contribLabel.string = '门派贡献：7906 🪙';
        contribLabel.fontSize = UITheme.FONT_SIZE.SM;
        contribLabel.color = this.hexToColor(UITheme.COLORS.GOLD_PRIMARY);
        contribNode.setParent(this.sectHeader);

        // 按钮
        const叛出门派Btn = this.createButton(this.sectHeader, '叛出门派', {
            width: 160, height: 50,
            bgColor: UITheme.COLORS.HP_BAR,
            textColor: UITheme.COLORS.TEXT_WHITE,
        });

        const 门派精义Btn = this.createButton(this.sectHeader, '门派精义', {
            width: 160, height: 50,
            bgColor: UITheme.COLORS.BG_CARD,
            textColor: UITheme.COLORS.TEXT_GOLD,
        });
    }

    /**
     * 建筑列表
     * 两列布局，每项包含建筑图标和名称
     */
    private initBuildingList() {
        if (!this.buildingList) return;

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

        const buildings = [
            { name: '议事殿', icon: '🏛️' },
            { name: '杂务堂', icon: '📋' },
            { name: '藏经阁', icon: '📚' },
            { name: '演武场', icon: '⚔️' },
            { name: '藏宝阁', icon: '💰' },
            { name: '入门殿', icon: '🚪' },
            { name: '比武台', icon: '🥊' },
            { name: '讲义厅', icon: '📖' },
            { name: '门派禁地', icon: '⚠️' },
            { name: '祖师殿', icon: '🏯' },
            { name: '铸剑堂', icon: '🔨' },
        ];

        // 创建网格布局
        const gridNode = new Node('BuildingGrid');
        const gridLayout = gridNode.addComponent(Layout);
        gridLayout.type = Layout.Type.GRID;
        gridLayout.startAxis = Layout.AxisDirection.HORIZONTAL;
        gridLayout.cellSize = new Size(340, 100);
        gridLayout.spacingX = 20;
        gridLayout.spacingY = 16;
        gridNode.setParent(this.buildingList);

        buildings.forEach(building => {
            const buildingNode = new Node(`Building_${building.name}`);
            const buildingTransform = buildingNode.addComponent(UITransform);
            buildingTransform.setContentSize(new Size(340, 100));
            buildingNode.setParent(gridNode);

            // 建筑图标
            const iconNode = new Node('Icon');
            const iconLabel = iconNode.addComponent(Label);
            iconLabel.string = building.icon;
            iconLabel.fontSize = UITheme.FONT_SIZE.XXL;
            iconNode.setParent(buildingNode);

            // 建筑名称
            const nameNode = new Node('Name');
            const nameLabel = nameNode.addComponent(Label);
            nameLabel.string = building.name;
            nameLabel.fontSize = UITheme.FONT_SIZE.MD;
            nameLabel.color = this.hexToColor(UITheme.COLORS.TEXT_WHITE);
            nameNode.setParent(buildingNode);
        });
    }

    /**
     * 江湖风评区域
     * 正义值 + 善恶条
     */
    private initReputationArea() {
        if (!this.reputationArea) return;

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

        // 正义值
        const justiceNode = new Node('Justice');
        const justiceLabel = justiceNode.addComponent(Label);
        justiceLabel.string = '江湖风评：正义 | 20047';
        justiceLabel.fontSize = UITheme.FONT_SIZE.MD;
        justiceLabel.color = this.hexToColor(UITheme.COLORS.TEXT_GREEN);
        justiceNode.setParent(this.reputationArea);

        // 善恶条
        const barNode = new Node('AlignmentBar');
        const barTransform = barNode.addComponent(UITransform);
        barTransform.setContentSize(new Size(600, 30));
        barNode.setParent(this.reputationArea);

        // 邪 - 正 标签
        const evilLabel = new Node('Evil');
        const evil = evilLabel.addComponent(Label);
        evil.string = '邪';
        evil.fontSize = UITheme.FONT_SIZE.SM;
        evil.color = this.hexToColor(UITheme.COLORS.TEXT_RED);
        evilLabel.setParent(barNode);

        const goodLabel = new Node('Good');
        const good = goodLabel.addComponent(Label);
        good.string = '正';
        good.fontSize = UITheme.FONT_SIZE.SM;
        good.color = this.hexToColor(UITheme.COLORS.TEXT_BLUE);
        goodLabel.setParent(barNode);
    }
}