62 lines
1.7 KiB
HTML
62 lines
1.7 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>sign-field 原子占位符探针</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 16px;
|
|
font: 14px/1.6 system-ui, 'Microsoft YaHei', sans-serif;
|
|
color: #1f2937;
|
|
}
|
|
#editor {
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 6px;
|
|
min-height: 140px;
|
|
padding: 12px;
|
|
}
|
|
#result {
|
|
white-space: pre-wrap;
|
|
font: 12px/1.5 ui-monospace, Consolas, monospace;
|
|
color: #374151;
|
|
}
|
|
/*
|
|
下面这几条是 EditorWangPane.vue 里胶囊样式的镜像（探针页没有 SFC 的作用域样式）。
|
|
探针只用来验"标签靠 CSS ::before 展示、DOM 里没有可落光标的文字"这个机制，
|
|
所以颜色/间距不必与生产逐字一致，但 ::before 的 attr() 取值必须一致。
|
|
*/
|
|
.ms-sign-chip {
|
|
display: inline-block;
|
|
padding: 0 6px;
|
|
margin: 0 2px;
|
|
border-radius: 4px;
|
|
background: #eef2ff;
|
|
color: #3b5bdb;
|
|
font-size: 13px;
|
|
line-height: 22px;
|
|
}
|
|
.ms-sign-node::before {
|
|
content: attr(data-sign-label);
|
|
}
|
|
.ms-sign-node::after {
|
|
content: attr(data-sign-tag);
|
|
margin-left: 4px;
|
|
padding-left: 4px;
|
|
border-left: 1px solid rgb(59 91 219 / 30%);
|
|
font-size: 11px;
|
|
opacity: 0.8;
|
|
}
|
|
.ms-sign-node.is-selected {
|
|
background: #3b5bdb;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="editor"></div>
|
|
<pre id="result">PENDING</pre>
|
|
<script type="module" src="./main.ts"></script>
|
|
</body>
|
|
</html>
|