From 34ff54be737f516ffb84fb5047c8453b8d58c6b0 Mon Sep 17 00:00:00 2001
From: ailoooong <ilong8@qq.com>
Date: Wed, 30 Jul 2025 10:09:31 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E8=BD=AF=E4=BB=B6=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=95=B0=E6=8D=AE=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/upstream/upstream-en.ts       |   2 +
 src/i18n/upstream/upstream-zh.ts       |   2 +
 src/views/image/ImageCard.vue          |  33 ++--
 src/views/upstream/TheUpstream.vue     |   2 +-
 src/views/upstream/UpstreamContent.vue | 201 ++++++++++++++++++++++---
 5 files changed, 209 insertions(+), 31 deletions(-)

diff --git a/src/i18n/upstream/upstream-en.ts b/src/i18n/upstream/upstream-en.ts
index 748bb36..f13085d 100644
--- a/src/i18n/upstream/upstream-en.ts
+++ b/src/i18n/upstream/upstream-en.ts
@@ -3,4 +3,6 @@ export default {
   version: '上游最新版本',
   systemVersion: '兼容版本',
   architecture: '状态',
+  type: '类型',
+  eulerOsVersion: 'openEuler版本',
 };
diff --git a/src/i18n/upstream/upstream-zh.ts b/src/i18n/upstream/upstream-zh.ts
index 091e4ca..7a93176 100644
--- a/src/i18n/upstream/upstream-zh.ts
+++ b/src/i18n/upstream/upstream-zh.ts
@@ -4,4 +4,6 @@ export default {
   version: '上游最新版本',
   compatibility: '兼容版本',
   state: '状态',
+  type: '类型',
+  eulerOsVersion: 'openEuler版本',
 };
diff --git a/src/views/image/ImageCard.vue b/src/views/image/ImageCard.vue
index dadb508..a776cfc 100644
--- a/src/views/image/ImageCard.vue
+++ b/src/views/image/ImageCard.vue
@@ -1,12 +1,13 @@
 <script lang="ts" setup>
 import { type PropType, ref, onMounted } from 'vue';
-import { OCard, OTag } from '@opensig/opendesign';
+import { OCard, OTag, OIcon } from '@opensig/opendesign';
 import type { AppItemT, PkgIdsT } from '@/@types/app';
 import { useRoute } from 'vue-router';
 import { useTheme } from '@/composables/useTheme';
 
 import defaultImg from '@/assets/default-logo.png';
 import { oaReport, searchReport } from '@/shared/analytics';
