baoshi-asrs-web/src/App.vue

<template>
  <div class="dashboard">
    <LoginModal
      :visible="showLoginModal"
      @success="handleLoginSuccess"
      @cancel="handleLoginCancel"
    />

    <header class="header">
      <h1 class="title">
        宝时立库
        <span class="title-meta">· 总库位 {{ locations.length }}</span>
        <span class="title-meta">· 可用库位 {{ availableLocationsCount }}</span>
        <span class="title-legend">
          <button
            type="button"
            :class="[
              'legend-chip',
              'legend-chip-a',
              { 'legend-chip-inactive': !categoryColorVisibility.A }
            ]"
            @click="toggleCategoryColorVisibility('A')"
          >
            A
          </button>
          <button
            type="button"
            :class="[
              'legend-chip',
              'legend-chip-b',
              { 'legend-chip-inactive': !categoryColorVisibility.B }
            ]"
            @click="toggleCategoryColorVisibility('B')"
          >
            B
          </button>
          <button
            type="button"
            :class="[
              'legend-chip',
              'legend-chip-c',
              { 'legend-chip-inactive': !categoryColorVisibility.C }
            ]"
            @click="toggleCategoryColorVisibility('C')"
          >
            C
          </button>
        </span>
      </h1>
      <div class="controls">
        <label class="filter-item">
          <span class="selector-label">库位类型</span>
          <select
            v-model="selectedCategory"
            class="level-select"
          >
            <option value="">全部</option>
            <option
              v-for="category in categoryOptions"
              :key="category"
              :value="category"
            >
              {{ category }}
            </option>
          </select>
        </label>
        <label class="filter-item">
          <span class="selector-label">库位属性</span>
          <select
            v-model="selectedLocationAttribute"
            class="level-select"
          >
            <option value="">全部</option>
            <option
              v-for="attribute in locationAttributeOptions"
              :key="attribute"
              :value="attribute"
            >
              {{ getLocationAttributeLabel(attribute) }}
            </option>
          </select>
        </label>
        <label class="filter-item">
          <span class="selector-label">容器</span>
          <select
            v-model="selectedHasContainer"
            class="level-select"
          >
            <option value="">全部</option>
            <option value="Y">有容器</option>
            <option value="N">无容器</option>
          </select>
        </label>
        <label class="filter-item filter-input-item">
          <span class="selector-label">库位组</span>
          <span class="filter-input-wrap">
            <input
              v-model="locGroupKeywordInput"
              class="filter-input"
              type="text"
              placeholder="输入库位组"
              @keydown.enter="applyLocGroupFilter"
            >
            <button
              v-if="locGroupKeywordInput"
              class="filter-clear-btn"
              type="button"
              @click="clearLocGroupFilter"
            >
              <svg
                viewBox="0 0 16 16"
                aria-hidden="true"
                class="filter-action-icon"
              >
                <path
                  d="M4.22 4.22a.75.75 0 0 1 1.06 0L8 6.94l2.72-2.72a.75.75 0 1 1 1.06 1.06L9.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L8 9.06l-2.72 2.72a.75.75 0 1 1-1.06-1.06L6.94 8 4.22 5.28a.75.75 0 0 1 0-1.06z"
                  fill="currentColor"
                />
              </svg>
            </button>
            <button
              class="filter-confirm-btn"
              type="button"
              @click="applyLocGroupFilter"
            >
              <svg
                viewBox="0 0 16 16"
                aria-hidden="true"
                class="filter-action-icon"
              >
                <path
                  d="M6.5 2.5a4 4 0 1 0 2.47 7.15l2.69 2.68 1.06-1.06-2.68-2.69A4 4 0 0 0 6.5 2.5zm0 1.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"
                  fill="currentColor"
                />
              </svg>
            </button>
          </span>
        </label>
        <label class="filter-item filter-input-item">
          <span class="selector-label">库位号</span>
          <span class="filter-input-wrap">
            <input
              v-model="locationIdKeywordInput"
              class="filter-input"
              type="text"
              placeholder="输入库位号"
              @keydown.enter="applyLocationIdFilter"
            >
            <button
              v-if="locationIdKeywordInput"
              class="filter-clear-btn"
              type="button"
              @click="clearLocationIdFilter"
            >
              <svg
                viewBox="0 0 16 16"
                aria-hidden="true"
                class="filter-action-icon"
              >
                <path
                  d="M4.22 4.22a.75.75 0 0 1 1.06 0L8 6.94l2.72-2.72a.75.75 0 1 1 1.06 1.06L9.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L8 9.06l-2.72 2.72a.75.75 0 1 1-1.06-1.06L6.94 8 4.22 5.28a.75.75 0 0 1 0-1.06z"
                  fill="currentColor"
                />
              </svg>
            </button>
            <button
              class="filter-confirm-btn"
              type="button"
              @click="applyLocationIdFilter"
            >
              <svg
                viewBox="0 0 16 16"
                aria-hidden="true"
                class="filter-action-icon"
              >
                <path
                  d="M6.5 2.5a4 4 0 1 0 2.47 7.15l2.69 2.68 1.06-1.06-2.68-2.69A4 4 0 0 0 6.5 2.5zm0 1.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"
                  fill="currentColor"
                />
              </svg>
            </button>
          </span>
        </label>
        <label class="toggle-item">
          <span class="selector-label">库位组边框</span>
          <input
            :checked="showGroupBorder"
            class="toggle-input"
            type="checkbox"
            @change="handleGroupBorderToggle"
          >
          <span class="toggle-track">
            <span class="toggle-thumb" />
          </span>
        </label>
        <label class="filter-item">
          <span class="selector-label">库区</span>
          <select
            v-model="selectedZoneId"
            class="level-select"
          >
            <option value="">全部</option>
            <option
              v-for="zoneId in zoneOptions"
              :key="zoneId"
              :value="zoneId"
            >
              {{ zoneId }}
            </option>
          </select>
        </label>
        <label class="toggle-item">
          <span class="selector-label">卡片</span>
          <input
            v-model="showTooltip"
            class="toggle-input"
            type="checkbox"
          >
          <span class="toggle-track">
            <span class="toggle-thumb" />
          </span>
        </label>
        <select
          v-model.number="currentLevel"
          class="level-select level-select-floor"
          @change="handleLevelChange"
        >
          <option
            v-for="level in levelRange"
            :key="level"
            :value="level"
          >
            {{ level }}层
          </option>
        </select>
        <div
          ref="refreshControlRef"
          class="refresh-control"
        >
          <button
            class="refresh-btn"
            :disabled="loading || refreshing"
            @click="handleManualRefresh"
            @contextmenu.prevent="handleRefreshContextMenu"
          >
            {{ refreshCountdownText }}
          </button>
          <div
            v-if="showRefreshPopover"
            class="refresh-popover"
            @click.stop
          >
            <input
              ref="refreshIntervalInputRef"
              v-model="refreshIntervalInput"
              class="refresh-popover-input"
              type="text"
              inputmode="numeric"
              @keydown.enter="applyRefreshInterval"
            >
            <button
              class="refresh-popover-confirm"
              type="button"
              @click="applyRefreshInterval"
            >
              <svg
                viewBox="0 0 16 16"
                aria-hidden="true"
                class="filter-action-icon"
              >
                <path
                  d="M6.46 11.03 3.43 8a.75.75 0 1 1 1.06-1.06l1.97 1.96 5.05-5.04A.75.75 0 0 1 12.57 4.9l-5.58 5.59a.75.75 0 0 1-1.06 0z"
                  fill="currentColor"
                />
              </svg>
            </button>
          </div>
        </div>
        <button
          class="logout-btn"
          @click="handleLogout"
        >
          退出
        </button>
      </div>
    </header>

    <main class="main-content">
      <div
        v-if="loading"
        class="loading"
      >
        加载中...
      </div>
      <div
        v-else-if="error"
        class="error"
      >
        {{ error }}
      </div>
      <div
        v-else
        class="map-container"
      >
        <WarehouseMap
          :locations="locations"
          :current-level="currentLevel"
          :selected-category="selectedCategory"
          :selected-location-attribute="selectedLocationAttribute"
          :selected-has-container="selectedHasContainer"
          :selected-zone-id="selectedZoneId"
          :loc-group-keyword="appliedLocGroupKeyword"
          :location-id-keyword="appliedLocationIdKeyword"
          :show-group-border="showGroupBorder"
          :show-tooltip="showTooltip"
          :category-color-visibility="categoryColorVisibility"
          @select-loc-group="handleSelectLocGroup"
          @select-location-id="handleSelectLocationId"
        />
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, onBeforeUnmount, nextTick } from 'vue'
import { fetchLocationData } from './api/location'
import type { LocationAttributeCode, LocationResourceDataVO } from './types'
import WarehouseMap from './components/WarehouseMap.vue'
import LoginModal from './components/LoginModal.vue'
import { config } from './config'
import { isAuthenticated, removeToken } from './utils/auth'

