<script setup lang="ts">
import { useUserStore } from '@/stores';

const userStore = useUserStore();

// 打开用户中心对话框（通过调用 Avatar 组件的方法）
function openConsole() {
  // 触发事件，由父组件处理
  emit('open-console');
}

const emit = defineEmits(['open-console']);
</script>

<template>
  <div class="console-btn-container" data-tour="console-btn">
    <div
      class="console-btn"
      title="打开控制台"
      @click="openConsole"
    >
      <!-- PC端显示文字 -->
      <span class="pc-text">控制台</span>
      <!-- 移动端显示图标 -->
      <svg
        class="mobile-icon"
        xmlns="http://www.w3.org/2000/svg"
        width="20"
        height="20"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
        <line x1="8" y1="21" x2="16" y2="21" />
        <line x1="12" y1="17" x2="12" y2="21" />
      </svg>
    </div>
  </div>
</template>

<style scoped lang="scss">
.console-btn-container {
  display: flex;
  align-items: center;

  .console-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    color: #606266;
    transition: all 0.2s;

    &:hover {
      color: #909399;
      transform: translateY(-1px);
    }

    // PC端显示文字，隐藏图标
    .pc-text {
      display: inline;
      margin: 0 12px;
    }

    .mobile-icon {
      display: none;
    }
  }
}

// 移动端显示图标，隐藏文字
@media (max-width: 768px) {
  .console-btn-container {
    .console-btn {
      .pc-text {
        display: none;
      }

      .mobile-icon {
        display: inline;
      }
    }
  }
}
</style>
