Tue Sep 12 15:28:00 CST 2023 inscode

package.json

@@ -9,6 +9,8 @@
   "dependencies": {
     "element-plus": "^2.3.12",
     "guess": "^1.0.2",
+    "js-md5": "^0.7.3",
+    "uuid": "^9.0.0",
     "vue": "^3.2.37",
     "vue-router": "^4.2.4"
   },

src/App.vue

@@ -3,30 +3,27 @@ import { ref } from 'vue'
 
 const activeIndex = ref('/');
 
-const handleSelect = (key,keyPath) => {
-  console.log(key, keyPath)
-}
 </script>
 
 <template>
   <div id="container">
     <!-- 导航 -->
     <div id="nav_box">
-      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router='true'>
+      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router='true'>
         <el-menu-item index="/">UUID生成</el-menu-item>
         <el-sub-menu index="2">
           <template #title>加密工具</template>
-          <el-menu-item index="/about">MD5</el-menu-item>
-          <el-menu-item index="2-2">SHA256</el-menu-item>
+          <el-menu-item index="/md5">MD5</el-menu-item>
+          <el-menu-item index="/sha256">SHA256</el-menu-item>
         </el-sub-menu>
-        <el-menu-item index="3">二维码生成</el-menu-item>
-        <el-menu-item index="4">IP查询</el-menu-item>
-        <el-menu-item index="5">DNS解析</el-menu-item>
-        <el-menu-item index="6">摩斯密码生成</el-menu-item>
+        <el-menu-item index="/qr_code">二维码生成</el-menu-item>
+        <el-menu-item index="/ip">IP查询</el-menu-item>
+        <el-menu-item index="/dns">DNS解析</el-menu-item>
+        <el-menu-item index="/morse">摩斯密码生成</el-menu-item>
       </el-menu>
     </div>
     <!-- 路由出口-功能区 -->
-    <div>
+    <div id="content">
       <router-view></router-view>
     </div>
   </div>
@@ -34,21 +31,19 @@ const handleSelect = (key,keyPath) => {
 
 <style scoped>
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+
+#nav_box{
+  max-width: 1200px;
+  min-width: 1200px;
+  /* border: solid red 1px; */
+  margin: 0 auto;
 }
+
+#content{
+  max-width: 1200px;
+  min-width: 1200px;
+  margin: 0 auto;
+  padding-top: 20px;
+}
+
 </style>

src/components/Desc.vue

+<template>
+    <div id="desc_box">
+            <img src="/描述.png" alt="">
+            <div style="margin-left:3px;">
+                工具描述：
+                <span style="font-size:14px;">
+                   {{ desc_text }}
+                </span>
+            </div>
+        </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+
+// 描述文本
+let desc_text = ref("暂无")
+
+function setDescText(newText){
+    desc_text.value = newText;
+}
+
+defineExpose({
+    setDescText
+})
+</script>
+
+<style scoped>
+
+#desc_box {
+    display: flex;
+}
+
+#desc_box img {
+    width: 22px;
+    height: 22px;
+    position: relative;
+    top: 1px;
+}
+
+</style>
\ No newline at end of file

src/main.js

@@ -4,13 +4,23 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import { createRouter, createWebHistory } from 'vue-router'
 // 导入路由识图
+import UID from "./views/UID.vue"
 import MD5 from "./views/MD5.vue"
+import SHA256 from "./views/SHA256.vue"
 import QRCode from "./views/QRCode.vue"
+import IP from "./views/IP.vue"
+import DNS from "./views/DNS.vue"
+import Morse from "./views/Morse.vue"
 
 // 路由配置
 const routes = [
-  { path: '/', component: MD5 },
-  { path: '/about', component: QRCode },
+  { path: '/', component: UID },
+  { path: '/md5', component: MD5 },
+  { path: '/sha256', component: SHA256 },
+  { path: '/qr_code', component: QRCode },
+  { path: '/ip', component: IP },
+  { path: '/dns', component: DNS },
+  { path: '/morse', component: Morse },
 ]
 
 // 创建路由实例

src/views/DNS.vue

+<template>
+
+    DNS解析
+
+</template>
\ No newline at end of file

src/views/IP.vue

+<template>
+
+    IP查询
+
+</template>
\ No newline at end of file

src/views/MD5.vue

 <template>
+    <div id="container">
+        <!-- 原始框 -->
+        <textarea name="" id="" cols="160" rows="10" placeholder="原始串" v-model="before_str"></textarea>
+        <!-- 转换按钮 -->
+        <div id="my_btn">
+            <button @click="toAfterStr">加密</button>
+        </div>
+        <!-- 转换结果 -->
+        <textarea name="" id="" cols="160" rows="10" placeholder="加密串" v-model="after_str"></textarea>
+    </div>
+</template>
 