const LEVEL_STORAGE_KEY = 'warehouse-map.current-level'
const REFRESH_INTERVAL_STORAGE_KEY = 'warehouse-map.refresh-interval-ms'
const getInitialLevel = () => {
  const savedLevel = window.localStorage.getItem(LEVEL_STORAGE_KEY)
  const parsedLevel = savedLevel ? Number(savedLevel) : NaN
  if (
    Number.isInteger(parsedLevel) &&
    parsedLevel >= config.minLevel &&
    parsedLevel <= config.maxLevel
  ) {
    return parsedLevel
  }
  return config.minLevel
}

const getInitialRefreshInterval = () => {
  const savedInterval = window.localStorage.getItem(REFRESH_INTERVAL_STORAGE_KEY)
  const parsedInterval = savedInterval ? Number(savedInterval) : NaN
  if (Number.isInteger(parsedInterval) && parsedInterval > 0) {
    return parsedInterval
  }
  return config.refreshInterval
}

const currentLevel = ref(getInitialLevel())
const locations = ref<LocationResourceDataVO[]>([])
const loading = ref(false)
const refreshing = ref(false)
const hasLoadedOnce = ref(false)
const error = ref('')
const showLoginModal = ref(false)
const selectedCategory = ref('')
const selectedLocationAttribute = ref<LocationAttributeCode | ''>('')
const selectedHasContainer = ref<'Y' | 'N' | ''>('')
const selectedZoneId = ref('')
const categoryColorVisibility = ref<Record<'A' | 'B' | 'C', boolean>>({
  A: true,
  B: true,
  C: true
})
const locGroupKeywordInput = ref('')
const appliedLocGroupKeyword = ref('')
const locationIdKeywordInput = ref('')
const appliedLocationIdKeyword = ref('')
const showGroupBorder = ref(false)
const showTooltip = ref(true)
const refreshIntervalMs = ref(getInitialRefreshInterval())
const showRefreshPopover = ref(false)
const refreshIntervalInput = ref(String(Math.max(Math.floor(refreshIntervalMs.value / 1000), 1)))
const now = ref(Date.now())
const nextRefreshAt = ref(Date.now() + refreshIntervalMs.value)
const refreshControlRef = ref<HTMLElement | null>(null)
const refreshIntervalInputRef = ref<HTMLInputElement | null>(null)
let refreshTimer: number | null = null
let countdownTimer: number | null = null

