dev

frontendNew/src/components/AppSidebar.vue

@@ -31,6 +31,7 @@ import {
   SidebarMenuItem,
   SidebarTrigger,
 } from "@/components/ui/sidebar";
+import { useDnfHelperStore } from "@/stores/dnfhelper";
 
 const props = withDefaults(defineProps<SidebarProps>(), {
   collapsible: "icon",
@@ -43,12 +44,17 @@ const toggleDarkMode = () => {
   document.documentElement.classList.toggle("dark", isDark.value);
 };
 
+const dnfHelperStore = useDnfHelperStore();
+
+const userInfo = computed(() => {
+  return {
+    name: dnfHelperStore.helperInfo?.name ?? "尚未绑定助手ID",
+    id: dnfHelperStore.helperInfo?.id ?? "",
+    avatar: dnfHelperStore.helperInfo?.avatar ?? "",
+  };
+});
+
 const data = {
-  user: {
-    name: "尚未绑定助手ID",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.jpg",
-  },
   navMain: [
     {
       title: "计算器",
@@ -198,7 +204,7 @@ const data = {
           </SidebarMenuButton>
         </SidebarMenuItem>
       </SidebarMenu>
-      <NavUser :user="data.user" />
+      <NavUser :user="userInfo" />
     </SidebarFooter>
   </Sidebar>
 </template>

frontendNew/src/components/LoadingOverlay.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+  visible: boolean;
+  text?: string;
+}>();
+</script>
+
+<template>
+  <div class="v-loading-mask" :class="{ 'is-active': visible }">
+    <div class="v-loading-spinner" />
+    <div v-if="text" class="v-loading-text">{{ text }}</div>
+  </div>
+</template>

frontendNew/src/components/NavUser.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogOut, Sparkles } from "lucide-vue-next";
+import { Bell, ChevronsUpDown, LogOut } from "lucide-vue-next";
 
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
@@ -17,6 +17,7 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar";
+import { useDnfHelperStore } from "@/stores/dnfhelper";
 
 const props = defineProps<{
   user: {
@@ -29,6 +30,8 @@ const props = defineProps<{
 const { user } = toRefs(props);
 
 const { isMobile } = useSidebar();
+
+const helperStore = useDnfHelperStore();
 </script>
 
 <template>
@@ -41,8 +44,8 @@ const { isMobile } = useSidebar();
             class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
           >
             <Avatar class="h-8 w-8 rounded-lg">
-              <AvatarImage :src="user.avatar" :alt="user.name" />
-              <AvatarFallback class="rounded-lg"> Dcalc </AvatarFallback>
+              <AvatarImage :src="user.avatar" :alt="user.id" />
+              <AvatarFallback class="rounded-lg"> DNF </AvatarFallback>
             </Avatar>
             <div class="grid flex-1 text-left text-sm leading-tight">
               <span class="truncate font-medium">{{ user.name }}</span>
@@ -61,7 +64,7 @@ const { isMobile } = useSidebar();
             <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
               <Avatar class="h-8 w-8 rounded-lg">
                 <AvatarImage :src="user.avatar" :alt="user.name" />
-                <AvatarFallback class="rounded-lg"> Dcalc </AvatarFallback>
+                <AvatarFallback class="rounded-lg"> DNF </AvatarFallback>
               </Avatar>
               <div class="grid flex-1 text-left text-sm leading-tight">
                 <span class="truncate font-medium">{{ user.name }}</span>
@@ -69,32 +72,35 @@ const { isMobile } = useSidebar();
               </div>
             </div>
           </DropdownMenuLabel>
-          <DropdownMenuSeparator />
+          <!-- <DropdownMenuSeparator />
           <DropdownMenuGroup>
-            <DropdownMenuItem>
+            <DropdownMenuItem :disabled="!helperStore.helperInfo">
               <Sparkles />
-              Upgrade to Pro
+              切换绑定
             </DropdownMenuItem>
-          </DropdownMenuGroup>
+          </DropdownMenuGroup> -->
           <DropdownMenuSeparator />
           <DropdownMenuGroup>
-            <DropdownMenuItem>
+            <!-- <DropdownMenuItem>
               <BadgeCheck />
-              Account
+              反馈
             </DropdownMenuItem>
             <DropdownMenuItem>
               <CreditCard />
               Billing
-            </DropdownMenuItem>
+            </DropdownMenuItem> -->
             <DropdownMenuItem>
               <Bell />
-              Notifications
+              反馈
             </DropdownMenuItem>
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
-          <DropdownMenuItem>
+          <DropdownMenuItem
+            :disabled="!helperStore.helperInfo"
+            @click="helperStore.helperInfo = null"
+          >
             <LogOut />
-            Log out
+            取消绑定
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>