feat: add URL decoding tool component

Author: xrgzs

docs/.vuepress/components/toolkit/UrlDecode.vue

@@ -0,0 +1,111 @@
+<template>
+  <NForm label-placement="top">
+    <!-- Input Section -->
+    <NFormItem :label="t.encodedInput">
+      <NInput
+        v-model:value="inputText"
+        type="textarea"
+        :placeholder="t.inputPlaceholder"
+        clearable
+      >
+      </NInput>
+    </NFormItem>
+
+    <!-- Action Button -->
+    <NFormItem :label="t.action">
+      <NFlex align="center">
+        <NButton type="primary" @click="decodeURL" :disabled="!inputText">
+          {{ t.decodeButton }}
+        </NButton>
+        <NCheckbox v-model:checked="deep">
+          {{ t.deepLabel }}
+        </NCheckbox>
+      </NFlex>
+    </NFormItem>
+
+    <!-- Output Section -->
+    <NFormItem :label="t.decodedOutput">
+      <NInput
+        ref="outputTextArea"
+        v-model:value="outputText"
+        type="textarea"
+        :placeholder="t.outputPlaceholder"
+        readonly
+      >
+      </NInput>
+    </NFormItem>
+  </NForm>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue"
+import { useMessage } from "naive-ui"
+import { NFlex, NForm, NFormItem, NInput, NButton, NCheckbox } from "naive-ui"
+
+const message = useMessage()
+const inputText = ref("")
+const outputText = ref("")
+const deep = ref(true)
+
+// i18n
+const isZh = computed(() => window.location.pathname.startsWith("/zh/"))
+const t = computed(() => isZh.value ? i18n.zh : i18n.en)
+const i18n = {
+  en: {
+    encodedInput: 'Encoded Input',
+    action: 'Action',
+    decodedOutput: 'Decoded Output',
+    inputPlaceholder: 'Please enter the URL encoded string',
+    decodeButton: 'Decode',
+    deepLabel: 'Deep',
+    outputPlaceholder: 'Decoded result will appear here',
+    decodeError: 'Decoding failed. Please check if the input is properly URL encoded.'
+  },
+  zh: {
+    encodedInput: '编码输入',
+    action: '操作',
+    decodedOutput: '解码输出',
+    inputPlaceholder: '请输入URL编码的字符串',
+    decodeButton: '解码',
+    deepLabel: '深度解码',
+    outputPlaceholder: '解码结果将显示在此处',
+    decodeError: '解码失败，请检查输入是否正确编码。'
+  }
+}
+
+// URL Decoding
+const deepDecode = (encodedStr: string, recursive: boolean) => {
+  let decoded = decodeURIComponent(encodedStr)
+
+  if (!recursive) return decoded
+
+  let hasChanged: boolean
+  do {
+    hasChanged = false
+    try {
+      const next = decodeURIComponent(decoded)
+      if (next !== decoded) {
+        decoded = next
+        hasChanged = true
+      }
+    } catch {
+      break
+    }
+  } while (hasChanged)
+
+  return decoded
+}
+
+const decodeURL = () => {
+  outputText.value = ""
+  if (!inputText.value.trim()) {
+    return
+  }
+  try {
+    outputText.value = deepDecode(inputText.value, deep.value)
+  } catch (error) {
+    message.error(t.value.decodeError)
+    outputText.value = ""
+  }
+}
+</script>

docs/.vuepress/config.ts

@@ -151,5 +151,6 @@ export default defineUserConfig({
       "./components/dropbox/Callback.vue"
     ),
     "@115/Token": path.resolve(__dirname, "./components/115/Token.vue"),
+    "@Toolkit/URLDecode": path.resolve(__dirname, "./components/toolkit/URLDecode.vue"),
   },
 });

docs/guide/drivers/cloudreve.md

@@ -43,6 +43,16 @@ Only the string following cloudreve-session= is required.
 
 Default is `/`, which can be obtained from the `?path=` in the web link.
 
+You can get the parameter decoded here:
+
+<NaiveClient>
+<URLDecode />
+</NaiveClient>
+
+<script setup lang="ts">
+import URLDecode from "@Toolkit/URLDecode";
+</script>
+
 ### Enable Folder Size
 
 Enable Cloudreve V3 server to calculate the size of each folder and generate thumbnails for each file. Enabling this feature may cause server errors or slow performance, and it is `disabled` by default.

docs/guide/drivers/cloudreve_v4.md

@@ -59,6 +59,16 @@ You may need to log in anew to see this request.
 
 Cloudreve V4 uses a custom URI as the path, which can be obtained from the `?path=` in the web link.
 
+You can get the parameter decoded here:
+
+<NaiveClient>
+<URLDecode />
+</NaiveClient>
+
+<script setup lang="ts">
+import URLDecode from "@Toolkit/URLDecode";
+</script>
+
 #### Mounting My Files
 
 Default is `cloudreve://my/`, listing user files.

docs/zh/guide/drivers/cloudreve.md

@@ -41,6 +41,16 @@ Cookie 获取方法：
 
 默认为：`/`，可从网页链接的 `?path=` 中获取。
 
+您可以在此处对获取到的被编码参数进行解码：
+
+<NaiveClient>
+<URLDecode />
+</NaiveClient>
+
+<script setup lang="ts">
+import URLDecode from "@Toolkit/URLDecode";
+</script>
+
 ### 启用缩略图和文件夹大小
 
 让 Cloudreve V3 服务端统计每个文件夹的大小并为每个文件生成略缩图，启用可能会造成服务端报错、运行缓慢，默认禁用。

docs/zh/guide/drivers/cloudreve_v4.md

@@ -60,6 +60,16 @@ Token 获取方法：
 
 Cloudreve V4 采用自定义 URI 作为路径。可从网页链接的 `?path=` 中获取。
 
+您可以在此处对获取到的被编码参数进行解码：
+
+<NaiveClient>
+<URLDecode />
+</NaiveClient>
+
+<script setup lang="ts">
+import URLDecode from "@Toolkit/URLDecode";
+</script>
+
 #### 挂载「我的文件」
 
 默认为 `cloudreve://my/`，列出用户文件。