单行文本 控件 可视化代码生成平台 · 基础输入控件
<div style="max-width:920px;margin:0 auto;font-family:-apple-system,'Microsoft YaHei',sans-serif;color:#1f2937;line-height:1.7;"><div style="background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;border-radius:16px;padding:34px 32px;margin-bottom:24px;">
<div style="margin:0 0 6px;font-size:28px;font-weight:700;">单行文本 控件</div>
<div style="margin:0;opacity:.9;">可视化代码生成平台 · 基础输入控件（1/14）</div>
</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,.04);">
<b>用途：</b>录入短文本——名称、标题、编号、URL、账号、手机号等一行内容。<br>
<b>存储：</b><code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">varchar(255)</code>（长度可配）。<br>
<b>列表/搜索：</b>列表直接显示；搜索为包含匹配（LIKE）。<br>
<b>适用：</b>绝大多数"一个值占一行"的文本字段。
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">控件解析（外观 · 行为交互 · 样式 · 数据）</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tbody><tr><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;width:96px;">维度</th><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>外观</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">单行输入框，圆角浅灰边框；聚焦时边框高亮；占位符灰字提示。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>行为交互</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">点击/聚焦进入输入态；失焦触发必填与最大长度校验；回车不自动提交（由表单级控制）。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>样式</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">边框色、圆角、内边距、宽度随主题或字段属性可调；文字默认左对齐；可加前缀/后缀包裹（如协议、域名）。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>数据</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">varchar(255)（长度可配）；原样存字符串；可搜索为"包含"匹配；前缀/后缀仅展示不参与存储。</td></tr>
</tbody></table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">属性面板（右侧）功能详解</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<div style="font-weight:700;color:#0f172a;margin:0 0 8px;">① 基础设置</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tbody><tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">字段名</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">业务表列名，仅小写字母/数字/下划线，发布后锁定。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">标签</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">表单与列表显示的中文名。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">提示文案</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">控件下方灰字，指导填写者。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">必填</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">开启后保存校验，空则拦截提交。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">默认值</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">新增时的初始文本（可留空）。</td></tr>
</tbody></table>
<div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">② 显示设置</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tbody><tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">进列表</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">是否在列表页显示该列。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">可搜索</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">是否进入搜索区（模糊匹配）。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">排序权重</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">控件在表单/列表中的先后位置。</td></tr>
</tbody></table>
<div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">③ 校验规则</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tbody><tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">最大长度</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">默认 255，超长拦截（同时调表宽）。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">格式正则</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">可选，如手机号 <code style="background:#0f172a;color:#e2e8f0;padding:1px 5px;border-radius:4px;font-size:12px;">^1\d{9}$</code>。</td></tr>
</tbody></table>
<div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">④ 专属属性</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tbody><tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">占位符 placeholder</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">输入框内浅色提示文字。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">前缀 / 后缀</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">如前缀 <code style="background:#0f172a;color:#e2e8f0;padding:1px 5px;border-radius:4px;font-size:12px;">http://</code> + 后缀 <code style="background:#0f172a;color:#e2e8f0;padding:1px 5px;border-radius:4px;font-size:12px;">/</code>，仅展示不入库。</td></tr>
</tbody></table>
<div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">⑤ 高级</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tbody><tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">启用 / 停用</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">停用仅隐藏，不删列不丢数据；同名可复活。</td></tr>
</tbody></table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">演示</div>
<div style="background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:14px 16px;margin:12px 0;">
<span style="font-size:13px;color:#6b7280;display:block;margin-bottom:6px;">商品名称（必填 · 可搜索）</span>
<input style="width:100%;padding:9px 11px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;background:#fff;" type="text" placeholder="请输入商品名称">
<pre style="background:#0f172a;color:#e2e8f0;padding:10px 14px;border-radius:8px;font-size:12px;overflow:auto;margin:10px 0 0;">字段名: goods_name | 控件: text | 必填: 是 | 可搜索: 是 | 最大长度: 120</pre>
</div>
<div style="background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:10px;padding:12px 16px;font-size:14px;margin:12px 0;">技巧：标题/名称类字段务必勾"可搜索"；带固定域名/协议前缀的字段用"前缀/后缀"包裹，避免用户漏填；长度超过 255 请改用多行文本或 text 类型。</div>
<div style="margin-top:36px;color:#6b7280;font-size:13px;text-align:center;">单行文本 控件文档 · 随工具迭代更新</div></div>
页:
[1]