feat(docs): 添加在线规则编解码工具

docs/.vitepress/components/RuleComparess/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div class="details custom-block !p-10px">
+      <textarea rows="5" class="w-full bg-[transparent]" v-model="inputText" placeholder="输入规则,'eso://:xxxxx' 或者 json 字符串" />
+    </div>
+
+    <div class="details custom-block !p-10px">
+      <div class="min-h-40px break-words">
+        {{ outputText || '' }}
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script setup>
+import { ref, watch, nextTick, onMounted } from 'vue'
+import { encode, decode } from 'js-base64';
+import { decodeRule, encodeRule } from '@any-reader/rule-utils'
+
+
+const inputText = ref('')
+const outputText = ref('')
+
+watch([inputText,], () => {
+  outputText.value = ''
+  nextTick(() => {
+    const rule = inputText.value.trim()
+    if (rule.startsWith('eso://')) {
+      outputText.value = decodeRule(rule)
+    } else {
+      outputText.value = encodeRule(rule)
+    }
+  })
+
+  try {
+    const newHash = decodeURI(encode(JSON.stringify({
+      inputText: inputText.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
+    } catch (error) {
+      console.error(error);
+    }
+  }
+})
+</script>

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

@@ -13,7 +13,7 @@
       <input class="w-full" v-model="rule" placeholder="这里输入规则, 比如 xpath, jsonpath 等等组合" />
     </div>
     <div class="details custom-block !p-10px">
-      <div class="min-h-40px">
+      <div class="min-h-40px break-words">
         {{ outputText || '' }}
       </div>
     </div>

docs/.vitepress/config.ts

@@ -31,15 +31,25 @@ export default withMermaid({
     nav: [
       { text: '指南', link: '/desktop/' },
       { text: '规则', link: '/rule/' },
-      { text: '规则测试', link: '/play/' },
+      { text: '规则测试', link: '/play/' }
     ],
     search: {
       provider: 'local'
     },
-    sidebar: guide.reduce((p, v) => {
-      p[v.link] = guide;
-      return p;
-    }, {}),
+    sidebar: guide.reduce(
+      (p, v) => {
+        p[v.link] = guide;
+        return p;
+      },
+      {
+        '/play/': {
+          items: [
+            { text: '取文本测试', link: '/play/' },
+            { text: '规则编解码', link: '/play/comparess' }
+          ]
+        }
+      }
+    ),
     editLink: {
       pattern: 'https://github.com/aooiuu/any-reader/edit/master/docs/:path',
       text: '编辑此页面'

docs/.vitepress/theme/index.ts

@@ -1,14 +1,16 @@
 import Theme from 'vitepress/theme';
 import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client';
 import '@shikijs/vitepress-twoslash/style.css';
-import 'uno.css'
+import 'uno.css';
 import RulePlay from '../components/RulePlay/index.vue';
+import RuleComparess from '../components/RuleComparess/index.vue';
 
 export default {
   ...Theme,
 
   enhanceApp({ app }) {
     app.use(TwoslashFloatingVue);
     app.component('RulePlay', RulePlay);
+    app.component('RuleComparess', RuleComparess);
   }
 };

docs/package.json

@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "@any-reader/core": "workspace:^",
+    "@any-reader/rule-utils": "workspace:^",
     "@shikijs/vitepress-twoslash": "^1.17.6",
     "js-base64": "^3.7.7",
     "mermaid": "^11.2.0",

docs/play/comparess.md

@@ -0,0 +1,3 @@
+# 规则编解码
+
+<RuleComparess />

docs/rule/index.md

@@ -142,7 +142,7 @@ enum ContentType {
 }
 ```
 
-> 格式 `eso://:xxxxx` 是压缩后的规则, 软件也会自动识别, 也可以使用命令工具解码还原成json
+> 格式 `eso://:xxxxx` 是压缩后的规则, 软件也会自动识别, 也可以使用 [在线规则编解码工具](/play/comparess) 还原成json
 >
 > 并不是每个字段都是必填的, 按需填写既可。