From cc1e6d90ccac7756c4db15a45b864a90112fe379 Mon Sep 17 00:00:00 2001
From: ailoooong <ilong8@qq.com>
Date: Mon, 7 Apr 2025 17:26:47 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20opendesign=E7=BB=84=E4=BB=B6=E5=8D=87?=
 =?UTF-8?q?=E7=BA=A7=E8=87=B3v0.0.75?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                          |  3 +
 package.json                             |  2 +-
 pnpm-lock.yaml                           | 12 ++--
 src/assets/style/markdown.scss           |  2 +-
 src/assets/style/theme/index.scss        |  2 +
 src/assets/style/theme/input.scss        |  9 ++-
 src/assets/style/theme/pagination.scss   | 13 +++++
 src/assets/style/theme/textarea.scss     |  8 +++
 src/components/AppPagination.vue         | 36 +++---------
 src/components/FilterableTableHeader.vue |  2 +-
 src/components/OTableItemNew.vue         |  4 ++
 src/components/filter/FilterHeader.vue   | 37 ++++++-------
 src/components/header/AppHeader.vue      |  2 +-
 src/components/search/SearchFilter.vue   | 70 ++++++++++++++----------
 src/utils/common.ts                      | 23 ++------
 src/views/home/HomeHeader.vue            |  2 +-
 16 files changed, 121 insertions(+), 106 deletions(-)
 create mode 100644 src/assets/style/theme/pagination.scss
 create mode 100644 src/assets/style/theme/textarea.scss

