SearchResultItem.vue 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <script setup lang="ts">
  2. import type { PropType } from "vue";
  3. import type { SearchResultDoc } from "@/types/search.types";
  4. import type { ResultMode } from "@/types/search.types";
  5. const props = defineProps({
  6. data: {
  7. type: Object as PropType<SearchResultDoc>,
  8. required: true,
  9. },
  10. mode: {
  11. type: String as PropType<ResultMode>,
  12. default() { return 'detail' },
  13. }
  14. });
  15. function getAuthorAndUnit(scholar_name: string, unit_name: string) {
  16. let str = scholar_name
  17. if (unit_name) {
  18. str += ' ' + unit_name
  19. }
  20. return str
  21. }
  22. function highlight(name: string, content: string){
  23. if (props.data.highlight) {
  24. let highlight = JSON.parse(JSON.stringify(props.data.highlight));
  25. let reg = new RegExp('<em>(.*?)<\\/em>', 'g')
  26. let hlTitles: string[] = []
  27. let hlTitleOrigins: string[] = []
  28. console.log(highlight,"highlight")
  29. if (highlight) {
  30. hlTitles = highlight[name] || highlight[name+'.exact']
  31. for (let index in hlTitles) {
  32. hlTitleOrigins[index] = hlTitles[index].replace(reg, '$1')
  33. content = content.replace(hlTitleOrigins[index], hlTitles[index])
  34. }
  35. }
  36. }
  37. return content;
  38. }
  39. </script>
  40. <template>
  41. <div class="item-wrap">
  42. <h1>
  43. <RouterLink :to="'/detail/' + data.id" target="_blank">
  44. {{ data.title }}
  45. </RouterLink>
  46. </h1>
  47. <div class="metadata">
  48. <div>
  49. <span>作者:</span>
  50. <span v-for="(item, index) in data.unit_scholar" :key="index" class="author-item">
  51. {{ getAuthorAndUnit(item.scholar_name, item.unit_name) }}
  52. </span>
  53. </div>
  54. <div v-if="data.keywords.length > 0">关键词:<span v-html="highlight('keywords', data.keywords.join(','))"></span></div>
  55. <div>
  56. <span>时间:{{ data.year }}</span>
  57. <span>,被引量:{{ data.cited }}</span>
  58. </div>
  59. </div>
  60. <p v-if="mode != 'brief'">摘要:<span v-html="highlight('abstract', data.abstract.replace('摘要:', ''))"></span></p>
  61. </div>
  62. </template>
  63. <style scoped lang="scss">
  64. .item-wrap {
  65. padding: 5px;
  66. .metadata {
  67. padding-bottom: 5px;
  68. .author-item {
  69. margin-left: 1em;
  70. &:nth-child(2) {
  71. margin-left: 0;
  72. }
  73. }
  74. }
  75. }
  76. </style>