cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: AI建议 & 许可证页面

Browse Source
This commit is contained in:
@user8949
2025-03-14 20:03:14 +08:00
parent 154a03dcf0
commit 03db951292
14 changed files with 786 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/views/Jyh/Home/index.vue
View File

@@ -5,79 +5,78 @@
<img src="@/assets/imgs/home/home-title-logo-2x.webp" alt="logo" />
<h1>可信开源代码库</h1>
</div>
<div class="home-search" ref="homeSearch">
<d-input>
<div class="home-search" ref="homeSearch" :class="{ 'glow-border': inputGlow }">
<d-input ref="searchInput" placeholder="请输入搜索关键字" @focus="inputFocus" @blur="inputBlur"
v-model="searchStr">
<template #prepend>
<d-select v-model="searchType" :options="searchOptions" :offset="offset"></d-select>
<d-select v-model="searchType" :options="searchOptions"></d-select>
</template>
<template #append>
<d-dropdown :style="{ width: dropdownWidth + 'px' }" :offset="offset" :close-scope="'blank'"
:position="['bottom-start']" >
<div class="advanced-search">
<div class="advanced-search" @click="openAdvancedSearch">
<span>高级筛选</span>
<d-badge :count="5" :bg-color="'#f0f0f0'"></d-badge>
<d-icon name="icon-chevron-down-2"></d-icon>
<d-icon :rotate="rotate" name="icon-chevron-down-2"></d-icon>
</div>
<template #menu>
<div class="advanced-search-menu">
<div style="padding: 12PX;">
<span>高级筛选</span>
<d-form style="margin-top: 20px" layout="vertical">
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="name" label="license">
<d-input placeholder="请输入license"/>
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="select" label="软件/组件名称">
<d-input placeholder="请输入软件/组件名称"/>
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="multiSelect" label="license强弱" help-tips="license强弱说明">
<d-input />
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="executionDay" label="软件版本">
<d-input />
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="radio" label="依赖软件">
<d-input />
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="switch" label="编程语言">
<d-input />
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="date" label="版本发布日期">
<d-input />
</d-form-item>
</d-col>
</d-row>
<gc-form-operation style="display: flex; justify-content: center; gap: 8px;">
<d-button variant="solid">搜索</d-button>
<d-button>取消</d-button>
</gc-form-operation>
</d-form>
</div>
</div>
</template>
</d-dropdown>
</template>
</d-input>
<d-button color="primary" variant="solid">搜索</d-button>
<d-dropdown-menu v-model="isOpen" :origin="searchInput?.$el" close-scope="'blank'"
:offset="offset">
<div class="advanced-search-menu" :style="{ width: dropdownWidth + 'px'}">
<div style="padding: 12PX;">
<span>高级筛选</span>
<d-form style="margin-top: 20px" layout="vertical">
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="name" label="license">
<d-input placeholder="请输入license"/>
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="select" label="软件/组件名称">
<d-input placeholder="请输入软件/组件名称"/>
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="multiSelect" label="license强弱" help-tips="license强弱说明">
<d-input />
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="executionDay" label="软件版本">
<d-input />
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="radio" label="依赖软件">
<d-input />
</d-form-item>
</d-col>
<d-col :span="8">
<d-form-item field="switch" label="编程语言">
<d-input />
</d-form-item>
</d-col>
</d-row>
<d-row :gutter="16">
<d-col :span="8">
<d-form-item field="date" label="版本发布日期">
<d-input />
</d-form-item>
</d-col>
</d-row>
<gc-form-operation style="display: flex; justify-content: center; gap: 8px;">
<d-button variant="solid">搜索</d-button>
<d-button>取消</d-button>
</gc-form-operation>
</d-form>
</div>
</div>
</d-dropdown-menu>
<d-button color="primary" variant="solid" @click="search">搜索</d-button>
</div>
<d-button icon="share" class="batch-btn">批量校验</d-button>
<d-button ref="origin" icon="share" class="batch-btn">批量校验</d-button>
<div class="home-information">
<div class="info-title">
<div class="sub-title">
@@ -112,10 +111,17 @@
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const inputGlow = ref(false);
const searchStr = ref('');
const searchType = ref('组件/软件');
const searchOptions = ref(['组件/软件']);
const offset = ref({ mainAxis: 12, crossAxis: -200 });
const offset = ref({ mainAxis: 7 , crossAxis: -10 });
const isOpen = ref(false);
const rotate = ref(0);
const infoList = ref([
{
text: '公告1',
@@ -137,17 +143,35 @@ const infoList = ref([
},
])
const homeSearch: any = ref(null);
const homeSearch = ref(null);
const dropdownWidth = ref(0);
const isOpen = ref(true)
const searchInput = ref(null);
const openAdvancedSearch = () => {
isOpen.value = !isOpen.value;
rotate.value = isOpen.value ? 180 : 0;
inputGlow.value = isOpen.value;
};
const inputFocus = () => {
inputGlow.value = true;
};
const inputBlur = () => {
inputGlow.value = false;
}
const updateDropdownWidth = () => {
if (homeSearch.value) {
dropdownWidth.value = homeSearch.value.offsetWidth * 0.8;
offset.value.crossAxis = -homeSearch.value.offsetWidth * 0.3;
dropdownWidth.value = homeSearch.value.offsetWidth * 0.85;
}
};
const search = () => {
router.push({ name: 'Search', query: { val: searchStr.value || '', type: route?.query?.type || 'License' }});
};
let resizeObserver: ResizeObserver | null = null;
onMounted(() => {
@@ -179,19 +203,6 @@ onBeforeUnmount(() => {
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1)),url('@/assets/imgs/home/background@2x.png');
background-size: cover;
background-position: center;
z-index: -1;
}
.home-content {
font-size: 14px;
@@ -228,6 +239,7 @@ onBeforeUnmount(() => {
justify-content: space-between;
align-items: center;
padding: 12px;
box-shadow: var(--devui-shadow, 0 2px 12px 0);
input {
border: none;
outline: none;
@@ -241,6 +253,17 @@ onBeforeUnmount(() => {
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 {
@@ -308,5 +331,12 @@ onBeforeUnmount(() => {
}
}
.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;
}
</style>