474 lines
11 KiB
Vue
474 lines
11 KiB
Vue
<template>
|
||
<div class="home-container">
|
||
<div class="home-content">
|
||
<div class="home-title">
|
||
<img src="@/assets/imgs/jyh/ai/aiLogo2.png" alt="logo" />
|
||
<h1>TcodeAI助手</h1>
|
||
</div>
|
||
<div class="home-detail">
|
||
<div class="home-detail-1">Hi，欢迎使用TcodeAI助手</div>
|
||
<div class="home-detail-2">TcodeAI助手 可以辅助研发人员进行软件查询、批量校验、查看软件详情等。</div>
|
||
<div class="home-detail-2">作为AI模型，TcodeAI助手 提供的答案可能不总是确定或准确的，但您的反馈可以帮助 TcodeAI助手 做得更好。</div>
|
||
</div>
|
||
<!--swiper-->
|
||
<div style="width: 100%;">
|
||
<SwiperComponent />
|
||
</div>
|
||
<!--猜你想问-->
|
||
<div style="width: 100%;margin-top: -20px">
|
||
<GuessYouWantToAsk />
|
||
</div>
|
||
<!--AI大模型输入框-->
|
||
<div style="width: 100%;">
|
||
<AIinout />
|
||
</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';
|
||
import SwiperComponent from './SwiperComponent.vue';
|
||
import GuessYouWantToAsk from './GuessYouWantToAsk.vue';
|
||
import AIinout from './AIinout.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 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'
|
||
},
|
||
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) => {
|
||
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();
|
||
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: 80%;
|
||
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 {
|
||
color: #191919;
|
||
font-family: Huawei Sans;
|
||
font-weight: bold;
|
||
font-size: 48px;
|
||
line-height: 48px;
|
||
letter-spacing: 0px;
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
img {
|
||
width: 90px;
|
||
//filter: brightness(0);
|
||
}
|
||
}
|
||
|
||
.home-search {
|
||
width: 574px;
|
||
height: 46px;
|
||
border: 1px solid #dfe1e5;
|
||
box-shadow: 0px 2px 8px 0px rgba(60, 64, 67, 0.25);
|
||
border-radius: 24px;
|
||
|
||
//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%;
|
||
}
|
||
|
||
.home-detail {
|
||
.home-detail-1 {
|
||
color: #191919;
|
||
font-family: HarmonyOS Sans SC;
|
||
font-weight: medium;
|
||
font-size: 24px;
|
||
line-height: 32px;
|
||
letter-spacing: 0px;
|
||
text-align: center;
|
||
margin-bottom: 32px;
|
||
}
|
||
.home-detail-2 {
|
||
color: #777777;
|
||
font-family: HarmonyOS Sans SC;
|
||
font-weight: regular;
|
||
font-size: 14px;
|
||
line-height: 22px;
|
||
letter-spacing: 0px;
|
||
text-align: center;
|
||
|
||
}
|
||
}
|
||
</style>
|