的

src/api/mix/index.js

@@ -42,4 +42,11 @@ export function phone2qq(params) {
   });
 }
 
-
+// hydict
+export function hydict(params) {
+  return request({
+    url: '/mix/dict',
+    method: 'get',
+    params:{word:params}
+  });
+}

src/assets/style/main.css

@@ -63,3 +63,15 @@ input {
 #plink .v-binder-follower-content {
   width: 20vw;
 }
+
+@font-face {
+  font-family: 'yapi';
+  src: url('@/assets/font/yapi.otf');
+}
+
+/* body {
+  font-family: 'yapi';
+} */
+* {
+  scroll-behavior: smooth;
+}

src/util/index.js

@@ -62,7 +62,7 @@ export function formatTime(time, f) {
 }
 
 /** 
- * @description: 补零函数 为时间服务 不足两位的自定在数字前面加上0
+ * @description: 补零函数 为时间服务 不足两位的自动在数字前面加上0
  * @param {*} n 待补零数字
  * @return {*} 补零后数字
  */
@@ -77,7 +77,7 @@ export function deepclone(obj) {
   if (typeof obj !== "object") {
     return;
   }
-  else if (window.JSON) {
+  if (window.JSON) {
     str = JSON.stringify(obj), //系列化对象
       newobj = JSON.parse(str); //还原
   }

src/views/article/mini/index.vue

@@ -10,7 +10,7 @@
 
     <div ref="containerRef " class="cont editor">
       <Editor class="min-h-[300px]" v-model="info.cont" :defaultConfig="editorConfig" @onCreated="onCreated" />
-      <n-card class="fixed top-24 right-28  w-80 cursor-pointer">
+      <n-card v-if="indexs.length>0" class="fixed top-24 right-28  w-80 cursor-pointer">
         <template #header>
           <div>目录</div>
         </template>
@@ -88,9 +88,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="less">
-* {
+
-  scroll-behavior: smooth;
-}
 
 .title {
   font-style: italic;

src/views/widget/component/dict.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <div ref="header" class="flex justify-evenly w-full px-8 my-8">
+      <n-input v-model:value="word" maxlength="1" type="text" placeholder="请输入汉字" @keyup.enter="submit"></n-input>
+      <n-button class="w-32 ml-8" type="primary" size="medium" @click="submit">确认</n-button>
+    </div>
+    <n-scrollbar :style="{height:`60vh`}" class="px-8" v-if="isSuccess">
+      <div>
+        <span class="mr-2 text-pp-500 text-lg">
+          {{ word }}
+        </span>
+        <span class="mr-2">
+          {{ result.pinyin }}
+        </span>
+        <span class="mr-2">
+          {{ result.traditional }}
+        </span>
+        {{ result.strokes }}
+      </div>
+      <div v-html="result.explanation">
+
+      </div>
+    </n-scrollbar>
+    <div class=" text-center text-[red]" v-else>
+      汉字不存在或查询太快！
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+
+//mark import
+
+//mark data
+const word = ref('');
+const isSuccess = ref(true);
+const result = ref({});
+const cont = ref([]);
+const header = ref(null);
+//mark method
+async function submit() {
+  result.value = {};
+  cont.value = [];
+  if (word.value.length == 0) {
+    return;
+  }
+  const res = await $http.mix.hydict(word.value);
+  if (res.code == 1) {
+    result.value = res.data[0];
+    result.value.pinyin = res.data[0].pinyin.replace(/ /g, '').replace(/,/g, ' ');
+    result.value.traditional = result.value.traditional == word.value ? '' : "<繁> " + result.value.traditional;
+    result.value.strokes = `共 ${result.value.strokes} 画`;
+    result.value.explanation.split('\n\n').forEach((item, index) => {
+      if (index == 0) return
+      cont.value.push(item);
+    });
+    result.value.explanation = cont.value.join('<br>');
+    isSuccess.value = true;
+  } else {
+    isSuccess.value = false;
+  }
+  console.log(res);
+}
+
+
+</script>
+
+<style scoped></style>

src/views/widget/index.vue

@@ -4,7 +4,7 @@
       <template #header>
         <div class="text-xl text-center">小工具</div>
       </template>
-      <div class=" flex justify-around">
+      <div class=" flex justify-around flex-wrap">
         <n-card v-show="i.show" class="w-[45%] mt-4 h-20 bg-[#f3f4f5]" hoverable size="small" @click="handdleWidget(i)" v-for="i in widgets">
           <template #header>
             <div class="text-pp-500 text-center">{{ i.title }}</div>
@@ -28,6 +28,7 @@
 
 <script setup>
 //mark import
+import dict from './component/dict.vue';
 import phone2qq from './component/phone2qq.vue';
 import qq2phone from './component/qq2phone.vue';
 //mark data
@@ -45,7 +46,14 @@ const widgets = ref([{
   title: '手机号查QQ号',
   desc: "请勿乱用，打扰别人生活！",
   show: true
-}]);
+}, {
+  name: 'dict',
+  comp: markRaw(dict),
+  title: '汉语字典',
+  desc: "汉语字典，初级版，期待升级。。。",
+  show: true
+}
+]);