<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
  <scroll-view class="lab-scroll xtf-page-scroll" direction="vertical"><view class="lab-page xtf-page-scroll-content">
    <view class="lab-header"><text class="lab-eyebrow">NAVIGATION / 07</text><text class="lab-title">Navbar 导航栏</text></view>
    <view class="lab-section"><text class="lab-heading">标题与返回</text><view class="lab-surface"><XtfNavbar title="订单详情" subtitle="订单编号 2026093001" show-back border @back="action = '触发返回事件'" /><view class="nav-content"><text class="lab-caption">待发货</text><text class="nav-order">便携咖啡杯 × 1</text><text class="lab-caption">实付 ¥ 89.00</text></view></view></view>
    <view class="lab-section"><text class="lab-heading">表单操作</text><view class="lab-surface"><XtfNavbar title="编辑地址" left-text="取消" right-text="保存" border @left-click="address = saved; action = '已恢复保存的地址'" @right-click="saveAddress" /><view class="nav-content"><input class="lab-field" v-model="address" placeholder="填写收货地址" /></view></view></view>
    <view class="lab-section"><text class="lab-heading">自定义标题与右侧插槽</text><XtfNavbar mode="glass" left-icon="back" @left-click="action = '自定义导航返回'"><view class="nav-center"><text class="lab-item-title">项目空间</text><text class="lab-caption">12 位协作者</text></view><template #right><view class="nav-icon" @click="action = '已打开搜索'"><XtfIcon name="search" size="sm" /></view></template></XtfNavbar></view>
    <view class="lab-section"><text class="lab-heading">透明背景</text><view class="nav-scene"><XtfNavbar title="品牌故事" mode="transparent" show-back right-icon="favorite" @back="action = '透明导航返回'" @right-click="favorite = !favorite; action = favorite ? '已收藏' : '已取消收藏'" /><view class="nav-scene-copy"><text class="nav-scene-title">日常，有序。</text><text class="nav-scene-caption">LINK STUDIO / 2026</text></view></view></view>
    <text class="lab-result">{{ action }}</text>
  </view></scroll-view>
  </XtfConfigProvider>
</template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
import XtfConfigProvider from '@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue'
const demoTheme = useDemoTheme()
import { ref } from "vue"
import XtfNavbar from "@/uni_modules/xtf-linkuiunix/components/xtf-navbar/xtf-navbar.uvue"
import XtfIcon from "@/uni_modules/xtf-linkuiunix/components/xtf-icon/xtf-icon.uvue"
const action = ref("暂无导航操作")
const saved = ref("杭州市西湖区文三路 88 号")
const address = ref(saved.value)
const favorite = ref(false)
function saveAddress(): void { if (address.value.trim().length == 0) { action.value = "请填写收货地址"; return }; saved.value = address.value.trim(); action.value = "地址已保存（本地演示）" }
</script>
<style>
@import "../demo-workbench.css";
.nav-content { display: flex; flex-direction: column; padding: 28rpx 24rpx; }.nav-order { color: var(--xtf-color-text, #283732); font-size: 30rpx; margin: 12rpx 0; }.nav-center { display: flex; flex-direction: column; align-items: center; }.nav-icon { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 64rpx; height: 64rpx; }.nav-scene { display: flex; flex-direction: column; background-color: #27786b; min-height: 300rpx; border-radius: 8rpx; }.nav-scene-copy { display: flex; flex-direction: column; padding: 30rpx; }.nav-scene-title { color: #ffffff; font-size: 40rpx; font-weight: 700; }.nav-scene-caption { color: #d0e8e0; font-size: 21rpx; margin-top: 12rpx; }
</style>
