<template>
  <div class="element-container min-h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <div class="element-header">
      <div class="element-header-content">
        <div class="element-logo">
          <img :src="logoUrl" alt="Element Logo" class="element-logo-img">
          <span class="element-logo-text">Element UI</span>
        </div>
        <div class="element-nav">
          <a href="#" class="element-nav-item active">首页</a>
          <a href="#" class="element-nav-item">组件</a>
          <a href="#" class="element-nav-item">文档</a>
          <a href="#" class="element-nav-item">主题</a>
        </div>
        <div class="element-header-actions">
          <button class="element-button text">
            <Search class="w-5 h-5" />
          </button>
          <button class="element-button text">
            <Bell class="w-5 h-5" />
          </button>
          <button class="element-button text">
            <User class="w-5 h-5" />
          </button>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="element-main">
      <!-- 卡片列表 -->
      <div class="element-card-list">
        <div v-for="card in cards" :key="card.id" class="element-card">
          <div class="element-card-header">
            <div class="element-avatar" :class="card.avatarClass">
              {{ card.initials }}
            </div>
            <div class="element-card-info">
              <h3 class="element-card-title">{{ card.title }}</h3>
              <p class="element-card-subtitle">{{ card.description }}</p>
            </div>
            <div class="element-card-actions">
              <button class="element-button text">
                <MoreVertical class="w-5 h-5" />
              </button>
            </div>
          </div>
          <div class="element-card-body">
            <img :src="card.cover" alt="Card Cover" class="element-card-cover">
            <p>{{ card.content }}</p>
          </div>
          <div class="element-card-footer">
            <button class="element-button text">
              <Heart class="w-5 h-5" />
              <span>{{ card.likes }}</span>
            </button>
            <button class="element-button text">
              <MessageSquare class="w-5 h-5" />
              <span>{{ card.comments }}</span>
            </button>
            <button class="element-button text">
              <Share2 class="w-5 h-5" />
            </button>
          </div>
        </div>
      </div>

      <!-- 表单元素 -->
      <div class="element-form">
        <div class="element-form-item">
          <label class="element-form-label">文本输入</label>
          <div class="element-form-content">
            <input type="text" placeholder="请输入内容" class="element-input">
          </div>
        </div>
        <div class="element-form-item">
          <label class="element-form-label">密码输入</label>
          <div class="element-form-content">
            <input type="password" placeholder="请输入密码" class="element-input">
          </div>
        </div>
        <div class="element-form-item">
          <label class="element-form-label">下拉选择</label>
          <div class="element-form-content">
            <select class="element-select">
              <option>选项 1</option>
              <option>选项 2</option>
              <option>选项 3</option>
            </select>
          </div>
        </div>
        <div class="element-form-item">
          <label class="element-form-label">开关</label>
          <div class="element-form-content">
            <label class="element-switch">
              <input type="checkbox">
              <span class="element-switch-core"></span>
            </label>
          </div>
        </div>
      </div>

      <!-- 按钮组 -->
      <div class="element-button-group">
        <button class="element-button primary">主要按钮</button>
        <button class="element-button success">成功按钮</button>
        <button class="element-button warning">警告按钮</button>
        <button class="element-button danger">危险按钮</button>
        <button class="element-button info">信息按钮</button>
      </div>

      <!-- 标签页 -->
      <div class="element-tabs">
        <div class="element-tabs-header">
          <div 
            v-for="tab in tabs" 
            :key="tab.id"
            class="element-tabs-item"
            :class="{ active: activeTab === tab.id }"
            @click="activeTab = tab.id"
          >
            {{ tab.label }}
          </div>
        </div>
        <div class="element-tabs-content">
          <div v-if="activeTab === 'tab1'" class="element-tab-pane">
            <p>标签页 1 的内容</p>
          </div>
          <div v-if="activeTab === 'tab2'" class="element-tab-pane">
            <p>标签页 2 的内容</p>
          </div>
          <div v-if="activeTab === 'tab3'" class="element-tab-pane">
            <p>标签页 3 的内容</p>
          </div>
        </div>
      </div>

      <!-- 对话框 -->
      <div v-if="showDialog" class="element-dialog-wrapper">
        <div class="element-dialog">
          <div class="element-dialog-header">
            <span class="element-dialog-title">对话框标题</span>
            <button class="element-dialog-close" @click="showDialog = false">
              <X class="w-5 h-5" />
            </button>
          </div>
          <div class="element-dialog-body">
            <p>这是一个 Element UI 风格的对话框示例。</p>
          </div>
          <div class="element-dialog-footer">
            <button class="element-button" @click="showDialog = false">取消</button>
            <button class="element-button primary" @click="showDialog = false">确定</button>
          </div>
        </div>
      </div>

      <!-- 消息提示 -->
      <div v-if="showMessage" class="element-message">
        <div class="element-message-content">
          <Info class="w-5 h-5" />
          <span>这是一条消息提示</span>
        </div>
      </div>

      <!-- 通知面板 -->
      <div v-if="showNotifications" class="element-notification">
        <div class="element-notification-title">
          <span>通知</span>
          <button class="element-notification-close" @click="showNotifications = false">
            <X class="w-5 h-5" />
          </button>
        </div>
        <div class="element-notification-list">
          <div v-for="notification in notifications" :key="notification.id" class="element-notification-item">
            <div class="element-notification-icon">
              <Bell class="w-5 h-5" />
            </div>
            <div class="element-notification-content">
              <h4>{{ notification.title }}</h4>
              <p>{{ notification.content }}</p>
            </div>
            <span class="element-notification-time">{{ notification.time }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  Search, Bell, User, MoreVertical,
  Heart, MessageSquare, Share2, X,
  Info
} from 'lucide-vue-next'