+import IconCategory from '~icons/pkg/icon-category.svg';
 
 const props = defineProps({
   data: {
@@ -108,11 +109,11 @@ const onClickLink = (event: MouseEvent) => {
         <div class="pkg-icon"><img :src="data.iconUrl || defaultImg" class="icon" :class="{ 'default-img': !data.iconUrl }" /></div>
       </div>
       <div class="pkg-box">
-        <p v-if="data.imageTags" v-dompurify-html="data.imageTags" class="desc" :class="{ dark: isDark }"></p>
         <p v-if="data.description" v-dompurify-html="data.description" class="desc" :class="{ dark: isDark }"></p>
-        <p v-if="data.category" class="category"><span class="label">领域</span>{{ data.category }}</p>
-        <p v-if="data.arch" class="arch">
-          <span class="label">架构</span><OTag variant="outline">{{ data.arch }}</OTag>
+        <p v-if="data.category" class="category">
+          <OTag variant="outline">
+            <OIcon><IconCategory /></OIcon>{{ data.category }}
+          </OTag>
         </p>
       </div>
     </template>
@@ -166,17 +167,25 @@ const onClickLink = (event: MouseEvent) => {
     justify-content: space-between;
     .desc {
       margin-bottom: 12px;
+      -webkit-line-clamp: 3;
+      height: 72px;
     }
-    .category,
-    .arch {
+    .category {
       margin-top: 6px;
       color: var(--o-color-info2);
-      display: flex;
-      align-items: center;
+
       @include tip1;
-      .label {
-        width: 60px;
-        color: var(--o-color-info3);
+      .o-tag-label {
+        display: flex;
+        align-items: center;
+        .o-icon {
+          font-size: 16px;
+          margin-right: 4px;
+          svg {
+            width: 16px;
+            height: 16px;
+          }
+        }
       }
     }
   }
diff --git a/src/views/upstream/TheUpstream.vue b/src/views/upstream/TheUpstream.vue
index 5ba9ee2..803d90c 100644
--- a/src/views/upstream/TheUpstream.vue
+++ b/src/views/upstream/TheUpstream.vue
@@ -6,7 +6,7 @@ import bannerImg from '@/assets/banner/banner1.jpg';
 
 const bannerInfo = {
   title: '软件版本支持',
-  desc: 'openEuler支持的软件包版本与上游软件的兼容状态列表',
+  desc: 'openEuler支持的软件版本与上游软件的兼容状态列表',
 };
 </script>
 
diff --git a/src/views/upstream/UpstreamContent.vue b/src/views/upstream/UpstreamContent.vue
index 3dc9252..248ad73 100644
--- a/src/views/upstream/UpstreamContent.vue
+++ b/src/views/upstream/UpstreamContent.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { ref, watch, onMounted, computed } from 'vue';
-import { OTag, OLink, OIcon } from '@opensig/opendesign';
+import { ref, watch, onMounted, computed, nextTick } from 'vue';
+import { OTag, OLink, OIcon, OTable } from '@opensig/opendesign';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { getParamsRules } from '@/utils/common';
+import { getParamsRules, checkOriginLink, windowOpen } from '@/utils/common';
+
 import { getUpstreamColumn, getUpstream } from '@/api/api-upstream';
 import { getSearchData } from '@/api/api-search';
 import { useViewStore } from '@/stores/common';
@@ -15,16 +16,19 @@ import IconOs from '~icons/pkg/icon-os.svg';
 import IconAppType from '~icons/pkg/icon-app-type.svg';
 import IconStatus from '~icons/pkg/icon-status.svg';
 import FilterCheckbox from '@/components/filter/FilterCheckbox.vue';
+import ExternalLink from '@/components/ExternalLink.vue';
 
 const route = useRoute();
 const { t } = useI18n();
 
 // 软件包-表头
 const columns = [
-  { label: t('upstream.name'), key: 'name', style: 'width:27%', type: 'name' },
-  { label: t('upstream.version'), key: 'upstreamVersion', style: 'width:27%', type: 'upstreamVersion' },
-  { label: t('upstream.compatibility'), key: 'openeulerVersion', style: 'width:27%', type: 'openeulerVersion' },
-  { label: t('upstream.state'), key: 'status', style: 'width:19%', type: 'status' },
+  { label: t('upstream.name'), key: 'name', style: 'width:22%', type: 'name' },
+  { label: t('upstream.version'), key: 'upstreamVersion', style: 'width:12%', type: 'upstreamVersion' },
+  { label: t('upstream.compatibility'), key: 'openeulerVersion', style: 'width:12%', type: 'openeulerVersion' },
+  { label: t('upstream.eulerOsVersion'), key: 'eulerOsVersion', style: 'width:16%', type: 'eulerOsVersion' },
+  { label: t('upstream.type'), key: 'type', style: 'width:12%', type: 'type' },
+  { label: t('upstream.state'), key: 'status', style: 'width:8%', type: 'status' },
 ];
 
 //  ------------  main ------------
@@ -40,6 +44,22 @@ const searchOs = ref('');
 const searchType = ref('');
 const searchStatus = ref<string[]>([]);
 
+// 提取逻辑到单独的函数
+const processItem = (item): any[] => {
+  if (item?.applicationVersions?.length !== 1) {
+    return item.applicationVersions.map((sub) => ({
+      ...item,
+      ...sub,
+    }));
+  }
+  return [
+    {
+      ...item,
+      ...item.applicationVersions[0],
+    },
+  ];
+};
+
 const queryAppVersion = () => {
   const params = {
     eulerOsVersion: searchOs.value,
@@ -49,17 +69,24 @@ const queryAppVersion = () => {
     nameOrder: nameOrder.value,
     pageSize: pageSize.value,
   };
-
+  console.log(params);
   // 过滤空参数
   const newData = getParamsRules(params);
+
+  appData.value = [];
+
   getUpstream(newData)
     .then((res) => {
-      appData.value = res.data.list;
       total.value = res.data.total;
       isLoading.value = false;
-      if (appData.value.length === 0) {
+      if (res.data.list.length === 0) {
         isSearchError.value = true;
       }
+      nextTick(() => {
+        appData.value = res.data.list.flatMap(processItem);
+
+        calculateSpanInfo();
+      });
     })
     .catch(() => {
       appData.value = [];
@@ -87,6 +114,7 @@ const isSearch = ref(false);
 const querySearch = () => {
   // 过滤空参数
   const newData = getParamsRules(searchParams.value);
+
   getSearchData(newData)
     .then((res) => {
       appData.value = res.data.appversion;
@@ -106,7 +134,6 @@ const querySearch = () => {
 
 // ----------- 左侧菜单交互-------------
 // 获取筛选参数列表
-const OTHER = { label: '其他', value: '其他' };
 const filterOsList = ref<string[]>([]);
 const appTypeList = ref<{ label: string; value: string }[]>([]);
 const statusList = ref<string[]>([]);
@@ -114,6 +141,7 @@ const isFilterLoading = ref(false);
 const appTypeListDisplayNames: Record<string, string> = {
   rpm: 'RPM',
   image: '应用镜像',
+  CONDA: 'CONDA',
 };
 const queryFilter = () => {
   filterOsList.value = [];
@@ -122,7 +150,7 @@ const queryFilter = () => {
     .then((res) => {
       filterOsList.value = res.data.eulerOsVersion;
       appTypeList.value = res.data.type.map((item: string) => ({ label: appTypeListDisplayNames[item], value: item }));
-      appTypeList.value.push(OTHER);
+
       statusList.value = res.data.status;
       isFilterLoading.value = false;
     })
@@ -191,13 +219,23 @@ const pageSearch = () => {
   }
 };
 
-const changeSortBy = (v: string[]) => {
-  nameOrder.value = '';
-  if (Array.isArray(v)) {
-    if (v[0] === 'name') {
-      nameOrder.value = SORTPARAMS[v[1]];
+// 排序
+const nameIndex = ref(0);
+const changeSortBy = (v: string) => {
+  const updateIndex = (index) => {
+    if (index.value >= 2) {
+      index.value = 0;
+    } else {
+      index.value++;
     }
+  };
+
+  nameOrder.value = '';
+  if (v === 'name') {
+    updateIndex(nameIndex);
+    nameOrder.value = SORTPARAMS[nameIndex.value];
   }
+
   currentPage.value = 1;
 };
 
@@ -231,6 +269,59 @@ const changeFilterSearch = (v: string) => {
 const clearFilterSearch = () => {
   searchKey.value = '';
 };
+
+// ----------- 合并单元格-------------
+// 记录已经处理过的值
+const recordRowKey = new Map();
+// 需要合并的列
+const spanRow = ['name', 'upstreamVersion'];
+
+// 提前计算合并信息
+const calculateSpanInfo = () => {
+  recordRowKey.clear();
+  appData.value.forEach((row, index) => {
+    const len = row.applicationVersions.length;
+    if (len > 1) {
+      const current = `${row.name}-${row.upstreamVersion}`;
+      if (!recordRowKey.has(current)) {
+        recordRowKey.set(current, index);
+      }
+    }
+  });
+};
+
+//版本支持情况合并单元格
+const cellSpanFn = (rowIndex: number, colIdx: number, row: any, column: any) => {
+  const key = column.key;
+  const len = row.applicationVersions.length;
+  if (spanRow.includes(key) && len > 1) {
+    const current = `${row.name}-${row.upstreamVersion}`;
+    const startIndex = recordRowKey.get(current);
+
+    if (startIndex === rowIndex) {
+      return { rowspan: len, colspan: 1 };
+    } else {
+      return { rowspan: 0, colspan: 0 };
+    }
+  } else {
+    return { rowspan: 1, colspan: 1 };
+  }
+};
+
+const showExternalDlg = ref(false);
+const externalLink = ref('');
+const onExternalDialog = (href: string) => {
+  externalLink.value = href;
+  if (checkOriginLink(href)) {
+    windowOpen(href, '_blank');
+  } else {
+    showExternalDlg.value = true;
+  }
+};
+
+const joinUrl = (item) => {
+  return `/zh/${item.type.toLocaleLowerCase()}/detail?pkgId=${item.pkgId}`;
+};
 </script>
 
 <template>
@@ -279,11 +370,48 @@ const clearFilterSearch = () => {
         <AppLoading :loading="isLoading" />
         <ResultNoApp v-if="isSearchError" :type="t('upstream.title')" />
         <div v-if="appData.length !== 0 && !isSearchError" class="pkg-panel">
-          <OTableItemNew :data="appData" :columns="columns" :type="tabName" @sort="changeSortBy" />
+          <OTable :cell-span="cellSpanFn" :columns="columns" :data="appData" :small="true" border="all" :class="tabName">
+            <template #header="{ columns }">
+              <th v-for="item in columns" :key="item.type" :class="item.type">
+                <div v-if="item.key === 'name'" @click="changeSortBy('name')" class="thead-th sort">
+                  {{ item.label }}
+                  <span class="sort-icon" :class="SORTPARAMS[nameIndex]"></span>
+                </div>
+                <div v-else class="thead-th">{{ item.label }}</div>
+              </th>
+            </template>
+            <template #td_name="{ row }">
+              <span v-dompurify-html="row.name"></span>
+            </template>
+            <template #td_type="{ row }">
+              <OTag v-if="row.type" class="type">{{ appTypeListDisplayNames[row.type] }}</OTag>
+              <template v-else>-</template>
+            </template>
+
+            <template #td_upstreamVersion="{ row }">
+              <OLink v-if="row.upHomepage" @click="onExternalDialog(row.upHomepage)" color="primary">{{ row.upstreamVersion }}</OLink>
+              <template v-else-if="row.upstreamVersion">{{ row.upstreamVersion }}</template>
+              <template v-else>-</template>
+            </template>
+            <template #td_openeulerVersion="{ row }">
+              <OLink v-if="row.openeulerVersion" target="_blank" :href="joinUrl(row)" color="primary">{{ row.openeulerVersion }}</OLink>
+              <template v-else>-</template>
+            </template>
+
+            eulerOsVersion
+
+            <template #td_status="{ row }">
+              <OTag v-if="row.status" class="app-tag" :class="row.status.toLocaleLowerCase()">{{ row.status }} </OTag>
+              <template v-else>-</template>
+            </template>
+          </OTable>
 
           <div v-if="total > COUNT_PAGESIZE[0]" class="pagination-box">
             <AppPagination :current="currentPage" :pagesize="pageSize" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
           </div>
+
+          <!-- 跳转外部链接提示 -->
+          <ExternalLink v-if="showExternalDlg" :href="externalLink" @change="showExternalDlg = false" />
         </div>
       </div>
     </div>
@@ -292,4 +420,41 @@ const clearFilterSearch = () => {
 
 <style lang="scss" scoped>
 @import '@/assets/style/category/content/index.scss';
+
+.type {
+  --tag-bg-color: var(--o-color-fill1);
+  --tag-bd-color: var(--o-color-fill1);
+}
+.app-tag {
+  min-width: 92px;
+  color: var(--o-color-white);
+  &.outdated {
+    --tag-bg-color: #058ef0;
+    --tag-bd-color: #058ef0;
+  }
+  &.ok {
+    --tag-bg-color: #0bb151;
+    --tag-bd-color: #0bb151;
+  }
+  &.missing {
+    --tag-bg-color: #c7000b;
+    --tag-bd-color: #c7000b;
+  }
+}
+
+:deep(.o-table) {
+  // 当一行有 5 个 td 时，为前两个 td 添加边框
+  // td:nth-child(-n + 2):nth-last-child(5),
+  // td:nth-child(-n + 2):nth-last-child(5) ~ td:nth-child(2) {
+  //   border-right: var(--table-border);
+  // }
+  --table-row-hover: transparent;
+  .thead-th {
+    display: flex;
+    align-items: center;
+    &.sort {
+      cursor: pointer;
+    }
+  }
+}
 </style>
-- 
Gitee


From dcaefd17cc52ff15eb529031e3b46342a5ac8727 Mon Sep 17 00:00:00 2001
From: ailoooong <ilong8@qq.com>
Date: Fri, 1 Aug 2025 16:21:52 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E8=BD=AF=E4=BB=B6=E5=8C=85=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@types/app.ts                           |   7 +-
 src/@types/detail.ts                        |   7 +
 src/assets/style/category/detail/index.scss |  34 ++-
 src/assets/style/theme/table.scss           |   9 +-
 src/components/AppPagination.vue            |  10 +-
 src/components/AppSection.vue               |  13 +-
 src/components/OTableItemNew.vue            |   4 +-
 src/components/detail/DetailAside.vue       | 186 +++++---------
 src/components/detail/DetailBasicInfo.vue   |  13 +-
 src/components/detail/DetailHeader.vue      |  83 +------
 src/components/detail/DetailInstall.vue     | 151 ++++++++++--
 src/components/filter/FilterRadio.vue       |   2 +-
 src/components/header/AppHeader.vue         |   2 +-
 src/components/header/HeaderNav.vue         |   5 +
 src/composables/useDetailPageAnalytics.ts   |   4 +-
 src/data/detail/index.ts                    |   4 +-
 src/router/index.ts                         |   6 +
 src/views/conda/TheCondaDetail.vue          |  92 ++++---
 src/views/epkg/TheEpkgDetail.vue            |  94 ++++---
 src/views/field/TheFieldDetail.vue          | 257 ++++++++++----------
 src/views/image/TheImageDetail.vue          | 137 ++++-------
 src/views/oepkg/TheOEpkgDetail.vue          | 146 +++++------
 src/views/package/TheRpmDetail.vue          | 131 +++++-----
 src/views/upstream/UpstreamContent.vue      |  69 +-----
 24 files changed, 697 insertions(+), 769 deletions(-)

diff --git a/src/@types/app.ts b/src/@types/app.ts
index 17064e9..557550c 100644
--- a/src/@types/app.ts
+++ b/src/@types/app.ts
@@ -29,9 +29,10 @@ export interface AppInfoT {
   version: string;
   repository: string;
   size: string | null;
-  source_code: string;
-  bin_code: string;
+  srcDownloadUrl: string;
+  binDownloadUrl: string;
   security?: string;
+  description?: string;
 }
 
 export interface MaintainerT {
@@ -66,4 +67,4 @@ export interface MoreMessgeItemT {
   epoch: string;
 }
 
-export type PkgTypeT = 'RPM' | 'IMAGE' | 'EPKG' | 'OEPKG';
+export type PkgTypeT = 'RPM' | 'IMAGE' | 'EPKG' | 'OEPKG' | 'CONDA';
diff --git a/src/@types/detail.ts b/src/@types/detail.ts
index 57f7c40..41c672c 100644
--- a/src/@types/detail.ts
+++ b/src/@types/detail.ts
@@ -77,3 +77,10 @@ export interface ParamsKeyT {
   epkgPkgId: string | null;
   rpmPkgId: string | null;
 }
+
+export interface ImageTagsT {
+  appVer: string;
+  arch: string;
+  dockerStr: string;
+  pkgId: string;
+}
diff --git a/src/assets/style/category/detail/index.scss b/src/assets/style/category/detail/index.scss
index fab304a..18f223e 100644
--- a/src/assets/style/category/detail/index.scss
+++ b/src/assets/style/category/detail/index.scss
@@ -27,27 +27,40 @@
   }
 }
 
+.version-title {
+  display: flex;
+  align-items: center;
+  h2 {
+    font-weight: 500;
+    color: var(--o-color-info1);
+    margin-right: 12px;
+    @include h2;
+  }
+  .software-version {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  + .o-tab {
+    margin-top: 24px;
+  }
+}
+
 .code-box {
   position: relative;
 }
 
 .basic-info {
-  border-left: 4px solid var(--o-color-primary1);
   p,
   .basic-info-item {
     @include text1;
     color: var(--o-color-info1);
     display: flex;
-    align-items: top;
-    border-bottom: 1px solid var(--o-color-control4);
-    border-right: 1px solid var(--o-color-control4);
+    align-items: center;
     word-break: break-word;
-    &:first-child {
-      border-top: 1px solid var(--o-color-control4);
-    }
+    margin: 24px 0;
     .label {
-      background: var(--o-color-control2-light);
-      padding: 16px 24px;
       color: var(--o-color-info2);
       min-width: 150px;
     }
@@ -57,7 +70,8 @@
   }
   .basic-item-box {
     flex: 1;
-    padding: 16px 24px;
+    display: flex;
+    justify-content: flex-end;
   }
 }
 
diff --git a/src/assets/style/theme/table.scss b/src/assets/style/theme/table.scss
index 54aa764..51a4775 100644
--- a/src/assets/style/theme/table.scss
+++ b/src/assets/style/theme/table.scss
@@ -1,6 +1,6 @@
 @use '../mixin/font.scss' as *;
 .o-table {
-  --table-edge-padding: 24px;
+  --table-edge-padding: 16px;
   --table-cell-padding: 16px 10px;
   --table-head-cell-padding: 12px 10px;
   --table-head-bg: var(--o-color-control3-light);
@@ -34,9 +34,10 @@
   }
   &.o-table-small {
     --table-cell-height: auto;
-    --table-edge-padding: 24px;
-    --table-cell-padding: 8px;
-    --table-head-cell-padding: 8px;
+    --table-edge-padding: 16px;
+    --table-head-cell-padding: 8px 16px;
+    --table-cell-padding: 8px 16px;
+
     td,
     th {
       @include tip1;
diff --git a/src/components/AppPagination.vue b/src/components/AppPagination.vue
index 7905350..819c454 100644
--- a/src/components/AppPagination.vue
+++ b/src/components/AppPagination.vue
@@ -22,9 +22,13 @@ const route = useRoute();
 
 const emit = defineEmits(['size-change', 'current-change']);
 
-const onChange = (newValue: { page: number; pageSize: number }) => {
-  emit('size-change', newValue.pageSize);
-  emit('current-change', newValue.page);
+const onChange = (newValue: { page: number; pageSize: number }, oldValue: { page: number; pageSize: number }) => {
+  if (newValue.pageSize !== oldValue.pageSize) {
+    emit('size-change', newValue.pageSize);
+  }
+  if (newValue.page !== oldValue.page) {
+    emit('current-change', newValue.page);
+  }
 };
 
 // 如果是领域应用 分页数量为12条，否则为20条
diff --git a/src/components/AppSection.vue b/src/components/AppSection.vue
index 55ae5c6..5687804 100644
--- a/src/components/AppSection.vue
+++ b/src/components/AppSection.vue
@@ -4,12 +4,16 @@ defineProps({
     type: String,
     default: '',
   },
+  line: {
+    type: Boolean,
+    default: true,
+  },
 });
 </script>
 
 <template>
   <div class="app-section">
-    <div v-if="title" class="title-bar">
+    <div v-if="title" class="title-bar" :class="{ line: line }">
       <h3>{{ title }}</h3>
       <slot name="append"></slot>
     </div>
@@ -20,7 +24,12 @@ defineProps({
 <style lang="scss" scoped>
 .detail-row-side {
   .title-bar {
-    margin-bottom: 16px !important;
+    margin-bottom: 24px !important;
+
+    &.line {
+      border-bottom: 1px solid var(--o-color-control4);
+      padding-bottom: 24px;
+    }
   }
 }
 .app-section {
diff --git a/src/components/OTableItemNew.vue b/src/components/OTableItemNew.vue
index 6835aff..84cbff4 100644
--- a/src/components/OTableItemNew.vue
+++ b/src/components/OTableItemNew.vue
@@ -333,14 +333,14 @@ const onClickLink = (row: any) => {
 }
 
 :deep(.o-table) {
-  --table-edge-padding: 24px;
+  --table-edge-padding: 16px;
   td:first-child,
   th:first-child {
     padding-left: var(--table-edge-padding);
   }
   td:last-child,
   th:last-child {
-    padding-left: var(--table-edge-padding);
+    padding-right: var(--table-edge-padding);
   }
   .label {
     display: flex;
diff --git a/src/components/detail/DetailAside.vue b/src/components/detail/DetailAside.vue
index c1724c4..3dc203a 100644
--- a/src/components/detail/DetailAside.vue
+++ b/src/components/detail/DetailAside.vue
@@ -1,20 +1,23 @@
 <script lang="ts" setup>
-import { OTable, useMessage, OButton, OTag, OIcon, OLink } from '@opensig/opendesign';
-import OCodeCopy from '@/components/OCodeCopy.vue';
+import { OTable, OTag, OIcon, OLink } from '@opensig/opendesign';
+
 import { ref, computed, watch, type PropType } from 'vue';
 import ExternalLink from '@/components/ExternalLink.vue';
 import MaintenanceDescription from '@/components/detail/MaintenanceDescription.vue';
-import { useClipboard } from '@/composables/useClipboard';
-import { getCode } from '@/utils/common';
+import DetailBasicInfo from '@/components/detail/DetailBasicInfo.vue';
+import { checkOriginLink, windowOpen } from '@/utils/common';
+import type { MaintainerT } from '@/@types/app';
 import { verColumns } from '@/data/detail/index';
-import IconCopy from '~icons/app/icon-copy.svg';
 import { useLocale } from '@/composables/useLocale';
 import type { PkgTypeT } from '@/@types/app';
 import { useI18n } from 'vue-i18n';
+import { GITEE } from '@/data/config';
 
 import IconChevronDown from '~icons/app/icon-chevron-down.svg';
 import IconState from '~icons/pkg/icon-state.svg';
 import IconLevel from '~icons/pkg/icon-level.svg';
+import IconEmail from '~icons/pkg/email.svg';
+import IconGitee from '~icons/pkg/gitee.svg';
 
 interface EulerverT {
   pkgId: string;
@@ -35,11 +38,6 @@ const props = defineProps({
       return 'RPM';
     },
   },
-  downloadData: {
-    default: () => {
-      return '';
-    },
-  },
   verData: {
     type: Array as PropType<EulerverT[]>,
     default: () => {
@@ -51,96 +49,25 @@ const props = defineProps({
       return [];
     },
   },
+  maintainer: {
+    type: Object as PropType<MaintainerT>,
+    default: () => {
+      return {};
+    },
+  },
 });
 const { t } = useI18n();
 
-const emit = defineEmits<{
-  (event: 'reportAnalytics', data: Record<string, any>): void;
-}>();
-
-const tableData = ref([
-  {
-    name: '二进制包下载',
-    download: computed(() => props.data.bin_code),
-  },
-  {
-    name: '源码包下载',
-    download: computed(() => props.data.source_code),
-  },
-]);
 const showExternalDlg = ref(false);
 const externalLink = ref('');
 const onExternalDialog = (href: string) => {
   externalLink.value = href;
-
-  collectDownloadData(href === props.data.bin_code ? 'binary' : 'source_code');
-  showExternalDlg.value = true;
-};
-const show = ref(true);
-const showTable = () => {
-  if (!props.data.bin_code && !props.data.source_code) {
-    tableData.value = [];
-    show.value = false;
-  } else if (!props.data.bin_code) {
-    tableData.value = [
-      {
-        name: '源码包下载',
-        download: computed(() => props.data.source_code),
-      },
-    ];
-    show.value = true;
-  } else if (!props.data.source_code) {
-    tableData.value = [
-      {
-        name: '二进制包下载',
-        download: computed(() => props.data.bin_code),
-      },
-    ];
-    show.value = true;
+  if (checkOriginLink(href)) {
+    windowOpen(href, '_blank');
   } else {
-    tableData.value = [
-      {
-        name: '二进制包下载',
-        download: computed(() => props.data.bin_code),
-      },
-      {
-        name: '源码包下载',
-        download: computed(() => props.data.source_code),
-      },
-    ];
-    show.value = true;
+    showExternalDlg.value = true;
   }
 };
-watch(
-  () => props.data.bin_code,
-  () => showTable()
-);
-showTable();
-
-const message = useMessage();
-const copyText = (e: MouseEvent, val: any) => {
-  useClipboard({
-    text: val,
-    target: e,
-    success: () => {
-      collectDownloadData(val === props.data.bin_code ? 'binary' : 'source_code', true);
-      message.success({
-        content: '复制成功',
-      });
-    },
-  });
-};
-
-// ---------------------下载埋点--------------------
-const collectDownloadData = (download_type?: 'binary' | 'source_code' | null, isCopy?: boolean) => {
-  const data: Record<string, string> = {
-    type: isCopy ? 'copy_url' : 'download',
-  };
-  if (download_type) {
-    data.download_type = download_type;
-  }
-  emit('reportAnalytics', data);
-};
 
 // ---------------------版本支持情况--------------------
 const versionData = ref<EulerverT[]>(props.verData || []);
@@ -149,6 +76,7 @@ interface ColumnT {
   key: string;
   label: string;
 }
+
 //版本支持情况合并单元格
 const arraySpanMethod = (rowIndex: number, colIdx: number, row: EulerverT, column: ColumnT) => {
   const fields = ['os'];
@@ -208,11 +136,6 @@ watch(
   }
 );
 
-// 应用镜像埋点
-const onCodeSuccess = () => {
-  collectDownloadData(null, true);
-};
-
 const isSecurityShow = ref(false);
 // 是否显示图标
 const isSecurityIconShow = (v: string) => {
@@ -221,20 +144,29 @@ const isSecurityIconShow = (v: string) => {
 </script>
 
 <template>
-  <AppSection :title="type === 'IMAGE' ? '获取应用镜像' : `${type}下载安装`" v-if="type === 'IMAGE' || data.size !== 0">
-    <div class="detail">
-      <p class="title" v-if="type !== 'IMAGE'">软件包大小：{{ data.size }}</p>
-    </div>
-    <OCodeCopy :code="getCode(downloadData)" v-if="type === 'IMAGE' && downloadData" @success="onCodeSuccess" />
-    <div v-if="type !== 'IMAGE' && show">
-      <div v-for="item in tableData" :key="item.name" class="bt">
-        <OButton variant="solid" class="obtn" size="large" @click="onExternalDialog(item.download)">{{ item.name }}</OButton>
-        <p @click="copyText($event, item.download)" class="copy-icon">
-          <OIcon><IconCopy /></OIcon>
-        </p>
-      </div>
+  <!-- 维护者信息 -->
+  <AppSection title="维护者信息">
+    <div class="maintainer-box">
+      <p v-if="maintainer.maintainerId" class="title">维护者：{{ maintainer.maintainerId }}</p>
+      <p v-if="maintainer.maintainerEmail" class="text">
+        <a class="email" :href="`mailto:${maintainer.maintainerEmail}`">
+          <OIcon class="icon-img"><IconEmail /></OIcon>
+          <span>{{ maintainer.maintainerEmail }}</span>
+        </a>
+      </p>
+      <p v-if="maintainer.maintainerGiteeId" class="text">
+        <a class="gitee" @click="onExternalDialog(`${GITEE}/${maintainer.maintainerGiteeId}`)">
+          <OIcon class="icon-img"><IconGitee /></OIcon>
+          <span>{{ `${GITEE}/${maintainer.maintainerGiteeId}` }}</span>
+        </a>
+      </p>
     </div>
   </AppSection>
+  <!-- 软件合规 -->
+  <AppSection title="基础信息">
+    <DetailBasicInfo />
+  </AppSection>
+  <!-- 软件分级 -->
   <AppSection title="软件分级" v-if="data.security">
     <template #append>
       <div @click="isSecurityShow = true" class="security-info">
@@ -249,13 +181,15 @@ const isSecurityIconShow = (v: string) => {
     </div>
     <MaintenanceDescription v-if="isSecurityShow" @change="isSecurityShow = false" />
   </AppSection>
+  <!-- 软件合规 -->
   <AppSection title="软件合规" v-if="data.license">
     <div class="license">
       <p>License</p>
       <p>{{ data.license }}</p>
     </div>
   </AppSection>
-  <AppSection v-if="verData.length > 0" :title="`${data.name}版本支持情况`">
+  <!-- 版本支持情况 -->
+  <AppSection v-if="verData.length > 0 && type !== 'IMAGE'" :line="false" :title="`${data.name}版本支持情况`">
     <OTable class="table-versions" :columns="verColumns" :data="tableAllData" border="all" :cell-span="arraySpanMethod" :small="true">
       <template #td_flags="{ row }">
         <a :href="jumpTo(row.pkgId)" color="primary" rel="noopener noreferrer">
@@ -276,11 +210,30 @@ const isSecurityIconShow = (v: string) => {
       </OLink>
     </p>
   </AppSection>
-
+  <!-- 外链确认 -->
   <ExternalLink v-if="showExternalDlg" :href="externalLink" @change="showExternalDlg = false" />
 </template>
 
 <style lang="scss" scoped>
+.maintainer-box {
+  p {
+    display: flex;
+    align-items: center;
+    color: var(--o-color-info1);
+  }
+  .title {
+    margin-bottom: 16px;
+  }
+  .text {
+    margin-top: 8px;
+    a {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+}
+
 .level-info {
   display: flex;
   align-items: center;
@@ -308,7 +261,7 @@ const isSecurityIconShow = (v: string) => {
   }
 }
 .app-section {
-  padding: 32px 40px;
+  padding: 32px;
 }
 .view-all {
   text-align: center;
@@ -356,8 +309,6 @@ const isSecurityIconShow = (v: string) => {
   }
 }
 .license {
-  border-top: 1px solid var(--o-color-control4);
-  padding-top: 25px;
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -382,15 +333,4 @@ const isSecurityIconShow = (v: string) => {
     font-weight: 500;
   }
 }
-
-.obtn {
-  border-radius: 4px;
-  background: var(--o-color-control2-light);
-  border: none;
-  transition: none;
-  --btn-color: var(--o-color-info1);
-  &:hover {
-    background: var(--o-color-control3-light);
-  }
-}
 </style>
diff --git a/src/components/detail/DetailBasicInfo.vue b/src/components/detail/DetailBasicInfo.vue
index 627592b..635867c 100644
--- a/src/components/detail/DetailBasicInfo.vue
+++ b/src/components/detail/DetailBasicInfo.vue
@@ -1,18 +1,10 @@
 <script lang="ts" setup>
-import { ref, type PropType } from 'vue';
+import { ref, inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { OLink, OIcon } from '@opensig/opendesign';
-import type { DetailItemT } from '@/@types/app';
 
 import IconChevronDown from '~icons/app/icon-chevron-down.svg';
 
-defineProps({
-  options: {
-    type: Array as PropType<Array<DetailItemT>>,
-    required: true,
-  },
-});
-
 const { t } = useI18n();
 
 const showExternalDlg = ref(false);
@@ -32,11 +24,12 @@ const descSummary = (v: string) => {
 const showMore = () => {
   isToggle.value = !isToggle.value;
 };
+const injectBasicInfo = inject('BASE_INFO');
 </script>
 
 <template>
   <div class="basic-info">
-    <div v-for="item in options" :key="item.name" class="basic-info-item">
+    <div v-for="item in injectBasicInfo" :key="item.name" class="basic-info-item">
       <span class="label">{{ item.name }}</span>
       <div class="basic-item-box">
         <template v-if="item.name === t('detail.warehouse')">
diff --git a/src/components/detail/DetailHeader.vue b/src/components/detail/DetailHeader.vue
index 6decd5e..3d9fbc9 100644
--- a/src/components/detail/DetailHeader.vue
+++ b/src/components/detail/DetailHeader.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, type PropType } from 'vue';
+import { ref } from 'vue';
 import { OLink, OIcon } from '@opensig/opendesign';
 import { checkOriginLink, windowOpen } from '@/utils/common';
 import { scrollToTop } from '@/utils/common';
@@ -7,11 +7,7 @@ import { useRoute } from 'vue-router';
 import { useTheme } from '@/composables/useTheme';
 import ExternalLink from '@/components/ExternalLink.vue';
 
-import type { MaintainerT } from '@/@types/app';
-import { GITEE } from '@/data/config';
-
-import IconEmail from '~icons/pkg/email.svg';
-import IconGitee from '~icons/pkg/gitee.svg';
+import defaultImg from '@/assets/default-logo.png';
 import IconOutlink from '~icons/pkg/icon-outlink.svg';
 import IconHelp from '~icons/pkg/icon-help.svg';
 
@@ -25,17 +21,6 @@ defineProps({
       return {};
     },
   },
-  maintainer: {
-    type: Object as PropType<MaintainerT>,
-    default: () => {
-      return {};
-    },
-  },
-  basicInfo: {
-    default: () => {
-      return '';
-    },
-  },
 });
 
 const emit = defineEmits<{
@@ -70,7 +55,7 @@ const scrollToAnchor = () => {
 <template>
   <div class="domain-head">
     <div class="left">
-      <div class="cover" :style="{ 'background-image': `url(${isDark ? coverBgDark : coverBg})` }"><img :src="data.cover" alt="" /></div>
+      <div class="cover" :style="{ 'background-image': `url(${isDark ? coverBgDark : coverBg})` }"><img :src="data.cover || defaultImg" alt="" /></div>
       <div class="box">
         <p class="title">
           {{ data.name }}
@@ -79,29 +64,12 @@ const scrollToAnchor = () => {
             主页
           </OLink>
         </p>
-        <p v-if="basicInfo" class="detail">{{ basicInfo }}</p>
-        <OLink size="small" class="scroll-box" @click="scrollToAnchor('feed')">
+        <p v-if="data.description" class="detail">{{ data.description }}</p>
+        <OLink size="small" class="scroll-box" @click="scrollToAnchor()">
           <OIcon><IconHelp /></OIcon>我要反馈
         </OLink>
       </div>
     </div>
-
-    <div class="right">
-      <p class="sp">维护者信息</p>
-      <p v-if="maintainer.maintainerId" class="title">维护者：{{ maintainer.maintainerId }}</p>
-      <p v-if="maintainer.maintainerEmail" class="text">
-        <a class="email" :href="`mailto:${maintainer.maintainerEmail}`">
-          <OIcon class="icon-img"><IconEmail /></OIcon>
-          <span>{{ maintainer.maintainerEmail }}</span>
-        </a>
-      </p>
-      <p v-if="maintainer.maintainerGiteeId" class="text">
-        <a class="gitee" @click="onExternalDialog(`${GITEE}/${maintainer.maintainerGiteeId}`)">
-          <OIcon class="icon-img"><IconGitee /></OIcon>
-          <span>{{ `${GITEE}/${maintainer.maintainerGiteeId}` }}</span>
-        </a>
-      </p>
-    </div>
   </div>
   <!-- 跳转外部链接提示 -->
   <ExternalLink v-if="showExternalDlg" :href="externalLink" @change="showExternalDlg = false" />
@@ -122,9 +90,6 @@ const scrollToAnchor = () => {
   display: flex;
   .left {
     display: flex;
-    width: 70%;
-    border-right: 1px solid var(--o-color-control4);
-    padding-right: 64px;
     .box {
       margin-left: 32px;
       flex: 1;
@@ -135,13 +100,11 @@ const scrollToAnchor = () => {
       font-weight: 500;
       color: var(--o-color-info1);
       display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
+      align-items: center;
     }
     .home-page {
       --link-icon-size: 16px;
-      min-width: 60px;
-      justify-content: flex-end;
+      margin-left: 16px;
       @include tip1;
     }
     :deep(.o-link) {
@@ -169,38 +132,6 @@ const scrollToAnchor = () => {
       }
     }
   }
-  .right {
-    margin-left: 40px;
-    flex: 1;
-    img {
-      width: 24px;
-    }
-    .text {
-      margin-top: 8px;
-      @include text1;
-
-      a {
-        display: flex;
-        align-items: center;
-        .icon-img {
-          margin-right: 8px;
-          color: var(--o-color-info1);
-        }
-      }
-    }
-
-    .title {
-      @include text1;
-      color: var(--o-color-info2);
-      margin: 24px 0px 16px 0px;
-    }
-    .sp {
-      font-size: 22px;
-      line-height: 30px;
-      font-weight: 500;
-      color: var(--o-color-info1);
-    }
-  }
 
   .cover {
     width: 300px;
diff --git a/src/components/detail/DetailInstall.vue b/src/components/detail/DetailInstall.vue
index 944e969..0567369 100644
--- a/src/components/detail/DetailInstall.vue
+++ b/src/components/detail/DetailInstall.vue
@@ -1,44 +1,153 @@
 <script lang="ts" setup>
-import { OPopover, OIcon } from '@opensig/opendesign';
-import IconHelp from '~icons/app/icon-help.svg';
+import { ref } from 'vue';
+import { OTab, OTabPane, OButton, useMessage, OIcon } from '@opensig/opendesign';
+import { useMarkdown } from '@/composables/useMarkdown';
+import { useClipboard } from '@/composables/useClipboard';
+import ExternalLink from '@/components/ExternalLink.vue';
+import IconCopy from '~icons/app/icon-copy.svg';
+
 defineProps({
   title: {
     type: String,
     default: '',
   },
+  options: {
+    type: Array,
+    required: true,
+  },
 });
+
+const { mkit } = useMarkdown();
+const selected = ref('online');
+const message = useMessage();
+
+type DownloadType = 'binary' | 'source_code';
+const copyText = (e: MouseEvent, val: string, type: DownloadType) => {
+  useClipboard({
+    text: val,
+    target: e,
+    success: () => {
+      collectDownloadData(type, true);
+      message.success({
+        content: '复制成功',
+      });
+    },
+  });
+};
+
+// ---------------------下载埋点--------------------
+const emit = defineEmits<{
+  (event: 'reportAnalytics', data: Record<string, any>): void;
+}>();
+const collectDownloadData = (download_type?: DownloadType, isCopy?: boolean) => {
+  const data: Record<string, string> = {
+    type: isCopy ? 'copy_url' : 'download',
+  };
+  if (download_type) {
+    data.download_type = download_type;
+  }
+  emit('reportAnalytics', data);
+};
+
+// ---------------------外链弹窗--------------------
+const showExternalDlg = ref(false);
+const externalLink = ref('');
+const onExternalDialog = (href: string, type: DownloadType) => {
+  externalLink.value = href;
+
+  collectDownloadData(type);
+  showExternalDlg.value = true;
+};
 </script>
 
 <template>
-  <div class="install-box">
-    <p class="title">
-      {{ title }}
-      <OPopover position="top" trigger="hover">
-        <template #target>
-          <OIcon ref="installRef" class="install-icon"><IconHelp /></OIcon>
+  <p class="title">
+    {{ title }}
+  </p>
+  <OTab v-model="selected" variant="text" :line="false" class="domain-tabs" :class="options.length > 1 ? 'tabs-switch' : 'tabs-one'">
+    <template v-for="item in options" :key="item.type">
+      <OTabPane class="tab-pane" :label="item.name" :value="item.type">
+        <template v-if="item.type === 'online'">
+          <div
+            v-copy-installation
+            v-dompurify-html="mkit(item.installation, { isCopy: true, Tag: item.appVer })"
+            v-copy-code="true"
+            class="markdown-body download"
+          ></div>
         </template>
-        <div class="box">
-          部分欧拉镜像可能未安装config-manager 请手动执行<br />
-          dnf install dnf-command(config-manager)
+        <div v-if="item.type === 'download'">
+          <p class="download-size">软件包大小：{{ item.size }}</p>
+          <div class="download-box">
+            <template v-for="sub in item.children" :key="sub.type">
+              <div v-if="sub.href" class="download-item">
+                <OButton variant="solid" class="obtn" size="large" @click="onExternalDialog(sub.href, sub.type)">{{ sub.label }}</OButton>
+                <p @click="copyText($event, sub.href, sub.type)" class="copy-icon">
+                  <OIcon><IconCopy /></OIcon>
+                </p>
+              </div>
+            </template>
+          </div>
         </div>
-      </OPopover>
-    </p>
-    <slot />
-  </div>
+      </OTabPane>
+    </template>
+  </OTab>
+  <ExternalLink v-if="showExternalDlg" :href="externalLink" @change="showExternalDlg = false" />
 </template>
 
 <style lang="scss" scoped>
 .title {
-  color: var(--o-color-info1);
   margin: 32px 0 24px;
+  color: var(--o-color-info1);
   font-weight: 500;
+  @include h3;
+}
+.download-box {
   display: flex;
   align-items: center;
-  @include h3;
+  gap: 32px;
+  margin-top: 12px;
+}
+.download-size {
+  @include text1;
+  color: var(--o-color-info2);
+}
+
+.obtn {
+  background: var(--o-color-control2-light);
+  border: none;
+  transition: none;
+  --btn-color: var(--o-color-info1);
+  &:hover {
+    background: var(--o-color-control3-light);
+  }
 }
-.install-icon {
-  width: 20px;
-  height: 20px;
-  margin-left: 8px;
+.download-item {
+  height: 100%;
+  display: flex;
+  margin-bottom: 24px;
+  align-items: center;
+
+  button {
+    width: 240px;
+  }
+  .copy-icon {
+    margin-left: 16px;
+    cursor: pointer;
+
+    .o-icon {
+      font-size: 24px;
+      width: 24px;
+      height: 24px;
+      color: var(--o-color-link1);
+      &:hover {
+        color: var(--o-color-link2);
+      }
+    }
+  }
+  p {
+    height: 40px;
+    display: flex;
+    align-items: center;
+  }
 }
 </style>
diff --git a/src/components/filter/FilterRadio.vue b/src/components/filter/FilterRadio.vue
index b8661d8..8938d05 100644
--- a/src/components/filter/FilterRadio.vue
+++ b/src/components/filter/FilterRadio.vue
@@ -21,7 +21,7 @@ const actualOptions = computed(() => {
     return [];
   }
   return props.options.map((option) => {
-    if (typeof option ==='string') {
+    if (typeof option === 'string') {
       return { label: option, value: option };
     }
     return option;
diff --git a/src/components/header/AppHeader.vue b/src/components/header/AppHeader.vue
index 583f447..4077094 100644
--- a/src/components/header/AppHeader.vue
+++ b/src/components/header/AppHeader.vue
@@ -188,7 +188,7 @@ watch(
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1010;
+  z-index: 999;
   background: var(--o-color-fill2);
   box-shadow: var(--o-shadow-1);
   min-width: 1440px;
diff --git a/src/components/header/HeaderNav.vue b/src/components/header/HeaderNav.vue
index cfb3fe7..31d4d07 100644
--- a/src/components/header/HeaderNav.vue
+++ b/src/components/header/HeaderNav.vue
@@ -40,6 +40,11 @@ const onMouseLeave = () => {
 const softwareList = ['rpm', 'image', 'oepkg', 'conda'];
 const selectedIndex = computed(() => {
   let name = route.name?.toString();
+  // 判断是否是详情页
+  if (name?.includes('-detail')) {
+    name = name?.split('-')[0];
+  }
+
   if (softwareList.includes(name)) {
     name = 'list';
   }
diff --git a/src/composables/useDetailPageAnalytics.ts b/src/composables/useDetailPageAnalytics.ts
index 8f2a172..99e4928 100644
--- a/src/composables/useDetailPageAnalytics.ts
+++ b/src/composables/useDetailPageAnalytics.ts
@@ -1,8 +1,8 @@
-import type { AppInfoT, DetailItemT } from '@/@types/app';
+import type { DetailItemT } from '@/@types/app';
 import { oaReport } from '@/shared/analytics';
 import { computed, unref, type Directive, type MaybeRef, type Ref } from 'vue';
 
-const useDetailPageAnalytics = (appData: Ref<AppInfoT>, basicInfo: Ref<DetailItemT[]>, tab?: MaybeRef<string>) => {
+const useDetailPageAnalytics = (appData: Ref<any>, basicInfo: Ref<DetailItemT[]>, tab?: MaybeRef<string>) => {
   const archAndOs = computed(() => ({
     architecture: basicInfo.value.find((item) => item.name === '架构')?.value,
     os_version: basicInfo.value.find((item) => item.name === '版本支持情况')?.value,
diff --git a/src/data/detail/index.ts b/src/data/detail/index.ts
index 2ef8fd1..b028f1e 100644
--- a/src/data/detail/index.ts
+++ b/src/data/detail/index.ts
@@ -1,7 +1,7 @@
 // 应用镜像tab分类
 export const tagList = [
-  { lable: '概览', value: 'overview' },
-  { lable: 'Tags', value: 'tags' },
+  { lable: '使用描述', value: 'overview' },
+  { lable: '版本信息', value: 'tags' },
 ];
 
 // RPM更多信息表头
diff --git a/src/router/index.ts b/src/router/index.ts
index 61eedbd..0f11cc2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -21,6 +21,12 @@ const routes = [
     path: '/en',
     redirect: '/zh',
   },
+  {
+    path: '/en/:path*',
+    redirect: (to) => {
+      return `/zh${to.path.replace(/^\/en/, '')}`;
+    },
+  },
   {
     path: '/zh',
     name: 'home',
diff --git a/src/views/conda/TheCondaDetail.vue b/src/views/conda/TheCondaDetail.vue
index 6e7cd8a..0cb7ab4 100644
--- a/src/views/conda/TheCondaDetail.vue
+++ b/src/views/conda/TheCondaDetail.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import { ref, onMounted, provide } from 'vue';
-import { isString } from '@opensig/opendesign';
+import { ref, onMounted, provide, computed } from 'vue';
+import { isString, OTag } from '@opensig/opendesign';
 import { maintainerDefaults } from '@/data/query';
 import { useRoute } from 'vue-router';
-import { useMarkdown } from '@/composables/useMarkdown';
-import type { AppInfoT, MaintainerT, DetailItemT } from '@/@types/app';
+import type { MaintainerT, DetailItemT } from '@/@types/app';
 import { useI18n } from 'vue-i18n';
 import { getDetails, getVer } from '@/api/api-domain';
 import { useViewStore } from '@/stores/common';
@@ -13,32 +12,19 @@ import DetailHead from '@/components/detail/DetailHeader.vue';
 import DetailAside from '@/components/detail/DetailAside.vue';
 import DetailInstall from '@/components/detail/DetailInstall.vue';
 
-import defaultImg from '@/assets/default-logo.png';
 import { pkgIdInjection } from '@/data/injectionKeys';
+import useDetailPageAnalytics from '@/composables/useDetailPageAnalytics';
 
 const route = useRoute();
-const { mkit } = useMarkdown();
 const { t } = useI18n();
 
 const basicInfo = ref<DetailItemT[]>([]);
-const installation = ref('');
+
 const tabValue = ref('condapkg');
 const maintainer = ref<MaintainerT>({ maintainerId: '', maintainerEmail: '', maintainerGiteeId: '' });
 
-const security = ref();
-const description = ref();
-const appData = ref<AppInfoT>({
-  name: '',
-  cover: '',
-  license: '',
-  version: '',
-  repository: '',
-  size: '',
-  source_code: '',
-  bin_code: '',
-  security: '',
-});
-const srcRepo = ref('');
+const appData = ref({});
+const { reportAnalytics, goFeedback, reportFeedback } = useDetailPageAnalytics(appData, basicInfo, 'RPM');
 
 const isLoading = ref(true);
 
@@ -48,7 +34,7 @@ const queryPkg = () => {
     getDetails(tabValue.value, pkgId.value)
       .then((res) => {
         const data = res.data.list[0];
-        srcRepo.value = data.homepage || '';
+        appData.value = data;
         getDetailValue(data);
         isLoading.value = false;
       })
@@ -71,7 +57,7 @@ if (isString(route.query?.pkgId)) {
 onMounted(() => {
   queryPkg();
 });
-const summary = ref();
+
 const tagVer = ref();
 const getDetailValue = (data: any) => {
   try {
@@ -83,7 +69,6 @@ const getDetailValue = (data: any) => {
   } catch (res) {
     basicInfo.value = [];
   }
-  summary.value = data.description;
 
   tagVer.value = [data.os, data.arch];
 
@@ -93,29 +78,33 @@ const getDetailValue = (data: any) => {
     maintainerGiteeId: data?.maintainerGiteeId || maintainerDefaults.gitee_id,
   };
 
-  security.value = data?.security;
-  description.value = data?.description;
-  installation.value = mkit(data?.condaUsage || '', { isCopy: true, Tag: data.appVer });
-  appData.value.name = data.name;
-  appData.value.cover = data?.iconUrl || defaultImg;
-  appData.value.repository = data.srcRepo;
-  appData.value.size = 0;
-  appData.value.version = data.appVer;
-  appData.value.license = data.license;
-  appData.value.security = data.security;
   queryVer();
 };
 
+provide('BASE_INFO', basicInfo);
+
+// 安装指引
+const installTabs = computed(() => {
+  return [
+    {
+      name: '在线安装',
+      type: 'online',
+      tag: appData.value.appVer,
+      installation: appData.value.condaUsage,
+    },
+  ];
+});
+
 //获取支持
-const verData = ref();
+const versionSupportData = ref();
 const queryVer = () => {
   if (appData.value.name) {
     getVer(tabValue.value, encodeURIComponent(appData.value.name))
       .then((res) => {
-        verData.value = res.data.list;
+        versionSupportData.value = res.data.list;
       })
       .catch(() => {
-        verData.value = [];
+        versionSupportData.value = [];
       });
   }
 };
@@ -128,27 +117,32 @@ const queryVer = () => {
       <!-- 锚点 -->
       <AppBreadcrumb id="conda" :name="appData.name" />
       <!-- 头部信息 -->
-      <DetailHead :data="appData" :basicInfo="summary" :maintainer="maintainer" />
+      <DetailHead @go-feedback="goFeedback" :data="appData" />
 
       <div class="detail-row">
         <div class="detail-row-main">
-          <AppSection :title="`> ${t('detail.information')}`">
-            <template #append>
-              <span v-if="appData.version" class="ver">{{ t('detail.number') }}:{{ appData.version }}</span>
-            </template>
-            <!-- 基本信息 -->
-            <DetailBasicInfo :options="basicInfo" />
+          <AppSection :line="false">
+            <div v-if="appData.appVer" class="version-title">
+              <h2>{{ appData.appVer }}</h2>
+              <OTag v-if="appData.isLatestAppVer" color="success">最新版本</OTag>
+            </div>
+
             <!-- 安装指引 -->
-            <DetailInstall :title="`> ${t('detail.installation')}`">
-              <div v-if="installation" v-dompurify-html="installation" v-copy-code="true" class="markdown-body installation"></div>
-            </DetailInstall>
+            <DetailInstall :title="`> ${t('detail.installation')}`" :options="installTabs" @report-analytics="reportAnalytics" />
           </AppSection>
 
           <!-- 反馈 -->
-          <AppFeedback :name="appData.name" :version="appData.version" type="CONDA" :maintainer="maintainer" :srcRepo="srcRepo" />
+          <AppFeedback
+            @report-analytics="reportFeedback"
+            :name="appData.name"
+            :version="appData.version"
+            type="CONDA"
+            :maintainer="maintainer"
+            :srcRepo="srcRepo"
+          />
         </div>
         <div class="detail-row-side">
-          <DetailAside :data="appData" :ver-data="verData" :tagVer="tagVer" type="CONDA" />
+          <DetailAside :data="appData" :ver-data="versionSupportData" :tagVer="tagVer" :maintainer="maintainer" type="CONDA" />
         </div>
       </div>
     </template>
diff --git a/src/views/epkg/TheEpkgDetail.vue b/src/views/epkg/TheEpkgDetail.vue
index c1928ce..29cd208 100644
--- a/src/views/epkg/TheEpkgDetail.vue
+++ b/src/views/epkg/TheEpkgDetail.vue
@@ -1,23 +1,19 @@
 <script lang="ts" setup>
-import { ref, onMounted, provide } from 'vue';
-import { isString } from '@opensig/opendesign';
+import { ref, onMounted, provide, computed } from 'vue';
+import { isString, OTag } from '@opensig/opendesign';
 import { maintainerDefaults } from '@/data/query';
 import { useRoute } from 'vue-router';
-import { useMarkdown } from '@/composables/useMarkdown';
-import type { AppInfoT, MaintainerT, DetailItemT, MoreMessgeT } from '@/@types/app';
+import type { MaintainerT, DetailItemT, MoreMessgeT } from '@/@types/app';
 import { useI18n } from 'vue-i18n';
 import { getDetails, getVer } from '@/api/api-domain';
 import { useViewStore } from '@/stores/common';
 import AppFeedback from '@/components/AppFeedback.vue';
 import DetailHead from '@/components/detail/DetailHeader.vue';
 import DetailAside from '@/components/detail/DetailAside.vue';
-import DetailInstall from '@/components/detail/DetailInstall.vue';
 
-import defaultImg from '@/assets/default-logo.png';
 import { pkgIdInjection } from '@/data/injectionKeys';
 
 const route = useRoute();
-const { mkit } = useMarkdown();
 const { t } = useI18n();
 
 const basicInfo = ref<DetailItemT[]>([]);
@@ -26,22 +22,8 @@ const tabValue = ref('epkgpkg');
 const downloadData = ref('');
 const files = ref([]);
 const maintainer = ref<MaintainerT>({ maintainerId: '', maintainerEmail: '', maintainerGiteeId: '' });
-const upStream = ref();
-const security = ref();
 const moreMessge = ref<MoreMessgeT[]>([]);
-const description = ref();
-const appData = ref<AppInfoT>({
-  name: '',
-  cover: '',
-  license: '',
-  version: '',
-  repository: '',
-  size: '',
-  source_code: '',
-  bin_code: '',
-  security: '',
-});
-const srcRepo = ref('');
+const appData = ref({});
 
 const isLoading = ref(true);
 
@@ -51,7 +33,7 @@ const queryPkg = () => {
     getDetails(tabValue.value, pkgId.value)
       .then((res) => {
         const data = res.data.list[0];
-        srcRepo.value = data.srcRepo;
+        appData.value = data;
         getDetailValue(data);
         isLoading.value = false;
       })
@@ -74,12 +56,10 @@ if (isString(route.query?.pkgId)) {
 onMounted(() => {
   queryPkg();
 });
-const summary = ref();
 const tagVer = ref();
 const getDetailValue = (data: any) => {
   try {
     basicInfo.value = [
-      { name: t('detail.description'), value: data?.description },
       { name: t('detail.osSupport'), value: data.osSupport },
       { name: t('detail.arch'), value: data.arch },
       { name: t('detail.epkgCategory'), value: data.epkgCategory || '其他' },
@@ -90,7 +70,6 @@ const getDetailValue = (data: any) => {
     basicInfo.value = [];
   }
   files.value = JSON.parse(data?.files);
-  summary.value = data.summary;
 
   const newData = [
     { name: 'Requires', value: JSON.parse(data?.requires || []) },
@@ -104,7 +83,6 @@ const getDetailValue = (data: any) => {
     }
   });
 
-  appData.value.size = data.epkgSize;
   tagVer.value = [data.osSupport, data.arch];
 
   maintainer.value = {
@@ -113,19 +91,9 @@ const getDetailValue = (data: any) => {
     maintainerGiteeId: data?.maintainerGiteeId || maintainerDefaults.gitee_id,
   };
 
-  upStream.value = data?.upStream;
-  security.value = data?.securityLevel;
-  description.value = data?.description;
   downloadData.value = mkit(data?.download || '', { isCopy: true, Tag: data.appVer });
   installation.value = mkit(data?.installation || '', { isCopy: true, Tag: data.appVer });
-  appData.value.name = data.name;
-  appData.value.source_code = data.srcDownloadUrl;
-  appData.value.bin_code = data.binDownloadUrl;
-  appData.value.cover = data?.iconUrl || defaultImg;
-  appData.value.repository = data.srcRepo;
-  appData.value.version = data.version;
-  appData.value.license = data.license;
-  appData.value.security = data.security;
+
   queryVer();
 };
 
@@ -138,6 +106,37 @@ const queryVer = () => {
     });
   }
 };
+
+provide('BASE_INFO', basicInfo);
+
+// 安装指引
+const installTabs = computed(() => {
+  return [
+    {
+      name: '在线安装',
+      type: 'online',
+      tag: appData.value.appVer,
+      installation: appData.value.installation,
+    },
+    {
+      name: '下载安装',
+      type: 'download',
+      size: appData.value.rpmSize,
+      children: [
+        {
+          href: appData.value.binDownloadUrl,
+          type: 'binary',
+          label: '源码包下载',
+        },
+        {
+          href: appData.value.srcDownloadUrl,
+          type: 'source_code',
+          label: '二进制包下载',
+        },
+      ],
+    },
+  ];
+});
 </script>
 
 <template>
@@ -147,21 +146,18 @@ const queryVer = () => {
       <!-- 锚点 -->
       <AppBreadcrumb id="epkg" :name="appData.name" />
       <!-- 头部信息 -->
-      <DetailHead :data="appData" :basicInfo="summary" :maintainer="maintainer" />
+      <DetailHead :data="appData" />
 
       <div class="detail-row">
         <div class="detail-row-main">
-          <AppSection :title="`> ${t('detail.information')}`">
-            <template #append>
-              <span v-if="appData.version" class="ver">{{ t('detail.number') }}:{{ appData.version }}</span>
-            </template>
-            <!-- 基本信息 -->
-            <DetailBasicInfo :options="basicInfo" />
+          <AppSection>
+            <div v-if="appData.version" class="version-title">
+              <h2>{{ appData.version }}</h2>
+              <OTag color="success">最新版本</OTag>
+            </div>
+
             <!-- 安装指引 -->
-            <DetailInstall :title="`> ${t('detail.installation')}`">
-              <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>
-            </DetailInstall>
+            <DetailInstall :title="`> ${t('detail.installation')}`" :options="installTabs" />
 
             <!-- 更多信息 -->
             <p class="sp">> {{ t('detail.more') }}</p>
diff --git a/src/views/field/TheFieldDetail.vue b/src/views/field/TheFieldDetail.vue
index be4db62..cb9c523 100644
--- a/src/views/field/TheFieldDetail.vue
+++ b/src/views/field/TheFieldDetail.vue
@@ -1,21 +1,21 @@
 <script lang="ts" setup>
 import { ref, onMounted, type PropType, computed, provide, reactive } from 'vue';
-import { OTab, OTabPane, OIcon, isString } from '@opensig/opendesign';
+import { OTab, OTabPane, OIcon, isString, OTag, OSelect, OOption } from '@opensig/opendesign';
 import { useRoute, useRouter } from 'vue-router';
 import { getDetail, getTags, getVer } from '@/api/api-domain';
 import { useMarkdown } from '@/composables/useMarkdown';
 import type { AppInfoT, MaintainerT, DetailItemT, MoreMessgeT, PkgTypeT } from '@/@types/app';
-import { maintainerDefaults } from '@/data/query';
+import { maintainerDefaults, TAGS_OPTIONS } from '@/data/query';
 import { tagList } from '@/data/detail/index';
 import { useI18n } from 'vue-i18n';
 import { useLocale } from '@/composables/useLocale';
 import { useViewStore } from '@/stores/common';
 import { getCode, getParamsRules, pkgSortMap } from '@/utils/common';
+import type { ImageTagsT } from '@/@types/detail';
 import useDetailPageAnalytics from '@/composables/useDetailPageAnalytics';
 
 import AppFeedback from '@/components/AppFeedback.vue';
 import DetailHead from '@/components/detail/DetailHeader.vue';
-import DetailBasicInfo from '@/components/detail/DetailBasicInfo.vue';
 import ImageTags from '@/views/image/ImageTags.vue';
 
 import DetailAside from '@/components/detail/DetailAside.vue';
@@ -41,10 +41,9 @@ const installation = ref('');
 const downloadData = ref('');
 
 const maintainer = ref<MaintainerT>({ maintainerId: '', maintainerEmail: '', maintainerGiteeId: '' });
-const upStream = ref();
-const security = ref();
+
 const moreMessge = ref<MoreMessgeT[]>([]);
-const description = ref();
+
 const appData = ref<AppInfoT>({
   name: '',
   cover: '',
@@ -52,8 +51,8 @@ const appData = ref<AppInfoT>({
   version: '',
   repository: '',
   size: '',
-  source_code: '',
-  bin_code: '',
+  srcDownloadUrl: '',
+  binDownloadUrl: '',
   security: '',
 });
 
@@ -126,11 +125,11 @@ const queryEntity = () => {
 //tab切换
 const tabValue = ref();
 
-const { reportAnalytics, vCopyInstallation, goFeedback, reportFeedback } = useDetailPageAnalytics(appData, basicInfo, activeName);
+const { reportAnalytics, goFeedback, reportFeedback } = useDetailPageAnalytics(appData, basicInfo, activeName);
 
 const onChange = (tab: string, noReport?: boolean) => {
   isTags.value = false;
-  imgName.value = tagList[0].lable;
+  imgName.value = tagList[0].value;
   if (tab === 'RPM') {
     tabValue.value = 'rpmpkg';
     typePkg.value = 'RPM';
@@ -149,7 +148,9 @@ const onChange = (tab: string, noReport?: boolean) => {
   } else if (tab === 'IMAGE') {
     tabValue.value = 'apppkg';
     typePkg.value = 'IMAGE';
-    queryVer();
+    if (tagsList.value.length === 0) {
+      queryTags();
+    }
     getDetailValue(imgData.value);
   } else if (tab === 'CONDA') {
     tabValue.value = 'condapkg';
@@ -191,20 +192,15 @@ onMounted(() => {
   queryEntity();
 });
 const imageUsage = ref();
-const latestOsSupport = ref();
 const tagVer = ref();
-const summary = ref();
+
 const getDetailValue = (data: any) => {
   pkgId.value = data.pkgId;
-  if (typePkg.value === 'RPM') {
-    basicInfo.value = [
-      { name: '详细描述', value: data?.description },
-      { name: '版本支持情况', value: data.osSupport },
-      { name: '架构', value: data.arch },
-      { name: '软件包分类', value: data.rpmCategory || '其他' },
-      { 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 },
-    ];
+
+  appData.value.size = data.rpmSize || 0;
+  appData.value.version = data.version;
+
+  if (typePkg.value === 'RPM' || typePkg.value === 'OEPKG' || typePkg.value === 'OEPKG') {
     const newData = [
       { name: 'Requires', value: JSON.parse(data?.requires || '') },
       { name: 'Provides', value: JSON.parse(data?.provides || '') },
@@ -217,58 +213,33 @@ const getDetailValue = (data: any) => {
         moreMessge.value.push(item);
       }
     });
+  }
 
-    appData.value.size = data.rpmSize || 0;
-    appData.value.version = data.version;
-    summary.value = data.summary;
+  downloadData.value = mkit(data?.download || '', { isCopy: true, Tag: data.appVer });
+  installation.value = mkit(data?.installation || '', { isCopy: true, Tag: data.appVer });
+
+  if (typePkg.value === 'RPM') {
+    basicInfo.value = [
+      { name: '版本支持情况', value: data.osSupport },
+      { name: '架构', value: data.arch },
+      { name: '软件包分类', value: data.rpmCategory || '其他' },
+      { 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 },
+    ];
   } else if (typePkg.value === 'EPKG') {
     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 },
     ];
-    const newData = [
-      { name: 'Requires', value: JSON.parse(data?.requires || '') },
-      { name: 'Provides', value: JSON.parse(data?.provides || '') },
-      { name: 'Conflicts', value: JSON.parse(data?.conflicts || '') },
-    ];
-    moreMessge.value = [];
-    // 过滤空数据
-    newData.forEach((item) => {
-      if (item.value.length > 0) {
-        moreMessge.value.push(item);
-      }
-    });
-
-    appData.value.size = data.epkgSize || 0;
-    appData.value.version = data.version;
-    summary.value = data.summary;
   } else if (typePkg.value === 'OEPKG') {
     basicInfo.value = [
-      { name: '详细描述', value: data?.description },
       { name: '版本支持情况', value: data.osSupport },
       { name: '架构', value: data.arch },
       { name: '软件包分类', value: data.category || '其他' },
     ];
-    const newData = [
-      { name: 'Requires', value: JSON.parse(data?.requires || '') },
-      { name: 'Provides', value: JSON.parse(data?.provides || '') },
-      { name: 'Conflicts', value: JSON.parse(data?.conflicts || '') },
-    ];
-    moreMessge.value = [];
-    // 过滤空数据
-    newData.forEach((item) => {
-      if (item.value.length > 0) {
-        moreMessge.value.push(item);
-      }
-    });
-
-    appData.value.size = data.rpmSize || 0;
-    appData.value.version = data.version;
-    summary.value = data.summary;
   } else if (typePkg.value === 'IMAGE') {
     basicInfo.value = [
       { name: '版本支持情况', value: data.osSupport },
@@ -276,10 +247,11 @@ const getDetailValue = (data: any) => {
       { name: '软件包分类', value: data.category || '' },
     ];
 
+    tagsValue.value = data.appVer;
+
     appData.value.size = data.appSize || 0;
-    latestOsSupport.value = data.latestOsSupport === 'true';
-    summary.value = data.description;
     appData.value.version = data.appVer;
+    imageUsage.value = mkit(data?.imageUsage || '', { isCopy: true, Tag: data.appVer });
 
     moreMessge.value = [];
   } else if (typePkg.value === 'CONDA') {
@@ -289,11 +261,10 @@ const getDetailValue = (data: any) => {
       { name: t('detail.epkgCategory'), value: data.category || '其他' },
     ];
 
-    latestOsSupport.value = data.latestOsSupport === 'true';
-    summary.value = data.description;
     appData.value.version = data.appVer;
-    appData.value.size = 0;
     moreMessge.value = [];
+
+    installation.value = mkit(data?.condaUsage || '', { isCopy: true, Tag: data.appVer });
   }
   tagVer.value = [data.osSupport, data.arch];
   maintainer.value = {
@@ -302,48 +273,35 @@ const getDetailValue = (data: any) => {
     maintainerGiteeId: data?.maintainerGiteeId || maintainerDefaults.gitee_id,
   };
 
-  upStream.value = data?.upStream;
-  security.value = data?.securityLevel;
-  description.value = data?.description;
-
-  downloadData.value = mkit(data?.download || '', { isCopy: true, Tag: data.appVer });
-  installation.value = mkit(data?.installation || '', { isCopy: true, Tag: data.appVer });
-
-  if (typePkg.value === 'CONDA') {
-    installation.value = mkit(data?.condaUsage || '', { isCopy: true, Tag: data.appVer });
-  }
-
-  imageUsage.value = mkit(data?.imageUsage || '', { isCopy: true, Tag: data.appVer });
   appData.value.name = data.name;
-  appData.value.source_code = data.srcDownloadUrl;
-  appData.value.bin_code = data.binDownloadUrl;
+  appData.value.srcDownloadUrl = data.srcDownloadUrl;
+  appData.value.binDownloadUrl = data.binDownloadUrl;
   appData.value.cover = data?.iconUrl || defaultImg;
   appData.value.repository = data.srcRepo;
   appData.value.license = data.license;
   appData.value.security = data.security;
+  appData.value.description = data.description;
 };
 
 // 获取img分类
-const imgName = ref(tagList[0].lable);
-const tagsValue = ref([]);
+const imgName = ref(tagList[0].value);
+const tagsList = ref([]);
+const tagsValue = ref('');
 const queryTags = () => {
   getTags(encodeURIComponent(appDataName.value)).then((res) => {
-    tagsValue.value = res.data.list;
+    tagsList.value = res.data.list;
   });
 };
 
 const getTabIcon = (tab: string) => {
-  if (tab === 'RPM') {
-    return IconRpm;
-  } else if (tab === 'EPKG') {
-    return IconEpkg;
-  } else if (tab === 'IMAGE') {
-    return IconImage;
-  } else if (tab === 'OEPKG') {
-    return IconOEpkg;
-  } else if (tab === 'CONDA') {
-    return IconCanda;
-  }
+  const icon: Record<string, any> = {
+    RPM: IconRpm,
+    EPKG: IconEpkg,
+    IMAGE: IconImage,
+    OEPKG: IconOEpkg,
+    CONDA: IconCanda,
+  };
+  return icon[tab];
 };
 
 //获取支持
@@ -357,16 +315,36 @@ const queryVer = () => {
 const repeatTags = (v: string) => {
   return v.toLocaleLowerCase() === 'image' ? t('software.apppkg') : v;
 };
+// 应用镜像切换版本
+const changeImageVerion = (v: string) => {
+  if (v === appData.value?.appVer) {
+    return;
+  }
+  const current = tagsList.value.find((item: ImageTagsT) => item.appVer === v);
+  const query = route.query;
+  router
+    .replace({
+      path: `/${locale.value}/field/detail`,
+      query: {
+        ...query,
+        type: 'IMAGE',
+        appPkgId: current?.pkgId || appPkgId,
+      },
+    })
+    .then(() => {
+      window.location.reload();
+    });
+};
 
 // tags切换功能
 const isTags = ref(false);
 const onChangeImage = (v: string) => {
-  isTags.value = v === 'Tags' ? true : false;
+  isTags.value = v === 'tags' ? true : false;
   reportAnalytics({
     type: 'switch_tab',
     target: v,
   });
-  if (tagsValue.value.length === 0) {
+  if (tagsList.value.length === 0) {
     queryTags();
   }
 };
@@ -392,6 +370,37 @@ const onCodeSuccess = () => {
     downloadTime,
   });
 };
+
+provide('BASE_INFO', basicInfo);
+
+// 安装指引
+const installTabs = computed(() => {
+  return [
+    {
+      name: '在线安装',
+      type: 'online',
+      tag: appData.value.appVer,
+      installation: installation.value,
+    },
+    {
+      name: '下载安装',
+      type: 'download',
+      size: appData.value.rpmSize,
+      children: [
+        {
+          href: appData.value.binDownloadUrl,
+          type: 'binary',
+          label: '源码包下载',
+        },
+        {
+          href: appData.value.srcDownloadUrl,
+          type: 'source_code',
+          label: '二进制包下载',
+        },
+      ],
+    },
+  ];
+});
 </script>
 <template>
   <ContentWrapper vertical-padding="24px">
@@ -412,52 +421,52 @@ const onCodeSuccess = () => {
     <OTabPane class="tab-pane" v-for="item in tabList" :key="item" :label="item">
       <template #nav><OIcon :icon="getTabIcon(item)" class="tabs-icon" /> {{ repeatTags(item) }}</template>
       <ContentWrapper>
-        <DetailHead @go-feedback="goFeedback" :data="appData" :basicInfo="summary" :maintainer="maintainer" />
+        <DetailHead @go-feedback="goFeedback" :data="appData" />
         <div class="detail-row">
           <div class="detail-row-main" :class="{ tags: isTags }">
-            <AppSection :title="`> ${t('detail.information')}`" v-if="item !== 'IMAGE'">
-              <template #append>
-                <span v-if="appData.version" class="ver"> {{ t('detail.number') }}: {{ appData.version }}</span>
-              </template>
-              <!-- 基本信息 -->
-              <DetailBasicInfo :options="basicInfo" />
+            <AppSection v-if="item !== 'IMAGE'">
+              <div v-if="appData.version" class="version-title">
+                <h2>{{ appData.version }}</h2>
+                <OTag v-if="appData.isLatestAppVer" color="success">最新版本</OTag>
+              </div>
 
               <!-- 安装指引 -->
-              <DetailInstall :title="`> ${t('detail.installation')}`">
-                <div v-if="installation" v-copy-installation v-dompurify-html="installation" v-copy-code="true" class="markdown-body installation"></div>
-              </DetailInstall>
+              <DetailInstall :title="`> ${t('detail.installation')}`" :options="installTabs" @report-analytics="reportAnalytics" />
 
               <!-- 更多信息 -->
-
               <template v-if="moreMessge.length !== 0">
                 <p class="sp">> {{ t('detail.more') }}</p>
                 <DetailMoreInfo :options="moreMessge" />
               </template>
             </AppSection>
             <AppSection v-else>
+              <div v-if="appData.version" class="version-title">
+                <h2>{{ appData.version }}</h2>
+                <OTag v-if="appData.isLatestAppVer" color="success">最新版本</OTag>
+                <div class="software-version">
+                  软件版本
+                  <OSelect v-model="tagsValue" @change="changeImageVerion">
+                    <OOption v-for="item in tagsList" :key="item.pkgId" :value="item.appVer" :label="item.appVer">{{ item.appVer }}</OOption>
+                  </OSelect>
+                </div>
+              </div>
+
               <!-- 应用镜像 -->
               <OTab variant="text" @change="onChangeImage" :line="false" class="domain-tabs tabs-switch" v-model="imgName">
-                <OTabPane class="tab-pane" v-for="item in tagList" :key="item.value" :label="item.lable">
+                <OTabPane class="tab-pane" v-for="item in tagList" :key="item.value" :value="item.value" :label="item.lable">
                   <template v-if="item.value === tagList[0].value">
-                    <!-- 基本信息 -->
-                    <AppSection :title="`> ${t('detail.information')}`">
-                      <template #append>
-                        <span v-if="appData.version" class="ver">{{ t('detail.number') }}: {{ appData.version }}</span>
-                      </template>
-
-                      <DetailBasicInfo :options="basicInfo" />
-                    </AppSection>
-
                     <!-- 使用方式 -->
-                    <DetailInstall :title="`> ${t('detail.usage')}`">
-                      <div v-if="downloadData" class="image-code">
-                        <p class="text">获取应用镜像</p>
-                        <OCodeCopy :code="getCode(downloadData)" @success="onCodeSuccess" />
-                      </div>
-                      <div v-if="imageUsage" v-dompurify-html="imageUsage" v-copy-code="true" class="markdown-body download"></div>
-                    </DetailInstall>
+
+                    <div v-if="downloadData" class="image-code">
+                      <p class="sp">> 获取应用镜像</p>
+                      <OCodeCopy :code="getCode(downloadData)" @success="onCodeSuccess" />
+                    </div>
+                    <template v-if="imageUsage">
+                      <p class="sp">> {{ t('detail.usage') }}</p>
+                      <div v-dompurify-html="imageUsage" v-copy-code="true" class="markdown-body download"></div>
+                    </template>
                   </template>
-                  <ImageTags v-else :data="tagsValue" :options="tagsOptions" />
+                  <ImageTags v-else :data="tagsList" :options="tagsOptions" />
                 </OTabPane>
               </OTab>
             </AppSection>
@@ -475,7 +484,7 @@ const onCodeSuccess = () => {
             />
           </div>
           <div v-if="!isTags" class="detail-row-side">
-            <DetailAside @report-analytics="reportAnalytics" :data="appData" :type="item" :downloadData="downloadData" :ver-data="verData" :tagVer="tagVer" />
+            <DetailAside :data="appData" :type="item" :downloadData="downloadData" :ver-data="verData" :maintainer="maintainer" :tagVer="tagVer" />
           </div>
         </div>
       </ContentWrapper>
diff --git a/src/views/image/TheImageDetail.vue b/src/views/image/TheImageDetail.vue
index 5e4c19b..1d0efee 100644
--- a/src/views/image/TheImageDetail.vue
+++ b/src/views/image/TheImageDetail.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { ref, onMounted, computed, provide } from 'vue';
-import { OTab, OTabPane, isString } from '@opensig/opendesign';
+import { OTab, OTabPane, isString, OTag, OSelect, OOption } from '@opensig/opendesign';
 import { useRoute } from 'vue-router';
 import { useMarkdown } from '@/composables/useMarkdown';
-import type { AppInfoT, MaintainerT, DetailItemT } from '@/@types/app';
-import type { ImageDetailT } from '@/@types/detail';
-import { getDetails, getTags, getVer } from '@/api/api-domain';
+import type { MaintainerT, DetailItemT } from '@/@types/app';
+import type { ImageDetailT, ImageTagsT } from '@/@types/detail';
+import { getDetails, getTags } from '@/api/api-domain';
 import { OPENEULER_CONTACT } from '@/data/config';
 import AppFeedback from '@/components/AppFeedback.vue';
 import DetailHead from '@/components/detail/DetailHeader.vue';
@@ -15,9 +15,8 @@ import ImageTags from './ImageTags.vue';
 import { tagList } from '@/data/detail/index';
 import { useViewStore } from '@/stores/common';
 import { useI18n } from 'vue-i18n';
-import { getCode } from '@/utils/common';
+import { getCode, windowOpen } from '@/utils/common';
 
-import defaultImg from '@/assets/default-logo.png';
 import { pkgIdInjection } from '@/data/injectionKeys';
 import useDetailPageAnalytics from '@/composables/useDetailPageAnalytics';
 
@@ -25,23 +24,12 @@ const tabValue = ref('apppkg');
 const { t } = useI18n();
 const route = useRoute();
 const { mkit } = useMarkdown();
-const activeName = ref(tagList[0].lable);
+const activeName = ref(tagList[0].value);
 const basicInfo = ref<DetailItemT[]>([]);
-const installation = ref('');
+
 const downloadData = ref('');
 const maintainer = ref<MaintainerT>({ maintainerId: '', maintainerEmail: '', maintainerGiteeId: '' });
-const appData = ref<AppInfoT>({
-  name: '',
-  license: '',
-  version: '',
-  cover: '',
-  repository: '',
-  size: '',
-  source_code: '',
-  bin_code: '',
-  security: '',
-});
-const srcRepo = ref('');
+const appData = ref({});
 
 const isLoading = ref(true);
 const { reportAnalytics, vCopyInstallation, reportFeedback, goFeedback } = useDetailPageAnalytics(appData, basicInfo, 'IMAGE');
@@ -52,7 +40,8 @@ const queryPkg = () => {
     getDetails(tabValue.value, pkgId.value)
       .then((res) => {
         const data = res.data.list[0];
-        srcRepo.value = data.srcRepo;
+        appData.value = data;
+        tagsValue.value = data.appVer;
         getDetailValue(data);
         isLoading.value = false;
       })
@@ -76,28 +65,16 @@ onMounted(() => {
 });
 
 const imageUsage = ref();
-const summary = ref();
-const latestSupportOs = ref();
 const tagVer = ref();
 const getDetailValue = (data: ImageDetailT) => {
   const {
     category = '',
-    description,
     maintainerId = 'openEuler community',
     maintainerEmail = OPENEULER_CONTACT,
     maintainerGiteeId = 'openeuler-ci-bot',
-    license,
-    appVer,
-    latestOsSupport = false,
     name,
-    srcDownloadUrl,
-    binDownloadUrl,
-    iconUrl,
-    srcRepo,
-    security,
     osSupport,
     arch,
-    appSize,
   } = data;
 
   tagVer.value = [osSupport, arch];
@@ -114,62 +91,46 @@ const getDetailValue = (data: ImageDetailT) => {
     maintainerGiteeId,
   };
 
-  summary.value = description;
-  latestSupportOs.value = latestOsSupport;
-
   downloadData.value = mkit(data?.download || '', { isCopy: true, Tag: data.appVer });
-  installation.value = mkit(data?.installation || '', { isCopy: true, Tag: data.appVer });
   imageUsage.value = mkit(data?.imageUsage || '', { isCopy: true, Tag: data.appVer });
 
-  appData.value = {
-    name: name,
-    source_code: srcDownloadUrl,
-    bin_code: binDownloadUrl,
-    cover: iconUrl || defaultImg,
-    repository: srcRepo,
-    size: appSize,
-    license: license,
-    version: appVer,
-    security: security,
-  };
-
   if (name) {
-    queryVer();
+    queryTags();
   }
 };
 
-const tagsValue = ref([]);
+const tagsList = ref<ImageTagsT[]>([]);
+const tagsValue = ref('');
 const isTagLoading = ref(false);
 const queryTags = () => {
   isTagLoading.value = true;
   getTags(encodeURIComponent(appData.value.name)).then((res) => {
-    tagsValue.value = res.data.list;
+    tagsList.value = res.data.list;
     isTagLoading.value = false;
   });
 };
+const changeImageVerion = (v: string) => {
+  if (v === appData.value?.appVer) {
+    return;
+  }
+  const current = tagsList.value.find((item: ImageTagsT) => item.appVer === v);
+  windowOpen(`/zh/image/detail?pkgId=${current.pkgId}`, '_self');
+};
 
 // tags切换功能
 const isTags = ref(false);
 const onChange = (v: string) => {
-  isTags.value = v === 'Tags' ? true : false;
+  isTags.value = v === 'tags' ? true : false;
   reportAnalytics({
     type: 'switch_tab',
     target: v,
   });
-  if (tagsValue.value.length === 0) {
+  if (tagsList.value.length === 0) {
     queryTags();
   }
 };
 
-//获取支持
-const verData = ref();
-const queryVer = () => {
-  if (appData.value.name) {
-    getVer(tabValue.value, encodeURIComponent(appData.value.name)).then((res) => {
-      verData.value = res.data.list;
-    });
-  }
-};
+provide('BASE_INFO', basicInfo);
 
 const tagsOptions = computed(() => {
   return {
@@ -202,36 +163,40 @@ const onImageTagsCmdCopy = (data: Record<string, any>) => {
       <!-- 锚点 -->
       <AppBreadcrumb id="image" :name="appData.name" />
 
-      <DetailHead @go-feedback="goFeedback" :data="appData" :basicInfo="summary" :maintainer="maintainer" />
+      <DetailHead @go-feedback="goFeedback" :data="appData" />
 
       <div class="detail-row">
         <div class="detail-row-main" :class="{ tags: isTags }">
           <AppSection>
+            <div v-if="appData.appVer" class="version-title">
+              <h2>{{ appData.appVer }}</h2>
+              <OTag v-if="appData.isLatestAppVer" color="success">最新版本</OTag>
+              <div class="software-version">
+                软件版本
+                <OSelect v-model="tagsValue" @change="changeImageVerion">
+                  <OOption v-for="item in tagsList" :key="item.pkgId" :value="item.appVer" :label="item.appVer">{{ item.appVer }}</OOption>
+                </OSelect>
+              </div>
+            </div>
+
             <OTab variant="text" @change="onChange" :line="false" class="domain-tabs tabs-switch" v-model="activeName">
-              <OTabPane class="tab-pane" v-for="item in tagList" :key="item.value" :label="item.lable">
+              <OTabPane class="tab-pane" v-for="item in tagList" :key="item.value" :label="item.lable" :value="item.value">
                 <template v-if="item.value === tagList[0].value">
-                  <!-- 基本信息 -->
-                  <AppSection :title="`> ${t('detail.information')}`">
-                    <template #append>
-                      <span v-if="appData.version" class="ver">{{ t('detail.number') }}:{{ appData.version }}</span>
-                    </template>
+                  <!-- 使用方式 -->
 
-                    <DetailBasicInfo :options="basicInfo" />
-                  </AppSection>
+                  <div v-if="downloadData" class="image-code">
+                    <p class="sp">> 获取应用镜像</p>
+                    <OCodeCopy :code="getCode(downloadData)" @success="onCodeSuccess" />
+                  </div>
 
-                  <!-- 使用方式 -->
-                  <DetailInstall :title="`> ${t('detail.usage')}`">
-                    <div v-if="downloadData" class="image-code">
-                      <p class="text">获取应用镜像</p>
-                      <OCodeCopy :code="getCode(downloadData)" @success="onCodeSuccess" />
-                    </div>
-                    <div v-if="imageUsage" v-copy-installation v-dompurify-html="imageUsage" v-copy-code="true" class="markdown-body download"></div>
-                  </DetailInstall>
+                  <p class="sp">> {{ t('detail.usage') }}</p>
+                  <div v-if="imageUsage" v-copy-installation v-dompurify-html="imageUsage" v-copy-code="true" class="markdown-body download"></div>
                 </template>
-                <ImageTags @copy="onImageTagsCmdCopy" v-else :data="tagsValue" :options="tagsOptions" :loading="isTagLoading" />
+                <ImageTags @copy="onImageTagsCmdCopy" v-else :data="tagsList" :options="tagsOptions" :loading="isTagLoading" />
               </OTabPane>
             </OTab>
           </AppSection>
+
           <AppFeedback
             v-if="!isTags"
             @report-analytics="reportFeedback"
@@ -239,11 +204,11 @@ const onImageTagsCmdCopy = (data: Record<string, any>) => {
             :version="appData.version"
             type="应用镜像"
             :maintainer="maintainer"
-            :srcRepo="srcRepo"
+            :srcRepo="appData.srcRepo"
           />
         </div>
         <div v-if="!isTags" class="detail-row-side">
-          <DetailAside @report-analytics="reportAnalytics" :data="appData" :type="'IMAGE'" :downloadData="downloadData" :ver-data="verData" :tagVer="tagVer" />
+          <DetailAside :data="appData" :type="'IMAGE'" :downloadData="downloadData" :maintainer="maintainer" :tagVer="tagVer" />
         </div>
       </div>
     </template>
@@ -252,4 +217,10 @@ const onImageTagsCmdCopy = (data: Record<string, any>) => {
 
 <style lang="scss" scoped>
 @import '@/assets/style/category/detail/index.scss';
+.tabs-switch {
+  margin-top: 24px;
+}
+.software-version {
+  color: var(--o-color-info2);
+}
 </style>
diff --git a/src/views/oepkg/TheOEpkgDetail.vue b/src/views/oepkg/TheOEpkgDetail.vue
index f7c9356..ca60e6e 100644
--- a/src/views/oepkg/TheOEpkgDetail.vue
+++ b/src/views/oepkg/TheOEpkgDetail.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import { ref, onMounted, provide } from 'vue';
-import { isString } from '@opensig/opendesign';
+import { ref, onMounted, provide, computed } from 'vue';
+import { isString, OTag } from '@opensig/opendesign';
 import { maintainerDefaults } from '@/data/query';
 import { useRoute } from 'vue-router';
-import { useMarkdown } from '@/composables/useMarkdown';
-import type { AppInfoT, MaintainerT, DetailItemT, MoreMessgeT } from '@/@types/app';
+import type { MaintainerT, DetailItemT, MoreMessgeT } from '@/@types/app';
 import { useI18n } from 'vue-i18n';
 import { getDetails, getVer } from '@/api/api-domain';
 import { useViewStore } from '@/stores/common';
@@ -12,36 +11,20 @@ import AppFeedback from '@/components/AppFeedback.vue';
 import DetailHead from '@/components/detail/DetailHeader.vue';
 import DetailAside from '@/components/detail/DetailAside.vue';
 
-import defaultImg from '@/assets/default-logo.png';
 import { pkgIdInjection } from '@/data/injectionKeys';
 import useDetailPageAnalytics from '@/composables/useDetailPageAnalytics';
 
 const route = useRoute();
-const { mkit } = useMarkdown();
 const { t } = useI18n();
 
-const basicInfo = ref<DetailItemT[]>([]);
-const installation = ref('');
 const tabValue = ref('oepkg');
-const downloadData = ref('');
+const basicInfo = ref<DetailItemT[]>([]);
+
 const maintainer = ref<MaintainerT>({ maintainerId: '', maintainerEmail: '', maintainerGiteeId: '' });
-const upStream = ref();
-const security = ref();
 const moreMessge = ref<MoreMessgeT[]>([]);
-const description = ref();
-const appData = ref<AppInfoT>({
-  name: '',
-  cover: '',
-  license: '',
-  version: '',
-  repository: '',
-  size: '',
-  source_code: '',
-  bin_code: '',
-  security: '',
-});
-const srcRepo = ref('');
-const { reportAnalytics, goFeedback, vCopyInstallation, reportFeedback } = useDetailPageAnalytics(appData, basicInfo, 'OEPKG');
+const appData = ref({});
+
+const { reportAnalytics, goFeedback, reportFeedback } = useDetailPageAnalytics(appData, basicInfo, 'OEPKG');
 
 const isLoading = ref(true);
 
@@ -51,7 +34,7 @@ const queryPkg = () => {
     getDetails(tabValue.value, pkgId.value)
       .then((res) => {
         const data = res.data.list[0];
-        srcRepo.value = data.srcRepo;
+        appData.value = data;
         getDetailValue(data);
         isLoading.value = false;
       })
@@ -74,27 +57,15 @@ if (isString(route.query?.pkgId)) {
 onMounted(() => {
   queryPkg();
 });
-const summary = ref();
-const license = ref();
+
 const tagVer = ref();
+
 const getDetailValue = (data: any) => {
-  try {
-    const basic = [
-      { name: '详细描述', value: data?.description },
-      { name: '版本支持情况', value: data.osSupport },
-      { name: '架构', value: data.arch },
-      { name: '软件包分类', value: data.category || '其他' },
-    ];
-    // 过滤空数据
-    basic.forEach((item) => {
-      if (item.value.length > 0) {
-        basicInfo.value.push(item);
-      }
-    });
-  } catch (res) {
-    basicInfo.value = [];
-  }
-  summary.value = data.summary;
+  basicInfo.value = [
+    { name: '版本支持情况', value: data.osSupport },
+    { name: '架构', value: data.arch },
+    { name: '软件包分类', value: data.category || '其他' },
+  ];
 
   const newData = [
     { name: 'Requires', value: JSON.parse(data?.requires || []) },
@@ -108,37 +79,56 @@ const getDetailValue = (data: any) => {
     }
   });
 
-  appData.value.size = data.rpmSize;
   tagVer.value = [data.osSupport, data.arch];
+  // 维护者信息
   maintainer.value = {
     maintainerId: data?.maintainerId || maintainerDefaults.name,
     maintainerEmail: data?.maintainerEmail || maintainerDefaults.email,
     maintainerGiteeId: data?.maintainerGiteeId || maintainerDefaults.gitee_id,
   };
-  appData.value.version = data?.version;
-  license.value = data.license;
-  upStream.value = data?.upStream;
-  security.value = data?.securityLevel;
-  description.value = data?.description;
-  downloadData.value = mkit(data?.download || '', { isCopy: true, Tag: data.appVer });
-  installation.value = mkit(data?.installation || '', { isCopy: true, Tag: data.appVer });
-  appData.value.name = data.name;
-  appData.value.source_code = data.srcDownloadUrl;
-  appData.value.bin_code = data.binDownloadUrl;
-  appData.value.cover = data?.iconUrl || defaultImg;
-  appData.value.repository = data.srcRepo;
-  appData.value.security = data.security;
-  queryVer();
+
+  if (data.name) {
+    queryVer(data.name);
+  }
 };
 
+provide('BASE_INFO', basicInfo);
+
+// 安装指引
+const installTabs = computed(() => {
+  return [
+    {
+      name: '在线安装',
+      type: 'online',
+      tag: appData.value.appVer,
+      installation: appData.value.installation,
+    },
+    {
+      name: '下载安装',
+      type: 'download',
+      size: appData.value.rpmSize,
+      children: [
+        {
+          href: appData.value.binDownloadUrl,
+          type: 'binary',
+          label: '源码包下载',
+        },
+        {
+          href: appData.value.srcDownloadUrl,
+          type: 'source_code',
+          label: '二进制包下载',
+        },
+      ],
+    },
+  ];
+});
+
 //获取支持
-const verData = ref();
-const queryVer = () => {
-  if (appData.value.name) {
-    getVer(tabValue.value, encodeURIComponent(appData.value.name)).then((res) => {
-      verData.value = res.data.list;
-    });
-  }
+const versionSupportData = ref();
+const queryVer = (name: string) => {
+  getVer(tabValue.value, encodeURIComponent(name)).then((res) => {
+    versionSupportData.value = res.data.list;
+  });
 };
 </script>
 
@@ -148,23 +138,19 @@ const queryVer = () => {
     <template v-else>
       <!-- 锚点 -->
       <AppBreadcrumb id="oepkg" :name="appData.name" />
-
-      <DetailHead @go-feedback="goFeedback" :data="appData" :basicInfo="summary" :maintainer="maintainer" />
+      <!-- 头部信息 -->
+      <DetailHead @go-feedback="goFeedback" :data="appData" />
 
       <div class="detail-row">
         <div class="detail-row-main">
-          <AppSection :title="`> ${t('detail.information')}`">
-            <template #append>
-              <span v-if="appData.version" class="ver">{{ t('detail.number') }}: {{ appData.version }}</span>
-            </template>
-            <!-- 基本信息 -->
-            <DetailBasicInfo :options="basicInfo" />
+          <AppSection :line="false">
+            <div v-if="appData.version" class="version-title">
+              <h2>{{ appData.version }}</h2>
+              <OTag v-if="appData.isLatestAppVer" color="success">最新版本</OTag>
+            </div>
 
             <!-- 安装指引 -->
-            <DetailInstall :title="`> ${t('detail.installation')}`">
-              <div v-if="downloadData" v-dompurify-html="downloadData" v-copy-code="true" class="markdown-body download"></div>
-              <div v-if="installation" v-copy-installation v-dompurify-html="installation" v-copy-code="true" class="markdown-body installation"></div>
-            </DetailInstall>
+            <DetailInstall :title="`> ${t('detail.installation')}`" :options="installTabs" @report-analytics="reportAnalytics" />
 
             <!-- 更多信息 -->
             <p class="sp">> {{ t('detail.more') }}</p>
@@ -182,7 +168,7 @@ const queryVer = () => {
           />
         </div>
         <div class="detail-row-side">
-          <DetailAside @report-analytics="reportAnalytics" :data="appData" :ver-data="verData" :license="license" :tagVer="tagVer" :type="'OEPKG'" />
+          <DetailAside :data="appData" :ver-data="versionSupportData" :tagVer="tagVer" :maintainer="maintainer" :type="'OEPKG'" />
         </div></div
     ></template>
   </ContentWrapper>
diff --git a/src/views/package/TheRpmDetail.vue b/src/views/package/TheRpmDetail.vue
index 41edad2..af35ee8 100644
--- a/src/views/package/TheRpmDetail.vue
+++ b/src/views/package/TheRpmDetail.vue
@@ -1,50 +1,32 @@
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
-import { isString } from '@opensig/opendesign';
+import { ref, onMounted, provide, computed } from 'vue';
+import { isString, OTag } from '@opensig/opendesign';
 import { maintainerDefaults } from '@/data/query';
 import { useRoute } from 'vue-router';
-import { useMarkdown } from '@/composables/useMarkdown';
-import type { AppInfoT, MaintainerT, DetailItemT, MoreMessgeT } from '@/@types/app';
+import type { MaintainerT, DetailItemT, MoreMessgeT } from '@/@types/app';
 import { getDetails, getVer } from '@/api/api-domain';
 import { useViewStore } from '@/stores/common';
 import { useI18n } from 'vue-i18n';
 import { PACKAGE_TYPE_MAPPING } from '@/data/query';
 
-import DetailBasicInfo from '@/components/detail/DetailBasicInfo.vue';
 import AppFeedback from '@/components/AppFeedback.vue';
-import DetailHead from '@/components/detail/DetailHeader.vue';
+import DetailHeader from '@/components/detail/DetailHeader.vue';
 import DetailAside from '@/components/detail/DetailAside.vue';
 
-import defaultImg from '@/assets/default-logo.png';
-import { provide } from 'vue';
 import { pkgIdInjection } from '@/data/injectionKeys';
 import useDetailPageAnalytics from '@/composables/useDetailPageAnalytics';
 
 const { t } = useI18n();
 const route = useRoute();
-const { mkit } = useMarkdown();
+
 const tabValue = ref(PACKAGE_TYPE_MAPPING['rpmpkg']);
 const basicInfo = ref<DetailItemT[]>([]);
-const installation = ref('');
-const downloadData = ref('');
+
 const maintainer = ref<MaintainerT>({ maintainerId: '', maintainerEmail: '', maintainerGiteeId: '' });
-const upStream = ref();
-const security = ref();
 const moreMessge = ref<MoreMessgeT[]>([]);
-const description = ref();
-const appData = ref<AppInfoT>({
-  name: '',
-  cover: '',
-  license: '',
-  version: '',
-  repository: '',
-  size: '',
-  source_code: '',
-  bin_code: '',
-  security: '',
-});
-const srcRepo = ref('');
-const { reportAnalytics, goFeedback, vCopyInstallation, reportFeedback } = useDetailPageAnalytics(appData, basicInfo, 'RPM');
+
+const appData = ref({});
+const { reportAnalytics, goFeedback, reportFeedback } = useDetailPageAnalytics(appData, basicInfo, 'RPM');
 
 const isLoading = ref(true);
 //详情请求
@@ -53,7 +35,7 @@ const queryPkg = () => {
     getDetails(tabValue.value, pkgId.value)
       .then((res) => {
         const data = res.data.list[0];
-        srcRepo.value = data.srcRepo;
+        appData.value = data;
         getDetailValue(data);
         isLoading.value = false;
       })
@@ -72,22 +54,15 @@ if (isString(route.query?.pkgId)) {
   pkgId.value = encodeURIComponent(route.query?.pkgId.toString());
 }
 
-onMounted(() => {
-  queryPkg();
-});
-
-const summary = ref();
 const tagVer = ref();
+
 const getDetailValue = (data: any) => {
   basicInfo.value = [
-    { name: t('detail.description'), value: data?.description },
     { name: t('detail.osSupport'), value: data.osSupport },
-    { name: t('detail.arch'), value: data.arch },
     { name: t('detail.epkgCategory'), value: data.epkgCategory || '其他' },
     { name: t('detail.repo'), value: JSON.parse(data?.repo).url, type: JSON.parse(data?.repo).type },
     { name: t('detail.repoType'), value: JSON.parse(data?.repoType).url, type: JSON.parse(data?.repoType).type },
   ];
-  summary.value = data.summary;
   const newData = [
     { name: 'Requires', value: JSON.parse(data?.requires || []) },
     { name: 'Provides', value: JSON.parse(data?.provides || []) },
@@ -100,38 +75,61 @@ const getDetailValue = (data: any) => {
     }
   });
 
-  appData.value.size = data.rpmSize;
   tagVer.value = [data.osSupport, data.arch];
+  // 维护者信息
   maintainer.value = {
     maintainerId: data?.maintainerId || maintainerDefaults.name,
     maintainerEmail: data?.maintainerEmail || maintainerDefaults.email,
     maintainerGiteeId: data?.maintainerGiteeId || maintainerDefaults.gitee_id,
   };
-  appData.value.version = data?.version;
-  appData.value.license = data.license;
-  upStream.value = data?.upStream;
-  security.value = data?.securityLevel;
-  description.value = data?.description;
-  downloadData.value = mkit(data?.download || '', { isCopy: true, Tag: data.appVer });
-  installation.value = mkit(data?.installation || '', { isCopy: true, Tag: data.appVer });
-  appData.value.name = data.name;
-  appData.value.source_code = data.srcDownloadUrl;
-  appData.value.bin_code = data.binDownloadUrl;
-  appData.value.cover = data?.iconUrl || defaultImg;
-  appData.value.repository = data.srcRepo;
-  appData.value.security = data.security;
+
   if (data.name) {
-    queryVer();
+    queryVer(data.name);
   }
 };
 
+provide('BASE_INFO', basicInfo);
+
+// 安装指引
+const installTabs = computed(() => {
+  return [
+    {
+      name: '在线安装',
+      type: 'online',
+      tag: appData.value.appVer,
+      installation: appData.value.installation,
+    },
+    {
+      name: '下载安装',
+      type: 'download',
+      size: appData.value.rpmSize,
+      children: [
+        {
+          href: appData.value.binDownloadUrl,
+          type: 'binary',
+          label: '源码包下载',
+        },
+        {
+          href: appData.value.srcDownloadUrl,
+          type: 'source_code',
+          label: '二进制包下载',
+        },
+      ],
+    },
+  ];
+});
+
 //获取支持
-const verData = ref();
-const queryVer = () => {
-  getVer(tabValue.value, encodeURIComponent(appData.value.name)).then((res) => {
-    verData.value = res.data.list;
+const versionSupportData = ref();
+const queryVer = (name: string) => {
+  getVer(tabValue.value, encodeURIComponent(name)).then((res) => {
+    versionSupportData.value = res.data.list;
   });
 };
+
+onMounted(() => {
+  queryPkg();
+});
 </script>
 
 <template>
@@ -140,23 +138,20 @@ const queryVer = () => {
     <template v-else>
       <!-- 锚点 -->
       <AppBreadcrumb id="rpm" :name="appData.name" />
+
       <!-- 头部信息 -->
-      <DetailHead @go-feedback="goFeedback" :data="appData" :basicInfo="summary" :maintainer="maintainer" />
+      <DetailHeader @go-feedback="goFeedback" :data="appData" />
 
       <div class="detail-row">
         <div class="detail-row-main">
-          <AppSection :title="`> ${t('detail.information')}`">
-            <template #append>
-              <span v-if="appData.version" class="ver">{{ t('detail.number') }}: {{ appData.version }}</span>
-            </template>
-            <!-- 基本信息 -->
-            <DetailBasicInfo :options="basicInfo" />
+          <AppSection :line="false">
+            <div v-if="appData.version" class="version-title">
+              <h2>{{ appData.version }}</h2>
+              <OTag v-if="appData.isLatestAppVer" color="success">最新版本</OTag>
+            </div>
 
             <!-- 安装指引 -->
-            <DetailInstall :title="`> ${t('detail.installation')}`">
-              <div v-if="downloadData" v-dompurify-html="downloadData" v-copy-code="true" class="markdown-body download"></div>
-              <div v-if="installation" v-copy-installation v-dompurify-html="installation" v-copy-code="true" class="markdown-body installation"></div>
-            </DetailInstall>
+            <DetailInstall :title="`> ${t('detail.installation')}`" :options="installTabs" @report-analytics="reportAnalytics" />
 
             <!-- 更多信息 -->
             <p class="sp">> {{ t('detail.more') }}</p>
@@ -170,11 +165,11 @@ const queryVer = () => {
             :version="appData.version"
             type="RPM"
             :maintainer="maintainer"
-            :srcRepo="srcRepo"
+            :srcRepo="appData.srcRepo"
           />
         </div>
         <div class="detail-row-side">
-          <DetailAside @report-analytics="reportAnalytics" :data="appData" :ver-data="verData" :tagVer="tagVer" :type="'RPM'" />
+          <DetailAside :data="appData" :ver-data="versionSupportData" :tagVer="tagVer" :maintainer="maintainer" :type="'RPM'" />
         </div>
       </div>
     </template>
diff --git a/src/views/upstream/UpstreamContent.vue b/src/views/upstream/UpstreamContent.vue
index 248ad73..b2474d5 100644
--- a/src/views/upstream/UpstreamContent.vue
+++ b/src/views/upstream/UpstreamContent.vue
@@ -6,7 +6,6 @@ import { useRoute } from 'vue-router';
 import { getParamsRules, checkOriginLink, windowOpen } from '@/utils/common';
 
 import { getUpstreamColumn, getUpstream } from '@/api/api-upstream';
-import { getSearchData } from '@/api/api-search';
 import { useViewStore } from '@/stores/common';
 import { COUNT_PAGESIZE, SORTPARAMS } from '@/data/query';
 
@@ -23,12 +22,12 @@ const { t } = useI18n();
 
 // 软件包-表头
 const columns = [
-  { label: t('upstream.name'), key: 'name', style: 'width:22%', type: 'name' },
-  { label: t('upstream.version'), key: 'upstreamVersion', style: 'width:12%', type: 'upstreamVersion' },
-  { label: t('upstream.compatibility'), key: 'openeulerVersion', style: 'width:12%', type: 'openeulerVersion' },
-  { label: t('upstream.eulerOsVersion'), key: 'eulerOsVersion', style: 'width:16%', type: 'eulerOsVersion' },
-  { label: t('upstream.type'), key: 'type', style: 'width:12%', type: 'type' },
-  { label: t('upstream.state'), key: 'status', style: 'width:8%', type: 'status' },
+  { label: t('upstream.name'), key: 'name', style: 'width:18%', type: 'name' },
+  { label: t('upstream.version'), key: 'upstreamVersion', style: 'width:15%', type: 'upstreamVersion' },
+  { label: t('upstream.compatibility'), key: 'openeulerVersion', style: 'width:15%', type: 'openeulerVersion' },
+  { label: t('upstream.eulerOsVersion'), key: 'eulerOsVersion', style: 'width:18%', type: 'eulerOsVersion' },
+  { label: t('upstream.type'), key: 'type', style: 'width:10%', type: 'type' },
+  { label: t('upstream.state'), key: 'status', style: 'width:6%', type: 'status' },
 ];
 
 //  ------------  main ------------
@@ -62,6 +61,7 @@ const processItem = (item): any[] => {
 
 const queryAppVersion = () => {
   const params = {
+    name: searchKey.value,
     eulerOsVersion: searchOs.value,
     type: searchType.value,
     status: searchStatus.value.join(),
@@ -69,7 +69,6 @@ const queryAppVersion = () => {
     nameOrder: nameOrder.value,
     pageSize: pageSize.value,
   };
-  console.log(params);
   // 过滤空参数
   const newData = getParamsRules(params);
 
@@ -95,42 +94,9 @@ const queryAppVersion = () => {
     });
 };
 
-const searchParams = computed(() => {
-  return {
-    keyword: searchKey.value,
-    pageNum: currentPage.value,
-    pageSize: pageSize.value,
-    dataType: 'appversion',
-    eulerOsVersion: searchOs.value,
-    type: searchType.value,
-    status: searchStatus.value.join(),
-    nameOrder: nameOrder.value,
-  };
-});
-
 // es搜索
 const isSearchError = ref(false);
 const isSearch = ref(false);
-const querySearch = () => {
-  // 过滤空参数
-  const newData = getParamsRules(searchParams.value);
-
-  getSearchData(newData)
-    .then((res) => {
-      appData.value = res.data.appversion;
-      total.value = res.data.total;
-      isLoading.value = false;
-      isSearch.value = true;
-      if (appData.value.length === 0) {
-        isSearchError.value = true;
-      }
-    })
-    .catch(() => {
-      isSearchError.value = true;
-      appData.value = [];
-      isLoading.value = false;
-    });
-};
 
 // ----------- 左侧菜单交互-------------
 // 获取筛选参数列表
@@ -211,11 +177,7 @@ const pageSearch = () => {
   isSearchError.value = false;
   if (tabName.value === 'appversion') {
     isLoading.value = true;
-    if (searchKey.value === '') {
-      queryAppVersion();
-    } else {
-      querySearch();
-    }
+    queryAppVersion();
   }
 };
 
@@ -282,7 +244,7 @@ const calculateSpanInfo = () => {
   appData.value.forEach((row, index) => {
     const len = row.applicationVersions.length;
     if (len > 1) {
-      const current = `${row.name}-${row.upstreamVersion}`;
+      const current = `${row.name.toLocaleLowerCase()}-${row.upstreamVersion}`;
       if (!recordRowKey.has(current)) {
         recordRowKey.set(current, index);
       }
@@ -295,7 +257,7 @@ const cellSpanFn = (rowIndex: number, colIdx: number, row: any, column: any) =>
   const key = column.key;
   const len = row.applicationVersions.length;
   if (spanRow.includes(key) && len > 1) {
-    const current = `${row.name}-${row.upstreamVersion}`;
+    const current = `${row.name.toLocaleLowerCase()}-${row.upstreamVersion}`;
     const startIndex = recordRowKey.get(current);
 
     if (startIndex === rowIndex) {
@@ -394,12 +356,11 @@ const joinUrl = (item) => {
               <template v-else>-</template>
             </template>
             <template #td_openeulerVersion="{ row }">
-              <OLink v-if="row.openeulerVersion" target="_blank" :href="joinUrl(row)" color="primary">{{ row.openeulerVersion }}</OLink>
+              <OLink v-if="row.pkgId" target="_blank" :href="joinUrl(row)" color="primary">{{ row.openeulerVersion }}</OLink>
+              <template v-else-if="row.openeulerVersion">{{ row.openeulerVersion }}</template>
               <template v-else>-</template>
             </template>
 
-            eulerOsVersion
-
             <template #td_status="{ row }">
               <OTag v-if="row.status" class="app-tag" :class="row.status.toLocaleLowerCase()">{{ row.status }} </OTag>
               <template v-else>-</template>
@@ -443,12 +404,8 @@ const joinUrl = (item) => {
 }
 
 :deep(.o-table) {
-  // 当一行有 5 个 td 时，为前两个 td 添加边框
-  // td:nth-child(-n + 2):nth-last-child(5),
-  // td:nth-child(-n + 2):nth-last-child(5) ~ td:nth-child(2) {
-  //   border-right: var(--table-border);
-  // }
   --table-row-hover: transparent;
+
   .thead-th {
     display: flex;
     align-items: center;
-- 
Gitee