Situation-Awareness-Platform-Frontend/src/views/Jyh/Home/index.vue

<template>
  <div class="home-container">
    <div class="home-content">
      <div class="home-title">
        <img src="@/assets/imgs/home/home-title-logo-2x.webp" alt="logo" />
        <h1>可信开源代码库</h1>
      </div>
      <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"></d-select>
          </template>
          <template #append>
            <div class="advanced-search" @click="openAdvancedSearch">
                <span>高级筛选</span>
                <d-badge :count="5" :bg-color="'#f0f0f0'"></d-badge>
                <d-icon :rotate="rotate" name="icon-chevron-down-2"></d-icon>
              </div>
          </template>
        </d-input>
        <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 ref="origin" icon="share" class="batch-btn">批量校验</d-button>
      <div class="home-information">
        <div class="info-title">
          <div class="sub-title">
            <img src="@/assets/imgs/home/informIcon@2x.png">
            <span>信息公示</span>
          </div>
          <a class="devui-link">更多 ></a>
        </div>
        <div class="info-content">
          <d-timeline :direction="'vertical'" :time-position="'right'" :position="'right'">
            <d-timeline-item style="cursor: pointer;" v-for="(item, index) in infoList" :key="index"
            :dot-color="item.dotColor" :line-color="'var(--devui-form-control-line-hover)'">
              <template #default>
                <div style="display: flex; justify-content: space-between;">
                  <div>{{ item.text }}</div>
                  <div style="display: flex;  align-items: center; gap: 8px;">
                    <d-icon name="icon-time"></d-icon>
                    {{ item.time }}
                  </div>
                </div>
              </template>
              <template #time>
                <span></span>
              </template>
            </d-timeline-item>
          </d-timeline>
        </div>
      </div>
    </div>
  </div>
</template>

<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: 7 , crossAxis: -10 });
const isOpen = ref(false);
const rotate = ref(0);
const infoList = ref([
  {
    text: '公告1',
    time: '2021-10-1',
    dotColor: 'var(--devui-info)',
  },
  {
    text: '公告2',
    time: '2021-10-2',
    dotColor: 'var(--devui-info)',
  },
  {
    text: '公告3',
    time: '2021-10-3',
  },
  {
    text: '公告4',
    time: '2021-10-3',
  },
])

const homeSearch = ref(null);
const dropdownWidth = ref(0);


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.85;
  }
};

const search = () => {
  router.push({ name: 'Search', query: { val: searchStr.value || '', type: route?.query?.type || 'License' }});
};

let resizeObserver: ResizeObserver | null = null;

onMounted(() => {
  resizeObserver = new ResizeObserver(updateDropdownWidth);
  if (homeSearch.value) {
    resizeObserver.observe(homeSearch.value);
  }
  
  updateDropdownWidth();
});

onBeforeUnmount(() => {
  if (resizeObserver && homeSearch.value) {
    resizeObserver.unobserve(homeSearch.value);
  }
});

</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: 50%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-items: center;
    gap: 20px;

    .home-title {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      h1 {
        font-size: xx-large;
        font-weight: bold;
      }

      img {
        width: 50px;
        filter: brightness(0);
      }
    }

    .home-search {
      width: 100%;
      height: 40px;
      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;
      background-color: #f0f0f0;
      border-color: $devui-aide-text;
    }

    .home-information {
      width: 100%;
      background-color: #f0f0f0;
      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, .08));
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}


</style>