clickgo 3.1.4-dev13 → 3.1.6-dev15

package/dist/lib/form.ts

@@ -30,6 +30,8 @@ let focusId: number | null = null;
 const info: {
     /** --- 最后一个窗体 id --- */
     lastId: number;
+    /** --- 最后一个 panel id --- */
+    lastPanelId: number;
     /** --- 最后一个窗体层级，1000（一千）开始 --- */
     lastZIndex: number;
     /** --- 最后一个置顶窗体层级，10000000（一千万）开始 --- */
@@ -44,6 +46,7 @@ const info: {
     }>;
 } = {
     'lastId': 0,
+    'lastPanelId': 0,
     'lastZIndex': 999,
     'topLastZIndex': 9999999,
     'locale': {
@@ -78,91 +81,8 @@ const info: {
     }
 };
 
-/** --- 窗体的抽象类 --- */
-export abstract class AbstractForm {
-
-    /**
-     * --- 创建窗体工厂函数 ---
-     * @param data 要传递的对象
-     * @param layout 是否使用此参数替换 layout 值
-     */
-    public static async create(data?: Record<string, any>, layout?: string): Promise<AbstractForm | number> {
-        const frm: AbstractForm = new (this as any)();
-        /** --- 要挂载的 vue 参数 --- */
-        const code: types.IFormCreateCode = {
-            'data': {},
-            'methods': {},
-            'computed': {},
-
-            beforeCreate: (frm as any).onBeforeCreate,
-            created: function(this: types.IVue) {
-                this.onCreated();
-            },
-            beforeMount: function(this: types.IVue) {
-                this.onBeforeMount();
-            },
-            mounted: function(this: types.IVue, data?: Record<string, any>) {
-                // await this.$nextTick();
-                // --- form 不用 nextTick，因为全部处理完后才会主动调用本方法 ---
-                this.onMounted(data);
-            },
-            beforeUpdate: function(this: types.IVue) {
-                this.onBeforeUpdate();
-            },
-            updated: async function(this: types.IVue) {
-                await this.$nextTick();
-                this.onUpdated();
-            },
-            beforeUnmount: function(this: types.IVue) {
-                this.onBeforeUnmount();
-            },
-            unmounted: async function(this: types.IVue) {
-                await this.$nextTick();
-                this.onUnmounted();
-            }
-        };
-        /** --- class 对象类的属性列表 --- */
-        const cdata = Object.entries(frm);
-        for (const item of cdata) {
-            if (item[0] === 'access') {
-                // --- access 属性不放在 data 当中 ---
-
-                continue;
-            }
-            code.data![item[0]] = item[1];
-        }
-        if (!layout) {
-            const l = task.list[frm.taskId].app.files[frm.filename.slice(0, -2) + 'xml'];
-            if (typeof l !== 'string') {
-                return 0;
-            }
-            layout = l;
-        }
-        const prot = tool.getClassPrototype(frm);
-        code.methods = prot.method;
-        code.computed = prot.access;
-        // --- 窗体样式 ---
-        let style: string | undefined = undefined;
-        const fstyle = task.list[frm.taskId].app.files[frm.filename.slice(0, -2) + 'css'];
-        if (typeof fstyle === 'string') {
-            style = fstyle;
-        }
-        const fid = await create({
-            'code': code,
-            'layout': layout,
-            'style': style,
-
-            'path': frm.filename.slice(0, frm.filename.lastIndexOf('/')),
-            'data': data,
-            'taskId': frm.taskId
-        });
-        if (fid > 0) {
-            return task.list[frm.taskId].forms[fid].vroot as any;
-        }
-        else {
-            return fid;
-        }
-    }
+/** --- Panel 与 Form 共用的抽象类 --- */
+abstract class AbstractCommon {
 
     /** --- 当前文件路径 --- */
     public get filename(): string {
@@ -210,7 +130,7 @@ export abstract class AbstractForm {
         });
     }
 
-    /** --- 当前窗体的包内路径不以 / 结尾 --- */
+    /** --- 当前文件的包内路径不以 / 结尾 --- */
     public get path(): string {
         // --- 将在初始化时系统自动重写本函数 ---
         return '';
@@ -230,9 +150,20 @@ export abstract class AbstractForm {
     /**
      * --- 获取语言内容 ---
      */
-    public get l(): (key: string) => string {
-        return (key: string): string => {
-            return task.list[this.taskId].locale.data[this.locale]?.[key] ?? task.list[this.taskId].locale.data['en']?.[key] ?? 'LocaleError';
+    public get l(): (key: string, data?: string[]) => string {
+        return (key: string, data?: string[]): string => {
+            const loc = task.list[this.taskId].locale.data[this.locale]?.[key] ?? task.list[this.taskId].locale.data['en']?.[key] ?? 'LocaleError';
+            if (!data) {
+                return loc;
+            }
+            let i: number = -1;
+            return loc.replace(/\?/g, function() {
+                ++i;
+                if (!data[i]) {
+                    return '';
+                }
+                return data[i];
+            });
         };
     }
 
@@ -247,9 +178,6 @@ export abstract class AbstractForm {
         };
     }
 
-    /** --- 当前窗体是否和 native 的实体窗体大小、状态同步 --- */
-    public isNativeSync: boolean = false;
-
     /**
      * --- 监视变动 ---
      * @param name 监视的属性
@@ -302,28 +230,89 @@ export abstract class AbstractForm {
         core.trigger(name, this.taskId, this.formId, param1, param2);
     }
 
-    // --- 以下为窗体有，但 control 没有 ---
-
     /**
-     * --- 无 js 文件的窗体创建 ---
-     * @param path 包内相对于本窗体的路径或包内绝对路径，不含扩展名
-     * @param data 要传递的值
+     * --- 给一个窗体发送一个对象，不会知道成功与失败状态 ---
+     * @param fid formId 要接收对象的 form id
+     * @param obj 要发送的对象
      */
-    public async createForm(path: string, data?: Record<string, any>): Promise<AbstractForm | number> {
-        path = tool.urlResolve(this.filename, path);
-        const taskId = this.taskId;
-        const cls = class extends AbstractForm {
-            public get filename(): string {
-                return path + '.js';
-            }
+    public send(fid: number, obj: Record<string, any>): void {
+        obj.taskId = this.taskId;
+        obj.formId = this.formId;
+        send(fid, obj);
+    }
 
-            public get taskId(): number {
-                return taskId;
-            }
-        };
-        return cls.create(data);
+    // --- 控件响应事件，都可由用户重写 ---
+
+    public onBeforeCreate(): void | Promise<void> {
+        return;
+    }
+
+    public onCreated(): void | Promise<void> {
+        return;
     }
 
+    public onBeforeMount(): void | Promise<void> {
+        return;
+    }
+
+    public onBeforeUpdate(): void | Promise<void> {
+        return;
+    }
+
+    public onUpdated(): void | Promise<void> {
+        return;
+    }
+
+    public onBeforeUnmount(): void | Promise<void> {
+        return;
+    }
+
+    public onUnmounted():  void | Promise<void> {
+        return;
+    }
+
+}
+
+/** --- Panel 控件抽象类 --- */
+export abstract class AbstractPanel extends AbstractCommon {
+
+    /** --- 当前的 panel ID --- */
+    public get panelId(): number {
+        // --- panel 创建时 createPanel 自动重写本函数 ---
+        return 0;
+    }
+
+    public onShow(data: Record<string, any>): void | Promise<void>;
+    public onShow(): void {
+        return;
+    }
+
+    public onHide(): void | Promise<void>;
+    public onHide(): void {
+        return;
+    }
+
+    public onMounted(): void | Promise<void>;
+    public onMounted(): void {
+        return;
+    }
+
+    /** --- 接收 send 传递过来的 data 数据（是 panel 控件的 send，不是 form 的 send） --- */
+    public onReceive(data: Record<string, any>): void | Promise<void>;
+    public onReceive(): void {
+        return;
+    }
+
+}
+
+/** --- 窗体的抽象类 --- */
+export abstract class AbstractForm extends AbstractCommon {
+
+    /** --- 当前窗体是否和 native 的实体窗体大小、状态同步 --- */
+    public isNativeSync: boolean = false;
+
+    // --- 以下为窗体有，但 control 没有 ---
+
     /** --- 是否是置顶 --- */
     public get topMost(): boolean {
         // --- 将在初始化时系统自动重写本函数 ---
@@ -334,17 +323,6 @@ export abstract class AbstractForm {
         // --- 会进行重写 ---
     }
 
-    /**
-     * --- 给一个窗体发送一个对象，不会知道成功与失败状态 ---
-     * @param fid formId 要接收对象的 form id
-     * @param obj 要发送的对象
-     */
-    public send(fid: number, obj: Record<string, any>): void {
-        obj.taskId = this.taskId;
-        obj.formId = this.formId;
-        send(fid, obj);
-    }
-
     /**
      * --- 是否在本窗体上显示遮罩层 ---
      */
@@ -362,8 +340,7 @@ export abstract class AbstractForm {
      */
     public show(): void {
         // --- 创建成功的窗体，可以直接显示 ---
-        const v = this as any;
-        v.$refs.form.$data.isShow = true;
+        const v = this as unknown as types.IVue;
         if (this._firstShow) {
             this._firstShow = false;
             // --- 将窗体居中 ---
@@ -379,6 +356,9 @@ export abstract class AbstractForm {
             v.$refs.form.$data.isShow = true;
             changeFocus(this.formId);
         }
+        else {
+            v.$refs.form.$data.isShow = true;
+        }
     }
 
     /**
@@ -415,43 +395,13 @@ export abstract class AbstractForm {
      */
     public dialogResult: string = '';
 
-    // --- 控件响应事件，都可由用户重写 ---
-
-    public onBeforeCreate(): void | Promise<void> {
-        return;
-    }
-
-    public onCreated(): void | Promise<void> {
-        return;
-    }
-
-    public onBeforeMount(): void | Promise<void> {
-        return;
-    }
+    // --- 窗体可以接收到的事件 ---
 
     public onMounted(obj: Record<string, any>): void | Promise<void>;
-    public onMounted(): void | Promise<void> {
+    public onMounted(): void {
         return;
     }
 
-    public onBeforeUpdate(): void | Promise<void> {
-        return;
-    }
-
-    public onUpdated(): void | Promise<void> {
-        return;
-    }
-
-    public onBeforeUnmount(): void | Promise<void> {
-        return;
-    }
-
-    public onUnmounted():  void | Promise<void> {
-        return;
-    }
-
-    // --- 窗体可以接收到的事件 ---
-
     /** --- 接收 send 传递过来的 data 数据 --- */
     public onReceive(data: Record<string, any>): void | Promise<void>;
     public onReceive(): void {
@@ -484,13 +434,13 @@ export abstract class AbstractForm {
 
     /** --- 窗体标题改变事件 */
     public onFormTitleChanged(taskId: number, formId: number, title: string): void | Promise<void>;
-    public onFormTitleChanged(): void | Promise<void> {
+    public onFormTitleChanged(): void {
         return;
     }
 
     /** --- 窗体图标改变事件 --- */
     public onFormIconChanged(taskId: number, formId: number, icon: string): void | Promise<void>;
-    public onFormIconChanged(): void | Promise<void> {
+    public onFormIconChanged(): void {
         return;
     }
 
@@ -532,13 +482,13 @@ export abstract class AbstractForm {
 
     /** --- 任务开始事件 --- */
     public onTaskStarted(taskId: number): void | Promise<void>;
-    public onTaskStarted(): void | Promise<void> {
+    public onTaskStarted(): void {
         return;
     }
 
     /** --- 任务结束事件 --- */
     public onTaskEnded(taskId: number): void | Promise<void>;
-    public onTaskEnded(): void | Promise<void> {
+    public onTaskEnded(): void {
         return;
     }
 
@@ -1136,6 +1086,76 @@ export function getFocus(): number | null {
     return focusId;
 }
 
+/**
+ * --- 当前活跃中的 panelId 列表 ---
+ */
+export const activePanels: Record<string, number[]> = {};
+
+/**
+ * --- 获取窗体当前活跃中的 panelId 列表 ---
+ * @param formId 要获取的窗体 id
+ */
+export function getActivePanel(formId: number): number[] {
+    return activePanels[formId] ?? [];
+}
+
+/**
+ * --- 移除 form 中正在活跃中的 panel id （panel 本身被置于隐藏时）
+ * @param panelId panel id
+ * @param formId 所属 form id
+ * @param taskId task id 校验，App 模式下无效
+ */
+export function removeActivePanel(panelId: number, formId: number, taskId?: number): boolean {
+    if (!taskId) {
+        return false;
+    }
+    if (!task.list[taskId]) {
+        return false;
+    }
+    if (!task.list[taskId].forms[formId]) {
+        return false;
+    }
+    if (!activePanels[formId]) {
+        return true;
+    }
+    const io = activePanels[formId].indexOf(panelId);
+    if (io === -1) {
+        return true;
+    }
+    activePanels[formId].splice(io, 1);
+    if (!activePanels[formId].length) {
+        delete activePanels[formId];
+    }
+    return true;
+}
+
+/**
+ * --- 将 form 中某个 panel 设置为活动的 ---
+ * @param panelId panel id
+ * @param formId 所属 form id
+ * @param taskId task id 校验，App 模式下无效
+ */
+export function setActivePanel(panelId: number, formId: number, taskId?: number): boolean {
+    if (!taskId) {
+        return false;
+    }
+    if (!task.list[taskId]) {
+        return false;
+    }
+    if (!task.list[taskId].forms[formId]) {
+        return false;
+    }
+    if (!activePanels[formId]) {
+        activePanels[formId] = [];
+    }
+    const io = activePanels[formId].indexOf(panelId);
+    if (io !== -1) {
+        return true;
+    }
+    activePanels[formId].push(panelId);
+    return true;
+}
+
 /**
  * --- 改变 form 的焦点 class ---
  * @param formId 变更后的 form id
@@ -1906,6 +1926,7 @@ export function remove(formId: number): boolean {
             dom.clearWatchStyle(formId);
             dom.clearWatchProperty(formId);
             native.clear(formId, taskId);
+            delete activePanels[formId];
             // --- 检测是否已经没有窗体了，如果没有了的话就要结束任务了 ---
             if (Object.keys(task.list[taskId].forms).length === 0) {
                 task.end(taskId);
@@ -1918,6 +1939,45 @@ export function remove(formId: number): boolean {
     }
 }
 
+/**
+ * --- 移除 panel 挂载，通常发生在 panel 控件的 onBeforeUnmount 中 ---
+ * @param id panel id
+ * @param vapp panel 的 vapp 对象 ---
+ * @param el panel 控件
+ */
+export function removePanel(id: number, vapp: types.IVApp, el: HTMLElement): boolean {
+    const formWrap = dom.findParentByClass(el, 'cg-form-wrap');
+    if (!formWrap) {
+        return false;
+    }
+    const formId = formWrap.dataset.formId;
+    if (!formId) {
+        return false;
+    }
+    const taskId = formWrap.dataset.taskId;
+    if (!taskId) {
+        return false;
+    }
+    const tid = parseInt(taskId);
+    vapp.unmount();
+    vapp._container.remove();
+    el.querySelector('[data-panel-id="' + id.toString() + '"]')?.remove();
+    // --- 移除 form 的 style ---
+    dom.removeStyle(tid, 'form', formId, id);
+    dom.clearWatchStyle(formId, id);
+    dom.clearWatchProperty(formId, id);
+    if (activePanels[formId]) {
+        const io = activePanels[formId].indexOf(id);
+        if (io >= 0) {
+            activePanels[formId].splice(io, 1);
+        }
+        if (!activePanels[formId].length) {
+            delete activePanels[formId];
+        }
+    }
+    return true;
+}
+
 /**
  * --- 根据任务 id 和 form id 获取 IForm 对象，App 模式下无效 ---
  * @param taskId 任务 id
@@ -1937,63 +1997,405 @@ function getForm(taskId: number, formId: number): types.IForm | null {
 }
 
 /**
- * --- 创建一个窗体，App 模式下无效 ---
- * @param opt 创建窗体的配置对象
+ * --- 创建 panel 对象，一般情况下无需使用 ---
+ * @param cls 路径字符串或 AbstractPanel 类
+ * @param el 要挂载的节点
+ * @param formId 当前窗体 ID
+ * @param taskId 任务ID，App 模式下无效
  */
-export async function create(opt: types.IFormCreateOptions): Promise<number> {
-    if (!opt.taskId) {
-        return -1;
+export async function createPanel<T extends AbstractPanel>(
+    cls: string | (new () => T),
+    el: HTMLElement,
+    formId: number,
+    taskId?: number
+): Promise<{
+    'id': number;
+    'vapp': types.IVApp;
+    'vroot': T;
+}> {
+    if (!taskId) {
+        const err = new Error('form.createPanel: -1');
+        core.trigger('error', 0, 0, err, err.message);
+        throw err;
+    }
+    if (el.dataset.cgControl !== 'panel') {
+        const err = new Error('form.createPanel: -2');
+        core.trigger('error', 0, 0, err, err.message);
+        throw err;
     }
     /** --- 当前的 task 对象 --- */
-    const t = task.list[opt.taskId];
+    const t = task.list[taskId];
     if (!t) {
-        return -2;
+        const err = new Error('form.createPanel: -3');
+        core.trigger('error', 0, 0, err, err.message);
+        throw err;
+    }
+    /** --- 文件在包内的路径，不以 / 结尾 --- */
+    let filename = '';
+    if (typeof cls === 'string') {
+        filename = cls + '.js';
+        cls = class extends AbstractPanel {
+            public get filename(): string {
+                return filename;
+            }
+
+            public get taskId(): number {
+                return t.id;
+            }
+        } as (new () => T);
+    }
+
+    // --- 申请 panelId ---
+    const panelId = ++info.lastPanelId;
+    /** --- 要新建的 panel 类对象 --- */
+    const panel = new cls();
+    if (!filename) {
+        filename = panel.filename;
+    }
+    const lio = filename.lastIndexOf('/');
+    const path = filename.slice(0, lio);
+
+    // --- 布局 ---
+    const l = t.app.files[filename.slice(0, -2) + 'xml'];
+    if (typeof l !== 'string') {
+        const err = new Error('form.createPanel: -4');
+        core.trigger('error', 0, 0, err, err.message);
+        throw err;
+    }
+    let layout = l;
+
+    // --- 样式 ---
+    /** --- 样式内容 --- */
+    let style: string = '';
+    /** --- 样式前缀 --- */
+    let prep = '';
+    const s = t.app.files[filename.slice(0, -2) + 'css'];
+    if (typeof s === 'string') {
+        style = s;
+        // --- 将 style 中的 tag 标签转换为 class，如 button 变为 .tag-button，然后将 class 进行标准程序，添加 prep 进行区分隔离 ---
+        const r = tool.stylePrepend(style);
+        prep = r.prep;
+        style = await tool.styleUrl2DataUrl(path + '/', r.style, t.app.files);
+    }
+
+    // --- 纯净化 ---
+    layout = tool.purify(layout);
+    // --- 标签增加 cg- 前缀，增加 class 为 tag-xxx ---
+    layout = tool.layoutAddTagClassAndReTagName(layout, true);
+    // --- 给所有控件传递窗体的 focus 信息 ---
+    layout = tool.layoutInsertAttr(layout, ':form-focus=\'formFocus\'', {
+        'include': [/^cg-.+/]
+    });
+    // --- 给 layout 的 class 增加前置 ---
+    const prepList = ['cg-task' + t.id.toString() + '_'];
+    if (prep !== '') {
+        prepList.push(prep);
+    }
+    layout = tool.layoutClassPrepend(layout, prepList);
+    // --- 给 event 增加包裹 ---
+    layout = tool.eventsAttrWrap(layout);
+    // --- 给 teleport 做处理 ---
+    if (layout.includes('<teleport')) {
+        layout = tool.teleportGlue(layout, formId);
     }
-    // ---  申请 formId ---
-    const formId = ++info.lastId;
     // --- 获取要定义的控件列表 ---
-    const components = control.buildComponents(t.id, formId, opt.path ?? '');
+    const components = control.buildComponents(t.id, formId, path);
     if (!components) {
-        return -3;
-    }
-    // --- 准备相关变量 ---
-    let data: Record<string, any> = {};
-    let access: Record<string, any> = {};
-    let methods: Record<string, any> | undefined = undefined;
-    let computed: Record<string, any> = {};
-    let beforeCreate: (() => void) | undefined = undefined;
-    let created: (() => void) | undefined = undefined;
-    let beforeMount: (() => void) | undefined = undefined;
-    let mounted: ((data?: Record<string, any>) => void | Promise<void>) | undefined = undefined;
-    let beforeUpdate: (() => void) | undefined = undefined;
-    let updated: (() => void) | undefined = undefined;
-    let beforeUnmount: (() => void) | undefined = undefined;
-    let unmounted: (() => void) | undefined = undefined;
-    if (opt.code) {
-        data = opt.code.data ?? {};
-        access = opt.code.access ?? {};
-        methods = opt.code.methods;
-        computed = opt.code.computed ?? {};
-        beforeCreate = opt.code.beforeCreate;
-        created = opt.code.created;
-        beforeMount = opt.code.beforeMount;
-        mounted = opt.code.mounted;
-        beforeUpdate = opt.code.beforeUpdate;
-        updated = opt.code.updated;
-        beforeUnmount = opt.code.beforeUnmount;
-        unmounted = opt.code.unmounted;
-    }
-    // --- 应用样式表 ---
-    let style = '';
+        const err = new Error('form.createPanel: -5');
+        core.trigger('error', 0, 0, err, err.message);
+        throw err;
+    }
+    /** --- class 对象类的属性列表 --- */
+    const idata: Record<string, any> = {};
+    const cdata = Object.entries(panel);
+    for (const item of cdata) {
+        if (item[0] === 'access') {
+            // --- access 属性不放在 data 当中 ---
+            continue;
+        }
+        idata[item[0]] = item[1];
+    }
+    idata._formFocus = false;
+    /** --- class 对象的方法和 getter/setter 列表 --- */
+    const prot = tool.getClassPrototype(panel);
+    const methods = prot.method;
+    const computed = prot.access;
+    computed.formId = {
+        get: function(): number {
+            return formId;
+        },
+        set: function(this: types.IVue): void {
+            notify({
+                'title': 'Error',
+                'content': `The software tries to modify the system variable "formId".\nPath: ${this.filename}`,
+                'type': 'danger'
+            });
+            return;
+        }
+    };
+    computed.panelId = {
+        get: function(): number {
+            return panelId;
+        },
+        set: function(this: types.IVue): void {
+            notify({
+                'title': 'Error',
+                'content': `The software tries to modify the system variable "panelId".\nPath: ${this.filename}`,
+                'type': 'danger'
+            });
+            return;
+        }
+    };
+    computed.path = {
+        get: function(): string {
+            return path;
+        },
+        set: function(this: types.IVue): void {
+            notify({
+                'title': 'Error',
+                'content': `The software tries to modify the system variable "path".\nPath: ${this.filename}`,
+                'type': 'danger'
+            });
+            return;
+        }
+    };
+    computed.prep = {
+        get: function(): string {
+            return prep;
+        },
+        set: function(this: types.IVue): void {
+            notify({
+                'title': 'Error',
+                'content': `The software tries to modify the system variable "cgPrep".\nPath: ${this.filename}`,
+                'type': 'danger'
+            });
+            return;
+        }
+    };
+
+    // --- 插入 dom ---
+    el.insertAdjacentHTML('beforeend', `<div data-panel-id="${panelId.toString()}"></div>`);
+    if (style) {
+        dom.pushStyle(t.id, style, 'form', formId, panelId);
+    }
+    /** --- panel wrap element 对象 --- */
+    const mel: HTMLElement = el.children.item(el.children.length - 1) as HTMLElement;
+    mel.style.flex = '1';
+
+    // --- 创建 app 对象 ---
+    const rtn: {
+        'vapp': types.IVApp;
+        'vroot': types.IVue;
+    } = await new Promise(function(resolve) {
+        const vapp = clickgo.vue.createApp({
+            'template': layout.replace(/^<cg-panel([\s\S]+)-panel>$/, '<cg-layout$1-layout>'),
+            'data': function() {
+                return tool.clone(idata);
+            },
+            'methods': methods,
+            'computed': computed,
+
+            'beforeCreate': (panel as any).onBeforeCreate,
+            'created': function(this: types.IVue) {
+                if ((panel as any).access) {
+                    this.access = tool.clone((panel as any).access);
+                }
+                this.onCreated();
+            },
+            'beforeMount': function(this: types.IVue) {
+                this.onBeforeMount();
+            },
+            'mounted': async function(this: types.IVue) {
+                await this.$nextTick();
+                (mel.children.item(0) as HTMLElement).style.flex = '1';
+                // --- 完成 ---
+                resolve({
+                    'vapp': vapp,
+                    'vroot': this
+                });
+            },
+            'beforeUpdate': function(this: types.IVue) {
+                this.onBeforeUpdate();
+            },
+            'updated': async function(this: types.IVue) {
+                await this.$nextTick();
+                this.onUpdated();
+            },
+            'beforeUnmount': function(this: types.IVue) {
+                this.onBeforeUnmount();
+            },
+            'unmounted': async function(this: types.IVue) {
+                await this.$nextTick();
+                this.onUnmounted();
+            }
+        });
+        vapp.config.errorHandler = function(err: Error, vm: types.IVue, info: string): void {
+            notify({
+                'title': 'Runtime Error',
+                'content': `Message: ${err.message}\nTask id: ${vm.taskId}\nForm id: ${vm.formId}`,
+                'type': 'danger'
+            });
+            core.trigger('error', vm.taskId, vm.formId, err, info + '(-3,' + vm.taskId + ',' + vm.formId + ')');
+        };
+        // --- 挂载控件对象到 vapp ---
+        for (const key in components) {
+            vapp.component(key, components[key]);
+        }
+        try {
+            vapp.mount(mel);
+        }
+        catch (err: any) {
+            notify({
+                'title': 'Runtime Error',
+                'content': `Message: ${err.message}\nTask id: ${t.id}\nForm id: ${formId}`,
+                'type': 'danger'
+            });
+            core.trigger('error', t.id, formId, err, err.message);
+        }
+    });
+    // --- 执行 mounted ---
+    await tool.sleep(34);
+    try {
+        await panel.onMounted.call(rtn.vroot);
+    }
+    catch (err: any) {
+        // --- 创建失败，做垃圾回收 ---
+        core.trigger('error', rtn.vroot.taskId, rtn.vroot.formId, err, 'Create panel mounted error: -6.');
+        try {
+            rtn.vapp.unmount();
+        }
+        catch (err: any) {
+            const msg = `Message: ${err.message}\nTask id: ${t.id}\nForm id: ${formId}\nFunction: form.createPanel, unmount.`;
+            notify({
+                'title': 'Panel Unmount Error',
+                'content': msg,
+                'type': 'danger'
+            });
+            console.log('Panel Unmount Error', msg, err);
+        }
+        rtn.vapp._container.remove();
+        dom.clearWatchStyle(rtn.vroot.formId, panelId);
+        dom.clearWatchProperty(rtn.vroot.formId, panelId);
+        // --- 移除 style ---
+        dom.removeStyle(rtn.vroot.taskId, 'form', rtn.vroot.formId, panelId);
+        throw err;
+    }
+    return {
+        'id': panelId,
+        'vapp': rtn.vapp,
+        'vroot': rtn.vroot as any
+    };
+}
+
+/**
+ * --- 创建一个窗体 ---
+ * @param cls 路径字符串或 AbstractForm 类
+ * @param data 要传递的对象
+ * @param opt 其他替换选项
+ * @param taskId App 模式下无效
+ */
+export async function create<T extends AbstractForm>(
+    cls: string | (new () => T),
+    data?: Record<string, any>,
+    opt: {
+        'layout'?: string;
+        'style'?: string;
+        /** --- cls 为 string 时，path 参数才有效，为基准路径，如果不以 / 结尾则以最后一个 / 字符为准 --- */
+        'path'?: string;
+    } = {},
+    taskId?: number
+): Promise<T> {
+    if (!taskId) {
+        const err = new Error('form.create: -1');
+        core.trigger('error', 0, 0, err, err.message);
+        throw err;
+    }
+    /** --- 当前的 task 对象 --- */
+    const t = task.list[taskId];
+    if (!t) {
+        const err = new Error('form.create: -2');
+        core.trigger('error', 0, 0, err, err.message);
+        throw err;
+    }
+    /** --- 布局内容 --- */
+    let layout: string = '';
+    if (opt.layout) {
+        layout = opt.layout;
+    }
+    /** --- 样式内容 --- */
+    let style: string = '';
+    /** --- 样式前缀 --- */
     let prep = '';
     if (opt.style) {
+        style = opt.style;
+    }
+    /** --- 文件在包内的路径，不以 / 结尾 --- */
+    let filename = '';
+    if (typeof cls === 'string') {
+        filename = tool.urlResolve(opt.path ?? '/', cls);
+        if (!layout) {
+            const l = t.app.files[filename + '.xml'];
+            if (typeof l !== 'string') {
+                const err = new Error('form.create: -3');
+                core.trigger('error', 0, 0, err, err.message);
+                throw err;
+            }
+            layout = l;
+        }
+        if (!style) {
+            const s = t.app.files[filename + '.css'];
+            if (typeof s === 'string') {
+                style = s;
+            }
+        }
+        cls = class extends AbstractForm {
+            public get filename(): string {
+                return filename + '.js';
+            }
+
+            public get taskId(): number {
+                return t.id;
+            }
+        } as (new () => T);
+    }
+
+    // --- 申请 formId ---
+    const formId = ++info.lastId;
+    /** --- 要新建的窗体类对象 --- */
+    const frm = new cls();
+    if (!filename) {
+        filename = frm.filename;
+    }
+    const lio = filename.lastIndexOf('/');
+    const path = filename.slice(0, lio);
+
+    // --- 布局 ---
+    if (!layout) {
+        const l = t.app.files[filename.slice(0, -2) + 'xml'];
+        if (typeof l !== 'string') {
+            const err = new Error('form.create: -4');
+            core.trigger('error', 0, 0, err, err.message);
+            throw err;
+        }
+        layout = l;
+    }
+
+    // --- 样式 ---
+    if (!style) {
+        const s = t.app.files[filename.slice(0, -2) + 'css'];
+        if (typeof s === 'string') {
+            style = s;
+        }
+    }
+    if (style) {
         // --- 将 style 中的 tag 标签转换为 class，如 button 变为 .tag-button，然后将 class 进行标准程序，添加 prep 进行区分隔离 ---
-        const r = tool.stylePrepend(opt.style);
+        const r = tool.stylePrepend(style);
         prep = r.prep;
-        style = await tool.styleUrl2DataUrl(opt.path ?? '/', r.style, t.app.files);
+        style = await tool.styleUrl2DataUrl(path + '/', r.style, t.app.files);
     }
-    // --- 要创建的 form 的 layout 所有标签增加 cg 前缀，并增加新的 class 为 tag-xxx ---
-    let layout = tool.purify(opt.layout);
+
+    // --- 纯净化 ---
+    layout = tool.purify(layout);
     // --- 标签增加 cg- 前缀，增加 class 为 tag-xxx ---
     layout = tool.layoutAddTagClassAndReTagName(layout, true);
     // --- 给所有控件传递窗体的 focus 信息 ---
@@ -2001,7 +2403,7 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
         'include': [/^cg-.+/]
     });
     // --- 给 layout 的 class 增加前置 ---
-    const prepList = ['cg-task' + opt.taskId.toString() + '_'];
+    const prepList = ['cg-task' + t.id.toString() + '_'];
     if (prep !== '') {
         prepList.push(prep);
     }
@@ -2017,17 +2419,37 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
     if (layout.includes('<teleport')) {
         layout = tool.teleportGlue(layout, formId);
     }
-    // --- 插入 HTML 到 Element ---
-    elements.list.insertAdjacentHTML('beforeend', `<div class="cg-form-wrap" data-form-id="${formId.toString()}" data-task-id="${opt.taskId.toString()}"></div>`);
-    elements.popList.insertAdjacentHTML('beforeend', `<div data-form-id="${formId.toString()}" data-task-id="${opt.taskId.toString()}"></div>`);
-    // --- 获取刚才的 form wrap element 对象 ---
-    const el: HTMLElement = elements.list.children.item(elements.list.children.length - 1) as HTMLElement;
-    // --- 创建窗体对象 ---
+    // --- 获取要定义的控件列表 ---
+    const components = control.buildComponents(t.id, formId, path);
+    if (!components) {
+        const err = new Error('form.create: -5');
+        core.trigger('error', 0, 0, err, err.message);
+        throw err;
+    }
+    /** --- class 对象类的属性列表 --- */
+    const idata: Record<string, any> = {};
+    const cdata = Object.entries(frm);
+    for (const item of cdata) {
+        if (item[0] === 'access') {
+            // --- access 属性不放在 data 当中 ---
+            continue;
+        }
+        idata[item[0]] = item[1];
+    }
+    idata._formFocus = false;
+    // --- 判断是否要与 native 实体窗体大小同步 ---
+    if (clickgo.isNative() && (formId === 1) && !clickgo.isImmersion() && !clickgo.hasFrame()) {
+        idata.isNativeSync = true;
+    }
+    /** --- class 对象的方法和 getter/setter 列表 --- */
+    const prot = tool.getClassPrototype(frm);
+    const methods = prot.method;
+    const computed = prot.access;
     computed.formId = {
         get: function(): number {
             return formId;
         },
-        set: function(): void {
+        set: function(this: types.IVue): void {
             notify({
                 'title': 'Error',
                 'content': `The software tries to modify the system variable "formId".\nPath: ${this.filename}`,
@@ -2036,12 +2458,11 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
             return;
         }
     };
-    data._formFocus = false;
     computed.path = {
         get: function(): string {
-            return opt.path ?? '';
+            return path;
         },
-        set: function(): void {
+        set: function(this: types.IVue): void {
             notify({
                 'title': 'Error',
                 'content': `The software tries to modify the system variable "path".\nPath: ${this.filename}`,
@@ -2054,7 +2475,7 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
         get: function(): string {
             return prep;
         },
-        set: function(): void {
+        set: function(this: types.IVue): void {
             notify({
                 'title': 'Error',
                 'content': `The software tries to modify the system variable "cgPrep".\nPath: ${this.filename}`,
@@ -2064,9 +2485,9 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
         }
     };
     // --- 是否在顶层的窗体 ---
-    data._topMost = false;
+    idata._topMost = false;
     computed.topMost = {
-        get: function(): number {
+        get: function(this: types.IVue): number {
             return this._topMost;
         },
         set: function(v: boolean): void {
@@ -2092,15 +2513,16 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
             return;
         }
     };
-    // --- 判断是否要与 native 实体窗体大小同步 ---
-    if (clickgo.isNative() && (formId === 1) && !clickgo.isImmersion() && !clickgo.hasFrame()) {
-        data.isNativeSync = true;
-    }
-    // --- 挂载 style ---
+
+    // --- 插入 dom ---
+    elements.list.insertAdjacentHTML('beforeend', `<div class="cg-form-wrap" data-form-id="${formId.toString()}" data-task-id="${t.id.toString()}"></div>`);
+    elements.popList.insertAdjacentHTML('beforeend', `<div data-form-id="${formId.toString()}" data-task-id="${t.id.toString()}"></div>`);
     if (style) {
-        // --- 窗体的 style ---
-        dom.pushStyle(opt.taskId, style, 'form', formId);
+        dom.pushStyle(t.id, style, 'form', formId);
     }
+    /** --- form wrap element 对象 --- */
+    const el: HTMLElement = elements.list.children.item(elements.list.children.length - 1) as HTMLElement;
+
     // --- 创建 app 对象 ---
     const rtn: {
         'vapp': types.IVApp;
@@ -2109,27 +2531,28 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
         const vapp = clickgo.vue.createApp({
             'template': layout.replace(/^<cg-form/, '<cg-form ref="form"'),
             'data': function() {
-                return tool.clone(data);
+                return tool.clone(idata);
             },
             'methods': methods,
             'computed': computed,
 
-            'beforeCreate': beforeCreate,
+            'beforeCreate': (frm as any).onBeforeCreate,
             'created': function(this: types.IVue) {
-                this.access = tool.clone(access);
-                created?.call(this);
+                if ((frm as any).access) {
+                    this.access = tool.clone((frm as any).access);
+                }
+                this.onCreated();
+            },
+            'beforeMount': function(this: types.IVue) {
+                this.onBeforeMount();
             },
-            'beforeMount': beforeMount,
             'mounted': async function(this: types.IVue) {
                 await this.$nextTick();
                 // --- 判断是否有 icon，对 icon 进行第一次读取 ---
                 // --- 为啥要在这搞，因为 form 控件中读取，将可能导致下方的 formCreate 事件获取不到 icon 图标 ---
                 // --- 而如果用延迟的方式获取，将可能导致 changeFocus 的窗体焦点事件先于 formCreate 触发 ---
                 if (this.$refs.form.icon) {
-                    const icon = await fs.getContent(this.$refs.form.icon, {
-                        'current': t.current,
-                        'files': t.app.files
-                    });
+                    const icon = await fs.getContent(this.$refs.form.icon, undefined, taskId);
                     this.$refs.form.iconDataUrl = (icon instanceof Blob) ? await tool.blob2DataUrl(icon) : '';
                 }
                 // --- 完成 ---
@@ -2138,10 +2561,20 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
                     'vroot': this
                 });
             },
-            'beforeUpdate': beforeUpdate,
-            'updated': updated,
-            'beforeUnmount': beforeUnmount,
-            'unmounted': unmounted
+            'beforeUpdate': function(this: types.IVue) {
+                this.onBeforeUpdate();
+            },
+            'updated': async function(this: types.IVue) {
+                await this.$nextTick();
+                this.onUpdated();
+            },
+            'beforeUnmount': function(this: types.IVue) {
+                this.onBeforeUnmount();
+            },
+            'unmounted': async function(this: types.IVue) {
+                await this.$nextTick();
+                this.onUnmounted();
+            }
         });
         vapp.config.errorHandler = function(err: Error, vm: types.IVue, info: string): void {
             notify({
@@ -2161,10 +2594,10 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
         catch (err: any) {
             notify({
                 'title': 'Runtime Error',
-                'content': `Message: ${err.message}\nTask id: ${opt.taskId}\nForm id: ${formId}`,
+                'content': `Message: ${err.message}\nTask id: ${t.id}\nForm id: ${formId}`,
                 'type': 'danger'
             });
-            core.trigger('error', opt.taskId, formId, err, err.message + '(-2)');
+            core.trigger('error', t.id, formId, err, err.message);
         }
     });
     // --- 创建 form 信息对象 ---
@@ -2177,38 +2610,36 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
     t.forms[formId] = nform;
     // --- 执行 mounted ---
     await tool.sleep(34);
-    if (mounted) {
+    try {
+        await frm.onMounted.call(rtn.vroot, data ?? {});
+    }
+    catch (err: any) {
+        // --- 窗体创建失败，做垃圾回收 ---
+        core.trigger('error', rtn.vroot.taskId, rtn.vroot.formId, err, 'Create form mounted error: -6.');
+        delete t.forms[formId];
         try {
-            await mounted.call(rtn.vroot, opt.data);
+            rtn.vapp.unmount();
         }
         catch (err: any) {
-            // --- 窗体创建失败，做垃圾回收 ---
-            core.trigger('error', rtn.vroot.taskId, rtn.vroot.formId, err, 'Create form mounted error.');
-            delete t.forms[formId];
-            try {
-                rtn.vapp.unmount();
-            }
-            catch (err: any) {
-                const msg = `Message: ${err.message}\nTask id: ${opt.taskId}\nForm id: ${formId}\nFunction: form.create, unmount.`;
-                notify({
-                    'title': 'Form Unmount Error',
-                    'content': msg,
-                    'type': 'danger'
-                });
-                console.log('Form Unmount Error', msg, err);
-            }
-            rtn.vapp._container.remove();
-            elements.popList.querySelector('[data-form-id="' + rtn.vroot.formId + '"]')?.remove();
-            dom.clearWatchStyle(rtn.vroot.formId);
-            dom.clearWatchProperty(rtn.vroot.formId);
-            native.clear(formId, t.id);
-            // --- 移除 style ---
-            dom.removeStyle(rtn.vroot.taskId, 'form', rtn.vroot.formId);
-            return -8;
+            const msg = `Message: ${err.message}\nTask id: ${t.id}\nForm id: ${formId}\nFunction: form.create, unmount.`;
+            notify({
+                'title': 'Form Unmount Error',
+                'content': msg,
+                'type': 'danger'
+            });
+            console.log('Form Unmount Error', msg, err);
         }
+        rtn.vapp._container.remove();
+        elements.popList.querySelector('[data-form-id="' + rtn.vroot.formId + '"]')?.remove();
+        dom.clearWatchStyle(rtn.vroot.formId);
+        dom.clearWatchProperty(rtn.vroot.formId);
+        native.clear(formId, t.id);
+        // --- 移除 style ---
+        dom.removeStyle(rtn.vroot.taskId, 'form', rtn.vroot.formId);
+        throw err;
     }
     // --- 触发 formCreated 事件 ---
-    core.trigger('formCreated', opt.taskId, formId, rtn.vroot.$refs.form.title, rtn.vroot.$refs.form.iconDataUrl);
+    core.trigger('formCreated', t.id, formId, rtn.vroot.$refs.form.title, rtn.vroot.$refs.form.iconDataUrl);
     // --- 同步的窗体先进行同步一下 ---
     if (rtn.vroot.isNativeSync) {
         await native.invoke('cg-set-size', native.getToken(), rtn.vroot.$refs.form.$el.offsetWidth, rtn.vroot.$refs.form.$el.offsetHeight);
@@ -2217,7 +2648,7 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
             rtn.vroot.$refs.form.setPropData('height', window.innerHeight);
         });
     }
-    return formId;
+    return rtn.vroot as any;
 }
 
 /**
@@ -2231,6 +2662,7 @@ export function dialog(opt: string | types.IFormDialogOptions): Promise<string>
                 'content': opt
             };
         }
+        const filename = tool.urlResolve(opt.path ?? '/', './tmp' + (Math.random() * 100000000000000).toFixed() + '.js');
         const nopt = opt;
         const taskId = nopt.taskId;
         if (!taskId) {
@@ -2249,6 +2681,10 @@ export function dialog(opt: string | types.IFormDialogOptions): Promise<string>
         const cls = class extends AbstractForm {
             public buttons = nopt.buttons;
 
+            public get filename(): string {
+                return filename;
+            }
+
             public get taskId(): number {
                 return taskId;
             }
@@ -2267,7 +2703,10 @@ export function dialog(opt: string | types.IFormDialogOptions): Promise<string>
                 }
             }
         };
-        cls.create(undefined, `<form title="${nopt.title ?? 'dialog'}" min="false" max="false" resize="false" height="0" width="0" border="${nopt.title ? 'normal' : 'plain'}" direction="v"><dialog :buttons="buttons" @select="select"${nopt.direction ? ` direction="${nopt.direction}"` : ''}>${nopt.content}</dialog></form>`).then((frm) => {
+        create(cls, undefined, {
+            'layout': `<form title="${nopt.title ?? 'dialog'}" min="false" max="false" resize="false" height="0" width="0" border="${nopt.title ? 'normal' : 'plain'}" direction="v"><dialog :buttons="buttons" @select="select"${nopt.direction ? ` direction="${nopt.direction}"` : ''}>${nopt.content}</dialog></form>`,
+            'style': nopt.style
+        }, t.id).then((frm) => {
             if (typeof frm === 'number') {
                 resolve('');
                 return;