index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629
  1. <template>
  2. <div class="knowledge-results">
  3. <!-- 搜索框 -->
  4. <div class="search-box">
  5. <!-- <div class="input-wrapper">
  6. <input
  7. v-model="searchQuery"
  8. type="text"
  9. :placeholder="placeholder"
  10. @keyup.enter="handleSearch"
  11. class="search-input"
  12. />
  13. <span
  14. v-if="searchQuery"
  15. class="clear-icon"
  16. @click="clearSearch"
  17. >×</span>
  18. </div> -->
  19. <!-- <button @click="handleSearch" :disabled="isSearching" class="search-button">
  20. {{ isSearching ? '搜索中...' : '搜索' }}
  21. </button> -->
  22. </div>
  23. <!-- 搜索结果列表 -->
  24. <div
  25. v-if="!loading && searchResults.length > 0"
  26. class="results-container"
  27. ref="resultsContainer"
  28. @scroll="handleScroll"
  29. >
  30. <div v-for="result in displayResults" :key="result.id" class="result-item">
  31. <h3 class="result-title">
  32. <a :href="result.link" target="_blank" rel="noopener noreferrer">{{ result.title }}</a>
  33. </h3>
  34. <div class="result-content" v-html="formatContent(result.content)"></div>
  35. <div v-if="result.translation" class="result-translation">
  36. <span class="translation-label">中文释义:</span>
  37. <span class="translation-content">{{ result.translation }}</span>
  38. </div>
  39. <div class="result-meta">
  40. <span class="result-source">来源: {{ result.source || '知识库' }}</span>
  41. <span class="result-date">{{ formatDate(result.date) }}</span>
  42. </div>
  43. </div>
  44. <!-- 加载更多指示器 -->
  45. <div v-if="hasMore" class="load-more">
  46. <div class="loading-spinner"></div>
  47. <span>加载更多...</span>
  48. </div>
  49. </div>
  50. <!-- 加载状态 -->
  51. <div v-else-if="loading" class="loading-state">
  52. <div class="loading-spinner"></div>
  53. <p>正在搜索...</p>
  54. </div>
  55. <!-- 空状态 -->
  56. <div v-else class="empty-state">
  57. <!-- <div class="empty-icon">🔍</div>
  58. <p>{{ searchQuery ? '未找到相关内容' : '请输入关键词搜索' }}</p> -->
  59. </div>
  60. </div>
  61. </template>
  62. <script>
  63. import { defineComponent, ref, computed, watch } from 'vue';
  64. import dayjs from 'dayjs';
  65. export default defineComponent({
  66. name: 'KnowledgeResults',
  67. props: {
  68. searchResults: {
  69. type: Array,
  70. default: () => []
  71. },
  72. loading: {
  73. type: Boolean,
  74. default: false
  75. },
  76. total: {
  77. type: Number,
  78. default: 0
  79. },
  80. message: {
  81. type: String,
  82. default: ''
  83. },
  84. // 添加搜索类型属性
  85. searchType: {
  86. type: String,
  87. default: 'remote', // 'remote' 或 'local'
  88. validator: (value) => ['remote', 'local'].includes(value)
  89. },
  90. // 添加是否显示中文释义的配置
  91. showTranslation: {
  92. type: Boolean,
  93. default: true
  94. }
  95. },
  96. emits: ['update:enableSearch', 'search', 'translate'],
  97. setup(props, { emit }) {
  98. const searchQuery = ref('');
  99. const isSearching = ref(false);
  100. const hasMore = ref(false);
  101. const displayResults = ref([]);
  102. const page = ref(1);
  103. const pageSize = ref(20);
  104. // 计算属性:根据搜索类型显示不同的占位符
  105. const placeholder = computed(() => {
  106. return props.searchType === 'local' ? '搜索本地知识库...' : '搜索远程知识库...';
  107. });
  108. // 监听搜索结果变化
  109. watch(() => props.searchResults, (newResults) => {
  110. console.log('New search results:', newResults);
  111. displayResults.value = newResults.map(result => ({
  112. ...result,
  113. translation: result.translation || '' // 确保translation字段存在
  114. }));
  115. });
  116. // 监听 message prop 的变化
  117. watch(() => props.message, (newMessage) => {
  118. if (newMessage) {
  119. searchQuery.value = newMessage;
  120. handleSearch();
  121. }
  122. });
  123. // 处理搜索
  124. const handleSearch = async () => {
  125. if (!searchQuery.value.trim() || isSearching.value) return;
  126. isSearching.value = true;
  127. page.value = 1; // 重置页码
  128. try {
  129. emit('search', {
  130. query: searchQuery.value,
  131. page: page.value,
  132. pageSize: pageSize.value,
  133. type: props.searchType,
  134. needTranslation: props.showTranslation // 添加是否需要翻译的标志
  135. });
  136. } finally {
  137. isSearching.value = false;
  138. }
  139. };
  140. // 加载更多
  141. const loadMore = async () => {
  142. if (isSearching.value || !hasMore.value) return;
  143. isSearching.value = true;
  144. page.value += 1;
  145. try {
  146. emit('search', {
  147. query: searchQuery.value,
  148. page: page.value,
  149. pageSize: pageSize.value,
  150. type: props.searchType
  151. });
  152. } finally {
  153. isSearching.value = false;
  154. }
  155. };
  156. // 清空搜索
  157. const clearSearch = () => {
  158. searchQuery.value = '';
  159. displayResults.value = [];
  160. page.value = 1;
  161. emit('update:enableSearch', false);
  162. };
  163. // 格式化日期
  164. const formatDate = (date) => {
  165. return dayjs(date).format('YYYY-MM-DD HH:mm');
  166. };
  167. // 处理滚动加载
  168. const handleScroll = (e) => {
  169. const { scrollTop, scrollHeight, clientHeight } = e.target;
  170. if (scrollHeight - scrollTop - clientHeight < 50 && !isSearching.value && hasMore.value) {
  171. loadMore();
  172. }
  173. };
  174. // 格式化内容的方法
  175. const formatContent = (content) => {
  176. if (!content) return '';
  177. // 将内容中的关键词高亮显示,同时处理HTML标签
  178. const escapedQuery = searchQuery.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  179. return content.replace(new RegExp(escapedQuery, 'gi'),
  180. match => `<span class="highlight">${match}</span>`
  181. );
  182. };
  183. return {
  184. searchQuery,
  185. isSearching,
  186. displayResults,
  187. hasMore,
  188. handleSearch,
  189. clearSearch,
  190. formatDate,
  191. handleScroll,
  192. placeholder,
  193. formatContent,
  194. };
  195. }
  196. });
  197. </script>
  198. <style lang="less" scoped>
  199. // 响应式设计的基础变量
  200. :root {
  201. --base-font-size: 16px;
  202. --small-font-size: 14px;
  203. --smaller-font-size: 12px;
  204. --base-spacing: 16px;
  205. --border-radius: 6px;
  206. --input-height: 40px;
  207. --input-height-mobile: 36px;
  208. --input-height-small: 32px;
  209. --button-min-width: 80px;
  210. --button-min-width-mobile: 64px;
  211. }
  212. .knowledge-results {
  213. color: var(--primary-text);
  214. height: 94%;
  215. display: flex;
  216. flex-direction: column;
  217. background: var(--secondary-bg);
  218. width: 96%;
  219. overflow: hidden;
  220. font-size: var(--base-font-size);
  221. @media (max-width: 768px) {
  222. font-size: calc(var(--base-font-size) - 2px);
  223. }
  224. .search-box {
  225. padding: var(--base-spacing);
  226. display: flex;
  227. gap: 12px;
  228. align-items: center;
  229. @media (max-width: 768px) {
  230. padding: calc(var(--base-spacing) * 0.75);
  231. gap: 8px;
  232. }
  233. @media (max-width: 480px) {
  234. padding: calc(var(--base-spacing) * 0.5);
  235. gap: 6px;
  236. }
  237. .input-wrapper {
  238. position: relative;
  239. flex: 1;
  240. display: flex;
  241. align-items: center;
  242. margin-right: 15px;
  243. .search-input {
  244. width: 100%;
  245. height: 24px;
  246. font-size: 16px;
  247. border: 1px solid #d9d9d9;
  248. padding: 8px 30px 8px 12px;
  249. border-radius: 4px 0 0 4px;
  250. outline: none;
  251. transition: all 0.3s;
  252. margin-right: 15px;
  253. @media (max-width: 768px) {
  254. height: var(--input-height-mobile);
  255. padding: 0 36px 0 14px;
  256. font-size: var(--small-font-size);
  257. }
  258. @media (max-width: 480px) {
  259. height: var(--input-height-small);
  260. padding: 0 32px 0 12px;
  261. font-size: var(--smaller-font-size);
  262. }
  263. &:focus {
  264. border-color: #1677ff;
  265. box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
  266. }
  267. &::placeholder {
  268. color: rgba(0, 0, 0, 0.25);
  269. font-size: inherit;
  270. }
  271. }
  272. .clear-icon {
  273. position: absolute;
  274. right: 12px;
  275. top: 50%;
  276. transform: translateY(-50%);
  277. width: 16px;
  278. height: 16px;
  279. display: flex;
  280. align-items: center;
  281. justify-content: center;
  282. cursor: pointer;
  283. color: rgba(0, 0, 0, 0.45);
  284. font-size: var(--base-font-size);
  285. transition: all 0.3s;
  286. border-radius: 50%;
  287. @media (max-width: 768px) {
  288. right: 10px;
  289. width: 14px;
  290. height: 14px;
  291. font-size: var(--small-font-size);
  292. }
  293. @media (max-width: 480px) {
  294. right: 8px;
  295. width: 12px;
  296. height: 12px;
  297. font-size: var(--smaller-font-size);
  298. }
  299. &:hover {
  300. color: rgba(0, 0, 0, 0.88);
  301. background: rgba(0, 0, 0, 0.04);
  302. }
  303. }
  304. }
  305. .search-button {
  306. height: var(--input-height);
  307. min-width: var(--button-min-width);
  308. padding: 0 20px;
  309. font-size: var(--base-font-size);
  310. background: #1677ff;
  311. border: none;
  312. border-radius: var(--border-radius);
  313. color: white;
  314. cursor: pointer;
  315. transition: all 0.3s;
  316. display: flex;
  317. align-items: center;
  318. justify-content: center;
  319. white-space: nowrap;
  320. user-select: none;
  321. touch-action: manipulation;
  322. @media (max-width: 768px) {
  323. height: var(--input-height-mobile);
  324. min-width: var(--button-min-width-mobile);
  325. padding: 0 16px;
  326. font-size: var(--small-font-size);
  327. }
  328. @media (max-width: 480px) {
  329. height: var(--input-height-small);
  330. padding: 0 12px;
  331. font-size: var(--smaller-font-size);
  332. }
  333. &:hover {
  334. background: #4096ff;
  335. }
  336. &:active {
  337. background: #0958d9;
  338. }
  339. &:disabled {
  340. background: #d9d9d9;
  341. cursor: not-allowed;
  342. pointer-events: none;
  343. }
  344. // 添加触摸设备的激活状态样式
  345. @media (hover: none) {
  346. &:active {
  347. background: #0958d9;
  348. }
  349. }
  350. }
  351. }
  352. .results-container {
  353. flex: 1;
  354. overflow-y: auto;
  355. padding: var(--base-spacing);
  356. @media (max-width: 480px) {
  357. padding: calc(var(--base-spacing) / 2);
  358. }
  359. .result-item {
  360. padding: 20px 0;
  361. border-bottom: 1px solid #f0f0f0;
  362. transition: all 0.3s ease;
  363. &:last-child {
  364. border-bottom: none;
  365. }
  366. &:hover {
  367. background: rgba(0, 0, 0, 0.02);
  368. }
  369. .result-title {
  370. margin: 0 0 8px;
  371. font-size: 16px;
  372. a {
  373. color: #1677ff;
  374. text-decoration: none;
  375. &:hover {
  376. text-decoration: underline;
  377. }
  378. }
  379. }
  380. .result-content {
  381. color: rgba(0, 0, 0, 0.65);
  382. font-size: 14px;
  383. margin-bottom: 8px;
  384. line-height: 1.5;
  385. }
  386. .result-translation {
  387. font-size: 14px;
  388. color: rgba(0, 0, 0, 0.65);
  389. margin-bottom: 8px;
  390. padding: 8px;
  391. background: #f5f5f5;
  392. border-radius: 4px;
  393. .translation-label {
  394. color: rgba(0, 0, 0, 0.85);
  395. font-weight: 500;
  396. margin-right: 8px;
  397. }
  398. .translation-content {
  399. color: rgba(0, 0, 0, 0.65);
  400. }
  401. }
  402. .result-meta {
  403. font-size: 12px;
  404. color: rgba(0, 0, 0, 0.45);
  405. display: flex;
  406. gap: 16px;
  407. .result-date,
  408. .result-source {
  409. display: inline-flex;
  410. align-items: center;
  411. }
  412. }
  413. }
  414. }
  415. .loading-state,
  416. .empty-state {
  417. flex: 1;
  418. display: flex;
  419. flex-direction: column;
  420. align-items: center;
  421. justify-content: center;
  422. color: var(--primary-text);
  423. .loading-spinner {
  424. width: 24px;
  425. height: 24px;
  426. border: 2px solid #f0f0f0;
  427. border-top-color: #1677ff;
  428. border-radius: 50%;
  429. animation: spin 1s linear infinite;
  430. }
  431. p {
  432. margin-top: 12px;
  433. }
  434. }
  435. .load-more {
  436. display: flex;
  437. align-items: center;
  438. justify-content: center;
  439. padding: 16px;
  440. color: var(--primary-text);
  441. gap: 8px;
  442. }
  443. }
  444. @keyframes spin {
  445. to {
  446. transform: rotate(360deg);
  447. }
  448. }
  449. // 添加深色模式支持
  450. @media (prefers-color-scheme: dark) {
  451. .knowledge-results {
  452. background: #1f1f1f;
  453. color: rgba(255, 255, 255, 0.85);
  454. .search-input {
  455. background: #2f2f2f;
  456. border-color: #434343;
  457. color: rgba(255, 255, 255, 0.85);
  458. }
  459. .result-item {
  460. background: #2f2f2f;
  461. border-color: #434343;
  462. .result-title {
  463. color: #1890ff;
  464. }
  465. .result-content {
  466. color: rgba(255, 255, 255, 0.65);
  467. }
  468. .result-translation {
  469. background: #1f1f1f;
  470. .translation-label {
  471. color: rgba(255, 255, 255, 0.85);
  472. }
  473. .translation-content {
  474. color: rgba(255, 255, 255, 0.65);
  475. }
  476. }
  477. .result-meta {
  478. color: rgba(255, 255, 255, 0.45);
  479. }
  480. }
  481. }
  482. }
  483. // 深色模式样式增强
  484. @media (prefers-color-scheme: dark) {
  485. .knowledge-results {
  486. background: #1f1f1f;
  487. .search-box {
  488. border-color: #303030;
  489. .search-input {
  490. background: #2f2f2f;
  491. border-color: #434343;
  492. color: rgba(255, 255, 255, 0.85);
  493. &::placeholder {
  494. color: rgba(255, 255, 255, 0.25);
  495. }
  496. &:focus {
  497. border-color: #1677ff;
  498. box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15);
  499. }
  500. }
  501. .clear-icon {
  502. color: rgba(255, 255, 255, 0.45);
  503. &:hover {
  504. color: rgba(255, 255, 255, 0.85);
  505. background: rgba(255, 255, 255, 0.08);
  506. }
  507. }
  508. .search-button {
  509. &:disabled {
  510. background: #424242;
  511. color: rgba(255, 255, 255, 0.3);
  512. }
  513. }
  514. }
  515. }
  516. }
  517. // 添加高对比度模式支持
  518. @media (prefers-contrast: high) {
  519. .search-input {
  520. border-width: 2px;
  521. }
  522. .search-button {
  523. border: 2px solid transparent;
  524. &:focus {
  525. outline: 2px solid #fff;
  526. outline-offset: 2px;
  527. }
  528. }
  529. }
  530. // 添加减少动画模式支持
  531. @media (prefers-reduced-motion: reduce) {
  532. .search-input,
  533. .search-button,
  534. .clear-icon,
  535. .result-item {
  536. transition: none;
  537. }
  538. }
  539. .highlight {
  540. color: #1677ff;
  541. font-weight: 500;
  542. padding: 0 2px;
  543. border-radius: 2px;
  544. background: rgba(24, 144, 255, 0.1);
  545. }
  546. </style>