Fix: avatar UI display error issue

Author: Peek-A-Booo

CHANGE_LOG.md

@@ -4,6 +4,10 @@
 
 > 2023-09-13
 
+### Fixed
+
+- Fix avatar UI display error issue
+
 ### Changed
 
 - Reconstruct some page module UI and migrate to shadcn/ui

CHANGE_LOG.zh_CN.md

@@ -4,6 +4,10 @@
 
 > 2023-09-13
 
+### 修复
+
+- 修复 avatar UI 显示错误问题
+
 ### 调整
 
 - 重构部分页面模块 UI，迁移到 shadcn/ui

src/components/menu/pc/handler/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import type { DropdownOption } from "@ltopx/lx-ui";
 import { checkAuth } from "@/lib/checkEnv";
 import Tokens from "@/components/site/tokens";
 import LicenseActivate from "./licenseActivate";
@@ -9,13 +8,6 @@ import Notice from "../../notice";
 import Github from "./github";
 import Telegram from "./telegram";
 
-export const languages: DropdownOption[] = [
-  { label: "🇺🇸 English", value: "en" },
-  { label: "🇨🇳 简体中文", value: "zh-CN" },
-  { label: "🇭🇰 繁体中文", value: "zh-HK" },
-  // { label: "🇯🇵 日本語", value: "ja" },
-];
-
 export default function Handler() {
   return (
     <div className="border-t flex flex-col pt-2 gap-1 dark:border-white/20">

src/components/menu/pc/handler/languageSelect.tsx

@@ -1,10 +1,17 @@
 import React from "react";
 import { useLocale } from "next-intl";
 import { useRouter } from "next-intl/client";
-import { Dropdown, DropdownOption } from "@ltopx/lx-ui";
+import { DropdownOption } from "@ltopx/lx-ui";
 import Icon from "@/components/icon";
 import { cn } from "@/lib";
 import { useOpenStore } from "@/hooks/useOpen";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 export const languages: DropdownOption[] = [
   { label: "🇺🇸 English", value: "en" },
@@ -34,28 +41,37 @@ export default function LanguageSelect({
   };
 
   return (
-    <Dropdown
-      selectable
-      side="top"
-      options={languages}
-      value={locale}
-      onSelect={onLocaleChange}
-    >
-      <div className="flex flex-1 justify-center">
-        <div
-          className={cn(
-            "w-8 h-8 flex justify-center items-center cursor-pointer transition-colors rounded-md",
-            "hover:bg-gray-200/60",
-            "dark:hover:bg-slate-700/70"
-          )}
-        >
-          {loadingChangeLang ? (
-            <Icon icon="loading_line" size={20} className="animate-spin" />
-          ) : (
-            <Icon icon="translate_2_line" size={24} />
-          )}
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <div className="flex flex-1 justify-center">
+          <div
+            className={cn(
+              "w-8 h-8 flex justify-center items-center cursor-pointer transition-colors rounded-md",
+              "hover:bg-gray-200/60",
+              "dark:hover:bg-slate-700/70"
+            )}
+          >
+            {loadingChangeLang ? (
+              <Icon icon="loading_line" size={20} className="animate-spin" />
+            ) : (
+              <Icon icon="translate_2_line" size={24} />
+            )}
+          </div>
         </div>
-      </div>
-    </Dropdown>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuRadioGroup value={locale} onValueChange={onLocaleChange}>
+          {languages.map((item) => (
+            <DropdownMenuRadioItem
+              className="cursor-pointer"
+              key={item.value}
+              value={item.value}
+            >
+              {item.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }

src/components/site/avatar.tsx

@@ -143,10 +143,13 @@ export default function Avatar() {
     if (!user) return null;
     return (
       <>
-        <div className="font-medium text-sm">
-          {user.name || user.email?.split("@")[0]}
-        </div>
-        <div className="text-xs">{user.email}</div>
+        <DropdownMenuLabel>
+          <div className="font-medium text-sm">
+            {user.name || user.email?.split("@")[0]}
+          </div>
+          <div className="text-xs">{user.email}</div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
       </>
     );
   };
@@ -185,7 +188,7 @@ export default function Avatar() {
   return (
     <div className="flex items-center">
       <DropdownMenu>
-        <DropdownMenuTrigger className="outline-none">
+        <DropdownMenuTrigger className="outline-none" disabled={disabled}>
           {session.data?.user ? (
             <div className="cursor-pointer">
               {session.data.user.image ? (
@@ -212,8 +215,7 @@ export default function Avatar() {
           )}
         </DropdownMenuTrigger>
         <DropdownMenuContent>
-          <DropdownMenuLabel>{renderLabel()}</DropdownMenuLabel>
-          <DropdownMenuSeparator />
+          {renderLabel()}
           {menus.map((item) => {
             if (item.type === "seperate")
               return <DropdownMenuSeparator key={item.value} />;

src/styles/globals.css

@@ -58,7 +58,8 @@ input[type="number"] {
     --card-foreground: 224 71.4% 4.1%;
     --popover: 0 0% 100%;
     --popover-foreground: 224 71.4% 4.1%;
-    --primary: 220.9 39.3% 11%;
+    --primary: 199 93% 61%;
+    /* --primary: 220.9 39.3% 11%; */
     --primary-foreground: 210 20% 98%;
     --secondary: 220 14.3% 95.9%;
     --secondary-foreground: 220.9 39.3% 11%;
@@ -70,7 +71,7 @@ input[type="number"] {
     --destructive-foreground: 210 20% 98%;
     --border: 220 13% 91%;
     --input: 220 13% 91%;
-    --ring: 199, 93%, 61%;
+    --ring: 199 93% 61%;
     /* --ring: 224 71.4% 4.1%; */
     --radius: 0.5rem;
   }
@@ -94,7 +95,7 @@ input[type="number"] {
     --destructive-foreground: 210 20% 98%;
     --border: 215 27.9% 16.9%;
     --input: 215 27.9% 16.9%;
-    --ring: 203, 80%, 57%;
+    --ring: 203 80% 57%;
     /* --ring: 216 12.2% 83.9%; */
   }
 }