重构前端公共布局与基础样式

src/components/MyHead.vue

@@ -1,20 +1,30 @@
 <template>
-  <div class="head">
-    <span>学习进度跟踪系统</span>
-    <el-button v-if="!isLoginRoute" @click="handleLogout">退出登录</el-button>
+  <div class="head surface-card">
+    <div class="brand-block">
+      <p class="brand-title">学习进度跟踪系统</p>
+      <p class="brand-subtitle">把学习变成可记录、可回顾、可持续的日常流程</p>
+    </div>
+    <el-button
+      v-if="!isLoginRoute"
+      type="success"
+      plain
+      class="logout-btn"
+      @click="handleLogout"
+    >
+      退出登录
+    </el-button>
   </div>
 </template>
 
 <script setup lang="ts">
-import {computed} from "vue";
-import {useRoute} from "vue-router";
+import { computed } from "vue";
+import { useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
 import router from "@/router";
 import { logout } from "@/api/login";
 
-var route = useRoute();
-
-const isLoginRoute = computed(()=>route.path === '/login');
+const route = useRoute();
+const isLoginRoute = computed(() => route.path === "/login");
 
 const handleLogout = async () => {
   try {
@@ -31,12 +41,41 @@ const handleLogout = async () => {
 
 <style scoped>
 .head {
+  min-height: 82px;
+  padding: 14px 18px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 30px;
-  padding: 0 24px;
-  background: green;
-  min-height: 7vh;
+  gap: 12px;
+}
+
+.brand-title {
+  margin: 0;
+  font-weight: 700;
+  font-size: clamp(18px, 2.4vw, 24px);
+  letter-spacing: 0.3px;
+  color: var(--green-900);
+}
+
+.brand-subtitle {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.logout-btn {
+  border-color: var(--green-600);
+  color: var(--green-700);
+}
+
+@media (max-width: 768px) {
+  .head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .logout-btn {
+    width: 100%;
+  }
 }
 </style>