Initial release of Web Tools 0.0.5

2026-08-07 21:51:15 +08:00
commit fa14e9e5b9
71 changed files with 6365 additions and 0 deletions
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { AlertCircle, CheckCircle2, Copy, Minimize2, Sparkles, Trash2 } from '@lucide/vue'
+import { ref, watch } from 'vue'
+import SyntaxViewer from '@/components/SyntaxViewer.vue'
+import TextEditor from '@/components/TextEditor.vue'
+import ToolPage from '@/components/ToolPage.vue'
+import { copyText } from '@/lib/browser'
+
+const input = ref('{"name":"Web Tools","local":true,"tools":["Hex","CMAC","Base64"]}')
+const output = ref('')
+const indent = ref('2')
+const error = ref('')
+const success = ref('')
+
+function clearResult() {
+  output.value = ''
+  error.value = ''
+  success.value = ''
+}
+
+watch([input, indent], clearResult)
+
+function parseInput() {
+  if (!input.value.trim()) throw new Error('请输入 JSON 内容')
+  return JSON.parse(input.value) as unknown
+}
+function format() {
+  try { output.value = JSON.stringify(parseInput(), null, indent.value === 'tab' ? '\t' : Number(indent.value)); error.value = ''; success.value = 'JSON 格式正确' }
+  catch (reason) { output.value = ''; success.value = ''; error.value = reason instanceof Error ? reason.message : 'JSON 无效' }
+}
+function minify() {
+  try { output.value = JSON.stringify(parseInput()); error.value = ''; success.value = 'JSON 已压缩' }
+  catch (reason) { output.value = ''; success.value = ''; error.value = reason instanceof Error ? reason.message : 'JSON 无效' }
+}
+function validate() {
+  try { parseInput(); error.value = ''; success.value = 'JSON 格式正确' }
+  catch (reason) { success.value = ''; error.value = reason instanceof Error ? reason.message : 'JSON 无效' }
+}
+async function copyResult() { try { await copyText(output.value); success.value = '结果已复制' } catch { error.value = '复制失败' } }
+function clearAll() { input.value = ''; clearResult() }
+</script>
+
+<template>
+  <ToolPage category="格式化" title="JSON" description="格式化、压缩并校验 JSON 字符串。">
+    <div class="tool-controls">
+      <label class="compact-field">缩进
+        <select v-model="indent"><option value="2">2 空格</option><option value="4">4 空格</option><option value="tab">Tab</option></select>
+      </label>
+    </div>
+    <div class="single-editor-layout">
+      <TextEditor v-model="input" label="输入" format="JSON" :meta="`${input.length} 字符`" placeholder="粘贴 JSON 字符串" :rows="14" />
+      <SyntaxViewer :value="output" label="结果" language="json" format="JSON" :meta="`${output.length} 字符`" />
+    </div>
+    <div class="action-row">
+      <button class="action-button primary" type="button" @click="format"><Sparkles :size="15" />格式化</button>
+      <button class="action-button" type="button" @click="minify"><Minimize2 :size="15" />压缩</button>
+      <button class="action-button" type="button" @click="validate"><CheckCircle2 :size="15" />校验</button>
+      <button class="action-button" type="button" @click="clearAll"><Trash2 :size="15" />清空</button>
+      <span class="action-spacer" />
+      <button class="action-button ghost" type="button" :disabled="!output" @click="copyResult"><Copy :size="15" />复制</button>
+    </div>
+    <div v-if="error" class="status-message error"><AlertCircle :size="16" />{{ error }}</div>
+    <div v-else-if="success" class="status-message success"><CheckCircle2 :size="16" />{{ success }}</div>
+  </ToolPage>
+</template>