AIGC/demo/frontend/src/views/AdminOrders.vue

<template>
  <div class="admin-orders">
    <!-- 左侧导航栏 -->
    <aside class="sidebar">
      <div class="logo">
        <img src="/images/backgrounds/logo-admin.svg" alt="Logo" />
      </div>
      <nav class="nav-menu">
        <div v-if="isAdminMode" class="nav-item" @click="goToDashboard">
          <el-icon><Grid /></el-icon>
          <span>{{ $t('nav.dashboard') }}</span>
          </div>
        <div v-if="isAdminMode" class="nav-item" @click="goToMembers">
          <el-icon><User /></el-icon>
          <span>{{ $t('nav.members') }}</span>
          </div>
        <div class="nav-item active">
          <el-icon><ShoppingCart /></el-icon>
          <span>{{ $t('nav.orders') }}</span>
          </div>
        <div v-if="isAdminMode" class="nav-item" @click="goToAPI">
          <el-icon><Document /></el-icon>
          <span>{{ $t('nav.apiManagement') }}</span>
          </div>
        <div v-if="isAdminMode" class="nav-item" @click="goToTasks">
          <el-icon><Document /></el-icon>
          <span>{{ $t('nav.tasks') }}</span>
          </div>
        <div v-if="isAdminMode" class="nav-item" @click="goToSettings">
          <el-icon><Setting /></el-icon>
          <span>{{ $t('nav.systemSettings') }}</span>
          </div>
        <!-- 普通用户模式的导航 -->
        <div v-if="!isAdminMode" class="nav-item" @click="goToProfile">
          <el-icon><User /></el-icon>
          <span>{{ $t('nav.profile') || '个人主页' }}</span>
        </div>
        <div v-if="!isAdminMode" class="nav-item" @click="goToWorks">
          <el-icon><Document /></el-icon>
          <span>{{ $t('nav.myWorks') || '我的作品' }}</span>
        </div>
      </nav>
      <div class="sidebar-footer">
        <div class="online-users">
          {{ $t('nav.onlineUsers') }}: <span class="highlight">{{ onlineUsers }}</span>
          </div>
        <div class="system-uptime">
          {{ $t('nav.systemUptime') }}: <span class="highlight">{{ systemUptime }}</span>
        </div>
      </div>
    </aside>

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 顶部搜索栏 -->
      <header class="top-header">
        <div class="search-bar">
          <el-icon class="search-icon"><Search /></el-icon>
          <input type="text" :placeholder="$t('common.searchPlaceholder')" class="search-input" v-model="searchText" />
          </div>
        <div class="header-actions">
          <LanguageSwitcher />
          <el-dropdown v-if="isAdminMode" @command="handleUserCommand">
            <div class="user-avatar">
              <img src="/images/backgrounds/avatar-default.svg" alt="用户头像" />
              <el-icon class="arrow-down"><ArrowDown /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="exitAdmin">
                  {{ $t('admin.exitAdmin') }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <div v-else class="user-avatar" @click="goToProfile">
            <img src="/images/backgrounds/avatar-default.svg" alt="用户头像" />
          </div>
        </div>
      </header>

      <!-- 订单列表内容 -->
      <section class="order-content">
        <div class="content-header">
          <h2>{{ $t('orders.title') }}</h2>
          <div class="selection-info" v-if="selectedOrders.length > 0">
            {{ $t('orders.selected', { count: selectedOrders.length }) }}
          </div>
        </div>

        <div class="table-toolbar">
          <div class="toolbar-left">
            <el-select v-model="filters.status" :placeholder="$t('orders.allStatus')" size="small" @change="handleFilterChange">
            <el-option :label="$t('orders.allStatus')" value="" />
            <el-option :label="$t('orders.pending')" value="PENDING" />
            <el-option :label="$t('orders.confirmed')" value="CONFIRMED" />
            <el-option :label="$t('orders.paid')" value="PAID" />
            <el-option :label="$t('orders.processing')" value="PROCESSING" />
            <el-option :label="$t('orders.shipped')" value="SHIPPED" />
            <el-option :label="$t('orders.delivered')" value="DELIVERED" />
            <el-option :label="$t('orders.completed')" value="COMPLETED" />
            <el-option :label="$t('orders.cancelled')" value="CANCELLED" />
            <el-option :label="$t('orders.refunded')" value="REFUNDED" />
          </el-select>
            <el-select v-model="filters.type" :placeholder="$t('orders.allTypes')" size="small" @change="handleFilterChange">
              <el-option :label="$t('orders.allTypes')" value="" />
              <el-option label="商品订单" value="PRODUCT" />
              <el-option label="服务订单" value="SERVICE" />
              <el-option label="订阅订单" value="SUBSCRIPTION" />
              <el-option label="数字商品" value="DIGITAL" />
              <el-option label="实体商品" value="PHYSICAL" />
            </el-select>
            </div>
          <div class="toolbar-right">
            <el-button type="danger" size="small" @click="deleteSelected" :disabled="selectedOrders.length === 0">
              <el-icon><Delete /></el-icon>
              {{ $t('common.delete') }}
              </el-button>
          </div>
        </div>

        <div class="table-container">
          <table class="order-table">
            <thead>
              <tr>
                <th class="checkbox-col">
                  <input type="checkbox" @change="toggleAllSelection" :checked="isAllSelected" />
                </th>
                <th>{{ $t('orders.orderNumber') }}</th>
                <th>{{ $t('orders.username') }}</th>
                <th>{{ $t('orders.amount') }}</th>
                <th>{{ $t('orders.paymentMethod') }}</th>
                <th>{{ $t('orders.status') }}</th>
                <th>{{ $t('orders.createTime') }}</th>
                <th>{{ $t('orders.operation') }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="order in orders" :key="order.id" class="table-row">
                <td class="checkbox-col">
                  <input
                    type="checkbox"
                    :checked="selectedOrders.some(o => o.id === order.id)"
                    @change="toggleOrderSelection(order)" />
                </td>
                <td>{{ order.orderNumber || order.id }}</td>
                <td>{{ order.user?.username || $t('orders.unpaid') }}</td>
                <td>{{ order.currency || '¥' }}{{ order.totalAmount || 0 }}</td>
                <td>
                  <span v-if="order.paymentMethod === 'ALIPAY'">
                    <el-icon><CreditCard /></el-icon> {{ $t('orders.alipay') }}
                  </span>
                  <span v-else-if="order.paymentMethod === 'WECHAT'">
                    <el-icon><CreditCard /></el-icon> {{ $t('orders.wechat') }}
                  </span>
                  <span v-else-if="order.paymentMethod === 'PAYPAL'">
                    <el-icon><Wallet /></el-icon> {{ $t('orders.paypal') }}
                  </span>
                  <span v-else class="text-muted">{{ $t('orders.unpaid') }}</span>
                </td>
                <td>
                  <span class="status-tag" :class="getStatusClass(order.status)">
                    {{ getStatusText(order.status) }}
                  </span>
                </td>
                <td>{{ formatDate(order.createdAt) }}</td>
                <td>
                  <el-link type="primary" class="action-link" @click="viewOrder(order)">{{ $t('common.view') }}</el-link>
                  <el-link type="danger" class="action-link" @click="deleteOrder(order)">{{ $t('common.delete') }}</el-link>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

      <!-- 分页 -->
      <div class="pagination-container">
          <div class="pagination">
            <el-icon class="page-arrow" @click="prevPage" :class="{ disabled: currentPage === 1 }"><ArrowLeft /></el-icon>
            <button 
              v-for="page in visiblePages" 
              :key="page"
              class="page-btn"
              :class="{ active: page === currentPage }"
              @click="goToPage(page)">
              {{ page }}
            </button>
            <template v-if="totalPages > 7 && currentPage < totalPages - 2">
              <span class="page-ellipsis">...</span>
              <button 
                class="page-btn"
                :class="{ active: totalPages === currentPage }"
                @click="goToPage(totalPages)">
                {{ totalPages }}
              </button>
            </template>
            <el-icon class="page-arrow" @click="nextPage" :class="{ disabled: currentPage === totalPages }"><ArrowRight /></el-icon>
      </div>
        </div>
      </section>
    </main>

  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Grid,
  User,
  ShoppingCart,
  Document,
  Setting,
  Search,
  ArrowDown,
  ArrowLeft,
  ArrowRight,
  Delete,
  CreditCard,
  Wallet
} from '@element-plus/icons-vue'
import { getOrders, getAdminOrders, getOrderStats, deleteOrder as deleteOrderAPI, deleteOrders } from '@/api/orders'
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'

const router = useRouter()
const route = useRoute()

// 判断是否为管理员模式（基于路由路径）
const isAdminMode = computed(() => route.path.includes('/admin/'))

const loading = ref(false)
const orders = ref([])
const searchText = ref('')
const selectedOrders = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const totalOrders = ref(0)

// 系统状态数据
const onlineUsers = ref('0/500')
const systemUptime = ref('加载中...')

// 筛选条件
const filters = reactive({
  status: '',
  type: '',
  search: ''
})

// 导航功能
const goToDashboard = () => {
  router.push('/admin/dashboard')
}

const goToMembers = () => {
  router.push('/member-management')
}

const goToAPI = () => {
  router.push('/api-management')
}

const goToTasks = () => {
  router.push('/generate-task-record')
}

const goToSettings = () => {
  router.push('/system-settings')
}

// 普通用户模式的导航函数
const goToProfile = () => {
  router.push('/profile')
}

const goToWorks = () => {
  router.push('/works')
}

// 处理用户头像下拉菜单
const handleUserCommand = (command) => {
  if (command === 'exitAdmin') {
    // 退出后台，返回个人首页
    router.push('/profile')
  }
}

// 获取状态样式类
const getStatusClass = (status) => {
  const statusMap = {
    'PENDING': 'pending',
    'CONFIRMED': 'confirmed',
    'PAID': 'paid',
    'PROCESSING': 'processing',
    'SHIPPED': 'shipped',
    'DELIVERED': 'delivered',
    'COMPLETED': 'completed',
    'CANCELLED': 'cancelled',
    'REFUNDED': 'refunded'
  }
  return statusMap[status] || ''
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'PENDING': '待支付',
    'CONFIRMED': '已确认',
    'PAID': '已支付',
    'PROCESSING': '处理中',
    'SHIPPED': '已发货',
    'DELIVERED': '已送达',
    'COMPLETED': '已完成',
    'CANCELLED': '已取消',
    'REFUNDED': '已退款'
  }
  return statusMap[status] || status
}

