笔顺码字典写完了，累死了

app.vue

@@ -16,6 +16,7 @@ import TopBar from "~/components/index/TopBar.vue";
           邮箱：Zengtudor@outlook.com
           技术栈：Vue3 Vite Nuxt3 ...
           (本人初中生有意向可以与我讨论)
+          <NuxtLink to="/map">网站地图</NuxtLink>
         </el-text>
       </el-footer>
     </el-container>
@@ -25,4 +26,8 @@ import TopBar from "~/components/index/TopBar.vue";
 .el-main{
   padding: 0px;
 }
+a{
+  text-decoration: none;
+  color: var(--el-menu-text-color);
+}
 </style>

components/tools/qqazk/QqazkDetails.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import {Action} from "element-plus";
+
+const props = defineProps({
+  id:String
+})
+interface Word{
+  bsm:string
+  hz:string
+  pyJs:string[]
+}
+let showCards = reactive<Word>({
+  pyJs:[],
+  bsm:"",
+  hz:""
+})
+const ret:any  =await $fetch(`/api/tools/qqazk/details`,{params:{id:props.id}})
+if(ret.haveMess){
+  ElMessageBox.alert(ret.message,"获取资源错误",{
+    confirmButtonText: '确认',
+    callback:(action:Action)=>{
+
+    }
+  })
+}
+const d = ret.data
+
+  const arr: string[] = []
+  d.pyJs.forEach((df:any)=>{
+    let dfArr = df.split("。")
+    if (dfArr.length==1){
+      arr.push(dfArr[0])
+    }else {
+      dfArr.forEach((de:any)=>{
+        arr.push(de+"。")
+      })
+    }
+  })
+  const nI={
+    bsm:d.bsm,
+    hz:d.hz,
+    pyJs:arr
+  }
+showCards.pyJs = nI.pyJs
+showCards.bsm = nI.bsm
+showCards.hz = nI.hz
+// console.log(showCards)
+</script>
+
+<template>
+    <el-card class="box-card" >
+      <template #header>
+        <div class="card-header">
+          <span style="margin-right: 10px;font-size: 40px"> {{showCards.hz}} </span>
+        </div>
+      </template>
+      <div>笔顺码： {{showCards.bsm}}</div>
+      <div style="margin-top: 10px" v-for="i in showCards.pyJs" v-show="i!='。'">
+        {{i}}
+      </div>
+    </el-card>
+</template>
+
+<style scoped>
+
+</style>

components/tools/qqazk/QqazkSearchBox.vue

