From 1379f6b75ddb2cfb525b7fc6ae69fdffdcfeaecd Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Tue, 21 Nov 2023 15:12:33 +0800
Subject: [PATCH] add header breadcrumb and user info

---
 frontend/src/assets/main.css                  |   1 -
 frontend/src/views/Cluster/CreateBatch.vue    |   4 +-
 frontend/src/views/Home/Home.vue              | 116 +++++++++++++-----
 .../src/views/Home/components/BreadCrumb.vue  |  19 +++
 4 files changed, 103 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/views/Home/components/BreadCrumb.vue

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index d17dbd1..40e4ebc 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -15,7 +15,6 @@ body {
   text-rendering: optimizeLegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
     Microsoft YaHei, Arial, sans-serif;
-  min-width: 1366px;
 }
 
 #app {
diff --git a/frontend/src/views/Cluster/CreateBatch.vue b/frontend/src/views/Cluster/CreateBatch.vue
index c55d86d..302f6de 100644
--- a/frontend/src/views/Cluster/CreateBatch.vue
+++ b/frontend/src/views/Cluster/CreateBatch.vue
@@ -10,10 +10,10 @@
         <div class="creater">
             <el-form label-width="100px">
                 <el-form-item label="批次名称:" prop="batchName">
-                    <el-input class="ipInput" type="text" size="medium" autocomplete="off"></el-input>
+                    <el-input class="ipInput" type="text" autocomplete="off"></el-input>
                 </el-form-item>
                 <el-form-item label="描述:" prop="description">
-                    <el-input class="ipInput" type="text" size="medium" autocomplete="off"></el-input>
+                    <el-input class="ipInput" type="text" autocomplete="off"></el-input>
                 </el-form-item>
             </el-form>
             <el-transfer filterable filter-placeholder="请输入关键字" :titles="['备选项', '已选项']" style="width:100%">
diff --git a/frontend/src/views/Home/Home.vue b/frontend/src/views/Home/Home.vue
index 65c6cac..386fb96 100644
--- a/frontend/src/views/Home/Home.vue
+++ b/frontend/src/views/Home/Home.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="home">
-        <el-container>
+    <div style="width: 100%; height: 100%;">
+        <el-container style="width: 100%; height: 100%;">
             <el-aside width="9%">
                 <div class="logo">
                     <img src="../../assets/logo.png" alt="">
@@ -10,14 +10,26 @@
                 </el-menu>
             </el-aside>
             <el-container>
-                <el-header style="height:10%">Header</el-header>
+                <el-header style="height:10%">
+                    <div class="title">
+                        <bread-crumb class="breadcrumb"></bread-crumb>
+                        <div class="user">
+                            <el-icon>
+                                <User />
+                            </el-icon>
+                            <span> hello {{ user.name }}!</span>
+                            <el-icon>
+                                <Expand />
+                            </el-icon>
+                        </div>
+                    </div>
+                </el-header>
                 <el-main style="padding: 0px;">
                     <router-view />
                 </el-main>
                 <div class="footer">
-                    <p> <a href="https://gitee.com/openeuler/PilotGo" target="_blank">PilotGo</a> version: {{
-                        version.commit ? version.version + "-" + version.commit : version.version }}, build time: {{
-        version.build_time }}
+                    <p> <a href="https://gitee.com/openeuler/PilotGo" target="_blank">PilotGo</a> version: {{ version.commit
+                        ? version.version + "-" + version.commit : version.version }}, build time: {{ version.build_time }}
                         All right reserved</p>
                 </div>
             </el-container>
@@ -27,16 +39,21 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import BreadCrumb from "./components/BreadCrumb.vue";
 import Sidebar from "./components/Sidebar.vue";
 
 import { updateSidebarItems } from "@/router/index";
 
+const user = ref({
+    name: "admin",
+})
+
+
 interface VersionInfo {
     commit?: string
     version?: string
     build_time?: string
 }
-
 const version = ref<VersionInfo>({})
 
 onMounted(() => {
@@ -47,45 +64,76 @@ onMounted(() => {
 
 
 <style lang="scss">
-.home {
-    width: 100%;
+.el-aside {
     height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .logo {
+        width: 100%;
+        height: 10%;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        position: relative;
+        background-color: #fff;
+        border-right: 1px solid #e6e6e6;
+        border-bottom: 1px solid #e6e6e6;
+
+        img {
+            height: 90%;
+        }
+    }
 }
 
 .el-container {
-    height: 100%;
-    width: 100%;
-
-    .el-aside {
-        height: 100%;
+    .title {
+        height: 50%;
+        width: 100%;
         display: flex;
-        flex-direction: column;
+        justify-content: space-between;
+
+        .breadcrumb {
+            height: 100%;
+
+            .el-breadcrumb {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+            }
+        }
 
-        .logo {
-            width: 100%;
-            height: 10%;
+        .user {
+            height: 100%;
             display: flex;
-            justify-content: space-around;
+            flex-direction: row;
             align-items: center;
-            position: relative;
-            background-color: #fff;
-            border-right: 1px solid #e6e6e6;
-            border-bottom: 1px solid #e6e6e6;
 
-            img {
-                height: 90%;
+            .el-icon {
+                width: 30px;
+                font-size: 26px;
+                color: rgb(241, 139, 14);
+            }
+
+            span {
+                height: 100%;
+                font-size: 20px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
             }
         }
     }
+}
 
-    .footer {
-        height: 20px;
-        width: 100%;
-        line-height: 20px;
-        background-color: #fff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
+.footer {
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/Home/components/BreadCrumb.vue b/frontend/src/views/Home/components/BreadCrumb.vue
new file mode 100644
index 0000000..4659c9a
--- /dev/null
+++ b/frontend/src/views/Home/components/BreadCrumb.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <el-breadcrumb separator="/">
+      <el-breadcrumb-item to="/overview">
+        <em class="el-icon-s-home"></em>
+        <span class="el-dropdown-link">
+          首页
+        </span>
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+
+</template>
+  
+<script setup lang="ts">
+
+</script>
+  
+<style lang="scss" scoped></style>
\ No newline at end of file
-- 
Gitee