const showDialog = ref(false)
const showMessage = ref(false)
const showNotifications = ref(false)
const activeTab = ref('tab1')

const logoUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0idXJsKCNwYWludDApIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJwYWludDAiIHgxPSIwIiB5MT0iMCIgeDI9IjMyIiB5Mj0iMzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjNDFCODgzIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMkQ4ODVGIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PC9zdmc+'

const cards = ref([
  {
    id: 1,
    title: '卡片标题',
    description: '副标题',
    content: '这是卡片的内容，可以包含多行文本。',
    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiNGRkZGRkYiLz48cGF0aCBkPSJNMTYwIDYwQzEzMy40MzEgNjAgMTEyIDgxLjQzMSAxMTIgMTA4QzExMiAxMzQuNTY5IDEzMy40MzEgMTU2IDE2MCAxNTZDMTg2LjU2OSAxNTYgMjA4IDEzNC41NjkgMjA4IDEwOEMyMDggODEuNDMxIDE4Ni41NjkgNjAgMTYwIDYwWiIgZmlsbD0iIzQxQjg4MyIvPjxwYXRoIGQ9Ik0xNjAgMTgwQzEzMy40MzEgMTgwIDExMiAyMDEuNDMxIDExMiAyMjhDMTEyIDI1NC41NjkgMTMzLjQzMSAyNzYgMTYwIDI3NkMxODYuNTY5IDI3NiAyMDggMjU0LjU2OSAyMDggMjI4QzIwOCAyMDEuNDMxIDE4Ni41NjkgMTgwIDE2MCAxODBaIiBmaWxsPSIjMkQ4ODVGIi8+PC9zdmc+',
    likes: 42,
    comments: 8,
    initials: 'JD',
    avatarClass: 'bg-green-500'
  },
  {
    id: 2,
    title: '另一个标题',
    description: '另一个副标题',
    content: '这是另一个卡片的内容。',
    cover: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjI0MCIgdmlld0JveD0iMCAwIDMyMCAyNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiNGRkZGRkYiLz48cGF0aCBkPSJNMTYwIDYwQzEzMy40MzEgNjAgMTEyIDg1LjQzMSAxMTIgMTE4QzExMiAxNTAuNTY5IDEzMy40MzEgMTcyIDE2MCAxNzJDMTg2LjU2OSAxNzIgMjA4IDE1MC41NjkgMjA4IDExOEMyMDggODUuNDMxIDE4Ni41NjkgNjAgMTYwIDYwWiIgZmlsbD0iIzJEOjg1RiIvPjxwYXRoIGQ9Ik0xNjAgMTgwQzEzMy40MzEgMTgwIDExMiAyMDEuNDMxIDExMiAyMjhDMTEyIDI1NC41NjkgMTMzLjQzMSAyNzYgMTYwIDI3NkMxODYuNTY5IDI3NiAyMDggMjU0LjU2OSAyMDggMjI4QzIwOCAyMDEuNDMxIDE4Ni41NjkgMTgwIDE2MCAxODBaIiBmaWxsPSIjNDFCODgzIi8+PC9zdmc+',
    likes: 36,
    comments: 5,
    initials: 'AB',
    avatarClass: 'bg-green-600'
  }
])

const tabs = ref([
  { id: 'tab1', label: '标签页 1' },
  { id: 'tab2', label: '标签页 2' },
  { id: 'tab3', label: '标签页 3' }
])

const notifications = ref([
  { 
    id: 1, 
    title: '新消息', 
    content: 'Alice 给你发送了一条消息', 
    time: '刚刚'
  },
  { 
    id: 2, 
    title: '系统通知', 
    content: '系统将在今晚进行维护', 
    time: '1小时前'
  }
])
</script>

<style scoped>
.element-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

.element-header {
  @apply fixed top-0 left-0 right-0 h-16 bg-white shadow-sm z-10;
}

