424 lines
11 KiB
Vue
424 lines
11 KiB
Vue
<template>
|
|
<div class="home-container">
|
|
<div class="home-content">
|
|
<div class="home-title">
|
|
<img src="@/assets/imgs/home/home-title-logo-2x.webp" 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">
|
|
{{ selectedCate }}
|
|
<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 industryOptions" @click="onCategoryChange(option)">
|
|
{{ option }}
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
</d-dropdown>
|
|
</ul>
|
|
</template>
|
|
</d-dropdown>
|
|
</template>
|
|
<template #append>
|
|
<div class="advanced-search" @click="openAdvancedSearch">
|
|
<span>高级筛选</span>
|
|
<d-badge :count="6" :bg-color="'#f0f0f0'"></d-badge>
|
|
<d-icon :rotate="rotate" name="icon-chevron-down-2"></d-icon>
|
|
</div>
|
|
</template>
|
|
</d-input>
|
|
<d-dropdown-menu v-model="isOpen" :origin="searchInput?.$el" close-scope="'blank'"
|
|
: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 @click="check" ref="origin" icon="share" class="batch-btn">批量校验</d-button>
|
|
<div class="home-information">
|
|
<div class="info-title">
|
|
<div class="sub-title">
|
|
<img src="@/assets/imgs/home/informIcon@2x.png">
|
|
<span>信息公示</span>
|
|
</div>
|
|
<a class="devui-link" @click="checkMore">更多 ></a>
|
|
</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 :color="tagMap[item.importance]" size="sm">{{ item.importance }}</d-tag>
|
|
</div>
|
|
<div class="time-container">
|
|
<d-icon name="icon-time"></d-icon>
|
|
{{ item.pulishTime }}
|
|
</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 } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import AdvanceSearch from '@/components/AdvanceSearch/index.vue';
|
|
import { getHomeNoticeList } from '@/api/jyh'
|
|
import EarlyWarningDetail from '@/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const inputGlow = ref(false);
|
|
const searchStr = ref('');
|
|
const position = ref(['right-start', 'right-end']);
|
|
const industryOptions = ref(['通信', '军工', '金融', '能源'])
|
|
const offset = ref({ mainAxis: 7 , crossAxis: -10 });
|
|
const isOpen = ref(false);
|
|
const rotate = ref(0);
|
|
const cateRotate = ref(0);
|
|
const infoList = ref([])
|
|
const warningModalVisable = ref(false);
|
|
const currentWarning = ref();
|
|
|
|
const homeSearch = ref(null);
|
|
const dropdownWidth = ref(0);
|
|
const selectedCate = ref('组件/软件');
|
|
const tagMap = {
|
|
'高': '#f66f6a',
|
|
'中': '#fac20a',
|
|
'低': '#5e7ce0'
|
|
}
|
|
|
|
const searchInput = ref(null);
|
|
const openAdvancedSearch = () => {
|
|
isOpen.value = !isOpen.value;
|
|
rotate.value = isOpen.value ? 180 : 0;
|
|
inputGlow.value = isOpen.value;
|
|
};
|
|
|
|
const check = () => {
|
|
router.push({
|
|
name: 'Search',
|
|
query: { tab: 'BatchVerify' }, // 通过查询参数指定 Tab
|
|
});
|
|
}
|
|
|
|
const closeOutside = () => {
|
|
return false
|
|
}
|
|
|
|
const submit = (formData) => {
|
|
isOpen.value = false;
|
|
router.push({ name: 'Search', query: { searchWord: searchStr, ...formData, searchType: selectedCate.value}});
|
|
};
|
|
|
|
const inputFocus = () => {
|
|
inputGlow.value = true;
|
|
};
|
|
|
|
const inputBlur = () => {
|
|
inputGlow.value = false;
|
|
}
|
|
|
|
const updateDropdownWidth = () => {
|
|
if (homeSearch.value) {
|
|
dropdownWidth.value = homeSearch.value.offsetWidth * 0.85;
|
|
}
|
|
};
|
|
|
|
const search = () => {
|
|
router.push({ name: 'Search', query: { searchWord: searchStr.value, searchType: selectedCate.value}});
|
|
};
|
|
|
|
const onCategoryChange = (cate) => {
|
|
selectedCate.value = cate;
|
|
}
|
|
|
|
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();
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
if (resizeObserver && homeSearch.value) {
|
|
resizeObserver.unobserve(homeSearch.value);
|
|
}
|
|
});
|
|
|
|
const getNoticeList = async() => {
|
|
const res:any = await getHomeNoticeList();
|
|
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;
|
|
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;
|
|
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;
|
|
background-color: #f0f0f0;
|
|
border-color: $devui-aide-text;
|
|
}
|
|
|
|
.home-information {
|
|
width: 100%;
|
|
background-color: #f0f0f0;
|
|
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, .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: 120px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
:deep(.devui-timeline-item-data-right) {
|
|
width: 80%;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.warning-modal {
|
|
.devui-modal__body {
|
|
padding: 0px !important;
|
|
}
|
|
}
|
|
</style> |