From d0b36e7a9603bb808102fe7b9a25afa2f3d1df54 Mon Sep 17 00:00:00 2001
From: aooiuu <aooiu@qq.com>
Date: Sun, 15 Sep 2024 23:53:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(docs):=20=E6=B7=BB=E5=8A=A0=E5=9C=A8?=
 =?UTF-8?q?=E7=BA=BF=E8=A7=84=E5=88=99=E7=BC=96=E8=A7=A3=E7=A0=81=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/RuleComparess/index.vue        | 59 +++++++++++++++++++
 docs/.vitepress/components/RulePlay/index.vue |  2 +-
 docs/.vitepress/config.ts                     | 20 +++++--
 docs/.vitepress/theme/index.ts                |  4 +-
 docs/package.json                             |  1 +
 docs/play/comparess.md                        |  3 +
 docs/rule/index.md                            |  2 +-
 pnpm-lock.yaml                                |  3 +
 8 files changed, 86 insertions(+), 8 deletions(-)
 create mode 100644 docs/.vitepress/components/RuleComparess/index.vue
 create mode 100644 docs/play/comparess.md

diff --git a/docs/.vitepress/components/RuleComparess/index.vue b/docs/.vitepress/components/RuleComparess/index.vue
new file mode 100644
index 00000000..9c01f283
--- /dev/null
+++ b/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>
diff --git a/docs/.vitepress/components/RulePlay/index.vue b/docs/.vitepress/components/RulePlay/index.vue
index 0337281a..fdb858e4 100644
--- a/docs/.vitepress/components/RulePlay/index.vue
+++ b/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>
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index c19d7dde..9996410d 100644
--- a/docs/.vitepress/config.ts
+++ b/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: '编辑此页面'
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 085887e2..c1fdb035 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,8 +1,9 @@
 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,
@@ -10,5 +11,6 @@ export default {
   enhanceApp({ app }) {
     app.use(TwoslashFloatingVue);
     app.component('RulePlay', RulePlay);
+    app.component('RuleComparess', RuleComparess);
   }
 };
diff --git a/docs/package.json b/docs/package.json
index 131e5788..ac1e0316 100644
--- a/docs/package.json
+++ b/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",
diff --git a/docs/play/comparess.md b/docs/play/comparess.md
new file mode 100644
index 00000000..f0eb1bce
--- /dev/null
+++ b/docs/play/comparess.md
@@ -0,0 +1,3 @@
+# 规则编解码
+
+<RuleComparess />
\ No newline at end of file
diff --git a/docs/rule/index.md b/docs/rule/index.md
index b7907933..ac17283d 100644
--- a/docs/rule/index.md
+++ b/docs/rule/index.md
@@ -142,7 +142,7 @@ enum ContentType {
 }
 ```
 
-> 格式 `eso://:xxxxx` 是压缩后的规则, 软件也会自动识别, 也可以使用命令工具解码还原成json
+> 格式 `eso://:xxxxx` 是压缩后的规则, 软件也会自动识别, 也可以使用 [在线规则编解码工具](/play/comparess) 还原成json
 >
 > 并不是每个字段都是必填的, 按需填写既可。
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 482856c4..c9407920 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -91,6 +91,9 @@ importers:
       '@any-reader/core':
         specifier: workspace:^
         version: link:../packages/core
+      '@any-reader/rule-utils':
+        specifier: workspace:^
+        version: link:../packages/rule-utils
       '@shikijs/vitepress-twoslash':
         specifier: ^1.17.6
         version: 1.17.6(typescript@5.5.4)