<template>
  <AdminLayout :currentPage="currentPage">
    <view class="design-container">
      <view class="module-header">
        <text class="module-title">模板库</text>
        <text class="module-desc">从丰富的模板中快速创建页面</text>
      </view>
      <view class="templates-grid">
        <view v-for="template in templateLibrary" :key="template.id" class="template-card">
          <view class="template-header">
            <text class="template-name">{{ template.name }}</text>
          </view>
          <view class="template-body">
            <text class="template-desc">{{ template.description }}</text>
            <button class="btn-use" @click="handleUseTemplate(template.id)">使用模板</button>
          </view>
        </view>
      </view>
    </view>
  </AdminLayout>
</template>

<script setup lang="uts">
import { ref } from 'vue'
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'

const currentPage = ref<string>('design-templates')

const templateLibrary = ref<any[]>([
  {
    id: 1,
    name: '首页模板A',
    description: '经典电商首页布局'
  },
  {
    id: 2,
    name: '首页模板B',
    description: '简约风格的商城页面'
  },
  {
    id: 3,
    name: '活动模板',
    description: '活动促销页面布局'
  },
  {
    id: 4,
    name: '商品模板',
    description: '商品展示页面布局'
  }
])

const handleUseTemplate = (templateId: number) => {
  console.log('使用模板', templateId)
  uni.showToast({
    title: '使用模板成功',
    icon: 'none'
  })
}
</script>

<style scoped lang="scss">
@import '@/uni.scss';

.design-container {
  min-height: 100vh;
  background: $background-secondary;
  padding: $space-lg;
}

.module-header {
  margin-bottom: $space-xl;
}

.module-title {
  font-size: $font-size-lg;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $space-sm;
}

.module-desc {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: $space-lg;
  margin-bottom: $space-lg;
}

.template-card {
  background: white;
  border-radius: $radius-lg;
  box-shadow: $shadow-sm;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: $shadow-md;
    transform: translateY(-2px);
  }
}

.template-header {
  padding: $space-lg;
  background: $background-tertiary;
  text-align: center;
}

.template-body {
  padding: $space-lg;
}

.template-name {
  font-size: $font-size-md;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $space-sm;
}

.template-desc {
  color: $text-secondary;
  font-size: $font-size-sm;
  line-height: 1.5;
  display: block;
  margin-bottom: $space-lg;
}

.btn-use {
  background: $primary-color;
  color: white;
  padding: $space-sm $space-lg;
  border-radius: $radius-sm;
  border: none;
  margin-top: $space-lg;
  font-size: $font-size-sm;
  cursor: pointer;
  width: 100%;
}

@media (max-width: 768px) {
  .design-container {
    padding: $space-md;
  }

  .templates-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 480px) {
  .templates-grid {
    grid-template-columns: 1fr;
  }
}
</style>


