diff --git a/assets/resources/gui/role_controller.prefab b/assets/resources/gui/role_controller.prefab
index 9ec10a72..f0a87c3a 100644
--- a/assets/resources/gui/role_controller.prefab
+++ b/assets/resources/gui/role_controller.prefab
@@ -97,7 +97,7 @@
         "__id__": 70
       }
     ],
-    "_active": false,
+    "_active": true,
     "_components": [
       {
         "__id__": 556
@@ -15641,7 +15641,7 @@
         "__id__": 1024
       }
     ],
-    "_active": false,
+    "_active": true,
     "_components": [
       {
         "__id__": 1032
diff --git a/assets/script/game/common/config/heroSet.ts b/assets/script/game/common/config/heroSet.ts
index ed77dac5..3b2d5fdf 100644
--- a/assets/script/game/common/config/heroSet.ts
+++ b/assets/script/game/common/config/heroSet.ts
@@ -186,5 +186,12 @@ export const HeroInfo: Record<number, heroInfo> = {
 
    };
 
+export const HeroList: number[] = [
+    5001, 5002, 5003, 5004, 5005,
+    5101, 5102, 5103, 5104, 5105,
+    5201, 5202, 5203,
+    5301, 5302, 5303, 5304
+];
+
 
 
diff --git a/assets/script/game/map/HlistComp.ts b/assets/script/game/map/HlistComp.ts
index 9a07398e..dc5235df 100644
--- a/assets/script/game/map/HlistComp.ts
+++ b/assets/script/game/map/HlistComp.ts
@@ -1,11 +1,9 @@
 import { _decorator, Animation, AnimationClip, Button, Event, Label, Node, NodeEventType, Sprite, resources } from "cc";
 import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
 import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
-import { HeroInfo } from "../common/config/heroSet";
-import { HeroAttrsComp } from "../hero/HeroAttrsComp";
-import { Hero } from "../hero/Hero";
+import { HeroInfo, HeroList } from "../common/config/heroSet";
+import { IType, SkillSet } from "../common/config/SkillSet";
 import { oops } from "db://oops-framework/core/Oops";
-import { UIID } from "../common/config/GameUIConfig";
 import { mLogger } from "../common/Logger";
 
 const {property, ccclass } = _decorator;
@@ -29,11 +27,140 @@ export class HListComp extends CCComp {
     pre_btn=null!
     @property(Node)
     next_btn=null!
+
     huuid:number=null!
+    private currentIndex: number = 0;
+    private iconVisualToken: number = 0;
+    debugMode: boolean = false;
+
     onLoad() {
-        
+        this.pre_btn?.on(NodeEventType.TOUCH_END, this.onPreClick, this);
+        this.next_btn?.on(NodeEventType.TOUCH_END, this.onNextClick, this);
     }
 
+    start() {
+        if (HeroList && HeroList.length > 0) {
+            this.currentIndex = 0;
+            this.updateHeroView();
+        }
+    }
+
+    private onPreClick() {
+        if (this.currentIndex > 0) {
+            this.currentIndex--;
+            this.updateHeroView();
+        }
+    }
+
+    private onNextClick() {
+        if (this.currentIndex < HeroList.length - 1) {
+            this.currentIndex++;
+            this.updateHeroView();
+        }
+    }
+
+    private updateHeroView() {
+        this.huuid = HeroList[this.currentIndex];
+        const hero = HeroInfo[this.huuid];
+        if (!hero) return;
+
+        // 更新基础属性标签
+        this.setLabelText(this.name_node, hero.name);
+        this.setLabelText(this.ap_node, `攻击力: ${hero.ap}`);
+        this.setLabelText(this.hp_node, `生命值: ${hero.hp}`);
+
+        // 更新动画
+        this.updateHeroAnimation(this.hero_icon, this.huuid);
+
+        // 更新技能列表
+        this.updateSkillInfo(hero);
+    }
+
+    private setLabelText(node: Node, text: string) {
+        if (!node) return;
+        const label = node.getComponent(Label) || node.getComponentInChildren(Label);
+        if (label) {
+            label.string = text;
+        }
+    }
+
+    private updateHeroAnimation(node: Node, uuid: number) {
+        if (!node) return;
+        const sprite = node.getComponent(Sprite) || node.getComponentInChildren(Sprite);
+        if (sprite) sprite.spriteFrame = null;
+        
+        const hero = HeroInfo[uuid];
+        if (!hero) return;
+        
+        const anim = node.getComponent(Animation) || node.addComponent(Animation);
+        this.clearAnimationClips(anim);
+        
+        this.iconVisualToken++;
+        const token = this.iconVisualToken;
+        const path = `game/heros/hero/${hero.path}/idle`;
+        
+        resources.load(path, AnimationClip, (err, clip) => {
+            if (err || !clip) {
+                mLogger.log(this.debugMode, "HListComp", `load hero animation failed ${uuid}`, err);
+                return;
+            }
+            if (token !== this.iconVisualToken || this.huuid !== uuid) {
+                return;
+            }
+            this.clearAnimationClips(anim);
+            anim.addClip(clip);
+            anim.play("idle");
+        });
+    }
+
+    private clearAnimationClips(anim: Animation) {
+        const clips = anim.clips;
+        if (clips && clips.length > 0) {
+            for (let i = clips.length - 1; i >= 0; i--) {
+                const clip = clips[i];
+                if (clip) anim.removeClip(clip, true);
+            }
+        }
+    }
+
+    private updateSkillInfo(hero: any) {
+        if (!this.info_node) return;
+        
+        const skills = Object.values(hero.skills || {});
+        
+        for (let i = 1; i <= 5; i++) {
+            const line = this.info_node.getChildByName(`Line${i}`);
+            if (!line) continue;
+            
+            const skill: any = skills[i - 1];
+            if (skill) {
+                line.active = true;
+                const skillId = skill.uuid;
+                const config = SkillSet[skillId];
+                
+                const text = config ? `${config.name} Lv.${skill.lv} CD:${skill.cd}s ${config.info}` : `未知技能 CD:${skill.cd}s`;
+                
+                const noteNode = line.getChildByName("note");
+                const label = noteNode?.getComponent(Label) || noteNode?.getComponentInChildren(Label) || line.getComponentInChildren(Label);
+                if (label) {
+                    label.string = text;
+                }
+                
+                this.updateLineTypeIcon(line, config?.IType);
+            } else {
+                line.active = false;
+            }
+        }
+    }
+
+    private updateLineTypeIcon(line: Node, iType?: IType) {
+        const meleeNode = line.getChildByName("Melee");
+        const remoteNode = line.getChildByName("remote");
+        const supportNode = line.getChildByName("support");
+        if (meleeNode) meleeNode.active = iType === IType.Melee;
+        if (remoteNode) remoteNode.active = iType === IType.remote;
+        if (supportNode) supportNode.active = iType === IType.support;
+    }
 
     /** 视图对象通过 ecs.Entity.remove(ModuleViewComp) 删除组件是触发组件处理自定义释放逻辑 */
     reset() {