隐藏kintone标签示例

/**
* 示例12: 隐藏kintone标签
* 功能：隐藏指定字段的原生标签，创造简洁界面
*/
(function () {
kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
  try {
    // 定义需要隐藏标签的字段列表
    const fieldsToHideLabels = [
      '文字列__1行__0',  // 姓名字段
      '文字列__1行__1',  // 假名字段
      '文字列__1行__2',  // 电话字段
      '文字列__1行__3',  // 邮箱字段
      '单行文本框_10',   // 公司字段
      '单行文本框_11'    // 身份证字段
    ];

    console.log('开始隐藏字段标签...');

    // 批量隐藏标签
    hideMultipleLabels(fieldsToHideLabels);

    // 创建标签控制面板
    const controlPanel = createLabelControlPanel(fieldsToHideLabels);
    
    // 将控制面板添加到表单顶部
    const formElement = document.querySelector('.ant-form') || document.body;
    formElement.insertBefore(controlPanel, formElement.firstChild);

    // 为字段添加占位符，补偿隐藏的标签
    addPlaceholdersForHiddenLabels(fieldsToHideLabels);

    // 移动端优化处理
    setupMobileOptimization();

    console.log('标签隐藏设置完成');

  } catch (error) {
    console.error('隐藏kintone标签失败:', error);
  }
});

// 批量隐藏标签
function hideMultipleLabels(fieldCodes) {
  fieldCodes.forEach((fieldCode, index) => {
    try {
      kinlink.formApi.hideFieldLabel(fieldCode);
      console.log(`已隐藏字段 ${fieldCode} 的标签`);
      
      // 添加渐进式隐藏效果
      setTimeout(() => {
        const element = kinlink.formApi.getFieldElement(fieldCode);
        if (element) {
          addHiddenLabelEffect(element);
        }
      }, index * 100); // 延迟执行，创造渐进效果
      
    } catch (error) {
      console.warn(`隐藏字段 ${fieldCode} 标签失败:`, error);
    }
  });
}

// 创建标签控制面板
function createLabelControlPanel(fieldCodes) {
  const panel = document.createElement('div');
  panel.className = 'label-control-panel';
  panel.style.cssText = `
    margin: 15px 0;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  `;

  panel.innerHTML = `
    <div style="text-align: center; margin-bottom: 20px;">
      <h3 style="margin: 0 0 10px 0; font-size: 20px; font-weight: 600;">
        🏷️ 标签显示控制中心
      </h3>
      <div style="font-size: 14px; opacity: 0.9;">
        已隐藏 ${fieldCodes.length} 个字段标签，简化界面显示
      </div>
    </div>
    
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 15px;">
      <button id="toggleAllLabels" style="padding: 12px; background: rgba(255,255,255,0.2); color: white; border: 2px solid rgba(255,255,255,0.3); border-radius: 8px; cursor: pointer; transition: all 0.3s ease; font-weight: 500;">
        👁️ 切换所有标签
      </button>
      <button id="showLabelInfo" style="padding: 12px; background: rgba(255,255,255,0.2); color: white; border: 2px solid rgba(255,255,255,0.3); border-radius: 8px; cursor: pointer; transition: all 0.3s ease; font-weight: 500;">
        ℹ️ 显示标签状态
      </button>
      <button id="optimizeLayout" style="padding: 12px; background: rgba(255,255,255,0.2); color: white; border: 2px solid rgba(255,255,255,0.3); border-radius: 8px; cursor: pointer; transition: all 0.3s ease; font-weight: 500;">
        📱 优化移动布局
      </button>
      <button id="restoreDefaults" style="padding: 12px; background: rgba(255,255,255,0.2); color: white; border: 2px solid rgba(255,255,255,0.3); border-radius: 8px; cursor: pointer; transition: all 0.3s ease; font-weight: 500;">
        🔄 恢复默认
      </button>
    </div>
    
    <div id="statusDisplay" style="background: rgba(0,0,0,0.2); padding: 10px; border-radius: 6px; font-size: 13px; font-family: monospace;">
      状态：所有标签已隐藏 | 界面已优化
    </div>
  `;

  // 添加按钮悬停效果
  const buttons = panel.querySelectorAll('button');
  buttons.forEach(button => {
    button.addEventListener('mouseenter', function() {
      this.style.background = 'rgba(255,255,255,0.3)';
      this.style.transform = 'translateY(-2px)';
    });
    
    button.addEventListener('mouseleave', function() {
      this.style.background = 'rgba(255,255,255,0.2)';
      this.style.transform = 'translateY(0)';
    });
  });

  // 绑定控制事件
  panel.addEventListener('click', (e) => handleControlPanelClick(e, fieldCodes));

  return panel;
}