-    MD5
+<script setup>
+import { ref } from "vue";
+import { ElMessage } from 'element-plus'
+import md5 from 'js-md5';
 
-</template>
\ No newline at end of file
+// 原始串
+let before_str = ref("")
+// 加密串
+let after_str = ref("")
+
+// 加密处理器
+function toAfterStr(){
+    // 判断空
+    if(before_str.value == ""){
+        ElMessage("原始串为空!")
+        return 0;
+    }
+    after_str.value = md5(before_str.value);
+}
+
+</script>
+
+
+<style scoped>
+.text_box{
+    border: solid rgb(114 113 113) 1px;
+    height: 200px;
+    border-radius: 5px;
+}
+
+#my_btn{
+    display: flex;
+    justify-content: center;
+    padding: 20px 0px;
+}
+
+textarea{
+    padding: 10px;
+}
+
+#my_btn button{
+    width: 90px;
+    height: 35px;
+    border: none;
+    background: linear-gradient(to right, #eae0e0, #dda5a5);
+    cursor: pointer;
+}
+
+#my_btn button:hover{
+    background: linear-gradient(to right, #eae0e0, #df6262);
+}
+
+</style>
\ No newline at end of file

src/views/Morse.vue

+<template>
+
+    Morse密码
+
+</template>
\ No newline at end of file

src/views/SHA256.vue

+<template>
+
+    SHA256
+
+</template>
\ No newline at end of file

src/views/UID.vue

+<template>
+    <!-- 随机UUID生成 -->
+    <div id="container">
+        <!-- 描述 -->
+        <Desc ref="Desc_text"></Desc>
+        <!-- 输入框 -->
+        <div id="my_form">
+            <!-- <input type="text" placeholder="生成个数" id="my_input"> -->
+            <el-input-number v-model="num" :min="1" :max="20" @change="handleChange" />
+            <!-- 生成按钮 -->
+            <button id="my_btn" @click="generateHandle">生成</button>
+        </div>
+        <!-- 生成内容框 -->
+        <div id="generate_box">
+            <!-- 提示 -->
+            <span id="pla" v-if="pla_flag">选择生成条数，点击生成</span>
+            <!-- 生成项列表 -->
+            <div class="uid_item" v-for="item in uid_list" :key="item">
+                {{ item }}
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { v4 as uid } from 'uuid';
+import { ElMessage } from 'element-plus'
+import Desc from "../components/Desc.vue"
+
+let Desc_text = ref(null);
+
+onMounted(()=>{
+    Desc_text.value.setDescText(`UUID（通用唯一标识符）是一个标准，用于在计算机系统中标识实体。它是由一组数字和字母组成的 128 位数字字符串，
+                    通常表示为 32 个十六进制数字，用破折号分隔成五组:8-4-4-4-12。UUID在分布式系统中被广泛使用，以保证独一无二的标识
+                    符，例如在数据库中存储记录的唯一标识符、在网络通信中使用的唯一标识符等场景。`)
+})
+
+// 选择生成的数量
+let num = ref(1)
+
+// 控制生成框提示内容的显示
+let pla_flag = ref(true);
+
+// 生成的uid列表
+let uid_list = reactive([]);
+
+// 生成触发器
+function generateHandle() {
+    // 隐藏提示，置空操作
+    pla_flag.value = false;
+    uid_list.length = 0;
+    // 赋值
+    for (let i = 0; i < num.value; i++) {
+        uid_list.push(uid());
+    }
+
+    // 弹窗提示
+    if (num.value <= 0) {
+        ElMessage({
+            message: '生成失败!',
+            type: 'warning',
+        })
+        return 0;
+    }
+
+    ElMessage({
+        message: '生成成功!',
+        type: 'success',
+    })
+}
+
+</script>
+
+<style scoped>
+#my_form {
+    margin-top: 20px;
+    display: flex;
+}
+
+.uid_item {
+    font-size: 15px;
+    margin-top: 3px;
+}
+
+#pla {
+    font-size: 13px;
+    color: rgb(141, 140, 140);
+}
+
+#generate_box {
+    margin-top: 20px;
+    border: solid rgb(90, 69, 69) 1px;
+    width: 600px;
+    min-height: 300px;
+    height: fit-content;
+    border-radius: 5px;
+    padding: 5px;
+}
+
+#my_input {
+    border-radius: 5px;
+    border: solid 1px #b9b5b5;
+    width: 200px;
+    height: 28px;
+    padding-left: 5px;
+}
+
+#my_btn {
+    width: 68px;
+    height: 31px;
+    background-color: #4ac87c;
+    border: none;
+    border-radius: 5px;
+    color: white;
+    font-weight: 600;
+    font-size: 15px;
+    position: relative;
+    top: 2px;
+    margin-left: 8px;
+    cursor: pointer;
+}
+
+#my_btn:hover {
+    background-color: #3b915c;
+}
+</style>
\ No newline at end of file