const LOCATION_ATTRIBUTE_LABEL_MAP: Record<LocationAttributeCode, string> = {
  OK: '正常',
  FI: '禁入',
  HD: '封存',
  SC: '管控'
}

const levelRange = computed(() => {
  const levels = []
  for (let i = config.minLevel; i <= config.maxLevel; i++) {
    levels.push(i)
  }
  return levels
})

const categoryOptions = computed(() => {
  return [...new Set(locations.value.map((loc) => loc.category).filter(Boolean))].sort()
})

const availableLocationsCount = computed(() => {
  return locations.value.filter((loc) => loc.locationAttribute === 'OK').length
})

const locationAttributeOptions = computed<LocationAttributeCode[]>(() => {
  return [
    ...new Set(locations.value.map((loc) => loc.locationAttribute).filter(Boolean))
  ] as LocationAttributeCode[]
})

const zoneOptions = computed(() => {
  return [...new Set(locations.value.map((loc) => loc.zoneId).filter(Boolean))].sort()
})

const getLocationAttributeLabel = (attribute: LocationAttributeCode) => {
  return LOCATION_ATTRIBUTE_LABEL_MAP[attribute] || attribute
}

const toggleCategoryColorVisibility = (category: 'A' | 'B' | 'C') => {
  categoryColorVisibility.value = {
    ...categoryColorVisibility.value,
    [category]: !categoryColorVisibility.value[category]
  }
}

