创建一条正则
如何快速创建一条正则并测试，以实现一个场景数据的美化为例。
步骤1: 准备文本
准备AI输出的结构，和美化代码
首先，可以在开场白编写一个AI输出格式，可以是状态栏，场景数据等。
这里以<环境数据>为例
现在需要一个美化组件，包含时间数据，天气数据，环境描述。
所以我可以这样准备AI输出结构（推荐使用官方输出模版）：
<环境数据>
<时间>13:37:33</时间>
<天气>多云转小雨</天气>
<环境>空气中飘着柳絮伴随着樱花香，春天到了</环境>
</环境数据>接下来，可以为这些数据跑一套美化代码
点击 展开/收起 代码块
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Midnight Gummy Ultra Panel</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Quicksand:wght@500;700&family=Noto+Sans+SC:wght@300;500&display=swap" rel="stylesheet">
<style>
:root {
--accent-pink: #ff9eaf;
--accent-purple: #bb9af7;
--accent-blue: #7dcfff;
--text-main: #c0caf5;
--text-dim: #565f89;
--glass-bg: rgba(26, 27, 38, 0.6);
--radius-main: 10px;
--font-cute: 'Quicksand', 'Noto Sans SC', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
body {
background: transparent;
margin: 0;
}
/* 整体容器 */
.ultra-panel {
font-family: var(--font-cute);
display: flex;
flex-direction: column;
gap: 12px;
width:100%;
max-width: 500px;
user-select: none;
position: relative;
}
.panel-row {
display: flex;
gap: 12px;
width: 100%;
}
/* 基础项：玻璃拟态 + 复合阴影 */
.data-card {
background: var(--glass-bg);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.15); /* 顶部高光边 */
border-radius: var(--radius-main);
padding: 10px 14px;
box-shadow:
4px 4px 0px rgba(0, 0, 0, 0.3),
inset 0 1px 1px rgba(255, 255, 255, 0.05);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
/* 扫描线背景效果 */
.data-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
background-size: 100% 2px, 3px 100%;
pointer-events: none;
opacity: 0.3;
}
.data-card:hover {
transform: translateY(-3px);
background: rgba(30, 33, 48, 0.8);
border-color: rgba(255, 255, 255, 0.2);
}
/* 装饰支架 */
.corner-deco {
position: absolute;
width: 6px;
height: 6px;
border: 1px solid currentColor;
opacity: 0.4;
}
.lt { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.rb { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }
/* 内容布局 */
.card-header {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.label {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-dim);
}
.icon-svg {
width: 12px;
height: 12px;
margin-right: 6px;
fill: currentColor;
filter: drop-shadow(0 0 3px currentColor);
}
.value {
font-size: 13px;
font-weight: 500;
color: var(--text-main);
display: flex;
align-items: baseline;
}
/* 特殊样式 */
.item-time { flex: 1.3; border-bottom: 2px solid var(--accent-purple); color: var(--accent-purple); }
.item-weather { flex: 1; border-bottom: 2px solid var(--accent-blue); color: var(--accent-blue); }
.item-env { width: 100%; border-bottom: 2px solid var(--accent-pink); color: var(--accent-pink); }
/* 时间数值：等宽字体 */
#current-time {
font-family: var(--font-mono);
font-size: 15px;
letter-spacing: -0.5px;
}
/* 环境描述：稍微缩小 */
.env-text {
font-size: 11px;
line-height: 1.4;
opacity: 0.85;
}
/* 呼吸灯 */
.status-dot {
width: 3px;
height: 3px;
background: currentColor;
border-radius: 50%;
margin-left: auto;
box-shadow: 0 0 6px currentColor;
animation: blink 2s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(0.8); }
}
</style>
</head>
<body>
<div class="ultra-panel">
<!-- 第一行 -->
<div class="panel-row">
<!-- 时间卡片 -->
<div class="data-card item-time">
<div class="corner-deco lt"></div>
<div class="corner-deco rb"></div>
<div class="card-header">
<svg class="icon-svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm.5-13H11v6l5.2 3.1.8-1.2-4.5-2.7V7z"/></svg>
<span class="label">Chrono</span>
<div class="status-dot"></div>
</div>
<div class="value">
<span id="current-time">时间部分</span>
</div>
</div>
<!-- 天气卡片 -->
<div class="data-card item-weather">
<div class="corner-deco lt"></div>
<div class="corner-deco rb"></div>
<div class="card-header">
<svg class="icon-svg" viewBox="0 0 24 24"><path d="M6.7 14.7c0-3.1 2.5-5.7 5.7-5.7.3 0 .5 0 .8.1C14.1 6.8 16.4 5 19 5c3.3 0 6 2.7 6 6 0 .5-.1 1-.2 1.4 1.4.9 2.2 2.4 2.2 4.1 0 2.8-2.2 5-5 5h-13c-4 0-7.3-3.3-7.3-7.3 0-3.5 2.5-6.4 5.8-7.1.1-.1.2-.1.2-.4z"/></svg>
<span class="label">Sky</span>
</div>
<div class="value">
<span>今日天气</span>
</div>
</div>
</div>
<!-- 第二行 -->
<div class="panel-row">
<!-- 环境描述卡片 -->
<div class="data-card item-env">
<div class="corner-deco lt"></div>
<div class="corner-deco rb"></div>
<div class="card-header">
<svg class="icon-svg" viewBox="0 0 24 24"><path d="M12 3L2 12h3v8h14v-8h3L12 3zm0 14.5c-1.4 0-2.5-1.1-2.5-2.5s2.5-4.5 2.5-4.5 2.5 3.1 2.5 4.5-1.1 2.5-2.5 2.5z"/></svg>
<span class="label">Atmosphere</span>
<div class="status-dot"></div>
</div>
<div class="value env-text">
环境描述内容
</div>
</div>
</div>
</div>
</body>
</html>
```步骤2: 开始创建
在建卡页面底部，高级功能，找到正则创建。
进入【正则创建】，点击新建正则，进入正则创建页面
在默认选择的【工具模式/代码组件】模式下，填写正则基本信息
将 步骤1 准备好的AI输出结构，填入“目标字符”
步骤3: 生成正则
在完成了步骤2后，可以看到系统自动帮助生成了正则表达式
系统也按照顺序提取出了关键信息
步骤4: 填写美化代码
将准备好的美化代码，填写入"替换字符串"中
接下来，我们需要让替换的美化代码，跟随着AI输出变动。
将正则提取出的：时间数据，天气数据，环境描述，回填到美化代码中应该展示的位置。
点击“正则提取出结果”中的映射,即可实现快速替换回填
$1 ➡️ 13:37:33
$2 ➡️ 多云转小雨
$3 ➡️ 空气中飘着柳絮伴随着樱花香，春天到了
这一步很关键，否则当AI 输出不同内容，代码中的信息无法跟着改变。
步骤5: 初步测试
完成上述步骤后，基本完成一条正则的配置。
接下来，可以展开测试面板(移动端右上角/电脑端右侧)进行测试。
测试字符（模拟AI输出的内容），效果预览（展示替换后的效果）
更换结构中的关键信息，查看有没有变化，测试一下是否生效吧。
步骤6: 教会AI输出
首先，在开场白部分填写好AI输出结构，查看是否替换成功：
成功后，打开高级设置，在输出设定处，编写该何时/怎样输出该正则组件。
可以参照以下的编写格式，【何时该输出】、【输出的要求是什么】
完成以上步骤，就可以创建一条代码组件正则，并完成AI稳定输出啦。
Last updated