dev

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

@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import Button from "@/components/ui/button/Button.vue";
 import {
   Card,
   CardContent,
-  CardDescription,
+  // CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { RefreshCcw } from "lucide-vue-next";
 
 const props = defineProps<{
   list: {
@@ -22,6 +24,17 @@ const { list } = toRefs(props);
 </script>
 
 <template>
+  <header
+    class="bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4 justify-between"
+  >
+    <div>
+      <h1 class="text-lg font-semibold">角色列表</h1>
+      <p class="text-sm text-muted-foreground">共 {{ list.length }} 个角色</p>
+    </div>
+    <Button variant="outline" size="icon" aria-label="Submit">
+      <RefreshCcw />
+    </Button>
+  </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">
       <Card class="w-full">
@@ -29,7 +42,7 @@ const { list } = toRefs(props);
           <CardTitle>{{ item.roleJob }}</CardTitle>
         </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" />
+          <!-- <img :src="item.avatarLink" alt="avatar" class="w-auto h-sm rounded-full object-cover" /> -->
         </CardContent>
         <CardFooter class="flex justify-between">
           <span>{{ item.roleName }}</span>