perf:优化header样式

Yi.Bbs.Vue3/src/assets/common/icons/dog.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1702540720819" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4776" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 490.666667c-19.989333 0-37.354667 3.2-52.074667 13.866666s-22.592 29.717333-22.592 44.8c0 19.136 9.066667 27.392 15.509334 34.133334 6.4 6.72 13.098667 11.797333 19.456 16.234666 12.672 8.917333 24.704 15.253333 24.704 15.253334a32 32 0 0 0 29.994666 0s12.032-6.336 24.704-15.253334c6.357333-4.437333 13.034667-9.514667 19.456-16.234666 6.442667-6.741333 15.509333-14.997333 15.509334-34.133334 0-15.082667-7.850667-34.133333-22.592-44.8-14.72-10.666667-32.085333-13.866667-52.074667-13.866666z m0.533333 32a32 32 0 0 0-32 32c0 14.464-3.754667 47.168 5.098667 80.213333 4.416 16.512 12.714667 34.304 28.458667 47.957333 15.722667 13.653333 37.930667 21.162667 62.442666 21.162667 52.650667 0 96-43.349333 96-96a32 32 0 0 0-32-32 32 32 0 0 0-32 32c0 18.048-13.930667 32-32 32-12.8 0-17.28-2.709333-20.522666-5.546667-3.285333-2.837333-6.314667-7.722667-8.533334-16.128-4.522667-16.789333-2.944-42.773333-2.944-63.658666a32 32 0 0 0-32-32z m-0.533333 0a32 32 0 0 0-32 32c0 20.906667 1.578667 46.869333-2.922667 63.658666-2.24 8.405333-5.269333 13.290667-8.533333 16.128-3.264 2.837333-7.744 5.546667-20.544 5.546667-18.048 0-32-13.952-32-32A32 32 0 0 0 384 576a32 32 0 0 0-32 32c0 52.650667 43.349333 96 96 96 24.533333 0 46.72-7.530667 62.464-21.162667 15.722667-13.653333 24.042667-31.445333 28.458667-47.957333 8.832-33.045333 5.077333-65.749333 5.077333-80.213333a32 32 0 0 0-32-32z m128-160a42.666667 42.666667 0 0 1-42.666667 42.666666 42.666667 42.666667 0 0 1-42.666666-42.666666 42.666667 42.666667 0 0 1 42.666666-42.666667 42.666667 42.666667 0 0 1 42.666667 42.666667z m-170.666667 0a42.666667 42.666667 0 0 1-42.666666 42.666666 42.666667 42.666667 0 0 1-42.666667-42.666666 42.666667 42.666667 0 0 1 42.666667-42.666667 42.666667 42.666667 0 0 1 42.666666 42.666667z m42.666667-202.666667c-233.173333 0-416 224.021333-416 448 0 112 48.704 200.746667 125.418667 257.664C298.133333 922.581333 400.768 949.333333 512 949.333333s213.866667-26.752 290.581333-83.669333S928 720 928 608c0-223.978667-182.826667-448-416-448z m0 64c190.976 0 352 195.605333 352 384 0 94.208-37.269333 160.085333-99.541333 206.293333C702.186667 860.48 612.842667 885.333333 512 885.333333c-100.842667 0-190.186667-24.853333-252.458667-71.04C197.269333 768.085333 160 702.208 160 608c0-188.394667 161.024-384 352-384z m203.52-147.2a32 32 0 0 0-41.237333 17.984l-42.666667 106.666667a32 32 0 0 0 17.834667 41.6 32 32 0 0 0 41.6-17.834667l27.648-69.184c14.613333 12.906667 31.146667 30.421333 45.504 54.677333 25.344 42.816 43.690667 100.48 36.010666 169.749334a32 32 0 0 0 28.245334 35.328 32 32 0 0 0 35.328-28.245334 336.469333 336.469333 0 0 0-44.501334-209.450666C787.925333 125.077333 751.36 90.581333 715.52 76.8z m-407.04 0c-35.84 13.781333-72.405333 48.277333-103.765333 101.290667a336.469333 336.469333 0 0 0-44.501334 209.450666 32 32 0 0 0 35.328 28.245334 32 32 0 0 0 28.245334-35.328c-7.68-69.269333 10.666667-126.933333 36.010666-169.749334a225.792 225.792 0 0 1 45.504-54.677333l27.648 69.184a32 32 0 0 0 41.6 17.834667 32 32 0 0 0 17.834667-41.6l-42.666667-106.666667A32 32 0 0 0 308.48 76.8z" p-id="4777" fill="#409eff"></path></svg>