const copyText = async (text: string) => {
  if (!text) return

  try {
    await navigator.clipboard.writeText(text)
    return
  } catch (error) {
    console.warn('Clipboard API copy failed, fallback to execCommand.', error)
  }

  const textarea = document.createElement('textarea')
  textarea.value = text
  textarea.setAttribute('readonly', 'true')
  textarea.style.position = 'fixed'
  textarea.style.top = '-9999px'
  document.body.appendChild(textarea)
  textarea.select()
  document.execCommand('copy')
  document.body.removeChild(textarea)
}

const applyLocGroupFilter = () => {
  appliedLocGroupKeyword.value = locGroupKeywordInput.value.trim()
}

const applyLocationIdFilter = () => {
  appliedLocationIdKeyword.value = locationIdKeywordInput.value.trim()
}

const clearLocGroupFilter = () => {
  locGroupKeywordInput.value = ''
  appliedLocGroupKeyword.value = ''
}

const clearLocationIdFilter = () => {
  locationIdKeywordInput.value = ''
  appliedLocationIdKeyword.value = ''
}

const handleGroupBorderToggle = (event: Event) => {
  showGroupBorder.value = (event.target as HTMLInputElement).checked
}

const refreshCountdownText = computed(() => {
  const remainMs = Math.max(nextRefreshAt.value - now.value, 0)
  const totalSeconds = Math.floor(remainMs / 1000)
  const minutes = Math.floor(totalSeconds / 60)
  const seconds = totalSeconds % 60
  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
})

const loadLocationData = async (options: { silent?: boolean } = {}) => {
  const { silent = false } = options
  if (!isAuthenticated()) {
    showLoginModal.value = true
    return
  }

  const shouldUseSilentRefresh = silent && hasLoadedOnce.value
  if (shouldUseSilentRefresh) {
    refreshing.value = true
  } else {
    loading.value = true
    error.value = ''
  }

  try {
    const data = await fetchLocationData({
      warehouse: config.warehouse,
      locLevel: currentLevel.value
    })
    locations.value = data
    hasLoadedOnce.value = true
  } catch (err: unknown) {
    if (!shouldUseSilentRefresh) {
      error.value = err instanceof Error ? err.message : '加载数据失败，请检查接口连接'
    }
    console.error('Failed to load location data:', err)
  } finally {
    if (shouldUseSilentRefresh) {
      refreshing.value = false
    } else {
      loading.value = false
    }
  }
}

const scheduleNextRefresh = () => {
  if (refreshTimer !== null) {
    window.clearTimeout(refreshTimer)
  }
  nextRefreshAt.value = Date.now() + refreshIntervalMs.value
  refreshTimer = window.setTimeout(async () => {
    await loadLocationData({ silent: true })
    scheduleNextRefresh()
  }, refreshIntervalMs.value)
}

const handleLevelChange = () => {
  window.localStorage.setItem(LEVEL_STORAGE_KEY, String(currentLevel.value))
  loadLocationData()
  scheduleNextRefresh()
}

const handleManualRefresh = () => {
  loadLocationData({ silent: true })
  scheduleNextRefresh()
}

