头部搜索对接开源软件列表

2025-03-20 20:51:16 +08:00
parent 2e46635146
commit 61b7acc34c
6 changed files with 188 additions and 51 deletions
--- a/src/components/AdvanceSearch/index.vue
+++ b/src/components/AdvanceSearch/index.vue
@@ -53,7 +53,13 @@
        </d-col>
        <d-col :span="8">
          <d-form-item field="industry" label="行业">
-            <d-input v-model="formData.industry" placeholder="请输入行业" />
+            <d-select
+              :options="industryList"
+              :allow-clear="true"
+              v-model="formData.industry"
+              placeholder="请选择行业"
+            ></d-select>
+<!--            <d-input v-model="formData.industry" placeholder="请输入行业" />-->
          </d-form-item>
        </d-col>
      </d-row>
@@ -70,6 +76,9 @@
 <script setup lang="ts">
 import { ref, defineEmits, defineProps, watch, onMounted } from 'vue';
 import { searchLanguageList } from '@/api/jyh';
+import { useGlobalInfoStore } from '@/stores/Global';
+const globalInfo = useGlobalInfoStore();
+const industryList = globalInfo.industryList;
 const props = defineProps({
  layout: {
    type: String,
--- a/src/components/Header/Search.vue
+++ b/src/components/Header/Search.vue
@@ -18,8 +18,8 @@
              </li>
              <template #menu>
                <ul class="list-menu">
-                  <li class="menu-item" v-for="option in industryOptions" @click="onCategoryChange(option)">
-                      {{ option }}
+                  <li class="menu-item" v-for="option in industryList" @click="onCategoryChange(option)">
+                      {{ option.name }}
                  </li>
                </ul>
              </template>
@@ -46,30 +46,32 @@ const globalInfo = useGlobalInfoStore();
 const route = useRoute();
 const router = useRouter();

-const softwareName = ref(globalInfo.headerSearch.softwareName);
-const searchType = ref(globalInfo.headerSearch.searchType);
+const softwareName = ref('');
+const searchType = ref('软件');

 const position = ref(['right-start', 'right-end']);
-const industryOptions = ref(['通信', '军工', '金融', '能源']);
+// const industryOptions = ref(['通信', '军工', '金融', '能源']);

 const placeholder = ref('「开搜」：一搜即达，开发者的AI搜索');
-
+const industryList = globalInfo.industryList;
 const onCategoryChange = (event) => {
-  searchType.value = event;
-  globalInfo.updateHeaderSearch({ softwareName: softwareName.value, searchType: searchType.value });
+  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=${searchType.value}`, '_blank')
+  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 });
 };

-watch(() => route.query?.val, (newVal) => {
-  microApp.setData('micoro-app-homeweb-app', { type: 'search', data: newVal || '' });
-});
+
+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') {
@@ -84,8 +86,8 @@ const handleDataChange = ({ name, type, data }) => {

 onMounted(() => {
  globalInfo.updateHeaderSearch({ softwareName: route.query.softwareName ?  route.query.softwareName : '', searchType: route.query.searchType || '软件' });
-  softwareName.value = route.query.softwareName;
-  searchType.value = route.query.searchType || '软件';
+  // softwareName.value = route.query.softwareName;
+  // searchType.value = route.query.searchType || '软件';
 });
 onUnmounted(() => {

--- a/src/components/TableSetting/index.vue
+++ b/src/components/TableSetting/index.vue
@@ -5,7 +5,7 @@
    <div v-if="showColumnList" ref="columnListRef" class="column-list">
      <div class="column-list-header">
        <span class="title1">展示列设置</span>
-        <a class="title2">恢复默认</a>
+        <a @click="emits('setDefult')" class="title2">恢复默认</a>
      </div>
      <div class="column-list-body">
        <d-checkbox
@@ -35,7 +35,7 @@ const props = defineProps({
 });

 // 定义 emit，用于更新 showColumnList
-const emits = defineEmits(['update:show-column-list']);
+const emits = defineEmits(['update:show-column-list','setDefult']);

 // 切换多选列表的显示
 const toggleColumnList = () => {
@@ -101,6 +101,7 @@ onUnmounted(() => {
    text-align: left;
  }
  .title2 {
+    cursor: pointer;
    color: #5E7CE0;
    font-family: 苹方-简;
    font-weight: regular;
--- a/src/stores/Global/index.ts
+++ b/src/stores/Global/index.ts
@@ -19,6 +19,18 @@ export const useGlobalInfoStore = defineStore('globalInfo', () => {
    softwareName: ''
  })

+  const industryList = ref([
+    { value: 'Finance', name: '金融' },
+    { value: 'E_Government_Electronic_Government', name: '电力' },
+    { value: 'Public_Communication_and_Information_Services', name: '电信' },
+    { value: 'petroleum', name: '石油' },
+    { value: 'transportation', name: '交通' },
+    { value: 'education', name: '教育' },
+    { value: 'medical', name: '医疗' },
+    { value: 'military', name: '军工' },
+    { value: 'aerospace', name: '航空航天' },
+  ]);
+
  const menuInfo = computed(() => {
    // 当前菜单
    return globalMenuInfo.value[menuType.value] || [];
@@ -125,6 +137,7 @@ export const useGlobalInfoStore = defineStore('globalInfo', () => {
    setShowTools,
    setNamespaceType,
    setGlobalTheme,
-    updateHeaderSearch
+    updateHeaderSearch,
+    industryList
  };
 });
--- a/src/views/Jyh/Search/Components/BatchVerify.vue
+++ b/src/views/Jyh/Search/Components/BatchVerify.vue
@@ -302,12 +302,12 @@ const gotoDetail = (row) => {
 };
 // 分页
 const changeIndex = () => {
-  getReleaseList();
+  // getReleaseList();
 };

 const changeSize = () => {
  pager.value.pageIndex = 1;
-  getReleaseList();
+  // getReleaseList();
 };

 const repoFun = (arr: any) => {
--- a/src/views/Jyh/Search/Components/OssQuery.vue
+++ b/src/views/Jyh/Search/Components/OssQuery.vue
@@ -1,9 +1,69 @@
 <template>
  <div class="secret-container">
    <div class="search-form">
-      <AdvanceSearch v-model="newFormData" class="px-20">
-        <template #operation><div></div></template>
-      </AdvanceSearch>
+      <d-form layout='horizontal' :label-align="'end'">
+        <d-row :gutter="16">
+          <d-col :span="8">
+            <d-form-item field="name" label="软件名称">
+              <d-input placeholder="请输入软件名称" v-model="newFormData.softwareName" />
+            </d-form-item>
+          </d-col>
+          <d-col :span="8">
+            <d-form-item field="version" label="软件版本">
+              <d-input placeholder="请输入软件版本" v-model="newFormData.softwareVersion" />
+            </d-form-item>
+          </d-col>
+          <d-col :span="8">
+            <d-form-item field="license" label="license">
+              <d-input placeholder="请输入license名称" v-model="newFormData.licenseName" />
+            </d-form-item>
+          </d-col>
+        </d-row>
+        <d-row :gutter="16">
+          <d-col :span="8">
+            <d-form-item field="dependency" label="依赖软件名称">
+              <d-input placeholder="请输入依赖软件名称" v-model="newFormData.dependentSoftware" />
+            </d-form-item>
+          </d-col>
+          <d-col :span="8">
+            <d-form-item field="language" label="编程语言">
+              <d-select
+                :options="languageList"
+                :allow-clear="true"
+                v-model="newFormData.programmingLanguage"
+                placeholder="请选择编程语言"
+              ></d-select>
+            </d-form-item>
+          </d-col>
+          <d-col :span="8">
+            <d-form-item field="date" label="版本发布日期">
+              <d-range-date-picker-pro
+                v-model="newFormData.dateRange"
+                style="width: 100%"
+                :placeholder="['开始日期', '结束日期']"
+              />
+            </d-form-item>
+          </d-col>
+        </d-row>
+        <d-row :gutter="16">
+          <d-col :span="8">
+            <d-form-item field="interestTag" label="兴趣标签">
+              <d-input placeholder="请输入兴趣标签" v-model="newFormData.interestTag" />
+            </d-form-item>
+          </d-col>
+          <d-col :span="8">
+            <d-form-item field="industry" label="行业">
+              <d-select
+                :key="newFormData.industry"
+                :options="industryList"
+                :allow-clear="true"
+                v-model="newFormData.industry"
+                placeholder="请选择行业"
+              ></d-select>
+            </d-form-item>
+          </d-col>
+        </d-row>
+      </d-form>
      <div class="jyh-form-operation">
        <d-button @click="getReleaseList" class="mr-2" variant="solid">搜索</d-button>
        <d-button variant="solid" color="secondary" @click="clear">清空</d-button>
@@ -11,7 +71,7 @@
      <div class="left-btn">
        <d-button v-if="isLogin" class="output-btn" icon="icon-share" variant="text">导出</d-button>
        <span v-if="isLogin" style="height: 14px" class="split"></span>
-        <TableSetting :columns="columns" :show-column-list="showColumnList" @update:show-column-list="updateShowColumnList"/>
+        <TableSetting :columns="columns" @setDefult="setDefult" :show-column-list="showColumnList" @update:show-column-list="updateShowColumnList"/>
      </div>
    </div>
    <div class="mt-3 px-20">
@@ -48,7 +108,7 @@
                <a>{{ scope.row.smStatus }}</a>
              </template>
              <template v-else-if="column.key === 'industryCategory'">
-                <d-tag type="success">{{ scope.row.industryCategory }}</d-tag>
+                <d-tag type="success">{{ getIndustryName(scope.row.industryCategory) }}</d-tag>
              </template>
              <template v-else-if="column.key === 'programmingLanguage'">
                <d-tag type="success">{{ scope.row.programmingLanguage }}</d-tag>
@@ -108,7 +168,7 @@
 import AdvanceSearch from '@/components/AdvanceSearch/index.vue'
 import SettingTitle from '@/components/Setting/SettingTitle/index.vue';
 import SettingText from '@/components/Setting/SettingText/index.vue';
-import { ref,reactive, onMounted,watch } from 'vue';
+import { ref, reactive, onMounted, watch, nextTick } from 'vue';
 import { getGroupClaList, setGroupClaStatus, deleteGroupCla } from '@/api/cla';
 import { useRouter, useRoute } from 'vue-router';
 import { GModal } from '@/components/Setting/index';
@@ -122,28 +182,29 @@ import OrgModal from './OrgModal.vue'
 import NoData from '@/components/NoData/NoData.vue';
 import { useAccountStore } from '@/stores/user';
 const { formatTime } = useTimeFormat();
-import { releasePage } from '@/api/jyh';
+import { releasePage, searchLanguageList } from '@/api/jyh';
 import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
 import { useGlobalInfoStore } from '@/stores/Global';
+
+
+const router = useRouter();
+const route = useRoute();
+
 const { namespace } = getOrgInfo();
 const userInfo = useAccountStore();
 const { isLogin } = storeToRefs(userInfo);
-
 // 定义 tableKey，用于强制刷新表格
 const tableKey = ref(0);
 const countryVisible = ref(false);
 const orgVisible = ref(false);
 const tableData = ref([]);
-const formData = ref({ title: '',type: '', useType: '',formData:'',select: '',time1:null,name:'',versionCode:'',pulishTime:'' });
-const typeOptions = reactive(['主软件', '依赖软件']);
-const riskOptions = reactive(['低', '中', '高']);
-const useTypeOptions = reactive(['软件', '文档', '文档+软件']);
-const isUseOptions = reactive(['是', '否']);
+const languageList = ref([]);
 const globalInfo = useGlobalInfoStore();
 const headerSearch = ref(globalInfo.headerSearch)
+const industryList = ref(globalInfo.industryList);
 const newFormData = ref({
  licenseName: '',
-  searchType: headerSearch.value.searchType ? headerSearch.value.searchType : 'software',
+  searchType: 'software',
  softwareName: '',
  softwareVersion: '',
  dependentSoftware: '',
@@ -153,13 +214,13 @@ const newFormData = ref({
  dateRange: ['', '']
 })

-watch(() => globalInfo.headerSearch, (newVal: any) => {
-  headerSearch.value = newVal;
-  console.log(newVal)
-  newFormData.value.searchType = newVal.searchType;
-  newFormData.value.softwareName = newVal.softwareName;
-  getReleaseList();
-}, { deep: true })
+// watch(() => globalInfo.headerSearch, (newVal: any) => {
+//   headerSearch.value = newVal;
+//   console.log(newVal)
+//   newFormData.value.searchType = newVal.searchType;
+//   newFormData.value.softwareName = newVal.softwareName;
+//   getReleaseList();
+// }, { deep: true })

 const pager = ref({
  total: 10,
@@ -177,6 +238,29 @@ const openDelete = (row: any) => {
  deletevModels.value = true;
 };

+const defultColumns = ref([
+  { key: 'softwareName', label: '软件名称', visible: true, filterable: true, sortable: false },
+  { key: 'softwareVersion', label: '软件版本', visible: true, filterable: true, sortable: false },
+  { key: 'securityScore', label: '软件评分', visible: true, filterable: false, sortable: true },
+  { key: 'licenseCount', label: 'License数量', visible: true, filterable: false, sortable: false },
+  { key: 'industryCategory', label: '行业类型', visible: true, filterable: true, sortable: false },
+  { key: 'primaryLanguage', label: '编程语言', visible: true, filterable: true, sortable: false },
+  { key: 'codeLines', label: '代码量', visible: true, filterable: false, sortable: false },
+  { key: 'sourceDownloadUrl', label: '源码包下载地址', visible: true, filterable: false, sortable: false },
+  { key: 'releaseDate', label: '版本发布时间', visible: false, filterable: true, sortable: true },
+  { key: 'dependencyCount', label: '依赖软件数', visible: false, filterable: false, sortable: false },
+  { key: 'productComponentUsage', label: '产品成分使用量', visible: false, filterable: false, sortable: false },
+  { key: 'vulnerabilityCount', label: '漏洞数量', visible: false, filterable: false, sortable: false },
+  { key: 'communityName', label: '开发商', visible: false, filterable: true, sortable: false },
+  { key: 'contributorCountries', label: '贡献者国家/地区分布', visible: false, filterable: false, sortable: false },
+  { key: 'contributorOrganizations', label: '贡献者组织/公司分布', visible: false, filterable: false, sortable: false },
+  { key: 'communityHash', label: '社区hash值', visible: false, filterable: false, sortable: false },
+  { key: 'copyright', label: 'Copyright', visible: false, filterable: false, sortable: false },
+  { key: 'externalVulnerabilitySource', label: '外部漏洞源的软件名称', visible: false, filterable: true, sortable: false },
+  { key: 'versionDescription', label: '版本描述', visible: false, filterable: false, sortable: false },
+  { key: 'compatibilityRisk', label: '兼容性风险描述', visible: false, filterable: false, sortable: false },
+  { key: 'eolDate', label: '社区EOL时间', visible: false, filterable: true, sortable: true },
+]);
 // 定义 columns 数据
 const columns = ref([
  { key: 'softwareName', label: '软件名称', visible: true, filterable: true, sortable: false },
@@ -208,11 +292,16 @@ const showColumnList = ref(false);
 const countryModalRef = ref(null);
 const orgModalRef = ref(null);

+const getIndustryName = (value) => {
+  const industry = industryList.value.find(item => item.value === value);
+  return industry ? industry.name : '未知行业'; // 如果找不到，返回默认值
+};
+
 // 清空高级搜索
 const clear = () => {
  newFormData.value = {
    licenseName: '',
-    searchType: headerSearch.value.searchType ? headerSearch.value.searchType : 'software',
+    searchType: 'software',
    softwareName: '',
    softwareVersion: '',
    dependentSoftware: '',
@@ -224,6 +313,10 @@ const clear = () => {
  getReleaseList();
 }

+// 打开模态框的方法
+const setDefult = () => {
+  columns.value = defultColumns.value
+};
 // 打开模态框的方法
 const openCountryModal = () => {
  if (countryModalRef.value) {
@@ -252,8 +345,6 @@ const openOrgChart = (row) => {
  orgVisible.value = true;
 };

-const router = useRouter();
-const route = useRoute();
 // 跳转
 const gotoDetail = (row) => {
  // 后续请换成params，暂时params传参没传过去
@@ -324,7 +415,14 @@ const signCla = (row: any) => {

 const getReleaseList = async() => {
  const { data, error } = await releasePage({
-    ...newFormData.value,
+    softwareName: newFormData.value.softwareName || '',
+    searchType: newFormData.value.searchType || '',
+    softwareVersion: newFormData.value.softwareVersion || '',
+    programmingLanguage: newFormData.value.programmingLanguage || '',
+    interestTag: newFormData.value.interestTag || '',
+    industry: newFormData.value.industry || '',
+    licenseName: newFormData.value.licenseName || '',
+    dependentSoftware: newFormData.value.dependentSoftware || '',
    releaseDateStart: newFormData.value.dateRange&&newFormData.value.dateRange.length>0?newFormData.value.dateRange[0]:'',
    releaseDateEnd: newFormData.value.dateRange&&newFormData.value.dateRange.length>0?newFormData.value.dateRange[1]:'',
    current: pager.value.pageIndex,
@@ -338,16 +436,30 @@ const getReleaseList = async() => {
  }
 };

+
+const getLanguageList = async () => {
+  const res: any = await searchLanguageList();
+  if (!res.error) {
+    languageList.value = res.data.data;
+  }
+};
+
 onMounted(async() => {
+  newFormData.value.industry = route.query.searchType || '';
+  newFormData.value.softwareName = route.query.softwareName || '';
+  nextTick(() => {
+    getReleaseList();
+  })
  // getReleaseList();
+  getLanguageList();
 });

-onMounted(() => {
-  const query: any = route.query;
-  newFormData.value = {
-    ...query
-  };
-});
+// onMounted(() => {
+//   const query: any = route.query;
+//   newFormData.value = {
+//     ...query
+//   };
+// });
 </script>

 <style scoped lang="scss">