可信代码库-可信开源代码库AI助手首页开发完成
This commit is contained in:
付民康
473
src/views/Jyh/AI/Home/indexOld.vue
Normal file
473
src/views/Jyh/AI/Home/indexOld.vue
Normal file
@@ -0,0 +1,473 @@
|
||||
<template>
|
||||
<div class="home-container">
|
||||
<div class="home-content">
|
||||
<div class="home-title">
|
||||
<img src="@/assets/imgs/jyh/ai/aiLogo2.png" alt="logo" />
|
||||
<h1>可信开源代码库AI助手</h1>
|
||||
</div>
|
||||
<div class="home-detail">
|
||||
<div class="home-detail-1">Hi，欢迎使用可信开源代码库AI助手</div>
|
||||
<div class="home-detail-2">可信开源代码库AI助手 可以辅助研发人员进行软件查询、批量校验、查看软件详情等。</div>
|
||||
<div class="home-detail-2">作为AI模型，可信开源代码库AI助手 提供的答案可能不总是确定或准确的，但您的反馈可以帮助 可信开源代码库AI助手 做得更好。</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>
|
||||
Reference in New Issue
Block a user