From 89952efa79f5084c0a6fe2e70bb7fb8e49c36d3c Mon Sep 17 00:00:00 2001
From: luckyasme <807254037@qq.com>
Date: Mon, 7 Jul 2025 10:42:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96icon=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/style/theme/icon.scss          |  7 +++++
 .../src/assets/style/theme/index.scss         |  1 +
 .../src/components/FloatingButton.vue         |  2 +-
 .../src/components/FloatingButtonDocs.vue     |  4 +++
 .../src/components/GiteeViewSource.vue        | 10 +++----
 app/.vitepress/src/components/doc/DocType.vue |  4 +++
 .../src/components/doc/DocTypeMobile.vue      |  1 +
 .../src/components/doc/DocVersion.vue         |  4 +++
 .../src/components/doc/DocVersionMobile.vue   |  4 +++
 .../feedback/FloatingButtonHome.vue           |  3 ++
 .../src/components/header/HeaderCode.vue      |  5 +---
 .../src/components/header/HeaderLanguage.vue  |  5 +---
 .../src/components/header/HeaderLogin.vue     | 15 +++++-----
 .../src/components/header/HeaderNav.vue       |  3 +-
 .../src/components/header/HeaderNavMoblie.vue |  5 ++--
 .../src/components/header/HeaderTheme.vue     |  5 ++--
 .../src/components/header/NavContent.vue      | 18 ++++++------
 .../src/components/markdown/MarkdownImage.vue | 13 +++++----
 .../src/components/markdown/MarkdownTitle.vue | 24 +--------------
 app/.vitepress/src/layouts/LayoutDoc.vue      |  6 ++--
 app/.vitepress/src/views/home/TheHome.vue     |  5 +++-
 .../views/home/components/HomeSectionCard.vue | 29 +++++++++++++++----
 22 files changed, 97 insertions(+), 76 deletions(-)
 create mode 100644 app/.vitepress/src/assets/style/theme/icon.scss

diff --git a/app/.vitepress/src/assets/style/theme/icon.scss b/app/.vitepress/src/assets/style/theme/icon.scss
new file mode 100644
index 000000000..780b2b377
--- /dev/null
+++ b/app/.vitepress/src/assets/style/theme/icon.scss
@@ -0,0 +1,7 @@
+.o-icon {
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+}
+
diff --git a/app/.vitepress/src/assets/style/theme/index.scss b/app/.vitepress/src/assets/style/theme/index.scss
index 424bea698..8c939e640 100644
--- a/app/.vitepress/src/assets/style/theme/index.scss
+++ b/app/.vitepress/src/assets/style/theme/index.scss
@@ -15,3 +15,4 @@
 @use './textarea.scss' as *;
 @use './link.scss' as *;
 @use './breadcrumb.scss' as *;
