diff --git a/package.json b/package.json
index afc51e66ad3c7d95ff8aadf0ec6f8a29a62b37be..69ca47728ac16e6e2959195b2c0fc1c8cd792853 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@opensig/open-analytics": "^0.0.9",
-    "@opensig/opendesign": "0.0.64",
+    "@opensig/opendesign": "0.0.78",
     "@vueuse/core": "10.11.1",
     "axios": "1.8.2",
     "clipboard": "2.0.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3c00576b0dc56f4869bc77e02a29dff8ecc32652..76034b3e6bd666801654a24028279f9704c6d1b5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^0.0.9
         version: 0.0.9
       '@opensig/opendesign':
-        specifier: 0.0.64
-        version: 0.0.64(vue@3.4.38(typescript@4.9.5))
+        specifier: 0.0.78
+        version: 0.0.78(vue@3.4.38(typescript@4.9.5))
       '@vueuse/core':
         specifier: 10.11.1
         version: 10.11.1(vue@3.4.38(typescript@4.9.5))
@@ -494,10 +494,10 @@ packages:
   '@opensig/open-analytics@0.0.9':
     resolution: {integrity: sha512-D+4VWxgBc1ABsQjWEjWfBfoBQ4PQbc1lNZeEYpQXkTJLLFcj6nSa+LwcYZFXtZdGz9dzOhhbwRwXv66WFw2qJw==}
 
-  '@opensig/opendesign@0.0.64':
-    resolution: {integrity: sha512-JA/YoFZVMlTyio+7yACHCs7097E0jlb/6oev1CfjRQd8eN5LU1NYnV/9j4dTALMAGXe2khqniOLNYXKS6Wrm+g==}
+  '@opensig/opendesign@0.0.78':
+    resolution: {integrity: sha512-aVn1S8gUIOpvgX/oiYH5IDgKWTfQhoEAg33tUv/l2TTSjUEoP3bZ+aLPX/g857AHsT2nynErj21iQVpbuhfqEQ==}
     peerDependencies:
-      vue: ^3.1.0
+      vue: ^3.3.0
 
   '@pkgr/core@0.1.1':
     resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
@@ -2381,7 +2381,7 @@ snapshots:
       uuid: 10.0.0
       web-vitals: 4.2.4
 
-  '@opensig/opendesign@0.0.64(vue@3.4.38(typescript@4.9.5))':
+  '@opensig/opendesign@0.0.78(vue@3.4.38(typescript@4.9.5))':
     dependencies:
       date-fns: 2.30.0
       vue: 3.4.38(typescript@4.9.5)
diff --git a/src/assets/style/global.scss b/src/assets/style/global.scss
index 152589ebf66a00b76c5317a942665dfcdd6e4036..8fd5fd07579f6e51daff49cda18c21c20e55ed9f 100644
--- a/src/assets/style/global.scss
+++ b/src/assets/style/global.scss
@@ -98,3 +98,37 @@ html {
     }
   }
 }
+
+// 排序箭头
+.sort-icon {
+  display: inline-block;
+  height: 12px;
+  width: 8px;
+  position: relative;
+  margin-left: 8px;
+  color: var(--o-color-control1);
+
+  &:after,
+  &:before {
+    content: '';
+    position: absolute;
+    border: 6px solid transparent;
+    border-width: 5px 4px;
+    left: 0;
+    color: #a0a2a8;
+  }
+
+  &:before {
+    border-bottom-color: currentColor;
+    top: -5px;
+  }
+
+  &:after {
+    border-top-color: currentColor;
+    top: 7px;
+  }
+  &.asc:before,
+  &.desc:after {
+    color: var(--o-color-info1);
+  }
+}
diff --git a/src/assets/style/markdown.scss b/src/assets/style/markdown.scss
index 7aba4f244d3ec4dc6d8585bbf3b90f6168c7a200..cabc2940e10e8d61c3feeb6f002f4d4cc539e6fd 100644
--- a/src/assets/style/markdown.scss
+++ b/src/assets/style/markdown.scss
@@ -49,6 +49,7 @@
     border-radius: var(--layout-pkg-radius);
     background-color: var(--o-color-control2-light);
     margin: 0 4px;
