浮光球 · Nest Orb

<template>
  <NestOrb
    :items="shortcuts"
    active-id="home"
    :bottom-inset="92"
    menu-label="快捷入口"
    hint="双击悬浮球，直接回到聊天"
    @select="handleShortcut"
    @default="goToChat"
  />
</template>

<script setup>
import { NestOrb } from "nest-orb-vue";
import "nest-orb-vue/style.css";

const shortcuts = [
  { id: "call", label: "通话", icon: "☎" },
  { id: "tasks", label: "清单", icon: "✓" },
  { id: "journal", label: "日记", icon: "□" },
  { id: "home", label: "主页", icon: "⌂" },
  { id: "chat", label: "聊天", icon: "…" },
];

function handleShortcut(item) {
  console.log("selected", item.id);
}

function goToChat() {
  console.log("default action");
}
</script>

<template>
  <div class="message-composer">输入消息……</div>
  <NestOrb
    ref="pet"
    appearance="owl"
    perch-selector=".message-composer"
    :size="58"
    :margin="7"
    @dock-change="handleDock"
    @mood-change="handleMood"
  />
</template>

<script setup>
import { ref } from "vue";
import { NestOrb } from "nest-orb-vue";
import "nest-orb-vue/style.css";

const pet = ref();

function celebrate() {
  pet.value?.setMood("happy", 900);
}

function handleDock(dock) {
  console.log(dock); // left | right | perch
}

function handleMood(mood) {
  console.log(mood); // awake | wink | happy | sleep | surprise
}
</script>

<NestOrb :items="shortcuts">
  <template #item-icon="{ item }">
    <MyIcon :name="item.icon" />
  </template>
</NestOrb>

<NestOrb :items="shortcuts">
  <template #orb="{ dragging }">
    <img
      class="my-avatar"
      src="/avatar.webp"
      :class="{ 'is-dragging': dragging }"
      alt=""
    />
  </template>
</NestOrb>