dev

frontendNew/src/pages/Dcalc/DnfHelper/list.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import Button from "@/components/ui/button/Button.vue";
+import { computed } from "vue";
+import { Button } from "@/components/ui/button";
+// import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   Card,
   CardContent,
-  // CardDescription,
-  CardFooter,
+  CardDescription,
+  // CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
 import { useDnfHelperStore } from "@/stores/dnfhelper";
-import { RefreshCcw, Grip } from "lucide-vue-next";
+import { Grip, RefreshCcw } from "lucide-vue-next";
 
 const props = defineProps<{
   list: {
@@ -24,41 +26,58 @@ const props = defineProps<{
 const { list } = toRefs(props);
 
 const helperStore = useDnfHelperStore();
+
+const sortedList = computed(() => {
+  return [...list.value].sort((left, right) => right.fame - left.fame);
+});
+
+const formatFame = (fame: number) => {
+  return new Intl.NumberFormat("zh-CN").format(fame);
+};
 </script>
 
 <template>
   <header
-    class="bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4 justify-between"
+    class="sticky top-0 z-10 flex shrink-0 flex-col gap-3 border-b bg-background/95 px-1 py-2 backdrop-blur md:flex-row md:items-center md:justify-between px-6"
   >
     <div>
       <h1 class="text-lg font-semibold">角色列表</h1>
-      <p class="text-sm text-muted-foreground">共 {{ list.length }} 个角色</p>
+      <p class="text-sm text-muted-foreground">共 {{ sortedList.length }} 个角色</p>
     </div>
-    <div class="flex gap-4">
-      <Button variant="outline"> <Grip /> 其他职业 </Button>
+    <div class="flex flex-wrap gap-2">
+      <Button variant="outline" @click="$router.push('/dcalc/home')"> <Grip /> 选择职业 </Button>
       <Button
         variant="outline"
-        size="icon"
-        aria-label="Submit"
-        @click="helperStore.refleshHelperInfo(helperStore.helperInfo?.id)"
+        :disabled="helperStore.loading"
+        @click="helperStore.refreshHelperInfo(helperStore.helperInfo?.id)"
       >
-        <RefreshCcw />
+        <RefreshCcw :class="{ 'animate-spin': helperStore.loading }" />
+        刷新
       </Button>
+      <Button variant="secondary" @click="helperStore.logout">取消绑定</Button>
     </div>
   </header>
-  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 p-5 box-border">
-    <template v-for="item in list" :key="item.roleId">
+
+  <div class="grid grid-cols-1 gap-4 py-4 px-6 sm:grid-cols-2 xl:grid-cols-4">
+    <template v-for="item in sortedList" :key="item.roleId">
       <Card class="w-full">
-        <CardHeader>
-          <CardTitle>{{ item.roleJob }}</CardTitle>
+        <CardHeader class="pb-3">
+          <CardTitle class="text-base flex">
+            {{ item.roleName }}
+            <Button class="ml-auto" size="sm" variant="outline" @click="$router.push('/dcalc/home')"
+              >导入</Button
+            >
+          </CardTitle>
+          <CardDescription class="flex justify-between">
+            <span>
+              {{ item.roleJob }}
+            </span>
+            <span>名望: {{ formatFame(item.fame) }}</span>
+          </CardDescription>
         </CardHeader>
-        <CardContent class="flex items-center justify-center h-sm">
-          <img :src="item.avatarLink" alt="avatar" class="w-auto h-sm rounded-full object-cover" />
+        <CardContent class="flex items-center justify-center">
+          <img :src="item.avatarLink" :alt="item.roleName" class="h-40 w-auto rounded" />
         </CardContent>
-        <CardFooter class="flex justify-between">
-          <span>{{ item.roleName }}</span>
-          <span>{{ item.fame }} </span>
-        </CardFooter>
       </Card>
     </template>
   </div>