feat: 增加关键词提示和推荐知识功能

src/App.vue

@@ -8,7 +8,7 @@ import { handleThemeStyle } from '@/utils/theme'
 
 onMounted(() => {
   nextTick(() => {
-    // 初始化主题样式  
+    // 初始化主题样式
     handleThemeStyle(useSettingsStore().theme)
   })
 })

src/assets/style.css

@@ -616,6 +616,14 @@ video {
   position: sticky;
 }
 
+.-right-1 {
+  right: -0.25rem;
+}
+
+.-top-1 {
+  top: -0.25rem;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
@@ -660,14 +668,6 @@ video {
   grid-column: span 3 / span 3;
 }
 
-.col-span-4 {
-  grid-column: span 4 / span 4;
-}
-
-.col-span-6 {
-  grid-column: span 6 / span 6;
-}
-
 .m-2 {
   margin: 0.5rem;
 }
@@ -774,10 +774,6 @@ video {
   margin-top: auto;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
 .line-clamp-2 {
   overflow: hidden;
   display: -webkit-box;
@@ -825,6 +821,18 @@ video {
   height: 4rem;
 }
 
+.h-20 {
+  height: 5rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-40 {
+  height: 10rem;
+}
+
 .h-5 {
   height: 1.25rem;
 }
@@ -849,18 +857,18 @@ video {
   height: 100%;
 }
 
-.h-20 {
-  height: 5rem;
-}
-
-.h-40 {
-  height: 10rem;
+.max-h-96 {
+  max-height: 24rem;
 }
 
 .max-h-screen {
   max-height: 100vh;
 }
 
+.min-h-96 {
+  min-height: 24rem;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -897,10 +905,18 @@ video {
   width: 8rem;
 }
 
+.w-4 {
+  width: 1rem;
+}
+
 .w-40 {
   width: 10rem;
 }
 
+.w-5\/6 {
+  width: 83.333333%;
+}
+
 .w-96 {
   width: 24rem;
 }
@@ -929,10 +945,6 @@ video {
   width: 1px;
 }
 
-.w-5\/6 {
-  width: 83.333333%;
-}
-
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -949,6 +961,16 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -967,10 +989,6 @@ video {
   resize: both;
 }
 
-.grid-cols-12 {
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -991,10 +1009,6 @@ video {
   grid-template-columns: repeat(6, minmax(0, 1fr));
 }
 
-.grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
 .flex-col {
   flex-direction: column;
 }
@@ -1055,6 +1069,12 @@ video {
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1079,12 +1099,6 @@ video {
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
 
-.space-x-6 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1105,10 +1119,6 @@ video {
   border-radius: 9999px !important;
 }
 
-.rounded {
-  border-radius: 0.25rem;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1339,10 +1349,6 @@ video {
   padding-top: 1.75rem;
 }
 
-.pl-\[100px\] {
-  padding-left: 100px;
-}
-
 .text-center {
   text-align: center;
 }
@@ -1373,6 +1379,10 @@ video {
   line-height: 2.25rem;
 }
 
+.text-\[10px\] {
+  font-size: 10px;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1592,10 +1602,26 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-300 {
   transition-duration: 300ms;
 }
 
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.hover\:scale-105:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:bg-blue-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));

src/permission.js

@@ -10,6 +10,7 @@ import useSystemStore from '@/store/main/system/system'
 import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
 import useSelectStore from '@/store/commonSelect/common'
+import useKeysStore from '@/store/modules/keys'
 
 NProgress.configure({ showSpinner: false })
 
@@ -46,6 +47,8 @@ router.beforeEach((to, from, next) => {
                   }
                 })
                 await useSelectStore().getSelectData()
+
+                await useKeysStore().setKeysTire()
                 next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
               })
           })

src/store/commonSelect/common.js

@@ -83,7 +83,7 @@ const useSelectStore = defineStore('common', {
             const selectCategoryResult = await getPageListData('/flowable/category')
             this.categoryListData = getUserSelcet(selectCategoryResult.data, 'categoryName', 'categoryName')
 
-        }
+        },
     }
 })
 function arrayToTree(list, root) {

src/store/modules/keys.js

@@ -0,0 +1,15 @@
+import { getPageListData } from '@/api/main/system/system';
+import { buildTrie } from '@/utils/trie';
+const useKeysStore = defineStore('keys', {
+  state: () => ({
+    knowledgeKeys: [],
+  }),
+  actions: {
+    async setKeysTire() {
+      const knowledgeKeysResult = await getPageListData('/km/doc/GetDcoKeywords');
+      this.knowledgeKeys = buildTrie(knowledgeKeysResult.data ?? []);
+    },
+  },
+});
+
+export default useKeysStore;

src/utils/tools.js

@@ -24,4 +24,6 @@ export const hidePhone = (phone) => {
     return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
 }
 
-
+export const stripHtmlByRegex = (html) => {
+    return html.replace(/<[^>]*>/g, '').replace(/&[^;]+;/g, '');
+}

src/utils/trie.js

@@ -0,0 +1,36 @@
+// 构建Trie树
+export const buildTrie = (keywords) => {
+  const root = { maxLength: 0 };
+  let maxLength = 0;
+  for (const word of keywords) {
+    const normalizedWord = word.toLowerCase();
+    maxLength = Math.max(maxLength, normalizedWord.length);
+    let node = root;
+    for (const char of normalizedWord) {
+      if (!node[char]) node[char] = {};
+      node = node[char];
+    }
+    node.isEnd = true;
+    node.word = word; // 存储原始单词
+  }
+  root.maxLength = maxLength;
+  return root;
+};
+
+export const findKeyword = (input, trie) => {
+  const str = input.toLowerCase();
+  const maxLen = trie.maxLength;
+  const len = str.length;
+  const results = [];
+
+  for (let i = 0; i < len; i++) {
+    let node = trie;
+    for (let j = i; j < Math.min(i + maxLen, len); j++) {
+      const char = str[j];
+      node = node[char];
+      if (!node) break;
+      if (node.isEnd) results.push(node.word); // 添加找到的关键字到结果数组
+    }
+  }
+  return results; // 返回所有找到的关键字
+};

src/views/main/phone/index.vue

@@ -125,9 +125,9 @@
                         </template>
                         <div class="space-y-4">
                             <!-- 实时语音识别区域 -->
-                            <div class="bg-white rounded-lg p-4 shadow-sm">
+                            <h3 class="text-lg font-medium">语音识别</h3>
+                            <div class="bg-white rounded-lg p-4 shadow-sm overflow-y-auto max-h-96 min-h-96">
                                 <div class="flex justify-between items-center mb-4">
-                                    <h3 class="text-lg font-medium">语音识别</h3>
                                     <!-- <div class="flex items-center space-x-2">
                                         <el-tag :type="voiceStatus === 'active' ? 'success' : 'info'" size="small">
                                             {{ voiceStatus === 'active' ? '识别中' : '未开始' }}
@@ -160,26 +160,41 @@ from-white to-transparent pointer-events-none z-10"></div>
                                         class="absolute left-0 bottom-0 w-full h-16 bg-gradient-to-t from-white to-transparent pointer-events-none">
                                     </div>
                                 </div>
-                                <!-- 关键词提示 -->
-                                <!-- <div class="space-y-2">
-                                    <h4 class="font-medium text-sm text-gray-600">关键词提示</h4>
-                                    <div class="flex flex-wrap gap-2">
-                                        <el-tag v-for="(keyword, idx) in keywords" :key="idx" :type="keyword.type"
-                                            effect="plain" size="small">
-                                            {{ keyword.text }}
-                                        </el-tag>
-                                    </div>
-                                </div> -->
-                                <!-- 建议话术 -->
-                                <!-- <div class="mt-4 space-y-2">
-                                    <h4 class="font-medium text-sm text-gray-600">建议话术</h4>
-                                    <div class="space-y-2">
-                                        <div v-for="(suggestion, idx) in suggestions" :key="idx"
-                                            class="p-2 bg-gray-50 rounded text-sm text-gray-600 cursor-pointer hover:bg-gray-100">
-                                            {{ suggestion }}
+
+                            </div>
+
+                            <!-- 关键词提示 -->
+                            <div class="space-y-2">
+                                <h4 class="font-medium text-sm text-gray-600">关键词提示</h4>
+                                <div class="flex flex-wrap gap-2">
+                                    <el-tag v-for="(keyword, idx) in keywords" class="relative transition-transform duration-300 ease-in-out hover:scale-105" :key="idx" :type="keyword.type"
+                                        effect="plain" size="small" @click="getKnowledgeBaseList(keyword.text)">
+                                        {{ keyword.text }}
+                                        <span
+                                            class="absolute -top-1 -right-1 bg-blue-500 text-white text-[10px] rounded-full w-4 h-4 flex items-center justify-center">
+                                            {{ keyword.count }}
+                                        </span>
+                                    </el-tag>
+                                </div>
+                            </div>
+                            <!-- 推荐知识 -->
+                            <div class="mt-4 space-y-4">
+                                <h4 class="font-medium text-sm text-gray-600">推荐知识</h4>
+                                <div class="space-y-4">
+                                    <div v-for="(item, idx) in recommendedKnowledge" :key="idx"
+                                        class="p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all cursor-pointer">
+                                        <div class="flex items-center justify-between mb-2">
+                                            <h5 class="font-medium">{{ item.title }}</h5>
+                                            <el-tag size="small" type="default">{{ item.directoryname }}</el-tag>
+                                        </div>
+                                        <p class="text-sm text-gray-600 line-clamp-2 mb-2">{{
+                                            stripHtmlByRegex(item.content) }}</p>
+                                        <div class="flex items-center justify-between text-xs text-gray-500">
+                                            <span>发布时间：{{ item.createTime }}</span>
+                                            <span>阅读：{{ item.reads }}</span>
                                         </div>
                                     </div>
-                                </div> -->
+                                </div>
                             </div>
                         </div>
                     </el-tab-pane>
@@ -342,11 +357,11 @@ from-white to-transparent pointer-events-none z-10"></div>
             <div class="w-[65%] space-y-6">
                 <div class="bg-white rounded-lg p-6 shadow-sm">
                     <div class="flex justify-between items-center mb-6">
-      <h2 class="text-xl font-medium">工单信息</h2>
-      
-      <el-button :loading-icon="Eleme" v-if="showAI && showAsr" class="flex items-center gap-1" type="primary" link @click="aiSubmit"
-                    :loading="aiLoading">智能填单</el-button>
-    </div>
+                        <h2 class="text-xl font-medium">工单信息</h2>
+
+                        <el-button :loading-icon="Eleme" v-if="showAI && showAsr" class="flex items-center gap-1"
+                            type="primary" link @click="aiSubmit" :loading="aiLoading">智能填单</el-button>
+                    </div>
                     <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
                         <el-row :gutter="20">
                             <el-col :span="12">
@@ -410,6 +425,7 @@ from-white to-transparent pointer-events-none z-10"></div>
 <script lang="ts" setup name="CallScreen">
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import moment from 'moment';
+import { findKeyword } from '@/utils/trie';
 import {
     UserFilled,
     Phone,
@@ -435,14 +451,14 @@ import {
 import { hidePhone } from '@/utils/tools';
 import { ElMessage } from 'element-plus';
 import useSelectStore from '@/store/commonSelect/common';
+import useKeysStore from'@/store/modules/keys'
 import { getPageListData, createPageData } from '@/api/main/system/system';
 import { userDecryptToAsterisk } from '@/utils/aes';
 import knowledgeList from "@/views/main/knowledgeBase/knowledgeList/cpns/konwlegelist/konwlegelist";
 
-import { max,flatten } from 'lodash';
+import { max,flatten, keys } from 'lodash';
 import { getOfffixNuber, getCallSate } from '@/utils/index';
-
-
+import { stripHtmlByRegex } from '@/utils/tools';
 
 const router = useRouter()
 let { proxy } = getCurrentInstance()
@@ -828,23 +844,24 @@ const transcripts: any = ref([
     //     page_content: '你好，中国热线请假。',
 ])
 // 关键词提示
-const keywords = ref([
-    {
-        text: '产品使用方法',
-        type: 'primary'
-    },
-    {
-        text: '操作流程',
-        type: 'success'
-    },
+const keywords: any = ref([
     {
-        text: '正面反馈',
-        type: 'success'
+        text: '强迫症',
+        type: 'primary',
+        count: 0,
     },
-    {
-        text: '满意度高',
-        type: 'success'
-    }
+    // {
+    //     text: '操作流程',
+    //     type: 'success'
+    // },
+    // {
+    //     text: '正面反馈',
+    //     type: 'success'
+    // },
+    // {
+    //     text: '满意度高',
+    //     type: 'success'
+    // }
 ]);
 // 建议话术
 const suggestions = ref([
@@ -893,7 +910,7 @@ window.addEventListener('AsrMessageEvent', (msg: any) => {
     }
 
     console.log(msgInfo, 'msgInfo');
-
+    if (msgInfo.page_content.length > 2) checkKeys(msgInfo.page_content);
     transcripts.value.push(msgInfo);
 })
 
@@ -1041,7 +1058,89 @@ async function getSearchDocs (text) {
 
 }
 
+// 推荐知识
+const recommendedKnowledge: any = ref([
+    // {
+    //     title: '智能客服系统功能配置指南',
+    //     content: '本文详细介绍了智能客服系统的核心功能配置方法，包括自动应答规则设置、多渠道接入配置、知识库管理等内容。通过本指南，您可以快速掌握系统的基础配置和高级功能设置。',
+    //     category: '使用指南',
+    //     type: 'primary',
+    //     publishTime: '2024-01-20',
+    //     reads: 1234
+    // },
+    // {
+    //     title: '常见故障诊断与解决方案',
+    //     content: '汇总了系统使用过程中最常见的技术问题和解决方案，包括登录异常、数据同步失败、性能优化等问题的处理方法。本文档由技术支持团队整理，持续更新维护。',
+    //     category: '技术支持',
+    //     type: 'warning',
+    //     publishTime: '2024-01-18',
+    //     reads: 856
+    // },
+    // {
+    //     title: '客服质量管理最佳实践',
+    //     content: '本文从客服管理者的角度，详细介绍了如何提升客服团队的服务质量，包括话术规范、服务标准、质检方案等内容，帮助管理者建立高效的客服质量管理体系。',
+    //     category: '最佳实践',
+    //     type: 'success',
+    //     publishTime: '2024-01-15',
+    //     reads: 678
+    // },
+    // {
+    //     title: '数据分析报表解读指南',
+    //     content: '详细说明了系统各类数据分析报表的含义和使用方法，包括客服效率分析、满意度趋势、问题分类统计等报表的查看和导出方式，帮助您更好地利用数据指导工作。',
+    //     category: '数据分析',
+    //     type: 'info',
+    //     publishTime: '2024-01-12',
+    //     reads: 945
+    // }
+]);
+
+
+const keys = useKeysStore().knowledgeKeys;
+
+console.log(keys, 'keys')
+
+const getKnowledgeBaseList = (key) => {
+    if (key.length < 2) {
+        return
+    }
+    suggestions.value = []
+    
+    getPageListData('/km/doc', {
+        keywords: key,
+        pageNum: 1,
+        pageSize: 5,
+    }).then(({ data, total }) => {
+        recommendedKnowledge.value = data;
+    });
 
+}
+
+const checkKeys = (text: string) => {
+    const list = findKeyword(text, keys);
+    if (list?.length) {
+        setKeys(list)
+    }
+}
+
+const setKeys = (keys: Array<string>) => {
+    const types = ['primary', 'success', 'warning', 'danger'];
+    for (const key of keys) {
+        const index = keywords.value.findIndex((item) => item.text === key);
+        if (index > -1) {
+            keywords.value[index].count++;
+            keywords.value[index].type = types[keywords.value[index].count % types.length];
+        } else {
+            keywords.value.push({
+                text: key,
+                type: 'primary',
+                count: 1,
+            });
+        }
+    }
+
+    keywords.value.sort((a, b) => b.count - a.count);
+
+}
 
 </script>
 <style scoped>