From e7d7e91bae02fb4ef83395651dbd77f26d79c263 Mon Sep 17 00:00:00 2001
From: wuming230 <1819845645@qq.com>
Date: Thu, 20 Mar 2025 21:01:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96FloatingButton?=
 =?UTF-8?q?=E5=92=8C=E5=9B=BE=E7=89=87=E7=BC=A9=E6=94=BE=E7=9A=84=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/category/docs/docsBugBg.png    | Bin 0 -> 2050 bytes
 .../.vitepress/src/assets/style/markdown.scss |   7 +-
 .../src/components/FloatingButton.vue         |  10 +-
 .../src/components/FloatingButtonDocs.vue     | 124 +++++++++++++++---
 .../.vitepress/src/components/ImgZoomDrag.vue |  66 +++++++++-
 docs/.vitepress/src/layouts/LayoutDoc.vue     |  38 ++++--
 6 files changed, 198 insertions(+), 47 deletions(-)
 create mode 100644 docs/.vitepress/src/assets/category/docs/docsBugBg.png

diff --git a/docs/.vitepress/src/assets/category/docs/docsBugBg.png b/docs/.vitepress/src/assets/category/docs/docsBugBg.png
new file mode 100644
index 0000000000000000000000000000000000000000..aed2c65de801ba5e59379c4555bb70eca30cf59d
GIT binary patch
literal 2050
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

literal 0
HcmV?d00001

diff --git a/docs/.vitepress/src/assets/style/markdown.scss b/docs/.vitepress/src/assets/style/markdown.scss
index 5830393..45eb21f 100644
--- a/docs/.vitepress/src/assets/style/markdown.scss
+++ b/docs/.vitepress/src/assets/style/markdown.scss
@@ -41,7 +41,7 @@
     --o-gap-7: 16px;
   }
 