// 处理控制面板点击事件
let labelsHidden = true;
function handleControlPanelClick(event, fieldCodes) {
  const target = event.target;
  const statusDisplay = document.getElementById('statusDisplay');
  
  if (target.id === 'toggleAllLabels') {
    toggleAllLabelsVisibility(fieldCodes);
    labelsHidden = !labelsHidden;
    updateStatus(statusDisplay, labelsHidden ? '所有标签已隐藏' : '所有标签已显示');
    
  } else if (target.id === 'showLabelInfo') {
    showLabelStatusInfo(fieldCodes);
    
  } else if (target.id === 'optimizeLayout') {
    optimizeFormLayout();
    updateStatus(statusDisplay, '移动布局已优化');
    
  } else if (target.id === 'restoreDefaults') {
    restoreDefaultLabels(fieldCodes);
    labelsHidden = false;
    updateStatus(statusDisplay, '已恢复默认标签显示');
  }
}

// 更新状态显示
function updateStatus(statusElement, message) {
  if (statusElement) {
    const timestamp = new Date().toLocaleTimeString();
    statusElement.innerHTML = `状态：${message} | 更新时间：${timestamp}`;
  }
}

// 切换所有标签可见性
function toggleAllLabelsVisibility(fieldCodes) {
  fieldCodes.forEach(fieldCode => {
    if (labelsHidden) {
      kinlink.formApi.showFieldLabel(fieldCode);
    } else {
      kinlink.formApi.hideFieldLabel(fieldCode);
    }
  });
  
  kinlink.formApi.showMessage(
    'info', 
    labelsHidden ? '所有标签已显示' : '所有标签已隐藏', 
    2
  );
}

// 显示标签状态信息
function showLabelStatusInfo(fieldCodes) {
  let info = '字段标签状态报告:\n\n';
  
  fieldCodes.forEach(fieldCode => {
    const element = kinlink.formApi.getFieldElement(fieldCode);
    const isVisible = element ? getComputedStyle(element.querySelector('.ant-form-item-label') || element).display !== 'none' : false;
    info += `字段: ${fieldCode}\n标签状态: ${isVisible ? '显示' : '隐藏'}\n\n`;
  });
  
  info += `总计: ${fieldCodes.length} 个字段\n`;
  info += `当前时间: ${new Date().toLocaleString()}`;
  
  alert(info);
}

// 优化表单布局
function optimizeFormLayout() {
  const formItems = document.querySelectorAll('.ant-form-item');
  formItems.forEach(item => {
    // 减少字段间距
    item.style.marginBottom = '16px';
    
    // 优化输入框样式
    const input = item.querySelector('input, textarea, select');
    if (input) {
      input.style.fontSize = '16px'; // 防止移动端缩放
      input.style.padding = '12px';
      input.style.borderRadius = '8px';
      input.style.transition = 'all 0.3s ease';
    }
  });
  
  kinlink.formApi.showMessage('success', '表单布局已优化', 2);
}

// 恢复默认标签
function restoreDefaultLabels(fieldCodes) {
  fieldCodes.forEach(fieldCode => {
    kinlink.formApi.showFieldLabel(fieldCode);
  });
  
  // 移除自定义样式
  const formItems = document.querySelectorAll('.ant-form-item');
  formItems.forEach(item => {
    item.style.marginBottom = '';
    const input = item.querySelector('input, textarea, select');
    if (input) {
      input.style.fontSize = '';
      input.style.padding = '';
      input.style.borderRadius = '';
    }
  });
  
  kinlink.formApi.showMessage('info', '已恢复所有默认设置', 2);
}

// 为隐藏标签的字段添加占位符
function addPlaceholdersForHiddenLabels(fieldCodes) {
  const placeholderTexts = {
    '文字列__1行__0': '请输入您的姓名',
    '文字列__1行__1': '请输入假名读音',
    '文字列__1行__2': '请输入手机号码',
    '文字列__1行__3': '请输入邮箱地址',
    '单行文本框_10': '请输入公司名称',
    '单行文本框_11': '请输入身份证号码'
  };
  
  fieldCodes.forEach(fieldCode => {
    const element = kinlink.formApi.getFieldElement(fieldCode);
    if (element) {
      const input = element.querySelector('input, textarea');
      if (input && placeholderTexts[fieldCode]) {
        input.placeholder = placeholderTexts[fieldCode];
        input.style.fontWeight = '500';
      }
    }
  });
}

// 添加隐藏标签效果
function addHiddenLabelEffect(element) {
  if (element) {
    element.style.transition = 'all 0.3s ease';
    element.style.transform = 'translateX(-10px)';
    setTimeout(() => {
      element.style.transform = 'translateX(0)';
    }, 300);
  }
}

// 移动端优化设置
function setupMobileOptimization() {
  // 检测移动设备
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  
  if (isMobile) {
    // 移动端特殊优化
    const style = document.createElement('style');
    style.textContent = `
      .ant-form-item {
        margin-bottom: 12px !important;
      }
      .ant-input, .ant-select-selector {
        font-size: 16px !important;
        padding: 10px 12px !important;
      }
      .label-control-panel {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
      }
    `;
    document.head.appendChild(style);
    
    console.log('移动端优化已启用');
  }
}
})();