<template>
    <view class="demo-page">
        <view class="demo-title">阿里图标库使用示例</view>
        
        <!-- 方式一：直接使用 iconfont 类 -->
        <view class="demo-section">
            <view class="section-title">方式一：直接使用</view>
            <view class="icon-list">
                <view class="icon-item">
                    <text class="iconfont icon-home"></text>
                    <text class="icon-name">icon-home</text>
                </view>
                <view class="icon-item">
                    <text class="iconfont icon-user"></text>
                    <text class="icon-name">icon-user</text>
                </view>
                <view class="icon-item">
                    <text class="iconfont icon-search"></text>
                    <text class="icon-name">icon-search</text>
                </view>
            </view>
        </view>
        
        <!-- 方式二：使用封装的组件 -->
        <view class="demo-section">
            <view class="section-title">方式二：使用封装组件</view>
            <view class="icon-list">
                <view class="icon-item">
                    <IconfontIcon name="home" :size="48" color="#13C57C" />
                    <text class="icon-name">绿色 48rpx</text>
                </view>
                <view class="icon-item">
                    <IconfontIcon name="user" :size="36" color="#256BFA" />
                    <text class="icon-name">蓝色 36rpx</text>
                </view>
                <view class="icon-item">
                    <IconfontIcon name="search" :size="32" color="#FF9800" />
                    <text class="icon-name">橙色 32rpx</text>
                </view>
            </view>
        </view>
        
        <!-- 方式三：使用配置常量 -->
        <view class="demo-section">
            <view class="section-title">方式三：使用配置常量</view>
            <view class="icon-list">
                <view class="icon-item">
                    <IconfontIcon 
                        :name="ICONS.PHONE" 
                        :size="ICON_SIZES.LARGE" 
                        :color="ICON_COLORS.PRIMARY" 
                    />
                    <text class="icon-name">电话</text>
                </view>
                <view class="icon-item">
                    <IconfontIcon 
                        :name="ICONS.MESSAGE" 
                        :size="ICON_SIZES.LARGE" 
                        :color="ICON_COLORS.SECONDARY" 
                    />
                    <text class="icon-name">消息</text>
                </view>
                <view class="icon-item">
                    <IconfontIcon 
                        :name="ICONS.LOCATION" 
                        :size="ICON_SIZES.LARGE" 
                        :color="ICON_COLORS.DANGER" 
                    />
                    <text class="icon-name">位置</text>
                </view>
            </view>
        </view>
        
        <!-- 方式四：按钮中使用 -->
        <view class="demo-section">
            <view class="section-title">方式四：在按钮中使用</view>
            <button class="demo-button primary">
                <IconfontIcon name="phone" :size="32" color="#FFFFFF" />
                <text>手机号登录</text>
            </button>
            <button class="demo-button secondary">
                <IconfontIcon name="user" :size="32" color="#256BFA" />
                <text>个人中心</text>
            </button>
            <button class="demo-button success">
                <IconfontIcon name="star" :size="32" color="#FFFFFF" />
                <text>收藏职位</text>
            </button>
        </view>
        
        <!-- 方式五：列表中使用 -->
        <view class="demo-section">
            <view class="section-title">方式五：在列表中使用</view>
            <view class="demo-list">
                <view class="list-item" v-for="item in menuList" :key="item.id">
                    <IconfontIcon :name="item.icon" :size="40" :color="item.color" />
                    <view class="item-content">
                        <view class="item-title">{{ item.title }}</view>
                        <view class="item-desc">{{ item.desc }}</view>
                    </view>
                    <IconfontIcon name="arrow-right" :size="28" color="#999" />
                </view>
            </view>
        </view>
        
        <!-- 注意事项 -->
        <view class="demo-section">
            <view class="section-title">⚠️ 注意事项</view>
            <view class="tips-box">
                <view class="tip-item">1. 确保已从阿里图标库下载字体文件到 static/iconfont/ 目录</view>
                <view class="tip-item">2. 确保已在 App.vue 中引入 iconfont.css</view>
                <view class="tip-item">3. 图标名称需要与阿里图标库中的类名保持一致</view>
                <view class="tip-item">4. 推荐使用封装的 IconfontIcon 组件，便于统一管理</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
import { ICONS, ICON_SIZES, ICON_COLORS } from '@/config/icons'

const menuList = ref([
    {
        id: 1,
        icon: 'home',
        title: '首页',
        desc: '查看推荐职位',
        color: '#13C57C'
    },
    {
        id: 2,
        icon: 'search',
        title: '搜索',
        desc: '搜索心仪职位',
        color: '#256BFA'
    },
    {
        id: 3,
        icon: 'message',
        title: '消息',
        desc: '查看聊天消息',
        color: '#FF9800'
    },
    {
        id: 4,
        icon: 'user',
        title: '我的',
        desc: '个人中心',
        color: '#9C27B0'
    }
])
</script>

<style lang="stylus" scoped>
.demo-page
    padding: 40rpx
    background: #F5F5F5
    min-height: 100vh
    
.demo-title
    font-size: 48rpx
    font-weight: bold
    color: #333
    text-align: center
    margin-bottom: 40rpx
    
.demo-section
    background: #FFFFFF
    border-radius: 16rpx
    padding: 32rpx
    margin-bottom: 32rpx
    
.section-title
    font-size: 32rpx
    font-weight: 600
    color: #333
    margin-bottom: 24rpx
    padding-bottom: 16rpx
    border-bottom: 2rpx solid #F0F0F0
    
.icon-list
    display: flex
    flex-wrap: wrap
    gap: 32rpx
    
.icon-item
    display: flex
    flex-direction: column
    align-items: center
    gap: 12rpx
    min-width: 120rpx
    
    .iconfont
        font-size: 48rpx
        color: #333
    
    .icon-name
        font-size: 24rpx
        color: #666
        text-align: center
        
.demo-button
    width: 100%
    height: 88rpx
    border-radius: 44rpx
    display: flex
    align-items: center
    justify-content: center
    gap: 12rpx
    font-size: 32rpx
    margin-bottom: 20rpx
    border: none
    
    &.primary
        background: linear-gradient(135deg, #13C57C 0%, #0FA368 100%)
        color: #FFFFFF
        
    &.secondary
        background: #F7F8FA
        color: #256BFA
        
    &.success
        background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%)
        color: #FFFFFF
        
.demo-list
    display: flex
    flex-direction: column
    gap: 20rpx
    
.list-item
    display: flex
    align-items: center
    padding: 24rpx
    background: #F7F8FA
    border-radius: 12rpx
    gap: 20rpx
    
.item-content
    flex: 1
    
.item-title
    font-size: 30rpx
    color: #333
    font-weight: 500
    margin-bottom: 8rpx
    
.item-desc
    font-size: 24rpx
    color: #999
    
.tips-box
    padding: 24rpx
    background: #FFF3E0
    border-radius: 12rpx
    
.tip-item
    font-size: 26rpx
    color: #E65100
    line-height: 1.8
    margin-bottom: 12rpx
    
    &:last-child
        margin-bottom: 0
        
// 按钮重置样式
button::after
    border: none
</style>

