feat(ui): wire Logo native loading progress

cocoscreator_projects/YouleNexus/assets/framework/ui/prefabs/widgets/Layer1_Logo.prefab

@@ -22,13 +22,13 @@
         "__id__": 2
       },
       {
-        "__id__": 40
+        "__id__": 50
       }
     ],
     "_active": true,
     "_components": [],
     "_prefab": {
-      "__id__": 50
+      "__id__": 60
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -75,23 +75,23 @@
         "__id__": 11
       },
       {
-        "__id__": 19
-      },
-      {
-        "__id__": 27
-      }
-    ],
-    "_active": true,
-    "_components": [
-      {
-        "__id__": 35
+        "__id__": 29
       },
       {
         "__id__": 37
       }
     ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 45
+      },
+      {
+        "__id__": 47
+      }
+    ],
     "_prefab": {
-      "__id__": 39
+      "__id__": 49
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -305,21 +305,28 @@
     "_parent": {
       "__id__": 2
     },
-    "_children": [],
+    "_children": [
+      {
+        "__id__": 12
+      }
+    ],
     "_active": true,
     "_components": [
       {
-        "__id__": 12
+        "__id__": 20
       },
       {
-        "__id__": 14
+        "__id__": 22
       },
       {
-        "__id__": 16
+        "__id__": 24
+      },
+      {
+        "__id__": 26
       }
     ],
     "_prefab": {
-      "__id__": 18
+      "__id__": 28
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -350,6 +357,181 @@
     },
     "_id": ""
   },
+  {
+    "__type__": "cc.Node",
+    "_name": "Fill",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 11
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 13
+      },
+      {
+        "__id__": 15
+      },
+      {
+        "__id__": 17
+      }
+    ],
+    "_prefab": {
+      "__id__": 19
+    },
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_mobility": 0,
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 12
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 14
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 1600,
+      "height": 7
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "11wryNsjhNPqbXqeNtm4GL"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 12
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 16
+    },
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_spriteFrame": {
+      "__uuid__": "04b97952-ff19-40c5-b2f0-d5a84ff93bb5@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_type": 3,
+    "_fillType": 0,
+    "_sizeMode": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_useGrayscale": false,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "93ObiVr8BLmL02Gr+0Ygcn"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 12
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 18
+    },
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 416,
+    "_originalHeight": 7,
+    "_alignMode": 1,
+    "_lockFlags": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "64uW+20zNAZ7vzhVMp3KqI"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "09/GP9iWJEppj1bGMyhJQK",
+    "instance": null,
+    "targetOverrides": null,
+    "nestedPrefabInstanceRoots": null
+  },
   {
     "__type__": "cc.UITransform",
     "_name": "",
@@ -360,7 +542,7 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 13
+      "__id__": 21
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -388,7 +570,7 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 15
+      "__id__": 23
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -433,7 +615,7 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 17
+      "__id__": 25
     },
     "_alignFlags": 21,
     "_target": null,
@@ -459,6 +641,31 @@
     "__type__": "cc.CompPrefabInfo",
     "fileId": "w8o18qHP5Wem3Gb4ztYDwQ"
   },
+  {
+    "__type__": "cc.ProgressBar",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 11
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 27
+    },
+    "_barSprite": {
+      "__id__": 15
+    },
+    "_mode": 2,
+    "_totalLength": 1,
+    "_progress": 0,
+    "_reverse": false,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "a0JQfp8UpBJbgzk6ZEyuhB"
+  },
   {
     "__type__": "cc.PrefabInfo",
     "root": {
@@ -484,17 +691,17 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 20
+        "__id__": 30
       },
       {
-        "__id__": 22
+        "__id__": 32
       },
       {
-        "__id__": 24
+        "__id__": 34
       }
     ],
     "_prefab": {
-      "__id__": 26
+      "__id__": 36
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -531,11 +738,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 19
+      "__id__": 29
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 21
+      "__id__": 31
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -559,11 +766,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 19
+      "__id__": 29
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 23
+      "__id__": 33
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -604,11 +811,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 19
+      "__id__": 29
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 25
+      "__id__": 35
     },
     "_alignFlags": 16,
     "_target": null,
@@ -659,17 +866,17 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 28
+        "__id__": 38
       },
       {
-        "__id__": 30
+        "__id__": 40
       },
       {
-        "__id__": 32
+        "__id__": 42
       }
     ],
     "_prefab": {
-      "__id__": 34
+      "__id__": 44
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -706,11 +913,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 27
+      "__id__": 37
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 29
+      "__id__": 39
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -734,11 +941,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 27
+      "__id__": 37
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 31
+      "__id__": 41
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -802,11 +1009,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 27
+      "__id__": 37
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 33
+      "__id__": 43
     },
     "_alignFlags": 16,
     "_target": null,
@@ -855,7 +1062,7 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 36
+      "__id__": 46
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -883,7 +1090,7 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 38
+      "__id__": 48
     },
     "_alignFlags": 0,
     "_target": null,
