style(core): 增加搜索结果题目显示，判断是否存在图像元素

ocsjs · Jan 1, 2023 · 4d6b53d · 4d6b53d
1 parent 03b9ae5
commit 4d6b53d
Showing 1 changed file with 34 additions and 34 deletions.
diff --git a/packages/core/src/elements/search.results.ts b/packages/core/src/elements/search.results.ts
@@ -1,54 +1,54 @@
 import { SearchResult } from '../core/worker/answer.wrapper.handler';
 import { splitAnswer } from '../core/worker/utils';
+import { $creator } from '../utils/creator';
 import { el } from '../utils/dom';
 import { IElement } from './interface';
 
+/** 判断是否有网络图片格式的文本，有则替换成 img 标签  */
+const transformImgLink = (str: string) =>
+	str.replace(/https?:\/\/.*?\.(png|jpg|jpeg|gif)/g, (match) => `<img src="${match}" />`);
+
 export class SearchResultsElement extends IElement {
 	results: SearchResult[] = [];
 	question: string = '';
 
 	connectedCallback() {
+		const question = transformImgLink(this.question || '无');
+
 		this.append(
+			el('div', [question, $creator.copy('复制', question)], (div) => {
+				div.style.padding = '4px';
+			}),
+			el('hr'),
 			...this.results.map((res) => {
 				return el('details', { open: true }, [
 					el('summary', [el('a', { href: res.homepage, innerText: res.name })]),
 					...(res.error
 						? /** 显示错误信息 */
-						  [el('span', { className: 'error' }, res.error.message || '未知错误')]
+						  [
+								el('span', { className: 'error' }, [
+									'此题库搜题时发生错误：',
+									res.error.message || '网络错误或者未知错误'
+								])
+						  ]
 						: /** 显示结果列表 */
-						  res.answers.map((answer) => {
-								return el('div', { className: 'search-result' }, [
-									/** 题目 */
-									el('div', { className: 'question' }, [
-										answer.question || this.question || '无',
-										el('span', '复制', (btn) => {
-											btn.className = 'copy';
-											btn.onclick = () => {
-												btn.innerText = '√';
-												navigator.clipboard.writeText(answer.question || this.question || '无');
-												setTimeout(() => {
-													btn.innerText = '复制';
-												}, 500);
-											};
-										})
-									]),
-									/** 答案 */
-									el('div', { className: 'answer' }, [
-										el('span', '答案：'),
-										...splitAnswer(answer.answer || '无').map((a) => el('code', a)),
-										el('span', '复制', (btn) => {
-											btn.className = 'copy';
-											btn.onclick = () => {
-												btn.innerText = '√';
-												navigator.clipboard.writeText(splitAnswer(answer.answer || '无').join(' '));
-												setTimeout(() => {
-													btn.innerText = '复制';
-												}, 500);
-											};
-										})
-									])
-								]);
-						  }))
+						  [
+								...res.answers.map((ans) => {
+									const title = transformImgLink(ans.question || this.question || '无');
+									const answer = transformImgLink(ans.answer || '无');
+
+									return el('div', { className: 'search-result' }, [
+										/** 题目 */
+										el('div', { className: 'question' }, [title, $creator.copy('复制', title)]),
+										/** 答案 */
+										el('div', { className: 'answer' }, [
+											el('span', '答案：'),
+											...splitAnswer(answer).map((a) => el('code', a)),
+											$creator.copy('复制', splitAnswer(answer).join(' '))
+										])
+									]);
+								})
+						  ])
 				]);
 			})
 		);