<template>
  <view class="page-container">
    <!-- 顶部导航栏自动处理安全区域 -->
    <u-navbar 
      title="页面标题" 
      :safeAreaInsetTop="true"
      :placeholder="true"
      :fixed="true"
      bgColor="#409EFF"
    />

    <!-- 主体内容区域 -->
    <view class="content-wrapper">
      <!-- 栅格布局示例：12列系统 -->
      <u-row gutter="16" justify="space-between">
        <u-col span="4">
          <view class="card-item bg-primary-light">卡片1</view>
        </u-col>
        <u-col span="4">
          <view class="card-item bg-primary-light">卡片2</view>
        </u-col>
        <u-col span="4">
          <view class="card-item bg-primary-light">卡片3</view>
        </u-col>
      </u-row>

      <!-- 响应式布局：不同屏幕尺寸自适应 -->
      <u-row gutter="20">
        <u-col :span="6" :xs="12" :sm="6" :md="4">
          <view class="grid-item">响应式项目</view>
        </u-col>
      </u-row>
    </view>

    <!-- 底部固定操作栏，适配安全区域 -->
    <view class="bottom-action" :style="{paddingBottom: safeAreaBottom}">
      <u-button 
        type="primary" 
        text="提交" 
        :customStyle="{width: '100%', height: '88rpx'}"
        @click="handleSubmit"
      />
    </view>
    
    <!-- 使用 u-safe-area 组件自动处理底部安全区域 -->
    <u-safe-area bgColor="#ffffff" />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { getSystemInfoSync } from '@dcloudio/uni-app';

// 获取设备底部安全区域高度
const systemInfo = getSystemInfoSync();
const safeAreaBottom = computed(() => {
  const safeArea = systemInfo.safeArea || {};
  const bottom = systemInfo.screenHeight - safeArea.bottom;
  return bottom > 0 ? `${bottom}px` : '0px';
});

const handleSubmit = () => {
  console.log('提交操作');
};
</script>

<style scoped lang="scss">
.page-container {
  min-height: 100vh;
  background-color: $content-bg-color;
}

.content-wrapper {
  padding: 24rpx;
}

.card-item {
  height: 200rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: $text-main-color;
}

.grid-item {
  height: 160rpx;
  background: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx;
  background: #ffffff;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
}
</style>

/* uni.scss: 全局覆盖UView主题变量 */
/* 若依移动端通常使用的蓝色系 */

// ========== 主题色系 ==========
$u-primary: #409EFF;           // 主色调
$u-primary-dark: #337ecc;      // 主色调-深色（按下态）
$u-primary-disabled: #a0cfff;  // 主色调-禁用态
$u-primary-light: #ecf5ff;     // 主色调-浅色背景

$u-success: #67C23A;           // 成功色
$u-warning: #E6A23C;           // 警告色
$u-error: #F56C6C;             // 错误色
$u-info: #909399;              // 信息色

// ========== 文字颜色层级 ==========
$u-main-color: #303133;        // 主要文字（标题、重要信息）
$u-content-color: #606266;     // 常规文字（正文内容）
$u-tips-color: #909399;        // 次要文字（提示信息）
$u-light-color: #c0c4cc;       // 辅助文字（占位符、禁用文字）

// ========== 背景色系 ==========
$u-bg-color: #f5f7fa;          // 页面背景色
$u-border-color: #e4e7ed;      // 边框颜色

// ========== 文字大小规范 ==========
$u-font-size-title: 36rpx;     // 页面标题
$u-font-size-subtitle: 32rpx;  // 副标题
$u-font-size-content: 28rpx;   // 正文内容
$u-font-size-tips: 24rpx;      // 辅助提示

// ========== 间距规范 ==========
$u-padding-xs: 12rpx;
$u-padding-sm: 16rpx;
$u-padding-md: 24rpx;
$u-padding-lg: 32rpx;
$u-padding-xl: 48rpx;

// ========== 圆角规范 ==========
$u-radius-sm: 8rpx;
$u-radius-md: 12rpx;
$u-radius-lg: 16rpx;
$u-radius-xl: 24rpx;

