perf: 优化布局

assets/prefabs/PageWriteLevels.prefab

@@ -3470,8 +3470,8 @@
     },
     "_lpos": {
       "__type__": "cc.Vec3",
-      "x": -10,
+      "x": -450,
-      "y": 510.277,
+      "y": 0,
       "z": 0
     },
     "_lrot": {
@@ -3516,7 +3516,7 @@
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
-      "x": 0.5,
+      "x": 0,
       "y": 1
     },
     "_id": ""
@@ -3736,8 +3736,8 @@
     "brake": 0.75,
     "elastic": true,
     "inertia": true,
-    "horizontal": true,
+    "horizontal": false,
-    "vertical": false,
+    "vertical": true,
     "cancelInnerEvents": true,
     "scrollEvents": [],
     "_content": {
@@ -3813,9 +3813,9 @@
     },
     "_lscale": {
       "__type__": "cc.Vec3",
-      "x": 0.75,
+      "x": 0.68,
-      "y": 0.75,
+      "y": 0.68,
-      "z": 0.693
+      "z": 0.68
     },
     "_mobility": 0,
     "_layer": 1073741824,
@@ -4600,6 +4600,11 @@
     "dataBtn": {
       "__id__": 34
     },
+    "roundedSpriteEffect": {
+      "__uuid__": "f0080a34-1786-4547-8d81-d89cc517b63e",
+      "__expectedType__": "cc.EffectAsset"
+    },
+    "coverCornerRadius": 0.1,
     "_id": ""
   },
   {

assets/prefabs/PageWriteLevels.ts

@@ -1,4 +1,4 @@
-import { _decorator, Node, Button, Sprite, Label, Toggle, ScrollView, EditBox, instantiate, UITransform, Vec2, EventTouch } from 'cc';
+import { _decorator, Node, Button, Sprite, Label, Toggle, ScrollView, EditBox, instantiate, UITransform, Vec2, EventTouch, EffectAsset } from 'cc';
 import { BaseView } from 'db://assets/scripts/core/BaseView';
 import { ViewManager } from 'db://assets/scripts/core/ViewManager';
 import { CompletedLevelsManager } from 'db://assets/scripts/utils/CompletedLevelsManager';
@@ -9,25 +9,24 @@ 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 } from 'db://assets/scripts/types/ApiTypes';
+import { ApiEnvelope, CompletedLevel } from 'db://assets/scripts/types/ApiTypes';
+import { applyRoundedCorner } from 'db://assets/scripts/utils/roundedMaterial.utils';
 const { ccclass, property } = _decorator;
 
 /**
  * 布局配置
- *   view (ScrollView 的可视窗口) 宽 900，高 1000，anchor (0.5, 1) 顶部中点
+ *   view (ScrollView 的可视窗口) 宽 900，高 1000
- *   ListTpl (item) 宽 300，高 400
+ *   关卡 item 固定两列，纵向滚动
  *
- * 每页 2 行 × 2 列 = 4 个关卡
+ * item 的实际显示尺寸从 ListTpl 的 UITransform * scale 派生，
- * PADDING 不再手写，由 VIEW / ITEM / SPACING 自动派生（见 _getHorizontalPadding / _getVerticalPadding），
+ * 避免代码里再维护一套和 prefab 脱节的宽高。
- * 保证 item 网格在 view 内始终居中。改 SPACING 时不用再算 PADDING。
  */
 const LAYOUT_CONFIG = {
     COLS: 2,
-    ROWS: 2,
+    SPACING_X: 36,
-    ITEM_WIDTH: 300,
+    SPACING_Y: 48,
-    ITEM_HEIGHT: 400,
+    EDGE_PADDING_Y: 32,
-    SPACING_X: 160,
+    CENTER_ROWS: 2,
-    SPACING_Y: 180,
     VIEW_WIDTH: 900,
     VIEW_HEIGHT: 1000,
 };
