搭建好基本的笔顺码框架

app.vue

@@ -22,5 +22,7 @@ import TopBar from "~/components/index/TopBar.vue";
   </div>
 </template>
 <style scoped>
-
+.el-main{
+  padding: 0px;
+}
 </style>

components/index/TopBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-
+let route = useRoute()
-import { ref } from 'vue'
+// import { ref } from 'vue'
 
 // const handleSelect = (key: string, keyPath: string[]) => {
 //   console.log(key, keyPath)
@@ -8,8 +8,10 @@ import { ref } from 'vue'
 </script>
 
 <template>
+  <Title>ZZIYU DATA</Title>
+  <client-only>
     <el-menu
-      :default-active="'/'"
+        :default-active="route.path"
         class="el-menu-demo"
         mode="horizontal"
         :router="true"
@@ -27,6 +29,7 @@ import { ref } from 'vue'
         <el-menu-item index="/tools/qqazk/">笔顺码字典</el-menu-item>
       </el-sub-menu>
     </el-menu>
+  </client-only>
 </template>
 
 <style scoped>

components/tools/qqazk/QqazkSearchBox.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import {MessageBox} from "@element-plus/icons-vue";
+import {Action} from "element-plus";
+
+const allEng = /^[a-zA-Z]+$/;
+const allChi = /^[\u4e00-\u9fa5]+$/
+interface SearchLable{
+  words:string
+  method:string
+}
+const formLabelAlign = reactive<SearchLable>({
+  words: '',
+  method: 'bsmf',
+})
+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.words=''
+      ElMessageBox.alert("输入内容错误，请检查是否选择了正确的搜索方式。","输入内容不符合规范",{
+          confirmButtonText: '确认',
+          callback:(action:Action)=>{
+
+          }
+      }
+    )
+  }
+
+}
+
+</script>
+
+<template>
+  <el-form
+      :label-position="'right'"
+      label-width="100px"
+      :model="formLabelAlign"
+      style="max-width: 460px"
+      @keydown.enter="testAndSearch"
+      @submit.native.prevent
+  >
+    <el-form-item label="查询方法">
+      <el-radio-group v-model="formLabelAlign.method" label="label position">
+        <el-radio-button label="bsmf">笔顺码前部</el-radio-button>
+        <el-radio-button label="bsmc">笔顺码中部</el-radio-button>
+        <el-radio-button label="hz">汉字</el-radio-button>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="查询内容">
+      <el-input @keydown.enter="testAndSearch"   v-model="formLabelAlign.words" />
+    </el-form-item>
+    <el-form-item>
+      <el-button @click="testAndSearch">搜索</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style scoped>
+
+</style>

components/tools/qqazk/QqazkTop.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const route = useRoute()
+</script>
+
+<template>
+  <Title>笔顺码字典</Title>
+  <client-only>
+    <el-menu
+        :default-active="route.path"
+        class="el-menu-demo"
+        mode="horizontal"
+        :ellipsis="false"
+        :router="true"
+    >
+      <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>
+  </client-only>
+</template>
+
+
+<style scoped>
+a{
+  text-decoration: none;
+}
+</style>

pages/data/[WebName].vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import {useRoute} from "vue-router";
 const route = useRoute()
-let webName = route.params.WebName
+let {api} = await $fetch('/api/data/all')
+
 </script>
 
 <template>
-这是 {{webName}} 数据展示
+这是 {{route.params.WebName}} 数据展示
 </template>
 
 <style scoped>

pages/tools/qqazk.vue

@@ -1,9 +1,21 @@
 <script setup lang="ts">
+import QqazkTop from "~/components/tools/qqazk/QqazkTop.vue";
 
+interface Ret{
+  data:any
+  message:string
+  haveMess:boolean
+}
+let mess:Ret = await $fetch('/api/tools/qqazk/search')
 </script>
 
 <template>
-<NuxtPage></NuxtPage>
+  <div class="common-layout">
+    <el-container>
+      <el-header><QqazkTop></QqazkTop></el-header>
+      <el-main><NuxtPage></NuxtPage></el-main>
+    </el-container>
+  </div>
 </template>
 
 <style scoped>

pages/tools/qqazk/about.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

pages/tools/qqazk/index.vue

@@ -1,9 +1,19 @@
 <script setup lang="ts">
+import QqazkSearchBox from "~/components/tools/qqazk/QqazkSearchBox.vue";
 
+interface Ret{
+  data:any
+  message:string
+  haveMess:boolean
+}
+const api = await $fetch('/api/tools/qqazk/search')
 </script>
 
 <template>
-  this is qqazk index page
+  <div style="display: flex;justify-content: center;flex-direction: column">
+    <el-text style="font-size: 50px;padding-bottom: 25px">笔顺码字典</el-text>
+    <QqazkSearchBox></QqazkSearchBox>
+  </div>
 </template>
 
 <style scoped>

server/api/data/all.ts

@@ -0,0 +1,7 @@
+export default defineEventHandler((envent)=>{
+    // @ts-ignore
+    const webName:string|undefined = envent.context.params.WebName
+    return {
+        api:'works'
+    }
+})

server/api/tools/qqazk/search.ts

@@ -0,0 +1,24 @@
+import {readFile} from "fs";
+import path from "path";
+interface Word{
+    bsm:string
+    hz:string
+    pyJs:string[]
+}
+interface Ret{
+    data:any
+    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=>{
+    return {
+        data:words[0].pyJs.toString(),
+        message:"",
+        haveMess:false
+    }
+})