<template>
  <AdminLayout currentPage="ship-freight">
    <view class="page">
    <!-- TopBar (navigationStyle: custom 时需要自己做顶部栏) -->
    <view class="topbar">
      <view class="status-bar" />
      <view class="nav">
        <view class="nav-left" @click="goBack">
          <text class="nav-icon">‹</text>
          <text class="nav-text">返回</text>
        </view>

        <text class="nav-title">运费模板</text>

        <view class="nav-right">
          <text class="nav-action" @click="onPrimaryAction">保存</text>
        </view>
      </view>
    </view>

    <!-- Main -->
    <scroll-view class="body" scroll-y="true">
      <view class="container">
        <view class="card">
          <text class="h2">运费模板</text>
          <text class="p">TODO：在这里实现 运费模板 的页面内容。</text>
          <view class="divider" />
          <text class="p muted">提示：当前为可跑的占位模板（TopBar + Container + Card）。</text>
        </view>

        <view class="card">
          <text class="h3">建议你下一步先补齐</text>
          <view class="list">
            <text class="li">1）接口：拉取/保存数据（API 协议对齐后端）</text>
            <text class="li">2）列表/表单：搜索、分页、增删改</text>
            <text class="li">3）权限：按钮/路由级权限控制</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
  </AdminLayout>
</template>

<script setup lang="uts">
const goBack = () => {
  uni.navigateBack({ delta: 1 })
}

const onPrimaryAction = () => {
  uni.showToast({ title: 'TODO：保存逻辑', icon: 'none' })
}
</script>

<style scoped>
.page { width: 100%; height: 100%; background-color: #f6f7fb; }

/* 顶部栏（适配沉浸式状态栏） */
.topbar { position: sticky; top: 0; z-index: 10; background-color: #fff; }
.status-bar { height: var(--status-bar-height); }
.nav { height: 44px; display: flex; align-items: center; padding: 0 12px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eef0f5; }
.nav-left { width: 88px; display: flex; align-items: center; }
.nav-icon { font-size: 22px; margin-right: 4px; color: #111; }
.nav-text { font-size: 14px; color: #111; }
.nav-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; color: #111; }
.nav-right { width: 88px; display: flex; justify-content: flex-end; }
.nav-action { font-size: 14px; color: #1677ff; }

.body { height: calc(100vh - 44px - var(--status-bar-height)); }
.container { padding: 12px; }

.card { background-color: #fff; border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06); }

.h2 { font-size: 18px; font-weight: 700; color: #111; }
.h3 { font-size: 16px; font-weight: 600; color: #111; margin-bottom: 8px; }
.p { font-size: 13px; color: #333; margin-top: 8px; line-height: 18px; }
.muted { color: #8892a6; }

.divider { height: 1px; background-color: #eef0f5; margin: 12px 0; }

.list { margin-top: 8px; }
.li { font-size: 13px; color: #333; line-height: 20px; }
</style>
