AppShell 应用框架

<script setup lang="ts">
  import { AppShell, NavLink, Sidebar, Text } from '@hina-ui/vue'
</script>

<template>
  <AppShell class="border-line h-72 w-full rounded-lg border">
    <template #sidebar>
      <Sidebar>
        <NavLink href="#" active label="概览">概览</NavLink>
        <NavLink href="#" label="我的书架">我的书架</NavLink>
      </Sidebar>
    </template>

    <Text size="sm" tone="muted" class="block p-6">主区域的内容放在默认插槽里。</Text>
  </AppShell>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { FileText, House, Images, Settings } from '@lucide/vue'
  import {
    AppShell,
    Avatar,
    Heading,
    Inline,
    NavLink,
    Sidebar,
    SidebarGroup,
    SidebarLabel,
    SidebarTrigger,
    Stack,
    Text,
    type SidebarState,
  } from '@hina-ui/vue'

  const selected = ref('overview')
  const groups = [
    {
      label: '内容',
      items: [
        { id: 'overview', label: '概览', icon: House },
        { id: 'articles', label: '文章', icon: FileText },
        { id: 'library', label: '媒体库', icon: Images },
      ],
    },
    { label: '管理', items: [{ id: 'settings', label: '设置', icon: Settings }] },
  ]
  const examples = ref<{ mode: 'rail' | 'hidden'; state: SidebarState }[]>([
    { mode: 'rail', state: 'expanded' },
    { mode: 'hidden', state: 'expanded' },
  ])
</script>

<template>
  <Stack gap="lg" class="w-full">
    <Stack v-for="example in examples" :key="example.mode" gap="sm">
      <Text size="sm" tone="faint">collapsible="{{ example.mode }}" · {{ example.state }}</Text>
      <AppShell
        v-model:sidebar="example.state"
        :collapsible="example.mode"
        mobile-title="Hina UI"
        class="border-line h-112 w-full rounded-lg border"
      >
        <template #sidebar>
          <Sidebar>
            <template #icon>
              <Avatar src="/favicon.png" name="Hina UI" class="rounded-md" />
            </template>
            <template #wordmark>
              <Stack gap="none">
                <Text weight="medium" class="truncate">Hina UI</Text>
                <Text size="xs" tone="muted" class="truncate">工作空间</Text>
              </Stack>
            </template>

            <SidebarGroup v-for="group in groups" :key="group.label" :label="group.label">
              <NavLink
                v-for="item in group.items"
                :key="item.id"
                :href="`#${item.id}`"
                :label="item.label"
                :active="selected === item.id"
                @click.prevent="selected = item.id"
              >
                <template #icon><component :is="item.icon" /></template>
                {{ item.label }}
              </NavLink>
            </SidebarGroup>

            <template #footer>
              <Inline gap="sm" align="center" :wrap="false">
                <Avatar src="/avatars/paper.webp" name="星见书音" />
                <SidebarLabel as="div" class="flex-1">
                  <Stack gap="none">
                    <Text size="sm" weight="medium" class="truncate">星见书音</Text>
                    <Text size="xs" tone="muted" class="truncate">管理员</Text>
                  </Stack>
                </SidebarLabel>
              </Inline>
            </template>
          </Sidebar>
        </template>
        <template #header>
          <SidebarTrigger />
          <Heading :level="2" size="sm" class="truncate">创作者中心</Heading>
        </template>
        <Stack gap="sm" class="p-6">
          <Heading :level="3" size="sm">
            {{ groups.flatMap(group => group.items).find(item => item.id === selected)?.label }}
          </Heading>
          <Text size="sm" tone="muted">切换侧栏，观察标识、分组与页脚的位置。窄屏时打开抽屉。</Text>
        </Stack>
      </AppShell>
    </Stack>
  </Stack>
</template>

<script setup lang="ts">
  import { AppShell, Heading, NavLink, Sidebar, Stack, Text } from '@hina-ui/vue'

  const paragraphs = Array.from({ length: 12 }, (_, i) => `第 ${i + 1} 段正文。`)
</script>

<template>
  <AppShell class="border-line h-72 w-full rounded-lg border">
    <template #sidebar>
      <Sidebar>
        <NavLink href="#" active label="正文">正文</NavLink>
        <NavLink href="#" label="注释">注释</NavLink>
      </Sidebar>
    </template>

    <template #header>
      <Heading :level="2" size="sm">标题栏不随内容滚动</Heading>
    </template>

    <Stack gap="sm" class="p-6">
      <Text v-for="p in paragraphs" :key="p" size="sm" tone="muted">{{ p }}</Text>
    </Stack>
  </AppShell>
</template>

<script setup lang="ts">
  import {
    AppShell,
    Banner,
    Heading,
    Link,
    NavLink,
    Sidebar,
    SidebarTrigger,
    Text,
  } from '@hina-ui/vue'
</script>

<template>
  <AppShell collapsible="hidden" class="border-line h-96 w-full rounded-lg border">
    <template #banner>
      <Banner closable>
        Hina UI 1.2 已发布。
        <Link href="#" underline>查看更新说明</Link>
      </Banner>
    </template>

    <template #sidebar>
      <Sidebar>
        <NavLink href="#" active label="首页">首页</NavLink>
        <NavLink href="#" label="我的书架">我的书架</NavLink>
      </Sidebar>
    </template>

    <template #header>
      <SidebarTrigger />
      <Heading :level="2" size="sm">首页</Heading>
    </template>

    <Text size="sm" tone="muted" class="block p-6">关闭公告条后，侧栏与主区域一起上移补满。</Text>
  </AppShell>
</template>