开关 控件 可视化代码生成平台 · 基础输入控件
<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;">可视化代码生成平台 · 基础输入控件（4/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>录入二态状态——启用/停用、显示/隐藏、已读/未读等。<br>
<b>存储：</b><code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">tinyint(1)</code>，开=1、关=0，默认 0。<br>
<b>列表/搜索：</b>列表内可<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;">
<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;">点击即切换 0/1；列表内可直接切换无需进编辑页；开启即时保存时 change 即提交。</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;">tinyint(1)；存 0/1；不搜索（或按相等过滤）；列表渲染为开关而非数字。</td></tr>
</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;">
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<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><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><td style="border:1px solid #e5e7eb;padding:7px 10px;">默认值选 1 或 0（开/关）。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">显示</td><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><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><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><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><td style="border:1px solid #e5e7eb;padding:7px 10px;">停用仅隐藏，不删列不丢数据。</td></tr>
</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>
<div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
<span style="width:46px;height:26px;background:#2563eb;border-radius:999px;position:relative;display:inline-block;vertical-align:middle;"><i style="position:absolute;right:2px;top:2px;width:22px;height:22px;background:#fff;border-radius:50%;"></i></span> 上架
<span style="width:46px;height:26px;background:#cbd5e1;border-radius:999px;position:relative;display:inline-block;vertical-align:middle;"><i style="position:absolute;left:2px;top:2px;width:22px;height:22px;background:#fff;border-radius:50%;"></i></span> 下架
</div>
<pre style="background:#0f172a;color:#e2e8f0;padding:10px 14px;border-radius:8px;font-size:12px;overflow:auto;margin:10px 0 0;">字段名: is_on | 控件: switch | 开文案: 上架 | 关文案: 下架 | 默认: 1</pre>
</div>
<div style="background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:10px;padding:12px 16px;font-size:14px;margin:12px 0;">技巧：系统字段"启用状态"即内置开关行为；自建开关默认继承列表内切换能力。若需"0/1 两值但文案自定义"，用开关而非下拉更直观。</div>
<div style="margin-top:36px;color:#6b7280;font-size:13px;text-align:center;">开关 控件文档 · 随工具迭代更新</div>
页:
[1]