521603a899
一些检测仍在等待运行
Docs Build / build-and-deploy (push) Waiting to run
- 移除 ConfigManager 配置管理器类 - 移除 GameManager 全局单例管理器类 - 移除 NetworkManager 网络连接管理器类 - 移除 CharacterData 和 ItemData 数据模型类 - 移除 BagScene、BattleScene、LobbyScene 等场景脚本 - 移除 EncounterBubble 和 EventFeedPanel UI组件脚本 - 更新代理邀请文档中的服务器连接方式 - 更新同步状态表格中的代理任务分配信息 - 添加 MiMo 任务完成总结和审查修复记录
208 行
7.7 KiB
TypeScript
208 行
7.7 KiB
TypeScript
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('CharacterPanel')
|
||
export class CharacterPanel extends UIBase {
|
||
|
||
@property(Node) characterInfo: Node = null!;
|
||
@property(Node) statsArea: Node = null!;
|
||
@property(Node) equipmentArea: Node = null!;
|
||
@property(Node) inventoryArea: Node = null!;
|
||
|
||
start() {
|
||
this.initCharacterInfo();
|
||
this.initStatsArea();
|
||
this.initEquipmentArea();
|
||
this.initInventoryArea();
|
||
}
|
||
|
||
/**
|
||
* 角色基本信息区
|
||
* 头像 + 角色名 + 称号 + 气血
|
||
*/
|
||
private initCharacterInfo() {
|
||
if (!this.characterInfo) return;
|
||
|
||
const layout = this.characterInfo.addComponent(Layout);
|
||
layout.type = Layout.Type.VERTICAL;
|
||
|
||
// 角色头像区域（圆形）
|
||
const avatarNode = new Node('Avatar');
|
||
const avatarTransform = avatarNode.addComponent(UITransform);
|
||
avatarTransform.setContentSize(new Size(160, 160));
|
||
avatarNode.setParent(this.characterInfo);
|
||
|
||
// 角色名
|
||
const nameNode = new Node('Name');
|
||
const nameLabel = nameNode.addComponent(Label);
|
||
nameLabel.string = '角色名';
|
||
nameLabel.fontSize = UITheme.FONT_SIZE.LG;
|
||
nameLabel.color = this.hexToColor(UITheme.COLORS.TEXT_GOLD);
|
||
nameNode.setParent(this.characterInfo);
|
||
|
||
// 称号
|
||
const titleNode = new Node('Title');
|
||
const titleLabel = titleNode.addComponent(Label);
|
||
titleLabel.string = '锐不可挡';
|
||
titleLabel.fontSize = UITheme.FONT_SIZE.SM;
|
||
titleLabel.color = this.hexToColor(UITheme.COLORS.TEXT_ORANGE);
|
||
titleNode.setParent(this.characterInfo);
|
||
|
||
// 气血
|
||
const hpNode = new Node('HP');
|
||
const hpLabel = hpNode.addComponent(Label);
|
||
hpLabel.string = '气血 283098';
|
||
hpLabel.fontSize = UITheme.FONT_SIZE.MD;
|
||
hpLabel.color = this.hexToColor(UITheme.COLORS.HP_BAR);
|
||
hpNode.setParent(this.characterInfo);
|
||
}
|
||
|
||
/**
|
||
* 属性面板
|
||
* 攻击/筋骨/力道/身法/眼识
|
||
*/
|
||
private initStatsArea() {
|
||
if (!this.statsArea) return;
|
||
|
||
const transform = this.statsArea.getComponent(UITransform) || this.statsArea.addComponent(UITransform);
|
||
transform.setContentSize(new Size(400, 300));
|
||
|
||
const stats = [
|
||
{ name: '攻击', value: '92442', color: UITheme.COLORS.TEXT_WHITE },
|
||
{ name: '筋骨', value: '6031', color: UITheme.COLORS.TEXT_WHITE },
|
||
{ name: '力道', value: '8963', color: UITheme.COLORS.TEXT_WHITE },
|
||
{ name: '身法', value: '13249', color: UITheme.COLORS.TEXT_WHITE },
|
||
{ name: '眼识', value: '3293', color: UITheme.COLORS.TEXT_WHITE },
|
||
];
|
||
|
||
stats.forEach(stat => {
|
||
const row = new Node(`Stat_${stat.name}`);
|
||
const rowTransform = row.addComponent(UITransform);
|
||
rowTransform.setContentSize(new Size(380, 40));
|
||
row.setParent(this.statsArea);
|
||
|
||
const nameNode = new Node('Name');
|
||
const nameLabel = nameNode.addComponent(Label);
|
||
nameLabel.string = stat.name;
|
||
nameLabel.fontSize = UITheme.FONT_SIZE.MD;
|
||
nameLabel.color = this.hexToColor(UITheme.COLORS.TEXT_GOLD);
|
||
nameNode.setParent(row);
|
||
|
||
const valueNode = new Node('Value');
|
||
const valueLabel = valueNode.addComponent(Label);
|
||
valueLabel.string = stat.value;
|
||
valueLabel.fontSize = UITheme.FONT_SIZE.MD;
|
||
valueLabel.color = this.hexToColor(stat.color);
|
||
valueNode.setParent(row);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 装备区域
|
||
* 六边形装备槽（武器/头盔/衣服/腰带/鞋子/坐骑）
|
||
*/
|
||
private initEquipmentArea() {
|
||
if (!this.equipmentArea) return;
|
||
|
||
const transform = this.equipmentArea.getComponent(UITransform) || this.equipmentArea.addComponent(UITransform);
|
||
transform.setContentSize(new Size(720, 180));
|
||
|
||
const slots = ['武器', '头盔', '衣服', '腰带', '鞋子', '坐骑'];
|
||
|
||
slots.forEach((slotName, index) => {
|
||
const slotNode = new Node(`Slot_${slotName}`);
|
||
const slotTransform = slotNode.addComponent(UITransform);
|
||
slotTransform.setContentSize(new Size(100, 100));
|
||
slotNode.setParent(this.equipmentArea);
|
||
|
||
// 六边形边框
|
||
const borderNode = new Node('Border');
|
||
const borderSprite = borderNode.addComponent(Sprite);
|
||
borderNode.getComponent(UITransform)?.setContentSize(new Size(100, 100));
|
||
borderNode.setParent(slotNode);
|
||
|
||
// 装备图标
|
||
const iconNode = new Node('Icon');
|
||
const iconLabel = iconNode.addComponent(Label);
|
||
iconLabel.string = '⚔️';
|
||
iconLabel.fontSize = UITheme.FONT_SIZE.XL;
|
||
iconNode.setParent(slotNode);
|
||
|
||
// 槽位名称
|
||
const labelNode = new Node('Label');
|
||
const label = labelNode.addComponent(Label);
|
||
label.string = slotName;
|
||
label.fontSize = UITheme.FONT_SIZE.XS;
|
||
label.color = this.hexToColor(UITheme.COLORS.TEXT_DIM);
|
||
labelNode.setParent(slotNode);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 物品栏区域
|
||
* 分类标签 + 物品格子
|
||
*/
|
||
private initInventoryArea() {
|
||
if (!this.inventoryArea) return;
|
||
|
||
const transform = this.inventoryArea.getComponent(UITransform) || this.inventoryArea.addComponent(UITransform);
|
||
transform.setContentSize(new Size(720, 400));
|
||
|
||
// 分类标签栏
|
||
const tabBar = new Node('TabBar');
|
||
const tabLayout = tabBar.addComponent(Layout);
|
||
tabLayout.type = Layout.Type.HORIZONTAL;
|
||
tabBar.setParent(this.inventoryArea);
|
||
|
||
const tabs = ['全部', '装备', '材料', '药材', '杂物'];
|
||
tabs.forEach(tabName => {
|
||
const tabNode = new Node(`Tab_${tabName}`);
|
||
const tabTransform = tabNode.addComponent(UITransform);
|
||
tabTransform.setContentSize(new Size(120, 40));
|
||
tabNode.setParent(tabBar);
|
||
|
||
const label = tabNode.addComponent(Label);
|
||
label.string = tabName;
|
||
label.fontSize = UITheme.FONT_SIZE.SM;
|
||
label.color = this.hexToColor(UITheme.COLORS.TEXT_NORMAL);
|
||
});
|
||
|
||
// 物品格子网格（6列 x 5行）
|
||
const gridNode = new Node('Grid');
|
||
const gridLayout = gridNode.addComponent(Layout);
|
||
gridLayout.type = Layout.Type.GRID;
|
||
gridLayout.startAxis = Layout.AxisDirection.HORIZONTAL;
|
||
gridLayout.cellSize = new Size(100, 100);
|
||
gridLayout.spacingX = 8;
|
||
gridLayout.spacingY = 8;
|
||
gridNode.setParent(this.inventoryArea);
|
||
|
||
for (let i = 0; i < 30; i++) {
|
||
const itemNode = new Node(`Item_${i}`);
|
||
const itemTransform = itemNode.addComponent(UITransform);
|
||
itemTransform.setContentSize(new Size(100, 100));
|
||
itemNode.setParent(gridNode);
|
||
|
||
// 物品背景
|
||
const bgNode = new Node('Bg');
|
||
bgNode.addComponent(Sprite);
|
||
bgNode.getComponent(UITransform)?.setContentSize(new Size(100, 100));
|
||
bgNode.setParent(itemNode);
|
||
|
||
// 物品图标
|
||
const iconNode = new Node('Icon');
|
||
const iconLabel = iconNode.addComponent(Label);
|
||
iconLabel.string = '📦';
|
||
iconLabel.fontSize = UITheme.FONT_SIZE.XL;
|
||
iconNode.setParent(itemNode);
|
||
}
|
||
}
|
||
}
|
