Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
R
risk-monitor
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
蔡建
risk-monitor
Commits
87f457d0
提交
87f457d0
authored
3月 24, 2026
作者:
hsx
浏览文件
操作
浏览文件
下载
差异文件
合并分支 'hsx' 到 'master'
feat:新闻的高亮实体使用站内搜索 查看合并请求
!199
上级
daf92468
7c629762
隐藏空白字符变更
内嵌
并排
正在显示
4 个修改的文件
包含
357 行增加
和
322 行删除
+357
-322
IntelligentEntityText.vue
src/components/base/texts/IntelligentEntityText.vue
+97
-97
TextTranslatePane.vue
src/components/base/texts/TextTranslatePane.vue
+106
-93
comprehensiveSearch.js
src/router/modules/comprehensiveSearch.js
+36
-37
NewsDetial.vue
src/views/newsBrief/NewsDetial.vue
+118
-95
没有找到文件。
src/components/base/texts/IntelligentEntityText.vue
浏览文件 @
87f457d0
<
template
>
<
template
>
<p
class=
"p-regular-rereg"
>
<p
class=
"p-regular-rereg"
>
<span
class=
"text-regular"
v-for=
"(segment, index) in processedText"
:key=
"index"
>
<span
class=
"text-regular"
v-for=
"(segment, index) in processedText"
:key=
"index"
>
<a
v-if=
"segment.isEntity"
:href=
"`https://cn.bing.com/search?q=$
{segment.entity?.text_span}`"
<span
v-if=
"segment.isEntity"
@
click=
"$emit('onEntityClick', segment.entity)"
class=
"entity-link"
>
class="entity-link" target="_blank" rel="noopener noreferrer">
{{
segment
.
entity
?.
text_span
}}
{{
segment
.
entity
?.
text_span
}}
<img
:src=
"SearchIcon"
:width=
"10"
:height=
"10"
alt=
"search"
/>
<img
:src=
"SearchIcon"
:width=
"10"
:height=
"10"
alt=
"search"
/>
</span>
</a>
<span
v-else
>
<span
v-else
>
{{
segment
.
text
}}
{{
segment
.
text
}}
</span>
</span>
</span>
</span>
</p>
</p>
</
template
>
</
template
>
<
script
lang=
"ts"
setup
>
<
script
lang=
"ts"
setup
>
import
{
TextEntity
}
from
'@/api/intelligent'
;
import
{
TextEntity
}
from
"@/api/intelligent"
;
import
{
ref
,
watch
,
onMounted
}
from
'vue'
;
import
{
ref
,
watch
,
onMounted
}
from
"vue"
;
import
SearchIcon
from
'./images/search.png'
import
SearchIcon
from
"./images/search.png"
;
export
interface
ProcessedTextSegment
{
export
interface
ProcessedTextSegment
{
text
:
string
text
:
string
;
isEntity
:
boolean
isEntity
:
boolean
;
entity
?:
TextEntity
entity
?:
TextEntity
;
}
}
const
props
=
defineProps
({
const
props
=
defineProps
({
text
:
{
text
:
{
type
:
String
,
type
:
String
,
default
:
''
default
:
""
},
},
entities
:
{
entities
:
{
type
:
Array
<
TextEntity
>
,
type
:
Array
<
TextEntity
>
,
default
:
()
=>
[]
default
:
()
=>
[]
}
}
})
})
;
const
emit
=
defineEmits
([
"onEntityClick"
]);
// 处理后的文本段
// 处理后的文本段
const
processedText
=
ref
<
ProcessedTextSegment
[]
>
([])
const
processedText
=
ref
<
ProcessedTextSegment
[]
>
([]);
// 处理文本,识别并替换实体
// 处理文本,识别并替换实体
const
processText
=
()
=>
{
const
processText
=
()
=>
{
console
.
log
(
'props.entities.length'
,
props
.
entities
.
length
)
console
.
log
(
"props.entities.length"
,
props
.
entities
.
length
);
if
(
!
props
.
text
||
!
props
.
entities
)
{
if
(
!
props
.
text
||
!
props
.
entities
)
{
// console.log('props.text', props.entities.length)
// console.log('props.text', props.entities.length)
processedText
.
value
=
[{
text
:
''
,
isEntity
:
false
}]
processedText
.
value
=
[{
text
:
""
,
isEntity
:
false
}];
return
return
;
}
}
const
result
=
[]
const
result
=
[];
let
currentPosition
=
0
let
currentPosition
=
0
;
// 按实体文本长度排序,优先匹配长文本
// 按实体文本长度排序,优先匹配长文本
const
sortedEntities
=
[...
props
.
entities
].
sort
((
a
,
b
)
=>
const
sortedEntities
=
[...
props
.
entities
].
sort
((
a
,
b
)
=>
b
.
text_span
.
length
-
a
.
text_span
.
length
);
b
.
text_span
.
length
-
a
.
text_span
.
length
)
while
(
currentPosition
<
props
.
text
.
length
)
{
while
(
currentPosition
<
props
.
text
.
length
)
{
let
matched
=
false
let
matched
=
false
;
for
(
const
entity
of
sortedEntities
)
{
for
(
const
entity
of
sortedEntities
)
{
const
entityText
=
entity
.
text_span
const
entityText
=
entity
.
text_span
;
const
endPosition
=
currentPosition
+
entityText
.
length
const
endPosition
=
currentPosition
+
entityText
.
length
;
if
(
props
.
text
.
substring
(
currentPosition
,
endPosition
)
===
entityText
)
{
if
(
props
.
text
.
substring
(
currentPosition
,
endPosition
)
===
entityText
)
{
// 如果当前位置是实体,添加到结果
// 如果当前位置是实体,添加到结果
result
.
push
({
result
.
push
({
isEntity
:
true
,
isEntity
:
true
,
entity
:
{
...
entity
}
entity
:
{
...
entity
}
})
});
currentPosition
=
endPosition
currentPosition
=
endPosition
;
matched
=
true
matched
=
true
;
break
break
;
}
}
}
}
if
(
!
matched
)
{
if
(
!
matched
)
{
// 如果不是实体,收集普通文本
// 如果不是实体,收集普通文本
let
nextEntityStart
=
props
.
text
.
length
let
nextEntityStart
=
props
.
text
.
length
;
for
(
const
entity
of
sortedEntities
)
{
for
(
const
entity
of
sortedEntities
)
{
const
pos
=
props
.
text
.
indexOf
(
entity
.
text_span
,
currentPosition
)
const
pos
=
props
.
text
.
indexOf
(
entity
.
text_span
,
currentPosition
);
if
(
pos
!==
-
1
&&
pos
<
nextEntityStart
)
{
if
(
pos
!==
-
1
&&
pos
<
nextEntityStart
)
{
nextEntityStart
=
pos
nextEntityStart
=
pos
;
}
}
}
}
if
(
nextEntityStart
>
currentPosition
)
{
if
(
nextEntityStart
>
currentPosition
)
{
const
plainText
=
props
.
text
.
substring
(
currentPosition
,
nextEntityStart
)
const
plainText
=
props
.
text
.
substring
(
currentPosition
,
nextEntityStart
);
result
.
push
({
result
.
push
({
text
:
plainText
,
text
:
plainText
,
isEntity
:
false
isEntity
:
false
})
});
currentPosition
=
nextEntityStart
currentPosition
=
nextEntityStart
;
}
else
{
}
else
{
// 没有更多实体,添加剩余文本
// 没有更多实体,添加剩余文本
const
remainingText
=
props
.
text
.
substring
(
currentPosition
)
const
remainingText
=
props
.
text
.
substring
(
currentPosition
);
if
(
remainingText
)
{
if
(
remainingText
)
{
result
.
push
({
result
.
push
({
text
:
remainingText
,
text
:
remainingText
,
isEntity
:
false
isEntity
:
false
})
});
}
}
currentPosition
=
props
.
text
.
length
currentPosition
=
props
.
text
.
length
;
}
}
}
}
}
}
processedText
.
value
=
result
processedText
.
value
=
result
;
}
}
;
// 监听文本和实体变化
// 监听文本和实体变化
watch
(()
=>
props
.
text
,
processText
)
watch
(()
=>
props
.
text
,
processText
)
;
watch
(()
=>
props
.
entities
,
processText
,
{
deep
:
true
})
watch
(()
=>
props
.
entities
,
processText
,
{
deep
:
true
})
;
// 初始化处理
// 初始化处理
onMounted
(
processText
)
onMounted
(
processText
)
;
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
@use
'@/styles/common.scss'
;
@use
"@/styles/common.scss"
;
.entity-link
{
.entity-link
{
color
:
var
(
--
color-primary-100
);
color
:
var
(
--
color-primary-100
);
&
:hover
{
cursor
:
pointer
;
}
}
}
.p-regular-rereg
{
.p-regular-rereg
{
text-indent
:
2em
;
text-indent
:
2em
;
margin
:
4px
0
;
margin
:
4px
0
;
}
}
</
style
>
</
style
>
\ No newline at end of file
src/components/base/texts/TextTranslatePane.vue
浏览文件 @
87f457d0
<
template
>
<
template
>
<div
class=
"full-width"
>
<div
class=
"full-width"
>
<div
class=
"flex-display"
style=
"align-items: center;"
>
<div
class=
"flex-display"
style=
"align-items: center"
>
<common-text
class=
"text-title-3-bold"
color=
"var(--text-primary-80-color)"
>
{{
isOpenTranslation
<common-text
class=
"text-title-3-bold"
color=
"var(--text-primary-80-color)"
>
{{
?
'中文'
:
'原文'
}}
</common-text>
isOpenTranslation
?
"中文"
:
"原文"
<div
class=
"flex-fill"
style=
"margin: 0 10px;"
>
}}
</common-text>
<el-divider></el-divider>
<div
class=
"flex-fill"
style=
"margin: 0 10px"
>
</div>
<el-divider></el-divider>
<el-button
v-if=
"showMoreVisible"
@
click=
"() =>
{ showMore = !showMore; updateText() }">
</div>
{{
showMore
?
'收起'
:
'展开'
}}
<el-button
<el-icon>
v-if=
"showMoreVisible"
<arrow-up
v-if=
"showMore"
/>
@
click=
"
<arrow-down
v-else
/>
() =>
{
</el-icon>
showMore = !showMore;
</el-button>
updateText();
</div>
}
<el-row
:gutter=
"32"
>
"
<el-col
:span=
"textColSpan"
v-for=
"(item, index) in allTexts"
:key=
"index"
>
>
<!--
<p
class=
"p-news-content"
>
{{
item
}}
</p>
-->
{{
showMore
?
"收起"
:
"展开"
}}
<intelligent-entity-text
:text=
"item"
<el-icon>
:entities=
"isHighlightEntity ? textEntities : []"
></intelligent-entity-text>
<arrow-up
v-if=
"showMore"
/>
</el-col>
<arrow-down
v-else
/>
</el-row>
</el-icon>
</div>
</el-button>
</div>
<el-row
:gutter=
"32"
>
<el-col
:span=
"textColSpan"
v-for=
"(item, index) in allTexts"
:key=
"index"
>
<!--
<p
class=
"p-news-content"
>
{{
item
}}
</p>
-->
<intelligent-entity-text
:text=
"item"
@
on-entity-click=
"e => $emit('onEntityClick', e)"
:entities=
"isHighlightEntity ? textEntities : []"
></intelligent-entity-text>
</el-col>
</el-row>
</div>
</
template
>
</
template
>
<
script
lang=
"ts"
setup
>
<
script
lang=
"ts"
setup
>
import
'@/styles/container.scss'
;
import
"@/styles/container.scss"
;
import
'@/styles/common.scss'
;
import
"@/styles/common.scss"
;
import
{
ref
,
watch
,
onMounted
}
from
'vue'
;
import
{
ref
,
watch
,
onMounted
}
from
"vue"
;
import
{
TextEntity
}
from
'@/api/intelligent'
;
import
{
TextEntity
}
from
"@/api/intelligent"
;
import
IntelligentEntityText
from
'@/components/base/texts/IntelligentEntityText.vue'
;
import
IntelligentEntityText
from
"@/components/base/texts/IntelligentEntityText.vue"
;
import
{
ElIcon
,
ElButton
,
ElDivider
,
ElRow
,
ElCol
}
from
'element-plus'
;
import
{
ElIcon
,
ElButton
,
ElDivider
,
ElRow
,
ElCol
}
from
"element-plus"
;
import
CommonText
from
'./CommonText.vue'
;
import
CommonText
from
"./CommonText.vue"
;
const
allTexts
=
ref
([]);
const
allTexts
=
ref
([]);
const
textColSpan
=
ref
(
12
);
const
textColSpan
=
ref
(
12
);
...
@@ -39,71 +51,73 @@ const hasTranslation = ref(false);
...
@@ -39,71 +51,73 @@ const hasTranslation = ref(false);
const
showMore
=
ref
(
false
);
const
showMore
=
ref
(
false
);
const
showMoreVisible
=
ref
(
false
);
const
showMoreVisible
=
ref
(
false
);
const
props
=
defineProps
({
const
props
=
defineProps
({
//段落列表: 原始文本
//段落列表: 原始文本
textsRaw
:
{
textsRaw
:
{
type
:
Array
<
String
>
,
type
:
Array
<
String
>
,
default
:
()
=>
[]
default
:
()
=>
[]
},
},
//段落列表: 翻译文本
//段落列表: 翻译文本
textsTranslate
:
{
textsTranslate
:
{
type
:
Array
<
String
>
,
type
:
Array
<
String
>
,
default
:
()
=>
[]
default
:
()
=>
[]
},
},
//是否显示翻译
//是否显示翻译
isOpenTranslation
:
{
isOpenTranslation
:
{
type
:
Boolean
,
type
:
Boolean
,
default
:
true
default
:
true
},
},
//是否高亮实体
//是否高亮实体
isHighlightEntity
:
{
isHighlightEntity
:
{
type
:
Boolean
,
type
:
Boolean
,
default
:
true
default
:
true
},
},
//实体列表
//实体列表
textEntities
:
{
textEntities
:
{
type
:
Array
<
TextEntity
>
,
type
:
Array
<
TextEntity
>
,
default
:
()
=>
[]
default
:
()
=>
[]
}
}
})
})
;
const
emit
=
defineEmits
([
"onEntityClick"
]);
function
updateText
()
{
function
updateText
()
{
const
tempTexts
=
[]
const
tempTexts
=
[];
const
tempRaws
=
props
.
textsRaw
??
[]
const
tempRaws
=
props
.
textsRaw
??
[];
const
tempTranslates
=
props
.
textsTranslate
??
[]
const
tempTranslates
=
props
.
textsTranslate
??
[];
hasTranslation
.
value
=
tempTranslates
.
length
>
0
hasTranslation
.
value
=
tempTranslates
.
length
>
0
;
if
(
hasTranslation
.
value
&&
props
.
isOpenTranslation
)
{
if
(
hasTranslation
.
value
&&
props
.
isOpenTranslation
)
{
// 遍历原始文本和翻译文本,将它们交替添加到 tempTexts 中,并保持原始文本和翻译文本的的数量一致
// 遍历原始文本和翻译文本,将它们交替添加到 tempTexts 中,并保持原始文本和翻译文本的的数量一致
const
maxCount
=
Math
.
max
(
tempRaws
.
length
,
tempTranslates
.
length
)
const
maxCount
=
Math
.
max
(
tempRaws
.
length
,
tempTranslates
.
length
);
for
(
let
i
=
0
;
i
<
maxCount
;
i
++
)
{
for
(
let
i
=
0
;
i
<
maxCount
;
i
++
)
{
if
(
i
<
tempTranslates
.
length
)
{
if
(
i
<
tempTranslates
.
length
)
{
tempTexts
.
push
(
tempTranslates
[
i
]);
tempTexts
.
push
(
tempTranslates
[
i
]);
}
else
{
}
else
{
tempTexts
.
push
(
''
);
tempTexts
.
push
(
""
);
}
}
if
(
i
<
tempRaws
.
length
)
{
if
(
i
<
tempRaws
.
length
)
{
tempTexts
.
push
(
tempRaws
[
i
]);
tempTexts
.
push
(
tempRaws
[
i
]);
}
else
{
}
else
{
tempTexts
.
push
(
''
);
tempTexts
.
push
(
""
);
}
}
}
}
console
.
log
(
tempTexts
.
length
)
console
.
log
(
tempTexts
.
length
);
textColSpan
.
value
=
12
;
textColSpan
.
value
=
12
;
showMoreVisible
.
value
=
tempTexts
.
length
>
6
;
showMoreVisible
.
value
=
tempTexts
.
length
>
6
;
allTexts
.
value
=
showMore
.
value
?
tempTexts
:
tempTexts
.
slice
(
0
,
6
);
allTexts
.
value
=
showMore
.
value
?
tempTexts
:
tempTexts
.
slice
(
0
,
6
);
}
else
{
}
else
{
textColSpan
.
value
=
24
;
textColSpan
.
value
=
24
;
showMoreVisible
.
value
=
tempRaws
.
length
>
3
;
showMoreVisible
.
value
=
tempRaws
.
length
>
3
;
allTexts
.
value
=
showMore
.
value
?
tempRaws
:
tempRaws
.
slice
(
0
,
3
);
allTexts
.
value
=
showMore
.
value
?
tempRaws
:
tempRaws
.
slice
(
0
,
3
);
}
}
}
}
watch
(()
=>
[
props
.
textsRaw
,
props
.
textsTranslate
,
props
.
isOpenTranslation
],
()
=>
{
watch
(
updateText
();
()
=>
[
props
.
textsRaw
,
props
.
textsTranslate
,
props
.
isOpenTranslation
],
})
()
=>
{
updateText
();
}
);
onMounted
(()
=>
{
onMounted
(()
=>
{
updateText
();
updateText
();
})
});
</
script
>
</
script
>
\ No newline at end of file
src/router/modules/comprehensiveSearch.js
浏览文件 @
87f457d0
// 综合搜索
// 综合搜索
const
ComprehensiveSearch
=
()
=>
import
(
'@/views/comprehensiveSearch/index.vue'
)
const
ComprehensiveSearch
=
()
=>
import
(
"@/views/comprehensiveSearch/index.vue"
);
const
SearchResults
=
()
=>
import
(
'@/views/comprehensiveSearch/searchResults/index.vue'
)
const
SearchResults
=
()
=>
import
(
"@/views/comprehensiveSearch/searchResults/index.vue"
);
const
Chat
=
()
=>
import
(
'@/views/comprehensiveSearch/chat/index.vue'
)
const
Chat
=
()
=>
import
(
"@/views/comprehensiveSearch/chat/index.vue"
);
const
comprehensiveSearchRoutes
=
[
const
comprehensiveSearchRoutes
=
[
// 综合搜索
// 综合搜索
{
{
path
:
"/comprehensiveSearch"
,
path
:
"/comprehensiveSearch"
,
name
:
"comprehensiveSearch"
,
name
:
"comprehensiveSearch"
,
component
:
ComprehensiveSearch
,
component
:
ComprehensiveSearch
,
meta
:
{
meta
:
{
title
:
"搜索-科技安全"
title
:
"搜索-科技安全"
}
}
},
},
{
{
path
:
"/searchResults"
,
path
:
"/searchResults"
,
name
:
"searchResults"
,
name
:
"searchResults"
,
component
:
SearchResults
,
component
:
SearchResults
,
meta
:
{
meta
:
{
title
:
"搜索结果"
,
title
:
"搜索结果"
,
dynamicTitle
:
true
dynamicTitle
:
true
}
}
},
},
{
{
path
:
"/chat"
,
path
:
"/chat"
,
name
:
"chat"
,
name
:
"chat"
,
component
:
Chat
,
component
:
Chat
,
meta
:
{
meta
:
{
title
:
"智能问答"
title
:
"智能问答"
}
}
},
}
];
]
import
{
useGotoPage
}
from
"../common.js"
;
import
{
useGotoPage
}
from
"../common.js"
;
export
function
useGotoComprehensiveSearch
()
{
export
function
useGotoComprehensiveSearch
()
{
const
gotoPage
=
useGotoPage
();
const
gotoPage
=
useGotoPage
();
return
(
isNewTabs
=
true
)
=>
gotoPage
(
"/comprehensiveSearch/"
,
{},
isNewTabs
)
return
(
isNewTabs
=
true
)
=>
gotoPage
(
"/comprehensiveSearch/"
,
{},
isNewTabs
);
}
}
export
function
useGotoSearchResults
()
{
export
function
useGotoSearchResults
()
{
const
gotoPage
=
useGotoPage
();
const
gotoPage
=
useGotoPage
();
return
(
isNewTabs
=
true
)
=>
gotoPage
(
"/searchResults/"
,
{
searchText
,
areaName
},
isNewTabs
)
return
(
searchText
,
areaName
,
isNewTabs
=
true
)
=>
gotoPage
(
"/searchResults/"
,
{
searchText
,
areaName
},
isNewTabs
);
}
}
export
default
comprehensiveSearchRoutes
export
default
comprehensiveSearchRoutes
;
\ No newline at end of file
src/views/newsBrief/NewsDetial.vue
浏览文件 @
87f457d0
<
template
>
<
template
>
<el-scrollbar>
<el-scrollbar>
<div
class=
"flex-display common-page top-box-news-deatail"
style=
"align-items: center;
"
>
<div
class=
"flex-display common-page top-box-news-deatail"
style=
"align-items: center
"
>
<!--
<color-svg
:svg-url=
"NewsLogo"
:size=
"72"
style=
"margin-right:10px"
></color-svg>
-->
<!--
<color-svg
:svg-url=
"NewsLogo"
:size=
"72"
style=
"margin-right:10px"
></color-svg>
-->
<img
:src=
"NewsLogo"
style=
"margin-right:24px"
>
<img
:src=
"NewsLogo"
style=
"margin-right: 24px"
/
>
<el-space
direction=
"vertical"
class=
"flex-fill"
alignment=
"flex-start"
>
<el-space
direction=
"vertical"
class=
"flex-fill"
alignment=
"flex-start"
>
<common-text
class=
"text-title-1-bold"
color=
"var(--text-primary-80-color)"
>
<common-text
class=
"text-title-1-bold"
color=
"var(--text-primary-80-color)"
>
{{
newsDetail
.
titleZh
}}
{{
newsDetail
.
titleZh
}}
</common-text>
</common-text>
<common-text
class=
"text-tip-1-bold"
color=
"var(--text-primary-80-color)"
>
<common-text
class=
"text-tip-1-bold"
color=
"var(--text-primary-80-color)"
>
{{
newsDetail
.
title
}}
{{
newsDetail
.
title
}}
</common-text>
</common-text>
<common-text
class=
"text-tip-1-bold"
color=
"var(--text-primary-65-color)"
>
<common-text
class=
"text-tip-1-bold"
color=
"var(--text-primary-65-color)"
>
{{
`${newsDetail.publishedTime
}
· ${newsDetail.source
}
`
}}
{{
`${newsDetail.publishedTime
}
· ${newsDetail.source
}
`
}}
<
el
-
space
>
<
el
-
space
>
<
area
-
tag
v
-
for
=
"item in newsDetail.domainList"
:
key
=
"item"
:
tag
-
name
=
"item.industryName"
/>
<
area
-
tag
v
-
for
=
"item in newsDetail.domainList"
:
key
=
"item"
:
tag
-
name
=
"item.industryName"
/>
<
/el-space
>
<
/el-space
>
<
/common-text
>
<
/common-text
>
<
/el-space
>
<
/el-space
>
<!--
<
el
-
button
type
=
"primary"
@
click
=
"() => gotoNewsDetail(newsDetail.newsId)"
>
<!--
<
el
-
button
type
=
"primary"
@
click
=
"() => gotoNewsDetail(newsDetail.newsId)"
>
<
el
-
icon
class
=
"icon"
>
<
el
-
icon
class
=
"icon"
>
<
el
-
icon
>
<
el
-
icon
>
<
top
-
right
/>
<
top
-
right
/>
...
@@ -25,64 +25,90 @@
...
@@ -25,64 +25,90 @@
<
/el-icon
>
<
/el-icon
>
查看原网页
查看原网页
<
/el-button> --
>
<
/el-button> --
>
<
/div
>
<
/div
>
<
div
class
=
"flex-display common-page content-box-news-detail"
>
<
div
class
=
"flex-display common-page content-box-news-detail"
>
<
el
-
space
direction
=
"vertical"
class
=
"background-as-card flex-fill"
fill
alignment
=
"flex-start"
>
<
el
-
space
direction
=
"vertical"
class
=
"background-as-card flex-fill"
fill
alignment
=
"flex-start"
>
<
div
style
=
"margin-top: 10px; margin-right: 24px;gap:10px"
class
=
"flex-display"
>
<
div
style
=
"margin-top: 10px; margin-right: 24px; gap: 10px"
class
=
"flex-display"
>
<
color
-
prefix
-
title
height
=
"20px"
>
<
color
-
prefix
-
title
height
=
"20px"
>
<
div
class
=
"text-title-2-bold"
>
新闻内容
<
/div
>
<
div
class
=
"text-title-2-bold"
>
新闻内容
<
/div
>
<
/color-prefix-title
>
<
/color-prefix-title
>
<
div
class
=
"flex-fill"
><
/div
>
<
div
class
=
"flex-fill"
><
/div
>
<
el
-
switch
v
-
model
=
"isHightLightEntity"
active
-
text
=
"高亮实体"
@
change
=
"handleHighlightEntity"
/>
<
el
-
switch
v
-
model
=
"isHightLightEntity"
active
-
text
=
"高亮实体"
@
change
=
"handleHighlightEntity"
/>
<
el
-
button
v
-
if
=
"textZns.length > 0"
:
type
=
"isOpenTranslation ? 'primary' : ''"
plain
<
el
-
button
@
click
=
"handleTranslation"
>
v
-
if
=
"textZns.length > 0"
<
color
-
svg
:
svg
-
url
=
"TranslationSvg"
color
=
"var(--color-primary-100)"
:
size
=
"18"
:
type
=
"isOpenTranslation ? 'primary' : ''"
style
=
"margin-right:10px"
><
/color-svg
>
plain
译文
@
click
=
"handleTranslation"
<
/el-button
>
>
<
/div
>
<
color
-
svg
<
text
-
translate
-
pane
class
=
"common-padding-h"
:
texts
-
raw
=
"textEns"
:
texts
-
translate
=
"textZns"
:
svg
-
url
=
"TranslationSvg"
:
text
-
entities
=
"textEntities"
:
is
-
open
-
translation
=
"isOpenTranslation"
color
=
"var(--color-primary-100)"
:
is
-
highlight
-
entity
=
"isHightLightEntity"
>
:
size
=
"18"
<
/text-translate-pane
>
style
=
"margin-right: 10px"
<
div
>
><
/color-svg
>
<
img
v
-
if
=
"newsDetail.coverUrl"
class
=
"common-padding"
:
src
=
"newsDetail.coverUrl"
:
width
=
"320"
译文
:
height
=
"240"
/>
<
/el-button
>
<
/div
>
<
/div
>
<
/el-space
>
<
text
-
translate
-
pane
<
el
-
space
direction
=
"vertical"
class
=
"background-as-card relation-news-box"
fill
>
class
=
"common-padding-h"
<
el
-
space
style
=
"margin-top: 10px;"
>
:
texts
-
raw
=
"textEns"
<
color
-
prefix
-
title
height
=
"20px"
>
:
texts
-
translate
=
"textZns"
<
div
class
=
"text-title-2-bold"
>
相关新闻
<
/div
>
:
text
-
entities
=
"textEntities"
<
/color-prefix-title
>
:
is
-
open
-
translation
=
"isOpenTranslation"
<
/el-space
>
:
is
-
highlight
-
entity
=
"isHightLightEntity"
<
el
-
space
v
-
if
=
"relationNews?.length > 0"
direction
=
"vertical"
fill
class
=
"common-padding"
>
@
on
-
entity
-
click
=
"e => gotoSearchResults(e.text_span, '')"
<
news
-
item
-
mini
v
-
for
=
"item in relationNews"
:
key
=
"item.newsId"
:
news
=
"item"
:
img
=
"item.newsImage"
>
:
title
=
"item.newsTitle"
:
from
=
"`${item.newsDate
}
· ${item.newsOrg
}
`"
<
/text-translate-pane
>
@
click
=
"gotoNewsDetail(item.newsId)"
/>
<
div
>
<
/el-space
>
<
img
<
el
-
empty
v
-
else
style
=
""
><
/el-empty
>
v
-
if
=
"newsDetail.coverUrl"
<
/el-space
>
class
=
"common-padding"
<
/div
>
:
src
=
"newsDetail.coverUrl"
<
/el-scrollbar
>
:
width
=
"320"
:
height
=
"240"
/>
<
/div
>
<
/el-space
>
<
el
-
space
direction
=
"vertical"
class
=
"background-as-card relation-news-box"
fill
>
<
el
-
space
style
=
"margin-top: 10px"
>
<
color
-
prefix
-
title
height
=
"20px"
>
<
div
class
=
"text-title-2-bold"
>
相关新闻
<
/div
>
<
/color-prefix-title
>
<
/el-space
>
<
el
-
space
v
-
if
=
"relationNews?.length > 0"
direction
=
"vertical"
fill
class
=
"common-padding"
>
<
news
-
item
-
mini
v
-
for
=
"item in relationNews"
:
key
=
"item.newsId"
:
news
=
"item"
:
img
=
"item.newsImage"
:
title
=
"item.newsTitle"
:
from
=
"`${item.newsDate
}
· ${item.newsOrg
}
`"
@
click
=
"gotoNewsDetail(item.newsId)"
/>
<
/el-space
>
<
el
-
empty
v
-
else
style
=
""
><
/el-empty
>
<
/el-space
>
<
/div
>
<
/el-scrollbar
>
<
/template
>
<
/template
>
<
script
setup
>
<
script
setup
>
import
{
getNewsDetail
}
from
"@/api/news/newsBrief"
;
import
{
getNewsDetail
}
from
"@/api/news/newsBrief"
;
import
'@/styles/container.scss'
;
import
"@/styles/container.scss"
;
import
'@/styles/common.scss'
;
import
"@/styles/common.scss"
;
import
{
ref
,
onMounted
}
from
"vue"
;
import
{
ref
,
onMounted
}
from
"vue"
;
import
{
useRoute
}
from
"vue-router"
;
import
{
useRoute
}
from
"vue-router"
;
import
{
ElSpace
,
ElButton
,
ElScrollbar
,
ElSwitch
,
ElEmpty
,
ElImage
}
from
"element-plus"
;
import
{
ElSpace
,
ElButton
,
ElScrollbar
,
ElSwitch
,
ElEmpty
,
ElImage
}
from
"element-plus"
;
import
CommonText
from
"@/components/base/texts/CommonText.vue"
;
import
CommonText
from
"@/components/base/texts/CommonText.vue"
;
import
AreaTag
from
"@/components/base/AreaTag/index.vue"
;
import
AreaTag
from
"@/components/base/AreaTag/index.vue"
;
import
ColorPrefixTitle
from
'@/components/base/texts/ColorPrefixTitle.vue'
;
import
ColorPrefixTitle
from
"@/components/base/texts/ColorPrefixTitle.vue"
;
import
{
getRelationNews
}
from
"@/api/news/newsDetail"
;
import
{
getRelationNews
}
from
"@/api/news/newsDetail"
;
import
NewsItemMini
from
"@/components/base/newsList/NewsItemMini.vue"
;
import
NewsItemMini
from
"@/components/base/newsList/NewsItemMini.vue"
;
import
ColorSvg
from
"@/components/base/images/ColorSvg.vue"
;
import
ColorSvg
from
"@/components/base/images/ColorSvg.vue"
;
import
TranslationSvg
from
'./assets/images/翻译 1.svg'
;
import
TranslationSvg
from
"./assets/images/翻译 1.svg"
;
import
NewsLogo
from
'./assets/images/组合 293.svg'
;
import
NewsLogo
from
"./assets/images/组合 293.svg"
;
import
{
extractTextEntity
}
from
"@/api/intelligent"
;
import
{
extractTextEntity
}
from
"@/api/intelligent"
;
import
{
useGotoNewsDetail
}
from
"@/router/modules/news"
;
import
{
useGotoNewsDetail
}
from
"@/router/modules/news"
;
import
{
useGotoSearchResults
}
from
"@/router/modules/comprehensiveSearch"
;
import
TextTranslatePane
from
"@/components/base/texts/TextTranslatePane.vue"
;
import
TextTranslatePane
from
"@/components/base/texts/TextTranslatePane.vue"
;
const
newsDetail
=
ref
({
}
);
const
newsDetail
=
ref
({
}
);
...
@@ -94,56 +120,54 @@ const textZns = ref([]);
...
@@ -94,56 +120,54 @@ const textZns = ref([]);
const
textEns
=
ref
([]);
const
textEns
=
ref
([]);
const
route
=
useRoute
();
const
route
=
useRoute
();
const
gotoNewsDetail
=
useGotoNewsDetail
();
const
gotoNewsDetail
=
useGotoNewsDetail
();
const
gotoSearchResults
=
useGotoSearchResults
();
onMounted
(
async
()
=>
{
onMounted
(
async
()
=>
{
const
params
=
{
const
params
=
{
newsId
:
route
.
params
.
id
newsId
:
route
.
params
.
id
}
}
;
const
{
data
:
newsDetailData
}
=
await
getNewsDetail
(
params
);
const
{
data
:
newsDetailData
}
=
await
getNewsDetail
(
params
);
newsDetail
.
value
=
newsDetailData
??
{
}
;
newsDetail
.
value
=
newsDetailData
??
{
}
;
textZns
.
value
=
newsDetail
.
value
?.
contentZh
?.
split
(
'
\
n'
)
??
[];
textZns
.
value
=
newsDetail
.
value
?.
contentZh
?.
split
(
"
\
n"
)
??
[];
textEns
.
value
=
newsDetail
.
value
?.
content
?.
split
(
'
\
n'
)
??
[];
textEns
.
value
=
newsDetail
.
value
?.
content
?.
split
(
"
\
n"
)
??
[];
const
{
data
:
relationNewsData
}
=
await
getRelationNews
(
params
);
const
{
data
:
relationNewsData
}
=
await
getRelationNews
(
params
);
relationNews
.
value
=
relationNewsData
??
[];
relationNews
.
value
=
relationNewsData
??
[];
await
handleHighlightEntity
();
await
handleHighlightEntity
();
}
);
}
);
async
function
handleHighlightEntity
()
{
async
function
handleHighlightEntity
()
{
if
(
textEntities
.
value
.
length
>
0
if
(
textEntities
.
value
.
length
>
0
||
(
!
newsDetail
.
value
?.
contentZh
&&
!
newsDetail
.
value
?.
content
))
return
;
||
(
!
newsDetail
.
value
?.
contentZh
&&
!
newsDetail
.
value
?.
content
))
return
const
{
result
:
entityDataZh
}
=
await
extractTextEntity
(
newsDetail
.
value
.
contentZh
??
""
);
const
{
result
:
entityDataZh
}
=
await
extractTextEntity
(
newsDetail
.
value
.
contentZh
??
''
);
textEntities
.
value
=
[...(
entityDataZh
??
[])];
textEntities
.
value
=
[...
entityDataZh
??
[]]
if
(
newsDetail
.
value
.
contentZh
!==
newsDetail
.
value
.
content
)
{
if
(
newsDetail
.
value
.
contentZh
!==
newsDetail
.
value
.
content
)
{
const
{
result
:
entityData
}
=
await
extractTextEntity
(
newsDetail
.
value
.
content
??
""
);
const
{
result
:
entityData
}
=
await
extractTextEntity
(
newsDetail
.
value
.
content
??
''
);
textEntities
.
value
=
[...
textEntities
.
value
,
...(
entityData
??
[])];
textEntities
.
value
=
[...
textEntities
.
value
,
...
entityData
??
[]]
}
}
console
.
log
(
isHightLightEntity
.
value
);
console
.
log
(
isHightLightEntity
.
value
)
}
}
function
handleTranslation
()
{
function
handleTranslation
()
{
isOpenTranslation
.
value
=
!
isOpenTranslation
.
value
;
isOpenTranslation
.
value
=
!
isOpenTranslation
.
value
;
}
}
<
/script
>
<
/script
>
<
style
lang
=
"scss"
scoped
>
<
style
lang
=
"scss"
scoped
>
@
import
url
(
"./style.css"
);
@
import
url
(
"./style.css"
);
.
top
-
box
-
news
-
deatail
{
.
top
-
box
-
news
-
deatail
{
background
-
color
:
var
(
--
bg
-
white
-
100
);
background
-
color
:
var
(
--
bg
-
white
-
100
);
box
-
shadow
:
0
px
0
px
20
px
0
px
rgba
(
25
,
69
,
130
,
0.1
);
box
-
shadow
:
0
px
0
px
20
px
0
px
rgba
(
25
,
69
,
130
,
0.1
);
}
}
.
content
-
box
-
news
-
detail
{
.
content
-
box
-
news
-
detail
{
align
-
items
:
flex
-
start
;
align
-
items
:
flex
-
start
;
gap
:
16
px
;
gap
:
16
px
;
}
}
.
relation
-
news
-
box
{
.
relation
-
news
-
box
{
width
:
520
px
;
width
:
520
px
;
}
}
.
p
-
news
-
content
{
.
p
-
news
-
content
{
//首行缩进
//首行缩进
text
-
indent
:
2
em
;
text
-
indent
:
2
em
;
}
}
<
/style>
<
/style
>
\ No newline at end of file
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论