<template>
  <div class="holographic-container min-h-screen bg-gradient-to-br from-blue-900 to-purple-900">
    <!-- 顶部导航栏 -->
    <div class="holographic-header">
      <div class="holographic-header-content">
        <div class="holographic-logo">
          <img :src="logoUrl" alt="Holographic Logo" class="holographic-logo-img">
          <span class="holographic-logo-text">Holographic</span>
        </div>
        <div class="holographic-nav">
          <a href="#" class="holographic-nav-item active">首页</a>
          <a href="#" class="holographic-nav-item">组件</a>
          <a href="#" class="holographic-nav-item">文档</a>
          <a href="#" class="holographic-nav-item">主题</a>
        </div>
        <div class="holographic-header-actions">
          <button class="holographic-btn text">
            <Search class="w-5 h-5" />
          </button>
          <button class="holographic-btn text">
            <Bell class="w-5 h-5" />
          </button>
          <button class="holographic-btn text">
            <User class="w-5 h-5" />
          </button>
        </div>
      </div>
    </div>

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

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

      <!-- 按钮组 -->
      <div class="holographic-btn-group">
        <button class="holographic-btn primary">主要按钮</button>
        <button class="holographic-btn secondary">次要按钮</button>
        <button class="holographic-btn outline">轮廓按钮</button>
        <button class="holographic-btn text">文本按钮</button>
      </div>

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

      <!-- 对话框 -->
      <div v-if="showDialog" class="holographic-modal-mask">
        <div class="holographic-modal-wrap">
          <div class="holographic-modal">
            <div class="holographic-modal-content">
              <div class="holographic-modal-header">
                <div class="holographic-modal-title">对话框标题</div>
                <button class="holographic-modal-close" @click="showDialog = false">
                  <X class="w-5 h-5" />
                </button>
              </div>
              <div class="holographic-modal-body">
                <p>这是一个全息投影风格的对话框示例。</p>
              </div>
              <div class="holographic-modal-footer">
                <button class="holographic-btn" @click="showDialog = false">取消</button>
                <button class="holographic-btn primary" @click="showDialog = false">确定</button>
              </div>
            </div>
          </div>
        </div>
      </div>

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

      <!-- 通知面板 -->
      <div v-if="showNotifications" class="holographic-notification">
        <div class="holographic-notification-notice">
          <div class="holographic-notification-notice-content">
            <div class="holographic-notification-notice-icon">
              <Bell class="w-5 h-5" />
            </div>
            <div class="holographic-notification-notice-message">通知标题</div>
            <div class="holographic-notification-notice-description">通知内容</div>
          </div>
          <button class="holographic-notification-notice-close" @click="showNotifications = false">
            <X class="w-5 h-5" />
          </button>
        </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,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0idXJsKCNwYWludDApIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJwYWludDAiIHgxPSIwIiB5MT0iMCIgeDI9IjMyIiB5Mj0iMzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjMDA2NkZGIi8+PHN0b3Agb2Zmc2V0PSIwLjUiIHN0b3AtY29sb3I9IiNGRjAwRkYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRkZGMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4='

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

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

<style scoped>
.holographic-container {
  font-family: 'Orbitron', sans-serif;
  background-image: 
    linear-gradient(45deg, rgba(0, 255, 255, 0.1) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0, 255, 255, 0.1) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0, 255, 255, 0.1) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0, 255, 255, 0.1) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.holographic-header {
  @apply fixed top-0 left-0 right-0 h-16 backdrop-blur-md bg-black/30 z-10;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
}

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

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

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

