From 2a226485541441d637a7be57d93fc0574a1e2ebb Mon Sep 17 00:00:00 2001
From: YCA001 <2915341988@qq.com>
Date: Fri, 24 May 2024 14:27:02 +0800
Subject: [PATCH 1/7] =?UTF-8?q?=E6=8F=8F=E8=BF=B0=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../applicationsPackage/TheNewDetail.vue      |  4 +--
 .../components/DetailAside.vue                |  2 +-
 src/views/epkg/TheDetail.vue                  |  2 +-
 src/views/image/TheDetail.vue                 | 35 ++++++++++++-------
 src/views/package/TheDetail.vue               |  2 +-
 5 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/views/applicationsPackage/TheNewDetail.vue b/src/views/applicationsPackage/TheNewDetail.vue
index eadd06a..3373e65 100644
--- a/src/views/applicationsPackage/TheNewDetail.vue
+++ b/src/views/applicationsPackage/TheNewDetail.vue
@@ -148,7 +148,7 @@ const summary = ref();
 const getDetailValue = (data: any) => {
   if (typePkg.value === 'RPM') {
     basicInfo.value = [
-      { name: 'Description', value: data?.description },
+      { name: '详细描述', value: data?.description },
       { name: '版本支持情况', value: data.osSupport },
       { name: '架构', value: data.arch },
       { name: '软件包分类', value: data.rpmCategory || '其他' },
@@ -165,7 +165,7 @@ const getDetailValue = (data: any) => {
     version.value = data?.version;
   } else if (typePkg.value === 'EPKG') {
     basicInfo.value = [
-      { name: 'Description', value: data?.description },
+      { name: '详细描述', value: data?.description },
       { name: '版本号', value: data.version },
       { name: '版本支持情况', value: data.osSupport },
       { name: '架构', value: data.arch },
diff --git a/src/views/applicationsPackage/components/DetailAside.vue b/src/views/applicationsPackage/components/DetailAside.vue
index c12bb72..f812564 100644
--- a/src/views/applicationsPackage/components/DetailAside.vue
+++ b/src/views/applicationsPackage/components/DetailAside.vue
@@ -183,7 +183,7 @@ const jumpTo = (name: string, id: string) => {
   <AppSection :title="`${data.name}版本支持情况`">
     <OTable :columns="verColumns" :data="verData" border="all" :cell-span="arraySpanMethod" :small="true">
       <template #td_flags="{ row }">
-        <a :href="jumpTo(data.name, row.pkgId)" color="primary" target="_blank" rel="noopener noreferrer">
+        <a :href="jumpTo(data.name, row.pkgId)" color="primary" rel="noopener noreferrer">
           <OTag v-if="row.os === tagVer[0] && row.arch === tagVer[1]" color="primary" :size="'small'">当前版本</OTag> <span v-else>查看</span></a
         >
       </template>
diff --git a/src/views/epkg/TheDetail.vue b/src/views/epkg/TheDetail.vue
index 9ac0d8a..41de548 100644
--- a/src/views/epkg/TheDetail.vue
+++ b/src/views/epkg/TheDetail.vue
@@ -83,7 +83,7 @@ const license = ref();
 const tagVer = ref();
 const getDetailValue = (data: any) => {
   basicInfo.value = [
-    { name: 'Description', value: data?.description },
+    { name: '详细描述', value: data?.description },
     { name: '版本支持情况', value: data.osSupport },
     { name: '架构', value: data.arch },
     { name: '软件包分类', value: data.epkgCategory || '其他' },
diff --git a/src/views/image/TheDetail.vue b/src/views/image/TheDetail.vue
index fcbd63c..35710c6 100644
--- a/src/views/image/TheDetail.vue
+++ b/src/views/image/TheDetail.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import { OBreadcrumb, OBreadcrumbItem, OTab, OTabPane,OTag } from '@opensig/opendesign';
+import { OBreadcrumb, OBreadcrumbItem, OTab, OTabPane, OTag } from '@opensig/opendesign';
 import { useRoute } from 'vue-router';
 import { useMarkdown } from '@/composables/useMarkdown';
 import type { AppInfoT } from '@/@types/app';
-import { getDetails, getTags, getVer  } from '@/api/api-domain';
+import { getDetails, getTags, getVer } from '@/api/api-domain';
 import { OPENEULER_CONTACT } from '@/data/config';
 import { useLocale } from '@/composables/useLocale';
 import AppFeedback from '@/components/AppFeedback.vue';
@@ -47,10 +47,12 @@ const appData = ref<AppInfoT>({
 
 //详情请求
 const queryPkg = (tabValue: string, pkgId: any) => {
-  getDetails(tabValue, pkgId).then((res) => {
-    const data = res.data.list[0];
-    getDetailValue(data);
-  }).catch(() => {
+  getDetails(tabValue, pkgId)
+    .then((res) => {
+      const data = res.data.list[0];
+      getDetailValue(data);
+    })
+    .catch(() => {
       useViewStore().showNotFound();
     });
 };
@@ -81,9 +83,9 @@ const tagVer = ref();
 const getDetailValue = (data: any) => {
   basicInfo.value = [
     { name: '架构', value: data.arch || '' },
-    { name: '分类', value: data.category || '' },
-    { name: 'License', value: data.license || '' },
-    { name: 'Tag', value: data.appVer || '' },
+
+    { name: '软件包分类', value: data.category || '' },
+
     { name: '版本支持情况', value: data.osSupport || '' },
   ];
   summary.value = data.description;
@@ -116,7 +118,7 @@ const tagsValue = ref();
 const queryTags = () => {
   getTags(appData.value.name).then((res) => {
     tagsValue.value = res.data.list;
-  })
+  });
 };
 const { locale } = useLocale();
 
@@ -164,7 +166,7 @@ const queryVer = () => {
                   <p v-for="item in basicInfo" :key="item.name">
                     <span class="label markdown download">{{ item.name }}</span>
                     <a :href="item.value" v-if="item.name === '所属仓库' || item.name === 'Repo源'" target="_blank">{{ item.type }}</a>
-                    <span class="markdown-body mymarkdown-body" v-dompurify-html="item.value" v-copy-code="true" >
+                    <span class="markdown-body mymarkdown-body" v-dompurify-html="item.value" v-copy-code="true">
                       <OTag v-if="item.name === '版本支持情况' && latestOsSupport" color="primary"> 最新版本</OTag>
                     </span>
                   </p>
@@ -181,7 +183,16 @@ const queryVer = () => {
         <AppFeedback v-if="!isTags" :email="maintainer.maintainerEmail" />
       </div>
       <div v-if="!isTags" class="detail-row-side">
-        <DetailAside :data="appData" :basicInfo="basicInfo" :maintainer="maintainer" :type="'IMAGE'" :downloadData="downloadData" :ver-data="verData" :license="license" :tagVer="tagVer"/>
+        <DetailAside
+          :data="appData"
+          :basicInfo="basicInfo"
+          :maintainer="maintainer"
+          :type="'IMAGE'"
+          :downloadData="downloadData"
+          :ver-data="verData"
+          :license="license"
+          :tagVer="tagVer"
+        />
       </div>
     </div>
   </ContentWrapper>
diff --git a/src/views/package/TheDetail.vue b/src/views/package/TheDetail.vue
index 7add93e..2b1c780 100644
--- a/src/views/package/TheDetail.vue
+++ b/src/views/package/TheDetail.vue
@@ -78,7 +78,7 @@ const license = ref();
 const tagVer = ref();
 const getDetailValue = (data: any) => {
   basicInfo.value = [
-    { name: 'Description', value: data?.description },
+    { name: '详细描述', value: data?.description },
     { name: '版本支持情况', value: data.osSupport },
     { name: '架构', value: data.arch },
     { name: '软件包分类', value: data.epkgCategory || '其他' },
-- 
Gitee


From 83e0865e298da6156d2d748fa0cafddab7803d1b Mon Sep 17 00:00:00 2001
From: ailoooong <ilong8@qq.com>
Date: Fri, 24 May 2024 16:12:43 +0800
Subject: [PATCH 2/7] =?UTF-8?q?fix:=20=E4=BB=A3=E7=A0=81=E8=A7=84=E8=8C=83?=
 =?UTF-8?q?=E6=95=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |  4 +-
 deploy/nginx/nginx.conf                       |  1 +
 src/@types/app.ts                             |  6 ++-
 src/@types/type-sort.ts                       |  1 +
 src/components/AppBreadcrumb.vue              | 37 +++++++++++++++++++
 .../components/DetailAside.vue                |  2 +-
 .../DetailHeader.vue}                         |  6 ++-
 src/components/HeaderNav.vue                  |  2 +-
 src/components/OCardItem.vue                  | 10 ++---
 src/components/filter/FilterHeader.vue        |  3 +-
 src/data/home/index.ts                        |  2 +-
 src/data/nav.ts                               |  4 +-
 src/router/index.ts                           | 16 ++++----
 src/utils/common.ts                           | 13 +++++--
 .../APkgContent.vue                           |  2 +-
 .../TheAppPkg.vue}                            |  0
 .../TheNewDetail.vue                          | 32 +++++-----------
 src/views/epkg/TheDetail.vue                  | 10 ++---
 src/views/home/TheHome.vue                    |  2 +-
 src/views/image/TheDetail.vue                 |  4 +-
 src/views/package/TheDetail.vue               |  9 ++---
 src/views/search/TheSearch.vue                |  2 +-
 22 files changed, 104 insertions(+), 64 deletions(-)
 create mode 100644 src/@types/type-sort.ts
 create mode 100644 src/components/AppBreadcrumb.vue
 rename src/{views/applicationsPackage => }/components/DetailAside.vue (99%)
 rename src/{views/applicationsPackage/components/DetailNewHead.vue => components/DetailHeader.vue} (95%)
 rename src/views/{applicationsPackage => apppkg}/APkgContent.vue (99%)
 rename src/views/{applicationsPackage/TheApplicationsPackage.vue => apppkg/TheAppPkg.vue} (100%)
 rename src/views/{applicationsPackage => apppkg}/TheNewDetail.vue (92%)

diff --git a/components.d.ts b/components.d.ts
index 677ad84..c6281e2 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,12 +8,14 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AppBanner: typeof import('./src/components/AppBanner.vue')['default']
+    AppBreadcrumb: typeof import('./src/components/AppBreadcrumb.vue')['default']
     AppFeedback: typeof import('./src/components/AppFeedback.vue')['default']
     AppFooter: typeof import('./src/components/AppFooter.vue')['default']
     AppHeader: typeof import('./src/components/AppHeader.vue')['default']
-    AppPagination: typeof import('./src/components/AppPagination.vue')['default']
     AppSection: typeof import('./src/components/AppSection.vue')['default']
     ContentWrapper: typeof import('./src/components/ContentWrapper.vue')['default']
+    DetailAside: typeof import('./src/components/DetailAside.vue')['default']
+    DetailHeader: typeof import('./src/components/DetailHeader.vue')['default']
     ExternalLink: typeof import('./src/components/ExternalLink.vue')['default']
     FilterCheckbox: typeof import('./src/components/filter/FilterCheckbox.vue')['default']
     FilterHeader: typeof import('./src/components/filter/FilterHeader.vue')['default']
diff --git a/deploy/nginx/nginx.conf b/deploy/nginx/nginx.conf
index da783ac..502089a 100644
--- a/deploy/nginx/nginx.conf
+++ b/deploy/nginx/nginx.conf
@@ -61,6 +61,7 @@ http {
     add_header X-Content-Type-Options nosniff;
     add_header Strict-Transport-Security "max-age=31536000; includeSubDomains";
     add_header Content-Security-Policy "script-src 'self' * 'unsafe-inline' 'unsafe-eval' ; object-src 'none'; frame-src 'none'";
+    add_header Cache-Control "no-cache,no-store,must-revalidate";
     add_header Pragma no-cache;
     add_header Expires 0;
 
diff --git a/src/@types/app.ts b/src/@types/app.ts
index 4412386..1c5249e 100644
--- a/src/@types/app.ts
+++ b/src/@types/app.ts
@@ -3,7 +3,7 @@ export interface AppItemT {
   description: string | null;
   iconUrl: string | null;
   name: string;
-  tags: string[];
+  tags: PkgTypeT[];
   pkgIds: PkgIdsT;
 }
 export interface PkgIdsT {
@@ -25,3 +25,7 @@ export interface AppInfoT {
   source_code: string;
   bin_code: string;
 }
+
+
+
+export type PkgTypeT = 'RPM' | 'IMAGE' | 'EPKG';
\ No newline at end of file
diff --git a/src/@types/type-sort.ts b/src/@types/type-sort.ts
new file mode 100644
index 0000000..bd0d4d1
--- /dev/null
+++ b/src/@types/type-sort.ts
@@ -0,0 +1 @@
+export type SorT = 'asc' | 'desc' | '';
diff --git a/src/components/AppBreadcrumb.vue b/src/components/AppBreadcrumb.vue
new file mode 100644
index 0000000..649947b
--- /dev/null
+++ b/src/components/AppBreadcrumb.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { OBreadcrumb, OBreadcrumbItem } from '@opensig/opendesign';
+import { useLocale } from '@/composables/useLocale';
+import { resourceData } from '@/data/home/index';
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+});
+
+const { locale } = useLocale();
+
+const breadcrumbInfo = () => {
+  resourceData.forEach((item) => {
+    if (item.id === props.id) {
+      return item;
+    }
+  });
+};
+breadcrumbInfo()
+</script>
+
+<template>
+  <OBreadcrumb>
+    <OBreadcrumbItem :to="/${locale.value}/">软件市场</OBreadcrumbItem>
+    <OBreadcrumbItem :to="`/${locale.value}/${breadcrumbInfo.href}`">{{ breadcrumbInfo.name }}</OBreadcrumbItem>
+    <OBreadcrumbItem>{{ name }} </OBreadcrumbItem>
+  </OBreadcrumb>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/applicationsPackage/components/DetailAside.vue b/src/components/DetailAside.vue
similarity index 99%
rename from src/views/applicationsPackage/components/DetailAside.vue
rename to src/components/DetailAside.vue
index f812564..c12bb72 100644
--- a/src/views/applicationsPackage/components/DetailAside.vue
+++ b/src/components/DetailAside.vue
@@ -183,7 +183,7 @@ const jumpTo = (name: string, id: string) => {
   <AppSection :title="`${data.name}版本支持情况`">
     <OTable :columns="verColumns" :data="verData" border="all" :cell-span="arraySpanMethod" :small="true">
       <template #td_flags="{ row }">
-        <a :href="jumpTo(data.name, row.pkgId)" color="primary" rel="noopener noreferrer">
+        <a :href="jumpTo(data.name, row.pkgId)" color="primary" target="_blank" rel="noopener noreferrer">
           <OTag v-if="row.os === tagVer[0] && row.arch === tagVer[1]" color="primary" :size="'small'">当前版本</OTag> <span v-else>查看</span></a
         >
       </template>
diff --git a/src/views/applicationsPackage/components/DetailNewHead.vue b/src/components/DetailHeader.vue
similarity index 95%
rename from src/views/applicationsPackage/components/DetailNewHead.vue
rename to src/components/DetailHeader.vue
index b1bfec1..56eb7f3 100644
--- a/src/views/applicationsPackage/components/DetailNewHead.vue
+++ b/src/components/DetailHeader.vue
@@ -50,7 +50,9 @@ const onExternalDialog = (href: string) => {
           <div class="box">
             <p class="title">
               {{ data.name }}
-              <a @click="onExternalDialog(data.repository)" v-if="data.repository" target="_blank" rel="noopener noreferrer"><img :src="Home" class="icon-img" alt="" />主页</a>
+              <a @click="onExternalDialog(data.repository)" v-if="data.repository" target="_blank" rel="noopener noreferrer"
+                ><img :src="Home" class="icon-img" alt="" />主页</a
+              >
             </p>
             <p class="detail">{{ basicInfo }}</p>
           </div>
@@ -143,7 +145,7 @@ const onExternalDialog = (href: string) => {
       padding: 12px;
       img {
         max-width: 100%;
-        max-height: 100%;
+        max-height: 86px;
       }
     }
 
diff --git a/src/components/HeaderNav.vue b/src/components/HeaderNav.vue
index a5d939e..6f4047e 100644
--- a/src/components/HeaderNav.vue
+++ b/src/components/HeaderNav.vue
@@ -28,7 +28,7 @@ const selectedIndex = computed(() => {
     return idx;
   }
 
-  if (route.path.includes('/applicationsPackage')) {
+  if (route.path.includes('/apppkg')) {
     idx = 1;
     return idx;
   }
diff --git a/src/components/OCardItem.vue b/src/components/OCardItem.vue
index afb3f57..e2c349f 100644
--- a/src/components/OCardItem.vue
+++ b/src/components/OCardItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue';
 import { OCard, OTag, OIcon } from '@opensig/opendesign';
-import type { AppItemT, PkgIdsT } from '@/@types/app';
+import type { AppItemT, PkgIdsT, PkgTypeT } from '@/@types/app';
 import { getTagsIcon, xssAllTag } from '@/utils/common';
 import { useLocale } from '@/composables/useLocale';
 import { useI18n } from 'vue-i18n';
@@ -17,10 +17,10 @@ defineProps({
 
 const { locale } = useLocale();
 const { t } = useI18n();
-const jumpTo = (name: string, id: PkgIdsT, type: string) => {
-  return `/${locale.value}/applicationsPackage/${xssAllTag(name)}?type=${type}${id.IMAGE ? `&appPkgId=${id.IMAGE}` : ''}${
-    id.EPKG ? `&epkgPkgId=${id.EPKG}` : ''
-  }${id.RPM ? `&rpmPkgId=${id.RPM}` : ''}`;
+const jumpTo = (name: string, id: PkgIdsT, type: PkgTypeT) => {
+  return `/${locale.value}/apppkg/${xssAllTag(name)}?type=${type}${id.IMAGE ? `&appPkgId=${id.IMAGE}` : ''}${id.EPKG ? `&epkgPkgId=${id.EPKG}` : ''}${
+    id.RPM ? `&rpmPkgId=${id.RPM}` : ''
+  }`;
 };
 
 const repeatTags = (v: string) => {
diff --git a/src/components/filter/FilterHeader.vue b/src/components/filter/FilterHeader.vue
index 63c594d..249d270 100644
--- a/src/components/filter/FilterHeader.vue
+++ b/src/components/filter/FilterHeader.vue
@@ -4,6 +4,7 @@ import { OLink, OInput } from '@opensig/opendesign';
 import { useLocale } from '@/composables/useLocale';
 import { useI18n } from 'vue-i18n';
 import { useRouter, useRoute } from 'vue-router';
+import type { SorT } from '@/@types/type-sort';
 import IconTimeOrder from '~icons/app/icon-time-order.svg';
 import IconSearch from '~icons/app/icon-search.svg';
 
@@ -57,7 +58,7 @@ const emits = defineEmits<{
 const isTimeOrder = ref(false);
 const isNameOrder = ref(false);
 const changeSortBy = (type: string) => {
-  let v = '';
+  let v: SorT = '';
   if (type === 'timeOrder') {
     isTimeOrder.value = !isTimeOrder.value;
     v = isTimeOrder.value ? 'asc' : 'desc';
diff --git a/src/data/home/index.ts b/src/data/home/index.ts
index d8d74e6..d024480 100644
--- a/src/data/home/index.ts
+++ b/src/data/home/index.ts
@@ -13,7 +13,7 @@ export const resourceData = [
     name: '领域应用',
     desc: 'openEuler操作系统支持的软件包集合(包括RPM、容器镜像、EPKG软件包等）',
     icon: ApppkgIcon,
-    href: "/applicationsPackage"
+    href: "/apppkg"
   },
   {
     id: 'rpm',
diff --git a/src/data/nav.ts b/src/data/nav.ts
index 6714566..3a5b2bb 100644
--- a/src/data/nav.ts
+++ b/src/data/nav.ts
@@ -8,12 +8,12 @@ export const navs = [
     href: '/',
   },
   {
-    id: 'applicationsPackage',
+    id: 'apppkg',
     label: {
       zh: '领域应用',
       en: 'applications Package'
     },
-    href: '/applicationsPackage',
+    href: '/apppkg',
   },
   {
     id: 'rpm',
diff --git a/src/router/index.ts b/src/router/index.ts
index 9f3ff4c..5a7ea90 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,16 +12,16 @@ const routes = [
   { path: '/zh/', component: () => import('@/views/home/TheHome.vue'), },
   { path: '/en/', component: () => import('@/views/home/TheHome.vue'), },
   {
-    path: '/zh/applicationsPackage',
-    name: 'applicationsPackage',
-    alias: '/en/applicationsPackage',
-    component: () => import('@/views/applicationsPackage/TheApplicationsPackage.vue'),
+    path: '/zh/apppkg',
+    name: 'apppkg',
+    alias: '/en/apppkg',
+    component: () => import('@/views/apppkg/TheAppPkg.vue'),
   },
   {
-    path: '/zh/applicationsPackage/:name',
-    name: 'applicationsPackage-detail',
-    alias: '/en/applicationsPackage/:name',
-    component: () => import('@/views/applicationsPackage/TheNewDetail.vue'),
+    path: '/zh/apppkg/:name',
+    name: 'apppkg-detail',
+    alias: '/en/apppkg/:name',
+    component: () => import('@/views/apppkg/TheNewDetail.vue'),
   },
   {
     path: '/zh/package',
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 7764d55..ce71071 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -118,12 +118,19 @@ export function getUrlParams(url: string) {
 /**
  * 过滤空参数
  * @param {data} any 地址
- * @returns {object} 成功返回参数对象 
+ * @returns {object} 成功返回参数对象
  */
+import type { SearchSQLT, SearchESParamsT } from '@/@types/domain';
 export const getParamsRules = (data: any) => {
-  const newData = {} as any;
+  type ParamsKeyT = keyof SearchSQLT | SearchESParamsT;
+
+  type NewDataT = {
+    [x: string]: SearchSQLT | SearchESParamsT;
+  }
+
+  const newData: NewDataT = {};
   Object.keys(data).forEach((key) => {
-    const value = data[key as keyof any];
+    const value = data[key as keyof ParamsKeyT];
     if (value) {
       newData[key] = value;
     }
diff --git a/src/views/applicationsPackage/APkgContent.vue b/src/views/apppkg/APkgContent.vue
similarity index 99%
rename from src/views/applicationsPackage/APkgContent.vue
rename to src/views/apppkg/APkgContent.vue
index 351a82d..731b6e6 100644
--- a/src/views/applicationsPackage/APkgContent.vue
+++ b/src/views/apppkg/APkgContent.vue
@@ -149,7 +149,7 @@ const onResetTag = () => {
   nameOrder.value = '';
   if (route.query.type) {
     router.push({
-      path: `/${locale.value}/applicationsPackage`,
+      path: `/${locale.value}/apppkg`,
     });
   }
 };
diff --git a/src/views/applicationsPackage/TheApplicationsPackage.vue b/src/views/apppkg/TheAppPkg.vue
similarity index 100%
rename from src/views/applicationsPackage/TheApplicationsPackage.vue
rename to src/views/apppkg/TheAppPkg.vue
diff --git a/src/views/applicationsPackage/TheNewDetail.vue b/src/views/apppkg/TheNewDetail.vue
similarity index 92%
rename from src/views/applicationsPackage/TheNewDetail.vue
rename to src/views/apppkg/TheNewDetail.vue
index 3373e65..8adeb77 100644
--- a/src/views/applicationsPackage/TheNewDetail.vue
+++ b/src/views/apppkg/TheNewDetail.vue
@@ -1,16 +1,15 @@
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import { OBreadcrumb, OBreadcrumbItem, OTab, OTabPane, OTable, OLink, OIcon, OTag } from '@opensig/opendesign';
+import { OTab, OTabPane, OTable, OLink, OIcon, OTag } from '@opensig/opendesign';
 import { useRoute } from 'vue-router';
 import { getDetails, getDetail, getTags, getVer } from '@/api/api-domain';
 import { useMarkdown } from '@/composables/useMarkdown';
 import type { AppInfoT } from '@/@types/app';
 import { OPENEULER_CONTACT } from '@/data/config';
-import { useLocale } from '@/composables/useLocale';
 import AppFeedback from '@/components/AppFeedback.vue';
-import DetailHead from '../applicationsPackage/components/DetailNewHead.vue';
+import DetailHead from '@/components/DetailHeader.vue';
 import ExternalLink from '@/components/ExternalLink.vue';
-import DetailAside from '../applicationsPackage/components/DetailAside.vue';
+import DetailAside from '@/components/DetailAside.vue';
 import defaultImg from '@/assets/default-logo.png';
 import IconEpkg from '~icons/pkg/epkg.svg';
 import IconImage from '~icons/pkg/image.svg';
@@ -59,7 +58,6 @@ const queryPkg = (tabValue: string, pkgId: any) => {
   getDetails(tabValue, pkgId).then((res) => {
     const data = res.data.list[0];
     getDetailValue(data);
-    
   });
 };
 
@@ -75,7 +73,7 @@ const queryEntity = () => {
     getDetail({
       appPkgId: encodeURIComponent(route.query.appPkgId as string) || '',
       epkgPkgId: encodeURIComponent(route.query.epkgPkgId as string) || '',
-      rpmPkgId:encodeURIComponent(route.query.rpmPkgId as string) || '',
+      rpmPkgId: encodeURIComponent(route.query.rpmPkgId as string) || '',
     })
       .then((res) => {
         const data = res.data;
@@ -102,7 +100,6 @@ const onChange = (tab: string) => {
     typePkg.value = 'RPM';
     getDetailValue(rpmData.value);
     queryVer();
-    
   } else if (tab === 'EPKG') {
     tabValue.value = 'epkgpkg';
     typePkg.value = 'EPKG';
@@ -116,7 +113,6 @@ const onChange = (tab: string) => {
   } else {
     useViewStore().showNotFound();
   }
- 
 };
 const getChange = (tab: string) => {
   if (tab === 'RPM') {
@@ -138,7 +134,6 @@ const getPkg = (tabValue: string) => {
 onMounted(() => {
   pkgId.value = location.pathname.split('/')[3];
   queryEntity();
-  getTitle();
 });
 const imageUsage = ref();
 const license = ref();
@@ -148,7 +143,7 @@ const summary = ref();
 const getDetailValue = (data: any) => {
   if (typePkg.value === 'RPM') {
     basicInfo.value = [
-      { name: '详细描述', value: data?.description },
+      { name: 'Description', value: data?.description },
       { name: '版本支持情况', value: data.osSupport },
       { name: '架构', value: data.arch },
       { name: '软件包分类', value: data.rpmCategory || '其他' },
@@ -165,7 +160,7 @@ const getDetailValue = (data: any) => {
     version.value = data?.version;
   } else if (typePkg.value === 'EPKG') {
     basicInfo.value = [
-      { name: '详细描述', value: data?.description },
+      { name: 'Description', value: data?.description },
       { name: '版本号', value: data.version },
       { name: '版本支持情况', value: data.osSupport },
       { name: '架构', value: data.arch },
@@ -235,12 +230,6 @@ const queryTags = () => {
     tagsValue.value = res.data.list;
   });
 };
-const { locale } = useLocale();
-const breadcrumbInfo = ref({ name: '', path: '' });
-const getTitle = () => {
-  breadcrumbInfo.value = { path: `/${locale.value}/applicationsPackage`, name: '领域应用' };
-};
-const home = ref({ name: '软件市场', path: `/${locale.value}/` });
 
 const showExternalDlg = ref(false);
 const externalLink = ref('');
@@ -279,11 +268,8 @@ const repeatTags = (v: string) => {
 </script>
 <template>
   <ContentWrapper vertical-padding="24px">
-    <OBreadcrumb>
-      <OBreadcrumbItem :to="home.path">{{ home.name }}</OBreadcrumbItem>
-      <OBreadcrumbItem :to="breadcrumbInfo.path">{{ breadcrumbInfo.name }}</OBreadcrumbItem>
-      <OBreadcrumbItem>{{ appData.name }} </OBreadcrumbItem>
-    </OBreadcrumb>
+    <AppBreadcrumb id="apppkg" :name="appData.name" />
+
     <DetailHead :data="appData" :basicInfo="summary" :maintainer="maintainer" />
 
     <OTab variant="text" @change="onChange" :line="false" class="domain-tabs" v-model="activeName" size="large">
@@ -309,7 +295,7 @@ const repeatTags = (v: string) => {
                     >{{ item.type }}</OLink
                   >
                   <span class="markdown-body installation mymarkdown-body" v-dompurify-html="item.value" v-copy-code="true" v-else></span>
-               </p>
+                </p>
               </div>
               <p class="sp">> 安装指引</p>
               <div v-if="installation" v-dompurify-html="installation" v-copy-code="true" class="markdown-body installation"></div>
diff --git a/src/views/epkg/TheDetail.vue b/src/views/epkg/TheDetail.vue
index 41de548..613ab8e 100644
--- a/src/views/epkg/TheDetail.vue
+++ b/src/views/epkg/TheDetail.vue
@@ -7,11 +7,11 @@ import { useMarkdown } from '@/composables/useMarkdown';
 import type { AppInfoT } from '@/@types/app';
 import { useLocale } from '@/composables/useLocale';
 import { useI18n } from 'vue-i18n';
-import { getDetails, getVer  } from '@/api/api-domain';
+import { getDetails, getVer } from '@/api/api-domain';
 import AppFeedback from '@/components/AppFeedback.vue';
-import DetailHead from '../applicationsPackage/components/DetailNewHead.vue';
+import DetailHead from '@/components/DetailHeader.vue';
 import ExternalLink from '@/components/ExternalLink.vue';
-import DetailAside from '../applicationsPackage/components/DetailAside.vue';
+import DetailAside from '@/components/DetailAside.vue';
 import { moreColumns } from '@/data/detail/index';
 import defaultImg from '@/assets/default-logo.png';
 import { useViewStore } from '@/stores/common';
@@ -116,7 +116,7 @@ const getDetailValue = (data: any) => {
   appData.value.bin_code = data.binDownloadUrl;
   appData.value.cover = data?.iconUrl || defaultImg;
   appData.value.repository = data.srcRepo;
-  queryVer()
+  queryVer();
 };
 
 const { locale } = useLocale();
@@ -189,7 +189,7 @@ const queryVer = () => {
         <AppFeedback :email="maintainer.maintainerEmail" />
       </div>
       <div class="detail-row-side">
-        <DetailAside :data="appData" :basicInfo="basicInfo" :maintainer="maintainer" :ver-data="verData" :license="license" :tagVer="tagVer" :type="'EPKG'"/>
+        <DetailAside :data="appData" :basicInfo="basicInfo" :maintainer="maintainer" :ver-data="verData" :license="license" :tagVer="tagVer" :type="'EPKG'" />
       </div>
     </div>
   </ContentWrapper>
diff --git a/src/views/home/TheHome.vue b/src/views/home/TheHome.vue
index 83bbf65..cedc417 100644
--- a/src/views/home/TheHome.vue
+++ b/src/views/home/TheHome.vue
@@ -76,7 +76,7 @@ onMounted(() => {
               <template v-if="item.children?.length > 0">
                 <div class="domain-item-title">
                   <h3 :id="item.name">{{ item.name }}</h3>
-                  <OLink :href="`/${locale}/applicationsPackage?type=${item.name}`">
+                  <OLink :href="`/${locale}/apppkg?type=${item.name}`">
                     了解更多
                     <template #suffix
                       ><OIcon><IconChevronDown /></OIcon
diff --git a/src/views/image/TheDetail.vue b/src/views/image/TheDetail.vue
index 35710c6..b27920d 100644
--- a/src/views/image/TheDetail.vue
+++ b/src/views/image/TheDetail.vue
@@ -8,8 +8,8 @@ import { getDetails, getTags, getVer } from '@/api/api-domain';
 import { OPENEULER_CONTACT } from '@/data/config';
 import { useLocale } from '@/composables/useLocale';
 import AppFeedback from '@/components/AppFeedback.vue';
-import DetailHead from '../applicationsPackage/components/DetailNewHead.vue';
-import DetailAside from '../applicationsPackage/components/DetailAside.vue';
+import DetailHead from '@/components/DetailHeader.vue';
+import DetailAside from '@/components/DetailAside.vue';
 import defaultImg from '@/assets/default-logo.png';
 import { columnTags, tabList } from '@/data/detail/index';
 import { useViewStore } from '@/stores/common';
diff --git a/src/views/package/TheDetail.vue b/src/views/package/TheDetail.vue
index 2b1c780..430b49b 100644
--- a/src/views/package/TheDetail.vue
+++ b/src/views/package/TheDetail.vue
@@ -9,8 +9,8 @@ import { useLocale } from '@/composables/useLocale';
 import { getDetails, getVer } from '@/api/api-domain';
 import defaultImg from '@/assets/default-logo.png';
 import AppFeedback from '@/components/AppFeedback.vue';
-import DetailHead from '../applicationsPackage/components/DetailNewHead.vue';
-import DetailAside from '../applicationsPackage/components/DetailAside.vue';
+import DetailHead from '@/components/DetailHeader.vue';
+import DetailAside from '@/components/DetailAside.vue';
 import ExternalLink from '@/components/ExternalLink.vue';
 import { moreColumns } from '@/data/detail/index';
 import { useViewStore } from '@/stores/common';
@@ -71,7 +71,6 @@ const getPkg = (tabValue: string) => {
 onMounted(() => {
   queryEntity();
   getTitle();
-  
 });
 const summary = ref();
 const license = ref();
@@ -110,7 +109,7 @@ const getDetailValue = (data: any) => {
   appData.value.bin_code = data.binDownloadUrl;
   appData.value.cover = data?.iconUrl || defaultImg;
   appData.value.repository = data.srcRepo;
-  queryVer()
+  queryVer();
 };
 
 const { locale } = useLocale();
@@ -183,7 +182,7 @@ const queryVer = () => {
         <AppFeedback :email="maintainer.maintainerEmail" />
       </div>
       <div class="detail-row-side">
-        <DetailAside :data="appData" :basicInfo="basicInfo" :maintainer="maintainer" :ver-data="verData" :license="license" :tagVer="tagVer" :type="'RPM'"/>
+        <DetailAside :data="appData" :basicInfo="basicInfo" :maintainer="maintainer" :ver-data="verData" :license="license" :tagVer="tagVer" :type="'RPM'" />
       </div>
     </div>
   </ContentWrapper>
diff --git a/src/views/search/TheSearch.vue b/src/views/search/TheSearch.vue
index af896a4..d9a2040 100644
--- a/src/views/search/TheSearch.vue
+++ b/src/views/search/TheSearch.vue
@@ -6,7 +6,7 @@ import { getSearchCount } from '@/api/api-search';
 import type { MenuCountT } from '@/@types/search';
 
 import SearchTab from '@/components/search/SearchTab.vue';
-import AppPkgContent from '@/views/applicationsPackage/APkgContent.vue';
+import AppPkgContent from '@/views/apppkg/APkgContent.vue';
 import EpkgContent from '@/views/epkg/EpkgContent.vue';
 import ImageContent from '@/views/image/ImageContent.vue';
 import RpmContent from '@/views/package/RpmContent.vue';
-- 
Gitee


From a99c9ee744e36520ba66fb0926cabb1e5906a678 Mon Sep 17 00:00:00 2001
From: YCA001 <2915341988@qq.com>
Date: Fri, 24 May 2024 17:10:32 +0800
Subject: [PATCH 3/7] =?UTF-8?q?=E8=BD=AC=E4=B9=89=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/OCardItem.vue      | 12 +++++++++---
 src/components/OTableItemNew.vue  |  2 +-
 src/views/apppkg/TheNewDetail.vue |  4 ++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/OCardItem.vue b/src/components/OCardItem.vue
index e2c349f..4af09e1 100644
--- a/src/components/OCardItem.vue
+++ b/src/components/OCardItem.vue
@@ -18,8 +18,8 @@ defineProps({
 const { locale } = useLocale();
 const { t } = useI18n();
 const jumpTo = (name: string, id: PkgIdsT, type: PkgTypeT) => {
-  return `/${locale.value}/apppkg/${xssAllTag(name)}?type=${type}${id.IMAGE ? `&appPkgId=${id.IMAGE}` : ''}${id.EPKG ? `&epkgPkgId=${id.EPKG}` : ''}${
-    id.RPM ? `&rpmPkgId=${id.RPM}` : ''
+  return `/${locale.value}/apppkg/${xssAllTag(name)}?type=${type}${id.IMAGE ? `&appPkgId=${encodeURIComponent(id.IMAGE)}` : ''}${id.EPKG ? `&epkgPkgId=${encodeURIComponent(id.EPKG)}` : ''}${
+    id.RPM ? `&rpmPkgId=${encodeURIComponent(id.RPM)}` : ''
   }`;
 };
 
@@ -38,7 +38,13 @@ const repeatTags = (v: string) => {
   >
     <template #main>
       <div class="pkg-info">
-        <a :href="jumpTo(data.name, data.pkgIds, data.tags[0])" target="_blank" rel="noopener noreferrer" v-dompurify-html="data.name" class="name"></a>
+        <a
+          :href="jumpTo(data.name, (data.pkgIds), data.tags[0])"
+          target="_blank"
+          rel="noopener noreferrer"
+          v-dompurify-html="data.name"
+          class="name"
+        ></a>
         <div class="pkg-icon"><img :src="data.iconUrl || defaultImg" class="icon" :class="{ 'default-img': !data.iconUrl }" /></div>
       </div>
       <div class="pkg-box">
diff --git a/src/components/OTableItemNew.vue b/src/components/OTableItemNew.vue
index 2c870bc..d2ccdbf 100644
--- a/src/components/OTableItemNew.vue
+++ b/src/components/OTableItemNew.vue
@@ -41,7 +41,7 @@ const { locale } = useLocale();
 const jumpTo = (name: string, id: string) => {
   const type = props.type === 'apppkg' ? 'image' : props.type === 'rpmpkg' ? 'RPM' : 'EPKG';
   const detailType = props.type === 'apppkg' ? 'image' : props.type === 'rpmpkg' ? 'package' : 'epkg';
-  const newHref = `/${locale.value}/${detailType}/${xssAllTag(name)}?type=${type}&pkgId=${id}`;
+  const newHref = `/${locale.value}/${detailType}/${xssAllTag(name)}?type=${type}&pkgId=${encodeURIComponent(id)}`;
   return newHref;
 };
 
diff --git a/src/views/apppkg/TheNewDetail.vue b/src/views/apppkg/TheNewDetail.vue
index 8adeb77..8cc6d4a 100644
--- a/src/views/apppkg/TheNewDetail.vue
+++ b/src/views/apppkg/TheNewDetail.vue
@@ -143,7 +143,7 @@ const summary = ref();
 const getDetailValue = (data: any) => {
   if (typePkg.value === 'RPM') {
     basicInfo.value = [
-      { name: 'Description', value: data?.description },
+      { name: '详细描述', value: data?.description },
       { name: '版本支持情况', value: data.osSupport },
       { name: '架构', value: data.arch },
       { name: '软件包分类', value: data.rpmCategory || '其他' },
@@ -160,7 +160,7 @@ const getDetailValue = (data: any) => {
     version.value = data?.version;
   } else if (typePkg.value === 'EPKG') {
     basicInfo.value = [
-      { name: 'Description', value: data?.description },
+      { name: '详细描述', value: data?.description },
       { name: '版本号', value: data.version },
       { name: '版本支持情况', value: data.osSupport },
       { name: '架构', value: data.arch },
-- 
Gitee


From 98c3ccdf777ea4f409eb39df880d444f18cc367c Mon Sep 17 00:00:00 2001
From: YCA001 <2915341988@qq.com>
Date: Fri, 24 May 2024 17:48:56 +0800
Subject: [PATCH 4/7] =?UTF-8?q?=E8=BD=AC=E4=B9=89=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/apppkg/TheNewDetail.vue | 8 +++++---
 src/views/epkg/TheDetail.vue      | 2 +-
 src/views/image/TheDetail.vue     | 2 +-
 src/views/package/TheDetail.vue   | 2 +-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/views/apppkg/TheNewDetail.vue b/src/views/apppkg/TheNewDetail.vue
index 8cc6d4a..f66fc4a 100644
--- a/src/views/apppkg/TheNewDetail.vue
+++ b/src/views/apppkg/TheNewDetail.vue
@@ -71,11 +71,13 @@ const queryEntity = () => {
   activeName.value = route.query.type as string;
   if (pkgId.value) {
     getDetail({
-      appPkgId: encodeURIComponent(route.query.appPkgId as string) || '',
-      epkgPkgId: encodeURIComponent(route.query.epkgPkgId as string) || '',
-      rpmPkgId: encodeURIComponent(route.query.rpmPkgId as string) || '',
+      appPkgId: (route.query.appPkgId as string) || '',
+      epkgPkgId: (route.query.epkgPkgId as string) || '',
+      rpmPkgId:(route.query.rpmPkgId as string) || '',
     })
       .then((res) => {
+        
+        
         const data = res.data;
         tabList.value = data.tags;
         epkgData.value = data['EPKG'];
diff --git a/src/views/epkg/TheDetail.vue b/src/views/epkg/TheDetail.vue
index 613ab8e..0f5a3cd 100644
--- a/src/views/epkg/TheDetail.vue
+++ b/src/views/epkg/TheDetail.vue
@@ -62,7 +62,7 @@ const queryPkg = (tabValue: string, pkgId: any) => {
 };
 
 // 获取tab分类
-const pkgId = encodeURIComponent(route.query.pkgId as string);
+const pkgId = (route.query.pkgId as string);
 const queryEntity = () => {
   getChange();
 };
diff --git a/src/views/image/TheDetail.vue b/src/views/image/TheDetail.vue
index b27920d..9e33233 100644
--- a/src/views/image/TheDetail.vue
+++ b/src/views/image/TheDetail.vue
@@ -58,7 +58,7 @@ const queryPkg = (tabValue: string, pkgId: any) => {
 };
 
 // 获取tab分类
-const pkgId = encodeURIComponent(route.query.pkgId as string);
+const pkgId = (route.query.pkgId as string);
 const queryEntity = () => {
   getChange();
 };
diff --git a/src/views/package/TheDetail.vue b/src/views/package/TheDetail.vue
index 430b49b..e0b1d55 100644
--- a/src/views/package/TheDetail.vue
+++ b/src/views/package/TheDetail.vue
@@ -56,7 +56,7 @@ const queryPkg = (tabValue: string, pkgId: any) => {
     });
 };
 
-const pkgId = encodeURIComponent(route.query.pkgId as string);
+const pkgId = (route.query.pkgId as string);
 const queryEntity = () => {
   getChange();
 };
-- 
Gitee


From edcde5b13dd25eed78f1fc1b2f9d32f5d6f7b23f Mon Sep 17 00:00:00 2001
From: ailoooong <ilong8@qq.com>
Date: Sat, 25 May 2024 09:26:36 +0800
Subject: [PATCH 5/7] =?UTF-8?q?fix:=20=E8=AF=A6=E6=83=85=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@types/app.ts                      | 21 ++++++++
 src/@types/detail.ts                   | 74 ++++++++++++++++++++++++++
 src/assets/style/detail/index.scss     | 25 ++++-----
 src/components/AppBreadcrumb.vue       | 20 +++----
 src/components/DetailAside.vue         | 11 ++--
 src/components/OTableItemNew.vue       |  2 +-
 src/data/detail/index.ts               | 10 ++--
 src/data/home/index.ts                 |  2 +-
 src/views/apppkg/APkgContent.vue       | 42 +++++++--------
 src/views/apppkg/TheAppPkg.vue         |  4 +-
 src/views/apppkg/TheNewDetail.vue      | 36 +++++--------
 src/views/epkg/EpkgContent.vue         | 50 ++++++++---------
 src/views/epkg/TheDetail.vue           | 64 ++++++++--------------
 src/views/epkg/TheEpkg.vue             |  4 +-
 src/views/home/TheHome.vue             |  4 +-
 src/views/image/ImageContent.vue       | 50 ++++++++---------
 src/views/image/TheDetail.vue          | 45 +++++-----------
 src/views/image/TheImage.vue           |  4 +-
 src/views/package/RpmContent.vue       | 50 ++++++++---------
 src/views/package/TheDetail.vue        | 42 ++++-----------
 src/views/package/TheRpm.vue           |  4 +-
 src/views/upstream/UpstreamContent.vue |  2 +-
 22 files changed, 295 insertions(+), 271 deletions(-)
 create mode 100644 src/@types/detail.ts

diff --git a/src/@types/app.ts b/src/@types/app.ts
index 1c5249e..f657852 100644
--- a/src/@types/app.ts
+++ b/src/@types/app.ts
@@ -27,5 +27,26 @@ export interface AppInfoT {
 }
 
 
+export interface MaintainerT {
+  maintainerId: string;
+  maintainerEmail: string;
+  maintainerGiteeId: string;
+};
+
+export interface DetailItemT {
+  name: string;
+  value: string | any;
+  type?: string;
+}
+
+
+export interface HomeInfoT {
+  id: string;
+  name: string;
+  desc: string;
+  icon: string;
+  href: string;
+}
+
 
 export type PkgTypeT = 'RPM' | 'IMAGE' | 'EPKG';
\ No newline at end of file
diff --git a/src/@types/detail.ts b/src/@types/detail.ts
new file mode 100644
index 0000000..a42f183
--- /dev/null
+++ b/src/@types/detail.ts
@@ -0,0 +1,74 @@
+interface PackageDetailT {
+  name: string;
+  version: string;
+  os: string;
+  arch: string;
+  category: string;
+  srcRepo: string;
+  binDownloadUrl: string;
+  srcDownloadUrl: string;
+  summary: string;
+  osSupport: string;
+  repo: { type: string; url: string };
+  repoType: { type: string; url: string };
+  installation: string;
+  description: string;
+  requires: RequiresT[];
+  provides: string[];
+  conflicts: string[];
+  changeLog: string;
+  files: FilesT[];
+  maintainerId: string | null;
+  maintainerEmail: string | null;
+  maintainerGiteeId: string | null;
+  maintainerUpdateAt: string | null;
+  maintainerStatus: string | null;
+  upStream: string;
+  security: string;
+  similarPkgs: string;
+  downloadCount: number | null;
+  pkgId: string;
+  subPath: string | null;
+  license: string;
+}
+
+
+interface RequiresT {
+  name: string; flags: string; rel: string; ver: string; epoch: string
+}
+interface FilesT {
+  fileName: string
+}
+
+export interface EpkgDetailT extends PackageDetailT {
+  epkgSize: string;
+  epkgUpdateAt: string;
+  iconUrl: string | null;
+  securityLevel: string | null;
+}
+
+
+
+export interface RpmDetailT extends PackageDetailT {
+  id: string;
+  rpmSize: string;
+  rpmUpdateAt: string;
+}
+
+
+export interface ImageDetailT extends PackageDetailT {
+  id: string;
+  type: string;
+  download: string;
+  appSize: string | null;
+  environment: string;
+  iconUrl: string | null;
+  dependencyPkgs: string[];
+  appVer: string;
+  safeLabel: string | null;
+  imageTags: string;
+  imageUsage: string;
+  securityLevel: string | null;
+  latestOsSupport: boolean;
+}
+
diff --git a/src/assets/style/detail/index.scss b/src/assets/style/detail/index.scss
index 348198a..fa6381b 100644
--- a/src/assets/style/detail/index.scss
+++ b/src/assets/style/detail/index.scss
@@ -82,7 +82,7 @@
 
 .basic-info {
   margin-top: 26px;
- 
+
   p {
     @include tip1;
     color: var(--o-color-info2);
@@ -90,12 +90,12 @@
     align-items: top;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     border-right: 1px solid rgba(0, 0, 0, 0.1);
-    border-left: 4px solid #002fa7;
-    &:first-child{
+    border-left: 4px solid var(--o-color-primary1);
+    &:first-child {
       border-top: 1px solid rgba(0, 0, 0, 0.1);
     }
     .label {
-      background: rgba(0,47,167,0.05);
+      background: rgba(0, 47, 167, 0.05);
       padding: 12px 24px;
       min-width: 150px;
       border-right: 1px solid rgba(0, 0, 0, 0.1);
@@ -131,7 +131,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #002fa7;
+    background-color: var(--o-color-primary1);
     color: #fff;
     padding: 10px 0px;
   }
@@ -162,14 +162,15 @@
 .title {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   @include h3;
 }
 
-.ver{
-  background: #F2F4FA;
-border: 1px solid rgba(0,47,167,0.20);
-border-radius: 4px;
-font-size: 18px;
-color: #002FA7;
-padding: 6px 24px;
+.ver {
+  background: #f2f4fa;
+  @include text2;
+  border: 1px solid rgba(0, 47, 167, 0.2);
+  border-radius: var(--layout-pkg-radius);
+  color: var(--o-color-primary1);
+  padding: 6px 24px;
 }
diff --git a/src/components/AppBreadcrumb.vue b/src/components/AppBreadcrumb.vue
index 649947b..07ffe01 100644
--- a/src/components/AppBreadcrumb.vue
+++ b/src/components/AppBreadcrumb.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
 import { OBreadcrumb, OBreadcrumbItem } from '@opensig/opendesign';
 import { useLocale } from '@/composables/useLocale';
-import { resourceData } from '@/data/home/index';
+import { homeData } from '@/data/home/index';
+import { HomeInfoT } from '@/@types/app';
 
 const props = defineProps({
   id: {
@@ -15,19 +17,17 @@ const props = defineProps({
 });
 
 const { locale } = useLocale();
+const breadcrumbInfo = ref({} as HomeInfoT);
 
-const breadcrumbInfo = () => {
-  resourceData.forEach((item) => {
-    if (item.id === props.id) {
-      return item;
-    }
-  });
-};
-breadcrumbInfo()
+homeData.forEach((item) => {
+  if (item.id === props.id) {
+    breadcrumbInfo.value = item;
+  }
+});
 </script>
 
 <template>
-  <OBreadcrumb>
+  <OBreadcrumb class="app-breadcrumb">
     <OBreadcrumbItem :to="/${locale.value}/">软件市场</OBreadcrumbItem>
     <OBreadcrumbItem :to="`/${locale.value}/${breadcrumbInfo.href}`">{{ breadcrumbInfo.name }}</OBreadcrumbItem>
     <OBreadcrumbItem>{{ name }} </OBreadcrumbItem>
diff --git a/src/components/DetailAside.vue b/src/components/DetailAside.vue
index c12bb72..728370d 100644
--- a/src/components/DetailAside.vue
+++ b/src/components/DetailAside.vue
@@ -153,9 +153,11 @@ const arraySpanMethod = (rowIndex: number, colIdx: number, row: any, column: any
 
 const { locale } = useLocale();
 const jumpTo = (name: string, id: string) => {
-  const detailType = props.type === 'IMAGE' ? 'image' : props.type === 'RPM' ? 'package' : 'epkg';
-  const newHref = `/${locale.value}/${detailType}/${xssAllTag(name)}?type=${props.type}&pkgId=${id}`;
-  return newHref;
+  if (props.type) {
+    const detailType = props.type === 'IMAGE' ? 'image' : props.type === 'RPM' ? 'package' : 'epkg';
+    const newHref = `/${locale.value}/${detailType}/${xssAllTag(name)}?type=${props.type}&pkgId=${id}`;
+    return newHref;
+  }
 };
 </script>
 
@@ -242,8 +244,5 @@ const jumpTo = (name: string, id: string) => {
     padding: 2px 12px;
     font-size: 14px !important;
   }
-  th {
-    font-weight: 600;
-  }
 }
 </style>
diff --git a/src/components/OTableItemNew.vue b/src/components/OTableItemNew.vue
index d2ccdbf..bd4d202 100644
--- a/src/components/OTableItemNew.vue
+++ b/src/components/OTableItemNew.vue
@@ -67,7 +67,7 @@ const onExternalDialog = (href: string) => {
 
 <template>
   <div class="table-main">
-    <OTable :columns="columns" :data="data" :loading="loading" border="row-column">
+    <OTable :columns="columns" :data="data" :loading="loading" border="all">
       <template #head="{ columns }">
         <th v-for="item in columns" :key="item.key" :class="item.key">{{ item.label }}</th>
       </template>
diff --git a/src/data/detail/index.ts b/src/data/detail/index.ts
index 8b0e72d..efeac3e 100644
--- a/src/data/detail/index.ts
+++ b/src/data/detail/index.ts
@@ -11,14 +11,14 @@ export const tabList = ['概览', 'Tags'];
 // RPM更多信息表头
 export const moreColumns = [
   { label: 'Name', key: 'name', style: 'width:35%' },
-  { label: 'Flags', key: 'flags', style: 'width:10%' },
-  { label: 'Rel', key: 'rel', style: 'width:25%' },
+  { label: 'Flags', key: 'flags', style: 'width:15%' },
+  { label: 'Rel', key: 'rel', style: 'width:22%' },
   { label: 'Ver', key: 'ver' },
   { label: 'Epoch', key: 'epoch', style: 'width:12%' },
 ];
 // 版本支持
-export const verColumns =  [
+export const verColumns = [
   { label: 'openEuler版本', key: 'os' },
-  { label: '架构', key: 'arch' , style: 'width:30%' },
-  { label: '操作', key: 'flags', style: 'width:30%'   },
+  { label: '架构', key: 'arch', style: 'width:30%' },
+  { label: '操作', key: 'flags', style: 'width:30%' },
 ];;
diff --git a/src/data/home/index.ts b/src/data/home/index.ts
index d024480..911c834 100644
--- a/src/data/home/index.ts
+++ b/src/data/home/index.ts
@@ -7,7 +7,7 @@ import ImageIcon from '~icons/pkg/image.svg';
 import RpmIcon from '~icons/pkg/rpm.svg';
 
 
-export const resourceData = [
+export const homeData = [
   {
     id: 'apppkg',
     name: '领域应用',
diff --git a/src/views/apppkg/APkgContent.vue b/src/views/apppkg/APkgContent.vue
index 731b6e6..5e5178d 100644
--- a/src/views/apppkg/APkgContent.vue
+++ b/src/views/apppkg/APkgContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, computed, onMounted } from 'vue';
-import { ORow, OCol, OTag, vLoading, OLink, OIcon } from '@opensig/opendesign';
+import { ORow, OCol, OTag, vLoading, OLink, OIcon, isUndefined, isString } from '@opensig/opendesign';
 import { getSearchData } from '@/api/api-search';
 import { getSearchAllColumn, getSearchAllFiled } from '@/api/api-domain';
 import { useRoute, useRouter } from 'vue-router';
@@ -218,31 +218,31 @@ watch(
   { deep: true }
 );
 
-watch(
-  () => route.query.name as string,
-  (v: string) => {
-    if (searchKey.value !== v && v !== undefined) {
-      searchKey.value = v;
-    }
-    if (v === '') {
-      isSearchDocs.value = false;
-    }
+// -------------------- 监听 url query 变化 触发搜索 ---------------------
+const handleQueryData = () => {
+  const query = route.query;
+  const { name, tab, key } = query;
+  if (!isUndefined(name) && name) {
+    searchKey.value = name?.toString();
     currentPage.value = 1;
+  } else if (name === '') {
+    isSearchDocs.value = false;
   }
-);
-
-watch(
-  () => route.query.tab as string,
-  (v: string) => {
-    tabName.value = v;
+  if (isString(tab) && tab) {
+    tabName.value = tab?.toString();
   }
-);
+  if (isString(key) && key) {
+    keywordType.value = key?.toString();
+  }
+};
+handleQueryData();
 
 watch(
-  () => route.query.key as string,
-  (v: string) => {
-    keywordType.value = v;
-  }
+  () => route.query,
+  () => {
+    handleQueryData();
+  },
+  { deep: true }
 );
 </script>
 
diff --git a/src/views/apppkg/TheAppPkg.vue b/src/views/apppkg/TheAppPkg.vue
index 38870be..24cfa0a 100644
--- a/src/views/apppkg/TheAppPkg.vue
+++ b/src/views/apppkg/TheAppPkg.vue
@@ -2,11 +2,11 @@
 import AppBanner from '@/components/AppBanner.vue';
 import ContentWrapper from '@/components/ContentWrapper.vue';
 import AppPkgContent from './APkgContent.vue';
-import { resourceData } from '@/data/home/index';
+import { homeData } from '@/data/home/index';
 
 import bannerImg from '@/assets/banner/banner.jpg';
 
-const bannerInfo = resourceData[0];
+const bannerInfo = homeData[0];
 </script>
 <template>
   <AppBanner :title="bannerInfo.name" :background-image="bannerImg" :subtitle="bannerInfo.desc" />
diff --git a/src/views/apppkg/TheNewDetail.vue b/src/views/apppkg/TheNewDetail.vue
index f66fc4a..8208fb7 100644
--- a/src/views/apppkg/TheNewDetail.vue
+++ b/src/views/apppkg/TheNewDetail.vue
@@ -4,7 +4,8 @@ import { OTab, OTabPane, OTable, OLink, OIcon, OTag } from '@opensig/opendesign'
 import { useRoute } from 'vue-router';
 import { getDetails, getDetail, getTags, getVer } from '@/api/api-domain';
 import { useMarkdown } from '@/composables/useMarkdown';
-import type { AppInfoT } from '@/@types/app';
+import type { AppInfoT, MaintainerT, DetailItemT } from '@/@types/app';
+
 import { OPENEULER_CONTACT } from '@/data/config';
 import AppFeedback from '@/components/AppFeedback.vue';
 import DetailHead from '@/components/DetailHeader.vue';
@@ -17,24 +18,14 @@ import IconRpm from '~icons/pkg/rpm.svg';
 import { columnTags } from '@/data/detail/index';
 import { useI18n } from 'vue-i18n';
 import { useViewStore } from '@/stores/common';
-type MaintainerT = {
-  maintainerId: string;
-  maintainerEmail: string;
-  maintainerGiteeId: string;
-};
 
-interface DetailItem {
-  name: string;
-  value: string | any;
-  type?: string;
-}
 const { t } = useI18n();
 const route = useRoute();
 const { mkit } = useMarkdown();
 
 const activeName = ref();
 const typePkg = ref();
-const basicInfo = ref<DetailItem[]>([]);
+const basicInfo = ref<DetailItemT[]>([]);
 const version = ref();
 const installation = ref('');
 const downloadData = ref('');
@@ -42,7 +33,7 @@ const files = ref([]);
 const maintainer = ref<MaintainerT>({ maintainerId: '', maintainerEmail: '', maintainerGiteeId: '' });
 const upStream = ref();
 const security = ref();
-const moreMessge = ref<DetailItem[]>([]);
+const moreMessge = ref<DetailItemT[]>([]);
 const description = ref();
 const appData = ref<AppInfoT>({
   name: '',
@@ -68,16 +59,17 @@ const epkgData = ref();
 const rpmData = ref();
 const imgData = ref();
 const queryEntity = () => {
-  activeName.value = route.query.type as string;
+  const query = route.query;
+  const { type, appPkgId, epkgPkgId, rpmPkgId } = query;
+  activeName.value = type as string;
+
   if (pkgId.value) {
     getDetail({
-      appPkgId: (route.query.appPkgId as string) || '',
-      epkgPkgId: (route.query.epkgPkgId as string) || '',
-      rpmPkgId:(route.query.rpmPkgId as string) || '',
+      appPkgId: (appPkgId as string) || '',
+      epkgPkgId: (epkgPkgId as string) || '',
+      rpmPkgId: (rpmPkgId as string) || '',
     })
       .then((res) => {
-        
-        
         const data = res.data;
         tabList.value = data.tags;
         epkgData.value = data['EPKG'];
@@ -282,7 +274,7 @@ const repeatTags = (v: string) => {
             <AppSection v-if="item !== 'IMAGE'">
               <div class="title">
                 <p>> 基本信息</p>
-                <p v-if="item === 'RPM'" class="ver">版本号：{{ version }}</p>
+                <p v-if="item === 'RPM' || version" class="ver">版本号：{{ version }}</p>
               </div>
               <div class="basic-info">
                 <p v-for="item in basicInfo" :key="item.name">
@@ -305,7 +297,7 @@ const repeatTags = (v: string) => {
               <OTab variant="text" :line="false" class="domain-tabs switch" v-if="item !== 'IMAGE'">
                 <template v-for="it in moreMessge" :key="it">
                   <OTabPane class="tab-pane" v-if="it.value.length > 0" :label="it.name">
-                    <OTable :columns="moreColumns" :data="it.value" :small="true"> </OTable>
+                    <OTable :columns="moreColumns" :data="it.value" :small="true" border="all"> </OTable>
                   </OTabPane>
                 </template>
               </OTab>
@@ -316,7 +308,7 @@ const repeatTags = (v: string) => {
                   <div v-if="item === '概览'">
                     <div class="title">
                       <p>> 基本信息</p>
-                      <p class="ver">版本号：{{ version }}</p>
+                      <p v-if="version" class="ver">版本号：{{ version }}</p>
                     </div>
                     <div class="basic-info">
                       <p v-for="item in basicInfo" :key="item.name">
diff --git a/src/views/epkg/EpkgContent.vue b/src/views/epkg/EpkgContent.vue
index fc99828..ff40415 100644
--- a/src/views/epkg/EpkgContent.vue
+++ b/src/views/epkg/EpkgContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, computed, onMounted } from 'vue';
-import { OTag, OLink, OIcon } from '@opensig/opendesign';
+import { OTag, OLink, OIcon, isUndefined, isString } from '@opensig/opendesign';
 
 import { getSearchData } from '@/api/api-search';
 import { getSearchAllColumn, getSearchAllFiled } from '@/api/api-domain';
@@ -79,7 +79,7 @@ const querySearch = () => {
         total.value = res.data.total;
       }
       isLoading.value = false;
-      isSearch.value = true;
+      isSearchDocs.value = true;
       if (pkgData.value.length === 0) {
         isSearchError.value = true;
       }
@@ -87,14 +87,14 @@ const querySearch = () => {
     .catch(() => {
       pkgData.value = [];
       isLoading.value = false;
-      isSearch.value = false;
+      isSearchDocs.value = false;
       useViewStore().showNotFound();
     });
 };
 
 // sql搜索
 const isSearchError = ref(false);
-const isSearch = ref(false);
+const isSearchDocs = ref(false);
 const queryAllpkg = () => {
   const params = {
     name: tabName.value,
@@ -180,7 +180,7 @@ const resetTag = () => {
   searchOs.value = [];
   searchArch.value = [];
   searchCategory.value = [];
-  isSearch.value = false;
+  isSearchDocs.value = false;
   nameOrder.value = '';
   timeOrder.value = '';
 };
@@ -235,31 +235,31 @@ watch(
   { deep: true }
 );
 
-watch(
-  () => route.query.name as string,
-  (v: string) => {
-    if (searchKey.value !== v && v !== undefined) {
-      searchKey.value = v;
-    }
-    if (v === '') {
-      isSearch.value = false;
-    }
+// -------------------- 监听 url query 变化 触发搜索 ---------------------
+const handleQueryData = () => {
+  const query = route.query;
+  const { name, tab, key } = query;
+  if (!isUndefined(name) && name) {
+    searchKey.value = name?.toString();
     currentPage.value = 1;
+  } else if (name === '') {
+    isSearchDocs.value = false;
   }
-);
-
-watch(
-  () => route.query.tab as string,
-  (v: string) => {
-    tabName.value = v;
+  if (isString(tab) && tab) {
+    tabName.value = tab?.toString();
   }
-);
+  if (isString(key) && key) {
+    keywordType.value = key?.toString();
+  }
+};
+handleQueryData();
 
 watch(
-  () => route.query.key as string,
-  (v: string) => {
-    keywordType.value = v;
-  }
+  () => route.query,
+  () => {
+    handleQueryData();
+  },
+  { deep: true }
 );
 </script>
 
diff --git a/src/views/epkg/TheDetail.vue b/src/views/epkg/TheDetail.vue
index 0f5a3cd..55b2f63 100644
--- a/src/views/epkg/TheDetail.vue
+++ b/src/views/epkg/TheDetail.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import { OBreadcrumb, OBreadcrumbItem, OTab, OTabPane, OTable, OLink } from '@opensig/opendesign';
+import { OTab, OTabPane, OTable, OLink } from '@opensig/opendesign';
 import { OPENEULER_CONTACT } from '@/data/config';
 import { useRoute } from 'vue-router';
 import { useMarkdown } from '@/composables/useMarkdown';
-import type { AppInfoT } from '@/@types/app';
-import { useLocale } from '@/composables/useLocale';
+import type { AppInfoT, MaintainerT, DetailItemT } from '@/@types/app';
 import { useI18n } from 'vue-i18n';
 import { getDetails, getVer } from '@/api/api-domain';
 import AppFeedback from '@/components/AppFeedback.vue';
@@ -15,23 +14,12 @@ import DetailAside from '@/components/DetailAside.vue';
 import { moreColumns } from '@/data/detail/index';
 import defaultImg from '@/assets/default-logo.png';
 import { useViewStore } from '@/stores/common';
-type MaintainerT = {
-  maintainerId: string;
-  maintainerEmail: string;
-  maintainerGiteeId: string;
-};
-
-interface DetailItem {
-  name: string;
-  value: string | any;
-  type?: string;
-}
 
 const route = useRoute();
 const { mkit } = useMarkdown();
 const { t } = useI18n();
 
-const basicInfo = ref<DetailItem[]>([]);
+const basicInfo = ref<DetailItemT[]>([]);
 const version = ref();
 const installation = ref('');
 const downloadData = ref('');
@@ -39,7 +27,7 @@ const files = ref([]);
 const maintainer = ref<MaintainerT>({ maintainerId: '', maintainerEmail: '', maintainerGiteeId: '' });
 const upStream = ref();
 const security = ref();
-const moreMessge = ref<DetailItem[]>([]);
+const moreMessge = ref<DetailItemT[]>([]);
 const description = ref();
 const appData = ref<AppInfoT>({
   name: '',
@@ -50,7 +38,7 @@ const appData = ref<AppInfoT>({
   bin_code: '',
 });
 //详情请求
-const queryPkg = (tabValue: string, pkgId: any) => {
+const queryPkg = (tabValue: string, pkgId: string) => {
   getDetails(tabValue, pkgId)
     .then((res) => {
       const data = res.data.list[0];
@@ -62,7 +50,7 @@ const queryPkg = (tabValue: string, pkgId: any) => {
 };
 
 // 获取tab分类
-const pkgId = (route.query.pkgId as string);
+const pkgId = route.query.pkgId as string;
 const queryEntity = () => {
   getChange();
 };
@@ -76,20 +64,21 @@ const getPkg = (tabValue: string) => {
 
 onMounted(() => {
   queryEntity();
-  getTitle();
 });
 const summary = ref();
 const license = ref();
 const tagVer = ref();
 const getDetailValue = (data: any) => {
-  basicInfo.value = [
-    { name: '详细描述', value: data?.description },
-    { name: '版本支持情况', value: data.osSupport },
-    { name: '架构', value: data.arch },
-    { name: '软件包分类', value: data.epkgCategory || '其他' },
-    { name: '所属仓库', value: JSON.parse(data?.repo).url, type: JSON.parse(data?.repo).type },
-    { name: 'Repo源', value: JSON.parse(data?.repoType).url, type: JSON.parse(data?.repoType).type },
-  ];
+  try {
+    basicInfo.value = [
+      { name: '详细描述', value: data?.description },
+      { name: '版本支持情况', value: data.osSupport },
+      { name: '架构', value: data.arch },
+      { name: '软件包分类', value: data.epkgCategory || '其他' },
+      { name: '所属仓库', value: JSON.parse(data?.repo).url, type: JSON.parse(data?.repo).type },
+      { name: 'Repo源', value: JSON.parse(data?.repoType).url, type: JSON.parse(data?.repoType).type },
+    ];
+  } catch (res) {}
   files.value = JSON.parse(data?.files);
   summary.value = data.summary;
   moreMessge.value = [
@@ -119,14 +108,6 @@ const getDetailValue = (data: any) => {
   queryVer();
 };
 
-const { locale } = useLocale();
-
-const breadcrumbInfo = ref({ name: '', path: '' });
-const getTitle = () => {
-  breadcrumbInfo.value = { path: `/${locale.value}/epkg`, name: 'EPKG' };
-};
-const home = ref({ name: t('software.softwareHome'), path: `/${locale.value}/` });
-
 const showExternalDlg = ref(false);
 const externalLink = ref('');
 const onExternalDialog = (href: string) => {
@@ -145,18 +126,17 @@ const queryVer = () => {
 
 <template>
   <ContentWrapper vertical-padding="24px">
-    <OBreadcrumb>
-      <OBreadcrumbItem :to="home.path">{{ home.name }}</OBreadcrumbItem>
-      <OBreadcrumbItem :to="breadcrumbInfo.path">{{ breadcrumbInfo.name }}</OBreadcrumbItem>
-      <OBreadcrumbItem>{{ appData.name }} </OBreadcrumbItem>
-    </OBreadcrumb>
+    <!-- 锚点 -->
+    <AppBreadcrumb id="epkg" :name="appData.name" />
+
     <DetailHead :data="appData" :basicInfo="summary" :maintainer="maintainer" />
+
     <div class="detail-row">
       <div class="detail-row-main">
         <AppSection>
           <div class="title">
             <p>> 基本信息</p>
-            <p class="ver">版本号：{{ version }}</p>
+            <p v-if="version" class="ver">版本号：{{ version }}</p>
           </div>
           <div class="basic-info">
             <p v-for="item in basicInfo" :key="item.name">
@@ -180,7 +160,7 @@ const queryVer = () => {
           <OTab variant="text" :line="false" class="domain-tabs switch">
             <template v-for="item in moreMessge" :key="item">
               <OTabPane class="tab-pane switch" v-if="item.value.length > 0" :label="item.name">
-                <OTable :columns="moreColumns" :data="item.value"> </OTable>
+                <OTable :columns="moreColumns" :data="item.value" :small="true" border="all"> </OTable>
               </OTabPane>
             </template>
           </OTab>
diff --git a/src/views/epkg/TheEpkg.vue b/src/views/epkg/TheEpkg.vue
index 6c7a272..0518262 100644
--- a/src/views/epkg/TheEpkg.vue
+++ b/src/views/epkg/TheEpkg.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import AppBanner from '@/components/AppBanner.vue';
 import EpkgContent from './EpkgContent.vue';
-import { resourceData } from '@/data/home/index';
+import { homeData } from '@/data/home/index';
 import bannerImg from '@/assets/banner/banner.jpg';
 
-const bannerInfo = resourceData[3];
+const bannerInfo = homeData[3];
 </script>
 <template>
   <AppBanner :title="bannerInfo.name" :background-image="bannerImg" :subtitle="bannerInfo.desc" />
diff --git a/src/views/home/TheHome.vue b/src/views/home/TheHome.vue
index cedc417..b5a869e 100644
--- a/src/views/home/TheHome.vue
+++ b/src/views/home/TheHome.vue
@@ -6,7 +6,7 @@ import type { AppT } from '@/@types/app';
 import HomeHeader from './HomeHeader.vue';
 import HomeNews from './HomeNews.vue';
 import HomeSkeleton from './HomeSkeleton.vue';
-import { solutionData, resourceData } from '@/data/home/index';
+import { solutionData, homeData } from '@/data/home/index';
 import { useLocale } from '@/composables/useLocale';
 import { getTagsIcon } from '@/utils/common';
 import { useScreen } from '@/composables/useScreen';
@@ -108,7 +108,7 @@ onMounted(() => {
             <div class="resource-content">
               <ORow flex-wrap="wrap">
                 <OCol
-                  v-for="item in resourceData"
+                  v-for="item in homeData"
                   :key="item.name"
                   flex="0 1 25%"
                   :laptop="{ flex: '0 1 25%' }"
diff --git a/src/views/image/ImageContent.vue b/src/views/image/ImageContent.vue
index e0d72aa..f1ddde3 100644
--- a/src/views/image/ImageContent.vue
+++ b/src/views/image/ImageContent.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref, watch, computed, onMounted } from 'vue';
-import { OTag, OLink, OIcon } from '@opensig/opendesign';
+import { OTag, OLink, OIcon, isUndefined, isString } from '@opensig/opendesign';
 import { getSearchData } from '@/api/api-search';
 import { useRoute } from 'vue-router';
 import { getSearchAllFiled, getSearchAllColumn } from '@/api/api-domain';
@@ -71,7 +71,7 @@ const querySearch = () => {
       if (res.code === 200) {
         pkgData.value = res.data.apppkg;
         total.value = res.data.total;
-        isSearch.value = true;
+        isSearchDocs.value = true;
       }
       isLoading.value = false;
       if (pkgData.value.length === 0) {
@@ -81,14 +81,14 @@ const querySearch = () => {
     .catch(() => {
       pkgData.value = [];
       isLoading.value = false;
-      isSearch.value = false;
+      isSearchDocs.value = false;
       useViewStore().showNotFound();
     });
 };
 
 // sql搜索
 const isSearchError = ref(false);
-const isSearch = ref(false);
+const isSearchDocs = ref(false);
 const queryAllpkg = () => {
   const params = {
     name: tabName.value,
@@ -173,7 +173,7 @@ const resetTag = () => {
   searchArch.value = [];
   searchOs.value = [];
   searchCategory.value = [];
-  isSearch.value = false;
+  isSearchDocs.value = false;
   nameOrder.value = '';
 };
 
@@ -226,31 +226,31 @@ watch(
   { deep: true }
 );
 
-watch(
-  () => route.query.name as string,
-  (v: string) => {
-    if (searchKey.value !== v && v !== undefined) {
-      searchKey.value = v;
-    }
-    if (v === '') {
-      isSearch.value = false;
-    }
+// -------------------- 监听 url query 变化 触发搜索 ---------------------
+const handleQueryData = () => {
+  const query = route.query;
+  const { name, tab, key } = query;
+  if (!isUndefined(name) && name) {
+    searchKey.value = name?.toString();
     currentPage.value = 1;
+  } else if (name === '') {
+    isSearchDocs.value = false;
   }
-);
-
-watch(
-  () => route.query.tab as string,
-  (v: string) => {
-    tabName.value = v;
+  if (isString(tab) && tab) {
+    tabName.value = tab?.toString();
   }
-);
+  if (isString(key) && key) {
+    keywordType.value = key?.toString();
+  }
+};
+handleQueryData();
 
 watch(
-  () => route.query.key as string,
-  (v: string) => {
-    keywordType.value = v;
-  }
+  () => route.query,
+  () => {
+    handleQueryData();
+  },
+  { deep: true }
 );
 </script>
 
diff --git a/src/views/image/TheDetail.vue b/src/views/image/TheDetail.vue
index 9e33233..720b88c 100644
--- a/src/views/image/TheDetail.vue
+++ b/src/views/image/TheDetail.vue
@@ -1,34 +1,23 @@
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import { OBreadcrumb, OBreadcrumbItem, OTab, OTabPane, OTag } from '@opensig/opendesign';
+import { OTab, OTabPane, OTag } from '@opensig/opendesign';
 import { useRoute } from 'vue-router';
 import { useMarkdown } from '@/composables/useMarkdown';
-import type { AppInfoT } from '@/@types/app';
+import type { AppInfoT, MaintainerT, DetailItemT } from '@/@types/app';
+import type { ImageDetailT } from '@/@types/detail';
 import { getDetails, getTags, getVer } from '@/api/api-domain';
 import { OPENEULER_CONTACT } from '@/data/config';
-import { useLocale } from '@/composables/useLocale';
 import AppFeedback from '@/components/AppFeedback.vue';
 import DetailHead from '@/components/DetailHeader.vue';
 import DetailAside from '@/components/DetailAside.vue';
 import defaultImg from '@/assets/default-logo.png';
 import { columnTags, tabList } from '@/data/detail/index';
 import { useViewStore } from '@/stores/common';
-type MaintainerT = {
-  maintainerId: string;
-  maintainerEmail: string;
-  maintainerGiteeId: string;
-};
-
-interface DetailItem {
-  name: string;
-  value: string | any;
-  type?: string;
-}
 
 const route = useRoute();
 const { mkit } = useMarkdown();
 const activeName = ref(tabList[0]);
-const basicInfo = ref<DetailItem[]>([]);
+const basicInfo = ref<DetailItemT[]>([]);
 const version = ref();
 const installation = ref('');
 const downloadData = ref('');
@@ -46,7 +35,7 @@ const appData = ref<AppInfoT>({
 });
 
 //详情请求
-const queryPkg = (tabValue: string, pkgId: any) => {
+const queryPkg = (tabValue: string, pkgId: string) => {
   getDetails(tabValue, pkgId)
     .then((res) => {
       const data = res.data.list[0];
@@ -58,7 +47,7 @@ const queryPkg = (tabValue: string, pkgId: any) => {
 };
 
 // 获取tab分类
-const pkgId = (route.query.pkgId as string);
+const pkgId = route.query.pkgId as string;
 const queryEntity = () => {
   getChange();
 };
@@ -73,14 +62,13 @@ const getPkg = (tabValue: string) => {
 
 onMounted(() => {
   queryEntity();
-  getTitle();
 });
 const imageUsage = ref();
 const summary = ref();
 const latestOsSupport = ref();
 const license = ref();
 const tagVer = ref();
-const getDetailValue = (data: any) => {
+const getDetailValue = (data: ImageDetailT) => {
   basicInfo.value = [
     { name: '架构', value: data.arch || '' },
 
@@ -89,7 +77,7 @@ const getDetailValue = (data: any) => {
     { name: '版本支持情况', value: data.osSupport || '' },
   ];
   summary.value = data.description;
-  appData.value.size = data.appSize || 0;
+  appData.value.size = data.appSize || '';
   maintainer.value = {
     maintainerId: data?.maintainerId || 'openEuler community',
     maintainerEmail: data?.maintainerEmail || OPENEULER_CONTACT,
@@ -120,13 +108,6 @@ const queryTags = () => {
     tagsValue.value = res.data.list;
   });
 };
-const { locale } = useLocale();
-
-const breadcrumbInfo = ref({ name: '', path: '' });
-const getTitle = () => {
-  breadcrumbInfo.value = { path: `/${locale.value}/image`, name: '容器镜像' };
-};
-const home = ref({ name: '软件市场', path: `/${locale.value}/` });
 
 // tags切换功能
 const isTags = ref(false);
@@ -145,11 +126,9 @@ const queryVer = () => {
 
 <template>
   <ContentWrapper vertical-padding="24px">
-    <OBreadcrumb>
-      <OBreadcrumbItem :to="home.path">{{ home.name }}</OBreadcrumbItem>
-      <OBreadcrumbItem :to="breadcrumbInfo.path">{{ breadcrumbInfo.name }}</OBreadcrumbItem>
-      <OBreadcrumbItem>{{ appData.name }} </OBreadcrumbItem>
-    </OBreadcrumb>
+    <!-- 锚点 -->
+    <AppBreadcrumb id="image" :name="appData.name" />
+
     <DetailHead :data="appData" :basicInfo="summary" :maintainer="maintainer" />
 
     <div class="detail-row">
@@ -160,7 +139,7 @@ const queryVer = () => {
               <div v-if="item === '概览'">
                 <div class="title">
                   <p>> 基本信息</p>
-                  <p class="ver">版本号：{{ version }}</p>
+                  <p v-if="version" class="ver">版本号：{{ version }}</p>
                 </div>
                 <div class="basic-info">
                   <p v-for="item in basicInfo" :key="item.name">
diff --git a/src/views/image/TheImage.vue b/src/views/image/TheImage.vue
index 7087766..1b9929c 100644
--- a/src/views/image/TheImage.vue
+++ b/src/views/image/TheImage.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import ImageContent from './ImageContent.vue';
 import AppBanner from '@/components/AppBanner.vue';
-import { resourceData } from '@/data/home/index';
+import { homeData } from '@/data/home/index';
 
 import bannerImg from '@/assets/banner/banner.jpg';
 
-const bannerInfo = resourceData[2];
+const bannerInfo = homeData[2];
 </script>
 <template>
   <AppBanner :title="bannerInfo.name" :background-image="bannerImg" :subtitle="bannerInfo.desc" />
diff --git a/src/views/package/RpmContent.vue b/src/views/package/RpmContent.vue
index 750ba87..53c15f4 100644
--- a/src/views/package/RpmContent.vue
+++ b/src/views/package/RpmContent.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref, watch, computed, onMounted } from 'vue';
-import { OTag, vLoading, OLink, OIcon } from '@opensig/opendesign';
+import { OTag, vLoading, OLink, OIcon, isUndefined, isString } from '@opensig/opendesign';
 import { useI18n } from 'vue-i18n';
 import { getSearchData } from '@/api/api-search';
 import { useRoute } from 'vue-router';
@@ -62,7 +62,7 @@ const searchParams = computed(() => {
   };
 });
 const isSearchError = ref(false);
-const isSearch = ref(false);
+const isSearchDocs = ref(false);
 // es搜索
 const querySearch = () => {
   isLoading.value = true;
@@ -74,7 +74,7 @@ const querySearch = () => {
       pkgData.value = res.data.rpmpkg;
       total.value = res.data.total;
       isLoading.value = false;
-      isSearch.value = true;
+      isSearchDocs.value = true;
       if (pkgData.value.length === 0) {
         isSearchError.value = true;
       }
@@ -82,7 +82,7 @@ const querySearch = () => {
     .catch(() => {
       pkgData.value = [];
       isLoading.value = false;
-      isSearch.value = false;
+      isSearchDocs.value = false;
       useViewStore().showNotFound();
     });
 };
@@ -191,7 +191,7 @@ const handleResettingTag = () => {
   searchCategory.value = [];
   timeOrder.value = '';
   nameOrder.value = '';
-  isSearch.value = false;
+  isSearchDocs.value = false;
 };
 
 // 更新时间、字母排序
@@ -245,31 +245,31 @@ watch(
   { deep: true }
 );
 
-watch(
-  () => route.query.name as string,
-  (v: string) => {
-    if (searchKey.value !== v && v !== undefined) {
-      searchKey.value = v;
-    }
-    if (v === '') {
-      isSearch.value = false;
-    }
+// -------------------- 监听 url query 变化 触发搜索 ---------------------
+const handleQueryData = () => {
+  const query = route.query;
+  const { name, tab, key } = query;
+  if (!isUndefined(name) && name) {
+    searchKey.value = name?.toString();
     currentPage.value = 1;
+  } else if (name === '') {
+    isSearchDocs.value = false;
   }
-);
-
-watch(
-  () => route.query.tab as string,
-  (v: string) => {
-    tabName.value = v;
+  if (isString(tab) && tab) {
+    tabName.value = tab?.toString();
   }
-);
+  if (isString(key) && key) {
+    keywordType.value = key?.toString();
+  }
+};
+handleQueryData();
 
 watch(
-  () => route.query.key as string,
-  (v: string) => {
-    keywordType.value = v;
-  }
+  () => route.query,
+  () => {
+    handleQueryData();
+  },
+  { deep: true }
 );
 </script>
 
diff --git a/src/views/package/TheDetail.vue b/src/views/package/TheDetail.vue
index e0b1d55..f3fa8d2 100644
--- a/src/views/package/TheDetail.vue
+++ b/src/views/package/TheDetail.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import { OBreadcrumb, OBreadcrumbItem, OTab, OTabPane, OTable, OLink } from '@opensig/opendesign';
+import { OTab, OTabPane, OTable, OLink } from '@opensig/opendesign';
 import { OPENEULER_CONTACT } from '@/data/config';
 import { useRoute } from 'vue-router';
 import { useMarkdown } from '@/composables/useMarkdown';
-import type { AppInfoT } from '@/@types/app';
-import { useLocale } from '@/composables/useLocale';
+import type { AppInfoT, MaintainerT, DetailItemT } from '@/@types/app';
 import { getDetails, getVer } from '@/api/api-domain';
 import defaultImg from '@/assets/default-logo.png';
 import AppFeedback from '@/components/AppFeedback.vue';
@@ -14,26 +13,17 @@ import DetailAside from '@/components/DetailAside.vue';
 import ExternalLink from '@/components/ExternalLink.vue';
 import { moreColumns } from '@/data/detail/index';
 import { useViewStore } from '@/stores/common';
-type MaintainerT = {
-  maintainerId: string;
-  maintainerEmail: string;
-  maintainerGiteeId: string;
-};
-interface DetailItem {
-  name: string;
-  value: string | any;
-  type?: string;
-}
+
 const route = useRoute();
 const { mkit } = useMarkdown();
-const basicInfo = ref<DetailItem[]>([]);
+const basicInfo = ref<DetailItemT[]>([]);
 const version = ref();
 const installation = ref('');
 const downloadData = ref('');
 const maintainer = ref<MaintainerT>({ maintainerId: '', maintainerEmail: '', maintainerGiteeId: '' });
 const upStream = ref();
 const security = ref();
-const moreMessge = ref<DetailItem[]>([]);
+const moreMessge = ref<DetailItemT[]>([]);
 const description = ref();
 const appData = ref<AppInfoT>({
   name: '',
@@ -56,7 +46,7 @@ const queryPkg = (tabValue: string, pkgId: any) => {
     });
 };
 
-const pkgId = (route.query.pkgId as string);
+const pkgId = route.query.pkgId as string;
 const queryEntity = () => {
   getChange();
 };
@@ -70,7 +60,6 @@ const getPkg = (tabValue: string) => {
 
 onMounted(() => {
   queryEntity();
-  getTitle();
 });
 const summary = ref();
 const license = ref();
@@ -112,14 +101,6 @@ const getDetailValue = (data: any) => {
   queryVer();
 };
 
-const { locale } = useLocale();
-
-const breadcrumbInfo = ref({ name: '', path: '' });
-const getTitle = () => {
-  breadcrumbInfo.value = { path: `/${locale.value}/package`, name: 'RPM' };
-};
-const home = ref({ name: '软件市场', path: `/${locale.value}/` });
-
 const showExternalDlg = ref(false);
 const externalLink = ref('');
 const onExternalDialog = (href: string) => {
@@ -138,11 +119,8 @@ const queryVer = () => {
 
 <template>
   <ContentWrapper vertical-padding="24px">
-    <OBreadcrumb>
-      <OBreadcrumbItem :to="home.path">{{ home.name }}</OBreadcrumbItem>
-      <OBreadcrumbItem :to="breadcrumbInfo.path">{{ breadcrumbInfo.name }}</OBreadcrumbItem>
-      <OBreadcrumbItem>{{ appData.name }} </OBreadcrumbItem>
-    </OBreadcrumb>
+    <!-- 锚点 -->
+    <AppBreadcrumb id="rpm" :name="appData.name" />
     <DetailHead :data="appData" :basicInfo="summary" :maintainer="maintainer" />
 
     <div class="detail-row">
@@ -150,7 +128,7 @@ const queryVer = () => {
         <AppSection>
           <div class="title">
             <p>> 基本信息</p>
-            <p class="ver">版本号：{{ version }}</p>
+            <p v-if="version" class="ver">版本号：{{ version }}</p>
           </div>
           <div class="basic-info">
             <p v-for="item in basicInfo" :key="item.name">
@@ -173,7 +151,7 @@ const queryVer = () => {
           <OTab variant="text" :line="false" class="domain-tabs switch">
             <template v-for="item in moreMessge" :key="item">
               <OTabPane class="tab-pane" v-if="item.value.length > 0" :label="item.name">
-                <OTable :columns="moreColumns" :data="item.value" :small="true"> </OTable>
+                <OTable :columns="moreColumns" :data="item.value" :small="true" border="all"> </OTable>
               </OTabPane>
             </template>
           </OTab>
diff --git a/src/views/package/TheRpm.vue b/src/views/package/TheRpm.vue
index 2f46c1b..c8d5b36 100644
--- a/src/views/package/TheRpm.vue
+++ b/src/views/package/TheRpm.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import AppBanner from '@/components/AppBanner.vue';
 import RpmContent from './RpmContent.vue';
-import { resourceData } from '@/data/home/index';
+import { homeData } from '@/data/home/index';
 
 import bannerImg from '@/assets/banner/banner.jpg';
 
-const bannerInfo = resourceData[1];
+const bannerInfo = homeData[1];
 </script>
 <template>
   <AppBanner :title="bannerInfo.name" :background-image="bannerImg" :subtitle="bannerInfo.desc" />
diff --git a/src/views/upstream/UpstreamContent.vue b/src/views/upstream/UpstreamContent.vue
index e23bf12..1acdc77 100644
--- a/src/views/upstream/UpstreamContent.vue
+++ b/src/views/upstream/UpstreamContent.vue
@@ -220,7 +220,7 @@ watch(
       </div>
       <ResultNotApp v-if="appData.length === 0 && isSearchError" />
       <div class="pkg-panel" v-else>
-        <OTable :columns="columns" :data="appData" :loading="isLoading" border="row-column">
+        <OTable :columns="columns" :data="appData" :loading="isLoading" border="all">
           <template #td_name="{ row }">
             <span v-dompurify-html="row.name"></span>
           </template>
-- 
Gitee


From 2a3158a6457fc1f19034a7a640725825a7f84677 Mon Sep 17 00:00:00 2001
From: YCA001 <2915341988@qq.com>
Date: Sat, 25 May 2024 09:49:57 +0800
Subject: [PATCH 6/7] =?UTF-8?q?=E8=AF=A6=E6=83=85=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@types/detail.ts              | 17 +++++++++++------
 src/components/DetailAside.vue    |  2 +-
 src/utils/common.ts               | 11 +++++++++++
 src/views/apppkg/TheNewDetail.vue | 18 ++++++++++--------
 src/views/epkg/TheDetail.vue      |  2 +-
 src/views/image/TheDetail.vue     |  4 ++--
 src/views/package/TheDetail.vue   |  2 +-
 7 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/@types/detail.ts b/src/@types/detail.ts
index a42f183..aef029e 100644
--- a/src/@types/detail.ts
+++ b/src/@types/detail.ts
@@ -32,12 +32,15 @@ interface PackageDetailT {
   license: string;
 }
 
-
 interface RequiresT {
-  name: string; flags: string; rel: string; ver: string; epoch: string
+  name: string;
+  flags: string;
+  rel: string;
+  ver: string;
+  epoch: string;
 }
 interface FilesT {
-  fileName: string
+  fileName: string;
 }
 
 export interface EpkgDetailT extends PackageDetailT {
@@ -47,15 +50,12 @@ export interface EpkgDetailT extends PackageDetailT {
   securityLevel: string | null;
 }
 
-
-
 export interface RpmDetailT extends PackageDetailT {
   id: string;
   rpmSize: string;
   rpmUpdateAt: string;
 }
 
-
 export interface ImageDetailT extends PackageDetailT {
   id: string;
   type: string;
@@ -72,3 +72,8 @@ export interface ImageDetailT extends PackageDetailT {
   latestOsSupport: boolean;
 }
 
+export interface ParamsKeyT {
+  appPkgId: string | null;
+  epkgPkgId: string | null;
+  rpmPkgId: string | null;
+}
diff --git a/src/components/DetailAside.vue b/src/components/DetailAside.vue
index 728370d..3bf6ac0 100644
--- a/src/components/DetailAside.vue
+++ b/src/components/DetailAside.vue
@@ -185,7 +185,7 @@ const jumpTo = (name: string, id: string) => {
   <AppSection :title="`${data.name}版本支持情况`">
     <OTable :columns="verColumns" :data="verData" border="all" :cell-span="arraySpanMethod" :small="true">
       <template #td_flags="{ row }">
-        <a :href="jumpTo(data.name, row.pkgId)" color="primary" target="_blank" rel="noopener noreferrer">
+        <a :href="jumpTo(data.name, row.pkgId)" color="primary" rel="noopener noreferrer">
           <OTag v-if="row.os === tagVer[0] && row.arch === tagVer[1]" color="primary" :size="'small'">当前版本</OTag> <span v-else>查看</span></a
         >
       </template>
diff --git a/src/utils/common.ts b/src/utils/common.ts
index ce71071..563a509 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -136,4 +136,15 @@ export const getParamsRules = (data: any) => {
     }
   });
   return newData
+}
+import type { ParamsKeyT } from '@/@types/detail';
+export const getDetailRules = (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
 }
\ No newline at end of file
diff --git a/src/views/apppkg/TheNewDetail.vue b/src/views/apppkg/TheNewDetail.vue
index 8208fb7..65958fa 100644
--- a/src/views/apppkg/TheNewDetail.vue
+++ b/src/views/apppkg/TheNewDetail.vue
@@ -18,7 +18,7 @@ import IconRpm from '~icons/pkg/rpm.svg';
 import { columnTags } from '@/data/detail/index';
 import { useI18n } from 'vue-i18n';
 import { useViewStore } from '@/stores/common';
-
+import { getDetailRules } from '@/utils/common';
 const { t } = useI18n();
 const route = useRoute();
 const { mkit } = useMarkdown();
@@ -64,11 +64,13 @@ const queryEntity = () => {
   activeName.value = type as string;
 
   if (pkgId.value) {
-    getDetail({
-      appPkgId: (appPkgId as string) || '',
-      epkgPkgId: (epkgPkgId as string) || '',
-      rpmPkgId: (rpmPkgId as string) || '',
-    })
+    getDetail(
+      getDetailRules({
+        appPkgId: (appPkgId as string) || '',
+        epkgPkgId: (epkgPkgId as string) || '',
+        rpmPkgId: (rpmPkgId as string) || '',
+      })
+    )
       .then((res) => {
         const data = res.data;
         tabList.value = data.tags;
@@ -220,7 +222,7 @@ const imgList = ref<string[]>(['概览', 'Tags']);
 const imgName = ref('概览');
 const tagsValue = ref();
 const queryTags = () => {
-  getTags(appData.value.name).then((res) => {
+  getTags(encodeURIComponent(appData.value.name as string)).then((res) => {
     tagsValue.value = res.data.list;
   });
 };
@@ -245,7 +247,7 @@ const getTabIcon = (tab: string) => {
 //获取支持
 const verData = ref();
 const queryVer = () => {
-  getVer(tabValue.value, appData.value.name).then((res) => {
+  getVer(tabValue.value, encodeURIComponent(appData.value.name as string)).then((res) => {
     verData.value = res.data.list;
   });
 };
diff --git a/src/views/epkg/TheDetail.vue b/src/views/epkg/TheDetail.vue
index 55b2f63..2dafc6c 100644
--- a/src/views/epkg/TheDetail.vue
+++ b/src/views/epkg/TheDetail.vue
@@ -118,7 +118,7 @@ const onExternalDialog = (href: string) => {
 //获取支持
 const verData = ref();
 const queryVer = () => {
-  getVer('epkgpkg', appData.value.name).then((res) => {
+  getVer('epkgpkg', encodeURIComponent(appData.value.name as string)).then((res) => {
     verData.value = res.data.list;
   });
 };
diff --git a/src/views/image/TheDetail.vue b/src/views/image/TheDetail.vue
index 720b88c..55a8410 100644
--- a/src/views/image/TheDetail.vue
+++ b/src/views/image/TheDetail.vue
@@ -104,7 +104,7 @@ const getDetailValue = (data: ImageDetailT) => {
 
 const tagsValue = ref();
 const queryTags = () => {
-  getTags(appData.value.name).then((res) => {
+  getTags(encodeURIComponent(appData.value.name as string)).then((res) => {
     tagsValue.value = res.data.list;
   });
 };
@@ -118,7 +118,7 @@ const onChange = (v: string) => {
 //获取支持
 const verData = ref();
 const queryVer = () => {
-  getVer('apppkg', appData.value.name).then((res) => {
+  getVer('apppkg', encodeURIComponent(appData.value.name as string)).then((res) => {
     verData.value = res.data.list;
   });
 };
diff --git a/src/views/package/TheDetail.vue b/src/views/package/TheDetail.vue
index f3fa8d2..a221509 100644
--- a/src/views/package/TheDetail.vue
+++ b/src/views/package/TheDetail.vue
@@ -111,7 +111,7 @@ const onExternalDialog = (href: string) => {
 //获取支持
 const verData = ref();
 const queryVer = () => {
-  getVer('rpmpkg', appData.value.name).then((res) => {
+  getVer('rpmpkg', encodeURIComponent(appData.value.name as string)).then((res) => {
     verData.value = res.data.list;
   });
 };
-- 
Gitee


From 3d2f56a2a4756ac28580332b4c642df5758604ad Mon Sep 17 00:00:00 2001
From: ailoooong <ilong8@qq.com>
Date: Sat, 25 May 2024 09:56:43 +0800
Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=E8=AF=A6=E6=83=85=E6=9B=B4=E5=A4=9A?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@types/app.ts                  | 13 +++++++++++++
 src/assets/style/detail/index.scss | 11 ++++++++++-
 src/views/apppkg/TheNewDetail.vue  | 22 ++++++++++++++++++----
 src/views/epkg/TheDetail.vue       | 24 ++++++++++++++++--------
 src/views/image/TheDetail.vue      |  2 +-
 src/views/package/TheDetail.vue    | 22 +++++++++++++++-------
 6 files changed, 73 insertions(+), 21 deletions(-)

diff --git a/src/@types/app.ts b/src/@types/app.ts
index f657852..9cb2379 100644
--- a/src/@types/app.ts
+++ b/src/@types/app.ts
@@ -48,5 +48,18 @@ export interface HomeInfoT {
   href: string;
 }
 
+export interface MoreMessgeT {
+  name: string;
+  value: MoreMessgeItemT[];
+}
+export interface MoreMessgeItemT {
+  name: string;
+  flags: string;
+  rel: string;
+  ver: string;
+  epoch: string;
+}
+
+
 
 export type PkgTypeT = 'RPM' | 'IMAGE' | 'EPKG';
\ No newline at end of file
diff --git a/src/assets/style/detail/index.scss b/src/assets/style/detail/index.scss
index fa6381b..1ab8e23 100644
--- a/src/assets/style/detail/index.scss
+++ b/src/assets/style/detail/index.scss
@@ -50,7 +50,7 @@
     --table-edge-padding: 24px;
   }
   // 容器镜像样式
-  &.switch {
+  &.tabs-switch {
     .o-tab-nav-list {
       background: #ededf0;
       border-radius: 8px;
@@ -74,6 +74,15 @@
       }
     }
   }
+  &.tabs-one {
+    .o-tab-nav-active {
+      color: var(--o-color-info1);
+      cursor: default;
+    }
+    .o-tab-nav-anchor {
+      display: none;
+    }
+  }
 }
 
 .code-box {
diff --git a/src/views/apppkg/TheNewDetail.vue b/src/views/apppkg/TheNewDetail.vue
index 65958fa..3d41b87 100644
--- a/src/views/apppkg/TheNewDetail.vue
+++ b/src/views/apppkg/TheNewDetail.vue
@@ -4,7 +4,7 @@ import { OTab, OTabPane, OTable, OLink, OIcon, OTag } from '@opensig/opendesign'
 import { useRoute } from 'vue-router';
 import { getDetails, getDetail, getTags, getVer } from '@/api/api-domain';
 import { useMarkdown } from '@/composables/useMarkdown';
-import type { AppInfoT, MaintainerT, DetailItemT } from '@/@types/app';
+import type { AppInfoT, MaintainerT, DetailItemT, MoreMessgeT } from '@/@types/app';
 
 import { OPENEULER_CONTACT } from '@/data/config';
 import AppFeedback from '@/components/AppFeedback.vue';
@@ -33,7 +33,7 @@ const files = ref([]);
 const maintainer = ref<MaintainerT>({ maintainerId: '', maintainerEmail: '', maintainerGiteeId: '' });
 const upStream = ref();
 const security = ref();
-const moreMessge = ref<DetailItemT[]>([]);
+const moreMessge = ref<MoreMessgeT[]>([]);
 const description = ref();
 const appData = ref<AppInfoT>({
   name: '',
@@ -165,11 +165,19 @@ const getDetailValue = (data: any) => {
       { name: 'Repo源', value: JSON.parse(data?.repoType).url, type: JSON.parse(data?.repoType).type },
     ];
     files.value = JSON.parse(data?.files);
-    moreMessge.value = [
+    const newData = [
       { name: 'Requires', value: JSON.parse(data?.requires || '') },
       { name: 'Provides', value: JSON.parse(data?.provides || '') },
       { name: 'Conflicts', value: JSON.parse(data?.conflicts || '') },
     ];
+
+    // 过滤空数据
+    newData.forEach((item) => {
+      if (item.value.length > 0) {
+        moreMessge.value.push(item);
+      }
+    });
+
     appData.value.size = data.epkgSize || 0;
     summary.value = data.summary;
     version.value = data?.version;
@@ -296,7 +304,13 @@ const repeatTags = (v: string) => {
               <p class="sp">> 安装指引</p>
               <div v-if="installation" v-dompurify-html="installation" v-copy-code="true" class="markdown-body installation"></div>
               <p class="sp" v-if="item !== 'IMAGE'">> 更多信息</p>
-              <OTab variant="text" :line="false" class="domain-tabs switch" v-if="item !== 'IMAGE'">
+              <OTab
+                variant="text"
+                :line="false"
+                class="domain-tabs tabs-switch"
+                v-if="item !== 'IMAGE'"
+                :class="moreMessge.length > 1 ? 'tabs-switch' : 'tabs-one'"
+              >
                 <template v-for="it in moreMessge" :key="it">
                   <OTabPane class="tab-pane" v-if="it.value.length > 0" :label="it.name">
                     <OTable :columns="moreColumns" :data="it.value" :small="true" border="all"> </OTable>
diff --git a/src/views/epkg/TheDetail.vue b/src/views/epkg/TheDetail.vue
index 2dafc6c..960515e 100644
--- a/src/views/epkg/TheDetail.vue
+++ b/src/views/epkg/TheDetail.vue
@@ -4,7 +4,7 @@ import { OTab, OTabPane, OTable, OLink } from '@opensig/opendesign';
 import { OPENEULER_CONTACT } from '@/data/config';
 import { useRoute } from 'vue-router';
 import { useMarkdown } from '@/composables/useMarkdown';
-import type { AppInfoT, MaintainerT, DetailItemT } from '@/@types/app';
+import type { AppInfoT, MaintainerT, DetailItemT, MoreMessgeT } from '@/@types/app';
 import { useI18n } from 'vue-i18n';
 import { getDetails, getVer } from '@/api/api-domain';
 import AppFeedback from '@/components/AppFeedback.vue';
@@ -27,7 +27,7 @@ const files = ref([]);
 const maintainer = ref<MaintainerT>({ maintainerId: '', maintainerEmail: '', maintainerGiteeId: '' });
 const upStream = ref();
 const security = ref();
-const moreMessge = ref<DetailItemT[]>([]);
+const moreMessge = ref<MoreMessgeT[]>([]);
 const description = ref();
 const appData = ref<AppInfoT>({
   name: '',
@@ -81,11 +81,19 @@ const getDetailValue = (data: any) => {
   } catch (res) {}
   files.value = JSON.parse(data?.files);
   summary.value = data.summary;
-  moreMessge.value = [
-    { name: 'Requires', value: JSON.parse(data?.requires || '') },
-    { name: 'Provides', value: JSON.parse(data?.provides || '') },
-    { name: 'Conflicts', value: JSON.parse(data?.conflicts || '') },
+
+  const newData = [
+    { name: 'Requires', value: JSON.parse(data?.requires || []) },
+    { name: 'Provides', value: JSON.parse(data?.provides || []) },
+    { name: 'Conflicts', value: JSON.parse(data?.conflicts || []) },
   ];
+  // 过滤空数据
+  newData.forEach((item) => {
+    if (item.value.length > 0) {
+      moreMessge.value.push(item);
+    }
+  });
+
   appData.value.size = data.epkgSize;
   tagVer.value = [data.osSupport, data.arch];
   maintainer.value = {
@@ -157,9 +165,9 @@ const queryVer = () => {
           <div v-if="downloadData" v-dompurify-html="downloadData" v-copy-code="true" class="markdown-body download"></div>
           <div v-if="installation" v-dompurify-html="installation" v-copy-code="true" class="markdown-body installation"></div>
           <p class="sp">> 更多信息</p>
-          <OTab variant="text" :line="false" class="domain-tabs switch">
+          <OTab variant="text" :line="false" class="domain-tabs tabs-switch" :class="moreMessge.length > 1 ? 'tabs-switch' : 'tabs-one'">
             <template v-for="item in moreMessge" :key="item">
-              <OTabPane class="tab-pane switch" v-if="item.value.length > 0" :label="item.name">
+              <OTabPane class="tab-pane" v-if="item.value.length > 0" :label="item.name">
                 <OTable :columns="moreColumns" :data="item.value" :small="true" border="all"> </OTable>
               </OTabPane>
             </template>
diff --git a/src/views/image/TheDetail.vue b/src/views/image/TheDetail.vue
index 55a8410..628399a 100644
--- a/src/views/image/TheDetail.vue
+++ b/src/views/image/TheDetail.vue
@@ -134,7 +134,7 @@ const queryVer = () => {
     <div class="detail-row">
       <div class="detail-row-main" :class="{ tags: isTags }">
         <AppSection>
-          <OTab variant="text" @change="onChange" :line="false" class="domain-tabs switch" v-model="activeName">
+          <OTab variant="text" @change="onChange" :line="false" class="domain-tabs tabs-switch" v-model="activeName">
             <OTabPane class="tab-pane" v-for="item in tabList" :key="item" :label="item">
               <div v-if="item === '概览'">
                 <div class="title">
diff --git a/src/views/package/TheDetail.vue b/src/views/package/TheDetail.vue
index a221509..7c7bd0d 100644
--- a/src/views/package/TheDetail.vue
+++ b/src/views/package/TheDetail.vue
@@ -4,7 +4,7 @@ import { OTab, OTabPane, OTable, OLink } from '@opensig/opendesign';
 import { OPENEULER_CONTACT } from '@/data/config';
 import { useRoute } from 'vue-router';
 import { useMarkdown } from '@/composables/useMarkdown';
-import type { AppInfoT, MaintainerT, DetailItemT } from '@/@types/app';
+import type { AppInfoT, MaintainerT, DetailItemT, MoreMessgeT } from '@/@types/app';
 import { getDetails, getVer } from '@/api/api-domain';
 import defaultImg from '@/assets/default-logo.png';
 import AppFeedback from '@/components/AppFeedback.vue';
@@ -23,7 +23,7 @@ const downloadData = ref('');
 const maintainer = ref<MaintainerT>({ maintainerId: '', maintainerEmail: '', maintainerGiteeId: '' });
 const upStream = ref();
 const security = ref();
-const moreMessge = ref<DetailItemT[]>([]);
+const moreMessge = ref<MoreMessgeT[]>([]);
 const description = ref();
 const appData = ref<AppInfoT>({
   name: '',
@@ -61,6 +61,7 @@ const getPkg = (tabValue: string) => {
 onMounted(() => {
   queryEntity();
 });
+
 const summary = ref();
 const license = ref();
 const tagVer = ref();
@@ -74,11 +75,18 @@ const getDetailValue = (data: any) => {
     { name: 'Repo源', value: JSON.parse(data?.repoType).url, type: JSON.parse(data?.repoType).type },
   ];
   summary.value = data.summary;
-  moreMessge.value = [
-    { name: 'Requires', value: JSON.parse(data?.requires || '') },
-    { name: 'Provides', value: JSON.parse(data?.provides || '') },
-    { name: 'Conflicts', value: JSON.parse(data?.conflicts || '') },
+  const newData = [
+    { name: 'Requires', value: JSON.parse(data?.requires || []) },
+    { name: 'Provides', value: JSON.parse(data?.provides || []) },
+    { name: 'Conflicts', value: JSON.parse(data?.conflicts || []) },
   ];
+  // 过滤空数据
+  newData.forEach((item) => {
+    if (item.value.length > 0) {
+      moreMessge.value.push(item);
+    }
+  });
+
   appData.value.size = data.rpmSize;
   tagVer.value = [data.osSupport, data.arch];
   maintainer.value = {
@@ -148,7 +156,7 @@ const queryVer = () => {
           <p class="sp">> 安装指引</p>
           <div v-if="installation" v-dompurify-html="installation" v-copy-code="true" class="markdown-body installation"></div>
           <p class="sp">> 更多信息</p>
-          <OTab variant="text" :line="false" class="domain-tabs switch">
+          <OTab variant="text" :line="false" class="domain-tabs" :class="moreMessge.length > 1 ? 'tabs-switch' : 'tabs-one'">
             <template v-for="item in moreMessge" :key="item">
               <OTabPane class="tab-pane" v-if="item.value.length > 0" :label="item.name">
                 <OTable :columns="moreColumns" :data="item.value" :small="true" border="all"> </OTable>
-- 
Gitee