From 55f052c51b1816ae1187d3c2fcbdd8a616926af7 Mon Sep 17 00:00:00 2001
From: wuming230 <1819845645@qq.com>
Date: Wed, 26 Mar 2025 17:28:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=A6=96=E9=A1=B5=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E5=A2=9E=E5=8A=A0=E6=BB=A1=E6=84=8F=E5=BA=A6=E8=AF=84?=
 =?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/.vitepress/src/App.vue                    |   4 +-
 app/.vitepress/src/assets/style/markdown.scss |   1 -
 .../src/components/FloatingButton.vue         | 102 +++++++++++++++++-
 .../src/components/FloatingButtonDocs.vue     |  20 ++--
 app/.vitepress/src/components/ImgZoomDrag.vue |   6 ++
 .../components/feedback/FeedbackSlider.vue    |  74 ++++++++++++-
 app/.vitepress/src/views/home/TheHome.vue     |   5 +-
 7 files changed, 190 insertions(+), 22 deletions(-)

diff --git a/app/.vitepress/src/App.vue b/app/.vitepress/src/App.vue
index 94e7b82..ce8d2de 100644
--- a/app/.vitepress/src/App.vue
+++ b/app/.vitepress/src/App.vue
@@ -7,7 +7,6 @@ import zhCN from '@opensig/opendesign/es/locale/lang/zh-cn';
 import enUS from '@opensig/opendesign/es/locale/lang/en-us';
 
 import AppHeader from '@/components/header/AppHeader.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';