<!-- 组件中使用 type 属性自动应用主题色 -->
<template>
  <view class="theme-demo">
    <!-- 按钮主题色应用 -->
    <u-button type="primary" text="主要按钮" />
    <u-button type="success" text="成功按钮" />
    <u-button type="warning" text="警告按钮" />
    <u-button type="error" text="危险按钮" />
    <u-button type="info" text="信息按钮" plain />

    <!-- 使用 customStyle 进行动态样式微调，避免直接修改组件class -->
    <u-icon 
      name="camera" 
      :color="primaryColor" 
      size="40" 
      :customStyle="{marginRight: '10rpx'}"
    />

    <!-- 文字颜色使用SCSS变量 -->
    <view class="text-main">主要文字</view>
    <view class="text-content">常规文字</view>
    <view class="text-tips">提示文字</view>

    <!-- 标签组件应用主题 -->
    <u-tag text="标签" type="primary" />
    <u-tag text="标签" type="success" plain />

    <!-- 徽章组件 -->
    <u-badge :value="99" :max="99" type="error">
      <u-icon name="bell" size="50" />
    </u-badge>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 如需动态主题色，可从配置中读取
const primaryColor = ref('#409EFF');
</script>

<style scoped lang="scss">
.theme-demo {
  padding: $u-padding-md;
}

// 使用SCSS变量定义文字颜色
.text-main {
  color: $u-main-color;
  font-size: $u-font-size-content;
  line-height: 1.5;
}

.text-content {
  color: $u-content-color;
  font-size: $u-font-size-content;
}

.text-tips {
  color: $u-tips-color;
  font-size: $u-font-size-tips;
}

// 使用变量定义背景色
.card {
  background: #ffffff;
  border: 1px solid $u-border-color;
  border-radius: $u-radius-md;
  padding: $u-padding-md;
}
</style>

<template>
  <view class="component-demo">
    <!-- 1. 表单组件 -->
    <u-form :model="form" ref="formRef" :rules="rules">
      <u-form-item label="用户名" prop="username" required>
        <u-input 
          v-model="form.username" 
          placeholder="请输入用户名"
          :clearable="true"
          :customStyle="{fontSize: '28rpx'}"
        />
      </u-form-item>

      <u-form-item label="性别" prop="gender">
        <u-radio-group v-model="form.gender">
          <u-radio :name="1" label="男" />
          <u-radio :name="2" label="女" />
        </u-radio-group>
      </u-form-item>

      <u-form-item label="爱好" prop="hobbies">
        <u-checkbox-group v-model="form.hobbies">
          <u-checkbox name="reading" label="阅读" />
          <u-checkbox name="sports" label="运动" />
        </u-checkbox-group>
      </u-form-item>
    </u-form>

    <!-- 2. 列表组件（下拉刷新 + 上拉加载） -->
    <u-list @scrolltolower="loadMore" :finished="finished" finishedText="没有更多了">
      <u-list-item v-for="item in list" :key="item.id">
        <u-cell :title="item.title" :label="item.desc">
          <template #icon>
            <u-image :src="item.avatar" width="80rpx" height="80rpx" :radius="8" />
          </template>
        </u-cell>
      </u-list-item>
    </u-list>

    <!-- 3. 弹窗组件 -->
    <u-button text="打开弹窗" @click="showModal = true" />
    <u-modal 
      v-model="showModal" 
      title="提示" 
      content="这是一个提示弹窗"
      :showCancelButton="true"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />

    <!-- 4. Toast提示 -->
    <u-button text="显示Toast" @click="showToast" />

    <!-- 5. 操作菜单 -->
    <u-action-sheet 
      :show="showActionSheet" 
      :actions="actions" 
      @select="handleSelect"
      @close="showActionSheet = false"
    />

    <!-- 6. 轮播图 -->
    <u-swiper 
      :list="banners" 
      indicator 
      :autoplay="true"
      :interval="3000"
      :radius="12"
      :height="300"
    />

    <!-- 7. 步骤条 -->
    <u-steps :current="currentStep" activeColor="#409EFF">
      <u-steps-item title="步骤1" desc="描述信息" />
      <u-steps-item title="步骤2" desc="描述信息" />
      <u-steps-item title="步骤3" desc="描述信息" />
    </u-steps>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 表单数据
const form = reactive({
  username: '',
  gender: 1,
  hobbies: []
});

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
    { min: 3, max: 20, message: '用户名长度3-20位', trigger: 'blur' }
  ]
};

// 列表数据
const list = ref([]);
const finished = ref(false);

const loadMore = async () => {
  // 模拟加载数据
  const newData = await fetchData();
  list.value.push(...newData);
  if (list.value.length >= 50) {
    finished.value = true;
  }
};

// 弹窗
const showModal = ref(false);
const handleConfirm = () => {
  console.log('确认');
  showModal.value = false;
};

