前端添加实用工具

tonecn/package.json

@@ -16,15 +16,18 @@
     "highlight.js": "^11.10.0",
     "marked": "^14.1.0",
     "marked-highlight": "^2.1.4",
+    "md5": "^2.3.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.4",
+    "@types/md5": "^2.3.5",
     "@types/node": "^20.12.5",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/tsconfig": "^0.5.1",
     "element-plus": "^2.7.3",
+    "npm": "^10.8.3",
     "npm-run-all2": "^6.1.2",
     "typescript": "~5.4.0",
     "unplugin-auto-import": "^0.17.6",

tonecn/pnpm-lock.yaml

@@ -20,6 +20,9 @@ dependencies:
   marked-highlight:
     specifier: ^2.1.4
     version: 2.1.4(marked@14.1.0)
+  md5:
+    specifier: ^2.3.0
+    version: 2.3.0
   vue:
     specifier: ^3.4.21
     version: 3.4.27(typescript@5.4.5)
@@ -31,6 +34,9 @@ devDependencies:
   '@tsconfig/node20':
     specifier: ^20.1.4
     version: 20.1.4
+  '@types/md5':
+    specifier: ^2.3.5
+    version: 2.3.5
   '@types/node':
     specifier: ^20.12.5
     version: 20.12.12
@@ -43,6 +49,9 @@ devDependencies:
   element-plus:
     specifier: ^2.7.3
     version: 2.7.3(vue@3.4.27)
+  npm:
+    specifier: ^10.8.3
+    version: 10.8.3
   npm-run-all2:
     specifier: ^6.1.2
     version: 6.2.0
@@ -524,6 +533,10 @@ packages:
     resolution: {integrity: sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ==}
     dev: true
 
+  /@types/md5@2.3.5:
+    resolution: {integrity: sha512-/i42wjYNgE6wf0j2bcTX6kuowmdL/6PE4IVitMpm2eYKBUuYCprdcWVK+xEF0gcV6ufMCRhtxmReGfc6hIK7Jw==}
+    dev: true
+
   /@types/node@20.12.12:
     resolution: {integrity: sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==}
     dependencies:
@@ -738,6 +751,10 @@ packages:
       fill-range: 7.0.1
     dev: true
 
+  /charenc@0.0.2:
+    resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==}
+    dev: false
+
   /chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -777,6 +794,10 @@ packages:
       which: 2.0.2
     dev: true
 
+  /crypt@0.0.2:
+    resolution: {integrity: sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==}
+    dev: false
+
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -969,6 +990,10 @@ packages:
       binary-extensions: 2.3.0
     dev: true
 
+  /is-buffer@1.1.6:
+    resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
+    dev: false
+
   /is-core-module@2.13.1:
     resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
     dependencies:
@@ -1048,6 +1073,14 @@ packages:
     hasBin: true
     dev: false
 
+  /md5@2.3.0:
+    resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
+    dependencies:
+      charenc: 0.0.2
+      crypt: 0.0.2
+      is-buffer: 1.1.6
+    dev: false
+
   /memoize-one@6.0.0:
     resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
     dev: true
@@ -1139,6 +1172,81 @@ packages:
       shell-quote: 1.8.1
     dev: true
 