-  @include respond-to('<=phone') {
+  @include respond-to('phone') {
     --o-gap-1: 4px;
     --o-gap-2: 8px;
     --o-gap-3: 12px;
@@ -158,6 +158,10 @@
     border-radius: var(--o-radius-xs);
     margin: 0 auto;
     background-color: transparent;
+
+    @include respond-to('phone') {
+      max-width: 100%;
+    }
   }
 
   code {
@@ -392,6 +396,7 @@
     }
 
     @include respond-to('phone') {
+      max-width: 100%;
       .img-expand-btn,
       .img-mask {
         display: none;
diff --git a/docs/.vitepress/src/components/FloatingButton.vue b/docs/.vitepress/src/components/FloatingButton.vue
index e4251ed..35fdce8 100644
--- a/docs/.vitepress/src/components/FloatingButton.vue
+++ b/docs/.vitepress/src/components/FloatingButton.vue
@@ -15,7 +15,6 @@ import { useLocale } from '@/composables/useLocale';
 
 const { gtPhone } = useScreen();
 const { t } = useLocale();
-const docBugVisible = ref(false);
 
 const isDark = computed(() => {
   return useAppearance().theme === 'dark' ? true : false;
@@ -45,9 +44,6 @@ onUnmounted(() => {
 
 <template>
   <div v-if="gtPhone" class="feedback-home">
-    <div class="bug-box" @click="docBugVisible = true">
-      <div class="bug-text">{{ t('feedback.bugCatching') }}</div>
-    </div>
     <div class="feedback-wrap">
       <FloatingButtonHome />
       <div v-if="showBackTop" class="nav-box2" :class="[isDark ? 'dark-nav' : '']" @click="scrollToTop(0)">
@@ -55,17 +51,15 @@ onUnmounted(() => {
       </div>
     </div>
   </div>
-  <!-- 文档捉虫弹窗 -->
-  <DocBugDialog v-model="docBugVisible" />
 </template>
 
 <style lang="scss" scoped>
 .feedback-home {
   position: fixed;
-  bottom: 257px;
+  bottom: 200px;
   right: 64px;
   z-index: 10;
-  height: 200px;
+  height: 164px;
 
   @include respond-to('<=laptop') {
     right: 24px;
diff --git a/docs/.vitepress/src/components/FloatingButtonDocs.vue b/docs/.vitepress/src/components/FloatingButtonDocs.vue
index f079daf..d61c72a 100644
--- a/docs/.vitepress/src/components/FloatingButtonDocs.vue
+++ b/docs/.vitepress/src/components/FloatingButtonDocs.vue
@@ -3,12 +3,14 @@ import { ref, computed, reactive, onMounted, onUnmounted, type CSSProperties, wa
 import { OIcon, OPopup, OLink, ODialog, ODivider, OButton, useMessage } from '@opensig/opendesign';
 import { ElSlider } from 'element-plus';
 
-import IconScore from '~icons/feedback/icon-score.svg';
+import IconSmile from '~icons/footer/icon-smile.svg';
 import IconClose from '~icons/app/icon-close.svg';
 
 import IconQuickIssue_light from '~icons/footer/icon-quickissue_light.svg';
 import IconQuickIssue_dark from '~icons/footer/icon-quickissue_dark.svg';
 import IconChat from '~icons/footer/icon-chat.svg';
+import IconHeadset from '~icons/feedback/icon-headset.svg';
+import IconFAQ from '~icons/feedback/icon-faq.svg';
 
 import IconTips from '~icons/app/icon-tips.svg';
 import IconTop from '~icons/app/icon-top.svg';
@@ -124,6 +126,8 @@ const updateItemScoreAfter = (index: number) => {
 };
 
 // -------------------- 论坛、issues --------------------
+const issuebackRef = ref();
+
 const floatData = reactive([
   {
     img: computed(() => {
@@ -140,12 +144,22 @@ const floatData = reactive([
       return isDark.value ? IconQuickIssue_dark : IconQuickIssue_light;
     }),
     id: 'quickIssue',
-    text: 'Quick',
+    text: 'QuickIssue',
     text2: 'Issue',
     textMb: 'QuickIssue',
     tip: t('feedback.quickIssueTip'),
     link: 'https://quickissue.openeuler.org/zh/issues/',
   },
+  {
+    img: computed(() => {
+      return IconFAQ;
+    }),
+    id: '',
+    text: 'FAQs',
+    textMb: 'FAQs',
+    tip: '',
+    link: `https://www.openeuler.org/${locale.value}/faq/`,
+  },
 ]);
 
 // -------------------- 移动端 --------------------
@@ -170,7 +184,7 @@ const marks_mb: Marks = Array(RATE_MAX_MB + 1)
 const floatDataMb = reactive([
   {
     img: computed(() => {
-      return IconScore;
+      return IconSmile;
     }),
     id: 'score',
     textMb: t('feedback.wantSubmitMark'),
@@ -258,10 +272,8 @@ const submitArticleFeedback = () => {
         <div class="score-container" id="score" @mouseenter="onMouseEnter" @mouseleave="useThrottleFn(onMouseLeave, 300)">
           <div ref="scoreRef" class="item-container">
             <OIcon class="icon-smile">
-              <component :is="IconScore"> </component>
+              <component :is="IconSmile"> </component>
             </OIcon>
-            <p class="text-name">{{ t('feedback.rating') }}</p>
-            <p v-if="currentScore > 0" class="current-score">{{ currentScore }}</p>
           </div>
 
           <OPopup
@@ -304,11 +316,27 @@ const submitArticleFeedback = () => {
           </OPopup>
         </div>
 
-        <OLink v-for="item in floatData" :key="item.link" :href="item.link" target="_blank" class="item-container">
-          <OIcon><component :is="item.img"></component> </OIcon>
-          <p class="text-name">{{ item.text }}</p>
-          <p v-if="item.text2" class="text-name">{{ item.text2 }}</p>
-        </OLink>
+        <ODivider :style="{ '--o-divider-gap': '12px' }" />
+
+        <div class="item-container">
+          <OIcon ref="issuebackRef" id="issueback">
+            <component :is="IconHeadset"> </component>
+          </OIcon>
+
+          <OPopup position="rb" :target="issuebackRef" wrapper="#issueback" body-class="popup-issueback" :offset="24" trigger="hover">
+            <OLink v-for="item in floatData" :key="item.link" :href="item.link" target="_blank" class="popup-item">
+              <OIcon><component :is="item.img"></component> </OIcon>
+
+              <div class="text">
+                <p class="text-name">
+                  {{ item.text }}
+                </p>
+
+                <p v-if="item.tip" class="text-tip">{{ item.tip }}</p>
+              </div>
+            </OLink>
+          </OPopup>
+        </div>
       </div>
 
       <div v-if="showBackTop" class="container back-top" :class="[isDark ? 'dark-box' : '']" @click="scrollToTop(0)">
@@ -408,10 +436,10 @@ const submitArticleFeedback = () => {
 <style lang="scss" scoped>
 .feedback {
   position: fixed;
-  bottom: 160px;
+  bottom: 200px;
   right: 64px;
   z-index: 10;
-  height: 200px;
+  height: 164px;
   width: 48px;
 
   @include respond-to('<=laptop') {
@@ -450,13 +478,6 @@ const submitArticleFeedback = () => {
   align-items: center;
   color: var(--o-color-info1);
   cursor: pointer;
-  .text-name {
-    transform: scale(0.8);
-    @include tip2;
-  }
-  .current-score {
-    color: #c7000b;
-  }
 
   @include hover {
     color: var(--o-color-primary1);
@@ -467,9 +488,11 @@ const submitArticleFeedback = () => {
   flex-direction: column;
   align-items: center;
 }
+.o-link {
+  padding: 0;
+}
 .o-link:not(:first-child) {
   margin-top: 12px;
-  padding: 0;
 }
 
 :deep(.o-popup) {
@@ -503,6 +526,65 @@ const submitArticleFeedback = () => {
       }
     }
   }
+
+  .popup-item {
+    .o-icon {
+      font-size: var(--o-font_size-h1);
+      color: var(--o-color-info1);
+    }
+  }
+
+  .popup-issueback {
+    padding: 24px;
+    background-color: var(--o-color-fill2);
+    border-radius: var(--o-radius-s);
+    box-shadow: var(--o-shadow-2);
+    --popup-min-width: 220px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    .popup-item {
+      width: 100%;
+      padding: 0;
+      .o-link-label {
+        align-items: flex-start;
+        flex-direction: row;
+        color: var(--o-color-info1);
+      }
+
+      @include hover {
+        & .text .text-name {
+          color: var(--o-color-primary1);
+        }
+      }
+
+      & ~ .popup-item {
+        margin-top: 12px;
+      }
+
+      .text {
+        margin-left: 8px;
+        text-align: left;
+        align-self: center;
+
+        .text-name {
+          font-size: var(--o-font_size-tip1);
+          line-height: 22px;
+          font-weight: 600;
+          a {
+            color: var(--o-color-info1);
+          }
+        }
+        .text-tip {
+          font-size: var(--o-font_size-tip2);
+          line-height: 18px;
+          color: var(--o-color-info2);
+          margin-top: 4px;
+        }
+      }
+    }
+  }
 }
 
 .railway {
diff --git a/docs/.vitepress/src/components/ImgZoomDrag.vue b/docs/.vitepress/src/components/ImgZoomDrag.vue
index f1b076e..b0dcdf8 100644
--- a/docs/.vitepress/src/components/ImgZoomDrag.vue
+++ b/docs/.vitepress/src/components/ImgZoomDrag.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue';
 
+import { useScreen } from '@/composables/useScreen';
+
+const { isPhone } = useScreen();
+
 const props = defineProps({
   // 图片url
   src: {
@@ -15,6 +19,7 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  // 缩放
   zoom: {
     type: Number,
     default: 1.1,
@@ -24,6 +29,7 @@ const props = defineProps({
 const minScale = 1;
 const maxScale = 3;
 const wheelRatio = 0.1;
+
 const scale = ref<number>(1.1);
 scale.value = props.zoom;
 
@@ -33,6 +39,8 @@ const top = ref<number>(0);
 const zoomRef = ref();
 const targetRef = ref();
 
+const cursor = ref<string>('default'); // 光标样式
+
 // 状态值
 const state = reactive({
   lastLeft: 0, // 上次的left
@@ -41,13 +49,16 @@ const state = reactive({
   startX: 0, // 长按开始坐标x
   startY: 0, // 长按开始坐标y
   isDown: false, // 鼠标是否长按中
-  moveX: 0, // 长按移动坐标x
-  moveY: 0, // 长按移动坐标y
 
   startDiffLeft: 0, // 鼠标按下的间距
   startDiffTop: 0,
   startDiffRight: 0,
   startDiffBottom: 0,
+
+  limitLeft: false, // 极限状态
+  limitTop: false,
+  limitRight: false,
+  limitBottom: false,
 });
 
 const zoomBoxStyle = ref({
@@ -115,6 +126,7 @@ const changeZoom = async (val: number) => {
   });
 };
 const onWheel = (el: WheelEvent) => {
+  cursor.value = 'grab';
   // 放大
   if (el.deltaY < 0) {
     if (scale.value <= maxScale) {
@@ -129,6 +141,7 @@ const onWheel = (el: WheelEvent) => {
 };
 
 const onMouseStart = async (e: MouseEvent) => {
+  cursor.value = 'grabbing';
   if (e.button === 0) {
     state.startX = e.clientX;
     state.startY = e.clientY;
@@ -144,6 +157,12 @@ const onMouseStart = async (e: MouseEvent) => {
     state.startDiffTop = tTop - zTop;
     state.startDiffRight = widthDiff - Math.abs(state.startDiffLeft);
     state.startDiffBottom = heightDiff - Math.abs(state.startDiffTop);
+
+    // 回弹
+    state.limitRight = false;
+    state.limitBottom = false;
+    state.limitLeft = false;
+    state.limitTop = false;
   }
 };
 const onMousemove = async (e: MouseEvent) => {
@@ -165,22 +184,34 @@ const onMousemove = async (e: MouseEvent) => {
 
     // 左移到侧边
     if (moveX < 0 && diffRight <= 0) {
-      moveX = -state.startDiffRight;
+      let x = Math.abs(e.clientX - state.startX) - Math.abs(state.startDiffRight);
+      x = x > 30 ? 30 : x;
+      moveX = -state.startDiffRight - x;
+      state.limitRight = true;
     }
 
     // 上移到侧边
     if (moveY < 0 && diffBottom <= 0) {
-      moveY = -state.startDiffBottom;
+      let x = Math.abs(e.clientY - state.startY) - Math.abs(state.startDiffBottom);
+      x = x > 30 ? 30 : x;
+      moveY = -state.startDiffBottom - x;
+      state.limitBottom = true;
     }
 
     // 右移到侧边
     if (moveX > 0 && diffLeft >= 0) {
-      moveX = -state.startDiffLeft;
+      let x = Math.abs(e.clientX - state.startX) - Math.abs(state.startDiffLeft);
+      x = x > 30 ? 30 : x;
+      moveX = -state.startDiffLeft + x;
+      state.limitLeft = true;
     }
 
     // 下移到侧边
     if (moveY > 0 && diffTop >= 0) {
-      moveY = -state.startDiffTop;
+      let x = Math.abs(e.clientY - state.startY) - Math.abs(state.startDiffTop);
+      x = x > 30 ? 30 : x;
+      moveY = -state.startDiffTop + x;
+      state.limitTop = true;
     }
 
     top.value = state.lastTop + moveY;
@@ -188,12 +219,33 @@ const onMousemove = async (e: MouseEvent) => {
   }
 };
 const onMouseEnd = () => {
+  cursor.value = 'grab';
   state.isDown = false;
+
+  if (state.limitRight) {
+    left.value = left.value + 30;
+  }
+
+  if (state.limitBottom) {
+    top.value = top.value + 30;
+  }
+
+  if (state.limitLeft) {
+    left.value = left.value - 30;
+  }
+
+  if (state.limitTop) {
+    top.value = top.value - 30;
+  }
+
   state.lastLeft = left.value;
   state.lastTop = top.value;
 };
 
 onMounted(() => {
+  if (isPhone.value) {
+    return;
+  }
   const resizeObserver = new ResizeObserver(async () => {
     if (!targetRef.value) {
       return;
@@ -222,7 +274,7 @@ onUnmounted(() => {
     <div
       ref="targetRef"
       class="target-box"
-      :style="{ width: `${targetBoxStyle.width}px`, height: `${targetBoxStyle.height}px`, top: `${top}px`, left: `${left}px` }"
+      :style="{ width: `${targetBoxStyle.width}px`, height: `${targetBoxStyle.height}px`, top: `${top}px`, left: `${left}px`, cursor: cursor }"
     >
       <img :src="src" alt="" @dragstart.prevent />
     </div>
diff --git a/docs/.vitepress/src/layouts/LayoutDoc.vue b/docs/.vitepress/src/layouts/LayoutDoc.vue
index 66526d8..a1ece74 100644
--- a/docs/.vitepress/src/layouts/LayoutDoc.vue
+++ b/docs/.vitepress/src/layouts/LayoutDoc.vue
@@ -426,19 +426,29 @@ const bindImageZoom = (img: HTMLImageElement) => {
   if (img.naturalWidth < 200) {
     img.parentElement?.classList.add('img-expand-not');
   } else {
-    const btn = img.parentElement?.querySelector<HTMLElement>('.img-mask');
-    btn?.addEventListener('click', () => {
-      zoomWidth.value = img.offsetWidth;
-      zoomHeight.value = img.offsetHeight;
+    if (isPhone.value) {
+      img?.addEventListener('click', () => {
+        zoomWidth.value = img.offsetWidth;
+        zoomHeight.value = img.offsetHeight;
 
-      imgUrl.value = img.src;
-      zoomVisible.value = true;
-    });
+        imgUrl.value = img.src;
+        zoomVisible.value = true;
+      });
+    } else {
+      const btn = img.parentElement?.querySelector<HTMLElement>('.img-mask');
+      btn?.addEventListener('click', () => {
+        zoomWidth.value = img.offsetWidth;
+        zoomHeight.value = img.offsetHeight;
+
+        imgUrl.value = img.src;
+        zoomVisible.value = true;
+      });
+    }
   }
 };
 
 const imgInit = () => {
-  zoom.value = gtLaptop.value ? 1.5 : 1.1;
+  zoom.value = gtLaptop.value ? 1.5 : isPhone ? 1 : 1.1;
   const imgDom = document.querySelectorAll<HTMLImageElement>('.markdown-body img');
   imgDom.forEach((img) => {
     if (img.naturalWidth === 0 || img.naturalHeight === 0) {
@@ -933,7 +943,6 @@ const readyVisible = ref(false);
 .ly-doc-no-menu {
   max-width: var(--layout-content-max-width);
   margin: 0 auto;
-
 }
 
 .doc-body {
@@ -953,9 +962,14 @@ const readyVisible = ref(false);
 }
 .feedback-bug-popover {
   .o-dropdown-item {
+    background-image: url('@/assets/category/docs/docsBugBg.png');
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
     justify-content: flex-start;
     width: auto;
-    padding: 5px 8px;
+    padding: 3px 12px;
+    color: var(--o-color-info1-inverse);
   }
 }
 
@@ -1002,6 +1016,10 @@ const readyVisible = ref(false);
     margin-top: 3px;
     margin-left: 3px;
   }
+
+  @include respond-to('phone') {
+    display: none;
+  }
 }
 
 .demo {
-- 
Gitee