@cc-component/cc-ex-component 1.1.8 → 1.2.0

package/assets/core/BaseReference.ts

@@ -1,20 +1,37 @@
 import { _decorator, Component, Node } from 'cc';
 import { ReferenceComponent } from './ReferenceComponent';
+import { BaseViewModelData } from './BaseViewModelData';
 const { ccclass, property } = _decorator;
 
 @ccclass('BaseReference')
 export class BaseReference extends Component {
     rc: ReferenceComponent;
     isInit: boolean = false;
+    isLoad: boolean = false;
+    vmParams: any;
+    viewModel: BaseViewModelData;
     initReferenceCollector() {
+        if (this.isInit) return;
+        this.isInit = true;
         this.rc = this.getComponent(ReferenceComponent);
     }
+
+    onLoadFinish() {
+        if (this.isLoad) return;
+        this.isLoad = true;
+        if (this.vmParams) this.viewModel?.refreshUI(this.vmParams)
+    }
     //#endregion
     defineProperty(propertyKey: string) {
         Object.defineProperty(this, propertyKey, { get: () => this.rc.get(propertyKey) });
     }
 
 
+    refreshUI(vmParams: any) {
+        this.vmParams = vmParams;
+    }
+
+
     // // 在 test 类中添加
     // protected _bindings: { uiProp: string; dataPath: string }[] = [];
 

package/assets/core/ReferenceComponent.ts

@@ -34,7 +34,7 @@ export class ReferenceComponent extends Component {
 
     @property
     private _refresh_bind = false;
-    @property({ displayName: "快速生成vm属性" })
+    @property({ displayName: "生成UI属性" })
     private get refresh_bind() { return this._refresh_bind; }
     private set refresh_bind(val: boolean) {
         if (EDITOR_NOT_IN_PREVIEW) {
@@ -46,7 +46,7 @@ export class ReferenceComponent extends Component {
 
     @property
     private _refresh_bind_data = false;
-    @property({ displayName: "快速生成vm Data" })
+    @property({ displayName: "生成UI数据对象" })
     private get refresh_bind_data() { return this._refresh_bind_data; }
     private set refresh_bind_data(val: boolean) {
         if (EDITOR_NOT_IN_PREVIEW) {
@@ -55,6 +55,19 @@ export class ReferenceComponent extends Component {
         }
         this._refresh_bind_data = false;
     }
+    @property
+    private _refresh_bind_data_all = false;
+    @property({ displayName: "生成模板" })
+    private get refresh_bind_data_all() { return this._refresh_bind_data_all; }
+    private set refresh_bind_data_all(val: boolean) {
+        if (EDITOR_NOT_IN_PREVIEW) {
+            this.initNodeList();
+            this.genCodeVmDataAll();
+        }
+        this._refresh_bind_data_all = false;
+    }
+
+    isComDebug = false
 
     @property({ type: CollectorNodeData, readonly: false })
     private _nodes: CollectorNodeData[] = [];
@@ -66,6 +79,8 @@ export class ReferenceComponent extends Component {
     private _nodeMap: Map<string, Node | Sprite> = new Map();
 
     comList = ["EditBox", "Toggle", "ToggleContainer", "Slider", "Button", "ProgressBar", "YXCollectionView", "TableView"]
+    comList2 = ["YXCollectionView", "TableView"]
+    comList_base = ["EditBox", "Toggle", "ToggleContainer", "Slider", "Button", "ProgressBar"]
 
     protected onLoad(): void {
         if (EDITOR_NOT_IN_PREVIEW) {//处理编辑器逻辑
@@ -175,16 +190,27 @@ export class ReferenceComponent extends Component {
     }
 
     /** 生成引用节点的获取代码 并复制到剪切板 */
-    private genCodeBind(isVm: boolean = true) {
+    private genCodeBind(isCopy: boolean = true, isClass: boolean = false) {
         if (!EDITOR_NOT_IN_PREVIEW) return;
         let text = "";
-
-
-        const viewModel = `        
-    // ✅ 使用新装饰器（自动响应式 + 路径推导）
-    @BindViewModel(new ViewModelData())
-    viewModel: ViewModelData;`
-        text += viewModel + "\n"
+        let eventStr: string = "    //#region ✅ 事件"
+        let pix = "onClick_"
+        // const com = this.node.components.find(v => { return v.reference })
+        // const match = com.name.match(/<([^>]+)>/);
+        // const className = match && match[1] ? match[1] : "any"
+        const className = this.node.name
+        let data = `${className}Data`
+        let iinterface = `I${className}Data`
+        //console.error("[MLogger Error]", className)
+        const viewModel = `     
+    // ✅ 外部界面调用,刷新UI
+    public refreshUI(data: ${iinterface}) { super.refreshUI(data); }   
+    
+    //#region ✅ 使用新装饰器（自动响应式 + 路径推导）
+    @BindViewModel(new ${className}Data())
+    viewModel: ${className}Data;`
+        text += viewModel + "\n\n"
+        text += `    //#region ✅ UI属性`
         //生成get属性
         this.nodes.forEach(data => {
             let key = data.key;
@@ -192,19 +218,19 @@ export class ReferenceComponent extends Component {
             let name = key[0].toLowerCase() + key.substring(1);
             const type = this.getPropertyType(data.com)
             let bind_pix = `@Bind`
-            let event = `,{ event: (self) => { } }`
+            let event = `,{ event: (self:${className}) => { } }`
             if (type === "YXCollectionView") {
                 event = `, {
-        layout: (self) => {
+        layout: (self:${className}) => {
             const layout = new YXFlowLayout();
             layout.horizontalSpacing = 10;
             layout.verticalSpacing = 20;
             layout.itemSize = () => math.size(100, 100);
             return layout;
         },
-        cellForItemAt: (self, indexPath, collectionView) => {
-            let node = collectionView.dequeueReusableCell("cell", indexPath);
-            // TODO: configure cell
+        cellForItemAt: (self:${className}, indexPath, collectionView) => {
+            const node = collectionView.dequeueReusableCell("cell", indexPath);
+            //node.getComponent(TableVIewItem).refreshUI(self.viewModel.${name}[indexPath.row])
             return node;
         },
     }`
@@ -213,8 +239,9 @@ export class ReferenceComponent extends Component {
             } else if (type === "TableView") {
                 event = `, {
         itemSize: () => math.size(100, 100),
-        cellForItemAt: (self, indexPath, collectionView) => {
-            let node = collectionView.dequeueReusableCell("cell", indexPath)
+        cellForItemAt: (self:${className}, indexPath, collectionView) => {
+            const node = collectionView.dequeueReusableCell("cell", indexPath)
+            //node.getComponent(TableVIewItem).refreshUI(self.viewModel.${name}[indexPath.row])
             return node
         },
     }`
@@ -222,20 +249,42 @@ export class ReferenceComponent extends Component {
             }
 
             let bind = `${bind_pix}("${name}"${this.comList.includes(type) ? event : ""})`
+            if (isClass) {
+                bind = `${bind_pix}("${name}"${this.comList2.includes(type) ? event : ""})`
+            }
+            if (this.comList_base.includes(type)) {
+
+                eventStr += `
+    ${pix}${name}(comp: ${type === "ToggleContainer" ? "Toggle" : type}) {
+        
+    }\n`
+
+            }
             //@ts-ignore
             let line = `    ${bind} @Ref ${name}: ${type};`
             text += line;
         });
 
 
-        Editor.Clipboard.write("text", text);
-        console.log("已复制到剪切板");
+        if (isCopy) {
+            Editor.Clipboard.write("text", text);
+            console.log("已复制到剪切板");
+        }
+        return { text: text, event: eventStr }
+
     }
 
     /** 生成引用节点的获取代码 并复制到剪切板 */
-    private genCodeVmData() {
+    private genCodeVmData(isCopy: boolean = true) {
         if (!EDITOR_NOT_IN_PREVIEW) return;
         let text = ""
+        let sx_this = ''
+        let sx = '    \n'
+        const className = this.node.name
+
+        let data = `${className}Data`
+        let iinterface = `I${className}Data`
+
         //生成get属性
         this.nodes.forEach(data => {
             let key = data.key;
@@ -243,22 +292,87 @@ export class ReferenceComponent extends Component {
             const type = this.getPropertyType(data.com)
             //@ts-ignore
             let line = `    ${name}: ${this.getDataTypeByComponentType(type)};`//`private get ${name}() { return this.rc.get("${key}", ${this.getPropertyType(data.node)}); }`;
-            text += line + "\n";
+            sx += line + "\n";
+
+            let line_sx = `        this.${name} = ${this.getDataTypeByComponentTypeValue(type)}`
+            sx_this += line_sx + '\n'
         });
 
         text = `
-class ViewModelData {
-${text}
+//#region ✅ 数据接口
+export interface ${iinterface}  {
+${sx}
+}
+        `;
+        text += `
+//#region ✅ 数据VM
+class ${data} extends BaseViewModelData implements ${iinterface} {
+${sx}
 
+    // ✅ 本界面内部调用
     loadData() {
-
+${sx_this}
     }
 }
         `;
+        if (isCopy) {
+            Editor.Clipboard.write("text", text);
+            console.log("已复制到剪切板");
+        }
+        return text
+    }
+
+
+
+
+
+    /** 生成引用节点的获取代码 并复制到剪切板 */
+    private genCodeVmDataAll() {
+        if (!EDITOR_NOT_IN_PREVIEW) return;
+        let importStr = `
+import { Label, RichText, ProgressBar, Sprite, EditBox, Toggle, Slider, ToggleContainer, Button, math, SpriteFrame, _decorator } from 'cc';
+import { ViewModel, BindViewModel, BindTable, BindCollect, Bind, Ref, BaseViewModelData, YXCollectionView, YXFlowLayout, TableView, BaseReference } from 'db://assets/pkg-export/@cc-component/cc-ex-component';
+const { ccclass, property } = _decorator;`
+
+        if (this.isComDebug) {
+            importStr = `
+import { _decorator, SpriteFrame, Label, RichText, ProgressBar, Sprite, EditBox, Toggle, Slider, ToggleContainer, Button, math } from 'cc';
+import { BaseReference } from '../assets/core/BaseReference';
+import { BaseViewModelData } from '../assets/core/BaseViewModelData';
+import { ViewModel, BindViewModel, Bind, Ref, BindTable, BindCollect } from '../assets/core/ViewModel';
+import { YXCollectionView } from '../assets/lib/collectView/lib_collect/yx-collection-view';
+import { YXFlowLayout } from '../assets/lib/collectView/lib_collect/yx-flow-layout';
+import { TableView } from '../assets/lib/tableView/TableView';
+const { ccclass, property } = _decorator;
+`
+        }
+        let text = `${importStr}\n`
+        text += this.genCodeVmData(false)
+        const sx = this.genCodeBind(false, true)
+        const className = this.node.name
+
+        let iinterface = `I${className}Data`
+        const onload = `
+    //#region ✅ 初始化
+    onLoad(): void {
+
+    }
+
+    start() {
+        this.viewModel.loadData()
+    }`
+        const classView = `
+@ccclass('${className}')
+export class ${className} extends ViewModel(BaseReference) {${sx.text}\n${onload}\n\n${sx.event}\n}`
+
+        text += classView
+
+
         Editor.Clipboard.write("text", text);
         console.log("已复制到剪切板");
     }
 
+
     /** 获取属性类型名字 */
     private getPropertyType(node: Node) {
         if (!EDITOR_NOT_IN_PREVIEW) return;
@@ -314,4 +428,22 @@ ${text}
         return typeMap[compType] ?? 'any'; // 默认 fallback
     }
 
+    getDataTypeByComponentTypeValue(compType: string) {
+        const typeMap: Record<string, string> = {
+            'Label': '"文本"',
+            'RichText': '"文本RichText"',
+            'Sprite': 'null',
+            'Button': 'true',          // Button 通常绑定激活状态（true/false）
+            'ProgressBar': '0',      // 进度条应为 number (0~1)
+            'Skeleton': 'null',
+            'Slider': '0',
+            'Toggle': 'true',
+            'EditBox': '"文本EditBox"',
+            'ToggleContainer': '0',  // 通常绑定选中项索引
+            'TableView': '[1,2,3,4,5]',            // 列表数据一般为数组
+            'YXCollectionView': '[1,2,3,4,5]'
+        };
+        return typeMap[compType] ?? 'any'; // 默认 fallback
+    }
+
 }

package/assets/core/ViewModel.ts

@@ -200,8 +200,8 @@ export function ViewModel<T extends new (...args: any[]) => Component>(Base: T)
     return class extends Base {
         // 绑定关系存储
         _bindings: { uiProp: string; dataPath: string }[] = [];
-        viewModel: any
 
+        viewModel: any
         // 创建响应式数据
         _makeReactive<T extends object>(obj: T, pathPrefix: string): T {
             const self = this as any;
@@ -220,7 +220,6 @@ export function ViewModel<T extends new (...args: any[]) => Component>(Base: T)
                     return value;
                 },
                 set(target, key: string, value: any) {
-
                     // ✅ 跳过 $ 开头的属性：不触发响应式更新
                     if (key.startsWith(skip)) {
                         target[key] = value;
@@ -319,6 +318,7 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
                 tempData.value = btn.node.active
                 self.viewModel[sx] = tempData
                 data.event?.(self)
+                self[`onClick_${sx}`]?.(btn)
             }
             com_btn['btnCall'] = btnCall
             com_btn.node.on(Button.EventType.CLICK, com_btn['btnCall'], self);
@@ -349,6 +349,7 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
                 tempData.value = slider.progress
                 self.viewModel[sx] = tempData
                 data.event?.(self)
+                self[`onClick_${sx}`]?.(slider)
             }
             com_sld['slideCall'] = slideCall
             com_sld.node.on('slide', slideCall, self);
@@ -367,6 +368,7 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
                 tempData.value = toggle.isChecked
                 self.viewModel[sx] = tempData
                 data.event?.(self)
+                self[`onClick_${sx}`]?.(toggle)
             }
             com_tg['toggleCall'] = toggleCall
             com_tg.node.on(Toggle.EventType.TOGGLE, toggleCall, self);
@@ -385,6 +387,7 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
                 tempData.value = editbox.textLabel.string
                 self.viewModel[sx] = tempData
                 data.event?.(self)
+                self[`onClick_${sx}`]?.(editbox)
             }
             com_eb['ebCall'] = ebCall
             com_eb.node.on('text-changed', ebCall, self);
@@ -408,6 +411,7 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
                         tempData.value = com_tgc.toggleItems.indexOf(toggle)
                         self.viewModel[sx] = tempData
                         data.event?.(self)
+                        self[`onClick_${sx}`]?.(toggle)
                     }
                     com_tgc.checkEvents.push(clickEventHandler);
                 }
@@ -536,7 +540,7 @@ export function Ref(target: any, propertyKey: string) {
         this.initReferenceCollector();
         this.defineProperty(propertyKey);
         originalOnLoad?.call(this);
-
+        this.onLoadFinish();
     };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cc-component/cc-ex-component",
-    "version": "1.1.8",
+    "version": "1.2.0",
     "engine": ">=3.8.6",
     "description": "系统组件添加常用扩展方法",
     "main": "index.ts",