// 获取订单类型文本
const getOrderTypeText = (orderType) => {
  const typeMap = {
    'PRODUCT': '商品订单',
    'SERVICE': '服务订单',
    'SUBSCRIPTION': '订阅订单',
    'DIGITAL': '数字商品',
    'PHYSICAL': '实体商品'
  }
  return typeMap[orderType] || orderType
}

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}



// 表格操作
const isAllSelected = computed(() => {
  return orders.value.length > 0 && selectedOrders.value.length === orders.value.length
})

const totalPages = computed(() => {
  return Math.ceil(totalOrders.value / pageSize.value)
})

const visiblePages = computed(() => {
  const pages = []
  const total = totalPages.value
  const current = currentPage.value
  
  if (total <= 7) {
    for (let i = 1; i <= total; i++) {
      pages.push(i)
    }
  } else {
    if (current <= 3) {
      for (let i = 1; i <= 5; i++) {
        pages.push(i)
      }
    } else if (current >= total - 2) {
      for (let i = total - 4; i <= total; i++) {
        pages.push(i)
      }
    } else {
      for (let i = current - 2; i <= current + 2; i++) {
        pages.push(i)
      }
    }
  }
  return pages
})

const toggleAllSelection = () => {
  if (isAllSelected.value) {
    selectedOrders.value = []
  } else {
    selectedOrders.value = [...orders.value]
  }
}

