搜索结果列表页面开发
This commit is contained in:
付民康
98
src/views/Topic/components/intro.vue
Normal file
98
src/views/Topic/components/intro.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
|
||||
const { formatTime } = useTimeFormat();
|
||||
const router = useRouter();
|
||||
|
||||
defineProps<{
|
||||
topicInfo: any;
|
||||
validLinks: any[];
|
||||
}>();
|
||||
|
||||
function triggerLink(link: any) {
|
||||
if (link.linkName) router.push({ name: link.linkName, params: link.params });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="topic-info">
|
||||
<div class="topic-profile">
|
||||
<div class="flex items-center">
|
||||
<span class="text-G900 label">开发商</span>
|
||||
<span class="text-G900 font-medium ml-3">{{topicInfo?.developer || '-'}}</span>
|
||||
</div>
|
||||
<div class="flex items-center mt-1">
|
||||
<span class="text-G900 label">发布时间</span>
|
||||
<span class="text-G900 font-medium ml-3">{{ formatTime(topicInfo?.released_time, 'YYYY-MM-DD') }}</span>
|
||||
</div>
|
||||
<div class="flex items-center mt-4">
|
||||
<div class="flex items-center">
|
||||
<Icon name="gt-organizations" class="mr-2"></Icon
|
||||
><span class="text-G900 font-medium"><span v-if="topicInfo?.company">@</span>{{topicInfo?.company || '-'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-1">
|
||||
<div class="flex items-center">
|
||||
<Icon name="gt-connect" class="mr-2"></Icon
|
||||
>
|
||||
<span v-if="topicInfo?.websites?.length > 0"><a v-for="(item) in topicInfo?.websites" class="text-G900 font-medium" :href="item" target="_blank" :key="item">{{item}}</a></span>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="flex items-center mt-1">
|
||||
<div class="flex items-center">
|
||||
<Icon name="gt-link" class="mr-2"></Icon
|
||||
><span class="text-G900 font-medium">Gitcode Azure 社区</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="related-topic mt-8">
|
||||
<div class="title font-medium text-G900">相关标签</div>
|
||||
<div class="mt-4 flex flex-wrap">
|
||||
<div
|
||||
v-for="(link, idx) in validLinks"
|
||||
:key="idx"
|
||||
class="text-G900 mb-2 mr-2 topic-item"
|
||||
@click="triggerLink(link)"
|
||||
:class="{ ['cursor-pointer']: link.name }"
|
||||
:title="link.name"
|
||||
>
|
||||
{{ link.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'devui-theme/styles-var/devui-var.scss';
|
||||
.topic-info {
|
||||
width: 332px;
|
||||
padding: 16px 32px 0 0;
|
||||
.topic-profile {
|
||||
.label {
|
||||
width: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.related-topic {
|
||||
.topic-item {
|
||||
background-color: var(--color-CG500);
|
||||
color: #fff;
|
||||
border-radius: 11px;
|
||||
padding: 3px 10px;
|
||||
height: 22px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
max-width: 68px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-break: break-all;
|
||||
span {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
0
src/views/Topic/components/recommend.vue
Normal file
0
src/views/Topic/components/recommend.vue
Normal file
120
src/views/Topic/components/repos.vue
Normal file
120
src/views/Topic/components/repos.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div class="page-search-repo" >
|
||||
<div v-loading="state.repoList?.length ? loading : false" >
|
||||
<DataPanel :empty="!state.repoList?.length" :loading="state.repoList?.length ? false : loading" skeleton :card="false" >
|
||||
<RepoItem v-for="(item, index) in state.repoList" :key="index" v-bind="item" @handleStar="toggleRepoStar">
|
||||
<template #right>
|
||||
<canvas height="60"></canvas>
|
||||
</template>
|
||||
</RepoItem>
|
||||
</DataPanel>
|
||||
</div>
|
||||
<div class="page-search-repo-pagination" v-show="createdTotal > pager.pageSize">
|
||||
<d-pagination
|
||||
size="md"
|
||||
:page-size-options="[10, 20, 50]"
|
||||
:show-page-selector="false"
|
||||
:can-view-total="true"
|
||||
:can-change-page-size="true"
|
||||
:max-items="5"
|
||||
:total="createdTotal"
|
||||
v-model:pageSize="pager.pageSize"
|
||||
v-model:pageIndex="pager.pageIndex"
|
||||
:max-page="500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, reactive } from 'vue';
|
||||
import RepoItem from '@/components/RepoItem/index.vue';
|
||||
import { useUserInfo } from '@/views/User/hooks/useUserInfo';
|
||||
import { dataHandler } from '@/components/RepoItem/datahandle';
|
||||
import { emitEvent } from '@/utils/eventBus';
|
||||
import { getTopicRepos, starRepo, unstarRepo } from '@/api/repo';
|
||||
const props = defineProps<{ topicId: string, orderBy: string }>();
|
||||
const pager = ref({
|
||||
pageSize: 10,
|
||||
pageIndex: 1
|
||||
});
|
||||
|
||||
const { userInfo } = useUserInfo();
|
||||
const loading = ref(false);
|
||||
const toggleRepoStar = ({ id, isStar }) => {
|
||||
if (!userInfo || !userInfo.username) {
|
||||
emitEvent('login');
|
||||
return false;
|
||||
}
|
||||
if (loading.value) return false;
|
||||
loading.value = true;
|
||||
if (isStar) {
|
||||
unstarRepo({ repoId: id })
|
||||
.then(() => {
|
||||
getTopicReposList();
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
starRepo({ repoId: id })
|
||||
.then(() => {
|
||||
getTopicReposList();
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
};
|
||||
const createdTotal = ref(0);
|
||||
const state = reactive<{
|
||||
repoList: any,
|
||||
}>({
|
||||
repoList: []
|
||||
});
|
||||
const getTopicReposList = async() => {
|
||||
loading.value = true;
|
||||
// 获取项目查询列表
|
||||
const res = await getTopicRepos({
|
||||
id: props.topicId,
|
||||
order_by: props.orderBy.split(',')[0],
|
||||
sort: props.orderBy.split(',')[1],
|
||||
page: pager.value.pageIndex,
|
||||
per_page: pager.value.pageSize
|
||||
});
|
||||
if (res.data) {
|
||||
const { total, content } = res.data.data;
|
||||
createdTotal.value = total || 0;
|
||||
state.repoList = dataHandler(content) as any;
|
||||
state.repoList.forEach((item:any, index: number) => {
|
||||
Object.assign(item, {
|
||||
title: content[index].name_with_namespace
|
||||
});
|
||||
});
|
||||
}
|
||||
loading.value = false;
|
||||
};
|
||||
watch(() => props.topicId, () => {
|
||||
getTopicReposList();
|
||||
}, { deep: true, flush: 'post' });
|
||||
watch(() => props.orderBy, () => {
|
||||
if (!props.topicId) {
|
||||
return false;
|
||||
}
|
||||
getTopicReposList();
|
||||
}, { deep: true, immediate: true, flush: 'post' });
|
||||
|
||||
watch(() => pager.value, () => {
|
||||
getTopicReposList();
|
||||
}, { deep: true, flush: 'post' });
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-search-repo {
|
||||
&-pagination {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
387
src/views/Topic/index.vue
Normal file
387
src/views/Topic/index.vue
Normal file
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<div class="page-topic flex">
|
||||
<div class="flex-shrink-0 mt-5" :key="updateKey">
|
||||
<DataPanel :empty="!topicDetail.topicName" :loading="topicDetail.topicName ? false : loading" skeleton :card="false" >
|
||||
<intro :topicInfo="topicDetail.topic_ext" :validLinks="validLinks"/>
|
||||
</DataPanel>
|
||||
</div>
|
||||
<div class="flex-auto mt-5 overflow-hidden g-card g-content-card topic-repo" :key="updateKey">
|
||||
<DataPanel :empty="!topicDetail.topicName" :loading="topicDetail.topicName ? false : loading" skeleton :card="false" >
|
||||
<div class="topic-intro">
|
||||
<div class="intro-top">
|
||||
<div class="title">
|
||||
#{{ topicDetail.topicName }}
|
||||
</div>
|
||||
<div class="desc">
|
||||
{{ topicDetail.topic_ext?.description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="intro-bottom">
|
||||
<div class="star">
|
||||
<d-button class="star-topic flex" @click.stop="toggleRepoStar(topicDetail)">
|
||||
<!-- <Icon :name="isStar ? 'gt-starred-c' : 'gt-star'" :color="isStar ? '#FFCC00' : '#fff'" /> -->
|
||||
<span class="btn-span">{{ topicDetail.isStar ? '取消Star' : 'Star' }}</span>
|
||||
</d-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DataPanel>
|
||||
<div class="repo-list">
|
||||
<div class="repo-list-title">
|
||||
<div class="repo-filters">
|
||||
<div class="repo-tabs">
|
||||
<div class="catalog flex items-center">
|
||||
<div v-for="item in typeList" :key="item.type" :class="{active:curType === item.type}" class="catalog-item py-4 flex items-center text-CG600 cursor-pointer mr-8">
|
||||
<Icon v-if="item.icon" :name="item.icon" size="14" :color="curType === item.type?'var(--color-CG900)':'var(--color-CG600)'"></Icon>
|
||||
<span>{{item.label}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="repo-filter">
|
||||
<!-- <div class="repo-filter-item">
|
||||
<d-select
|
||||
class="repo-filter-select"
|
||||
v-model="filter.lang"
|
||||
:options="langList"
|
||||
placeholder="语言"
|
||||
filter
|
||||
allow-clear
|
||||
>
|
||||
</d-select>
|
||||
</div> -->
|
||||
<div class="repo-filter-item">
|
||||
<d-select
|
||||
class="repo-filter-select last-select"
|
||||
v-model="filter.sort"
|
||||
:options="options"
|
||||
placeholder="排序"
|
||||
allow-clear
|
||||
>
|
||||
</d-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<reposList :topicId="topicDetail.topicId" :orderBy="filter.sort" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, toRef, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import reposList from '@/views/Topic/components/repos.vue';
|
||||
import intro from '@/views/Topic/components/intro.vue';
|
||||
// import { useUserLang } from '@/views/User/hooks/useUserLang';
|
||||
import { getTopicDetailByName, starTopic, unstarTopic } from '@/api/repo';
|
||||
import { useUserInfo } from '@/views/User/hooks/useUserInfo';
|
||||
import { emitEvent } from '@/utils/eventBus';
|
||||
import router from '@/router';
|
||||
// const { langList } = useUserLang('user_created');
|
||||
const route = useRoute();
|
||||
const curType = ref<'users' | 'repo' | 'group'>('repo');
|
||||
const topicDetail = ref({
|
||||
topicName: '',
|
||||
topicId: '',
|
||||
isStar: false,
|
||||
topic_ext: {}
|
||||
});
|
||||
const filter = ref({
|
||||
type: null,
|
||||
lang: null,
|
||||
sort: 'updated_at,asc'
|
||||
});
|
||||
const typeList = toRef([
|
||||
{
|
||||
id: 1,
|
||||
icon: '',
|
||||
type: 'repo',
|
||||
label: '开源项目'
|
||||
}
|
||||
// ,
|
||||
// {
|
||||
// id: 2,
|
||||
// icon: '',
|
||||
// type: 'users',
|
||||
// label: '社区博客'
|
||||
// }
|
||||
]);
|
||||
const options = ref([
|
||||
{
|
||||
name: '名称升序',
|
||||
value: 'name,asc'
|
||||
},
|
||||
{
|
||||
name: '名称降序',
|
||||
value: 'name,desc'
|
||||
},
|
||||
{
|
||||
name: '最近创建',
|
||||
value: 'created_at,asc'
|
||||
},
|
||||
{
|
||||
name: '最早创建',
|
||||
value: 'created_at,desc'
|
||||
},
|
||||
{
|
||||
name: '最近活跃',
|
||||
value: 'updated_at,asc'
|
||||
},
|
||||
{
|
||||
name: '较早活跃',
|
||||
value: 'updated_at,desc'
|
||||
}
|
||||
]);
|
||||
|
||||
const validLinks = toRef([
|
||||
{
|
||||
topic_id: '656da68597a5c33a99a51333',
|
||||
name: '人工智能'
|
||||
},
|
||||
{
|
||||
topic_id: '656da68597a5c33a99a51333',
|
||||
name: '人工智能'
|
||||
}
|
||||
]);
|
||||
const { userInfo } = useUserInfo();
|
||||
const loading = ref(false);
|
||||
const toggleRepoStar = ({ topicId, isStar }) => {
|
||||
if (!userInfo || !userInfo.username) {
|
||||
emitEvent('login');
|
||||
return false;
|
||||
}
|
||||
if (loading.value) return false;
|
||||
loading.value = true;
|
||||
if (!isStar) {
|
||||
starTopic(topicId)
|
||||
.then(() => {
|
||||
getTopicDetail();
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
unstarTopic(topicId)
|
||||
.then(() => {
|
||||
getTopicDetail();
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
};
|
||||
const getTopicDetail = async() => {
|
||||
loading.value = true;
|
||||
const res = await getTopicDetailByName(route.params?.topicName as string);
|
||||
if (res.data?.data) {
|
||||
topicDetail.value.topicId = res.data.data?.object_id || '';
|
||||
topicDetail.value.topicName = res.data.data?.name || '';
|
||||
topicDetail.value.isStar = res.data.data?.stared || false;
|
||||
topicDetail.value.topic_ext = res.data.data?.topic_ext || {};
|
||||
} else {
|
||||
router.replace('/404');
|
||||
}
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
getTopicDetail();
|
||||
|
||||
const updateKey = ref(0);
|
||||
|
||||
watch(() => route.params?.topicName, () => {
|
||||
updateKey.value += 1;
|
||||
getTopicDetail();
|
||||
}, {
|
||||
deep: true,
|
||||
flush: 'post'
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
$g-page-user-repo-border-color-second: #e6e7e8;
|
||||
$g-page-user-repo-border-radius: 4px;
|
||||
.page-topic {
|
||||
:deep(.devui-menu-vertical) {
|
||||
border-right: none;
|
||||
}
|
||||
:deep(.devui-menu-vertical .devui-menu-item-select) {
|
||||
// background-color: transparent !important;
|
||||
span {
|
||||
color: var(--color-G900);
|
||||
}
|
||||
}
|
||||
:deep(.devui-menu-item-select) {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&-border {
|
||||
border-bottom: 1px solid var(--color-G200);
|
||||
}
|
||||
.topic-repo {
|
||||
box-shadow: 0px 2px 4px 0px rgba(37,45,59,0.08);
|
||||
border-radius: 3px;
|
||||
// min-height: 500px;
|
||||
}
|
||||
.topic-intro {
|
||||
.intro-top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px 20px 0px;
|
||||
}
|
||||
.title {
|
||||
color: var(--color-B600);
|
||||
}
|
||||
.desc {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
margin: 12px 0px 16px;
|
||||
padding: 0 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.intro-bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 52px;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #F8F9FB 100%);
|
||||
}
|
||||
.star {
|
||||
.star-topic {
|
||||
background-color:var(--color-B500);
|
||||
color:#fff;
|
||||
padding: 6px 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.repo-list-title {
|
||||
padding: 0px 20px;
|
||||
}
|
||||
.repo-filters {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--color-G300);
|
||||
align-items: center;
|
||||
.repo-tabs {
|
||||
.catalog-item {
|
||||
border-bottom: 2px solid #fff;
|
||||
&:hover {
|
||||
border-bottom: 2px solid var(--color-G900);
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: var(--color-G900);
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid var(--color-G900);
|
||||
}
|
||||
}
|
||||
.repo-filter {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.repo-filter {
|
||||
// margin-top: 24px;
|
||||
&-item {
|
||||
:deep(.devui-input__wrapper) {
|
||||
border-color: $g-page-user-repo-border-color-second;
|
||||
}
|
||||
}
|
||||
&-item {
|
||||
margin-right: 0;
|
||||
&.filter-item-input {
|
||||
margin-right: 8px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
&.filter-item-selects {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid $g-page-user-repo-border-color-second;
|
||||
border-radius: $g-page-user-repo-border-radius;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
&-select {
|
||||
max-width: 100px;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
height: 14px;
|
||||
width: 1px;
|
||||
background-color: $g-page-user-repo-border-color-second;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -3px;
|
||||
z-index: 20;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&.last-select {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
:deep(.devui-select__selection) {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
:deep(.devui-select__input) {
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
// &-actions {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// margin-left: 8px;
|
||||
// }
|
||||
// &-custom-button {
|
||||
// &-text {
|
||||
// position: relative;
|
||||
// padding-left: 16px;
|
||||
// margin-left: 10px;
|
||||
// &::before {
|
||||
// content: '';
|
||||
// height: 20px;
|
||||
// width: 1px;
|
||||
// background-color: $g-page-user-repo-border-color-second;
|
||||
// display: block;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 0;
|
||||
// z-index: 20;
|
||||
// transform: translateY(-50%);
|
||||
// }
|
||||
// }
|
||||
// &:hover {
|
||||
// opacity: 0.85;
|
||||
// }
|
||||
// &:active {
|
||||
// opacity: 0.9;
|
||||
// }
|
||||
// }
|
||||
// &-title {
|
||||
// font-size: 14px;
|
||||
// font-weight: 500;
|
||||
// color: $g-page-user-repo-color-second;
|
||||
// margin-left: 20px;
|
||||
// }
|
||||
// &-content {
|
||||
// overflow: hidden;
|
||||
// .is-last {
|
||||
// :deep(.g-repo-item) {
|
||||
// border-bottom: none;
|
||||
// }
|
||||
// }
|
||||
// :deep(.g-repo-item) {
|
||||
// border-top: none;
|
||||
// border-left: none;
|
||||
// border-right: none;
|
||||
// border-radius: 0;
|
||||
// box-shadow: none;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}</style>
|
||||
Reference in New Issue
Block a user