Tour 漫游式引导

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, Inline, Input, Text, Tour, type TourStep } from '@hina-ui/vue'

  const open = ref(false)
  const name = ref('')
  const error = ref('')

  const steps: TourStep[] = [
    {
      target: '#tour-interactive-name',
      title: '给项目起个名字',
      description: '在输入框里写下名字，再点「下一步」。',
    },
    {
      target: '#tour-interactive-save',
      title: '保存',
      description: '名字会出现在项目列表里。',
      blockTarget: true,
    },
  ]

  async function beforeChange(next: number, previous: number) {
    if (previous !== 1 || next < previous) return true
    await new Promise(resolve => setTimeout(resolve, 600))
    error.value = name.value.trim() ? '' : '名字不能为空'
    return !error.value
  }
</script>

<template>
  <Inline gap="sm" align="center" wrap>
    <Input id="tour-interactive-name" v-model="name" placeholder="项目名称" class="w-56" />
    <Button id="tour-interactive-save">保存</Button>
    <Button variant="ghost" tone="neutral" @click="open = true">开始引导</Button>
  </Inline>
  <Tour v-model:open="open" :steps="steps" :before-change="beforeChange" @finish="error = ''">
    <template #content="{ step, current }">
      <Text tone="muted" size="sm">{{ step.description }}</Text>
      <Text v-if="error && current === 1" tone="danger" size="sm">{{ error }}</Text>
    </template>
  </Tour>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, Inline, Tour, type TourStep } from '@hina-ui/vue'

  const open = ref(false)

  const steps: TourStep[] = [
    { target: '#tour-beacon-export', title: '导出', description: '新增了导出为 PDF。' },
    {
      target: '#tour-beacon-history',
      title: '历史版本',
      description: '每次保存都会留下一个版本。',
    },
  ]
</script>

<template>
  <Inline gap="lg" align="center" wrap>
    <Button id="tour-beacon-export" variant="outline" tone="neutral">导出</Button>
    <Button id="tour-beacon-history" variant="outline" tone="neutral">历史版本</Button>
    <Button variant="ghost" tone="neutral" @click="open = !open">
      {{ open ? '隐藏提示' : '显示新功能' }}
    </Button>
  </Inline>
  <Tour v-model:open="open" :steps="steps" beacon />
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, Indicator, Inline, Kbd, Text, Tour, type TourStep } from '@hina-ui/vue'

  const open = ref(false)

  const steps: TourStep[] = [
    { target: '#tour-custom-command', title: '命令面板', description: '随时打开命令面板。' },
    { target: '#tour-custom-theme', title: '主题', description: '在浅色与深色之间切换。' },
  ]
</script>

<template>
  <Inline gap="sm" align="center" wrap>
    <Button id="tour-custom-command" variant="outline" tone="neutral">命令</Button>
    <Button id="tour-custom-theme" variant="outline" tone="neutral">主题</Button>
    <Button variant="ghost" tone="neutral" @click="open = true">开始引导</Button>
  </Inline>
  <Tour v-model:open="open" :steps="steps" locked>
    <template #content="{ step, current }">
      <Text tone="muted" size="sm">{{ step.description }}</Text>
      <Text v-if="current === 1" size="sm" class="mt-2">
        按
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
        打开。
      </Text>
    </template>
    <template #footer="{ current, total, next, prev }">
      <Inline gap="sm" align="center" justify="between">
        <Inline gap="xs" aria-hidden="true">
          <Indicator
            v-for="index in total"
            :key="index"
            size="sm"
            :tone="index === current ? 'accent' : 'neutral'"
            :class="index === current ? undefined : 'opacity-25'"
          />
        </Inline>
        <Inline gap="sm">
          <Button v-if="current > 1" size="sm" variant="ghost" tone="neutral" @click="prev">
            返回
          </Button>
          <Button size="sm" @click="next">{{ current === total ? '知道了' : '继续' }}</Button>
        </Inline>
      </Inline>
    </template>
  </Tour>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, Inline, Tour, type TourStep } from '@hina-ui/vue'

  const open = ref(false)

  const steps: TourStep[] = [
    { target: '#tour-plain-filter', title: '筛选', description: '页面在引导期间仍可操作。' },
    { target: '#tour-plain-sort', title: '排序', description: '点击切换升序与降序。' },
  ]
</script>

<template>
  <Inline gap="sm" align="center" wrap>
    <Button id="tour-plain-filter" variant="outline" tone="neutral">筛选</Button>
    <Button id="tour-plain-sort" variant="outline" tone="neutral">排序</Button>
    <Button variant="ghost" tone="neutral" @click="open = true">开始引导</Button>
  </Inline>
  <Tour v-model:open="open" :steps="steps" :mask="false" />
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, Drawer, Inline, List, ListItem, Text, Tour, type TourStep } from '@hina-ui/vue'

  const open = ref(false)
  const step = ref(1)
  const contents = ref(false)
  const page = ref(12)

  const steps: TourStep[] = [
    {
      target: '#tour-play-contents',
      title: '目录',
      description: '点这里打开目录。',
      play: async ({ pointer }) => {
        await pointer.move('#tour-play-contents')
        await pointer.tap()
      },
    },
    {
      target: '#tour-play-chapter',
      title: '跳到章节',
      description: '目录里点章节名就能跳过去。',
      wait: 2000,
      play: async ({ pointer, defer, waitFor }) => {
        contents.value = true
        defer(() => (contents.value = false))
        await waitFor('#tour-play-chapter')
        await pointer.move('#tour-play-chapter')
        await pointer.tap()
      },
    },
    {
      target: '#tour-play-page',
      title: '翻页',
      description: '按 ← 和 → 翻页。',
      play: async ({ pointer, sleep }) => {
        await pointer.key('→')
        page.value += 1
        await sleep(400)
        await pointer.key('←')
        page.value -= 1
      },
    },
  ]

  function start() {
    step.value = 1
    open.value = true
  }
</script>

<template>
  <Inline gap="sm" align="center" wrap>
    <Button id="tour-play-contents" variant="outline" tone="neutral" @click="contents = true">
      目录
    </Button>
    <Text id="tour-play-page" tone="muted" class="tabular-nums">第 {{ page }} 页</Text>
    <Button variant="ghost" tone="neutral" @click="start">看看怎么用</Button>
  </Inline>
  <Drawer v-model:open="contents" title="目录">
    <template #content>
      <List>
        <ListItem>第一章 春分</ListItem>
        <ListItem>第二章 远雷</ListItem>
        <ListItem id="tour-play-chapter">第三章 雨夜</ListItem>
      </List>
    </template>
  </Drawer>
  <Tour v-model:open="open" v-model:step="step" :steps="steps" mask="dim" block-page />
</template>