const toggleOrderSelection = (order) => {
  const index = selectedOrders.value.findIndex(o => o.id === order.id)
  if (index > -1) {
    selectedOrders.value.splice(index, 1)
  } else {
    selectedOrders.value.push(order)
  }
}

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    fetchOrders()
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
    fetchOrders()
  }
}

const goToPage = (page) => {
  currentPage.value = page
  fetchOrders()
}

const viewOrder = (order) => {
  router.push(`/orders/${order.id}`)
}

const deleteOrder = async (order) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除订单 ${order.orderNumber || order.id} 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    await deleteOrderAPI(order.id)
    
    const index = orders.value.findIndex(o => o.id === order.id)
    if (index > -1) {
      orders.value.splice(index, 1)
      totalOrders.value--
    }
    
    ElMessage.success('删除成功')
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

const deleteSelected = async () => {
  if (selectedOrders.value.length === 0) {
    ElMessage.warning('请先选择要删除的订单')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedOrders.value.length} 个订单吗？`,
      '批量删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    const ids = selectedOrders.value.map(o => o.id)
    await deleteOrders(ids)
    
    orders.value = orders.value.filter(o => !ids.includes(o.id))
    totalOrders.value -= ids.length
    selectedOrders.value = []
    
    ElMessage.success('批量删除成功')
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
      ElMessage.error('批量删除失败')
    }
  }
}

// 获取订单列表
const fetchOrders = async () => {
  try {
    loading.value = true

    // 根据模式调用不同的 API
    const apiFunction = isAdminMode.value ? getAdminOrders : getOrders
    const response = await apiFunction({
      page: currentPage.value - 1,
      size: pageSize.value,
      status: filters.status,
      search: filters.search || searchText.value
    })

    console.log('获取订单列表响应:', response)

    // 后端返回格式: { success: true, data: { content: [...], totalElements: 100, ... } }
    // axios会将响应包装在response.data中
    const responseData = response?.data || response || {}
    console.log('解析后的响应数据:', responseData)

    if (responseData.success && responseData.data) {
      const pageData = responseData.data
      if (pageData.content) {
        // Spring Data Page格式
        orders.value = pageData.content || []
        totalOrders.value = pageData.totalElements || 0
        console.log('设置后的订单列表:', orders.value)
      } else if (Array.isArray(pageData)) {
        // 直接数组格式
        orders.value = pageData
        totalOrders.value = pageData.length
    } else {
        console.error('API返回数据格式错误: data不是Page对象也不是数组', pageData)
        ElMessage.error('API返回数据格式错误')
      }
    } else if (responseData.content) {
      // 直接返回Page对象（没有success包装）
      orders.value = responseData.content || []
      totalOrders.value = responseData.totalElements || 0
    } else if (responseData.list) {
      // 列表格式
      orders.value = responseData.list || []
      totalOrders.value = responseData.total || 0
    } else {
      console.error('API返回数据格式错误:', responseData)
      ElMessage.error('API返回数据格式错误')
    }

  } catch (error) {
    console.error('获取订单列表失败:', error)
    ElMessage.error('获取订单列表失败: ' + (error.message || '未知错误'))
  } finally {
    loading.value = false
  }
}

// 筛选变化
const handleFilterChange = () => {
  currentPage.value = 1
  fetchOrders()
}


onMounted(() => {
  fetchOrders()
  fetchSystemStats()
})

// 获取系统统计数据
const fetchSystemStats = async () => {
  try {
    // 临时使用计算值，后续可以从API获取
    // 计算在线用户数（这里简化处理）
    const randomOnline = Math.floor(Math.random() * 50) + 10
    onlineUsers.value = `${randomOnline}/500`

    // 计算系统运行时间（基于当前时间简单模拟）
    const hours = new Date().getHours()
    const minutes = new Date().getMinutes()
    systemUptime.value = `${hours}小时${minutes}分`
  } catch (error) {
    console.error('获取系统统计失败:', error)
    onlineUsers.value = '0/500'
    systemUptime.value = '未知'
  }
}
</script>

<style scoped>
.admin-orders {
  display: flex;
  min-height: 100vh;
  background: #f8f9fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 左侧导航栏 */
.sidebar {
  width: 240px;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  margin-bottom: 32px;
}

.logo img {
  width: 100%;
  height: auto;
  max-width: 180px;
  object-fit: contain;
}

.nav-menu {
  flex: 1;
  padding: 0 16px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #4b5563;
  font-size: 14px;
  font-weight: 500;
}

.nav-item:hover {
  background: #f3f4f6;
  color: #1f2937;
}

.nav-item.active {
  background: rgba(64, 158, 255, 0.15);
  color: #409EFF;
}

.nav-item .el-icon {
  margin-right: 12px;
  font-size: 18px;
}

.nav-item span {
  font-size: 14px;
  font-weight: 500;
}

.sidebar-footer {
  padding: 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  margin-top: auto;
  color: #4b5563;
}

.online-users,
.system-uptime {
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 8px;
  line-height: 1.5;
}

.sidebar-footer .highlight {
  color: #409EFF;
  font-weight: 600;
}

.highlight {
  color: #409EFF;
  font-weight: 600;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
}

/* 顶部搜索栏 */
.top-header {
  background: white;
  border-bottom: 1px solid #e9ecef;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-bar {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: #9ca3af;
  font-size: 16px;
  z-index: 1;
}

.search-input {
  width: 300px;
  padding: 10px 12px 10px 40px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: white;
  outline: none;
  transition: border-color 0.2s ease;
}

.search-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-input::placeholder {
  color: #9ca3af;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-avatar {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.user-avatar:hover {
  background: #f3f4f6;
}

.user-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.user-avatar .arrow-down {
  font-size: 12px;
  color: #6b7280;
}

/* 订单内容区域 */
.order-content {
  padding: 24px;
  flex: 1;
  background: white;
  margin: 24px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.content-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.selection-info {
  font-size: 14px;
  color: #64748b;
  background: #f1f5f9;
  padding: 8px 16px;
  border-radius: 6px;
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.table-container {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  margin-bottom: 24px;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.order-table thead {
  background: #f9fafb;
}

.order-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}

.order-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
}

.table-row:hover {
  background: #f9fafb;
}

.checkbox-col {
  width: 50px;
  text-align: center;
}

.checkbox-col input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.status-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.status-tag.completed {
  background: #10b981;
}

.status-tag.cancelled {
  background: #ef4444;
}

.status-tag.processing {
  background: #3b82f6;
}

.status-tag.pending {
  background: #f59e0b;
}

.status-tag.paid {
  background: #6366f1;
}

.action-link {
  margin-right: 12px;
  font-size: 14px;
  text-decoration: none;
}

.action-link:last-child {
  margin-right: 0;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-arrow {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d5db;
  background: white;
  color: #374151;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.page-arrow:hover:not(.disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.page-arrow.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  background: white;
  color: #374151;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-btn:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.page-btn.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-ellipsis {
  padding: 0 8px;
  color: #6b7280;
  font-size: 14px;
}

/* 未支付文本样式 */
.text-muted {
  color: #9ca3af;
  font-size: 13px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .admin-orders {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
  }
  
  .nav-menu {
    display: flex;
    overflow-x: auto;
    padding: 0 16px;
  }
  
  .nav-item {
    white-space: nowrap;
    margin-right: 16px;
    margin-bottom: 0;
  }
  
  .sidebar-footer {
    display: none;
  }
  
  .search-input {
    width: 200px;
  }
  
  .order-content {
    padding: 16px;
  }
}
</style>