.element-header-content {
  @apply container mx-auto px-4 h-full flex items-center justify-between;
}

.element-logo {
  @apply flex items-center;
}

.element-logo-img {
  @apply h-8 w-8;
}

.element-logo-text {
  @apply ml-2 text-xl font-medium text-gray-900;
}

.element-nav {
  @apply flex items-center space-x-6;
}

.element-nav-item {
  @apply text-gray-600 hover:text-blue-500;
}

.element-nav-item.active {
  @apply text-blue-500;
}

.element-header-actions {
  @apply flex items-center space-x-2;
}

.element-main {
  @apply pt-20 pb-8 px-4;
}

.element-card-list {
  @apply space-y-4;
}

.element-card {
  @apply bg-white rounded shadow-sm overflow-hidden;
}

.element-card-header {
  @apply flex items-center p-4 border-b border-gray-100;
}

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

.element-card-info {
  @apply flex-1 ml-4;
}

.element-card-title {
  @apply text-lg font-medium text-gray-900;
}

.element-card-subtitle {
  @apply text-sm text-gray-500;
}

.element-card-actions {
  @apply ml-4;
}

.element-card-body {
  @apply p-4;
}

.element-card-footer {
  @apply flex items-center px-4 py-3 border-t border-gray-100;
}

.element-form {
  @apply space-y-4 mt-6;
}

.element-form-item {
  @apply flex items-center;
}

.element-form-label {
  @apply w-24 text-right pr-4 text-gray-600;
}

.element-form-content {
  @apply flex-1;
}

.element-input,
.element-select {
  @apply w-full px-4 py-2 border border-gray-300 rounded focus:border-blue-500 focus:ring-1 focus:ring-blue-500;
}

.element-switch {
  @apply relative inline-block w-12 h-6;
}

.element-switch input {
  @apply hidden;
}

.element-switch-core {
  @apply absolute inset-0 rounded-full bg-gray-300 transition-colors duration-300;
}

.element-switch-core:after {
  content: '';
  @apply absolute w-5 h-5 rounded-full bg-white top-0.5 left-0.5 shadow transition-transform duration-300;
}

.element-switch input:checked + .element-switch-core {
  @apply bg-blue-500;
}

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

.element-button-group {
  @apply flex flex-wrap gap-2 mt-6;
}

.element-button {
  @apply px-4 py-2 rounded text-sm font-medium transition-colors duration-300;
}

.element-button.primary {
  @apply bg-blue-500 text-white hover:bg-blue-600;
}

.element-button.success {
  @apply bg-green-500 text-white hover:bg-green-600;
}

.element-button.warning {
  @apply bg-yellow-500 text-white hover:bg-yellow-600;
}

.element-button.danger {
  @apply bg-red-500 text-white hover:bg-red-600;
}

.element-button.info {
  @apply bg-gray-500 text-white hover:bg-gray-600;
}

.element-button.text {
  @apply bg-transparent text-gray-600 hover:text-blue-500;
}

.element-tabs {
  @apply mt-6;
}

.element-tabs-header {
  @apply flex border-b border-gray-200;
}

.element-tabs-item {
  @apply px-4 py-3 text-gray-600 cursor-pointer hover:text-blue-500;
}

.element-tabs-item.active {
  @apply text-blue-500 border-b-2 border-blue-500;
}

.element-tabs-content {
  @apply p-4;
}

.element-tab-pane {
  @apply bg-white rounded p-4;
}

.element-dialog-wrapper {
  @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50;
}

.element-dialog {
  @apply bg-white rounded shadow-lg w-full max-w-md;
}

.element-dialog-header {
  @apply flex justify-between items-center p-4 border-b border-gray-200;
}

.element-dialog-title {
  @apply text-lg font-medium text-gray-900;
}

.element-dialog-close {
  @apply text-gray-400 hover:text-gray-500;
}

.element-dialog-body {
  @apply p-4;
}

.element-dialog-footer {
  @apply flex justify-end space-x-2 p-4 border-t border-gray-200;
}

.element-message {
  @apply fixed top-4 right-4 z-50;
}

.element-message-content {
  @apply flex items-center px-4 py-3 bg-white rounded shadow-lg;
}

.element-notification {
  @apply fixed top-4 right-4 w-80 bg-white rounded shadow-lg z-50;
}

.element-notification-title {
  @apply flex justify-between items-center p-4 border-b border-gray-200;
}

.element-notification-close {
  @apply text-gray-400 hover:text-gray-500;
}

.element-notification-list {
  @apply max-h-96 overflow-y-auto;
}

.element-notification-item {
  @apply flex items-start p-4 border-b border-gray-200;
}

.element-notification-icon {
  @apply w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500;
}

.element-notification-content {
  @apply flex-1 ml-4;
}

.element-notification-time {
  @apply text-xs text-gray-400;
}
</style> 