feat: 接入激励视频

软著源代码/07-PK出题选关.md

@@ -0,0 +1,743 @@
+# 梗中作乐 V1.0 - 源代码文档（第 7 部分）
+
+软件名称：梗中作乐
+版本号：V1.0
+
+---
+
+## 第 7 部分：PK 出题选关页面
+
+本部分展示好友 PK 挑战发起方的「出题选关」页面：用户从已通关关卡里选 6 关，命名后调用后端创建分享码。
+
+### 7.1 出题选关页 (assets/prefabs/PageWriteLevels.ts)
+
+```typescript
+import { _decorator, Node, Button, Sprite, Label, Toggle, ScrollView, EditBox, instantiate, UITransform, Vec2, EventTouch, EffectAsset, Prefab } from 'cc';
+import { BaseView } from 'db://assets/scripts/core/BaseView';
+import { ViewManager } from 'db://assets/scripts/core/ViewManager';
+import { CommonModal } from 'db://assets/prefabs/CommonModal';
+import { CompletedLevelsManager } from 'db://assets/scripts/utils/CompletedLevelsManager';
+import { ToastManager } from 'db://assets/scripts/utils/ToastManager';
+import { ShareManager } from 'db://assets/scripts/utils/ShareManager';
+import { StorageManager } from 'db://assets/scripts/utils/StorageManager';
+import { WxSDK, getUserProfile } from 'db://assets/scripts/utils/WxSDK';
+import { AuthManager } from 'db://assets/scripts/utils/AuthManager';
+import { API_ENDPOINTS, API_TIMEOUT } from 'db://assets/scripts/config/ApiConfig';
+import { HttpUtil } from 'db://assets/scripts/utils/HttpUtil';
+import { ApiEnvelope, CompletedLevel } from 'db://assets/scripts/types/ApiTypes';
+import { applyRoundedCorner } from 'db://assets/scripts/utils/roundedMaterial.utils';
+import { AudioManager } from 'db://assets/scripts/utils/AudioManager';
+const { ccclass, property } = _decorator;
+
+/**
+ * 布局配置
+ *   view (ScrollView 的可视窗口) 宽 900，高 1100
+ *   关卡 item 固定两列，纵向滚动
+ *
+ * item 的实际显示尺寸从 ListTpl 的 UITransform * scale 派生，
+ * 避免代码里再维护一套和 prefab 脱节的宽高。
+ */
+const LAYOUT_CONFIG = {
+    COLS: 2,
+    SPACING_X: 36,
+    SPACING_Y: 48,
+    EDGE_PADDING_Y: 32,
+    CENTER_ROWS: 2,
+    VIEW_WIDTH: 900,
+    VIEW_HEIGHT: 1300,
+    LIST_BOTTOM_GAP_TO_TITLE: 54,
+};
+
+/** 必须选择的关卡数量 */
+const MAX_SELECTION = 6;
+
+@ccclass('PageWriteLevels')
+export class PageWriteLevels extends BaseView {
+    @property({ type: Node, tooltip: '返回按钮' })
+    backBtn: Node | null = null;
+
+    @property({ type: Node, tooltip: 'ScrollView可视区域节点' })
+    scrollView: Node | null = null;
+
+    @property({ type: Node, tooltip: '列表content节点' })
+    listContent: Node | null = null;
+
+    @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;
+
+    @property({ type: Node, tooltip: '挑战数据按钮节点' })
+    dataBtn: Node | null = null;
+
+    @property({ type: EffectAsset, tooltip: '关卡封面圆角材质 EffectAsset' })
+    roundedSpriteEffect: EffectAsset | null = null;
+
+    @property({ type: Prefab, tooltip: '通用弹窗预制体' })
+    commonModalPrefab: Prefab | null = null;
+
+    @property({ tooltip: '关卡封面圆角半径比例（相对于短边，0-0.5）' })
+    coverCornerRadius: number = 0.1;
+
+    private _selectedIndices: Set<number> = new Set();
+    private _levels: CompletedLevel[] = [];
+    private _levelCount: number = 0;
+    private _itemNodes: Node[] = [];
+    private _scrollViewComp: ScrollView | null = null;
+    private _levelListLoadToken: number = 0;
+
+    /** 缓存 view 节点的 UITransform，避免每次 _updateContentSize 重复查找 */
+    private _viewTransform: UITransform | null = null;
+
+    /** 防止重复提交 */
+    private _isSubmitting: boolean = false;
+
+    onViewLoad(): void {
+        console.log('[PageWriteLevels] onViewLoad');
+        this._initButtons();
+        this._initScrollView();
+        this._resizeScrollViewport();
+        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);
+        }
+        if (this.completeBtn) {
+            this.completeBtn.on(Button.EventType.CLICK, this._onCompleteClick, this);
+        }
+        if (this.dataBtn) {
+            this.dataBtn.on(Button.EventType.CLICK, this._onDataClick, this);
+        }
+    }
+
+    private _initScrollView(): void {
+        if (this.scrollView) {
+            this._scrollViewComp = this.scrollView.getComponent(ScrollView);
+
+            if (this._scrollViewComp) {
+                this._scrollViewComp.horizontal = false;
+                this._scrollViewComp.vertical = true;
+                this._scrollViewComp.inertia = true;
+            }
+
+            // 缓存 view 的 UITransform
+            const viewNode = this.scrollView.getChildByName('view');
+            if (viewNode) {
+                this._viewTransform = viewNode.getComponent(UITransform);
+            }
+        }
+
+        // content anchor 设为 (0, 1) 左上角，方便位置计算且符合 ScrollView 标准用法
+        if (this.listContent) {
+            const contentTransform = this.listContent.getComponent(UITransform);
+            if (contentTransform) {
+                contentTransform.setAnchorPoint(0, 1);
+            }
+        }
+    }
+
+    onViewShow(): void {
+        console.log('[PageWriteLevels] onViewShow');
+        this._resizeScrollViewport();
+        this._updateContentSize();
+        void this._initLevelList();
+    }
+
+    private _resizeScrollViewport(): void {
+        if (!this.scrollView || !this._viewTransform) {
+            return;
+        }
+
+        const scrollTransform = this.scrollView.getComponent(UITransform);
+        const scrollWidget = this.scrollView.getComponent('cc.Widget') as any;
+        const viewWidget = this._viewTransform.node.getComponent('cc.Widget') as any;
+
+        if (!scrollTransform) {
+            return;
+        }
+
+        scrollWidget?.updateAlignment?.();
+        viewWidget?.updateAlignment?.();
+
+        this._viewTransform.setContentSize(
+            scrollTransform.contentSize.width,
+            scrollTransform.contentSize.height,
+        );
+    }
+
+    private async _initLevelList(): Promise<void> {
+        const loadToken = ++this._levelListLoadToken;
+        const selectedLevelIds = this._getSelectedLevelIdSet();
+
+        // 拉取当前用户所有已通关关卡
+        const levels = await CompletedLevelsManager.instance.fetch(true);
+        if (loadToken !== this._levelListLoadToken) {
+            return;
+        }
+
+        if (levels === null) {
+            console.warn('[PageWriteLevels] 获取已通关关卡失败');
+            ToastManager.instance.show('获取关卡列表失败，请稍后重试');
+            return;
+        }
+
+        this._clearList();
+        this._levels = levels;
+        this._levelCount = this._levels.length;
+        this._restoreSelectedIndices(selectedLevelIds);
+        console.log('[PageWriteLevels] 已通关关卡总数:', this._levelCount);
+
+        if (this._levelCount === 0) {
+            console.warn('[PageWriteLevels] 用户尚未通关任何关卡');
+            ToastManager.instance.show('还没有已通关的关卡，快去玩几关吧');
+            this._updateContentSize();
+            this._updateSelectionUI();
+            return;
+        }
+
+        this._updateContentSize();
+        this._createItems();
+
+        if (this._scrollViewComp) {
+            this._scrollViewComp.scrollToTop(0);
+        }
+    }
+
+    private _getSelectedLevelIdSet(): Set<string> {
+        const selectedLevelIds = new Set<string>();
+        for (const index of this._selectedIndices) {
+            const level = this._levels[index] ?? null;
+            if (level) {
+                selectedLevelIds.add(level.id);
+            }
+        }
+        return selectedLevelIds;
+    }
+
+    private _restoreSelectedIndices(selectedLevelIds: Set<string>): void {
+        if (selectedLevelIds.size === 0) {
+            return;
+        }
+
+        for (let index = 0; index < this._levels.length; index++) {
+            if (selectedLevelIds.has(this._levels[index].id)) {
+                this._selectedIndices.add(index);
+            }
+        }
+    }
+
+    private _clearList(): void {
+        for (const node of this._itemNodes) {
+            if (node && node.isValid) {
+                node.destroy();
+            }
+        }
+        this._levels = [];
+        this._itemNodes = [];
+        this._selectedIndices.clear();
+    }
+
+    private _getViewSize(): { width: number, height: number } {
+        return {
+            width: this._viewTransform?.contentSize.width ?? LAYOUT_CONFIG.VIEW_WIDTH,
+            height: this._viewTransform?.contentSize.height ?? LAYOUT_CONFIG.VIEW_HEIGHT,
+        };
+    }
+
+    private _getItemDisplaySize(): { width: number, height: number } {
+        if (!this.listTemplate) {
+            return { width: 0, height: 0 };
+        }
+
+        const itemTransform = this.listTemplate.getComponent(UITransform);
+        if (!itemTransform) {
+            return { width: 0, height: 0 };
+        }
+
+        return {
+            width: itemTransform.contentSize.width * Math.abs(this.listTemplate.scale.x),
+            height: itemTransform.contentSize.height * Math.abs(this.listTemplate.scale.y),
+        };
+    }
+
+    private _getRowCount(): number {
+        return Math.ceil(this._levelCount / LAYOUT_CONFIG.COLS);
+    }
+
+    private _getHorizontalPadding(itemWidth: number): number {
+        const viewWidth = this._getViewSize().width;
+        const gridWidth = LAYOUT_CONFIG.COLS * itemWidth + (LAYOUT_CONFIG.COLS - 1) * LAYOUT_CONFIG.SPACING_X;
+        return Math.max(0, (viewWidth - gridWidth) / 2);
+    }
+
+    private _getVerticalPadding(rowCount: number, itemHeight: number): number {
+        const viewHeight = this._getViewSize().height;
+        const totalGridHeight = rowCount * itemHeight + Math.max(0, rowCount - 1) * LAYOUT_CONFIG.SPACING_Y;
+
+        if (rowCount <= LAYOUT_CONFIG.CENTER_ROWS) {
+            return Math.max(LAYOUT_CONFIG.EDGE_PADDING_Y, (viewHeight - totalGridHeight) / 2);
+        }
+
+        return LAYOUT_CONFIG.EDGE_PADDING_Y;
+    }
+
+    private _updateContentSize(): void {
+        if (!this.listContent) return;
+
+        const contentTransform = this.listContent.getComponent(UITransform);
+        if (!contentTransform) return;
+
+        const { width: viewWidth, height: viewHeight } = this._getViewSize();
+        const { width: itemWidth, height: itemHeight } = this._getItemDisplaySize();
+        const rowCount = this._getRowCount();
+        const paddingY = this._getVerticalPadding(rowCount, itemHeight);
+        const gridHeight = rowCount > 0
+            ? rowCount * itemHeight + (rowCount - 1) * LAYOUT_CONFIG.SPACING_Y
+            : 0;
+        const contentHeight = Math.max(viewHeight, gridHeight + paddingY * 2);
+
+        contentTransform.setContentSize(viewWidth, contentHeight);
+
+        // content anchor=(0,1)，需要贴到 view 左上角，供纵向列表按左上原点排布。
+        if (this._viewTransform) {
+            this.listContent.setPosition(-viewWidth / 2, 0, 0);
+        }
+    }
+
+    private _createItems(): void {
+        if (!this.listTemplate || !this.listContent) return;
+
+        for (let i = 0; i < this._levelCount; i++) {
+            const itemNode = this._createItem(i);
+            if (itemNode) {
+                this.listContent.addChild(itemNode);
+                this._itemNodes.push(itemNode);
+                this._loadAndRefreshCover(itemNode, i);
+            }
+        }
+    }
+
+    private _createItem(index: number): Node | null {
+        if (!this.listTemplate) return null;
+
+        const item = instantiate(this.listTemplate);
+        item.active = true;
+        item.name = `item_${index}`;
+
+        const pos = this._calculateItemPosition(index);
+        item.setPosition(pos.x, pos.y, 0);
+
+        // 设置默认名称和选中状态（封面由 _loadAndRefreshCover 异步填充）
+        this._initItemState(item, index);
+
+        // 禁用 Button 组件，防止它拦截触摸事件导致 ScrollView 无法滑动
+        const button = item.getComponent(Button);
+        if (button) {
+            button.enabled = false;
+        }
+
+        this._setupItemClick(item, index);
+
+        return item;
+    }
+
+    private _calculateItemPosition(index: number): { x: number, y: number } {
+        const { width: itemWidth, height: itemHeight } = this._getItemDisplaySize();
+        const rowCount = this._getRowCount();
+        const col = index % LAYOUT_CONFIG.COLS;
+        const row = Math.floor(index / LAYOUT_CONFIG.COLS);
+
+        const paddingLeft = this._getHorizontalPadding(itemWidth);
+        const paddingTop = this._getVerticalPadding(rowCount, itemHeight);
+
+        const x = paddingLeft
+            + col * (itemWidth + LAYOUT_CONFIG.SPACING_X)
+            + itemWidth / 2;
+
+        const y = -(paddingTop
+            + row * (itemHeight + LAYOUT_CONFIG.SPACING_Y)
+            + itemHeight / 2);
+
+        return { x, y };
+    }
+
+    /**
+     * 初始化 item 的默认名称和选中状态（不设置封面，由异步加载负责）
+     */
+    private _initItemState(item: Node, index: number): void {
+        const level = this._levels[index] ?? null;
+        const levelName = item.getChildByName('LevelName');
+        if (levelName) {
+            const label = levelName.getComponent(Label);
+            if (label) {
+                const answerText = level?.answer?.trim();
+                label.string = answerText || (level ? `第${level.level}关` : `第${index + 1}关`);
+            }
+        }
+
+        const isSelected = item.getChildByName('IsSelected');
+        if (isSelected) {
+            const toggle = isSelected.getComponent(Toggle);
+            if (toggle) {
+                toggle.isChecked = this._selectedIndices.has(index);
+                // 禁用 Toggle 交互，仅作为视觉指示器，选中逻辑由 item Button 统一处理
+                toggle.interactable = false;
+            }
+            const checkmark = isSelected.getChildByName('Checkmark');
+            if (checkmark) {
+                checkmark.active = this._selectedIndices.has(index);
+            }
+        }
+    }
+
+    /**
+     * 异步加载关卡封面图并填充到 item
+     */
+    private async _loadAndRefreshCover(item: Node, index: number): Promise<void> {
+        const level = this._levels[index] ?? null;
+        if (!level || !item.isValid) return;
+
+        const spriteFrame = await CompletedLevelsManager.instance.loadImage(level.image1Url);
+        if (!spriteFrame || !item.isValid) return;
+
+        const levelCover = item.getChildByName('LevelCover');
+        if (levelCover) {
+            const sprite = levelCover.getComponent(Sprite);
+            if (sprite) {
+                sprite.spriteFrame = spriteFrame;
+                this._applyCoverRoundedCorner(sprite);
+            }
+        }
+    }
+
+    private _applyCoverRoundedCorner(sprite: Sprite): void {
+        if (!this.roundedSpriteEffect) {
+            return;
+        }
+
+        const uiTransform = sprite.node.getComponent(UITransform);
+        if (!uiTransform) {
+            return;
+        }
+
+        applyRoundedCorner(
+            sprite,
+            this.roundedSpriteEffect,
+            uiTransform.width,
+            uiTransform.height,
+            this.coverCornerRadius
+        );
+    }
+
+    private _setupItemClick(item: Node, index: number): void {
+        // 用触摸事件代替 Button，区分点击和滑动：
+        // 短距离松手 = 点击（切换选中），长距离 = 滑动（交给 ScrollView）
+        let touchStartPos: Vec2 | null = null;
+
+        item.on(Node.EventType.TOUCH_START, (event: EventTouch) => {
+            touchStartPos = event.getUILocation();
+        }, this);
+
+        item.on(Node.EventType.TOUCH_END, (event: EventTouch) => {
+            if (!touchStartPos) return;
+            const endPos = event.getUILocation();
+            const dx = endPos.x - touchStartPos.x;
+            const dy = endPos.y - touchStartPos.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            touchStartPos = null;
+
+            // 滑动距离小于阈值才算点击
+            if (distance < 20) {
+                const isCurrentlySelected = this._selectedIndices.has(index);
+                this._onItemToggle(index, !isCurrentlySelected);
+            }
+        }, this);
+
+        item.on(Node.EventType.TOUCH_CANCEL, () => {
+            touchStartPos = null;
+        }, this);
+    }
+
+    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);
+        }
+
+        AudioManager.instance.playButtonClick();
+
+        console.log('[PageWriteLevels] item切换选中:', index, selected, '当前已选:', this._selectedIndices.size);
+
+        const item = this._itemNodes[index];
+        if (item) {
+            const isSelected = item.getChildByName('IsSelected');
+            if (isSelected) {
+                const toggle = isSelected.getComponent(Toggle);
+                if (toggle) {
+                    toggle.isChecked = selected;
+                }
+                const checkmark = isSelected.getChildByName('Checkmark');
+                if (checkmark) {
+                    checkmark.active = selected;
+                }
+            }
+        }
+
+        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}关`;
+                }
+            }
+        }
+
+        // 预览与分享数量不足时也要允许点击，统一弹出提示弹窗。
+        if (this.completeBtn) {
+            const btn = this.completeBtn.getComponent(Button);
+            if (btn) {
+                btn.interactable = true;
+            }
+        }
+        if (this.previewBtn) {
+            const btn = this.previewBtn.getComponent(Button);
+            if (btn) {
+                btn.interactable = true;
+            }
+        }
+    }
+
+    private _onBackClick(): void {
+        AudioManager.instance.playButtonClick();
+        console.log('[PageWriteLevels] 返回按钮点击');
+        ViewManager.instance.back();
+    }
+
+    private _onDataClick(): void {
+        AudioManager.instance.playButtonClick();
+        ViewManager.instance.open('PagePKData');
+    }
+
+    /**
+     * 校验是否已选满关卡，未满则弹出统一提示弹窗
+     * @returns true 表示校验通过
+     */
+    private _validateSelection(): boolean {
+        if (this._selectedIndices.size < MAX_SELECTION) {
+            this._showSelectionRequiredModal();
+            return false;
+        }
+        return true;
+    }
+
+    private _showSelectionRequiredModal(): void {
+        if (!this.commonModalPrefab) {
+            console.warn('[PageWriteLevels] commonModalPrefab 未设置，回退为 Toast 提示');
+            ToastManager.instance.show(`请选择${MAX_SELECTION}个关卡后再预览或分享`);
+            return;
+        }
+
+        CommonModal.show(this.commonModalPrefab, {
+            title: '提示',
+            content: `要选择${MAX_SELECTION}个关卡才能分享和预览`,
+            buttonConfirm: '知道了',
+        });
+    }
+
+    private _onPreviewClick(): void {
+        AudioManager.instance.playButtonClick();
+        if (!this._validateSelection()) return;
+        const shareTitle = this.shareTitleEditBox?.getComponent(EditBox)?.string?.trim() || '';
+        ViewManager.instance.open('PagePreviewLevels', {
+            params: {
+                selectedIndices: Array.from(this._selectedIndices),
+                shareTitle: shareTitle
+            }
+        });
+    }
+
+    private async _onCompleteClick(): Promise<void> {
+        AudioManager.instance.playButtonClick();
+        if (!this._validateSelection()) return;
+
+        const shareTitle = this.shareTitleEditBox?.getComponent(EditBox)?.string?.trim() || '';
+        if (!shareTitle) {
+            ToastManager.instance.show('请输入分享标题');
+            return;
+        }
+
+        if (this._isSubmitting) return;
+        this._isSubmitting = true;
+
+        try {
+            const levelIds = this._getSelectedLevelIds();
+            if (levelIds.length !== MAX_SELECTION) {
+                ToastManager.instance.show('获取关卡数据失败，请重试');
+                return;
+            }
+
+            const shareCode = await ShareManager.instance.createShare(shareTitle, levelIds);
+            if (!shareCode) {
+                ToastManager.instance.show('创建分享失败，请重试');
+                return;
+            }
+
+            console.log('[PageWriteLevels] 创建分享成功, code:', shareCode);
+
+            // 获取用户头像昵称并上传
+            await this._uploadUserInfo();
+
+            ShareManager.instance.triggerWxShare(shareTitle, shareCode);
+            ToastManager.instance.show('分享创建成功！');
+        } catch (err) {
+            console.error('[PageWriteLevels] 完成按钮异常:', err);
+            ToastManager.instance.show('操作失败，请重试');
+        } finally {
+            this._isSubmitting = false;
+        }
+    }
+
+    /**
+     * 将选中的关卡索引转换为关卡 ID 数组
+     */
+    private _getSelectedLevelIds(): string[] {
+        const ids: string[] = [];
+        const sortedIndices = Array.from(this._selectedIndices).sort((a, b) => a - b);
+        for (const index of sortedIndices) {
+            const level = this._levels[index] ?? null;
+            if (level) {
+                ids.push(level.id);
+            }
+        }
+        return ids;
+    }
+
+    /**
+     * 获取用户头像昵称并上传到服务端
+     */
+    private async _uploadUserInfo(): Promise<void> {
+        // 先检查本地缓存
+        const cachedUserInfo = StorageManager.getUserInfo();
+        if (cachedUserInfo) {
+            console.log('[PageWriteLevels] 使用缓存的用户信息');
+            return;
+        }
+
+        if (!WxSDK.isWechat()) {
+            console.log('[PageWriteLevels] 非微信环境，跳过获取用户信息');
+            return;
+        }
+
+        // 获取当前登录用户的 ID
+        const userId = AuthManager.instance.userId;
+        if (!userId) {
+            console.warn('[PageWriteLevels] 用户未登录，跳过获取用户信息');
+            return;
+        }
+
+        try {
+            const userInfo = await getUserProfile();
+
+            // 本地缓存
+            StorageManager.setUserInfo(userInfo);
+
+            // 上传到服务端
+            const response = await HttpUtil.post<ApiEnvelope<unknown>>(
+                API_ENDPOINTS.USER_INFO,
+                {
+                    userId: userId,
+                    avatarUrl: userInfo.avatarUrl,
+                    nickName: userInfo.nickName
+                },
+                API_TIMEOUT.DEFAULT
+            );
+
+            if (response.success) {
+                console.log('[PageWriteLevels] 用户信息上传成功');
+            } else {
+                console.warn('[PageWriteLevels] 用户信息上传失败:', response.message);
+            }
+        } catch (err) {
+            console.warn('[PageWriteLevels] 获取用户信息失败:', err);
+            // 不阻断主流程
+        }
+    }
+
+    onViewHide(): void {
+        console.log('[PageWriteLevels] onViewHide');
+    }
+
+    onViewDestroy(): void {
+        console.log('[PageWriteLevels] onViewDestroy');
+        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.completeBtn) {
+            this.completeBtn.off(Button.EventType.CLICK, this._onCompleteClick, this);
+        }
+        if (this.dataBtn) {
+            this.dataBtn.off(Button.EventType.CLICK, this._onDataClick, this);
+        }
+        this._clearList();
+    }
+}
+```