From 8536393858c47801506d5a96f82d1e52f073e0a6 Mon Sep 17 00:00:00 2001 From: wuming230 <1819845645@qq.com> Date: Fri, 7 Mar 2025 16:12:42 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AF=84=E5=88=86=E5=8F=8D=E9=A6=88?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/assets/style/element-plus/slider.scss | 107 ++-- .../src/components/FloatingButtonDocs.vue | 494 ++++++++---------- docs/.vitepress/src/layouts/LayoutDoc.vue | 2 +- 3 files changed, 258 insertions(+), 345 deletions(-) diff --git a/docs/.vitepress/src/assets/style/element-plus/slider.scss b/docs/.vitepress/src/assets/style/element-plus/slider.scss index b696a15..96fe482 100644 --- a/docs/.vitepress/src/assets/style/element-plus/slider.scss +++ b/docs/.vitepress/src/assets/style/element-plus/slider.scss @@ -2,97 +2,64 @@ @use '@/assets/style/mixin/font.scss' as *; .el-slider { - --el-slider-height: 8px; - --el-slider-border-radius: 8px; - --el-slider-button-wrapper-offset: -13px; + --el-slider-height: 6px; + --el-slider-border-radius: 4px; + --el-slider-button-wrapper-size: 14px; + --el-slider-button-wrapper-offset: -4px; + --el-slider-button-size: 14px; --el-slider-runway-bg-color: var(--o-color-fill1); - - height: 8px; - padding-left: 4px; - @include respond-to('<=pad_v') { - --el-slider-height: 12px; - --el-slider-border-radius: 12px; - - padding: 0 4px; - height: 12px; - } + height: 14px; .el-slider__bar { - --el-slider-height: 10px; - + --el-slider-height: 8px; background: linear-gradient(90deg, #07caff 0%, #5882ff 100%); top: -1px; left: -4px !important; - @include respond-to('<=pad_v') { - --el-slider-height: 16px; - - top: -2px; - } - } - - .el-slider__button-wrapper + div { - transform: translateY(2px); - position: relative; - z-index: 2; - @include respond-to('<=pad_v') { - transform: translateY(5px); - } - - & + div { - transform: translateY(3px); - @include respond-to('<=pad_v') { - transform: translateY(4px); - } - - & > .el-slider__stop:nth-of-type(1) { - transform: translateX(2px); - } - } - } - - .el-slider__marks-text { - opacity: 0; - margin-top: 0; - @include respond-to('<=pad_v') { - opacity: 1; - top: -48px; - color: var(--o-color-info1); - @include text2; - } } .el-slider__stop { width: 2px; height: 2px; - background-color: var(--o-color-info3); - @include respond-to('<=pad_v') { - width: 3px; - height: 3px; - } + top: 50%; + margin-top: -1px; + background-color: var(--o-color-info4); } .el-slider__marks-stop { - background-color: var(--o-color-fill2); + background-color: var(--o-color-info4-inverse); &:last-child { - transform: translate(-6px, -1px); - background-color: var(--o-color-info3); + transform: translate(-3px, -1px); + background-color: var(--o-color-info4); + } + } + + .el-slider__runway { + background-color: transparent; + &::before { + content: ''; + position: absolute; + width: calc(100% + 3px); + inset: 0; + right: 4px; + background-color: var(--o-color-fill3); + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } } .el-slider__button { - position: relative; + border: solid 5px var(--o-color-fill2); box-shadow: var(--o-shadow-1); - width: 20px; - height: 20px; - border: 6px solid var(--o-color-fill2); - background-color: var(--o-color-link1); + background: linear-gradient(90deg, #07caff 0%, #5882ff 100%); + } - &::after { - content: ''; - display: inline-block; - height: 100%; - vertical-align: middle; - } + .el-slider__button-wrapper { + display: flex; + } + + .el-slider__marks { + width: 2px; + height: 2px; } } diff --git a/docs/.vitepress/src/components/FloatingButtonDocs.vue b/docs/.vitepress/src/components/FloatingButtonDocs.vue index 22f0302..4114b8e 100644 --- a/docs/.vitepress/src/components/FloatingButtonDocs.vue +++ b/docs/.vitepress/src/components/FloatingButtonDocs.vue @@ -3,8 +3,6 @@ import { ref, computed, reactive, onMounted, onUnmounted, type CSSProperties } f import { OIcon, OPopup, OLink, ODialog, ODivider, OButton } from '@opensig/opendesign'; import { ElSlider } from 'element-plus'; -import DocBugDialog from '@/components/DocBugDialog.vue'; - import IconScore from '~icons/feedback/icon-score.svg'; import IconClose from '~icons/app/icon-close.svg'; @@ -22,50 +20,16 @@ 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 scoreRef = ref(); -const isScoreShow = computed(() => { - return isEfficiencyShow.value || isCorrectnessShow.value || isIntegrityShow.value || isUnderstandShow.value; -}); +const showPopup = ref(false); // 显示评分详细 +const currentScore = ref(0); // 当前评分 // 鼠标进入图标区域 const onMouseEnter = () => { @@ -76,29 +40,57 @@ 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([ +const STEP = 1; +const RATE_MAX = 10; + +const multiRate = reactive([ + { + name: '文档获取效率', + value: 0, + isChange: false, + }, + { + name: '文档正确性', + value: 0, + isChange: false, + }, + { + name: '文档完整性', + value: 0, + isChange: false, + }, + { + name: '文档易理解', + value: 0, + isChange: false, + }, +]); + +interface Mark { + style: CSSProperties; + label: string; +} +type Marks = Record; +const marks: Marks = Array(RATE_MAX + 1) + .fill(0) + .map((_, i) => i) + .reduce((acc, cur) => { + acc[cur] = ''; + return acc; + }, Object.create(null)); + +const updateItemScore = (value: number, index: number) => { + showPopup.value = true; +}; + +const updateItemScoreAfter = () => {}; + +// -------------------- 论坛、issues -------------------- +const floatData = reactive([ { img: computed(() => { return IconChat; @@ -122,10 +114,26 @@ const floatData = ref([ }, ]); -const feedbackMbRef = ref(); +// -------------------- 移动端 -------------------- +const scoreMbRef = ref(); const scoreVisible = ref(false); -const STEP_MB = 25; -const floatDataMb = ref([ + +const STEP_MB = 1; +const RATE_MAX_MB = 5; + +const RATE_INDEX = Array(RATE_MAX_MB) + .fill(0) + .map((_, index) => index); + +const marks_mb: Marks = Array(RATE_MAX_MB + 1) + .fill(0) + .map((_, i) => i) + .reduce((acc, cur) => { + acc[cur] = ''; + return acc; + }, Object.create(null)); + +const floatDataMb = reactive([ { img: computed(() => { return IconScore; @@ -133,44 +141,27 @@ const floatDataMb = ref([ id: 'score', textMb: '我要评分', }, - ...floatData.value, + ...floatData, ]); -interface Mark { - style: CSSProperties; - label: string; -} - -type Marks = Record; - -const marks = reactive({ - 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 cancelScore = () => { scoreVisible.value = false; }; +const submitScore = () => {}; +// -------------------- 回到顶部 -------------------- // 页面滚动大于一屏时，显示回到顶部悬浮按钮 const showBackTop = ref(false); const oscrollerDom = ref(); @@ -195,21 +186,24 @@ onUnmounted(() => {