From 6b37eeec59d57277f3592781fcbb3cb8f4f0d26f Mon Sep 17 00:00:00 2001
From: m0_60155232 <m0_60155232@devide>
Date: Tue, 12 Sep 2023 15:28:00 +0800
Subject: [PATCH] Tue Sep 12 15:28:00 CST 2023 inscode

---
 package.json                          |   2 +
 "public/\346\217\217\350\277\260.png" | Bin 0 -> 1929 bytes
 src/App.vue                           |  49 +++++-----
 src/components/Desc.vue               |  41 +++++++++
 src/main.js                           |  14 ++-
 src/views/DNS.vue                     |   5 +
 src/views/IP.vue                      |   5 +
 src/views/MD5.vue                     |  65 ++++++++++++-
 src/views/Morse.vue                   |   5 +
 src/views/SHA256.vue                  |   5 +
 src/views/UID.vue                     | 128 ++++++++++++++++++++++++++
 11 files changed, 288 insertions(+), 31 deletions(-)
 create mode 100644 "public/\346\217\217\350\277\260.png"
 create mode 100644 src/components/Desc.vue
 create mode 100644 src/views/DNS.vue
 create mode 100644 src/views/IP.vue
 create mode 100644 src/views/Morse.vue
 create mode 100644 src/views/SHA256.vue
 create mode 100644 src/views/UID.vue

diff --git a/package.json b/package.json
index 054e1dd..09e6eae 100644
--- a/package.json
+++ b/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"
   },
diff --git "a/public/\346\217\217\350\277\260.png" "b/public/\346\217\217\350\277\260.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7eceb1817c1967c9de92ef7ba7ece5e36ce8d1ab
GIT binary patch
literal 1929
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

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index 309da72..b33fe84 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/Desc.vue b/src/components/Desc.vue
new file mode 100644
index 0000000..026a93a
--- /dev/null
+++ b/src/components/Desc.vue
@@ -0,0 +1,41 @@
+<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
diff --git a/src/main.js b/src/main.js
index bbd67a1..c48d8de 100644
--- a/src/main.js
+++ b/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 },
 ]
 
 // 创建路由实例
diff --git a/src/views/DNS.vue b/src/views/DNS.vue
new file mode 100644
index 0000000..d42a460
--- /dev/null
+++ b/src/views/DNS.vue
@@ -0,0 +1,5 @@
+<template>
+
+    DNS解析
+
+</template>
\ No newline at end of file
diff --git a/src/views/IP.vue b/src/views/IP.vue
new file mode 100644
index 0000000..5a74158
--- /dev/null
+++ b/src/views/IP.vue
@@ -0,0 +1,5 @@
+<template>
+
+    IP查询
+
+</template>
\ No newline at end of file
diff --git a/src/views/MD5.vue b/src/views/MD5.vue
index 091f25b..953e067 100644
--- a/src/views/MD5.vue
+++ b/src/views/MD5.vue
@@ -1,5 +1,66 @@
 <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
diff --git a/src/views/Morse.vue b/src/views/Morse.vue
new file mode 100644
index 0000000..7a1ab5f
--- /dev/null
+++ b/src/views/Morse.vue
@@ -0,0 +1,5 @@
+<template>
+
+    Morse密码
+
+</template>
\ No newline at end of file
diff --git a/src/views/SHA256.vue b/src/views/SHA256.vue
new file mode 100644
index 0000000..9babcbd
--- /dev/null
+++ b/src/views/SHA256.vue
@@ -0,0 +1,5 @@
+<template>
+
+    SHA256
+
+</template>
\ No newline at end of file
diff --git a/src/views/UID.vue b/src/views/UID.vue
new file mode 100644
index 0000000..a7d3089
--- /dev/null
+++ b/src/views/UID.vue
@@ -0,0 +1,128 @@
+<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
-- 
GitLab