feat: add show account block status

cooderl · Mar 2, 2024 · e183407 · e183407
1 parent 0186f44
commit e183407
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 17 deletions.
diff --git a/apps/server/src/trpc/trpc.router.ts b/apps/server/src/trpc/trpc.router.ts
@@ -51,7 +51,9 @@ export class TrpcRouter {
           nextCursor = nextItem.id;
         }
 
+        const disabledAccounts = this.trpcService.getBlockedAccountIds();
         return {
+          blocks: disabledAccounts,
           items,
           nextCursor,
         };

diff --git a/apps/server/src/trpc/trpc.service.ts b/apps/server/src/trpc/trpc.service.ts
@@ -91,16 +91,20 @@ export class TrpcService {
     return dayjs.tz(new Date(), 'Asia/Shanghai').format('YYYY-MM-DD');
   }
 
-  private async getAvailableAccount() {
+  getBlockedAccountIds() {
     const today = this.getTodayDate();
     const disabledAccounts = blockedAccountsMap.get(today) || [];
     this.logger.debug('disabledAccounts: ', disabledAccounts);
+    return disabledAccounts.filter(Boolean);
+  }
 
+  private async getAvailableAccount() {
+    const disabledAccounts = this.getBlockedAccountIds();
     const account = await this.prismaService.account.findFirst({
       where: {
         status: statusMap.ENABLE,
         NOT: {
-          id: { in: disabledAccounts.filter(Boolean) },
+          id: { in: disabledAccounts },
         },
       },
     });

diff --git a/apps/web/src/components/StatusDropdown.tsx b/apps/web/src/components/StatusDropdown.tsx
@@ -6,12 +6,7 @@ import {
   DropdownItem,
   Button,
 } from '@nextui-org/react';
-
-const statusMap = {
-  0: '失效',
-  1: '启用',
-  2: '禁用',
-};
+import { statusMap } from '@web/constants';
 
 export function StatusDropdown({
   value = 1,
@@ -24,7 +19,7 @@ export function StatusDropdown({
     <Dropdown>
       <DropdownTrigger>
         <Button size="sm" variant="bordered" className="capitalize">
-          {statusMap[value]}
+          {statusMap[value].label}
         </Button>
       </DropdownTrigger>
       <DropdownMenu
@@ -38,10 +33,10 @@ export function StatusDropdown({
           onChange(+Array.from(keys)[0]);
         }}
       >
-        {Object.entries(statusMap).map(([value, label]) => {
+        {Object.entries(statusMap).map(([key, value]) => {
           return (
-            <DropdownItem key={`${value}`} value={`${value}`}>
-              {label}
+            <DropdownItem color={value.color} key={`${key}`} value={`${key}`}>
+              {value.label}
             </DropdownItem>
           );
         })}

diff --git a/apps/web/src/constants.ts b/apps/web/src/constants.ts
@@ -0,0 +1,5 @@
+export const statusMap = {
+  0: { label: '失效', color: 'danger' },
+  1: { label: '启用', color: 'success' },
+  2: { label: '禁用', color: 'warning' },
+} as const;
diff --git a/apps/web/src/pages/accounts/index.tsx b/apps/web/src/pages/accounts/index.tsx
@@ -12,13 +12,15 @@ import {
   TableColumn,
   TableHeader,
   TableRow,
+  Chip,
 } from '@nextui-org/react';
 import { QRCodeSVG } from 'qrcode.react';
 import { toast } from 'sonner';
 import { PlusIcon } from '@web/components/PlusIcon';
 import dayjs from 'dayjs';
 import { StatusDropdown } from '@web/components/StatusDropdown';
 import { trpc } from '@web/utils/trpc';
+import { statusMap } from '@web/constants';
 
 const AccountPage = () => {
   const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
@@ -97,11 +99,32 @@ const AccountPage = () => {
           loadingContent={<Spinner />}
         >
           {data?.items.map((item) => {
+            const isBlocked = data?.blocks.includes(item.id);
+
             return (
               <TableRow key={item.id}>
                 <TableCell>{item.id}</TableCell>
                 <TableCell>{item.name}</TableCell>
                 <TableCell>
+                  {isBlocked ? (
+                    <Chip className="capitalize" size="sm" variant="flat">
+                      今日小黑屋
+                    </Chip>
+                  ) : (
+                    <Chip
+                      className="capitalize"
+                      color={statusMap[item.status].color}
+                      size="sm"
+                      variant="flat"
+                    >
+                      {statusMap[item.status].label}
+                    </Chip>
+                  )}
+                </TableCell>
+                <TableCell>
+                  {dayjs(item.updatedAt).format('YYYY-MM-DD')}
+                </TableCell>
+                <TableCell className="flex gap-2">
                   <StatusDropdown
                     value={item.status}
                     onChange={(value) => {
@@ -114,11 +137,7 @@ const AccountPage = () => {
                       });
                     }}
                   ></StatusDropdown>
-                </TableCell>
-                <TableCell>
-                  {dayjs(item.updatedAt).format('YYYY-MM-DD')}
-                </TableCell>
-                <TableCell>
+
                   <Button
                     size="sm"
                     color="danger"