@@ -47,8 +46,7 @@ router.onBeforeRouteChange = () => {
       <main class="ly-main">
         <Content v-if="isCustomLayout" />
         <LayoutDoc :node-visible="nodeVisible" v-else />
-        <FloatingButton v-if="isCustomLayout" />
-        <FloatingButtonDocs v-else />
+        <FloatingButtonDocs v-if="!isCustomLayout" />
       </main>
     </OScroller>
     <ClientOnly>
diff --git a/app/.vitepress/src/assets/style/markdown.scss b/app/.vitepress/src/assets/style/markdown.scss
index 03da5ca..49ff6b7 100644
--- a/app/.vitepress/src/assets/style/markdown.scss
+++ b/app/.vitepress/src/assets/style/markdown.scss
@@ -155,7 +155,6 @@
 
   img {
     max-width: min(920px, 100%);
-    min-height: 56px;
     border-radius: var(--o-radius-xs);
     margin: 0 auto;
     background-color: transparent;
diff --git a/app/.vitepress/src/components/FloatingButton.vue b/app/.vitepress/src/components/FloatingButton.vue
index 53b4b10..bd9942d 100644
--- a/app/.vitepress/src/components/FloatingButton.vue
+++ b/app/.vitepress/src/components/FloatingButton.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { OIcon } from '@opensig/opendesign';
+import { OIcon, ODialog } from '@opensig/opendesign';
 
-import DocBugDialog from '@/components/doc/DocBugDialog.vue';
 import FloatingButtonHome from '@/components/feedback/FloatingButtonHome.vue';
+import FeedbackSlider from '@/components/feedback/FeedbackSlider.vue';
 
 import IconTop from '~icons/app/icon-top.svg';
+import IconSmile from '~icons/footer/icon-smile.svg';
+import IconClose from '~icons/app/icon-close.svg';
 
 import { scrollToTop } from '@/utils/common';
 
@@ -13,7 +15,7 @@ import { useAppearance } from '@/stores/common';
 import { useScreen } from '@/composables/useScreen';
 import { useLocale } from '@/composables/useLocale';
 
-const { gtPhone } = useScreen();
+const { gtPhone, isPhone } = useScreen();
 const { t } = useLocale();
 
 const isDark = computed(() => {
@@ -40,6 +42,30 @@ onMounted(() => {
 onUnmounted(() => {
   oscrollerDom.value?.removeEventListener('scroll', listenScroll);
 });
+
+// ------------------ 移动端nss评分 -----------------
+const isShow = ref(false);
+
+const dialogVisible = ref(false);
+const isShowFeedbackMb = ref(false);
+
+const toggleDialogVisible = () => {
+  dialogVisible.value = true;
+};
+
+const closeFeedbackMb = () => {
+  isShowFeedbackMb.value = false;
+};
+
+const change = (visible: boolean) => {
+  if (!visible) {
+    dialogVisible.value = false;
+  }
+};
+
+onMounted(() => {
+  isShowFeedbackMb.value = true;
+});
 </script>
 
 <template>
@@ -51,6 +77,28 @@ onUnmounted(() => {
       </div>
     </div>
   </div>
+  <div v-if="isPhone && isShowFeedbackMb" class="feedback-mb">
+    <div class="feedback-mb-head">
+      <div class="head-title" @click="toggleDialogVisible">
+        <OIcon class="icon-box"><component :is="IconSmile"></component> </OIcon>
+        <p>
+          {{ t('feedback.title1') }}<span class="title-name">{{ t('feedback.title2') }}</span
+          >{{ t('feedback.title3') }}
+        </p>
+      </div>
+      <OIcon class="icon-box icon-close" @click="closeFeedbackMb"><component :is="IconClose"></component> </OIcon>
+    </div>
+
+    <ODialog
+      :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"
+      @change="change"
+    >
+      <FeedbackSlider :show="isShow" @close="change" />
+    </ODialog>
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -104,4 +152,52 @@ onUnmounted(() => {
     white-space: pre;
   }
 }
+
+.feedback-mb {
+  position: sticky;
+  bottom: 16px;
+  z-index: 11;
+  width: 100%;
+  margin-bottom: 16px;
+  padding: 0 24px;
+}
+.feedback-mb-head {
+  height: 40px;
+  padding: 8px;
+  background: linear-gradient(90deg, var(--o-color-control2-light) 0%, var(--o-color-control3-light) 100%);
+  border-radius: var(--o-radius-xs);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  .o-icon {
+    font-size: 16px;
+  }
+  .icon-close {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    cursor: pointer;
+    transform: translateY(-50%);
+    transition: all 0.25s cubic-bezier(0, 0, 0, 1);
+
+    @include hover {
+      transform: translateY(-50%) rotate(180deg);
+      color: var(--o-color-primary1);
+    }
+  }
+  .head-title {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    @include text1;
+    .title-name {
+      font-weight: 500;
+    }
+    .o-icon {
+      margin-right: 8px;
+      color: var(--o-color-primary1);
+    }
+  }
+}
 </style>
diff --git a/app/.vitepress/src/components/FloatingButtonDocs.vue b/app/.vitepress/src/components/FloatingButtonDocs.vue
index a9255c4..0d41464 100644
--- a/app/.vitepress/src/components/FloatingButtonDocs.vue
+++ b/app/.vitepress/src/components/FloatingButtonDocs.vue
@@ -169,7 +169,7 @@ const scoreVisible = ref(false);
 const STEP_MB = 1;
 const RATE_MAX_MB = 10;
 
-const RATE_INDEX = Array(RATE_MAX_MB)
+const RATE_INDEX = Array(RATE_MAX_MB + 1)
   .fill(0)
   .map((_, index) => index);
 
@@ -298,7 +298,7 @@ const submitArticleFeedback = () => {
                     v-model="item.value"
                     size="small"
                     :step="STEP"
-                    :min="1"
+                    :min="0"
                     :max="10"
                     :marks="marks"
                     show-stops
@@ -361,7 +361,7 @@ const submitArticleFeedback = () => {
   <ODialog
     :visible="scoreVisible"
     :phone-half-full="true"
-    :style="{ '--dlg-head-padding': '16px 32px 0', '--dlg-body-padding': '24px 32px 16px' }"
+    :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="docs-score-dialog"
     @change="change"
   >
@@ -373,14 +373,14 @@ const submitArticleFeedback = () => {
         <p class="title">{{ item.name[locale] }}</p>
         <div class="slider-container">
           <div class="rate-stop">
-            <div v-for="(_, index) in RATE_INDEX" :key="index" class="stop" :style="{ left: `${index * 11}%` }">{{ index + 1 }}</div>
+            <div v-for="(_, index) in RATE_INDEX" :key="index" class="stop" :style="{ left: `${index * 10}%` }">{{ index }}</div>
           </div>
           <div class="score-container-mb">
             <el-slider
               v-model="item.value"
               size="small"
               :step="STEP_MB"
-              :min="1"
+              :min="0"
               :max="10"
               :marks="marks_mb"
               show-stops
@@ -667,17 +667,16 @@ const submitArticleFeedback = () => {
 
 .railway-mb {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  margin-top: 26px;
   .title {
     @include text1;
     color: var(--o-color-info2);
-    min-width: 72px;
   }
   .slider-container {
-    flex-grow: 1;
+    width: 100%;
     position: relative;
-    margin-left: 8px;
+    margin-top: 24px;
   }
   .rate-stop {
     position: absolute;
@@ -710,6 +709,9 @@ const submitArticleFeedback = () => {
     }
   }
 }
+.railway-mb + .railway-mb {
+  margin-top: 16px;
+}
 .btn {
   display: flex;
   align-items: center;
diff --git a/app/.vitepress/src/components/ImgZoomDrag.vue b/app/.vitepress/src/components/ImgZoomDrag.vue
index 70d6f9e..2b1dada 100644
--- a/app/.vitepress/src/components/ImgZoomDrag.vue
+++ b/app/.vitepress/src/components/ImgZoomDrag.vue
@@ -310,4 +310,10 @@ onUnmounted(() => {
 img {
   width: 100%;
 }
+
+@include in-dark {
+  img {
+    @include img-in-dark;
+  }
+}
 </style>
diff --git a/app/.vitepress/src/components/feedback/FeedbackSlider.vue b/app/.vitepress/src/components/feedback/FeedbackSlider.vue
index b26b4a2..e0d3d58 100644
--- a/app/.vitepress/src/components/feedback/FeedbackSlider.vue
+++ b/app/.vitepress/src/components/feedback/FeedbackSlider.vue
@@ -1,12 +1,13 @@
 <script lang="ts" setup>
 import { ref, computed, type CSSProperties } from 'vue';
-import { OIcon, OTextarea, OButton, useMessage } from '@opensig/opendesign';
+import { OIcon, OTextarea, OButton, useMessage, ODivider } from '@opensig/opendesign';
 import { ElSlider } from 'element-plus';
 
 import IconClose from '~icons/app/icon-close.svg';
 
 import { postFeedback } from '@/api/api-feedback';
 import { useLocale } from '@/composables/useLocale';
+import { useScreen } from '@/composables/useScreen';
 
 const props = defineProps({
   show: {
@@ -17,6 +18,7 @@ const props = defineProps({
 
 const message = useMessage();
 const { t } = useLocale();
+const { gtPhone, isPhone } = useScreen();
 
 interface MarkT {
   style: CSSProperties;
@@ -100,10 +102,17 @@ const submitFeedback = () => {
 
   closeFeedbackPopup();
 };
+
+// ------------------ 移动端nss评分 -----------------
+const RATE_MAX_MB = 10;
+
+const RATE_INDEX = Array(RATE_MAX_MB + 1)
+  .fill(0)
+  .map((_, index) => index);
 </script>
 <template>
   <div class="feedback-slider">
-    <OIcon class="icon-close" @click="closeFeedbackPopup"><IconClose /></OIcon>
+    <OIcon v-if="gtPhone" class="icon-close" @click="closeFeedbackPopup"><IconClose /></OIcon>
 
     <p class="slider-title">
       {{ t('feedback.title1') }}<strong>{{ t('feedback.title2') }}</strong
@@ -111,10 +120,14 @@ const submitFeedback = () => {
     </p>
 
     <div class="slider-body">
-      <div v-show="isShow" class="slider-tip">
+      <div v-show="isShow && gtPhone" class="slider-tip">
         {{ scoreTip }}
       </div>
 
+      <div v-if="isPhone" class="rate-stop">
+        <div v-for="(_, index) in RATE_INDEX" :key="index" class="stop" :style="{ left: `${index * 10}%` }">{{ index }}</div>
+      </div>
+
       <el-slider v-model="score" :step="10" :marks="marks" show-stops :show-tooltip="false" @input="showFeedbackInput" />
     </div>
 
@@ -130,12 +143,17 @@ const submitFeedback = () => {
         <a :href="forumLink" target="_blank">{{ t('feedback.moreInfo2') }}</a>
         <span>{{ t('feedback.moreInfo3') }}</span>
       </p>
-      <div class="submit-btn">
-        <OButton color="primary" size="medium" class="submit" @click="submitFeedback">
+      <div v-if="gtPhone" class="submit-btn">
+        <OButton color="primary" size="medium" class="submit" :disabled="!inputText" @click="submitFeedback">
           {{ t('feedback.submit') }}
         </OButton>
       </div>
     </div>
+    <div v-if="isPhone" class="btn-box">
+      <OButton color="normal" variant="text" size="large" @click="closeFeedbackPopup">{{ t('feedback.cancel') }}</OButton>
+      <ODivider class="divider-btn" direction="v" />
+      <OButton color="normal" variant="text" size="large" :disabled="!inputText" @click="submitFeedback">{{ t('feedback.confirmTitle') }}</OButton>
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -163,6 +181,11 @@ const submitFeedback = () => {
     margin: 0 4px;
   }
 
+  @include respond-to('phone') {
+    padding-top: 0;
+    margin-top: 36px;
+  }
+
   .slider-tip {
     width: 28px;
     height: auto;
@@ -275,6 +298,9 @@ const submitFeedback = () => {
   @include respond-to('<=pad_v') {
     padding: 0 3px;
   }
+  @include respond-to('phone') {
+    margin-top: 8px;
+  }
 }
 
 .reason {
@@ -309,6 +335,16 @@ const submitFeedback = () => {
         background-color: var(--o-color-primary1);
         color: var(--o-color-white);
       }
+
+      &.o-btn-disabled {
+        border-color: var(--o-color-primary4);
+        color: var(--o-color-primary4);
+        @include hover {
+          border-color: var(--o-color-primary4);
+          background-color: transparent;
+          color: var(--o-color-primary4);
+        }
+      }
     }
 
     @include respond-to('<=pad_v') {
@@ -351,4 +387,32 @@ const submitFeedback = () => {
     } */
   }
 }
+
+.rate-stop {
+  position: absolute;
+  display: flex;
+  width: calc(100% - 16px);
+  left: 0;
+  top: -36px;
+  margin-top: 12px;
+  color: var(--o-color-info4);
+  height: 16px;
+  @include text2;
+  div {
+    position: absolute;
+  }
+}
+.btn-box {
+  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/app/.vitepress/src/views/home/TheHome.vue b/app/.vitepress/src/views/home/TheHome.vue
index 361236b..3009f9b 100644
--- a/app/.vitepress/src/views/home/TheHome.vue
+++ b/app/.vitepress/src/views/home/TheHome.vue
@@ -6,6 +6,8 @@ import { OInput, OIcon, ORow, OCol, OLink, OCard, OFigure, OPopup, ODropdownItem
 
 import ContentWrapper from '@/components/ContentWrapper.vue';
 import AppFooter from '@/components/AppFooter.vue';
+import FloatingButton from '@/components/FloatingButton.vue';
+
 import IconSearch from '~icons/app/icon-search.svg';
 
 import { cardList, businessScenarioList, toolList, hotSearchList } from '@/config/home';
@@ -16,7 +18,6 @@ import type { SearchRecommendT } from '@/@types/type-search';
 import { getSearchRecommend } from '@/api/api-search';
 import axios from 'axios';
 
-
 const appearanceStore = useAppearance();
 const searchStore = useSearchingStore();
 const { lePad, lePadV, isPhone } = useScreen();
@@ -221,6 +222,8 @@ watch(searchValue, () => {
       </ORow>
     </ContentWrapper>
 
+    <FloatingButton />
+
     <AppFooter :lang="locale" />
   </div>
 </template>
-- 
Gitee