FormWizard - 表单/问卷构建器

当前表单 0 个字段

字段工具箱

T 单行文本

¶ 多行文本

◉ 单选

☐ 多选

▼ 下拉选择

@ 邮箱

✆ 电话

↑ 文件上传

从左侧点击或拖拽字段到此处

字段属性

选择字段以编辑属性

`;
      case 'radio': return `      <div>${f.options.map(o => `<label><input type="radio" name="${f.id}" value="${escHtml(o)}"${req} /> ${escHtml(o)}</label>`).join('\n        ')}</div>`;
      case 'checkbox': return `      <div>${f.options.map(o => `<label><input type="checkbox" value="${escHtml(o)}" /> ${escHtml(o)}</label>`).join('\n        ')}</div>`;
      case 'select': return `      <select${req}>\n${f.options.map(o => `        <option value="${escHtml(o)}">${escHtml(o)}</option>`).join('\n')}\n      </select>`;
      case 'file': return `      <input type="file"${f.accept?` accept="${f.accept}"`:''}${req} />`;
      default: return '';
    }
  }).join('\n');

const code = `import React, { useState } from 'react';

const FormBuilder = () => {
  const [formData, setFormData] = useState({});

const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form data:', formData);
    alert('表单已提交（演示）');
  };

const handleChange = (name, value) => {
    setFormData(prev => ({ ...prev, [name]: value }));
  };

return (
    <form onSubmit={handleSubmit} style={{
      maxWidth: 640,
      margin: '0 auto',
      padding: 24,
      fontFamily: '-apple-system, sans-serif',
      background: '#000',
      color: '#fff',
    }}>
${fieldsCode}
      <button type="submit" style={{
        background: 'rgba(139,139,248,0.6)',
        color: '#fff',
        border: 'none',
        borderRadius: 10,
        padding: '12px 32px',
        fontSize: 15,
        fontWeight: 600,
        cursor: 'pointer',
        width: '100%',
        marginTop: 16,
      }}>提交</button>
    </form>
  );
};

export default FormBuilder;`;

if (navigator.clipboard) navigator.clipboard.writeText(code).then(() => showToast('React 代码已复制'));
  else showToast('复制失败');
});

$('clearFormBtn').addEventListener('click', () => {
  state.fields = [];
  state.selectedId = null;
  renderCanvas();
  renderProperties();
  saveCurrent();
  showToast('表单已清空');
});

function escHtml(str) {
  if (!str) return '';
  const d = document.createElement('div');
  d.textContent = str;
  return d.innerHTML;
}

/* Init */
loadSaved();
renderCanvas();
if (state.fields.length > 0) {
  state.selectedId = state.fields[0].id;
  renderProperties();
}
</script>
<script src="../shared/nav-bar.js"></script>
</body>
</html>