chore:优化书签样式
This commit is contained in:
parent
9fb32f1074
commit
a847d91886
|
|
@ -57,7 +57,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, shallowRef, computed, onMounted, defineAsyncComponent, triggerRef } from 'vue'
|
||||
import { ref, shallowRef, computed, onMounted, defineAsyncComponent } from 'vue'
|
||||
import Sidebar from './components/Sidebar.vue'
|
||||
import ChatView from './components/ChatView.vue'
|
||||
|
||||
|
|
@ -249,6 +249,7 @@ function createStreamCallbacks(convId, { updateConvList = true } = {}) {
|
|||
return {
|
||||
onThinkingStart() {
|
||||
updateStreamField(convId, 'streamThinking', streamThinking, '')
|
||||
updateStreamField(convId, 'streamContent', streamContent, '')
|
||||
},
|
||||
onThinking(text) {
|
||||
updateStreamField(convId, 'streamThinking', streamThinking, prev => (prev || '') + text)
|
||||
|
|
|
|||
|
|
@ -174,21 +174,12 @@ function scrollToMessage(msgId) {
|
|||
if (!scrollContainer.value) return
|
||||
const el = scrollContainer.value.querySelector(`[data-msg-id="${msgId}"]`)
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
activeMessageId.value = msgId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function scrollToBottom(smooth = true) {
|
||||
nextTick(() => {
|
||||
const el = scrollContainer.value
|
||||
if (el) {
|
||||
el.scrollTo({ top: el.scrollHeight, behavior: smooth ? 'smooth' : 'instant' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 流式时使用 instant 滚动,避免 smooth 动画与内容增长互相打架造成抖动
|
||||
watch([() => props.messages.length, () => props.streamingContent], () => {
|
||||
nextTick(() => {
|
||||
|
|
|
|||
|
|
@ -2,27 +2,31 @@
|
|||
<Teleport to="body">
|
||||
<div v-if="messages.length > 0" class="bookmark-rail">
|
||||
<div
|
||||
v-for="(msg, idx) in messages"
|
||||
v-for="msg in userMessages"
|
||||
:key="msg.id"
|
||||
class="bookmark"
|
||||
:class="{ active: activeId === msg.id, user: msg.role === 'user' }"
|
||||
:class="{ active: activeId === msg.id }"
|
||||
@click="$emit('scrollTo', msg.id)"
|
||||
>
|
||||
<div class="bookmark-dot"></div>
|
||||
<div class="bookmark-label">{{ msg.role === 'user' ? '用户' : 'Claw' }} · {{ preview(msg) }}</div>
|
||||
<div class="bookmark-label">{{ preview(msg) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
messages: { type: Array, required: true },
|
||||
activeId: { type: String, default: null },
|
||||
})
|
||||
|
||||
defineEmits(['scrollTo'])
|
||||
|
||||
const userMessages = computed(() => props.messages.filter(m => m.role === 'user'))
|
||||
|
||||
function preview(msg) {
|
||||
if (!msg.text) return '...'
|
||||
const clean = msg.text.replace(/[#*`~>\-\[\]()]/g, '').replace(/\s+/g, ' ').trim()
|
||||
|
|
@ -84,19 +88,15 @@ function preview(msg) {
|
|||
}
|
||||
|
||||
.bookmark-dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 1.5px;
|
||||
flex-shrink: 0;
|
||||
background: var(--text-tertiary);
|
||||
background: #3b82f6;
|
||||
opacity: 0.35;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.bookmark.user .bookmark-dot {
|
||||
background: #3b82f6;
|
||||
}
|
||||
|
||||
.bookmark.active .bookmark-dot,
|
||||
.bookmark-rail:hover .bookmark-dot {
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -158,10 +158,10 @@ const processItems = computed(() => {
|
|||
}
|
||||
}
|
||||
|
||||
// 流式中追加正在增长的文本(仅当最后步骤不是 text 类型时)
|
||||
// 流式中追加正在增长的文本(仅当还没有 text 类型的步骤时)
|
||||
if (props.streaming && props.streamingContent) {
|
||||
const lastStep = items[items.length - 1]
|
||||
if (!lastStep || lastStep.type !== 'text') {
|
||||
const hasTextStep = items.some(it => it.type === 'text')
|
||||
if (!hasTextStep) {
|
||||
items.push({
|
||||
type: 'text',
|
||||
content: props.streamingContent,
|
||||
|
|
|
|||
Loading…
Reference in New Issue