Initialize project

frontend/src/views/tools/JsonFormatter.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const input = ref('{"name":"Gemini","type":"AI"}')
+const output = ref('')
+const error = ref('')
+
+const format = () => {
+  try {
+    const parsed = JSON.parse(input.value)
+    output.value = JSON.stringify(parsed, null, 2)
+    error.value = ''
+  } catch (e: any) {
+    error.value = e.message
+  }
+}
+
+const minify = () => {
+  try {
+    const parsed = JSON.parse(input.value)
+    output.value = JSON.stringify(parsed)
+    error.value = ''
+  } catch (e: any) {
+    error.value = e.message
+  }
+}
+</script>
+
+<template>
+  <div class="h-[calc(100vh-200px)] flex flex-col">
+    <div class="flex space-x-2 mb-4">
+      <button @click="format" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Prettify</button>
+      <button @click="minify" class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">Minify</button>
+    </div>
+
+    <div class="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4 min-h-0">
+      <div class="flex flex-col">
+        <label class="mb-2 text-sm font-bold text-gray-500">Input JSON</label>
+        <textarea 
+          v-model="input" 
+          class="flex-1 w-full p-4 font-mono text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 resize-none"
+          :class="{'border-red-500': error}"
+        ></textarea>
+        <p v-if="error" class="text-red-500 text-sm mt-1">{{ error }}</p>
+      </div>
+      
+      <div class="flex flex-col">
+        <label class="mb-2 text-sm font-bold text-gray-500">Output</label>
+        <textarea 
+          readonly 
+          :value="output" 
+          class="flex-1 w-full p-4 font-mono text-sm bg-gray-50 border rounded-lg resize-none text-gray-800"
+        ></textarea>
+      </div>
+    </div>
+  </div>
+</template>