opensource/airi
3
0
Fork 0
mirror of https://github.com/moeru-ai/airi.git synced 2026-10-30 19:34:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(stage-tamagotchi): keep the standing chat dock in place (#3209)

Browse Source
This commit is contained in:
Neko
2026-10-29 07:27:17 +08:00
committed by GitHub
parent 5d97ac41b7
commit abea2e7b71
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/stage-tamagotchi/src/renderer/pages/chat-floating.vue
+17 -5
View File
@@ -8,7 +8,7 @@ import { ChatSessionsDrawer } from '@proj-airi/stage-ui/components'
import { useDanmakuFeedExpiry } from '@proj-airi/stage-ui/composables/use-danmaku-feed-expiry'
import { useAiriCardStore } from '@proj-airi/stage-ui/stores/modules/airi-card'
import { useSettings } from '@proj-airi/stage-ui/stores/settings'
import { refDebounced, useEventListener, useFocusWithin, useLocalStorage, useMutationObserver, usePreferredReducedMotion } from '@vueuse/core'
import { refDebounced, useElementSize, useEventListener, useFocusWithin, useLocalStorage, useMutationObserver, usePreferredReducedMotion } from '@vueuse/core'
import { animate, createSpring } from 'animejs'
import { storeToRefs } from 'pinia'
import { computed, nextTick, onMounted, onScopeDispose, shallowRef, useTemplateRef, watch } from 'vue'
@@ -142,12 +142,23 @@ useMutationObserver(dockZone, () => {
const dockOpen = computed(() => !verticalDock.value || cursorNearDock.value || cursorNearDockLately.value || dockFocused.value || dockMenuOpen.value)
const dockElement = useTemplateRef<HTMLElement>('dock')
/** The padding of the zone along a dock that stands up, in pixels. It matches the `py-4` of the zone. */
const DOCK_ZONE_PADDING = 16
// A dock that stands up centers on the dock alone. The island below it only makes the zone longer, so the dock does
// not move when the island buds off or goes back.
const { height: dockHeight } = useElementSize(dockElement, undefined, { box: 'border-box' })
const verticalDockZoneStyle = computed(() => ({ transform: `translateY(${-(DOCK_ZONE_PADDING + dockHeight.value / 2)}px)` }))
/**
* The bar of a closed dock: 3px wide and 56px tall, at the middle of the dock, on its side of the window edge.
* The bar of a closed dock: 8px wide and 56px tall, at the middle of the dock, on its side of the window edge.
* The dock stands 10px from the edge, just past the hover scrollbar, so the bar sits between the scrollbar and the messages.
*/
const DOCK_BAR = { width: 3, height: 56, edgeInset: 0 }
const DOCK_OPEN_CLIP = 'inset(0px 0px 0px 0px round 999px)'
const DOCK_BAR = { width: 8, height: 56, edgeInset: 0 }
/**
* The clip of an open dock. It reaches 4px past the dock, so the focus ring of a button is not cut. The ring is 2px
* wide and 2px from the button, and the button is 2px inside the dock.
*/
const DOCK_OPEN_CLIP = 'inset(-4px -4px -4px -4px round 999px)'
/** The clip that leaves only the bar of the dock. */
function dockBarClip(dock: HTMLElement) {
@@ -463,8 +474,9 @@ function moveByKeyboard(delta: WindowDelta) {
<div
ref="dock-zone"
:class="verticalDock
? ['pointer-events-none absolute top-1/2 z-10 w-12 flex flex-col items-center gap-2 py-4 -translate-y-1/2', characterOnLeft ? 'left-2.5 pr-4' : 'right-2.5 pl-4']
? ['pointer-events-none absolute top-1/2 z-10 w-12 flex flex-col items-center gap-2 py-4', characterOnLeft ? 'left-2.5 pr-4' : 'right-2.5 pl-4']
: ['flex items-center gap-2 px-4', characterOnLeft ? 'flex-row-reverse' : '']"
:style="verticalDock ? verticalDockZoneStyle : undefined"
>
<!--
The dock stays over the island, so the island can hide under its edge. A dock that stands up draws its