表单布局控制

// 基础布局控制示例
(function() {
  kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
    const layout = kinlink.layoutApi;
    
    // 隐藏页眉
    layout.hideHeader();
    
    // 获取内容区域高度
    const contentHeight = layout.getContentAreaHeight();
    console.log('可用内容区域高度:', contentHeight);
  });
})();

// 响应式布局示例
(function() {
  kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
    const layout = kinlink.layoutApi;
    const form = kinlink.formApi;
    
    if (layout.checkIsMobileDevice()) {
      // 移动端布局优化
      layout.mobileHideFormActionBar();
      
      // 简化表单
      ['详细描述', '附加信息'].forEach(field => {
        form.hideField(field);
      });
      
      // 调整输入框大小
      ['姓名', '电话'].forEach(field => {
        form.setFieldComponentStyle(field, {
          fontSize: '16px',
          padding: '12px 8px'
        });
      });
    }
  });
  
  // 监听布局变化
  const cleanup = kinlink.layoutApi.onLayoutChange((detail) => {
    const { element, visible, height } = detail;
    console.log(`布局元素 ${element} 变化: 可见性=${visible}, 高度=${height}px`);
  });
})();

// 自定义布局示例
(function() {
  kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
    const layout = kinlink.layoutApi;
    const form = kinlink.formApi;
    
    if (layout.checkIsMobileDevice()) {
      // 创建自定义移动端操作栏
      layout.mobileHideFormActionBar();
      
      const customBar = document.createElement('div');
      customBar.style.position = 'fixed';
      customBar.style.bottom = '0';
      customBar.style.left = '0';
      customBar.style.right = '0';
      customBar.style.padding = '12px';
      customBar.style.backgroundColor = '#fff';
      customBar.style.boxShadow = '0 -2px 8px rgba(0,0,0,0.1)';
      customBar.style.zIndex = '100';
      
      const submitBtn = document.createElement('button');
      submitBtn.textContent = '提交';
      submitBtn.onclick = () => form.submit();
      submitBtn.style.width = '100%';
      submitBtn.style.padding = '12px';
      submitBtn.style.backgroundColor = '#1890ff';
      submitBtn.style.color = '#fff';
      submitBtn.style.border = 'none';
      submitBtn.style.borderRadius = '4px';
      
      customBar.appendChild(submitBtn);
      document.body.appendChild(customBar);
    }
  });
})();