+  /npm@10.8.3:
+    resolution: {integrity: sha512-0IQlyAYvVtQ7uOhDFYZCGK8kkut2nh8cpAdA9E6FvRSJaTgtZRZgNjlC5ZCct//L73ygrpY93CxXpRJDtNqPVg==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+    hasBin: true
+    dev: true
+    bundledDependencies:
+      - '@isaacs/string-locale-compare'
+      - '@npmcli/arborist'
+      - '@npmcli/config'
+      - '@npmcli/fs'
+      - '@npmcli/map-workspaces'
+      - '@npmcli/package-json'
+      - '@npmcli/promise-spawn'
+      - '@npmcli/redact'
+      - '@npmcli/run-script'
+      - '@sigstore/tuf'
+      - abbrev
+      - archy
+      - cacache
+      - chalk
+      - ci-info
+      - cli-columns
+      - fastest-levenshtein
+      - fs-minipass
+      - glob
+      - graceful-fs
+      - hosted-git-info
+      - ini
+      - init-package-json
+      - is-cidr
+      - json-parse-even-better-errors
+      - libnpmaccess
+      - libnpmdiff
+      - libnpmexec
+      - libnpmfund
+      - libnpmhook
+      - libnpmorg
+      - libnpmpack
+      - libnpmpublish
+      - libnpmsearch
+      - libnpmteam
+      - libnpmversion
+      - make-fetch-happen
+      - minimatch
+      - minipass
+      - minipass-pipeline
+      - ms
+      - node-gyp
+      - nopt
+      - normalize-package-data
+      - npm-audit-report
+      - npm-install-checks
+      - npm-package-arg
+      - npm-pick-manifest
+      - npm-profile
+      - npm-registry-fetch
+      - npm-user-validate
+      - p-map
+      - pacote
+      - parse-conflict-json
+      - proc-log
+      - qrcode-terminal
+      - read
+      - semver
+      - spdx-expression-parse
+      - ssri
+      - supports-color
+      - tar
+      - text-table
+      - tiny-relative-date
+      - treeverse
+      - validate-npm-package-name
+      - which
+      - write-file-atomic
+
   /path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
     dev: true

tonecn/src/components/Console/Utils.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import md5 from 'md5'
+import copyText from '@/lib/copyText'
+import { ElMessage } from 'element-plus'
+const randomNum = ref(0)
+const uuid = ref('')
+const generateRandom = () => {
+    randomNum.value = Math.random()
+}
+const generateUUID = () => {
+    uuid.value = md5(`${Math.random()}${Date.now()}`);
+}
+</script>
+<template>
+    <el-col style="padding: 20px;">
+        <el-row>
+            <el-text>随机数生成</el-text>
+        </el-row>
+        <el-row>
+            <el-input style="width: 230px;" v-model="randomNum" />
+        </el-row>
+        <el-row>
+            <el-button-group>
+                <el-button style="width: 115px;" @click="generateRandom" type="primary">生成</el-button>
+                <el-button style="width: 115px;"
+                    @click="() => { copyText(randomNum + ''); ElMessage.success('复制成功') }">复制</el-button>
+            </el-button-group>
+        </el-row>
+        <el-row style="margin-top: 15px;">
+            <el-text>32位UUID生成</el-text>
+        </el-row>
+        <el-row>
+            <el-input style="width: 230px;" v-model="uuid" />
+        </el-row>
+        <el-row>
+            <el-button-group>
+                <el-button style="width: 115px;" @click="generateUUID" type="primary">生成</el-button>
+                <el-button style="width: 115px;"
+                    @click="() => { copyText(uuid + ''); ElMessage.success('复制成功') }">复制</el-button>
+            </el-button-group>
+        </el-row>
+    </el-col>
+</template>

tonecn/src/views/Console/Dashboard.vue

@@ -1,22 +1,67 @@
 <script setup lang="ts">
-import { Menu as IconMenu, Document } from '@element-plus/icons-vue'
+import { Menu as IconMenu, Document, Back, Tools } from '@element-plus/icons-vue'
 import Resources from '../../components/Console/Resources.vue'
 import Blogs from '../../components/Console/Blogs.vue'
-import { shallowRef } from 'vue';
+import Utils from '../../components/Console/Utils.vue'
-const tabComponent = shallowRef(Resources)
+import { shallowRef, ref, onMounted, onUnmounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+const tabComponent = shallowRef(Resources);
+const menuCollapse = ref(false)
+const handleResize = () => {
+    if (window.matchMedia('(max-width: 768px)').matches) {
+        menuCollapse.value = true;
+    } else {
+        menuCollapse.value = false;
+    }
+};
+const logout = () => {
+    ElMessageBox.confirm(
+        '是否要退出登录？',
+        '警告',
+        {
+            confirmButtonText: '退出',
+            cancelButtonText: '取消',
+            type: 'warning'
+        }
+    ).then(() => {
+        localStorage.clear()
+        ElMessage.success('退出成功')
+        setTimeout(() => {
+            window.location.reload();
+        }, 1000);
+    })
+}
+onMounted(async () => {
+    window.addEventListener('resize', handleResize);
+})
+onUnmounted(async () => {
+    window.removeEventListener('resize', handleResize);
+})
 </script>
 <template>
     <div class="dashboard-container">
-        <el-menu default-active="1" class="menu">
+        <el-menu default-active="1" :collapse="menuCollapse" class="menu">
             <el-menu-item index="1" @click="tabComponent = Resources">
                 <el-icon><icon-menu /></el-icon>
-                <span>资源及下载</span>
+                <span style="width: 140px;">资源及下载</span>
             </el-menu-item>
             <el-menu-item index="2" @click="tabComponent = Blogs">
                 <el-icon>
                     <document />
                 </el-icon>
-                <span>博客</span>
+                <span>博客管理</span>
+            </el-menu-item>
+            <el-menu-item index="3" @click="tabComponent = Utils">
+                <el-icon>
+                    <Tools />
+                </el-icon>
+                <span>实用工具</span>
+            </el-menu-item>
+            <el-menu-item @click="logout">
+                <el-icon>
+                    <Back />
+                </el-icon>
+                <span>退出登录</span>
             </el-menu-item>
         </el-menu>
         <div style="flex: 1;min-height: calc(100vh - 90px);">
@@ -30,7 +75,8 @@ const tabComponent = shallowRef(Resources)
 .dashboard-container {
     display: flex;
 }
+
 .dashboard-container .menu {
-    min-width: 200px;
+    /* min-width: 200px; */
 }
 </style>