test/HuLa
1
0
Fork 0
mirror of https://gitee.com/HuLaSpark/HuLa.git synced 2024-12-01 19:28:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🐛 fix(system): 修复艾特框滚动和选中问题

Browse Source
This commit is contained in:
nongyehong 2024-04-14 05:33:43 +08:00
parent 62d86faf73
commit 76d3c9ff6c
5 changed files with 48 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -7,7 +7,7 @@
<title>HuLa</title>
<!--引入iconpark图标库-->
<script defer src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_30895_72.a7fc795dcfe2d7ad7f910f611b19e32c.js"></script>
<script defer src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_30895_74.8e6b944337ca34340316ef7142c36f48.js"></script>
</head>
<body>

42
src/components/rightBox/msgInput/index.vue → src/components/rightBox/MsgInput.vue
View File

@ -127,8 +127,8 @@ const handleAitKeyChange = (direction: 1 | -1) => {
const currentIndex = filteredList.value.findIndex((item) => item.key === selectedAitKey.value)
const newIndex = Math.max(0, Math.min(currentIndex + direction, filteredList.value.length - 1))
selectedAitKey.value = filteredList.value[newIndex].key
// 获取新选中项在列表中的索引，并滚动到该位置
virtualListInst.value?.scrollTo({ index: selectedAitKey.value })
// 获取新选中项在列表中的索引，并滚动到该位置(使用key来进行定位)
virtualListInst.value?.scrollTo({ key: selectedAitKey.value })
}
const closeMenu = (event: any) => {
@ -140,9 +140,11 @@ const closeMenu = (event: any) => {
onMounted(() => {
onKeyStroke('Enter', (e) => {
e.preventDefault()
const item = filteredList.value.find((item) => item.key === selectedAitKey.value) as MockItem
handleAit(item)
if (ait.value && selectedAitKey.value > -1) {
e.preventDefault()
const item = filteredList.value.find((item) => item.key === selectedAitKey.value) as MockItem
handleAit(item)
}
})
onKeyStroke('ArrowUp', (e) => {
e.preventDefault()
@ -178,33 +180,5 @@ defineExpose({ messageInputDom, triggerInputEvent, insertNode })
</script>
<style scoped lang="scss">
#message-input {
padding: 4px 24px 4px 4px; /* 输入框内填充 */
font-size: 14px; /* 字体大小 */
color: inherit; /* 继承颜色 */
cursor: text; /* 文本输入光标 */
resize: none; /* 不允许调整尺寸 */
background: none; /* 无背景 */
border: none; /* 边框样式，可根据需求修改 */
border-radius: 0; /* 边框圆角 */
outline: none; /* 点击时无轮廓 */
min-height: 90px; /* 最小高度 */
line-height: 20px; /* 行高 */
overflow: auto; /* 内容过多时允许滚动 */
flex: 1; /* 弹性盒自适应填充可用空间 */
caret-color: #13987f; /* 光标颜色，可根据需求调整 */
white-space: pre-wrap; /* 保留空白符号并正常换行 */
word-break: break-word; /* 在长单词或URL地址内部进行换行 */
}
.ait {
@apply w-200px h-fit max-h-190px bg-[--center-bg-color] rounded-8px p-[5px_0_5px_5px];
box-shadow: 2px 2px 12px 2px var(--box-shadow-color);
border: 1px solid var(--box-shadow-color);
.ait-item {
@apply h-26px text-[--text-color] text-14px p-[5px_0_5px_10px] mr-5px rounded-6px cursor-pointer;
}
}
.active {
background-color: var(--bg-group-hover);
}
@import '@/styles/scss/msg-input';
</style>

9
src/hooks/useMsgInput.ts
View File

@ -66,6 +66,15 @@ export const useMsgInput = (messageInputDom: Ref) => {
}
})
/* 当ait人员列表发生变化的时候始终select第一个 */
watch(filteredList, async (v) => {
if (filteredList.value.length > 0) {
await nextTick(() => {
selectedAitKey.value = v[0].key
})
}
})
watch(chatKey, (v) => {
chat.value.sendKey = v
})

29
src/styles/scss/msg-input.scss Normal file
View File

@ -0,0 +1,29 @@
#message-input {
padding: 4px 24px 4px 4px; /* 输入框内填充 */
font-size: 14px; /* 字体大小 */
color: inherit; /* 继承颜色 */
cursor: text; /* 文本输入光标 */
resize: none; /* 不允许调整尺寸 */
background: none; /* 无背景 */
border: none; /* 边框样式，可根据需求修改 */
border-radius: 0; /* 边框圆角 */
outline: none; /* 点击时无轮廓 */
min-height: 90px; /* 最小高度 */
line-height: 20px; /* 行高 */
overflow: auto; /* 内容过多时允许滚动 */
flex: 1; /* 弹性盒自适应填充可用空间 */
caret-color: #13987f; /* 光标颜色，可根据需求调整 */
white-space: pre-wrap; /* 保留空白符号并正常换行 */
word-break: break-word; /* 在长单词或URL地址内部进行换行 */
}
.ait {
@apply w-200px h-fit max-h-190px bg-[--center-bg-color] rounded-8px p-[5px_0_5px_5px];
box-shadow: 2px 2px 12px 2px var(--box-shadow-color);
border: 1px solid var(--box-shadow-color);
.ait-item {
@apply h-26px text-[--text-color] text-14px p-[5px_0_5px_10px] mr-5px rounded-6px cursor-pointer;
}
}
.active {
background-color: var(--bg-group-hover);
}

2
src/typings/components.d.ts vendored
View File

@ -18,7 +18,7 @@ declare module 'vue' {
Emoji: typeof import('./../components/rightBox/emoji/index.vue')['default']
Image: typeof import('./../components/rightBox/renderMessage/Image.vue')['default']
InfoPopover: typeof import('./../components/common/InfoPopover.vue')['default']
MsgInput: typeof import('./../components/rightBox/msgInput/index.vue')['default']
MsgInput: typeof import('./../components/rightBox/MsgInput.vue')['default']
NaiveProvider: typeof import('./../components/common/NaiveProvider.vue')['default']
NAlert: typeof import('naive-ui')['NAlert']
NAvatar: typeof import('naive-ui')['NAvatar']