diff --git a/components.d.ts b/components.d.ts
index c14c509..be93fe6 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -61,4 +61,7 @@ declare module 'vue' {
     StatusFeedback: typeof import('./src/components/collaboration/StatusFeedback.vue')['default']
     TableShowOverflowTips: typeof import('./src/components/collaboration/TableShowOverflowTips.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }
diff --git a/package.json b/package.json
index afc51e6..e6deabb 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.75",
     "@vueuse/core": "10.11.1",
     "axios": "1.8.2",
     "clipboard": "2.0.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3c00576..df80bf1 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.75
+        version: 0.0.75(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.75':
+    resolution: {integrity: sha512-/0pdeb/jnY4KA9Zlwo4EI2EWHlRCvDqrj06E1JzlbcKzhvz6fGT5LkwgLUmG7+VIeobpnS+JP1sK5a6M1EMzFQ==}
     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.75(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/markdown.scss b/src/assets/style/markdown.scss
index 7aba4f2..bbe5ba8 100644
--- a/src/assets/style/markdown.scss
+++ b/src/assets/style/markdown.scss
@@ -60,7 +60,7 @@
     background-color: var(--o-color-control2-light) !important;
     padding: 0;
     overflow: hidden;
-
+    color: var(--o-color-info1);
     code {
       display: block;
       overflow-x: auto;
diff --git a/src/assets/style/theme/index.scss b/src/assets/style/theme/index.scss
index dd6e726..c49a02a 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 eadcc6d..f939b25 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 0000000..2f1df66
--- /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/textarea.scss b/src/assets/style/theme/textarea.scss
new file mode 100644
index 0000000..992ea88
--- /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 7db948b..f7e4f26 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';
-});
+// 如果是领域应用 分页数量为12条，否则为20条
+const pageSizes = computed(() => (route.name === 'field' || 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/FilterableTableHeader.vue b/src/components/FilterableTableHeader.vue
index dd66d31..01fbb32 100644
--- a/src/components/FilterableTableHeader.vue
+++ b/src/components/FilterableTableHeader.vue
@@ -207,7 +207,7 @@ const reset = () => {
     >
       <div ref="popupRef" class="filterable-checkboxes-wrap" :style="searchable ? {} : { paddingTop: '0' }">
         <div v-if="searchable" class="input-wrap">
-          <OInput clearable @clear="onFilterInput()" @input="onFilterInput" class="filter-input" placeholder="搜索">
+          <OInput clearable @clear="() => onFilterInput('clear')" @input="() => onFilterInput('input')" class="filter-input" placeholder="搜索">
             <template #prefix>
               <OIcon class="search-icon">
                 <OIconSearch />
diff --git a/src/components/OTableItemNew.vue b/src/components/OTableItemNew.vue
index 6626d1f..d32ba3e 100644
--- a/src/components/OTableItemNew.vue
+++ b/src/components/OTableItemNew.vue
@@ -246,6 +246,10 @@ const onClickLink = (row: any) => {
         <template v-if="row.subPath">{{ row.subPath }}</template>
         <template v-else>-</template>
       </template>
+      <template #td_openeulerVersion="{ row }">
+        <template v-if="row.openeulerVersion">{{ row.openeulerVersion }}</template>
+        <template v-else>-</template>
+      </template>
       <template #td_operation="{ row }">
         <!-- 应用镜像 -->
         <template v-if="type === 'apppkg'">
diff --git a/src/components/filter/FilterHeader.vue b/src/components/filter/FilterHeader.vue
index 43a3902..3fc1eb0 100644
--- a/src/components/filter/FilterHeader.vue
+++ b/src/components/filter/FilterHeader.vue
@@ -55,17 +55,16 @@ const searchValue = ref(route.query.name as string | '');
 const showPanel = ref(false);
 
 // 搜索
-const changeSearchInput = (v: string) => {
-  changePkgInput(v);
-  searchValue.value = v;
+const changeSearchInput = () => {
+  changePkgInput();
   replaceWinUrl();
 };
 
-const changePkgInput = (v: string) => {
-  if (v === '') {
+const changePkgInput = () => {
+  if (searchValue.value === '') {
     return;
   }
-  if (v.length > 100) {
+  if (searchValue.value.length > 100) {
     return msg.danger({
       content: '文字长度不能超过100字符',
     });
@@ -94,16 +93,13 @@ const replaceWinUrl = () => {
 const collectDownloadData = (keyword: string) => {
   const { href } = window.location;
   const downloadTime = new Date();
-  searchReport(
-    'search',
-    {
-      origin: href,
-      keyword,
-      filter: 'all',
-      pkg: props.title,
-      downloadTime,
-    }
-  );
+  searchReport('search', {
+    origin: href,
+    keyword,
+    filter: 'all',
+    pkg: props.title,
+    downloadTime,
+  });
 };
 
 const isTimeOrder = ref(false);
@@ -194,14 +190,15 @@ watch(
         size="large"
         :max-length="100"
         clearable
+        round="4px"
         @focus="showPanel = true"
         v-model="searchValue"
-        @press-enter="(v) => changeSearchInput(v)"
-        @input="(v) => changePkgInput(v)"
-        @clear="clearSearchData"
+        @press-enter="() => changeSearchInput('press-enter')"
+        @input="() => changePkgInput('input')"
+        @clear="() => clearSearchData('clear')"
       >
         <template #prefix>
-          <OIcon> <IconSearch @click="changeSearchInput(searchValue)" /></OIcon>
+          <OIcon> <IconSearch @click="changeSearchInput()" /></OIcon>
         </template>
       </OInput>
     </div>
diff --git a/src/components/header/AppHeader.vue b/src/components/header/AppHeader.vue
index 0da7d02..2407110 100644
--- a/src/components/header/AppHeader.vue
+++ b/src/components/header/AppHeader.vue
@@ -182,7 +182,7 @@ watch(
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1010;
+  z-index: 99;
   background: var(--o-color-fill2);
   box-shadow: var(--o-shadow-1);
   min-width: 1440px;
diff --git a/src/components/search/SearchFilter.vue b/src/components/search/SearchFilter.vue
index 1c675b3..43f6a09 100644
--- a/src/components/search/SearchFilter.vue
+++ b/src/components/search/SearchFilter.vue
@@ -43,39 +43,36 @@ const tabName = ref('all');
 const fliterSelected = ref(defaultValue.value);
 
 const reportAnalytics = (data: Record<string, any>, event = 'click') => {
-  searchReport(
-    event,
-    {
-      module: isPageHome.value ? 'home_page' : 'search_page',
-      ...data,
-    }
-  );
+  searchReport(event, {
+    module: isPageHome.value ? 'home_page' : 'search_page',
+    ...data,
+  });
 };
 
-const changeFilter = (v: string) => {
-  fliterSelected.value = v;
+const changeFilter = () => {
+  fliterSelected.value = searchInput.value;
+
   if (searchInput.value !== '') {
     replaceWinUrl();
   }
 };
 
 // 搜索框事件
-const changeSearchInput = (v: string) => {
-  if (v === '') {
+const changeSearchInput = () => {
+  if (searchInput.value === '') {
     return;
   }
-  if (v.length > 100) {
+  if (searchInput.value.length > 100) {
     return msg.danger({
       content: '文字长度不能超过100字符',
     });
   }
   reportAnalytics({
     type: 'search',
-    content: v,
+    content: searchInput.value,
   });
   isLoading.value = false;
   isFocus.value = false;
-  searchInput.value = v;
   replaceWinUrl();
 };
 
@@ -101,6 +98,12 @@ const clearInput = () => {
   isLoading.value = false;
 };
 
+const clickInput = () => {
+  if (!isFocus.value) {
+    isFocus.value = true;
+  }
+};
+
 const searchRecommendRef = ref();
 const clickRecommend = (v: string) => {
   searchInput.value = v;
@@ -171,8 +174,8 @@ const debouncedFn = useDebounceFn(() => {
   queryDocsAll();
 }, 350);
 
-const trottleSearch = (v: string) => {
-  if (v.length > 100) {
+const trottleSearch = () => {
+  if (searchInput.value.length > 100) {
     return msg.danger({
       content: '文字长度不能超过100字符',
     });
@@ -242,16 +245,17 @@ watch(
         <OInput
           v-model="searchInput"
           :placeholder="isHeader ? t('software.searchPlaceholder1') : t('software.searchPlaceholder')"
-          variant="solid"
-          round="0"
+          round="4px"
           clearable
+          variant="text"
           class="search-input"
           :max-length="100"
-          @press-enter="(v) => changeSearchInput(v)"
-          @input="trottleSearch"
-          @clear="clearInput"
-          @focus="changeSearchFocus(true)"
-          @blur="changeSearchBlur"
+          @press-enter="(v) => changeSearchInput('press-enter')"
+          @input="() => trottleSearch('input')"
+          @clear="() => clearInput('clear')"
+          @click="() => clickInput()"
+          @focus="() => changeSearchFocus('focus')"
+          @blur="() => changeSearchBlur('blur')"
         >
           <template #prefix>
             <OIcon class="search-icon"><IconSearch /></OIcon>
@@ -402,11 +406,21 @@ watch(
     width: 680px;
   }
 }
-:deep(.o-input-wrap) {
-  background: none;
-  border: 0 none;
-  padding: 0 4px 0 12px;
-  align-items: center;
+:deep(.o-input) {
+  .o_box {
+    width: 100%;
+    height: 100%;
+    --box-bg-color: transparent;
+    --box-bg-color-hover: transparent;
+    --box-bd: 0 none;
+  }
+  .o-input-wrap {
+    width: 100%;
+    background: none;
+    border: 0 none;
+    padding: 0;
+    align-items: center;
+  }
 }
 
 .search-input {
diff --git a/src/utils/common.ts b/src/utils/common.ts
index a151975..3d80cc4 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -40,7 +40,7 @@ export const formatDateTime = (v: string, isTime?: boolean) => {
 
     return `${year}/${month}/${day}`;
   }
-  return '-'
+  return '-';
 };
 
 /**
@@ -138,13 +138,6 @@ export const getPkgName = (type: string) => {
   return name;
 };
 
-// 是否是搜索页面
-import { useRoute } from 'vue-router';
-const route = useRoute();
-export const isSearchPage = () => {
-  return route.name === 'search';
-};
-
 // 去重
 
 export const getTarget = (data: any, key: any) => {
@@ -157,10 +150,8 @@ export const getTarget = (data: any, key: any) => {
   return [...map.values()];
 };
 
-
-
 // 输入框文字校验
-export const inputValidator = new RegExp("^[\u4E00-\u9FA5A-Za-z0-9.()$\\-]+$");
+export const inputValidator = new RegExp('^[\u4E00-\u9FA5A-Za-z0-9.()$\\-]+$');
 
 /**
  * 对象转URL参数
@@ -176,19 +167,17 @@ export const generateQuery = (queries: Record<string, any>): string => {
     return arr;
   }, [] as string[]);
   if (parseResultArr?.length) {
-    return `?${parseResultArr.join("&")}`;
+    return `?${parseResultArr.join('&')}`;
   }
   return '';
-}
-
-
+};
 
 /**
  * 获取指定时区偏移量的年份
  * @param {number} offset - 时区偏移量（单位：小时）。例如，UTC+8 时区，传入 8。
  * @returns {number} - 指定时区偏移量对应的年份
  */
-export const getYearByOffset = ()=> {
+export const getYearByOffset = () => {
   // 获取当前时间的 UTC 时间
   const now = new Date();
   const utcTime = new Date(now.getTime() + now.getTimezoneOffset() * 60000);
@@ -197,4 +186,4 @@ export const getYearByOffset = ()=> {
   utcTime.setHours(utcTime.getHours() + 8);
 
   return utcTime.getFullYear();
-}
+};
diff --git a/src/views/home/HomeHeader.vue b/src/views/home/HomeHeader.vue
index 874f19e..fb9e896 100644
--- a/src/views/home/HomeHeader.vue
+++ b/src/views/home/HomeHeader.vue
@@ -67,7 +67,7 @@ onMounted(() => {
   align-items: center;
   height: 280px;
   position: relative;
-  z-index: 99;
+  z-index: 97;
   .home-banner {
     position: absolute;
     inset: 0;
-- 
Gitee