Yi.Bbs.Vue3/src/layout/AppHeader.vue

@@ -1,76 +1,88 @@
 <template>
-  <el-menu
-    :default-active="activeIndex"
-    class="el-menu-demo"
-    mode="horizontal"
-    :ellipsis="false"
-    @select="handleSelect"
-    
-  >
- <el-menu-item class="logo"  index="" @click="enterIndex" >   
-    <img class="img-icon" style="width: 35px; height: 35px" src="@/assets/logo.ico"  />{{configStore.name}}</el-menu-item>
- <el-menu-item index="1" @click="enterIndex">主页</el-menu-item>
-    <el-sub-menu index="2">
-      <template #title>学习</template>
-      <el-menu-item index="2-1">学习 one</el-menu-item>
-      <el-menu-item index="2-2">学习 two</el-menu-item>
-      <el-menu-item index="2-3">学习 three</el-menu-item>
-    </el-sub-menu>
-    <el-sub-menu index="3">
-      <template #title>资源</template>
-      <el-menu-item index="3-1">资源 one</el-menu-item>
-      <el-menu-item index="3-2">资源 two</el-menu-item>
-      <el-menu-item index="3-3">资源 three</el-menu-item>
-    </el-sub-menu>
-    <el-sub-menu index="4">
-      <template #title>问答</template>
-      <el-menu-item index="4-1">问答 one</el-menu-item>
-      <el-menu-item index="4-2">问答 two</el-menu-item>
-      <el-menu-item index="4-3">问答 three</el-menu-item>
-    </el-sub-menu>
-
-    <div class="flex-grow" />
-
-   <el-menu-item index="5">
-    <div style="width: 350px;">
-      <el-input style="width: 300px;" v-model="searchText" placeholder="全站搜索" clearable  prefix-icon="Search" />
-      <el-button type="primary" plain @click="search">搜索</el-button>
+  <div class="header">
+    <div class="logo" @click="enterIndex">
+      <div class="image">
+        <img class="img-icon" src="@/assets/common/icons/dog.svg" />
+      </div>
+      <div class="text">{{ configStore.name }}</div>
     </div>
-    </el-menu-item>
-   
-    <el-menu-item index="6" @click="enterProfile" >
-        <AvatarInfo :size='30' :isSelf="true"   />
-    </el-menu-item>
-    <el-sub-menu index="6">
-      <template #title>个人中心</template>
-      <el-menu-item index="6-1" @click="enterProfile">进入个人中心</el-menu-item>
-      <el-menu-item index="6-2" @click="enterProfile">其他</el-menu-item>
-      <el-menu-item index="6-3" @click="logout">登出</el-menu-item>
-    </el-sub-menu>
-
-  </el-menu>
-
+    <div class="tab">
+      <el-menu
+        :default-active="activeIndex"
+        mode="horizontal"
+        :ellipsis="false"
+        @select="handleSelect"
+      >
+        <el-menu-item index="1" @click="enterIndex">主页</el-menu-item>
+        <el-sub-menu index="2">
+          <template #title>学习</template>
+          <el-menu-item index="2-1">学习 one</el-menu-item>
+          <el-menu-item index="2-2">学习 two</el-menu-item>
+          <el-menu-item index="2-3">学习 three</el-menu-item>
+        </el-sub-menu>
+        <el-sub-menu index="3">
+          <template #title>资源</template>
+          <el-menu-item index="3-1">资源 one</el-menu-item>
+          <el-menu-item index="3-2">资源 two</el-menu-item>
+          <el-menu-item index="3-3">资源 three</el-menu-item>
+        </el-sub-menu>
+        <el-sub-menu index="4">
+          <template #title>问答</template>
+          <el-menu-item index="4-1">问答 one</el-menu-item>
+          <el-menu-item index="4-2">问答 two</el-menu-item>
+          <el-menu-item index="4-3">问答 three</el-menu-item>
+        </el-sub-menu>
+      </el-menu>
+    </div>
+    <div class="search-bar">
+      <el-input
+        style="width: 300px"
+        v-model="searchText"
+        placeholder="全站搜索"
+        clearable
+        prefix-icon="Search"
+      >
+        <template #append>
+          <el-button type="primary" plain @click="search">搜索</el-button>
+        </template>
+      </el-input>
+    </div>
+    <div class="user">
+      <el-dropdown trigger="click">
+        <AvatarInfo :size="30" :isSelf="true" />
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="enterProfile"
+              >进入个人中心</el-dropdown-item
+            >
+            <el-dropdown-item @click="enterProfile">其他</el-dropdown-item>
+            <el-dropdown-item @click="logout">登出</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </div>
 </template>
 <script setup>
