不同名稱顯示不同效果，和大小

FrontEnd/components/NavBar.vue

@@ -271,12 +271,12 @@
                   $auth.$storage.getUniversal('userLastName') != undefined
                 "
                 fab
-                class="user-no-picture-border mx-2 tw-shadow-none"
+                :class="['mx-2 tw-shadow-none tw-bg-primary-default',($auth.$storage.getUniversal('userLastName')!=undefined && $auth.$storage.getUniversal('userLastName') 
+                && $auth.$storage.getUniversal('userLastName').length>1)?'tw-w-[40px] tw-rounded-[20px]':'tw-w-[28px] tw-rounded-[28px]']"
                 color="primary"
-                width="28"
                 height="28"
               >
-                <span class="tw-text-[16px]">
+                <span :class="[($auth.$storage.getUniversal('isLetter')!=undefined && $auth.$storage.getUniversal('isLetter')==false)?'tw-text-[16px]':'tw-text-[12px]']">
                   {{ $auth.$storage.getUniversal("userLastName") }}
                 </span>
               </v-btn>
@@ -632,6 +632,7 @@ import loading from "@/components/newComponent/loading/loading.vue";
 import changeCurrency from "@/components/dropdown/changeCurrencyWeb.vue";
 import Swiper from "swiper/bundle";
 // import { getCurrentTime } from "~/utils/assist";
+import { getFirstName } from "~/utils/common";
 
 // import { handler } from "@tailwindcss/line-clamp";
 export default {
@@ -714,6 +715,7 @@ export default {
     } else {
       this.showNavSearch = true;
     }
+    
     this.isFirstEnter = true;
     this.fetchUser();
     // this.socialRegister();
@@ -857,6 +859,10 @@ export default {
     },
     fetchUser() {
       if (this.$auth.loggedIn) {
+        this.$auth.$storage.removeUniversal("userLastName");
+        this.$auth.$storage.removeUniversal("userPicture");
+        this.userPicture = "";
+        this.$auth.$storage.removeUniversal("isLetter");
         this.$axios
         .get(`/trending/api/members/info`)
         .then((response) => {
@@ -866,14 +872,13 @@ export default {
               if(data.MemberPicture){
                 this.userPicture = data.MemberPicture;
                 this.$auth.$storage.setUniversal("userPicture", data.MemberPicture);
-              }else{
-                this.$auth.$storage.removeUniversal("userPicture");
-                this.userPicture = "";
               }
               if(data.LastName){
-                this.$auth.$storage.setUniversal("userLastName", data.LastName);
-              }else{
-                this.$auth.$storage.removeUniversal("userLastName", data.LastName);
+                let arr = getFirstName(data.LastName,this.$i18n.localeProperties["langQuery"]);
+                let name = arr[0];
+                let isLetter = arr[1];
+                this.$auth.$storage.setUniversal("userLastName", name);
+                this.$auth.$storage.setUniversal("isLetter", isLetter);
               }
             }
           }

FrontEnd/utils/common.js

@@ -0,0 +1,58 @@
+/**
+ * 傳入姓名，返回首字，複姓返回兩個字，英文返回大寫
+ * @param {*} fullname 
+ * @param {*} lang 
+ * @returns 
+ */
+export function getFirstName(fullname,lang) {    
+    let hyphenated = ['欧阳', '太史', '端木', '上官', '司马', '东方', '独孤', '南宫', '万俟', '闻人',
+                    '夏侯', '诸葛', '尉迟', '公羊', '赫连', '澹台', '皇甫', '宗政', '濮阳', '公冶',
+                    '太叔', '申屠', '公孙', '慕容', '仲孙', '钟离', '长孙', '宇文', '城池', '司徒', 
+                    '鲜于', '司空', '汝嫣', '闾丘', '子车', '亓官', '司寇', '巫马', '公西', '颛孙',
+                    '壤驷', '公良', '漆雕', '乐正', '宰父', '谷梁', '拓跋', '夹谷', '轩辕', '令狐', 
+                    '段干', '百里', '呼延', '东郭', '南门', '羊舌', '微生', '公户', '公玉', '公仪',
+                    '梁丘', '公仲', '公上', '公门', '公山', '公坚', '左丘', '公伯', '西门', '公祖',
+                    '第五', '公乘', '贯丘', '公皙', '南荣', '东里', '东宫', '仲长', '子书', '子桑', 
+                    '即墨', '达奚', '褚师'];
+    if(lang=='zh-TW'){
+        hyphenated = ['歐陽', '太史', '端木', '上官', '司馬', '東方', '獨孤', '南宮', '萬俟', '聞人',
+        '夏侯', '諸葛', '尉遲', '公羊', '赫連', '淡臺', '皇甫', '宗政', '濮陽', '公冶',
+        '太叔', '申屠', '公孫', '慕容', '仲孫', '鐘離', '長孫', '宇文', '城池', '司徒', 
+        '鮮於', '司空', '汝嫣', '閭丘', '子車', '亓官', '司寇', '巫馬', '公西', '顓孫',
+        '壤駟', '公良', '漆雕', '樂正', '宰父', '谷梁', '拓跋', '夾谷', '軒轅', '令狐', 
+        '段幹', '百裏', '呼延', '東郭', '南門', '羊舌', '微生', '公戶', '公玉', '公儀',
+        '梁丘', '公仲', '公上', '公門', '公山', '公堅', '左丘', '公伯', '西門', '公祖',
+        '第五', '公乘', '貫丘', '公皙', '南榮', '東裏', '東宮', '仲長', '子書', '子桑', 
+        '即墨', '達奚', '褚師'];
+    }
+    if(fullname == undefined || fullname == null || fullname == ''){
+        return ["",true];
+    } 
+    var re = /[A-Za-z]+/; 
+    var result = fullname.search(re);
+    if(result>=0){
+        return [fullname.substr(0, 1).toUpperCase(),false];
+    } 
+    let hyset = new Set(hyphenated);
+    let vLength = fullname.length;   
+    // 前為姓，后為名  
+    let lastname = '', firstname = '';
+    if (vLength > 2){    
+        var preTwoWords = fullname.substr(0, 2);
+        // 取名字的前兩個字，看是否在複姓庫中    
+        if (hyset.has(preTwoWords)){    
+            firstname = preTwoWords;    
+            // lastname = fullname.substr(2);    
+        }else{    
+            firstname = fullname.substr(0, 1);    
+            // lastname = fullname.substr(1);    
+        }    
+    }else if (vLength === 2){
+        // 全名只有兩個字時，前一個為姓，後一個為名    
+        firstname = fullname.substr(0, 1);    
+        // lastname = fullname.substr(1);    
+    }else{    
+        firstname = fullname;    
+    }    
+    return [firstname,true];    
+};