test

<template>
<div/>
</template>
<script>
import annyang from 'annyang'
import cnchar from 'cnchar'
import { menuRoutes } from '@/router/index'

export default {
  name: 'SpeechRecognition',
  data () {
    return {
      routerMap: [],
      topMenuMap: []
    }
  },
  created () {
    this.initializeRouterData()
  },
  mounted () {
    this.initializeSpeechRecognition()
  },

  beforeDestroy () {
    if (annyang) {
      annyang.removeCallback('result', this.handleSpeechResult)
      annyang.abort()
    }
  },

  methods: {
    initializeRouterData () {
      this.routerMap = Object.freeze(this.getAllRoutesMeta(menuRoutes))
      this.topMenuMap = Object.freeze(this.findTopLevelPath(menuRoutes))
    },
    initializeSpeechRecognition () {
      if (annyang) {
        annyang.setLanguage('zh-CN')
        annyang.addCallback('result', this.handleSpeechResult)
        annyang.start()
        this.$message.success('语音助手已运行!')
      } else {
        this.$message.error('抱歉，您的浏览器不支持语音识别。')
      }
    },
    handleSpeechResult (phrases) {
      console.log('您说了:', phrases)
      const [word] = phrases
      if (word) {
        this.gotoPage(word)
      }
    },
    gotoPage (word) {
      const hasKeyWord = word.includes('打开')
      const fullStr = cnchar.spell(word, 'first', 'low')
      const noActionWord = word.replace('打开', '')
      const accurateWord = this.routerMap.find((t) => t.title === noActionWord)
      // 精准匹配
      if (accurateWord) {
        this.navigateToRoute(accurateWord)
        return
      }
      // 模糊匹配
      for (const route of this.routerMap) {
        const { title } = route
        const pinyin = cnchar.spell(title, 'first', 'low')
        if (hasKeyWord && (word.includes(title) || fullStr.includes(pinyin))) {
          this.navigateToRoute(route)
          return
        }
      }
      if (hasKeyWord) {
        this.$message.error('抱歉，未能识别清楚,请重新尝试。')
        return
      }
      console.log('未匹配到关键词', word)
    },
    navigateToRoute (route) {
      const { name: routeName, path, child } = route
      const isTop = this.topMenuMap.some((t) => t.path === path)
      const jumpPath = isTop ? { path, child } : this.topMenuMap.find((t) => t.children.includes(path))

      this.$store.dispatch('permission/setActiveMenuPath', jumpPath).then(() => {
        this.$router.push({ name: routeName })
      })
    },
    // 获取所有一级路由和最底层路由的 meta.title 和 name
    getAllRoutesMeta (routes) {
      const result = []
      routes.forEach(route => {
        // 查找当前路由的最顶级路由路径
        // 将当前路由的 meta.title 和 name 添加到结果数组中
        if (route.meta && route.meta.title && route.name) {
          result.push({
            title: route.meta.title,
            name: route.name,
            path: route.path,
            child: route.children || []
          })
        }
        // 如果当前路由有子路由，则递归获取子路由的 meta.title 和 name
        if (route.children && route.children.length > 0) {
          const childMeta = this.getAllRoutesMeta(route.children)
          result.push(...childMeta)
        }
      })
      return result
    },
    // 获取一级菜单
    findTopLevelPath (routes) {
    // 递归地获取所有子路由的路径
      function getChildren (route) {
        if (!route.children || route.children.length === 0) {
          return []
        } else {
          return route.children.flatMap(child => {
            const childPaths = [child.path]
            if (child.children && child.children.length > 0) {
              // 如果子路由还有子路由，则递归获取子路由的路径
              childPaths.push(...getChildren(child))
            }
            return childPaths
          })
        }
      }

      // 遍历所有路由，找到与当前路由匹配的路由
      return routes.map(route => ({
        path: route.path,
        child: route.children,
        children: getChildren(route)
      }))
    }

  }
}
</script>

<style scoped>
/* Add your styles here */
</style>