@@ -35,15 +34,6 @@ const LAYOUT_CONFIG = {
 /** 必须选择的关卡数量 */
 const MAX_SELECTION = 6;
 
-const PAGE_CONFIG = {
-    /** 滑动距离超过页宽的这个比例就翻页 */
-    SWIPE_THRESHOLD: 0.2,
-    /** 快速滑动速度阈值（px/s），超过此值即使距离不够也翻页 */
-    VELOCITY_THRESHOLD: 500,
-    /** 翻页动画时长（秒） */
-    SNAP_DURATION: 0.3,
-};
-
 @ccclass('PageWriteLevels')
 export class PageWriteLevels extends BaseView {
     @property({ type: Node, tooltip: '返回按钮' })
@@ -73,15 +63,17 @@ export class PageWriteLevels extends BaseView {
     @property({ type: Node, tooltip: '挑战数据按钮节点' })
     dataBtn: Node | null = null;
 
+    @property({ type: EffectAsset, tooltip: '关卡封面圆角材质 EffectAsset' })
+    roundedSpriteEffect: EffectAsset | null = null;
+
+    @property({ tooltip: '关卡封面圆角半径比例（相对于短边，0-0.5）' })
+    coverCornerRadius: number = 0.1;
+
     private _selectedIndices: Set<number> = new Set();
-    private _currentPage: number = 0;
+    private _levels: CompletedLevel[] = [];
-    private _totalPages: number = 0;
     private _levelCount: number = 0;
-    private readonly ITEMS_PER_PAGE = LAYOUT_CONFIG.ROWS * LAYOUT_CONFIG.COLS;
     private _itemNodes: Node[] = [];
     private _scrollViewComp: ScrollView | null = null;
-    private _touchStartOffsetX: number = 0;
-    private _touchStartTime: number = 0;
 
     /** 缓存 view 节点的 UITransform，避免每次 _updateContentSize 重复查找 */
     private _viewTransform: UITransform | null = null;
@@ -116,13 +108,11 @@ export class PageWriteLevels extends BaseView {
             this._scrollViewComp = this.scrollView.getComponent(ScrollView);
 
             if (this._scrollViewComp) {
-                this._scrollViewComp.inertia = false;
+                this._scrollViewComp.horizontal = false;
+                this._scrollViewComp.vertical = true;
+                this._scrollViewComp.inertia = true;
             }
 
-            this.scrollView.on(Node.EventType.TOUCH_START, this._onTouchStart, this);
-            this.scrollView.on(Node.EventType.TOUCH_END, this._onTouchEnd, this);
-            this.scrollView.on(Node.EventType.TOUCH_CANCEL, this._onTouchEnd, this);
-
             // 缓存 view 的 UITransform
             const viewNode = this.scrollView.getChildByName('view');
             if (viewNode) {
@@ -139,38 +129,6 @@ export class PageWriteLevels extends BaseView {
         }
     }
 
-    private _onTouchStart(_event: EventTouch): void {
-        if (!this._scrollViewComp) return;
-        this._touchStartOffsetX = this._scrollViewComp.getScrollOffset().x;
-        this._touchStartTime = Date.now();
-    }
-
-    /**
-     * 触摸结束：根据滑动距离和速度决定翻页方向
-     */
-    private _onTouchEnd(_event: EventTouch): void {
-        if (!this._scrollViewComp || this._totalPages <= 1) return;
-
-        const currentOffsetX = this._scrollViewComp.getScrollOffset().x;
-        const deltaX = currentOffsetX - this._touchStartOffsetX;
-        const elapsedTime = (Date.now() - this._touchStartTime) / 1000;
-        const velocity = elapsedTime > 0 ? Math.abs(deltaX) / elapsedTime : 0;
-
-        let targetPage = this._currentPage;
-        const swipeDistance = Math.abs(deltaX);
-        const threshold = LAYOUT_CONFIG.VIEW_WIDTH * PAGE_CONFIG.SWIPE_THRESHOLD;
-
-        if (swipeDistance > threshold || velocity > PAGE_CONFIG.VELOCITY_THRESHOLD) {
-            if (deltaX < 0) {
-                targetPage = Math.min(this._currentPage + 1, this._totalPages - 1);
-            } else if (deltaX > 0) {
-                targetPage = Math.max(this._currentPage - 1, 0);
-            }
-        }
-
-        this._scrollToPage(targetPage);
-    }
-
     onViewShow(): void {
         console.log('[PageWriteLevels] onViewShow');
         // 仅首次初始化列表，从预览页返回时保留选中状态
@@ -190,7 +148,8 @@ export class PageWriteLevels extends BaseView {
             return;
         }
 
-        this._levelCount = levels.length;
+        this._levels = levels;
+        this._levelCount = this._levels.length;
         console.log('[PageWriteLevels] 已通关关卡总数:', this._levelCount);
 
         if (this._levelCount === 0) {
@@ -199,14 +158,11 @@ export class PageWriteLevels extends BaseView {
             return;
         }
 
-        this._totalPages = Math.ceil(this._levelCount / this.ITEMS_PER_PAGE);
-        console.log('[PageWriteLevels] 总页数:', this._totalPages);
-
         this._updateContentSize();
         this._createItems();
 
-        if (this._scrollViewComp && this._totalPages > 0) {
+        if (this._scrollViewComp) {
-            this._scrollToPage(0, false);
+            this._scrollViewComp.scrollToTop(0);
         }
     }
 
@@ -216,27 +172,53 @@ export class PageWriteLevels extends BaseView {
                 node.destroy();
             }
         }
+        this._levels = [];
         this._itemNodes = [];
         this._selectedIndices.clear();
     }
 
-    /**
+    private _getViewSize(): { width: number, height: number } {
-     * 水平 padding：让整行 item 在 view 宽度内居中
+        return {
-     * padding_left = (VIEW_WIDTH - cols*ITEM_WIDTH - (cols-1)*SPACING_X) / 2
+            width: this._viewTransform?.contentSize.width ?? LAYOUT_CONFIG.VIEW_WIDTH,
-     */
+            height: this._viewTransform?.contentSize.height ?? LAYOUT_CONFIG.VIEW_HEIGHT,
-    private _getHorizontalPadding(): number {
+        };
-        const { VIEW_WIDTH, COLS, ITEM_WIDTH, SPACING_X } = LAYOUT_CONFIG;
-        const gridWidth = COLS * ITEM_WIDTH + (COLS - 1) * SPACING_X;
-        return (VIEW_WIDTH - gridWidth) / 2;
     }
 
-    /**
+    private _getItemDisplaySize(): { width: number, height: number } {
-     * 垂直 padding：让整列 item 在 view 高度内居中
+        if (!this.listTemplate) {
-     */
+            return { width: 0, height: 0 };
-    private _getVerticalPadding(): number {
+        }
-        const { VIEW_HEIGHT, ROWS, ITEM_HEIGHT, SPACING_Y } = LAYOUT_CONFIG;
+
-        const gridHeight = ROWS * ITEM_HEIGHT + (ROWS - 1) * SPACING_Y;
+        const itemTransform = this.listTemplate.getComponent(UITransform);
-        return (VIEW_HEIGHT - gridHeight) / 2;
+        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 {
@@ -245,14 +227,19 @@ export class PageWriteLevels extends BaseView {
         const contentTransform = this.listContent.getComponent(UITransform);
         if (!contentTransform) return;
 
-        const totalWidth = this._totalPages * LAYOUT_CONFIG.VIEW_WIDTH;
+        const { width: viewWidth, height: viewHeight } = this._getViewSize();
-        contentTransform.setContentSize(totalWidth, LAYOUT_CONFIG.VIEW_HEIGHT);
+        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);
 
-        // content anchor=(0,1)，view anchor=(0.5,1)。
+        contentTransform.setContentSize(viewWidth, contentHeight);
-        // view 本地坐标系下，view 的左上角 = (-viewWidth/2, 0)。
+
-        // content 的 anchor 点(左上角)需要贴到 view 的左上角。
+        // content anchor=(0,1)，需要贴到 view 左上角，供纵向列表按左上原点排布。
         if (this._viewTransform) {
-            const viewWidth = this._viewTransform.contentSize.width;
             this.listContent.setPosition(-viewWidth / 2, 0, 0);
         }
     }
@@ -294,26 +281,22 @@ export class PageWriteLevels extends BaseView {
         return item;
     }
 
-    /**
-     * content anchor=(0,1)，原点在左上角，x 正向右，y 负向下
-     */
     private _calculateItemPosition(index: number): { x: number, y: number } {
-        const pageIndex = Math.floor(index / this.ITEMS_PER_PAGE);
+        const { width: itemWidth, height: itemHeight } = this._getItemDisplaySize();
-        const localIndex = index % this.ITEMS_PER_PAGE;
+        const rowCount = this._getRowCount();
-        const col = localIndex % LAYOUT_CONFIG.COLS;
+        const col = index % LAYOUT_CONFIG.COLS;
-        const row = Math.floor(localIndex / LAYOUT_CONFIG.COLS);
+        const row = Math.floor(index / LAYOUT_CONFIG.COLS);
 
-        const paddingLeft = this._getHorizontalPadding();
+        const paddingLeft = this._getHorizontalPadding(itemWidth);
-        const paddingTop = this._getVerticalPadding();
+        const paddingTop = this._getVerticalPadding(rowCount, itemHeight);
 
-        const x = pageIndex * LAYOUT_CONFIG.VIEW_WIDTH
+        const x = paddingLeft
-            + paddingLeft
+            + col * (itemWidth + LAYOUT_CONFIG.SPACING_X)
-            + col * (LAYOUT_CONFIG.ITEM_WIDTH + LAYOUT_CONFIG.SPACING_X)
+            + itemWidth / 2;
-            + LAYOUT_CONFIG.ITEM_WIDTH / 2;
 
         const y = -(paddingTop
-            + row * (LAYOUT_CONFIG.ITEM_HEIGHT + LAYOUT_CONFIG.SPACING_Y)
+            + row * (itemHeight + LAYOUT_CONFIG.SPACING_Y)
-            + LAYOUT_CONFIG.ITEM_HEIGHT / 2);
+            + itemHeight / 2);
 
         return { x, y };
     }
@@ -322,7 +305,7 @@ export class PageWriteLevels extends BaseView {
      * 初始化 item 的默认名称和选中状态（不设置封面，由异步加载负责）
      */
     private _initItemState(item: Node, index: number): void {
-        const level = CompletedLevelsManager.instance.getByIndex(index);
+        const level = this._levels[index] ?? null;
         const levelName = item.getChildByName('LevelName');
         if (levelName) {
             const label = levelName.getComponent(Label);
@@ -350,7 +333,7 @@ export class PageWriteLevels extends BaseView {
      * 异步加载关卡封面图并填充到 item
      */
     private async _loadAndRefreshCover(item: Node, index: number): Promise<void> {
-        const level = CompletedLevelsManager.instance.getByIndex(index);
+        const level = this._levels[index] ?? null;
         if (!level || !item.isValid) return;
 
         const spriteFrame = await CompletedLevelsManager.instance.loadImage(level.image1Url);
@@ -361,10 +344,30 @@ export class PageWriteLevels extends BaseView {
             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）
@@ -394,20 +397,6 @@ export class PageWriteLevels extends BaseView {
         }, this);
     }
 
-    /**
-     * 滚动/吸附到指定页
-     */
-    private _scrollToPage(pageIndex: number, animated: boolean = true): void {
-        if (!this._scrollViewComp) return;
-
-        this._currentPage = pageIndex;
-        const offsetX = pageIndex * LAYOUT_CONFIG.VIEW_WIDTH;
-        this._scrollViewComp.scrollToOffset(
-            new Vec2(offsetX, 0),
-            animated ? PAGE_CONFIG.SNAP_DURATION : 0
-        );
-    }
-
     private _onItemToggle(index: number, selected: boolean): void {
         // 如果要选中但已达上限，阻止选中
         if (selected && this._selectedIndices.size >= MAX_SELECTION) {
@@ -576,7 +565,7 @@ export class PageWriteLevels extends BaseView {
         const ids: string[] = [];
         const sortedIndices = Array.from(this._selectedIndices).sort((a, b) => a - b);
         for (const index of sortedIndices) {
-            const level = CompletedLevelsManager.instance.getByIndex(index);
+            const level = this._levels[index] ?? null;
             if (level) {
                 ids.push(level.id);
             }
@@ -653,11 +642,6 @@ export class PageWriteLevels extends BaseView {
         if (this.dataBtn) {
             this.dataBtn.off(Button.EventType.CLICK, this._onDataClick, this);
         }
-        if (this.scrollView) {
-            this.scrollView.off(Node.EventType.TOUCH_START, this._onTouchStart, this);
-            this.scrollView.off(Node.EventType.TOUCH_END, this._onTouchEnd, this);
-            this.scrollView.off(Node.EventType.TOUCH_CANCEL, this._onTouchEnd, this);
-        }
         this._clearList();
     }
 }