src/views/Jyh/AI/Home/indexOld.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>