移动端适配

// 基础移动端适配示例
(function() {
  kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
    const layout = kinlink.layoutApi;
    const form = kinlink.formApi;
    
    if (layout.checkIsMobileDevice()) {
      // 隐藏次要字段，简化移动端表单
      ['详细描述', '附加信息'].forEach(field => {
        form.hideField(field);
      });
      
      // 调整输入框大小，优化触控体验
      ['姓名', '电话', '邮箱'].forEach(field => {
        form.setFieldComponentStyle(field, {
          fontSize: '16px',
          padding: '12px 8px',
          height: '48px'
        });
      });
      
      // 自定义移动端操作栏
      layout.mobileHideFormActionBar();
    }
  });
})();

// 响应式布局示例
(function() {
  kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
    const layout = kinlink.layoutApi;
    const form = kinlink.formApi;
    
    if (layout.checkIsMobileDevice()) {
      // 移动端布局优化
      layout.mobileHideFormActionBar();
      
      // 创建自定义操作栏
      const actionBar = document.createElement('div');
      actionBar.style.cssText = `
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px;
        background: #fff;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
        z-index: 100;
        display: flex;
        gap: 8px;
      `;
      
      // 添加操作按钮
      const submitBtn = document.createElement('button');
      submitBtn.textContent = '提交';
      submitBtn.style.cssText = `
        flex: 1;
        padding: 12px;
        background: #1890ff;
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 16px;
      `;
      
      actionBar.appendChild(submitBtn);
      document.body.appendChild(actionBar);
      
      // 调整内容区域，避免被操作栏遮挡
      const content = document.querySelector('.form-content');
      if (content) {
        content.style.paddingBottom = '80px';
      }
    }
  });
})();

// 触控优化示例
(function() {
  kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
    const layout = kinlink.layoutApi;
    const form = kinlink.formApi;
    
    if (layout.checkIsMobileDevice()) {
      // 优化选择器组件
      form.setFieldComponentStyle('部门', {
        height: '48px',
        fontSize: '16px'
      });
      
      // 优化日期选择器
      form.setFieldComponentStyle('日期', {
        height: '48px',
        fontSize: '16px'
      });
      
      // 增大按钮点击区域
      document.querySelectorAll('button').forEach(button => {
        button.style.minHeight = '44px';
        button.style.minWidth = '44px';
      });
      
      // 优化表单间距
      form.setFormStyle({
        gap: '16px',
        padding: '16px'
      });
    }
  });
})();