docs: 规则测试状态保存

docs/.vitepress/components/RulePlay/index.vue

@@ -1,8 +1,14 @@
 <template>
   <div>
     <div class="details custom-block !p-10px">
-      <input class="w-full" v-model="inputText" placeholder="这里输入原始文本, 比如网页源码" />
+      <textarea rows="5" class="w-full bg-[transparent]" v-model="inputText" placeholder="这里输入原始文本, 比如网页源码" />
     </div>
+
+    <div class="text-14 flex items-center">
+      <input type="checkbox" id="isList" name="isList" v-model="isList" />
+      <label for="isList">列表规则</label>
+    </div>
+
     <div class="details custom-block !p-10px">
       <input class="w-full" v-model="rule" placeholder="这里输入规则, 比如 xpath, jsonpath 等等组合" />
     </div>
@@ -16,18 +22,53 @@
 
 
 <script setup>
-import { ref, watch, nextTick } from 'vue'
+import { ref, watch, nextTick, onMounted } from 'vue'
+import { encode, decode } from 'js-base64';
 import { createAnalyzerManager } from '@any-reader/core/browser'
 
 const analyzerManager = createAnalyzerManager()
 
 const inputText = ref('')
 const rule = ref('')
 const outputText = ref('')
+const isList = ref(false)
+
+watch([inputText, rule, isList], v => {
+
 
-watch([inputText, rule], v => {
   nextTick(async () => {
-    outputText.value = await analyzerManager.getString(rule.value, inputText.value)
+    outputText.value =
+      isList.value ?
+        JSON.stringify(await analyzerManager.getElements(rule.value, inputText.value))
+        : await analyzerManager.getString(rule.value, inputText.value)
   })
+
+  try {
+    const newHash = decodeURI(encode(JSON.stringify({
+      inputText: inputText.value,
+      rule: rule.value,
+      isList: isList.value,
+    })))
+    history.replaceState({}, '', '#' + newHash)
+
+  } catch (error) {
+    console.error(error);
+
+  }
+})
+
+onMounted(() => {
+  const hash = location.hash.slice(1)
+  if (hash) {
+    try {
+      const data = JSON.parse(decodeURI(decode(hash)))
+      inputText.value = data.inputText
+      rule.value = data.rule
+      isList.value = data.isList
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
 })
 </script>

docs/package.json

@@ -11,6 +11,7 @@
   "devDependencies": {
     "@any-reader/core": "workspace:^",
     "@shikijs/vitepress-twoslash": "^1.17.6",
+    "js-base64": "^3.7.7",
     "mermaid": "^11.2.0",
     "vitepress": "^1.3.4",
     "vitepress-plugin-mermaid": "^2.0.16"

docs/rule/index.md

@@ -278,6 +278,8 @@ Content-Type: application/json
 #xxxlist li
 ```
 
+[规则测试](/play/#eyJpbnB1dFRleHQiOiI8aHRtbD4gICA8IS0tICAtLT4gICA8dWwgaWQ9XCJ4eHhsaXN0XCI+ICAgICA8bGk+ICAgICAgIDxwIGNsYXNzPVwicVwiPiAgICAgICAgIDxhIGhyZWY9XCJodHRwOi8veHh4Lnh4eC9ib29rL3h4eHgvXCIgdGFyZ2V0PVwiX2JsYW5rXCI+5ZCN5a2XMTwvYT4gICAgICAgPC9wPiAgICAgICA8cCBjbGFzcz1cImFcIj4gICAgICAgICA8YSBocmVmPVwiL3h4eC94eHh4Lmh0bWxcIiB0YXJnZXQ9XCJfYmxhbmtcIj7nqbrnqbrlpoLkuZ/jgII8L2E+ICAgICAgIDwvcD4gICAgICAgPHAgY2xhc3M9XCJiXCI+5byg5LiJPC9wPiAgICAgICA8cCBjbGFzcz1cImNcIj45OWs8L3A+ICAgICAgIDxwIGNsYXNzPVwiZFwiPui/nui9veS4rTwvcD4gICAgICAgPHAgY2xhc3M9XCJlXCI+MjQtMDEtMDE8L3A+ICAgICA8L2xpPiAgICAgIDxsaT4gICAgICAgPHAgY2xhc3M9XCJxXCI+ICAgICAgICAgPGEgaHJlZj1cImh0dHA6Ly94eHgueHh4L2Jvb2sveHh4MS9cIiB0YXJnZXQ9XCJfYmxhbmtcIj7lkI3lrZcyPC9hPiAgICAgICA8L3A+ICAgICAgIDxwIGNsYXNzPVwiYVwiPiAgICAgICAgIDxhIGhyZWY9XCIveHh4L3h4eDEuaHRtbFwiIHRhcmdldD1cIl9ibGFua1wiPuepuuepuuWmguS5n+OAgjwvYT4gICAgICAgPC9wPiAgICAgICA8cCBjbGFzcz1cImJcIj7mnY7lm5s8L3A+ICAgICAgIDxwIGNsYXNzPVwiY1wiPjk5azwvcD4gICAgICAgPHAgY2xhc3M9XCJkXCI+6L+e6L295LitPC9wPiAgICAgICA8cCBjbGFzcz1cImVcIj4yNC0wMS0wMjwvcD4gICAgIDwvbGk+ICAgICA8IS0tICAtLT4gICA8L3VsPiAgIDwhLS0gIC0tPiA8L2h0bWw+IiwicnVsZSI6IiN4eHhsaXN0IGxpIiwiaXNMaXN0Ijp0cnVlfQ==)
+
 > 规则用法可以参考下面的 `规则表达式`
 >
 > 这里使用的是默认的 `@css`, `#xxxlist li` 效果类似于 `document.querySelectorAll('#xxxlist li')`
@@ -351,6 +353,8 @@ Content-Type: application/json
 }
 ```
 
+[规则测试](/play/#eyJpbnB1dFRleHQiOiI8bGk+ICAgPHAgY2xhc3M9XCJxXCI+ICAgICA8YSBocmVmPVwiaHR0cDovL3h4eC54eHgvYm9vay94eHh4L1wiIHRhcmdldD1cIl9ibGFua1wiPuWQjeWtlzE8L2E+ICAgPC9wPiAgIDxwIGNsYXNzPVwiYVwiPiAgICAgPGEgaHJlZj1cIi94eHgveHh4eC5odG1sXCIgdGFyZ2V0PVwiX2JsYW5rXCI+56m656m65aaC5Lmf44CCPC9hPiAgIDwvcD4gICA8cCBjbGFzcz1cImJcIj7lvKDkuIk8L3A+ICAgPHAgY2xhc3M9XCJjXCI+OTlrPC9wPiAgIDxwIGNsYXNzPVwiZFwiPui/nui9veS4rTwvcD4gICA8cCBjbGFzcz1cImVcIj4yNC0wMS0wMTwvcD4gPC9saT4iLCJydWxlIjoiLnEgYUB0ZXh0IiwiaXNMaXN0IjpmYWxzZX0=)
+
 :::
 
 ### 结果规则