Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
C
corporateCulture-qd
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
王立鹏
corporateCulture-qd
Commits
e02e14c2
Commit
e02e14c2
authored
Dec 18, 2025
by
lijiabin
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
【需求 17679】 perf: 优化实践等部分
parent
741b36b7
Show whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
490 additions
and
81 deletions
+490
-81
types.ts
src/api/practice/types.ts
+1
-0
index.vue
src/components/common/Comment/index.vue
+15
-14
route.ts
src/router/route.ts
+6
-0
index.vue
src/views/columnSearchList/index.vue
+40
-16
columnList.vue
src/views/homePage/yaTab/components/columnList.vue
+3
-2
interviewList.vue
src/views/homePage/yaTab/components/interviewList.vue
+3
-2
practiceList.vue
src/views/homePage/yaTab/components/practiceList.vue
+12
-11
index.vue
src/views/practiceSearchList/index.vue
+310
-0
index.vue
src/views/questionDetail/index.vue
+2
-2
index.vue
src/views/searchPage/index.vue
+56
-19
index.vue
src/views/videoSearchList/index.vue
+42
-15
No files found.
src/api/practice/types.ts
View file @
e02e14c2
...
@@ -25,6 +25,7 @@ export interface PracticeSearchParams extends PageSearchParams {
...
@@ -25,6 +25,7 @@ export interface PracticeSearchParams extends PageSearchParams {
sortLogic
:
number
sortLogic
:
number
tagIdList
:
number
[]
tagIdList
:
number
[]
deptIdList
:
string
[]
deptIdList
:
string
[]
title
?:
string
}
}
/**
/**
...
...
src/components/common/Comment/index.vue
View file @
e02e14c2
...
@@ -24,29 +24,29 @@
...
@@ -24,29 +24,29 @@
</button>
</button>
<button
<button
class=
"cursor-pointer px-3 py-1.5 text-sm transition-all relative"
class=
"cursor-pointer px-3 py-1.5 text-sm transition-all relative"
@
click=
"((searchParams.sortType =
1
), refresh())"
@
click=
"((searchParams.sortType =
4
), refresh())"
:class=
"
{
:class=
"
{
'text-indigo-600 font-medium': searchParams.sortType ===
1
,
'text-indigo-600 font-medium': searchParams.sortType ===
4
,
'text-gray-600 hover:text-gray-900': searchParams.sortType !==
1
,
'text-gray-600 hover:text-gray-900': searchParams.sortType !==
4
,
}"
}"
>
>
最多
评论
最多
点赞
<span
<span
v-if=
"searchParams.sortType ===
1
"
v-if=
"searchParams.sortType ===
4
"
class=
"absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600"
class=
"absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600"
></span>
></span>
</button>
</button>
<button
<button
class=
"cursor-pointer px-3 py-1.5 text-sm transition-all relative"
class=
"cursor-pointer px-3 py-1.5 text-sm transition-all relative"
@
click=
"((searchParams.sortType =
4
), refresh())"
@
click=
"((searchParams.sortType =
1
), refresh())"
:class=
"
{
:class=
"
{
'text-indigo-600 font-medium': searchParams.sortType ===
4
,
'text-indigo-600 font-medium': searchParams.sortType ===
1
,
'text-gray-600 hover:text-gray-900': searchParams.sortType !==
4
,
'text-gray-600 hover:text-gray-900': searchParams.sortType !==
1
,
}"
}"
>
>
最多
点赞
最多
评论
<span
<span
v-if=
"searchParams.sortType ===
4
"
v-if=
"searchParams.sortType ===
1
"
class=
"absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600"
class=
"absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600"
></span>
></span>
</button>
</button>
...
@@ -122,7 +122,7 @@
...
@@ -122,7 +122,7 @@
<!--
<span
class=
"px-2 py-0.5 text-xs bg-red-100 text-red-600 rounded-full"
>
置顶
</span>
-->
<!--
<span
class=
"px-2 py-0.5 text-xs bg-red-100 text-red-600 rounded-full"
>
置顶
</span>
-->
</div>
</div>
<!-- 换行 -->
<!-- 换行 -->
<p
class=
"text-gray-
7
00 my-2 break-all whitespace-pre-wrap"
>
<p
class=
"text-gray-
8
00 my-2 break-all whitespace-pre-wrap"
>
{{
item
.
content
}}
{{
item
.
content
}}
</p>
</p>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center justify-between"
>
...
@@ -166,11 +166,12 @@
...
@@ -166,11 +166,12 @@
/>
/>
<div
class=
"flex-1"
>
<div
class=
"flex-1"
>
<div
class=
"flex items-center gap-2 mb-1"
>
<div
class=
"flex items-center gap-2 mb-1"
>
<span
class=
"font-medium text-sm text-gray-800"
<span
class=
"font-medium text-sm text-gray-800"
>
>
{{
child
.
replyUser
}}
回复 @
{{
child
.
replyName
}}
</span
<span
class=
"text-gray-600"
>
{{
child
.
replyUser
}}
</span>
回复
<span>
{{
child
.
replyName
}}
</span></span
>
>
</div>
</div>
<p
class=
"text-gray-
7
00 my-2 break-all whitespace-pre-wrap"
>
<p
class=
"text-gray-
8
00 my-2 break-all whitespace-pre-wrap"
>
{{
child
.
content
}}
{{
child
.
content
}}
</p>
</p>
<div
class=
"flex items-center justify-between"
>
<div
class=
"flex items-center justify-between"
>
...
...
src/router/route.ts
View file @
e02e14c2
...
@@ -155,6 +155,12 @@ export const constantsRoute = [
...
@@ -155,6 +155,12 @@ export const constantsRoute = [
name
:
'CultureColumnSearchList'
,
name
:
'CultureColumnSearchList'
,
component
:
()
=>
import
(
'@/views/columnSearchList/index.vue'
),
component
:
()
=>
import
(
'@/views/columnSearchList/index.vue'
),
},
},
// YA文化实践的搜索
{
path
:
'practiceSearchList'
,
name
:
'CulturePracticeSearchList'
,
component
:
()
=>
import
(
'@/views/practiceSearchList/index.vue'
),
},
// YA文化视频的搜索
// YA文化视频的搜索
{
{
path
:
'videoSearchList/:id?'
,
path
:
'videoSearchList/:id?'
,
...
...
src/views/columnSearchList/index.vue
View file @
e02e14c2
...
@@ -12,8 +12,14 @@
...
@@ -12,8 +12,14 @@
</el-button>
</el-button>
<div
class=
"w-auto flex items-center gap-2"
>
<div
class=
"w-auto flex items-center gap-2"
>
<el-input
v-model=
"searchParams.title"
placeholder=
"输入关键词搜索"
class=
"w-400px"
size=
"default"
<el-input
@
keyup
.
enter=
"handleSearch"
clearable
/>
v-model=
"searchParams.title"
placeholder=
"输入关键词搜索"
class=
"w-400px"
size=
"default"
@
keyup
.
enter=
"handleSearch"
clearable
/>
<el-button
type=
"primary"
@
click=
"handleSearch"
>
搜索
</el-button>
<el-button
type=
"primary"
@
click=
"handleSearch"
>
搜索
</el-button>
</div>
</div>
...
@@ -45,19 +51,29 @@
...
@@ -45,19 +51,29 @@
</div>
</div>
<div
class=
"text-gray-500 text-14px"
>
<div
class=
"text-gray-500 text-14px"
>
<el-radio-group
size=
"default"
v-model=
"searchParams.sortLogic"
@
change=
"changeSort"
>
<el-radio-group
size=
"default"
v-model=
"searchParams.sortLogic"
@
change=
"changeSort"
>
<el-radio-button
v-for=
"sort in sortOptions"
:key=
"sort.value"
:label=
"sort.label"
:value=
"sort.value"
/>
<el-radio-button
v-for=
"sort in sortOptions"
:key=
"sort.value"
:label=
"sort.label"
:value=
"sort.value"
/>
</el-radio-group>
</el-radio-group>
</div>
</div>
</div>
</div>
<div
v-show=
"list.length"
>
<div
v-show=
"list.length"
>
<div
class=
"space-y-4"
>
<div
class=
"space-y-4"
>
<div
v-for=
"item in list"
:key=
"item.articleId"
<div
v-for=
"item in list"
:key=
"item.articleId"
class=
"flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
class=
"flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
@
click=
"handleClick(item)"
>
@
click=
"handleClick(item)"
>
<!-- 封面图 -->
<!-- 封面图 -->
<div
v-if=
"item.faceUrl"
<div
class=
"flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"
>
v-if=
"item.faceUrl"
class=
"flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"
>
<img
:src=
"item.faceUrl"
class=
"w-full h-full object-cover"
/>
<img
:src=
"item.faceUrl"
class=
"w-full h-full object-cover"
/>
<!-- <div
<!-- <div
v-if="item.type === ArticleTypeEnum.VIDEO"
v-if="item.type === ArticleTypeEnum.VIDEO"
...
@@ -76,9 +92,10 @@
...
@@ -76,9 +92,10 @@
</h3>
</h3>
<!-- 描述 -->
<!-- 描述 -->
<p
class=
"text-14px text-gray-600 mb-3 line-clamp-2"
>
<!-- 富文本暂时去掉 -->
<!-- <p class="text-14px text-gray-600 mb-3 line-clamp-2">
{{ item.content }}
{{ item.content }}
</p>
</p>
-->
</div>
</div>
<!-- 底部信息 -->
<!-- 底部信息 -->
...
@@ -125,13 +142,20 @@
...
@@ -125,13 +142,20 @@
<!-- 右侧:分页器 -->
<!-- 右侧:分页器 -->
<div
class=
"right"
>
<div
class=
"right"
>
<div
class=
"pr-4"
>
<div
class=
"pr-4"
>
<el-pagination
v-model:current-page=
"searchParams.current"
v-model:page-size=
"searchParams.size"
<el-pagination
:page-sizes=
"[5, 20, 1]"
layout=
"prev, pager, next, jumper, total"
:total=
"total"
v-model:current-page=
"searchParams.current"
class=
"custom-pagination"
@
current-change=
"
v-model:page-size=
"searchParams.size"
:page-sizes=
"[5, 20, 1]"
layout=
"prev, pager, next, jumper, total"
:total=
"total"
class=
"custom-pagination"
@
current-change=
"
(e) => {
(e) => {
;
(handleBackTop(), goToPage(e))
;(handleBackTop(), goToPage(e))
}
}
"
@
size-change=
"changePageSize"
/>
"
@
size-change=
"changePageSize"
/>
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -162,8 +186,8 @@ const { ScrollTopComp, handleBackTop } = useScrollTop(searchPageRef)
...
@@ -162,8 +186,8 @@ const { ScrollTopComp, handleBackTop } = useScrollTop(searchPageRef)
const
columnTitle
=
route
.
query
.
columnTitle
||
''
const
columnTitle
=
route
.
query
.
columnTitle
||
''
const
sortOptions
=
[
const
sortOptions
=
[
{
label
:
'最热'
,
value
:
0
},
{
label
:
'最新'
,
value
:
1
},
{
label
:
'最新'
,
value
:
1
},
{
label
:
'最热'
,
value
:
0
},
]
]
const
{
total
,
goToPage
,
changePageSize
,
refresh
,
searchParams
,
list
}
=
usePageSearch
(
const
{
total
,
goToPage
,
changePageSize
,
refresh
,
searchParams
,
list
}
=
usePageSearch
(
...
@@ -193,7 +217,7 @@ const handleClick = (item: SearchMoreColumnItemDto) => {
...
@@ -193,7 +217,7 @@ const handleClick = (item: SearchMoreColumnItemDto) => {
window
.
open
(
`/articleDetail/
${
item
.
articleId
}
`
)
window
.
open
(
`/articleDetail/
${
item
.
articleId
}
`
)
}
}
onActivated
(()
=>
{
})
onActivated
(()
=>
{})
</
script
>
</
script
>
<
style
scoped
></
style
>
<
style
scoped
></
style
>
src/views/homePage/yaTab/components/columnList.vue
View file @
e02e14c2
...
@@ -55,9 +55,10 @@
...
@@ -55,9 +55,10 @@
<h3
class=
"text font-medium text-gray-800 mb-2 transition-colors line-clamp-1"
>
<h3
class=
"text font-medium text-gray-800 mb-2 transition-colors line-clamp-1"
>
{{
i
.
title
}}
{{
i
.
title
}}
</h3>
</h3>
<p
class=
"text-sm text-gray-500 mb-3 line-clamp-1"
>
<!-- 因为是富文本 暂时不显示 -->
<!--
<p
class=
"text-sm text-gray-500 mb-3 line-clamp-1"
>
{{
i
.
content
}}
{{
i
.
content
}}
</p>
</p>
-->
<div
class=
"flex items-center justify-between text-xs text-gray-500"
>
<div
class=
"flex items-center justify-between text-xs text-gray-500"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"flex items-center space-x-4"
>
<span
class=
"flex items-center"
>
<span
class=
"flex items-center"
>
...
...
src/views/homePage/yaTab/components/interviewList.vue
View file @
e02e14c2
...
@@ -53,9 +53,10 @@
...
@@ -53,9 +53,10 @@
<h3
class=
"text-sm font-medium text-gray-800 mb-2 transition-colors line-clamp-1"
>
<h3
class=
"text-sm font-medium text-gray-800 mb-2 transition-colors line-clamp-1"
>
{{
i
.
title
}}
{{
i
.
title
}}
</h3>
</h3>
<p
class=
"text-xs text-gray-500 mb-3 line-clamp-1"
>
<!-- 因为是富文本 暂时不显示 -->
<!--
<p
class=
"text-xs text-gray-500 mb-3 line-clamp-1"
>
{{
i
.
content
}}
{{
i
.
content
}}
</p>
</p>
-->
<div
class=
"flex items-center justify-between text-xs text-gray-400"
>
<div
class=
"flex items-center justify-between text-xs text-gray-400"
>
<div
class=
"flex items-center space-x-4"
>
<div
class=
"flex items-center space-x-4"
>
<span
class=
"flex items-center"
>
<span
class=
"flex items-center"
>
...
...
src/views/homePage/yaTab/components/practiceList.vue
View file @
e02e14c2
...
@@ -28,8 +28,9 @@
...
@@ -28,8 +28,9 @@
</div>
</div>
</div>
</div>
<!-- 先暂时去掉文化标签 -->
<!-- 标签筛选 (多选) -->
<!-- 标签筛选 (多选) -->
<div
class=
"mb-6"
>
<
!--
<
div
class=
"mb-6"
>
<div
class=
"flex items-center gap-2 mb-3"
>
<div
class=
"flex items-center gap-2 mb-3"
>
<div
class=
"w-1 h-4 bg-gradient-to-b from-blue-400 to-blue-500 rounded-full"
></div>
<div
class=
"w-1 h-4 bg-gradient-to-b from-blue-400 to-blue-500 rounded-full"
></div>
<span
class=
"text-sm font-semibold text-gray-700"
>
文化标签
</span>
<span
class=
"text-sm font-semibold text-gray-700"
>
文化标签
</span>
...
@@ -61,7 +62,7 @@
...
@@ -61,7 +62,7 @@
</span>
</span>
</label>
</label>
</div>
</div>
</div>
</div>
-->
<!-- 部门筛选 (多选) -->
<!-- 部门筛选 (多选) -->
<div>
<div>
...
@@ -113,9 +114,11 @@
...
@@ -113,9 +114,11 @@
class=
"text-#999 cursor-pointer text-sm"
class=
"text-#999 cursor-pointer text-sm"
@
click=
"
@
click=
"
router.push(
{
router.push(
{
path: '/
searchPage
',
path: '/
practiceSearchList
',
query: {
query: {
type: ArticleTypeEnum.PRACTICE,
sortLogic: searchParams.sortLogic,
tagIdList: searchParams.tagIdList.join(','),
deptIdList: searchParams.deptIdList.join(','),
},
},
})
})
"
"
...
@@ -225,27 +228,26 @@
...
@@ -225,27 +228,26 @@
</
template
>
</
template
>
<
script
setup
lang=
"ts"
>
<
script
setup
lang=
"ts"
>
import
{
storeToRefs
}
from
'pinia'
import
{
getPracticeList
}
from
'@/api/practice'
import
{
getPracticeList
}
from
'@/api/practice'
import
{
usePageSearch
,
useScrollTop
}
from
'@/hooks'
import
{
usePageSearch
,
useScrollTop
}
from
'@/hooks'
import
dayjs
from
'dayjs'
import
dayjs
from
'dayjs'
import
{
TABS_REF_KEY
}
from
'@/constants'
import
{
TABS_REF_KEY
}
from
'@/constants'
import
{
useTagsStore
}
from
'@/stores/tags'
// import { useTagsStore } from '@/stores/tags'
// import { storeToRefs } from 'pinia'
import
PublishPractice
from
'@/components/common/PublishBox/index.vue'
import
PublishPractice
from
'@/components/common/PublishBox/index.vue'
import
{
ArticleTypeEnum
}
from
'@/constants'
import
{
ArticleTypeEnum
}
from
'@/constants'
import
{
jumpToArticleDetailPage
}
from
'@/utils'
import
{
jumpToArticleDetailPage
}
from
'@/utils'
const
tagsStore
=
useTagsStore
()
//
const tagsStore = useTagsStore()
const
{
tagList
}
=
storeToRefs
(
tagsStore
)
//
const { tagList } = storeToRefs(tagsStore)
const
router
=
useRouter
()
const
router
=
useRouter
()
const
tabsRef
=
inject
(
TABS_REF_KEY
)
const
tabsRef
=
inject
(
TABS_REF_KEY
)
const
filterOptions
=
ref
([
const
filterOptions
=
ref
([
{
title
:
'最热'
,
id
:
0
},
{
title
:
'最新'
,
id
:
1
},
{
title
:
'最新'
,
id
:
1
},
// { title: '最多观看', id: 2
},
{
title
:
'最热'
,
id
:
0
},
])
])
const
firstDepList
=
ref
([
const
firstDepList
=
ref
([
{
id
:
'1825'
,
name
:
'Amazon产品开发部'
},
{
id
:
'1825'
,
name
:
'Amazon产品开发部'
},
...
@@ -286,7 +288,6 @@ const filterText = computed(() => {
...
@@ -286,7 +288,6 @@ const filterText = computed(() => {
const
toggleFilter
=
(
id
:
number
)
=>
{
const
toggleFilter
=
(
id
:
number
)
=>
{
searchParams
.
value
.
sortLogic
=
id
searchParams
.
value
.
sortLogic
=
id
refresh
()
refresh
()
handleBackTop
()
}
}
defineExpose
({
defineExpose
({
...
...
src/views/practiceSearchList/index.vue
0 → 100644
View file @
e02e14c2
<
template
>
<div
ref=
"searchPageRef"
class=
"bg-white/90"
>
<div>
<!-- 搜索栏 -->
<div
class=
"p-4"
>
<div
class=
"flex items-center gap-2 justify-between"
>
<el-button
link
@
click=
"router.back()"
class=
"text-gray-600 hover:text-primary"
>
<el-icon
class=
"mr-1"
>
<ArrowLeft
/>
</el-icon>
返回
</el-button>
<div
class=
"w-auto flex items-center gap-2"
>
<el-input
v-model=
"searchParams.title"
placeholder=
"输入关键词搜索"
class=
"w-400px"
size=
"default"
@
keyup
.
enter=
"handleSearch"
clearable
/>
<el-button
type=
"primary"
@
click=
"handleSearch"
>
搜索
</el-button>
</div>
</div>
</div>
<!-- 筛选面板 -->
<div
class=
"bg-white rounded-xl shadow-sm border border-gray-100/50 overflow-hidden mb-6"
>
<div
class=
"px-6"
>
<!-- 排序方式 (单选) -->
<div
class=
"mb-6"
>
<div
class=
"flex items-center gap-2 mb-3"
>
<div
class=
"w-1 h-4 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full"
></div>
<span
class=
"text-sm font-semibold text-gray-700"
>
排序方式
</span>
</div>
<div
class=
"flex flex-wrap gap-2"
>
<button
v-for=
"sort in sortOptions"
:key=
"sort.value"
@
click=
"changeSort(sort.value)"
:class=
"[
'px-4 py-2 rounded-lg text-sm font-medium cursor-pointer transition-all duration-200',
searchParams.sortLogic === sort.value
? 'bg-blue-50 text-blue-600 border-2 border-blue-400 shadow-sm'
: 'bg-gray-50 text-gray-600 border-2 border-transparent hover:border-gray-200 hover:bg-gray-100',
]"
>
{{
sort
.
label
}}
</button>
</div>
</div>
<!-- 部门筛选 (多选) -->
<div
class=
"mb-6"
>
<div
class=
"flex items-center gap-2 mb-3"
>
<div
class=
"w-1 h-4 bg-gradient-to-b from-blue-400 to-blue-500 rounded-full"
></div>
<span
class=
"text-sm font-semibold text-gray-700"
>
部门分类
</span>
<span
v-if=
"searchParams.deptIdList.length"
class=
"text-xs text-gray-400"
>
(已选
{{
searchParams
.
deptIdList
.
length
}}
个)
</span>
</div>
<div
class=
"flex flex-wrap gap-2"
>
<label
v-for=
"item in firstDepList"
:key=
"item.id"
:class=
"[
'px-4 py-2 rounded-lg text-sm font-medium cursor-pointer transition-all duration-200',
searchParams.deptIdList.includes(item.id)
? 'bg-blue-50 text-blue-600 border-2 border-blue-400 shadow-sm'
: 'bg-gray-50 text-gray-600 border-2 border-transparent hover:border-gray-200 hover:bg-gray-100',
]"
>
<input
type=
"checkbox"
:value=
"item.id"
v-model=
"searchParams.deptIdList"
@
change=
"refresh"
class=
"hidden"
/>
<span
class=
"flex items-center gap-1.5"
>
<span
v-if=
"searchParams.deptIdList.includes(item.id)"
class=
"text-xs"
>
✓
</span>
{{
item
.
name
}}
</span>
</label>
</div>
</div>
<!-- 标签筛选 (多选) -->
<div
class=
"mb-6"
>
<div
class=
"flex items-center gap-2 mb-3"
>
<div
class=
"w-1 h-4 bg-gradient-to-b from-blue-400 to-blue-500 rounded-full"
></div>
<span
class=
"text-sm font-semibold text-gray-700"
>
标签分类
</span>
<span
v-if=
"searchParams.tagIdList.length"
class=
"text-xs text-gray-400"
>
(已选
{{
searchParams
.
tagIdList
.
length
}}
个)
</span>
</div>
<div
class=
"flex flex-wrap gap-2"
>
<label
v-for=
"item in tagList"
:key=
"item.id"
:class=
"[
'px-4 py-2 rounded-lg text-sm font-medium cursor-pointer transition-all duration-200',
searchParams.tagIdList.includes(item.id)
? 'bg-blue-50 text-blue-600 border-2 border-blue-400 shadow-sm'
: 'bg-gray-50 text-gray-600 border-2 border-transparent hover:border-gray-200 hover:bg-gray-100',
]"
>
<input
type=
"checkbox"
:value=
"item.id"
v-model=
"searchParams.tagIdList"
@
change=
"refresh"
class=
"hidden"
/>
<span
class=
"flex items-center gap-1.5"
>
<span
v-if=
"searchParams.tagIdList.includes(item.id)"
class=
"text-xs"
>
✓
</span>
{{
item
.
title
}}
</span>
</label>
</div>
</div>
</div>
</div>
<div
v-show=
"list.length"
v-loading=
"loading"
>
<div
class=
"space-y-4"
>
<div
v-for=
"item in list"
:key=
"item.id"
class=
"flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
@
click=
"handleClick(item)"
>
<!-- 封面图 -->
<div
v-if=
"item.faceUrl"
class=
"flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"
>
<img
:src=
"item.faceUrl"
class=
"w-full h-full object-cover"
/>
<!--
<div
v-if=
"item.type === ArticleTypeEnum.VIDEO"
class=
"absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded"
>
{{
item
.
videoDuration
}}
</div>
-->
</div>
<!-- 内容信息 -->
<div
class=
"flex-1 flex flex-col justify-between min-w-0"
>
<div>
<!-- 标题 -->
<h3
class=
"text-16px font-500 text-gray-900 mb-2 line-clamp-1"
>
{{
item
.
title
}}
</h3>
<!-- 描述 -->
<p
class=
"text-14px text-gray-600 mb-3 line-clamp-2"
>
{{
item
.
content
}}
</p>
</div>
<!-- 底部信息 -->
<div
class=
"flex items-center gap-4 text-13px text-gray-500"
>
<span>
{{
item
.
showName
}}
</span>
<span>
{{
dayjs
(
item
.
createTime
*
1000
).
format
(
'YYYY-MM-DD HH:mm:ss'
)
}}
</span>
<div
class=
"flex items-center gap-1"
>
<el-icon
class=
"text-sm"
>
<View
/>
</el-icon>
<span
class=
"font-medium text-gray-500"
>
{{
item
.
viewCount
}}
</span>
</div>
<div
class=
"flex items-center gap-1"
>
<el-icon
class=
"text-sm"
>
<ChatDotRound
/>
</el-icon>
<span
class=
"font-medium"
>
{{
item
.
replyCount
}}
</span>
</div>
<div
class=
"flex items-center gap-1"
>
<el-icon
class=
"text-sm"
>
<Star
/>
</el-icon>
<span
class=
"font-medium"
>
{{
item
.
praiseCount
}}
</span>
</div>
</div>
</div>
<div
class=
"flex-shrink-0 self-end"
>
<span
class=
"text-blue-600 text-13px"
>
{{
articleTypeListOptions
.
find
((
i
)
=>
i
.
value
===
item
.
type
)?.
label
}}
</span>
</div>
</div>
</div>
<div
class=
"bottom-pagination backdrop-blur-8 border-t border-gray-200"
>
<div
class=
"max-w-7xl mx-auto py-6"
>
<div
class=
"flex items-center justify-end gap-4"
>
<!-- 左侧:回到顶部按钮 -->
<!--
<div
class=
"left"
>
<ScrollTopComp
/>
</div>
-->
<!-- 右侧:分页器 -->
<div
class=
"right"
>
<div
class=
"pr-4"
>
<el-pagination
v-model:current-page=
"searchParams.current"
v-model:page-size=
"searchParams.size"
:page-sizes=
"[5, 20, 1]"
layout=
"prev, pager, next, jumper, total"
:total=
"total"
class=
"custom-pagination"
@
current-change=
"
async (e) =>
{
await goToPage(e)
handleBackTop()
}
"
@size-change="changePageSize"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div
v-show=
"!list.length"
>
<div
class=
"flex items-center justify-center h-full"
>
<el-empty
description=
"暂无数据"
/>
</div>
</div>
</div>
</div>
</
template
>
<
script
setup
lang=
"ts"
>
import
{
ArticleTypeEnum
,
articleTypeListOptions
}
from
'@/constants'
import
{
getPracticeList
}
from
'@/api'
import
{
usePageSearch
,
useScrollTop
}
from
'@/hooks'
import
dayjs
from
'dayjs'
import
type
{
PracticeItemDto
}
from
'@/api'
import
{
storeToRefs
}
from
'pinia'
import
{
useTagsStore
}
from
'@/stores/tags'
const
tagsStore
=
useTagsStore
()
const
{
tagList
}
=
storeToRefs
(
tagsStore
)
const
router
=
useRouter
()
const
route
=
useRoute
()
const
searchPageRef
=
ref
<
HTMLElement
|
null
>
(
null
)
const
{
handleBackTop
}
=
useScrollTop
(
searchPageRef
)
const
firstDepList
=
ref
([
{
id
:
'1825'
,
name
:
'Amazon产品开发部'
},
{
id
:
'76'
,
name
:
'Amazon销售部'
},
{
id
:
'139'
,
name
:
'Amazon运营部'
},
{
id
:
'5114'
,
name
:
'Temu销售部'
},
{
id
:
'4491'
,
name
:
'Tiktok项目部'
},
{
id
:
'39'
,
name
:
'视觉设计部'
},
{
id
:
'23'
,
name
:
'知识产权部'
},
{
id
:
'499'
,
name
:
'供应链管理部'
},
{
id
:
'20'
,
name
:
'IT技术部'
},
{
id
:
'5'
,
name
:
'财务部'
},
{
id
:
'2357'
,
name
:
'人力发展中心'
},
{
id
:
'683'
,
name
:
'副总经理'
},
{
id
:
'6'
,
name
:
'总经理'
},
{
id
:
'3'
,
name
:
'董事长'
},
])
const
sortOptions
=
[
{
label
:
'最新'
,
value
:
1
},
{
label
:
'最热'
,
value
:
0
},
]
const
{
total
,
goToPage
,
changePageSize
,
refresh
,
searchParams
,
list
,
loading
}
=
usePageSearch
(
getPracticeList
,
{
defaultParams
:
{
type
:
ArticleTypeEnum
.
PRACTICE
,
sortLogic
:
0
,
tagIdList
:
[],
deptIdList
:
[],
},
immediate
:
false
,
},
)
const
changeSort
=
(
value
:
number
)
=>
{
searchParams
.
value
.
sortLogic
=
value
refresh
()
}
const
handleSearch
=
()
=>
{
refresh
()
}
const
handleClick
=
(
item
:
PracticeItemDto
)
=>
{
window
.
open
(
`/articleDetail/
${
item
.
id
}
`
)
}
onActivated
(()
=>
{
searchParams
.
value
.
sortLogic
=
Number
(
route
.
query
.
sortLogic
)
||
0
searchParams
.
value
.
tagIdList
=
(
route
.
query
.
tagIdList
as
string
)?.
split
(
','
).
filter
(
Boolean
).
map
(
Number
)
||
[]
searchParams
.
value
.
deptIdList
=
(
route
.
query
.
deptIdList
as
string
)?.
split
(
','
).
filter
(
Boolean
)
||
[]
console
.
log
(
searchParams
.
value
)
refresh
()
})
</
script
>
<
style
scoped
></
style
>
src/views/questionDetail/index.vue
View file @
e02e14c2
...
@@ -117,8 +117,8 @@
...
@@ -117,8 +117,8 @@
fill=
"#3b82f6"
fill=
"#3b82f6"
>
>
<el-radio-button
label=
"最新"
:value=
"2"
/>
<el-radio-button
label=
"最新"
:value=
"2"
/>
<el-radio-button
label=
"最多评论"
:value=
"1"
/>
<el-radio-button
label=
"最多点赞"
:value=
"4"
/>
<el-radio-button
label=
"最多点赞"
:value=
"4"
/>
<el-radio-button
label=
"最多评论"
:value=
"1"
/>
</el-radio-group>
</el-radio-group>
<!--
<span
<!--
<span
@
click=
"changeSortType(2)"
@
click=
"changeSortType(2)"
...
@@ -308,7 +308,7 @@ const { list, total, searchParams, goToPage, refresh } = usePageSearch(getCommen
...
@@ -308,7 +308,7 @@ const { list, total, searchParams, goToPage, refresh } = usePageSearch(getCommen
// immediate: false,
// immediate: false,
defaultParams
:
{
defaultParams
:
{
articleId
:
questionId
,
articleId
:
questionId
,
sortType
:
1
,
sortType
:
2
,
}
,
}
,
formatList
:
(
list
)
=>
formatList
:
(
list
)
=>
list
.
map
((
item
)
=>
({
list
.
map
((
item
)
=>
({
...
...
src/views/searchPage/index.vue
View file @
e02e14c2
...
@@ -12,8 +12,14 @@
...
@@ -12,8 +12,14 @@
</el-button>
</el-button>
<div
class=
"w-auto flex items-center gap-2"
>
<div
class=
"w-auto flex items-center gap-2"
>
<el-input
v-model=
"searchParams.title"
placeholder=
"输入关键词搜索"
class=
"w-400px"
size=
"default"
<el-input
@
keyup
.
enter=
"handleSearch"
clearable
/>
v-model=
"searchParams.title"
placeholder=
"输入关键词搜索"
class=
"w-400px"
size=
"default"
@
keyup
.
enter=
"handleSearch"
clearable
/>
<el-button
type=
"primary"
@
click=
"handleSearch"
>
搜索
</el-button>
<el-button
type=
"primary"
@
click=
"handleSearch"
>
搜索
</el-button>
</div>
</div>
...
@@ -25,18 +31,28 @@
...
@@ -25,18 +31,28 @@
<div
class=
"flex items-center gap-2"
>
<div
class=
"flex items-center gap-2"
>
<span
class=
"text-gray-600 text-14px"
>
分类:
</span>
<span
class=
"text-gray-600 text-14px"
>
分类:
</span>
<div
class=
"flex gap-2"
>
<div
class=
"flex gap-2"
>
<button
v-for=
"sort in [
{ label: '全部', value: '' }, ...articleTypeListOptions]" :key="sort.value"
<button
class="px-4 py-1.5 rounded-lg text-14px transition-colors cursor-pointer" :class="{
v-for=
"sort in [
{ label: '全部', value: '' }, ...articleTypeListOptions]"
:key="sort.value"
class="px-4 py-1.5 rounded-lg text-14px transition-colors cursor-pointer"
:class="{
'text-blue-600 bg-blue-50': searchParams.type === sort.value,
'text-blue-600 bg-blue-50': searchParams.type === sort.value,
'text-gray-600 hover:text-blue-600': searchParams.type !== sort.value,
'text-gray-600 hover:text-blue-600': searchParams.type !== sort.value,
}" @click="changeType(sort.value)">
}"
@click="changeType(sort.value)"
>
{{
sort
.
label
}}
{{
sort
.
label
}}
</button>
</button>
</div>
</div>
</div>
</div>
<div
class=
"text-gray-500 text-14px"
>
<div
class=
"text-gray-500 text-14px"
>
<el-radio-group
size=
"default"
v-model=
"searchParams.sortLogic"
@
change=
"changeSort"
>
<el-radio-group
size=
"default"
v-model=
"searchParams.sortLogic"
@
change=
"changeSort"
>
<el-radio-button
v-for=
"sort in sortOptions"
:key=
"sort.value"
:label=
"sort.label"
:value=
"sort.value"
/>
<el-radio-button
v-for=
"sort in sortOptions"
:key=
"sort.value"
:label=
"sort.label"
:value=
"sort.value"
/>
</el-radio-group>
</el-radio-group>
</div>
</div>
</div>
</div>
...
@@ -67,15 +83,22 @@
...
@@ -67,15 +83,22 @@
<div
v-show=
"list.length"
>
<div
v-show=
"list.length"
>
<div
class=
"space-y-4"
>
<div
class=
"space-y-4"
>
<div
v-for=
"item in list"
:key=
"item.id"
<div
v-for=
"item in list"
:key=
"item.id"
class=
"flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
class=
"flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
@
click=
"handleClick(item)"
>
@
click=
"handleClick(item)"
>
<!-- 封面图 -->
<!-- 封面图 -->
<div
v-if=
"item.faceUrl"
<div
class=
"flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"
>
v-if=
"item.faceUrl"
class=
"flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"
>
<img
:src=
"item.faceUrl"
class=
"w-full h-full object-cover"
/>
<img
:src=
"item.faceUrl"
class=
"w-full h-full object-cover"
/>
<div
v-if=
"item.type === ArticleTypeEnum.VIDEO"
<div
class=
"absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded"
>
v-if=
"item.type === ArticleTypeEnum.VIDEO"
class=
"absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded"
>
{{
item
.
videoDuration
}}
{{
item
.
videoDuration
}}
</div>
</div>
</div>
</div>
...
@@ -89,7 +112,14 @@
...
@@ -89,7 +112,14 @@
</h3>
</h3>
<!-- 描述 -->
<!-- 描述 -->
<p
class=
"text-14px text-gray-600 mb-3 line-clamp-2"
>
<p
v-if=
"
item.type !== ArticleTypeEnum.POST &&
item.type !== ArticleTypeEnum.INTERVIEW &&
item.type !== ArticleTypeEnum.COLUMN
"
class=
"text-14px text-gray-600 mb-3 line-clamp-2"
>
{{
item
.
content
}}
{{
item
.
content
}}
</p>
</p>
</div>
</div>
...
@@ -138,13 +168,20 @@
...
@@ -138,13 +168,20 @@
<!-- 右侧:分页器 -->
<!-- 右侧:分页器 -->
<div
class=
"right"
>
<div
class=
"right"
>
<div
class=
"pr-4"
>
<div
class=
"pr-4"
>
<el-pagination
v-model:current-page=
"searchParams.current"
v-model:page-size=
"searchParams.size"
<el-pagination
:page-sizes=
"[5, 20, 1]"
layout=
"prev, pager, next, jumper, total"
:total=
"total"
v-model:current-page=
"searchParams.current"
class=
"custom-pagination"
@
current-change=
"
v-model:page-size=
"searchParams.size"
:page-sizes=
"[5, 20, 1]"
layout=
"prev, pager, next, jumper, total"
:total=
"total"
class=
"custom-pagination"
@
current-change=
"
(e) =>
{
(e) =>
{
;
(handleBackTop(), goToPage(e))
;(handleBackTop(), goToPage(e))
}
}
" @size-change="changePageSize" />
"
@size-change="changePageSize"
/>
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -177,8 +214,8 @@ const queryType = route.query.type || ('' as ArticleTypeEnum | undefined)
...
@@ -177,8 +214,8 @@ const queryType = route.query.type || ('' as ArticleTypeEnum | undefined)
const
querySearchTitle
=
route
.
query
.
title
const
querySearchTitle
=
route
.
query
.
title
const
sortOptions
=
[
const
sortOptions
=
[
{
label
:
'最热'
,
value
:
0
},
{
label
:
'最新'
,
value
:
1
},
{
label
:
'最新'
,
value
:
1
},
{
label
:
'最热'
,
value
:
0
},
]
]
const
{
total
,
goToPage
,
changePageSize
,
refresh
,
searchParams
,
list
}
=
usePageSearch
(
const
{
total
,
goToPage
,
changePageSize
,
refresh
,
searchParams
,
list
}
=
usePageSearch
(
...
...
src/views/videoSearchList/index.vue
View file @
e02e14c2
...
@@ -11,8 +11,14 @@
...
@@ -11,8 +11,14 @@
返回
返回
</el-button>
</el-button>
<div
class=
"w-auto flex items-center gap-2"
>
<div
class=
"w-auto flex items-center gap-2"
>
<el-input
v-model=
"searchParams.title"
placeholder=
"输入关键词搜索"
class=
"w-400px"
size=
"default"
<el-input
@
keyup
.
enter=
"handleSearch"
clearable
/>
v-model=
"searchParams.title"
placeholder=
"输入关键词搜索"
class=
"w-400px"
size=
"default"
@
keyup
.
enter=
"handleSearch"
clearable
/>
<el-button
type=
"primary"
@
click=
"handleSearch"
>
搜索
</el-button>
<el-button
type=
"primary"
@
click=
"handleSearch"
>
搜索
</el-button>
</div>
</div>
...
@@ -22,7 +28,9 @@
...
@@ -22,7 +28,9 @@
<!-- 一级分类 -->
<!-- 一级分类 -->
<div
class=
"flex items-center justify-between border-b border-gray-200 p-4"
>
<div
class=
"flex items-center justify-between border-b border-gray-200 p-4"
>
<div
class=
"flex items-center gap-2"
>
<div
class=
"flex items-center gap-2"
>
<span
v-if=
"columnTitle"
class=
"text-gray-600 text-base"
>
当前栏目:
{{
columnTitle
}}
</span>
<span
v-if=
"columnTitle"
class=
"text-gray-600 text-base"
>
当前栏目:
{{
columnTitle
}}
</span
>
<!--
<template
v-else
>
<!--
<template
v-else
>
<span
class=
"text-gray-600 text-14px"
>
分类:
</span>
<span
class=
"text-gray-600 text-14px"
>
分类:
</span>
...
@@ -44,21 +52,33 @@
...
@@ -44,21 +52,33 @@
</div>
</div>
<div
class=
"text-gray-500 text-14px"
>
<div
class=
"text-gray-500 text-14px"
>
<el-radio-group
size=
"default"
v-model=
"searchParams.sortLogic"
@
change=
"changeSort"
>
<el-radio-group
size=
"default"
v-model=
"searchParams.sortLogic"
@
change=
"changeSort"
>
<el-radio-button
v-for=
"sort in sortOptions"
:key=
"sort.value"
:label=
"sort.label"
:value=
"sort.value"
/>
<el-radio-button
v-for=
"sort in sortOptions"
:key=
"sort.value"
:label=
"sort.label"
:value=
"sort.value"
/>
</el-radio-group>
</el-radio-group>
</div>
</div>
</div>
</div>
<div
v-show=
"list.length"
>
<div
v-show=
"list.length"
>
<div
class=
"space-y-4"
>
<div
class=
"space-y-4"
>
<div
v-for=
"item in list"
:key=
"item.articleId"
<div
v-for=
"item in list"
:key=
"item.articleId"
class=
"flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
class=
"flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
@
click=
"handleClick(item)"
>
@
click=
"handleClick(item)"
>
<!-- 封面图 -->
<!-- 封面图 -->
<div
v-if=
"item.faceUrl"
<div
class=
"flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"
>
v-if=
"item.faceUrl"
class=
"flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"
>
<img
:src=
"item.faceUrl"
class=
"w-full h-full object-cover"
/>
<img
:src=
"item.faceUrl"
class=
"w-full h-full object-cover"
/>
<div
class=
"absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded"
>
<div
class=
"absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded"
>
{{ item.videoDuration }}
{{ item.videoDuration }}
</div>
</div>
</div>
</div>
...
@@ -121,13 +141,20 @@
...
@@ -121,13 +141,20 @@
<!-- 右侧:分页器 -->
<!-- 右侧:分页器 -->
<div
class=
"right"
>
<div
class=
"right"
>
<div
class=
"pr-4"
>
<div
class=
"pr-4"
>
<el-pagination
v-model:current-page=
"searchParams.current"
v-model:page-size=
"searchParams.size"
<el-pagination
:page-sizes=
"[5, 20, 1]"
layout=
"prev, pager, next, jumper, total"
:total=
"total"
v-model:current-page=
"searchParams.current"
class=
"custom-pagination"
@
current-change=
"
v-model:page-size=
"searchParams.size"
:page-sizes=
"[5, 20, 1]"
layout=
"prev, pager, next, jumper, total"
:total=
"total"
class=
"custom-pagination"
@
current-change=
"
(e) => {
(e) => {
;
(handleBackTop(), goToPage(e))
;(handleBackTop(), goToPage(e))
}
}
"
@
size-change=
"changePageSize"
/>
"
@
size-change=
"changePageSize"
/>
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -158,8 +185,8 @@ const { ScrollTopComp, handleBackTop } = useScrollTop(searchPageRef)
...
@@ -158,8 +185,8 @@ const { ScrollTopComp, handleBackTop } = useScrollTop(searchPageRef)
const
columnTitle
=
route
.
query
.
columnTitle
||
''
const
columnTitle
=
route
.
query
.
columnTitle
||
''
const
sortOptions
=
[
const
sortOptions
=
[
{
label
:
'最热'
,
value
:
0
},
{
label
:
'最新'
,
value
:
1
},
{
label
:
'最新'
,
value
:
1
},
{
label
:
'最热'
,
value
:
0
},
]
]
const
{
total
,
goToPage
,
changePageSize
,
refresh
,
searchParams
,
list
}
=
usePageSearch
(
const
{
total
,
goToPage
,
changePageSize
,
refresh
,
searchParams
,
list
}
=
usePageSearch
(
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment