diff --git a/deploy/nginx/nginx-pro.conf b/deploy/nginx/nginx-pro.conf
index b5c753620b49ffea31274f77f6ceb7720adeb02f..1f6451bd47f9f8a2f51edfce2daca135cf9a48d1 100644
--- a/deploy/nginx/nginx-pro.conf
+++ b/deploy/nginx/nginx-pro.conf
@@ -1,3 +1,4 @@
+# 登录
 location ^~ /api-id/ {
   proxy_set_header X-Forwarded-For $http_x_real_ip;
   add_header X-XSS-Protection "1; mode=block";
@@ -11,3 +12,17 @@ location ^~ /api-id/ {
 
   proxy_pass https://omapi.osinfra.cn/;
 }
+
+# datastat数据
+location /api-dsapi/ {
+  proxy_set_header X-Forwarded-For $http_x_real_ip;
+  add_header X-XSS-Protection "1; mode=block";
+  add_header X-Frame-Options DENY;
+  add_header X-Content-Type-Options nosniff;
+  add_header Content-Security-Policy "script-src 'self'; object-src 'none'; frame-src 'none'";
+  add_header Cache-Control "no-cache,no-store,must-revalidate";
+  add_header Pragma no-cache;
+  add_header Expires 0;
+
+  proxy_pass https://dsapi.osinfra.cn/;
+}
diff --git a/deploy/nginx/nginx-test.conf b/deploy/nginx/nginx-test.conf
index 8a0642308f2063fe7c78c1d76ba4c584207710ef..a445a7327d764c2fc3ffa61e805bbb7390264c4c 100644
--- a/deploy/nginx/nginx-test.conf
+++ b/deploy/nginx/nginx-test.conf
@@ -1,3 +1,4 @@
+# 搜索
 location ^~ /api-search/ {
   add_header X-XSS-Protection "1; mode=block";
   add_header X-Frame-Options DENY;
@@ -15,6 +16,7 @@ location ^~ /api-search/ {
   proxy_pass https://doc-search.test.osinfra.cn/;
 }
 
+# 登录
 location ^~ /api-id/ {
   proxy_set_header X-Forwarded-For $http_x_real_ip;
   add_header X-XSS-Protection "1; mode=block";
@@ -28,3 +30,18 @@ location ^~ /api-id/ {
 
   proxy_pass https://omapi.test.osinfra.cn/;
 }
+
+# datastat数据
+location /api-dsapi/ {
+  proxy_set_header X-Forwarded-For $http_x_real_ip;
+  add_header X-XSS-Protection "1; mode=block";
+  add_header X-Frame-Options DENY;
+  add_header X-Content-Type-Options nosniff;
+  add_header Content-Security-Policy "script-src 'self'; object-src 'none'; frame-src 'none'";
+  add_header Cache-Control "no-cache,no-store,must-revalidate";
+  add_header Pragma no-cache;
+  add_header Expires 0;
+
+  # proxy_pass https://dsapi.test.osinfra.cn/;
+  proxy_pass https://dsapi.osinfra.cn/;
+}
diff --git a/docs/.vitepress/src/App.vue b/docs/.vitepress/src/App.vue
index b8c6b6a98894a518aafa2879495212ecc923b7f8..0025a43360c0ed2b7a754e324128e175dff4795f 100644
--- a/docs/.vitepress/src/App.vue
+++ b/docs/.vitepress/src/App.vue
@@ -10,6 +10,7 @@ import TheHome from '@/views/home/TheHome.vue';
 import AppHeader from '@/components/header/AppHeader.vue';
 import AppFooter from '@/components/AppFooter.vue';
 import FloatingButton from '@/components/FloatingButton.vue';
+import FloatingButtonDocs from '@/components/FloatingButtonDocs.vue';
 import CookieNotice from '@/components/CookieNotice.vue';
 
 import LayoutDoc from '@/layouts/LayoutDoc.vue';
@@ -72,7 +73,8 @@ watch(
         <TheHome v-if="isHome" />
         <Content v-else-if="isCustomLayout" />
         <LayoutDoc :node-visible="nodeVisible" v-else />
-        <FloatingButton :is-home="isHome" />
+        <FloatingButton v-if="isHome" />
+        <FloatingButtonDocs v-else />
       </main>
     </OScroller>
     <ClientOnly>
diff --git a/docs/.vitepress/src/api/api-feedback.ts b/docs/.vitepress/src/api/api-feedback.ts
new file mode 100644
index 0000000000000000000000000000000000000000..840309acd48c6b1cecaa79d38de52d0f6ad052cf
--- /dev/null
+++ b/docs/.vitepress/src/api/api-feedback.ts
@@ -0,0 +1,21 @@
+import { request } from '@/shared/axios';
+import type { AxiosResponse } from '@/shared/axios';
+interface FeedBackQueryT {
+  feedbackPageUrl: string;
+  feedbackText: string;
+  feedbackValue: number;
+}
+/**
+ * 满意度评分
+ * @param {FeedBackQueryT} params
+ * @return {Object}
+ */
+export function postFeedback(params: FeedBackQueryT): Promise<{
+  code: number;
+  data: string;
+  msg: string;
+  update_at: string;
+}> {
+  const url = '/api-dsapi/query/nps?community=openeuler';
+  return request.post(url, params).then((res: AxiosResponse) => res.data);
+}
diff --git a/docs/.vitepress/src/assets/category/feedback/svg-icons/icon-faq.svg b/docs/.vitepress/src/assets/category/feedback/svg-icons/icon-faq.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bf7bfb581fe32399d146a54d5b5bbda82a7e94a7
--- /dev/null
+++ b/docs/.vitepress/src/assets/category/feedback/svg-icons/icon-faq.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="currentColor" d="M15.071 2.576c0.223 0 0.439 0.077 0.611 0.215l0.098 0.090 3.963 4.192c0.143 0.151 0.233 0.343 0.259 0.546l0.008 0.124v6.786c0 0.387-0.313 0.7-0.7 0.7-0.354 0-0.647-0.263-0.694-0.605l-0.006-0.095-0.001-6.302-2.137 0.001c-0.999 0-1.819-0.772-1.894-1.752l-0.006-0.148-0.001-2.352-8.781 0.013c-0.194 0-0.355 0.138-0.392 0.32l-0.008 0.081v15.233c0 0.194 0.138 0.355 0.321 0.392l0.081 0.008 12.419-0.018c0.194-0 0.355-0.138 0.392-0.32l0.008-0.081v-2.446c0-0.387 0.313-0.7 0.7-0.7 0.354 0 0.647 0.263 0.694 0.605l0.006 0.095v2.446c0 0.944-0.726 1.718-1.651 1.795l-0.148 0.006-12.419 0.018c-0.945 0.001-1.721-0.725-1.797-1.652l-0.006-0.148v-15.234c0-0.944 0.726-1.718 1.651-1.795l0.148-0.006 9.283-0.013zM15.436 15.335c0.387 0 0.7 0.313 0.7 0.7 0 0.354-0.263 0.647-0.605 0.694l-0.095 0.006h-6.873c-0.387 0-0.7-0.313-0.7-0.7 0-0.354 0.263-0.647 0.605-0.694l0.095-0.006h6.873zM15.436 11.3c0.387 0 0.7 0.313 0.7 0.7 0 0.354-0.263 0.647-0.605 0.694l-0.095 0.006h-6.873c-0.387 0-0.7-0.313-0.7-0.7 0-0.354 0.263-0.647 0.605-0.694l0.095-0.006h6.873zM12.004 7.265c0.387 0 0.7 0.313 0.7 0.7 0 0.354-0.263 0.647-0.605 0.694l-0.095 0.006h-3.441c-0.387 0-0.7-0.313-0.7-0.7 0-0.354 0.263-0.647 0.605-0.694l0.095-0.006h3.441zM17.585 6.829l-1.614-1.707 0 1.207c0 0.245 0.177 0.45 0.41 0.492l0.090 0.008 1.114-0z">
+	</path>
+</svg>
diff --git a/docs/.vitepress/src/assets/category/feedback/svg-icons/icon-headset.svg b/docs/.vitepress/src/assets/category/feedback/svg-icons/icon-headset.svg
new file mode 100644
index 0000000000000000000000000000000000000000..aee2698d917ff057255c16175248a2b592da1f68
--- /dev/null
+++ b/docs/.vitepress/src/assets/category/feedback/svg-icons/icon-headset.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path fill="currentColor" d="M11.75 1.9c3.9 0 7.075 3.096 7.203 6.964l0.004 0.243v4.99c-0.001 3.852-3.123 6.974-6.975 6.974v0c-0.331 0-0.6-0.269-0.6-0.6s0.269-0.6 0.6-0.6v0c0 0 0 0 0 0 3.111 0 5.648-2.461 5.77-5.542l0-0.011 0.004-0.222v-4.989c0-0.002 0-0.004 0-0.006 0-3.318-2.689-6.007-6.007-6.007-3.241 0-5.882 2.566-6.003 5.777l-0 0.011-0.004 0.225v4.725c-0 0.331-0.269 0.599-0.6 0.599-0.297 0-0.543-0.216-0.591-0.499l-0-0.004-0.008-0.097v-4.725c0-3.98 3.227-7.207 7.207-7.207v0z"></path>
+<path fill="currentColor" d="M3.821 9.3c-1.060 0-1.921 0.86-1.921 1.921v2.643c0 1.061 0.86 1.921 1.922 1.921s1.921-0.86 1.921-1.921v0-2.643c0-1.060-0.86-1.921-1.922-1.921zM3.821 10.5c0.399 0 0.722 0.323 0.722 0.721v2.643c0 0.398-0.323 0.721-0.721 0.721s-0.721-0.323-0.721-0.721v0-2.643c0-0.398 0.323-0.721 0.721-0.721zM19.679 9.3c-1.062 0-1.922 0.86-1.922 1.921v2.643c0 1.061 0.86 1.921 1.922 1.921s1.922-0.86 1.922-1.921v0-2.643c0-1.060-0.86-1.921-1.921-1.921zM19.679 10.5c0.398 0 0.721 0.323 0.721 0.721v2.643c0 0.398-0.323 0.721-0.721 0.721s-0.721-0.323-0.721-0.721v0-2.643c0-0.398 0.323-0.721 0.722-0.721zM12.543 19.467h-1.586c-0.555 0-1.005 0.45-1.005 1.005s0.45 1.005 1.005 1.005v0h1.586c0.555 0 1.005-0.45 1.005-1.005s-0.45-1.005-1.005-1.005v0zM10.957 20.419h1.586c0.026 0.004 0.046 0.026 0.046 0.053s-0.020 0.049-0.045 0.052l-0 0h-1.586c-0.002 0-0.005 0-0.007 0-0.029 0-0.053-0.024-0.053-0.053s0.024-0.053 0.053-0.053c0.003 0 0.005 0 0.008 0.001l-0-0z"></path>
+</svg>
diff --git a/docs/.vitepress/src/components/FloatingButton.vue b/docs/.vitepress/src/components/FloatingButton.vue
index b63a5c42abb50826b800953912474b5d8391ce8c..d6f5ccbb38b5a058d0dbd9cdb18abbd4e1ed4476 100644
--- a/docs/.vitepress/src/components/FloatingButton.vue
+++ b/docs/.vitepress/src/components/FloatingButton.vue
@@ -1,172 +1,24 @@
 <script setup lang="ts">
-import { ref, computed, reactive, onMounted, onUnmounted, type CSSProperties } from 'vue';
-import { OIcon, OPopup, OLink, ODialog, ODivider, OButton } from '@opensig/opendesign';
-import { ElSlider } from 'element-plus';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { OIcon } from '@opensig/opendesign';
 
 import DocBugDialog from '@/components/DocBugDialog.vue';
+import FloatingButtonHome from '@/components/feedback/FloatingButtonHome.vue';
 
-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 IconTips from '~icons/app/icon-tips.svg';
 import IconTop from '~icons/app/icon-top.svg';
 
 import { scrollToTop } from '@/utils/common';
 
 import { useAppearance } from '@/stores/common';
-import { useThrottleFn } from '@vueuse/core';
 import { useScreen } from '@/composables/useScreen';
 
-const { isPhone, gtPhone } = useScreen();
+const { gtPhone } = useScreen();
 const docBugVisible = ref(false);
 
 const isDark = computed(() => {
   return useAppearance().theme === 'dark' ? true : false;
 });
 
-const STEP = 10;
-
-// -------------------- 文档获取效率 --------------------
-const efficiencyScore = ref(0);
-const isEfficiencyShow = ref(false);
-const efficiencyPosition = computed(() => {
-  return efficiencyScore.value + '%';
-});
-
-// -------------------- 文档正确性 --------------------
-const correctnessScore = ref(0);
-const isCorrectnessShow = ref(false);
-const correctnessPosition = computed(() => {
-  return correctnessScore.value + '%';
-});
-
-// -------------------- 文档完整性 --------------------
-const integrityScore = ref(0);
-const isIntegrityShow = ref(false);
-const integrityPosition = computed(() => {
-  return integrityScore.value + '%';
-});
-
-// -------------------- 文档完文档易理解整性 --------------------
-const understandScore = ref(0);
-const isUnderstandShow = ref(false);
-const understandPosition = computed(() => {
-  return understandScore.value + '%';
-});
-
-const feedbackRef = ref();
-const showPopup = ref(false);
-
-const showInput = ref(false); // 显示弹窗中输入框
-
-const isScoreShow = computed(() => {
-  return isEfficiencyShow.value || isCorrectnessShow.value || isIntegrityShow.value || isUnderstandShow.value;
-});
-
-// 鼠标进入图标区域
-const onMouseEnter = () => {
-  showPopup.value = true;
-};
-// 鼠标离开图标区域
-const onMouseLeave = () => {
-  showPopup.value = false;
-};
-
-// 滑动滑块
-const changeSlider = (v: boolean) => {
-  showInput.value = v;
-};
-// 关闭弹窗
-const closeFeedbackPopup = (v: boolean) => {
-  showInput.value = v;
-  showPopup.value = v;
-};
-
-const closePopup = () => {
-  showPopup.value = false;
-  efficiencyScore.value = 0;
-  isEfficiencyShow.value = false;
-  correctnessScore.value = 0;
-  isCorrectnessShow.value = false;
-  integrityScore.value = 0;
-  isIntegrityShow.value = false;
-  understandScore.value = 0;
-  isUnderstandShow.value = false;
-};
-
-const floatData = ref([
-  {
-    img: computed(() => {
-      return IconChat;
-    }),
-    id: 'forum',
-    text: '论坛',
-    textMb: '论坛求助',
-    tip: '发帖互助解决各类问题',
-    link: 'https://forum.openeuler.org/',
-  },
-  {
-    img: computed(() => {
-      return isDark.value ? IconQuickIssue_dark : IconQuickIssue_light;
-    }),
-    id: 'quickIssue',
-    text: 'Quick',
-    text2: 'Issue',
-    textMb: 'QuickIssue',
-    tip: '快捷提交/查询社区Issues',
-    link: 'https://quickissue.openeuler.org/zh/issues/',
-  },
-]);
-
-const feedbackMbRef = ref();
-const scoreVisible = ref(false);
-const STEP_MB = 25;
-const floatDataMb = ref([
-  {
-    img: computed(() => {
-      return IconSmile;
-    }),
-    id: 'score',
-    textMb: '我要评分',
-  },
-  ...floatData.value,
-]);
-
-interface Mark {
-  style: CSSProperties;
-  label: string;
-}
-
-type Marks = Record<number, string>;
-
-const marks = reactive<Marks>({
-  0: '1',
-  25: '2',
-  50: '3',
-  75: '4',
-  100: '5',
-});
-
-const openScoreDlg = (val: string) => {
-  if (val === 'score') {
-    scoreVisible.value = true;
-  }
-};
-const change = (visible: boolean) => {
-  if (!visible) {
-    scoreVisible.value = false;
-    closePopup();
-  }
-};
-
-const submitScore = () => {
-  console.log(efficiencyScore.value);
-};
-
 // 页面滚动大于一屏时，显示回到顶部悬浮按钮
 const showBackTop = ref(false);
 const oscrollerDom = ref();
@@ -190,173 +42,23 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div v-if="gtPhone" class="feedback">
+  <div v-if="gtPhone" class="feedback-home">
     <div class="bug-box" @click="docBugVisible = true">
       <div class="bug-text">文档捉虫</div>
     </div>
     <div class="feedback-wrap">
-      <div id="tour_feedback" class="nav-box1" :class="isDark ? 'dark-nav' : ''">
-        <div class="nav-item" id="feedback" @mouseenter="onMouseEnter" @mouseleave="useThrottleFn(onMouseLeave, 300)">
-          <OIcon ref="feedbackRef" class="icon-smile">
-            <component :is="IconSmile"> </component>
-          </OIcon>
-          <p class="text-name">评分</p>
-
-          <OPopup
-            :visible="showPopup"
-            position="rb"
-            :target="feedbackRef"
-            wrapper="#feedback"
-            body-class="popup-feedback"
-            :auto-hide="showPopup && isScoreShow ? false : true"
-            :offset="24"
-            trigger="hover"
-          >
-            <OIcon class="icon-close" @click="closePopup">
-              <IconClose />
-            </OIcon>
-
-            <div class="slider">
-              <p class="slider-title">文档获取效率</p>
-              <div class="slider-body">
-                <div v-show="isEfficiencyShow" class="slide-tip slide-efficiency-tip">{{ efficiencyScore / 10 }}</div>
-                <ClientOnly>
-                  <el-slider show-stops v-model="efficiencyScore" :step="STEP" :show-tooltip="false" @input="isEfficiencyShow = true" />
-                </ClientOnly>
-              </div>
-            </div>
-
-            <div class="slider">
-              <p class="slider-title">文档正确性</p>
-              <div class="slider-body">
-                <div v-show="isCorrectnessShow" class="slide-tip slide-correctness-tip">{{ correctnessScore / 10 }}</div>
-                <ClientOnly>
-                  <el-slider show-stops v-model="correctnessScore" :step="STEP" :show-tooltip="false" @input="isCorrectnessShow = true" />
-                </ClientOnly>
-              </div>
-            </div>
-
-            <div class="slider">
-              <p class="slider-title">文档完整性</p>
-              <div class="slider-body">
-                <div v-show="isIntegrityShow" class="slide-tip slide-integrity-tip">{{ integrityScore / 10 }}</div>
-                <ClientOnly>
-                  <el-slider show-stops v-model="integrityScore" :step="STEP" :show-tooltip="false" @input="isIntegrityShow = true" />
-                </ClientOnly>
-              </div>
-            </div>
-
-            <div class="slider">
-              <p class="slider-title">文档易理解</p>
-              <div class="slider-body">
-                <div v-show="isUnderstandShow" class="slide-tip slide-understand-tip">{{ understandScore / 10 }}</div>
-                <ClientOnly>
-                  <el-slider show-stops v-model="understandScore" :step="STEP" :show-tooltip="false" @input="isUnderstandShow = true" />
-                </ClientOnly>
-              </div>
-            </div>
-
-            <div class="submit-btn">
-              <OLink color="primary" :disabled="true"> 提交 </OLink>
-            </div>
-          </OPopup>
-        </div>
-
-        <OLink v-for="item in floatData" :key="item.link" :href="item.link" target="_blank" class="nav-item">
-          <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>
-      </div>
+      <FloatingButtonHome />
       <div v-if="showBackTop" class="nav-box2" :class="[isDark ? 'dark-nav' : '']" @click="scrollToTop(0)">
         <OIcon class="icon-top"><IconTop /> </OIcon>
       </div>
     </div>
   </div>
-  <div v-if="isPhone" class="feedback-mb feedback">
-    <div class="feedback-wrap-mb">
-      <div ref="feedbackMbRef" id="feedbackMb" class="tips">
-        <OIcon><IconTips /></OIcon>
-      </div>
-      <OPopup
-        position="rt"
-        :target="feedbackMbRef"
-        wrapper="#feedbackMb"
-        body-class="popup-feedback-mb"
-        :style="{ left: '-145px' }"
-        :offset="24"
-        trigger="click"
-      >
-        <OLink v-for="item in floatDataMb" :key="item.id" :href="item?.link" target="_blank" class="nav-item-mb" @click="openScoreDlg(item.id)">
-          <OIcon><component :is="item.img"></component> </OIcon>
-          <p class="text-name">{{ item.textMb }}</p>
-        </OLink>
-      </OPopup>
-    </div>
-  </div>
-  <!-- 移动端评分弹窗 -->
-  <ODialog :visible="scoreVisible" class="docs-score-dialog" @change="change">
-    <template #header>
-      <div class="title-header">
-        <p class="title">我要评分</p>
-      </div>
-    </template>
-    <div class="score-content">
-      <div class="slider-mb">
-        <p class="slider-title">文档获取效率</p>
-        <div class="slider-body">
-          <ClientOnly>
-            <el-slider show-stops v-model="efficiencyScore" :step="STEP_MB" :show-tooltip="false" :marks="marks" />
-          </ClientOnly>
-        </div>
-      </div>
-
-      <div class="slider-mb">
-        <p class="slider-title">文档正确性</p>
-        <div class="slider-body">
-          <ClientOnly>
-            <el-slider show-stops v-model="correctnessScore" :step="STEP_MB" :show-tooltip="false" :marks="marks" />
-          </ClientOnly>
-        </div>
-      </div>
-
-      <div class="slider-mb">
-        <p class="slider-title">文档完整性</p>
-        <div class="slider-body">
-          <ClientOnly>
-            <el-slider show-stops v-model="integrityScore" :step="STEP_MB" :show-tooltip="false" :marks="marks" />
-          </ClientOnly>
-        </div>
-      </div>
-
-      <div class="slider-mb">
-        <p class="slider-title">文档易理解</p>
-        <div class="slider-body">
-          <ClientOnly>
-            <el-slider show-stops v-model="understandScore" :step="STEP_MB" :show-tooltip="false" :marks="marks" />
-          </ClientOnly>
-        </div>
-      </div>
-    </div>
-    <div class="btn">
-      <OButton color="normal" variant="text" size="large">取消</OButton>
-      <ODivider class="divider-btn" direction="v" />
-      <OButton color="normal" variant="text" size="large" @click="submitScore">确定</OButton>
-    </div>
-  </ODialog>
   <!-- 文档捉虫弹窗 -->
   <DocBugDialog v-model="docBugVisible" />
 </template>
 
-<style lang="scss">
-.docs-score-dialog {
-  --dlg-min-width: calc(100% - 32px);
-  --dlg-padding: 16px;
-  --dlg-padding-body-top: 0;
-}
-</style>
 <style lang="scss" scoped>
-.feedback {
+.feedback-home {
   position: fixed;
   bottom: 257px;
   right: 80px;
@@ -376,222 +78,9 @@ onUnmounted(() => {
   position: relative;
 }
 
-.nav-box1,
-.nav-box2 {
-  display: flex;
-  flex-direction: column;
-  padding: 16px 12px;
-  background-color: var(--o-color-fill2);
-  border-radius: var(--o-radius-xs);
-  box-shadow: var(--o-shadow-2);
-}
-.nav-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: var(--o-color-info1);
-  cursor: pointer;
-  .text-name {
-    @include tip2;
-  }
-
-  @include hover {
-    color: var(--o-color-primary1);
-  }
-}
-:deep(.o-link-label) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.o-link {
-  margin-top: 12px;
-}
-
-.nav-box2 {
-  margin-top: 12px;
-  cursor: pointer;
-
-  .icon-top {
-    color: var(--o-color-info1);
-    @include h2;
-
-    @include hover {
-      color: var(--o-color-primary1);
-    }
-  }
-}
-
-:deep(.o-popup) {
-  cursor: default;
-
-  .o-popup-wrap {
-    box-shadow: none;
-  }
-  .popup-feedback {
-    padding: 16px 24px;
-    background-color: var(--o-color-fill2);
-    box-shadow: var(--o-shadow-2);
-    border-radius: var(--o-radius-xs);
-    --popup-min-width: 315px;
-    top: 12px;
-    position: relative;
-
-    .icon-close {
-      position: absolute;
-      top: 12px;
-      right: 12px;
-      color: var(--o-color-info2);
-      cursor: pointer;
-
-      @include h4;
-      transition: all var(--o-duration-m1) var(--o-easing-standard-in);
-
-      @include hover {
-        transform: rotate(180deg);
-        color: var(--o-color-primary1);
-      }
-    }
-  }
-}
-
-.slider {
-  .slider-title {
-    @include tip1;
-    color: var(--o-color-info1);
-    text-align: center;
-  }
-  .slider-body {
-    position: relative;
-    margin-top: 12px;
-  }
-  .slide-tip {
-    width: 28px;
-    height: auto;
-    text-align: center;
-    font-size: var(--o-font_size-tip1);
-    color: var(--o-color-info1);
-    background-color: var(--o-color-fill2);
-    border-radius: var(--o-radius-xs);
-    box-shadow: 0 3px 8px rgba(18, 20, 23, 0.08);
-    backdrop-filter: blur(5px);
-    border: 1px solid var(--o-color-control4-light);
-    position: absolute;
-    top: -36px;
-    transform: translateX(-50%);
-
-    &::after {
-      content: '';
-      display: block;
-      width: 8px;
-      height: 8px;
-      transform: rotateZ(45deg);
-      border: 1px solid #000;
-      border-color: transparent var(--o-color-control4-light) var(--o-color-control4-light) transparent;
-      background-color: var(--o-color-fill2);
-      position: absolute;
-      bottom: -4px;
-      right: 9px;
-    }
-  }
-  .slide-efficiency-tip {
-    left: v-bind(efficiencyPosition);
-  }
-  .slide-correctness-tip {
-    left: v-bind(correctnessPosition);
-  }
-  .slide-integrity-tip {
-    left: v-bind(integrityPosition);
-  }
-  .slide-understand-tip {
-    left: v-bind(understandPosition);
-  }
-}
-
-.slider + .slider {
-  .slider-title {
-    margin-top: 16px;
-  }
-}
-
-.submit-btn {
-  display: flex;
-  justify-content: center;
-  margin-top: 16px;
-}
-
-.feedback-mb {
-  bottom: 82px;
-  height: 48px;
-}
-.tips {
-  padding: 12px;
-  background-color: var(--o-color-fill2);
-  border-radius: var(--o-radius-xs);
-  box-shadow: var(--o-shadow-2);
-  cursor: pointer;
-  display: flex;
-}
-:deep(.o-popup) {
-  --popup-bd: none;
-  .popup-feedback-mb {
-    padding: 16px;
-    background-color: var(--o-color-fill2);
-    box-shadow: var(--o-shadow-2);
-    border-radius: var(--o-radius-xs);
-    position: relative;
-  }
-}
-.nav-item-mb {
-  display: flex;
-  margin-top: 0;
-  :deep(.o-link-label) {
-    flex-direction: row;
-  }
-  .text-name {
-    color: var(--o-color-info1);
-    font-weight: 500;
-    margin-left: 8px;
-  }
-}
-.nav-item-mb + .nav-item-mb {
-  margin-top: 12px;
-}
-
-.slider-mb {
-  display: flex;
-  align-items: center;
-  margin-top: 28px;
-  .slider-title {
-    @include text1;
-    color: var(--o-color-info2);
-    min-width: 72px;
-  }
-  .slider-body {
-    width: calc(100% - 96px);
-    margin-left: 16px;
-  }
-  :deep(.el-slider__marks-text) {
-    margin-top: -24px;
-  }
-}
-.btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 16px;
-  .o-btn {
-    --btn-bg-color-hover: none;
-    --btn-bg-color-active: none;
-    --btn-padding: 0 50px;
-    --btn-color: var(--o-color-info1);
-    font-weight: 500;
-  }
-}
-
 .bug-box {
   width: 100%;
-  height: 112px;
+  height: 104px;
   background-image: url(@/assets/category/float/bug-bg.png);
   background-size: 100%;
   margin-bottom: 12px;
diff --git a/docs/.vitepress/src/components/FloatingButtonDocs.vue b/docs/.vitepress/src/components/FloatingButtonDocs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4d63a6035df18172f2bf6838447a1a3744c3cf78
--- /dev/null
+++ b/docs/.vitepress/src/components/FloatingButtonDocs.vue
@@ -0,0 +1,588 @@
+<script setup lang="ts">
+import { ref, computed, reactive, onMounted, onUnmounted, type CSSProperties } from 'vue';
+import { OIcon, OPopup, OLink, ODialog, ODivider, OButton } from '@opensig/opendesign';
+import { ElSlider } from 'element-plus';
+
+import DocBugDialog from '@/components/DocBugDialog.vue';
+
+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 IconTips from '~icons/app/icon-tips.svg';
+import IconTop from '~icons/app/icon-top.svg';
+
+import { scrollToTop } from '@/utils/common';
+
+import { useAppearance } from '@/stores/common';
+import { useThrottleFn } from '@vueuse/core';
+import { useScreen } from '@/composables/useScreen';
+
+const { isPhone, gtPhone } = useScreen();
+const docBugVisible = ref(false);
+
+const isDark = computed(() => {
+  return useAppearance().theme === 'dark' ? true : false;
+});
+
+const STEP = 10;
+
+// -------------------- 文档获取效率 --------------------
+const efficiencyScore = ref(0);
+const isEfficiencyShow = ref(false);
+const efficiencyPosition = computed(() => {
+  return efficiencyScore.value + '%';
+});
+
+// -------------------- 文档正确性 --------------------
+const correctnessScore = ref(0);
+const isCorrectnessShow = ref(false);
+const correctnessPosition = computed(() => {
+  return correctnessScore.value + '%';
+});
+
+// -------------------- 文档完整性 --------------------
+const integrityScore = ref(0);
+const isIntegrityShow = ref(false);
+const integrityPosition = computed(() => {
+  return integrityScore.value + '%';
+});
+
+// -------------------- 文档完文档易理解整性 --------------------
+const understandScore = ref(0);
+const isUnderstandShow = ref(false);
+const understandPosition = computed(() => {
+  return understandScore.value + '%';
+});
+
+const feedbackRef = ref();
+const showPopup = ref(false);
+
+const showInput = ref(false); // 显示弹窗中输入框
+
+const isScoreShow = computed(() => {
+  return isEfficiencyShow.value || isCorrectnessShow.value || isIntegrityShow.value || isUnderstandShow.value;
+});
+
+// 鼠标进入图标区域
+const onMouseEnter = () => {
+  showPopup.value = true;
+};
+// 鼠标离开图标区域
+const onMouseLeave = () => {
+  showPopup.value = false;
+};
+
+// 滑动滑块
+const changeSlider = (v: boolean) => {
+  showInput.value = v;
+};
+// 关闭弹窗
+const closeFeedbackPopup = (v: boolean) => {
+  showInput.value = v;
+  showPopup.value = v;
+};
+
+const closePopup = () => {
+  showPopup.value = false;
+  efficiencyScore.value = 0;
+  isEfficiencyShow.value = false;
+  correctnessScore.value = 0;
+  isCorrectnessShow.value = false;
+  integrityScore.value = 0;
+  isIntegrityShow.value = false;
+  understandScore.value = 0;
+  isUnderstandShow.value = false;
+};
+
+const floatData = ref([
+  {
+    img: computed(() => {
+      return IconChat;
+    }),
+    id: 'forum',
+    text: '论坛',
+    textMb: '论坛求助',
+    tip: '发帖互助解决各类问题',
+    link: 'https://forum.openeuler.org/',
+  },
+  {
+    img: computed(() => {
+      return isDark.value ? IconQuickIssue_dark : IconQuickIssue_light;
+    }),
+    id: 'quickIssue',
+    text: 'Quick',
+    text2: 'Issue',
+    textMb: 'QuickIssue',
+    tip: '快捷提交/查询社区Issues',
+    link: 'https://quickissue.openeuler.org/zh/issues/',
+  },
+]);
+
+const feedbackMbRef = ref();
+const scoreVisible = ref(false);
+const STEP_MB = 25;
+const floatDataMb = ref([
+  {
+    img: computed(() => {
+      return IconSmile;
+    }),
+    id: 'score',
+    textMb: '我要评分',
+  },
+  ...floatData.value,
+]);
+
+interface Mark {
+  style: CSSProperties;
+  label: string;
+}
+
+type Marks = Record<number, string>;
+
+const marks = reactive<Marks>({
+  0: '1',
+  25: '2',
+  50: '3',
+  75: '4',
+  100: '5',
+});
+
+const openScoreDlg = (val: string) => {
+  if (val === 'score') {
+    scoreVisible.value = true;
+  }
+};
+const change = (visible: boolean) => {
+  if (!visible) {
+    scoreVisible.value = false;
+    closePopup();
+  }
+};
+
+const submitScore = () => {
+  console.log(efficiencyScore.value);
+};
+
+// 页面滚动大于一屏时，显示回到顶部悬浮按钮
+const showBackTop = ref(false);
+const oscrollerDom = ref();
+
+const listenScroll = () => {
+  if (oscrollerDom.value.scrollTop > document.body.clientHeight) {
+    showBackTop.value = true;
+  } else {
+    showBackTop.value = false;
+  }
+};
+
+onMounted(() => {
+  oscrollerDom.value = document.querySelector('#app > .o-scroller > .o-scroller-container');
+  oscrollerDom.value?.addEventListener('scroll', listenScroll);
+});
+
+onUnmounted(() => {
+  oscrollerDom.value?.removeEventListener('scroll', listenScroll);
+});
+</script>
+
+<template>
+  <div v-if="gtPhone" class="feedback">
+    <div class="feedback-wrap">
+      <div id="tour_feedback" class="nav-box1" :class="isDark ? 'dark-nav' : ''">
+        <div class="nav-item" id="feedback" @mouseenter="onMouseEnter" @mouseleave="useThrottleFn(onMouseLeave, 300)">
+          <OIcon ref="feedbackRef" class="icon-smile">
+            <component :is="IconSmile"> </component>
+          </OIcon>
+          <p class="text-name">评分</p>
+
+          <OPopup
+            :visible="showPopup"
+            position="rb"
+            :target="feedbackRef"
+            wrapper="#feedback"
+            body-class="popup-feedback"
+            :auto-hide="showPopup && isScoreShow ? false : true"
+            :offset="24"
+            trigger="hover"
+          >
+            <OIcon class="icon-close" @click="closePopup">
+              <IconClose />
+            </OIcon>
+
+            <div class="slider">
+              <p class="slider-title">文档获取效率</p>
+              <div class="slider-body">
+                <div v-show="isEfficiencyShow" class="slide-tip slide-efficiency-tip">{{ efficiencyScore / 10 }}</div>
+                <ClientOnly>
+                  <el-slider show-stops v-model="efficiencyScore" :step="STEP" :show-tooltip="false" @input="isEfficiencyShow = true" />
+                </ClientOnly>
+              </div>
+            </div>
+
+            <div class="slider">
+              <p class="slider-title">文档正确性</p>
+              <div class="slider-body">
+                <div v-show="isCorrectnessShow" class="slide-tip slide-correctness-tip">{{ correctnessScore / 10 }}</div>
+                <ClientOnly>
+                  <el-slider show-stops v-model="correctnessScore" :step="STEP" :show-tooltip="false" @input="isCorrectnessShow = true" />
+                </ClientOnly>
+              </div>
+            </div>
+
+            <div class="slider">
+              <p class="slider-title">文档完整性</p>
+              <div class="slider-body">
+                <div v-show="isIntegrityShow" class="slide-tip slide-integrity-tip">{{ integrityScore / 10 }}</div>
+                <ClientOnly>
+                  <el-slider show-stops v-model="integrityScore" :step="STEP" :show-tooltip="false" @input="isIntegrityShow = true" />
+                </ClientOnly>
+              </div>
+            </div>
+
+            <div class="slider">
+              <p class="slider-title">文档易理解</p>
+              <div class="slider-body">
+                <div v-show="isUnderstandShow" class="slide-tip slide-understand-tip">{{ understandScore / 10 }}</div>
+                <ClientOnly>
+                  <el-slider show-stops v-model="understandScore" :step="STEP" :show-tooltip="false" @input="isUnderstandShow = true" />
+                </ClientOnly>
+              </div>
+            </div>
+
+            <div class="submit-btn">
+              <OLink color="primary" :disabled="true"> 提交 </OLink>
+            </div>
+          </OPopup>
+        </div>
+
+        <OLink v-for="item in floatData" :key="item.link" :href="item.link" target="_blank" class="nav-item">
+          <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>
+      </div>
+      <div v-if="showBackTop" class="nav-box2" :class="[isDark ? 'dark-nav' : '']" @click="scrollToTop(0)">
+        <OIcon class="icon-top"><IconTop /> </OIcon>
+      </div>
+    </div>
+  </div>
+  <div v-if="isPhone" class="feedback-mb feedback">
+    <div class="feedback-wrap-mb">
+      <div ref="feedbackMbRef" id="feedbackMb" class="tips">
+        <OIcon><IconTips /></OIcon>
+      </div>
+      <OPopup
+        position="rt"
+        :target="feedbackMbRef"
+        wrapper="#feedbackMb"
+        body-class="popup-feedback-mb"
+        :style="{ left: '-145px' }"
+        :offset="24"
+        trigger="click"
+      >
+        <OLink v-for="item in floatDataMb" :key="item.id" :href="item?.link" target="_blank" class="nav-item-mb" @click="openScoreDlg(item.id)">
+          <OIcon><component :is="item.img"></component> </OIcon>
+          <p class="text-name">{{ item.textMb }}</p>
+        </OLink>
+      </OPopup>
+    </div>
+  </div>
+  <!-- 移动端评分弹窗 -->
+  <ODialog :visible="scoreVisible" class="docs-score-dialog" @change="change">
+    <template #header>
+      <div class="title-header">
+        <p class="title">我要评分</p>
+      </div>
+    </template>
+    <div class="score-content">
+      <div class="slider-mb">
+        <p class="slider-title">文档获取效率</p>
+        <div class="slider-body">
+          <ClientOnly>
+            <el-slider show-stops v-model="efficiencyScore" :step="STEP_MB" :show-tooltip="false" :marks="marks" />
+          </ClientOnly>
+        </div>
+      </div>
+
+      <div class="slider-mb">
+        <p class="slider-title">文档正确性</p>
+        <div class="slider-body">
+          <ClientOnly>
+            <el-slider show-stops v-model="correctnessScore" :step="STEP_MB" :show-tooltip="false" :marks="marks" />
+          </ClientOnly>
+        </div>
+      </div>
+
+      <div class="slider-mb">
+        <p class="slider-title">文档完整性</p>
+        <div class="slider-body">
+          <ClientOnly>
+            <el-slider show-stops v-model="integrityScore" :step="STEP_MB" :show-tooltip="false" :marks="marks" />
+          </ClientOnly>
+        </div>
+      </div>
+
+      <div class="slider-mb">
+        <p class="slider-title">文档易理解</p>
+        <div class="slider-body">
+          <ClientOnly>
+            <el-slider show-stops v-model="understandScore" :step="STEP_MB" :show-tooltip="false" :marks="marks" />
+          </ClientOnly>
+        </div>
+      </div>
+    </div>
+    <div class="btn">
+      <OButton color="normal" variant="text" size="large">取消</OButton>
+      <ODivider class="divider-btn" direction="v" />
+      <OButton color="normal" variant="text" size="large" @click="submitScore">确定</OButton>
+    </div>
+  </ODialog>
+  <!-- 文档捉虫弹窗 -->
+  <DocBugDialog v-model="docBugVisible" />
+</template>
+
+<style lang="scss">
+.docs-score-dialog {
+  --dlg-min-width: calc(100% - 32px);
+  --dlg-padding: 16px;
+  --dlg-padding-body-top: 0;
+}
+</style>
+<style lang="scss" scoped>
+.feedback {
+  position: fixed;
+  bottom: 160px;
+  right: 80px;
+  z-index: 10;
+  height: 200px;
+
+  @include respond-to('<=laptop') {
+    right: 24px;
+  }
+}
+.dark-nav {
+  border: 1px solid var(--o-color-control4-light);
+}
+.feedback-wrap {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.nav-box1,
+.nav-box2 {
+  display: flex;
+  flex-direction: column;
+  padding: 16px 12px;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-xs);
+  box-shadow: var(--o-shadow-2);
+}
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--o-color-info1);
+  cursor: pointer;
+  .text-name {
+    @include tip2;
+  }
+
+  @include hover {
+    color: var(--o-color-primary1);
+  }
+}
+:deep(.o-link-label) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.o-link {
+  margin-top: 12px;
+}
+
+.nav-box2 {
+  margin-top: 12px;
+  cursor: pointer;
+
+  .icon-top {
+    color: var(--o-color-info1);
+    @include h2;
+
+    @include hover {
+      color: var(--o-color-primary1);
+    }
+  }
+}
+
+:deep(.o-popup) {
+  cursor: default;
+
+  .o-popup-wrap {
+    box-shadow: none;
+  }
+  .popup-feedback {
+    padding: 16px 24px;
+    background-color: var(--o-color-fill2);
+    box-shadow: var(--o-shadow-2);
+    border-radius: var(--o-radius-xs);
+    --popup-min-width: 315px;
+    top: 12px;
+    position: relative;
+
+    .icon-close {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      color: var(--o-color-info2);
+      cursor: pointer;
+
+      @include h4;
+      transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+
+      @include hover {
+        transform: rotate(180deg);
+        color: var(--o-color-primary1);
+      }
+    }
+  }
+}
+
+.slider {
+  .slider-title {
+    @include tip1;
+    color: var(--o-color-info1);
+    text-align: center;
+  }
+  .slider-body {
+    position: relative;
+    margin-top: 12px;
+  }
+  .slide-tip {
+    width: 28px;
+    height: auto;
+    text-align: center;
+    font-size: var(--o-font_size-tip1);
+    color: var(--o-color-info1);
+    background-color: var(--o-color-fill2);
+    border-radius: var(--o-radius-xs);
+    box-shadow: 0 3px 8px rgba(18, 20, 23, 0.08);
+    backdrop-filter: blur(5px);
+    border: 1px solid var(--o-color-control4-light);
+    position: absolute;
+    top: -36px;
+    transform: translateX(-50%);
+
+    &::after {
+      content: '';
+      display: block;
+      width: 8px;
+      height: 8px;
+      transform: rotateZ(45deg);
+      border: 1px solid #000;
+      border-color: transparent var(--o-color-control4-light) var(--o-color-control4-light) transparent;
+      background-color: var(--o-color-fill2);
+      position: absolute;
+      bottom: -4px;
+      right: 9px;
+    }
+  }
+  .slide-efficiency-tip {
+    left: v-bind(efficiencyPosition);
+  }
+  .slide-correctness-tip {
+    left: v-bind(correctnessPosition);
+  }
+  .slide-integrity-tip {
+    left: v-bind(integrityPosition);
+  }
+  .slide-understand-tip {
+    left: v-bind(understandPosition);
+  }
+}
+
+.slider + .slider {
+  .slider-title {
+    margin-top: 16px;
+  }
+}
+
+.submit-btn {
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
+}
+
+.feedback-mb {
+  bottom: 82px;
+  height: 48px;
+}
+.tips {
+  padding: 12px;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-xs);
+  box-shadow: var(--o-shadow-2);
+  cursor: pointer;
+  display: flex;
+}
+:deep(.o-popup) {
+  --popup-bd: none;
+  .popup-feedback-mb {
+    padding: 16px;
+    background-color: var(--o-color-fill2);
+    box-shadow: var(--o-shadow-2);
+    border-radius: var(--o-radius-xs);
+    position: relative;
+  }
+}
+.nav-item-mb {
+  display: flex;
+  margin-top: 0;
+  :deep(.o-link-label) {
+    flex-direction: row;
+  }
+  .text-name {
+    color: var(--o-color-info1);
+    font-weight: 500;
+    margin-left: 8px;
+  }
+}
+.nav-item-mb + .nav-item-mb {
+  margin-top: 12px;
+}
+
+.slider-mb {
+  display: flex;
+  align-items: center;
+  margin-top: 28px;
+  .slider-title {
+    @include text1;
+    color: var(--o-color-info2);
+    min-width: 72px;
+  }
+  .slider-body {
+    width: calc(100% - 96px);
+    margin-left: 16px;
+  }
+  :deep(.el-slider__marks-text) {
+    margin-top: -24px;
+  }
+}
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 16px;
+  .o-btn {
+    --btn-bg-color-hover: none;
+    --btn-bg-color-active: none;
+    --btn-padding: 0 50px;
+    --btn-color: var(--o-color-info1);
+    font-weight: 500;
+  }
+}
+</style>
diff --git a/docs/.vitepress/src/components/feedback/FeedbackSlider.vue b/docs/.vitepress/src/components/feedback/FeedbackSlider.vue
index def8fd96a5547cc4381f46c2cbd054023e23ac2a..352db708362091020fdde70b28d24787b93702f5 100644
--- a/docs/.vitepress/src/components/feedback/FeedbackSlider.vue
+++ b/docs/.vitepress/src/components/feedback/FeedbackSlider.vue
@@ -5,7 +5,7 @@ import { ElSlider } from 'element-plus';
 
 import IconClose from '~icons/app/icon-close.svg';
 
-// import { postFeedback } from '@/api/api-feedback';
+import { postFeedback } from '@/api/api-feedback';
 import { useLocale } from '@/composables/useLocale';
 
 const props = defineProps({
@@ -89,23 +89,23 @@ const submitFeedback = () => {
     feedbackValue: score.value / 10,
   };
 
-  // postFeedback(params)
-  //   .then((res) => {
-  //     if (res.code === 200) {
-  //       message.success({
-  //         content: t('space.submitSuccess'),
-  //       });
-  //     } else {
-  //       message.warning({
-  //         content: t('feedback.submitBusy'),
-  //       });
-  //     }
-  //   })
-  //   .catch(() => {
-  //     message.warning({
-  //       content: t('feedback.feedbackFailed'),
-  //     });
-  //   });
+  postFeedback(params)
+    .then((res) => {
+      if (res.code === 200) {
+        message.success({
+          content: t('space.submitSuccess'),
+        });
+      } else {
+        message.warning({
+          content: t('feedback.submitBusy'),
+        });
+      }
+    })
+    .catch(() => {
+      message.warning({
+        content: t('feedback.feedbackFailed'),
+      });
+    });
 
   closeFeedbackPopup();
 };
diff --git a/docs/.vitepress/src/components/feedback/FloatingButtonHome.vue b/docs/.vitepress/src/components/feedback/FloatingButtonHome.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0faf3e607654ac2f7849c5ef66b6a8944235b996
--- /dev/null
+++ b/docs/.vitepress/src/components/feedback/FloatingButtonHome.vue
@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { ref, computed, type CSSProperties } from 'vue';
+import { OIcon, OPopup, ODivider, useMessage, OLink } from '@opensig/opendesign';
+
+import IconSmile from '~icons/footer/icon-smile.svg';
+import IconHeadset from '~icons/feedback/icon-headset.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 IconFAQ from '~icons/feedback/icon-faq.svg';
+
+import FeedbackSlider from '@/components/feedback/FeedbackSlider.vue';
+
+import { useLocale } from '@/composables/useLocale';
+
+import { useAppearance } from '@/stores/common';
+import { useThrottleFn } from '@vueuse/core';
+
+const message = useMessage();
+const { locale } = useLocale();
+
+const isDark = computed(() => {
+  return useAppearance().theme === 'dark' ? true : false;
+});
+
+// -------------------- 文档满意度 --------------------
+const feedbackRef = ref();
+const showPopup = ref(false); // 显示满意度调研弹窗
+const showInput = ref(false); // 显示弹窗中输入框
+// 鼠标进入图标区域
+const onMouseEnter = () => {
+  showPopup.value = true;
+};
+// 鼠标离开图标区域
+const onMouseLeave = () => {
+  showPopup.value = false;
+};
+// 滑动滑块
+const changeSlider = (v: boolean) => {
+  showInput.value = v;
+};
+// 关闭弹窗
+const closeFeedbackPopup = (v: boolean) => {
+  showInput.value = v;
+  showPopup.value = v;
+};
+
+// -------------------- 文档反馈 --------------------
+const issuebackRef = ref();
+
+const floatData = ref([
+  {
+    img: computed(() => {
+      return IconChat;
+    }),
+    id: 'forum',
+    text: '论坛',
+    textMb: '论坛求助',
+    tip: '发帖互助解决各类问题',
+    link: 'https://forum.openeuler.org/',
+  },
+  {
+    img: computed(() => {
+      return isDark.value ? IconQuickIssue_dark : IconQuickIssue_light;
+    }),
+    id: 'quickIssue',
+    text: 'Quick',
+    text2: 'Issue',
+    textMb: 'QuickIssue',
+    tip: '快捷提交/查询社区Issues',
+    link: 'https://quickissue.openeuler.org/zh/issues/',
+  },
+  {
+    img: computed(() => {
+      return IconFAQ;
+    }),
+    id: '',
+    text: 'FAQs',
+    tip: '',
+    link: `https://www.openeuler.org/${locale.value}/faq/`,
+  },
+]);
+</script>
+
+<template>
+  <div class="nav-box" :class="isDark ? 'dark-nav' : ''">
+    <div class="nav-item" id="feedback" @mouseenter="onMouseEnter" @mouseleave="useThrottleFn(onMouseLeave, 300)">
+      <OIcon ref="feedbackRef" class="icon-smile">
+        <component :is="IconSmile"> </component>
+      </OIcon>
+
+      <OPopup
+        :visible="showPopup"
+        position="rb"
+        :target="feedbackRef"
+        :auto-hide="showInput ? false : true"
+        wrapper="#feedback"
+        body-class="popup-feedback"
+        :offset="24"
+        trigger="hover"
+      >
+        <FeedbackSlider :show="showInput" @close="closeFeedbackPopup" @input="changeSlider" />
+      </OPopup>
+    </div>
+
+    <ODivider :style="{ '--o-divider-gap': '12px' }" />
+
+    <div class="nav-item">
+      <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>
+</template>
+
+<style lang="scss" scoped>
+.nav-box {
+  display: flex;
+  flex-direction: column;
+  padding: 16px 12px;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-xs);
+  box-shadow: var(--o-shadow-2);
+}
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--o-color-info1);
+  cursor: pointer;
+
+  @include hover {
+    color: var(--o-color-primary1);
+  }
+}
+
+:deep(.o-link-label) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+:deep(.o-popup) {
+  cursor: default;
+
+  .o-popup-wrap {
+    box-shadow: none;
+  }
+
+  .popup-feedback {
+    padding: 16px 24px;
+    background-color: var(--o-color-fill2);
+    box-shadow: var(--o-shadow-2);
+    border-radius: var(--o-radius-xs);
+    --popup-min-width: 315px;
+    top: 12px;
+    position: relative;
+
+    .icon-close {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      color: var(--o-color-info2);
+      cursor: pointer;
+
+      @include h4;
+      transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+
+      @include hover {
+        transform: rotate(180deg);
+        color: var(--o-color-primary1);
+      }
+    }
+  }
+
+  .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;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
index 555f42591e165552edbe8a2923331aa99fbd5dca..4e5368e9cf0d23fddae2683832f7d430f25ddb57 100644
--- a/docs/vite.config.ts
+++ b/docs/vite.config.ts
@@ -13,6 +13,7 @@ export default defineConfig({
         app: FileSystemIconLoader(fileURLToPath(new URL('./.vitepress/src/assets/svg-icons', import.meta.url))),
         home: FileSystemIconLoader(fileURLToPath(new URL('./.vitepress/src/assets/category/home/svg-icons', import.meta.url))),
         footer: FileSystemIconLoader(fileURLToPath(new URL('./.vitepress/src/assets/category/footer/svg-icons', import.meta.url))),
+        feedback: FileSystemIconLoader(fileURLToPath(new URL('./.vitepress/src/assets/category/feedback/svg-icons', import.meta.url))),
       },
     }),
     basicSsl(),
@@ -47,7 +48,7 @@ export default defineConfig({
   server: {
     proxy: {
       '/api-dsapi/': {
-        target: 'https://dsapi.osinfra.cn/',
+        target: 'https://dsapi.test.osinfra.cn/',
         changeOrigin: true,
         rewrite: (path: string) => path.replace(/^\/api-dsapi/, ''),
       },