2c1ae41c3e
统一修改多处UI组件的主色调，从蓝色(#1890ff)变更为紫色(#462AA0)，以保持视觉一致性。同时优化了文件上传逻辑和滚动到底部功能。 refactor(dom): 提取滚动相关操作为工具函数 将滚动到底部逻辑封装为可复用的工具函数，并在多处调用位置进行替换，提高代码复用性。 fix(upload): 修复上传中文件点击打开问题 增加上传状态判断，避免在上传过程中点击文件时打开新窗口。 chore(deps): 更新依赖包版本 升级@types/node和watchpack等依赖包版本。
58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
|
import { useDialogueStore } from '@/store'
|
|
import { DoubleDown } from '@icon-park/vue-next'
|
|
import { scrollToBottom } from '@/utils/dom'
|
|
|
|
defineProps(['modelValue'])
|
|
|
|
const dialogueStore = useDialogueStore()
|
|
|
|
// 聊天版本滚动到底部
|
|
const onSkipBottom = () => {
|
|
console.log('onSkipBottom')
|
|
scrollToBottom()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 置底按钮 -->
|
|
<div class="skip-bottom pointer" :class="{ show: modelValue }" @click="onSkipBottom">
|
|
<span v-if="dialogueStore.unreadBubble">{{ dialogueStore.unreadBubble }} 条未读消息</span>
|
|
<span v-else>回到底部</span>
|
|
<n-icon size="14" color="#fff" :component="DoubleDown" />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.skip-bottom {
|
|
position: absolute;
|
|
right: 58px;
|
|
bottom: -40px;
|
|
min-width: 100px;
|
|
height: 28px;
|
|
font-size: 12px;
|
|
background-color: #462AA0;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 2px;
|
|
transition: bottom 1s ease-in-out;
|
|
border-radius: 10px 10px 0 0;
|
|
|
|
span {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
&.show {
|
|
bottom: 0px;
|
|
}
|
|
}
|
|
|
|
html[theme-mode='dark'] {
|
|
.skip-bottom {
|
|
background-color: #2c2c32;
|
|
}
|
|
}
|
|
</style>
|