514 lines
14 KiB
Vue
514 lines
14 KiB
Vue
<template>
|
||
<div class="home-container">
|
||
<div class="home-content">
|
||
<div class="home-title">
|
||
<img src="@/assets/imgs/logo.png" alt="logo" />
|
||
<h1>可信开源代码库</h1>
|
||
</div>
|
||
<div class="home-search" ref="homeSearch" :class="{ 'glow-border': inputGlow }">
|
||
<d-input
|
||
ref="searchInput"
|
||
placeholder="请输入搜索关键字"
|
||
@focus="inputFocus"
|
||
@blur="inputBlur"
|
||
:autocomplete="'off'"
|
||
v-model="searchStr"
|
||
>
|
||
<template #prepend>
|
||
<d-dropdown @toggle="onCateToggle($event)">
|
||
<div class="flex items-center gap-1 cursor-pointer">
|
||
{{ searchType }}
|
||
<d-icon :rotate="cateRotate" name="icon-chevron-down-2"></d-icon>
|
||
</div>
|
||
<template #menu>
|
||
<ul class="list-menu">
|
||
<li class="menu-item" @click="onCategoryChange('软件')">软件</li>
|
||
<d-dropdown :position="position" :offset="0">
|
||
<li class="menu-item">
|
||
行业
|
||
<i class="icon icon-chevron-right"></i>
|
||
</li>
|
||
<template #menu>
|
||
<ul class="list-menu">
|
||
<li class="menu-item" v-for="option in industryList" @click="onCategoryChange(option)">
|
||
{{ option.name }}
|
||
</li>
|
||
</ul>
|
||
</template>
|
||
</d-dropdown>
|
||
</ul>
|
||
</template>
|
||
</d-dropdown>
|
||
</template>
|
||
<template #append>
|
||
<div id="advancedSearch close-isopen" class="advanced-search" @click="openAdvancedSearch">
|
||
<span class="close-isopen">高级筛选</span>
|
||
<d-badge :count="6" :bg-color="'#f0f0f0'" class="close-isopen"></d-badge>
|
||
<d-icon class="close-isopen" :rotate="rotate" name="icon-chevron-down-2"></d-icon>
|
||
</div>
|
||
</template>
|
||
</d-input>
|
||
<d-dropdown-menu v-model="isOpen" :origin="searchInput?.$el" :offset="offset" :clickOutside="closeOutside">
|
||
<div class="advanced-search-menu" :style="{ width: dropdownWidth + 'px' }">
|
||
<AdvanceSearch @submit="submit($event)" @cancel="isOpen = false" class="p-20" :layout="'vertical'">
|
||
<template #title>
|
||
<span class="title">高级筛选</span>
|
||
</template>
|
||
</AdvanceSearch>
|
||
</div>
|
||
</d-dropdown-menu>
|
||
<d-button color="primary" variant="solid" @click="search">搜索</d-button>
|
||
</div>
|
||
<d-button v-if="isLogin" @click="check" ref="origin" icon="share" class="batch-btn">批量校验</d-button>
|
||
<div class="home-information" v-if="infoList.length > 0">
|
||
<div class="info-title">
|
||
<div class="sub-title">
|
||
<img src="@/assets/imgs/home/informIcon@2x.png" />
|
||
<span>预警公告</span>
|
||
</div>
|
||
|
||
<!-- <a v-if="accountInfo.access_token" class="devui-link" @click="checkMore"
|
||
>更多 <i class="icon icon-chevron-right-2"></i>
|
||
</a>
|
||
<span v-else class="text-blue-500">查看更多，请先登录</span> -->
|
||
</div>
|
||
<div class="info-content">
|
||
<d-timeline :direction="'vertical'" :time-position="'right'" :position="'right'">
|
||
<d-timeline-item
|
||
v-for="(item, index) in infoList"
|
||
:key="index"
|
||
:dot-color="item.dotColor"
|
||
:line-color="'var(--devui-form-control-line-hover)'"
|
||
>
|
||
<template #default>
|
||
<div class="flex items-center justify-between w-full">
|
||
<div
|
||
class="cursor-pointer notice-content flex gap-2 items-center"
|
||
@click="openWarningDetail(item, index)"
|
||
>
|
||
<span>{{ item.subject }}</span>
|
||
<d-tag
|
||
v-if="item.importance && tagMap[item.importance]"
|
||
:color="tagMap[item.importance].color"
|
||
size="sm"
|
||
>{{ tagMap[item.importance].text }}</d-tag
|
||
>
|
||
</div>
|
||
<div class="time-container">
|
||
<d-icon name="icon-time"></d-icon>
|
||
{{ item.publishTime }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template #time>
|
||
<span></span>
|
||
</template>
|
||
</d-timeline-item>
|
||
</d-timeline>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<d-modal class="warning-modal" v-model="warningModalVisable" title="" style="width: 600px">
|
||
<EarlyWarningDetail :warningData="currentWarning" :type="'user'"></EarlyWarningDetail>
|
||
</d-modal>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
import { useAccount } from '@/utils/hooks/useAccount';
|
||
import AdvanceSearch from '@/components/AdvanceSearch/index.vue';
|
||
import { getHomeNoticeList } from '@/api/jyh';
|
||
import EarlyWarningDetail from '@/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue';
|
||
import { useGlobalInfoStore } from '@/stores/Global';
|
||
const { updateHeaderSearch } = useGlobalInfoStore();
|
||
const { accountInfo } = useAccount();
|
||
import { useDiscussGetUserInfo } from '@/api/discussion/hook';
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
const inputGlow = ref(false);
|
||
const searchStr = ref('');
|
||
const position = ref(['right-start', 'right-end']);
|
||
const industryOptions = ref(['通信', '军工', '金融', '能源']);
|
||
const searchType = ref('软件');
|
||
const searchOptions = ref(['软件']);
|
||
const offset = ref({ mainAxis: 7, crossAxis: -10 });
|
||
const isKeepOpen = ref(true);
|
||
const isOpen = ref(false);
|
||
const cateRotate = ref(0);
|
||
const infoList = ref([]);
|
||
const warningModalVisable = ref(false);
|
||
const currentWarning = ref();
|
||
|
||
const { isLogin } = useDiscussGetUserInfo();
|
||
const homeSearch = ref(null);
|
||
const dropdownWidth = ref(0);
|
||
const tagMap = {
|
||
critical: {
|
||
text: '致命',
|
||
color: '#c7000b'
|
||
},
|
||
high: {
|
||
text: '高',
|
||
color: '#f66f6a'
|
||
},
|
||
medium: {
|
||
text: '中',
|
||
color: '#fac20a'
|
||
},
|
||
low: {
|
||
text: '低',
|
||
color: '#5e7ce0'
|
||
}
|
||
};
|
||
|
||
const rotate = computed(() => {
|
||
return isOpen.value ? 180 : 0;
|
||
});
|
||
|
||
const searchInput = ref(null);
|
||
const openAdvancedSearch = () => {
|
||
isOpen.value = !isOpen.value;
|
||
inputGlow.value = isOpen.value;
|
||
};
|
||
|
||
const check = () => {
|
||
router.push({
|
||
name: 'Search',
|
||
query: { tab: 'BatchVerify' } // 通过查询参数指定 Tab
|
||
});
|
||
};
|
||
|
||
const closeOutside = () => {
|
||
return false;
|
||
};
|
||
|
||
const submit = (formData) => {
|
||
debugger;
|
||
isOpen.value = false;
|
||
router.push({
|
||
name: 'Search',
|
||
query: {
|
||
softwareName: searchStr.value ? searchStr.value : '',
|
||
searchType: getIndustryValue(searchType.value),
|
||
softwareVersion: formData.softwareVersion || '',
|
||
programmingLanguage: formData.programmingLanguage || '',
|
||
interestTag: formData.interestTag || '',
|
||
industry: formData.industry || '',
|
||
licenseName: formData.licenseName || '',
|
||
dependentSoftware: formData.dependentSoftware || '',
|
||
releaseDateStart: formData.dateRange && formData.dateRange.length > 0 ? formData.dateRange[0] : '',
|
||
releaseDateEnd: formData.dateRange && formData.dateRange.length > 0 ? formData.dateRange[1] : ''
|
||
}
|
||
});
|
||
};
|
||
|
||
const inputFocus = () => {
|
||
inputGlow.value = true;
|
||
};
|
||
|
||
const inputBlur = () => {
|
||
inputGlow.value = false;
|
||
};
|
||
|
||
const updateDropdownWidth = () => {
|
||
if (homeSearch.value) {
|
||
dropdownWidth.value = homeSearch.value.offsetWidth * 0.85;
|
||
}
|
||
};
|
||
const globalInfo = useGlobalInfoStore();
|
||
const industryList = globalInfo.industryList;
|
||
const getIndustryValue = (name) => {
|
||
const industry = industryList.find((item) => item.name === name);
|
||
return industry ? industry.value : ''; // 如果找不到，返回默认值
|
||
};
|
||
|
||
const search = () => {
|
||
// updateHeaderSearch({ searchWord: searchStr.value, searchType: selectedCate.value });
|
||
router.push({
|
||
name: 'Search',
|
||
query: {
|
||
softwareName: searchStr.value ? searchStr.value : '',
|
||
searchType: getIndustryValue(searchType.value)
|
||
}
|
||
});
|
||
// window.open(`${import.meta.env.VITE_BASE_URL}repoList?softwareName=${searchStr.value ? searchStr.value : ''}&searchType=${getIndustryValue(searchType.value)}`, '_blank')
|
||
};
|
||
|
||
const onCategoryChange = (event) => {
|
||
searchType.value = event?.name || '软件';
|
||
globalInfo.updateHeaderSearch({ softwareName: softwareName.value, searchType: event.value });
|
||
};
|
||
|
||
const onCateToggle = (event) => {
|
||
cateRotate.value = event ? 180 : 0;
|
||
};
|
||
|
||
const checkMore = () => {
|
||
router.push({ name: 'PersonalCenter' });
|
||
};
|
||
|
||
const openWarningDetail = (event, index) => {
|
||
infoList.value.forEach((item, i) => {
|
||
if (i <= index) {
|
||
item.dotColor = 'var(--devui-info)';
|
||
} else {
|
||
item.dotColor = '';
|
||
}
|
||
});
|
||
|
||
warningModalVisable.value = true;
|
||
currentWarning.value = event;
|
||
};
|
||
|
||
let resizeObserver: ResizeObserver | null = null;
|
||
|
||
onMounted(() => {
|
||
resizeObserver = new ResizeObserver(updateDropdownWidth);
|
||
if (homeSearch.value) {
|
||
resizeObserver.observe(homeSearch.value);
|
||
}
|
||
|
||
updateDropdownWidth();
|
||
|
||
document.querySelector('body').onclick = (e) => {
|
||
const className = e.target.className;
|
||
if (
|
||
!className.includes('close-isopen') &&
|
||
!className.includes('devui-badge__content') &&
|
||
!className.includes('advanced-search')
|
||
) {
|
||
isOpen.value = false;
|
||
}
|
||
};
|
||
});
|
||
|
||
onBeforeUnmount(() => {
|
||
if (resizeObserver && homeSearch.value) {
|
||
resizeObserver.unobserve(homeSearch.value);
|
||
}
|
||
});
|
||
|
||
const getNoticeList = async () => {
|
||
const res: any = await getHomeNoticeList();
|
||
debugger
|
||
if (!res.error) {
|
||
infoList.value = res.data.data || [];
|
||
}
|
||
};
|
||
|
||
getNoticeList();
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import 'devui-theme/styles-var/devui-var.scss';
|
||
|
||
.home-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.home-content {
|
||
font-size: 14px;
|
||
height: 50%;
|
||
width: 50%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-self: center;
|
||
align-items: center;
|
||
gap: 20px;
|
||
|
||
.home-title {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 20px;
|
||
h1 {
|
||
font-size: xx-large;
|
||
font-weight: bold;
|
||
}
|
||
|
||
img {
|
||
width: 50px;
|
||
//filter: brightness(0);
|
||
}
|
||
}
|
||
|
||
.home-search {
|
||
width: 100%;
|
||
height: 40px;
|
||
flex-shrink: 0;
|
||
background-color: white;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px;
|
||
box-shadow: var(--devui-shadow, 0 2px 12px 0);
|
||
input {
|
||
border: none;
|
||
outline: none;
|
||
padding: 5px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.advanced-search {
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 8px;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -10px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 1px;
|
||
height: 20px;
|
||
background-color: var(--devui-form-control-line, #d7d8da);
|
||
}
|
||
}
|
||
|
||
.advanced-search-menu {
|
||
height: 300px;
|
||
padding: 12px;
|
||
background-color: white;
|
||
}
|
||
|
||
.form-operation {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
}
|
||
|
||
.batch-btn {
|
||
color: $devui-aide-text;
|
||
width: 150px;
|
||
flex-shrink: 0;
|
||
background-color: #f0f0f0;
|
||
border-color: $devui-aide-text;
|
||
}
|
||
|
||
.home-information {
|
||
width: 100%;
|
||
background-color: #f0f0f0;
|
||
overflow: auto;
|
||
margin-bottom: 20px;
|
||
border-radius: 10px;
|
||
padding: 12px;
|
||
|
||
.info-title {
|
||
img {
|
||
width: 20px;
|
||
}
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.sub-title {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
margin-bottom: 20px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
:deep(.devui-timeline-item-data-left) {
|
||
display: none;
|
||
}
|
||
|
||
:deep(.devui-timeline-item-dot) {
|
||
scale: 0.7;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.home-search {
|
||
:deep(.devui-input-slot__prepend),
|
||
:deep(.devui-input-slot__append),
|
||
:deep(.devui-input__wrapper) {
|
||
border: none;
|
||
}
|
||
|
||
:deep(.devui-select__selection--glow-style),
|
||
:deep(.devui-input--glow-style) {
|
||
box-shadow: none !important;
|
||
}
|
||
}
|
||
|
||
.glow-border {
|
||
border: 1px solid var(--devui-form-control-line, #d7d8da);
|
||
border-color: var(--devui-form-control-line-active, #5e7ce0) !important;
|
||
box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, 0.08));
|
||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.menu-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
padding: 4px;
|
||
cursor: pointer;
|
||
&:hover {
|
||
background-color: var(--devui-list-item-hover-bg, #f2f5fc);
|
||
color: var(--devui-list-item-hover-text, #526ecc);
|
||
}
|
||
}
|
||
|
||
.list-menu {
|
||
padding: 8px;
|
||
margin: 0;
|
||
width: 100px;
|
||
}
|
||
|
||
.title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.notice-content {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
margin-right: 8px;
|
||
|
||
span {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.time-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
width: 140px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
:deep(.devui-timeline-item-data-right) {
|
||
width: 80%;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
.warning-modal {
|
||
.devui-modal__body {
|
||
padding: 0px !important;
|
||
}
|
||
}
|
||
</style>
|