Situation-Awareness-Platform-Frontend/src/components/Header/Search.vue

<template>
  <d-input
    @keyup.enter="search"
    :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>