xinyin025/YiAi
1
0
Fork 0
mirror of https://github.com/xiaoyiweb/YiAi.git synced 2025-09-17 08:46:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

简化主题切换 优化抖动

Browse Source
This commit is contained in:
小易 2024-02-01 18:52:54 +08:00
parent e5b06111e7
commit 822ff0a51d
6 changed files with 98 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
chat/index.html
View File

@ -190,11 +190,6 @@
} }
} }
} }
console.log(
"%c本项目作者----小易，联系QQ：805239273",
"background-color:rgb(30,30,30);border-radius:4px;font-size:12px;padding:4px;color:rgb(220,208,129);"
)
</script> </script>
</body> </body>

2
chat/src/layout/footerBar/index.vue
View File

@ -80,7 +80,7 @@ onBeforeMount(() => {
<a <a
v-for="item in menuLista" v-for="item in menuLista"
:key="item.id" :key="item.id"
:class="[isActive(item) ? 'text-[#4b9e5f] dark:text-[#86dfba]' : '']" :class="[isActive(item) ? 'text-[#3076fd] dark:text-[#3076fd]' : '']"
class="cursor-pointer text-center leading-4" class="cursor-pointer text-center leading-4"
@click="handleToPage(item)" @click="handleToPage(item)"
> >

6
chat/src/layout/siderBar/index.vue
View File

@ -221,7 +221,7 @@ watch(
class="text-2xl transition-all" class="text-2xl transition-all"
:class="[ :class="[
isActive(item) isActive(item)
? 'text-[#4b9e5f] dark:text-[#86dfba]' ? 'text-[#3076fd] dark:text-[#3076fd]'
: '', : '',
]" ]"
/> />
@ -235,7 +235,7 @@ watch(
class="text-[12px] mt-1 margin-auto whitespace-nowrap overflow-hidden" class="text-[12px] mt-1 margin-auto whitespace-nowrap overflow-hidden"
:class="[ :class="[
isActive(item) isActive(item)
? 'text-[#4b9e5f] dark:text-[#86dfba] ' ? 'text-[#3076fd] dark:text-[#86dfba] '
: 'text-[#999999]', : 'text-[#999999]',
]" ]"
>{{ item.menuTipText }}</span> --> >{{ item.menuTipText }}</span> -->
@ -334,7 +334,7 @@ watch(
} }
.btns { .btns {
box-shadow: 0 5px 16px #16993b; box-shadow: 0 5px 16px #0636e6;
} }
.borderRadis { .borderRadis {

84
chat/src/views/chat/chatBase.vue
View File

@ -122,7 +122,7 @@ const firstScroll = ref<boolean>(true)
const tipsRef = ref<any>(null) const tipsRef = ref<any>(null)
const tipText = ref('') const tipText = ref('')
const tipsHeight = ref<any>(null) const tipsHeight = ref<any>(null)
const dataBase64 = ref(null) let dataBase64 = ref(null)
const fileName = ref('') const fileName = ref('')
const isImageFile = ref(false) const isImageFile = ref(false)
const showDeleteIcon = ref(false) const showDeleteIcon = ref(false)
@ -279,6 +279,7 @@ async function uploadFile() {
} finally { } finally {
dataBase64.value = null dataBase64.value = null
curFile = null curFile = null
showProgressModal.value = false
} }
} }
@ -838,14 +839,14 @@ onUnmounted(() => {
<NTooltip trigger="hover" placement="bottom-end" :disabled="isMobile"> <NTooltip trigger="hover" placement="bottom-end" :disabled="isMobile">
<template #trigger> <template #trigger>
<button <button
class="shrink0 flex h-8 w-8 items-center justify-center rounded border transition hover:bg-[#eef0f3] dark:border-neutral-700 dark:hover:bg-[#33373c]" class="shrink0 flex h-8 w-8 items-center justify-center rounded border transition dark:border-neutral-700"
:class="{ 'bg-[#5782f4]': !usingContext }"
@click="toggleUsingContext" @click="toggleUsingContext"
> >
<span <span
class=""
:class="{ :class="{
'text-[#3076fd]': usingContext, 'text-[#3076fd]': usingContext,
'text-[#a8071a]': !usingContext, 'text-[#ffffff]': !usingContext,
}" }"
><SvgIcon ><SvgIcon
class="text-lg" class="text-lg"
@ -913,55 +914,42 @@ onUnmounted(() => {
/> />
</div> </div>
</div> </div>
<NTooltip trigger="hover" :disabled="isMobile">
<NTooltip v-if="isMobile" trigger="hover" :disabled="isMobile">
<template #trigger> <template #trigger>
<button <button
class="shrink0 flex h-8 w-8 items-center justify-center rounded border transition hover:bg-[#eef0f3] dark:border-neutral-700 dark:hover:bg-[#33373c]" class="shrink0 flex h-8 w-8 items-center justify-center rounded border transition dark:border-neutral-700"
@click="handleSignIn" @click="toggleUsingNetwork"
> :class="{ 'bg-[#5782f4]': usingNetwork }"
<span class="text-base text-slate-500 dark:text-slate-400">
<SvgIcon icon="streamline-emojis:wrapped-gift-1" />
</span>
</button>
</template>
签到领福利
</NTooltip>
<NPopover v-if="isMobile" trigger="click">
<template #trigger>
<button
class="shrink0 flex h-8 w-8 items-center justify-center rounded border transition dark:border-neutral-700 dark:hover:bg-[#33373c]"
> >
<span class="text-base text-slate-500 dark:text-slate-400"> <span class="text-base text-slate-500 dark:text-slate-400">
<SvgIcon <SvgIcon
:icon=" icon="zondicons:network"
theme === 'dark' class="cursor-pointer mb-0.5"
? 'noto-v1:last-quarter-moon-face' :class="{
: 'twemoji:sun' 'text-[#3076fd]': !usingNetwork,
" 'text-[#fff]': usingNetwork,
}"
/> />
</span> </span>
</button> </button>
</template> </template>
<div> {{ usingNetwork ? '关闭' : '开启' }}联网访问
<div class="flex items-center gap-4"> </NTooltip>
<template v-for="item of themeOptions" :key="item.key"> <button
<NButton v-show="isMobile"
size="small" @click="appStore.setTheme(theme === 'dark' ? 'light' : 'dark')"
:type="item.key === theme ? 'info' : undefined" class="shrink0 flex h-8 w-8 items-center justify-center rounded border transition dark:border-neutral-700 dark:hover:bg-[#33373c]"
@click="appStore.setTheme(item.key)" >
> <span class="text-base text-slate-500 dark:text-slate-400">
<template #icon> <SvgIcon
<SvgIcon :icon="
:icon="item.icon" theme === 'dark'
:style="{ color: item.color }" ? 'noto-v1:last-quarter-moon-face'
/> : 'twemoji:sun'
</template> "
</NButton> />
</template> </span>
</div> </button>
</div>
</NPopover>
<NTooltip trigger="hover" :disabled="isMobile" placement="bottom"> <NTooltip trigger="hover" :disabled="isMobile" placement="bottom">
<template #trigger> <template #trigger>
<NButton <NButton
@ -1109,7 +1097,7 @@ onUnmounted(() => {
</div> </div>
</div> </div>
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div <!-- <div
class="flex items-center text-neutral-400 cursor-pointer hover:text-[#3076fd]" class="flex items-center text-neutral-400 cursor-pointer hover:text-[#3076fd]"
> >
<span class="ml-2 mr-2 text-xs" @click="toggleUsingNetwork" <span class="ml-2 mr-2 text-xs" @click="toggleUsingNetwork"
@ -1136,7 +1124,7 @@ onUnmounted(() => {
> >
| |
</div> </div>
</div> </div> -->
<NButton <NButton
type="primary" type="primary"
@ -1176,7 +1164,7 @@ onUnmounted(() => {
>{{ globaelConfig?.filingNumber }}</a >{{ globaelConfig?.filingNumber }}</a
> >
</div> </div>
<!-- <NModal v-model:show="showProgressModal" :mask-closable="false"> <NModal v-model:show="showProgressModal" :mask-closable="false">
<NCard <NCard
style="width: 80%" style="width: 80%"
title="上传文件中" title="上传文件中"
@ -1192,7 +1180,7 @@ onUnmounted(() => {
processing processing
/> />
</NCard> </NCard>
</NModal> --> </NModal>
</div> </div>
</template> </template>

7
chat/src/views/chat/components/Header/index.vue
View File

@ -180,7 +180,7 @@ function handleSignIn() {
</div> </div>
</div> </div>
</NPopover> --> </NPopover> -->
<!--
<NTooltip v-if="isMobile" trigger="hover" :disabled="isMobile"> <NTooltip v-if="isMobile" trigger="hover" :disabled="isMobile">
<template #trigger> <template #trigger>
<button <button
@ -193,12 +193,13 @@ function handleSignIn() {
</button> </button>
</template> </template>
签到领福利 签到领福利
</NTooltip> --> </NTooltip>
<NTooltip trigger="hover" :disabled="isMobile"> <NTooltip trigger="hover" :disabled="isMobile">
<template #trigger> <template #trigger>
<button <button
class="flex h-8 w-8 items-center justify-center rounded border transition hover:bg-[#eef0f3] dark:border-neutral-700 dark:hover:bg-[#33373c]" class="flex h-8 w-8 items-center justify-center rounded border transition hover:bg-[#eef0f3] dark:border-neutral-700 dark:hover:bg-[#33373c]"
@click="handleExport" @click="handleExport"
v-show="!isMobile"
> >
<span class="text-base text-slate-500 dark:text-slate-400"> <span class="text-base text-slate-500 dark:text-slate-400">
<SvgIcon <SvgIcon
@ -215,7 +216,7 @@ function handleSignIn() {
class="flex h-8 w-8 items-center justify-center rounded border transition hover:bg-[#eef0f3] dark:border-neutral-700 dark:hover:bg-[#33373c]" class="flex h-8 w-8 items-center justify-center rounded border transition hover:bg-[#eef0f3] dark:border-neutral-700 dark:hover:bg-[#33373c]"
@click="handleClear" @click="handleClear"
> >
<span class="text-base text-slate-500 dark:text-slate-400"><SvgIcon icon="material-symbols:delete-outline" /></span> <span class="text-base text-slate-500 dark:text-slate-400"><SvgIcon icon="material-symbols:delete-outline"/></span>
</button> </button>
</template> </template>
删除本页内容 删除本页内容

98
chat/src/views/chat/hooks/useScroll.ts
View File

@ -1,61 +1,71 @@
import type { Ref } from 'vue' import type { Ref } from "vue";
import { nextTick, ref } from 'vue' import { nextTick, ref } from "vue";
type ScrollElement = HTMLDivElement | null type ScrollElement = HTMLDivElement | null;
interface ScrollReturn { interface ScrollReturn {
scrollRef: Ref<ScrollElement> scrollRef: Ref<ScrollElement>;
scrollToBottom: () => Promise<void> scrollToBottom: () => Promise<void>;
scrollToTop: () => Promise<void> scrollToTop: () => Promise<void>;
scrollToBottomIfAtBottom: () => Promise<void> scrollToBottomIfAtBottom: () => Promise<void>;
} }
// 节流函数 // 节流函数
function throttle(func: () => void, delay: number) { function throttle(func: () => void, delay: number) {
let isThrottled = false; let isThrottled = false;
return function throttledFunction() { return function throttledFunction() {
if (!isThrottled) { if (!isThrottled) {
func(); func();
isThrottled = true; isThrottled = true;
setTimeout(() => { setTimeout(() => {
isThrottled = false; isThrottled = false;
}, delay); }, delay);
} }
}; };
} }
export function useScroll(): ScrollReturn { export function useScroll(): ScrollReturn {
const scrollRef = ref<ScrollElement>(null) const scrollRef = ref<ScrollElement>(null);
const scrollToBottom = async () => { const scrollToBottom = async () => {
await nextTick() let previous = 0;
if (scrollRef.value) let now = Date.now();
scrollRef.value.scrollTop = scrollRef.value.scrollHeight if (now - previous > 1000) {
} previous = now;
await nextTick();
if (scrollRef.value)
scrollRef.value.scrollTop = scrollRef.value.scrollHeight;
}
};
const scrollToTop = async () => { const scrollToTop = async () => {
await nextTick() await nextTick();
if (scrollRef.value) if (scrollRef.value) scrollRef.value.scrollTop = 0;
scrollRef.value.scrollTop = 0 };
}
// 使用节流函数包装 scrollToBottomIfAtBottom // 使用节流函数包装 scrollToBottomIfAtBottom
const throttledScrollToBottomIfAtBottom = throttle(scrollToBottomIfAtBottom, 100); const throttledScrollToBottomIfAtBottom = throttle(
scrollToBottomIfAtBottom,
100
);
async function scrollToBottomIfAtBottom() { async function scrollToBottomIfAtBottom() {
if (scrollRef.value) { if (scrollRef.value) {
const threshold = 300; const threshold = 300;
const distanceToBottom = scrollRef.value.scrollHeight - scrollRef.value.scrollTop - scrollRef.value.clientHeight; const distanceToBottom =
if (distanceToBottom <= threshold) scrollRef.value.scrollHeight -
scrollRef.value.scrollTop = scrollRef.value.scrollHeight; scrollRef.value.scrollTop -
} scrollRef.value.clientHeight;
} if (distanceToBottom <= threshold)
scrollRef.value.scrollTop = scrollRef.value.scrollHeight;
}
}
return { return {
scrollRef, scrollRef,
scrollToBottom, scrollToBottom,
scrollToTop, scrollToTop,
scrollToBottomIfAtBottom: throttledScrollToBottomIfAtBottom, scrollToBottomIfAtBottom: throttledScrollToBottomIfAtBottom,
} };
} }