fix: 前端页面架构重构初版

Yi.Ai.Vue3/src/layouts/components0/Header/components/ConsoleBtn.vue

@@ -0,0 +1,91 @@
+<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>