const applyRefreshInterval = () => {
  const nextSeconds = Number(refreshIntervalInput.value.trim())
  if (!Number.isInteger(nextSeconds) || nextSeconds <= 0) {
    return
  }

  refreshIntervalMs.value = nextSeconds * 1000
  refreshIntervalInput.value = String(nextSeconds)
  window.localStorage.setItem(REFRESH_INTERVAL_STORAGE_KEY, String(refreshIntervalMs.value))
  showRefreshPopover.value = false
  scheduleNextRefresh()
}

const handleRefreshContextMenu = async () => {
  refreshIntervalInput.value = String(Math.max(Math.floor(refreshIntervalMs.value / 1000), 1))
  showRefreshPopover.value = true
  await nextTick()
  refreshIntervalInputRef.value?.focus()
  refreshIntervalInputRef.value?.select()
}

const handleDocumentClick = (event: MouseEvent) => {
  if (!showRefreshPopover.value) {
    return
  }

  const target = event.target as Node | null
  if (target && refreshControlRef.value?.contains(target)) {
    return
  }

  showRefreshPopover.value = false
}

const handleLoginSuccess = () => {
  showLoginModal.value = false
  loadLocationData()
  scheduleNextRefresh()
}

const handleSelectLocGroup = async (locGroup1: string) => {
  await copyText(locGroup1)
  if (appliedLocGroupKeyword.value === locGroup1) {
    locGroupKeywordInput.value = ''
    appliedLocGroupKeyword.value = ''
    return
  }

  locGroupKeywordInput.value = locGroup1
  appliedLocGroupKeyword.value = locGroup1
  locationIdKeywordInput.value = ''
  appliedLocationIdKeyword.value = ''
}

const handleSelectLocationId = async (locationId: string) => {
  await copyText(locationId)
  if (appliedLocationIdKeyword.value === locationId) {
    locationIdKeywordInput.value = ''
    appliedLocationIdKeyword.value = ''
    return
  }

  locationIdKeywordInput.value = locationId
  appliedLocationIdKeyword.value = locationId
  locGroupKeywordInput.value = ''
  appliedLocGroupKeyword.value = ''
}

const handleLoginCancel = () => {
  // 不允许取消登录，必须登录才能使用
}

const handleLogout = () => {
  if (refreshTimer !== null) {
    window.clearTimeout(refreshTimer)
    refreshTimer = null
  }
  removeToken()
  locations.value = []
  hasLoadedOnce.value = false
  loading.value = false
  refreshing.value = false
  showLoginModal.value = true
}

onMounted(() => {
  countdownTimer = window.setInterval(() => {
    now.value = Date.now()
  }, 1000)
  document.addEventListener('mousedown', handleDocumentClick)

  if (!isAuthenticated()) {
    showLoginModal.value = true
  } else {
    loadLocationData()
    scheduleNextRefresh()
  }
})

onBeforeUnmount(() => {
  if (refreshTimer !== null) {
    window.clearTimeout(refreshTimer)
  }
  if (countdownTimer !== null) {
    window.clearInterval(countdownTimer)
  }
  document.removeEventListener('mousedown', handleDocumentClick)
})
</script>

<style scoped>
.dashboard {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #000000;
}

.header {
  padding: 10px 18px;
  background: linear-gradient(180deg, #050505 0%, #000000 100%);
  border-bottom: 1px solid #1c1c1c;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.1;
  color: #f2f2f2;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.08);
}

.title-meta {
  font-size: 11px;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.6);
}

.title-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 14px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  color: #f4f7fa;
  border: none;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease,
    box-shadow 0.2s ease;
}

.legend-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.legend-chip-inactive {
  opacity: 0.42;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.legend-chip-a {
  background: #008000;
}

.legend-chip-b {
  background: #0000ff;
  color: #f4f8ff;
}

.legend-chip-c {
  background: #ffff00;
  color: #5a5200;
}

.controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.level-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #d8d8d8;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #d8d8d8;
}

.filter-input-item {
  min-width: auto;
}

.toggle-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #d8d8d8;
}

.selector-label {
  font-size: 11px;
  color: #8e8e8e;
}

