From fa64615572b2a8734424c237e68edd041dfa1264 Mon Sep 17 00:00:00 2001
From: ailoooong <ilong8@qq.com>
Date: Wed, 11 Jun 2025 17:38:51 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E6=90=9C=E7=B4=A2=E7=BB=93=E6=9E=9C?=
 =?UTF-8?q?=E9=A1=B5url=E6=9F=A5=E8=AF=A2=E5=8F=82=E6=95=B0=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/OCardItem.vue              |  3 ++-
 src/components/ResultNoApp.vue            |  8 +++++--
 src/components/filter/FilterHeader.vue    |  8 ++++---
 src/components/search/SearchFilter.vue    | 29 +++++++++++++----------
 src/components/search/SearchRecommend.vue |  6 ++---
 src/components/search/SearchTab.vue       | 20 +++++++++-------
 src/data/nav.ts                           |  2 +-
 src/i18n/software/software-en.ts          |  1 +
 src/i18n/software/software-zh.ts          |  1 +
 src/router/index.ts                       |  4 ++++
 src/views/conda/CondaContent.vue          | 25 ++++++++++---------
 src/views/epkg/EpkgContent.vue            | 25 ++++++++++---------
 src/views/field/FieldContent.vue          | 29 +++++++++++++----------
 src/views/home/HomeField.vue              |  2 +-
 src/views/image/ImageContent.vue          | 26 +++++++++++---------
 src/views/oepkg/OEpkgContent.vue          | 25 ++++++++++---------
 src/views/package/RpmContent.vue          | 23 ++++++++++--------
 src/views/search/TheSearch.vue            | 16 ++++++-------
 src/views/upstream/UpstreamContent.vue    |  6 +++--
 19 files changed, 150 insertions(+), 109 deletions(-)

diff --git a/src/components/OCardItem.vue b/src/components/OCardItem.vue
index 57ab3b4..cea0ee5 100644
--- a/src/components/OCardItem.vue
+++ b/src/components/OCardItem.vue
@@ -128,12 +128,13 @@ const onClickLink = (event: MouseEvent, isTag?: boolean) => {
     reportAnalytics(obj);
     return;
   }
+  const name = route.query?.name ?? route.query?.q ?? '';
   if (isPageSearch.value) {
     reportAnalytics({
       tab: route.query.tab,
       type: 'search_content',
       target: target.textContent,
-      content: route.query.name,
+      content: name,
     });
     return;
   }