.holographic-logo-text {
  @apply ml-2 text-xl font-medium text-cyan-400;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

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

.holographic-nav-item {
  @apply text-cyan-400 hover:text-cyan-300;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.holographic-nav-item.active {
  @apply text-cyan-300;
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

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

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

.holographic-card-list {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
}

.holographic-card {
  @apply backdrop-blur-md bg-black/30 rounded-xl overflow-hidden;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
  border: 1px solid rgba(0, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.holographic-card:hover {
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
  transform: translateY(-5px);
}

.holographic-card-cover {
  @apply relative h-48 overflow-hidden;
}

.holographic-card-cover-img {
  @apply w-full h-full object-cover;
}

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

.holographic-card-meta {
  @apply flex items-start mb-4;
}

.holographic-card-meta-avatar {
  @apply mr-4;
}

.holographic-avatar {
  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.holographic-card-meta-content {
  @apply flex-1;
}

.holographic-card-meta-title {
  @apply text-base font-medium text-cyan-400;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.holographic-card-meta-description {
  @apply text-sm text-cyan-300;
}

.holographic-card-content {
  @apply text-cyan-200 mb-4;
}

.holographic-card-actions {
  @apply flex items-center border-t border-cyan-500/20 pt-4;
}

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

.holographic-form-item {
  @apply flex flex-col;
}

.holographic-form-item-label {
  @apply mb-2 text-cyan-400;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.holographic-form-item-control {
  @apply flex-1;
}

.holographic-input,
.holographic-select {
  @apply w-full px-4 py-2 backdrop-blur-md bg-black/30 rounded-xl border border-cyan-500/20 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500 text-cyan-200;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
}

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

.holographic-switch input {
  @apply hidden;
}

.holographic-switch-inner {
  @apply absolute inset-0 rounded-full backdrop-blur-md bg-black/30 transition-colors duration-300;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
  border: 1px solid rgba(0, 255, 255, 0.2);
}

.holographic-switch-inner:after {
  content: '';
  @apply absolute w-5 h-5 rounded-full bg-cyan-400 top-0.5 left-0.5 shadow transition-transform duration-300;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.holographic-switch input:checked + .holographic-switch-inner {
  @apply bg-cyan-500/30;
}

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

.holographic-btn-group {
  @apply flex flex-wrap gap-2 mt-6;
}

.holographic-btn {
  @apply px-4 py-2 rounded-xl text-sm font-medium transition-all duration-300;
}

.holographic-btn.primary {
  @apply backdrop-blur-md bg-cyan-500/30 text-cyan-400 hover:bg-cyan-500/40;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
  border: 1px solid rgba(0, 255, 255, 0.2);
}

.holographic-btn.secondary {
  @apply backdrop-blur-md bg-purple-500/30 text-purple-400 hover:bg-purple-500/40;
  box-shadow: 0 0 20px rgba(147, 51, 234, 0.2);
  border: 1px solid rgba(147, 51, 234, 0.2);
}

.holographic-btn.outline {
  @apply backdrop-blur-md bg-transparent text-cyan-400 border border-cyan-500/20 hover:border-cyan-500;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
}

.holographic-btn.text {
  @apply bg-transparent text-cyan-400 hover:text-cyan-300;
}

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

.holographic-tabs-nav {
  @apply flex border-b border-cyan-500/20;
}

.holographic-tabs-tab {
  @apply px-4 py-3 text-cyan-400 cursor-pointer hover:text-cyan-300;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.holographic-tabs-tab.active {
  @apply text-cyan-300 border-b-2 border-cyan-500;
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

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

.holographic-tabs-tabpane {
  @apply backdrop-blur-md bg-black/30 rounded-xl p-4;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
  border: 1px solid rgba(0, 255, 255, 0.2);
}

.holographic-modal-mask {
  @apply fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50;
}

.holographic-modal-wrap {
  @apply fixed inset-0 overflow-auto;
}

.holographic-modal {
  @apply relative top-20 mx-auto w-full max-w-md;
}

.holographic-modal-content {
  @apply backdrop-blur-md bg-black/30 rounded-xl shadow-lg;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
  border: 1px solid rgba(0, 255, 255, 0.2);
}

.holographic-modal-header {
  @apply flex justify-between items-center p-4 border-b border-cyan-500/20;
}

.holographic-modal-title {
  @apply text-lg font-medium text-cyan-400;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.holographic-modal-close {
  @apply text-cyan-400 hover:text-cyan-300;
}

.holographic-modal-body {
  @apply p-4;
}

.holographic-modal-footer {
  @apply flex justify-end space-x-2 p-4 border-t border-cyan-500/20;
}

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

.holographic-message-notice {
  @apply mb-4;
}

.holographic-message-notice-content {
  @apply flex items-center px-4 py-3 backdrop-blur-md bg-black/30 rounded-xl shadow-lg;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
  border: 1px solid rgba(0, 255, 255, 0.2);
}

.holographic-notification {
  @apply fixed top-4 right-4 z-50;
}

.holographic-notification-notice {
  @apply mb-4 backdrop-blur-md bg-black/30 rounded-xl shadow-lg overflow-hidden;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
  border: 1px solid rgba(0, 255, 255, 0.2);
}

.holographic-notification-notice-content {
  @apply p-4;
}

.holographic-notification-notice-icon {
  @apply float-left mr-4 text-cyan-400;
}

.holographic-notification-notice-message {
  @apply text-base font-medium text-cyan-400;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.holographic-notification-notice-description {
  @apply mt-1 text-sm text-cyan-300;
}

.holographic-notification-notice-close {
  @apply absolute top-4 right-4 text-cyan-400 hover:text-cyan-300;
}
</style> 