<template>
  <view class="content">
    <view class="title">@r-utils/uni-app & @r-utils/common Playground</view>
    <view class="desc">以下是各模块的使用示例，点击进入独立页面</view>

    <view class="section-title">@r-utils/uni-app</view>
    <view class="nav-list">
      <navigator url="/pages/request/index" class="nav-item">
        <text class="nav-label">Request — 请求封装</text>
        <text class="nav-desc">类 axios 的 uni.request 封装，支持拦截器</text>
      </navigator>
      <navigator url="/pages/uni-helper/index" class="nav-item">
        <text class="nav-label">UniHelper — 常用工具</text>
        <text class="nav-desc">rpxToPx、showToast、getCurrentPage 等</text>
      </navigator>
      <navigator url="/pages/bluetooth/index" class="nav-item">
        <text class="nav-label">BluetoothUtils — 蓝牙工具</text>
        <text class="nav-desc">蓝牙设备搜索、连接、数据传输</text>
      </navigator>
      <navigator url="/pages/nfc/index" class="nav-item">
        <text class="nav-label">NFC — NFC 功能</text>
        <text class="nav-desc">NFC 标签读写</text>
      </navigator>
      <navigator url="/pages/upload/index" class="nav-item">
        <text class="nav-label">Upload — 文件上传</text>
        <text class="nav-desc">uni.uploadFile 封装</text>
      </navigator>
    </view>

    <view class="section-title" style="margin-top: 30rpx;">@r-utils/common</view>
    <view class="nav-list">
      <navigator url="/pages/permission/index" class="nav-item">
        <text class="nav-label">Permission — 权限校验</text>
        <text class="nav-desc">权限字符串格式校验</text>
      </navigator>
      <navigator url="/pages/countdown/index" class="nav-item">
        <text class="nav-label">Countdown — 倒计时</text>
        <text class="nav-desc">基于 dayjs 的倒计时类</text>
      </navigator>
      <navigator url="/pages/wait/index" class="nav-item">
        <text class="nav-label">wait — 等待函数</text>
        <text class="nav-desc">异步等待指定时间</text>
      </navigator>
      <navigator url="/pages/knock-test/index" class="nav-item">
        <text class="nav-label">KnockTest — 敲击测试</text>
        <text class="nav-desc">顺序敲击触发回调的状态机</text>
      </navigator>
    </view>
  </view>
</template>

<script setup lang="ts">
</script>

<style>
.content {
  padding: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 12rpx;
}

.desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #42b883;
  margin-bottom: 20rpx;
  padding-bottom: 8rpx;
  border-bottom: 1px solid #eee;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.nav-item {
  padding: 20rpx 24rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.nav-label {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 6rpx;
}

.nav-desc {
  display: block;
  font-size: 24rpx;
  color: #888;
}
</style>
