feat: 新增3个工具，样式修复，修改logo，保存桌面

新增功能： - js代码格式化/压缩 - html代码格式化 - css代码格式化/压缩 - 保存到桌面其他修改： - 修改logo - 修复一些样式问题 - 修复一些已知的问题
2024-06-18 17:40:32 +08:00
parent f05ee53440
commit 95b7fec3b5
17 changed files with 1878 additions and 1030 deletions
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import { copy } from '@/utils/string';
+import { Codemirror } from "vue-codemirror";
+import '@codemirror/search';
+import '@codemirror/state';
+import '@codemirror/commands';
+import * as prettier from "prettier/standalone";
+import * as parserHtml from 'prettier/parser-html';
+import { ElMessage } from 'element-plus';
+
+const info = reactive({
+  title: "html格式化/压缩",
+  code: '',
+  isParseErr: false,
+  parseErr: '',
+})
+
+//格式化
+const formatCode = async () => {
+  try {
+    info.code = await prettier.format(info.code, { parser: "html", plugins: [parserHtml]})
+  } catch (error) {
+    ElMessage({
+      showClose: true,
+      message: '请填入正确代码格式',
+      type: 'error',
+    })
+  }
+}
+
+//清空输入框
+const clear = () => {
+  info.code = ''
+}
+
+const copyRes = async () => {
+  copy(info.code)
+}
+</script>
+
+<template>
+  <div class="flex flex-col mt-3 flex-1">
+    <DetailHeader :title="info.title"></DetailHeader>
+
+    <div class="p-4 rounded-2xl bg-white ">
+      
+      <div>
+        <codemirror
+          v-model="info.code"
+          placeholder="这里是代码..."
+          :style="{ height: '400px' }"
+          :autofocus="true"
+          :indent-with-tab="true" 
+          :tabSize="2"
+        />
+      </div>
+      
+      <div class="mt-4">
+        <el-button type="primary" @click="formatCode">格式化</el-button>
+        <el-button type="primary" @click="copyRes">复制</el-button>
+        <el-button type="primary" @click="clear">清空</el-button>
+      </div>
+
+      <div class="mt-3 min-h-md bg-red-100 p-3 mb-3" v-show="info.isParseErr">
+        <el-text type="danger">{{ info.parseErr }}</el-text>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>