Guide

基于 Tooltip 的功能引导提示系统，支持标题、描述和图片。通过锚点 ref 联动触发器与内容，适合在输入框、按钮等元素旁挂载一枚 tips 图标，hover 后展示说明信息。

Anatomy

• Guide引导根节点，继承 Tooltip 全部能力（含 touchable）
  • GuideAnchor将包装元素注册为锚点 ref，供 GuideTrigger 定位
  • GuideTrigger触发器，默认渲染 i-tripo:tips 图标并自动绑定锚点
  • GuideContent浮层内容，提供 title / description / img 等预设布局

基本用法

纯文字引导

hover GuideTrigger 图标时展示标题 + 描述。

提示词

<script setup lang="ts">
import { Guide, GuideAnchor, GuideContent, GuideTrigger } from '@tripo3d/design';
</script>

<template>
  <Guide>
    <GuideAnchor class="flex gap-2 items-center">
      <span>提示词</span>
      <GuideTrigger />
    </GuideAnchor>
    <GuideContent
      side="right"
      title="功能说明"
      description="描述您想要生成的 3D 模型外观、材质和风格。"
    />
  </Guide>
</template>

纯文字引导(无title)

hover GuideTrigger 图标时展示标题 + 描述。

提示词

<script setup lang="ts">
import { Guide, GuideAnchor, GuideContent, GuideTrigger } from '@tripo3d/design';
</script>

<template>
  <Guide>
    <GuideAnchor class="flex gap-2 items-center">
      <span>提示词</span>
      <GuideTrigger />
    </GuideAnchor>
    <GuideContent
      side="right"
      description="描述您想要生成的 3D 模型外观、材质和风格。"
    />
  </Guide>
</template>

带图片

img + title + description

HD Texture

<Guide>
  <GuideAnchor class="flex gap-2 items-center">
    <span>HD Texture</span>
    <GuideTrigger />
  </GuideAnchor>
  <GuideContent
    side="right"
    img="https://cdn.example.com/hd-texture.png"
    alt="HD Texture 示例"
    title="HD Texture"
    description="为模型生成更高分辨率的 PBR 贴图。"
  />
</Guide>

自定义内容(Slot)

每个点位(img / title / description)都提供同名具名 slot,传入即覆盖对应 prop 的默认渲染,其余点位仍走 prop。下例用 #img slot 把图片位替换为轮播,title / description 依旧由 prop 提供。

#img slot 渲染轮播

图片点位用 Carousel 覆盖,标题与描述仍走 prop。

风格预览

<script setup lang="ts">
import { Carousel, CarouselContent, CarouselDot, CarouselItem, Guide, GuideAnchor, GuideContent, GuideTrigger } from '@tripo3d/design';
</script>

<template>
  <Guide>
    <GuideAnchor class="flex gap-2 items-center">
      <span>风格预览</span>
      <GuideTrigger />
    </GuideAnchor>
    <GuideContent
      side="right"
      title="多风格预览"
      description="切换查看不同风格的生成效果。"
    >
      <!-- #img 覆盖图片点位，title / description 仍由 prop 渲染 -->
      <template #img>
        <Carousel class="w-full">
          <CarouselContent>
            <CarouselItem v-for="n in 3" :key="n">
              <img
                :src="`https://cdn.example.com/style-${n}.png`"
                :alt="`风格 ${n}`"
                class="rounded-2 w-full"
              >
            </CarouselItem>
          </CarouselContent>
          <CarouselDot />
        </Carousel>
      </template>
    </GuideContent>
  </Guide>
</template>

触摸设备

touchable

触摸设备上允许点击触发（而非仅 hover）。

点击或悬停

<Guide touchable>
  <GuideAnchor class="flex gap-2 items-center">
    <span>点击或悬停</span>
    <GuideTrigger />
  </GuideAnchor>
  <GuideContent title="触摸支持" description="在触摸设备上可通过点击查看" />
</Guide>

API

Guide Props

继承 TooltipProps，额外提供：

名称	类型	默认值	说明
touchable	boolean	false	触摸设备上支持点击触发

GuideTrigger Props

继承 Omit<TooltipTriggerProps, 'reference'>，默认内容为 i-tripo:tips 图标并自动绑定锚点 ref。

GuideAnchor

无 Props，将包装元素注册为锚点 ref。

GuideContent Props

名称	类型	默认值	说明
title	string	—	引导标题
description	string	—	引导描述文字
img	string	—	图片 URL
alt	string	—	图片 alt 文字
class	string	—	容器 class

GuideContent Slots

插槽	作用域	说明
default	—	自定义整块内容，替代内置的 img / title / description 布局
img	—	覆盖图片点位，回落到 img / alt prop
title	—	覆盖标题点位，回落到 title prop
description	—	覆盖描述点位，回落到 description prop