<template>
  <div class="steampunk-container min-h-screen bg-gradient-to-br from-amber-900 via-yellow-900 to-brown-900">
    <!-- 顶部应用栏 -->
    <div class="steampunk-app-bar">
      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center">
          <Menu class="w-5 h-5 text-amber-200 mr-4" />
          <h1 class="text-xl font-medium text-amber-100">Steampunk Design</h1>
        </div>
        <div class="flex items-center space-x-4">
          <button class="steampunk-icon-button">
            <Search class="w-5 h-5" />
          </button>
          <button class="steampunk-icon-button">
            <Bell class="w-5 h-5" />
          </button>
          <button class="steampunk-icon-button">
            <User class="w-5 h-5" />
          </button>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container mx-auto p-6">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- 左侧导航 -->
        <div class="steampunk-card">
          <div class="p-4">
            <h2 class="text-lg font-medium mb-4 text-amber-100">导航菜单</h2>
            <nav class="space-y-2">
              <a href="#" class="steampunk-nav-item active">
                <Home class="w-5 h-5" />
                <span>首页</span>
              </a>
              <a href="#" class="steampunk-nav-item">
                <Inbox class="w-5 h-5" />
                <span>收件箱</span>
                <span class="steampunk-badge">12</span>
              </a>
              <a href="#" class="steampunk-nav-item">
                <Star class="w-5 h-5" />
                <span>收藏</span>
              </a>
              <a href="#" class="steampunk-nav-item">
                <Settings class="w-5 h-5" />
                <span>设置</span>
              </a>
            </nav>
          </div>
        </div>

        <!-- 中间内容 -->
        <div class="md:col-span-2 space-y-6">
          <!-- 卡片列表 -->
          <div class="steampunk-card">
            <div class="p-4">
              <h2 class="text-lg font-medium mb-4 text-amber-100">卡片列表</h2>
              <div class="space-y-4">
                <div class="steampunk-list-item">
                  <div class="steampunk-avatar bg-gradient-to-br from-amber-600 to-yellow-600">JD</div>
                  <div class="flex-1">
                    <h3 class="font-medium text-amber-100">卡片标题</h3>
                    <p class="text-amber-200">卡片副标题</p>
                  </div>
                  <button class="steampunk-icon-button">
                    <MoreVertical class="w-5 h-5" />
                  </button>
                </div>
                <div class="steampunk-list-item">
                  <div class="steampunk-avatar bg-gradient-to-br from-yellow-600 to-brown-600">AB</div>
                  <div class="flex-1">
                    <h3 class="font-medium text-amber-100">另一个标题</h3>
                    <p class="text-amber-200">另一个副标题</p>
                  </div>
                  <button class="steampunk-icon-button">
                    <MoreVertical class="w-5 h-5" />
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 表单元素 -->
          <div class="steampunk-card">
            <div class="p-4">
              <h2 class="text-lg font-medium mb-4 text-amber-100">表单元素</h2>
              <div class="space-y-4">
                <div class="steampunk-input-group">
                  <label class="text-amber-200">文本输入</label>
                  <input type="text" placeholder="请输入内容" class="steampunk-input">
                </div>
                <div class="steampunk-input-group">
                  <label class="text-amber-200">密码输入</label>
                  <input type="password" placeholder="请输入密码" class="steampunk-input">
                </div>
                <div class="steampunk-input-group">
                  <label class="text-amber-200">下拉选择</label>
                  <select class="steampunk-input">
                    <option>选项 1</option>
                    <option>选项 2</option>
                    <option>选项 3</option>
                  </select>
                </div>
                <div class="flex items-center space-x-4">
                  <label class="steampunk-checkbox">
                    <input type="checkbox">
                    <span class="steampunk-checkmark"></span>
                    <span class="text-amber-200">复选框</span>
                  </label>
                  <label class="steampunk-radio">
                    <input type="radio" name="radio">
                    <span class="steampunk-radiomark"></span>
                    <span class="text-amber-200">单选框</span>
                  </label>
                </div>
                <div class="steampunk-switch">
                  <input type="checkbox" id="switch1">
                  <label for="switch1" class="text-amber-200">开关</label>
                </div>
              </div>
            </div>
          </div>

          <!-- 按钮组 -->
          <div class="steampunk-card">
            <div class="p-4">
              <h2 class="text-lg font-medium mb-4 text-amber-100">按钮样式</h2>
              <div class="flex flex-wrap gap-4">
                <button class="steampunk-button">主要按钮</button>
                <button class="steampunk-button outlined">次要按钮</button>
                <button class="steampunk-button text">文本按钮</button>
                <button class="steampunk-button icon">
                  <Plus class="w-5 h-5" />
                </button>
              </div>
            </div>
          </div>

          <!-- 进度指示器 -->
          <div class="steampunk-card">
            <div class="p-4">
              <h2 class="text-lg font-medium mb-4 text-amber-100">进度指示器</h2>
              <div class="space-y-4">
                <div class="steampunk-progress">
                  <div class="steampunk-progress-bar" style="width: 60%"></div>
                </div>
                <div class="steampunk-progress circular">
                  <div class="steampunk-progress-circle"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- 对话框 -->
          <div class="steampunk-card">
            <div class="p-4">
              <h2 class="text-lg font-medium mb-4 text-amber-100">对话框示例</h2>
              <button class="steampunk-button" @click="showDialog = true">打开对话框</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="steampunk-bottom-nav">
      <a href="#" class="steampunk-bottom-nav-item active">
        <Home class="w-6 h-6" />
        <span>首页</span>
      </a>
      <a href="#" class="steampunk-bottom-nav-item">
        <Search class="w-6 h-6" />
        <span>搜索</span>
      </a>
      <a href="#" class="steampunk-bottom-nav-item">
        <Plus class="w-6 h-6" />
        <span>添加</span>
      </a>
      <a href="#" class="steampunk-bottom-nav-item">
        <Bell class="w-6 h-6" />
        <span>通知</span>
      </a>
      <a href="#" class="steampunk-bottom-nav-item">
        <User class="w-6 h-6" />
        <span>我的</span>
      </a>
    </div>

    <!-- 对话框 -->
    <div v-if="showDialog" class="steampunk-dialog-overlay">
      <div class="steampunk-dialog">
        <div class="steampunk-dialog-header">
          <h3 class="text-amber-100">对话框标题</h3>
          <button class="steampunk-icon-button" @click="showDialog = false">
            <X class="w-5 h-5" />
          </button>
        </div>
        <div class="steampunk-dialog-content">
          <p class="text-amber-200">这是一个蒸汽朋克风格的对话框示例。</p>
        </div>
        <div class="steampunk-dialog-actions">
          <button class="steampunk-button text" @click="showDialog = false">取消</button>
          <button class="steampunk-button" @click="showDialog = false">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  Menu, Search, Bell, User, Home, 
  Inbox, Star, Settings, MoreVertical,
  Plus, X
} from 'lucide-vue-next'