const handleCancel = () => {
  console.log('取消');
};

// Toast
const showToast = () => {
  uni.showToast({
    title: '操作成功',
    icon: 'success',
    duration: 2000
  });
};

// 操作菜单
const showActionSheet = ref(false);
const actions = [
  { name: '选项1', color: '#303133' },
  { name: '选项2', color: '#303133' },
  { name: '删除', color: '#F56C6C' }
];

const handleSelect = (index) => {
  console.log('选择了', index);
};

// 轮播图
const banners = ref([
  'https://example.com/banner1.jpg',
  'https://example.com/banner2.jpg'
]);

// 步骤条
const currentStep = ref(1);
</script>

project-sport/
├── uni.scss                          # 全局SCSS变量定义（主题色、字体、间距）
├── App.vue                           # 应用全局配置
├── pages/
│   ├── index/
│   │   └── index.vue                 # 首页示例（典型布局、组件使用）
│   ├── user/
│   │   ├── profile/index.vue         # 用户资料页（表单示例）
│   │   └── settings/index.vue        # 设置页（列表示例）
│   └── common/
│       └── login/index.vue           # 登录页（表单验证示例）
├── components/
│   ├── custom-navbar/                # 自定义导航栏组件
│   ├── card-list/                    # 卡片列表组件
│   └── empty-state/                  # 空状态组件
├── uview-plus/                       # UView 2.0 组件库（不要修改）
│   ├── components/
│   │   ├── u-row/u-row.vue          # 栅格布局组件源码参考
│   │   ├── u-button/u-button.vue    # 按钮组件源码参考
│   │   └── ...
│   └── theme.scss                    # UView默认主题变量
└── static/
    └── images/                       # 静态图片资源

/* 参考路径: uni.scss */
// 主题色系
$u-primary: #409EFF;
$u-success: #67C23A;
$u-warning: #E6A23C;
$u-error: #F56C6C;

// 文字颜色
$u-main-color: #303133;
$u-content-color: #606266;
$u-tips-color: #909399;

// 间距规范
$u-padding-md: 24rpx;
$u-padding-lg: 32rpx;

<!-- 参考路径: pages/index/index.vue -->
<template>
  <view class="page">
    <u-navbar title="首页" :safeAreaInsetTop="true" />
    
    <view class="content">
      <!-- 栅格布局 -->
      <u-row gutter="16">
        <u-col span="6" v-for="item in 4" :key="item">
          <view class="grid-item">项目{{ item }}</view>
        </u-col>
      </u-row>
    </view>
    
    <u-safe-area />
  </view>
</template>

<script setup>
import { ref } from 'vue';
// 业务逻辑
</script>

<style scoped lang="scss">
.page {
  background: $u-bg-color;
}
.content {
  padding: $u-padding-md;
}
</style>

<!-- 参考路径: components/custom-navbar/index.vue -->
<template>
  <u-navbar 
    :title="title"
    :placeholder="true"
    :safeAreaInsetTop="true"
    :leftIcon="showBack ? 'arrow-left' : ''"
    @leftClick="handleBack"
  >
    <template #right>
      <slot name="right"></slot>
    </template>
  </u-navbar>
</template>

<script setup>
defineProps({
  title: String,
  showBack: { type: Boolean, default: true }
});

const handleBack = () => {
  uni.navigateBack();
};
</script>

问题：如何实现多列布局？
└─ 使用 u-row + u-col 栅格系统（12列）

问题：按钮颜色如何定制？
├─ 预设主题色 → 使用 type="primary/success/warning/error"
└─ 自定义颜色 → 在 uni.scss 中修改 $u-primary 等变量

问题：列表数据太多，页面卡顿？
├─ 数据量 < 50条 → 直接渲染
├─ 数据量 50-200条 → 使用分页加载（u-list）
└─ 数据量 > 200条 → 使用虚拟滚动

问题：底部按钮被刘海屏遮挡？
└─ 在按钮后添加 <u-safe-area />

问题：需要自定义组件样式？
├─ 全局样式 → 在 uni.scss 中覆盖变量
├─ 局部微调 → 使用 customStyle 属性
└─ 复杂定制 → 包装UView组件创建自定义组件

问题：表单验证如何实现？
└─ 使用 u-form + rules 统一管理验证规则

问题：图片加载太慢？
├─ 压缩图片（使用TinyPNG等工具）
├─ 使用WebP格式
├─ 使用CDN加速
└─ 启用 u-image 懒加载