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
Binary files /dev/null and b/docs/.vitepress/src/assets/category/docs/docsBugBg.png differ
diff --git a/docs/.vitepress/src/assets/style/markdown.scss b/docs/.vitepress/src/assets/style/markdown.scss
index 5830393c3ea4d4dc840c5179389d250871a6b951..45eb21f9d7256c05ad4fb60ad819714566d3a190 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 e4251ed67830af25da98fdcfb743f8f48ccf4644..35fdce8a6e4422694c0f73dfca6dabfafc058bac 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 f079dafd720bcefab5fdb103aac0e56f417ca62a..d61c72a6564a45dbab7126fb72acb27e00e681ab 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 f1b076e713dd2d4e20616aec92843aeaed52a797..b0dcdf8cb7f5fb594f8bc5e923b58fba65d0a763 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 66526d81345e68907debb8598c68e89dc10760ab..a1ece749e1e3feb493e1d3380dda4e64d2b5df97 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 {