添加动态生成头像

.env.development

@@ -1 +1 @@
-VITE_API_BASE_URL = "http://192.168.1.2:8848"
+VITE_API_BASE_URL = "http://192.168.1.2:81"

.env.production

@@ -1 +1 @@
-VITE_API_BASE_URL = "http://as.skyfffire.com"
+VITE_API_BASE_URL = "http://cc.skyfffire.com/api"

src/components/PageLayout/Header.vue

@@ -6,11 +6,11 @@
     </div>
     <div class="header-right-wp">
       <div class="info-wp">
-        <div class="info-name">欢迎, 成明</div>
+        <div class="info-name">欢迎, {{ nickname }}</div>
 
         <lay-dropdown trigger="hover" placement="bottom-end" updateAtScroll>
           <div class="info-avatar">
-            <img src="https://www.fmz.cn/upload/asset/54c5a270be79fc941fcb.png" />
+            <img :src="avatarUrl" />
           </div>
           <template #content>
             <lay-dropdown-menu>
@@ -23,11 +23,17 @@
   </div>
 </template>
 <script lang="ts" setup>
+import { defineProps } from "vue";
 import { useRouter } from "vue-router";
 import { client_logout } from "@/api/index";
 
 const router = useRouter();
 
+defineProps({
+  nickname: String,
+  avatarUrl: String,
+});
+
 const handeLoginOut = () => {
   client_logout({}, (data: any) => {
     if (data.code == 200) {

src/components/PageLayout/Layout.vue

@@ -1,7 +1,7 @@
 <template>
   <lay-layout class="layout-wp">
     <lay-header class="layout-header">
-      <Header />
+      <Header :nickname="pageData.name" :avatar-url="pageData.avatarUrl" />
     </lay-header>
     <lay-layout>
       <lay-side class="layout-side">
@@ -11,7 +11,7 @@
         <Tag />
         <div class="layout-main">
           <div class="layout-content">
-            <router-view  />
+            <router-view />
           </div>
         </div>
       </lay-body>
@@ -25,6 +25,7 @@ import Header from "./Header.vue";
 import Side from "./Side.vue";
 import Tag from "./Tag.vue";
 import { get_client_info } from "@/api/index";
+import { generateAvatar } from "@/utils/index";
 
 interface MenuList {
   icon?: string;
@@ -38,14 +39,17 @@ interface MenuList {
 
 interface PageInfo {
   name?: string;
+  avatarUrl?: string;
   menuList?: Array<MenuList>;
 }
 
 const pageData = ref<PageInfo>({});
+pageData.value.avatarUrl = generateAvatar("");
 const pageInfo = () => {
   get_client_info({}, (data: any) => {
     if (data.code == 200) {
       pageData.value.name = data.data.name;
+      pageData.value.avatarUrl = generateAvatar(data.data.name || "");
       pageData.value.menuList = data.data.tree.childMenu;
       const defaultMenu = data.data.tree.childMenu[0];
       if (defaultMenu.childMenu.length > 0) {

src/utils/index.ts

@@ -0,0 +1,27 @@
+import { md5 } from "js-md5";
+
+export const generateAvatar = (text: string, backgroundColor?: string, textColor?: string) => {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+
+  const lastChar = text.charAt(text.length - 1);
+  const backgroundList = ["#1e9fff", "#ffb800", "#ff5722", "#16b777"];
+  let textInt = parseInt(md5(text));
+  textInt = !isNaN(textInt) ? textInt % 4 : 0;
+
+  canvas.width = 200;
+  canvas.height = 200;
+
+  context!.fillStyle = !!backgroundColor ? backgroundColor : backgroundList[textInt] || "#ccc";
+  context!.fillRect(0, 0, canvas.width, canvas.height);
+
+  context!.font = "100px Arial";
+  context!.fillStyle = textColor || "#fff";
+  const x = canvas.width / 2 - 50;
+  const y = canvas.height / 2 + 35;
+  context?.fillText(lastChar, x, y);
+
+  const dataUrl = canvas.toDataURL("image/png");
+
+  return dataUrl;
+};