+    color: var(--o-color-info2);
   }
   p code:first-child {
     margin-left: 0;
diff --git a/src/assets/style/theme/index.scss b/src/assets/style/theme/index.scss
index dd6e7269fb267c850b93b442f8025ac3e5c28196..c49a02a5fe0af5b5a226c5f2a4ce32d40c1f8d26 100644
--- a/src/assets/style/theme/index.scss
+++ b/src/assets/style/theme/index.scss
@@ -12,3 +12,5 @@
 @use './tab.scss' as *;
 @use './rate.scss' as *;
 @use './result.scss' as *;
+@use './pagination.scss' as *;
+@use './textarea.scss' as *;
diff --git a/src/assets/style/theme/input.scss b/src/assets/style/theme/input.scss
index eadcc6d22b6e77ec9f15fd4cd3b6f2534a2113ee..f939b25922fcdfdf0886ee2ac0b7499894009b6c 100644
--- a/src/assets/style/theme/input.scss
+++ b/src/assets/style/theme/input.scss
@@ -1,3 +1,8 @@
-.o-input-clear {
-  font-size: 20px;
+.o-input {
+  .o_input-limit {
+    display: none;
+  }
+  .o-input-clear {
+    font-size: 20px;
+  }
 }
diff --git a/src/assets/style/theme/pagination.scss b/src/assets/style/theme/pagination.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2f1df66e89b1c8ffd7bbe185b14c65406dac8816
--- /dev/null
+++ b/src/assets/style/theme/pagination.scss
@@ -0,0 +1,13 @@
+.o-pagination {
+  --pagination-item-bg-color: var(--o-color-fill2);
+  --pagination-item-bg-color-current: var(--o-color-primary1);
+  --pagination-item-color-current: var(--o-color-white);
+  // 鼠标划过时颜色
+  --pagination-item-bg-color-hover: var(--o-color-primary2);
+  --pagination-item-color-hover: var(--o-color-white);
+
+  .o-pagination-item {
+    width: auto;
+    min-width: var(--pagination-item-size);
+  }
+}
diff --git a/src/assets/style/theme/tag.scss b/src/assets/style/theme/tag.scss
index 6903316a6aca63eef47ac9c2246558baaec90e24..170059b1385c6f6279e2608c29a1f714ebfe48f6 100644
--- a/src/assets/style/theme/tag.scss
+++ b/src/assets/style/theme/tag.scss
@@ -3,4 +3,7 @@
   &.o-tag-small {
     --tag-padding: 0 4px;
   }
+  &.o-tag-outline{
+    --tag-bd-color: var(--o-color-control1-light);  
+  }
 }
diff --git a/src/assets/style/theme/textarea.scss b/src/assets/style/theme/textarea.scss
new file mode 100644
index 0000000000000000000000000000000000000000..992ea88319de0cc6f97024b5d5de087e0577e151
--- /dev/null
+++ b/src/assets/style/theme/textarea.scss
@@ -0,0 +1,8 @@
+.o_textarea {
+  --limit-color: var(--o-color-info4);
+}
+.o-textarea {
+  .o_box-main {
+    --_box-radius: 4px;
+  }
+}
diff --git a/src/components/AppPagination.vue b/src/components/AppPagination.vue
index 68e2205bca48751c1c9527e1672d3b72cc6e98da..79053503392cac0da27b806b8dc09551397072a6 100644
--- a/src/components/AppPagination.vue
+++ b/src/components/AppPagination.vue
@@ -1,11 +1,8 @@
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
-import { useLocale } from '@/composables/useLocale';
+import { computed } from 'vue';
+import { OPagination } from '@opensig/opendesign';
 import { useRoute } from 'vue-router';
-import { ElPagination, ElConfigProvider } from 'element-plus';
 import { COUNT_PAGESIZE, COUNT_PAGESIZE_FIELD } from '@/data/query';
-import zhCn from 'element-plus/es/locale/lang/zh-cn';
-import English from 'element-plus/es/locale/lang/en';
 
 defineProps({
   current: {
@@ -24,35 +21,18 @@ defineProps({
 const route = useRoute();
 
 const emit = defineEmits(['size-change', 'current-change']);
-const { isZh } = useLocale();
 
-const handleSizeChange = (val: number) => {
-  emit('size-change', val);
+const onChange = (newValue: { page: number; pageSize: number }) => {
+  emit('size-change', newValue.pageSize);
+  emit('current-change', newValue.page);
 };
-const handleCurrentChange = (val: number) => {
-  emit('current-change', val);
-};
-
-const isFieldPage = ref(false);
 
-onMounted(() => {
-  isFieldPage.value = route.name === 'field' || route.query?.tab === 'all' || route.name === 'image';
-});
+// 如果是领域应用 分页数量为12条，否则为20条
+const pageSizes = computed(() => (route.name === 'field' || route.name === 'image' || route.query?.tab === 'all' ? COUNT_PAGESIZE_FIELD : COUNT_PAGESIZE));
 </script>
 
 <template>
-  <el-config-provider :locale="isZh ? zhCn : English">
-    <el-pagination
-      :current-page="current"
-      :page-size="pagesize"
-      background
-      layout="total ,sizes, prev, pager, next, jumper"
-      :total="total"
-      :page-sizes="isFieldPage ? COUNT_PAGESIZE_FIELD : COUNT_PAGESIZE"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-  </el-config-provider>
+  <OPagination :page="current" round="4px" variant="outline" :pageSize="pagesize" :total="total" show-total @change="onChange" :page-sizes="pageSizes" />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/components/GlobalFeedback.vue b/src/components/GlobalFeedback.vue
index 742570d05616c711a06715c7aa433643587a1b16..1945f6cad777d8da2ade5efd5a37072e84e80705 100644
--- a/src/components/GlobalFeedback.vue
+++ b/src/components/GlobalFeedback.vue
@@ -319,7 +319,7 @@ onUnmounted(() => window.sessionStorage.removeItem(STORAGE_KEY));
                         <OTag class="tag" :color="tagColor(item.issue_customize_state)" size="small">{{ item.issue_customize_state }}</OTag>
                       </span>
                     </p>
-                    <OLink class="out-link" :href="item.url" color="primary" hover-underline target="_blank" rel="noopener noreferrer">
+                    <OLink class="out-link" :href="item.url" color="primary" target="_blank" rel="noopener noreferrer">
                       查看详情
                       <OIcon><IconOutlink /></OIcon>
                     </OLink>
diff --git a/src/components/OCardItem.vue b/src/components/OCardItem.vue
index cea0ee5015b2a36c7a14bb3b966c6857bbac150b..bb511c67a4d2b3bd8eb4a7cb5adf6eb402ef7f11 100644
--- a/src/components/OCardItem.vue
+++ b/src/components/OCardItem.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { type PropType, ref, onMounted } from 'vue';
+import { type PropType, ref, onMounted, computed } from 'vue';
 import { OCard, OTag, OIcon } from '@opensig/opendesign';
 import type { AppItemT, PkgIdsT, PkgTypeT } from '@/@types/app';
-import { getTagsIcon, xssAllTag } from '@/utils/common';
+import { getTagsIcon, xssAllTag, pkgSortMap } from '@/utils/common';
 import { useLocale } from '@/composables/useLocale';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -28,6 +28,14 @@ const { locale } = useLocale();
 const { t } = useI18n();
 const { isDark } = useTheme();
 
+// 获取排序后的tags
+const getTagsOrder = computed(() => {
+  if (props.data?.tags) {
+    return props.data?.tags.slice().sort((a, b) => pkgSortMap[a] - pkgSortMap[b]);
+  }
+  return [];
+});
+
 // 名称转换
 const pkgNameConversion = (v: string) => {
   return v === 'IMAGE' ? 'app' : v.toLocaleLowerCase();
@@ -171,8 +179,8 @@ const onClickLink = (event: MouseEvent, isTag?: boolean) => {
       </div>
       <p v-if="data.os" class="pkg-os">{{ data.os }}</p>
       <div class="pkg-box">
-        <div v-if="data.tags && data.tags.length > 0" class="tags-box">
-          <a :href="jumpTo(data.pkgIds, tag)" v-for="tag in data.tags" :key="tag" @click="onClickLink($event, true)" target="_blank" rel="noopener">
+        <div v-if="getTagsOrder.length > 0" class="tags-box">
+          <a :href="jumpTo(data.pkgIds, tag)" v-for="tag in getTagsOrder" :key="tag" @click="onClickLink($event, true)" target="_blank" rel="noopener">
             <OTag style="--o-icon_size_control-xs: 0" variant="outline" :class="`${tag.toLocaleLowerCase()}-icon`">
               <template #icon>
                 <OIcon><component :is="getTagsIcon(tag)" /></OIcon>
diff --git a/src/components/OTableItemNew.vue b/src/components/OTableItemNew.vue
index 2432b030300cac8d5170fa01c9a76a9534329aff..6835aff0747484d6a0fa34b77a5cf9e4ca31384b 100644
--- a/src/components/OTableItemNew.vue
+++ b/src/components/OTableItemNew.vue
@@ -170,16 +170,16 @@ const onClickLink = (row: any) => {
 <template>
   <div class="table-main">
     <OTable :columns="columns" :data="data" :loading="loading" :small="true" border="row-frame" :class="type">
-      <template #head="{ columns }">
+      <template #header="{ columns }">
         <th v-for="item in columns" :key="item.type" :class="item.type">
           <template v-if="item.key === 'name' || item.key === 'rpmUpdateAt'">
             <div v-if="item.key === 'name'" @click="changeSortBy('name')" class="thead-th sort">
               {{ item.label }}
-              <span class="order" :class="SORTPARAMS[nameIndex]"></span>
+              <span class="sort-icon" :class="SORTPARAMS[nameIndex]"></span>
             </div>
             <div v-if="item.key === 'rpmUpdateAt'" @click="changeSortBy(item.key)" class="thead-th sort">
               {{ item.label }}
-              <span class="order" :class="SORTPARAMS[timeIndex]"></span>
+              <span class="sort-icon" :class="SORTPARAMS[timeIndex]"></span>
             </div>
           </template>
           <div v-else class="thead-th">{{ item.label }}</div>
@@ -249,11 +249,11 @@ const onClickLink = (row: any) => {
       <template #td_operation="{ row }">
         <!-- 应用镜像 -->
         <template v-if="type === 'apppkg'">
-          <OLink color="primary" hover-underline @click="openDownloadDialog(row)">{{ t('software.columns.download') }}</OLink>
+          <OLink color="primary" @click="openDownloadDialog(row)">{{ t('software.columns.download') }}</OLink>
         </template>
         <template v-else>
           <span>
-            <OLink v-if="row.binDownloadUrl" @click="onExternalDialog(row)" color="primary" hover-underline>{{ t('software.columns.download') }}</OLink>
+            <OLink v-if="row.binDownloadUrl" @click="onExternalDialog(row)" color="primary">{{ t('software.columns.download') }}</OLink>
           </span>
         </template>
       </template>
@@ -333,6 +333,15 @@ const onClickLink = (row: any) => {
 }
 
 :deep(.o-table) {
+  --table-edge-padding: 24px;
+  td:first-child,
+  th:first-child {
+    padding-left: var(--table-edge-padding);
+  }
+  td:last-child,
+  th:last-child {
+    padding-left: var(--table-edge-padding);
+  }
   .label {
     display: flex;
     align-items: center;
diff --git a/src/components/ResultNoApp.vue b/src/components/ResultNoApp.vue
index dbac1bd0fceeb871efc6394a5c4d7dbfaeb3173f..01dd07d8ef97cddf2ecf1fedcc5581dee2d0f17c 100644
--- a/src/components/ResultNoApp.vue
+++ b/src/components/ResultNoApp.vue
@@ -51,7 +51,7 @@ onMounted(() => {
   <Error404Result class="result-tips">
     <template #description>
       <p class="text">
-        {{ t('software.nofoundApp') }} <OLink hover-underline color="primary" @click="clickFeedback">{{ t('software.feedbackPkg.btn') }}</OLink>
+        {{ t('software.nofoundApp') }} <OLink color="primary" @click="clickFeedback">{{ t('software.feedbackPkg.btn') }}</OLink>
       </p>
     </template>
   </Error404Result>
diff --git a/src/components/detail/DetailAside.vue b/src/components/detail/DetailAside.vue
index e24923a9b2344a68adf49a9a0b84f55d95534190..c1724c424e6e6efe63cb8a323a73d3d67e09d848 100644
--- a/src/components/detail/DetailAside.vue
+++ b/src/components/detail/DetailAside.vue
@@ -262,6 +262,10 @@ const isSecurityIconShow = (v: string) => {
           <OTag v-if="row.os === tagVer[0] && row.arch === tagVer[1]" color="primary" :size="'small'">当前版本</OTag> <span v-else>查看</span>
         </a>
       </template>
+      <template #td_arch="{ row }">
+        <template v-if="row.arch">{{ row.arch }}</template>
+        <template v-else>-</template>
+      </template>
     </OTable>
     <p v-if="tableAllData.length >= tableLen" class="view-all">
       <OLink color="primary" :class="isToggle ? 'up' : 'down'" @click="showMore" size="small">
diff --git a/src/components/detail/DetailBasicInfo.vue b/src/components/detail/DetailBasicInfo.vue
index d5ac0eb40ea84966c68c00ee605f4cac9895058c..627592b6d3235359d8524a3d33382a0b7e1785a8 100644
--- a/src/components/detail/DetailBasicInfo.vue
+++ b/src/components/detail/DetailBasicInfo.vue
@@ -58,7 +58,10 @@ const showMore = () => {
           </div>
         </template>
         <template v-else-if="item.name === t('detail.source')"> EPOL </template>
-        <template v-else> {{ item.value }}</template>
+        <template v-else>
+          <template v-if="item.value">{{ item.value }}</template>
+          <template v-else>-</template>
+        </template>
       </div>
     </div>
   </div>
diff --git a/src/components/detail/DetailHeader.vue b/src/components/detail/DetailHeader.vue
index 9ec1bf22b3498c08058608b3c8ca14c01ceaf0dc..6decd5e2685abeecf260dd26cef5a69a6e49f6a7 100644
--- a/src/components/detail/DetailHeader.vue
+++ b/src/components/detail/DetailHeader.vue
@@ -74,15 +74,7 @@ const scrollToAnchor = () => {
       <div class="box">
         <p class="title">
           {{ data.name }}
-          <OLink
-            v-if="data.repository"
-            class="home-page"
-            color="primary"
-            hover-underline
-            @click="onExternalDialog(data.repository)"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <OLink v-if="data.repository" class="home-page" color="primary" @click="onExternalDialog(data.repository)" target="_blank" rel="noopener noreferrer">
             <OIcon><IconOutlink /></OIcon>
             主页
           </OLink>
@@ -151,7 +143,10 @@ const scrollToAnchor = () => {
       min-width: 60px;
       justify-content: flex-end;
       @include tip1;
-      :deep(.o-link-label) {
+    }
+    :deep(.o-link) {
+      .o-link-label,
+      .o-link-main {
         display: flex;
         align-items: center;
         svg {
@@ -163,7 +158,7 @@ const scrollToAnchor = () => {
     .scroll-box {
       position: absolute;
       bottom: 0px;
-      :deep(.o-link-label) {
+      :deep(.o-link-main) {
         display: flex;
         align-items: center;
       }
diff --git a/src/components/feedbackHistory/FeedbackHistoryItem.vue b/src/components/feedbackHistory/FeedbackHistoryItem.vue
index 1a2b80dc3bcd9fe4c50cd83104f6eaf64eaf6e4f..07a8ad31f45842deb6671bb19bcbf51f2c0b8279 100644
--- a/src/components/feedbackHistory/FeedbackHistoryItem.vue
+++ b/src/components/feedbackHistory/FeedbackHistoryItem.vue
@@ -46,7 +46,7 @@ const tagColor = (tag: string) => {
         <OIcon class="icon-user"><IconUser /></OIcon>
         <span>{{ feedback.user_login }}</span>
       </div>
-      <OLink @click="$emit('goToUrl', feedback.url)" class="out-link" color="primary" hover-underline target="_blank" rel="noopener noreferrer">
+      <OLink @click="$emit('goToUrl', feedback.url)" class="out-link" color="primary" target="_blank" rel="noopener noreferrer">
         查看详情
         <OIcon class="icon"><IconOutlink /></OIcon>
       </OLink>
diff --git a/src/components/filter/FilterHeader.vue b/src/components/filter/FilterHeader.vue
index 26e6506fa74f591df7057c77e59703e9b130bf4c..c00a0474f4bc2bafad2354c9f4c6fc901e1fc749 100644
--- a/src/components/filter/FilterHeader.vue
+++ b/src/components/filter/FilterHeader.vue
@@ -1,14 +1,10 @@
 <script lang="ts" setup>
 import { onMounted, ref, watch } from 'vue';
 import { OLink, OInput, useMessage, OIcon } from '@opensig/opendesign';
-import { useLocale } from '@/composables/useLocale';
 import { useI18n } from 'vue-i18n';
 import { useRouter, useRoute } from 'vue-router';
-import type { SorT } from '@/@types/type-sort';
+import { SORTPARAMS } from '@/data/query';
 import { useSearchStore } from '@/stores/search';
-
-import IconTimeOrder from '~icons/app/icon-time-order.svg';
-
 import IconSearch from '~icons/app/icon-search.svg';
 import { searchReport } from '@/shared/analytics';
 
@@ -42,7 +38,6 @@ const msg = useMessage();
 const router = useRouter();
 const route = useRoute();
 const { t } = useI18n();
-const { locale } = useLocale();
 
 const emits = defineEmits<{
   (e: 'sort', value: string[] | string): void;
@@ -104,52 +99,34 @@ const collectDownloadData = (keyword: string) => {
   });
 };
 
-const isTimeOrder = ref(false);
-const isNameOrder = ref(false);
-
-const changeSortBy = (type: string, name: string) => {
-  let v: SorT = '';
-  clearSvgFill();
-
-  const path = document.querySelector(`.filter-sort.${name} svg`);
-
-  if (type === 'timeOrder') {
-    isNameOrder.value = false;
-    activeIndex.value = 0;
-    isTimeOrder.value = !isTimeOrder.value;
-    v = isTimeOrder.value ? 'asc' : 'desc';
-    path?.children[isTimeOrder.value ? 1 : 0].setAttribute('fill', 'var(--o-color-info1)');
+// 排序事件
+const timeIndex = ref(0);
+const nameIndex = ref(0);
+const changeSortBy = (type: string) => {
+  const updateIndex = (index) => {
+    if (index.value >= 2) {
+      index.value = 0;
+    } else {
+      index.value++;
+    }
+  };
 
-    searchStore.changeNameOrderState(false);
-  } else if (type === 'nameOrder') {
-    isTimeOrder.value = false;
-    activeIndex.value = 1;
-    isNameOrder.value = !isNameOrder.value;
-    v = isNameOrder.value ? 'asc' : 'desc';
-    path?.children[isNameOrder.value ? 1 : 0].setAttribute('fill', 'var(--o-color-info1)');
-    // 修改状态
-    searchStore.changeNameOrderState(true);
+  if (type === 'name') {
+    updateIndex(nameIndex);
+    emits('sort', ['name', nameIndex.value]);
+  } else if (type === 'time') {
+    updateIndex(timeIndex);
+    emits('sort', ['time', timeIndex.value]);
+  } else {
+    return;
   }
-  emits('sort', [type, v]);
-};
-
-// 重置svg颜色
-const clearSvgFill = () => {
-  const path = document.querySelectorAll(`.filter-sort svg`);
-  path.forEach((item) => {
-    item?.children[0].removeAttribute('fill');
-    item?.children[1].removeAttribute('fill');
-  });
 };
 
 // 清除筛选数据
-// activeIndex -1清除全部 0最新排序、1首字母排序
-const activeIndex = ref(-1);
 const clearAll = () => {
-  isTimeOrder.value = false;
-  isNameOrder.value = false;
-  activeIndex.value = -1;
-  clearSvgFill();
+  timeIndex.value = 0;
+  nameIndex.value = 0;
+
   searchStore.changeNameOrderState(false);
   emits('sort', '');
 };
@@ -214,6 +191,7 @@ const getSearchplaceholder = (name: string) => {
         :placeholder="`${t('software.filterPleaseEnter[0]')}${getSearchplaceholder(title)}`"
         :style="{ width: '348px' }"
         size="large"
+        round="4px"
         :max-length="100"
         clearable
         @focus="showPanel = true"
@@ -228,22 +206,18 @@ const getSearchplaceholder = (name: string) => {
       </OInput>
     </div>
     <div v-if="type === 'all'" class="search-right">
-      <OLink @click="clearAll()" class="filter-sort" :class="{ active: activeIndex === -1 }">
+      <OLink @click="clearAll()" class="filter-sort">
         {{ t('software.sortTitle') }}
       </OLink>
       <template v-if="isTime">
-        <OLink @click="changeSortBy('timeOrder', 'time')" class="filter-sort time" :class="{ active: activeIndex === 0 }">
+        <OLink @click="changeSortBy('time')" class="filter-sort time">
           {{ t('software.timeOrder') }}
-          <template #suffix
-            ><OIcon><IconTimeOrder /></OIcon
-          ></template>
+          <span class="sort-icon" :class="SORTPARAMS[timeIndex]"></span>
         </OLink>
       </template>
-      <OLink @click="changeSortBy('nameOrder', 'name')" class="filter-sort name" :class="{ active: activeIndex === 1 }">
+      <OLink @click="changeSortBy('name')" class="filter-sort name">
         {{ t('software.nameOrder') }}
-        <template #suffix
-          ><OIcon><IconTimeOrder /></OIcon
-        ></template>
+        <span class="sort-icon" :class="SORTPARAMS[nameIndex]"></span>
       </OLink>
     </div>
   </div>
diff --git a/src/components/header/AppHeader.vue b/src/components/header/AppHeader.vue
index 0da7d0290e89eb68e392b30a13e6db6aeb3661af..583f4477c12ea1ac366709eef84ada2bb6609068 100644
--- a/src/components/header/AppHeader.vue
+++ b/src/components/header/AppHeader.vue
@@ -161,6 +161,12 @@ watch(
 
     .o-input {
       --input-height: var(--search-height);
+      --_box-bd: none;
+      --_box-bg-color: none;
+      --_box-bg-color-focus: none;
+      --_box-bd-color-focus: none;
+      --_box-bd-color-hover: none;
+      --_box-bg-color-hover: none;
     }
     .o-select {
       --select-height: var(--search-height);
diff --git a/src/components/search/SearchFilter.vue b/src/components/search/SearchFilter.vue
index df26dc57c9a500d2b0b601209631174762144de5..0667bc376563499d07d1f1e3a27875362560e84b 100644
--- a/src/components/search/SearchFilter.vue
+++ b/src/components/search/SearchFilter.vue
@@ -11,6 +11,7 @@ import useSearchHistory from '@/composables/useSearchHistory';
 import { useI18n } from 'vue-i18n';
 import { PACKAGE_TYPE_MAPPING, FLITERMENUOPTIONS } from '@/data/query';
 import { useRouteQuery } from '@/composables/useRouteQuery';
+import { pkgSortMap } from '@/utils/common';
 import SearchRecommend from '@/components/search/SearchRecommend.vue';
 
 import IconSearch from '~icons/app/icon-search.svg';
@@ -149,11 +150,12 @@ const queryDocsAll = () => {
   getSearchDataAll(params)
     .then((res) => {
       if (res.data.length) {
-        recommendList.value = res.data;
+        recommendList.value = res.data.sort((a, b) => pkgSortMap[a.key] - pkgSortMap[b.key]);
       } else {
         isNoFound.value = true;
         recommendList.value = [];
       }
+      isFocus.value = true;
       isLoading.value = false;
     })
     .catch(() => {
@@ -226,7 +228,6 @@ watch(
         <OInput
           v-model="searchInput"
           :placeholder="isHeader ? t('software.searchPlaceholder1') : t('software.searchPlaceholder')"
-          variant="solid"
           round="0"
           clearable
           class="search-input"
@@ -275,6 +276,14 @@ watch(
       height: var(--search-height);
     }
   }
+  :deep(.search-input) {
+    --_box-bd: none;
+    --_box-bg-color: none;
+    --_box-bg-color-focus: none;
+    --_box-bd-color-focus: none;
+    --_box-bd-color-hover: none;
+    --_box-bg-color-hover: none;
+  }
 
   &.header-show {
     max-width: 512px;
diff --git a/src/i18n/common/common-en.ts b/src/i18n/common/common-en.ts
index f73e5b36b5c1f31344c77ac7ef7287aca9c6ca47..d9eaedf8431bab51ae07b7c2312513fcb3961b2b 100644
--- a/src/i18n/common/common-en.ts
+++ b/src/i18n/common/common-en.ts
@@ -5,7 +5,8 @@ export default {
   LOGOUT: 'Logout',
   lang: 'English',
   FOOTER: {
-    ATOM_TEXT: 'openEuler is an open source project incubated and operated by the OpenAtom Foundation.',
+    ATOM_TEXT:
+      'openEuler, an open source OS incubated by the OpenAtom Foundation for digital infrastructure in server, cloud, edge, embedded scenarios, across Arm, x86, RISC-V, LoongArch, PowerPC, and SW-64 architectures.',
     ATOM_PC: '/atom-pc.png',
     ATOM_MO: '/atom-mo.png',
     MAIL: OPENEULER_CONTACT,
diff --git a/src/i18n/common/common-zh.ts b/src/i18n/common/common-zh.ts
index 3de30d1b8f6de2b5829fba9f401f1c31d3c3d6b0..ab7eced55e459d6df4b328231e3a574ca784b476 100644
--- a/src/i18n/common/common-zh.ts
+++ b/src/i18n/common/common-zh.ts
@@ -5,7 +5,8 @@ export default {
   LOGOUT: '退出登录',
   lang: '中文',
   FOOTER: {
-    ATOM_TEXT: 'openEuler 是由开放原子开源基金会（OpenAtom Foundation）孵化及运营的开源项目',
+    ATOM_TEXT:
+      'openEuler是由开放原子开源基金会孵化的全场景开源操作系统项目，面向数字基础设施四大核心场景（服务器、云计算、边缘计算、嵌入式），全面支持ARM、x86、RISC-V、loongArch、PowerPC、SW-64等多样性计算架构',
     ATOM_PC: '/atom-pc.png',
     ATOM_MO: '/atom-mo.png',
     MAIL: OPENEULER_CONTACT,
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 3254ce122c0e68a256844c645a344530926629a0..51d3100fc4dc10267cb2d911830161e686a4b6ff 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -133,3 +133,15 @@ export const getPkgName = (type: string) => {
   };
   return nameMap[type] || '';
 };
+
+// 定义期望顺序的映射对象
+export const pkgSortMap = {
+  RPM: 1,
+  rpmpkg: 1,
+  IMAGE: 2,
+  apppkg: 2,
+  OEPKG: 3,
+  oepkg: 3,
+  CONDA: 4,
+  conda: 4,
+};
diff --git a/src/views/collaboration/TheCollaboration.vue b/src/views/collaboration/TheCollaboration.vue
index f6aafc268f12252c998d70232e9a22c0c5412cf3..d0d8250d678414a44effb5c6aa9db8f092913db3 100644
--- a/src/views/collaboration/TheCollaboration.vue
+++ b/src/views/collaboration/TheCollaboration.vue
@@ -429,7 +429,7 @@ watch(
                     <template #default="{ row }">
                       <template v-if="subItem.key === 'versionStatus'">
                         <template v-if="subItem.key === 'versionStatus' && row.versionDetailUrl">
-                          <OLink color="primary" class="link-external" hover-underline @click="changeExternalDialog(row.versionDetailUrl)">
+                          <OLink color="primary" class="link-external" @click="changeExternalDialog(row.versionDetailUrl)">
                             <span class="text">{{ row.versionStatus }} </span> <OIcon><IconOutlink /></OIcon>
                           </OLink>
                         </template>
@@ -465,23 +465,23 @@ watch(
                 </template>
                 <template v-else>
                   <template v-if="item.key === 'repo'">
-                    <OLink color="primary" class="link-external" hover-underline @click="changeExternalDialog(SRCOPENEULER + row.repo)">
+                    <OLink color="primary" class="link-external" @click="changeExternalDialog(SRCOPENEULER + row.repo)">
                       <span class="text">{{ row[item.key] }} </span> <OIcon><IconOutlink /></OIcon>
                     </OLink>
                   </template>
                   <template v-else-if="item.key === 'prStatus' || item.key === 'cveStatus' || item.key === 'issueStatus'">
                     <template v-if="item.key === 'cveStatus' && row.cveDetailUrl">
-                      <OLink color="primary" class="link-external" hover-underline @click="changeExternalDialog(row.cveDetailUrl)">
+                      <OLink color="primary" class="link-external" @click="changeExternalDialog(row.cveDetailUrl)">
                         <span class="text">{{ row[item.key] }} </span> <OIcon><IconOutlink /></OIcon>
                       </OLink>
                     </template>
                     <template v-else-if="item.key === 'prStatus' && row.prDetailUrl">
-                      <OLink color="primary" class="link-external" hover-underline @click="changeExternalDialog(row.prDetailUrl)">
+                      <OLink color="primary" class="link-external" @click="changeExternalDialog(row.prDetailUrl)">
                         <span class="text">{{ row[item.key] }} </span> <OIcon><IconOutlink /></OIcon>
                       </OLink>
                     </template>
                     <template v-else-if="item.key === 'issueStatus' && row.issueDetailUrl">
-                      <OLink color="primary" class="link-external" hover-underline @click="changeExternalDialog(row.issueDetailUrl)">
+                      <OLink color="primary" class="link-external" @click="changeExternalDialog(row.issueDetailUrl)">
                         <span class="text">{{ row[item.key] }} </span> <OIcon><IconOutlink /></OIcon>
                       </OLink>
                     </template>
@@ -505,8 +505,8 @@ watch(
 
                   <template v-else-if="item.key === 'operation'">
                     <div class="operation-box">
-                      <OLink color="primary" hover-underline @click="changeFeedback(row.repo)">反馈</OLink>
-                      <OLink color="primary" hover-underline @click="changeFeedbackHistory(row.repo)">历史</OLink>
+                      <OLink color="primary" @click="changeFeedback(row.repo)">反馈</OLink>
+                      <OLink color="primary" @click="changeFeedbackHistory(row.repo)">历史</OLink>
                     </div>
                   </template>
                   <template v-else>
diff --git a/src/views/field/FieldContent.vue b/src/views/field/FieldContent.vue
index d0b9346b29088268c636f6a19695df1fdc7745d7..b11c684591375966e865d2fc8df9475b40000b33 100644
--- a/src/views/field/FieldContent.vue
+++ b/src/views/field/FieldContent.vue
@@ -10,7 +10,7 @@ import { useViewStore } from '@/stores/common';
 import { useSearchStore } from '@/stores/search';
 import { useI18n } from 'vue-i18n';
 import { getParamsRules } from '@/utils/common';
-import { PACKAGE_TYPE_MAPPING, COUNT_PAGESIZE_FIELD } from '@/data/query';
+import { PACKAGE_TYPE_MAPPING, COUNT_PAGESIZE_FIELD, SORTPARAMS } from '@/data/query';
 import { useDebounceFn } from '@vueuse/core';
 
 import FilterCheckbox from '@/components/filter/FilterCheckbox.vue';
@@ -174,8 +174,8 @@ const changeSortValue = (v: string[] | string) => {
   nameOrder.value = '';
   currentPage.value = 1;
   if (Array.isArray(v)) {
-    if (v[0] === 'nameOrder') {
-      nameOrder.value = v[1];
+    if (v[0] === 'name') {
+      nameOrder.value = SORTPARAMS[v[1]];
     }
   } else {
     isClear.value = false;
diff --git a/src/views/field/TheFieldDetail.vue b/src/views/field/TheFieldDetail.vue
index d6b7e4272553a2b1dea0337ed314bd91b8cb34ce..be4db629c2bd680dc6ffcd5f57f4e4100fa153c1 100644
--- a/src/views/field/TheFieldDetail.vue
+++ b/src/views/field/TheFieldDetail.vue
@@ -10,7 +10,7 @@ import { tagList } from '@/data/detail/index';
 import { useI18n } from 'vue-i18n';
 import { useLocale } from '@/composables/useLocale';
 import { useViewStore } from '@/stores/common';
-import { getCode, getParamsRules } from '@/utils/common';
+import { getCode, getParamsRules, pkgSortMap } from '@/utils/common';
 import useDetailPageAnalytics from '@/composables/useDetailPageAnalytics';
 
 import AppFeedback from '@/components/AppFeedback.vue';
@@ -96,7 +96,8 @@ const queryEntity = () => {
   getDetail(newData)
     .then((res) => {
       const data = res.data;
-      tabList.value = data.tags;
+      tabList.value = data.tags.sort((a, b) => pkgSortMap[a] - pkgSortMap[b]);
+
       for (const tag of data.tags) {
         srcRepos[tag] = data[tag].srcRepo;
       }
diff --git a/src/views/image/ImageContent.vue b/src/views/image/ImageContent.vue
index 49b5126aa0c995d67bf04ba786e82f9ddb07b5d7..1c45339d188b83b4c002d7985b1837ab600f8fd9 100644
--- a/src/views/image/ImageContent.vue
+++ b/src/views/image/ImageContent.vue
@@ -6,7 +6,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { getSearchAllFiled, getSearchAllColumn } from '@/api/api-domain';
 import { useI18n } from 'vue-i18n';
 import { useRouteQuery } from '@/composables/useRouteQuery';
-import { PACKAGE_TYPE_MAPPING, COUNT_PAGESIZE } from '@/data/query';
+import { PACKAGE_TYPE_MAPPING, COUNT_PAGESIZE, SORTPARAMS } from '@/data/query';
 import { getParamsRules } from '@/utils/common';
 import { useViewStore } from '@/stores/common';
 import { useSearchStore } from '@/stores/search';
@@ -166,6 +166,7 @@ const closeTag = (idx: string | number, type: string) => {
 };
 
 // 重置筛选结果
+const isClear = ref(false);
 const resetTag = () => {
   searchArch.value = [];
   searchOs.value = [];
@@ -173,6 +174,7 @@ const resetTag = () => {
   isSearchDocs.value = false;
   nameOrder.value = '';
   currentPage.value = 1;
+  isClear.value = true;
 
   const { os, arch } = route.query;
 
@@ -183,6 +185,19 @@ const resetTag = () => {
   }
 };
 
+// 更新时间、字母排序
+const changeSortValue = (v: string[] | string) => {
+  nameOrder.value = '';
+  currentPage.value = 1;
+  if (Array.isArray(v)) {
+    if (v[0] === 'name') {
+      nameOrder.value = SORTPARAMS[v[1]];
+    }
+  } else {
+    isClear.value = false;
+  }
+};
+
 const filterList = computed(() => {
   return [...searchArch.value, ...searchOs.value, ...searchCategory.value];
 });
@@ -291,7 +306,15 @@ const clearFilterSearch = () => {
     </div>
 
     <div class="pkg-main">
-      <FilterHeader title="IMAGE" :total="total" @search="changeFilterSearch" @clear="clearFilterSearch" />
+      <FilterHeader
+        title="IMAGE"
+        :total="total"
+        @sort="changeSortValue"
+        :is-clear="isClear"
+        type="all"
+        @search="changeFilterSearch"
+        @clear="clearFilterSearch"
+      />
       <div v-if="isSearchDocs || filterList.length > 0" class="search-result">
         <p v-if="!isPageSearch" class="text">
           <template v-if="isSearchDocs">
diff --git a/src/views/todo/ApprovalTable.vue b/src/views/todo/ApprovalTable.vue
index 19353a92a337202b834de8a0a1e4200a0d5a2300..facb0d29d2e11a6eb8cf01f2f788838708a5b047 100644
--- a/src/views/todo/ApprovalTable.vue
+++ b/src/views/todo/ApprovalTable.vue
@@ -126,7 +126,7 @@ const revoke = () => {
   <div class="table-main" :class="type">
     <el-table :data="data" border empty-text="暂无数据" style="width: 100%">
       <el-table-column
-        v-for="(item) in columns"
+        v-for="item in columns"
         :key="item.key"
         :fixed="item.fixed ?? false"
         :prop="item.key"
@@ -211,12 +211,12 @@ const revoke = () => {
           <template v-if="item.key === 'operation'">
             <template v-if="type === 'application'">
               <div class="oper-box">
-                <OLink color="primary" hover-underline @click="jumpTo(row.applyIdString)">申请详情</OLink>
-                <OLink color="danger" v-if="row.applyStatus === 'OPEN'" hover-underline @click="revokeApplication(row.applyIdString)">撤销申请</OLink>
+                <OLink color="primary" @click="jumpTo(row.applyIdString)">申请详情</OLink>
+                <OLink color="danger" v-if="row.applyStatus === 'OPEN'" @click="revokeApplication(row.applyIdString)">撤销申请</OLink>
               </div>
             </template>
             <template v-else>
-              <OLink color="primary" hover-underline @click="jumpTo(row.applyIdString)">{{ type === 'approval' ? '审批' : '审批详情' }}</OLink>
+              <OLink color="primary" @click="jumpTo(row.applyIdString)">{{ type === 'approval' ? '审批' : '审批详情' }}</OLink>
             </template>
           </template>
         </template>