vuepress-theme-uniapp-official 1.6.1 → 1.6.3

package/components/DcloudSearchPage/ai-result.styl

@@ -0,0 +1,54 @@
+.ai-answer-card
+  padding 14px 16px
+  margin-top 12px
+  background #fff
+  border-radius 12px
+  border 1px solid rgba(0,0,0,0.06)
+  box-shadow 0 2px 8px rgba(0,0,0,0.04)
+  transition box-shadow .25s, transform .2s
+  cursor pointer
+
+  &:hover
+    box-shadow 0 4px 14px rgba(0,0,0,0.08)
+    transform translateY(-1px)
+  /* 重置部分元素样式，防止样式冲突 */
+  pre, code
+    white-space: pre-wrap;    /* 允许换行 */
+    word-wrap: break-word;    /* 允许长行断开 */
+    word-break: break-word;
+  h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote, pre
+    line-height: normal
+    margin: 0
+    padding: 0
+  ul, ol
+    list-style: none
+
+.ai-answer-header
+  display flex
+  align-items center
+  margin-bottom 8px
+
+.ai-answer-icon
+  font-size 18px
+  margin-right 6px
+
+.ai-answer-title
+  font-weight 600
+  font-size 15px
+  color #333
+
+.ai-answer-msg
+  font-size 14px
+  line-height normal
+  color #555
+  // white-space pre-wrap
+  word-break break-word
+  animation fadeIn .3s ease
+
+@keyframes fadeIn
+  from
+    opacity 0
+    transform translateY(4px)
+  to
+    opacity 1
+    transform translateY(0)

package/components/DcloudSearchPage/components/AIChat/index.vue

@@ -28,14 +28,7 @@
         </div>
       </transition-group>
 
-      <div v-if="sending" class="chat-skeleton chat-skeleton-left">
-        <div class="content">
-          <div class="line"></div>
-          <div class="line"></div>
-          <div class="line short"></div>
-        </div>
-      </div>
-
+      <Skeleton style="width: 60%" v-if="sending" />
     </main>
 
     <footer class="chat-input-bar">
@@ -52,14 +45,14 @@
 </template>
 
 <script setup>
-import { ref, nextTick, watchEffect, onMounted, onActivated, watch } from 'vue'
+import { ref, nextTick, watchEffect, onMounted } from 'vue'
 import { renderMarkdown } from "./markdown-loader";
-import 'highlight.js/styles/github.min.css'
 import SelectPlatform from './SelectPlatform.vue';
 import { ajax } from '../../utils/postDcloudServer';
 import searchPageConfig from '@theme-config/searchPage';
+import Skeleton from '../Skeleton';
 
