index.vue 13 KB

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