clickgo 3.1.2-dev11 → 3.1.4-dev13

package/dist/lib/form.ts

@@ -23,6 +23,9 @@ import * as control from './control';
 import * as fs from './fs';
 import * as native from './native';
 
+/** --- 当前有焦点的窗体 id --- */
+let focusId: number | null = null;
+
 /** --- form 相关信息 --- */
 const info: {
     /** --- 最后一个窗体 id --- */
@@ -76,7 +79,7 @@ const info: {
 };
 
 /** --- 窗体的抽象类 --- */
-export class AbstractForm {
+export abstract class AbstractForm {
 
     /**
      * --- 创建窗体工厂函数 ---
@@ -84,7 +87,7 @@ export class AbstractForm {
      * @param layout 是否使用此参数替换 layout 值
      */
     public static async create(data?: Record<string, any>, layout?: string): Promise<AbstractForm | number> {
-        const frm = new this();
+        const frm: AbstractForm = new (this as any)();
         /** --- 要挂载的 vue 参数 --- */
         const code: types.IFormCreateCode = {
             'data': {},
@@ -121,6 +124,11 @@ export class AbstractForm {
         /** --- 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) {
@@ -229,7 +237,7 @@ export class AbstractForm {
     }
 
     /** --- layout 中 :class 的转义 --- */
-    public classPrepend(): (cla: any) => string {
+    public get classPrepend(): (cla: any) => string {
         return (cla: any): string => {
             if (typeof cla !== 'string') {
                 return cla;
@@ -239,15 +247,18 @@ export class AbstractForm {
         };
     }
 
+    /** --- 当前窗体是否和 native 的实体窗体大小、状态同步 --- */
+    public isNativeSync: boolean = false;
+
     /**
      * --- 监视变动 ---
      * @param name 监视的属性
      * @param cb 回调
      * @param opt 参数
      */
-    public watch<T extends this, TK extends keyof T>(
-        name: TK,
-        cb: (val: T[TK], old: T[TK]) => void | Promise<void>,
+    public watch<T extends this, TK extends keyof T, TR>(
+        name: TK | (() => TR),
+        cb: (val: T[TK] & TR, old: T[TK] & TR) => void | Promise<void>,
         opt: {
             'immediate'?: boolean;
             'deep'?: boolean;
@@ -374,9 +385,9 @@ export class AbstractForm {
      * --- 显示独占的窗体 ---
      */
     public async showDialog(): Promise<string> {
-        this.topMost = true;
-        this.show();
         task.list[this.taskId].runtime.dialogFormIds.push(this.formId);
+        this.show();
+        this.topMost = true;
         return new Promise((resolve) => {
             (this as any).cgDialogCallback = () => {
                 resolve(this.dialogResult);
@@ -392,6 +403,13 @@ export class AbstractForm {
         v.$refs.form.$data.isShow = false;
     }
 
+    /**
+     * --- 关闭当前窗体 ---
+     */
+    public close(): void {
+        close(this.formId);
+    }
+
     /**
      * --- dialog mask 窗体返回值，在 close 之后会进行传导 ---
      */
@@ -411,6 +429,7 @@ export class AbstractForm {
         return;
     }
 
+    public onMounted(obj: Record<string, any>): void | Promise<void>;
     public onMounted(): void | Promise<void> {
         return;
     }
@@ -529,6 +548,12 @@ export class AbstractForm {
         return;
     }
 
+    /** --- location hash 改变事件 --- */
+    public onHashChanged(hash: string): void | Promise<void>;
+    public onHashChanged(): void {
+        return;
+    }
+
 }
 
 /** --- pop 相关信息 --- */
@@ -547,7 +572,11 @@ const popInfo: {
 
 export let simpleSystemTaskRoot: types.IVue;
 export let launcherRoot: types.IVue;
-const elements: {
+
+/** --- 系统级 confirm 的用户回调函数 --- */
+let superConfirmHandler: undefined | ((result: boolean) => void | Promise<void>) = undefined;
+
+export const elements: {
     'wrap': HTMLDivElement;
     'list': HTMLDivElement;
     'popList': HTMLDivElement;
@@ -555,10 +584,10 @@ const elements: {
     'rectangle': HTMLDivElement;
     'gesture': HTMLDivElement;
     'drag': HTMLDivElement;
-    'dragIcon'?: HTMLElement;
-    'system': HTMLElement;
-    'simpleSystemtask': HTMLDivElement;
+    'notify': HTMLElement;
+    'simpletask': HTMLDivElement;
     'launcher': HTMLDivElement;
+    'confirm': HTMLDivElement;
     'init': () => void;
 } = {
     'wrap': document.createElement('div'),
@@ -568,28 +597,15 @@ const elements: {
     'rectangle': document.createElement('div'),
     'gesture': document.createElement('div'),
     'drag': document.createElement('div'),
-    'dragIcon': undefined,
-    'system': document.createElement('div'),
-    'simpleSystemtask': document.createElement('div'),
+    'notify': document.createElement('div'),
+    'simpletask': document.createElement('div'),
     'launcher': document.createElement('div'),
+    'confirm': document.createElement('div'),
     'init': function() {
         /** --- clickgo 所有的 div wrap --- */
         this.wrap.id = 'cg-wrap';
         document.getElementsByTagName('body')[0].appendChild(this.wrap);
-        if (clickgo.isImmersion()) {
-            // --- 只有沉浸式模式（Windows 下非 frame 的 native）才会绑定这个事件 ---
-            this.wrap.addEventListener('mouseenter', function() {
-                native.invoke('cg-mouse-ignore', native.getToken(), false);
-            });
-            this.wrap.addEventListener('mouseleave', function() {
-                native.invoke('cg-mouse-ignore', native.getToken(), true);
-            });
-        }
-
-        /** --- form list 的 div --- */
-        this.list.id = 'cg-form-list';
-        this.wrap.appendChild(this.list);
-        this.list.addEventListener('touchmove', function(e): void {
+        this.wrap.addEventListener('touchmove', function(e): void {
             // --- 防止拖动时整个网页跟着动 ---
             if (e.cancelable) {
                 e.preventDefault();
@@ -598,28 +614,32 @@ const elements: {
         }, {
             'passive': false
         });
-        this.list.addEventListener('wheel', function(e): void {
-            // --- 防止不小心前进后退，或上下缓动滚动（Mac） ---
+        this.wrap.addEventListener('wheel', function(e): void {
+            // --- 防止不小心前进后退，或上下缓动滚动（Mac、触摸板） ---
             e.preventDefault();
         }, {
             'passive': false
         });
-        this.list.addEventListener('contextmenu', function(e): void {
+        this.wrap.addEventListener('contextmenu', function(e): void {
             e.preventDefault();
         });
+        if (clickgo.isImmersion()) {
+            // --- 只有沉浸式模式（Windows 下非 frame 的 native）才会绑定这个事件 ---
+            this.wrap.addEventListener('mouseenter', function() {
+                native.invoke('cg-mouse-ignore', native.getToken(), false) as any;
+            });
+            this.wrap.addEventListener('mouseleave', function() {
+                native.invoke('cg-mouse-ignore', native.getToken(), true) as any;
+            });
+        }
+
+        /** --- form list 的 div --- */
+        this.list.id = 'cg-form-list';
+        this.wrap.appendChild(this.list);
 
         /** --- pop list 的 div --- */
         this.popList.id = 'cg-pop-list';
-        this.popList.addEventListener('contextmenu', function(e): void {
-            e.preventDefault();
-        });
         this.wrap.appendChild(this.popList);
-        this.popList.addEventListener('touchmove', function(e): void {
-            // --- 防止拖动时整个网页跟着动 ---
-            e.preventDefault();
-        }, {
-            'passive': false
-        });
 
         // --- 从鼠标指针处从小到大缩放然后淡化的圆圈动画特效对象 ---=
         this.circular.id = 'cg-circular';
@@ -637,34 +657,15 @@ const elements: {
         // --- drag drop 的拖动占位符 ---
         this.drag.id = 'cg-drag';
         this.drag.innerHTML = '<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 8L40 40" stroke="#FFF" stroke-width="4" stroke-linecap="butt" stroke-linejoin="miter"/><path d="M8 40L40 8" stroke="#FFF" stroke-width="4" stroke-linecap="butt" stroke-linejoin="miter"/></svg>';
-        this.dragIcon = this.drag.childNodes[0] as HTMLElement;
         this.wrap.appendChild(this.drag);
 
         // --- 添加 cg-system 的 dom ---
-        this.system.id = 'cg-system';
-        this.system.addEventListener('contextmenu', function(e): void {
-            e.preventDefault();
-        });
-        this.wrap.appendChild(this.system);
-        this.system.addEventListener('touchmove', function(e): void {
-            // --- 防止拖动时整个网页跟着动 ---
-            e.preventDefault();
-        }, {
-            'passive': false
-        });
+        this.notify.id = 'cg-notify';
+        this.wrap.appendChild(this.notify);
 
         // --- 添加 cg-simpletask 的 dom ---
-        this.simpleSystemtask.id = 'cg-simpletask';
-        this.simpleSystemtask.addEventListener('contextmenu', function(e): void {
-            e.preventDefault();
-        });
-        this.wrap.appendChild(this.simpleSystemtask);
-        this.simpleSystemtask.addEventListener('touchmove', function(e): void {
-            // --- 防止拖动时整个网页跟着动 ---
-            e.preventDefault();
-        }, {
-            'passive': false
-        });
+        this.simpletask.id = 'cg-simpletask';
+        this.wrap.appendChild(this.simpletask);
         const simpletaskApp = clickgo.vue.createApp({
             'template': '<div v-for="(item, formId) of forms" class="cg-simpletask-item" @click="click(parseInt(formId))"><div v-if="item.icon" class="cg-simpletask-icon" :style="{\'background-image\': \'url(\' + item.icon + \')\'}"></div><div>{{item.title}}</div></div>',
             'data': function() {
@@ -677,14 +678,14 @@ const elements: {
                     handler: function(this: types.IVue) {
                         const length = Object.keys(this.forms).length;
                         if (length > 0) {
-                            if (elements.simpleSystemtask.style.bottom !== '0px') {
-                                elements.simpleSystemtask.style.bottom = '0px';
+                            if (elements.simpletask.style.bottom !== '0px') {
+                                elements.simpletask.style.bottom = '0px';
                                 core.trigger('screenResize');
                             }
                         }
                         else {
-                            if (elements.simpleSystemtask.style.bottom === '0px') {
-                                elements.simpleSystemtask.style.bottom = '-46px';
+                            if (elements.simpletask.style.bottom === '0px') {
+                                elements.simpletask.style.bottom = '-46px';
                                 core.trigger('screenResize');
                             }
                         }
@@ -705,23 +706,14 @@ const elements: {
 
         // --- cg-launcher ---
         this.launcher.id = 'cg-launcher';
-        this.launcher.addEventListener('contextmenu', function(e): void {
-            e.preventDefault();
-        });
         this.wrap.appendChild(this.launcher);
-        this.launcher.addEventListener('touchmove', function(e): void {
-            // --- 防止拖动时整个网页跟着动 ---
-            e.preventDefault();
-        }, {
-            'passive': false
-        });
         // --- Vue 挂载在这里 ---
         const waiting = function(): void {
             // --- 必须在这里执行，要不然 computed 无法更新，因为 core 还没加载进来 ---
             if (!core.config) {
                 setTimeout(function() {
                     waiting();
-                }, 2000);
+                }, 150);
                 return;
             }
             const launcherApp = clickgo.vue.createApp({
@@ -752,7 +744,8 @@ const elements: {
                 'data': function() {
                     return {
                         'name': '',
-                        'folderName': ''
+                        'folderName': '',
+                        'folderItem': {}
                     };
                 },
                 'computed': {
@@ -888,10 +881,58 @@ const elements: {
             launcherApp.mount('#cg-launcher');
         };
         waiting();
+
+        // --- cg-confirm ---
+        this.confirm.id = 'cg-confirm';
+        this.wrap.appendChild(this.confirm);
+
+        this.confirm.innerHTML = `<div class="cg-confirm-box">` +
+            `<div id="cg-confirm-content"></div>` +
+            `<div class="cg-confirm-controls">` +
+                `<div id="cg-confirm-cancel"></div>` +
+                `<div id="cg-confirm-ok"></div>` +
+            `</div>` +
+        `</div>`;
+        this.confirm.style.display = 'none';
+        document.getElementById('cg-confirm-cancel')!.addEventListener('click', () => {
+            superConfirmHandler?.(false) as any;
+            this.confirm.style.display = 'none';
+            const fid = getMaxZIndexID();
+            if (fid) {
+                changeFocus(fid);
+            }
+        });
+        document.getElementById('cg-confirm-ok')!.addEventListener('click', () => {
+            superConfirmHandler?.(true) as any;
+            this.confirm.style.display = 'none';
+            const fid = getMaxZIndexID();
+            if (fid) {
+                changeFocus(fid);
+            }
+        });
+
     }
 };
 elements.init();
 
+/** --- 显示系统级询问框，App 模式下无效 --- */
+export function superConfirm(html: string): Promise<boolean> {
+    return new Promise((resolve) => {
+        if (superConfirmHandler !== undefined) {
+            resolve(false);
+            return;
+        }
+        elements.confirm.style.display = 'flex';
+        document.getElementById('cg-confirm-content')!.innerHTML = html;
+        document.getElementById('cg-confirm-cancel')!.innerHTML = info.locale[core.config.locale]?.cancel ?? info.locale['en'].cancel;
+        document.getElementById('cg-confirm-ok')!.innerHTML = info.locale[core.config.locale]?.ok ?? info.locale['en'].ok;
+        superConfirmHandler = (result: boolean) => {
+            superConfirmHandler = undefined;
+            resolve(result);
+        };
+    });
+}
+
 /**
  * --- 修改窗体的最大化、最小化状态，外部或不可调整 state 时才调用 ---
  * @param state 最大化、最小化或关闭
@@ -1088,6 +1129,13 @@ export function getList(taskId: number): Record<string, types.IFormInfo> {
     return list;
 }
 
+/**
+ * --- 获取当前有焦点的窗体 form id ---
+ */
+export function getFocus(): number | null {
+    return focusId;
+}
+
 /**
  * --- 改变 form 的焦点 class ---
  * @param formId 变更后的 form id
@@ -1101,31 +1149,25 @@ export function changeFocus(formId: number = 0): void {
         });
         return;
     }
-    const focusElement = document.querySelector('#cg-form-list > [data-form-focus]');
-    if (focusElement) {
-        const dataFormId = focusElement.getAttribute('data-form-id');
-        if (dataFormId) {
-            const dataFormIdNumber = parseInt(dataFormId);
-            if (dataFormIdNumber === formId) {
-                return;
-            }
-            else {
-                const taskId = parseInt(focusElement.getAttribute('data-task-id') ?? '0');
-                const t = task.list[taskId];
-                t.forms[dataFormIdNumber].vapp._container.removeAttribute('data-form-focus');
-                t.forms[dataFormIdNumber].vroot._formFocus = false;
-                // --- 触发 formBlurred 事件 ---
-                core.trigger('formBlurred', taskId, dataFormIdNumber);
-            }
+    const dataFormId = getFocus();
+    if (dataFormId) {
+        if (dataFormId === formId) {
+            return;
         }
         else {
-            return;
+            const t = task.list[task.getFocus()!];
+            t.forms[dataFormId].vapp._container.removeAttribute('data-form-focus');
+            t.forms[dataFormId].vroot._formFocus = false;
+            // --- 触发 formBlurred 事件 ---
+            core.trigger('formBlurred', t.id, dataFormId);
         }
     }
+    focusId = null;
+    task.setFocus();
     if (formId === 0) {
         return;
     }
-    const el = document.querySelector(`#cg-form-list > [data-form-id='${formId}']`);
+    const el = elements.list.querySelector(`.cg-form-wrap[data-form-id='${formId}']`);
     if (!el) {
         return;
     }
@@ -1153,6 +1195,8 @@ export function changeFocus(formId: number = 0): void {
         // --- 开启 focus ---
         t.forms[dialogFormId].vapp._container.dataset.formFocus = '';
         t.forms[dialogFormId].vroot._formFocus = true;
+        focusId = dialogFormId;
+        task.setFocus(t.id);
         // --- 触发 formFocused 事件 ---
         core.trigger('formFocused', taskId, dialogFormId);
         // --- 判断点击的窗体是不是就是 dialog mask 窗体本身 ---
@@ -1172,6 +1216,8 @@ export function changeFocus(formId: number = 0): void {
         // --- 正常开启 focus ---
         t.forms[formId].vapp._container.dataset.formFocus = '';
         t.forms[formId].vroot._formFocus = true;
+        focusId = formId;
+        task.setFocus(t.id);
         // --- 触发 formFocused 事件 ---
         core.trigger('formFocused', taskId, formId);
     }
@@ -1418,14 +1464,10 @@ export function moveDrag(opt: types.IMoveDragOptions): void {
         elements.drag.style.height = opt.height.toString() + 'px';
     }
     if (opt.icon) {
-        if (elements.dragIcon) {
-            elements.dragIcon.style.display = 'block';
-        }
+        (elements.drag.childNodes[0] as HTMLElement).style.display = 'block';
     }
     else {
-        if (elements.dragIcon) {
-            elements.dragIcon.style.display = 'none';
-        }
+        (elements.drag.childNodes[0] as HTMLElement).style.display = 'none';
     }
 }
 
@@ -1462,21 +1504,21 @@ export function notify(opt: types.INotifyOptions): number {
     // --- 创建 notify element ---
     const el = document.createElement('div');
     const y = notifyTop;
-    el.classList.add('cg-system-notify');
+    el.classList.add('cg-notify-wrap');
     el.setAttribute('data-notifyid', nid.toString());
     el.style.transform = `translateY(${y}px) translateX(280px)`;
     el.style.opacity = '1';
-    el.innerHTML = `<div class="cg-system-icon cg-${tool.escapeHTML(opt.type ?? 'primary')}"></div>
+    el.innerHTML = `<div class="cg-notify-icon cg-${tool.escapeHTML(opt.type ?? 'primary')}"></div>
 <div style="flex: 1;">
-    <div class="cg-system-notify-title">${tool.escapeHTML(opt.title)}</div>
-    <div class="cg-system-notify-content">${tool.escapeHTML(opt.content).replace(/\r\n/g, '\n').replace(/\r/g, '\n').replace(/\n/g, '<br>')}</div>
-    ${opt.progress ? '<div class="cg-system-notify-progress"></div>' : ''}
+    <div class="cg-notify-title">${tool.escapeHTML(opt.title)}</div>
+    <div class="cg-notify-content">${tool.escapeHTML(opt.content).replace(/\r\n/g, '\n').replace(/\r/g, '\n').replace(/\n/g, '<br>')}</div>
+    ${opt.progress ? '<div class="cg-notify-progress"></div>' : ''}
 </div>`;
     if (opt.icon) {
         (el.childNodes.item(0) as HTMLElement).style.background = 'url(' + opt.icon + ')';
         (el.childNodes.item(0) as HTMLElement).style.backgroundSize = '16px';
     }
-    elements.system.appendChild(el);
+    elements.notify.appendChild(el);
     notifyTop += el.offsetHeight + 10;
     requestAnimationFrame(function() {
         el.style.transform = `translateY(${y}px) translateX(-10px)`;
@@ -1494,11 +1536,11 @@ export function notify(opt: types.INotifyOptions): number {
  * @param per 进度，0 - 100 或 0% - 100% (0 - 1)
  */
 export function notifyProgress(notifyId: number, per: number): void {
-    const el: HTMLElement = elements.system.querySelector(`[data-notifyid="${notifyId}"]`)!;
+    const el: HTMLElement = elements.notify.querySelector(`[data-notifyid="${notifyId}"]`)!;
     if (!el) {
         return;
     }
-    const progress: HTMLElement = el.querySelector('.cg-system-notify-progress')!;
+    const progress: HTMLElement = el.querySelector('.cg-notify-progress')!;
     if (!progress) {
         return;
     }
@@ -1522,7 +1564,7 @@ export function notifyProgress(notifyId: number, per: number): void {
  * @param notifyId 要隐藏的 notify id
  */
 export function hideNotify(notifyId: number): void {
-    const el: HTMLElement = elements.system.querySelector(`[data-notifyid="${notifyId}"]`)!;
+    const el: HTMLElement = elements.notify.querySelector(`[data-notifyid="${notifyId}"]`)!;
     if (!el) {
         return;
     }
@@ -1531,7 +1573,7 @@ export function hideNotify(notifyId: number): void {
     el.style.opacity = '0';
     setTimeout(function() {
         notifyTop -= notifyHeight + 10;
-        const notifyElementList = document.getElementsByClassName('cg-system-notify') as HTMLCollectionOf<HTMLDivElement>;
+        const notifyElementList = document.getElementsByClassName('cg-notify-wrap') as HTMLCollectionOf<HTMLDivElement>;
         let needSub = false;
         for (const notifyElement of notifyElementList) {
             if (notifyElement === el) {
@@ -1851,6 +1893,7 @@ export function remove(formId: number): boolean {
             }
             task.list[taskId].forms[formId].vapp.unmount();
             task.list[taskId].forms[formId].vapp._container.remove();
+            elements.popList.querySelector('[data-form-id="' + formId.toString() + '"]')?.remove();
             if (io > -1) {
                 // --- 如果是 dialog 则要执行回调 ---
                 task.list[taskId].forms[formId].vroot.cgDialogCallback();
@@ -1860,6 +1903,9 @@ export function remove(formId: number): boolean {
             dom.removeStyle(taskId, 'form', formId);
             // --- 触发 formRemoved 事件 ---
             core.trigger('formRemoved', taskId, formId, title, icon);
+            dom.clearWatchStyle(formId);
+            dom.clearWatchProperty(formId);
+            native.clear(formId, taskId);
             // --- 检测是否已经没有窗体了，如果没有了的话就要结束任务了 ---
             if (Object.keys(task.list[taskId].forms).length === 0) {
                 task.end(taskId);
@@ -1912,6 +1958,7 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
     }
     // --- 准备相关变量 ---
     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;
@@ -1924,6 +1971,7 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
     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;
@@ -1965,8 +2013,13 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
     layout = layout.replace(/@(touchstart|touchmove|wheel)=/g, '@$1.passive=');
     layout = layout.replace(/@(touchstart|touchmove|wheel)\.not=/g, '@$1=');
     */
+    // --- 给 teleport 做处理 ---
+    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;
     // --- 创建窗体对象 ---
@@ -2039,6 +2092,10 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
             return;
         }
     };
+    // --- 判断是否要与 native 实体窗体大小同步 ---
+    if (clickgo.isNative() && (formId === 1) && !clickgo.isImmersion() && !clickgo.hasFrame()) {
+        data.isNativeSync = true;
+    }
     // --- 挂载 style ---
     if (style) {
         // --- 窗体的 style ---
@@ -2058,7 +2115,10 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
             'computed': computed,
 
             'beforeCreate': beforeCreate,
-            'created': created,
+            'created': function(this: types.IVue) {
+                this.access = tool.clone(access);
+                created?.call(this);
+            },
             'beforeMount': beforeMount,
             'mounted': async function(this: types.IVue) {
                 await this.$nextTick();
@@ -2122,21 +2182,36 @@ export async function create(opt: types.IFormCreateOptions): Promise<number> {
             await mounted.call(rtn.vroot, opt.data);
         }
         catch (err: any) {
+            // --- 窗体创建失败，做垃圾回收 ---
             core.trigger('error', rtn.vroot.taskId, rtn.vroot.formId, err, 'Create form mounted error.');
-            t.forms[formId] = undefined as any;
             delete t.forms[formId];
-            rtn.vapp.unmount();
+            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;
         }
     }
     // --- 触发 formCreated 事件 ---
     core.trigger('formCreated', opt.taskId, formId, rtn.vroot.$refs.form.title, rtn.vroot.$refs.form.iconDataUrl);
-    // --- 判断是否要与 native 实体窗体大小同步 ---
-    if (clickgo.isNative() && (formId === 1) && !clickgo.isImmersion() && !clickgo.hasFrame()) {
-        rtn.vroot.$refs.form.isNativeSync = true;
-        native.invoke('cg-set-size', native.getToken(), rtn.vroot.$refs.form.$el.offsetWidth, rtn.vroot.$refs.form.$el.offsetHeight);
+    // --- 同步的窗体先进行同步一下 ---
+    if (rtn.vroot.isNativeSync) {
+        await native.invoke('cg-set-size', native.getToken(), rtn.vroot.$refs.form.$el.offsetWidth, rtn.vroot.$refs.form.$el.offsetHeight);
         window.addEventListener('resize', function(): void {
             rtn.vroot.$refs.form.setPropData('width', window.innerWidth);
             rtn.vroot.$refs.form.setPropData('height', window.innerHeight);
@@ -2192,7 +2267,7 @@ 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" border="${nopt.title ? 'normal' : 'plain'}" direction="v"><dialog :buttons="buttons" @select="select"${nopt.direction ? ` direction="${nopt.direction}"` : ''}>${nopt.content}</dialog></form>`).then((frm) => {
+        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) => {
             if (typeof frm === 'number') {
                 resolve('');
                 return;