1

frontendNew/src/components/AppSidebar.vue

@@ -46,10 +46,12 @@ const toggleDarkMode = () => {
 const dnfHelperStore = useDnfHelperStore();
 
 const userInfo = computed(() => {
+  const helper = dnfHelperStore.helperInfo;
+  const hasBind = !!helper?.id;
   return {
-    name: dnfHelperStore.helperInfo?.name ?? "尚未绑定助手ID",
-    id: dnfHelperStore.helperInfo?.id ?? "",
-    avatar: dnfHelperStore.helperInfo?.avatar ?? "",
+    name: helper?.name ?? "尚未绑定助手ID",
+    id: hasBind ? (helper?.id ?? "") : "前往计算器页绑定",
+    avatar: helper?.avatar ?? "",
   };
 });
 

frontendNew/src/components/NavUser.vue

@@ -32,6 +32,10 @@ const { user } = toRefs(props);
 const { isMobile } = useSidebar();
 
 const helperStore = useDnfHelperStore();
+
+const bindHelper = () => {
+  window.location.href = "/dcalc/dnfhelper";
+};
 </script>
 
 <template>
@@ -81,6 +85,10 @@ const helperStore = useDnfHelperStore();
           </DropdownMenuGroup> -->
           <DropdownMenuSeparator />
           <DropdownMenuGroup>
+            <DropdownMenuItem @click="bindHelper">
+              <Bell />
+              绑定/同步助手
+            </DropdownMenuItem>
             <!-- <DropdownMenuItem>
               <BadgeCheck />
               反馈
@@ -95,10 +103,7 @@ const helperStore = useDnfHelperStore();
             </DropdownMenuItem>
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
-          <DropdownMenuItem
-            :disabled="!helperStore.helperInfo"
-            @click="helperStore.helperInfo = null"
-          >
+          <DropdownMenuItem :disabled="!helperStore.helperInfo" @click="helperStore.logout()">
             <LogOut />
             取消绑定
           </DropdownMenuItem>

frontendNew/src/components/ui/accordion/Accordion.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
-import { AccordionRoot, useForwardPropsEmits } from 'reka-ui'
+import type { AccordionRootEmits, AccordionRootProps } from "reka-ui";
+import { AccordionRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<AccordionRootProps>()
-const emits = defineEmits<AccordionRootEmits>()
+const props = defineProps<AccordionRootProps>();
+const emits = defineEmits<AccordionRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>

frontendNew/src/components/ui/accordion/AccordionContent.vue

@@ -1,16 +1,21 @@
 <script setup lang="ts">
-import type { AccordionContentProps } from 'reka-ui'
-import { AccordionContent } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { AccordionContentProps } from "reka-ui";
+import { AccordionContent } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AccordionContentProps & { class?: string }>()
+const props = defineProps<AccordionContentProps & { class?: string }>();
 </script>
 
 <template>
   <AccordionContent
     data-slot="accordion-content"
     v-bind="props"
-    :class="cn('overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down', props.class)"
+    :class="
+      cn(
+        'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+        props.class,
+      )
+    "
   >
     <div class="pb-3 pt-0">
       <slot />

frontendNew/src/components/ui/accordion/AccordionItem.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { AccordionItemProps } from 'reka-ui'
-import { AccordionItem } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { AccordionItemProps } from "reka-ui";
+import { AccordionItem } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AccordionItemProps & { class?: string }>()
+const props = defineProps<AccordionItemProps & { class?: string }>();
 </script>
 
 <template>

frontendNew/src/components/ui/accordion/AccordionTrigger.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ChevronDown } from 'lucide-vue-next'
-import type { AccordionTriggerProps } from 'reka-ui'
-import { AccordionHeader, AccordionTrigger } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { ChevronDown } from "lucide-vue-next";
+import type { AccordionTriggerProps } from "reka-ui";
+import { AccordionHeader, AccordionTrigger } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AccordionTriggerProps & { class?: string }>()
+const props = defineProps<AccordionTriggerProps & { class?: string }>();
 </script>
 
 <template>
@@ -12,10 +12,17 @@ const props = defineProps<AccordionTriggerProps & { class?: string }>()
     <AccordionTrigger
       data-slot="accordion-trigger"
       v-bind="props"
-      :class="cn('group/accordion-trigger flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180', props.class)"
+      :class="
+        cn(
+          'group/accordion-trigger flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
     >
       <slot />
-      <ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      <ChevronDown
+        class="size-4 shrink-0 text-muted-foreground transition-transform duration-200"
+      />
     </AccordionTrigger>
   </AccordionHeader>
 </template>

frontendNew/src/components/ui/accordion/index.ts

@@ -1,4 +1,4 @@
-export { default as Accordion } from './Accordion.vue'
-export { default as AccordionItem } from './AccordionItem.vue'
-export { default as AccordionTrigger } from './AccordionTrigger.vue'
-export { default as AccordionContent } from './AccordionContent.vue'
+export { default as Accordion } from "./Accordion.vue";
+export { default as AccordionItem } from "./AccordionItem.vue";
+export { default as AccordionTrigger } from "./AccordionTrigger.vue";
+export { default as AccordionContent } from "./AccordionContent.vue";

frontendNew/src/components/ui/scroll-area/ScrollArea.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-import type { ScrollAreaRootProps } from 'reka-ui'
-import { ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { ScrollAreaRootProps } from "reka-ui";
+import { ScrollAreaRoot, ScrollAreaViewport } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ScrollAreaRootProps & { class?: string }>()
+const props = defineProps<ScrollAreaRootProps & { class?: string }>();
 </script>
 
 <template>
-  <ScrollAreaRoot data-slot="scroll-area" :class="cn('relative overflow-hidden', props.class)" v-bind="props">
+  <ScrollAreaRoot
+    data-slot="scroll-area"
+    :class="cn('relative overflow-hidden', props.class)"
+    v-bind="props"
+  >
     <ScrollAreaViewport class="size-full rounded-[inherit]">
       <slot />
     </ScrollAreaViewport>

frontendNew/src/components/ui/scroll-area/ScrollBar.vue

@@ -1,22 +1,26 @@
 <script setup lang="ts">
-import type { ScrollAreaScrollbarProps } from 'reka-ui'
-import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { ScrollAreaScrollbarProps } from "reka-ui";
+import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: string }>(), {
-  orientation: 'vertical',
-})
+  orientation: "vertical",
+});
 </script>
 
 <template>
   <ScrollAreaScrollbar
     data-slot="scroll-area-scrollbar"
     v-bind="props"
-    :class="cn(
-      'flex touch-none select-none p-px transition-colors',
-      props.orientation === 'vertical' ? 'h-full w-2.5 border-l border-l-transparent' : 'h-2.5 w-full border-t border-t-transparent',
-      props.class,
-    )"
+    :class="
+      cn(
+        'flex touch-none select-none p-px transition-colors',
+        props.orientation === 'vertical'
+          ? 'h-full w-2.5 border-l border-l-transparent'
+          : 'h-2.5 w-full border-t border-t-transparent',
+        props.class,
+      )
+    "
   >
     <ScrollAreaThumb data-slot="scroll-area-thumb" class="relative flex-1 rounded-full bg-border" />
   </ScrollAreaScrollbar>

frontendNew/src/components/ui/scroll-area/index.ts

@@ -1,2 +1,2 @@
-export { default as ScrollArea } from './ScrollArea.vue'
-export { default as ScrollBar } from './ScrollBar.vue'
+export { default as ScrollArea } from "./ScrollArea.vue";
+export { default as ScrollBar } from "./ScrollBar.vue";