-const { aiPlatforms = [], aiChatForDocSearch } = searchPageConfig;
+const { aiPlatforms = [], aiChatForDocSearch = 'https://ai-assist-api.dcloud.net.cn/tbox/chatForDocSearch' } = searchPageConfig;
 
 const props = defineProps({
   currentCategory: {
@@ -98,7 +91,8 @@ watchEffect(() => {
   if (props.visible) {
     nextTick(() => {
       scrollToBottom()
-      autoGrow(true)
+      autoGrow()
+      input.value.focus()
     })
   }
 })
@@ -111,11 +105,11 @@ function formatTime() {
     .padStart(2, '0')}`
 }
 
-function autoGrow(clear) {
+function autoGrow() {
   const el = input.value
   el.style.height = 'auto'
   scrollToBottom()
-  if (clear === true) {
+  if (inputText.value.length === 0) {
     return
   }
   el.style.height = el.scrollHeight + 'px'
@@ -164,12 +158,21 @@ function platformChange(newPlatform) {
   sendPlatform.value = newPlatform
 }
 
+// 限制只取最近 6 条消息
+function getChatHistory() {
+  return messages.value.slice(-6).map(m => ({
+    role: m.role,
+    contentType: 'text',
+    content: m.raw
+  }))
+}
+
 async function send() {
   if (!inputText.value.trim() || sending.value) return
 
   const userText = inputText.value.trim()
   inputText.value = ''
-  autoGrow(true)
+  autoGrow()
 
   // 用户消息
   messages.value.push({
@@ -186,9 +189,10 @@ async function send() {
 
   let fakeReply = ''
   try {
-    const res = await ajax(aiChatForDocSearch ? aiChatForDocSearch : 'https://ai-assist-api.dcloud.net.cn/tbox/chatForDocSearch', 'POST', {
+    const res = await ajax(aiChatForDocSearch, 'POST', {
       "question": userText,
-      "group_name": sendPlatform.value
+      "group_name": sendPlatform.value,
+      "history": getChatHistory()
     })
     if (res.errorCode === 0) {
       fakeReply = res.chunk
@@ -196,7 +200,7 @@ async function send() {
       fakeReply = `抱歉，AI 助手出错了：${res.errorMessage || '未知错误'}`
     }
   } catch (error) {
-
+    fakeReply = `抱歉，AI 助手出错了：${error.message || '未知错误'}`
   }
   sending.value = false
 
@@ -223,8 +227,6 @@ window.addEventListener('resize', scrollToBottom)
 </script>
 
 <style lang="stylus">
-@import './skeleton.styl'
-
 .chat-wrapper
   display flex
   flex-direction column

package/components/DcloudSearchPage/components/AIChat/markdown-loader.js

@@ -2,39 +2,40 @@
 let markedInstance = null;
 let hljsInstance = null;
 
-function transfromLang(lang) {
-	switch (lang) {
-		case 'uts':
-			return 'typescript';
-		case 'json5':
-			return 'json';
-	}
-	if (!hljsInstance) return 'plaintext';
-	return hljsInstance.getLanguage(lang) ? lang : 'plaintext';
+function getLangCodeFromExtension (extension) {
+  const extensionMap = {
+    vue: 'markup',
+    html: 'markup',
+    md: 'markdown',
+    rb: 'ruby',
+    ts: 'typescript',
+    py: 'python',
+    sh: 'bash',
+    yml: 'yaml',
+    styl: 'stylus',
+    kt: 'kotlin',
+    rs: 'rust',
+		uts: 'typescript',
+		json5: 'json',
+  }
+
+  return extensionMap[extension] || extension
 }
 
 export async function renderMarkdown(md) {
 	if (!markedInstance) {
-		const [{ Marked }, { markedHighlight }, hljs] = await Promise.all([
-			import('marked'),
-			import('marked-highlight'),
-			import('highlight.js'),
-		]);
-
-		const marked = new Marked(
-			markedHighlight({
-				emptyLangClass: 'hljs',
-				langPrefix: 'hljs language-',
-				highlight(code, lang, info) {
-					const language = transfromLang(lang);
-					return hljs.highlight(code, { language }).value;
-				},
-			})
-		);
+		const [marked, hljs] = await Promise.all([import('marked'), import('highlight.js')]);
 
 		marked.setOptions({
 			headerIds: false,
 			mangle: false,
+			highlight(code, lang) {
+				lang = getLangCodeFromExtension(lang);
+				if (lang && hljs.getLanguage(lang)) {
+					return hljs.highlight(code, { language: lang }).value;
+				}
+				return hljs.highlightAuto(code).value;
+			},
 		});
 
 		markedInstance = marked;

package/components/DcloudSearchPage/components/{AIChat/skeleton.styl → Skeleton.vue}

@@ -1,3 +1,14 @@
+<template>
+  <div class="chat-skeleton chat-skeleton-left">
+    <div class="content">
+      <div class="line"></div>
+      <div class="line"></div>
+      <div class="line short"></div>
+    </div>
+  </div>
+</template>
+
+<style lang="stylus" scope>
 /* Skeleton base style */
 .skeleton
   background: #eee
@@ -20,7 +31,6 @@
 
 .chat-skeleton .line
   height: 14px
-  width: 60%
   border-radius: 6px
   @extend .skeleton
 
@@ -37,3 +47,5 @@
     display: flex
     flex-direction: column
     gap: 10px
+
+</style>

package/components/DcloudSearchPage/index.vue

@@ -29,14 +29,14 @@
 							<div class="input-wrap">
 								<input ref="searchInput" class="search-input" :placeholder="placeholder" type="text" @keydown.enter="
 									() => {
-										resetSearchPage();
+										resetSearch();
 										search();
 									}
 								" v-model="searchValue" />
 								<span class="search-input-btn">
 									<button @click="
 										() => {
-											resetSearchPage();
+											resetSearch();
 											search();
 										}
 									">
@@ -83,7 +83,21 @@
 						<div class="result-wrap">
 							<template v-if="isAlgolia">
 								<template v-for="item in resultList">
-									<Results :key="item.sourceId" :title="item.title" :results="item.items" :onSelect="item.onSelect" />
+									<template v-if="item">
+										<Results v-if="!item.isAI" :key="item.sourceId" :title="item.title" :results="item.items"
+											:onSelect="item.onSelect" />
+										<template v-else>
+											<div class="ai-answer-card">
+												<div class="ai-answer-header">
+													<span class="ai-answer-icon">🤖</span>
+													<span class="ai-answer-title">{{ item.title }}</span>
+												</div>
+
+												<div v-if="item.msg.length" class="ai-answer-msg" v-html="item.msg" />
+												<Skeleton v-else />
+											</div>
+										</template>
+									</template>
 								</template>
 							</template>
 
@@ -128,17 +142,21 @@
 </template>
 
 <script>
+import searchPageConfig from '@theme-config/searchPage';
 import NavbarLogo from '../NavbarLogo.vue';
 import Results from './components/Results.vue';
 import pagination from './components/pagination.vue';
 import AIChat from './components/AIChat/index.vue';
 import MainNavbarLink from '../MainNavbarLink.vue';
+import Skeleton from './components/Skeleton.vue';
 import { search as searchClient } from './utils/searchClient';
 import { postExt, postAsk } from './utils/postDcloudServer';
 import { forbidScroll, debounce } from '../../util';
 import { removeHighlightTags, isEditingContent } from './utils/searchUtils';
-import searchPageConfig from '@theme-config/searchPage';
 import Base64 from './utils/Base64';
+import { ajax } from './utils/postDcloudServer';
+import { renderMarkdown } from "./components/AIChat/markdown-loader";
+import 'highlight.js/styles/github.min.css'
 
 const {
 	enableAI = true,
@@ -147,9 +165,11 @@ const {
 		searchBox: { placeholder, buttonText, searchBy },
 		resultsScreen: { resultsText, noResultsText, askNoResultsText },
 	},
-	extraFacetFilters = []
+	extraFacetFilters = [],
+	aiChatForDocSearch = 'https://ai-assist-api.dcloud.net.cn/tbox/chatForDocSearch'
 } = searchPageConfig;
 const crawlerUrl = 'https://zh.uniapp.dcloud.io/'
+const AIErrorMsg = '很抱歉，AI 助手未能找到相关答案。请尝试更换关键词进行搜索。'
 
 const resolveRoutePathFromUrl = (url, base = '/') => {
 	if (url.indexOf(crawlerUrl) === 0) {
@@ -165,7 +185,7 @@ export default {
 
 	props: ['options'],
 
-	components: { NavbarLogo, Results, pagination, MainNavbarLink, AIChat },
+	components: { NavbarLogo, Results, pagination, MainNavbarLink, AIChat, Skeleton },
 
 	data() {
 		return {
@@ -191,6 +211,13 @@ export default {
 			totalPage: 0, // 搜索结果总共页数
 			curPage: 1, // 当前页
 			pageSize: 0, // 每页条数
+
+			searchAIResult: Promise.resolve(null),
+			aiMessage: {
+				isAI: true,
+				title: 'AI 助手回答',
+				msg: ''
+			}
 		};
 	},
 
@@ -260,10 +287,10 @@ export default {
 			});
 		},
 
-		searchValue: debounce(function () {
-			this.resetSearchPage();
+		/* searchValue: debounce(function () {
+			this.resetSearch();
 			this.search();
-		}, 300),
+		}, 300), */
 
 		$route: {
 			immediate: true,
@@ -320,8 +347,20 @@ export default {
 			}
 		},
 
-		resetSearchPage() {
+		resetSearch() {
 			this.searchPage = 0;
+			this.resetAI();
+		},
+
+		resetAI() {
+			if (this.searchAIResult && typeof this.searchAIResult.abort === 'function') {
+				this.searchAIResult.abort()
+			}
+			this.aiMessage.msg = ''
+			this.searchAIResult = null
+			if (this.enableAI && this.searchValue.trim().length) {
+				this.searchByAI()
+			}
 		},
 
 		research(curPage) {
@@ -345,11 +384,16 @@ export default {
 									items,
 								};
 							});
+
 							this.noResult = !this.resultList.length;
 							this.curHits = nbHits;
 							this.pageSize = hitsPerPage;
 							this.totalPage = nbPages;
 							this.curPage = page + 1;
+
+							if (this.curPage === 1 && this.enableAI) {
+								this.resultList.splice(1, 0, this.aiMessage);
+							}
 						})
 						.finally(() => {
 							this.showLoading = false
@@ -396,6 +440,33 @@ export default {
 			);
 		},
 
+		searchByAI() {
+			try {
+				this.searchAIResult = ajax(aiChatForDocSearch, 'POST', {
+					"question": this.searchValue,
+					"group_name": this.currentCategory.text
+				}).then(res => {
+					if (res.errorCode === 0) {
+						return renderMarkdown(res.chunk)
+					} else {
+						this.aiMessage.msg = res.errorMessage || AIErrorMsg;
+						return ''
+					}
+				})
+					.catch((err) => {
+						console.log('err :>> ', err);
+						return ''
+					})
+					.then(msg => {
+						this.aiMessage.msg = msg || AIErrorMsg;
+					})
+			} catch (err) {
+				console.log('err :>> ', err);
+				this.aiMessage.msg = err.message || AIErrorMsg;
+				return ''
+			}
+		},
+
 		searchByServer(append = false) {
 			const { tag } = this.currentCategory;
 			const query = this.searchValue || '';
@@ -509,4 +580,5 @@ export default {
 
 <style lang="stylus">
 	@import './index'
+	@import './ai-result.styl'
 </style>

package/components/DcloudSearchPage/utils/postDcloudServer.js

@@ -1,74 +1,76 @@
-const isProduction = process.env.NODE_ENV === "production"
-const isMock = false
-import mock from './mock'
+const isProduction = process.env.NODE_ENV === 'production';
+const isMock = false;
+import mock from './mock';
 
 export function ajax(url = '', method = 'get', data = {}) {
-  return new Promise((resolve, reject) => {
-    if (!url) reject('url 不可为空')
-    const xhr = new XMLHttpRequest();
-    xhr.open(method, url);
-    xhr.onreadystatechange = function () {
-      if (this.readyState == 4 && this.status == 200) {
-        try {
-          resolve(JSON.parse(this.response))
-        } catch (error) {
-          resolve(this.response)
-        }
-      }
-    }
-    if (method.toLowerCase() === 'post') {
-      xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
-      xhr.send(JSON.stringify(data));
-    } else {
-      xhr.send();
-    }
-  })
+	if (!url) return Promise.reject('url 不可为空');
+	const xhr = new XMLHttpRequest();
+	const p = new Promise((resolve, reject) => {
+		xhr.open(method, url);
+		xhr.onreadystatechange = function () {
+			if (this.readyState == 4 && this.status == 200) {
+				try {
+					resolve(JSON.parse(this.response));
+				} catch (error) {
+					resolve(this.response);
+				}
+			}
+		};
+		if (method.toLowerCase() === 'post') {
+			xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+			xhr.send(JSON.stringify(data));
+		} else {
+			xhr.send();
+		}
+	});
+	p.abort = () => xhr.abort();
+	return p;
 }
 
 export async function postExt(query) {
-  const base = isProduction ? '//ext.dcloud.net.cn' : '/ext'
-  let extRet
-  if (!isMock) {
-    const extRes = await ajax(base + '/search/json?query=' + encodeURIComponent(query))
-    extRet = JSON.parse(extRes);
-  } else {
-    extRet = mock.ext;
-  }
-
-  let extHtml = '';
-  let data = extRet.data;
-  if (extRet.ret === 0) {
-    for (let i = 0, len = data.length; i < len; i++) {
-      extHtml += _renderExt(data[i], query);
-    }
-  }
-  return {
-    html: extHtml,
-    hits: data.length
-  }
+	const base = isProduction ? '//ext.dcloud.net.cn' : '/ext';
+	let extRet;
+	if (!isMock) {
+		const extRes = await ajax(base + '/search/json?query=' + encodeURIComponent(query));
+		extRet = JSON.parse(extRes);
+	} else {
+		extRet = mock.ext;
+	}
+
+	let extHtml = '';
+	let data = extRet.data;
+	if (extRet.ret === 0) {
+		for (let i = 0, len = data.length; i < len; i++) {
+			extHtml += _renderExt(data[i], query);
+		}
+	}
+	return {
+		html: extHtml,
+		hits: data.length,
+	};
 }
 
 export async function postAsk(query, page = 1) {
-  const base = isProduction ? '//ask.dcloud.net.cn' : '/ask'
-  let askHtml = '';
-
-  if (!isMock) {
-    askHtml = await ajax(base + `/search/ajax/search_result/search_type-all__q-${query}__page-${page}`)
-    if (!askHtml) {
-      return;
-    }
-  } else {
-    askHtml = mock.askHtml
-  }
-
-  return {
-    html: askHtml,
-    hits: 0
-  }
+	const base = isProduction ? '//ask.dcloud.net.cn' : '/ask';
+	let askHtml = '';
+
+	if (!isMock) {
+		askHtml = await ajax(base + `/search/ajax/search_result/search_type-all__q-${query}__page-${page}`);
+		if (!askHtml) {
+			return;
+		}
+	} else {
+		askHtml = mock.askHtml;
+	}
+
+	return {
+		html: askHtml,
+		hits: 0,
+	};
 }
 
 function _renderExt(ext, keyword) {
-  return `<div class="matching-post">
+	return `<div class="matching-post">
     <a href="${ext.url}" target="_blank">
       <div class="post-wrapper">
         <h2>
@@ -81,30 +83,30 @@ function _renderExt(ext, keyword) {
       <p>${ext.total_download}次下载</p>
       <p>${_handleHTMLString(ext.description, keyword)}</p>
     </a>
-  </div>`
+  </div>`;
 }
 
 function _renderPost(post, value) {
-  let html = '';
-  let commentText = '';
-  let tagName = '规范';
-
-  // 1，问题；2，文章；默认是规范。
-  switch (post.type) {
-    case 'questions':
-      tagName = '问题';
-      break;
-    case 'articles':
-      tagName = '文章';
-      break;
-  }
-
-  if (!!value) {
-    post.title = _handleHTMLString(post.title, value);
-    post.content = _handleHTMLString(post.content, value);
-  }
-
-  html += `<div class="matching-post">
+	let html = '';
+	let commentText = '';
+	let tagName = '规范';
+
+	// 1，问题；2，文章；默认是规范。
+	switch (post.type) {
+		case 'questions':
+			tagName = '问题';
+			break;
+		case 'articles':
+			tagName = '文章';
+			break;
+	}
+
+	if (!!value) {
+		post.title = _handleHTMLString(post.title, value);
+		post.content = _handleHTMLString(post.content, value);
+	}
+
+	html += `<div class="matching-post">
     <a href="${post.url}" target="_blank">
     <div class="post-wrapper">
       <h2>
@@ -113,38 +115,29 @@ function _renderPost(post, value) {
         </p>
         ${post.title}
       </h2>
-  </div>`
+  </div>`;
 
-  if (!!value) {
-    commentText = post.type === 'questions' ? '回复' : '评论';
-    html += `<p>
+	if (!!value) {
+		commentText = post.type === 'questions' ? '回复' : '评论';
+		html += `<p>
       ${post.comment_count}个${commentText}
       <span class="aw-text-space">-</span>
       ${post.view_count}次浏览
     </p>`;
-  }
+	}
 
-  html += `\n<p>${post.content}</p>\n</a>\n</div>`;
+	html += `\n<p>${post.content}</p>\n</a>\n</div>`;
 
-  return html;
+	return html;
 }
 
 function _handleHTMLString(dataString, keyword) {
-  let keywordReg = new RegExp(
-    keyword.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'),
-    'gi'
-  );
-  let tagStartReg = new RegExp(
-    '&lt;span style=\'font-weight:bold;color:red\'&gt;',
-    'g'
-  );
-  let tagEndReg = new RegExp(
-    '&lt;/span&gt;',
-    'g'
-  );
-
-  return dataString
-    .replace(tagStartReg, '')
-    .replace(tagEndReg, '')
-    .replace(keywordReg, ("<em class=\"search-keyword\">" + keyword + "</em>"));
-};
+	let keywordReg = new RegExp(keyword.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'), 'gi');
+	let tagStartReg = new RegExp("&lt;span style='font-weight:bold;color:red'&gt;", 'g');
+	let tagEndReg = new RegExp('&lt;/span&gt;', 'g');
+
+	return dataString
+		.replace(tagStartReg, '')
+		.replace(tagEndReg, '')
+		.replace(keywordReg, '<em class="search-keyword">' + keyword + '</em>');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-uniapp-official",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "uni-app official website theme for vuepress",
   "main": "index.js",
   "repository": {
@@ -39,8 +39,7 @@
     "markdown-it-attrs": "^4.1.6",
     "markdown-it-raw-table": "^1.0.0",
     "markdown-it-task-lists": "^2.1.1",
-    "marked": "^5.1.2",
-    "marked-highlight": "^2.2.3",
+    "marked": "^3.0.8",
     "qr-code-with-logo": "^1.1.0",
     "vuepress-plugin-juejin-style-copy": "^1.0.4",
     "vuepress-plugin-mermaidjs": "1.9.1",