<template>
  <div class="fluent-container min-h-screen bg-gray-50">
    <!-- 顶部应用栏 -->
    <div class="fluent-app-bar">
      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center">
          <button class="fluent-icon-button" @click="isMenuOpen = !isMenuOpen">
            <Menu class="w-5 h-5" />
          </button>
          <h1 class="text-xl font-medium text-gray-900 ml-4">Fluent Design</h1>
        </div>
        <div class="flex items-center space-x-4">
          <div class="fluent-search-box">
            <Search class="w-5 h-5 text-gray-500" />
            <input type="text" placeholder="搜索..." class="fluent-search-input">
          </div>
          <button class="fluent-icon-button" @click="showNotifications = !showNotifications">
            <Bell class="w-5 h-5" />
            <span v-if="unreadCount > 0" class="fluent-badge">{{ unreadCount }}</span>
          </button>
          <button class="fluent-icon-button" @click="showProfile = !showProfile">
            <User class="w-5 h-5" />
          </button>
        </div>
      </div>
    </div>

    <!-- 侧边菜单 -->
    <div class="fluent-side-menu" :class="{ 'is-open': isMenuOpen }">
      <nav class="space-y-2">
        <a href="#" class="fluent-nav-item active">
          <Home class="w-5 h-5" />
          <span>首页</span>
        </a>
        <a href="#" class="fluent-nav-item">
          <Inbox class="w-5 h-5" />
          <span>收件箱</span>
          <span class="fluent-badge">12</span>
        </a>
        <a href="#" class="fluent-nav-item">
          <Star class="w-5 h-5" />
          <span>收藏</span>
        </a>
        <a href="#" class="fluent-nav-item">
          <Settings class="w-5 h-5" />
          <span>设置</span>
        </a>
      </nav>
    </div>

    <!-- 主要内容区 -->
    <div class="container mx-auto p-6">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- 统计卡片 -->
        <div class="fluent-card">
          <div class="p-4">
            <h2 class="text-lg font-medium mb-4 text-gray-900">数据统计</h2>
            <div class="grid grid-cols-2 gap-4">
              <div class="fluent-stat-card">
                <div class="fluent-stat-icon">
                  <Users class="w-6 h-6" />
                </div>
                <div class="fluent-stat-content">
                  <span class="text-gray-500">用户数</span>
                  <span class="text-2xl font-bold">1,234</span>
                </div>
              </div>
              <div class="fluent-stat-card">
                <div class="fluent-stat-icon">
                  <Activity class="w-6 h-6" />
                </div>
                <div class="fluent-stat-content">
                  <span class="text-gray-500">活跃度</span>
                  <span class="text-2xl font-bold">89%</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 图表卡片 -->
        <div class="fluent-card md:col-span-2">
          <div class="p-4">
            <h2 class="text-lg font-medium mb-4 text-gray-900">数据趋势</h2>
            <div class="fluent-chart">
              <div class="h-48 flex items-end space-x-2">
                <div v-for="i in 7" :key="i" class="fluent-chart-bar" :style="{ height: `${Math.random() * 100}%` }"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 任务列表 -->
        <div class="fluent-card">
          <div class="p-4">
            <h2 class="text-lg font-medium mb-4 text-gray-900">任务列表</h2>
            <div class="space-y-4">
              <div v-for="task in tasks" :key="task.id" class="fluent-task-item">
                <label class="fluent-checkbox">
                  <input type="checkbox" v-model="task.completed">
                  <span class="fluent-checkmark"></span>
                </label>
                <div class="flex-1">
                  <h3 class="font-medium" :class="{ 'line-through text-gray-400': task.completed }">
                    {{ task.title }}
                  </h3>
                  <p class="text-sm text-gray-500">{{ task.dueDate }}</p>
                </div>
                <button class="fluent-icon-button">
                  <MoreVertical class="w-5 h-5" />
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 消息列表 -->
        <div class="fluent-card md:col-span-2">
          <div class="p-4">
            <h2 class="text-lg font-medium mb-4 text-gray-900">消息列表</h2>
            <div class="space-y-4">
              <div v-for="message in messages" :key="message.id" class="fluent-message-item">
                <div class="fluent-avatar" :class="message.avatarClass">
                  {{ message.initials }}
                </div>
                <div class="flex-1">
                  <div class="flex justify-between">
                    <h3 class="font-medium">{{ message.sender }}</h3>
                    <span class="text-sm text-gray-500">{{ message.time }}</span>
                  </div>
                  <p class="text-gray-600">{{ message.content }}</p>
                </div>
                <button class="fluent-icon-button">
                  <MoreVertical class="w-5 h-5" />
                </button>
              </div>
            </div>
          </div>
        </div>

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

        <!-- 按钮组 -->
        <div class="fluent-card">
          <div class="p-4">
            <h2 class="text-lg font-medium mb-4 text-gray-900">按钮样式</h2>
            <div class="space-y-4">
              <div class="flex flex-wrap gap-4">
                <button class="fluent-button">主要按钮</button>
                <button class="fluent-button outlined">次要按钮</button>
                <button class="fluent-button text">文本按钮</button>
                <button class="fluent-button icon">
                  <Plus class="w-5 h-5" />
                </button>
              </div>
              <div class="flex flex-wrap gap-4">
                <button class="fluent-button small">小按钮</button>
                <button class="fluent-button large">大按钮</button>
                <button class="fluent-button loading">
                  <Loader2 class="w-5 h-5 animate-spin" />
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 进度指示器 -->
        <div class="fluent-card">
          <div class="p-4">
            <h2 class="text-lg font-medium mb-4 text-gray-900">进度指示器</h2>
            <div class="space-y-4">
              <div class="fluent-progress">
                <div class="fluent-progress-bar" style="width: 60%"></div>
              </div>
              <div class="fluent-progress circular">
                <div class="fluent-progress-circle"></div>
              </div>
              <div class="flex justify-between text-sm text-gray-500">
                <span>0%</span>
                <span>60%</span>
                <span>100%</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 标签页 -->
        <div class="fluent-card md:col-span-3">
          <div class="p-4">
            <h2 class="text-lg font-medium mb-4 text-gray-900">标签页</h2>
            <div class="fluent-tabs">
              <button 
                v-for="tab in tabs" 
                :key="tab.id"
                class="fluent-tab"
                :class="{ active: activeTab === tab.id }"
                @click="activeTab = tab.id"
              >
                {{ tab.label }}
              </button>
            </div>
            <div class="mt-4">
              <div v-if="activeTab === 'tab1'" class="fluent-tab-content">
                <p>标签页 1 的内容</p>
              </div>
              <div v-if="activeTab === 'tab2'" class="fluent-tab-content">
                <p>标签页 2 的内容</p>
              </div>
              <div v-if="activeTab === 'tab3'" class="fluent-tab-content">
                <p>标签页 3 的内容</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

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

    <!-- 对话框 -->
    <div v-if="showDialog" class="fluent-dialog-overlay">
      <div class="fluent-dialog">
        <div class="fluent-dialog-header">
          <h3 class="text-gray-900">对话框标题</h3>
          <button class="fluent-icon-button" @click="showDialog = false">
            <X class="w-5 h-5" />
          </button>
        </div>
        <div class="fluent-dialog-content">
          <p class="text-gray-600">这是一个 Fluent Design 风格的对话框示例。</p>
        </div>
        <div class="fluent-dialog-actions">
          <button class="fluent-button text" @click="showDialog = false">取消</button>
          <button class="fluent-button" @click="showDialog = false">确定</button>
        </div>
      </div>
    </div>

    <!-- 通知面板 -->
    <div v-if="showNotifications" class="fluent-notification-panel">
      <div class="fluent-notification-header">
        <h3 class="text-gray-900">通知</h3>
        <button class="fluent-icon-button" @click="showNotifications = false">
          <X class="w-5 h-5" />
        </button>
      </div>
      <div class="fluent-notification-list">
        <div v-for="notification in notifications" :key="notification.id" class="fluent-notification-item">
          <div class="fluent-notification-icon">
            <Bell class="w-5 h-5" />
          </div>
          <div class="flex-1">
            <h4 class="font-medium">{{ notification.title }}</h4>
            <p class="text-sm text-gray-500">{{ notification.content }}</p>
          </div>
          <span class="text-xs text-gray-400">{{ notification.time }}</span>
        </div>
      </div>
    </div>

    <!-- 个人资料面板 -->
    <div v-if="showProfile" class="fluent-profile-panel">
      <div class="fluent-profile-header">
        <div class="fluent-avatar large">JD</div>
        <div class="ml-4">
          <h3 class="font-medium">John Doe</h3>
          <p class="text-sm text-gray-500">john.doe@example.com</p>
        </div>
        <button class="fluent-icon-button" @click="showProfile = false">
          <X class="w-5 h-5" />
        </button>
      </div>
      <div class="fluent-profile-menu">
        <a href="#" class="fluent-profile-menu-item">
          <User class="w-5 h-5" />
          <span>个人资料</span>
        </a>
        <a href="#" class="fluent-profile-menu-item">
          <Settings class="w-5 h-5" />
          <span>设置</span>
        </a>
        <a href="#" class="fluent-profile-menu-item">
          <LogOut class="w-5 h-5" />
          <span>退出登录</span>
        </a>
      </div>
    </div>
  </div>
