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>
</body>

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

@ -80,7 +80,7 @@ onBeforeMount(() => {
<a
v-for="item in menuLista"
: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"
@click="handleToPage(item)"
>

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

@ -221,7 +221,7 @@ watch(
class="text-2xl transition-all"
:class="[
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="[
isActive(item)
? 'text-[#4b9e5f] dark:text-[#86dfba] '
? 'text-[#3076fd] dark:text-[#86dfba] '
: 'text-[#999999]',
]"
>{{ item.menuTipText }}</span> -->
@ -334,7 +334,7 @@ watch(
}
.btns {
box-shadow: 0 5px 16px #16993b;
box-shadow: 0 5px 16px #0636e6;
}
.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 tipText = ref('')
const tipsHeight = ref<any>(null)
const dataBase64 = ref(null)
let dataBase64 = ref(null)
const fileName = ref('')
const isImageFile = ref(false)
const showDeleteIcon = ref(false)
@ -279,6 +279,7 @@ async function uploadFile() {
} finally {
dataBase64.value = null
curFile = null
showProgressModal.value = false
}
}
@ -838,14 +839,14 @@ onUnmounted(() => {
<NTooltip trigger="hover" placement="bottom-end" :disabled="isMobile">
<template #trigger>
<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"
>
<span
class=""
:class="{
'text-[#3076fd]': usingContext,
'text-[#a8071a]': !usingContext,
'text-[#ffffff]': !usingContext,
}"
><SvgIcon
class="text-lg"
@ -913,55 +914,42 @@ onUnmounted(() => {
/>
</div>
</div>
<NTooltip v-if="isMobile" trigger="hover" :disabled="isMobile">
<NTooltip trigger="hover" :disabled="isMobile">
<template #trigger>
<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]"
@click="handleSignIn"
>
<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]"
class="shrink0 flex h-8 w-8 items-center justify-center rounded border transition dark:border-neutral-700"
@click="toggleUsingNetwork"
:class="{ 'bg-[#5782f4]': usingNetwork }"
>
<span class="text-base text-slate-500 dark:text-slate-400">
<SvgIcon
:icon="
theme === 'dark'
? 'noto-v1:last-quarter-moon-face'
: 'twemoji:sun'
"
icon="zondicons:network"
class="cursor-pointer mb-0.5"
:class="{
'text-[#3076fd]': !usingNetwork,
'text-[#fff]': usingNetwork,
}"
/>
</span>
</button>
</template>
<div>
<div class="flex items-center gap-4">
<template v-for="item of themeOptions" :key="item.key">
<NButton
size="small"
:type="item.key === theme ? 'info' : undefined"
@click="appStore.setTheme(item.key)"
>
<template #icon>
<SvgIcon
:icon="item.icon"
:style="{ color: item.color }"
/>
</template>
</NButton>
</template>
</div>
</div>
</NPopover>
{{ usingNetwork ? '关闭' : '开启' }}联网访问
</NTooltip>
<button
v-show="isMobile"
@click="appStore.setTheme(theme === 'dark' ? 'light' : 'dark')"
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">
<SvgIcon
:icon="
theme === 'dark'
? 'noto-v1:last-quarter-moon-face'
: 'twemoji:sun'
"
/>
</span>
</button>
<NTooltip trigger="hover" :disabled="isMobile" placement="bottom">
<template #trigger>
<NButton
@ -1109,7 +1097,7 @@ onUnmounted(() => {
</div>
</div>
<div class="flex justify-between items-center">
<div
<!-- <div
class="flex items-center text-neutral-400 cursor-pointer hover:text-[#3076fd]"
>
<span class="ml-2 mr-2 text-xs" @click="toggleUsingNetwork"
@ -1136,7 +1124,7 @@ onUnmounted(() => {
>
|
</div>
</div>
</div> -->
<NButton
type="primary"
@ -1176,7 +1164,7 @@ onUnmounted(() => {
>{{ globaelConfig?.filingNumber }}</a
>
</div>
<!-- <NModal v-model:show="showProgressModal" :mask-closable="false">
<NModal v-model:show="showProgressModal" :mask-closable="false">
<NCard
style="width: 80%"
title="上传文件中"
@ -1192,7 +1180,7 @@ onUnmounted(() => {
processing
/>
</NCard>
</NModal> -->
</NModal>
</div>
</template>

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

@ -180,7 +180,7 @@ function handleSignIn() {
</div>
</div>
</NPopover> -->
<!--
<NTooltip v-if="isMobile" trigger="hover" :disabled="isMobile">
<template #trigger>
<button
@ -193,12 +193,13 @@ function handleSignIn() {
</button>
</template>
签到领福利
</NTooltip> -->
</NTooltip>
<NTooltip trigger="hover" :disabled="isMobile">
<template #trigger>
<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]"
@click="handleExport"
v-show="!isMobile"
>
<span class="text-base text-slate-500 dark:text-slate-400">
<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]"
@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>
</template>
删除本页内容

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

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