+@use './icon.scss' as *;
diff --git a/app/.vitepress/src/components/FloatingButton.vue b/app/.vitepress/src/components/FloatingButton.vue
index bd9942d4b..942be7c77 100644
--- a/app/.vitepress/src/components/FloatingButton.vue
+++ b/app/.vitepress/src/components/FloatingButton.vue
@@ -93,7 +93,7 @@ onMounted(() => {
       :visible="dialogVisible"
       :phone-half-full="true"
       :style="{ '--dlg-head-padding': '16px 24px 0', '--dlg-body-padding': '24px 24px 16px', '--dlg-padding-body-top': '12px', '--dlg-radius': '4px 4px 0 0' }"
-      class="feedback-mb-dialog"
+      :scroller="false"
       @change="change"
     >
       <FeedbackSlider :show="isShow" @close="change" />
diff --git a/app/.vitepress/src/components/FloatingButtonDocs.vue b/app/.vitepress/src/components/FloatingButtonDocs.vue
index 61f6f1fed..0d835c01c 100644
--- a/app/.vitepress/src/components/FloatingButtonDocs.vue
+++ b/app/.vitepress/src/components/FloatingButtonDocs.vue
@@ -443,6 +443,9 @@ const submitArticleFeedback = () => {
 }
 </style>
 <style lang="scss" scoped>
+.o-icon {
+  font-size: 24px;
+}
 .feedback {
   position: fixed;
   bottom: 200px;
@@ -557,6 +560,7 @@ const submitArticleFeedback = () => {
       right: 12px;
       color: var(--o-color-info2);
       cursor: pointer;
+      font-size: 24px;
 
       @include h4;
       transition: all var(--o-duration-m1) var(--o-easing-standard-in);
diff --git a/app/.vitepress/src/components/GiteeViewSource.vue b/app/.vitepress/src/components/GiteeViewSource.vue
index a6f70fd6d..7db022e6d 100644
--- a/app/.vitepress/src/components/GiteeViewSource.vue
+++ b/app/.vitepress/src/components/GiteeViewSource.vue
@@ -81,7 +81,7 @@ watch(isPhone, () => {
   <div class="gitee-view-source">
     <a class="link" :href="giteeUrl" target="_blank" rel="noopener noreferrer">
       <span class="title">{{ t('docs.viewGiteeSource') }}</span>
-      <OIcon><IconOutLink /></OIcon>
+      <OIcon class="icon"><IconOutLink /></OIcon>
     </a>
   </div>
 </template>
@@ -99,8 +99,7 @@ watch(isPhone, () => {
 
     svg {
       color: var(--o-color-link1);
-      width: 16px;
-      height: 16px;
+      font-size: 16px;
       margin-left: 4px;
     }
   }
@@ -124,10 +123,9 @@ watch(isPhone, () => {
     align-items: center;
   }
 
-  svg {
-    width: 16px;
-    height: 16px;
+  .icon {
     margin-left: 8px;
+    font-size: 16px;
   }
 
   @include respond-to('phone') {
diff --git a/app/.vitepress/src/components/doc/DocType.vue b/app/.vitepress/src/components/doc/DocType.vue
index 4f70d2334..d950e9868 100644
--- a/app/.vitepress/src/components/doc/DocType.vue
+++ b/app/.vitepress/src/components/doc/DocType.vue
@@ -148,6 +148,10 @@ const reportDocTypeClick = () => {
   }
 }
 
+.icon {
+  font-size: 24px;
+}
+
 .doc-type {
   max-width: 240px;
   margin-right: 8px;
diff --git a/app/.vitepress/src/components/doc/DocTypeMobile.vue b/app/.vitepress/src/components/doc/DocTypeMobile.vue
index 62352e620..22b392fb6 100644
--- a/app/.vitepress/src/components/doc/DocTypeMobile.vue
+++ b/app/.vitepress/src/components/doc/DocTypeMobile.vue
@@ -159,6 +159,7 @@ const onClickItem = async (href: string) => {
 
 .icon {
   margin-left: 8px;
+  font-size: 24px;
 }
 
 .doc-type-small-title-mb {
diff --git a/app/.vitepress/src/components/doc/DocVersion.vue b/app/.vitepress/src/components/doc/DocVersion.vue
index bf6b7031b..ee578e34c 100644
--- a/app/.vitepress/src/components/doc/DocVersion.vue
+++ b/app/.vitepress/src/components/doc/DocVersion.vue
@@ -68,6 +68,10 @@ const changeVersion = async (item: { value: string; href?: string }) => {
 </template>
 
 <style lang="scss" scoped>
+.icon {
+  font-size: 24px;
+}
+
 .version-wrap {
   height: 100%;
   display: flex;
diff --git a/app/.vitepress/src/components/doc/DocVersionMobile.vue b/app/.vitepress/src/components/doc/DocVersionMobile.vue
index 916e0f6d3..e8c75719e 100644
--- a/app/.vitepress/src/components/doc/DocVersionMobile.vue
+++ b/app/.vitepress/src/components/doc/DocVersionMobile.vue
@@ -98,6 +98,10 @@ const resetVersion = () => {
 </template>
 
 <style lang="scss" scoped>
+.icon {
+  font-size: 24px;
+}
+
 .version-wrap {
   height: 100%;
   display: flex;
diff --git a/app/.vitepress/src/components/feedback/FloatingButtonHome.vue b/app/.vitepress/src/components/feedback/FloatingButtonHome.vue
index 0bbe74f83..93ffee005 100644
--- a/app/.vitepress/src/components/feedback/FloatingButtonHome.vue
+++ b/app/.vitepress/src/components/feedback/FloatingButtonHome.vue
@@ -127,6 +127,9 @@ const floatData = ref([
 </template>
 
 <style lang="scss" scoped>
+.o-icon {
+  font-size: 24px;
+}
 .nav-box {
   display: flex;
   flex-direction: column;
diff --git a/app/.vitepress/src/components/header/HeaderCode.vue b/app/.vitepress/src/components/header/HeaderCode.vue
index d2ed7e483..06378aa11 100644
--- a/app/.vitepress/src/components/header/HeaderCode.vue
+++ b/app/.vitepress/src/components/header/HeaderCode.vue
@@ -38,10 +38,7 @@ const itemChange = (data: any) => {
 
 <style lang="scss" scoped>
 .icon {
-  svg {
-    width: 16px;
-    height: 16px;
-  }
+  font-size: 16px;
   margin-left: var(--o-gap-1);
 }
 
diff --git a/app/.vitepress/src/components/header/HeaderLanguage.vue b/app/.vitepress/src/components/header/HeaderLanguage.vue
index 53ca4c1c1..b9b3a1a6e 100644
--- a/app/.vitepress/src/components/header/HeaderLanguage.vue
+++ b/app/.vitepress/src/components/header/HeaderLanguage.vue
@@ -104,10 +104,7 @@ const getLang = (lang: string) => {
 
 <style lang="scss" scoped>
 .icon {
-  svg {
-    width: 16px;
-    height: 16px;
-  }
+  font-size: 16px;
   margin-left: var(--o-gap-1);
 }
 
diff --git a/app/.vitepress/src/components/header/HeaderLogin.vue b/app/.vitepress/src/components/header/HeaderLogin.vue
index 2262f514f..e01d9307a 100644
--- a/app/.vitepress/src/components/header/HeaderLogin.vue
+++ b/app/.vitepress/src/components/header/HeaderLogin.vue
@@ -60,16 +60,16 @@ onMounted(async () => {
       </div>
       <template #dropdown>
         <ODropdownItem>
-          <div class="header-user-menu-item" @click="jumpToUserZone">{{ t('header.USER_CENTER') }}</div>
+          <div class="header-user-menu-item" :class="{ 'item-en': locale === 'en' }" @click="jumpToUserZone">{{ t('header.USER_CENTER') }}</div>
         </ODropdownItem>
         <ODropdownItem>
-          <div class="header-user-menu-item" @click="jumpToMsgCenter">
+          <div class="header-user-menu-item" :class="{ 'item-en': locale === 'en' }" @click="jumpToMsgCenter">
             <OBadge v-if="unreadMsgCount" :value="unreadMsgCount" color="danger">{{ t('header.MESSAGE_CENTER') }}</OBadge>
             <span v-else>{{ t('header.MESSAGE_CENTER') }}</span>
           </div>
         </ODropdownItem>
         <ODropdownItem>
-          <div class="header-user-menu-item" @click="logout">{{ t('header.LOGOUT') }}</div>
+          <div class="header-user-menu-item" :class="{ 'item-en': locale === 'en' }" @click="logout">{{ t('header.LOGOUT') }}</div>
         </ODropdownItem>
       </template>
     </ODropdown>
@@ -120,6 +120,10 @@ onMounted(async () => {
   text-align: center;
 }
 
+.header-user-menu-item.item-en {
+  min-width: 188px;
+}
+
 .user-dropdown {
   .o-dropdown-item {
     --dropdown-item-padding: 8px 0;
@@ -128,10 +132,7 @@ onMounted(async () => {
 
 .login-btn {
   color: var(--o-color-info1);
+  font-size: var(--o-icon_size-s);
   cursor: pointer;
-  svg {
-    width: var(--o-icon_size-s);
-    height: var(--o-icon_size-s);
-  }
 }
 </style>
diff --git a/app/.vitepress/src/components/header/HeaderNav.vue b/app/.vitepress/src/components/header/HeaderNav.vue
index f70173a5b..cfb4ab41e 100644
--- a/app/.vitepress/src/components/header/HeaderNav.vue
+++ b/app/.vitepress/src/components/header/HeaderNav.vue
@@ -442,8 +442,7 @@ const reportNavClick = (path: string[]) => {
       }
 
       .icon {
-        height: 16px;
-        width: 16px;
+        font-size: 16px;
         padding-left: 6px;
       }
     }
diff --git a/app/.vitepress/src/components/header/HeaderNavMoblie.vue b/app/.vitepress/src/components/header/HeaderNavMoblie.vue
index 8dced3fc8..604ae8560 100644
--- a/app/.vitepress/src/components/header/HeaderNavMoblie.vue
+++ b/app/.vitepress/src/components/header/HeaderNavMoblie.vue
@@ -319,8 +319,7 @@ const linkClick = () => {
         margin: var(--o-gap-4) 0;
 
         .icon {
-          height: 16px;
-          width: 16px;
+          font-size: 16px;
           margin-left: var(--o-gap-2);
         }
       }
@@ -337,7 +336,7 @@ const linkClick = () => {
       }
 
       .icon {
-        width: 16px;
+        font-size: 16px;
         margin-left: var(--o-gap-2);
       }
     }
diff --git a/app/.vitepress/src/components/header/HeaderTheme.vue b/app/.vitepress/src/components/header/HeaderTheme.vue
index b4644a02a..907619b7d 100644
--- a/app/.vitepress/src/components/header/HeaderTheme.vue
+++ b/app/.vitepress/src/components/header/HeaderTheme.vue
@@ -86,9 +86,8 @@ watch(
   align-items: center;
   cursor: pointer;
   color: var(--o-color-info1);
-  .icon svg {
-    width: var(--o-icon_size-s);
-    height: var(--o-icon_size-s);
+  .icon {
+    font-size: 20px;
   }
   @include respond-to('<=pad_v') {
     display: none;
diff --git a/app/.vitepress/src/components/header/NavContent.vue b/app/.vitepress/src/components/header/NavContent.vue
index e4eff7c13..9701b6593 100644
--- a/app/.vitepress/src/components/header/NavContent.vue
+++ b/app/.vitepress/src/components/header/NavContent.vue
@@ -55,8 +55,8 @@ const onClickNavLink = (item?: any) => {
         @link-click="linkClick"
       >
         {{ subItem.NAME }}
-        <OIcon v-if="subItem.ICON">
-          <component :is="subItem.ICON" class="icon" />
+        <OIcon v-if="subItem.ICON" class="icon">
+          <component :is="subItem.ICON" />
         </OIcon>
         <OTag
           v-if="subItem.TAG"
@@ -78,8 +78,8 @@ const onClickNavLink = (item?: any) => {
           @link-click="linkClick"
         >
           {{ system.NAME }}
-          <OIcon v-if="system.ICON">
-            <component :is="system.ICON" class="icon" />
+          <OIcon v-if="system.ICON" class="icon">
+            <component :is="system.ICON" />
           </OIcon>
         </NavLink>
       </div>
@@ -101,8 +101,8 @@ const onClickNavLink = (item?: any) => {
           @link-click="linkClick"
         >
           {{ subItem.NAME }}
-          <OIcon v-if="subItem.ICON">
-            <component :is="subItem.ICON" class="icon" />
+          <OIcon v-if="subItem.ICON" class="icon">
+            <component :is="subItem.ICON" />
           </OIcon>
           <OTag
             v-if="subItem.TAG"
@@ -133,8 +133,8 @@ const onClickNavLink = (item?: any) => {
           @link-click="linkClick"
         >
           {{ system.NAME }}
-          <OIcon v-if="system.ICON">
-            <component :is="system.ICON" class="icon" />
+          <OIcon v-if="system.ICON" class="icon">
+            <component :is="system.ICON" />
           </OIcon>
         </NavLink>
       </div>
@@ -153,7 +153,7 @@ const onClickNavLink = (item?: any) => {
 }
 
 .icon {
-  width: var(--o-icon_size-xs);
+  font-size: var(--o-icon_size-xs);
   margin-left: var(--o-gap-2);
 }
 
diff --git a/app/.vitepress/src/components/markdown/MarkdownImage.vue b/app/.vitepress/src/components/markdown/MarkdownImage.vue
index 801159fa3..72a978b7f 100644
--- a/app/.vitepress/src/components/markdown/MarkdownImage.vue
+++ b/app/.vitepress/src/components/markdown/MarkdownImage.vue
@@ -136,20 +136,23 @@ const onCloseZoom = () => {
 }
 
 .close-btn {
+  z-index: 2;
   position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 32px;
   height: 32px;
   background-color: rgba(var(--o-black), 0.4);
   border: 1px solid rgba(var(--o-black), 0.1);
   border-radius: var(--o-radius-xs);
-  z-index: 2;
-  top: 12px;
-  right: 12px;
   cursor: pointer;
+  
   .icon {
     color: var(--o-color-white);
-    margin-top: 3px;
-    margin-left: 3px;
+    font-size: 24px;
   }
 
   @include respond-to('phone') {
diff --git a/app/.vitepress/src/components/markdown/MarkdownTitle.vue b/app/.vitepress/src/components/markdown/MarkdownTitle.vue
index c3fbe265c..1e260d1fd 100644
--- a/app/.vitepress/src/components/markdown/MarkdownTitle.vue
+++ b/app/.vitepress/src/components/markdown/MarkdownTitle.vue
@@ -98,30 +98,8 @@ const onClickCopyLink = (e: MouseEvent) => {
     display: inline-flex;
   }
 
-  .o-icon {
+  .pin, .link {
     @include h2;
-
-    svg {
-      width: 24px;
-      height: 24px;
-
-      @include respond-to('laptop') {
-        width: 20px;
-        height: 20px;
-      }
-      @include respond-to('pad_h') {
-        width: 18px;
-        height: 18px;
-      }
-      @include respond-to('pad_v') {
-        width: 18px;
-        height: 18px;
-      }
-      @include respond-to('phone') {
-        width: 16px;
-        height: 16px;
-      }
-    }
   }
 
   .link {
diff --git a/app/.vitepress/src/layouts/LayoutDoc.vue b/app/.vitepress/src/layouts/LayoutDoc.vue
index b4b512806..5c209e830 100644
--- a/app/.vitepress/src/layouts/LayoutDoc.vue
+++ b/app/.vitepress/src/layouts/LayoutDoc.vue
@@ -412,7 +412,7 @@ onUnmounted(() => {
       <div v-if="isPhone" class="doc-sidebar-mb">
         <div class="sidebar-top">
           <div class="menu-opener-mb" :class="{ 'menu-opener-mb-active': !isSidebarHidden }">
-            <OIcon @click="switchMenu"><IconExpand /></OIcon>
+            <OIcon class="icon-expand" @click="switchMenu"><IconExpand /></OIcon>
             <DocTypeMobile :version="version" @refresh="onPageChange" />
           </div>
           <DocVersionMobile v-if="!viewStore.isCommonView" :version="version" />
@@ -622,8 +622,8 @@ onUnmounted(() => {
   align-items: center;
   color: var(--o-color-info1);
 
-  .o-icon svg {
-    width: var(--o-icon_size-m);
+  .icon-expand {
+    font-size: 24px;
   }
 }
 .menu-opener-mb-active {
diff --git a/app/.vitepress/src/views/home/TheHome.vue b/app/.vitepress/src/views/home/TheHome.vue
index 17ca60742..c68a93512 100644
--- a/app/.vitepress/src/views/home/TheHome.vue
+++ b/app/.vitepress/src/views/home/TheHome.vue
@@ -189,7 +189,7 @@ const getBannerCardBg = (item: HomeBannerItemT) => {
           class="search"
         >
           <template #prefix>
-            <OIcon><IconSearch /></OIcon>
+            <OIcon class="icon-search"><IconSearch /></OIcon>
           </template>
         </OInput>
 
@@ -279,6 +279,9 @@ const getBannerCardBg = (item: HomeBannerItemT) => {
 .banner-search {
   margin-top: 16px;
 }
+.icon-search {
+  font-size: 24px;
+}
 .search {
   width: 660px;
   --input-height: 40px;
diff --git a/app/.vitepress/src/views/home/components/HomeSectionCard.vue b/app/.vitepress/src/views/home/components/HomeSectionCard.vue
index ca09a78c1..75395d7b5 100644
--- a/app/.vitepress/src/views/home/components/HomeSectionCard.vue
+++ b/app/.vitepress/src/views/home/components/HomeSectionCard.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { OCard } from '@opensig/opendesign';
+import { onMounted, ref } from 'vue';
+import { OIcon, OCard } from '@opensig/opendesign';
+import { request } from '@/shared/axios';
 
-defineProps({
+const props = defineProps({
   title: {
     type: String,
     default: '',
@@ -23,6 +25,23 @@ defineProps({
     default: '',
   },
 });
+
+const svg = ref('');
+
+const getSvg = async () => {
+  try {
+    const res = await request.get(props.icon);
+    svg.value = res.data;
+  } catch {
+    // nothing
+  }
+};
+
+onMounted(() => {
+  if (props.icon) {
+    getSvg();
+  }
+});
 </script>
 
 <template>
@@ -37,7 +56,7 @@ defineProps({
     rel="noopener noreferrer"
   >
     <template #header>
-      <img v-if="icon" class="section-icon" :src="icon" />
+      <OIcon v-if="svg" class="section-icon" v-dompurify-html="svg" />
       <div class="section-title" :class="{ 'section-no-icon': !icon }">{{ title }}</div>
     </template>
 
@@ -70,10 +89,10 @@ defineProps({
 }
 
 .section-icon {
-  width: 40px;
+  font-size: 40px;
 
   @include respond-to('<=laptop') {
-    width: 32px;
+    font-size: 32px;
   }
 }
 
-- 
Gitee