.level-select {
  min-width: 76px;
  padding: 6px 24px 6px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #252525;
  color: #f2f2f2;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
  border-radius: 4px;
  outline: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #6d6d6d 50%),
    linear-gradient(135deg, #6d6d6d 50%, transparent 50%);
  background-position:
    calc(100% - 13px) calc(50% - 2px),
    calc(100% - 8px) calc(50% - 2px);
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
  line-height: 1;
}

.level-select-floor {
  min-width: 64px;
}

.filter-input-wrap {
  position: relative;
  display: inline-flex;
  width: 136px;
}

.filter-input {
  width: 100%;
  padding: 6px 8px;
  padding-right: 50px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #252525;
  color: #f2f2f2;
  font-size: 12px;
  border-radius: 4px;
  outline: none;
  line-height: 1;
}

.filter-input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.filter-input:hover,
.filter-input:focus {
  background: rgba(255, 255, 255, 0.05);
  border-color: #3a3a3a;
}

.filter-confirm-btn {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 24px;
  height: calc(100% - 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-left: 1px solid #202020;
  background: transparent;
  color: #cfcfcf;
  cursor: pointer;
  border-radius: 0 3px 3px 0;
}

.filter-clear-btn {
  position: absolute;
  top: 1px;
  right: 25px;
  width: 24px;
  height: calc(100% - 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-left: 1px solid #202020;
  background: transparent;
  color: #cfcfcf;
  cursor: pointer;
}

.filter-clear-btn:hover,
.filter-confirm-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.filter-action-icon {
  width: 12px;
  height: 12px;
}

.toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-track {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #111111;
  border: 1px solid #2c2c2c;
  transition: all 0.2s;
  cursor: pointer;
}

.toggle-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f2f2f2;
  transition: transform 0.2s;
}

.toggle-input:checked + .toggle-track {
  background: #2b2b2b;
  border-color: #5a5a5a;
}

.toggle-input:checked + .toggle-track .toggle-thumb {
  transform: translateX(16px);
}

.level-select:hover,
.level-select:focus {
  background: rgba(255, 255, 255, 0.05);
  border-color: #3a3a3a;
}

.refresh-btn {
  min-width: 58px;
  padding: 6px 8px;
  background: #101010;
  border: 1px solid #282828;
  color: #e8e8e8;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.3s;
  border-radius: 4px;
  line-height: 1;
}

.refresh-control {
  position: relative;
}

.refresh-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(4, 4, 4, 0.98);
  border: 1px solid #242424;
  border-radius: 4px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
  z-index: 20;
}

.refresh-popover-input {
  width: 56px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #252525;
  color: #f2f2f2;
  font-size: 12px;
  border-radius: 4px;
  outline: none;
  line-height: 1;
}

.refresh-popover-input:focus {
  background: rgba(255, 255, 255, 0.05);
  border-color: #3a3a3a;
}

.refresh-popover-confirm {
  width: 24px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #252525;
  background: rgba(255, 255, 255, 0.03);
  color: #cfcfcf;
  border-radius: 4px;
  cursor: pointer;
}

.refresh-popover-confirm:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #3a3a3a;
}

.refresh-btn:hover:not(:disabled) {
  background: #181818;
  border-color: #3a3a3a;
}

.refresh-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.logout-btn {
  padding: 6px 10px;
  background: rgba(210, 92, 92, 0.08);
  border: 1px solid rgba(210, 92, 92, 0.45);
  color: #f2bcbc;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.3s;
  border-radius: 4px;
  line-height: 1;
}

.logout-btn:hover {
  background: rgba(210, 92, 92, 0.16);
  border-color: rgba(210, 92, 92, 0.7);
  color: #ffd4d4;
}

.main-content {
  flex: 1;
  padding: 0 12px 12px;
  overflow: auto;
  background: #000000;
}

.loading,
.error {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 18px;
  color: #f2f2f2;
}

.error {
  color: #ff4444;
}

.map-container {
  width: 100%;
  height: 100%;
}
</style>