💄 Header头

src/layout/components/AppHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <a-layout-header class="web-header">
-    <span style="color: #fff">头部</span>
+    <p class="title-font web-title">{{title}}</p>
     <!-- logo -->
     <!-- <router-link to="/"
                  custom
@@ -14,12 +14,14 @@
     <!-- 站点搜索/添加 -->
     <!-- <app-header-channel v-model:channel="current_site" /> -->
     <!-- 用户操作 -->
-    <!-- <app-header-user /> -->
+    <app-header-user v-if="user"
+                     :name="user" />
   </a-layout-header>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import useApp from "@/hooks/useApp";
+import { computed, defineComponent, reactive, ref, toRefs } from "vue";
 
 import AppHeaderChannel from "./AppHeaderChannel.vue";
 import AppHeaderUser from "./AppHeaderUser.vue";
@@ -30,10 +32,15 @@ const AppHeader = defineComponent({
     AppHeaderUser,
   },
   setup() {
-    let current_site = ref("jack");
+    const { store } = useApp();
+
+    const data = reactive({
+      user: computed(() => store.getters.user.nickname),
+      title: computed(() => store.getters.pageTitle),
+    });
 
     return {
-      current_site,
+      ...toRefs(data),
     };
   },
 });

src/layout/components/AppHeaderUser.vue

@@ -3,25 +3,13 @@
     <template v-slot:content>
       <div class="setting-group">
         <span>
-          <BlockOutlined />站点转移
-        </span>
-        <span>
-          <LockOutlined />修改密码
-        </span>
-        <span>
-          <SearchOutlined />找回密码
-        </span>
-        <span>
-          <CreditCardOutlined />银行卡管理
-        </span>
-        <span>
           <PoweroffOutlined />安全退出
         </span>
       </div>
     </template>
     <div class="user-wrap">
       <UserOutlined />
-      <p class="user">ID：1234</p>
+      <p class="user">推广员：{{name}}</p>
       <CaretDownFilled />
     </div>
   </a-popover>
@@ -30,27 +18,19 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import {
-  SearchOutlined,
   UserOutlined,
   CaretDownFilled,
-  BlockOutlined,
-  CreditCardOutlined,
-  LockOutlined,
   PoweroffOutlined,
 } from "@ant-design/icons-vue";
 
 const AppHeaderUser = defineComponent({
   components: {
-    SearchOutlined,
     UserOutlined,
     CaretDownFilled,
-    BlockOutlined,
-    CreditCardOutlined,
-    LockOutlined,
     PoweroffOutlined,
   },
-  setup() {
-    return {};
+  props: {
+    name: String,
   },
 });
 

src/plugins/install.ts

@@ -8,6 +8,7 @@ import {
   Layout,
   Menu,
   Modal,
+  Popover,
   Select,
   Table,
 } from "ant-design-vue";
@@ -32,7 +33,8 @@ const install = (app: App<Element>) => {
     .use(Button)
     .use(Select)
     .use(DatePicker)
-    .use(Table);
+    .use(Table)
+    .use(Popover);
 };
 
 export default install;

src/scss/index.scss

@@ -12,6 +12,15 @@ body {
   }
 }
 
+@font-face {
+  font-family: "WebTitle";
+  src: url(http://normal-image.xiaovv-web.com/normal/2020-11-18-web-font-1.ttf);
+}
+
+.title-font {
+  font-family: "WebTitle";
+}
+
 .web-wrapper {
   height: 100vh;
 
@@ -20,6 +29,32 @@ body {
     overflow-y: auto;
   }
 
+  .web-header {
+    position: relative;
+
+    .web-title {
+      font-size: 32px;
+      color: #fff;
+      display: inline-block;
+    }
+
+    .user-wrap {
+      position: absolute;
+      right: 30px;
+      top: 50%;
+      transform: translate(0, -50%);
+      color: #fff;
+      font-size: $font-size-bigger;
+      cursor: pointer;
+      @include flex();
+
+      .user {
+        margin: 0 10px;
+        line-height: 1.8;
+      }
+    }
+  }
+
   .web-container {
     background: url(http://normal-image.xiaovv-web.com/normal/2020-11-13-background.svg)
       #f0f2f5 no-repeat top left / contain fixed;

src/store/modules/app/_type.ts

@@ -7,6 +7,7 @@ import { IUser } from "@/types/api";
 // state 定义
 type State = {
   store: Storage;
+  pageTitle: string;
   roles: string[];
   routes: RouteConfig[];
   addRoutes: RouteConfig[];
@@ -49,6 +50,7 @@ type Getters = {
   permissionRoutes(state: State): RouteRecordRaw[];
   userRoles(state: State): string[];
   user(state: State): Partial<IUser>;
+  pageTitle(state: State): string;
 };
 
 export { State, Mutations, MutationType, Actions, ActionType, Getters };

src/store/modules/app/getters.ts

@@ -6,6 +6,7 @@ const getters: GetterTree<State, RootState> & Getters = {
   permissionRoutes: (state) => state.routes,
   userRoles: (state) => state.roles,
   user: (state) => state.user,
+  pageTitle: (state) => state.pageTitle,
 };
 
 export default getters;

src/store/modules/app/state.ts

@@ -15,6 +15,7 @@ const store = localStorage;
 
 const state: State = {
   store: store,
+  pageTitle: "精准投放后台",
   roles: [],
   routes: [],
   addRoutes: [],

src/views/Login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login-wrap">
     <div class="login-container">
-      <p class="title">精准投放后台</p>
+      <p class="title-font title">{{title}}</p>
       <a-form :model="forms"
               v-bind="layout">
         <a-form-item>
@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, reactive, ref, toRefs } from "vue";
+import { computed, defineComponent, inject, reactive, ref, toRefs } from "vue";
 import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
 
 import useFormLayout from "@/hooks/useFormLayout";
@@ -59,6 +59,7 @@ const Login = defineComponent({
         account: "xiaowei",
         passwd: "655c98362b4bd6fa",
       },
+      title: computed(() => store.getters.pageTitle),
       loading: false,
       layout: formLayout,
     });