-import AvatarInfo from '@/components/AvatarInfo.vue'
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import useUserStore from '@/stores/user.js'
+import AvatarInfo from "@/components/AvatarInfo.vue";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import useUserStore from "@/stores/user.js";
 import useConfigStore from "@/stores/config";
-const  configStore= useConfigStore();
-const router = useRouter()
-const userStore =useUserStore();
-const activeIndex = ref('1')
-const searchText=ref('')
+const configStore = useConfigStore();
+const router = useRouter();
+const userStore = useUserStore();
+const activeIndex = ref("1");
+const searchText = ref("");
 const handleSelect = (key, keyPath) => {
-  console.log(key, keyPath)
-}
-const logout= async()=>{
+  console.log(key, keyPath);
+};
+const logout = async () => {
   ElMessageBox.confirm(`确定登出系统吗?`, "警告", {
     confirmButtonText: "确认",
     cancelButtonText: "取消",
     type: "warning",
-  }).then( async() => {
+  }).then(async () => {
     //异步
     await userStore.logOut();
     //删除成功后，跳转到主页
@@ -80,33 +92,67 @@ const logout= async()=>{
       message: "登出成功",
     });
   });
-
-}
-const enterIndex=()=>{
+};
+const enterIndex = () => {
   router.push("/index");
 };
-const enterProfile=()=>{
-  router.push("/profile");}
+const enterProfile = () => {
+  router.push("/profile");
+};
 
-const search=()=>{
-  var routerPer = { path: `/discuss`,query:{q:searchText.value} };
-  searchText.value='';
-  router.push(routerPer)
-}
+const search = () => {
+  var routerPer = { path: `/discuss`, query: { q: searchText.value } };
+  searchText.value = "";
+  router.push(routerPer);
+};
 </script>
 
-<style scoped>
-
-.logo{
-  min-width: 14rem;
-  font-size: large;
-  font-weight: 600;
+<style scoped lang="scss">
+.header {
+  padding: 0 100px;
+  width: 1200px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.user {
+  display: flex;
+  align-items: center;
+  .el-dropdown-link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+}
+.logo {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  .image {
+    width: 30px;
+    height: 30px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .text {
+    font-weight: bold;
+    margin-left: 10px;
+  }
+}
+.tab {
+  .el-menu {
+    height: 90%;
+  }
+  :deep(.el-menu--horizontal) {
+    border-bottom: none;
+  }
 }
 .flex-grow {
   flex-grow: 1;
 }
-.img-icon
-{
+.img-icon {
   margin-right: 0.5rem;
 }
-</style>
+</style>

Yi.Bbs.Vue3/src/layout/Index.vue

@@ -1,27 +1,33 @@
 <template>
   <div class="common-layout">
     <el-container>
-      <el-header>
-
+      <el-header class="common-header">
         <AppHeader />
-
       </el-header>
       <el-main>
-       <AppBody />
+        <AppBody />
       </el-main>
     </el-container>
   </div>
 </template>
 <script setup>
-import AppHeader from "./AppHeader.vue"
-import AppBody from "./AppBody.vue"
+import AppHeader from "./AppHeader.vue";
+import AppBody from "./AppBody.vue";
 </script>
 
-<style scoped>
-.el-main{
-  margin: 0;
-padding: 0;
-min-height: 10rem;
-background-color: #F0F2F5;
+<style scoped lang="scss">
+.common {
+  &-header {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
 }
-</style>
+
+.el-main {
+  margin: 0;
+  padding: 0;
+  min-height: 10rem;
+  background-color: #f0f2f5;
+}
+</style>