perf: 接入预览页面

This commit is contained in:
richarjiang
2026-04-06 15:43:48 +08:00
parent de674148b9
commit c7f52ab032
8 changed files with 3271 additions and 21 deletions

View File

@@ -1,7 +1,8 @@
import { _decorator, Node, Button, Sprite, Label, Toggle, ScrollView, instantiate, UITransform, Vec2, EventTouch } from 'cc';
import { _decorator, Node, Button, Sprite, Label, Toggle, ScrollView, EditBox, instantiate, UITransform, Vec2, EventTouch } from 'cc';
import { BaseView } from 'db://assets/scripts/core/BaseView';
import { ViewManager } from 'db://assets/scripts/core/ViewManager';
import { LevelDataManager } from 'db://assets/scripts/utils/LevelDataManager';
import { ToastManager } from 'db://assets/scripts/utils/ToastManager';
const { ccclass, property } = _decorator;
/**
@@ -26,6 +27,9 @@ const LAYOUT_CONFIG = {
VIEW_HEIGHT: 1300,
};
/** 必须选择的关卡数量 */
const MAX_SELECTION = 6;
const PAGE_CONFIG = {
/** 滑动距离超过页宽的这个比例就翻页 */
SWIPE_THRESHOLD: 0.2,
@@ -49,6 +53,18 @@ export class PageWriteLevels extends BaseView {
@property({ type: Node, tooltip: '列表项模板' })
listTemplate: Node | null = null;
@property({ type: Node, tooltip: '已选关卡提示Label节点' })
selectedLabel: Node | null = null;
@property({ type: Node, tooltip: '完成按钮节点' })
completeBtn: Node | null = null;
@property({ type: Node, tooltip: '预览按钮节点' })
previewBtn: Node | null = null;
@property({ type: Node, tooltip: '分享标题输入框节点' })
shareTitleEditBox: Node | null = null;
private _selectedIndices: Set<number> = new Set();
private _currentPage: number = 0;
private _totalPages: number = 0;
@@ -66,12 +82,16 @@ export class PageWriteLevels extends BaseView {
console.log('[PageWriteLevels] onViewLoad');
this._initButtons();
this._initScrollView();
this._updateSelectionUI();
}
private _initButtons(): void {
if (this.backBtn) {
this.backBtn.on(Button.EventType.CLICK, this._onBackClick, this);
}
if (this.previewBtn) {
this.previewBtn.on(Button.EventType.CLICK, this._onPreviewClick, this);
}
}
private _initScrollView(): void {
@@ -291,16 +311,7 @@ export class PageWriteLevels extends BaseView {
}
private _setupItemClick(item: Node, index: number): void {
const isSelected = item.getChildByName('IsSelected');
if (isSelected) {
const toggle = isSelected.getComponent(Toggle);
if (toggle) {
toggle.node.on('toggle', () => {
this._onItemToggle(index, toggle.isChecked);
}, this);
}
}
// 只用 Button click 统一处理选中/取消,避免 Toggle 事件与 Button 事件同时触发导致双重调用
const button = item.getComponent(Button);
if (button) {
button.node.on(Button.EventType.CLICK, () => {
@@ -325,13 +336,34 @@ export class PageWriteLevels extends BaseView {
}
private _onItemToggle(index: number, selected: boolean): void {
// 如果要选中但已达上限,阻止选中
if (selected && this._selectedIndices.size >= MAX_SELECTION) {
// 恢复 toggle 的视觉状态为未选中
const item = this._itemNodes[index];
if (item) {
const isSelected = item.getChildByName('IsSelected');
if (isSelected) {
const toggle = isSelected.getComponent(Toggle);
if (toggle) {
toggle.isChecked = false;
}
const checkmark = isSelected.getChildByName('Checkmark');
if (checkmark) {
checkmark.active = false;
}
}
}
console.log(`[PageWriteLevels] 已达最大选择数量 ${MAX_SELECTION},无法继续选择`);
return;
}
if (selected) {
this._selectedIndices.add(index);
} else {
this._selectedIndices.delete(index);
}
console.log('[PageWriteLevels] item切换选中:', index, selected);
console.log('[PageWriteLevels] item切换选中:', index, selected, '当前已选:', this._selectedIndices.size);
const item = this._itemNodes[index];
if (item) {
@@ -347,6 +379,48 @@ export class PageWriteLevels extends BaseView {
}
}
}
this._updateSelectionUI();
}
/**
* 根据当前选中数量更新 SelectedLabel 文本和按钮可用状态。
* - 未选择任何关卡时:显示 "请选择6关"
* - 已选但不足6关时显示 "已选 x 关,还差 y 关"
* - 恰好选满6关时显示 "已选满6关",启用按钮
*/
private _updateSelectionUI(): void {
const count = this._selectedIndices.size;
const remaining = MAX_SELECTION - count;
const isFull = remaining <= 0;
// 更新 SelectedLabel 文本
if (this.selectedLabel) {
const label = this.selectedLabel.getComponent(Label);
if (label) {
if (count === 0) {
label.string = `请选择${MAX_SELECTION}`;
} else if (isFull) {
label.string = `已选满${MAX_SELECTION}`;
} else {
label.string = `已选${count}关,还差${remaining}`;
}
}
}
// 更新 CompleteButton 和 PreviewButton 的可用状态
if (this.completeBtn) {
const btn = this.completeBtn.getComponent(Button);
if (btn) {
btn.interactable = isFull;
}
}
if (this.previewBtn) {
const btn = this.previewBtn.getComponent(Button);
if (btn) {
btn.interactable = true;
}
}
}
private _onBackClick(): void {
@@ -354,6 +428,22 @@ export class PageWriteLevels extends BaseView {
ViewManager.instance.back();
}
private _onPreviewClick(): void {
if (this._selectedIndices.size < MAX_SELECTION) {
const remaining = MAX_SELECTION - this._selectedIndices.size;
ToastManager.instance.show(`还需选择${remaining}个关卡`);
return;
}
const shareTitle = this.shareTitleEditBox?.getComponent(EditBox)?.string?.trim() || '';
console.log('[PageWriteLevels] 预览按钮点击,标题:', shareTitle, '已选关卡:', Array.from(this._selectedIndices));
ViewManager.instance.open('PagePreviewLevels', {
params: {
selectedIndices: Array.from(this._selectedIndices),
shareTitle: shareTitle
}
});
}
onViewHide(): void {
console.log('[PageWriteLevels] onViewHide');
}
@@ -363,6 +453,9 @@ export class PageWriteLevels extends BaseView {
if (this.backBtn) {
this.backBtn.off(Button.EventType.CLICK, this._onBackClick, this);
}
if (this.previewBtn) {
this.previewBtn.off(Button.EventType.CLICK, this._onPreviewClick, this);
}
if (this.scrollView) {
this.scrollView.off(Node.EventType.TOUCH_START, this._onTouchStart, this);
this.scrollView.off(Node.EventType.TOUCH_END, this._onTouchEnd, this);