随机生成 控件 可视化代码生成平台 · 辅助类控件
<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;">可视化代码生成平台 · 辅助类控件（14/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>自动产出唯一值——订单号、邀请码、API Key、SKU 编码、短链、流水号等。<br>
<b>存储：</b><code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">varchar(64)</code>（按实际长度）。<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;">
<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;">新增时按规则生成（UUID/序号/时间戳+随机）；可设前缀；唯一性校验提示。</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；存生成串；常作业务单号/邀请码；建议加唯一索引；搜索相等/前缀。</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;">同通用规则（通常非必填，留空即自动生成）。</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;">如 <code style="background:#0f172a;color:#e2e8f0;padding:1px 5px;border-radius:4px;font-size:12px;">SKU</code> / <code style="background:#0f172a;color:#e2e8f0;padding:1px 5px;border-radius:4px;font-size:12px;">ORD</code>，便于业务识别。</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;">可选 <code style="background:#0f172a;color:#e2e8f0;padding:1px 5px;border-radius:4px;font-size:12px;">Ymd</code> 等拼入编号。</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;">长度 N；字符集 A-Z / 0-9 / 混合等。</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;">是否按段加"-"分隔（如 SKU-7F3K-9Q2X）。</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;">SKU 编码（只读 · 可重生成）</span>
<div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;">
<input style="width:200px;padding:9px 11px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;font-family:monospace;background:#fff;" type="text" value="SKU-7F3K9Q2X" readonly>
<span style="display:inline-block;background:#2563eb;color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:14px;">重新生成</span>
</div>
<pre style="background:#0f172a;color:#e2e8f0;padding:10px 14px;border-radius:8px;font-size:12px;overflow:auto;margin:10px 0 0;">字段名: sku | 控件: random | 前缀: SKU | 长度: 8 | 字符集: A-Z0-9</pre>
</div>
<div style="background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:12px 16px;font-size:14px;margin:12px 0;">注意：随机仅保证低碰撞概率，落库前平台校验唯一性；高并发场景务必配合数据库唯一约束，避免并发插入重复。</div>
<div style="margin-top:36px;color:#6b7280;font-size:13px;text-align:center;">随机生成 控件文档 · 随工具迭代更新</div>
页:
[1]