</template>

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

const showDialog = ref(false)
const showNotifications = ref(false)
const showProfile = ref(false)
const isMenuOpen = ref(false)
const activeTab = ref('tab1')
const unreadCount = ref(3)

const tasks = ref([
  { id: 1, title: '完成项目报告', dueDate: '今天', completed: false },
  { id: 2, title: '回复客户邮件', dueDate: '明天', completed: true },
  { id: 3, title: '准备会议材料', dueDate: '后天', completed: false }
])

const messages = ref([
  { 
    id: 1, 
    sender: 'Alice', 
    content: '你好，请问项目进展如何？', 
    time: '10:30', 
    initials: 'A',
    avatarClass: 'bg-blue-500'
  },
  { 
    id: 2, 
    sender: 'Bob', 
    content: '会议时间改到下午3点', 
    time: '09:15', 
    initials: 'B',
    avatarClass: 'bg-green-500'
  }
])

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

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

<style scoped>
.fluent-container {
  font-family: 'Segoe UI', sans-serif;
}

.fluent-app-bar {
  @apply sticky top-0 z-10 bg-white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fluent-icon-button {
  @apply p-2 rounded-full text-gray-600 hover:bg-gray-100;
  transition: all 0.2s ease;
}

.fluent-icon-button:active {
  @apply bg-gray-200;
}

.fluent-search-box {
  @apply flex items-center px-4 py-2 rounded-full bg-gray-100;
  transition: all 0.2s ease;
}

.fluent-search-box:focus-within {
  @apply bg-white ring-2 ring-blue-500;
}

.fluent-search-input {
  @apply ml-2 bg-transparent outline-none w-48;
}

.fluent-side-menu {
  @apply fixed top-0 left-0 h-full w-64 bg-white p-4 transform -translate-x-full transition-transform duration-300;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fluent-side-menu.is-open {
  @apply translate-x-0;
}

.fluent-card {
  @apply rounded-lg p-4 bg-white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fluent-stat-card {
  @apply flex items-center p-4 rounded-lg bg-gray-50;
}

.fluent-stat-icon {
  @apply w-12 h-12 rounded-full flex items-center justify-center text-blue-500 bg-blue-50;
}

.fluent-stat-content {
  @apply ml-4;
}

.fluent-chart {
  @apply p-4 rounded-lg bg-gray-50;
}

.fluent-chart-bar {
  @apply w-8 bg-blue-500 rounded-t;
  transition: height 0.3s ease;
}

.fluent-task-item {
  @apply flex items-center space-x-4 p-2 rounded-lg hover:bg-gray-50;
  transition: all 0.2s ease;
}

.fluent-message-item {
  @apply flex items-center space-x-4 p-4 rounded-lg hover:bg-gray-50;
  transition: all 0.2s ease;
}

.fluent-nav-item {
  @apply flex items-center space-x-3 p-2 rounded-lg text-gray-600 hover:bg-gray-100;
  transition: all 0.2s ease;
}

.fluent-nav-item.active {
  @apply text-blue-500 bg-blue-50;
}

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

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

.fluent-avatar.large {
  @apply w-16 h-16;
}

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

.fluent-input {
  @apply w-full px-4 py-2 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500;
  transition: all 0.2s ease;
}

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

.fluent-checkmark,
.fluent-radiomark {
  @apply w-5 h-5 border-2 border-gray-300 rounded;
  transition: all 0.2s ease;
}

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

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

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

.fluent-switch input {
  @apply hidden;
}

.fluent-switch label {
  @apply relative inline-block w-12 h-6 rounded-full bg-gray-300 cursor-pointer;
  transition: all 0.2s ease;
}

.fluent-switch label:after {
  content: '';
  @apply absolute w-5 h-5 rounded-full bg-white top-0.5 left-0.5;
  transition: all 0.2s ease;
}

.fluent-switch input:checked + label {
  @apply bg-blue-500;
}

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

.fluent-button {
  @apply px-4 py-2 rounded-lg text-white bg-blue-500 hover:bg-blue-600;
  transition: all 0.2s ease;
}

.fluent-button.outlined {
  @apply bg-transparent border border-blue-500 text-blue-500 hover:bg-blue-50;
}

.fluent-button.text {
  @apply bg-transparent border-none text-blue-500 hover:bg-blue-50;
}

.fluent-button.icon {
  @apply p-2;
}

.fluent-button.small {
  @apply px-3 py-1 text-sm;
}

.fluent-button.large {
  @apply px-6 py-3 text-lg;
}

.fluent-button.loading {
  @apply cursor-wait;
}

.fluent-progress {
  @apply h-2 rounded-full overflow-hidden bg-gray-200;
}

.fluent-progress-bar {
  @apply h-full rounded-full bg-blue-500;
  transition: width 0.3s ease;
}

.fluent-progress.circular {
  @apply w-12 h-12 rounded-full border-4 border-gray-200;
}

.fluent-progress-circle {
  @apply w-full h-full border-4 border-blue-500 border-t-transparent;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.fluent-tabs {
  @apply flex space-x-2 p-1 rounded-lg bg-gray-100;
}

.fluent-tab {
  @apply px-4 py-2 rounded-md text-gray-600 hover:bg-white;
  transition: all 0.2s ease;
}

.fluent-tab.active {
  @apply text-blue-500 bg-white;
}

.fluent-tab-content {
  @apply p-4 rounded-lg bg-white;
}

.fluent-bottom-nav {
  @apply fixed bottom-0 left-0 right-0 flex justify-around items-center py-2 bg-white;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.fluent-bottom-nav-item {
  @apply flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-500;
  transition: all 0.2s ease;
}

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

.fluent-dialog-overlay {
  @apply fixed inset-0 bg-black/50 flex items-center justify-center;
}

.fluent-dialog {
  @apply rounded-lg p-4 bg-white w-full max-w-md;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

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

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

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

.fluent-notification-panel {
  @apply fixed top-0 right-0 w-80 bg-white rounded-lg;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

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

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

.fluent-notification-item {
  @apply flex items-center space-x-4 p-4 border-b border-gray-200 hover:bg-gray-50;
  transition: all 0.2s ease;
}

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

.fluent-profile-panel {
  @apply fixed top-0 right-0 w-80 bg-white rounded-lg;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fluent-profile-header {
  @apply flex items-center p-4 border-b border-gray-200;
}

.fluent-profile-menu {
  @apply space-y-2 p-4;
}

.fluent-profile-menu-item {
  @apply flex items-center space-x-3 p-2 rounded-lg text-gray-600 hover:bg-gray-100;
  transition: all 0.2s ease;
}
</style> 