From 03dd7ef010e52349590d47255ee3cf40ca541c20 Mon Sep 17 00:00:00 2001
From: ailoooong <ilong8@qq.com>
Date: Sat, 25 May 2024 10:29:29 +0800
Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=E8=AF=A6=E6=83=85=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DetailAside.vue  | 14 ++++++++------
 src/views/home/TheHome.vue      |  6 +++---
 src/views/package/TheDetail.vue | 13 ++++++++-----
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/DetailAside.vue b/src/components/DetailAside.vue
index 3bf6ac0..6219964 100644
--- a/src/components/DetailAside.vue
+++ b/src/components/DetailAside.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { OTable, useMessage, OButton, OTag, OIcon } from '@opensig/opendesign';
 import OCodeCopy from '@/components/OCodeCopy.vue';
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, type PropType } from 'vue';
 import ExternalLink from '@/components/ExternalLink.vue';
 import { useClipboard } from '@/composables/useClipboard';
-import { getCode } from '@/utils/common';
+import { getCode, xssAllTag } from '@/utils/common';
 import { verColumns } from '@/data/detail/index';
 import IconCopy from '~icons/app/icon-copy.svg';
 import { useLocale } from '@/composables/useLocale';
-import { xssAllTag } from '@/utils/common';
+import type { PkgTypeT } from '@/@types/app';
 const props = defineProps({
   data: {
     type: Object,
@@ -29,8 +29,9 @@ const props = defineProps({
     },
   },
   type: {
+    type: String as PropType<PkgTypeT>,
     default: () => {
-      return '';
+      return 'RPM';
     },
   },
   downloadData: {
@@ -155,7 +156,7 @@ const { locale } = useLocale();
 const jumpTo = (name: string, id: string) => {
   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}`;
+    const newHref = `/${locale.value}/${detailType}/${xssAllTag(name)}?type=${props.type}&pkgId=${encodeURIComponent(id)}`;
     return newHref;
   }
 };
@@ -234,9 +235,10 @@ const jumpTo = (name: string, id: string) => {
 .license {
   border-top: 1px rgba(0, 0, 0, 0.1) solid;
   padding-top: 25px;
-  width: 90%;
+  width: 100%;
   display: flex;
   justify-content: space-between;
+  gap: 24px;
 }
 :deep(.o-table) {
   th,
diff --git a/src/views/home/TheHome.vue b/src/views/home/TheHome.vue
index b5a869e..73a51b2 100644
--- a/src/views/home/TheHome.vue
+++ b/src/views/home/TheHome.vue
@@ -11,7 +11,7 @@ import { useLocale } from '@/composables/useLocale';
 import { getTagsIcon } from '@/utils/common';
 import { useScreen } from '@/composables/useScreen';
 import IconChevronDown from '~icons/app/icon-chevron-right.svg';
-const { gtLaptop } = useScreen();
+const { size } = useScreen();
 const { locale } = useLocale();
 const pkgData = ref<AppT[]>([]);
 const isLoading = ref(false);
@@ -57,7 +57,7 @@ onMounted(() => {
     <HomeHeader />
     <ContentWrapper vertical-padding="72px">
       <div ref="pkgRef" v-loading.nomask="isLoading" class="pkg-wrap">
-        <div v-if="gtLaptop" class="anchor">
+        <div v-if="size.width > 1900" class="anchor">
           <OAnchor :target-offset="100">
             <OAnchorItem href="#all" title="领域应用">
               <template v-for="item in pkgData">
@@ -208,7 +208,7 @@ onMounted(() => {
   overflow: visible;
   position: sticky;
   top: 0;
-  transform: translate(-250px, 70px);
+  transform: translate(-180px, 70px);
   width: -moz-max-content;
   width: max-content;
   left: 5%;
diff --git a/src/views/package/TheDetail.vue b/src/views/package/TheDetail.vue
index 7c7bd0d..5fac5d8 100644
--- a/src/views/package/TheDetail.vue
+++ b/src/views/package/TheDetail.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import { OTab, OTabPane, OTable, OLink } from '@opensig/opendesign';
+import { OTab, OTabPane, OTable, OLink, isString } from '@opensig/opendesign';
 import { OPENEULER_CONTACT } from '@/data/config';
 import { useRoute } from 'vue-router';
 import { useMarkdown } from '@/composables/useMarkdown';
@@ -35,8 +35,8 @@ const appData = ref<AppInfoT>({
 });
 
 //详情请求
-const queryPkg = (tabValue: string, pkgId: any) => {
-  getDetails(tabValue, pkgId)
+const queryPkg = (tabValue: string) => {
+  getDetails(tabValue, pkgId.value)
     .then((res) => {
       const data = res.data.list[0];
       getDetailValue(data);
@@ -45,8 +45,11 @@ const queryPkg = (tabValue: string, pkgId: any) => {
       useViewStore().showNotFound();
     });
 };
+const pkgId = ref('');
+if (isString(route.query?.pkgId)) {
+  pkgId.value = encodeURIComponent(route.query?.pkgId.toString());
+}
 
-const pkgId = route.query.pkgId as string;
 const queryEntity = () => {
   getChange();
 };
@@ -55,7 +58,7 @@ const getChange = () => {
   getPkg('rpmpkg');
 };
 const getPkg = (tabValue: string) => {
-  queryPkg(tabValue, pkgId);
+  queryPkg(tabValue);
 };
 
 onMounted(() => {
-- 
Gitee


From 13046fe201e9ea64348802965eef119e18a7f7e2 Mon Sep 17 00:00:00 2001
From: YCA001 <2915341988@qq.com>
Date: Sat, 25 May 2024 10:44:10 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/apppkg/TheNewDetail.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/apppkg/TheNewDetail.vue b/src/views/apppkg/TheNewDetail.vue
index 3d41b87..babea89 100644
--- a/src/views/apppkg/TheNewDetail.vue
+++ b/src/views/apppkg/TheNewDetail.vue
@@ -193,6 +193,7 @@ const getDetailValue = (data: any) => {
     latestOsSupport.value = data.latestOsSupport;
     summary.value = data.description;
     version.value = data?.appVer;
+    queryTags();
   }
   tagVer.value = [data.osSupport, data.arch];
   maintainer.value = {
@@ -214,7 +215,7 @@ const getDetailValue = (data: any) => {
   appData.value.bin_code = data.binDownloadUrl;
   appData.value.cover = data?.iconUrl || defaultImg;
   appData.value.repository = data.srcRepo;
-  queryTags();
+ 
 };
 
 // 更多信息表头
-- 
Gitee


From a3b8a1b1c69082c09bbb4aeafd441b30d06dfba1 Mon Sep 17 00:00:00 2001
From: ailoooong <ilong8@qq.com>
Date: Sat, 25 May 2024 11:30:37 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E8=AF=A6=E6=83=85=E9=A1=B5=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppBreadcrumb.vue          |  4 +-
 src/components/DetailAside.vue            |  8 +-
 src/components/OCardItem.vue              | 18 ++---
 src/components/OTableItemNew.vue          |  6 +-
 src/components/search/SearchRecommend.vue |  2 +-
 src/router/index.ts                       | 20 ++---
 src/views/apppkg/TheNewDetail.vue         | 97 ++++++++---------------
 src/views/package/TheDetail.vue           | 20 ++---
 8 files changed, 65 insertions(+), 110 deletions(-)

diff --git a/src/components/AppBreadcrumb.vue b/src/components/AppBreadcrumb.vue
index 07ffe01..76125f0 100644
--- a/src/components/AppBreadcrumb.vue
+++ b/src/components/AppBreadcrumb.vue
@@ -28,8 +28,8 @@ homeData.forEach((item) => {
 
 <template>
   <OBreadcrumb class="app-breadcrumb">
-    <OBreadcrumbItem :to="/${locale.value}/">软件市场</OBreadcrumbItem>
-    <OBreadcrumbItem :to="`/${locale.value}/${breadcrumbInfo.href}`">{{ breadcrumbInfo.name }}</OBreadcrumbItem>
+    <OBreadcrumbItem :to="`/${locale}/`">软件市场</OBreadcrumbItem>
+    <OBreadcrumbItem :to="`/${locale}${breadcrumbInfo.href}`">{{ breadcrumbInfo.name }}</OBreadcrumbItem>
     <OBreadcrumbItem>{{ name }} </OBreadcrumbItem>
   </OBreadcrumb>
 </template>
diff --git a/src/components/DetailAside.vue b/src/components/DetailAside.vue
index 6219964..5214c45 100644
--- a/src/components/DetailAside.vue
+++ b/src/components/DetailAside.vue
@@ -4,7 +4,7 @@ import OCodeCopy from '@/components/OCodeCopy.vue';
 import { ref, computed, watch, type PropType } from 'vue';
 import ExternalLink from '@/components/ExternalLink.vue';
 import { useClipboard } from '@/composables/useClipboard';
-import { getCode, xssAllTag } from '@/utils/common';
+import { getCode } from '@/utils/common';
 import { verColumns } from '@/data/detail/index';
 import IconCopy from '~icons/app/icon-copy.svg';
 import { useLocale } from '@/composables/useLocale';
@@ -153,10 +153,10 @@ const arraySpanMethod = (rowIndex: number, colIdx: number, row: any, column: any
 };
 
 const { locale } = useLocale();
-const jumpTo = (name: string, id: string) => {
+const jumpTo = (id: string) => {
   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=${encodeURIComponent(id)}`;
+    const newHref = `/${locale.value}/${detailType}/detail?type=${props.type}&pkgId=${encodeURIComponent(id)}`;
     return newHref;
   }
 };
@@ -186,7 +186,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(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/components/OCardItem.vue b/src/components/OCardItem.vue
index 4af09e1..60d6324 100644
--- a/src/components/OCardItem.vue
+++ b/src/components/OCardItem.vue
@@ -17,10 +17,10 @@ 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=${encodeURIComponent(id.IMAGE)}` : ''}${id.EPKG ? `&epkgPkgId=${encodeURIComponent(id.EPKG)}` : ''}${
-    id.RPM ? `&rpmPkgId=${encodeURIComponent(id.RPM)}` : ''
-  }`;
+const jumpTo = (id: PkgIdsT, type: PkgTypeT) => {
+  return `/${locale.value}/apppkg/detail?type=${type}${id.IMAGE ? `&appPkgId=${encodeURIComponent(id.IMAGE)}` : ''}${
+    id.EPKG ? `&epkgPkgId=${encodeURIComponent(id.EPKG)}` : ''
+  }${id.RPM ? `&rpmPkgId=${encodeURIComponent(id.RPM)}` : ''}`;
 };
 
 const repeatTags = (v: string) => {
@@ -38,18 +38,12 @@ 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.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">
         <div v-if="data.tags && data.tags.length > 0" class="tags-box">
-          <a :href="jumpTo(data.name, data.pkgIds, tag)" v-for="tag in data.tags" :key="tag" target="_blank" rel="noopener noreferrer">
+          <a :href="jumpTo(data.pkgIds, tag)" v-for="tag in data.tags" :key="tag" target="_blank" rel="noopener noreferrer">
             <OTag style="--o-icon_size_control-xs: 0" variant="outline" :class="`${tag.toLocaleLowerCase()}-icon`">
               <template #icon>
                 <OIcon><component :is="getTagsIcon(tag)" /></OIcon>
diff --git a/src/components/OTableItemNew.vue b/src/components/OTableItemNew.vue
index bd4d202..e3886c7 100644
--- a/src/components/OTableItemNew.vue
+++ b/src/components/OTableItemNew.vue
@@ -38,10 +38,10 @@ const props = defineProps({
 
 const { t } = useI18n();
 const { locale } = useLocale();
-const jumpTo = (name: string, id: string) => {
+const jumpTo = (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=${encodeURIComponent(id)}`;
+  const newHref = `/${locale.value}/${detailType}/detail?type=${type}&pkgId=${encodeURIComponent(id)}`;
   return newHref;
 };
 
@@ -72,7 +72,7 @@ const onExternalDialog = (href: string) => {
         <th v-for="item in columns" :key="item.key" :class="item.key">{{ item.label }}</th>
       </template>
       <template #td_name="{ row }">
-        <a :href="jumpTo(row.name, row.pkgId)" color="primary" target="_blank" rel="noopener noreferrer"><span v-dompurify-html="row.name"></span></a>
+        <a :href="jumpTo(row.pkgId)" color="primary" target="_blank" rel="noopener noreferrer"><span v-dompurify-html="row.name"></span></a>
       </template>
       <template #td_epkgUpdateAt="{ row }">
         {{ formatDateTime(row.epkgUpdateAt) }}
diff --git a/src/components/search/SearchRecommend.vue b/src/components/search/SearchRecommend.vue
index 81880d9..b76906e 100644
--- a/src/components/search/SearchRecommend.vue
+++ b/src/components/search/SearchRecommend.vue
@@ -71,7 +71,7 @@ const goDetail = (key: string, id: string, name: string) => {
     pathName = 'package';
   }
   router.push({
-    path: `/${locale.value}/${pathName}/${xssAllTag(name)}`,
+    path: `/${locale.value}/${pathName}/detail`,
     query: { type: type, pkgId: id },
   });
 };
diff --git a/src/router/index.ts b/src/router/index.ts
index 5a7ea90..0d461d9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -18,9 +18,9 @@ const routes = [
     component: () => import('@/views/apppkg/TheAppPkg.vue'),
   },
   {
-    path: '/zh/apppkg/:name',
+    path: '/zh/apppkg/detail',
     name: 'apppkg-detail',
-    alias: '/en/apppkg/:name',
+    alias: '/en/apppkg/detail',
     component: () => import('@/views/apppkg/TheNewDetail.vue'),
   },
   {
@@ -42,9 +42,9 @@ const routes = [
     component: () => import('@/views/search/TheSearch.vue'),
   },
   {
-    path: '/zh/upstream/:name',
+    path: '/zh/upstream/detail',
     name: 'upstream-detail',
-    alias: '/en/upstream/:name',
+    alias: '/en/upstream/detail',
     component: () => import('@/views/upstream/TheDetail.vue'),
   },
   {
@@ -60,21 +60,21 @@ const routes = [
     component: () => import('@/views/epkg/TheEpkg.vue'),
   },
   {
-    path: '/zh/epkg/:name',
+    path: '/zh/epkg/detail',
     name: 'epkg-detail',
-    alias: '/en/epkg/:name',
+    alias: '/en/epkg/detail',
     component: () => import('@/views/epkg/TheDetail.vue'),
   },
   {
-    path: '/zh/package/:name',
+    path: '/zh/package/detail',
     name: 'package-detail',
-    alias: '/en/package/:name',
+    alias: '/en/package/detail',
     component: () => import('@/views/package/TheDetail.vue'),
   },
   {
-    path: '/zh/image/:name',
+    path: '/zh/image/detail',
     name: 'image-detail',
-    alias: '/en/image/:name',
+    alias: '/en/image/detail',
     component: () => import('@/views/image/TheDetail.vue'),
   },
   // 默认路由
diff --git a/src/views/apppkg/TheNewDetail.vue b/src/views/apppkg/TheNewDetail.vue
index babea89..0d71ff9 100644
--- a/src/views/apppkg/TheNewDetail.vue
+++ b/src/views/apppkg/TheNewDetail.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import { OTab, OTabPane, OTable, OLink, OIcon, OTag } from '@opensig/opendesign';
+import { OTab, OTabPane, OTable, OLink, OIcon, OTag, isString } 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, MoreMessgeT } from '@/@types/app';
+import type { AppInfoT, MaintainerT, DetailItemT, MoreMessgeT, PkgTypeT } from '@/@types/app';
 
 import { OPENEULER_CONTACT } from '@/data/config';
 import AppFeedback from '@/components/AppFeedback.vue';
@@ -44,14 +44,6 @@ const appData = ref<AppInfoT>({
   bin_code: '',
 });
 
-//详情请求
-const queryPkg = (tabValue: string, pkgId: any) => {
-  getDetails(tabValue, pkgId).then((res) => {
-    const data = res.data.list[0];
-    getDetailValue(data);
-  });
-};
-
 // 获取tab分类
 const tabList = ref<string[]>([]);
 const pkgId = ref('');
@@ -61,31 +53,31 @@ const imgData = ref();
 const queryEntity = () => {
   const query = route.query;
   const { type, appPkgId, epkgPkgId, rpmPkgId } = query;
-  activeName.value = type as string;
-
-  if (pkgId.value) {
-    getDetail(
-      getDetailRules({
-        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'];
-        rpmData.value = data['RPM'];
-        imgData.value = data['IMAGE'];
-        onChange(activeName.value);
-      })
-      .catch(() => {
-        useViewStore().showNotFound();
-      });
-  } else {
-    getChange(activeName.value);
-    tabList.value = [activeName.value];
+  if (isString(type) && (type as PkgTypeT)) {
+    activeName.value = type 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;
+      epkgData.value = data['EPKG'];
+      rpmData.value = data['RPM'];
+      imgData.value = data['IMAGE'];
+      pkgId.value = data[data.tags[0]].name;
+
+      onChange(activeName.value);
+      queryVer();
+    })
+    .catch(() => {
+      useViewStore().showNotFound();
+    });
 };
 
 //tab切换
@@ -95,40 +87,20 @@ const onChange = (tab: string) => {
     tabValue.value = 'rpmpkg';
     typePkg.value = 'RPM';
     getDetailValue(rpmData.value);
-    queryVer();
   } else if (tab === 'EPKG') {
     tabValue.value = 'epkgpkg';
     typePkg.value = 'EPKG';
     getDetailValue(epkgData.value);
-    queryVer();
   } else if (tab === 'IMAGE') {
     tabValue.value = 'apppkg';
     typePkg.value = 'IMAGE';
     getDetailValue(imgData.value);
-    queryVer();
   } else {
     useViewStore().showNotFound();
   }
 };
-const getChange = (tab: string) => {
-  if (tab === 'RPM') {
-    tabValue.value = 'rpmpkg';
-    typePkg.value = 'RPM';
-  } else if (tab === 'EPKG') {
-    tabValue.value = 'epkgpkg';
-    typePkg.value = 'EPKG';
-  } else if (tab === 'IMAGE') {
-    tabValue.value = 'apppkg';
-    typePkg.value = 'IMAGE';
-  }
-  getPkg(tabValue.value);
-};
-const getPkg = (tabValue: string) => {
-  queryPkg(tabValue, pkgId.value);
-};
 
 onMounted(() => {
-  pkgId.value = location.pathname.split('/')[3];
   queryEntity();
 });
 const imageUsage = ref();
@@ -181,19 +153,19 @@ const getDetailValue = (data: any) => {
     appData.value.size = data.epkgSize || 0;
     summary.value = data.summary;
     version.value = data?.version;
-  } else {
+  } else if (typePkg.value === 'IMAGE') {
     basicInfo.value = [
       { name: '架构', value: data.arch || '' },
-
       { name: '软件包分类', value: data.category || '' },
-
       { name: '版本支持情况', value: data.osSupport || '' },
     ];
     appData.value.size = data.appSize || 0;
     latestOsSupport.value = data.latestOsSupport;
     summary.value = data.description;
     version.value = data?.appVer;
-    queryTags();
+    if (tagsValue.value.length === 0) {
+      queryTags();
+    }
   }
   tagVer.value = [data.osSupport, data.arch];
   maintainer.value = {
@@ -215,7 +187,6 @@ const getDetailValue = (data: any) => {
   appData.value.bin_code = data.binDownloadUrl;
   appData.value.cover = data?.iconUrl || defaultImg;
   appData.value.repository = data.srcRepo;
- 
 };
 
 // 更多信息表头
@@ -229,9 +200,9 @@ const moreColumns = [
 // 获取img分类
 const imgList = ref<string[]>(['概览', 'Tags']);
 const imgName = ref('概览');
-const tagsValue = ref();
+const tagsValue = ref([]);
 const queryTags = () => {
-  getTags(encodeURIComponent(appData.value.name as string)).then((res) => {
+  getTags(encodeURIComponent(pkgId.value)).then((res) => {
     tagsValue.value = res.data.list;
   });
 };
@@ -256,7 +227,7 @@ const getTabIcon = (tab: string) => {
 //获取支持
 const verData = ref();
 const queryVer = () => {
-  getVer(tabValue.value, encodeURIComponent(appData.value.name as string)).then((res) => {
+  getVer(tabValue.value, encodeURIComponent(pkgId.value)).then((res) => {
     verData.value = res.data.list;
   });
 };
@@ -320,7 +291,7 @@ const repeatTags = (v: string) => {
               </OTab>
             </AppSection>
             <AppSection v-else>
-              <OTab variant="text" @change="onChangeImage" :line="false" class="domain-tabs switch" v-model="imgName">
+              <OTab variant="text" @change="onChangeImage" :line="false" class="domain-tabs tabs-switch" v-model="imgName">
                 <OTabPane class="tab-pane" v-for="item in imgList" :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 5fac5d8..ba7b396 100644
--- a/src/views/package/TheDetail.vue
+++ b/src/views/package/TheDetail.vue
@@ -16,6 +16,7 @@ import { useViewStore } from '@/stores/common';
 
 const route = useRoute();
 const { mkit } = useMarkdown();
+const tabValue = ref('rpmpkg');
 const basicInfo = ref<DetailItemT[]>([]);
 const version = ref();
 const installation = ref('');
@@ -35,8 +36,8 @@ const appData = ref<AppInfoT>({
 });
 
 //详情请求
-const queryPkg = (tabValue: string) => {
-  getDetails(tabValue, pkgId.value)
+const queryPkg = () => {
+  getDetails(tabValue.value, pkgId.value)
     .then((res) => {
       const data = res.data.list[0];
       getDetailValue(data);
@@ -50,19 +51,8 @@ if (isString(route.query?.pkgId)) {
   pkgId.value = encodeURIComponent(route.query?.pkgId.toString());
 }
 
-const queryEntity = () => {
-  getChange();
-};
-
-const getChange = () => {
-  getPkg('rpmpkg');
-};
-const getPkg = (tabValue: string) => {
-  queryPkg(tabValue);
-};
-
 onMounted(() => {
-  queryEntity();
+  queryPkg();
 });
 
 const summary = ref();
@@ -122,7 +112,7 @@ const onExternalDialog = (href: string) => {
 //获取支持
 const verData = ref();
 const queryVer = () => {
-  getVer('rpmpkg', encodeURIComponent(appData.value.name as string)).then((res) => {
+  getVer(tabValue.value, encodeURIComponent(appData.value.name)).then((res) => {
     verData.value = res.data.list;
   });
 };
-- 
Gitee