@@ -932,13 +1139,13 @@
     },
     "_children": [
       {
-        "__id__": 41
+        "__id__": 51
       }
     ],
     "_active": true,
     "_components": [],
     "_prefab": {
-      "__id__": 49
+      "__id__": 59
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -975,23 +1182,23 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
-      "__id__": 40
+      "__id__": 50
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 42
+        "__id__": 52
       },
       {
-        "__id__": 44
+        "__id__": 54
       },
       {
-        "__id__": 46
+        "__id__": 56
       }
     ],
     "_prefab": {
-      "__id__": 48
+      "__id__": 58
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -1028,11 +1235,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 41
+      "__id__": 51
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 43
+      "__id__": 53
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -1056,11 +1263,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 41
+      "__id__": 51
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 45
+      "__id__": 55
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -1101,11 +1308,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 41
+      "__id__": 51
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 47
+      "__id__": 57
     },
     "_alignFlags": 16,
     "_target": null,

cocoscreator_projects/YouleNexus/assets/scenes/LocalPlatformLogin.scene

@@ -275,7 +275,7 @@
     "_enabled": true,
     "__prefab": null,
     "loadingPrefab": {
-      "__uuid__": "4db0114a-f751-4931-bfaf-4fef31430583",
+      "__uuid__": "3e5a41f3-b043-45a5-94f6-e299ea9acc61",
       "__expectedType__": "cc.Prefab"
     },
     "loginPrefab": {
@@ -371,10 +371,10 @@
       "__id__": 8
     },
     "asset": {
-      "__uuid__": "4db0114a-f751-4931-bfaf-4fef31430583",
+      "__uuid__": "3e5a41f3-b043-45a5-94f6-e299ea9acc61",
       "__expectedType__": "cc.Prefab"
     },
-    "fileId": "RyJAROM7sGTy6Li8CWDPZA",
+    "fileId": "D6NzGhQBg/6lYKr/OZsmJQ",
     "instance": {
       "__id__": 10
     },
