feat(signing): 将签署占位符改为原子节点并支持多选选项组

2026-09-24 12:13:24 +08:00
parent ec24e85829
commit 9a6ac93e21
13 changed files with 2141 additions and 121 deletions
@@ -0,0 +1,61 @@
+<!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>