140 lines
4.0 KiB
Vue
140 lines
4.0 KiB
Vue
<template>
|
||
<d-input
|
||
:key="$route.path + $route.query?.val" id="golbalSearch" class="g-header-search"
|
||
v-model.trim="softwareName" placeholder="请输入软件名称搜索" @clear="handleClear" clearable >
|
||
<template #prepend>
|
||
<d-dropdown>
|
||
<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>
|
||
<d-icon @click="search" name="search" style="font-size: inherit;" />
|
||
</template>
|
||
</d-input>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, watch, onUnmounted, reactive } from 'vue';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
import { useGlobalInfoStore } from '@/stores/Global';
|
||
import microApp from '@micro-zoe/micro-app';
|
||
|
||
const emit = defineEmits('updateSearch');
|
||
const globalInfo = useGlobalInfoStore();
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
const softwareName = ref('');
|
||
const searchType = ref('软件');
|
||
|
||
const position = ref(['right-start', 'right-end']);
|
||
// const industryOptions = ref(['通信', '军工', '金融', '能源']);
|
||
|
||
const placeholder = ref('「开搜」：一搜即达，开发者的AI搜索');
|
||
const industryList = globalInfo.industryList;
|
||
const onCategoryChange = (event) => {
|
||
searchType.value = event?.name || '软件';
|
||
globalInfo.updateHeaderSearch({ softwareName: softwareName.value, searchType: event.value });
|
||
}
|
||
|
||
const search = () => {
|
||
window.open(`${import.meta.env.VITE_BASE_URL}repoList?softwareName=${softwareName.value ? softwareName.value : ''}&searchType=${getIndustryValue(searchType.value)}`, '_blank')
|
||
};
|
||
|
||
const handleClear = () => {
|
||
globalInfo.updateHeaderSearch({ softwareName: ''.value, searchType: searchType.value });
|
||
};
|
||
|
||
|
||
const getIndustryValue = (name) => {
|
||
const industry = industryList.find(item => item.name === name);
|
||
return industry ? industry.value : ''; // 如果找不到，返回默认值
|
||
};
|
||
|
||
const handleDataChange = ({ name, type, data }) => {
|
||
if (name === 'micoro-app-homeweb-app') {
|
||
if (type === 'keyword-change') {
|
||
softwareName.value = data;
|
||
}
|
||
if (type === 'route-change') {
|
||
//
|
||
}
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
globalInfo.updateHeaderSearch({ softwareName: route.query.softwareName ? route.query.softwareName : '', searchType: route.query.searchType || '软件' });
|
||
// softwareName.value = route.query.softwareName;
|
||
// searchType.value = route.query.searchType || '软件';
|
||
});
|
||
onUnmounted(() => {
|
||
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import 'devui-theme/styles-var/devui-var.scss';
|
||
|
||
.g-header-search {
|
||
border: 1px solid #5E7CE0;
|
||
background: #FFF;
|
||
//box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.05) inset;
|
||
&-icon {
|
||
opacity: .5;
|
||
transition: opacity .5s ease;
|
||
}
|
||
.devui-input--focus {
|
||
.g-header-search-icon {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
::v-deep .devui-input-slot__prepend{
|
||
width: 140px;
|
||
}
|
||
::v-deep .devui-input-slot__append{
|
||
width: 40px;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
</style>
|