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>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Button } from "@/components/ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { Spinner } from "@/components/ui/spinner";
+</script>
+<template>
+  <Empty class="w-full">
+    <EmptyHeader>
+      <EmptyMedia variant="icon">
+        <Spinner />
+      </EmptyMedia>
+      <EmptyTitle>同步数据中</EmptyTitle>
+      <EmptyDescription> 请稍候，正在处理从助手识别数据。请勿刷新页面。 </EmptyDescription>
+    </EmptyHeader>
+    <EmptyContent>
+      <Button variant="outline" size="sm"> 取消 </Button>
+    </EmptyContent>
+  </Empty>
+</template>