const showDialog = ref(false)
</script>

<style scoped>
.steampunk-container {
  font-family: 'Cinzel', serif;
  position: relative;
  overflow: hidden;
}

.steampunk-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d97706' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
  z-index: 0;
}

.steampunk-app-bar {
  @apply sticky top-0 z-10 bg-amber-900/50 backdrop-blur-sm;
  border-bottom: 1px solid rgba(180, 83, 9, 0.2);
}

.steampunk-icon-button {
  @apply p-2 rounded-full text-amber-200;
  transition: all 0.3s ease;
  background: rgba(180, 83, 9, 0.1);
  border: 1px solid rgba(180, 83, 9, 0.2);
}

.steampunk-icon-button:hover {
  @apply bg-amber-800 text-amber-100;
  transform: scale(1.1);
}

.steampunk-card {
  @apply rounded-lg p-4 bg-amber-900/50 backdrop-blur-sm;
  border: 1px solid rgba(180, 83, 9, 0.2);
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.steampunk-card:hover {
  @apply bg-amber-900/70;
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.steampunk-nav-item {
  @apply flex items-center space-x-3 p-2 rounded-lg text-amber-200;
  transition: all 0.3s ease;
  border: 1px solid rgba(180, 83, 9, 0.2);
}

.steampunk-nav-item:hover {
  @apply bg-amber-800 text-amber-100;
}

.steampunk-nav-item.active {
  @apply bg-amber-800 text-amber-100;
  background: linear-gradient(45deg, rgba(180, 83, 9, 0.3), rgba(146, 64, 14, 0.3));
}

.steampunk-badge {
  @apply bg-amber-500 text-white text-xs px-2 py-1 rounded-full;
}

.steampunk-list-item {
  @apply flex items-center space-x-4 p-2 rounded-lg;
  transition: all 0.3s ease;
  border: 1px solid rgba(180, 83, 9, 0.2);
}

.steampunk-list-item:hover {
  @apply bg-amber-800;
}

.steampunk-avatar {
  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
}

.steampunk-input-group {
  @apply space-y-1;
}

.steampunk-input {
  @apply w-full px-3 py-2 rounded-lg text-amber-100;
  background: rgba(180, 83, 9, 0.1);
  border: 1px solid rgba(180, 83, 9, 0.2);
  transition: all 0.3s ease;
}

.steampunk-input:focus {
  @apply outline-none;
  background: rgba(180, 83, 9, 0.2);
  border-color: rgba(180, 83, 9, 0.4);
}

.steampunk-input::placeholder {
  @apply text-amber-400;
}

.steampunk-checkbox,
.steampunk-radio {
  @apply flex items-center space-x-2 cursor-pointer;
}

.steampunk-checkmark,
.steampunk-radiomark {
  @apply w-5 h-5 rounded;
  background: rgba(180, 83, 9, 0.1);
  border: 1px solid rgba(180, 83, 9, 0.2);
  transition: all 0.3s ease;
}

.steampunk-checkmark {
  @apply rounded;
}

.steampunk-radiomark {
  @apply rounded-full;
}

.steampunk-checkbox input:checked + .steampunk-checkmark,
.steampunk-radio input:checked + .steampunk-radiomark {
  @apply bg-amber-500 border-amber-500;
}

.steampunk-switch {
  @apply flex items-center space-x-2;
}

.steampunk-switch input {
  @apply hidden;
}

.steampunk-switch label {
  @apply relative inline-block w-12 h-6 rounded-full cursor-pointer;
  background: rgba(180, 83, 9, 0.1);
  transition: all 0.3s ease;
  border: 1px solid rgba(180, 83, 9, 0.2);
}

.steampunk-switch label:after {
  content: '';
  @apply absolute w-5 h-5 bg-amber-100 rounded-full top-0.5 left-0.5;
  transition: all 0.3s ease;
}

.steampunk-switch input:checked + label {
  @apply bg-amber-500;
}

.steampunk-switch input:checked + label:after {
  @apply translate-x-6;
}

.steampunk-button {
  @apply px-4 py-2 rounded-lg text-amber-100;
  background: linear-gradient(45deg, rgba(180, 83, 9, 0.3), rgba(146, 64, 14, 0.3));
  border: 1px solid rgba(180, 83, 9, 0.2);
  transition: all 0.3s ease;
}

.steampunk-button:hover {
  @apply bg-amber-800;
  transform: translateY(-2px);
}

.steampunk-button.outlined {
  @apply bg-transparent border border-amber-300;
}

.steampunk-button.text {
  @apply bg-transparent border-none;
}

.steampunk-button.icon {
  @apply p-2 rounded-full;
}

.steampunk-progress {
  @apply h-1 rounded-full overflow-hidden;
  background: rgba(180, 83, 9, 0.1);
  border: 1px solid rgba(180, 83, 9, 0.2);
}

.steampunk-progress-bar {
  @apply h-full rounded-full;
  background: linear-gradient(45deg, rgba(180, 83, 9, 0.5), rgba(146, 64, 14, 0.5));
}

.steampunk-progress.circular {
  @apply w-12 h-12 rounded-full;
  background: rgba(180, 83, 9, 0.1);
  border: 1px solid rgba(180, 83, 9, 0.2);
}

.steampunk-progress-circle {
  @apply w-full h-full rounded-full border-4;
  border-image: linear-gradient(45deg, rgba(180, 83, 9, 0.5), rgba(146, 64, 14, 0.5)) 1;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.steampunk-bottom-nav {
  @apply fixed bottom-0 left-0 right-0 bg-amber-900/50 backdrop-blur-sm flex justify-around items-center py-2;
  border-top: 1px solid rgba(180, 83, 9, 0.2);
}

.steampunk-bottom-nav-item {
  @apply flex flex-col items-center space-y-1 text-amber-200;
  transition: all 0.3s ease;
}

.steampunk-bottom-nav-item:hover {
  @apply text-amber-100;
}

.steampunk-bottom-nav-item.active {
  @apply text-amber-100;
  background: linear-gradient(45deg, rgba(180, 83, 9, 0.3), rgba(146, 64, 14, 0.3));
}

.steampunk-dialog-overlay {
  @apply fixed inset-0 bg-black/30 flex items-center justify-center;
  backdrop-filter: blur(4px);
}

.steampunk-dialog {
  @apply rounded-lg p-4 bg-amber-900/80 backdrop-blur-sm w-full max-w-md;
  border: 1px solid rgba(180, 83, 9, 0.2);
}

.steampunk-dialog-header {
  @apply flex justify-between items-center p-4 border-b border-amber-800;
}

.steampunk-dialog-content {
  @apply p-4;
}

.steampunk-dialog-actions {
  @apply flex justify-end space-x-2 p-4 border-t border-amber-800;
}
</style> 