@@ -19,10 +19,10 @@ const testAndSearch = ()=>{
   if (formLabelAlign.words.length<1 ||
       formLabelAlign.method=='bsmf'&&!allEng.test(formLabelAlign.words) ||
       formLabelAlign.method=='bsmc'&&!allEng.test(formLabelAlign.words) ||
-      formLabelAlign.method=='hz'&&!allChi.test(formLabelAlign.words)
+      formLabelAlign.method=='hz'&&!allChi.test(formLabelAlign.words) ||
+      formLabelAlign.words.length>20
   ){
-      formLabelAlign.words=''
-      ElMessageBox.alert("输入内容错误，请检查是否选择了正确的搜索方式。","输入内容不符合规范",{
+      ElMessageBox.alert("输入内容错误，请检查是否选择了正确的搜索方式。搜素长度不大于20字符","输入内容不符合规范",{
           confirmButtonText: '确认',
           callback:(action:Action)=>{
 
@@ -30,7 +30,13 @@ const testAndSearch = ()=>{
       }
     )
   }else {
-    router.push('search')
+    router.push({
+      path:"/tools/qqazk/search",
+      query:{
+        words:formLabelAlign.words,
+        method:formLabelAlign.method
+      }
+    })
   }
 
 }

components/tools/qqazk/QqazkShowSearch.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+
+import {Action} from "element-plus";
+
+const props = defineProps({
+  words:String,
+  method:String
+})
+interface Word{
+  bsm:string
+  hz:string
+  pyJs:string[]
+  id:number
+}
+let showCards = ref<Word[]>([])
+const isLoading = ref(true)
+const dataRaw = await $fetch(`/api/tools/qqazk/search?words=${props.words}&method=${props.method}`)
+if (dataRaw.haveMess){
+  ElMessageBox.alert(dataRaw.message,"获取资源错误",{
+    confirmButtonText: '确认',
+    callback:(action:Action)=>{
+
+    }
+  })
+}
+showCards.value = dataRaw.data
+isLoading.value=false
+const nowPage = ref<Number>(1)
+const pageChanged = (page:number)=>{
+    nowPage.value=page
+  window.scrollTo(0, 0)
+}
+const aPage = 20
+const  pages =Math.ceil(showCards.value.length/aPage)
+
+</script>
+
+<template>
+    <el-row v-loading="isLoading" style="min-height: 100px">
+      <span v-for="(item,index) in showCards">
+<!--        {{(nowPage-1)*aPage}} {{(nowPage)*aPage}} {{index}}-->
+        <el-card class="box-card"  style="max-width: 220px;margin: 10px" v-show="index>=(nowPage-1)*aPage&&index<(nowPage)*aPage" :key="index">
+        <template #header>
+          <div class="card-header">
+            <span style="margin-right: 10px;font-size: 30px"> {{item.hz}}</span>
+            <el-button><NuxtLink :to="'/tools/qqazk/details/'+item.id">点击详情</NuxtLink></el-button>
+          </div>
+        </template>
+        <div>笔顺码： {{item.bsm}}</div>
+      </el-card>
+      </span>
+
+    </el-row>
+  <div style="display: flex;justify-content: center">
+<!--    {{showCards.length/aPage}}-->
+    <el-pagination background layout="prev, pager, next" :total="pages" @current-change="pageChanged" :default-page-size="1"/>
+  </div>
+</template>
+
+<style scoped>
+a{
+  text-decoration: none;
+  color: var(--el-menu-text-color);
+}
+</style>

components/tools/qqazk/QqazkTop.vue

@@ -12,9 +12,11 @@ const route = useRoute()
         :ellipsis="false"
         :router="true"
     >
-      <el-menu-item index="/tools/qqazk/">笔顺码字典</el-menu-item>
+      <el-menu-item index="/tools/qqazk">笔顺码字典</el-menu-item>
       <div class="flex-grow" />
-      <el-menu-item index="/tools/qqazk/about/">关于</el-menu-item>
+      <el-menu-item index="/tools/qqazk/about">关于</el-menu-item>
+      <el-menu-item v-if="route.path=='/tools/qqazk/search'" index="/tools/qqazk/search">搜索</el-menu-item>
+      <el-menu-item v-if="route.path.startsWith('/tools/qqazk/details')" index="" style="color: var(--el-menu-active-color)">结果</el-menu-item>
     </el-menu>
   </client-only>
 </template>

pages/index.vue

@@ -3,9 +3,15 @@
 </script>
 
 <template>
-  <el-text>Hello index </el-text>
+  <div style="display: flex;justify-content: center;flex-direction: column">
+    <el-text style="font-size: 20px">目前，网站还没有完全完工，但是笔顺码查询区域已经按时开放了</el-text>
+    <el-text type="danger" style="font-size: 20px">笔顺码查询 请前往 菜单 -> 工具 -> 笔顺码查询 进行查询</el-text>
+    <el-text style="font-size: 20px">其它部分正在装修，敬请期待</el-text>
+  </div>
 </template>
 
 <style scoped>
-
+.el-text{
+  margin-top: 30px;
+}
 </style>

pages/map.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <Title>网站地图</Title>
+  <div style="display: flex;justify-content: center;flex-direction: column;align-items: center">
+    <NuxtLink to="/">主页</NuxtLink>
+    <NuxtLink to="/data/all">数据收集</NuxtLink>
+    <NuxtLink to="/data/bilibili">数据收集Bilibili</NuxtLink>
+    <NuxtLink to="/data/baidu">数据收集百度</NuxtLink>
+    <NuxtLink to="/">主页</NuxtLink>
+    <NuxtLink to="/tools/qqazk/">笔顺码字典首页</NuxtLink>
+    <NuxtLink to="/tools/qqazk/about">笔顺码字典关于</NuxtLink>
+    <NuxtLink to="/tools/qqazk/search?words=&method=bsmf">所有笔顺码</NuxtLink>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

pages/tools/qqazk/details/[id].vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import {useRoute} from "vue-router";
+import QqazkDetails from "~/components/tools/qqazk/QqazkDetails.vue";
+
+const route = useRoute()
+</script>
+
+<template>
+<QqazkDetails :id="route.params.id"/>
+</template>
+
+<style scoped>
+
+</style>

pages/tools/qqazk/search.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
+import {useRoute} from "vue-router";
+import QqazkShowSearch from "~/components/tools/qqazk/QqazkShowSearch.vue";
+const route = useRoute()
+if (route.query.words==null||route.query.method==null){
+  route.query.words='错误'
+  route.query.method= 'hz'
+}
 
 </script>
 
 <template>
- this is qqazk search page
+<QqazkShowSearch :words="route.query.words" :method="route.query.method"  />
+
 </template>
 
 <style scoped>

server/api/tools/qqazk/details.ts

@@ -0,0 +1,40 @@
+import {readFile} from "fs";
+
+interface Word{
+    bsm:string
+    hz:string
+    pyJs:string[]
+    id:number
+}
+interface Ret{
+    data:Word
+    message:string
+    haveMess:boolean
+}
+let words:Word[]
+readFile("./word.json",'utf-8',(err, data)=>{
+    if (err)console.error(err)
+    words=JSON.parse(data)
+})
+export default defineEventHandler((event):Ret=>{
+    const query = getQuery(event)
+    if (query.id=="错误"){
+        return {
+            data:words[0],
+            message:"参数错误",
+            haveMess:true
+        }
+    }
+    if (query.id>=words.length){
+        return {
+            data:words[0],
+            message:"参数越界",
+            haveMess:true
+        }
+    }
+    return {
+        data:words[query.id],
+        message:"",
+        haveMess:false
+    }
+})

server/api/tools/qqazk/search.ts

@@ -4,9 +4,10 @@ interface Word{
     bsm:string
     hz:string
     pyJs:string[]
+    id:number
 }
 interface Ret{
-    data:any
+    data:Word[]
     message:string
     haveMess:boolean
 }
@@ -14,10 +15,48 @@ let words:Word[]
 readFile("./word.json",'utf-8',(err, data)=>{
     if (err)console.error(err)
     words = JSON.parse(data)
+    for (let i =0 ;i<words.length;i++){
+        words[i].id=i
+    }
 })
 export default defineEventHandler((event):Ret=>{
+    const retWords:Word[] = []
+    const query = getQuery(event)
+    if (query.words=="错误"||query.method=="错误"||!(query.method=="bsmf"||query.method=="bsmc"||query.method=="hz")||query.words.length>20){
         return {
-        data:words[0].pyJs.toString(),
+            data:[],
+            message:"参数错误",
+            haveMess:true
+        }
+    }
+    const word:string = query.words as unknown as string
+    if (word==""){
+        return {
+            data:words,
+            message:"",
+            haveMess:false
+        }
+    }
+    if (query.method=="hz"){
+        for (let i =0;i<word.length;i++){
+            for (let j=0;j<words.length;j++){
+                if (words[j].hz.includes(word[i])){
+                    let newWords:Word = words[j]
+                    retWords.push(newWords)
+                }
+            }
+        }
+    }else if (query.method=="bsmf"){
+        words.forEach((wf,index)=>{
+            if (wf.bsm.startsWith(word)) retWords.push(wf)
+        })
+    }else if(query.method=="bsmc"){
+        words.forEach((wf,index)=>{
+            if (wf.bsm.includes(word)) retWords.push(wf)
+        })
+    }
+    return {
+        data:retWords,
         message:"",
         haveMess:false
     }