@@ -383,7 +383,7 @@
   },
   {
     "__type__": "cc.PrefabInstance",
-    "fileId": "ff8m2dc1lLAqLAsOz8udcb",
+    "fileId": "00Yyr3cfRNcZX1WLG7VLxz",
     "prefabRootNode": null,
     "mountedChildren": [],
     "mountedComponents": [],
@@ -411,12 +411,12 @@
     "propertyPath": [
       "_name"
     ],
-    "value": "Layer614_Loading"
+    "value": "Layer1_Logo"
   },
   {
     "__type__": "cc.TargetInfo",
     "localID": [
-      "RyJAROM7sGTy6Li8CWDPZA"
+      "D6NzGhQBg/6lYKr/OZsmJQ"
     ]
   },
   {

cocoscreator_projects/YouleNexus/assets/scripts/local-platform-login/LocalPlatformLogin.ts

@@ -1,4 +1,4 @@
-import { _decorator, Component, Label, Node, Prefab, Sprite, UITransform, instantiate, isValid, sys } from 'cc';
+import { _decorator, assetManager, Component, Label, Node, Prefab, ProgressBar, Sprite, instantiate, isValid, sys } from 'cc';
 import { DEBUG } from 'cc/env';
 import { HttpConfigFetcher } from '../../framework/config/remote-config-fetcher.ts';
 import type { NativeHost } from '../../framework/config/sources/native-settings.ts';
@@ -6,7 +6,7 @@ import type { RuntimeConfig } from '../../framework/config/runtime-config.ts';
 import type { PageModel } from '../../framework/presentation/ui-contracts.ts';
 import { createLocalLoginHost, type LocalLoginHost } from './local-login-host.ts';
 import type { LocalLoginEvidence } from './local-login-transport.ts';
-import { CocosLocalLoginView, createCocosFrameScheduler, requireNode } from './local-login-view.ts';
+import { CocosLocalLoginView, createAssetLoadTask, createCocosFrameScheduler, requireNode } from './local-login-view.ts';
 
 const { ccclass, property } = _decorator;
 const MINIMUM_LOADING_MS = 500;
@@ -26,7 +26,7 @@ export class LocalPlatformLogin extends Component {
 
   private host: LocalLoginHost | null = null;
   private view: CocosLocalLoginView | null = null;
-  private spinner: Node | null = null;
+  private resourceProgress: ProgressBar | null = null;
   private loginInstance: Node | null = null;
   private stopped = false;
   private firstDrawAt: number | null = null;
@@ -50,11 +50,11 @@ export class LocalPlatformLogin extends Component {
         resultLabel: this.required(this.resultLabel, 'resultLabel') });
       this.required(this.loadingPrefab, 'loadingPrefab');
       this.required(this.loginPrefab, 'loginPrefab');
-      this.spinner = requireNode(loadingRoot, 'Layer614_Loading/group-40/载入动画');
+      const logo = requireNode(loadingRoot, 'Layer1_Logo');
+      this.resourceProgress = requireNode(logo, 'group-1/Spirit254').getComponent(ProgressBar);
+      if (this.resourceProgress === null) throw new Error('Layer1_Logo/group-1/Spirit254 requires ProgressBar');
+      for (const path of ['group-1/Spirit3103', 'group-1/Spirit3104', 'group-32']) requireNode(logo, path).active = false;
       this.validateSprites(loadingRoot);
-      if (this.spinner.getComponent(UITransform) === null || this.spinner.getComponent(Sprite) === null) {
-        throw new Error('Loading spinner requires UITransform and Sprite');
-      }
       stopButton.on(Node.EventType.TOUCH_END, this.stopTouch);
       this.view.activate('loading');
       const firstDraw = this.nextDraw().then(() => {
@@ -118,11 +118,21 @@ export class LocalPlatformLogin extends Component {
 
   private async loadResources(): Promise<void> {
     if (this.stopped) throw new Error('Local login resources cancelled');
-    const prefab = this.required(this.loginPrefab, 'loginPrefab');
+    const serializedPrefab = this.required(this.loginPrefab, 'loginPrefab');
     const loading = this.required(this.loadingPrefab, 'loadingPrefab');
-    if (!isValid(prefab) || !isValid(prefab.data) || !isValid(loading) || !isValid(loading.data)) {
+    if (!isValid(serializedPrefab) || !isValid(serializedPrefab.data) || !isValid(loading) || !isValid(loading.data)) {
       throw new Error('Local login serialized Prefab dependency is invalid');
     }
+    const progress = this.required(this.resourceProgress, 'resource ProgressBar');
+    const task = createAssetLoadTask<Prefab>((onProgress, onComplete) => {
+      assetManager.loadAny(serializedPrefab.uuid, onProgress, (error, asset) => onComplete(error, asset as Prefab));
+    }, value => { progress.progress = value; });
+    this.pending.add(task.cancel);
+    let prefab: Prefab;
+    try { prefab = await task.promise; }
+    finally { this.pending.delete(task.cancel); }
+    if (this.stopped) throw new Error('Local login resources cancelled');
+    if (!isValid(prefab) || !isValid(prefab.data)) throw new Error('Loaded login Prefab dependency is invalid');
     const instance = instantiate(prefab);
     this.loginInstance = instance;
     instance.parent = this.required(this.loginRoot, 'loginRoot');
@@ -164,10 +174,6 @@ export class LocalPlatformLogin extends Component {
     });
   }
 
-  update(deltaSeconds: number): void {
-    if (!this.stopped && this.spinner !== null && this.spinner.activeInHierarchy) this.spinner.angle -= deltaSeconds * 180;
-  }
-
   private release(): void {
     this.stopped = true;
     for (const cancel of [...this.pending]) cancel();
@@ -206,6 +212,6 @@ export class LocalPlatformLogin extends Component {
   getDiagnostics() {
     return Object.freeze({ events: Object.freeze([...this.evidence]), snapshot: this.host?.getSnapshot(),
       pageModel: this.pageModel, stopped: this.stopped, pendingCount: this.pending.size,
-      firstDrawAt: this.firstDrawAt, spinnerAngle: this.spinner?.angle });
+      firstDrawAt: this.firstDrawAt, resourceProgress: this.resourceProgress?.progress });
   }
 }

cocoscreator_projects/YouleNexus/assets/scripts/local-platform-login/local-login-view.ts

@@ -6,6 +6,48 @@ interface ViewReferences {
   statusOverlay: Node; statusLabel: Label; resultLabel: Label;
 }
 
+export interface AssetLoadTask<T> {
+  readonly promise: Promise<T>;
+  cancel(): void;
+}
+
+type AssetLoadStarter<T> = (
+  onProgress: (completed: number, total: number) => void,
+  onComplete: (error: unknown, asset?: T) => void,
+) => void;
+
+/** Owns loader callback lifetime so stop/failure cannot revive the login flow. */
+export function createAssetLoadTask<T>(start: AssetLoadStarter<T>, setProgress: (progress: number) => void): AssetLoadTask<T> {
+  let settled = false;
+  let resolveTask!: (asset: T) => void;
+  let rejectTask!: (error: unknown) => void;
+  const promise = new Promise<T>((resolve, reject) => { resolveTask = resolve; rejectTask = reject; });
+  const reject = (error: unknown) => {
+    if (settled) return;
+    settled = true;
+    rejectTask(error);
+  };
+  try {
+    setProgress(0);
+    start((completed, total) => {
+      if (settled) return;
+      if (!Number.isInteger(completed) || !Number.isInteger(total) || completed < 0 || total <= 0 || completed > total) {
+        reject(new Error(`Invalid asset load progress: completed=${completed}, total=${total}`));
+        return;
+      }
+      try { setProgress(completed / total); }
+      catch (error) { reject(error); }
+    }, (error, asset) => {
+      if (settled) return;
+      if (error !== null && error !== undefined) { reject(error); return; }
+      if (asset === null || asset === undefined) { reject(new Error('Asset loader completed without an asset')); return; }
+      settled = true;
+      resolveTask(asset);
+    });
+  } catch (error) { reject(error); }
+  return { promise, cancel() { reject(new Error('Asset load cancelled')); } };
+}
+
 export function requireNode(root: Node, path: string): Node {
   const node = root.getChildByPath(path);
   if (node === null) throw new Error(`Local login binding missing node: ${path}`);