diff --git a/src/components/ResultNoApp.vue b/src/components/ResultNoApp.vue
index 7ea4521..dbac1bd 100644
--- a/src/components/ResultNoApp.vue
+++ b/src/components/ResultNoApp.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { OLink } from '@opensig/opendesign';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -17,7 +17,7 @@ const props = defineProps({
 const route = useRoute();
 const { t } = useI18n();
 
-const searchVal = ref(decodeURIComponent(route.query.name as string));
+const searchVal = ref('');
 
 // 一键反馈
 const getIssueTemplate = () => {
@@ -41,6 +41,10 @@ const clickFeedback = () => {
   externalLink.value = decodeURIComponent(issueUrl.value);
   showExternalDlg.value = true;
 };
+
+onMounted(() => {
+  searchVal.value = decodeURIComponent(route.query?.name ?? route.query?.q ?? '');
+});
 </script>
 
 <template>
diff --git a/src/components/filter/FilterHeader.vue b/src/components/filter/FilterHeader.vue
index 8dd913d..90dc71a 100644
--- a/src/components/filter/FilterHeader.vue
+++ b/src/components/filter/FilterHeader.vue
@@ -51,7 +51,7 @@ const emits = defineEmits<{
 
 const searchStore = useSearchStore();
 
-const searchValue = ref(route.query.name as string | '');
+const searchValue = ref('');
 const showPanel = ref(false);
 
 // 搜索
@@ -85,7 +85,7 @@ const replaceWinUrl = () => {
   router.push({
     path: `/${locale.value}/` + (route.name as string),
     query: {
-      name: searchValue.value,
+      q: searchValue.value,
     },
   });
 };
@@ -156,10 +156,12 @@ const clearAll = () => {
 const isPageSearch = ref(false);
 onMounted(() => {
   isPageSearch.value = route.name === 'search';
+
+  searchValue.value = route.query?.name ?? route.query?.q ?? '';
 });
 
 watch(
-  () => route.query.name as string,
+  () => (route.query?.name as string) || (route.query?.q as string),
   (v: string) => {
     searchValue.value = v;
   }
diff --git a/src/components/search/SearchFilter.vue b/src/components/search/SearchFilter.vue
index 03b381e..f00fa3e 100644
--- a/src/components/search/SearchFilter.vue
+++ b/src/components/search/SearchFilter.vue
@@ -50,7 +50,7 @@ const reportAnalytics = (data: Record<string, any>, event = 'click') => {
 };
 
 const changeFilter = (v: string) => {
-  fliterSelected.value = v;
+  defaultValue.value = v;
   if (searchInput.value !== '') {
     replaceWinUrl();
   }
@@ -82,9 +82,9 @@ const replaceWinUrl = () => {
   router.push({
     path: `/${locale.value}/search`,
     query: {
-      name: searchInput.value,
-      tab: tabName.value,
-      key: defaultValue.value,
+      q: searchInput.value,
+      type: tabName.value,
+      sort: defaultValue.value,
     },
   });
 };
@@ -124,7 +124,9 @@ const changeSearchBlur = () => {
     );
   }
   focusInput = null;
-  const name = route.query.name as string;
+
+  const name = route.query?.name ?? route.query?.q ?? '';
+
   if (isPageSearch.value) {
     if (searchInput.value === '' || name !== searchInput.value) {
       searchInput.value = name;
@@ -185,30 +187,31 @@ const isPageHome = ref(false);
 onMounted(() => {
   isPageSearch.value = route.name === 'search';
   isPageHome.value = route.name === 'home';
+  handleQueryData();
 });
 
 // -------------------- 监听 url query 变化 触发搜索 ---------------------
 const handleQueryData = () => {
   const query = route.query;
-  const { name, tab, key } = query;
+  const { name, tab, key, q, sort, type } = query;
 
-  if (!isUndefined(name) && name) {
-    searchInput.value = decodeURIComponent(name as string);
+  if ((!isUndefined(name) && name) || (!isUndefined(q) && q)) {
+    searchInput.value = decodeURIComponent(name ?? q);
   }
+
   // 判断key参数
-  if (isValidSearchKey(key)) {
-    defaultValue.value = key as string;
+  if ((isValidSearchKey(key) && key) || isValidSearchKey(sort)) {
+    defaultValue.value = key ?? sort;
   } else {
     defaultValue.value = FLITERMENUOPTIONS[0].id;
   }
 
-  if (isValidSearchTabName(tab)) {
-    tabName.value = tab as string;
+  if (isValidSearchTabName(tab) || isValidSearchTabName(type)) {
+    tabName.value = tab ?? type;
   } else {
     tabName.value = TABNAME_OPTIONS[0];
   }
 };
-handleQueryData();
 
 watch(
   () => route.query,
diff --git a/src/components/search/SearchRecommend.vue b/src/components/search/SearchRecommend.vue
index 1b6d1de..b14f8ad 100644
--- a/src/components/search/SearchRecommend.vue
+++ b/src/components/search/SearchRecommend.vue
@@ -46,7 +46,7 @@ const reportAnalytics = (data: Record<string, any>, event = 'click') => {
     module: isPageHome.value ? 'home_page' : 'search_page',
     content: props.searchValue,
     ...data,
-    ...(route.query.tab ? { tab: route.query.tab } : {}),
+    ...(route.query.type ? { type: route.query.type } : {}),
   });
 };
 
@@ -56,7 +56,7 @@ const jumpPages = (type: string) => {
   });
   router.push({
     path: `/${locale.value}/${getPkgName(type)}`,
-    query: { name: props.searchValue },
+    query: { q: props.searchValue },
   });
 };
 
@@ -87,7 +87,7 @@ const goSearch = (name: string, isHistory?: boolean) => {
   }
   router.push({
     path: `/${locale.value}/search`,
-    query: { name: `${xssAllTag(name)}`, tab: 'all', key: props.filterValue },
+    query: { q: `${xssAllTag(name)}`, type: 'all', sort: props.filterValue },
   });
 };
 
diff --git a/src/components/search/SearchTab.vue b/src/components/search/SearchTab.vue
index c7d3ad7..b446773 100644
--- a/src/components/search/SearchTab.vue
+++ b/src/components/search/SearchTab.vue
@@ -47,21 +47,25 @@ const onChangeTabs = (v: string) => {
   nameOrderInfo.docCount = -1;
   nameOrderInfo.key = '';
 
-  fliterSelected.value = route.query.key as string;
+  const { key, sort } = route.query;
+
+  fliterSelected.value = key ?? sort ?? '';
   router.push({
     path: `/${locale.value}/search`,
     query: {
-      name: searchKey.value,
-      tab: tabName.value,
-      key: fliterSelected.value,
+      q: searchKey.value,
+      type: tabName.value,
+      sort: fliterSelected.value,
     },
   });
 };
 
 onMounted(() => {
-  searchKey.value = route.query.name as string;
-  tabName.value = route.query?.tab as string;
-  fliterSelected.value = route.query.key as string;
+  const { name, q, tab, key, type, sort } = route.query;
+  searchKey.value = name ?? q ?? '';
+
+  tabName.value = tab ?? type ?? '';
+  fliterSelected.value = key ?? sort ?? '';
 });
 
 watch(
@@ -76,7 +80,7 @@ watch(
 );
 
 watch(
-  () => route.query.name as string,
+  () => (route.query.q as string) || (route.query.name as string),
   (v: string) => {
     searchKey.value = v;
   }
diff --git a/src/data/nav.ts b/src/data/nav.ts
index 43608a7..1af7292 100644
--- a/src/data/nav.ts
+++ b/src/data/nav.ts
@@ -59,7 +59,7 @@ export const navs = [
     id: 'upstream',
     label: {
       zh: '软件版本支持',
-      en: '软件版本支持',
+      en: 'Upstream',
     },
     href: '/upstream',
   },
diff --git a/src/i18n/software/software-en.ts b/src/i18n/software/software-en.ts
index ae4cebc..8690d58 100644
--- a/src/i18n/software/software-en.ts
+++ b/src/i18n/software/software-en.ts
@@ -10,6 +10,7 @@ export default {
   epkg: 'EPKG',
   oepkg: 'OEPKG',
   conda: 'CONDA',
+  condapkg: 'CONDA',
   appversion: 'Upstream',
   filterAll: 'All',
   filterName: 'name',
diff --git a/src/i18n/software/software-zh.ts b/src/i18n/software/software-zh.ts
index e4184af..315aeb8 100644
--- a/src/i18n/software/software-zh.ts
+++ b/src/i18n/software/software-zh.ts
@@ -10,6 +10,7 @@ export default {
   epkg: 'EPKG',
   oepkg: 'OEPKG',
   conda: 'CONDA',
+  condapkg: 'CONDA',
   appversion: '软件版本支持',
   filterAll: '全部',
   filterName: '按名称',
diff --git a/src/router/index.ts b/src/router/index.ts
index 340c78e..61eedbd 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -17,6 +17,10 @@ const routes = [
     path: '/',
     redirect: '/zh',
   },
+  {
+    path: '/en',
+    redirect: '/zh',
+  },
   {
     path: '/zh',
     name: 'home',
diff --git a/src/views/conda/CondaContent.vue b/src/views/conda/CondaContent.vue
index 02838f6..afcfc7a 100644
--- a/src/views/conda/CondaContent.vue
+++ b/src/views/conda/CondaContent.vue
@@ -39,10 +39,10 @@ const columns = [
 const pkgData = ref([]);
 const PAGE_ID = 'CONDA';
 const tabName = ref(TABNAME_OPTIONS[5]);
-const keywordType = ref((route.query.key as string) || '');
+const keywordType = ref('');
 const isLoading = ref(false);
 
-const searchKey = ref((route.query.name as string) || '');
+const searchKey = ref('');
 const timeOrder = ref('');
 const nameOrder = ref('');
 
@@ -188,7 +188,7 @@ const resetTag = () => {
 
   currentPage.value = 1;
 
-  if (route.query.os || route.query.arch) {
+  if ((route.query.os || route.query.arch) && !isPageSearch.value) {
     router.push({
       path: `/${locale.value}/conda`,
     });
@@ -225,9 +225,9 @@ const isPageSearch = ref(false);
 
 onMounted(() => {
   isPageSearch.value = route.name === 'search';
-  if (isPageSearch.value) {
-    pageSearch();
-  }
+
+  searchKey.value = route.query?.name ?? route.query?.q ?? '';
+  keywordType.value = route.query?.key ?? route.query?.sort ?? '';
 
   queryFilter();
   handleQueryData();
@@ -253,23 +253,26 @@ watch(
 // -------------------- 监听 url query 变化 触发搜索 ---------------------
 const handleQueryData = () => {
   const query = route.query;
-  const { name, tab, key, os, arch } = query;
+  const { name, tab, key, os, arch, q, sort, type } = query;
   if (!isUndefined(name) && name) {
     searchKey.value = name?.toString();
     currentPage.value = 1;
+  } else if (!isUndefined(q) && q) {
+    searchKey.value = q?.toString();
+    currentPage.value = 1;
   } else {
     searchKey.value = '';
     isSearchDocs.value = false;
   }
 
-  if (isValidSearchTabName(tab) && tab) {
-    tabName.value = tab as string;
+  if ((isValidSearchTabName(tab) && tab) || (isValidSearchTabName(type) && type)) {
+    tabName.value = (tab as string) ?? (type as string);
   } else {
     tabName.value = TABNAME_OPTIONS[5];
   }
   // 判断key参数
-  if (isValidSearchKey(key) && key) {
-    keywordType.value = encodeURIComponent(key as string);
+  if ((isValidSearchKey(key) && key) || (isValidSearchKey(sort) && sort)) {
+    keywordType.value = encodeURIComponent((key as string) ?? (sort as string));
   } else {
     keywordType.value = FLITERMENUOPTIONS[0].id;
   }
diff --git a/src/views/epkg/EpkgContent.vue b/src/views/epkg/EpkgContent.vue
index 92b5549..6bf1cfc 100644
--- a/src/views/epkg/EpkgContent.vue
+++ b/src/views/epkg/EpkgContent.vue
@@ -42,10 +42,10 @@ const columns = [
 const pkgData = ref([]);
 
 const tabName = ref(TABNAME_OPTIONS[3]);
-const keywordType = ref((route.query.key as string) || '');
+const keywordType = ref('');
 const isLoading = ref(false);
 
-const searchKey = ref((route.query.name as string) || '');
+const searchKey = ref('');
 const timeOrder = ref('');
 const nameOrder = ref('');
 
@@ -189,7 +189,7 @@ const resetTag = () => {
   timeOrder.value = '';
   currentPage.value = 1;
 
-  if (route.query.os || route.query.arch) {
+  if ((route.query.os || route.query.arch) && !isPageSearch.value) {
     router.push({
       path: `/${locale.value}/epkg`,
     });
@@ -225,10 +225,10 @@ const handleCurrentChange = (val: number) => {
 const isPageSearch = ref(false);
 
 onMounted(() => {
+  searchKey.value = route.query?.name ?? route.query?.q ?? '';
+  keywordType.value = route.query?.key ?? route.query?.sort ?? '';
+
   isPageSearch.value = route.name === 'search';
-  if (isPageSearch.value) {
-    pageSearch();
-  }
 
   queryFilter();
   handleQueryData();
@@ -254,23 +254,26 @@ watch(
 // -------------------- 监听 url query 变化 触发搜索 ---------------------
 const handleQueryData = () => {
   const query = route.query;
-  const { name, tab, key, os, arch } = query;
+  const { name, tab, key, os, arch, q, sort, type } = query;
   if (!isUndefined(name) && name) {
     searchKey.value = name?.toString();
     currentPage.value = 1;
+  } else if (!isUndefined(q) && q) {
+    searchKey.value = q?.toString();
+    currentPage.value = 1;
   } else {
     searchKey.value = '';
     isSearchDocs.value = false;
   }
 
-  if (isValidSearchTabName(tab) && tab) {
-    tabName.value = tab as string;
+  if ((isValidSearchTabName(tab) && tab) || (isValidSearchTabName(type) && type)) {
+    tabName.value = (tab as string) ?? (type as string);
   } else {
     tabName.value = TABNAME_OPTIONS[3];
   }
   // 判断key参数
-  if (isValidSearchKey(key) && key) {
-    keywordType.value = encodeURIComponent(key as string);
+  if ((isValidSearchKey(key) && key) || (isValidSearchKey(sort) && sort)) {
+    keywordType.value = encodeURIComponent((key as string) ?? (sort as string));
   } else {
     keywordType.value = FLITERMENUOPTIONS[0].id;
   }
diff --git a/src/views/field/FieldContent.vue b/src/views/field/FieldContent.vue
index 3da59a0..c6cc257 100644
--- a/src/views/field/FieldContent.vue
+++ b/src/views/field/FieldContent.vue
@@ -26,10 +26,10 @@ const searchStore = useSearchStore();
 
 const pkgData = ref([]);
 const tabName = ref('all');
-const keywordType = ref((route.query.key as string) || '');
+const keywordType = ref('');
 const isLoading = ref(false);
 
-const searchKey = ref((route.query.name as string) || '');
+const searchKey = ref('');
 const nameOrder = ref('');
 
 const searchOs = ref('');
@@ -158,7 +158,7 @@ const resetTag = () => {
   nameOrder.value = '';
   currentPage.value = 1;
 
-  if (route.query.type || route.query.os || route.query.arch) {
+  if ((route.query.type || route.query.os || route.query.arch) && !isPageSearch.value) {
     router.push({
       path: `/${locale.value}/field`,
     });
@@ -212,9 +212,9 @@ const isPageSearch = ref(false);
 
 onMounted(() => {
   isPageSearch.value = route.name === 'search';
-  if (isPageSearch.value) {
-    pageSearch();
-  }
+
+  searchKey.value = route.query?.name ?? route.query?.q ?? '';
+  keywordType.value = route.query?.key ?? route.query?.sort ?? '';
 
   queryFilter();
   handleQueryData();
@@ -240,31 +240,34 @@ watch(
 // -------------------- 监听 url query 变化 触发搜索 ---------------------
 const handleQueryData = () => {
   const query = route.query;
-  const { name, tab, key, os, arch, type } = query;
+  const { name, tab, key, os, arch, category, q, sort, type } = query;
 
   if (!isUndefined(name) && name) {
     searchKey.value = name?.toString();
     currentPage.value = 1;
+  } else if (!isUndefined(q) && q) {
+    searchKey.value = q?.toString();
+    currentPage.value = 1;
   } else {
     searchKey.value = '';
     isSearchDocs.value = false;
   }
 
-  if (isValidSearchTabName(tab) && tab) {
-    tabName.value = tab as string;
+  if ((isValidSearchTabName(tab) && tab) || (isValidSearchTabName(type) && type)) {
+    tabName.value = (tab as string) ?? (type as string);
   } else {
     tabName.value = TABNAME_OPTIONS[0];
   }
   // 判断key参数
-  if (isValidSearchKey(key) && key) {
-    keywordType.value = encodeURIComponent(key as string);
+  if ((isValidSearchKey(key) && key) || (isValidSearchKey(sort) && sort)) {
+    keywordType.value = encodeURIComponent((key as string) ?? (sort as string));
   } else {
     keywordType.value = FLITERMENUOPTIONS[0].id;
   }
 
   //判断主页领域应用更多跳转
-  if (!isUndefined(type) && type) {
-    searchCategory.value.push(type as string);
+  if (!isUndefined(category) && category) {
+    searchCategory.value.push(category as string);
   }
 
   // 首页社区版本跳转
diff --git a/src/views/home/HomeField.vue b/src/views/home/HomeField.vue
index 74070c7..318d567 100644
--- a/src/views/home/HomeField.vue
+++ b/src/views/home/HomeField.vue
@@ -29,7 +29,7 @@ const jumpTo = (name: string) => {
   router.push({
     path: `/${locale.value}/field`,
     query: {
-      type: name,
+      category: name,
     },
   });
 };
diff --git a/src/views/image/ImageContent.vue b/src/views/image/ImageContent.vue
index d78d3a7..1667c4b 100644
--- a/src/views/image/ImageContent.vue
+++ b/src/views/image/ImageContent.vue
@@ -39,10 +39,10 @@ const pkgData = ref([]);
 
 const tabName = ref(TABNAME_OPTIONS[2]);
 const nameOrder = ref('');
-const keywordType = ref((route.query.key as string) || '');
+const keywordType = ref('');
 const isLoading = ref(false);
 
-const searchKey = ref((route.query.name as string) || '');
+const searchKey = ref('');
 
 const searchOs = ref<string[]>([]);
 const searchArch = ref<string[]>([]);
@@ -180,7 +180,7 @@ const resetTag = () => {
   nameOrder.value = '';
   currentPage.value = 1;
 
-  if (route.query.os || route.query.arch) {
+  if ((route.query.os || route.query.arch) && !isPageSearch.value) {
     router.push({
       path: `/${locale.value}/image`,
     });
@@ -217,10 +217,11 @@ const handleCurrentChange = (val: number) => {
 const isPageSearch = ref(false);
 
 onMounted(() => {
+  searchKey.value = route.query?.name ?? route.query?.q ?? '';
+  keywordType.value = route.query?.key ?? route.query?.sort ?? '';
+
   isPageSearch.value = route.name === 'search';
-  if (isPageSearch.value) {
-    pageSearch();
-  }
+
   queryFilter();
   handleQueryData();
 });
@@ -245,23 +246,26 @@ watch(
 // -------------------- 监听 url query 变化 触发搜索 ---------------------
 const handleQueryData = () => {
   const query = route.query;
-  const { name, tab, key, os, arch } = query;
+  const { name, tab, key, os, arch, q, sort, type } = query;
   if (!isUndefined(name) && name) {
     searchKey.value = name?.toString();
     currentPage.value = 1;
+  } else if (!isUndefined(q) && q) {
+    searchKey.value = q?.toString();
+    currentPage.value = 1;
   } else {
     searchKey.value = '';
     isSearchDocs.value = false;
   }
 
-  if (isValidSearchTabName(tab) && tab) {
-    tabName.value = tab as string;
+  if ((isValidSearchTabName(tab) && tab) || (isValidSearchTabName(type) && type)) {
+    tabName.value = (tab as string) ?? (type as string);
   } else {
     tabName.value = TABNAME_OPTIONS[2];
   }
   // 判断key参数
-  if (isValidSearchKey(key) && key) {
-    keywordType.value = encodeURIComponent(key as string);
+  if ((isValidSearchKey(key) && key) || (isValidSearchKey(sort) && sort)) {
+    keywordType.value = encodeURIComponent((key as string) ?? (sort as string));
   } else {
     keywordType.value = FLITERMENUOPTIONS[0].id;
   }
diff --git a/src/views/oepkg/OEpkgContent.vue b/src/views/oepkg/OEpkgContent.vue
index da958ea..bd6fe15 100644
--- a/src/views/oepkg/OEpkgContent.vue
+++ b/src/views/oepkg/OEpkgContent.vue
@@ -42,10 +42,10 @@ const columns = [
 const pkgData = ref([]);
 
 const tabName = ref(TABNAME_OPTIONS[4]);
-const keywordType = ref((route.query.key as string) || '');
+const keywordType = ref('');
 const isLoading = ref(true);
 
-const searchKey = ref((route.query.name as string) || '');
+const searchKey = ref('');
 const timeOrder = ref('');
 const nameOrder = ref('');
 
@@ -196,7 +196,7 @@ const resetTag = () => {
 
   currentPage.value = 1;
 
-  if (route.query.os || route.query.arch) {
+  if ((route.query.os || route.query.arch) && !isPageSearch.value) {
     router.push({
       path: `/${locale.value}/oepkg`,
     });
@@ -232,10 +232,10 @@ const handleCurrentChange = (val: number) => {
 const isPageSearch = ref(false);
 
 onMounted(() => {
+  searchKey.value = route.query?.name ?? route.query?.q ?? '';
+  keywordType.value = route.query?.key ?? route.query?.sort ?? '';
+
   isPageSearch.value = route.name === 'search';
-  if (isPageSearch.value) {
-    pageSearch();
-  }
 
   queryFilter();
   handleQueryData();
@@ -261,23 +261,26 @@ watch(
 // -------------------- 监听 url query 变化 触发搜索 ---------------------
 const handleQueryData = () => {
   const query = route.query;
-  const { name, tab, key, os, arch } = query;
+  const { name, tab, key, os, arch, q, sort, type } = query;
   if (!isUndefined(name) && name) {
     searchKey.value = name?.toString();
     currentPage.value = 1;
+  } else if (!isUndefined(q) && q) {
+    searchKey.value = q?.toString();
+    currentPage.value = 1;
   } else {
     searchKey.value = '';
     isSearchDocs.value = false;
   }
 
-  if (isValidSearchTabName(tab) && tab) {
-    tabName.value = tab as string;
+  if ((isValidSearchTabName(tab) && tab) || (isValidSearchTabName(type) && type)) {
+    tabName.value = (tab as string) ?? (type as string);
   } else {
     tabName.value = TABNAME_OPTIONS[4];
   }
   // 判断key参数
-  if (isValidSearchKey(key) && key) {
-    keywordType.value = encodeURIComponent(key as string);
+  if ((isValidSearchKey(key) && key) || (isValidSearchKey(sort) && sort)) {
+    keywordType.value = encodeURIComponent((key as string) ?? (sort as string));
   } else {
     keywordType.value = FLITERMENUOPTIONS[0].id;
   }
diff --git a/src/views/package/RpmContent.vue b/src/views/package/RpmContent.vue
index 07a3617..8ffb7cb 100644
--- a/src/views/package/RpmContent.vue
+++ b/src/views/package/RpmContent.vue
@@ -40,12 +40,12 @@ const columns = [
 const pkgData = ref([]);
 
 const tabName = ref(TABNAME_OPTIONS[1]);
-const keywordType = ref((route.query.key as string) || '');
+const keywordType = ref('');
 const isLoading = ref(false);
 const timeOrder = ref('');
 const nameOrder = ref('');
 
-const searchKey = ref((route.query.name as string) || '');
+const searchKey = ref('');
 
 const searchOs = ref<string[]>([]);
 const searchArch = ref<string[]>([]);
@@ -224,10 +224,10 @@ const handleCurrentChange = (val: number) => {
 const isPageSearch = ref(false);
 
 onMounted(() => {
+  searchKey.value = route.query?.name ?? route.query?.q ?? '';
+  keywordType.value = route.query?.key ?? route.query?.sort ?? '';
+
   isPageSearch.value = route.name === 'search';
-  if (isPageSearch.value) {
-    pageSearch();
-  }
 
   queryFilter();
   handleQueryData();
@@ -253,23 +253,26 @@ watch(
 // -------------------- 监听 url query 变化 触发搜索 ---------------------
 const handleQueryData = () => {
   const query = route.query;
-  const { name, tab, key, os, arch } = query;
+  const { name, tab, key, os, arch, q, sort, type } = query;
   if (!isUndefined(name) && name) {
     searchKey.value = name?.toString();
     currentPage.value = 1;
+  } else if (!isUndefined(q) && q) {
+    searchKey.value = q?.toString();
+    currentPage.value = 1;
   } else {
     searchKey.value = '';
     isSearchDocs.value = false;
   }
 
-  if (isValidSearchTabName(tab) && tab) {
-    tabName.value = tab as string;
+  if ((isValidSearchTabName(tab) && tab) || (isValidSearchTabName(type) && type)) {
+    tabName.value = (tab as string) ?? (type as string);
   } else {
     tabName.value = TABNAME_OPTIONS[1];
   }
   // 判断key参数
-  if (isValidSearchKey(key) && key) {
-    keywordType.value = encodeURIComponent(key as string);
+  if ((isValidSearchKey(key) && key) || (isValidSearchKey(sort) && sort)) {
+    keywordType.value = encodeURIComponent((key as string) ?? (sort as string));
   } else {
     keywordType.value = FLITERMENUOPTIONS[0].id;
   }
diff --git a/src/views/search/TheSearch.vue b/src/views/search/TheSearch.vue
index 3d245ed..a6b44a3 100644
--- a/src/views/search/TheSearch.vue
+++ b/src/views/search/TheSearch.vue
@@ -45,24 +45,24 @@ const querySearchCount = () => {
 // -------------------- 监听 url query 变化 触发搜索 ---------------------
 const handleQueryData = () => {
   const query = route.query;
-  const { name, tab, key } = query;
+  const { name, tab, key, q, sort, type } = query;
 
-  if (!isUndefined(name) && name) {
-    searchKey.value = name as string;
+  if ((!isUndefined(name) && name) || (!isUndefined(q) && q)) {
+    searchKey.value = name ?? q;
   }
+
   // 判断key参数
-  if (isValidSearchKey(key)) {
-    keywordType.value = key as string;
+  if (isValidSearchKey(key) || isValidSearchKey(sort)) {
+    keywordType.value = key ?? sort;
   } else {
     keywordType.value = FLITERMENUOPTIONS[0].id;
   }
 
-  if (isValidSearchTabName(tab) || tab === 'conda') {
-    tabName.value = tab as string;
+  if ((isValidSearchTabName(type) && type) || tab === 'conda') {
+    tabName.value = tab ?? type;
   } else {
     tabName.value = TABNAME_OPTIONS[0];
   }
-  console.log('DATATYPE :>> ', tab);
 
   querySearchCount();
 };
diff --git a/src/views/upstream/UpstreamContent.vue b/src/views/upstream/UpstreamContent.vue
index 059ab30..ac9c34b 100644
--- a/src/views/upstream/UpstreamContent.vue
+++ b/src/views/upstream/UpstreamContent.vue
@@ -35,7 +35,7 @@ const tabName = ref('appversion');
 const nameOrder = ref('');
 const isLoading = ref(false);
 
-const searchKey = ref((route.query.name as string) || '');
+const searchKey = ref('');
 const searchOs = ref('');
 const searchType = ref('');
 const searchStatus = ref<string[]>([]);
@@ -170,6 +170,8 @@ const handleCurrentChange = (val: number) => {
 const isPageSearch = ref(false);
 
 onMounted(() => {
+  searchKey.value = route.query?.name ?? route.query?.q ?? '';
+
   isPageSearch.value = route.name === 'search';
 
   pageSearch();
@@ -208,7 +210,7 @@ watch(
 );
 
 watch(
-  () => route.query.name as string,
+  () => (route.query?.name as string) || (route.query?.q as string),
   (v: string) => {
     if (searchKey.value !== v && v !== undefined) {
       searchKey.value = v;
-- 
Gitee


From 237d196294fecd07db0fd7009fa13287f99930d4 Mon Sep 17 00:00:00 2001
From: ailoooong <ilong8@qq.com>
Date: Fri, 13 Jun 2025 16:00:11 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E8=BD=AF=E4=BB=B6=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E8=81=9A=E5=90=88=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/category/content/index.scss |   6 +
 src/assets/svg-icons/icon-login.svg          |  10 +-
 src/assets/svg-icons/icon-moon.svg           |   4 +-
 src/components/AppBanner.vue                 |  15 +-
 src/components/AppFooter.vue                 |  12 +-
 src/components/AppPagination.vue             |   2 +-
 src/components/NavTab.vue                    | 121 ++++++++++++
 src/components/OCodeDown.vue                 |  11 +-
 src/components/Result404.vue                 |  34 ----
 src/components/filter/FilterHeader.vue       |  25 +--
 src/components/header/AppLogin.vue           |   1 +
 src/components/header/HeaderNav.vue          |   8 +-
 src/components/header/HeaderTheme.vue        |   3 +-
 src/components/search/SearchFilter.vue       |  54 ++----
 src/components/search/SearchTab.vue          |  20 +-
 src/composables/useRouteQuery.ts             |  58 ++++++
 src/data/nav.ts                              |  38 +---
 src/data/query.ts                            |  14 +-
 src/i18n/software/software-en.ts             |   1 +
 src/i18n/software/software-zh.ts             |   1 +
 src/utils/common.ts                          |  62 +------
 src/utils/query.ts                           |  16 +-
 src/views/conda/CondaContent.vue             | 103 +++++------
 src/views/conda/TheConda.vue                 |  15 +-
 src/views/conda/TheCondaDetail.vue           |   3 +-
 src/views/epkg/EpkgContent.vue               |  33 ++--
 src/views/field/FieldContent.vue             | 125 ++++++-------
 src/views/field/TheFieldDetail.vue           |  44 ++---
 src/views/image/ImageCard.vue                | 184 +++++++++++++++++++
 src/views/image/ImageContent.vue             | 130 ++++++-------
 src/views/image/TheImage.vue                 |  16 +-
 src/views/oepkg/OEpkgContent.vue             | 100 +++++-----
 src/views/oepkg/TheOEpkg.vue                 |  16 +-
 src/views/package/RpmContent.vue             | 113 +++++-------
 src/views/package/TheRpm.vue                 |  16 +-
 src/views/package/TheRpmDetail.vue           |   4 +-
 src/views/search/TheSearch.vue               |  76 ++++----
 src/views/upstream/UpstreamContent.vue       |  10 +-
 38 files changed, 849 insertions(+), 655 deletions(-)
 create mode 100644 src/components/NavTab.vue
 delete mode 100644 src/components/Result404.vue
 create mode 100644 src/composables/useRouteQuery.ts
 create mode 100644 src/views/image/ImageCard.vue

diff --git a/src/assets/style/category/content/index.scss b/src/assets/style/category/content/index.scss
index 9b93e65..0930c51 100644
--- a/src/assets/style/category/content/index.scss
+++ b/src/assets/style/category/content/index.scss
@@ -3,6 +3,12 @@
   display: flex;
   flex-direction: column;
 }
+.page-subtitle {
+  padding-bottom: 24px;
+  color: var(--o-color-info2);
+  text-align: center;
+  @include text1;
+}
 .pkg-wrap {
   display: flex;
   justify-content: space-between;
diff --git a/src/assets/svg-icons/icon-login.svg b/src/assets/svg-icons/icon-login.svg
index 4a61fba..7b74b06 100644
--- a/src/assets/svg-icons/icon-login.svg
+++ b/src/assets/svg-icons/icon-login.svg
@@ -1,9 +1 @@
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
-    <g>
-        <g transform="translate(-320.000000, -32.000000)">
-            <g transform="translate(320.000000, 32.000000)">
-                <path fill="currentColor" d="M12,12 C14.7624684,12 17.0018915,9.76142375 17.0018915,7 C17.0018915,4.23857625 14.7624684,2 12,2 C9.23753158,2 6.99810846,4.23857625 6.99810846,7 C6.99810846,9.76142375 9.23753158,12 12,12 Z M12.000946,4 C13.6583227,4 15.001892,5.34314575 15.001892,7 C15.001892,8.65685425 13.6583227,10 12.000946,10 C10.3435693,10 9,8.65685425 9,7 C9,5.34314575 10.3435693,4 12.000946,4 Z M21.8662311,20.1875 L19.5028373,15.325 C18.8567058,14.0306261 17.5234131,13.2231704 16.0765416,13.25 L7.92345839,13.25 C6.49904297,13.2472017 5.1959237,14.051053 4.55968633,15.325 L2.13376893,20.1875 C1.93873362,20.5743978 1.9580209,21.0346598 2.18474205,21.4038973 C2.4114632,21.7731348 2.81328439,21.9986889 3.2466898,22 L20.7533102,22 C21.1867156,21.9986889 21.5885368,21.7731348 21.815258,21.4038973 C22.0419791,21.0346598 22.0612664,20.5743978 21.8662311,20.1875 Z M4.58032227,20 L6.58736059,15.9166998 C6.80993656,15.3508647 7.26373642,14.9956312 7.75836431,15.0000406 L16.2416357,15.0000406 C16.7362636,14.9956312 17.1900634,15.3508647 17.4126394,15.9166998 L19.4941406,20 L4.58032227,20 Z"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<svg data-v-80cf3a85="" version="1.1" xmlns="http://www.w3.org/2000/svg" width="34" height="32" viewBox="0 0 34 32"><path fill="currentColor" d="M16.842 1.356c4.597 0 8.324 3.727 8.324 8.324s-3.727 8.324-8.324 8.324c-0.049 0-0.097-0-0.146-0.001l0.146-0.003c-7.248 0-13.111 5.704-13.111 12.725 0 0.651-0.528 1.179-1.179 1.179s-1.179-0.528-1.179-1.179c0-6.667 4.434-12.316 10.575-14.312-2.079-1.511-3.43-3.964-3.43-6.732 0-4.597 3.727-8.324 8.324-8.324zM24.147 17.425c4.983 2.607 8.164 7.677 8.164 13.298 0 0.651-0.528 1.179-1.179 1.179s-1.179-0.528-1.179-1.179c0-4.729-2.681-9.002-6.899-11.209-0.577-0.302-0.8-1.014-0.498-1.591s1.014-0.8 1.591-0.498zM16.842 3.714c-3.295 0-5.966 2.671-5.966 5.966s2.671 5.966 5.966 5.966l-0.125-0.004c0.042-0 0.083-0 0.125-0l0.051 0.005c3.271-0.027 5.915-2.688 5.915-5.966 0-3.295-2.671-5.966-5.966-5.966z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svg-icons/icon-moon.svg b/src/assets/svg-icons/icon-moon.svg
index e098d21..ee21d75 100644
--- a/src/assets/svg-icons/icon-moon.svg
+++ b/src/assets/svg-icons/icon-moon.svg
@@ -1,3 +1 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<path fill="currentColor"  d="M10.643 6.363c0.282 3.891 1.958 7.55 4.72 10.302 2.744 2.744 6.384 4.407 10.253 4.684-2.324 3.939-6.85 6.016-11.348 5.207s-8.019-4.333-8.828-8.835c-0.808-4.502 1.267-9.033 5.203-11.358v0zM12.523 2.667h-0.187c-6.218 1.884-10.24 7.902-9.604 14.374s5.751 11.591 12.216 12.227c6.466 0.636 12.479-3.389 14.361-9.613v0c0.064-0.242-0.002-0.499-0.173-0.681l-0.12-0.12c-0.138-0.125-0.321-0.187-0.507-0.174h-0.080c-0.54 0.069-1.083 0.104-1.627 0.107-3.89 0.002-7.595-1.666-10.175-4.58s-3.788-6.795-3.319-10.66c0.015-0.207-0.057-0.41-0.2-0.561l-0.12-0.12c-0.124-0.125-0.291-0.196-0.467-0.2z"></path>
-</svg>
+<svg data-v-4583615f="" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" d="M16 0.48c-0.699 0-1.39 0.046-2.070 0.138-0.824 0.112-1.243 1.050-0.777 1.738 1.12 1.653 1.727 3.602 1.727 5.644 0 5.567-4.513 10.080-10.080 10.080-0.9 0-1.783-0.118-2.632-0.348-0.802-0.218-1.553 0.483-1.392 1.298 1.428 7.214 7.782 12.49 15.224 12.49 8.571 0 15.52-6.949 15.52-15.52s-6.949-15.52-15.52-15.52zM15.932 2.722l0.068-0.002c7.334 0 13.28 5.946 13.28 13.28s-5.946 13.28-13.28 13.28l-0.423-0.007c-5.481-0.173-10.209-3.689-12.045-8.687l-0.122-0.348 0.298 0.034c0.361 0.032 0.725 0.048 1.092 0.048 6.804 0 12.32-5.516 12.32-12.32l-0.011-0.532c-0.068-1.592-0.439-3.132-1.083-4.551l-0.093-0.194z"></path></svg>
\ No newline at end of file
diff --git a/src/components/AppBanner.vue b/src/components/AppBanner.vue
index f13838c..7f3770d 100644
--- a/src/components/AppBanner.vue
+++ b/src/components/AppBanner.vue
@@ -62,6 +62,9 @@ defineExpose({
       <div v-if="$slots.operate" class="banner-operate">
         <slot name="operate"></slot>
       </div>
+      <div v-if="$slots.tabs">
+        <slot name="tabs"></slot>
+      </div>
     </div>
   </div>
 </template>
@@ -95,7 +98,8 @@ defineExpose({
   padding: 0 var(--layout-content-padding);
   display: flex;
   justify-content: space-between;
-  height: 160px;
+  min-height: 140px;
+  flex-direction: column;
   .banner-text {
     display: flex;
     flex-direction: column;
@@ -187,13 +191,4 @@ defineExpose({
     opacity: 1;
   }
 }
-
-.banner-text {
-  .banner-title {
-    animation: fade-up var(--o-duration-l) var(--o-easing-standard-in);
-  }
-  .banner-subtitle {
-    animation: fade-up 800ms var(--o-easing-standard-in);
-  }
-}
 </style>
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index 27ebd9a..63fb9fa 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useLocale } from '@/composables/useLocale';
-import { getYearByOffset } from '@/utils/common';
 import { OPENEULER, OPENATOM, OPENEULER_CONTACT } from '@/data/config';
 
 import LogoFooter from '@/assets/footer/footer-logo2.png';
@@ -86,6 +85,17 @@ const beianInfo = {
   zh: ['京ICP备2020036654号-1', '京公网安备 11030102011597 号'],
   en: ['J. ICP B. No. 2020036654-1', 'J.G.W.A.B. No. 11030102011597'],
 };
+
+const getYearByOffset = () => {
+  // 获取当前时间的 UTC 时间
+  const now = new Date();
+  const utcTime = new Date(now.getTime() + now.getTimezoneOffset() * 60000);
+
+  // 设置偏移
+  utcTime.setHours(utcTime.getHours() + 8);
+
+  return utcTime.getFullYear();
+};
 </script>
 
 <template>
diff --git a/src/components/AppPagination.vue b/src/components/AppPagination.vue
index 7db948b..68e2205 100644
--- a/src/components/AppPagination.vue
+++ b/src/components/AppPagination.vue
@@ -36,7 +36,7 @@ const handleCurrentChange = (val: number) => {
 const isFieldPage = ref(false);
 
 onMounted(() => {
-  isFieldPage.value = route.name === 'field' || route.query?.tab === 'all';
+  isFieldPage.value = route.name === 'field' || route.query?.tab === 'all' || route.name === 'image';
 });
 </script>
 
diff --git a/src/components/NavTab.vue b/src/components/NavTab.vue
new file mode 100644
index 0000000..ecb0e47
--- /dev/null
+++ b/src/components/NavTab.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { toRefs, ref, watchEffect } from 'vue';
+import { OTab, OTabPane } from '@opensig/opendesign';
+import { windowOpen } from '@/utils/common';
+import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  router: {
+    type: Boolean,
+    default: false,
+  },
+});
+const { modelValue, router } = toRefs(props);
+
+const route = useRoute();
+const router1 = useRouter();
+const selected = ref();
+const { t } = useI18n();
+watchEffect(() => {
+  selected.value = modelValue?.value;
+});
+
+const selectedOption = [
+  {
+    value: 'rpm',
+    label: t('software.rpmpkg'),
+    path: '/zh/rpm',
+  },
+  {
+    value: 'image',
+    label: t('software.image'),
+    path: '/zh/image',
+  },
+  {
+    value: 'oepkg',
+    label: t('software.oepkg'),
+    path: '/zh/oepkg',
+  },
+  {
+    value: 'conda',
+    label: t('software.conda'),
+    path: '/zh/conda',
+  },
+];
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string | number): void;
+  (e: 'change', value: string | number, oldValue?: string | number): void;
+}>();
+
+const change = (value: string | number, oldValue: string | number) => {
+  const findone = selectedOption?.find((item) => item.value === value);
+
+  if (findone?.herf) {
+    selected.value = oldValue;
+    emits('update:modelValue', oldValue);
+    windowOpen(findone?.herf, findone?.target || '_self');
+  } else if (findone?.path) {
+    emits('update:modelValue', value);
+    emits('change', value, oldValue);
+    router1.push({
+      path: findone?.path,
+    });
+  } else {
+    emits('update:modelValue', value);
+    emits('change', value, oldValue);
+    changeRouter(value);
+  }
+};
+
+const changeRouter = (type: string | number) => {
+  if (router.value) {
+    const obj = {
+      path: route.path,
+      query: {
+        ...route.query,
+        type,
+      },
+    };
+    router1.replace(obj);
+  }
+};
+</script>
+
+<template>
+  <OTab v-model="selected" variant="text" :line="false" @change="change">
+    <template v-for="item in selectedOption" :key="item.value">
+      <OTabPane :value="item.value" :label="item.label"></OTabPane>
+    </template>
+  </OTab>
+</template>
+
+<style lang="scss" scoped>
+.o-tab {
+  --tab-nav-justify: left;
+  --tab-icon-color: rgba(255, 255, 255, 0.8);
+  --tab-nav-color-active: var(--o-color-white);
+  --tab-nav-color-hover: var(--o-color-white);
+  --tab-nav-anchor-color: var(--o-color-white);
+  --tab-nav-gap: 40px;
+  .o-tab-nav {
+    --tab-nav-padding: 0;
+  }
+}
+
+@include respond-to(phone) {
+  .nav-tab {
+    background-color: var(--o-color-fill1);
+  }
+
+  :deep(.o-tab-nav) {
+    @include text2;
+    --tab-nav-padding: 4px 0;
+  }
+}
+</style>
diff --git a/src/components/OCodeDown.vue b/src/components/OCodeDown.vue
index f771c2d..6446b6f 100644
--- a/src/components/OCodeDown.vue
+++ b/src/components/OCodeDown.vue
@@ -9,7 +9,6 @@
   </div>
 </template>
 <script setup lang="ts">
-import { getTarget } from '@/utils/common';
 import { OSelect, OOption } from '@opensig/opendesign';
 import { useLocale } from '@/composables/useLocale';
 import { ref } from 'vue';
@@ -43,6 +42,16 @@ const jumpTo = (id: any) => {
     window.location.href = newHref;
   }
 };
+
+const getTarget = (data: any, key: any) => {
+  const map = new Map();
+  for (const item of data) {
+    if (!map.has(item[key])) {
+      map.set(item[key], item);
+    }
+  }
+  return [...map.values()];
+};
 </script>
 <style scoped lang="scss">
 @import '@/assets/style/category/detail/index.scss';
diff --git a/src/components/Result404.vue b/src/components/Result404.vue
deleted file mode 100644
index 098ef15..0000000
--- a/src/components/Result404.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import ContentWrapper from '@/components/ContentWrapper.vue';
-import { OResult } from '@opensig/opendesign';
-
-import { useTheme } from '@/composables/useTheme';
-import notFoundImage from '@/assets/404.png';
-import notFoundImageDark from '@/assets/404-dark.png';
-
-const { isDark } = useTheme();
-</script>
-
-<template>
-  <ContentWrapper class="result-404">
-    <OResult>
-      <template #image>
-        <slot name="image">
-          <img class="not-found-image" alt="notFound" :src="isDark ? notFoundImageDark : notFoundImage" />
-        </slot>
-      </template>
-      <slot name="extra" />
-      <slot name="description" />
-    </OResult>
-  </ContentWrapper>
-</template>
-
-<style lang="scss" scoped>
-.result-404 {
-  width: 100%;
-  height: var(--layout-content-min-height);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>
diff --git a/src/components/filter/FilterHeader.vue b/src/components/filter/FilterHeader.vue
index 90dc71a..26e6506 100644
--- a/src/components/filter/FilterHeader.vue
+++ b/src/components/filter/FilterHeader.vue
@@ -46,6 +46,7 @@ const { locale } = useLocale();
 
 const emits = defineEmits<{
   (e: 'sort', value: string[] | string): void;
+  (e: 'search', value: string): void;
   (e: 'clear'): void;
 }>();
 
@@ -55,17 +56,16 @@ const searchValue = ref('');
 const showPanel = ref(false);
 
 // 搜索
-const changeSearchInput = (v: string) => {
-  changePkgInput(v);
-  searchValue.value = v;
+const changeSearchInput = () => {
+  changePkgInput();
   replaceWinUrl();
 };
 
-const changePkgInput = (v: string) => {
-  if (v === '') {
+const changePkgInput = () => {
+  if (searchValue.value === '') {
     return;
   }
-  if (v.length > 100) {
+  if (searchValue.value && searchValue.value.length > 100) {
     return msg.danger({
       content: '文字长度不能超过100字符',
     });
@@ -75,15 +75,16 @@ const changePkgInput = (v: string) => {
 const clearSearchData = () => {
   emits('clear');
   router.push({
-    path: `/${locale.value}/` + (route.name as string),
+    query: {
+      q: undefined,
+    },
   });
 };
 
 const replaceWinUrl = () => {
   collectDownloadData(searchValue.value);
-
+  emits('search', searchValue.value);
   router.push({
-    path: `/${locale.value}/` + (route.name as string),
     query: {
       q: searchValue.value,
     },
@@ -217,12 +218,12 @@ const getSearchplaceholder = (name: string) => {
         clearable
         @focus="showPanel = true"
         v-model="searchValue"
-        @press-enter="(v) => changeSearchInput(v)"
-        @input="(v) => changePkgInput(v)"
+        @press-enter="changeSearchInput"
+        @input="changePkgInput"
         @clear="clearSearchData"
       >
         <template #prefix>
-          <OIcon> <IconSearch @click="changeSearchInput(searchValue)" /></OIcon>
+          <OIcon> <IconSearch @click="changeSearchInput" /></OIcon>
         </template>
       </OInput>
     </div>
diff --git a/src/components/header/AppLogin.vue b/src/components/header/AppLogin.vue
index 77bf5aa..f6a7b80 100644
--- a/src/components/header/AppLogin.vue
+++ b/src/components/header/AppLogin.vue
@@ -72,6 +72,7 @@ const jumpTo = (v: string) => {
 
 .login-btn {
   color: var(--o-color-info1);
+  width: 20px;
   cursor: pointer;
 }
 </style>
diff --git a/src/components/header/HeaderNav.vue b/src/components/header/HeaderNav.vue
index cc35bf2..cfb3fe7 100644
--- a/src/components/header/HeaderNav.vue
+++ b/src/components/header/HeaderNav.vue
@@ -36,8 +36,14 @@ const onMouseLeave = () => {
 };
 
 // -------------------- 选中事件 --------------------
+/** 软件列表 */
+const softwareList = ['rpm', 'image', 'oepkg', 'conda'];
 const selectedIndex = computed(() => {
-  return props.options.findIndex((item) => route.name?.toString().startsWith(item.id));
+  let name = route.name?.toString();
+  if (softwareList.includes(name)) {
+    name = 'list';
+  }
+  return props.options.findIndex((item) => name.startsWith(item.id));
 });
 
 // 导航跳转
diff --git a/src/components/header/HeaderTheme.vue b/src/components/header/HeaderTheme.vue
index 309bc71..653bf3b 100644
--- a/src/components/header/HeaderTheme.vue
+++ b/src/components/header/HeaderTheme.vue
@@ -24,12 +24,11 @@ const { changeTheme, isLight, isDark } = useTheme();
   height: 100%;
   display: flex;
   align-items: center;
-  width: 24px;
 }
 
 .theme-icon {
   color: var(--o-color-info1);
-  width: 24px;
+  width: 20px;
   cursor: pointer;
 }
 </style>
diff --git a/src/components/search/SearchFilter.vue b/src/components/search/SearchFilter.vue
index f00fa3e..df26dc5 100644
--- a/src/components/search/SearchFilter.vue
+++ b/src/components/search/SearchFilter.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { ref, watch, onMounted } from 'vue';
-import { OSelect, OOption, OInput, OIcon, vLoading, useMessage, isUndefined, ODivider } from '@opensig/opendesign';
+import { OSelect, OOption, OInput, OIcon, vLoading, useMessage, ODivider } from '@opensig/opendesign';
 import { useDebounceFn } from '@vueuse/core';
-import { isValidSearchTabName, isValidSearchKey } from '@/utils/query';
 import { useRouter, useRoute } from 'vue-router';
 import { getSearchDataAll } from '@/api/api-search';
 import type { RecommendItemT } from '@/@types/search';
@@ -10,8 +9,8 @@ import { onClickOutside } from '@vueuse/core';
 import { useLocale } from '@/composables/useLocale';
 import useSearchHistory from '@/composables/useSearchHistory';
 import { useI18n } from 'vue-i18n';
-import { TABNAME_OPTIONS, FLITERMENUOPTIONS } from '@/data/query';
-
+import { PACKAGE_TYPE_MAPPING, FLITERMENUOPTIONS } from '@/data/query';
+import { useRouteQuery } from '@/composables/useRouteQuery';
 import SearchRecommend from '@/components/search/SearchRecommend.vue';
 
 import IconSearch from '~icons/app/icon-search.svg';
@@ -57,22 +56,21 @@ const changeFilter = (v: string) => {
 };
 
 // 搜索框事件
-const changeSearchInput = (v: string) => {
-  if (v === '') {
+const changeSearchInput = () => {
+  if (searchInput.value === '') {
     return;
   }
-  if (v.length > 100) {
+  if (searchInput.value.length > 100) {
     return msg.danger({
       content: '文字长度不能超过100字符',
     });
   }
   reportAnalytics({
     type: 'search',
-    content: v,
+    content: searchInput.value,
   });
   isLoading.value = false;
   isFocus.value = false;
-  searchInput.value = v;
   replaceWinUrl();
 };
 
@@ -184,39 +182,25 @@ const trottleSearch = (v: string) => {
 const isPageSearch = ref(false);
 const isPageHome = ref(false);
 
+// 获取路由参数
+const { routeKey, routeName, routeType } = useRouteQuery(PACKAGE_TYPE_MAPPING['all']);
+
+const init = () => {
+  searchInput.value = routeKey.value;
+  defaultValue.value = routeType.value;
+  tabName.value = routeName.value;
+};
+
 onMounted(() => {
   isPageSearch.value = route.name === 'search';
   isPageHome.value = route.name === 'home';
-  handleQueryData();
+  init();
 });
 
-// -------------------- 监听 url query 变化 触发搜索 ---------------------
-const handleQueryData = () => {
-  const query = route.query;
-  const { name, tab, key, q, sort, type } = query;
-
-  if ((!isUndefined(name) && name) || (!isUndefined(q) && q)) {
-    searchInput.value = decodeURIComponent(name ?? q);
-  }
-
-  // 判断key参数
-  if ((isValidSearchKey(key) && key) || isValidSearchKey(sort)) {
-    defaultValue.value = key ?? sort;
-  } else {
-    defaultValue.value = FLITERMENUOPTIONS[0].id;
-  }
-
-  if (isValidSearchTabName(tab) || isValidSearchTabName(type)) {
-    tabName.value = tab ?? type;
-  } else {
-    tabName.value = TABNAME_OPTIONS[0];
-  }
-};
-
 watch(
   () => route.query,
   () => {
-    handleQueryData();
+    init();
     isPageHome.value = route.name === 'home';
   },
   { deep: true }
@@ -247,7 +231,7 @@ watch(
           clearable
           class="search-input"
           :max-length="100"
-          @press-enter="(v) => changeSearchInput(v)"
+          @press-enter="changeSearchInput"
           @input="trottleSearch"
           @clear="clearInput"
           @focus="changeSearchFocus(true)"
diff --git a/src/components/search/SearchTab.vue b/src/components/search/SearchTab.vue
index b446773..e1f1c3f 100644
--- a/src/components/search/SearchTab.vue
+++ b/src/components/search/SearchTab.vue
@@ -61,26 +61,24 @@ const onChangeTabs = (v: string) => {
 };
 
 onMounted(() => {
-  const { name, q, tab, key, type, sort } = route.query;
-  searchKey.value = name ?? q ?? '';
-
-  tabName.value = tab ?? type ?? '';
-  fliterSelected.value = key ?? sort ?? '';
+  const { type, q, sort } = route.query;
+  searchKey.value = q;
+  tabName.value = type ?? '';
+  fliterSelected.value = sort ?? '';
 });
 
 watch(
   () => props.menu,
   () => {
-    props.menu.forEach((item) => {
-      if (item.key === tabName.value) {
-        searchCategoryValue.value = item.key;
-      }
-    });
+    const matchedItem = props.menu.find((item) => item.key === tabName.value);
+    if (matchedItem) {
+      searchCategoryValue.value = matchedItem.key;
+    }
   }
 );
 
 watch(
-  () => (route.query.q as string) || (route.query.name as string),
+  () => route.query.q as string,
   (v: string) => {
     searchKey.value = v;
   }
diff --git a/src/composables/useRouteQuery.ts b/src/composables/useRouteQuery.ts
new file mode 100644
index 0000000..2727e0c
--- /dev/null
+++ b/src/composables/useRouteQuery.ts
@@ -0,0 +1,58 @@
+import { ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { isValidSearchTabName, isValidSearchKey } from '@/utils/query';
+import { PACKAGE_TYPE_MAPPING, FLITERMENUOPTIONS } from '@/data/query';
+
+// name 软件名称
+export const useRouteQuery = (name: keyof typeof PACKAGE_TYPE_MAPPING) => {
+  const route = useRoute();
+  const router = useRouter();
+
+  const routeKey = ref('');
+  const routeName = ref<string>(PACKAGE_TYPE_MAPPING[name]);
+  const routeType = ref<string>(FLITERMENUOPTIONS[0].id);
+  const routeOs = ref<String[]>([]);
+  const routeArch = ref<String[]>([]);
+  const routeCategory = ref<String[]>([]);
+
+  const getQuery = () => {
+    const { os, arch, q, sort, type, category } = route.query;
+
+    // 搜索参数
+    routeKey.value = q?.toString() || '';
+    routeName.value = isValidSearchTabName(type) ? (type as string) : PACKAGE_TYPE_MAPPING[name];
+    routeType.value = isValidSearchKey(sort) ? encodeURIComponent(sort as string) : FLITERMENUOPTIONS[0].id;
+
+    // 首页跳转参数
+    routeOs.value = os ? [os.toString()] : [];
+    routeArch.value = arch ? [arch.toString()] : [];
+    routeCategory.value = category ? [category as string] : [];
+  };
+  watch(
+    () => route.query,
+    (newQuery) => {
+      if (newQuery.name && !newQuery.q) {
+        router.replace({
+          path: route.path,
+          query: {
+            q: newQuery.name,
+            type: newQuery.tab ?? newQuery.type,
+            sort: newQuery.key ?? newQuery.sort,
+          },
+        });
+      }
+
+      getQuery();
+    },
+    { immediate: true }
+  );
+
+  return {
+    routeKey,
+    routeName,
+    routeType,
+    routeOs,
+    routeArch,
+    routeCategory,
+  };
+};
diff --git a/src/data/nav.ts b/src/data/nav.ts
index 1af7292..ae07871 100644
--- a/src/data/nav.ts
+++ b/src/data/nav.ts
@@ -16,45 +16,13 @@ export const navs = [
     href: '/field',
   },
   {
-    id: 'rpm',
+    id: 'list',
     label: {
-      zh: 'RPM',
-      en: 'RPM',
+      zh: '软件列表',
+      en: '软件列表',
     },
     href: '/rpm',
   },
-  {
-    id: 'image',
-    label: {
-      zh: '应用镜像',
-      en: 'Image',
-    },
-    href: '/image',
-  },
-  // {
-  //   id: 'epkg',
-  //   label: {
-  //     zh: 'EPKG',
-  //     en: 'EPKG',
-  //   },
-  //   href: '/epkg',
-  // },
-  {
-    id: 'oepkg',
-    label: {
-      zh: 'OEPKG',
-      en: 'OEPKG',
-    },
-    href: '/oepkg',
-  },
-  {
-    id: 'conda',
-    label: {
-      zh: 'CONDA',
-      en: 'CONDA',
-    },
-    href: '/conda',
-  },
   {
     id: 'upstream',
     label: {
diff --git a/src/data/query.ts b/src/data/query.ts
index 7e6d1d1..835822f 100644
--- a/src/data/query.ts
+++ b/src/data/query.ts
@@ -6,7 +6,19 @@ const { t } = i18n.global;
 export const TAGS_OPTIONS = ['RPM', 'IMAGE', 'EPKG', 'OEPKG', 'CONDA'];
 
 // 搜索tab参数
-export const TABNAME_OPTIONS = ['all', 'rpmpkg', 'apppkg', 'epkgpkg', 'oepkg', 'condapkg', 'appversion'];
+export const PACKAGE_TYPE_MAPPING = {
+  all: 'all',
+  rpmpkg: 'rpmpkg',
+  rpm: 'rpmpkg',
+  apppkg: 'apppkg',
+  image: 'apppkg',
+  epkgpkg: 'epkgpkg',
+  epkg: 'epkgpkg',
+  oepkg: 'oepkg',
+  condapkg: 'condapkg',
+  conda: 'condapkg',
+  appversion: 'appversion',
+} as const;
 
 // 搜索筛选菜单
 export const FLITERMENUOPTIONS = [
diff --git a/src/i18n/software/software-en.ts b/src/i18n/software/software-en.ts
index 8690d58..a86eae5 100644
--- a/src/i18n/software/software-en.ts
+++ b/src/i18n/software/software-en.ts
@@ -18,6 +18,7 @@ export default {
   filterFile: 'File',
   searchPlaceholder: 'Enter content for search, separate multiple keywords with commas',
   searchPlaceholder1: 'Search',
+  softwareList: 'software List',
 
   viewAll: 'All',
   upList: 'Collapse',
diff --git a/src/i18n/software/software-zh.ts b/src/i18n/software/software-zh.ts
index 315aeb8..40a7102 100644
--- a/src/i18n/software/software-zh.ts
+++ b/src/i18n/software/software-zh.ts
@@ -20,6 +20,7 @@ export default {
   searchPlaceholder1: '搜索',
   searchFilterTips: '为您找到符合条件的筛选{0}个',
   searcResult: '搜索结果',
+  softwareList: '软件列表',
 
   viewAll: '显示全部',
   upList: '收起',
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 0a59ff8..3254ce1 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -75,13 +75,12 @@ export const getTagsIcon = (v: string) => {
     OEPKG: OepkgIcon,
     oepkg: OepkgIcon,
     CONDA: CandaIcon,
-    conda: CandaIcon
+    conda: CandaIcon,
   };
   return iconMap[v];
 };
 
 //提取code
-
 export const getCode = (code: string) => {
   const codeRegex = /<code>(.*?)<\/code>/;
   const match = JSON.stringify(code).match(codeRegex);
@@ -130,64 +129,7 @@ export const getPkgName = (type: string) => {
     oepkg: 'oepkg',
     all: 'filed',
     condapkg: 'conda',
-    conda: 'conda'
+    conda: 'conda',
   };
   return nameMap[type] || '';
 };
-
-// 是否是搜索页面
-import { useRoute } from 'vue-router';
-const route = useRoute();
-export const isSearchPage = () => {
-  return route.name === 'search';
-};
-
-// 去重
-
-export const getTarget = (data: any, key: any) => {
-  const map = new Map();
-  for (const item of data) {
-    if (!map.has(item[key])) {
-      map.set(item[key], item);
-    }
-  }
-  return [...map.values()];
-};
-
-// 输入框文字校验
-export const inputValidator = new RegExp('^[\u4E00-\u9FA5A-Za-z0-9.()$\\-]+$');
-
-/**
- * 对象转URL参数
- * @param queries 要转成query的键值对
- * @returns query字符串，如?key1=value1&key2=value2
- */
-export const generateQuery = (queries: Record<string, any>): string => {
-  const parseResultArr = Object.entries(queries).reduce((arr, [key, value]) => {
-    if (value === undefined || value === null || value === '') {
-      return arr;
-    }
-    arr.push(`${key}=${value}`);
-    return arr;
-  }, [] as string[]);
-  if (parseResultArr?.length) {
-    return `?${parseResultArr.join('&')}`;
-  }
-  return '';
-};
-
-/**
- * 获取指定时区偏移量的年份
- * @param {number} offset - 时区偏移量（单位：小时）。例如，UTC+8 时区，传入 8。
- * @returns {number} - 指定时区偏移量对应的年份
- */
-export const getYearByOffset = () => {
-  // 获取当前时间的 UTC 时间
-  const now = new Date();
-  const utcTime = new Date(now.getTime() + now.getTimezoneOffset() * 60000);
-
-  // 设置偏移
-  utcTime.setHours(utcTime.getHours() + 8);
-
-  return utcTime.getFullYear();
-};
diff --git a/src/utils/query.ts b/src/utils/query.ts
index 96b8171..9f33a50 100644
--- a/src/utils/query.ts
+++ b/src/utils/query.ts
@@ -1,19 +1,7 @@
-import { TAGS_OPTIONS, TABNAME_OPTIONS, FLITERMENUOPTIONS } from '@/data/query';
+import { PACKAGE_TYPE_MAPPING, FLITERMENUOPTIONS } from '@/data/query';
 
 import { isString } from '@opensig/opendesign';
 
-/**
- * 判断 tags 参数是否有效
- * @param {unknown} val 待判断 tags 参数
- * @returns {(boolean|Object)} 有效返回对应的 tags 对象，无效返回 false
- */
-export function isValidTags(val: unknown) {
-  if (!isString(val)) {
-    return false;
-  }
-  return TAGS_OPTIONS.find((option: string) => option === val);
-}
-
 /**
  * 判断搜索 tab 参数是否有效
  * @param {unknown} val 待判断 tab 参数
@@ -23,7 +11,7 @@ export function isValidSearchTabName(val: unknown) {
   if (!isString(val)) {
     return false;
   }
-  return TABNAME_OPTIONS.find((option: string) => option === val);
+  return PACKAGE_TYPE_MAPPING[val as keyof typeof PACKAGE_TYPE_MAPPING] || false;
 }
 
 /**
diff --git a/src/views/conda/CondaContent.vue b/src/views/conda/CondaContent.vue
index afcfc7a..b8f8af2 100644
--- a/src/views/conda/CondaContent.vue
+++ b/src/views/conda/CondaContent.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { ref, watch, computed, onMounted } from 'vue';
-import { OTag, OLink, OIcon, isUndefined } from '@opensig/opendesign';
-
+import { OTag, OLink, OIcon } from '@opensig/opendesign';
+import { useRouteQuery } from '@/composables/useRouteQuery';
 import { getSearchData } from '@/api/api-search';
 import { getSearchAllColumn, getSearchAllFiled } from '@/api/api-domain';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useLocale } from '@/composables/useLocale';
 import { getParamsRules } from '@/utils/common';
-import { isValidSearchTabName, isValidSearchKey } from '@/utils/query';
-import { TABNAME_OPTIONS, FLITERMENUOPTIONS, COUNT_PAGESIZE, SORTPARAMS } from '@/data/query';
+import { PACKAGE_TYPE_MAPPING, COUNT_PAGESIZE, SORTPARAMS } from '@/data/query';
 import { useViewStore } from '@/stores/common';
 import { useSearchStore } from '@/stores/search';
+import { useDebounceFn } from '@vueuse/core';
 
 import FilterCheckbox from '@/components/filter/FilterCheckbox.vue';
 import AppLoading from '@/components/AppLoading.vue';
@@ -24,7 +24,6 @@ const router = useRouter();
 const { t } = useI18n();
 const { locale } = useLocale();
 const searchStore = useSearchStore();
-
 // EPKG-表头
 const columns = [
   { label: t('software.columns.name'), key: 'name', type: 'name' },
@@ -38,7 +37,7 @@ const columns = [
 
 const pkgData = ref([]);
 const PAGE_ID = 'CONDA';
-const tabName = ref(TABNAME_OPTIONS[5]);
+const tabName = ref(PACKAGE_TYPE_MAPPING['conda']);
 const keywordType = ref('');
 const isLoading = ref(false);
 
@@ -123,15 +122,17 @@ const queryAllpkg = () => {
       total.value = 0;
       pkgData.value = [];
       isLoading.value = false;
+      isSearchError.value = true;
     });
 };
 
 // 判断是走es还是sql
 const pageSearch = () => {
   isSearchError.value = false;
-  if (tabName.value === TABNAME_OPTIONS[5]) {
+  if (tabName.value === PACKAGE_TYPE_MAPPING['conda']) {
     isLoading.value = true;
     if (searchKey.value === '') {
+      isSearchDocs.value = false;
       queryAllpkg();
     } else {
       querySearch();
@@ -185,10 +186,11 @@ const resetTag = () => {
 
   timeOrder.value = '';
   nameOrder.value = '';
-
   currentPage.value = 1;
 
-  if ((route.query.os || route.query.arch) && !isPageSearch.value) {
+  const { os, arch } = route.query;
+
+  if ((os || arch) && !isPageSearch.value) {
     router.push({
       path: `/${locale.value}/conda`,
     });
@@ -223,20 +225,42 @@ const handleCurrentChange = (val: number) => {
 // 判断是否是搜索页
 const isPageSearch = ref(false);
 
+// 获取路由参数
+const { routeKey, routeName, routeType, routeOs, routeArch, routeCategory } = useRouteQuery(PACKAGE_TYPE_MAPPING['conda']);
+
+const init = () => {
+  searchKey.value = routeKey.value;
+  keywordType.value = routeType.value;
+  tabName.value = routeName.value;
+  searchOs.value = routeOs.value.length ? routeOs.value : searchOs.value;
+  searchArch.value = routeArch.value.length ? routeArch.value : searchArch.value;
+  searchCategory.value = routeCategory.value.length ? routeCategory.value : searchCategory.value;
+};
+
 onMounted(() => {
   isPageSearch.value = route.name === 'search';
 
-  searchKey.value = route.query?.name ?? route.query?.q ?? '';
-  keywordType.value = route.query?.key ?? route.query?.sort ?? '';
-
+  init();
   queryFilter();
-  handleQueryData();
 });
 
+// 监听领域应用页面搜索，非搜索页面
+watch(
+  () => route.query,
+  () => {
+    init();
+  }
+);
+
+//搜索防抖
+const debouncedFn = useDebounceFn(() => {
+  pageSearch();
+}, 150);
+
 watch(
   () => searchParams.value,
   () => {
-    pageSearch();
+    debouncedFn();
   },
   { deep: true }
 );
@@ -246,53 +270,16 @@ watch(
   () => [searchCategory.value, searchOs.value, searchArch.value],
   () => {
     currentPage.value = 1;
-  },
-  { deep: true }
-);
-
-// -------------------- 监听 url query 变化 触发搜索 ---------------------
-const handleQueryData = () => {
-  const query = route.query;
-  const { name, tab, key, os, arch, q, sort, type } = query;
-  if (!isUndefined(name) && name) {
-    searchKey.value = name?.toString();
-    currentPage.value = 1;
-  } else if (!isUndefined(q) && q) {
-    searchKey.value = q?.toString();
-    currentPage.value = 1;
-  } else {
-    searchKey.value = '';
-    isSearchDocs.value = false;
-  }
-
-  if ((isValidSearchTabName(tab) && tab) || (isValidSearchTabName(type) && type)) {
-    tabName.value = (tab as string) ?? (type as string);
-  } else {
-    tabName.value = TABNAME_OPTIONS[5];
-  }
-  // 判断key参数
-  if ((isValidSearchKey(key) && key) || (isValidSearchKey(sort) && sort)) {
-    keywordType.value = encodeURIComponent((key as string) ?? (sort as string));
-  } else {
-    keywordType.value = FLITERMENUOPTIONS[0].id;
   }
+);
 
-  // 首页社区版本跳转
-  if (!isUndefined(os) && os) {
-    searchOs.value.push(os?.toString());
-  }
-  if (!isUndefined(arch) && arch) {
-    searchArch.value.push(arch?.toString());
-  }
+const changeFilterSearch = (v: string) => {
+  searchKey.value = v;
 };
 
-watch(
-  () => route.query,
-  () => {
-    handleQueryData();
-  },
-  { deep: true }
-);
+const clearFilterSearch = () => {
+  searchKey.value = '';
+};
 </script>
 
 <template>
@@ -326,7 +313,7 @@ watch(
     </div>
 
     <div class="pkg-main">
-      <FilterHeader :title="PAGE_ID" :total="total" />
+      <FilterHeader :title="PAGE_ID" :total="total" @search="changeFilterSearch" @clear="clearFilterSearch" />
       <div v-if="isSearchDocs || searchArch.length > 0 || searchOs.length > 0 || searchCategory.length > 0" class="search-result">
         <p v-if="!isPageSearch" class="text">
           <template v-if="isSearchDocs">
diff --git a/src/views/conda/TheConda.vue b/src/views/conda/TheConda.vue
index 69e4d9e..e29d7ca 100644
--- a/src/views/conda/TheConda.vue
+++ b/src/views/conda/TheConda.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import AppBanner from '@/components/AppBanner.vue';
 import CandaContent from './CondaContent.vue';
-import { homeData } from '@/data/home/index';
 import bannerImg from '@/assets/banner/banner1.jpg';
+import NavTab from '@/components/NavTab.vue';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 
-const bannerInfo = homeData[4];
+const selected = ref('conda');
 </script>
 <template>
-  <AppBanner :title="bannerInfo.name" :background-image="bannerImg" :subtitle="bannerInfo.desc" />
-  <ContentWrapper :vertical-padding="['40px', '72px']" class="pkg-content-wrap">
+  <AppBanner :title="t('software.softwareList')" :background-image="bannerImg">
+    <template #tabs>
+      <NavTab v-model="selected" :router="true" />
+    </template>
+  </AppBanner>
+  <ContentWrapper :vertical-padding="['32px', '72px']" class="pkg-content-wrap">
     <CandaContent />
   </ContentWrapper>
 </template>
diff --git a/src/views/conda/TheCondaDetail.vue b/src/views/conda/TheCondaDetail.vue
index 2195f8b..6e7cd8a 100644
--- a/src/views/conda/TheCondaDetail.vue
+++ b/src/views/conda/TheCondaDetail.vue
@@ -4,7 +4,7 @@ import { isString } from '@opensig/opendesign';
 import { maintainerDefaults } from '@/data/query';
 import { useRoute } from 'vue-router';
 import { useMarkdown } from '@/composables/useMarkdown';
-import type { AppInfoT, MaintainerT, DetailItemT, MoreMessgeT } from '@/@types/app';
+import type { AppInfoT, MaintainerT, DetailItemT } from '@/@types/app';
 import { useI18n } from 'vue-i18n';
 import { getDetails, getVer } from '@/api/api-domain';
 import { useViewStore } from '@/stores/common';
@@ -26,7 +26,6 @@ const tabValue = ref('condapkg');
 const maintainer = ref<MaintainerT>({ maintainerId: '', maintainerEmail: '', maintainerGiteeId: '' });
 
 const security = ref();
-const moreMessge = ref<MoreMessgeT[]>([]);
 const description = ref();
 const appData = ref<AppInfoT>({
   name: '',
diff --git a/src/views/epkg/EpkgContent.vue b/src/views/epkg/EpkgContent.vue
index 6bf1cfc..ce0577f 100644
--- a/src/views/epkg/EpkgContent.vue
+++ b/src/views/epkg/EpkgContent.vue
@@ -9,7 +9,7 @@ import { useI18n } from 'vue-i18n';
 import { useLocale } from '@/composables/useLocale';
 import { getParamsRules } from '@/utils/common';
 import { isValidSearchTabName, isValidSearchKey } from '@/utils/query';
-import { TABNAME_OPTIONS, FLITERMENUOPTIONS, COUNT_PAGESIZE, SORTPARAMS } from '@/data/query';
+import { PACKAGE_TYPE_MAPPING, FLITERMENUOPTIONS, COUNT_PAGESIZE, SORTPARAMS } from '@/data/query';
 import { useViewStore } from '@/stores/common';
 import { useSearchStore } from '@/stores/search';
 
@@ -41,7 +41,7 @@ const columns = [
 
 const pkgData = ref([]);
 
-const tabName = ref(TABNAME_OPTIONS[3]);
+const tabName = ref(PACKAGE_TYPE_MAPPING['epkg']);
 const keywordType = ref('');
 const isLoading = ref(false);
 
@@ -132,7 +132,7 @@ const queryAllpkg = () => {
 // 判断是走es还是sql
 const pageSearch = () => {
   isSearchError.value = false;
-  if (tabName.value === TABNAME_OPTIONS[3]) {
+  if (tabName.value === PACKAGE_TYPE_MAPPING['epkg']) {
     isLoading.value = true;
     if (searchKey.value === '') {
       queryAllpkg();
@@ -225,8 +225,8 @@ const handleCurrentChange = (val: number) => {
 const isPageSearch = ref(false);
 
 onMounted(() => {
-  searchKey.value = route.query?.name ?? route.query?.q ?? '';
-  keywordType.value = route.query?.key ?? route.query?.sort ?? '';
+  searchKey.value = route.query?.q ?? '';
+  keywordType.value = route.query?.sort ?? '';
 
   isPageSearch.value = route.name === 'search';
 
@@ -254,11 +254,8 @@ watch(
 // -------------------- 监听 url query 变化 触发搜索 ---------------------
 const handleQueryData = () => {
   const query = route.query;
-  const { name, tab, key, os, arch, q, sort, type } = query;
-  if (!isUndefined(name) && name) {
-    searchKey.value = name?.toString();
-    currentPage.value = 1;
-  } else if (!isUndefined(q) && q) {
+  const { os, arch, q, sort, type } = query;
+  if (!isUndefined(q) && q) {
     searchKey.value = q?.toString();
     currentPage.value = 1;
   } else {
@@ -266,14 +263,14 @@ const handleQueryData = () => {
     isSearchDocs.value = false;
   }
 
-  if ((isValidSearchTabName(tab) && tab) || (isValidSearchTabName(type) && type)) {
-    tabName.value = (tab as string) ?? (type as string);
+  if (isValidSearchTabName(type) && type) {
+    tabName.value = type as string;
   } else {
-    tabName.value = TABNAME_OPTIONS[3];
+    tabName.value = PACKAGE_TYPE_MAPPING['epkg'];
   }
   // 判断key参数
-  if ((isValidSearchKey(key) && key) || (isValidSearchKey(sort) && sort)) {
-    keywordType.value = encodeURIComponent((key as string) ?? (sort as string));
+  if (isValidSearchKey(sort) && sort) {
+    keywordType.value = encodeURIComponent(sort as string);
   } else {
     keywordType.value = FLITERMENUOPTIONS[0].id;
   }
@@ -294,6 +291,10 @@ watch(
   },
   { deep: true }
 );
+
+const changeFilterSearch = (v: string) => {
+  searchKey.value = v;
+};
 </script>
 
 <template>
@@ -327,7 +328,7 @@ watch(
     </div>
 
     <div class="pkg-main">
-      <FilterHeader title="EPKG" :total="total" />
+      <FilterHeader title="EPKG" :total="total" @search="changeFilterSearch" />
       <div v-if="isSearchDocs || searchArch.length > 0 || searchOs.length > 0 || searchCategory.length > 0" class="search-result">
         <p v-if="!isPageSearch" class="text">
           <template v-if="isSearchDocs">
diff --git a/src/views/field/FieldContent.vue b/src/views/field/FieldContent.vue
index c6cc257..d0b9346 100644
--- a/src/views/field/FieldContent.vue
+++ b/src/views/field/FieldContent.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, computed, onMounted } from 'vue';
-import { ORow, OCol, OTag, OLink, OIcon, isUndefined } from '@opensig/opendesign';
+import { ORow, OCol, OTag, OLink, OIcon } from '@opensig/opendesign';
+import { useRouteQuery } from '@/composables/useRouteQuery';
 import { getSearchData } from '@/api/api-search';
 import { getSearchAllColumn, getSearchAllFiled } from '@/api/api-domain';
 import { useRoute, useRouter } from 'vue-router';
@@ -9,11 +10,12 @@ import { useViewStore } from '@/stores/common';
 import { useSearchStore } from '@/stores/search';
 import { useI18n } from 'vue-i18n';
 import { getParamsRules } from '@/utils/common';
-import { isValidSearchTabName, isValidSearchKey } from '@/utils/query';
-import { TABNAME_OPTIONS, FLITERMENUOPTIONS, COUNT_PAGESIZE_FIELD } from '@/data/query';
+import { PACKAGE_TYPE_MAPPING, COUNT_PAGESIZE_FIELD } from '@/data/query';
+import { useDebounceFn } from '@vueuse/core';
 
 import FilterCheckbox from '@/components/filter/FilterCheckbox.vue';
 import AppLoading from '@/components/AppLoading.vue';
+
 import IconOs from '~icons/pkg/icon-os.svg';
 import IconArch from '~icons/pkg/icon-arch.svg';
 import IconCategory from '~icons/pkg/icon-category.svg';
@@ -25,7 +27,7 @@ const { t } = useI18n();
 const searchStore = useSearchStore();
 
 const pkgData = ref([]);
-const tabName = ref('all');
+const tabName = ref(PACKAGE_TYPE_MAPPING['all']);
 const keywordType = ref('');
 const isLoading = ref(false);
 
@@ -64,7 +66,6 @@ const queryAllpkg = () => {
   };
   // 过滤空参数
   const newData = getParamsRules(params);
-
   getSearchAllFiled(newData)
     .then((res) => {
       pkgData.value = res.data.list;
@@ -78,6 +79,7 @@ const queryAllpkg = () => {
       useViewStore().showNotFound();
       total.value = 0;
       pkgData.value = [];
+      isSearchError.value = true;
       isLoading.value = false;
     });
 };
@@ -94,13 +96,13 @@ const querySearch = () => {
         searchStore.changeNameOrderCount(total.value);
       }
       isSearchDocs.value = true;
+
       if (pkgData.value.length === 0) {
         isSearchError.value = true;
       }
       isLoading.value = false;
     })
     .catch(() => {
-      isSearchError.value = true;
       total.value = 0;
       pkgData.value = [];
       isLoading.value = false;
@@ -158,7 +160,9 @@ const resetTag = () => {
   nameOrder.value = '';
   currentPage.value = 1;
 
-  if ((route.query.type || route.query.os || route.query.arch) && !isPageSearch.value) {
+  const { category, os, arch } = route.query;
+
+  if ((category || os || arch) && !isPageSearch.value) {
     router.push({
       path: `/${locale.value}/field`,
     });
@@ -181,6 +185,7 @@ const changeSortValue = (v: string[] | string) => {
 // 清除input数据
 const clearFilterInput = () => {
   searchKey.value = '';
+  isPageSearch.value = true;
 };
 
 // 分页
@@ -197,9 +202,11 @@ const handleCurrentChange = (val: number) => {
 
 const pageSearch = () => {
   isSearchError.value = false;
-  if (tabName.value === 'all') {
+
+  if (tabName.value === PACKAGE_TYPE_MAPPING['all']) {
     isLoading.value = true;
     if (searchKey.value === '') {
+      isSearchDocs.value = false;
       queryAllpkg();
     } else {
       querySearch();
@@ -210,20 +217,41 @@ const pageSearch = () => {
 // 判断是否是搜索页
 const isPageSearch = ref(false);
 
-onMounted(() => {
-  isPageSearch.value = route.name === 'search';
+// 获取路由参数
+const { routeKey, routeName, routeType, routeOs, routeArch, routeCategory } = useRouteQuery(PACKAGE_TYPE_MAPPING['all']);
 
-  searchKey.value = route.query?.name ?? route.query?.q ?? '';
-  keywordType.value = route.query?.key ?? route.query?.sort ?? '';
+const init = () => {
+  searchKey.value = routeKey.value;
+  keywordType.value = routeType.value;
+  tabName.value = routeName.value;
+  searchOs.value = routeOs.value.length ? routeOs.value : searchOs.value;
+  searchArch.value = routeArch.value.length ? routeArch.value : searchArch.value;
+  searchCategory.value = routeCategory.value.length ? routeCategory.value : searchCategory.value;
+};
 
+onMounted(() => {
+  isPageSearch.value = route.name === 'search';
+  init();
   queryFilter();
-  handleQueryData();
 });
 
+// 监听领域应用页面搜索，非搜索页面
+watch(
+  () => route.query,
+  () => {
+    init();
+  }
+);
+
+//搜索防抖
+const debouncedFn = useDebounceFn(() => {
+  pageSearch();
+}, 150);
+
 watch(
   () => searchParams.value,
   () => {
-    pageSearch();
+    debouncedFn();
   },
   { deep: true }
 );
@@ -237,64 +265,9 @@ watch(
   { deep: true }
 );
 
-// -------------------- 监听 url query 变化 触发搜索 ---------------------
-const handleQueryData = () => {
-  const query = route.query;
-  const { name, tab, key, os, arch, category, q, sort, type } = query;
-
-  if (!isUndefined(name) && name) {
-    searchKey.value = name?.toString();
-    currentPage.value = 1;
-  } else if (!isUndefined(q) && q) {
-    searchKey.value = q?.toString();
-    currentPage.value = 1;
-  } else {
-    searchKey.value = '';
-    isSearchDocs.value = false;
-  }
-
-  if ((isValidSearchTabName(tab) && tab) || (isValidSearchTabName(type) && type)) {
-    tabName.value = (tab as string) ?? (type as string);
-  } else {
-    tabName.value = TABNAME_OPTIONS[0];
-  }
-  // 判断key参数
-  if ((isValidSearchKey(key) && key) || (isValidSearchKey(sort) && sort)) {
-    keywordType.value = encodeURIComponent((key as string) ?? (sort as string));
-  } else {
-    keywordType.value = FLITERMENUOPTIONS[0].id;
-  }
-
-  //判断主页领域应用更多跳转
-  if (!isUndefined(category) && category) {
-    searchCategory.value.push(category as string);
-  }
-
-  // 首页社区版本跳转
-  if (!isUndefined(os) && os) {
-    searchOs.value = os?.toString();
-  }
-  if (!isUndefined(arch) && arch) {
-    searchArch.value = arch?.toString();
-  }
+const changeFilterSearch = (v: string) => {
+  searchKey.value = v;
 };
-
-watch(
-  () => route.query,
-  () => {
-    handleQueryData();
-  },
-  { deep: true }
-);
-
-watch(
-  () => pkgData.value,
-  () => {
-    if (pkgData.value.length > 0) {
-      isSearchError.value = false;
-    }
-  }
-);
 </script>
 
 <template>
@@ -329,7 +302,15 @@ watch(
     </div>
 
     <div class="pkg-main">
-      <FilterHeader title="DOMAIN" :type="tabName" @sort="changeSortValue" :is-clear="isClear" :total="total" @clear="clearFilterInput" />
+      <FilterHeader
+        title="DOMAIN"
+        :type="tabName"
+        @sort="changeSortValue"
+        :is-clear="isClear"
+        :total="total"
+        @clear="clearFilterInput"
+        @search="changeFilterSearch"
+      />
 
       <div v-if="isSearchDocs || searchOs || searchArch || searchCategory.length > 0" class="search-result">
         <p v-if="!isPageSearch" class="text">
diff --git a/src/views/field/TheFieldDetail.vue b/src/views/field/TheFieldDetail.vue
index a85450f..d6b7e42 100644
--- a/src/views/field/TheFieldDetail.vue
+++ b/src/views/field/TheFieldDetail.vue
@@ -1,18 +1,16 @@
 <script lang="ts" setup>
 import { ref, onMounted, type PropType, computed, provide, reactive } from 'vue';
-import { OTab, OTabPane, OIcon } from '@opensig/opendesign';
+import { OTab, OTabPane, OIcon, isString } from '@opensig/opendesign';
 import { useRoute, useRouter } from 'vue-router';
 import { getDetail, getTags, getVer } from '@/api/api-domain';
 import { useMarkdown } from '@/composables/useMarkdown';
 import type { AppInfoT, MaintainerT, DetailItemT, MoreMessgeT, PkgTypeT } from '@/@types/app';
 import { maintainerDefaults } from '@/data/query';
-import { isValidTags } from '@/utils/query';
 import { tagList } from '@/data/detail/index';
 import { useI18n } from 'vue-i18n';
 import { useLocale } from '@/composables/useLocale';
 import { useViewStore } from '@/stores/common';
-import type { ParamsKeyT } from '@/@types/detail';
-import { getCode } from '@/utils/common';
+import { getCode, getParamsRules } from '@/utils/common';
 import useDetailPageAnalytics from '@/composables/useDetailPageAnalytics';
 
 import AppFeedback from '@/components/AppFeedback.vue';
@@ -59,17 +57,12 @@ const appData = ref<AppInfoT>({
   security: '',
 });
 
-// 过滤空参数
-const filterEmptyParams = (data: any) => {
-  const newData = {} as any;
-  Object.keys(data).forEach((key) => {
-    const value = data[key as keyof ParamsKeyT];
-    if (value) {
-      newData[key] = value;
-    }
-  });
-  return newData;
-};
+function isValidTags(val: unknown) {
+  if (!isString(val)) {
+    return false;
+  }
+  return TAGS_OPTIONS.find((option: string) => option === val);
+}
 
 // 获取tab分类
 const tabList = ref([] as PropType<PkgTypeT>);
@@ -89,15 +82,18 @@ provide(currentFieldDetailTabInjection, activeName);
 const queryEntity = () => {
   const query = route.query;
   const { type, appPkgId, epkgPkgId, rpmPkgId, oepkgPkgId, condaPkgId } = query;
-  getDetail(
-    filterEmptyParams({
-      appPkgId: (appPkgId as string) || '',
-      epkgPkgId: (epkgPkgId as string) || '',
-      rpmPkgId: (rpmPkgId as string) || '',
-      oepkgPkgId: (oepkgPkgId as string) || '',
-      condaPkgId: (condaPkgId as string) || '',
-    })
-  )
+
+  const params = {
+    appPkgId: (appPkgId as string) || '',
+    epkgPkgId: (epkgPkgId as string) || '',
+    rpmPkgId: (rpmPkgId as string) || '',
+    oepkgPkgId: (oepkgPkgId as string) || '',
+    condaPkgId: (condaPkgId as string) || '',
+  };
+
+  const newData = getParamsRules(params);
+
+  getDetail(newData)
     .then((res) => {
       const data = res.data;
       tabList.value = data.tags;
diff --git a/src/views/image/ImageCard.vue b/src/views/image/ImageCard.vue
new file mode 100644
index 0000000..dadb508
--- /dev/null
+++ b/src/views/image/ImageCard.vue
@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+import { type PropType, ref, onMounted } from 'vue';
+import { OCard, OTag } from '@opensig/opendesign';
+import type { AppItemT, PkgIdsT } from '@/@types/app';
+import { useRoute } from 'vue-router';
+import { useTheme } from '@/composables/useTheme';
+
+import defaultImg from '@/assets/default-logo.png';
+import { oaReport, searchReport } from '@/shared/analytics';
+
+const props = defineProps({
+  data: {
+    type: Object as PropType<AppItemT>,
+    default: () => {},
+  },
+  fieldName: {
+    type: String,
+    required: false,
+  },
+});
+const route = useRoute();
+const { isDark } = useTheme();
+
+const jumpTo = (id: PkgIdsT) => {
+  return `/zh/image/detail?pkgId=${id}`;
+};
+
+// 判断是否是搜索页
+const isPageSearch = ref(false);
+
+onMounted(() => {
+  isPageSearch.value = route.name === 'search';
+});
+
+const reportAnalytics = (data: Record<string, any>, event = 'click') => {
+  let module: string;
+  if (isPageSearch.value) {
+    module = 'search_page';
+  } else {
+    module = 'image';
+  }
+  if (isPageSearch.value) {
+    searchReport(
+      event,
+      {
+        module,
+        app_name: xssAllTag(props.data.name),
+        version: props.data.version,
+        os_version: props.data.os,
+        architecture: props.data.arch,
+        ...data,
+      },
+      { immediate: true }
+    );
+    return;
+  }
+  oaReport(
+    event,
+    {
+      module,
+      app_name: xssAllTag(props.data.name),
+      version: props.data.version,
+      os_version: props.data.os,
+      architecture: props.data.arch,
+      ...data,
+    },
+    { immediate: true }
+  );
+};
+
+const onClickLink = (event: MouseEvent) => {
+  const target = event.currentTarget as HTMLElement;
+
+  if (isPageSearch.value) {
+    const tab = route.query.tab ?? route.query?.type ?? '';
+    const content = route.query?.name ?? route.query?.q ?? '';
+    reportAnalytics({
+      tab,
+      type: 'search_content',
+      target: target.textContent,
+      content,
+    });
+    return;
+  }
+
+  reportAnalytics({
+    type: 'go_detail',
+    target: target.textContent,
+  });
+};
+</script>
+
+<template>
+  <OCard
+    :style="{
+      height: '100%',
+      '--card-main-padding': '24px',
+    }"
+    hoverable
+    class="o-card-pkg"
+    :class="{ search: isPageSearch }"
+  >
+    <template #main>
+      <div class="pkg-info">
+        <a :href="jumpTo(data.pkgId)" @click="onClickLink" target="_blank" rel="noopener" class="name-info">
+          <span v-dompurify-html="data.name" class="name"></span>
+        </a>
+        <div class="pkg-icon"><img :src="data.iconUrl || defaultImg" class="icon" :class="{ 'default-img': !data.iconUrl }" /></div>
+      </div>
+      <div class="pkg-box">
+        <p v-if="data.imageTags" v-dompurify-html="data.imageTags" class="desc" :class="{ dark: isDark }"></p>
+        <p v-if="data.description" v-dompurify-html="data.description" class="desc" :class="{ dark: isDark }"></p>
+        <p v-if="data.category" class="category"><span class="label">领域</span>{{ data.category }}</p>
+        <p v-if="data.arch" class="arch">
+          <span class="label">架构</span><OTag variant="outline">{{ data.arch }}</OTag>
+        </p>
+      </div>
+    </template>
+  </OCard>
+</template>
+
+<style lang="scss" scoped>
+:deep(.o-card-main) {
+  &:hover {
+    .name-info {
+      color: var(--o-color-primary1);
+    }
+  }
+  .pkg-info {
+    display: flex;
+    height: 60px;
+    align-items: flex-start;
+  }
+  .pkg-icon {
+    height: 32px;
+    width: 64px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+  .name-info {
+    @include h3;
+    color: var(--o-color-info1);
+    flex: 1;
+    word-break: break-word;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    display: -webkit-box;
+    height: 60px;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    position: relative;
+    word-break: break-all;
+    .name span {
+      color: var(--o-color-primary1);
+    }
+  }
+  .pkg-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .desc {
+      margin-bottom: 12px;
+    }
+    .category,
+    .arch {
+      margin-top: 6px;
+      color: var(--o-color-info2);
+      display: flex;
+      align-items: center;
+      @include tip1;
+      .label {
+        width: 60px;
+        color: var(--o-color-info3);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/image/ImageContent.vue b/src/views/image/ImageContent.vue
index 1667c4b..49b5126 100644
--- a/src/views/image/ImageContent.vue
+++ b/src/views/image/ImageContent.vue
@@ -1,19 +1,21 @@
 <script lang="ts" setup>
 import { ref, watch, computed, onMounted } from 'vue';
-import { OTag, OLink, OIcon, isUndefined } from '@opensig/opendesign';
+import { OTag, OLink, OIcon, ORow, OCol } from '@opensig/opendesign';
 import { getSearchData } from '@/api/api-search';
 import { useRoute, useRouter } from 'vue-router';
 import { getSearchAllFiled, getSearchAllColumn } from '@/api/api-domain';
 import { useI18n } from 'vue-i18n';
-import { isValidSearchTabName, isValidSearchKey } from '@/utils/query';
-import { TABNAME_OPTIONS, FLITERMENUOPTIONS, COUNT_PAGESIZE, SORTPARAMS } from '@/data/query';
+import { useRouteQuery } from '@/composables/useRouteQuery';
+import { PACKAGE_TYPE_MAPPING, COUNT_PAGESIZE } from '@/data/query';
 import { getParamsRules } from '@/utils/common';
 import { useViewStore } from '@/stores/common';
 import { useSearchStore } from '@/stores/search';
 import { useLocale } from '@/composables/useLocale';
+import { useDebounceFn } from '@vueuse/core';
 
 import FilterCheckbox from '@/components/filter/FilterCheckbox.vue';
 import AppLoading from '@/components/AppLoading.vue';
+import ImageCard from './ImageCard.vue';
 import IconOs from '~icons/pkg/icon-os.svg';
 import IconArch from '~icons/pkg/icon-arch.svg';
 import IconCategory from '~icons/pkg/icon-category.svg';
@@ -24,20 +26,10 @@ const { t } = useI18n();
 const router = useRouter();
 const searchStore = useSearchStore();
 
-// 软件包-表头
-const columns = [
-  { label: t('software.columns.imageName'), key: 'name', type: 'name' },
-  { label: 'Tag', key: 'appVer', type: 'tag' },
-  { label: t('software.columns.os'), key: 'os', type: 'os' },
-  { label: t('software.columns.arch'), key: 'arch', type: 'arch' },
-  { label: t('software.columns.category'), key: 'category', type: 'category' },
-  { label: t('software.columns.operation'), key: 'operation', type: 'operation' },
-];
-
 //  ------------  main ------------
 const pkgData = ref([]);
 
-const tabName = ref(TABNAME_OPTIONS[2]);
+const tabName = ref(PACKAGE_TYPE_MAPPING['apppkg']);
 const nameOrder = ref('');
 const keywordType = ref('');
 const isLoading = ref(false);
@@ -118,15 +110,17 @@ const queryAllpkg = () => {
       total.value = 0;
       pkgData.value = [];
       isLoading.value = false;
+      isSearchError.value = true;
     });
 };
 
 // 判断是走es还是sql
 const pageSearch = () => {
   isSearchError.value = false;
-  if (tabName.value === TABNAME_OPTIONS[2]) {
+  if (tabName.value === PACKAGE_TYPE_MAPPING['apppkg']) {
     isLoading.value = true;
     if (searchKey.value === '') {
+      isSearchDocs.value = false;
       queryAllpkg();
     } else {
       querySearch();
@@ -180,7 +174,9 @@ const resetTag = () => {
   nameOrder.value = '';
   currentPage.value = 1;
 
-  if ((route.query.os || route.query.arch) && !isPageSearch.value) {
+  const { os, arch } = route.query;
+
+  if ((os || arch) && !isPageSearch.value) {
     router.push({
       path: `/${locale.value}/image`,
     });
@@ -191,19 +187,9 @@ const filterList = computed(() => {
   return [...searchArch.value, ...searchOs.value, ...searchCategory.value];
 });
 
-const changeSortBy = (v: string[]) => {
-  nameOrder.value = '';
-  if (Array.isArray(v)) {
-    if (v[0] === 'name') {
-      nameOrder.value = SORTPARAMS[v[1]];
-    }
-  }
-  currentPage.value = 1;
-};
-
 // 分页
 const currentPage = ref(1);
-const pageSize = ref(20);
+const pageSize = ref(12);
 const total = ref(0);
 const handleSizeChange = (val: number) => {
   pageSize.value = val;
@@ -216,20 +202,41 @@ const handleCurrentChange = (val: number) => {
 // 判断是否是搜索页
 const isPageSearch = ref(false);
 
-onMounted(() => {
-  searchKey.value = route.query?.name ?? route.query?.q ?? '';
-  keywordType.value = route.query?.key ?? route.query?.sort ?? '';
+// 获取路由参数
+const { routeKey, routeName, routeType, routeOs, routeArch, routeCategory } = useRouteQuery(PACKAGE_TYPE_MAPPING['apppkg']);
 
-  isPageSearch.value = route.name === 'search';
+const init = () => {
+  searchKey.value = routeKey.value;
+  keywordType.value = routeType.value;
+  tabName.value = routeName.value;
+  searchOs.value = routeOs.value.length ? routeOs.value : searchOs.value;
+  searchArch.value = routeArch.value.length ? routeArch.value : searchArch.value;
+  searchCategory.value = routeCategory.value.length ? routeCategory.value : searchCategory.value;
+};
 
+onMounted(() => {
+  isPageSearch.value = route.name === 'search';
+  init();
   queryFilter();
-  handleQueryData();
 });
 
+// 监听领域应用页面搜索，非搜索页面
+watch(
+  () => route.query,
+  () => {
+    init();
+  }
+);
+
+//搜索防抖
+const debouncedFn = useDebounceFn(() => {
+  pageSearch();
+}, 150);
+
 watch(
   () => searchParams.value,
   () => {
-    pageSearch();
+    debouncedFn();
   },
   { deep: true }
 );
@@ -243,49 +250,13 @@ watch(
   { deep: true }
 );
 
-// -------------------- 监听 url query 变化 触发搜索 ---------------------
-const handleQueryData = () => {
-  const query = route.query;
-  const { name, tab, key, os, arch, q, sort, type } = query;
-  if (!isUndefined(name) && name) {
-    searchKey.value = name?.toString();
-    currentPage.value = 1;
-  } else if (!isUndefined(q) && q) {
-    searchKey.value = q?.toString();
-    currentPage.value = 1;
-  } else {
-    searchKey.value = '';
-    isSearchDocs.value = false;
-  }
-
-  if ((isValidSearchTabName(tab) && tab) || (isValidSearchTabName(type) && type)) {
-    tabName.value = (tab as string) ?? (type as string);
-  } else {
-    tabName.value = TABNAME_OPTIONS[2];
-  }
-  // 判断key参数
-  if ((isValidSearchKey(key) && key) || (isValidSearchKey(sort) && sort)) {
-    keywordType.value = encodeURIComponent((key as string) ?? (sort as string));
-  } else {
-    keywordType.value = FLITERMENUOPTIONS[0].id;
-  }
-
-  // 首页社区版本跳转
-  if (!isUndefined(os) && os) {
-    searchOs.value.push(os?.toString());
-  }
-  if (!isUndefined(arch) && arch) {
-    searchArch.value.push(arch?.toString());
-  }
+const changeFilterSearch = (v: string) => {
+  searchKey.value = v;
 };
 
-watch(
-  () => route.query,
-  () => {
-    handleQueryData();
-  },
-  { deep: true }
-);
+const clearFilterSearch = () => {
+  searchKey.value = '';
+};
 </script>
 
 <template>
@@ -320,7 +291,7 @@ watch(
     </div>
 
     <div class="pkg-main">
-      <FilterHeader title="IMAGE" :total="total" />
+      <FilterHeader title="IMAGE" :total="total" @search="changeFilterSearch" @clear="clearFilterSearch" />
       <div v-if="isSearchDocs || filterList.length > 0" class="search-result">
         <p v-if="!isPageSearch" class="text">
           <template v-if="isSearchDocs">
@@ -340,11 +311,16 @@ watch(
           <OLink color="primary" class="resetting" @click="resetTag">{{ t('software.filterSider.clear') }}</OLink>
         </div>
       </div>
-      <div class="pkg-content" :class="pkgData.length === 0 && isLoading ? 'loading' : ''">
+      <div class="pkg-content" :class="pkgData.length === 0 && !isSearchError ? 'loading' : ''">
         <AppLoading :loading="isLoading" />
         <ResultNoApp v-if="isSearchError" type="应用镜像" />
         <div v-if="pkgData.length !== 0 && !isSearchError" class="pkg-panel">
-          <OTableItemNew :data="pkgData" :columns="columns" :type="tabName" @sort="changeSortBy" />
+          <ORow gap="32px" flex-wrap="wrap">
+            <OCol v-for="(subItem, index) in pkgData" :key="index" flex="0 1 33.33%" :laptop="{ flex: '0 1 33.33%' }">
+              <ImageCard :data="subItem" />
+            </OCol>
+          </ORow>
+
           <div v-if="total > COUNT_PAGESIZE[0]" class="pagination-box">
             <AppPagination :current="currentPage" :pagesize="pageSize" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
           </div>
diff --git a/src/views/image/TheImage.vue b/src/views/image/TheImage.vue
index 5b62aff..a0a3d22 100644
--- a/src/views/image/TheImage.vue
+++ b/src/views/image/TheImage.vue
@@ -1,15 +1,21 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import ImageContent from './ImageContent.vue';
 import AppBanner from '@/components/AppBanner.vue';
-import { homeData } from '@/data/home/index';
-
 import bannerImg from '@/assets/banner/banner1.jpg';
+import NavTab from '@/components/NavTab.vue';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 
-const bannerInfo = homeData[2];
+const selected = ref('image');
 </script>
 <template>
-  <AppBanner :title="bannerInfo.name" :background-image="bannerImg" :subtitle="bannerInfo.desc" />
-  <ContentWrapper :vertical-padding="['40px', '72px']" class="pkg-content-wrap">
+  <AppBanner :title="t('software.softwareList')" :background-image="bannerImg">
+    <template #tabs>
+      <NavTab v-model="selected" :router="true" />
+    </template>
+  </AppBanner>
+  <ContentWrapper :vertical-padding="['32px', '72px']" class="pkg-content-wrap">
     <ImageContent />
   </ContentWrapper>
 </template>
diff --git a/src/views/oepkg/OEpkgContent.vue b/src/views/oepkg/OEpkgContent.vue
index bd6fe15..cbcb50b 100644
--- a/src/views/oepkg/OEpkgContent.vue
+++ b/src/views/oepkg/OEpkgContent.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { ref, watch, computed, onMounted } from 'vue';
-import { OTag, OLink, OIcon, isUndefined } from '@opensig/opendesign';
-
+import { OTag, OLink, OIcon } from '@opensig/opendesign';
+import { useRouteQuery } from '@/composables/useRouteQuery';
 import { getSearchData } from '@/api/api-search';
 import { getSearchAllFiled, getSearchAllColumn } from '@/api/api-domain';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { getParamsRules } from '@/utils/common';
-import { isValidSearchTabName, isValidSearchKey } from '@/utils/query';
-import { TABNAME_OPTIONS, FLITERMENUOPTIONS, COUNT_PAGESIZE, SORTPARAMS } from '@/data/query';
+import { PACKAGE_TYPE_MAPPING, COUNT_PAGESIZE, SORTPARAMS } from '@/data/query';
 import { useViewStore } from '@/stores/common';
 import { useSearchStore } from '@/stores/search';
 import { useLocale } from '@/composables/useLocale';
+import { useDebounceFn } from '@vueuse/core';
 
 import FilterCheckbox from '@/components/filter/FilterCheckbox.vue';
 import AppLoading from '@/components/AppLoading.vue';
@@ -41,7 +41,7 @@ const columns = [
 
 const pkgData = ref([]);
 
-const tabName = ref(TABNAME_OPTIONS[4]);
+const tabName = ref(PACKAGE_TYPE_MAPPING['oepkg']);
 const keywordType = ref('');
 const isLoading = ref(true);
 
@@ -126,6 +126,7 @@ const queryAllpkg = () => {
       useViewStore().showNotFound();
       total.value = 0;
       pkgData.value = [];
+      isSearchError.value = true;
     });
 };
 
@@ -133,9 +134,10 @@ const queryAllpkg = () => {
 const pageSearch = () => {
   isSearchError.value = false;
 
-  if (tabName.value === TABNAME_OPTIONS[4]) {
+  if (tabName.value === PACKAGE_TYPE_MAPPING['oepkg']) {
     isLoading.value = true;
     if (searchKey.value === '') {
+      isSearchDocs.value = false;
       queryAllpkg();
     } else {
       querySearch();
@@ -190,13 +192,13 @@ const resetTag = () => {
   searchArch.value = [];
   searchCategory.value = [];
   isSearchDocs.value = false;
-
   timeOrder.value = '';
   nameOrder.value = '';
-
   currentPage.value = 1;
 
-  if ((route.query.os || route.query.arch) && !isPageSearch.value) {
+  const { os, arch } = route.query;
+
+  if ((os || arch) && !isPageSearch.value) {
     router.push({
       path: `/${locale.value}/oepkg`,
     });
@@ -231,20 +233,42 @@ const handleCurrentChange = (val: number) => {
 // 判断是否是搜索页
 const isPageSearch = ref(false);
 
-onMounted(() => {
-  searchKey.value = route.query?.name ?? route.query?.q ?? '';
-  keywordType.value = route.query?.key ?? route.query?.sort ?? '';
+// 获取路由参数
+const { routeKey, routeName, routeType, routeOs, routeArch, routeCategory } = useRouteQuery(PACKAGE_TYPE_MAPPING['oepkg']);
+
+const init = () => {
+  searchKey.value = routeKey.value;
+  keywordType.value = routeType.value;
+  tabName.value = routeName.value;
+  searchOs.value = routeOs.value.length ? routeOs.value : searchOs.value;
+  searchArch.value = routeArch.value.length ? routeArch.value : searchArch.value;
+  searchCategory.value = routeCategory.value.length ? routeCategory.value : searchCategory.value;
+};
 
+onMounted(() => {
   isPageSearch.value = route.name === 'search';
 
+  init();
   queryFilter();
-  handleQueryData();
 });
 
+// 监听领域应用页面搜索，非搜索页面
+watch(
+  () => route.query,
+  () => {
+    init();
+  }
+);
+
+//搜索防抖
+const debouncedFn = useDebounceFn(() => {
+  pageSearch();
+}, 150);
+
 watch(
   () => searchParams.value,
   () => {
-    pageSearch();
+    debouncedFn();
   },
   { deep: true }
 );
@@ -258,49 +282,13 @@ watch(
   { deep: true }
 );
 
-// -------------------- 监听 url query 变化 触发搜索 ---------------------
-const handleQueryData = () => {
-  const query = route.query;
-  const { name, tab, key, os, arch, q, sort, type } = query;
-  if (!isUndefined(name) && name) {
-    searchKey.value = name?.toString();
-    currentPage.value = 1;
-  } else if (!isUndefined(q) && q) {
-    searchKey.value = q?.toString();
-    currentPage.value = 1;
-  } else {
-    searchKey.value = '';
-    isSearchDocs.value = false;
-  }
-
-  if ((isValidSearchTabName(tab) && tab) || (isValidSearchTabName(type) && type)) {
-    tabName.value = (tab as string) ?? (type as string);
-  } else {
-    tabName.value = TABNAME_OPTIONS[4];
-  }
-  // 判断key参数
-  if ((isValidSearchKey(key) && key) || (isValidSearchKey(sort) && sort)) {
-    keywordType.value = encodeURIComponent((key as string) ?? (sort as string));
-  } else {
-    keywordType.value = FLITERMENUOPTIONS[0].id;
-  }
-
-  // 首页社区版本跳转
-  if (!isUndefined(os) && os) {
-    searchOs.value.push(os?.toString());
-  }
-  if (!isUndefined(arch) && arch) {
-    searchArch.value.push(arch?.toString());
-  }
+const changeFilterSearch = (v: string) => {
+  searchKey.value = v;
 };
 
-watch(
-  () => route.query,
-  () => {
-    handleQueryData();
-  },
-  { deep: true }
-);
+const clearFilterSearch = () => {
+  searchKey.value = '';
+};
 </script>
 
 <template>
@@ -334,7 +322,7 @@ watch(
     </div>
 
     <div class="pkg-main">
-      <FilterHeader title="OEPKG" :total="total" />
+      <FilterHeader title="OEPKG" :total="total" @search="changeFilterSearch" @clear="clearFilterSearch" />
       <div v-if="isSearchDocs || filterLength > 0" class="search-result">
         <p v-if="!isPageSearch" class="text">
           <template v-if="isSearchDocs">
diff --git a/src/views/oepkg/TheOEpkg.vue b/src/views/oepkg/TheOEpkg.vue
index 24f96b7..88e301b 100644
--- a/src/views/oepkg/TheOEpkg.vue
+++ b/src/views/oepkg/TheOEpkg.vue
@@ -1,14 +1,22 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import AppBanner from '@/components/AppBanner.vue';
 import OEpkgContent from './OEpkgContent.vue';
-import { homeData } from '@/data/home/index';
 import bannerImg from '@/assets/banner/banner1.jpg';
 
-const bannerInfo = homeData[3];
+import NavTab from '@/components/NavTab.vue';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+
+const selected = ref('oepkg');
 </script>
 <template>
-  <AppBanner :title="bannerInfo.name" :background-image="bannerImg" :subtitle="bannerInfo.desc" />
-  <ContentWrapper :vertical-padding="['40px', '72px']" class="pkg-content-wrap">
+  <AppBanner :title="t('software.softwareList')" :background-image="bannerImg">
+    <template #tabs>
+      <NavTab v-model="selected" :router="true" />
+    </template>
+  </AppBanner>
+  <ContentWrapper :vertical-padding="['32px', '72px']" class="pkg-content-wrap">
     <OEpkgContent />
   </ContentWrapper>
 </template>
diff --git a/src/views/package/RpmContent.vue b/src/views/package/RpmContent.vue
index 8ffb7cb..b969dea 100644
--- a/src/views/package/RpmContent.vue
+++ b/src/views/package/RpmContent.vue
@@ -1,16 +1,17 @@
 <script lang="ts" setup>
 import { ref, watch, computed, onMounted } from 'vue';
-import { OTag, OLink, OIcon, isUndefined } from '@opensig/opendesign';
+import { OTag, OLink, OIcon } from '@opensig/opendesign';
 import { useI18n } from 'vue-i18n';
+import { useRouteQuery } from '@/composables/useRouteQuery';
 import { getSearchData } from '@/api/api-search';
 import { useRoute, useRouter } from 'vue-router';
 import { useLocale } from '@/composables/useLocale';
 import { getSearchAllFiled, getSearchAllColumn } from '@/api/api-domain';
-import { isValidSearchTabName, isValidSearchKey } from '@/utils/query';
-import { TABNAME_OPTIONS, FLITERMENUOPTIONS, COUNT_PAGESIZE, SORTPARAMS } from '@/data/query';
+import { PACKAGE_TYPE_MAPPING, COUNT_PAGESIZE, SORTPARAMS } from '@/data/query';
 import { getParamsRules } from '@/utils/common';
 import { useViewStore } from '@/stores/common';
 import { useSearchStore } from '@/stores/search';
+import { useDebounceFn } from '@vueuse/core';
 
 import FilterCheckbox from '@/components/filter/FilterCheckbox.vue';
 import AppLoading from '@/components/AppLoading.vue';
@@ -39,7 +40,7 @@ const columns = [
 //  ------------  main ------------
 const pkgData = ref([]);
 
-const tabName = ref(TABNAME_OPTIONS[1]);
+const tabName = ref(PACKAGE_TYPE_MAPPING['rpmpkg']);
 const keywordType = ref('');
 const isLoading = ref(false);
 const timeOrder = ref('');
@@ -122,15 +123,18 @@ const queryAllpkg = () => {
       total.value = 0;
       pkgData.value = [];
       isLoading.value = false;
+      isSearchError.value = true;
     });
 };
 
 // 判断是走es还是sql
 const pageSearch = () => {
   isSearchError.value = false;
-  if (tabName.value === TABNAME_OPTIONS[1]) {
+
+  if (tabName.value === PACKAGE_TYPE_MAPPING['rpmpkg']) {
     isLoading.value = true;
     if (searchKey.value === '') {
+      isSearchDocs.value = false;
       queryAllpkg();
     } else {
       querySearch();
@@ -188,7 +192,9 @@ const handleResettingTag = () => {
   timeOrder.value = '';
   currentPage.value = 1;
 
-  if (route.query.os || route.query.arch) {
+  const { os, arch } = route.query;
+
+  if (os || arch) {
     router.push({
       path: `/${locale.value}/rpm`,
     });
@@ -223,84 +229,61 @@ const handleCurrentChange = (val: number) => {
 // 判断是否是搜索页
 const isPageSearch = ref(false);
 
-onMounted(() => {
-  searchKey.value = route.query?.name ?? route.query?.q ?? '';
-  keywordType.value = route.query?.key ?? route.query?.sort ?? '';
+// 获取路由参数
+const { routeKey, routeName, routeType, routeOs, routeArch, routeCategory } = useRouteQuery(PACKAGE_TYPE_MAPPING['rpmpkg']);
 
+const init = () => {
+  searchKey.value = routeKey.value;
+  keywordType.value = routeType.value;
+  tabName.value = routeName.value;
+  searchOs.value = routeOs.value.length ? routeOs.value : searchOs.value;
+  searchArch.value = routeArch.value.length ? routeArch.value : searchArch.value;
+  searchCategory.value = routeCategory.value.length ? routeCategory.value : searchCategory.value;
+};
+
+onMounted(() => {
   isPageSearch.value = route.name === 'search';
 
+  init();
   queryFilter();
-  handleQueryData();
 });
 
-watch(
-  () => searchParams.value,
-  () => {
-    pageSearch();
-  },
-  { deep: true }
-);
+const changeFilterSearch = (v: string) => {
+  searchKey.value = v;
+};
 
-// 参数变化分页器还原
+const clearFilterSearch = () => {
+  searchKey.value = '';
+};
+
+// 监听领域应用页面搜索，非搜索页面
 watch(
-  () => [searchCategory.value, searchOs.value, searchArch.value, nameOrder.value, timeOrder.value],
+  () => route.query,
   () => {
-    currentPage.value = 1;
-  },
-  { deep: true }
-);
-
-// -------------------- 监听 url query 变化 触发搜索 ---------------------
-const handleQueryData = () => {
-  const query = route.query;
-  const { name, tab, key, os, arch, q, sort, type } = query;
-  if (!isUndefined(name) && name) {
-    searchKey.value = name?.toString();
-    currentPage.value = 1;
-  } else if (!isUndefined(q) && q) {
-    searchKey.value = q?.toString();
-    currentPage.value = 1;
-  } else {
-    searchKey.value = '';
-    isSearchDocs.value = false;
-  }
-
-  if ((isValidSearchTabName(tab) && tab) || (isValidSearchTabName(type) && type)) {
-    tabName.value = (tab as string) ?? (type as string);
-  } else {
-    tabName.value = TABNAME_OPTIONS[1];
-  }
-  // 判断key参数
-  if ((isValidSearchKey(key) && key) || (isValidSearchKey(sort) && sort)) {
-    keywordType.value = encodeURIComponent((key as string) ?? (sort as string));
-  } else {
-    keywordType.value = FLITERMENUOPTIONS[0].id;
+    init();
   }
+);
 
-  // 首页社区版本跳转
-  if (!isUndefined(os) && os) {
-    searchOs.value.push(os?.toString());
-  }
-  if (!isUndefined(arch) && arch) {
-    searchArch.value.push(arch?.toString());
-  }
-};
+//搜索防抖
+const debouncedFn = useDebounceFn(() => {
+  pageSearch();
+}, 150);
 
 watch(
-  () => route.query,
+  () => searchParams.value,
   () => {
-    handleQueryData();
+    debouncedFn();
   },
   { deep: true }
 );
 
+// 参数变化分页器还原
 watch(
-  () => pkgData.value,
+  () => [searchCategory.value, searchOs.value, searchArch.value],
   () => {
-    if (pkgData.value.length > 0) {
-      isSearchError.value = false;
-    }
-  }
+    currentPage.value = 1;
+  },
+  { deep: true }
 );
 </script>
 
@@ -335,7 +318,7 @@ watch(
     </div>
 
     <div class="pkg-main">
-      <FilterHeader title="RPM" :total="total" />
+      <FilterHeader title="RPM" :total="total" @search="changeFilterSearch" @clear="clearFilterSearch" />
       <div v-if="isSearchDocs || searchArch.length > 0 || searchOs.length > 0 || searchCategory.length > 0" class="search-result">
         <p v-if="!isPageSearch" class="text">
           <template v-if="isSearchDocs">
diff --git a/src/views/package/TheRpm.vue b/src/views/package/TheRpm.vue
index 0e659d0..939a5ef 100644
--- a/src/views/package/TheRpm.vue
+++ b/src/views/package/TheRpm.vue
@@ -1,15 +1,21 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import AppBanner from '@/components/AppBanner.vue';
 import RpmContent from './RpmContent.vue';
-import { homeData } from '@/data/home/index';
-
 import bannerImg from '@/assets/banner/banner1.jpg';
+import NavTab from '@/components/NavTab.vue';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 
-const bannerInfo = homeData[1];
+const selected = ref('rpm');
 </script>
 <template>
-  <AppBanner :title="bannerInfo.name" :background-image="bannerImg" :subtitle="bannerInfo.desc" />
-  <ContentWrapper :vertical-padding="['40px', '72px']" class="pkg-content-wrap">
+  <AppBanner :title="t('software.softwareList')" :background-image="bannerImg">
+    <template #tabs>
+      <NavTab v-model="selected" :router="true" />
+    </template>
+  </AppBanner>
+  <ContentWrapper :vertical-padding="['32px', '72px']" class="pkg-content-wrap">
     <RpmContent />
   </ContentWrapper>
 </template>
diff --git a/src/views/package/TheRpmDetail.vue b/src/views/package/TheRpmDetail.vue
index b44fd90..41edad2 100644
--- a/src/views/package/TheRpmDetail.vue
+++ b/src/views/package/TheRpmDetail.vue
@@ -8,7 +8,7 @@ import type { AppInfoT, MaintainerT, DetailItemT, MoreMessgeT } from '@/@types/a
 import { getDetails, getVer } from '@/api/api-domain';
 import { useViewStore } from '@/stores/common';
 import { useI18n } from 'vue-i18n';
-import { TABNAME_OPTIONS } from '@/data/query';
+import { PACKAGE_TYPE_MAPPING } from '@/data/query';
 
 import DetailBasicInfo from '@/components/detail/DetailBasicInfo.vue';
 import AppFeedback from '@/components/AppFeedback.vue';
@@ -23,7 +23,7 @@ import useDetailPageAnalytics from '@/composables/useDetailPageAnalytics';
 const { t } = useI18n();
 const route = useRoute();
 const { mkit } = useMarkdown();
-const tabValue = ref(TABNAME_OPTIONS[1]);
+const tabValue = ref(PACKAGE_TYPE_MAPPING['rpmpkg']);
 const basicInfo = ref<DetailItemT[]>([]);
 const installation = ref('');
 const downloadData = ref('');
diff --git a/src/views/search/TheSearch.vue b/src/views/search/TheSearch.vue
index a6b44a3..36dc9c2 100644
--- a/src/views/search/TheSearch.vue
+++ b/src/views/search/TheSearch.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { getSearchCount } from '@/api/api-search';
 import { isUndefined } from '@opensig/opendesign';
 import type { MenuCountT } from '@/@types/search';
 import { isValidSearchTabName, isValidSearchKey } from '@/utils/query';
-import { TABNAME_OPTIONS, FLITERMENUOPTIONS } from '@/data/query';
+import { PACKAGE_TYPE_MAPPING, FLITERMENUOPTIONS } from '@/data/query';
 
 import SearchTab from '@/components/search/SearchTab.vue';
 import AppPkgContent from '@/views/field/FieldContent.vue';
@@ -17,8 +17,7 @@ import CondaContent from '@/views/conda/CondaContent.vue';
 import UpstreamContent from '@/views/upstream/UpstreamContent.vue';
 
 const route = useRoute();
-
-const DATATYPE = TABNAME_OPTIONS;
+const router = useRouter();
 
 const tabName = ref('');
 const menuData = ref<MenuCountT[]>([]);
@@ -34,7 +33,11 @@ const querySearchCount = () => {
   getSearchCount(searchParams)
     .then((res) => {
       if (res.code === 200) {
-        menuData.value = res.data;
+        // 格式化参数 名称保持一致
+        menuData.value = res.data.map((item) => ({
+          ...item,
+          key: PACKAGE_TYPE_MAPPING[item.key as keyof typeof PACKAGE_TYPE_MAPPING] || item.key,
+        }));
       }
     })
     .catch(() => {
@@ -45,36 +48,54 @@ const querySearchCount = () => {
 // -------------------- 监听 url query 变化 触发搜索 ---------------------
 const handleQueryData = () => {
   const query = route.query;
-  const { name, tab, key, q, sort, type } = query;
+  const { q, sort, type } = query;
 
-  if ((!isUndefined(name) && name) || (!isUndefined(q) && q)) {
-    searchKey.value = name ?? q;
+  if (!isUndefined(q) && q) {
+    searchKey.value = q;
   }
 
   // 判断key参数
-  if (isValidSearchKey(key) || isValidSearchKey(sort)) {
-    keywordType.value = key ?? sort;
-  } else {
-    keywordType.value = FLITERMENUOPTIONS[0].id;
-  }
+  keywordType.value = isValidSearchKey(sort) ? sort : FLITERMENUOPTIONS[0].id;
 
-  if ((isValidSearchTabName(type) && type) || tab === 'conda') {
-    tabName.value = tab ?? type;
+  if (isValidSearchTabName(type) && type) {
+    tabName.value = type;
   } else {
-    tabName.value = TABNAME_OPTIONS[0];
+    tabName.value = PACKAGE_TYPE_MAPPING['all'];
   }
 
   querySearchCount();
 };
-handleQueryData();
 
 watch(
   () => route.query,
-  () => {
-    handleQueryData();
+  (newQuery) => {
+    if (newQuery.name && !newQuery.q) {
+      router.replace({
+        path: route.path,
+        query: {
+          q: newQuery.name,
+          type: newQuery.tab ?? newQuery.type,
+          sort: newQuery.key ?? newQuery.sort,
+        },
+      });
+    }
+    if (newQuery.q) {
+      handleQueryData();
+    }
   },
-  { deep: true }
+  { immediate: true }
 );
+
+// 组件映射
+const tabComponent = {
+  [PACKAGE_TYPE_MAPPING['all']]: AppPkgContent,
+  [PACKAGE_TYPE_MAPPING['conda']]: CondaContent,
+  [PACKAGE_TYPE_MAPPING['epkg']]: EpkgContent,
+  [PACKAGE_TYPE_MAPPING['oepkg']]: OepkgContent,
+  [PACKAGE_TYPE_MAPPING['image']]: ImageContent,
+  [PACKAGE_TYPE_MAPPING['rpm']]: RpmContent,
+  [PACKAGE_TYPE_MAPPING['appversion']]: UpstreamContent,
+};
 </script>
 
 <template>
@@ -86,20 +107,7 @@ watch(
   </div>
   <ContentWrapper vertical-padding="40px">
     <div class="tab">
-      <!-- 领域应用 -->
-      <AppPkgContent v-if="tabName === DATATYPE[0]" />
-      <!-- 软件包 -->
-      <RpmContent v-if="tabName === DATATYPE[1]" />
-      <!-- 应用镜像  -->
-      <ImageContent v-if="tabName === DATATYPE[2]" />
-      <!-- EPKG -->
-      <EpkgContent v-if="tabName === DATATYPE[3]" />
-      <!-- OEPKG -->
-      <OepkgContent v-if="tabName === DATATYPE[4]" />
-      <!-- CONDA -->
-      <CondaContent v-if="DATATYPE[5].includes(tabName)" />
-      <!-- 上游兼容应用全景 -->
-      <UpstreamContent v-if="tabName === DATATYPE[6]" />
+      <component v-if="tabName && tabComponent[tabName]" :is="tabComponent[tabName]" />
     </div>
   </ContentWrapper>
 </template>
diff --git a/src/views/upstream/UpstreamContent.vue b/src/views/upstream/UpstreamContent.vue
index ac9c34b..3dc9252 100644
--- a/src/views/upstream/UpstreamContent.vue
+++ b/src/views/upstream/UpstreamContent.vue
@@ -223,6 +223,14 @@ watch(
     pageSearch();
   }
 );
+
+const changeFilterSearch = (v: string) => {
+  searchKey.value = v;
+};
+
+const clearFilterSearch = () => {
+  searchKey.value = '';
+};
 </script>
 
 <template>
@@ -254,7 +262,7 @@ watch(
       </template>
     </div>
     <div class="pkg-main">
-      <FilterHeader title="APPVERSION" :total="total" />
+      <FilterHeader title="APPVERSION" :total="total" @search="changeFilterSearch" @clear="clearFilterSearch" />
       <div v-if="searchOs || isSearch || showSearchFilterTags" class="search-result">
         <p v-if="!isPageSearch" class="text">
           为您找到符合条件的筛选<span class="total">{{ total }}</span
-- 
Gitee